{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible",
  "type": "registry:ui",
  "title": "Collapsible",
  "description": "Accessible collapsible content component for Tile UI.",
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/collapsible/collapsible.tsx",
      "type": "registry:ui",
      "target": "components/ui/collapsible/collapsible.tsx",
      "content": "import React, { createContext, useCallback, useContext, useId, useState } from 'react';\nimport { collapsibleStyleKeys, getCollapsibleState } from '../lib/core';\nimport type { CollapsibleBaseProps } from '../lib/core';\nimport styles from './collapsible.module.scss';\n\ninterface CollapsibleContextValue {\n\topen: boolean;\n\tdisabled: boolean;\n\tcontentId: string;\n\ttoggle: () => void;\n}\n\nconst CollapsibleContext = createContext<CollapsibleContextValue | null>(null);\n\nfunction useCollapsibleContext(): CollapsibleContextValue {\n\tconst context = useContext(CollapsibleContext);\n\tif (!context) {\n\t\tthrow new Error('Collapsible sub-components must be used within <Collapsible>.');\n\t}\n\treturn context;\n}\n\nexport interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement>, CollapsibleBaseProps {\n\tonOpenChange?: (open: boolean) => void;\n}\n\nconst Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(({ className = '', open, defaultOpen = false, disabled = false, onOpenChange, children, ...props }, ref) => {\n\tconst [internalOpen, setInternalOpen] = useState(defaultOpen);\n\tconst isOpen = open !== undefined ? open : internalOpen;\n\tconst contentId = useId();\n\n\tconst toggle = useCallback(() => {\n\t\tif (disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst next = !isOpen;\n\n\t\tif (open === undefined) {\n\t\t\tsetInternalOpen(next);\n\t\t}\n\n\t\tonOpenChange?.(next);\n\t}, [disabled, isOpen, open, onOpenChange]);\n\n\treturn (\n\t\t<CollapsibleContext.Provider value={{ open: isOpen, disabled, contentId, toggle }}>\n\t\t\t<div ref={ref} className={`${styles[collapsibleStyleKeys.root]} ${className}`} {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</CollapsibleContext.Provider>\n\t);\n});\nCollapsible.displayName = 'Collapsible';\n\nexport interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(({ className = '', children, ...props }, ref) => {\n\tconst context = useCollapsibleContext();\n\tconst state = getCollapsibleState(context.open);\n\n\treturn (\n\t\t<button\n\t\t\tref={ref}\n\t\t\ttype=\"button\"\n\t\t\taria-expanded={context.open}\n\t\t\taria-controls={context.contentId}\n\t\t\tdata-state={state}\n\t\t\tdisabled={context.disabled}\n\t\t\tclassName={`${styles[collapsibleStyleKeys.trigger]} ${className}`}\n\t\t\tonClick={context.toggle}\n\t\t\t{...props}>\n\t\t\t{children}\n\t\t</button>\n\t);\n});\nCollapsibleTrigger.displayName = 'CollapsibleTrigger';\n\nexport interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CollapsibleContent = React.forwardRef<HTMLDivElement, CollapsibleContentProps>(({ className = '', children, ...props }, ref) => {\n\tconst context = useCollapsibleContext();\n\tconst state = getCollapsibleState(context.open);\n\n\treturn (\n\t\t<div ref={ref} id={context.contentId} data-state={state} className={`${styles[collapsibleStyleKeys.content]} ${className}`} {...props}>\n\t\t\t<div className={styles[collapsibleStyleKeys.contentInner]}>{children}</div>\n\t\t</div>\n\t);\n});\nCollapsibleContent.displayName = 'CollapsibleContent';\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\nexport default Collapsible;\n"
    },
    {
      "path": "packages/styles/scss/components/collapsible.module.scss",
      "type": "registry:file",
      "target": "components/ui/collapsible/collapsible.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.root {\n\twidth: 100%;\n}\n\n.trigger {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: var(--tile-collapsible-gap, $spacing-2);\n\tborder-radius: var(--tile-collapsible-radius, $radius);\n\tfont-size: var(--tile-collapsible-font-size, inherit);\n\tfont-weight: var(--tile-collapsible-font-weight, inherit);\n\tcolor: var(--tile-collapsible-foreground, inherit);\n\ttransition: background-color $transition-fast;\n\toutline: none;\n\n\t&:hover {\n\t\tbackground-color: var(--tile-collapsible-hover-background, $muted);\n\t}\n\n\t&:focus-visible {\n\t\tbox-shadow: var(--tile-collapsible-focus-shadow, 0 0 0 2px $background, 0 0 0 4px $ring);\n\t}\n\n\t&[disabled] {\n\t\tpointer-events: none;\n\t\topacity: 0.5;\n\t}\n}\n\n.content {\n\tdisplay: grid;\n\tgrid-template-rows: 0fr;\n\ttransition: grid-template-rows $transition-slow;\n\n\t&[data-state='open'] {\n\t\tgrid-template-rows: 1fr;\n\t}\n}\n\n.contentInner {\n\toverflow: hidden;\n\tmin-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.trigger,\n\t.content {\n\t\ttransition: none;\n\t}\n}\n"
    },
    {
      "path": "packages/react/src/components/collapsible/index.ts",
      "type": "registry:ui",
      "target": "components/ui/collapsible/index.ts",
      "content": "export { Collapsible, CollapsibleTrigger, CollapsibleContent, type CollapsibleProps, type CollapsibleTriggerProps, type CollapsibleContentProps } from './collapsible';\n"
    }
  ]
}