@particle-academy/react-fancy 5.13.1 → 5.15.0

package/dist/chunk-3F66SAE7.js

@@ -0,0 +1,40 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var StatList = forwardRef(
+  ({ items, align = "right", className, ...props }, ref) => {
+    if (items.length === 0) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        "data-react-fancy-stat-list": "",
+        "data-align": align,
+        className: cn(
+          "flex flex-col gap-0.5 font-mono text-[11.5px] text-zinc-500 dark:text-zinc-400",
+          align === "right" ? "items-end text-right" : "items-start text-left",
+          className
+        ),
+        children: items.map((item, i) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "data-stat": item.key ?? (typeof item.label === "string" ? item.label : void 0),
+            children: [
+              /* @__PURE__ */ jsx("b", { className: "font-medium text-zinc-900 dark:text-zinc-100", children: item.value }),
+              " ",
+              item.label
+            ]
+          },
+          item.key ?? (typeof item.label === "string" ? item.label : i)
+        ))
+      }
+    );
+  }
+);
+StatList.displayName = "StatList";
+
+export { StatList };
+//# sourceMappingURL=chunk-3F66SAE7.js.map
+//# sourceMappingURL=chunk-3F66SAE7.js.map

package/dist/chunk-3F66SAE7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/StatList/StatList.tsx"],"names":[],"mappings":";;;;AAoBO,IAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,EAAE,KAAA,EAAO,KAAA,GAAQ,SAAS,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACxD,IAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,4BAAA,EAA2B,EAAA;AAAA,QAC3B,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAW,EAAA;AAAA,UACT,gFAAA;AAAA,UACA,KAAA,KAAU,UAAU,sBAAA,GAAyB,uBAAA;AAAA,UAC7C;AAAA,SACF;AAAA,QAEC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,CAAA,qBAChB,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,WAAA,EAAW,KAAK,GAAA,KAAQ,OAAO,KAAK,KAAA,KAAU,QAAA,GAAW,KAAK,KAAA,GAAQ,MAAA,CAAA;AAAA,YAEtE,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8CAAA,EAAgD,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM,CAAA;AAAA,cAAK,GAAA;AAAA,cAC5E,IAAA,CAAK;AAAA;AAAA,WAAA;AAAA,UAJD,KAAK,GAAA,KAAQ,OAAO,KAAK,KAAA,KAAU,QAAA,GAAW,KAAK,KAAA,GAAQ,CAAA;AAAA,SAMnE;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-3F66SAE7.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { StatListProps } from \"./StatList.types\";\n\n/**\n * The mono figure stack — `70 packages / 261 components / MIT licensed`.\n *\n * The Inspiration index and `/packages` each hand-rolled this from tokens, which\n * is the gallery working as intended: it stress-tests the kit, and what it\n * hand-rolls is the gap list. The list only pays off when the gap comes back\n * here, otherwise every surface keeps a copy and they drift apart.\n *\n * Takes `items` as DATA rather than children. What those surfaces repeat is a\n * shape, not a layout, so there is nothing to assemble at the call site — and a\n * data prop is what an agent can emit, which children are not.\n *\n * The value is a `<b>` rather than a colour, because in most of these stacks the\n * figure is the only part that is not muted, and expressing that structurally\n * keeps it meaningful when a design replaces the styling wholesale.\n */\nexport const StatList = forwardRef<HTMLDivElement, StatListProps>(\n  ({ items, align = \"right\", className, ...props }, ref) => {\n    if (items.length === 0) return null;\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-react-fancy-stat-list=\"\"\n        data-align={align}\n        className={cn(\n          \"flex flex-col gap-0.5 font-mono text-[11.5px] text-zinc-500 dark:text-zinc-400\",\n          align === \"right\" ? \"items-end text-right\" : \"items-start text-left\",\n          className,\n        )}\n      >\n        {items.map((item, i) => (\n          <span\n            key={item.key ?? (typeof item.label === \"string\" ? item.label : i)}\n            data-stat={item.key ?? (typeof item.label === \"string\" ? item.label : undefined)}\n          >\n            <b className=\"font-medium text-zinc-900 dark:text-zinc-100\">{item.value}</b>{\" \"}\n            {item.label}\n          </span>\n        ))}\n      </div>\n    );\n  },\n);\n\nStatList.displayName = \"StatList\";\n"]}

