{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"collapsible","type":"registry:ui","title":"Collapsible","description":"One section that opens and closes under its title.","dependencies":["lucide-react","radix-ui"],"registryDependencies":["https://dashral.com/r/utils.json"],"files":[{"path":"registry/dashral/collapsible.tsx","type":"registry:file","target":"components/dashral/collapsible.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype CollapsibleProps = Omit<React.ComponentProps<typeof CollapsiblePrimitive.Root>, \"title\"> & {\n  /** The trigger's text: a full-width button with a chevron that turns as it opens. */\n  title?: React.ReactNode\n  /** Your own trigger in place of the title's, e.g. a Button; it must take a ref and focus. */\n  trigger?: React.ReactElement\n  /** At the end of the title's row, before the chevron, e.g. a count or a badge. */\n  meta?: React.ReactNode\n  /** What opens and closes. */\n  children?: React.ReactNode\n  classNames?: { trigger?: string; content?: string }\n}\n\n/**\n * How the content opens and closes, shared with Reveal (its single child div is what fades). Opening, the height grows\n * at a calm pace while the content fades in, dropping a little. Closing, the content fades out fast while the height\n * waits, then gathers speed (ease-exit), so no line is cut through as the box shrinks.\n */\nconst collapsibleContentClass = cn(\n  \"overflow-hidden motion-reduce:animate-none\",\n  \"data-[state=open]:animate-collapsible-down data-[state=open]:duration-(--duration-considered) data-[state=open]:ease-standard\",\n  \"data-[state=closed]:animate-collapsible-up data-[state=closed]:duration-(--duration-standard) data-[state=closed]:ease-exit\",\n  \"[&[data-state=open]>*]:animate-in [&[data-state=open]>*]:fade-in-0 [&[data-state=open]>*]:slide-in-from-top-1 [&[data-state=open]>*]:duration-(--duration-considered) [&[data-state=open]>*]:ease-standard\",\n  \"[&[data-state=closed]>*]:animate-out [&[data-state=closed]>*]:fade-out-0 [&[data-state=closed]>*]:duration-(--duration-fast) [&[data-state=closed]>*]:ease-standard [&[data-state=closed]>*]:fill-mode-forwards\",\n  \"motion-reduce:[&>*]:animate-none\"\n)\n\n/**\n * One section that opens and closes, in one tag: `<Collapsible title=\"Advanced settings\">…</Collapsible>`. For a list\n * of sections where opening one closes the others, use Accordion.\n */\nfunction Collapsible({ title, trigger, meta, children, className, classNames, ...props }: CollapsibleProps) {\n  return (\n    <CollapsiblePrimitive.Root data-slot=\"collapsible\" className={className} {...props}>\n      {trigger ? (\n        <CollapsiblePrimitive.Trigger asChild>{trigger}</CollapsiblePrimitive.Trigger>\n      ) : (\n        title !== undefined && (\n          <CollapsiblePrimitive.Trigger\n            data-slot=\"collapsible-trigger\"\n            className={cn(\n              \"flex w-full items-center justify-between gap-3 rounded-md py-2 text-start text-sm font-medium outline-none transition-colors hover:text-foreground/80 focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]_[data-chevron]]:rotate-180\",\n              classNames?.trigger\n            )}\n          >\n            <span className=\"min-w-0\">{title}</span>\n            <span className=\"flex shrink-0 items-center gap-2\">\n              {meta !== undefined && <span className=\"text-xs font-normal text-muted-foreground\">{meta}</span>}\n              <ChevronDownIcon\n                aria-hidden\n                data-chevron=\"\"\n                className=\"size-4 text-muted-foreground transition-transform duration-(--duration-standard) ease-spring motion-reduce:transition-none\"\n              />\n            </span>\n          </CollapsiblePrimitive.Trigger>\n        )\n      )}\n      <CollapsiblePrimitive.Content data-slot=\"collapsible-content\" className={collapsibleContentClass}>\n        <div className={cn(\"pt-1 pb-2 text-sm\", classNames?.content)}>{children}</div>\n      </CollapsiblePrimitive.Content>\n    </CollapsiblePrimitive.Root>\n  )\n}\n\nexport { Collapsible, collapsibleContentClass, type CollapsibleProps }\n"}],"cssVars":{"theme":{"ease-standard":"var(--ease-standard)","ease-enter":"var(--ease-enter)","ease-exit":"var(--ease-exit)","ease-spring":"var(--ease-spring)"},"light":{"duration-fast":"160ms","duration-standard":"240ms","duration-considered":"480ms","ease-standard":"cubic-bezier(0.2, 0, 0, 1)","ease-enter":"cubic-bezier(0, 0, 0, 1)","ease-exit":"cubic-bezier(0.3, 0, 1, 1)","ease-spring":"linear(0, 0.071 4%, 0.234 8%, 0.433 12%, 0.626 17%, 0.791 21%, 0.917 25%, 1.004 29%, 1.055 33%, 1.079 38%, 1.083 42%, 1.075 46%, 1.06 50%, 1.043 54%, 1.027 58%, 1.015 62%, 1.005 67%, 0.998 71%, 0.995 75%, 0.993 79%, 0.993 83%, 0.994 88%, 0.995 92%, 0.997 96%, 1)"},"dark":{}}}