@nationaldesignstudio/react 0.3.0 → 0.5.1

package/dist/components/atoms/tooltip/tooltip.js

@@ -0,0 +1,139 @@
+import { jsxs as T, jsx as r } from "react/jsx-runtime";
+import * as p from "react";
+import { tv as b, cnBase as f } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { floatingArrowVariants as x, FloatingArrowSvg as N } from "../../shared/floating-arrow.js";
+import { TooltipArrow as $ } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/arrow/TooltipArrow.js";
+import { TooltipPopup as h } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/popup/TooltipPopup.js";
+import { TooltipPortal as V } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/portal/TooltipPortal.js";
+import { TooltipPositioner as j } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/positioner/TooltipPositioner.js";
+import { TooltipProvider as E } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/provider/TooltipProvider.js";
+import { TooltipRoot as S } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/root/TooltipRoot.js";
+import { TooltipTrigger as c } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/tooltip/trigger/TooltipTrigger.js";
+const z = b({
+  base: [
+    // Layout - uses component tooltip tokens
+    "px-spatial-component-tooltip-padding-x py-spatial-component-tooltip-padding-y",
+    // Background and text - uses tooltip color tokens
+    "bg-tooltip-bg text-tooltip-text",
+    // Border radius - uses surface tooltip token
+    "rounded-surface-tooltip",
+    // Typography - uses semantic body text composite
+    "typography-body-sm-md font-medium",
+    // Shadow for elevation
+    "shadow-md",
+    // Allow arrow to extend outside popup bounds
+    "overflow-visible",
+    // Animation
+    "origin-[var(--transform-origin)]",
+    "transition-[transform,scale,opacity] duration-150",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+    "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    // Ensure it's above other content
+    "z-50"
+  ],
+  variants: {
+    variant: {
+      default: ""
+      // Future variants can be added here (e.g., light, primary)
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), B = x, C = ({ children: t, ...o }) => /* @__PURE__ */ r(E, { ...o, children: t }), l = ({ children: t, ...o }) => /* @__PURE__ */ r(S, { ...o, children: t }), n = p.forwardRef(
+  ({ className: t, children: o, ...i }, a) => p.isValidElement(o) ? /* @__PURE__ */ r(
+    c,
+    {
+      ref: a,
+      className: t,
+      render: o,
+      ...i
+    }
+  ) : /* @__PURE__ */ r(c, { ref: a, className: t, ...i, children: o })
+);
+n.displayName = "TooltipTrigger";
+const g = ({ children: t, ...o }) => /* @__PURE__ */ r(V, { ...o, children: t }), s = p.forwardRef(({ className: t, side: o = "top", sideOffset: i = 8, ...a }, e) => /* @__PURE__ */ r(
+  j,
+  {
+    ref: e,
+    side: o,
+    sideOffset: i,
+    className: t,
+    ...a
+  }
+));
+s.displayName = "TooltipPositioner";
+const m = p.forwardRef(
+  ({ className: t, variant: o, ...i }, a) => /* @__PURE__ */ r(
+    h,
+    {
+      ref: a,
+      role: "tooltip",
+      className: f(z({ variant: o }), t),
+      ...i
+    }
+  )
+);
+m.displayName = "TooltipPopup";
+const d = p.forwardRef(
+  ({ className: t, ...o }, i) => /* @__PURE__ */ r(
+    $,
+    {
+      ref: i,
+      className: f(B(), t),
+      ...o,
+      children: /* @__PURE__ */ r(N, { fillClassName: "fill-tooltip-bg" })
+    }
+  )
+);
+d.displayName = "TooltipArrow";
+const L = ({
+  content: t,
+  children: o,
+  side: i = "top",
+  sideOffset: a = 8,
+  align: e = "center",
+  delay: u,
+  closeDelay: P,
+  showArrow: y = !0,
+  open: w,
+  defaultOpen: v,
+  onOpenChange: R,
+  className: A
+}) => /* @__PURE__ */ T(
+  l,
+  {
+    open: w,
+    defaultOpen: v,
+    onOpenChange: R,
+    children: [
+      /* @__PURE__ */ r(n, { delay: u, closeDelay: P, children: o }),
+      /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(s, { side: i, sideOffset: a, align: e, children: /* @__PURE__ */ T(m, { className: A, children: [
+        y && /* @__PURE__ */ r(d, {}),
+        t
+      ] }) }) })
+    ]
+  }
+), M = Object.assign(l, {
+  Provider: C,
+  Root: l,
+  Trigger: n,
+  Portal: g,
+  Positioner: s,
+  Popup: m,
+  Arrow: d
+});
+export {
+  L as Tooltip,
+  d as TooltipArrow,
+  M as TooltipParts,
+  m as TooltipPopup,
+  g as TooltipPortal,
+  s as TooltipPositioner,
+  C as TooltipProvider,
+  l as TooltipRoot,
+  n as TooltipTrigger,
+  B as tooltipArrowVariants,
+  z as tooltipPopupVariants
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/components/atoms/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../../src/components/atoms/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip as BaseTooltip } from \"@base-ui-components/react/tooltip\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\nimport {\n\tFloatingArrowSvg,\n\tfloatingArrowVariants,\n} from \"../../shared/floating-arrow\";\n\n/**\n * Tooltip popup variants\n *\n * Uses semantic tokens for themeable styling:\n * - color.tooltip.bg - Dark background\n * - color.tooltip.text - Light text\n * - surface.tooltip.radius - Small border radius\n * - spatial.component.tooltip.padding-x/y - Consistent padding\n */\nconst tooltipPopupVariants = tv({\n\tbase: [\n\t\t// Layout - uses component tooltip tokens\n\t\t\"px-spatial-component-tooltip-padding-x py-spatial-component-tooltip-padding-y\",\n\t\t// Background and text - uses tooltip color tokens\n\t\t\"bg-tooltip-bg text-tooltip-text\",\n\t\t// Border radius - uses surface tooltip token\n\t\t\"rounded-surface-tooltip\",\n\t\t// Typography - uses semantic body text composite\n\t\t\"typography-body-sm-md font-medium\",\n\t\t// Shadow for elevation\n\t\t\"shadow-md\",\n\t\t// Allow arrow to extend outside popup bounds\n\t\t\"overflow-visible\",\n\t\t// Animation\n\t\t\"origin-[var(--transform-origin)]\",\n\t\t\"transition-[transform,scale,opacity] duration-150\",\n\t\t\"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n\t\t\"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n\t\t// Ensure it's above other content\n\t\t\"z-50\",\n\t],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: \"\",\n\t\t\t// Future variants can be added here (e.g., light, primary)\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t},\n});\n\n/**\n * Tooltip arrow variants - uses shared floating arrow variants\n */\nconst tooltipArrowVariants = floatingArrowVariants;\n\n// ============================================================================\n// Tooltip Provider\n// ============================================================================\n\nexport interface TooltipProviderProps extends BaseTooltip.Provider.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Tooltip Provider\n *\n * Manages shared delays across multiple tooltips.\n * Wrap your app or a section with this to enable tooltip delay grouping.\n */\nconst TooltipProvider = ({ children, ...props }: TooltipProviderProps) => {\n\treturn <BaseTooltip.Provider {...props}>{children}</BaseTooltip.Provider>;\n};\n\n// ============================================================================\n// Tooltip Root\n// ============================================================================\n\nexport interface TooltipRootProps extends BaseTooltip.Root.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Tooltip Root\n *\n * Groups all tooltip parts. Does not render an element.\n */\nconst TooltipRoot = ({ children, ...props }: TooltipRootProps) => {\n\treturn <BaseTooltip.Root {...props}>{children}</BaseTooltip.Root>;\n};\n\n// ============================================================================\n// Tooltip Trigger\n// ============================================================================\n\nexport interface TooltipTriggerProps\n\textends React.ComponentProps<typeof BaseTooltip.Trigger> {\n\tclassName?: string;\n}\n\n/**\n * Tooltip Trigger\n *\n * The element that triggers the tooltip on hover/focus.\n * Renders as the child element with tooltip behavior attached.\n * When children is a single React element, uses `render` prop to avoid wrapper element.\n */\nconst TooltipTrigger = React.forwardRef<HTMLButtonElement, TooltipTriggerProps>(\n\t({ className, children, ...props }, ref) => {\n\t\t// If children is a single React element, use render prop to avoid wrapper\n\t\tconst isSingleElement = React.isValidElement(children);\n\n\t\tif (isSingleElement) {\n\t\t\treturn (\n\t\t\t\t<BaseTooltip.Trigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\trender={children}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BaseTooltip.Trigger ref={ref} className={className} {...props}>\n\t\t\t\t{children}\n\t\t\t</BaseTooltip.Trigger>\n\t\t);\n\t},\n);\nTooltipTrigger.displayName = \"TooltipTrigger\";\n\n// ============================================================================\n// Tooltip Portal\n// ============================================================================\n\nexport interface TooltipPortalProps extends BaseTooltip.Portal.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Tooltip Portal\n *\n * Renders the tooltip popup in a portal outside the DOM hierarchy.\n */\nconst TooltipPortal = ({ children, ...props }: TooltipPortalProps) => {\n\treturn <BaseTooltip.Portal {...props}>{children}</BaseTooltip.Portal>;\n};\n\n// ============================================================================\n// Tooltip Positioner\n// ============================================================================\n\nexport interface TooltipPositionerProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BaseTooltip.Positioner>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\n/**\n * Tooltip Positioner\n *\n * Positions the tooltip popup relative to the trigger.\n */\nconst TooltipPositioner = React.forwardRef<\n\tHTMLDivElement,\n\tTooltipPositionerProps\n>(({ className, side = \"top\", sideOffset = 8, ...props }, ref) => {\n\treturn (\n\t\t<BaseTooltip.Positioner\n\t\t\tref={ref}\n\t\t\tside={side}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={className}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nTooltipPositioner.displayName = \"TooltipPositioner\";\n\n// ============================================================================\n// Tooltip Popup\n// ============================================================================\n\nexport interface TooltipPopupProps\n\textends Omit<React.ComponentProps<typeof BaseTooltip.Popup>, \"className\">,\n\t\tVariantProps<typeof tooltipPopupVariants> {\n\tclassName?: string;\n}\n\n/**\n * Tooltip Popup\n *\n * The tooltip content container with styled appearance.\n */\nconst TooltipPopup = React.forwardRef<HTMLDivElement, TooltipPopupProps>(\n\t({ className, variant, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseTooltip.Popup\n\t\t\t\tref={ref}\n\t\t\t\trole=\"tooltip\"\n\t\t\t\tclassName={cn(tooltipPopupVariants({ variant }), className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTooltipPopup.displayName = \"TooltipPopup\";\n\n// ============================================================================\n// Tooltip Arrow\n// ============================================================================\n\nexport interface TooltipArrowProps\n\textends Omit<React.ComponentProps<typeof BaseTooltip.Arrow>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Tooltip Arrow\n *\n * Visual pointer element for the tooltip.\n * Uses shared FloatingArrowSvg with tooltip-bg color token.\n */\nconst TooltipArrow = React.forwardRef<HTMLDivElement, TooltipArrowProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseTooltip.Arrow\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(tooltipArrowVariants(), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<FloatingArrowSvg fillClassName=\"fill-tooltip-bg\" />\n\t\t\t</BaseTooltip.Arrow>\n\t\t);\n\t},\n);\nTooltipArrow.displayName = \"TooltipArrow\";\n\n// ============================================================================\n// Simple Tooltip Component\n// ============================================================================\n\nexport interface TooltipProps {\n\t/** The content to show in the tooltip */\n\tcontent: React.ReactNode;\n\t/** The element that triggers the tooltip */\n\tchildren: React.ReactNode;\n\t/** Side of the trigger to show the tooltip */\n\tside?: \"top\" | \"bottom\" | \"left\" | \"right\";\n\t/** Offset from the trigger */\n\tsideOffset?: number;\n\t/** Alignment along the side */\n\talign?: \"start\" | \"center\" | \"end\";\n\t/** Delay before showing the tooltip (ms) */\n\tdelay?: number;\n\t/** Delay before hiding the tooltip (ms) */\n\tcloseDelay?: number;\n\t/** Whether to show an arrow */\n\tshowArrow?: boolean;\n\t/** Controlled open state */\n\topen?: boolean;\n\t/** Default open state */\n\tdefaultOpen?: boolean;\n\t/** Callback when open state changes */\n\tonOpenChange?: (open: boolean) => void;\n\t/** Additional className for the popup */\n\tclassName?: string;\n}\n\n/**\n * Tooltip\n *\n * A simple, pre-composed tooltip component for common use cases.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save your changes\">\n *   <Button>Save</Button>\n * </Tooltip>\n * ```\n */\nconst Tooltip = ({\n\tcontent,\n\tchildren,\n\tside = \"top\",\n\tsideOffset = 8,\n\talign = \"center\",\n\tdelay,\n\tcloseDelay,\n\tshowArrow = true,\n\topen,\n\tdefaultOpen,\n\tonOpenChange,\n\tclassName,\n}: TooltipProps) => {\n\treturn (\n\t\t<TooltipRoot\n\t\t\topen={open}\n\t\t\tdefaultOpen={defaultOpen}\n\t\t\tonOpenChange={onOpenChange}\n\t\t>\n\t\t\t<TooltipTrigger delay={delay} closeDelay={closeDelay}>\n\t\t\t\t{children}\n\t\t\t</TooltipTrigger>\n\t\t\t<TooltipPortal>\n\t\t\t\t<TooltipPositioner side={side} sideOffset={sideOffset} align={align}>\n\t\t\t\t\t<TooltipPopup className={className}>\n\t\t\t\t\t\t{showArrow && <TooltipArrow />}\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TooltipPopup>\n\t\t\t\t</TooltipPositioner>\n\t\t\t</TooltipPortal>\n\t\t</TooltipRoot>\n\t);\n};\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const TooltipParts = Object.assign(TooltipRoot, {\n\tProvider: TooltipProvider,\n\tRoot: TooltipRoot,\n\tTrigger: TooltipTrigger,\n\tPortal: TooltipPortal,\n\tPositioner: TooltipPositioner,\n\tPopup: TooltipPopup,\n\tArrow: TooltipArrow,\n});\n\nexport {\n\tTooltip,\n\tTooltipProvider,\n\tTooltipRoot,\n\tTooltipTrigger,\n\tTooltipPortal,\n\tTooltipPositioner,\n\tTooltipPopup,\n\tTooltipArrow,\n\ttooltipPopupVariants,\n\ttooltipArrowVariants,\n};\n"],"names":["tooltipPopupVariants","tv","tooltipArrowVariants","floatingArrowVariants","TooltipProvider","children","props","BaseTooltip.Provider","TooltipRoot","BaseTooltip.Root","TooltipTrigger","React","className","ref","jsx","BaseTooltip.Trigger","TooltipPortal","BaseTooltip.Portal","TooltipPositioner","side","sideOffset","BaseTooltip.Positioner","TooltipPopup","variant","BaseTooltip.Popup","cn","TooltipArrow","BaseTooltip.Arrow","FloatingArrowSvg","Tooltip","content","align","delay","closeDelay","showArrow","open","defaultOpen","onOpenChange","jsxs","TooltipParts"],"mappings":"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"}