package/dist/chunk-5LHG7HEY.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var StatList = react.forwardRef(
+  ({ items, align = "right", className, ...props }, ref) => {
+    if (items.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        "data-react-fancy-stat-list": "",
+        "data-align": align,
+        className: chunk3Z6ALUWP_cjs.cn(
+          "flex flex-col gap-0.5 font-mono text-[11.5px] text-zinc-500 dark:text-zinc-400",
+          align === "right" ? "items-end text-right" : "items-start text-left",
+          className
+        ),
+        children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            "data-stat": item.key ?? (typeof item.label === "string" ? item.label : void 0),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("b", { className: "font-medium text-zinc-900 dark:text-zinc-100", children: item.value }),
+              " ",
+              item.label
+            ]
+          },
+          item.key ?? (typeof item.label === "string" ? item.label : i)
+        ))
+      }
+    );
+  }
+);
+StatList.displayName = "StatList";
+
+exports.StatList = StatList;
+//# sourceMappingURL=chunk-5LHG7HEY.cjs.map
+//# sourceMappingURL=chunk-5LHG7HEY.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/StatList/StatList.tsx"],"names":["forwardRef","jsx","cn","jsxs"],"mappings":";;;;;;AAoBO,IAAM,QAAA,GAAWA,gBAAA;AAAA,EACtB,CAAC,EAAE,KAAA,EAAO,KAAA,GAAQ,SAAS,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACxD,IAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAE/B,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,4BAAA,EAA2B,EAAA;AAAA,QAC3B,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAWC,oBAAA;AAAA,UACT,gFAAA;AAAA,UACA,KAAA,KAAU,UAAU,sBAAA,GAAyB,uBAAA;AAAA,UAC7C;AAAA,SACF;AAAA,QAEC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,CAAA,qBAChBC,eAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,WAAA,EAAW,KAAK,GAAA,KAAQ,OAAO,KAAK,KAAA,KAAU,QAAA,GAAW,KAAK,KAAA,GAAQ,MAAA,CAAA;AAAA,YAEtE,QAAA,EAAA;AAAA,8BAAAF,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8CAAA,EAAgD,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM,CAAA;AAAA,cAAK,GAAA;AAAA,cAC5E,IAAA,CAAK;AAAA;AAAA,WAAA;AAAA,UAJD,KAAK,GAAA,KAAQ,OAAO,KAAK,KAAA,KAAU,QAAA,GAAW,KAAK,KAAA,GAAQ,CAAA;AAAA,SAMnE;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-5LHG7HEY.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { StatListProps } from \"./StatList.types\";\n\n/**\n * The mono figure stack — `70 packages / 261 components / MIT licensed`.\n *\n * The Inspiration index and `/packages` each hand-rolled this from tokens, which\n * is the gallery working as intended: it stress-tests the kit, and what it\n * hand-rolls is the gap list. The list only pays off when the gap comes back\n * here, otherwise every surface keeps a copy and they drift apart.\n *\n * Takes `items` as DATA rather than children. What those surfaces repeat is a\n * shape, not a layout, so there is nothing to assemble at the call site — and a\n * data prop is what an agent can emit, which children are not.\n *\n * The value is a `<b>` rather than a colour, because in most of these stacks the\n * figure is the only part that is not muted, and expressing that structurally\n * keeps it meaningful when a design replaces the styling wholesale.\n */\nexport const StatList = forwardRef<HTMLDivElement, StatListProps>(\n  ({ items, align = \"right\", className, ...props }, ref) => {\n    if (items.length === 0) return null;\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-react-fancy-stat-list=\"\"\n        data-align={align}\n        className={cn(\n          \"flex flex-col gap-0.5 font-mono text-[11.5px] text-zinc-500 dark:text-zinc-400\",\n          align === \"right\" ? \"items-end text-right\" : \"items-start text-left\",\n          className,\n        )}\n      >\n        {items.map((item, i) => (\n          <span\n            key={item.key ?? (typeof item.label === \"string\" ? item.label : i)}\n            data-stat={item.key ?? (typeof item.label === \"string\" ? item.label : undefined)}\n          >\n            <b className=\"font-medium text-zinc-900 dark:text-zinc-100\">{item.value}</b>{\" \"}\n            {item.label}\n          </span>\n        ))}\n      </div>\n    );\n  },\n);\n\nStatList.displayName = \"StatList\";\n"]}

