{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapse",
  "title": "Collapse",
  "description": "Sections that open and close.",
  "dependencies": [
    "@radix-ui/react-accordion@^1.2.21"
  ],
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "collapse/Collapse.css",
      "content": ".cr-collapse {\n  display: grid;\n  gap: var(--cr-space-2);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n}\n\n.cr-collapse__item {\n  border-radius: var(--cr-radius-lg);\n  background: var(--cr-color-glass-tile);\n}\n\n.cr-collapse__heading {\n  margin: 0;\n}\n\n.cr-collapse__trigger {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: var(--cr-space-4) 18px;\n  border: 0;\n  border-radius: inherit;\n  background: none;\n  color: inherit;\n  font: inherit;\n  font-size: var(--cr-font-size-md);\n  font-weight: var(--cr-font-weight-semibold);\n  text-align: start;\n  cursor: pointer;\n}\n\n.cr-collapse__trigger > .cr-icon {\n  flex: none;\n  transition: transform var(--cr-motion-duration-base) var(--cr-motion-easing-standard);\n}\n\n.cr-collapse__trigger[data-state='open'] > .cr-icon {\n  transform: rotate(90deg);\n}\n\n.cr-collapse__trigger:focus-visible {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n\n.cr-collapse__content {\n  overflow: hidden;\n}\n\n.cr-collapse__body {\n  padding: 0 18px 18px 42px;\n  color: var(--cr-color-text-secondary);\n  line-height: var(--cr-font-line-height-normal);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/collapse/Collapse.css"
    },
    {
      "path": "collapse/Collapse.tsx",
      "content": "'use client';\n\nimport * as RadixAccordion from '@radix-ui/react-accordion';\nimport { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport { ChevronIcon } from '@/lib/creance/icons';\nimport './Collapse.css';\n\n/**\n * A stack of sections that open and close. `type=\"multiple\"` lets several stay open; `\"single\"`\n * keeps one. Radix Accordion: arrow keys move between headings.\n */\nexport const Collapse = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof RadixAccordion.Root>>(function Collapse(\n  { className, ...props },\n  ref,\n) {\n  return <RadixAccordion.Root ref={ref} className={cx('cr-collapse', className)} {...props} />;\n});\n\nexport interface CollapseItemProps extends Omit<ComponentPropsWithoutRef<typeof RadixAccordion.Item>, 'title'> {\n  title: ReactNode;\n  /** The heading level of the title in your page outline. Default 3. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n}\n\nexport const CollapseItem = forwardRef<HTMLDivElement, CollapseItemProps>(function CollapseItem(\n  { title, headingLevel = 3, className, children, ...props },\n  ref,\n) {\n  const H = `h${headingLevel}` as const;\n  return (\n    <RadixAccordion.Item ref={ref} className={cx('cr-collapse__item', className)} {...props}>\n      <RadixAccordion.Header asChild>\n        <H className=\"cr-collapse__heading\">\n          <RadixAccordion.Trigger className=\"cr-collapse__trigger\">\n            <ChevronIcon />\n            {title}\n          </RadixAccordion.Trigger>\n        </H>\n      </RadixAccordion.Header>\n      <RadixAccordion.Content className=\"cr-collapse__content\">\n        <div className=\"cr-collapse__body\">{children}</div>\n      </RadixAccordion.Content>\n    </RadixAccordion.Item>\n  );\n});\n",
      "type": "registry:ui",
      "target": "@components/creance/collapse/Collapse.tsx"
    }
  ],
  "categories": [
    "molecule",
    "navigation"
  ],
  "type": "registry:ui"
}