@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/card-grid/index.d.ts

@@ -0,0 +1,90 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as React from 'react';
+
+/**
+ * CardGrid component for displaying cards in a responsive grid layout
+ *
+ * Variants:
+ * - A: 3 columns on desktop, 2 on tablet, 1 on mobile
+ * - B: 2 columns on desktop/tablet, 1 on mobile
+ *
+ * Uses the 24-column grid system with grid-container as root.
+ */
+declare const cardGridVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}>, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        A: string;
+        B: string;
+    };
+}, {
+    variant: {
+        A: string;
+        B: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface CardGridProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof cardGridVariants> {
+    /**
+     * The title text displayed above the cards
+     */
+    title: string;
+    /**
+     * The card elements to display in the grid
+     */
+    cards: React.ReactNode[];
+}
+/**
+ * CardGrid component for displaying cards in a responsive grid layout.
+ *
+ * Uses the 24-column grid system with grid-container as root.
+ *
+ * Layout (Variant A):
+ * - Mobile (sm): Single column, py-72
+ * - Tablet (md): 2 columns, gap-56 between title and cards, gap-y-20 between cards
+ * - Desktop (lg+): 3 columns, py-128, gap-64 between title and cards, gap-y-20 between cards
+ *
+ * Layout (Variant B):
+ * - Mobile (sm): Single column, py-72
+ * - Tablet (md): 2 columns, gap-56 between title and cards, gap-y-20 between cards
+ * - Desktop (lg+): 2 columns, py-128, gap-64 between title and cards, gap-y-20 between cards
+ *
+ * @example
+ * ```tsx
+ * <CardGrid
+ *   variant="A"
+ *   title="Featured Cards"
+ *   cards={[
+ *     <Card key="1">...</Card>,
+ *     <Card key="2">...</Card>,
+ *   ]}
+ * />
+ * ```
+ */
+declare const CardGrid: React.ForwardRefExoticComponent<CardGridProps & React.RefAttributes<HTMLElement>>;
+
+export { CardGrid, type CardGridProps, cardGridVariants };

package/dist/card-grid/index.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { tv, cnBase } from 'tailwind-variants';
+import { clsx } from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/sections/card-grid/card-grid.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var cardGridVariants = tv({
+  // Base styles - grid-container for proper grid context - uses primitive spacing tokens
+  base: [
+    "grid-container",
+    // Small (mobile): 72px y padding
+    "py-72",
+    // Large (desktop): 128px y padding
+    "lg:py-128"
+  ],
+  variants: {
+    variant: {
+      A: "",
+      B: ""
+    }
+  },
+  defaultVariants: {
+    variant: "A"
+  }
+});
+var CardGrid = React.forwardRef(
+  ({ className, variant, title, cards, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        className: cardGridVariants({ variant, class: className }),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "col-full",
+                "typography-h4 text-gray-900",
+                // Gap after title: mobile default, md: 56px, lg: 64px
+                "mb-36 md:mb-56 lg:mb-64"
+              ),
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "col-full",
+                // Mobile: single column
+                "grid grid-cols-1 gap-20",
+                // Tablet: 2 columns
+                "md:grid-cols-2",
+                // Desktop: 3 columns for variant A, 2 columns for variant B
+                variant === "A" && "lg:grid-cols-3"
+              ),
+              children: React.Children.toArray(cards).map((card) => /* @__PURE__ */ jsx("div", { children: card }, card.key))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CardGrid.displayName = "CardGrid";
+
+export { CardGrid, cardGridVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/card-grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/sections/card-grid/card-grid.tsx"],"names":["twMerge"],"mappings":";;;;;;AAKO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAOA,MAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACMA,IAAM,mBAAmB,EAAA,CAAG;AAAA;AAAA,EAE3B,IAAA,EAAM;AAAA,IACL,gBAAA;AAAA;AAAA,IAEA,OAAA;AAAA;AAAA,IAEA;AAAA,GACD;AAAA,EACA,QAAA,EAAU;AAAA,IACT,OAAA,EAAS;AAAA,MACR,CAAA,EAAG,EAAA;AAAA,MACH,CAAA,EAAG;AAAA;AACJ,GACD;AAAA,EACA,eAAA,EAAiB;AAAA,IAChB,OAAA,EAAS;AAAA;AAEX,CAAC;AA0CD,IAAM,QAAA,GAAiB,KAAA,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,OAAO,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACxD,IAAA,uBACC,IAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,WAAW,gBAAA,CAAiB,EAAE,OAAA,EAAS,KAAA,EAAO,WAAW,CAAA;AAAA,QACxD,GAAG,KAAA;AAAA,QAGJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACA,SAAA,EAAW,EAAA;AAAA,gBACV,UAAA;AAAA,gBACA,6BAAA;AAAA;AAAA,gBAEA;AAAA,eACD;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACF;AAAA,0BAGA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACA,SAAA,EAAW,EAAA;AAAA,gBACV,UAAA;AAAA;AAAA,gBAEA,yBAAA;AAAA;AAAA,gBAEA,gBAAA;AAAA;AAAA,gBAEA,YAAY,GAAA,IAAO;AAAA,eACpB;AAAA,cAEC,QAAA,EAAM,KAAA,CAAA,QAAA,CAAS,OAAA,CAAQ,KAAK,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,qBACnC,GAAA,CAAC,KAAA,EAAA,EAA4C,QAAA,EAAA,IAAA,EAAA,EAAlC,IAAA,CAA4B,GAAW,CAClD;AAAA;AAAA;AACF;AAAA;AAAA,KACD;AAAA,EAEF;AACD;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnBase as twMerge } from \"tailwind-variants\";\n\nexport { twMerge };\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * CardGrid component for displaying cards in a responsive grid layout\n *\n * Variants:\n * - A: 3 columns on desktop, 2 on tablet, 1 on mobile\n * - B: 2 columns on desktop/tablet, 1 on mobile\n *\n * Uses the 24-column grid system with grid-container as root.\n */\nconst cardGridVariants = tv({\n\t// Base styles - grid-container for proper grid context - uses primitive spacing tokens\n\tbase: [\n\t\t\"grid-container\",\n\t\t// Small (mobile): 72px y padding\n\t\t\"py-72\",\n\t\t// Large (desktop): 128px y padding\n\t\t\"lg:py-128\",\n\t],\n\tvariants: {\n\t\tvariant: {\n\t\t\tA: \"\",\n\t\t\tB: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"A\",\n\t},\n});\n\nexport interface CardGridProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof cardGridVariants> {\n\t/**\n\t * The title text displayed above the cards\n\t */\n\ttitle: string;\n\t/**\n\t * The card elements to display in the grid\n\t */\n\tcards: React.ReactNode[];\n}\n\n/**\n * CardGrid component for displaying cards in a responsive grid layout.\n *\n * Uses the 24-column grid system with grid-container as root.\n *\n * Layout (Variant A):\n * - Mobile (sm): Single column, py-72\n * - Tablet (md): 2 columns, gap-56 between title and cards, gap-y-20 between cards\n * - Desktop (lg+): 3 columns, py-128, gap-64 between title and cards, gap-y-20 between cards\n *\n * Layout (Variant B):\n * - Mobile (sm): Single column, py-72\n * - Tablet (md): 2 columns, gap-56 between title and cards, gap-y-20 between cards\n * - Desktop (lg+): 2 columns, py-128, gap-64 between title and cards, gap-y-20 between cards\n *\n * @example\n * ```tsx\n * <CardGrid\n *   variant=\"A\"\n *   title=\"Featured Cards\"\n *   cards={[\n *     <Card key=\"1\">...</Card>,\n *     <Card key=\"2\">...</Card>,\n *   ]}\n * />\n * ```\n */\nconst CardGrid = React.forwardRef<HTMLElement, CardGridProps>(\n\t({ className, variant, title, cards, ...props }, ref) => {\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cardGridVariants({ variant, class: className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Title - col-full within grid - uses primitive spacing tokens */}\n\t\t\t\t<h2\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"col-full\",\n\t\t\t\t\t\t\"typography-h4 text-gray-900\",\n\t\t\t\t\t\t// Gap after title: mobile default, md: 56px, lg: 64px\n\t\t\t\t\t\t\"mb-36 md:mb-56 lg:mb-64\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</h2>\n\n\t\t\t\t{/* Inner grid for cards - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"col-full\",\n\t\t\t\t\t\t// Mobile: single column\n\t\t\t\t\t\t\"grid grid-cols-1 gap-20\",\n\t\t\t\t\t\t// Tablet: 2 columns\n\t\t\t\t\t\t\"md:grid-cols-2\",\n\t\t\t\t\t\t// Desktop: 3 columns for variant A, 2 columns for variant B\n\t\t\t\t\t\tvariant === \"A\" && \"lg:grid-cols-3\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{React.Children.toArray(cards).map((card) => (\n\t\t\t\t\t\t<div key={(card as React.ReactElement).key}>{card}</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\nCardGrid.displayName = \"CardGrid\";\n\nexport { CardGrid, cardGridVariants };\n"]}

package/dist/component-registry.md

@@ -1,7 +1,7 @@
 # Component Registry
 
 > Auto-generated component metadata for AI/agent consumption.
-> Generated: 2026-01-20T19:14:31.863Z
+> Generated: 2026-02-09T17:11:36.752Z
 
 ---
 
@@ -386,7 +386,7 @@ className="font-semibold"        // Font weight 600
 ```tsx
 <div className="w-[700px]">
       <Card layout="horizontal">
-        <CardImage />
+        <CardImage layout="horizontal" />
         <CardContent>
           <CardBody>
             <CardEyebrow>Eyebrow</CardEyebrow>
@@ -413,6 +413,80 @@ className="font-semibold"        // Font weight 600
     </div>
 ```
 
+```tsx
+<div className="w-[300px]">
+      <Card layout="profile">
+        <CardImage
+          layout="profile"
+          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80"
+          alt="Team member"
+        />
+        <CardContent>
+          <CardBody>
+            <CardEyebrow>Director</CardEyebrow>
+            <CardTitle>Jane Smith</CardTitle>
+            <CardDescription>
+              Leading our strategic initiatives and partnerships.
+            </CardDescription>
+          </CardBody>
+        </CardContent>
+      </Card>
+    </div>
+```
+
+```tsx
+<div className="w-[500px]">
+      <Card layout="compact">
+        <CardImage
+          layout="compact"
+          src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=200&q=80"
+          alt="News thumbnail"
+        />
+        <CardContent className="p-0">
+          <CardBody>
+            <CardEyebrow>News</CardEyebrow>
+            <CardTitle className="typography-h6">
+              New Policy Update Released
+            </CardTitle>
+            <CardLink>Read More</CardLink>
+          </CardBody>
+        </CardContent>
+      </Card>
+    </div>
+```
+
+```tsx
+<div className="flex w-[500px] flex-col gap-16">
+      {[
+        { id: "policy", title: "Policy Update Released", category: "News" },
+        {
+          id: "report",
+          title: "Quarterly Report Available",
+          category: "Reports",
+        },
+        {
+          id: "meeting",
+          title: "Community Meeting Scheduled",
+          category: "Events",
+        },
+      ].map((item) => (
+        <Card key={item.id} layout="compact">
+          <CardImage
+            layout="compact"
+            src={`https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=200&q=80`}
+          />
+          <CardContent className="p-0">
+            <CardBody>
+              <CardEyebrow>{item.category}</CardEyebrow>
+              <CardTitle className="typography-h6">{item.title}</CardTitle>
+              <CardLink>Read More</CardLink>
+            </CardBody>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+```
+
 ```tsx
 <div className="w-[418px]">
       <Card>
@@ -565,6 +639,12 @@ className="font-semibold"        // Font weight 600
   Values: `dark`, `light`
 - `top`: React.ReactNode
   Content for the top slot (full-width, no padding).
+- `indicator`: React.ReactNode
+  ```tsx
+<Hero indicator={<ChevronDown className="animate-bounce" />}>
+  <h1>Welcome</h1>
+</Hero>
+```
 - `background`: React.ReactNode | string
   Background for the hero. Can be:
 - `overlayOpacity`: number
@@ -594,6 +674,60 @@ className="font-semibold"        // Font weight 600
 <Hero variant="A3" title="Hero A3" />
 ```
 
+```tsx
+<Hero contentAlign="top" title="Content at Top" background="#1a1a1a" />
+```
+
+```tsx
+<Hero contentAlign="center" title="Content Centered" background="#1a1a1a" />
+```
+
+```tsx
+<Hero
+      contentAlign="bottom"
+      title="Content at Bottom"
+      background="#1a1a1a"
+    />
+```
+
+```tsx
+<Hero
+      title="Scroll Down"
+      background="#1a1a1a"
+      indicator={<ArrowDownIcon />}
+    />
+```
+
+```tsx
+<Hero
+      title="Scroll Down"
+      background="#1a1a1a"
+      indicator={
+        <div className="animate-bounce">
+          <ArrowDownIcon />
+        </div>
+      }
+    />
+```
+
+```tsx
+<Hero
+      title="Welcome"
+      background={
+        <HeroBackground.Image
+          src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80"
+          position="center"
+        />
+      }
+      overlayOpacity={0.4}
+      indicator={
+        <div className="flex size-48 animate-bounce items-center justify-center rounded-full border border-white/50">
+          <ArrowDownIcon />
+        </div>
+      }
+    />
+```
+
 ```tsx
 <Hero variant="A1" title="Color Background" background="#2563eb" />
 ```

package/dist/dev-toolbar/index.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface DevToolbarProps {
+    defaultExpanded?: boolean;
+}
+declare function DevToolbar({ defaultExpanded }: DevToolbarProps): react_jsx_runtime.JSX.Element;
+
+export { DevToolbar, type DevToolbarProps };

package/dist/dev-toolbar/index.js

@@ -0,0 +1,206 @@
+"use client";
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/components/dev-tools/dev-toolbar/dev-toolbar.tsx
+function GridOverlay({
+  columnOpacity = 0.15,
+  borderOpacity = 0.3,
+  visible = true
+}) {
+  const columns = Array.from({ length: 24 }, (_, i) => i);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+				fixed inset-0 z-[9998] pointer-events-none overflow-hidden
+				transition-opacity duration-300 ease-out
+				${visible ? "opacity-100" : "opacity-0"}
+			`,
+      "aria-hidden": "true",
+      "data-testid": "grid-overlay",
+      children: /* @__PURE__ */ jsx("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__ */ jsx("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: columns.map((index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full border border-red-500",
+          style: {
+            backgroundColor: `rgb(239 68 68 / ${columnOpacity})`,
+            borderColor: `rgb(239 68 68 / ${borderOpacity})`
+          },
+          "data-column": index + 1
+        },
+        index
+      )) }) })
+    }
+  );
+}
+function GridIcon({ active }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: active ? "2" : "1.5",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "16", height: "16", rx: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "7", y1: "2", x2: "7", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "13", y1: "2", x2: "13", y2: "18" })
+      ]
+    }
+  );
+}
+var DRAG_THRESHOLD = 3;
+function DevToolbar({ defaultExpanded = false }) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [showGrid, setShowGrid] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const hasDraggedRef = useRef(false);
+  const dragRef = useRef(null);
+  const toolbarRef = useRef(null);
+  const toggleGrid = useCallback(() => setShowGrid((prev) => !prev), []);
+  const toggleExpanded = useCallback(() => setIsExpanded((prev) => !prev), []);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "g") {
+        e.preventDefault();
+        toggleGrid();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleGrid]);
+  const handleDragStart = useCallback(
+    (clientX, clientY) => {
+      setIsDragging(true);
+      hasDraggedRef.current = false;
+      dragRef.current = {
+        startX: clientX,
+        startY: clientY,
+        startPosX: position.x,
+        startPosY: position.y
+      };
+    },
+    [position]
+  );
+  const handleDragMove = useCallback(
+    (clientX, clientY) => {
+      if (!isDragging || !dragRef.current) return;
+      const deltaX = clientX - dragRef.current.startX;
+      const deltaY = clientY - dragRef.current.startY;
+      if (Math.abs(deltaX) > DRAG_THRESHOLD || Math.abs(deltaY) > DRAG_THRESHOLD) {
+        hasDraggedRef.current = true;
+      }
+      setPosition({
+        x: dragRef.current.startPosX + deltaX,
+        y: dragRef.current.startPosY - deltaY
+      });
+    },
+    [isDragging]
+  );
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false);
+    dragRef.current = null;
+  }, []);
+  useEffect(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e) => handleDragMove(e.clientX, e.clientY);
+    const handleTouchMove = (e) => {
+      if (e.touches[0])
+        handleDragMove(e.touches[0].clientX, e.touches[0].clientY);
+    };
+    const handleEnd = () => handleDragEnd();
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleEnd);
+    window.addEventListener("touchmove", handleTouchMove);
+    window.addEventListener("touchend", handleEnd);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleEnd);
+      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("touchend", handleEnd);
+    };
+  }, [isDragging, handleDragMove, handleDragEnd]);
+  const handleBarMouseDown = (e) => {
+    e.preventDefault();
+    handleDragStart(e.clientX, e.clientY);
+  };
+  const handleBarTouchStart = (e) => {
+    if (e.touches[0]) {
+      handleDragStart(e.touches[0].clientX, e.touches[0].clientY);
+    }
+  };
+  const handleBarClick = () => {
+    if (!hasDraggedRef.current) {
+      toggleExpanded();
+    }
+    hasDraggedRef.current = false;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showGrid && /* @__PURE__ */ jsx(GridOverlay, {}),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: toolbarRef,
+        className: "fixed bottom-4 left-1/2 z-[9999]",
+        style: {
+          transform: `translate(calc(-50% + ${position.x}px), ${-position.y}px)`
+        },
+        "data-testid": "dev-toolbar",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `bg-gray-1100 rounded-radius-16 shadow-lg flex flex-col items-center overflow-hidden px-12 py-8 ${isExpanded ? "gap-4" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `
+							grid transition-all duration-300 ease-out
+							${isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}
+						`,
+                  children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: toggleGrid,
+                      className: `
+									size-40 rounded-full flex items-center justify-center transition-colors
+									${showGrid ? "text-gray-50" : "text-gray-400 hover:text-gray-50 hover:bg-alpha-white-10"}
+								`,
+                      title: "Toggle Grid (\u2318G)",
+                      "aria-label": "Toggle grid overlay",
+                      children: /* @__PURE__ */ jsx(GridIcon, { active: showGrid })
+                    }
+                  ) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onMouseDown: handleBarMouseDown,
+                  onTouchStart: handleBarTouchStart,
+                  onClick: handleBarClick,
+                  className: `
+							w-32 h-4 bg-gray-50 rounded-full transition-opacity
+							${isDragging ? "opacity-100 cursor-grabbing" : "opacity-60 hover:opacity-100 cursor-grab"}
+						`,
+                  "aria-label": isExpanded ? "Close dev tools" : "Open dev tools"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { DevToolbar };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/dev-toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dev-tools/grid-overlay/grid-overlay.tsx","../../src/components/dev-tools/dev-toolbar/dev-toolbar.tsx"],"names":["jsx"],"mappings":"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","file":"index.js","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","\"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"]}