package/dist/chunk-AY3JABE3.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var GAP = { sm: "gap-3", md: "gap-6", lg: "gap-10" };
+var Grid = react.forwardRef(
+  ({ children, cols = 3, gap = "md", responsive = true, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        "data-react-fancy-grid": "",
+        "data-responsive": responsive ? "true" : "false",
+        className: chunk3Z6ALUWP_cjs.cn("grid", GAP[gap], className),
+        style: {
+          ...style,
+          ["--fancy-grid-cols"]: String(cols),
+          gridTemplateColumns: responsive ? "repeat(auto-fit, minmax(min(100%, 16rem), 1fr))" : `repeat(${cols}, minmax(0, 1fr))`
+        },
+        children
+      }
+    );
+  }
+);
+Grid.displayName = "Grid";
+
+exports.Grid = Grid;
+//# sourceMappingURL=chunk-AY3JABE3.cjs.map
+//# sourceMappingURL=chunk-AY3JABE3.cjs.map

package/dist/chunk-AY3JABE3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Grid/Grid.tsx"],"names":["forwardRef","jsx","cn"],"mappings":";;;;;;AAIA,IAAM,MAAM,EAAE,EAAA,EAAI,SAAS,EAAA,EAAI,OAAA,EAAS,IAAI,QAAA,EAAS;AAW9C,IAAM,IAAA,GAAOA,gBAAA;AAAA,EAClB,CAAC,EAAE,QAAA,EAAU,IAAA,GAAO,GAAG,GAAA,GAAM,IAAA,EAAM,UAAA,GAAa,IAAA,EAAM,SAAA,EAAW,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC1F,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,uBAAA,EAAsB,EAAA;AAAA,QACtB,iBAAA,EAAiB,aAAa,MAAA,GAAS,OAAA;AAAA,QACvC,WAAWC,oBAAA,CAAG,MAAA,EAAQ,GAAA,CAAI,GAAG,GAAG,SAAS,CAAA;AAAA,QACzC,KAAA,EAAO;AAAA,UACL,GAAG,KAAA;AAAA,UACH,CAAC,mBAA6B,GAAG,MAAA,CAAO,IAAI,CAAA;AAAA,UAC5C,mBAAA,EAAqB,UAAA,GACjB,iDAAA,GACA,CAAA,OAAA,EAAU,IAAI,CAAA,iBAAA;AAAA,SACpB;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"chunk-AY3JABE3.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { GridProps } from \"./Grid.types\";\n\nconst GAP = { sm: \"gap-3\", md: \"gap-6\", lg: \"gap-10\" } as const;\n\n/**\n * The modular grid.\n *\n * Column count goes through a custom property rather than a `grid-cols-N` class\n * because N is a prop: Tailwind cannot generate a class it never sees in source,\n * and every hand-rolled copy in the gallery worked around that differently. The\n * property also gives a design a single place to override the breakpoint\n * behaviour in CSS without fighting a utility.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  ({ children, cols = 3, gap = \"md\", responsive = true, className, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-react-fancy-grid=\"\"\n        data-responsive={responsive ? \"true\" : \"false\"}\n        className={cn(\"grid\", GAP[gap], className)}\n        style={{\n          ...style,\n          [\"--fancy-grid-cols\" as string]: String(cols),\n          gridTemplateColumns: responsive\n            ? \"repeat(auto-fit, minmax(min(100%, 16rem), 1fr))\"\n            : `repeat(${cols}, minmax(0, 1fr))`,\n        }}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nGrid.displayName = \"Grid\";\n"]}

package/dist/chunk-DBJWHDWP.js