package/dist/components/dev-tools/dev-toolbar/dev-toolbar.js

@@ -0,0 +1,134 @@
+import { jsxs as y, Fragment as C, jsx as n } from "react/jsx-runtime";
+import { useState as d, useRef as w, useCallback as l, useEffect as b } from "react";
+import { GridOverlay as N } from "../grid-overlay/grid-overlay.js";
+function R({ active: u }) {
+  return /* @__PURE__ */ y(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: u ? "2" : "1.5",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ n("rect", { x: "2", y: "2", width: "16", height: "16", rx: "2" }),
+        /* @__PURE__ */ n("line", { x1: "7", y1: "2", x2: "7", y2: "18" }),
+        /* @__PURE__ */ n("line", { x1: "13", y1: "2", x2: "13", y2: "18" })
+      ]
+    }
+  );
+}
+const E = 3;
+function B({ defaultExpanded: u = !1 }) {
+  const [h, D] = d(u), [f, L] = d(!1), [a, k] = d({ x: 0, y: 0 }), [i, m] = d(!1), c = w(!1), o = w(null), X = w(null), g = l(() => L((e) => !e), []), Y = l(() => D((e) => !e), []);
+  b(() => {
+    const e = (t) => {
+      (t.ctrlKey || t.metaKey) && t.key === "g" && (t.preventDefault(), g());
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [g]);
+  const p = l(
+    (e, t) => {
+      m(!0), c.current = !1, o.current = {
+        startX: e,
+        startY: t,
+        startPosX: a.x,
+        startPosY: a.y
+      };
+    },
+    [a]
+  ), v = l(
+    (e, t) => {
+      if (!i || !o.current) return;
+      const s = e - o.current.startX, r = t - o.current.startY;
+      (Math.abs(s) > E || Math.abs(r) > E) && (c.current = !0), k({
+        x: o.current.startPosX + s,
+        y: o.current.startPosY - r
+      });
+    },
+    [i]
+  ), x = l(() => {
+    m(!1), o.current = null;
+  }, []);
+  b(() => {
+    if (!i) return;
+    const e = (r) => v(r.clientX, r.clientY), t = (r) => {
+      r.touches[0] && v(r.touches[0].clientX, r.touches[0].clientY);
+    }, s = () => x();
+    return window.addEventListener("mousemove", e), window.addEventListener("mouseup", s), window.addEventListener("touchmove", t), window.addEventListener("touchend", s), () => {
+      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", s), window.removeEventListener("touchmove", t), window.removeEventListener("touchend", s);
+    };
+  }, [i, v, x]);
+  const G = (e) => {
+    e.preventDefault(), p(e.clientX, e.clientY);
+  }, M = (e) => {
+    e.touches[0] && p(e.touches[0].clientX, e.touches[0].clientY);
+  }, T = () => {
+    c.current || Y(), c.current = !1;
+  };
+  return /* @__PURE__ */ y(C, { children: [
+    f && /* @__PURE__ */ n(N, {}),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        ref: X,
+        className: "fixed bottom-4 left-1/2 z-[9999]",
+        style: {
+          transform: `translate(calc(-50% + ${a.x}px), ${-a.y}px)`
+        },
+        "data-testid": "dev-toolbar",
+        children: /* @__PURE__ */ y(
+          "div",
+          {
+            className: `bg-gray-1100 rounded-radius-16 shadow-lg flex flex-col items-center overflow-hidden px-12 py-8 ${h ? "gap-4" : ""}`,
+            children: [
+              /* @__PURE__ */ n(
+                "div",
+                {
+                  className: `
+							grid transition-all duration-300 ease-out
+							${h ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}
+						`,
+                  children: /* @__PURE__ */ n("div", { className: "overflow-hidden", children: /* @__PURE__ */ n(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: g,
+                      className: `
+									size-40 rounded-full flex items-center justify-center transition-colors
+									${f ? "text-gray-50" : "text-gray-400 hover:text-gray-50 hover:bg-alpha-white-10"}
+								`,
+                      title: "Toggle Grid (⌘G)",
+                      "aria-label": "Toggle grid overlay",
+                      children: /* @__PURE__ */ n(R, { active: f })
+                    }
+                  ) })
+                }
+              ),
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  onMouseDown: G,
+                  onTouchStart: M,
+                  onClick: T,
+                  className: `
+							w-32 h-4 bg-gray-50 rounded-full transition-opacity
+							${i ? "opacity-100 cursor-grabbing" : "opacity-60 hover:opacity-100 cursor-grab"}
+						`,
+                  "aria-label": h ? "Close dev tools" : "Open dev tools"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  B as DevToolbar
+};
+//# sourceMappingURL=dev-toolbar.js.map

package/dist/components/dev-tools/dev-toolbar/dev-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-toolbar.js","sources":["../../../../src/components/dev-tools/dev-toolbar/dev-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { GridOverlay } from \"../grid-overlay\";\n\nfunction GridIcon({ active }: { active?: boolean }) {\n\treturn (\n\t\t<svg\n\t\t\twidth=\"20\"\n\t\t\theight=\"20\"\n\t\t\tviewBox=\"0 0 20 20\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth={active ? \"2\" : \"1.5\"}\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<rect x=\"2\" y=\"2\" width=\"16\" height=\"16\" rx=\"2\" />\n\t\t\t<line x1=\"7\" y1=\"2\" x2=\"7\" y2=\"18\" />\n\t\t\t<line x1=\"13\" y1=\"2\" x2=\"13\" y2=\"18\" />\n\t\t</svg>\n\t);\n}\n\nexport interface DevToolbarProps {\n\tdefaultExpanded?: boolean;\n}\n\nconst DRAG_THRESHOLD = 3;\n\nexport function DevToolbar({ defaultExpanded = false }: DevToolbarProps) {\n\tconst [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\tconst [showGrid, setShowGrid] = useState(false);\n\tconst [position, setPosition] = useState({ x: 0, y: 0 });\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst hasDraggedRef = useRef(false);\n\tconst dragRef = useRef<{\n\t\tstartX: number;\n\t\tstartY: number;\n\t\tstartPosX: number;\n\t\tstartPosY: number;\n\t} | null>(null);\n\tconst toolbarRef = useRef<HTMLDivElement>(null);\n\n\tconst toggleGrid = useCallback(() => setShowGrid((prev) => !prev), []);\n\tconst toggleExpanded = useCallback(() => setIsExpanded((prev) => !prev), []);\n\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tif ((e.ctrlKey || e.metaKey) && e.key === \"g\") {\n\t\t\t\te.preventDefault();\n\t\t\t\ttoggleGrid();\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => window.removeEventListener(\"keydown\", handleKeyDown);\n\t}, [toggleGrid]);\n\n\tconst handleDragStart = useCallback(\n\t\t(clientX: number, clientY: number) => {\n\t\t\tsetIsDragging(true);\n\t\t\thasDraggedRef.current = false;\n\t\t\tdragRef.current = {\n\t\t\t\tstartX: clientX,\n\t\t\t\tstartY: clientY,\n\t\t\t\tstartPosX: position.x,\n\t\t\t\tstartPosY: position.y,\n\t\t\t};\n\t\t},\n\t\t[position],\n\t);\n\n\tconst handleDragMove = useCallback(\n\t\t(clientX: number, clientY: number) => {\n\t\t\tif (!isDragging || !dragRef.current) return;\n\n\t\t\tconst deltaX = clientX - dragRef.current.startX;\n\t\t\tconst deltaY = clientY - dragRef.current.startY;\n\n\t\t\tif (\n\t\t\t\tMath.abs(deltaX) > DRAG_THRESHOLD ||\n\t\t\t\tMath.abs(deltaY) > DRAG_THRESHOLD\n\t\t\t) {\n\t\t\t\thasDraggedRef.current = true;\n\t\t\t}\n\n\t\t\tsetPosition({\n\t\t\t\tx: dragRef.current.startPosX + deltaX,\n\t\t\t\ty: dragRef.current.startPosY - deltaY,\n\t\t\t});\n\t\t},\n\t\t[isDragging],\n\t);\n\n\tconst handleDragEnd = useCallback(() => {\n\t\tsetIsDragging(false);\n\t\tdragRef.current = null;\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (!isDragging) return;\n\n\t\tconst handleMouseMove = (e: MouseEvent) =>\n\t\t\thandleDragMove(e.clientX, e.clientY);\n\t\tconst handleTouchMove = (e: TouchEvent) => {\n\t\t\tif (e.touches[0])\n\t\t\t\thandleDragMove(e.touches[0].clientX, e.touches[0].clientY);\n\t\t};\n\t\tconst handleEnd = () => handleDragEnd();\n\n\t\twindow.addEventListener(\"mousemove\", handleMouseMove);\n\t\twindow.addEventListener(\"mouseup\", handleEnd);\n\t\twindow.addEventListener(\"touchmove\", handleTouchMove);\n\t\twindow.addEventListener(\"touchend\", handleEnd);\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"mousemove\", handleMouseMove);\n\t\t\twindow.removeEventListener(\"mouseup\", handleEnd);\n\t\t\twindow.removeEventListener(\"touchmove\", handleTouchMove);\n\t\t\twindow.removeEventListener(\"touchend\", handleEnd);\n\t\t};\n\t}, [isDragging, handleDragMove, handleDragEnd]);\n\n\tconst handleBarMouseDown = (e: React.MouseEvent) => {\n\t\te.preventDefault();\n\t\thandleDragStart(e.clientX, e.clientY);\n\t};\n\n\tconst handleBarTouchStart = (e: React.TouchEvent) => {\n\t\tif (e.touches[0]) {\n\t\t\thandleDragStart(e.touches[0].clientX, e.touches[0].clientY);\n\t\t}\n\t};\n\n\tconst handleBarClick = () => {\n\t\tif (!hasDraggedRef.current) {\n\t\t\ttoggleExpanded();\n\t\t}\n\t\thasDraggedRef.current = false;\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{showGrid && <GridOverlay />}\n\n\t\t\t<div\n\t\t\t\tref={toolbarRef}\n\t\t\t\tclassName=\"fixed bottom-4 left-1/2 z-[9999]\"\n\t\t\t\tstyle={{\n\t\t\t\t\ttransform: `translate(calc(-50% + ${position.x}px), ${-position.y}px)`,\n\t\t\t\t}}\n\t\t\t\tdata-testid=\"dev-toolbar\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`bg-gray-1100 rounded-radius-16 shadow-lg flex flex-col items-center overflow-hidden px-12 py-8 ${isExpanded ? \"gap-4\" : \"\"}`}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`\n\t\t\t\t\t\t\tgrid transition-all duration-300 ease-out\n\t\t\t\t\t\t\t${isExpanded ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\"}\n\t\t\t\t\t\t`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"overflow-hidden\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={toggleGrid}\n\t\t\t\t\t\t\t\tclassName={`\n\t\t\t\t\t\t\t\t\tsize-40 rounded-full flex items-center justify-center transition-colors\n\t\t\t\t\t\t\t\t\t${\n\t\t\t\t\t\t\t\t\t\tshowGrid\n\t\t\t\t\t\t\t\t\t\t\t? \"text-gray-50\"\n\t\t\t\t\t\t\t\t\t\t\t: \"text-gray-400 hover:text-gray-50 hover:bg-alpha-white-10\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t\t\ttitle=\"Toggle Grid (⌘G)\"\n\t\t\t\t\t\t\t\taria-label=\"Toggle grid overlay\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<GridIcon active={showGrid} />\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonMouseDown={handleBarMouseDown}\n\t\t\t\t\t\tonTouchStart={handleBarTouchStart}\n\t\t\t\t\t\tonClick={handleBarClick}\n\t\t\t\t\t\tclassName={`\n\t\t\t\t\t\t\tw-32 h-4 bg-gray-50 rounded-full transition-opacity\n\t\t\t\t\t\t\t${isDragging ? \"opacity-100 cursor-grabbing\" : \"opacity-60 hover:opacity-100 cursor-grab\"}\n\t\t\t\t\t\t`}\n\t\t\t\t\t\taria-label={isExpanded ? \"Close dev tools\" : \"Open dev tools\"}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"names":["GridIcon","active","jsxs","jsx","DRAG_THRESHOLD","DevToolbar","defaultExpanded","isExpanded","setIsExpanded","useState","showGrid","setShowGrid","position","setPosition","isDragging","setIsDragging","hasDraggedRef","useRef","dragRef","toolbarRef","toggleGrid","useCallback","prev","toggleExpanded","useEffect","handleKeyDown","e","handleDragStart","clientX","clientY","handleDragMove","deltaX","deltaY","handleDragEnd","handleMouseMove","handleTouchMove","handleEnd","handleBarMouseDown","handleBarTouchStart","handleBarClick","Fragment","GridOverlay"],"mappings":"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"}

package/dist/components/dev-tools/grid-overlay/grid-overlay.js

@@ -0,0 +1,36 @@
+import { jsx as r } from "react/jsx-runtime";
+function g({
+  columnOpacity: i = 0.15,
+  borderOpacity: l = 0.3,
+  visible: e = !0
+}) {
+  const d = Array.from({ length: 24 }, (a, t) => t);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: `
+				fixed inset-0 z-[9998] pointer-events-none overflow-hidden
+				transition-opacity duration-300 ease-out
+				${e ? "opacity-100" : "opacity-0"}
+			`,
+      "aria-hidden": "true",
+      "data-testid": "grid-overlay",
+      children: /* @__PURE__ */ r("div", { className: "h-full w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]", children: /* @__PURE__ */ r("div", { className: "h-full grid grid-cols-4 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]", children: d.map((a) => /* @__PURE__ */ r(
+        "div",
+        {
+          className: "h-full border border-red-500",
+          style: {
+            backgroundColor: `rgb(239 68 68 / ${i})`,
+            borderColor: `rgb(239 68 68 / ${l})`
+          },
+          "data-column": a + 1
+        },
+        a
+      )) }) })
+    }
+  );
+}
+export {
+  g as GridOverlay
+};
+//# sourceMappingURL=grid-overlay.js.map

package/dist/components/dev-tools/grid-overlay/grid-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-overlay.js","sources":["../../../../src/components/dev-tools/grid-overlay/grid-overlay.tsx"],"sourcesContent":["export interface GridOverlayProps {\n\tcolumnOpacity?: number;\n\tborderOpacity?: number;\n\tvisible?: boolean;\n}\n\nexport function GridOverlay({\n\tcolumnOpacity = 0.15,\n\tborderOpacity = 0.3,\n\tvisible = true,\n}: GridOverlayProps) {\n\tconst columns = Array.from({ length: 24 }, (_, i) => i);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`\n\t\t\t\tfixed inset-0 z-[9998] pointer-events-none overflow-hidden\n\t\t\t\ttransition-opacity duration-300 ease-out\n\t\t\t\t${visible ? \"opacity-100\" : \"opacity-0\"}\n\t\t\t`}\n\t\t\taria-hidden=\"true\"\n\t\t\tdata-testid=\"grid-overlay\"\n\t\t>\n\t\t\t<div className=\"h-full w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]\">\n\t\t\t\t<div className=\"h-full grid grid-cols-4 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]\">\n\t\t\t\t\t{columns.map((index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tclassName=\"h-full border border-red-500\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tbackgroundColor: `rgb(239 68 68 / ${columnOpacity})`,\n\t\t\t\t\t\t\t\tborderColor: `rgb(239 68 68 / ${borderOpacity})`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdata-column={index + 1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"names":["GridOverlay","columnOpacity","borderOpacity","visible","columns","_","i","jsx","index"],"mappings":";AAMO,SAASA,EAAY;AAAA,EAC3B,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,SAAAC,IAAU;AACX,GAAqB;AACpB,QAAMC,IAAU,MAAM,KAAK,EAAE,QAAQ,MAAM,CAACC,GAAGC,MAAMA,CAAC;AAEtD,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAW;AAAA;AAAA;AAAA,MAGRJ,IAAU,gBAAgB,WAAW;AAAA;AAAA,MAExC,eAAY;AAAA,MACZ,eAAY;AAAA,MAEZ,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,gKACd,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,uLACb,UAAAH,EAAQ,IAAI,CAACI,MACb,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UAEA,WAAU;AAAA,UACV,OAAO;AAAA,YACN,iBAAiB,mBAAmBN,CAAa;AAAA,YACjD,aAAa,mBAAmBC,CAAa;AAAA,UAAA;AAAA,UAE9C,eAAaM,IAAQ;AAAA,QAAA;AAAA,QANhBA;AAAA,MAAA,CAQN,GACF,EAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGH;"}

package/dist/components/organisms/card/card.d.ts

@@ -224,7 +224,7 @@ export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  * Uses spatial card tokens for consistent sizing.
  */
 declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
-declare const cardActionsVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex gap-spacing-12", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex gap-spacing-12", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+declare const cardActionsVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex gap-12", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex gap-12", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**

package/dist/components/organisms/card/card.js

@@ -0,0 +1,163 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as t from "react";
+import { tv as l } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const c = l({
+  base: "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid",
+  variants: {
+    layout: {
+      vertical: "w-full flex-col",
+      horizontal: "w-full flex-row",
+      /**
+       * Overlay layout - content sits on top of full-bleed background.
+       * Use with Background components for images/gradients.
+       */
+      overlay: "w-full flex-col"
+    }
+  },
+  defaultVariants: {
+    layout: "vertical"
+  }
+}), i = t.forwardRef(
+  ({ className: r, layout: a, ...e }, o) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: o,
+      className: c({ layout: a, class: r }),
+      ...e
+    }
+  )
+);
+i.displayName = "Card";
+const n = l({
+  base: [
+    "relative shrink-0 bg-bg-muted",
+    // Vertical: full width with aspect ratio
+    "aspect-video w-full",
+    // When in horizontal card (parent has flex-row), override
+    "[.flex-row>&]:aspect-auto [.flex-row>&]:w-2/5 [.flex-row>&]:self-stretch"
+  ]
+}), f = t.forwardRef(
+  ({ className: r, src: a, alt: e = "", ...o }, d) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: d,
+      className: n({ class: r }),
+      ...o,
+      children: a && /* @__PURE__ */ s(
+        "img",
+        {
+          src: a,
+          alt: e,
+          className: "absolute inset-0 size-full object-cover"
+        }
+      )
+    }
+  )
+);
+f.displayName = "CardImage";
+const p = l({
+  base: "flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding",
+  variants: {
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end"
+    }
+  }
+}), m = t.forwardRef(
+  ({ className: r, justify: a, ...e }, o) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: o,
+      className: p({ justify: a, class: r }),
+      ...e
+    }
+  )
+);
+m.displayName = "CardContent";
+const u = l({
+  base: "typography-overline text-text-muted uppercase tracking-wider"
+}), y = t.forwardRef(
+  ({ className: r, ...a }, e) => /* @__PURE__ */ s(
+    "p",
+    {
+      ref: e,
+      className: u({ class: r }),
+      ...a
+    }
+  )
+);
+y.displayName = "CardEyebrow";
+const w = l({
+  base: "typography-h5 text-text-primary"
+}), b = t.forwardRef(
+  ({ className: r, as: a = "h3", ...e }, o) => /* @__PURE__ */ s(
+    a,
+    {
+      ref: o,
+      className: w({ class: r }),
+      ...e
+    }
+  )
+);
+b.displayName = "CardTitle";
+const x = l({
+  base: "typography-body-small text-text-secondary"
+}), g = t.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ s(
+  "p",
+  {
+    ref: e,
+    className: x({ class: r }),
+    ...a
+  }
+));
+g.displayName = "CardDescription";
+const C = l({
+  base: "flex w-full flex-col gap-spatial-card-small-gap"
+}), v = t.forwardRef(
+  ({ className: r, ...a }, e) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: e,
+      className: C({ class: r }),
+      ...a
+    }
+  )
+);
+v.displayName = "CardBody";
+const N = l({
+  base: "flex gap-12"
+}), h = t.forwardRef(
+  ({ className: r, ...a }, e) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: e,
+      className: N({ class: r }),
+      ...a
+    }
+  )
+);
+h.displayName = "CardActions";
+export {
+  i as Card,
+  h as CardActions,
+  v as CardBody,
+  m as CardContent,
+  g as CardDescription,
+  y as CardEyebrow,
+  f as CardImage,
+  b as CardTitle,
+  N as cardActionsVariants,
+  C as cardBodyVariants,
+  p as cardContentVariants,
+  x as cardDescriptionVariants,
+  u as cardEyebrowVariants,
+  n as cardImageVariants,
+  w as cardTitleVariants,
+  c as cardVariants
+};
+//# sourceMappingURL=card.js.map

