@elabs-ai/components-ui 4.2.0 → 5.0.0

package/dist/chunk-UPEMEBWH.js

@@ -0,0 +1,186 @@
+"use client";
+import {
+  Textarea
+} from "./chunk-KUAVM54Y.js";
+import {
+  Input
+} from "./chunk-XYACSO57.js";
+import {
+  Button
+} from "./chunk-VA2OONPE.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/input-group/input-group.tsx
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var inputGroupVariants = cva(
+  cn(
+    "group/input-group relative flex w-full flex-wrap items-center rounded-control transition-[color,box-shadow] duration-fast ease-standard",
+    // Grow to fit a textarea even when it's nested (e.g. wrapped in a
+    // `display:contents` body like PromptInputBody). `:has(>textarea)`
+    // misses through that wrapper, so match any descendant textarea.
+    "h-control has-[textarea]:h-auto",
+    // The compound indicator is the wrapper's, not the control's — the control
+    // is borderless and full-bleed, so a ring around IT would draw inside the
+    // well. `focus-ring-static` paints BOTH layers; the only geometry knob is
+    // `ring-offset-1`, which `outline-offset: calc(--tw-ring-offset-width + 2px)`
+    // tracks so ring and contour stay flush at the same radius. Do NOT add an
+    // `outline-*` utility here: `outline-1` re-declares
+    // `outline-style: var(--tw-outline-style)`, which `outline-none` on this
+    // same element used to pin to `none` — that pairing shipped, and it cancelled
+    // the contour on every composer, NumberInput and TagInput (#67 fix round 2).
+    "has-[[data-slot=input-group-control]:focus-visible]:focus-ring-static has-[[data-slot=input-group-control]:focus-visible]:ring-offset-1 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background",
+    "has-[[data-slot=input-group-control][aria-invalid=true]]:ring-2 has-[[data-slot=input-group-control][aria-invalid=true]]:ring-destructive"
+  ),
+  {
+    variants: {
+      variant: {
+        // The form-field look: the strong `--input` boundary is the field's
+        // sole structural cue, so it stays on the strong rung. Focus lands on
+        // the inner control, not this wrapper, so the border swap reads its
+        // `has-[:focus-visible]` state instead of its own `focus-visible`.
+        outline: "border border-input shadow-input has-[[data-slot=input-group-control]:focus-visible]:border-input-focus",
+        // The composer look (#194, research 08 §C.1/§D): a soft fill with the
+        // focus-within ring carrying focus — NO hard border. Separation comes
+        // from the fill (the chat footer already draws its own `border-t`).
+        surface: "bg-surface-muted",
+        // The double-card well (#254): a `bg-card` fill meant to nest inside
+        // an ALREADY-tinted outer frame (e.g. `bg-surface-muted`) — the outer
+        // tint is the redundant/complementary cue, so the well itself needs no
+        // border either. NOT universally "white": `--card`'s lightness
+        // relative to `--surface-muted` is theme-driven, same trade-off as the
+        // `bg-surface-muted`-as-a-well note above — raised (lighter than the
+        // outer frame) on light themes, recessed (darker) on dark and
+        // a low-chroma palette. The well still reads as a distinct, legible tone in every
+        // theme; only the light-themes' "raised" framing is theme-specific.
+        card: "bg-card"
+      }
+    },
+    defaultVariants: { variant: "outline" }
+  }
+);
+var InputGroup = forwardRef(function InputGroup2({ className, variant, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "data-slot": "input-group",
+      className: cn(inputGroupVariants({ variant }), className),
+      ...props
+    }
+  );
+});
+var inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center gap-2 py-1.5 text-body font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first ps-3 has-[>button]:ms-[-0.45rem]",
+        "inline-end": "order-last pe-3 has-[>button]:me-[-0.45rem]",
+        "block-start": "order-first w-full justify-start px-3 pt-2.5",
+        "block-end": "order-last w-full justify-start px-3 pt-0 pb-2.5"
+      }
+    },
+    defaultVariants: { align: "inline-start" }
+  }
+);
+var InputGroupAddon = forwardRef(function InputGroupAddon2({ className, align = "inline-start", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      ...props
+    }
+  );
+});
+var inputGroupButtonVariants = cva("flex items-center gap-2 text-body shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-sm px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-sm p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+    }
+  },
+  defaultVariants: { size: "xs" }
+});
+var InputGroupButton = forwardRef(function InputGroupButton2({ className, type = "button", variant = "ghost", size = "xs", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+});
+var InputGroupText = forwardRef(
+  function InputGroupText2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "flex items-center gap-2 text-body text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+var InputGroupInput = forwardRef(
+  function InputGroupInput2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        "data-slot": "input-group-control",
+        className: cn(
+          "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+var InputGroupTextarea = forwardRef(
+  function InputGroupTextarea2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        ref,
+        "data-slot": "input-group-control",
+        className: cn(
+          "flex-1 resize-none rounded-none border-0 bg-transparent py-2.5 shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+
+export {
+  inputGroupVariants,
+  InputGroup,
+  inputGroupAddonVariants,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea
+};
+//# sourceMappingURL=chunk-UPEMEBWH.js.map

package/dist/chunk-UPEMEBWH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/input-group/input-group.tsx"],"sourcesContent":["import { forwardRef, type ComponentProps } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"../button\";\nimport { Input } from \"../input\";\nimport { Textarea } from \"../textarea\";\n\nexport const inputGroupVariants = cva(\n  cn(\n    \"group/input-group relative flex w-full flex-wrap items-center rounded-control transition-[color,box-shadow] duration-fast ease-standard\",\n    // Grow to fit a textarea even when it's nested (e.g. wrapped in a\n    // `display:contents` body like PromptInputBody). `:has(>textarea)`\n    // misses through that wrapper, so match any descendant textarea.\n    \"h-control has-[textarea]:h-auto\",\n    // The compound indicator is the wrapper's, not the control's — the control\n    // is borderless and full-bleed, so a ring around IT would draw inside the\n    // well. `focus-ring-static` paints BOTH layers; the only geometry knob is\n    // `ring-offset-1`, which `outline-offset: calc(--tw-ring-offset-width + 2px)`\n    // tracks so ring and contour stay flush at the same radius. Do NOT add an\n    // `outline-*` utility here: `outline-1` re-declares\n    // `outline-style: var(--tw-outline-style)`, which `outline-none` on this\n    // same element used to pin to `none` — that pairing shipped, and it cancelled\n    // the contour on every composer, NumberInput and TagInput (#67 fix round 2).\n    \"has-[[data-slot=input-group-control]:focus-visible]:focus-ring-static has-[[data-slot=input-group-control]:focus-visible]:ring-offset-1 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background\",\n    \"has-[[data-slot=input-group-control][aria-invalid=true]]:ring-2 has-[[data-slot=input-group-control][aria-invalid=true]]:ring-destructive\",\n  ),\n  {\n    variants: {\n      variant: {\n        // The form-field look: the strong `--input` boundary is the field's\n        // sole structural cue, so it stays on the strong rung. Focus lands on\n        // the inner control, not this wrapper, so the border swap reads its\n        // `has-[:focus-visible]` state instead of its own `focus-visible`.\n        outline:\n          \"border border-input shadow-input has-[[data-slot=input-group-control]:focus-visible]:border-input-focus\",\n        // The composer look (#194, research 08 §C.1/§D): a soft fill with the\n        // focus-within ring carrying focus — NO hard border. Separation comes\n        // from the fill (the chat footer already draws its own `border-t`).\n        surface: \"bg-surface-muted\",\n        // The double-card well (#254): a `bg-card` fill meant to nest inside\n        // an ALREADY-tinted outer frame (e.g. `bg-surface-muted`) — the outer\n        // tint is the redundant/complementary cue, so the well itself needs no\n        // border either. NOT universally \"white\": `--card`'s lightness\n        // relative to `--surface-muted` is theme-driven, same trade-off as the\n        // `bg-surface-muted`-as-a-well note above — raised (lighter than the\n        // outer frame) on light themes, recessed (darker) on dark and\n        // a low-chroma palette. The well still reads as a distinct, legible tone in every\n        // theme; only the light-themes' \"raised\" framing is theme-specific.\n        card: \"bg-card\",\n      },\n    },\n    defaultVariants: { variant: \"outline\" },\n  },\n);\n\nexport type InputGroupProps = ComponentProps<\"div\"> & VariantProps<typeof inputGroupVariants>;\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n  { className, variant, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      data-slot=\"input-group\"\n      className={cn(inputGroupVariants({ variant }), className)}\n      {...props}\n    />\n  );\n});\n\nexport const inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center gap-2 py-1.5 text-body font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first ps-3 has-[>button]:ms-[-0.45rem]\",\n        \"inline-end\": \"order-last pe-3 has-[>button]:me-[-0.45rem]\",\n        \"block-start\": \"order-first w-full justify-start px-3 pt-2.5\",\n        \"block-end\": \"order-last w-full justify-start px-3 pt-0 pb-2.5\",\n      },\n    },\n    defaultVariants: { align: \"inline-start\" },\n  },\n);\n\nexport const InputGroupAddon = forwardRef<\n  HTMLDivElement,\n  ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>\n>(function InputGroupAddon({ className, align = \"inline-start\", ...props }, ref) {\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      {...props}\n    />\n  );\n});\n\nconst inputGroupButtonVariants = cva(\"flex items-center gap-2 text-body shadow-none\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-sm px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\n      \"icon-xs\": \"size-6 rounded-sm p-0 has-[>svg]:p-0\",\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  defaultVariants: { size: \"xs\" },\n});\n\nexport const InputGroupButton = forwardRef<\n  HTMLButtonElement,\n  Omit<ComponentProps<typeof Button>, \"size\"> & {\n    size?: \"xs\" | \"sm\" | \"icon-xs\" | \"icon-sm\";\n  }\n>(function InputGroupButton(\n  { className, type = \"button\", variant = \"ghost\", size = \"xs\", ...props },\n  ref,\n) {\n  return (\n    <Button\n      ref={ref}\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n});\n\nexport const InputGroupText = forwardRef<HTMLSpanElement, ComponentProps<\"span\">>(\n  function InputGroupText({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          \"flex items-center gap-2 text-body text-muted-foreground [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const InputGroupInput = forwardRef<HTMLInputElement, ComponentProps<typeof Input>>(\n  function InputGroupInput({ className, ...props }, ref) {\n    return (\n      <Input\n        ref={ref}\n        data-slot=\"input-group-control\"\n        className={cn(\n          \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const InputGroupTextarea = forwardRef<HTMLTextAreaElement, ComponentProps<typeof Textarea>>(\n  function InputGroupTextarea({ className, ...props }, ref) {\n    return (\n      <Textarea\n        ref={ref}\n        data-slot=\"input-group-control\"\n        className={cn(\n          \"flex-1 resize-none rounded-none border-0 bg-transparent py-2.5 shadow-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":"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","names":["InputGroup","InputGroupAddon","InputGroupButton","InputGroupText","InputGroupInput","InputGroupTextarea"]}

package/dist/chunk-UQHWOPUY.js

@@ -0,0 +1,61 @@
+"use client";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/scroll-area/scroll-area.tsx
+import { forwardRef } from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ScrollArea = forwardRef(
+  function ScrollArea2({ className, children, viewportProps, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      ScrollAreaPrimitive.Root,
+      {
+        ref,
+        className: cn("relative overflow-hidden", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            ScrollAreaPrimitive.Viewport,
+            {
+              ...viewportProps,
+              className: cn(
+                "size-full rounded-[inherit]",
+                // A viewport made focusable needs a visible ring, like every other tab stop.
+                viewportProps?.tabIndex !== void 0 && "focus-ring-inset",
+                viewportProps?.className
+              ),
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollBar, {}),
+          /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+        ]
+      }
+    );
+  }
+);
+var ScrollBar = forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      ref,
+      orientation,
+      className: cn(
+        "flex touch-none select-none transition-colors",
+        orientation === "vertical" && "h-full w-2.5 border-s border-s-transparent p-px",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    }
+  );
+});
+
+export {
+  ScrollArea,
+  ScrollBar
+};
+//# sourceMappingURL=chunk-UQHWOPUY.js.map