@@ -0,0 +1,31 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var SIZES = {
+  sm: "max-w-3xl",
+  md: "max-w-5xl",
+  lg: "max-w-7xl",
+  full: "max-w-none"
+};
+var Container = forwardRef(
+  ({ children, size = "md", as: Tag = "div", className, ...props }, ref) => {
+    const Component = Tag;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        ...props,
+        "data-react-fancy-container": "",
+        "data-size": size,
+        className: cn("mx-auto w-full px-4 sm:px-6", SIZES[size], className),
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+
+export { Container };
+//# sourceMappingURL=chunk-DBJWHDWP.js.map
+//# sourceMappingURL=chunk-DBJWHDWP.js.map

package/dist/chunk-DBJWHDWP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Container/Container.tsx"],"names":[],"mappings":";;;;AAKA,IAAM,KAAA,GAAQ;AAAA,EACZ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,IAAA,EAAM;AACR,CAAA;AASO,IAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,EAAE,QAAA,EAAU,IAAA,GAAO,IAAA,EAAM,EAAA,EAAI,GAAA,GAAM,KAAA,EAAO,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAIxE,IAAA,MAAM,SAAA,GAAY,GAAA;AAElB,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,4BAAA,EAA2B,EAAA;AAAA,QAC3B,WAAA,EAAW,IAAA;AAAA,QACX,WAAW,EAAA,CAAG,6BAAA,EAA+B,KAAA,CAAM,IAAI,GAAG,SAAS,CAAA;AAAA,QAElE;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-DBJWHDWP.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { ContainerProps } from \"./Container.types\";\n\nconst SIZES = {\n  sm: \"max-w-3xl\",\n  md: \"max-w-5xl\",\n  lg: \"max-w-7xl\",\n  full: \"max-w-none\",\n} as const;\n\n/**\n * The page's horizontal measure — centred, capped, with gutters.\n *\n * Every Swiss-family gallery style hand-rolled this. What they repeated was not\n * `mx-auto` but the DECISION about how wide the page reads, and twenty copies of\n * a decision drift. This owns the decision and leaves the styling replaceable.\n */\nexport const Container = forwardRef<HTMLElement, ContainerProps>(\n  ({ children, size = \"md\", as: Tag = \"div\", className, ...props }, ref) => {\n    // `as` makes the element dynamic, so the ref type cannot be known\n    // statically. Narrowed at the boundary rather than dragging a full\n    // polymorphic-component generic into a layout primitive.\n    const Component = Tag as \"div\";\n\n    return (\n      <Component\n        ref={ref as React.Ref<HTMLDivElement>}\n        {...props}\n        data-react-fancy-container=\"\"\n        data-size={size}\n        className={cn(\"mx-auto w-full px-4 sm:px-6\", SIZES[size], className)}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nContainer.displayName = \"Container\";\n"]}

package/dist/chunk-MKFWFZVX.js

@@ -0,0 +1,30 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var GAP = { sm: "gap-3", md: "gap-6", lg: "gap-10" };
+var Grid = forwardRef(
+  ({ children, cols = 3, gap = "md", responsive = true, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        "data-react-fancy-grid": "",
+        "data-responsive": responsive ? "true" : "false",
+        className: cn("grid", GAP[gap], className),
+        style: {
+          ...style,
+          ["--fancy-grid-cols"]: String(cols),
+          gridTemplateColumns: responsive ? "repeat(auto-fit, minmax(min(100%, 16rem), 1fr))" : `repeat(${cols}, minmax(0, 1fr))`
+        },
+        children
+      }
+    );
+  }
+);
+Grid.displayName = "Grid";
+
+export { Grid };
+//# sourceMappingURL=chunk-MKFWFZVX.js.map
+//# sourceMappingURL=chunk-MKFWFZVX.js.map

