{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"collapsible","type":"registry:component","title":"Collapsible","description":"One region that opens and closes in place from its trigger, its height animating to the content.","categories":["layout"],"dependencies":["@radix-ui/react-collapsible@1.1.20","@radix-ui/react-direction@1.1.4","clsx@^2.1.1","tailwind-merge@^3.7.0"],"registryDependencies":["https://beamline.io/registry/look-prism.json"],"files":[{"path":"beamline/components/collapsible/collapsible.module.css","type":"registry:file","target":"src/ui/beamline/components/collapsible/collapsible.module.css","content":"@layer properties, theme, base, components, utilities;\n@layer components {\n  /* The region opens to the content's measured height over --pui-duration-standard and closes over --pui-motion-out;\n     the content fades with it (in over the opening, out a little faster than the height), so the words never sit\n     clipped mid-line while the box moves. Reduced motion makes both instant (every duration token is 1 ms). */\n  .content {\n    overflow: hidden;\n  }\n  .content[data-state=\"open\"] {\n    animation: open var(--pui-duration-standard) var(--pui-ease-default);\n  }\n  .content[data-state=\"closed\"] {\n    animation: close var(--pui-motion-out) var(--pui-ease-default);\n  }\n  @keyframes open {\n    from {\n      height: 0;\n      opacity: 0;\n    }\n    to {\n      height: var(--radix-collapsible-content-height, auto);\n      opacity: 1;\n    }\n  }\n  @keyframes close {\n    from {\n      height: var(--radix-collapsible-content-height, auto);\n      opacity: 1;\n    }\n    60% {\n      opacity: 0;\n    }\n    to {\n      height: 0;\n      opacity: 0;\n    }\n  }\n}\n"},{"path":"beamline/components/collapsible/collapsible.tsx","type":"registry:file","target":"src/ui/beamline/components/collapsible/collapsible.tsx","content":"\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\nimport { cn } from \"../../lib/utils\";\nimport styles from \"./collapsible.module.css\";\n\n/** One region that opens and closes in place. Controlled (open, onOpenChange) or uncontrolled (defaultOpen). */\nexport function Collapsible(props: ComponentProps<typeof RadixCollapsible.Root>) {\n  return <RadixCollapsible.Root data-slot=\"collapsible\" {...props} />;\n}\n\n/** The control that toggles it; pass asChild to use a Button. */\nexport function CollapsibleTrigger(props: ComponentProps<typeof RadixCollapsible.Trigger>) {\n  return <RadixCollapsible.Trigger data-slot=\"collapsible-trigger\" {...props} />;\n}\n\n/** The region. Its height follows the content opening and closing and the content fades with it; with reduced motion\n *  it switches at once. */\nexport function CollapsibleContent({ className, ...props }: ComponentProps<typeof RadixCollapsible.Content>) {\n  return (\n    <RadixCollapsible.Content data-slot=\"collapsible-content\" {...props} className={cn(styles.content, className)} />\n  );\n}\n\nexport default Collapsible;\n"},{"path":"beamline/lib/utils.ts","type":"registry:file","target":"src/ui/beamline/lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/* The type roles (utilities.css) and the 2xs step are sizes, not text colours: without this, tailwind-merge reads\n   `text-overline` as a colour and drops it next to `text-ink-3`. A role and a size step still replace each other.\n   Likewise `font-title` is the look's title weight, not a family: read as a family it dropped `font-display` beside it,\n   and every merged page title lost the look's display face. */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-weight\": [{ font: [\"title\"] }],\n      \"font-family\": [{ font: [\"display\", \"numeric\", \"figure\"] }],\n      \"font-size\": [\n        {\n          text: [\n            \"2xs\",\n            \"display\",\n            \"title\",\n            \"heading\",\n            \"subheading\",\n            \"body\",\n            \"body-sm\",\n            \"reading\",\n            \"label\",\n            \"caption\",\n            \"overline\",\n            \"numeric\",\n            \"code\",\n          ],\n        },\n      ],\n    },\n  },\n});\n\n/** Merge class names, letting later Tailwind utilities win over earlier ones. */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/** A small seeded random generator (LCG): the same seed gives the same sequence, for stable sample data and jitter. */\nexport function rng(seed = 1) {\n  let s = seed >>> 0 || 1;\n  return () => (s = (s * 1664525 + 1013904223) >>> 0) / 2 ** 32;\n}\n\nexport const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n"}],"docs":"Collapsible is in src/ui/beamline/components/collapsible/collapsible.tsx. The source is in src/ui/beamline (ui/beamline in a project without src/). After Tailwind, import its styles/beamline.css once, then styles/look-prism.css in your app stylesheet (use relative paths). Keep the shared base before all chosen looks. Wrap your app in <UIRoot preset={prism}> with UIRoot from its runtime/appearance and prism from its looks/prism.  shadcn replaces files when asked; use the Beamline managed-source CLI from the start for three-way upgrades that preserve edits.","meta":{"free":true,"version":"0.2.0-rc.42","library":"https://beamline.io/components/collapsible"}}