@arolariu/components 1.0.0 → 1.1.0

package/dist/components/ui/checkbox.d.ts

@@ -1,5 +1,7 @@
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
 import * as React from "react";
+type BaseCheckboxCheckedChange = NonNullable<React.ComponentPropsWithRef<typeof BaseCheckbox.Root>["onCheckedChange"]>;
+type CheckboxChangeEventDetails = Parameters<BaseCheckboxCheckedChange>[1];
 /**
  * Props for the shared checkbox wrapper.
  */
@@ -9,7 +11,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithRef<typeof BaseChec
     /** The current checked state, including support for the legacy `"indeterminate"` value. @default undefined */
     checked?: boolean | "indeterminate";
     /** Called whenever the checked state changes. @default undefined */
-    onCheckedChange?: (checked: boolean | "indeterminate") => void;
+    onCheckedChange?: (checked: boolean | "indeterminate", eventDetails: CheckboxChangeEventDetails) => void;
 }
 /**
  * Renders a selectable checkbox control with checked and indeterminate support.

package/dist/components/ui/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,QAAQ,IAAI,YAAY,EAAC,MAAM,yBAAyB,CAAC;AAGjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;GAEG;AACH,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,iBAAiB,CAAC;IACtI,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8GAA8G;IAC9G,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACpC,oEAAoE;IACpE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,eAAe,KAAK,IAAI,CAAC;CAChE;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,QAAQ,gGAiCb,CAAC;AAIF,kBAAU,QAAQ,CAAC;IACjB,KAAY,KAAK,GAAG,aAAa,CAAC;IAClC,KAAY,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;CAC7C;AAED,OAAO,EAAC,QAAQ,EAAC,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,QAAQ,IAAI,YAAY,EAAC,MAAM,yBAAyB,CAAC;AAGjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,yBAAyB,GAAG,WAAW,CAAC,KAAK,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC;AACvH,KAAK,0BAA0B,GAAG,UAAU,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3E;;GAEG;AACH,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,iBAAiB,CAAC;IACtI,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8GAA8G;IAC9G,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACpC,oEAAoE;IACpE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,eAAe,EAAE,YAAY,EAAE,0BAA0B,KAAK,IAAI,CAAC;CAC1G;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,QAAQ,gGAsCb,CAAC;AAIF,kBAAU,QAAQ,CAAC;IACjB,KAAY,KAAK,GAAG,aAAa,CAAC;IAClC,KAAY,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;CAC7C;AAED,OAAO,EAAC,QAAQ,EAAC,CAAC"}

package/dist/components/ui/checkbox.js

@@ -10,11 +10,14 @@ const checkbox_Checkbox = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { checked, className, onCheckedChange, render, ...otherProps } = props;
     const baseChecked = "indeterminate" === checked ? true : checked;
     const indeterminate = "indeterminate" === checked;
+    const handleCheckedChange = onCheckedChange ? (nextChecked, eventDetails)=>{
+        onCheckedChange(nextChecked, eventDetails);
+    } : void 0;
     return /*#__PURE__*/ jsx(Checkbox.Root, {
         ref: ref,
         checked: baseChecked,
         indeterminate: indeterminate,
-        onCheckedChange: onCheckedChange,
+        onCheckedChange: handleCheckedChange,
         ...otherProps,
         render: useRender({
             defaultTagName: "button",

package/dist/components/ui/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/checkbox.js","sources":["../../../src/components/ui/checkbox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {Checkbox as BaseCheckbox} from \"@base-ui/react/checkbox\";\r\nimport {mergeProps} from \"@base-ui/react/merge-props\";\r\nimport {useRender} from \"@base-ui/react/use-render\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./checkbox.module.css\";\r\n\r\n/**\r\n * Props for the shared checkbox wrapper.\r\n */\r\ninterface CheckboxProps extends Omit<React.ComponentPropsWithRef<typeof BaseCheckbox.Root>, \"checked\" | \"className\" | \"onCheckedChange\"> {\r\n  /** Additional CSS classes merged with the checkbox control styles. @default undefined */\r\n  className?: string;\r\n  /** The current checked state, including support for the legacy `\"indeterminate\"` value. @default undefined */\r\n  checked?: boolean | \"indeterminate\";\r\n  /** Called whenever the checked state changes. @default undefined */\r\n  onCheckedChange?: (checked: boolean | \"indeterminate\") => void;\r\n}\r\n\r\n/**\r\n * Renders a selectable checkbox control with checked and indeterminate support.\r\n *\r\n * @remarks\r\n * - Renders a `<button>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/checkbox | Base UI Checkbox}\r\n * - Supports the `render` prop for element composition\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <Checkbox checked />\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/checkbox | Base UI Documentation}\r\n */\r\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof BaseCheckbox.Root>, Checkbox.Props>(\r\n  (props: Readonly<Checkbox.Props>, ref): React.ReactElement => {\r\n    const {checked, className, onCheckedChange, render, ...otherProps} = props;\r\n    const baseChecked = checked === \"indeterminate\" ? true : checked;\r\n    const indeterminate = checked === \"indeterminate\";\r\n\r\n    return (\r\n      <BaseCheckbox.Root\r\n        ref={ref}\r\n        checked={baseChecked}\r\n        indeterminate={indeterminate}\r\n        onCheckedChange={onCheckedChange as React.ComponentPropsWithRef<typeof BaseCheckbox.Root>[\"onCheckedChange\"]}\r\n        {...otherProps}\r\n        render={useRender({\r\n          defaultTagName: \"button\",\r\n          render: render as never,\r\n          props: mergeProps({className: cn(styles.checkbox, className)}, {}),\r\n        })}>\r\n        <BaseCheckbox.Indicator className={styles.indicator}>\r\n          <svg\r\n            xmlns='http://www.w3.org/2000/svg'\r\n            viewBox='0 0 24 24'\r\n            fill='none'\r\n            stroke='currentColor'\r\n            strokeWidth='3'\r\n            strokeLinecap='round'\r\n            strokeLinejoin='round'>\r\n            <polyline points='20 6 9 17 4 12' />\r\n          </svg>\r\n        </BaseCheckbox.Indicator>\r\n      </BaseCheckbox.Root>\r\n    );\r\n  },\r\n);\r\nCheckbox.displayName = \"Checkbox\";\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace Checkbox {\r\n  export type Props = CheckboxProps;\r\n  export type State = BaseCheckbox.Root.State;\r\n}\r\n\r\nexport {Checkbox};\r\n"],"names":["Checkbox","React","props","ref","checked","className","onCheckedChange","render","otherProps","baseChecked","indeterminate","BaseCheckbox","useRender","mergeProps","cn","styles"],"mappings":";;;;;;;;AAsCA,MAAMA,oBAAW,WAAHA,GAAGC,WACf,CAACC,OAAiCC;IAChC,MAAM,EAACC,OAAO,EAAEC,SAAS,EAAEC,eAAe,EAAEC,MAAM,EAAE,GAAGC,YAAW,GAAGN;IACrE,MAAMO,cAAcL,AAAY,oBAAZA,UAA8B,OAAOA;IACzD,MAAMM,gBAAgBN,AAAY,oBAAZA;IAEtB,OAAO,WAAP,GACE,IAACO,SAAAA,IAAiB;QAChB,KAAKR;QACL,SAASM;QACT,eAAeC;QACf,iBAAiBJ;QAChB,GAAGE,UAAU;QACd,QAAQI,UAAU;YAChB,gBAAgB;YAChB,QAAQL;YACR,OAAOM,WAAW;gBAAC,WAAWC,GAAGC,gBAAAA,QAAe,EAAEV;YAAU,GAAG,CAAC;QAClE;kBACA,kBAACM,SAAAA,SAAsB;YAAC,WAAWI,gBAAAA,SAAgB;sBACjD,kBAAC;gBACC,OAAM;gBACN,SAAQ;gBACR,MAAK;gBACL,QAAO;gBACP,aAAY;gBACZ,eAAc;gBACd,gBAAe;0BACf,kBAAC;oBAAS,QAAO;;;;;AAK3B;AAEFf,kBAAS,WAAW,GAAG"}
+{"version":3,"file":"components/ui/checkbox.js","sources":["../../../src/components/ui/checkbox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {Checkbox as BaseCheckbox} from \"@base-ui/react/checkbox\";\r\nimport {mergeProps} from \"@base-ui/react/merge-props\";\r\nimport {useRender} from \"@base-ui/react/use-render\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./checkbox.module.css\";\r\n\r\ntype BaseCheckboxCheckedChange = NonNullable<React.ComponentPropsWithRef<typeof BaseCheckbox.Root>[\"onCheckedChange\"]>;\r\ntype CheckboxChangeEventDetails = Parameters<BaseCheckboxCheckedChange>[1];\r\n\r\n/**\r\n * Props for the shared checkbox wrapper.\r\n */\r\ninterface CheckboxProps extends Omit<React.ComponentPropsWithRef<typeof BaseCheckbox.Root>, \"checked\" | \"className\" | \"onCheckedChange\"> {\r\n  /** Additional CSS classes merged with the checkbox control styles. @default undefined */\r\n  className?: string;\r\n  /** The current checked state, including support for the legacy `\"indeterminate\"` value. @default undefined */\r\n  checked?: boolean | \"indeterminate\";\r\n  /** Called whenever the checked state changes. @default undefined */\r\n  onCheckedChange?: (checked: boolean | \"indeterminate\", eventDetails: CheckboxChangeEventDetails) => void;\r\n}\r\n\r\n/**\r\n * Renders a selectable checkbox control with checked and indeterminate support.\r\n *\r\n * @remarks\r\n * - Renders a `<button>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/checkbox | Base UI Checkbox}\r\n * - Supports the `render` prop for element composition\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example Basic usage\r\n * ```tsx\r\n * <Checkbox checked />\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/checkbox | Base UI Documentation}\r\n */\r\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof BaseCheckbox.Root>, Checkbox.Props>(\r\n  (props: Readonly<Checkbox.Props>, ref): React.ReactElement => {\r\n    const {checked, className, onCheckedChange, render, ...otherProps} = props;\r\n    const baseChecked = checked === \"indeterminate\" ? true : checked;\r\n    const indeterminate = checked === \"indeterminate\";\r\n    const handleCheckedChange: BaseCheckboxCheckedChange | undefined = onCheckedChange\r\n      ? (nextChecked, eventDetails) => {\r\n          onCheckedChange(nextChecked, eventDetails);\r\n        }\r\n      : undefined;\r\n\r\n    return (\r\n      <BaseCheckbox.Root\r\n        ref={ref}\r\n        checked={baseChecked}\r\n        indeterminate={indeterminate}\r\n        onCheckedChange={handleCheckedChange}\r\n        {...otherProps}\r\n        render={useRender({\r\n          defaultTagName: \"button\",\r\n          render: render as never,\r\n          props: mergeProps({className: cn(styles.checkbox, className)}, {}),\r\n        })}>\r\n        <BaseCheckbox.Indicator className={styles.indicator}>\r\n          <svg\r\n            xmlns='http://www.w3.org/2000/svg'\r\n            viewBox='0 0 24 24'\r\n            fill='none'\r\n            stroke='currentColor'\r\n            strokeWidth='3'\r\n            strokeLinecap='round'\r\n            strokeLinejoin='round'>\r\n            <polyline points='20 6 9 17 4 12' />\r\n          </svg>\r\n        </BaseCheckbox.Indicator>\r\n      </BaseCheckbox.Root>\r\n    );\r\n  },\r\n);\r\nCheckbox.displayName = \"Checkbox\";\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace Checkbox {\r\n  export type Props = CheckboxProps;\r\n  export type State = BaseCheckbox.Root.State;\r\n}\r\n\r\nexport {Checkbox};\r\n"],"names":["Checkbox","React","props","ref","checked","className","onCheckedChange","render","otherProps","baseChecked","indeterminate","handleCheckedChange","nextChecked","eventDetails","undefined","BaseCheckbox","useRender","mergeProps","cn","styles"],"mappings":";;;;;;;;AAyCA,MAAMA,oBAAW,WAAHA,GAAGC,WACf,CAACC,OAAiCC;IAChC,MAAM,EAACC,OAAO,EAAEC,SAAS,EAAEC,eAAe,EAAEC,MAAM,EAAE,GAAGC,YAAW,GAAGN;IACrE,MAAMO,cAAcL,AAAY,oBAAZA,UAA8B,OAAOA;IACzD,MAAMM,gBAAgBN,AAAY,oBAAZA;IACtB,MAAMO,sBAA6DL,kBAC/D,CAACM,aAAaC;QACZP,gBAAgBM,aAAaC;IAC/B,IACAC;IAEJ,OAAO,WAAP,GACE,IAACC,SAAAA,IAAiB;QAChB,KAAKZ;QACL,SAASM;QACT,eAAeC;QACf,iBAAiBC;QAChB,GAAGH,UAAU;QACd,QAAQQ,UAAU;YAChB,gBAAgB;YAChB,QAAQT;YACR,OAAOU,WAAW;gBAAC,WAAWC,GAAGC,gBAAAA,QAAe,EAAEd;YAAU,GAAG,CAAC;QAClE;kBACA,kBAACU,SAAAA,SAAsB;YAAC,WAAWI,gBAAAA,SAAgB;sBACjD,kBAAC;gBACC,OAAM;gBACN,SAAQ;gBACR,MAAK;gBACL,QAAO;gBACP,aAAY;gBACZ,eAAc;gBACd,gBAAe;0BACf,kBAAC;oBAAS,QAAO;;;;;AAK3B;AAEFnB,kBAAS,WAAW,GAAG"}

package/dist/components/ui/collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/ui/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,WAAW,IAAI,eAAe,EAAC,MAAM,4BAA4B,CAAC;AAG1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,gBAAiB,SAAQ,KAAK,CAAC,qBAAqB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;CAAG;AAE9F,UAAU,uBAAwB,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtH;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,uBAAwB,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpH;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,YAAY,CAE3E;kBAFQ,WAAW;;;AAIpB;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,kBAAkB,gHAkBvB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,kBAAkB,6GAiBvB,CAAC;AAGF,kBAAU,WAAW,CAAC;IACpB,KAAY,KAAK,GAAG,gBAAgB,CAAC;IACrC,KAAY,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;CAChD;AAGD,kBAAU,kBAAkB,CAAC;IAC3B,KAAY,KAAK,GAAG,uBAAuB,CAAC;IAC5C,KAAY,KAAK,GAAG,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC;CACnD;AAGD,kBAAU,kBAAkB,CAAC;IAC3B,KAAY,KAAK,GAAG,uBAAuB,CAAC;IAC5C,KAAY,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC;CACjD;AAMD,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAC,CAAC"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/ui/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,WAAW,IAAI,eAAe,EAAC,MAAM,4BAA4B,CAAC;AAG1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,gBAAiB,SAAQ,KAAK,CAAC,qBAAqB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;CAAG;AAE9F,UAAU,uBAAwB,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtH;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,uBAAwB,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpH;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,YAAY,CAE3E;kBAFQ,WAAW;;;AAIpB;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,kBAAkB,gHAmBvB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,kBAAkB,6GAiBvB,CAAC;AAGF,kBAAU,WAAW,CAAC;IACpB,KAAY,KAAK,GAAG,gBAAgB,CAAC;IACrC,KAAY,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;CAChD;AAGD,kBAAU,kBAAkB,CAAC;IAC3B,KAAY,KAAK,GAAG,uBAAuB,CAAC;IAC5C,KAAY,KAAK,GAAG,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC;CACnD;AAGD,kBAAU,kBAAkB,CAAC;IAC3B,KAAY,KAAK,GAAG,uBAAuB,CAAC;IAC5C,KAAY,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC;CACjD;AAMD,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAC,CAAC"}

package/dist/components/ui/collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/collapsible.js","sources":["../../../src/components/ui/collapsible.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {Collapsible as BaseCollapsible} from \"@base-ui/react/collapsible\";\r\nimport {mergeProps} from \"@base-ui/react/merge-props\";\r\nimport {useRender} from \"@base-ui/react/use-render\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./collapsible.module.css\";\r\n\r\ninterface CollapsibleProps extends React.ComponentPropsWithRef<typeof BaseCollapsible.Root> {}\r\n\r\ninterface CollapsibleTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseCollapsible.Trigger>, \"className\"> {\r\n  /**\r\n   * Applies additional CSS classes to the component root element.\r\n   * @default undefined\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Enables child element composition instead of rendering the default wrapper.\r\n   * @default false\r\n   * @deprecated Prefer Base UI's `render` prop.\r\n   */\r\n  asChild?: boolean;\r\n}\r\n\r\ninterface CollapsibleContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseCollapsible.Panel>, \"className\"> {\r\n  /**\r\n   * Applies additional CSS classes to the component root element.\r\n   * @default undefined\r\n   */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Coordinates collapsible state and accessibility behavior.\r\n *\r\n * @remarks\r\n * - Delegates structure and state to the underlying Base UI primitive\r\n * - Built on {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}\r\n * - Preserves the underlying primitive API for advanced composition\r\n *\r\n * @example\r\n * ```tsx\r\n * <Collapsible>Content</Collapsible>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/collapsible | Base UI Documentation}\r\n */\r\nfunction Collapsible(props: Readonly<Collapsible.Props>): React.ReactElement {\r\n  return <BaseCollapsible.Root {...props} />;\r\n}\r\n\r\n/**\r\n * Renders the collapsible trigger.\r\n *\r\n * @remarks\r\n * - Renders a `<button>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}\r\n * - Supports the `render` prop for element composition\r\n *\r\n * @example\r\n * ```tsx\r\n * <CollapsibleTrigger>Content</CollapsibleTrigger>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/collapsible | Base UI Documentation}\r\n */\r\nconst CollapsibleTrigger = React.forwardRef<React.ComponentRef<typeof BaseCollapsible.Trigger>, CollapsibleTrigger.Props>(\r\n  (props: Readonly<CollapsibleTrigger.Props>, ref): React.ReactElement => {\r\n    const {asChild = false, children, className, render, ...otherProps} = props;\r\n    const renderProp = asChild && React.isValidElement(children) ? children : render;\r\n\r\n    return (\r\n      <BaseCollapsible.Trigger\r\n        ref={ref}\r\n        {...otherProps}\r\n        render={useRender({\r\n          defaultTagName: \"button\",\r\n          render: renderProp as never,\r\n          props: mergeProps({className: cn(styles.trigger, className)}, {}),\r\n        })}>\r\n        {renderProp ? undefined : children}\r\n      </BaseCollapsible.Trigger>\r\n    );\r\n  },\r\n);\r\n\r\n/**\r\n * Renders the collapsible content.\r\n *\r\n * @remarks\r\n * - Renders a `<div>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}\r\n * - Supports the `render` prop for element composition\r\n *\r\n * @example\r\n * ```tsx\r\n * <CollapsibleContent>Content</CollapsibleContent>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/collapsible | Base UI Documentation}\r\n */\r\nconst CollapsibleContent = React.forwardRef<React.ComponentRef<typeof BaseCollapsible.Panel>, CollapsibleContent.Props>(\r\n  (props: Readonly<CollapsibleContent.Props>, ref): React.ReactElement => {\r\n    const {className, children, render, ...otherProps} = props;\r\n\r\n    return (\r\n      <BaseCollapsible.Panel\r\n        ref={ref}\r\n        {...otherProps}\r\n        render={useRender({\r\n          defaultTagName: \"div\",\r\n          render: render as never,\r\n          props: mergeProps({className: cn(styles.panel, className)}, {}),\r\n        })}>\r\n        {children}\r\n      </BaseCollapsible.Panel>\r\n    );\r\n  },\r\n);\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace Collapsible {\r\n  export type Props = CollapsibleProps;\r\n  export type State = BaseCollapsible.Root.State;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace CollapsibleTrigger {\r\n  export type Props = CollapsibleTriggerProps;\r\n  export type State = BaseCollapsible.Trigger.State;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace CollapsibleContent {\r\n  export type Props = CollapsibleContentProps;\r\n  export type State = BaseCollapsible.Panel.State;\r\n}\r\n\r\nCollapsible.displayName = \"Collapsible\";\r\nCollapsibleTrigger.displayName = \"CollapsibleTrigger\";\r\nCollapsibleContent.displayName = \"CollapsibleContent\";\r\n\r\nexport {Collapsible, CollapsibleContent, CollapsibleTrigger};\r\n"],"names":["Collapsible","props","BaseCollapsible","CollapsibleTrigger","React","ref","asChild","children","className","render","otherProps","renderProp","useRender","mergeProps","cn","styles","undefined","CollapsibleContent"],"mappings":";;;;;;;;AAiDA,SAASA,wBAAYC,KAAkC;IACrD,OAAO,WAAP,GAAO,IAACC,YAAAA,IAAoB;QAAE,GAAGD,KAAK;;AACxC;AAiBA,MAAME,qBAAqB,WAAHA,GAAGC,WACzB,CAACH,OAA2CI;IAC1C,MAAM,EAACC,UAAU,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGC,YAAW,GAAGT;IACtE,MAAMU,aAAaL,WAAW,WAAXA,GAAWF,eAAqBG,YAAYA,WAAWE;IAE1E,OAAO,WAAP,GACE,IAACP,YAAAA,OAAuB;QACtB,KAAKG;QACJ,GAAGK,UAAU;QACd,QAAQE,UAAU;YAChB,gBAAgB;YAChB,QAAQD;YACR,OAAOE,WAAW;gBAAC,WAAWC,GAAGC,mBAAAA,OAAc,EAAEP;YAAU,GAAG,CAAC;QACjE;kBACCG,aAAaK,SAAYT;;AAGhC;AAkBF,MAAMU,qBAAqB,WAAHA,GAAGb,WACzB,CAACH,OAA2CI;IAC1C,MAAM,EAACG,SAAS,EAAED,QAAQ,EAAEE,MAAM,EAAE,GAAGC,YAAW,GAAGT;IAErD,OAAO,WAAP,GACE,IAACC,YAAAA,KAAqB;QACpB,KAAKG;QACJ,GAAGK,UAAU;QACd,QAAQE,UAAU;YAChB,gBAAgB;YAChB,QAAQH;YACR,OAAOI,WAAW;gBAAC,WAAWC,GAAGC,mBAAAA,KAAY,EAAEP;YAAU,GAAG,CAAC;QAC/D;kBACCD;;AAGP;AAqBFP,wBAAY,WAAW,GAAG;AAC1BG,mBAAmB,WAAW,GAAG;AACjCc,mBAAmB,WAAW,GAAG"}
+{"version":3,"file":"components/ui/collapsible.js","sources":["../../../src/components/ui/collapsible.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {Collapsible as BaseCollapsible} from \"@base-ui/react/collapsible\";\r\nimport {mergeProps} from \"@base-ui/react/merge-props\";\r\nimport {useRender} from \"@base-ui/react/use-render\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./collapsible.module.css\";\r\n\r\ninterface CollapsibleProps extends React.ComponentPropsWithRef<typeof BaseCollapsible.Root> {}\r\n\r\ninterface CollapsibleTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseCollapsible.Trigger>, \"className\"> {\r\n  /**\r\n   * Applies additional CSS classes to the component root element.\r\n   * @default undefined\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Enables child element composition instead of rendering the default wrapper.\r\n   * @default false\r\n   * @deprecated Prefer Base UI's `render` prop.\r\n   */\r\n  asChild?: boolean;\r\n}\r\n\r\ninterface CollapsibleContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseCollapsible.Panel>, \"className\"> {\r\n  /**\r\n   * Applies additional CSS classes to the component root element.\r\n   * @default undefined\r\n   */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Coordinates collapsible state and accessibility behavior.\r\n *\r\n * @remarks\r\n * - Delegates structure and state to the underlying Base UI primitive\r\n * - Built on {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}\r\n * - Preserves the underlying primitive API for advanced composition\r\n *\r\n * @example\r\n * ```tsx\r\n * <Collapsible>Content</Collapsible>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/collapsible | Base UI Documentation}\r\n */\r\nfunction Collapsible(props: Readonly<Collapsible.Props>): React.ReactElement {\r\n  return <BaseCollapsible.Root {...props} />;\r\n}\r\n\r\n/**\r\n * Renders the collapsible trigger.\r\n *\r\n * @remarks\r\n * - Renders a `<button>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}\r\n * - Supports the `render` prop for element composition\r\n *\r\n * @example\r\n * ```tsx\r\n * <CollapsibleTrigger>Content</CollapsibleTrigger>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/collapsible | Base UI Documentation}\r\n */\r\nconst CollapsibleTrigger = React.forwardRef<React.ComponentRef<typeof BaseCollapsible.Trigger>, CollapsibleTrigger.Props>(\r\n  (props: Readonly<CollapsibleTrigger.Props>, ref): React.ReactElement => {\r\n    // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API\r\n    const {asChild = false, children, className, render, ...otherProps} = props;\r\n    const renderProp = asChild && React.isValidElement(children) ? children : render;\r\n\r\n    return (\r\n      <BaseCollapsible.Trigger\r\n        ref={ref}\r\n        {...otherProps}\r\n        render={useRender({\r\n          defaultTagName: \"button\",\r\n          render: renderProp as never,\r\n          props: mergeProps({className: cn(styles.trigger, className)}, {}),\r\n        })}>\r\n        {renderProp ? undefined : children}\r\n      </BaseCollapsible.Trigger>\r\n    );\r\n  },\r\n);\r\n\r\n/**\r\n * Renders the collapsible content.\r\n *\r\n * @remarks\r\n * - Renders a `<div>` element by default\r\n * - Built on {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}\r\n * - Supports the `render` prop for element composition\r\n *\r\n * @example\r\n * ```tsx\r\n * <CollapsibleContent>Content</CollapsibleContent>\r\n * ```\r\n *\r\n * @see {@link https://base-ui.com/react/components/collapsible | Base UI Documentation}\r\n */\r\nconst CollapsibleContent = React.forwardRef<React.ComponentRef<typeof BaseCollapsible.Panel>, CollapsibleContent.Props>(\r\n  (props: Readonly<CollapsibleContent.Props>, ref): React.ReactElement => {\r\n    const {className, children, render, ...otherProps} = props;\r\n\r\n    return (\r\n      <BaseCollapsible.Panel\r\n        ref={ref}\r\n        {...otherProps}\r\n        render={useRender({\r\n          defaultTagName: \"div\",\r\n          render: render as never,\r\n          props: mergeProps({className: cn(styles.panel, className)}, {}),\r\n        })}>\r\n        {children}\r\n      </BaseCollapsible.Panel>\r\n    );\r\n  },\r\n);\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace Collapsible {\r\n  export type Props = CollapsibleProps;\r\n  export type State = BaseCollapsible.Root.State;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace CollapsibleTrigger {\r\n  export type Props = CollapsibleTriggerProps;\r\n  export type State = BaseCollapsible.Trigger.State;\r\n}\r\n\r\n// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API\r\nnamespace CollapsibleContent {\r\n  export type Props = CollapsibleContentProps;\r\n  export type State = BaseCollapsible.Panel.State;\r\n}\r\n\r\nCollapsible.displayName = \"Collapsible\";\r\nCollapsibleTrigger.displayName = \"CollapsibleTrigger\";\r\nCollapsibleContent.displayName = \"CollapsibleContent\";\r\n\r\nexport {Collapsible, CollapsibleContent, CollapsibleTrigger};\r\n"],"names":["Collapsible","props","BaseCollapsible","CollapsibleTrigger","React","ref","asChild","children","className","render","otherProps","renderProp","useRender","mergeProps","cn","styles","undefined","CollapsibleContent"],"mappings":";;;;;;;;AAiDA,SAASA,wBAAYC,KAAkC;IACrD,OAAO,WAAP,GAAO,IAACC,YAAAA,IAAoB;QAAE,GAAGD,KAAK;;AACxC;AAiBA,MAAME,qBAAqB,WAAHA,GAAGC,WACzB,CAACH,OAA2CI;IAE1C,MAAM,EAACC,UAAU,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGC,YAAW,GAAGT;IACtE,MAAMU,aAAaL,WAAW,WAAXA,GAAWF,eAAqBG,YAAYA,WAAWE;IAE1E,OAAO,WAAP,GACE,IAACP,YAAAA,OAAuB;QACtB,KAAKG;QACJ,GAAGK,UAAU;QACd,QAAQE,UAAU;YAChB,gBAAgB;YAChB,QAAQD;YACR,OAAOE,WAAW;gBAAC,WAAWC,GAAGC,mBAAAA,OAAc,EAAEP;YAAU,GAAG,CAAC;QACjE;kBACCG,aAAaK,SAAYT;;AAGhC;AAkBF,MAAMU,qBAAqB,WAAHA,GAAGb,WACzB,CAACH,OAA2CI;IAC1C,MAAM,EAACG,SAAS,EAAED,QAAQ,EAAEE,MAAM,EAAE,GAAGC,YAAW,GAAGT;IAErD,OAAO,WAAP,GACE,IAACC,YAAAA,KAAqB;QACpB,KAAKG;QACJ,GAAGK,UAAU;QACd,QAAQE,UAAU;YAChB,gBAAgB;YAChB,QAAQH;YACR,OAAOI,WAAW;gBAAC,WAAWC,GAAGC,mBAAAA,KAAY,EAAEP;YAAU,GAAG,CAAC;QAC/D;kBACCD;;AAGP;AAqBFP,wBAAY,WAAW,GAAG;AAC1BG,mBAAmB,WAAW,GAAG;AACjCc,mBAAmB,WAAW,GAAG"}

