{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "accordion-glass", "title": "Glass accordion", "description": "Styled accordion: the Glass set. 5 decorative accordion variations (FrostAccordion, TintAccordion, SmokeAccordion, CrystalAccordion, DepthAccordion) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.", "dependencies": [ "motion@^12.42.2", "lucide-react@^1.23.0" ], "registryDependencies": [ "@ai2/tokens", "@ai2/glass" ], "files": [ { "path": "registry/ai2/styled/accordion-glass.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown } from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { glassDepth } from \"@/registry/ai2/ui/glass\"\n\n/* Glass accordion family: 5 frosted-glass accordions. The glass surface is NO\n LONGER hand-written: every variant derives from the glassDepth scale in\n @ai2/glass, so it carries the ai2 inset-highlight signature. The variants\n differ by depth step and tint.\n Every export is a complete accordion: internal single-open state, a button\n header with aria-expanded, framer height auto animation. Colour comes ONLY\n from tokens. Alpha via color-mix. Under reduced-motion opening and closing\n are instant. Size = padding + text scale. Renders without props too.\n\n Depth map (large panels inside the page flow: medium weight):\n Crystal -> sm (4px) clear glass; the name already says \"clear\", so little\n blur is the honest choice\n Frost -> md (8px) the canonical default frost\n Tint -> md (8px) the SAME glass as Frost; the difference is the info\n hue, not the blur\n Smoke -> lg (16px) dense smoke; the content underneath becomes texture\n Depth -> xl (24px) the only genuinely \"floating\" variant; this one earns\n the xl\n\n Glass does NOT stack: the outer container is not glass, the items are sibling\n panels.\n tailwind-merge trap: glassDepth carries a [box-shadow:...], which is why no\n variant adds shadow-* / ring-* - doing so would silently drop the signature.\n Extra definition is given through the border only. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport interface StyledAccordionItem {\n value: string\n title: React.ReactNode\n content: React.ReactNode\n}\n\ninterface StyledAccordionProps {\n className?: string\n size?: StyledSize\n items?: StyledAccordionItem[]\n defaultOpen?: string\n}\n\nconst headerPad: Record = {\n sm: \"px-3 py-2.5 text-sm\",\n md: \"px-4 py-3 text-sm\",\n lg: \"px-5 py-4 text-base\",\n xl: \"px-6 py-5 text-lg\",\n}\n\nconst bodyPad: Record = {\n sm: \"px-3 pb-2.5 text-sm\",\n md: \"px-4 pb-3 text-sm\",\n lg: \"px-5 pb-4 text-base\",\n xl: \"px-6 pb-5 text-base\",\n}\n\nconst iconSize: Record = {\n sm: \"size-4\",\n md: \"size-4\",\n lg: \"size-5\",\n xl: \"size-5\",\n}\n\nconst defaultItems: StyledAccordionItem[] = [\n {\n value: \"item-1\",\n title: \"What is included?\",\n content:\n \"Every plan ships the full component library, semantic tokens, and lifetime updates for the tier you own.\",\n },\n {\n value: \"item-2\",\n title: \"How does installation work?\",\n content:\n \"Add any component with a single CLI command. Files land in your project and stay fully editable.\",\n },\n {\n value: \"item-3\",\n title: \"Can I use it in production?\",\n content:\n \"Yes. The system is framework agnostic, self contained, and safe to ship to any number of projects.\",\n },\n]\n\nfunction useSingleOpen(defaultOpen?: string) {\n const [open, setOpen] = React.useState(defaultOpen ?? null)\n const toggle = React.useCallback(\n (value: string) => setOpen((cur) => (cur === value ? null : value)),\n []\n )\n return { open, toggle }\n}\n\nconst headerBase =\n \"flex w-full items-center justify-between gap-3 text-left font-medium outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n\nfunction Panel({\n isOpen,\n size,\n children,\n}: {\n isOpen: boolean\n size: StyledSize\n children: React.ReactNode\n}) {\n const reduce = useReducedMotion()\n return (\n \n {isOpen && (\n \n
\n {children}\n
\n \n )}\n \n )\n}\n\nfunction Chevron({ isOpen, size }: { isOpen: boolean; size: StyledSize }) {\n const reduce = useReducedMotion()\n return (\n \n \n \n )\n}\n\n/* Shared frosted-glass shell: every item is a separate translucent panel with\n space between them. panelClass carries each variant's blur/tint technique. */\nfunction GlassShell({\n props,\n panelClass,\n}: {\n props: StyledAccordionProps\n panelClass: string\n}) {\n const { className, size = \"md\", items = defaultItems, defaultOpen } = props\n const { open, toggle } = useSingleOpen(defaultOpen)\n return (\n \n {items.map((item) => {\n const isOpen = open === item.value\n return (\n \n toggle(item.value)}\n className={cn(headerBase, headerPad[size])}\n >\n {item.title}\n \n \n \n {item.content}\n \n \n )\n })}\n \n )\n}\n\n/* Frost: the canonical default glass (md/8px). The scale's own bg-background/60\n provides the surface; the variant only softens the border. */\nexport function FrostAccordion(props: StyledAccordionProps) {\n return (\n \n )\n}\n\n/* Tint: the SAME md step as Frost - the difference is the info hue, not the\n blur. (primary/brand chroma carries ~0.005, so a \"primary tint\" would be\n invisible; the tint comes from info.) The tint bg-* replaces the scale's\n bg-background/60, and the supports-[] variant has to be overridden too,\n otherwise the neutral ground inside @supports suppresses the tint. */\nexport function TintAccordion(props: StyledAccordionProps) {\n return (\n \n )\n}\n\n/* Smoke: lg (16px) - turning the content underneath into texture is exactly\n what Smoke promises. */\nexport function SmokeAccordion(props: StyledAccordionProps) {\n return (\n \n )\n}\n\n/* Crystal: sm (4px). It used to be blur-xl, which contradicted its own name -\n clear glass means little diffusion. The sm step's bg-background/50 is already\n more transparent than Frost, so no extra tint is needed; the thin border\n carries the character. */\nexport function CrystalAccordion(props: StyledAccordionProps) {\n return (\n \n )\n}\n\n/* Depth: xl (24px) - the one variant in the family meant to read as a genuinely\n floating panel. The old shadow-sm was REMOVED: cn() collapses the same\n box-shadow group down to the last one, so shadow-sm was silently erasing the\n glassDepth signature. The extra definition now comes from an opaque\n border-border. */\nexport function DepthAccordion(props: StyledAccordionProps) {\n return (\n \n )\n}\n", "type": "registry:component", "target": "components/ui/accordion-glass.tsx" } ], "categories": [ "styled", "accordion" ], "type": "registry:component" }