package/dist/components/organisms/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../../../src/components/organisms/card/card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nconst cardVariants = tv({\n\tbase: \"relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid\",\n\tvariants: {\n\t\tlayout: {\n\t\t\tvertical: \"w-full flex-col\",\n\t\t\thorizontal: \"w-full flex-row\",\n\t\t\t/**\n\t\t\t * Overlay layout - content sits on top of full-bleed background.\n\t\t\t * Use with Background components for images/gradients.\n\t\t\t */\n\t\t\toverlay: \"w-full flex-col\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tlayout: \"vertical\",\n\t},\n});\n\nexport interface CardProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof cardVariants> {}\n\n/**\n * Card component for displaying content in a contained, scannable format.\n *\n * Layouts:\n * - vertical: Image on top, content below (default)\n * - horizontal: Image on left, content on right\n * - overlay: Full-bleed background with content on top\n *\n * Use with CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, and CardActions.\n * For overlay layout, use Background components for full-bleed backgrounds.\n */\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n\t({ className, layout, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardVariants({ layout, class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCard.displayName = \"Card\";\n\nconst cardImageVariants = tv({\n\tbase: [\n\t\t\"relative shrink-0 bg-bg-muted\",\n\t\t// Vertical: full width with aspect ratio\n\t\t\"aspect-video w-full\",\n\t\t// When in horizontal card (parent has flex-row), override\n\t\t\"[.flex-row>&]:aspect-auto [.flex-row>&]:w-2/5 [.flex-row>&]:self-stretch\",\n\t],\n});\n\nexport interface CardImageProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * The image source URL\n\t */\n\tsrc?: string;\n\t/**\n\t * Alt text for the image\n\t */\n\talt?: string;\n}\n\n/**\n * Card image area. For vertical layout, displays with 16:9 aspect ratio.\n * For horizontal layout, takes up ~40% width and stretches to content height.\n */\nconst CardImage = React.forwardRef<HTMLDivElement, CardImageProps>(\n\t({ className, src, alt = \"\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardImageVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{src && (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={src}\n\t\t\t\t\t\talt={alt}\n\t\t\t\t\t\tclassName=\"absolute inset-0 size-full object-cover\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nCardImage.displayName = \"CardImage\";\n\nconst cardContentVariants = tv({\n\tbase: \"flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding\",\n\tvariants: {\n\t\t/**\n\t\t * Vertical alignment of content within the card.\n\t\t * Useful for overlay layouts to position content at top/center/bottom.\n\t\t */\n\t\tjustify: {\n\t\t\tstart: \"justify-start\",\n\t\t\tcenter: \"justify-center\",\n\t\t\tend: \"justify-end\",\n\t\t},\n\t},\n});\n\nexport interface CardContentProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof cardContentVariants> {}\n\n/**\n * Card content container with proper padding and spacing.\n * Uses spatial card tokens for consistent sizing.\n * For overlay layout, add `relative z-10` to ensure content sits above background.\n *\n * @example\n * ```tsx\n * // Content at bottom of overlay card\n * <Card layout=\"overlay\">\n *   <Background.Image src=\"/hero.jpg\" />\n *   <CardContent justify=\"end\" className=\"relative z-10\">\n *     <CardTitle>Title</CardTitle>\n *   </CardContent>\n * </Card>\n * ```\n */\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n\t({ className, justify, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardContentVariants({ justify, class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCardContent.displayName = \"CardContent\";\n\nconst cardEyebrowVariants = tv({\n\tbase: \"typography-overline text-text-muted uppercase tracking-wider\",\n});\n\nexport interface CardEyebrowProps\n\textends React.HTMLAttributes<HTMLParagraphElement> {}\n\n/**\n * Optional eyebrow text above the card title.\n */\nconst CardEyebrow = React.forwardRef<HTMLParagraphElement, CardEyebrowProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<p\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardEyebrowVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCardEyebrow.displayName = \"CardEyebrow\";\n\nconst cardTitleVariants = tv({\n\tbase: \"typography-h5 text-text-primary\",\n});\n\nexport interface CardTitleProps\n\textends React.HTMLAttributes<HTMLHeadingElement> {\n\t/**\n\t * The heading level to render (h1-h6). Defaults to h3.\n\t */\n\tas?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\n/**\n * Card title/heading. Use the `as` prop to change the heading level.\n */\nconst CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n\t({ className, as: Component = \"h3\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardTitleVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCardTitle.displayName = \"CardTitle\";\n\nconst cardDescriptionVariants = tv({\n\tbase: \"typography-body-small text-text-secondary\",\n});\n\nexport interface CardDescriptionProps\n\textends React.HTMLAttributes<HTMLParagraphElement> {}\n\n/**\n * Card body/description text.\n */\nconst CardDescription = React.forwardRef<\n\tHTMLParagraphElement,\n\tCardDescriptionProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<p\n\t\t\tref={ref}\n\t\t\tclassName={cardDescriptionVariants({ class: className })}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nCardDescription.displayName = \"CardDescription\";\n\nconst cardBodyVariants = tv({\n\tbase: \"flex w-full flex-col gap-spatial-card-small-gap\",\n});\n\nexport interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Container for card text content (eyebrow, title, description).\n * Uses spatial card tokens for consistent sizing.\n */\nconst CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardBodyVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCardBody.displayName = \"CardBody\";\n\nconst cardActionsVariants = tv({\n\tbase: \"flex gap-12\",\n});\n\nexport interface CardActionsProps\n\textends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Container for card action buttons.\n * Uses primitive spacing tokens.\n */\nconst CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardActionsVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCardActions.displayName = \"CardActions\";\n\nexport {\n\tCard,\n\tcardVariants,\n\tCardImage,\n\tcardImageVariants,\n\tCardContent,\n\tcardContentVariants,\n\tCardEyebrow,\n\tcardEyebrowVariants,\n\tCardTitle,\n\tcardTitleVariants,\n\tCardDescription,\n\tcardDescriptionVariants,\n\tCardBody,\n\tcardBodyVariants,\n\tCardActions,\n\tcardActionsVariants,\n};\n"],"names":["cardVariants","tv","Card","React","className","layout","props","ref","jsx","cardImageVariants","CardImage","src","alt","cardContentVariants","CardContent","justify","cardEyebrowVariants","CardEyebrow","cardTitleVariants","CardTitle","Component","cardDescriptionVariants","CardDescription","cardBodyVariants","CardBody","cardActionsVariants","CardActions"],"mappings":"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"}