package/dist/components/ui/combobox.d.ts

@@ -0,0 +1,335 @@
+import * as React from "react";
+interface ComboboxProps {
+    /**
+     * The controlled selected value.
+     * @default undefined
+     */
+    value?: string;
+    /**
+     * The default value when uncontrolled.
+     * @default ""
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the selected value changes.
+     * @default undefined
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Whether the popover is controlled open state.
+     * @default undefined
+     */
+    open?: boolean;
+    /**
+     * Whether the popover is open by default (uncontrolled).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback fired when the open state changes.
+     * @default undefined
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Placeholder text shown when no value is selected.
+     * @default "Select an item..."
+     */
+    placeholder?: string;
+    /**
+     * Placeholder text shown in the search input.
+     * @default "Search..."
+     */
+    searchPlaceholder?: string;
+    /**
+     * Message shown when no items match the search.
+     * @default "No items found."
+     */
+    emptyMessage?: string;
+    /**
+     * Whether the combobox is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes merged with the combobox styles.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Combobox content and items.
+     * @default undefined
+     */
+    children?: React.ReactNode;
+}
+interface ComboboxTriggerProps {
+    /**
+     * Additional CSS classes merged with the trigger styles.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Trigger content. If not provided, shows selected item label or placeholder.
+     * @default undefined
+     */
+    children?: React.ReactNode;
+}
+interface ComboboxContentProps {
+    /**
+     * Additional CSS classes merged with the content styles.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Content children (typically ComboboxItem components).
+     * @default undefined
+     */
+    children?: React.ReactNode;
+}
+interface ComboboxItemProps {
+    /**
+     * The value associated with this item.
+     */
+    value: string;
+    /**
+     * Additional CSS classes merged with the item styles.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Item content (label).
+     * @default undefined
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback fired when the item is selected.
+     * @default undefined
+     */
+    onSelect?: (value: string) => void;
+    /**
+     * Additional search keywords for filtering.
+     * @default []
+     */
+    keywords?: string[];
+}
+interface ComboboxEmptyProps {
+    /**
+     * Additional CSS classes merged with the empty state styles.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Content shown when no items match. Defaults to context emptyMessage.
+     * @default undefined
+     */
+    children?: React.ReactNode;
+}
+interface ComboboxGroupProps {
+    /**
+     * Group heading text.
+     * @default undefined
+     */
+    heading?: string;
+    /**
+     * Additional CSS classes merged with the group styles.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Group items.
+     * @default undefined
+     */
+    children?: React.ReactNode;
+}
+interface ComboboxSeparatorProps {
+    /**
+     * Additional CSS classes merged with the separator styles.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * A searchable select component combining Command, Popover, and Button.
+ *
+ * @remarks
+ * - Composes Command (search), Popover (positioning), and Button (trigger)
+ * - Supports both controlled and uncontrolled modes
+ * - Provides keyboard navigation and filtering
+ * - Built with Base UI primitives and CSS Modules
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Combobox value={value} onValueChange={setValue}>
+ *   <ComboboxTrigger />
+ *   <ComboboxContent>
+ *     <ComboboxItem value="apple">Apple</ComboboxItem>
+ *     <ComboboxItem value="banana">Banana</ComboboxItem>
+ *   </ComboboxContent>
+ * </Combobox>
+ * ```
+ *
+ * @example With groups
+ * ```tsx
+ * <Combobox>
+ *   <ComboboxTrigger />
+ *   <ComboboxContent>
+ *     <ComboboxGroup heading="Fruits">
+ *       <ComboboxItem value="apple">Apple</ComboboxItem>
+ *     </ComboboxGroup>
+ *     <ComboboxSeparator />
+ *     <ComboboxGroup heading="Vegetables">
+ *       <ComboboxItem value="carrot">Carrot</ComboboxItem>
+ *     </ComboboxGroup>
+ *   </ComboboxContent>
+ * </Combobox>
+ * ```
+ */
+declare function Combobox(props: Readonly<Combobox.Props>): React.ReactElement;
+declare namespace Combobox {
+    var displayName: string;
+}
+/**
+ * Button that opens and closes the combobox popover.
+ *
+ * @remarks
+ * - Renders as a Button with trigger behavior
+ * - Shows selected item label or placeholder
+ * - Supports custom children or auto-display
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ComboboxTrigger />
+ * ```
+ *
+ * @example Custom content
+ * ```tsx
+ * <ComboboxTrigger>
+ *   {selectedLabel || "Choose..."}
+ * </ComboboxTrigger>
+ * ```
+ */
+declare const ComboboxTrigger: React.ForwardRefExoticComponent<ComboboxTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * The popover content containing the searchable command list.
+ *
+ * @remarks
+ * - Wraps Command with Popover positioning
+ * - Includes search input and items list
+ * - Automatically closes on item selection
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ComboboxContent>
+ *   <ComboboxItem value="item1">Item 1</ComboboxItem>
+ * </ComboboxContent>
+ * ```
+ */
+declare const ComboboxContent: React.ForwardRefExoticComponent<ComboboxContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A selectable item within the combobox.
+ *
+ * @remarks
+ * - Uses CommandItem internally
+ * - Shows check icon when selected
+ * - Closes popover on selection
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ComboboxItem value="apple">Apple</ComboboxItem>
+ * ```
+ *
+ * @example With custom select handler
+ * ```tsx
+ * <ComboboxItem
+ *   value="apple"
+ *   onSelect={(value) => console.log("Selected:", value)}
+ * >
+ *   Apple
+ * </ComboboxItem>
+ * ```
+ */
+declare function ComboboxItem(props: Readonly<ComboboxItem.Props>): React.ReactElement;
+declare namespace ComboboxItem {
+    var displayName: string;
+}
+/**
+ * Message shown when search returns no results.
+ *
+ * @remarks
+ * - Uses CommandEmpty internally
+ * - Defaults to context emptyMessage
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ComboboxEmpty />
+ * ```
+ *
+ * @example Custom message
+ * ```tsx
+ * <ComboboxEmpty>Nothing found</ComboboxEmpty>
+ * ```
+ */
+declare function ComboboxEmpty(props: Readonly<ComboboxEmpty.Props>): React.ReactElement;
+declare namespace ComboboxEmpty {
+    var displayName: string;
+}
+/**
+ * Groups related combobox items with an optional heading.
+ *
+ * @remarks
+ * - Uses CommandGroup internally
+ * - Supports visual grouping with headings
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ComboboxGroup heading="Fruits">
+ *   <ComboboxItem value="apple">Apple</ComboboxItem>
+ * </ComboboxGroup>
+ * ```
+ */
+declare function ComboboxGroup(props: Readonly<ComboboxGroup.Props>): React.ReactElement;
+declare namespace ComboboxGroup {
+    var displayName: string;
+}
+/**
+ * Visual separator between combobox groups.
+ *
+ * @remarks
+ * - Uses CommandSeparator internally
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ComboboxSeparator />
+ * ```
+ */
+declare function ComboboxSeparator(props: Readonly<ComboboxSeparator.Props>): React.ReactElement;
+declare namespace ComboboxSeparator {
+    var displayName: string;
+}
+declare namespace Combobox {
+    type Props = ComboboxProps;
+}
+declare namespace ComboboxTrigger {
+    type Props = ComboboxTriggerProps;
+}
+declare namespace ComboboxContent {
+    type Props = ComboboxContentProps;
+}
+declare namespace ComboboxItem {
+    type Props = ComboboxItemProps;
+}
+declare namespace ComboboxEmpty {
+    type Props = ComboboxEmptyProps;
+}
+declare namespace ComboboxGroup {
+    type Props = ComboboxGroupProps;
+}
+declare namespace ComboboxSeparator {
+    type Props = ComboboxSeparatorProps;
+}
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxSeparator, ComboboxTrigger };
+//# sourceMappingURL=combobox.d.ts.map

