{"version":3,"file":"Collapsible.cjs","names":[],"sources":["../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["import { useCallback, useId, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Collapsible.module.css\";\n\nexport interface CollapsibleProps extends HTMLAttributes<HTMLDivElement> {\n    /** Controlled open state. When provided the component is controlled. */\n    open?: boolean;\n    /** Initial open state for the uncontrolled variant. Default `false`. */\n    defaultOpen?: boolean;\n    /** Fired with the next open state whenever the trigger is activated. */\n    onOpenChange?: (open: boolean) => void;\n    /** Content rendered inside the trigger button. */\n    trigger: ReactNode;\n    /** Collapsible content, hidden while closed. */\n    children: ReactNode;\n}\n\n/**\n * A single expand/collapse region — a lighter alternative to `Accordion` for\n * one toggleable block. The trigger is a `<button aria-expanded aria-controls>`\n * wired to a content region sharing the same id; the region is `hidden` while\n * closed. Works controlled (`open` + `onOpenChange`) or uncontrolled\n * (`defaultOpen`).\n *\n * @param props - {@link CollapsibleProps}.\n * @returns The collapsible container.\n */\nexport function Collapsible({\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    trigger,\n    className,\n    children,\n    ...props\n}: CollapsibleProps) {\n    const reactId = useId();\n    const contentId = `${reactId}-content`;\n    const triggerId = `${reactId}-trigger`;\n\n    const isControlled = open !== undefined;\n    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);\n    const isOpen = isControlled ? open : internalOpen;\n\n    const handleToggle = useCallback((): void => {\n        const next = !isOpen;\n        if (!isControlled) setInternalOpen(next);\n        onOpenChange?.(next);\n    }, [isOpen, isControlled, onOpenChange]);\n\n    return (\n        <div className={cn(styles.collapsible, isOpen && styles.open, className)} {...props}>\n            <button\n                type=\"button\"\n                id={triggerId}\n                className={styles.trigger}\n                aria-expanded={isOpen}\n                aria-controls={contentId}\n                onClick={handleToggle}\n            >\n                {trigger}\n            </button>\n            <div\n                id={contentId}\n                role=\"region\"\n                aria-labelledby={triggerId}\n                hidden={!isOpen}\n                className={styles.content}\n            >\n                {children}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"kIA4BA,SAAgB,EAAY,CACxB,OACA,cAAc,GACd,eACA,UACA,YACA,WACA,GAAG,GACc,CACjB,IAAM,GAAA,EAAU,EAAA,MAAA,CAAM,EAChB,EAAY,GAAG,EAAQ,UACvB,EAAY,GAAG,EAAQ,UAEvB,EAAe,IAAS,IAAA,GACxB,CAAC,EAAc,IAAA,EAAmB,EAAA,SAAA,CAAkB,CAAW,EAC/D,EAAS,EAAe,EAAO,EAE/B,GAAA,EAAe,EAAA,YAAA,KAAwB,CACzC,IAAM,EAAO,CAAC,EACT,GAAc,EAAgB,CAAI,EACvC,IAAe,CAAI,CACvB,EAAG,CAAC,EAAQ,EAAc,CAAY,CAAC,EAEvC,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,YAAa,GAAU,EAAA,QAAO,KAAM,CAAS,EAAG,GAAI,EAA9E,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,GAAI,EACJ,UAAW,EAAA,QAAO,QAClB,gBAAe,EACf,gBAAe,EACf,QAAS,EAER,SAAA,CACG,CAAA,GACR,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,GAAI,EACJ,KAAK,SACL,kBAAiB,EACjB,OAAQ,CAAC,EACT,UAAW,EAAA,QAAO,QAEjB,UACA,CAAA,CACJ,GAEb"}