@particle-academy/react-fancy 5.29.0 → 5.30.0

package/docs/Card.md

@@ -1,6 +1,6 @@
 # Card
 
-A container component with optional header, body, and footer sections. Uses `Object.assign` to expose compound sub-components.
+A container with optional media, header, body and footer sections. `Object.assign` exposes the sub-components as compound members (`Card.Header`, `Card.Bleed`, …).
 
 ## Import
 
@@ -16,53 +16,203 @@ import { Card } from "@particle-academy/react-fancy";
 </Card>
 ```
 
+## Padding sits on the children, not the card
+
+This is the one thing worth knowing before anything else, because most of the
+rest follows from it. `padding` compiles to `[&>*]:px-4 [&>*]:py-3` — an inset
+on every **direct child** of the card, not on the card itself.
+
+That is why a full-bleed child (`Card.Media`, `Card.Bleed`) can opt out with
+`!px-0` instead of having to undo padding already baked into the frame, and why
+there is no `gap` prop: each child carries its own `py-*`, so two adjacent
+sections already have twice that between their content.
+
+It also means anything that must line up with the content's edge — an inset
+divider, a bleed — is derived from the **padding step**, never from `size`.
+`size` only picks the default step; `padding` overrides it.
+
 ## Card Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| variant | `"outlined" \| "elevated" \| "flat"` | `"outlined"` | Visual variant |
-| padding | `"none" \| "sm" \| "md" \| "lg"` | `"md"` | Padding applied to child sections |
+| variant | `"outlined" \| "elevated" \| "flat" \| "muted" \| "soft"` | `"outlined"` | Surface treatment. `outlined` is untinted with a border; `elevated` adds `shadow-md`; `soft` → `flat` → `muted` is a ramp of increasingly strong tints, all borderless |
+| size | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` | Scales padding and corner radius together, and is inherited by `Card.Media` and `Card.Bleed` |
+| padding | `"none" \| "xs" \| "sm" \| "md" \| "lg"` | the step `size` implies | The inset applied to every direct child. Pass it to override `size`, including `"none"` |
+| sections | `"divided" \| "plain" \| "banded"` | `"divided"` | How `Card.Header` / `Card.Footer` are set apart: a hairline rule, nothing, or a tinted band |
+| dividerInset | `boolean` | `false` | With `sections="divided"`, stop the rules at the content's edge instead of running them across the card |
+| highlight | `boolean` | `false` | A 1px hairline just inside the top edge — white at 70% in light mode, white at 10% in dark. Reads on a tinted or elevated surface; invisible on an untinted white one |
+| interactive | `boolean` | `false` | Card is a link or a grid tile: hover lift, border and shadow response, and `overflow-hidden` so a `Card.Media` is clipped to the rounded corners |
 
 Also extends all native `<div>` HTML attributes.
 
+`sections`, `size`, `padding` and `dividerInset` are passed down through context,
+so the sub-components never need them repeated.
+
 ## Sub-Components
 