package/dist/components/ui/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/combobox.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/combobox.js

@@ -0,0 +1,206 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from "react";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { cn } from "../../lib/utilities.js";
+import { Button } from "./button.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "./command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import combobox_module from "./combobox.module.js";
+const ComboboxContext = /*#__PURE__*/ createContext(null);
+function useComboboxContext(componentName) {
+    const context = useContext(ComboboxContext);
+    if (!context) throw new Error(`${componentName} must be used within Combobox.`);
+    return context;
+}
+function Combobox(props) {
+    const { value: controlledValue, defaultValue = "", onValueChange, open: controlledOpen, defaultOpen = false, onOpenChange, placeholder = "Select an item...", searchPlaceholder = "Search...", emptyMessage = "No items found.", disabled = false, className, children } = props;
+    const [value, setValue] = useControllableState({
+        controlled: controlledValue,
+        defaultValue,
+        onChange: onValueChange
+    });
+    const [open, setOpen] = useControllableState({
+        controlled: controlledOpen,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange
+    });
+    const itemLabelsRef = useRef(new Map());
+    const registerItem = useCallback((itemValue, label)=>{
+        itemLabelsRef.current.set(itemValue, label);
+    }, []);
+    const unregisterItem = useCallback((itemValue)=>{
+        itemLabelsRef.current.delete(itemValue);
+    }, []);
+    const contextValue = useMemo(()=>({
+            value,
+            onValueChange: setValue,
+            open,
+            setOpen,
+            placeholder,
+            searchPlaceholder,
+            emptyMessage,
+            disabled,
+            itemLabels: itemLabelsRef.current,
+            registerItem,
+            unregisterItem
+        }), [
+        value,
+        setValue,
+        open,
+        setOpen,
+        placeholder,
+        searchPlaceholder,
+        emptyMessage,
+        disabled,
+        registerItem,
+        unregisterItem
+    ]);
+    return /*#__PURE__*/ jsx(ComboboxContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(Popover, {
+            open: open,
+            onOpenChange: setOpen,
+            children: /*#__PURE__*/ jsx("div", {
+                className: cn(combobox_module.combobox, className),
+                children: children
+            })
+        })
+    });
+}
+Combobox.displayName = "Combobox";
+const ComboboxTrigger = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { className, children } = props;
+    const { open, setOpen, value, placeholder, disabled, itemLabels } = useComboboxContext("ComboboxTrigger");
+    const [, forceUpdate] = useReducer((x)=>x + 1, 0);
+    useEffect(()=>{
+        forceUpdate();
+    }, [
+        value
+    ]);
+    const selectedLabel = itemLabels.get(value) || "";
+    return /*#__PURE__*/ jsx(PopoverTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/ jsx(Button, {
+            ref: ref,
+            variant: "outline",
+            role: "combobox",
+            "aria-expanded": open,
+            disabled: disabled,
+            className: cn(combobox_module.trigger, className),
+            onClick: ()=>setOpen(!open),
+            children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: cn(combobox_module.triggerValue, !selectedLabel && combobox_module.triggerPlaceholder),
+                        children: selectedLabel || placeholder
+                    }),
+                    /*#__PURE__*/ jsx(ChevronsUpDown, {
+                        className: combobox_module.triggerIcon
+                    })
+                ]
+            })
+        })
+    });
+});
+ComboboxTrigger.displayName = "ComboboxTrigger";
+const ComboboxContent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { className, children } = props;
+    const { searchPlaceholder } = useComboboxContext("ComboboxContent");
+    return /*#__PURE__*/ jsx(PopoverContent, {
+        ref: ref,
+        className: cn(combobox_module.content, className),
+        sideOffset: 4,
+        children: /*#__PURE__*/ jsxs(Command, {
+            className: combobox_module.command,
+            children: [
+                /*#__PURE__*/ jsx(CommandInput, {
+                    placeholder: searchPlaceholder,
+                    className: combobox_module.commandInput
+                }),
+                /*#__PURE__*/ jsxs(CommandList, {
+                    className: combobox_module.commandList,
+                    children: [
+                        /*#__PURE__*/ jsx(ComboboxEmpty, {}),
+                        children
+                    ]
+                })
+            ]
+        })
+    });
+});
+ComboboxContent.displayName = "ComboboxContent";
+function ComboboxItem(props) {
+    const { value: itemValue, className, children, disabled = false, onSelect, keywords = [] } = props;
+    const { value: selectedValue, onValueChange, setOpen, registerItem, unregisterItem } = useComboboxContext("ComboboxItem");
+    const isSelected = selectedValue === itemValue;
+    const label = "string" == typeof children ? children : itemValue;
+    useEffect(()=>{
+        registerItem(itemValue, label);
+        return ()=>{
+            unregisterItem(itemValue);
+        };
+    }, [
+        itemValue,
+        label,
+        registerItem,
+        unregisterItem
+    ]);
+    const handleSelect = useCallback((currentValue)=>{
+        const newValue = currentValue === selectedValue ? "" : currentValue;
+        onValueChange(newValue);
+        setOpen(false);
+        onSelect?.(newValue);
+    }, [
+        selectedValue,
+        onValueChange,
+        setOpen,
+        onSelect
+    ]);
+    return /*#__PURE__*/ jsxs(CommandItem, {
+        value: itemValue,
+        disabled: disabled,
+        onSelect: handleSelect,
+        keywords: keywords,
+        className: cn(combobox_module.item, isSelected && combobox_module.itemSelected, className),
+        children: [
+            /*#__PURE__*/ jsx(Check, {
+                className: cn(combobox_module.itemCheck, isSelected && combobox_module.itemCheckVisible)
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: combobox_module.itemLabel,
+                children: children
+            })
+        ]
+    });
+}
+ComboboxItem.displayName = "ComboboxItem";
+function ComboboxEmpty(props) {
+    const { className, children } = props;
+    const { emptyMessage } = useComboboxContext("ComboboxEmpty");
+    return /*#__PURE__*/ jsx(CommandEmpty, {
+        className: cn(combobox_module.empty, className),
+        children: children ?? emptyMessage
+    });
+}
+ComboboxEmpty.displayName = "ComboboxEmpty";
+function ComboboxGroup(props) {
+    const { heading, className, children } = props;
+    return /*#__PURE__*/ jsx(CommandGroup, {
+        heading: heading,
+        className: cn(combobox_module.group, className),
+        children: children
+    });
+}
+ComboboxGroup.displayName = "ComboboxGroup";
+function ComboboxSeparator(props) {
+    const { className } = props;
+    return /*#__PURE__*/ jsx(CommandSeparator, {
+        className: cn(combobox_module.separator, className)
+    });
+}
+ComboboxSeparator.displayName = "ComboboxSeparator";
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxSeparator, ComboboxTrigger };
+
+//# sourceMappingURL=combobox.js.map