package/dist/chunk-MKFWFZVX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Grid/Grid.tsx"],"names":[],"mappings":";;;;AAIA,IAAM,MAAM,EAAE,EAAA,EAAI,SAAS,EAAA,EAAI,OAAA,EAAS,IAAI,QAAA,EAAS;AAW9C,IAAM,IAAA,GAAO,UAAA;AAAA,EAClB,CAAC,EAAE,QAAA,EAAU,IAAA,GAAO,GAAG,GAAA,GAAM,IAAA,EAAM,UAAA,GAAa,IAAA,EAAM,SAAA,EAAW,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC1F,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,uBAAA,EAAsB,EAAA;AAAA,QACtB,iBAAA,EAAiB,aAAa,MAAA,GAAS,OAAA;AAAA,QACvC,WAAW,EAAA,CAAG,MAAA,EAAQ,GAAA,CAAI,GAAG,GAAG,SAAS,CAAA;AAAA,QACzC,KAAA,EAAO;AAAA,UACL,GAAG,KAAA;AAAA,UACH,CAAC,mBAA6B,GAAG,MAAA,CAAO,IAAI,CAAA;AAAA,UAC5C,mBAAA,EAAqB,UAAA,GACjB,iDAAA,GACA,CAAA,OAAA,EAAU,IAAI,CAAA,iBAAA;AAAA,SACpB;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"chunk-MKFWFZVX.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { GridProps } from \"./Grid.types\";\n\nconst GAP = { sm: \"gap-3\", md: \"gap-6\", lg: \"gap-10\" } as const;\n\n/**\n * The modular grid.\n *\n * Column count goes through a custom property rather than a `grid-cols-N` class\n * because N is a prop: Tailwind cannot generate a class it never sees in source,\n * and every hand-rolled copy in the gallery worked around that differently. The\n * property also gives a design a single place to override the breakpoint\n * behaviour in CSS without fighting a utility.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  ({ children, cols = 3, gap = \"md\", responsive = true, className, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-react-fancy-grid=\"\"\n        data-responsive={responsive ? \"true\" : \"false\"}\n        className={cn(\"grid\", GAP[gap], className)}\n        style={{\n          ...style,\n          [\"--fancy-grid-cols\" as string]: String(cols),\n          gridTemplateColumns: responsive\n            ? \"repeat(auto-fit, minmax(min(100%, 16rem), 1fr))\"\n            : `repeat(${cols}, minmax(0, 1fr))`,\n        }}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nGrid.displayName = \"Grid\";\n"]}

package/dist/chunk-PG3ILQIW.js

