{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"grid","type":"registry:ui","title":"Grid","description":"Modular responsive grid.","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/grid\/Grid.tsx","content":"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 \u2014 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}` \u2014 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 \u2014 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","type":"registry:ui","target":"components\/fancy\/grid\/Grid.tsx"},{"path":"components\/fancy\/grid\/Grid.types.ts","content":"import type { HTMLAttributes, ReactNode } from \"react\";\n\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n  \/**\n   * The most columns this grid may use. Default `3`.\n   *\n   * A CEILING, not a fixed count: with `responsive` on (the default) the grid\n   * uses fewer as it narrows and never more than this. Published as\n   * `--fancy-grid-cols`, which the track template reads \u2014 so overriding that\n   * property in CSS genuinely changes the layout.\n   *\/\n  cols?: number;\n  \/** Gutter. Default `md`. *\/\n  gap?: \"sm\" | \"md\" | \"lg\";\n  \/**\n   * Collapse toward one column on small screens. Default `true`.\n   *\n   * Off for grids that are genuinely fixed \u2014 a 2-up of icons, say \u2014 where\n   * collapsing looks broken rather than responsive.\n   *\/\n  responsive?: boolean;\n}\n","type":"registry:ui","target":"components\/fancy\/grid\/Grid.types.ts"},{"path":"components\/fancy\/grid\/index.ts","content":"export { Grid } from \".\/Grid\";\nexport type { GridProps } from \".\/Grid.types\";\n","type":"registry:ui","target":"components\/fancy\/grid\/index.ts"}],"since":"0.5"}