{"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"]}