@@ -0,0 +1,30 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var SPACE = { sm: "py-8", md: "py-16", lg: "py-24" };
+var Section = forwardRef(
+  ({ children, space = "md", divider = false, as: Tag = "section", className, ...props }, ref) => {
+    const Component = Tag;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        ...props,
+        "data-react-fancy-section": "",
+        "data-space": space,
+        className: cn(
+          SPACE[space],
+          divider && "border-t border-zinc-200 dark:border-zinc-800",
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+
+export { Section };
+//# sourceMappingURL=chunk-PG3ILQIW.js.map
+//# sourceMappingURL=chunk-PG3ILQIW.js.map

package/dist/chunk-PG3ILQIW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Section/Section.tsx"],"names":[],"mappings":";;;;AAKA,IAAM,QAAQ,EAAE,EAAA,EAAI,QAAQ,EAAA,EAAI,OAAA,EAAS,IAAI,OAAA,EAAQ;AAS9C,IAAM,OAAA,GAAU,UAAA;AAAA,EACrB,CAAC,EAAE,QAAA,EAAU,KAAA,GAAQ,MAAM,OAAA,GAAU,KAAA,EAAO,EAAA,EAAI,GAAA,GAAM,SAAA,EAAW,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC9F,IAAA,MAAM,SAAA,GAAY,GAAA;AAElB,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,0BAAA,EAAyB,EAAA;AAAA,QACzB,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAW,EAAA;AAAA,UACT,MAAM,KAAK,CAAA;AAAA,UACX,OAAA,IAAW,+CAAA;AAAA,UACX;AAAA,SACF;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-PG3ILQIW.js","sourcesContent":["import { forwardRef } from \"react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { SectionProps } from \"./Section.types\";\n\nconst SPACE = { sm: \"py-8\", md: \"py-16\", lg: \"py-24\" } as const;\n\n/**\n * Vertical rhythm between page sections, with the optional opening hairline.\n *\n * Pairs with `Eyebrow`, which is what usually sits at the top of one. The rule\n * is a prop rather than a caller-drawn border because half the gallery styles\n * drew it and half forgot, and an inconsistent rule reads as a bug.\n */\nexport const Section = forwardRef<HTMLElement, SectionProps>(\n  ({ children, space = \"md\", divider = false, as: Tag = \"section\", className, ...props }, ref) => {\n    const Component = Tag as \"section\";\n\n    return (\n      <Component\n        ref={ref as React.Ref<HTMLElement>}\n        {...props}\n        data-react-fancy-section=\"\"\n        data-space={space}\n        className={cn(\n          SPACE[space],\n          divider && \"border-t border-zinc-200 dark:border-zinc-800\",\n          className,\n        )}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nSection.displayName = \"Section\";\n"]}

package/dist/chunk-SYXLPCQP.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var SIZES = {
+  sm: "max-w-3xl",
+  md: "max-w-5xl",
+  lg: "max-w-7xl",
+  full: "max-w-none"
+};
+var Container = react.forwardRef(
+  ({ children, size = "md", as: Tag = "div", className, ...props }, ref) => {
+    const Component = Tag;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        ...props,
+        "data-react-fancy-container": "",
+        "data-size": size,
+        className: chunk3Z6ALUWP_cjs.cn("mx-auto w-full px-4 sm:px-6", SIZES[size], className),
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+
+exports.Container = Container;
+//# sourceMappingURL=chunk-SYXLPCQP.cjs.map
+//# sourceMappingURL=chunk-SYXLPCQP.cjs.map

package/dist/chunk-SYXLPCQP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Container/Container.tsx"],"names":["forwardRef","jsx","cn"],"mappings":";;;;;;AAKA,IAAM,KAAA,GAAQ;AAAA,EACZ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,IAAA,EAAM;AACR,CAAA;AASO,IAAM,SAAA,GAAYA,gBAAA;AAAA,EACvB,CAAC,EAAE,QAAA,EAAU,IAAA,GAAO,IAAA,EAAM,EAAA,EAAI,GAAA,GAAM,KAAA,EAAO,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAIxE,IAAA,MAAM,SAAA,GAAY,GAAA;AAElB,IAAA,uBACEC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,4BAAA,EAA2B,EAAA;AAAA,QAC3B,WAAA,EAAW,IAAA;AAAA,QACX,WAAWC,oBAAA,CAAG,6BAAA,EAA+B,KAAA,CAAM,IAAI,GAAG,SAAS,CAAA;AAAA,QAElE;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-SYXLPCQP.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { ContainerProps } from \"./Container.types\";\n\nconst SIZES = {\n  sm: \"max-w-3xl\",\n  md: \"max-w-5xl\",\n  lg: \"max-w-7xl\",\n  full: \"max-w-none\",\n} as const;\n\n/**\n * The page's horizontal measure — centred, capped, with gutters.\n *\n * Every Swiss-family gallery style hand-rolled this. What they repeated was not\n * `mx-auto` but the DECISION about how wide the page reads, and twenty copies of\n * a decision drift. This owns the decision and leaves the styling replaceable.\n */\nexport const Container = forwardRef<HTMLElement, ContainerProps>(\n  ({ children, size = \"md\", as: Tag = \"div\", className, ...props }, ref) => {\n    // `as` makes the element dynamic, so the ref type cannot be known\n    // statically. Narrowed at the boundary rather than dragging a full\n    // polymorphic-component generic into a layout primitive.\n    const Component = Tag as \"div\";\n\n    return (\n      <Component\n        ref={ref as React.Ref<HTMLDivElement>}\n        {...props}\n        data-react-fancy-container=\"\"\n        data-size={size}\n        className={cn(\"mx-auto w-full px-4 sm:px-6\", SIZES[size], className)}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nContainer.displayName = \"Container\";\n"]}

package/dist/chunk-VQ4M25U3.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var SPACE = { sm: "py-8", md: "py-16", lg: "py-24" };
+var Section = react.forwardRef(
+  ({ children, space = "md", divider = false, as: Tag = "section", className, ...props }, ref) => {
+    const Component = Tag;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        ...props,
+        "data-react-fancy-section": "",
+        "data-space": space,
+        className: chunk3Z6ALUWP_cjs.cn(
+          SPACE[space],
+          divider && "border-t border-zinc-200 dark:border-zinc-800",
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+
+exports.Section = Section;
+//# sourceMappingURL=chunk-VQ4M25U3.cjs.map
+//# sourceMappingURL=chunk-VQ4M25U3.cjs.map

package/dist/chunk-VQ4M25U3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Section/Section.tsx"],"names":["forwardRef","jsx","cn"],"mappings":";;;;;;AAKA,IAAM,QAAQ,EAAE,EAAA,EAAI,QAAQ,EAAA,EAAI,OAAA,EAAS,IAAI,OAAA,EAAQ;AAS9C,IAAM,OAAA,GAAUA,gBAAA;AAAA,EACrB,CAAC,EAAE,QAAA,EAAU,KAAA,GAAQ,MAAM,OAAA,GAAU,KAAA,EAAO,EAAA,EAAI,GAAA,GAAM,SAAA,EAAW,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC9F,IAAA,MAAM,SAAA,GAAY,GAAA;AAElB,IAAA,uBACEC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,0BAAA,EAAyB,EAAA;AAAA,QACzB,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAWC,oBAAA;AAAA,UACT,MAAM,KAAK,CAAA;AAAA,UACX,OAAA,IAAW,+CAAA;AAAA,UACX;AAAA,SACF;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-VQ4M25U3.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { SectionProps } from \"./Section.types\";\n\nconst SPACE = { sm: \"py-8\", md: \"py-16\", lg: \"py-24\" } as const;\n\n/**\n * Vertical rhythm between page sections, with the optional opening hairline.\n *\n * Pairs with `Eyebrow`, which is what usually sits at the top of one. The rule\n * is a prop rather than a caller-drawn border because half the gallery styles\n * drew it and half forgot, and an inconsistent rule reads as a bug.\n */\nexport const Section = forwardRef<HTMLElement, SectionProps>(\n  ({ children, space = \"md\", divider = false, as: Tag = \"section\", className, ...props }, ref) => {\n    const Component = Tag as \"section\";\n\n    return (\n      <Component\n        ref={ref as React.Ref<HTMLElement>}\n        {...props}\n        data-react-fancy-section=\"\"\n        data-space={space}\n        className={cn(\n          SPACE[space],\n          divider && \"border-t border-zinc-200 dark:border-zinc-800\",\n          className,\n        )}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nSection.displayName = \"Section\";\n"]}

package/dist/container.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var chunkSYXLPCQP_cjs = require('./chunk-SYXLPCQP.cjs');
+require('./chunk-3Z6ALUWP.cjs');
+
+
+
+Object.defineProperty(exports, "Container", {
+  enumerable: true,
+  get: function () { return chunkSYXLPCQP_cjs.Container; }
+});
+//# sourceMappingURL=container.cjs.map
+//# sourceMappingURL=container.cjs.map

package/dist/container.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"container.cjs"}

package/dist/container.d.cts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ElementType } from 'react';
+
+interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    /** Reading measure. `md` (default) suits body text; `full` removes the cap. */
+    size?: "sm" | "md" | "lg" | "full";
+    /** The element to render. A container is often a `<main>` or `<header>`. */
+    as?: ElementType;
+}
+
+/**
+ * The page's horizontal measure — centred, capped, with gutters.
+ *
+ * Every Swiss-family gallery style hand-rolled this. What they repeated was not
+ * `mx-auto` but the DECISION about how wide the page reads, and twenty copies of
+ * a decision drift. This owns the decision and leaves the styling replaceable.
+ */
+declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLElement>>;
+
+export { Container, type ContainerProps };