-### Card.Header
+### Card.Media
+
+The fixed-ratio media region at the top of a card: a thumbnail, gradient or
+solid swatch, with slots pinned to its corners. Opts out of the card's padding,
+and rounds its top corners to match the card's `size`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| src | `string` | - | Image URL. Omit for a pure colour or gradient tile |
+| alt | `string` | `""` | Alt text for the image |
+| ratio | `string` | `"16/9"` | CSS `aspect-ratio`. Ignored when `height` is set |
+| height | `number \| string` | - | Fixed height instead of an aspect ratio |
+| background | `string` | - | Any CSS background value. Shows **under** the image — while it loads, and permanently if it never arrives, so a missing thumbnail degrades to a colour rather than a hole |
+| objectPosition | `string` | `"center"` | `object-position` for the image |
+| loading | `"lazy" \| "eager"` | `"lazy"` | Image loading strategy |
+| topLeft / topRight / bottomLeft / bottomRight | `ReactNode` | - | Slots pinned to the media's corners — a number chip, a status pill |
+
+### Card.Header / Card.Footer
+
+The same component with the rule on opposite edges. Either can be composed from
+props, or given `children` for full control.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| heading | `ReactNode` | - | The title. Rendered through `<Heading>` and tagged `data-react-fancy-card-heading` |
+| headingLevel | `"h1"…"h6"` | `"h3"` | Which heading element to render |
+| description | `ReactNode` | - | Supporting line under the heading. Rendered through a muted `<Text>`, tagged `data-react-fancy-card-description` |
+| actions | `ReactNode` | - | Controls pushed to the far end, vertically centred on the heading. Tagged `data-react-fancy-card-actions` |
+| size | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` | **Only used with no `Card` above** — a standalone section has no card to inherit a size from |
+| children | `ReactNode` | - | Full control. **Wins over** `heading` / `description` / `actions` rather than rendering alongside them |
 
-Renders a section with a bottom border. Accepts all `<div>` HTML attributes.
+Both work **standalone**, outside a `Card`, as a section heading above one. A
+standalone section pads itself and draws no rule — there is no card whose edge
+it could be dividing.
 
 ### Card.Body
 
-Renders a plain content section. Accepts all `<div>` HTML attributes.
+A plain content section. Carries no classes of its own: the card pads it through
+`[&>*]`. Accepts all `<div>` HTML attributes.
 
-### Card.Footer
+### Card.Bleed
 
-Renders a section with a top border. Accepts all `<div>` HTML attributes.
+Runs content out to the card's edges — an image, a table, a chart strip.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| edges | `"x" \| "top" \| "bottom" \| "all"` | `"x"` | Which edges to reach. `"x"` is the sides only, which is what an inline image or table wants |
+
+Two cases, handled automatically:
+
+- **Inside a `Card.Header` / `Card.Body` / `Card.Footer`** — the padding is on
+  that section, so the bleed escapes it with a negative margin.
+- **As a direct child of `Card`** — the bleed *is* the padded element, so it
+  zeroes its own padding instead. A negative margin here would pull the content
+  clean outside the card.
+
+`edges` cancels the padding of **the element the bleed sits in**, which is the
+card's edge only when the bleed is actually at that edge. `edges="top"` on a
+bleed halfway down a body pulls it up over the preceding content instead — use
+`"top"` when the bleed is the first thing in the card, `"bottom"` when it is the
+last, and `"x"` everywhere in between.
+
+Corners are rounded only where the content meets the card, so a mid-body strip
+stays square while one at the top follows the card's radius.
 
 ## Examples
 
-### Full card with sections
+### Full card with a composed header
+
+No layout wrapper from the caller — `heading` / `description` / `actions` lay
+themselves out.
 
 ```tsx
-<Card variant="elevated" padding="lg">
-  <Card.Header>
-    <h3 className="font-semibold">Settings</h3>
-  </Card.Header>
+<Card variant="elevated" size="lg">
+  <Card.Header
+    heading="Billing"
+    description="Cards, invoices and receipts"
+    actions={<Button size="sm">Edit</Button>}
+  />
   <Card.Body>
-    <p>Configure your preferences below.</p>
+    <Text>Configure your preferences below.</Text>
   </Card.Body>
-  <Card.Footer>
-    <button>Save</button>
-  </Card.Footer>
+  <Card.Footer actions={<Button>Save</Button>} />
 </Card>
 ```
 
-### Flat card without header
+### A media card
 
 ```tsx
-<Card variant="flat">
+<Card interactive>
+  <Card.Media
+    src="/covers/atlas.jpg"
+    alt="Atlas"
+    background="linear-gradient(135deg,#6366f1,#8b5cf6)"
+    topRight={<Badge>new</Badge>}
+  />
+  <Card.Header heading="Atlas" description="Updated 2 days ago" />
+</Card>
+```
+
+`background` is not decoration: it shows while the image loads and stays if the
+image never arrives.
+
+### Seamless sections
+
+```tsx
+<Card sections="plain">
+  <Card.Header heading="No rules" />
+  <Card.Body>…</Card.Body>
+</Card>
+```
+
+`"banded"` tints the header and footer instead; `dividerInset` keeps the rules
+but stops them at the content's edge.
+
+### A full-bleed table
+
+```tsx
+<Card>
+  <Card.Header heading="Invoices" />
   <Card.Body>