package/dist/chunk-UQHWOPUY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { cn } from \"../../lib/cn\";\n\nexport interface ScrollAreaProps extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {\n  /**\n   * Props for the scrolling VIEWPORT — the element that actually overflows, which is\n   * otherwise unreachable from the outside.\n   *\n   * The viewport is deliberately NOT focusable by default: when the content inside it is\n   * focusable (a list of links, rows of buttons) a keyboard user reaches the overflow by\n   * tabbing through it, and a tab stop on the viewport would be noise. When the content is\n   * plain text or non-focusable rows, that same user cannot scroll it at all — axe's\n   * `scrollable-region-focusable` is the gate that catches it. Make it a named tab stop the\n   * way `ChartFrame` does for its scrolling body:\n   *\n   * ```tsx\n   * viewportProps={{ tabIndex: 0, role: \"group\", \"aria-label\": \"Scrollable list\" }}\n   * ```\n   *\n   * `role=\"group\"` rather than `\"region\"`: ARIA 1.2 forbids `aria-label` on a generic\n   * element, and `group` gives the name a host without adding a landmark.\n   */\n  viewportProps?: ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>;\n}\n\nexport const ScrollArea = forwardRef<ElementRef<typeof ScrollAreaPrimitive.Root>, ScrollAreaProps>(\n  function ScrollArea({ className, children, viewportProps, ...props }, ref) {\n    return (\n      <ScrollAreaPrimitive.Root\n        ref={ref}\n        className={cn(\"relative overflow-hidden\", className)}\n        {...props}\n      >\n        <ScrollAreaPrimitive.Viewport\n          {...viewportProps}\n          className={cn(\n            \"size-full rounded-[inherit]\",\n            // A viewport made focusable needs a visible ring, like every other tab stop.\n            viewportProps?.tabIndex !== undefined && \"focus-ring-inset\",\n            viewportProps?.className,\n          )}\n        >\n          {children}\n        </ScrollAreaPrimitive.Viewport>\n        <ScrollBar />\n        <ScrollAreaPrimitive.Corner />\n      </ScrollAreaPrimitive.Root>\n    );\n  },\n);\n\nexport const ScrollBar = forwardRef<\n  ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(function ScrollBar({ className, orientation = \"vertical\", ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      ref={ref}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none select-none transition-colors\",\n        orientation === \"vertical\" && \"h-full w-2.5 border-s border-s-transparent p-px\",\n        orientation === \"horizontal\" && \"h-2.5 flex-col border-t border-t-transparent p-px\",\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 rounded-full bg-border\" />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n});\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkE;AAC3E,YAAY,yBAAyB;AA4B/B,SAKE,KALF;AAHC,IAAM,aAAa;AAAA,EACxB,SAASA,YAAW,EAAE,WAAW,UAAU,eAAe,GAAG,MAAM,GAAG,KAAK;AACzE,WACE;AAAA,MAAqB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,WAAW,GAAG,4BAA4B,SAAS;AAAA,QAClD,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAqB;AAAA,YAApB;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT;AAAA;AAAA,gBAEA,eAAe,aAAa,UAAa;AAAA,gBACzC,eAAe;AAAA,cACjB;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,aAAU;AAAA,UACX,oBAAqB,4BAApB,EAA2B;AAAA;AAAA;AAAA,IAC9B;AAAA,EAEJ;AACF;AAEO,IAAM,YAAY,WAGvB,SAASC,WAAU,EAAE,WAAW,cAAc,YAAY,GAAG,MAAM,GAAG,KAAK;AAC3E,SACE;AAAA,IAAqB;AAAA,IAApB;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,cAAc;AAAA,QAC9B,gBAAgB,gBAAgB;AAAA,QAChC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAqB,qCAApB,EAAoC,WAAU,0CAAyC;AAAA;AAAA,EAC1F;AAEJ,CAAC;","names":["ScrollArea","ScrollBar"]}