package/dist/container.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ElementType } from 'react';
+
+interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    /** Reading measure. `md` (default) suits body text; `full` removes the cap. */
+    size?: "sm" | "md" | "lg" | "full";
+    /** The element to render. A container is often a `<main>` or `<header>`. */
+    as?: ElementType;
+}
+
+/**
+ * The page's horizontal measure — centred, capped, with gutters.
+ *
+ * Every Swiss-family gallery style hand-rolled this. What they repeated was not
+ * `mx-auto` but the DECISION about how wide the page reads, and twenty copies of
+ * a decision drift. This owns the decision and leaves the styling replaceable.
+ */
+declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLElement>>;
+
+export { Container, type ContainerProps };

package/dist/container.js

@@ -0,0 +1,4 @@
+export { Container } from './chunk-DBJWHDWP.js';
+import './chunk-DSUHZO6T.js';
+//# sourceMappingURL=container.js.map
+//# sourceMappingURL=container.js.map

package/dist/container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"container.js"}

package/dist/editor.cjs

@@ -5,8 +5,8 @@ require('./chunk-G34OBTU3.cjs');
 require('./chunk-T6YELZPJ.cjs');
 require('./chunk-RNHIDZLE.cjs');
 require('./chunk-TXTRTTG7.cjs');
