Card

---
// src/components/ui/display/card/Card.astro — headless primitive (see ../../README.md).
// Compound root; pair with CardImage / CardHeader (Title/Description/Action) / CardContent /
// CardFooter. `variant` sets elevation, `size` is the one knob a theme reads to repad every part at
// once (the reference theme maps `data-size` to a `--card-p` custom property the parts inherit).
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & {
  variant?: "default" | "elevated" | "outline" | "interactive";
  size?: "sm" | "md" | "lg";
};

const { variant = "default", size = "md", class: className, ...rest } = Astro.props;
---

<div class={className} data-slot="card" data-variant={variant} data-size={size} {...rest}>
  <slot />
</div>

---
// src/components/ui/display/card/CardAction.astro — Card compound part (see ../../README.md).
// Drop inside CardHeader for a top-right action (button, dropdown, close). Its grid placement pins it
// to the reserved second column; CardHeader opens that column via `has-[card-action]`.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

const { class: className, ...rest } = Astro.props;
---

<div class={className} data-slot="card-action" {...rest}><slot /></div>

---
// src/components/ui/display/card/CardContent.astro — Card compound part (see ../../README.md).
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

const { class: className, ...rest } = Astro.props;
---

<div class={className} data-slot="card-content" {...rest}><slot /></div>

---
// src/components/ui/display/card/CardDescription.astro — Card compound part (see ../../README.md).
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"p">;

const { class: className, ...rest } = Astro.props;
---

<p class={className} data-slot="card-description" {...rest}><slot /></p>

---
// src/components/ui/display/card/CardFooter.astro — Card compound part (see ../../README.md).
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

const { class: className, ...rest } = Astro.props;
---

<div class={className} data-slot="card-footer" {...rest}><slot /></div>

---
// src/components/ui/display/card/CardHeader.astro — Card compound part (see ../../README.md).
// Grid so a CardAction can pin to the top-right: `has-[card-action]` opens a second column and the
// action places itself there (col-start-2, row-span-2), leaving title/description to flow down col 1.
// Rows are implicit (auto-rows-min) so a title-only header has no phantom trailing gutter; the action's
// row-span mints the second row only when present. With no action it's a plain single-column stack.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

const { class: className, ...rest } = Astro.props;
---

<div class={className} data-slot="card-header" {...rest}><slot /></div>

---
// src/components/ui/display/card/CardImage.astro — Card compound part (see ../../README.md).
// A plain <img>. Takes a raw/remote src string — for an optimized asset, skip this part and drop an
// astro:assets <Image data-slot="card-image" /> in its place; the theme keys on the attribute, so an
// <Image> styles identically.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"img">;

const { alt = "", class: className, ...rest } = Astro.props;
---

<img alt={alt} class={className} data-slot="card-image" {...rest} />

---
// src/components/ui/display/card/CardTitle.astro — Card compound part (see ../../README.md).
// <h3>: a card sits below a page's h2 sections. Change the level with a wrapping heading if needed.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"h3">;

const { class: className, ...rest } = Astro.props;
---

<h3 class={className} data-slot="card-title" {...rest}><slot /></h3>

import Card from "./Card.astro";
import CardAction from "./CardAction.astro";
import CardContent from "./CardContent.astro";
import CardDescription from "./CardDescription.astro";
import CardFooter from "./CardFooter.astro";
import CardHeader from "./CardHeader.astro";
import CardImage from "./CardImage.astro";
import CardTitle from "./CardTitle.astro";

export {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardImage,
  CardTitle,
};
export default Card;