package/dist/chunk-UQRYTMR7.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-UQRYTMR7.js.map

package/dist/chunk-UQRYTMR7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-URVAZW44.js

@@ -0,0 +1,323 @@
+"use client";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/card/card.tsx
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  useCallback
+} from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var cardVariants = cva(
+  "rounded-lg border border-card-border bg-card text-card-foreground shadow-card",
+  {
+    variants: {
+      // Opt-in hover-lift for clickable cards. Gated by --motion-factor via the
+      // duration-* utility; the transform is neutralized under OS reduced-motion
+      // (the shadow/border still respond — "reduced != none").
+      interactive: {
+        true: "cursor-pointer transition-[translate,box-shadow,border-color] duration-base ease-standard hover:-translate-y-1 hover:border-ring/40 hover:shadow-md focus-ring motion-reduce:hover:translate-y-0",
+        false: ""
+      }
+    },
+    defaultVariants: { interactive: false }
+  }
+);
+var cardDetailVariants = cva("group grid overflow-hidden", {
+  variants: {
+    detailPlacement: { side: "", bottom: "" },
+    detailReveal: { fixed: "", hover: "" }
+  },
+  compoundVariants: [
+    {
+      detailPlacement: "side",
+      detailReveal: "fixed",
+      class: "grid-cols-[minmax(0,1fr)_var(--card-detail-size)]"
+    },
+    {
+      detailPlacement: "bottom",
+      detailReveal: "fixed",
+      class: "grid-rows-[minmax(0,1fr)_var(--card-detail-size)]"
+    },
+    {
+      detailPlacement: "side",
+      detailReveal: "hover",
+      class: "grid-cols-[minmax(0,1fr)_0px] transition-[grid-template-columns] duration-base ease-standard hover:grid-cols-[minmax(0,1fr)_var(--card-detail-size)] focus-within:grid-cols-[minmax(0,1fr)_var(--card-detail-size)] motion-reduce:transition-none"
+    },
+    {
+      detailPlacement: "bottom",
+      detailReveal: "hover",
+      class: "grid-rows-[minmax(0,1fr)_0px] transition-[grid-template-rows] duration-base ease-standard hover:grid-rows-[minmax(0,1fr)_var(--card-detail-size)] focus-within:grid-rows-[minmax(0,1fr)_var(--card-detail-size)] motion-reduce:transition-none"
+    }
+  ],
+  defaultVariants: { detailPlacement: "side", detailReveal: "fixed" }
+});
+function CardWithHoverDetail({
+  className,
+  interactive,
+  detail,
+  detailPlacement = "side",
+  detailReveal: _detailReveal,
+  detailSize,
+  detailLabel = "Details",
+  style,
+  children,
+  ...props
+}) {
+  const [isRevealed, setIsRevealed] = useState(false);
+  const containerRef = useRef(null);
+  const concealRafRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (concealRafRef.current !== null) cancelAnimationFrame(concealRafRef.current);
+    };
+  }, []);
+  const reveal = useCallback(() => setIsRevealed(true), []);
+  const conceal = useCallback(() => {
+    concealRafRef.current = requestAnimationFrame(() => {
+      concealRafRef.current = null;
+      if (containerRef.current && !containerRef.current.contains(document.activeElement)) {
+        setIsRevealed(false);
+      }
+    });
+  }, []);
+  const handleMouseEnter = reveal;
+  const handleMouseLeave = useCallback(() => {
+    if (containerRef.current && !containerRef.current.contains(document.activeElement)) {
+      setIsRevealed(false);
+    }
+  }, []);
+  const handleFocusIn = reveal;
+  const handleFocusOut = conceal;
+  const size = detailSize ?? (detailPlacement === "side" ? "16rem" : "auto");
+  const dividerEdge = detailPlacement === "side" ? "border-s" : "border-t";
+  const dividerColor = isRevealed ? "border-border transition-colors duration-base ease-standard motion-reduce:transition-none" : "border-transparent transition-colors duration-base ease-standard motion-reduce:transition-none";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      "data-slot": "card",
+      className: cn(
+        cardVariants({ interactive }),
+        cardDetailVariants({ detailPlacement, detailReveal: "hover" }),
+        className
+      ),
+      style: { "--card-detail-size": size, ...style },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocusIn,
+      onBlur: handleFocusOut,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0 overflow-hidden", children }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "region",
+            "aria-label": detailLabel,
+            "aria-hidden": !isRevealed,
+            "data-slot": "card-detail",
+            className: cn("overflow-hidden bg-background p-6", dividerEdge, dividerColor),
+            children: detail
+          }
+        )
+      ]
+    }
+  );
+}
+var Card = forwardRef(function Card2({
+  className,
+  interactive,
+  stacked,
+  detail,
+  detailPlacement = "side",
+  detailReveal = "fixed",
+  detailSize,
+  detailLabel = "Details",
+  style,
+  children,
+  ...props
+}, ref) {
+  if (detail == null) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card",
+        className: cn(cardVariants({ interactive }), stacked && "hairline-stack", className),
+        style,
+        ...props,
+        children
+      }
+    );
+  }
+  if (detailReveal === "hover") {
+    return /* @__PURE__ */ jsx(
+      CardWithHoverDetail,
+      {
+        className,
+        interactive,
+        detail,
+        detailPlacement,
+        detailSize,
+        detailLabel,
+        style,
+        ...props,
+        children
+      }
+    );
+  }
+  const size = detailSize ?? (detailPlacement === "side" ? "16rem" : "auto");
+  const dividerEdge = detailPlacement === "side" ? "border-s" : "border-t";
+  const dividerColor = "border-border";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "card",
+      className: cn(
+        cardVariants({ interactive }),
+        cardDetailVariants({ detailPlacement, detailReveal }),
+        className
+      ),
+      style: { "--card-detail-size": size, ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0 overflow-hidden", children }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "region",
+            "aria-label": detailLabel,
+            "data-slot": "card-detail",
+            className: cn("overflow-hidden bg-background p-6", dividerEdge, dividerColor),
+            children: detail
+          }
+        )
+      ]
+    }
+  );
+});
+var CardHeader = forwardRef(
+  function CardHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card-header",
+        className: cn(
+          "flex flex-col gap-1.5 p-6",
+          "has-data-[slot=card-action]:grid has-data-[slot=card-action]:auto-rows-min has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-action]:items-start",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+var CardTitle = forwardRef(function CardTitle2({ className, as: Tag = "div", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      "data-slot": "card-title",
+      className: cn("text-title leading-(--card-title-leading)", className),
+      ...props
+    }
+  );
+});
+var CardDescription = forwardRef(
+  function CardDescription2({ className, measure, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        "data-slot": "card-description",
+        className: cn(
+          "text-body text-balance text-muted-foreground",
+          measure && "max-w-prose",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+var CardAction = forwardRef(
+  function CardAction2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card-action",
+        className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+        ...props
+      }
+    );
+  }
+);
+var cardMediaVariants = cva("flex min-h-40 items-center justify-center p-6", {
+  variants: {
+    ground: {
+      hatch: "bg-hairline-hatch",
+      dots: "bg-dot-grid",
+      none: ""
+    },
+    // The ground is never flat: it fades across the well. Literal classes (not
+    // an interpolated one) so Tailwind can see them.
+    fade: {
+      edges: "[--paper-fade:var(--deco-fade-edges)]",
+      top: "[--paper-fade:var(--deco-fade-top)]",
+      bottom: "[--paper-fade:var(--deco-fade-bottom)]",
+      center: "[--paper-fade:var(--deco-fade-center)]"
+    }
+  },
+  defaultVariants: { ground: "hatch", fade: "edges" }
+});
+var CardMedia = forwardRef(function CardMedia2({ className, ground, fade, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-media",
+      className: cn(cardMediaVariants({ ground, fade }), className),
+      ...props
+    }
+  );
+});
+var CardContent = forwardRef(
+  function CardContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, "data-slot": "card-content", className: cn("p-6 pt-0", className), ...props });
+  }
+);
+var CardFooter = forwardRef(
+  function CardFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "card-footer",
+        className: cn("flex items-center p-6 pt-0", className),
+        ...props
+      }
+    );
+  }
+);
+
+export {
+  cardVariants,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardAction,
+  CardMedia,
+  CardContent,
+  CardFooter
+};
+//# sourceMappingURL=chunk-URVAZW44.js.map