-require('./chunk-DJ3YM72H.cjs');
 require('./chunk-3WGRVDQR.cjs');
+require('./chunk-DJ3YM72H.cjs');
 require('./chunk-BFKCVSNK.cjs');
 require('./chunk-J2DI6RMR.cjs');
 require('./chunk-L3V3BYVS.cjs');

package/dist/editor.js

@@ -3,8 +3,8 @@ import './chunk-RNPFSVFN.js';
 import './chunk-CPY7NHXM.js';
 import './chunk-FVV76TRF.js';
 import './chunk-5U2DZ7AV.js';
-import './chunk-ZLCVKYHY.js';
 import './chunk-CHADHN6M.js';
+import './chunk-ZLCVKYHY.js';
 import './chunk-XJXQG34J.js';
 import './chunk-MQ6VGG62.js';
 import './chunk-NRXK42LO.js';

package/dist/grid.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var chunkAY3JABE3_cjs = require('./chunk-AY3JABE3.cjs');
+require('./chunk-3Z6ALUWP.cjs');
+
+
+
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function () { return chunkAY3JABE3_cjs.Grid; }
+});
+//# sourceMappingURL=grid.cjs.map
+//# sourceMappingURL=grid.cjs.map

package/dist/grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"grid.cjs"}

package/dist/grid.d.cts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    /** Column count at the widest breakpoint. Default `3`. */
+    cols?: number;
+    /** Gutter. Default `md`. */
+    gap?: "sm" | "md" | "lg";
+    /**
+     * Collapse toward one column on small screens. Default `true`.
+     *
+     * Off for grids that are genuinely fixed — a 2-up of icons, say — where
+     * collapsing looks broken rather than responsive.
+     */
+    responsive?: boolean;
+}
+
+/**
+ * The modular grid.
+ *
+ * Column count goes through a custom property rather than a `grid-cols-N` class
+ * because N is a prop: Tailwind cannot generate a class it never sees in source,
+ * and every hand-rolled copy in the gallery worked around that differently. The
+ * property also gives a design a single place to override the breakpoint
+ * behaviour in CSS without fighting a utility.
+ */
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Grid, type GridProps };

package/dist/grid.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    /** Column count at the widest breakpoint. Default `3`. */
+    cols?: number;
+    /** Gutter. Default `md`. */
+    gap?: "sm" | "md" | "lg";
+    /**
+     * Collapse toward one column on small screens. Default `true`.
+     *
+     * Off for grids that are genuinely fixed — a 2-up of icons, say — where
+     * collapsing looks broken rather than responsive.
+     */
+    responsive?: boolean;
+}
+
+/**
+ * The modular grid.
+ *
+ * Column count goes through a custom property rather than a `grid-cols-N` class
+ * because N is a prop: Tailwind cannot generate a class it never sees in source,
+ * and every hand-rolled copy in the gallery worked around that differently. The
+ * property also gives a design a single place to override the breakpoint
+ * behaviour in CSS without fighting a utility.
+ */
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Grid, type GridProps };

package/dist/grid.js

@@ -0,0 +1,4 @@
+export { Grid } from './chunk-MKFWFZVX.js';
+import './chunk-DSUHZO6T.js';
+//# sourceMappingURL=grid.js.map
+//# sourceMappingURL=grid.js.map

package/dist/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"grid.js"}