Auto Grid

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Auto Grid — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// A responsive, intrinsically-wrapping grid of equal cells with NO media
8// queries: children flow into as many columns as fit at a configurable
9// minimum item width, then grow to share the leftover space. This is the
10// "RAM" pattern (Repeat, Auto, Minmax) — the card-grid recipe most people
11// reach for. Pure CSS Grid; zero JavaScript.
12//
13// Built on (read before editing):
14//   repos/web.dev/src/site/content/en/patterns/layout/repeat-auto-minmax/index.md
15//     — the canonical recipe: `grid-template-columns: repeat(auto-fit,
16//       minmax(150px, 1fr))`. auto-fit collapses empty tracks so filled
17//       tracks grow; auto-fill keeps empty tracks (their width reserved).
18//   repos/web.dev/src/site/content/en/learn/css/grid/index.md:295-389
19//     — `minmax(0, 1fr)` forces equal share minus gaps; the
20//       `auto-fill`/`auto-fit` keywords create "as many tracks as will fit"
21//       with no media queries; the subtle auto-fill vs auto-fit difference.
22//   repos/mdn/files/en-us/web/css/minmax/index.md (minmax function)
23//   repos/mdn/files/en-us/web/css/min/index.md
24//     — `min(var(--auto-grid-min), 100%)` guards the lower bound so a single
25//       wide item can never overflow a container narrower than the min.
26//
27// shadcn/ui has no Auto Grid (React libraries leave layout to the consumer),
28// so there is no class string to mirror — this is a layout primitive.
29//
30// API shape:
31//   - `min`  : the per-item minimum width (any CSS length). Drives how many
32//              columns fit. Default "16rem".
33//   - `gap`  : the Tailwind gap step (number → gap-<n>) or a class. Default 4.
34//   - `fill` : false (default) uses auto-fit — empty tracks collapse and
35//              real items stretch to fill the row. true uses auto-fill —
36//              empty tracks are kept, so a half-empty last row stays aligned
37//              to the column rhythm rather than stretching.
38//   - `as`   : the element/role. Default <div>. Use "ul"/"ol" for a list of
39//              cards (each child should then be an <li>), or "section".
40//
41// We publish `--auto-grid-min` on the root and read it in an arbitrary
42// `grid-template-columns` utility, exactly like RangeSlider publishes
43// `--range-min`/`--range-max`. No runtime; the browser does the layout.
44 
45// … truncated