{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "table-glass", "title": "Glass table", "description": "Styled table: the Glass set. 5 decorative table variations (FrostTable, TintTable, SmokeTable, CrystalTable, DepthTable) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.", "dependencies": [], "registryDependencies": [ "@ai2/tokens", "@ai2/glass" ], "files": [ { "path": "registry/ai2/styled/table-glass.tsx", "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { glassDepth } from \"@/registry/ai2/ui/glass\"\n\n/* Glass table family: 5 frosted-glass data tables. The difference is only on the\n surface - frost, tint, smoke, crystal and depth. Each export renders a complete\n with no props too (3 columns / 4 rows by default). Color comes ONLY from\n semantic tokens, via alpha color-mix. No animation, pure CSS; self-contained.\n\n The glass surface derives from the glassDepth scale inside @ai2/glass; the\n backdrop-blur is never hand-written, so every variant carries the ai2 inset\n highlight signature.\n\n Depth map (a wide data panel sitting in the page flow):\n Crystal -> sm (4px) clear glass + its own gradient\n Frost -> md (8px) the canonical default\n Tint -> md (8px) the same glass as Frost, differing in its info hue\n Smoke -> lg (16px) dense smoke\n Depth -> xl (24px) a floating layered panel\n\n NO GLASS ON GLASS: the blur is ONLY on the shell (the w-full overflow-x-auto\n wrapper). thead/tr are only an opaque or semi-transparent COLOR layer and never\n take their own backdrop-filter - if they did, the overlapping blur would turn to\n mud. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype Column = { key: string; label: React.ReactNode }\ntype Row = Record\n\ntype TableProps = {\n className?: string\n size?: StyledSize\n columns?: Column[]\n rows?: Row[]\n}\n\n/* A sensible default data set so it renders without props. */\nconst defaultColumns: Column[] = [\n { key: \"name\", label: \"Name\" },\n { key: \"role\", label: \"Role\" },\n { key: \"status\", label: \"Status\" },\n]\n\nconst defaultRows: Row[] = [\n { name: \"Ada Lovelace\", role: \"Engineer\", status: \"Active\" },\n { name: \"Alan Turing\", role: \"Researcher\", status: \"Active\" },\n { name: \"Grace Hopper\", role: \"Architect\", status: \"Away\" },\n { name: \"Katherine Johnson\", role: \"Analyst\", status: \"Active\" },\n]\n\n/* Hucre yogunlugu: padding + metin olcegi. */\nconst cell: Record = {\n sm: \"px-2.5 py-1.5 text-xs\",\n md: \"px-3 py-2 text-sm\",\n lg: \"px-4 py-2.5 text-sm\",\n xl: \"px-5 py-3 text-base\",\n}\n\nconst headCell: Record = {\n sm: \"px-2.5 py-1.5 text-xs\",\n md: \"px-3 py-2 text-xs\",\n lg: \"px-4 py-2.5 text-sm\",\n xl: \"px-5 py-3 text-sm\",\n}\n\nconst tableBase = \"w-full border-collapse text-left align-middle text-foreground\"\nconst headBase = \"font-medium text-muted-foreground\"\n\nfunction resolve(columns?: Column[], rows?: Row[]) {\n return {\n cols: columns && columns.length > 0 ? columns : defaultColumns,\n data: rows && rows.length > 0 ? rows : defaultRows,\n }\n}\n\ntype GlassConfig = {\n /** Kabuk yuzeyi: kenarlik + cam zemin + blur. */\n shell: string\n /** Baslik satiri yuzeyi. */\n head: string\n /** Body row separator plus hover tone. */\n row: string\n}\n\n/* Shared shell: a glass surface plus a real semantic table. */\nfunction GlassTableShell({\n props,\n config,\n}: {\n props: TableProps\n config: GlassConfig\n}) {\n const { className, size = \"md\", columns, rows } = props\n const { cols, data } = resolve(columns, rows)\n\n return (\n \n
\n \n \n {cols.map((col) => (\n \n ))}\n \n \n \n {data.map((row, i) => (\n \n {cols.map((col) => (\n \n ))}\n \n ))}\n \n
\n {col.label}\n
\n {row[col.key]}\n
\n \n )\n}\n\n/* Frost: the canonical default glass (md/8px). The scale's bg-background/60 is the same as the old hand-written 60% surface; it now brings the signature along too. */\nexport function FrostTable(props: TableProps) {\n return (\n \n )\n}\n\n/* Tint: the SAME md step as Frost; what distinguishes it is the info hue, not the blur. (Because primary/brand carries ~0.005 chroma, a \"primary tint\" would be invisible.) */\nexport function TintTable(props: TableProps) {\n return (\n \n )\n}\n\n/* Smoke: lg (16px). It used to be xl; a wide table sits on a flat page ground, and with nothing to diffuse the 24px only cost a compositor layer. */\nexport function SmokeTable(props: TableProps) {\n return (\n \n )\n}\n\n/* Crystal: sm (4px) - clear glass means little diffusion. Its character is carried by the gradient, which is why the step's fill colour is deliberately pulled to transparent: the gradient is a background-IMAGE and the step's bg is a background-COLOR; both would sit there at once and the panel would read far more opaque than Crystal promises. */\nexport function CrystalTable(props: TableProps) {\n return (\n \n )\n}\n\n/* Depth: xl (24px) - the only variant in the family meant to read as a genuinely\n floating layered panel. The old shadow-inner was REMOVED: cn() reduces the\n box-shadow group to whichever comes last, so shadow-inner was silently deleting the\n glassDepth signature. The layered feel now comes from the opaque (NON-glass) raised\n header; the header never takes its own backdrop-filter, otherwise it would be glass\n on glass. */\nexport function DepthTable(props: TableProps) {\n return (\n \n )\n}\n", "type": "registry:component", "target": "components/ui/table-glass.tsx" } ], "categories": [ "styled", "table" ], "type": "registry:component" }