@particle-academy/react-fancy 5.23.0 → 5.23.1

package/dist/{chunk-7TGJFNZM.cjs → chunk-OOZCJLEF.cjs}

@@ -4,11 +4,7 @@ var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var GAP = {
-  sm: { className: "gap-3", length: "0.75rem" },
-  md: { className: "gap-6", length: "1.5rem" },
-  lg: { className: "gap-10", length: "2.5rem" }
-};
+var GAP = { sm: "0.75rem", md: "1.5rem", lg: "2.5rem" };
 var MIN_TRACK = "16rem";
 var Grid = react.forwardRef(
   ({ children, cols = 3, gap = "md", responsive = true, className, style, ...props }, ref) => {
@@ -20,11 +16,14 @@ var Grid = react.forwardRef(
         ...props,
         "data-react-fancy-grid": "",
         "data-responsive": responsive ? "true" : "false",
-        className: chunkZU5Q77OT_cjs.cn("grid", GAP[gap].className, className),
+        className: chunkZU5Q77OT_cjs.cn("grid", className),
         style: {
           ...style,
           ["--fancy-grid-cols"]: String(cols),
-          ["--fancy-grid-gap"]: GAP[gap].length,
+          ["--fancy-grid-gap"]: GAP[gap],
+          // Read back rather than inlined, so overriding the property in CSS
+          // moves the gutter AND the arithmetic together.
+          gap: "var(--fancy-grid-gap)",
           gridTemplateColumns: responsive ? `repeat(auto-fit, minmax(min(100%, max(${MIN_TRACK}, ${cap})), 1fr))` : "repeat(var(--fancy-grid-cols), minmax(0, 1fr))"
         },
         children
@@ -35,5 +34,5 @@ var Grid = react.forwardRef(
 Grid.displayName = "Grid";
 
 exports.Grid = Grid;
-//# sourceMappingURL=chunk-7TGJFNZM.cjs.map
-//# sourceMappingURL=chunk-7TGJFNZM.cjs.map
+//# sourceMappingURL=chunk-OOZCJLEF.cjs.map
+//# sourceMappingURL=chunk-OOZCJLEF.cjs.map

package/dist/chunk-OOZCJLEF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Grid/Grid.tsx"],"names":["forwardRef","jsx","cn"],"mappings":";;;;;;AAeA,IAAM,MAAM,EAAE,EAAA,EAAI,WAAW,EAAA,EAAI,QAAA,EAAU,IAAI,QAAA,EAAS;AAGxD,IAAM,SAAA,GAAY,OAAA;AA8BX,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;AAI1F,IAAA,MAAM,GAAA,GACJ,8FAAA;AAEF,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,SAAA,EAAWC,oBAAA,CAAG,MAAA,EAAQ,SAAS,CAAA;AAAA,QAC/B,KAAA,EAAO;AAAA,UACL,GAAG,KAAA;AAAA,UACH,CAAC,mBAA6B,GAAG,MAAA,CAAO,IAAI,CAAA;AAAA,UAC5C,CAAC,kBAA4B,GAAG,GAAA,CAAI,GAAG,CAAA;AAAA;AAAA;AAAA,UAGvC,GAAA,EAAK,uBAAA;AAAA,UACL,qBAAqB,UAAA,GACjB,CAAA,sCAAA,EAAyC,SAAS,CAAA,EAAA,EAAK,GAAG,CAAA,SAAA,CAAA,GAC1D;AAAA,SACN;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"chunk-OOZCJLEF.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { GridProps } from \"./Grid.types\";\n\n/**\n * Gutter lengths. The grid applies these ITSELF rather than through a Tailwind\n * `gap-*` class, because the column cap has to divide by the gap that is\n * actually in effect — and a class is a value the component does not control.\n *\n * 5.23.0 kept the class and hard-coded the matching length beside it. In the\n * showcase those two disagreed by 2px, which was enough: with the real gutter\n * wider than the arithmetic assumed, N tracks plus N-1 gaps overflowed the row\n * and `auto-fit` dropped to N-1. A 3-up grid rendered 2-up, and nothing was\n * wrong with either value on its own.\n */\nconst GAP = { sm: \"0.75rem\", md: \"1.5rem\", lg: \"2.5rem\" } as const;\n\n/** Narrowest a column may get before the grid drops one. */\nconst MIN_TRACK = \"16rem\";\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 *\n * ## `cols` is a CEILING, not a fixed count\n *\n * The responsive template reads `--fancy-grid-cols`, so `cols` means \"this many\n * at most, fewer when narrow\". Until 5.23.0 it meant nothing at all while\n * `responsive` was on: the template was a fixed `repeat(auto-fit, minmax(min(\n * 100%, 16rem), 1fr))`, so a grid asked for 2 and a grid asked for 5 rendered\n * the same track list, and the only way to get a real column count was\n * `responsive={false}` — which then had no breakpoints at all. The property this\n * doc comment has always advertised was set and never read.\n *\n * The gutter is in the arithmetic because it has to be: N tracks each `100%/N`\n * wide plus N-1 gaps overflow the row, and `auto-fit` responds by fitting N-1.\n * An off-by-one that looks like a design decision.\n *\n * Which is why the grid sets its own `gap` from `--fancy-grid-gap` instead of a\n * Tailwind `gap-*` class: the cap must divide by the gutter actually in effect,\n * and a class is a value this component does not control. Override the property\n * to change the gutter — that moves the spacing and the arithmetic together.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  ({ children, cols = 3, gap = \"md\", responsive = true, className, style, ...props }, ref) => {\n    // The largest a track may be: an even share of the row once the gutters are\n    // paid for. `max()` against MIN_TRACK keeps the collapse; `min()` against\n    // 100% stops a single column overflowing a narrow viewport.\n    const cap =\n      \"calc((100% - (var(--fancy-grid-cols) - 1) * var(--fancy-grid-gap)) / var(--fancy-grid-cols))\";\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-react-fancy-grid=\"\"\n        data-responsive={responsive ? \"true\" : \"false\"}\n        className={cn(\"grid\", className)}\n        style={{\n          ...style,\n          [\"--fancy-grid-cols\" as string]: String(cols),\n          [\"--fancy-grid-gap\" as string]: GAP[gap],\n          // Read back rather than inlined, so overriding the property in CSS\n          // moves the gutter AND the arithmetic together.\n          gap: \"var(--fancy-grid-gap)\",\n          gridTemplateColumns: responsive\n            ? `repeat(auto-fit, minmax(min(100%, max(${MIN_TRACK}, ${cap})), 1fr))`\n            : \"repeat(var(--fancy-grid-cols), minmax(0, 1fr))\",\n        }}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nGrid.displayName = \"Grid\";\n"]}

package/dist/{chunk-4VVC46ZZ.js → chunk-TM3RTWKI.js}

@@ -2,11 +2,7 @@ import { cn } from './chunk-MMW2JGKZ.js';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-var GAP = {
-  sm: { className: "gap-3", length: "0.75rem" },
-  md: { className: "gap-6", length: "1.5rem" },
-  lg: { className: "gap-10", length: "2.5rem" }
-};
+var GAP = { sm: "0.75rem", md: "1.5rem", lg: "2.5rem" };
 var MIN_TRACK = "16rem";
 var Grid = forwardRef(
   ({ children, cols = 3, gap = "md", responsive = true, className, style, ...props }, ref) => {
@@ -18,11 +14,14 @@ var Grid = forwardRef(
         ...props,
         "data-react-fancy-grid": "",
         "data-responsive": responsive ? "true" : "false",
-        className: cn("grid", GAP[gap].className, className),
+        className: cn("grid", className),
         style: {
           ...style,
           ["--fancy-grid-cols"]: String(cols),
-          ["--fancy-grid-gap"]: GAP[gap].length,
+          ["--fancy-grid-gap"]: GAP[gap],
+          // Read back rather than inlined, so overriding the property in CSS
+          // moves the gutter AND the arithmetic together.
+          gap: "var(--fancy-grid-gap)",
           gridTemplateColumns: responsive ? `repeat(auto-fit, minmax(min(100%, max(${MIN_TRACK}, ${cap})), 1fr))` : "repeat(var(--fancy-grid-cols), minmax(0, 1fr))"
         },
         children
@@ -33,5 +32,5 @@ var Grid = forwardRef(
 Grid.displayName = "Grid";
 
 export { Grid };
-//# sourceMappingURL=chunk-4VVC46ZZ.js.map
-//# sourceMappingURL=chunk-4VVC46ZZ.js.map
+//# sourceMappingURL=chunk-TM3RTWKI.js.map
+//# sourceMappingURL=chunk-TM3RTWKI.js.map

package/dist/chunk-TM3RTWKI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Grid/Grid.tsx"],"names":[],"mappings":";;;;AAeA,IAAM,MAAM,EAAE,EAAA,EAAI,WAAW,EAAA,EAAI,QAAA,EAAU,IAAI,QAAA,EAAS;AAGxD,IAAM,SAAA,GAAY,OAAA;AA8BX,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;AAI1F,IAAA,MAAM,GAAA,GACJ,8FAAA;AAEF,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,SAAA,EAAW,EAAA,CAAG,MAAA,EAAQ,SAAS,CAAA;AAAA,QAC/B,KAAA,EAAO;AAAA,UACL,GAAG,KAAA;AAAA,UACH,CAAC,mBAA6B,GAAG,MAAA,CAAO,IAAI,CAAA;AAAA,UAC5C,CAAC,kBAA4B,GAAG,GAAA,CAAI,GAAG,CAAA;AAAA;AAAA;AAAA,UAGvC,GAAA,EAAK,uBAAA;AAAA,UACL,qBAAqB,UAAA,GACjB,CAAA,sCAAA,EAAyC,SAAS,CAAA,EAAA,EAAK,GAAG,CAAA,SAAA,CAAA,GAC1D;AAAA,SACN;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"chunk-TM3RTWKI.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { GridProps } from \"./Grid.types\";\n\n/**\n * Gutter lengths. The grid applies these ITSELF rather than through a Tailwind\n * `gap-*` class, because the column cap has to divide by the gap that is\n * actually in effect — and a class is a value the component does not control.\n *\n * 5.23.0 kept the class and hard-coded the matching length beside it. In the\n * showcase those two disagreed by 2px, which was enough: with the real gutter\n * wider than the arithmetic assumed, N tracks plus N-1 gaps overflowed the row\n * and `auto-fit` dropped to N-1. A 3-up grid rendered 2-up, and nothing was\n * wrong with either value on its own.\n */\nconst GAP = { sm: \"0.75rem\", md: \"1.5rem\", lg: \"2.5rem\" } as const;\n\n/** Narrowest a column may get before the grid drops one. */\nconst MIN_TRACK = \"16rem\";\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 *\n * ## `cols` is a CEILING, not a fixed count\n *\n * The responsive template reads `--fancy-grid-cols`, so `cols` means \"this many\n * at most, fewer when narrow\". Until 5.23.0 it meant nothing at all while\n * `responsive` was on: the template was a fixed `repeat(auto-fit, minmax(min(\n * 100%, 16rem), 1fr))`, so a grid asked for 2 and a grid asked for 5 rendered\n * the same track list, and the only way to get a real column count was\n * `responsive={false}` — which then had no breakpoints at all. The property this\n * doc comment has always advertised was set and never read.\n *\n * The gutter is in the arithmetic because it has to be: N tracks each `100%/N`\n * wide plus N-1 gaps overflow the row, and `auto-fit` responds by fitting N-1.\n * An off-by-one that looks like a design decision.\n *\n * Which is why the grid sets its own `gap` from `--fancy-grid-gap` instead of a\n * Tailwind `gap-*` class: the cap must divide by the gutter actually in effect,\n * and a class is a value this component does not control. Override the property\n * to change the gutter — that moves the spacing and the arithmetic together.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  ({ children, cols = 3, gap = \"md\", responsive = true, className, style, ...props }, ref) => {\n    // The largest a track may be: an even share of the row once the gutters are\n    // paid for. `max()` against MIN_TRACK keeps the collapse; `min()` against\n    // 100% stops a single column overflowing a narrow viewport.\n    const cap =\n      \"calc((100% - (var(--fancy-grid-cols) - 1) * var(--fancy-grid-gap)) / var(--fancy-grid-cols))\";\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-react-fancy-grid=\"\"\n        data-responsive={responsive ? \"true\" : \"false\"}\n        className={cn(\"grid\", className)}\n        style={{\n          ...style,\n          [\"--fancy-grid-cols\" as string]: String(cols),\n          [\"--fancy-grid-gap\" as string]: GAP[gap],\n          // Read back rather than inlined, so overriding the property in CSS\n          // moves the gutter AND the arithmetic together.\n          gap: \"var(--fancy-grid-gap)\",\n          gridTemplateColumns: responsive\n            ? `repeat(auto-fit, minmax(min(100%, max(${MIN_TRACK}, ${cap})), 1fr))`\n            : \"repeat(var(--fancy-grid-cols), minmax(0, 1fr))\",\n        }}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nGrid.displayName = \"Grid\";\n"]}

package/dist/grid.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunk7TGJFNZM_cjs = require('./chunk-7TGJFNZM.cjs');
+var chunkOOZCJLEF_cjs = require('./chunk-OOZCJLEF.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "Grid", {
   enumerable: true,
-  get: function () { return chunk7TGJFNZM_cjs.Grid; }
+  get: function () { return chunkOOZCJLEF_cjs.Grid; }
 });
 //# sourceMappingURL=grid.cjs.map
 //# sourceMappingURL=grid.cjs.map

package/dist/grid.d.cts

@@ -45,6 +45,11 @@ interface GridProps extends HTMLAttributes<HTMLDivElement> {
  * The gutter is in the arithmetic because it has to be: N tracks each `100%/N`
  * wide plus N-1 gaps overflow the row, and `auto-fit` responds by fitting N-1.
  * An off-by-one that looks like a design decision.
+ *
+ * Which is why the grid sets its own `gap` from `--fancy-grid-gap` instead of a
+ * Tailwind `gap-*` class: the cap must divide by the gutter actually in effect,
+ * and a class is a value this component does not control. Override the property
+ * to change the gutter — that moves the spacing and the arithmetic together.
  */
 declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/grid.d.ts

@@ -45,6 +45,11 @@ interface GridProps extends HTMLAttributes<HTMLDivElement> {
  * The gutter is in the arithmetic because it has to be: N tracks each `100%/N`
  * wide plus N-1 gaps overflow the row, and `auto-fit` responds by fitting N-1.
  * An off-by-one that looks like a design decision.
+ *
+ * Which is why the grid sets its own `gap` from `--fancy-grid-gap` instead of a
+ * Tailwind `gap-*` class: the cap must divide by the gutter actually in effect,
+ * and a class is a value this component does not control. Override the property
+ * to change the gutter — that moves the spacing and the arithmetic together.
  */
 declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/grid.js

@@ -1,4 +1,4 @@
-export { Grid } from './chunk-4VVC46ZZ.js';
+export { Grid } from './chunk-TM3RTWKI.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=grid.js.map
 //# sourceMappingURL=grid.js.map

package/dist/index.cjs

@@ -62,7 +62,7 @@ var chunkRPVCMW64_cjs = require('./chunk-RPVCMW64.cjs');
 var chunkGBGJWAXZ_cjs = require('./chunk-GBGJWAXZ.cjs');
 var chunkJV6RDIA6_cjs = require('./chunk-JV6RDIA6.cjs');
 var chunkZVRVOKXH_cjs = require('./chunk-ZVRVOKXH.cjs');
-var chunk7TGJFNZM_cjs = require('./chunk-7TGJFNZM.cjs');
+var chunkOOZCJLEF_cjs = require('./chunk-OOZCJLEF.cjs');
 var chunkY3T7WMT6_cjs = require('./chunk-Y3T7WMT6.cjs');
 var chunkQDVDBUJM_cjs = require('./chunk-QDVDBUJM.cjs');
 var chunkTGNQ5Y6F_cjs = require('./chunk-TGNQ5Y6F.cjs');
@@ -446,7 +446,7 @@ Object.defineProperty(exports, "useFileUpload", {
 });
 Object.defineProperty(exports, "Grid", {
   enumerable: true,
-  get: function () { return chunk7TGJFNZM_cjs.Grid; }
+  get: function () { return chunkOOZCJLEF_cjs.Grid; }
 });
 Object.defineProperty(exports, "Heading", {
   enumerable: true,

package/dist/index.js

@@ -60,7 +60,7 @@ export { Menu, useMenu } from './chunk-RA2VOQ46.js';
 export { MobileMenu, useMobileMenu } from './chunk-P7F32HIH.js';
 export { FileBrowser, FileBrowserNewFolder, useFileBrowser, validateFolderName } from './chunk-TQFQUNV3.js';
 export { FileUpload, useFileUpload } from './chunk-JJBOKZWV.js';
-export { Grid } from './chunk-4VVC46ZZ.js';
+export { Grid } from './chunk-TM3RTWKI.js';
 export { Heading } from './chunk-6GWOB2Z4.js';
 export { ImageViewer } from './chunk-MUCXXYDN.js';
 export { IndexList } from './chunk-UKUNWGL5.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "5.23.0",
+  "version": "5.23.1",
   "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
   "repository": {
     "type": "git",

package/dist/chunk-4VVC46ZZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Grid/Grid.tsx"],"names":[],"mappings":";;;;AAUA,IAAM,GAAA,GAAM;AAAA,EACV,EAAA,EAAI,EAAE,SAAA,EAAW,OAAA,EAAS,QAAQ,SAAA,EAAU;AAAA,EAC5C,EAAA,EAAI,EAAE,SAAA,EAAW,OAAA,EAAS,QAAQ,QAAA,EAAS;AAAA,EAC3C,EAAA,EAAI,EAAE,SAAA,EAAW,QAAA,EAAU,QAAQ,QAAA;AACrC,CAAA;AAGA,IAAM,SAAA,GAAY,OAAA;AAyBX,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;AAI1F,IAAA,MAAM,GAAA,GACJ,8FAAA;AAEF,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,IAAI,GAAG,CAAA,CAAE,WAAW,SAAS,CAAA;AAAA,QACnD,KAAA,EAAO;AAAA,UACL,GAAG,KAAA;AAAA,UACH,CAAC,mBAA6B,GAAG,MAAA,CAAO,IAAI,CAAA;AAAA,UAC5C,CAAC,kBAA4B,GAAG,GAAA,CAAI,GAAG,CAAA,CAAE,MAAA;AAAA,UACzC,qBAAqB,UAAA,GACjB,CAAA,sCAAA,EAAyC,SAAS,CAAA,EAAA,EAAK,GAAG,CAAA,SAAA,CAAA,GAC1D;AAAA,SACN;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"chunk-4VVC46ZZ.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { GridProps } from \"./Grid.types\";\n\n/**\n * Gutter, as both the Tailwind class that draws it and the length the column\n * arithmetic needs. One map so the two cannot drift: if they disagree, the\n * track cap is computed against a gap the grid is not actually using, and\n * auto-fit quietly lands on the wrong column count.\n */\nconst GAP = {\n  sm: { className: \"gap-3\", length: \"0.75rem\" },\n  md: { className: \"gap-6\", length: \"1.5rem\" },\n  lg: { className: \"gap-10\", length: \"2.5rem\" },\n} as const;\n\n/** Narrowest a column may get before the grid drops one. */\nconst MIN_TRACK = \"16rem\";\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 *\n * ## `cols` is a CEILING, not a fixed count\n *\n * The responsive template reads `--fancy-grid-cols`, so `cols` means \"this many\n * at most, fewer when narrow\". Until 5.23.0 it meant nothing at all while\n * `responsive` was on: the template was a fixed `repeat(auto-fit, minmax(min(\n * 100%, 16rem), 1fr))`, so a grid asked for 2 and a grid asked for 5 rendered\n * the same track list, and the only way to get a real column count was\n * `responsive={false}` — which then had no breakpoints at all. The property this\n * doc comment has always advertised was set and never read.\n *\n * The gutter is in the arithmetic because it has to be: N tracks each `100%/N`\n * wide plus N-1 gaps overflow the row, and `auto-fit` responds by fitting N-1.\n * An off-by-one that looks like a design decision.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  ({ children, cols = 3, gap = \"md\", responsive = true, className, style, ...props }, ref) => {\n    // The largest a track may be: an even share of the row once the gutters are\n    // paid for. `max()` against MIN_TRACK keeps the collapse; `min()` against\n    // 100% stops a single column overflowing a narrow viewport.\n    const cap =\n      \"calc((100% - (var(--fancy-grid-cols) - 1) * var(--fancy-grid-gap)) / var(--fancy-grid-cols))\";\n\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, className)}\n        style={{\n          ...style,\n          [\"--fancy-grid-cols\" as string]: String(cols),\n          [\"--fancy-grid-gap\" as string]: GAP[gap].length,\n          gridTemplateColumns: responsive\n            ? `repeat(auto-fit, minmax(min(100%, max(${MIN_TRACK}, ${cap})), 1fr))`\n            : \"repeat(var(--fancy-grid-cols), minmax(0, 1fr))\",\n        }}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nGrid.displayName = \"Grid\";\n"]}

package/dist/chunk-7TGJFNZM.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Grid/Grid.tsx"],"names":["forwardRef","jsx","cn"],"mappings":";;;;;;AAUA,IAAM,GAAA,GAAM;AAAA,EACV,EAAA,EAAI,EAAE,SAAA,EAAW,OAAA,EAAS,QAAQ,SAAA,EAAU;AAAA,EAC5C,EAAA,EAAI,EAAE,SAAA,EAAW,OAAA,EAAS,QAAQ,QAAA,EAAS;AAAA,EAC3C,EAAA,EAAI,EAAE,SAAA,EAAW,QAAA,EAAU,QAAQ,QAAA;AACrC,CAAA;AAGA,IAAM,SAAA,GAAY,OAAA;AAyBX,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;AAI1F,IAAA,MAAM,GAAA,GACJ,8FAAA;AAEF,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,IAAI,GAAG,CAAA,CAAE,WAAW,SAAS,CAAA;AAAA,QACnD,KAAA,EAAO;AAAA,UACL,GAAG,KAAA;AAAA,UACH,CAAC,mBAA6B,GAAG,MAAA,CAAO,IAAI,CAAA;AAAA,UAC5C,CAAC,kBAA4B,GAAG,GAAA,CAAI,GAAG,CAAA,CAAE,MAAA;AAAA,UACzC,qBAAqB,UAAA,GACjB,CAAA,sCAAA,EAAyC,SAAS,CAAA,EAAA,EAAK,GAAG,CAAA,SAAA,CAAA,GAC1D;AAAA,SACN;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"chunk-7TGJFNZM.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { GridProps } from \"./Grid.types\";\n\n/**\n * Gutter, as both the Tailwind class that draws it and the length the column\n * arithmetic needs. One map so the two cannot drift: if they disagree, the\n * track cap is computed against a gap the grid is not actually using, and\n * auto-fit quietly lands on the wrong column count.\n */\nconst GAP = {\n  sm: { className: \"gap-3\", length: \"0.75rem\" },\n  md: { className: \"gap-6\", length: \"1.5rem\" },\n  lg: { className: \"gap-10\", length: \"2.5rem\" },\n} as const;\n\n/** Narrowest a column may get before the grid drops one. */\nconst MIN_TRACK = \"16rem\";\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 *\n * ## `cols` is a CEILING, not a fixed count\n *\n * The responsive template reads `--fancy-grid-cols`, so `cols` means \"this many\n * at most, fewer when narrow\". Until 5.23.0 it meant nothing at all while\n * `responsive` was on: the template was a fixed `repeat(auto-fit, minmax(min(\n * 100%, 16rem), 1fr))`, so a grid asked for 2 and a grid asked for 5 rendered\n * the same track list, and the only way to get a real column count was\n * `responsive={false}` — which then had no breakpoints at all. The property this\n * doc comment has always advertised was set and never read.\n *\n * The gutter is in the arithmetic because it has to be: N tracks each `100%/N`\n * wide plus N-1 gaps overflow the row, and `auto-fit` responds by fitting N-1.\n * An off-by-one that looks like a design decision.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  ({ children, cols = 3, gap = \"md\", responsive = true, className, style, ...props }, ref) => {\n    // The largest a track may be: an even share of the row once the gutters are\n    // paid for. `max()` against MIN_TRACK keeps the collapse; `min()` against\n    // 100% stops a single column overflowing a narrow viewport.\n    const cap =\n      \"calc((100% - (var(--fancy-grid-cols) - 1) * var(--fancy-grid-gap)) / var(--fancy-grid-cols))\";\n\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, className)}\n        style={{\n          ...style,\n          [\"--fancy-grid-cols\" as string]: String(cols),\n          [\"--fancy-grid-gap\" as string]: GAP[gap].length,\n          gridTemplateColumns: responsive\n            ? `repeat(auto-fit, minmax(min(100%, max(${MIN_TRACK}, ${cap})), 1fr))`\n            : \"repeat(var(--fancy-grid-cols), minmax(0, 1fr))\",\n        }}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nGrid.displayName = \"Grid\";\n"]}