@nationaldesignstudio/react 0.5.1 → 0.5.2

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

@@ -1,134 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,6 +0,0 @@
-export interface GridOverlayProps {
-    columnOpacity?: number;
-    borderOpacity?: number;
-    visible?: boolean;
-}
-export declare function GridOverlay({ columnOpacity, borderOpacity, visible, }: GridOverlayProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,36 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,235 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import * as React from "react";
-declare const cardVariants: import('tailwind-variants').TVReturnType<{
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}, {
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}>, {
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}, {
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
-    };
-}>, unknown, unknown, undefined>>;
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
-}
-/**
- * Card component for displaying content in a contained, scannable format.
- *
- * Layouts:
- * - vertical: Image on top, content below (default)
- * - horizontal: Image on left, content on right
- * - overlay: Full-bleed background with content on top
- *
- * Use with CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, and CardActions.
- * For overlay layout, use Background components for full-bleed backgrounds.
- */
-declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
-declare const cardImageVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface CardImageProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The image source URL
-     */
-    src?: string;
-    /**
-     * Alt text for the image
-     */
-    alt?: string;
-}
-/**
- * Card image area. For vertical layout, displays with 16:9 aspect ratio.
- * For horizontal layout, takes up ~40% width and stretches to content height.
- */
-declare const CardImage: React.ForwardRefExoticComponent<CardImageProps & React.RefAttributes<HTMLDivElement>>;
-declare const cardContentVariants: import('tailwind-variants').TVReturnType<{
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}, undefined, "flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding", import('tailwind-variants/dist/config.js').TVConfig<{
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}, {
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}>, {
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}, undefined, "flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding", import('tailwind-variants/dist/config.js').TVConfig<{
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}, {
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-    };
-}>, unknown, unknown, undefined>>;
-export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardContentVariants> {
-}
-/**
- * Card content container with proper padding and spacing.
- * Uses spatial card tokens for consistent sizing.
- * For overlay layout, add `relative z-10` to ensure content sits above background.
- *
- * @example
- * ```tsx
- * // Content at bottom of overlay card
- * <Card layout="overlay">
- *   <Background.Image src="/hero.jpg" />
- *   <CardContent justify="end" className="relative z-10">
- *     <CardTitle>Title</CardTitle>
- *   </CardContent>
- * </Card>
- * ```
- */
-declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const cardEyebrowVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-overline text-text-muted uppercase tracking-wider", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-overline text-text-muted uppercase tracking-wider", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface CardEyebrowProps extends React.HTMLAttributes<HTMLParagraphElement> {
-}
-/**
- * Optional eyebrow text above the card title.
- */
-declare const CardEyebrow: React.ForwardRefExoticComponent<CardEyebrowProps & React.RefAttributes<HTMLParagraphElement>>;
-declare const cardTitleVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-h5 text-text-primary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-h5 text-text-primary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
-    /**
-     * The heading level to render (h1-h6). Defaults to h3.
-     */
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-}
-/**
- * Card title/heading. Use the `as` prop to change the heading level.
- */
-declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-declare const cardDescriptionVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-body-small text-text-secondary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-body-small text-text-secondary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
-}
-/**
- * Card body/description text.
- */
-declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
-declare const cardBodyVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex w-full flex-col gap-spatial-card-small-gap", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex w-full flex-col gap-spatial-card-small-gap", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-/**
- * Container for card text content (eyebrow, title, description).
- * 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-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> {
-}
-/**
- * Container for card action buttons.
- * Uses primitive spacing tokens.
- */
-declare const CardActions: React.ForwardRefExoticComponent<CardActionsProps & React.RefAttributes<HTMLDivElement>>;
-export { Card, cardVariants, CardImage, cardImageVariants, CardContent, cardContentVariants, CardEyebrow, cardEyebrowVariants, CardTitle, cardTitleVariants, CardDescription, cardDescriptionVariants, CardBody, cardBodyVariants, CardActions, cardActionsVariants, };

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

@@ -1,163 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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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"}