-    <p>A simple flat card.</p>
+    <Card.Bleed>
+      <Table data={invoices} />
+    </Card.Bleed>
   </Card.Body>
 </Card>
 ```
+
+### A heading above a card
+
+```tsx
+<Card.Header heading="Team" description="4 members" actions={<Button size="sm">Invite</Button>} />
+<Card>
+  <Card.Body>…</Card.Body>
+</Card>
+```
+
+### An escape hatch
+
+`children` wins over the composition props, so an unusual header is still a
+`Card.Header`:
+
+```tsx
+<Card>
+  <Card.Header>
+    <Profile name="Ada" role="Owner" />
+  </Card.Header>
+  <Card.Body>…</Card.Body>
+</Card>
+```
+
+## Data attributes
+
+| Selector | Element |
+|----------|---------|
+| `[data-react-fancy-card]` | the card |
+| `[data-react-fancy-card-media]` | `Card.Media` |
+| `[data-react-fancy-card-header]` | `Card.Header` |
+| `[data-react-fancy-card-body]` | `Card.Body` |
+| `[data-react-fancy-card-footer]` | `Card.Footer` |
+| `[data-react-fancy-card-bleed]` | `Card.Bleed` |
+| `[data-react-fancy-card-heading]` | the `heading` a section rendered |
+| `[data-react-fancy-card-description]` | the `description` a section rendered |
+| `[data-react-fancy-card-actions]` | the `actions` a section rendered |
+
+See [STYLE.md](../STYLE.md) for theming through these.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "5.29.0",
+  "version": "5.30.0",
   "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
   "repository": {
     "type": "git",

package/dist/Card-BZ5F6-wd.d.cts

@@ -1,50 +0,0 @@
-import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
-
-interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    variant?: "outlined" | "elevated" | "flat";
-    padding?: "none" | "sm" | "md" | "lg";
-    /**
-     * Card is a link or a grid tile: adds the hover lift + border/shadow
-     * response, and clips children to the rounded corners so a `Card.Media`
-     * sits flush.
-     */
-    interactive?: boolean;
-}
-interface CardMediaProps extends HTMLAttributes<HTMLDivElement> {
-    /** Image URL. Omit for a pure colour/gradient tile. */
-    src?: string;
-    alt?: string;
-    /** CSS `aspect-ratio`. Default `"16/9"`. Ignored when `height` is set. */
-    ratio?: string;
-    /** Fixed height instead of an aspect ratio. */
-    height?: number | string;
-    /**
-     * Shown UNDER the image — while it loads, and permanently if it never
-     * arrives. Any CSS background value, so a gradient works.
-     */
-    background?: string;
-    /** `object-position` for the image. Default `"center"`. */
-    objectPosition?: string;
-    loading?: "lazy" | "eager";
-    /** Slots pinned to the media's corners — a number chip, a status pill. */
-    topLeft?: ReactNode;
-    topRight?: ReactNode;
-    bottomLeft?: ReactNode;
-    bottomRight?: ReactNode;
-}
-interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
-}
-interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
-}
-interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
-}
-
-declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>> & {
-    Media: react.ForwardRefExoticComponent<CardMediaProps & react.RefAttributes<HTMLDivElement>>;
-    Header: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
-    Body: react.ForwardRefExoticComponent<CardBodyProps & react.RefAttributes<HTMLDivElement>>;
-    Footer: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
-};
-
-export { type CardHeaderProps as C, type CardBodyProps as a, type CardFooterProps as b, type CardMediaProps as c, Card as d, type CardProps as e };

package/dist/Card-BZ5F6-wd.d.ts

@@ -1,50 +0,0 @@
-import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
-
-interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    variant?: "outlined" | "elevated" | "flat";
-    padding?: "none" | "sm" | "md" | "lg";
-    /**
-     * Card is a link or a grid tile: adds the hover lift + border/shadow
-     * response, and clips children to the rounded corners so a `Card.Media`
-     * sits flush.
-     */
-    interactive?: boolean;
-}
-interface CardMediaProps extends HTMLAttributes<HTMLDivElement> {
-    /** Image URL. Omit for a pure colour/gradient tile. */
-    src?: string;
-    alt?: string;
-    /** CSS `aspect-ratio`. Default `"16/9"`. Ignored when `height` is set. */
-    ratio?: string;
-    /** Fixed height instead of an aspect ratio. */
-    height?: number | string;
-    /**
-     * Shown UNDER the image — while it loads, and permanently if it never
-     * arrives. Any CSS background value, so a gradient works.
-     */
-    background?: string;
-    /** `object-position` for the image. Default `"center"`. */
-    objectPosition?: string;
-    loading?: "lazy" | "eager";
-    /** Slots pinned to the media's corners — a number chip, a status pill. */
-    topLeft?: ReactNode;
-    topRight?: ReactNode;
-    bottomLeft?: ReactNode;
-    bottomRight?: ReactNode;
-}
-interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
-}
-interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
-}
-interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
-}
-
-declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>> & {
-    Media: react.ForwardRefExoticComponent<CardMediaProps & react.RefAttributes<HTMLDivElement>>;
-    Header: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
-    Body: react.ForwardRefExoticComponent<CardBodyProps & react.RefAttributes<HTMLDivElement>>;
-    Footer: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
-};
-
-export { type CardHeaderProps as C, type CardBodyProps as a, type CardFooterProps as b, type CardMediaProps as c, Card as d, type CardProps as e };

package/dist/chunk-5DQ2XUJI.cjs

@@ -1,173 +0,0 @@
-'use strict';
-
-var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-var CardHeader = react.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        "data-react-fancy-card-header": "",
-        className: chunkZU5Q77OT_cjs.cn(
-          "border-b border-zinc-200 dark:border-zinc-700",
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-CardHeader.displayName = "CardHeader";
-var CardBody = react.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        "data-react-fancy-card-body": "",
-        className: chunkZU5Q77OT_cjs.cn(className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-CardBody.displayName = "CardBody";
-var CardFooter = react.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        "data-react-fancy-card-footer": "",
-        className: chunkZU5Q77OT_cjs.cn(
-          "border-t border-zinc-200 dark:border-zinc-700",
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-CardFooter.displayName = "CardFooter";
-var CardMedia = react.forwardRef(
-  ({
-    src,
-    alt = "",
-    ratio = "16/9",
-    height,
-    background,
-    objectPosition = "center",
-    loading = "lazy",
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight,
-    className,
-    style,
-    children,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        "data-react-fancy-card-media": "",
-        className: chunkZU5Q77OT_cjs.cn(
-          "relative overflow-hidden rounded-t-lg",
-          // Card's `padding` prop pads EVERY direct child
-          // (`[&>*]:px-4 …`), which would inset the media and break the
-          // flush-to-the-edge look every caller wants. `!` wins regardless of
-          // stylesheet order, which plain `p-0` would not.
-          "!px-0 !py-0",
-          className
-        ),
-        style: {
-          ...height === void 0 ? { aspectRatio: ratio } : { height },
-          ...background ? { background } : null,
-          ...style
-        },
-        ...props,
-        children: [
-          src ? /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src,
-              alt,
-              loading,
-              className: "absolute inset-0 h-full w-full object-cover",
-              style: { objectPosition }
-            }
-          ) : null,
-          children,
-          topLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 top-2 z-10", children: topLeft }) : null,
-          topRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 top-2 z-10", children: topRight }) : null,
-          bottomLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-2 left-2 z-10", children: bottomLeft }) : null,
-          bottomRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-2 right-2 z-10", children: bottomRight }) : null
-        ]
-      }
-    );
-  }
-);
-CardMedia.displayName = "CardMedia";
-var variantClasses = {
-  outlined: "border border-zinc-200 dark:border-zinc-700",
-  elevated: "shadow-md border border-zinc-100 dark:border-zinc-800",
-  flat: "bg-zinc-50 dark:bg-zinc-800/50"
-};
-var paddingClasses = {
-  none: "",
-  sm: "[&>*]:px-3 [&>*]:py-2",
-  md: "[&>*]:px-4 [&>*]:py-3",
-  lg: "[&>*]:px-6 [&>*]:py-4"
-};
-var CardRoot = react.forwardRef(
-  ({
-    variant = "outlined",
-    padding = "md",
-    interactive = false,
-    className,
-    children,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        "data-react-fancy-card": "",
-        className: chunkZU5Q77OT_cjs.cn(
-          "rounded-lg bg-white dark:bg-zinc-900",
-          variantClasses[variant],
-          // `overflow-hidden` is part of `interactive` rather than always-on:
-          // clipping unconditionally would cut off popovers and dropdowns that
-          // legitimately overflow a static card.
-          interactive && "overflow-hidden transition hover:-translate-y-0.5 hover:shadow-lg hover:border-zinc-300 dark:hover:border-zinc-600",
-          paddingClasses[padding],
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-CardRoot.displayName = "Card";
-var Card = Object.assign(CardRoot, {
-  Media: CardMedia,
-  Header: CardHeader,
-  Body: CardBody,
-  Footer: CardFooter
-});
-
-exports.Card = Card;
-exports.CardBody = CardBody;
-exports.CardFooter = CardFooter;
-exports.CardHeader = CardHeader;
-exports.CardMedia = CardMedia;
-//# sourceMappingURL=chunk-5DQ2XUJI.cjs.map
-//# sourceMappingURL=chunk-5DQ2XUJI.cjs.map

package/dist/chunk-5DQ2XUJI.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Card/CardHeader.tsx","../src/components/Card/CardBody.tsx","../src/components/Card/CardFooter.tsx","../src/components/Card/CardMedia.tsx","../src/components/Card/Card.tsx"],"names":["forwardRef","jsx","cn","jsxs"],"mappings":"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","file":"chunk-5DQ2XUJI.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardHeaderProps } from \"./Card.types\";\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-card-header=\"\"\n        className={cn(\n          \"border-b border-zinc-200 dark:border-zinc-700\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nCardHeader.displayName = \"CardHeader\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardBodyProps } from \"./Card.types\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-card-body=\"\"\n        className={cn(className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nCardBody.displayName = \"CardBody\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardFooterProps } from \"./Card.types\";\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-card-footer=\"\"\n        className={cn(\n          \"border-t border-zinc-200 dark:border-zinc-700\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nCardFooter.displayName = \"CardFooter\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CardMediaProps } from \"./Card.types\";\n\n/**\n * The fixed-ratio media region at the top of a card: a thumbnail, gradient or\n * solid swatch, with slots pinned to its corners.\n *\n * This is `Card.Media` rather than a separate `<MediaCard>` because the thing\n * being asked for was never a different card — it was a card with a picture in\n * it. Four surfaces had each rebuilt exactly this (a gallery index, a package\n * grid, a starter-kit grid and a showcase grid) and one of them was already\n * wrapping `Card` and hand-rolling only this region.\n *\n * ## The `background` is not decoration\n *\n * It shows through while the image loads and stays visible if the image never\n * arrives. The gallery relied on that: each style card is keyed to a swatch, so\n * a missing screenshot degrades to the right colour rather than to a hole.\n */\nexport const CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(\n  (\n    {\n      src,\n      alt = \"\",\n      ratio = \"16/9\",\n      height,\n      background,\n      objectPosition = \"center\",\n      loading = \"lazy\",\n      topLeft,\n      topRight,\n      bottomLeft,\n      bottomRight,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-card-media=\"\"\n        className={cn(\n          \"relative overflow-hidden rounded-t-lg\",\n          // Card's `padding` prop pads EVERY direct child\n          // (`[&>*]:px-4 …`), which would inset the media and break the\n          // flush-to-the-edge look every caller wants. `!` wins regardless of\n          // stylesheet order, which plain `p-0` would not.\n          \"!px-0 !py-0\",\n          className,\n        )}\n        style={{\n          ...(height === undefined ? { aspectRatio: ratio } : { height }),\n          ...(background ? { background } : null),\n          ...style,\n        }}\n        {...props}\n      >\n        {src ? (\n          <img\n            src={src}\n            alt={alt}\n            loading={loading}\n            className=\"absolute inset-0 h-full w-full object-cover\"\n            style={{ objectPosition }}\n          />\n        ) : null}\n\n        {children}\n\n        {topLeft ? <span className=\"absolute left-2 top-2 z-10\">{topLeft}</span> : null}\n        {topRight ? <span className=\"absolute right-2 top-2 z-10\">{topRight}</span> : null}\n        {bottomLeft ? <span className=\"absolute bottom-2 left-2 z-10\">{bottomLeft}</span> : null}\n        {bottomRight ? <span className=\"absolute bottom-2 right-2 z-10\">{bottomRight}</span> : null}\n      </div>\n    );\n  },\n);\n\nCardMedia.displayName = \"CardMedia\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CardHeader } from \"./CardHeader\";\nimport { CardBody } from \"./CardBody\";\nimport { CardFooter } from \"./CardFooter\";\nimport { CardMedia } from \"./CardMedia\";\nimport type { CardProps } from \"./Card.types\";\n\nconst variantClasses: Record<NonNullable<CardProps[\"variant\"]>, string> = {\n  outlined: \"border border-zinc-200 dark:border-zinc-700\",\n  elevated: \"shadow-md border border-zinc-100 dark:border-zinc-800\",\n  flat: \"bg-zinc-50 dark:bg-zinc-800/50\",\n};\n\n/**\n * Padding is applied to the card's DIRECT CHILDREN rather than the card\n * itself, so a full-bleed child (`Card.Media`) can opt out with `!px-0`\n * without having to undo a padding that is already baked into the frame.\n *\n * The selector is `&>*`, not `&>div`. It was `&>div` until 5.24.0, which meant\n * the tag a caller happened to choose silently decided whether that child was\n * padded: `<Card><div>a</div><p>b</p></Card>` inset the div and left the\n * paragraph hard against the border. Nothing in the caller's code hinted at\n * the rule, and the result read as a bug in the card.\n */\nconst paddingClasses: Record<NonNullable<CardProps[\"padding\"]>, string> = {\n  none: \"\",\n  sm: \"[&>*]:px-3 [&>*]:py-2\",\n  md: \"[&>*]:px-4 [&>*]:py-3\",\n  lg: \"[&>*]:px-6 [&>*]:py-4\",\n};\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      variant = \"outlined\",\n      padding = \"md\",\n      interactive = false,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-card=\"\"\n        className={cn(\n          \"rounded-lg bg-white dark:bg-zinc-900\",\n          variantClasses[variant],\n          // `overflow-hidden` is part of `interactive` rather than always-on:\n          // clipping unconditionally would cut off popovers and dropdowns that\n          // legitimately overflow a static card.\n          interactive &&\n            \"overflow-hidden transition hover:-translate-y-0.5 hover:shadow-lg hover:border-zinc-300 dark:hover:border-zinc-600\",\n          paddingClasses[padding],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nCardRoot.displayName = \"Card\";\n\nexport const Card = Object.assign(CardRoot, {\n  Media: CardMedia,\n  Header: CardHeader,\n  Body: CardBody,\n  Footer: CardFooter,\n});\n"]}