{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-glass",
  "title": "Glass collapsible",
  "description": "Styled collapsible: the Glass set. 5 decorative collapsible variations (FrostCollapsible, TintCollapsible, SmokeCollapsible, CrystalCollapsible, DepthCollapsible) 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/collapsible-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 collapsible family: 5 frosted translucent panels. Each export is a\n   complete collapsible: a single trigger + a single expanding body, a button with\n   aria-expanded, and a framer height auto animation. Works controlled\n   (open/onOpenChange) and uncontrolled (defaultOpen). The difference is on the\n   SURFACE: each variant takes a different depth step + tint from the @ai2/glass\n   glassDepth scale (Frost, Tint, Smoke, Crystal, Depth) and they all carry the\n   ai2 inset highlight signature. Color comes ONLY from tokens. Alpha via\n   color-mix. No transform under reduced-motion. Size = padding + text scale.\n   Renders with no props too.\n\n   Depth map (a single panel sitting in the page flow):\n     Crystal -> sm  (4px)  clear glass\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   The body (Panel) does NOT get its own glass surface - glass on glass turns to\n   mud; the blur lives in one place, on the shell. shadow-sm was REMOVED from the\n   shell: cn() reduces the box-shadow group to whichever comes last, so shadow-sm\n   was deleting the signature of all 5 variants. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ninterface StyledCollapsibleProps {\n  className?: string\n  size?: StyledSize\n  title?: React.ReactNode\n  children?: React.ReactNode\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (o: boolean) => void\n}\n\nconst headerPad: Record<StyledSize, string> = {\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<StyledSize, string> = {\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<StyledSize, string> = {\n  sm: \"size-4\",\n  md: \"size-4\",\n  lg: \"size-5\",\n  xl: \"size-5\",\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\nconst defaultTitle = \"What is included?\"\n\nconst defaultChildren =\n  \"Every plan ships the full component library, semantic tokens, and lifetime updates for the tier you own. Add any component with a single CLI command and keep the files fully editable.\"\n\n/* Controlled and uncontrolled open state in a single hook. */\nfunction useControllableOpen({\n  open,\n  defaultOpen,\n  onOpenChange,\n}: {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (o: boolean) => void\n}) {\n  const isControlled = open !== undefined\n  const [internal, setInternal] = React.useState<boolean>(defaultOpen ?? false)\n  const current = isControlled ? (open as boolean) : internal\n  const toggle = React.useCallback(() => {\n    const next = !current\n    if (!isControlled) setInternal(next)\n    onOpenChange?.(next)\n  }, [current, isControlled, onOpenChange])\n  return { isOpen: current, toggle }\n}\n\nfunction Chevron({ isOpen, size }: { isOpen: boolean; size: StyledSize }) {\n  const reduce = useReducedMotion()\n  return (\n    <motion.span\n      aria-hidden\n      className=\"shrink-0 text-muted-foreground\"\n      animate={reduce ? undefined : { rotate: isOpen ? 180 : 0 }}\n      transition={reduce ? { duration: 0 } : { type: \"spring\" as const, stiffness: 300, damping: 24 }}\n    >\n      <ChevronDown className={iconSize[size]} />\n    </motion.span>\n  )\n}\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    <AnimatePresence initial={false}>\n      {isOpen && (\n        <motion.div\n          key=\"panel\"\n          initial={reduce ? false : { height: 0, opacity: 0 }}\n          animate={{ height: \"auto\", opacity: 1 }}\n          exit={{ height: 0, opacity: 0 }}\n          transition={\n            reduce ? { duration: 0 } : { duration: 0.25, ease: [0.4, 0, 0.2, 1] }\n          }\n          className=\"overflow-hidden\"\n        >\n          <div className={cn(bodyPad[size], \"text-muted-foreground\")}>{children}</div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\n/* Shared shell: the glass surface in one place. surface carries the glassDepth step (plus its tint where present); the body does not take a surface of its own. */\nfunction GlassShell({\n  props,\n  surface,\n}: {\n  props: StyledCollapsibleProps\n  surface: string\n}) {\n  const { className, size = \"md\", title = defaultTitle, children = defaultChildren } = props\n  const { isOpen, toggle } = useControllableOpen(props)\n  return (\n    <div\n      data-slot=\"styled-collapsible\"\n      className={cn(\n        \"overflow-hidden rounded-xl border border-[color-mix(in_oklab,var(--color-foreground)_12%,transparent)]\",\n        surface,\n        className\n      )}\n    >\n      <button\n        type=\"button\"\n        aria-expanded={isOpen}\n        onClick={toggle}\n        className={cn(\n          headerBase,\n          headerPad[size],\n          \"hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)]\"\n        )}\n      >\n        {title}\n        <Chevron isOpen={isOpen} size={size} />\n      </button>\n      <Panel isOpen={isOpen} size={size}>\n        {children}\n      </Panel>\n    </div>\n  )\n}\n\n/* Frost: the canonical default glass (md/8px). The scale's bg-background/60 is already the same as the old hand-written 60% surface - it now brings the signature along with it. */\nexport function FrostCollapsible(props: StyledCollapsibleProps) {\n  return <GlassShell props={props} surface={glassDepth.md} />\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.) The supports-[] variant has to be overridden too, otherwise the neutral ground inside @supports suppresses the tint. */\nexport function TintCollapsible(props: StyledCollapsibleProps) {\n  return (\n    <GlassShell\n      props={props}\n      surface={cn(\n        glassDepth.md,\n        \"bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)]\",\n        \"supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)]\"\n      )}\n    />\n  )\n}\n\n/* Smoke: lg (16px) - turning the content underneath into texture is Smoke's promise. */\nexport function SmokeCollapsible(props: StyledCollapsibleProps) {\n  return (\n    <GlassShell\n      props={props}\n      surface={cn(\n        glassDepth.lg,\n        \"bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)]\",\n        \"supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)]\"\n      )}\n    />\n  )\n}\n\n/* Crystal: sm (4px). It used to be blur-xl, which contradicted its own name - clear glass means little diffusion. Because sm's bg-background/50 is more transparent than Frost, no extra tint is needed. */\nexport function CrystalCollapsible(props: StyledCollapsibleProps) {\n  return <GlassShell props={props} surface={glassDepth.sm} />\n}\n\n/* Depth: xl (24px) - the one variant in the family meant to read as a genuinely floating panel; the surface-2 tone carries the layered feel. */\nexport function DepthCollapsible(props: StyledCollapsibleProps) {\n  return (\n    <GlassShell\n      props={props}\n      surface={cn(\n        glassDepth.xl,\n        \"border-border\",\n        \"bg-[color-mix(in_oklab,var(--color-surface-2)_75%,transparent)]\",\n        \"supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-surface-2)_75%,transparent)]\"\n      )}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/collapsible-glass.tsx"
    }
  ],
  "categories": [
    "styled",
    "collapsible"
  ],
  "type": "registry:component"
}