package/dist/chunk-URVAZW44.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/card/card.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useCallback,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\n\n// `rounded-lg` is the shared \"container radius\" rung (= --radius-lg = var(--radius),\n// 4px). Card, Alert (rounded-lg), and the markdown editor directive chrome all read\n// this one rung so the SAME logical block shows ONE radius across editor↔preview\n// (was rounded-xl = 8px, whose meaning silently changed with the --radius-xl override\n// — see #19). Overlays (Dialog/AlertDialog) deliberately use a larger rung.\nexport const cardVariants = cva(\n  \"rounded-lg border border-card-border bg-card text-card-foreground shadow-card\",\n  {\n    variants: {\n      // Opt-in hover-lift for clickable cards. Gated by --motion-factor via the\n      // duration-* utility; the transform is neutralized under OS reduced-motion\n      // (the shadow/border still respond — \"reduced != none\").\n      interactive: {\n        true: \"cursor-pointer transition-[translate,box-shadow,border-color] duration-base ease-standard hover:-translate-y-1 hover:border-ring/40 hover:shadow-md focus-ring motion-reduce:hover:translate-y-0\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { interactive: false },\n  },\n);\n\n// Grid container for the OPTIONAL detail panel — applied only when `detail` is set.\n// `fixed` keeps the panel track at its full size; `hover` collapses it to 0 at rest and\n// animates it open on the card's own hover AND keyboard `focus-within`, while the `main`\n// region (overflow-hidden) yields the space so the OUTER card size stays constant.\n// Layout-animation trade-off: prefer `fixed` in very dense grids (animating grid tracks\n// is more expensive than a static layout). Motion is tokened + snaps under reduced-motion.\nconst cardDetailVariants = cva(\"group grid overflow-hidden\", {\n  variants: {\n    detailPlacement: { side: \"\", bottom: \"\" },\n    detailReveal: { fixed: \"\", hover: \"\" },\n  },\n  compoundVariants: [\n    {\n      detailPlacement: \"side\",\n      detailReveal: \"fixed\",\n      class: \"grid-cols-[minmax(0,1fr)_var(--card-detail-size)]\",\n    },\n    {\n      detailPlacement: \"bottom\",\n      detailReveal: \"fixed\",\n      class: \"grid-rows-[minmax(0,1fr)_var(--card-detail-size)]\",\n    },\n    {\n      detailPlacement: \"side\",\n      detailReveal: \"hover\",\n      class:\n        \"grid-cols-[minmax(0,1fr)_0px] transition-[grid-template-columns] duration-base ease-standard hover:grid-cols-[minmax(0,1fr)_var(--card-detail-size)] focus-within:grid-cols-[minmax(0,1fr)_var(--card-detail-size)] motion-reduce:transition-none\",\n    },\n    {\n      detailPlacement: \"bottom\",\n      detailReveal: \"hover\",\n      class:\n        \"grid-rows-[minmax(0,1fr)_0px] transition-[grid-template-rows] duration-base ease-standard hover:grid-rows-[minmax(0,1fr)_var(--card-detail-size)] focus-within:grid-rows-[minmax(0,1fr)_var(--card-detail-size)] motion-reduce:transition-none\",\n    },\n  ],\n  defaultVariants: { detailPlacement: \"side\", detailReveal: \"fixed\" },\n});\n\nexport interface CardProps\n  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {\n  /**\n   * Optional detail-panel content. **Undefined → a plain card** (today's single `<div>` —\n   * no grid, no panel, zero behaviour change).\n   */\n  detail?: ReactNode;\n  /** Which edge the detail panel sits on. @default \"side\" */\n  detailPlacement?: \"side\" | \"bottom\";\n  /**\n   * `fixed` (default, accessible) → panel always visible. `hover` → hidden at rest, revealed\n   * on hover **and** keyboard `focus-within` at a FIXED outer footprint (the main content\n   * yields the space; no surrounding reflow). Use `hover` for **supplementary** detail only —\n   * essential content must use `fixed`. @default \"fixed\"\n   */\n  detailReveal?: \"fixed\" | \"hover\";\n  /** Detail track size (any CSS length). @default \"16rem\" (side) / \"auto\" (bottom) */\n  detailSize?: string;\n  /** Accessible label for the detail region. @default \"Details\" */\n  detailLabel?: string;\n  /**\n   * Opt-in hairline gesture: the edges of two sheets stacked behind the card's\n   * top edge (the `hairline-stack` utility). It draws OUTSIDE the card, so it\n   * needs ~12px of room above and a card that does not clip — a plain card, not\n   * a `detail` one (whose grid is `overflow-hidden`). @default false\n   */\n  stacked?: boolean;\n}\n\n/**\n * Inner component for `detailReveal=\"hover\"` — needs hooks to track\n * hover/focus-within and drive `aria-hidden` on the detail panel so the\n * collapsed state is correctly hidden from the accessibility tree (WCAG 1.3.1 /\n * 2.4.3). When collapsed, AT cannot reach the detail controls.\n */\nfunction CardWithHoverDetail({\n  className,\n  interactive,\n  detail,\n  detailPlacement = \"side\",\n  detailReveal: _detailReveal,\n  detailSize,\n  detailLabel = \"Details\",\n  style,\n  children,\n  ...props\n}: CardProps) {\n  const [isRevealed, setIsRevealed] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const concealRafRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (concealRafRef.current !== null) cancelAnimationFrame(concealRafRef.current);\n    };\n  }, []);\n\n  const reveal = useCallback(() => setIsRevealed(true), []);\n  const conceal = useCallback(() => {\n    // Only conceal if focus has truly left the card (not moved to detail).\n    // Use requestAnimationFrame so the new focusIn event fires first.\n    // Tracked in a ref so it can be cancelled if the card unmounts before the\n    // frame fires (a focus-out right before navigation away, say).\n    concealRafRef.current = requestAnimationFrame(() => {\n      concealRafRef.current = null;\n      if (containerRef.current && !containerRef.current.contains(document.activeElement)) {\n        setIsRevealed(false);\n      }\n    });\n  }, []);\n\n  const handleMouseEnter = reveal;\n  const handleMouseLeave = useCallback(() => {\n    // Conceal on mouse-leave only if focus is not inside the card.\n    if (containerRef.current && !containerRef.current.contains(document.activeElement)) {\n      setIsRevealed(false);\n    }\n  }, []);\n\n  const handleFocusIn = reveal;\n  const handleFocusOut = conceal;\n\n  const size = detailSize ?? (detailPlacement === \"side\" ? \"16rem\" : \"auto\");\n  const dividerEdge = detailPlacement === \"side\" ? \"border-s\" : \"border-t\";\n  const dividerColor = isRevealed\n    ? \"border-border transition-colors duration-base ease-standard motion-reduce:transition-none\"\n    : \"border-transparent transition-colors duration-base ease-standard motion-reduce:transition-none\";\n\n  return (\n    <div\n      ref={containerRef}\n      data-slot=\"card\"\n      className={cn(\n        cardVariants({ interactive }),\n        cardDetailVariants({ detailPlacement, detailReveal: \"hover\" }),\n        className,\n      )}\n      style={{ \"--card-detail-size\": size, ...style } as CSSProperties}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleFocusIn}\n      onBlur={handleFocusOut}\n      {...props}\n    >\n      <div className=\"min-h-0 min-w-0 overflow-hidden\">{children}</div>\n      {/* aria-hidden mirrors the visual collapsed state so AT does not reach\n          hidden controls. When revealed, it is removed so AT can navigate in. */}\n      <div\n        role=\"region\"\n        aria-label={detailLabel}\n        aria-hidden={!isRevealed}\n        data-slot=\"card-detail\"\n        className={cn(\"overflow-hidden bg-background p-6\", dividerEdge, dividerColor)}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    className,\n    interactive,\n    stacked,\n    detail,\n    detailPlacement = \"side\",\n    detailReveal = \"fixed\",\n    detailSize,\n    detailLabel = \"Details\",\n    style,\n    children,\n    ...props\n  },\n  ref,\n) {\n  // No detail → today's plain card, byte-for-byte (no grid, no panel, no behaviour change).\n  if (detail == null) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card\"\n        className={cn(cardVariants({ interactive }), stacked && \"hairline-stack\", className)}\n        style={style}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  // `hover` mode uses the inner component with JS-tracked reveal state so we can\n  // correctly set aria-hidden on the collapsed panel (WCAG 1.3.1 / 2.4.3 fix, #141).\n  if (detailReveal === \"hover\") {\n    // Note: ref is forwarded to the outer div inside CardWithHoverDetail via a\n    // callback approach — consumers rarely need a ref on a hover-detail card, but\n    // we still accept the prop and pass it down as a forwarded ref is not directly\n    // composable with an inner function component. We use a workaround via the\n    // ref prop name to keep the public API consistent.\n    return (\n      <CardWithHoverDetail\n        className={className}\n        interactive={interactive}\n        detail={detail}\n        detailPlacement={detailPlacement}\n        detailSize={detailSize}\n        detailLabel={detailLabel}\n        style={style}\n        {...props}\n      >\n        {children}\n      </CardWithHoverDetail>\n    );\n  }\n\n  const size = detailSize ?? (detailPlacement === \"side\" ? \"16rem\" : \"auto\");\n  const dividerEdge = detailPlacement === \"side\" ? \"border-s\" : \"border-t\";\n  // In `fixed` mode the divider is always the hairline border.\n  const dividerColor = \"border-border\";\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"card\"\n      className={cn(\n        cardVariants({ interactive }),\n        cardDetailVariants({ detailPlacement, detailReveal }),\n        className,\n      )}\n      style={{ \"--card-detail-size\": size, ...style } as CSSProperties}\n      {...props}\n    >\n      <div className=\"min-h-0 min-w-0 overflow-hidden\">{children}</div>\n      {/* Fixed panel: always visible. Labelled region for landmark navigation (#141 P3). */}\n      <div\n        role=\"region\"\n        aria-label={detailLabel}\n        data-slot=\"card-detail\"\n        className={cn(\"overflow-hidden bg-background p-6\", dividerEdge, dividerColor)}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n});\n\nexport const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardHeader({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-header\"\n        // With a `CardAction` inside, the header becomes the two-column grid the\n        // action's `col-start-2 row-span-2` placement assumes (title + description\n        // stack on the left, the action top-right); without one, nothing changes.\n        className={cn(\n          \"flex flex-col gap-1.5 p-6\",\n          \"has-data-[slot=card-action]:grid has-data-[slot=card-action]:auto-rows-min has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-action]:items-start\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nexport interface CardTitleProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Render as a different element — pick the semantic heading level so a\n   * card that titles a real page section contributes to the document outline\n   * (#328). The visual (`text-title leading-none`) is identical regardless of\n   * tag. @default \"div\"\n   */\n  as?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\n// Ref generic is `HTMLDivElement`, not `HTMLElement`: every member of the `as`\n// union (div, h1-h6) carries the same deprecated `align` member, so they are\n// structurally interchangeable — but the bare `HTMLElement` supertype is NOT\n// (it lacks `align`), which is what the polymorphic <Tag ref={ref}> below\n// requires TS to check against for every possible tag.\nexport const CardTitle = forwardRef<HTMLDivElement, CardTitleProps>(function CardTitle(\n  { className, as: Tag = \"div\", ...props },\n  ref,\n) {\n  return (\n    <Tag\n      ref={ref}\n      data-slot=\"card-title\"\n      className={cn(\"text-title leading-(--card-title-leading)\", className)}\n      {...props}\n    />\n  );\n});\n\nexport interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Cap the line length to a readable prose measure (`max-w-prose`, ~65ch)\n   * for genuine paragraph content (#339). Off by default — short,\n   * subtitle-style descriptions should stay full width.\n   */\n  measure?: boolean;\n}\n\nexport const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  function CardDescription({ className, measure, ...props }, ref) {\n    return (\n      <p\n        ref={ref}\n        data-slot=\"card-description\"\n        // `text-balance` sets `text-wrap: balance`. #336's real defect was an\n        // invalid, misspelled utility name that emitted zero CSS (NOT a\n        // tailwind-merge conflict) — this is the real, registered class.\n        className={cn(\n          \"text-body text-balance text-muted-foreground\",\n          measure && \"max-w-prose\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const CardAction = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardAction({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-action\"\n        className={cn(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", className)}\n        {...props}\n      />\n    );\n  },\n);\n\nconst cardMediaVariants = cva(\"flex min-h-40 items-center justify-center p-6\", {\n  variants: {\n    ground: {\n      hatch: \"bg-hairline-hatch\",\n      dots: \"bg-dot-grid\",\n      none: \"\",\n    },\n    // The ground is never flat: it fades across the well. Literal classes (not\n    // an interpolated one) so Tailwind can see them.\n    fade: {\n      edges: \"[--paper-fade:var(--deco-fade-edges)]\",\n      top: \"[--paper-fade:var(--deco-fade-top)]\",\n      bottom: \"[--paper-fade:var(--deco-fade-bottom)]\",\n      center: \"[--paper-fade:var(--deco-fade-center)]\",\n    },\n  },\n  defaultVariants: { ground: \"hatch\", fade: \"edges\" },\n});\n\nexport interface CardMediaProps\n  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardMediaVariants> {}\n\n/**\n * The card's media WELL — the recessed region that holds an illustration, a\n * mini chart, a product fragment or a logo grid. Its ground is a faded hairline\n * hatch by default (`ground=\"dots\"` for a dot field, `\"none\"` for a bare well),\n * painted on an inert layer behind the media, so whatever you put in it sits ON\n * the texture and is never tinted or masked by it.\n *\n * Place it above `CardHeader` (media first) or below `CardContent`. It centres\n * its children; pass `className` to change that.\n */\nexport const CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(function CardMedia(\n  { className, ground, fade, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"card-media\"\n      className={cn(cardMediaVariants({ ground, fade }), className)}\n      {...props}\n    />\n  );\n});\n\nexport const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardContent({ className, ...props }, ref) {\n    return (\n      <div ref={ref} data-slot=\"card-content\" className={cn(\"p-6 pt-0\", className)} {...props} />\n    );\n  },\n);\n\nexport const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function CardFooter({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-footer\"\n        className={cn(\"flex items-center p-6 pt-0\", className)}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":"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","names":["Card","CardHeader","CardTitle","CardDescription","CardAction","CardMedia","CardContent","CardFooter"]}

package/dist/chunk-USI4LB3N.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-USI4LB3N.js.map

package/dist/chunk-USI4LB3N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}