@raystack/apsara 0.56.5 → 1.0.0-rc.0

package/dist/components/combobox/combobox-item.js

@@ -1,33 +1,33 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { ComboboxItem as ComboboxItem$1 } from '@ariakit/react';
+import { Combobox } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
 import { forwardRef } from 'react';
 import { Checkbox } from '../checkbox/checkbox.js';
-import { getMatch } from '../dropdown-menu/utils.js';
+import { getMatch } from '../menu/utils.js';
 import { Text } from '../text/text.js';
 import styles from './combobox.module.css.js';
 import { useComboboxContext } from './combobox-root.js';
 
-const ComboboxItem = forwardRef(({ className, children, value: providedValue, leadingIcon, disabled, ...props }, ref) => {
+const ComboboxItem = forwardRef(({ className, children, value: providedValue, leadingIcon, disabled, render, ...props }, ref) => {
     const value = providedValue
-        ? String(providedValue)
+        ? providedValue
         : typeof children === 'string'
             ? children
             : undefined;
-    const { multiple, value: comboboxValue, inputValue } = useComboboxContext();
-    const isSelected = multiple
-        ? comboboxValue?.includes(value ?? '')
-        : value === comboboxValue;
-    const isMatched = getMatch(value, children, inputValue);
-    const element = typeof children === 'string' ? (jsxs(Fragment, { children: [leadingIcon && jsx("div", { className: styles.itemIcon, children: leadingIcon }), jsx(Text, { children: children })] })) : (children);
-    if (inputValue?.length && !isMatched) {
-        // Doesn't match search, so don't render at all
-        return null;
+    const { multiple, inputValue, hasItems } = useComboboxContext();
+    // When items prop is not provided on Root, use custom filtering
+    if (!hasItems && inputValue?.length) {
+        const isMatched = getMatch(value, children, inputValue);
+        if (!isMatched)
+            return null;
     }
-    return (jsxs(ComboboxItem$1, { ref: ref, value: value, className: cx(styles.menuitem, className), focusOnHover: true, "aria-selected": isSelected, "data-selected": isSelected, resetValueOnSelect: multiple, ...props, children: [multiple && jsx(Checkbox, { checked: isSelected }), element] }));
+    const element = typeof children === 'string' ? (jsxs(Fragment, { children: [leadingIcon && jsx("div", { className: styles.itemIcon, children: leadingIcon }), jsx(Text, { children: children })] })) : (children);
+    return (jsx(Combobox.Item, { ref: ref, value: value, className: cx(styles.menuitem, className), disabled: disabled, ...props, render: render
+            ? render
+            : (renderProps, state) => (jsxs("div", { ...renderProps, children: [multiple && jsx(Checkbox, { checked: state.selected }), element] })) }));
 });
-ComboboxItem.displayName = 'ComboboxItem';
+ComboboxItem.displayName = 'Combobox.Item';
 
 export { ComboboxItem };
 //# sourceMappingURL=combobox-item.js.map

package/dist/components/combobox/combobox-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-item.js","sources":["../../../components/combobox/combobox-item.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxItem as AriakitComboboxItem } from '@ariakit/react';\nimport { cx } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../dropdown-menu/utils';\nimport { Text } from '../text';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport interface ComboboxItemProps\n  extends ComponentPropsWithoutRef<typeof AriakitComboboxItem> {\n  leadingIcon?: React.ReactNode;\n}\n\nexport const ComboboxItem = forwardRef<\n  ElementRef<typeof AriakitComboboxItem>,\n  ComboboxItemProps\n>(\n  (\n    {\n      className,\n      children,\n      value: providedValue,\n      leadingIcon,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const value = providedValue\n      ? String(providedValue)\n      : typeof children === 'string'\n        ? children\n        : undefined;\n    const { multiple, value: comboboxValue, inputValue } = useComboboxContext();\n\n    const isSelected = multiple\n      ? comboboxValue?.includes(value ?? '')\n      : value === comboboxValue;\n    const isMatched = getMatch(value, children, inputValue);\n\n    const element =\n      typeof children === 'string' ? (\n        <>\n          {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}\n          <Text>{children}</Text>\n        </>\n      ) : (\n        children\n      );\n\n    if (inputValue?.length && !isMatched) {\n      // Doesn't match search, so don't render at all\n      return null;\n    }\n\n    return (\n      <AriakitComboboxItem\n        ref={ref}\n        value={value}\n        className={cx(styles.menuitem, className)}\n        focusOnHover\n        aria-selected={isSelected}\n        data-selected={isSelected}\n        resetValueOnSelect={multiple}\n        {...props}\n      >\n        {multiple && <Checkbox checked={isSelected} />}\n        {element}\n      </AriakitComboboxItem>\n    );\n  }\n);\nComboboxItem.displayName = 'ComboboxItem';\n"],"names":[],"mappings":";;;;;;;;;;;AAgBa;;AAgBP;AACA;AACE;;AAEJ;;;AAIE;;AAGF;AAUA;;AAEE;;;AAkBJ;AAEF;;"}
+{"version":3,"file":"combobox-item.js","sources":["../../../components/combobox/combobox-item.tsx"],"sourcesContent":["'use client';\n\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { forwardRef, ReactNode } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../menu/utils';\nimport { Text } from '../text';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport interface ComboboxItemProps extends ComboboxPrimitive.Item.Props {\n  leadingIcon?: ReactNode;\n}\n\nexport const ComboboxItem = forwardRef<HTMLDivElement, ComboboxItemProps>(\n  (\n    {\n      className,\n      children,\n      value: providedValue,\n      leadingIcon,\n      disabled,\n      render,\n      ...props\n    },\n    ref\n  ) => {\n    const value = providedValue\n      ? providedValue\n      : typeof children === 'string'\n        ? children\n        : undefined;\n\n    const { multiple, inputValue, hasItems } = useComboboxContext();\n\n    // When items prop is not provided on Root, use custom filtering\n    if (!hasItems && inputValue?.length) {\n      const isMatched = getMatch(value, children, inputValue);\n      if (!isMatched) return null;\n    }\n\n    const element =\n      typeof children === 'string' ? (\n        <>\n          {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}\n          <Text>{children}</Text>\n        </>\n      ) : (\n        children\n      );\n\n    return (\n      <ComboboxPrimitive.Item\n        ref={ref}\n        value={value}\n        className={cx(styles.menuitem, className)}\n        disabled={disabled}\n        {...props}\n        render={\n          render\n            ? render\n            : (renderProps, state) => (\n                <div {...renderProps}>\n                  {multiple && <Checkbox checked={state.selected} />}\n                  {element}\n                </div>\n              )\n        }\n      />\n    );\n  }\n);\nComboboxItem.displayName = 'Combobox.Item';\n"],"names":[],"mappings":";;;;;;;;;;;AAeO;;AAcD;AACA;AACE;;;;AAMJ;;AAEE;AAAgB;;AAGlB;AAUA;AASQ;AACA;AASV;AAEF;;"}

package/dist/components/combobox/combobox-misc.cjs

@@ -2,33 +2,33 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('@ariakit/react');
+var react = require('@base-ui/react');
 var classVarianceAuthority = require('class-variance-authority');
 var React = require('react');
 var combobox_module = require('./combobox.module.css.cjs');
 var comboboxRoot = require('./combobox-root.cjs');
 
 const ComboboxLabel = React.forwardRef(({ className, ...props }, ref) => {
-    const { inputValue } = comboboxRoot.useComboboxContext();
-    if (inputValue?.length)
+    const { inputValue, hasItems } = comboboxRoot.useComboboxContext();
+    if (!hasItems && inputValue?.length)
         return null;
-    return (jsxRuntime.jsx(react.ComboboxGroupLabel, { ref: ref, className: classVarianceAuthority.cx(combobox_module.default.label, className), ...props }));
+    return (jsxRuntime.jsx(react.Combobox.GroupLabel, { ref: ref, className: classVarianceAuthority.cx(combobox_module.default.label, className), ...props }));
 });
-ComboboxLabel.displayName = 'ComboboxLabel';
+ComboboxLabel.displayName = 'Combobox.Label';
 const ComboboxGroup = React.forwardRef(({ className, children, ...props }, ref) => {
-    const { inputValue } = comboboxRoot.useComboboxContext();
-    if (inputValue?.length)
+    const { inputValue, hasItems } = comboboxRoot.useComboboxContext();
+    if (!hasItems && inputValue?.length)
         return children;
-    return (jsxRuntime.jsx(react.ComboboxGroup, { ref: ref, className: classVarianceAuthority.cx(combobox_module.default.group, className), ...props, children: children }));
+    return (jsxRuntime.jsx(react.Combobox.Group, { ref: ref, className: classVarianceAuthority.cx(combobox_module.default.group, className), ...props, children: children }));
 });
-ComboboxGroup.displayName = 'ComboboxGroup';
+ComboboxGroup.displayName = 'Combobox.Group';
 const ComboboxSeparator = React.forwardRef(({ className, ...props }, ref) => {
-    const { inputValue } = comboboxRoot.useComboboxContext();
-    if (inputValue?.length)
+    const { inputValue, hasItems } = comboboxRoot.useComboboxContext();
+    if (!hasItems && inputValue?.length)
         return null;
-    return (jsxRuntime.jsx(react.ComboboxSeparator, { ref: ref, className: classVarianceAuthority.cx(combobox_module.default.separator, className), ...props }));
+    return (jsxRuntime.jsx(react.Combobox.Separator, { ref: ref, className: classVarianceAuthority.cx(combobox_module.default.separator, className), ...props }));
 });
-ComboboxSeparator.displayName = 'ComboboxSeparator';
+ComboboxSeparator.displayName = 'Combobox.Separator';
 
 exports.ComboboxGroup = ComboboxGroup;
 exports.ComboboxLabel = ComboboxLabel;

package/dist/components/combobox/combobox-misc.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-misc.cjs","sources":["../../../components/combobox/combobox-misc.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ComboboxGroup as AriakitComboboxGroup,\n  ComboboxGroupLabel as AriakitComboboxGroupLabel,\n  ComboboxSeparator as AriakitComboboxSeparator\n} from '@ariakit/react';\nimport { cx } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport const ComboboxLabel = forwardRef<\n  ElementRef<typeof AriakitComboboxGroupLabel>,\n  ComponentPropsWithoutRef<typeof AriakitComboboxGroupLabel>\n>(({ className, ...props }, ref) => {\n  const { inputValue } = useComboboxContext();\n  if (inputValue?.length) return null;\n\n  return (\n    <AriakitComboboxGroupLabel\n      ref={ref}\n      className={cx(styles.label, className)}\n      {...props}\n    />\n  );\n});\nComboboxLabel.displayName = 'ComboboxLabel';\n\nexport const ComboboxGroup = forwardRef<\n  ElementRef<typeof AriakitComboboxGroup>,\n  ComponentPropsWithoutRef<typeof AriakitComboboxGroup>\n>(({ className, children, ...props }, ref) => {\n  const { inputValue } = useComboboxContext();\n  if (inputValue?.length) return children;\n\n  return (\n    <AriakitComboboxGroup\n      ref={ref}\n      className={cx(styles.group, className)}\n      {...props}\n    >\n      {children}\n    </AriakitComboboxGroup>\n  );\n});\nComboboxGroup.displayName = 'ComboboxGroup';\n\nexport const ComboboxSeparator = forwardRef<\n  ElementRef<typeof AriakitComboboxSeparator>,\n  ComponentPropsWithoutRef<typeof AriakitComboboxSeparator>\n>(({ className, ...props }, ref) => {\n  const { inputValue } = useComboboxContext();\n  if (inputValue?.length) return null;\n\n  return (\n    <AriakitComboboxSeparator\n      ref={ref}\n      className={cx(styles.separator, className)}\n      {...props}\n    />\n  );\n});\nComboboxSeparator.displayName = 'ComboboxSeparator';\n"],"names":[],"mappings":";;;;;;;;;;AAYa;AAIX;;AACwB;;AAS1B;AACA;AAEa;AAIX;;AACwB;;AAW1B;AACA;AAEa;AAIX;;AACwB;;AAS1B;AACA;;;;"}
+{"version":3,"file":"combobox-misc.cjs","sources":["../../../components/combobox/combobox-misc.tsx"],"sourcesContent":["'use client';\n\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { ElementRef, forwardRef } from 'react';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport const ComboboxLabel = forwardRef<\n  ElementRef<typeof ComboboxPrimitive.GroupLabel>,\n  ComboboxPrimitive.GroupLabel.Props\n>(({ className, ...props }, ref) => {\n  const { inputValue, hasItems } = useComboboxContext();\n  if (!hasItems && inputValue?.length) return null;\n\n  return (\n    <ComboboxPrimitive.GroupLabel\n      ref={ref}\n      className={cx(styles.label, className)}\n      {...props}\n    />\n  );\n});\nComboboxLabel.displayName = 'Combobox.Label';\n\nexport const ComboboxGroup = forwardRef<\n  ElementRef<typeof ComboboxPrimitive.Group>,\n  ComboboxPrimitive.Group.Props\n>(({ className, children, ...props }, ref) => {\n  const { inputValue, hasItems } = useComboboxContext();\n  if (!hasItems && inputValue?.length) return children;\n\n  return (\n    <ComboboxPrimitive.Group\n      ref={ref}\n      className={cx(styles.group, className)}\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Group>\n  );\n});\nComboboxGroup.displayName = 'Combobox.Group';\n\nexport const ComboboxSeparator = forwardRef<\n  ElementRef<typeof ComboboxPrimitive.Separator>,\n  ComboboxPrimitive.Separator.Props\n>(({ className, ...props }, ref) => {\n  const { inputValue, hasItems } = useComboboxContext();\n  if (!hasItems && inputValue?.length) return null;\n\n  return (\n    <ComboboxPrimitive.Separator\n      ref={ref}\n      className={cx(styles.separator, className)}\n      {...props}\n    />\n  );\n});\nComboboxSeparator.displayName = 'Combobox.Separator';\n"],"names":[],"mappings":";;;;;;;;;;AAQa;;AAKX;AAAqC;;AASvC;AACA;AAEa;;AAKX;AAAqC;;AAWvC;AACA;AAEa;;AAKX;AAAqC;;AASvC;AACA;;;;"}

package/dist/components/combobox/combobox-misc.d.ts

@@ -1,10 +1,4 @@
-export declare const ComboboxLabel: import("react").ForwardRefExoticComponent<Omit<import("@ariakit/react").ComboboxGroupLabelOptions<"div"> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@ariakit/react").ComboboxGroupLabelOptions<T>> & {
-    [index: `data-${string}`]: unknown;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ComboboxGroup: import("react").ForwardRefExoticComponent<Omit<import("@ariakit/react").ComboboxGroupOptions<"div"> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@ariakit/react").ComboboxGroupOptions<T>> & {
-    [index: `data-${string}`]: unknown;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ComboboxSeparator: import("react").ForwardRefExoticComponent<Omit<import("@ariakit/react").ComboboxSeparatorOptions<"hr"> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, keyof import("@ariakit/react").ComboboxSeparatorOptions<T>> & {
-    [index: `data-${string}`]: unknown;
-}, "ref"> & import("react").RefAttributes<HTMLHRElement>>;
+export declare const ComboboxLabel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxSeparator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=combobox-misc.d.ts.map

package/dist/components/combobox/combobox-misc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-misc.d.ts","sourceRoot":"","sources":["../../../components/combobox/combobox-misc.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,aAAa;;0DAcxB,CAAC;AAGH,eAAO,MAAM,aAAa;;0DAgBxB,CAAC;AAGH,eAAO,MAAM,iBAAiB;;yDAc5B,CAAC"}
+{"version":3,"file":"combobox-misc.d.ts","sourceRoot":"","sources":["../../../components/combobox/combobox-misc.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,aAAa,8JAcxB,CAAC;AAGH,eAAO,MAAM,aAAa,yJAgBxB,CAAC;AAGH,eAAO,MAAM,iBAAiB,iJAc5B,CAAC"}

package/dist/components/combobox/combobox-misc.js

@@ -1,32 +1,32 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { ComboboxGroupLabel, ComboboxGroup as ComboboxGroup$1, ComboboxSeparator as ComboboxSeparator$1 } from '@ariakit/react';
+import { Combobox } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
 import { forwardRef } from 'react';
 import styles from './combobox.module.css.js';
 import { useComboboxContext } from './combobox-root.js';
 
 const ComboboxLabel = forwardRef(({ className, ...props }, ref) => {
-    const { inputValue } = useComboboxContext();
-    if (inputValue?.length)
+    const { inputValue, hasItems } = useComboboxContext();
+    if (!hasItems && inputValue?.length)
         return null;
-    return (jsx(ComboboxGroupLabel, { ref: ref, className: cx(styles.label, className), ...props }));
+    return (jsx(Combobox.GroupLabel, { ref: ref, className: cx(styles.label, className), ...props }));
 });
-ComboboxLabel.displayName = 'ComboboxLabel';
+ComboboxLabel.displayName = 'Combobox.Label';
 const ComboboxGroup = forwardRef(({ className, children, ...props }, ref) => {
-    const { inputValue } = useComboboxContext();
-    if (inputValue?.length)
+    const { inputValue, hasItems } = useComboboxContext();
+    if (!hasItems && inputValue?.length)
         return children;
-    return (jsx(ComboboxGroup$1, { ref: ref, className: cx(styles.group, className), ...props, children: children }));
+    return (jsx(Combobox.Group, { ref: ref, className: cx(styles.group, className), ...props, children: children }));
 });
-ComboboxGroup.displayName = 'ComboboxGroup';
+ComboboxGroup.displayName = 'Combobox.Group';
 const ComboboxSeparator = forwardRef(({ className, ...props }, ref) => {
-    const { inputValue } = useComboboxContext();
-    if (inputValue?.length)
+    const { inputValue, hasItems } = useComboboxContext();
+    if (!hasItems && inputValue?.length)
         return null;
-    return (jsx(ComboboxSeparator$1, { ref: ref, className: cx(styles.separator, className), ...props }));
+    return (jsx(Combobox.Separator, { ref: ref, className: cx(styles.separator, className), ...props }));
 });
-ComboboxSeparator.displayName = 'ComboboxSeparator';
+ComboboxSeparator.displayName = 'Combobox.Separator';
 
 export { ComboboxGroup, ComboboxLabel, ComboboxSeparator };
 //# sourceMappingURL=combobox-misc.js.map

package/dist/components/combobox/combobox-misc.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-misc.js","sources":["../../../components/combobox/combobox-misc.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ComboboxGroup as AriakitComboboxGroup,\n  ComboboxGroupLabel as AriakitComboboxGroupLabel,\n  ComboboxSeparator as AriakitComboboxSeparator\n} from '@ariakit/react';\nimport { cx } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport const ComboboxLabel = forwardRef<\n  ElementRef<typeof AriakitComboboxGroupLabel>,\n  ComponentPropsWithoutRef<typeof AriakitComboboxGroupLabel>\n>(({ className, ...props }, ref) => {\n  const { inputValue } = useComboboxContext();\n  if (inputValue?.length) return null;\n\n  return (\n    <AriakitComboboxGroupLabel\n      ref={ref}\n      className={cx(styles.label, className)}\n      {...props}\n    />\n  );\n});\nComboboxLabel.displayName = 'ComboboxLabel';\n\nexport const ComboboxGroup = forwardRef<\n  ElementRef<typeof AriakitComboboxGroup>,\n  ComponentPropsWithoutRef<typeof AriakitComboboxGroup>\n>(({ className, children, ...props }, ref) => {\n  const { inputValue } = useComboboxContext();\n  if (inputValue?.length) return children;\n\n  return (\n    <AriakitComboboxGroup\n      ref={ref}\n      className={cx(styles.group, className)}\n      {...props}\n    >\n      {children}\n    </AriakitComboboxGroup>\n  );\n});\nComboboxGroup.displayName = 'ComboboxGroup';\n\nexport const ComboboxSeparator = forwardRef<\n  ElementRef<typeof AriakitComboboxSeparator>,\n  ComponentPropsWithoutRef<typeof AriakitComboboxSeparator>\n>(({ className, ...props }, ref) => {\n  const { inputValue } = useComboboxContext();\n  if (inputValue?.length) return null;\n\n  return (\n    <AriakitComboboxSeparator\n      ref={ref}\n      className={cx(styles.separator, className)}\n      {...props}\n    />\n  );\n});\nComboboxSeparator.displayName = 'ComboboxSeparator';\n"],"names":[],"mappings":";;;;;;;;AAYa;AAIX;;AACwB;;AAS1B;AACA;AAEa;AAIX;;AACwB;;AAW1B;AACA;AAEa;AAIX;;AACwB;;AAS1B;AACA;;"}
+{"version":3,"file":"combobox-misc.js","sources":["../../../components/combobox/combobox-misc.tsx"],"sourcesContent":["'use client';\n\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { ElementRef, forwardRef } from 'react';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport const ComboboxLabel = forwardRef<\n  ElementRef<typeof ComboboxPrimitive.GroupLabel>,\n  ComboboxPrimitive.GroupLabel.Props\n>(({ className, ...props }, ref) => {\n  const { inputValue, hasItems } = useComboboxContext();\n  if (!hasItems && inputValue?.length) return null;\n\n  return (\n    <ComboboxPrimitive.GroupLabel\n      ref={ref}\n      className={cx(styles.label, className)}\n      {...props}\n    />\n  );\n});\nComboboxLabel.displayName = 'Combobox.Label';\n\nexport const ComboboxGroup = forwardRef<\n  ElementRef<typeof ComboboxPrimitive.Group>,\n  ComboboxPrimitive.Group.Props\n>(({ className, children, ...props }, ref) => {\n  const { inputValue, hasItems } = useComboboxContext();\n  if (!hasItems && inputValue?.length) return children;\n\n  return (\n    <ComboboxPrimitive.Group\n      ref={ref}\n      className={cx(styles.group, className)}\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Group>\n  );\n});\nComboboxGroup.displayName = 'Combobox.Group';\n\nexport const ComboboxSeparator = forwardRef<\n  ElementRef<typeof ComboboxPrimitive.Separator>,\n  ComboboxPrimitive.Separator.Props\n>(({ className, ...props }, ref) => {\n  const { inputValue, hasItems } = useComboboxContext();\n  if (!hasItems && inputValue?.length) return null;\n\n  return (\n    <ComboboxPrimitive.Separator\n      ref={ref}\n      className={cx(styles.separator, className)}\n      {...props}\n    />\n  );\n});\nComboboxSeparator.displayName = 'Combobox.Separator';\n"],"names":[],"mappings":";;;;;;;;AAQa;;AAKX;AAAqC;;AASvC;AACA;AAEa;;AAKX;AAAqC;;AAWvC;AACA;AAEa;;AAKX;AAAqC;;AASvC;AACA;;"}

package/dist/components/combobox/combobox-root.cjs

@@ -2,8 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('@ariakit/react');
-var radixUi = require('radix-ui');
+var react = require('@base-ui/react');
 var React = require('react');
 
 const ComboboxContext = React.createContext(undefined);
@@ -14,51 +13,33 @@ const useComboboxContext = () => {
     }
     return context;
 };
-const ComboboxRoot = ({ modal = false, multiple = false, children, value: providedValue, defaultValue = multiple ? [] : undefined, onValueChange, inputValue: providedInputValue, onInputValueChange, defaultInputValue, open: providedOpen, defaultOpen = false, onOpenChange, ...props }) => {
-    const [internalValue, setInternalValue] = React.useState(defaultValue);
-    const [internalInputValue, setInternalInputValue] = React.useState(defaultInputValue);
-    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-    const inputRef = React.useRef(null);
-    const listRef = React.useRef(null);
-    const value = providedValue ?? internalValue;
-    const inputValue = providedInputValue ?? internalInputValue;
-    const open = providedOpen ?? internalOpen;
-    const setValue = React.useCallback((newValue) => {
+const ComboboxRoot = ({ multiple = false, children, onValueChange, onInputValueChange, value: providedValue, defaultValue, items, ...props }) => {
+    const [inputValue, setInputValue] = React.useState('');
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? null);
+    const inputContainerRef = React.useRef(null);
+    const computedValue = providedValue ?? internalValue;
+    const handleInputValueChange = React.useCallback((value, eventDetails) => {
+        setInputValue(value);
+        onInputValueChange?.(value);
+    }, [onInputValueChange]);
+    const handleValueChange = React.useCallback((value, eventDetails) => {
+        setInternalValue(value);
         if (multiple) {
-            const formattedValue = newValue
-                ? Array.isArray(newValue)
-                    ? newValue
-                    : [newValue]
-                : [];
-            setInternalValue(formattedValue);
-            onValueChange?.(formattedValue);
+            onValueChange?.(value);
         }
         else {
-            setInternalValue(String(newValue));
-            onValueChange?.(String(newValue));
+            onValueChange?.(value);
         }
     }, [onValueChange, multiple]);
-    const setInputValue = React.useCallback((newValue) => {
-        if (!multiple && newValue.length === 0)
-            setValue('');
-        setInternalInputValue(newValue);
-        onInputValueChange?.(newValue);
-    }, [onInputValueChange, setValue, multiple]);
-    const setOpen = React.useCallback((newOpen) => {
-        setInternalOpen(newOpen);
-        onOpenChange?.(newOpen);
-    }, [onOpenChange]);
-    return (jsxRuntime.jsx(ComboboxContext.Provider, { value: {
-            setValue,
-            value,
-            inputValue,
-            setInputValue,
-            open,
-            setOpen,
-            inputRef,
-            multiple,
-            listRef
-        }, children: jsxRuntime.jsx(radixUi.Popover.Root, { open: open, onOpenChange: setOpen, modal: modal, children: jsxRuntime.jsx(react.ComboboxProvider, { open: open, setOpen: setOpen, value: inputValue, setValue: setInputValue, selectedValue: value, setSelectedValue: setValue, focusLoop: false, includesBaseElement: false, resetValueOnHide: multiple, resetValueOnSelect: multiple, ...props, children: children }) }) }));
+    const contextValue = React.useMemo(() => ({
+        multiple,
+        inputValue,
+        hasItems: !!items,
+        inputContainerRef,
+        value: computedValue,
+        onValueChange: handleValueChange
+    }), [multiple, inputValue, items, computedValue, handleValueChange]);
+    return (jsxRuntime.jsx(ComboboxContext.Provider, { value: contextValue, children: jsxRuntime.jsx(react.Combobox.Root, { multiple: multiple, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, items: items, value: providedValue, defaultValue: defaultValue, modal: true, ...props, children: children }) }));
 };
 
 exports.ComboboxRoot = ComboboxRoot;

package/dist/components/combobox/combobox-root.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-root.cjs","sources":["../../../components/combobox/combobox-root.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxProvider, ComboboxProviderProps } from '@ariakit/react';\nimport { Popover as PopoverPrimitive } from 'radix-ui';\nimport {\n  createContext,\n  RefObject,\n  useCallback,\n  useContext,\n  useRef,\n  useState\n} from 'react';\n\ninterface ComboboxContextValue {\n  setValue: (value: string | string[]) => void;\n  value?: string | string[];\n  inputValue?: string;\n  setInputValue: (inputValue: string) => void;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  multiple: boolean;\n  listRef: RefObject<HTMLDivElement | null>;\n}\n\nconst ComboboxContext = createContext<ComboboxContextValue | undefined>(\n  undefined\n);\n\nexport const useComboboxContext = (): ComboboxContextValue => {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(\n      'useComboboxContext must be used within a ComboboxProvider'\n    );\n  }\n  return context;\n};\nexport interface BaseComboboxRootProps\n  extends Omit<\n    ComboboxProviderProps,\n    | 'value'\n    | 'setValue'\n    | 'selectedValue'\n    | 'setSelectedValue'\n    | 'defaultSelectedValue'\n    | 'defaultValue'\n    | 'resetValueOnHide'\n    | 'resetValueOnSelect'\n  > {\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n  inputValue?: string;\n  onInputValueChange?: (inputValue: string) => void;\n  defaultInputValue?: string;\n}\nexport interface SingleComboboxProps extends BaseComboboxRootProps {\n  multiple?: false;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  defaultValue?: string;\n}\nexport interface MultipleComboboxProps extends BaseComboboxRootProps {\n  multiple: true;\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  defaultValue?: string[];\n}\nexport type ComboboxRootProps = SingleComboboxProps | MultipleComboboxProps;\n\nexport const ComboboxRoot = ({\n  modal = false,\n  multiple = false,\n  children,\n  value: providedValue,\n  defaultValue = multiple ? [] : undefined,\n  onValueChange,\n  inputValue: providedInputValue,\n  onInputValueChange,\n  defaultInputValue,\n  open: providedOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}: ComboboxRootProps) => {\n  const [internalValue, setInternalValue] = useState<\n    string | string[] | undefined\n  >(defaultValue);\n  const [internalInputValue, setInternalInputValue] =\n    useState(defaultInputValue);\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const value = providedValue ?? internalValue;\n  const inputValue = providedInputValue ?? internalInputValue;\n  const open = providedOpen ?? internalOpen;\n\n  const setValue = useCallback(\n    (newValue: string | string[] | undefined) => {\n      if (multiple) {\n        const formattedValue = newValue\n          ? Array.isArray(newValue)\n            ? newValue\n            : [newValue]\n          : [];\n        setInternalValue(formattedValue);\n        (onValueChange as MultipleComboboxProps['onValueChange'])?.(\n          formattedValue\n        );\n      } else {\n        setInternalValue(String(newValue));\n        (onValueChange as SingleComboboxProps['onValueChange'])?.(\n          String(newValue)\n        );\n      }\n    },\n    [onValueChange, multiple]\n  );\n\n  const setInputValue = useCallback(\n    (newValue: string) => {\n      if (!multiple && newValue.length === 0) setValue('');\n      setInternalInputValue(newValue);\n      onInputValueChange?.(newValue);\n    },\n    [onInputValueChange, setValue, multiple]\n  );\n\n  const setOpen = useCallback(\n    (newOpen: boolean) => {\n      setInternalOpen(newOpen);\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange]\n  );\n\n  return (\n    <ComboboxContext.Provider\n      value={{\n        setValue,\n        value,\n        inputValue,\n        setInputValue,\n        open,\n        setOpen,\n        inputRef,\n        multiple,\n        listRef\n      }}\n    >\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen} modal={modal}>\n        <ComboboxProvider\n          open={open}\n          setOpen={setOpen}\n          value={inputValue}\n          setValue={setInputValue}\n          selectedValue={value}\n          setSelectedValue={setValue}\n          focusLoop={false}\n          includesBaseElement={false}\n          resetValueOnHide={multiple}\n          resetValueOnSelect={multiple}\n          {...props}\n        >\n          {children}\n        </ComboboxProvider>\n      </PopoverPrimitive.Root>\n    </ComboboxContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAyBA;AAIO;AACL;;AAEE;;AAIF;AACF;AAiCa;;;;AAsBX;AACA;AAEA;AACA;AACA;AAEA;;;AAIQ;AACE;;;;AAIH;;;AAID;AACC;;AAIL;AAIF;AAEI;;;AAEA;;AAKJ;;AAGI;AACF;AAIF;;;;;;;;;;AAYK;AAqBP;;;"}
+{"version":3,"file":"combobox-root.cjs","sources":["../../../components/combobox/combobox-root.tsx"],"sourcesContent":["'use client';\n\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react';\nimport {\n  createContext,\n  RefObject,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\ninterface ComboboxContextValue<Value = string> {\n  multiple: boolean;\n  inputValue: string;\n  hasItems: boolean;\n  inputContainerRef: RefObject<HTMLDivElement | null>;\n  value: Value | Value[] | null | undefined;\n  onValueChange?: (value: Value | Value[] | null) => void;\n}\n\nconst ComboboxContext = createContext<\n  ComboboxContextValue<unknown> | undefined\n>(undefined);\n\nexport const useComboboxContext = <\n  Value = string\n>(): ComboboxContextValue<Value> => {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(\n      'useComboboxContext must be used within a ComboboxProvider'\n    );\n  }\n  return context as ComboboxContextValue<Value>;\n};\n\nexport interface BaseComboboxRootProps<Value>\n  extends Omit<\n    ComboboxPrimitive.Root.Props<Value, boolean>,\n    'onValueChange' | 'onInputValueChange' | 'multiple'\n  > {\n  onInputValueChange?: (inputValue: string) => void;\n}\n\nexport interface SingleComboboxProps<Value = string>\n  extends BaseComboboxRootProps<Value> {\n  multiple?: false;\n  value?: Value | null;\n  defaultValue?: Value | null;\n  onValueChange?: (value: Value | null) => void;\n}\n\nexport interface MultipleComboboxProps<Value = string>\n  extends BaseComboboxRootProps<Value> {\n  multiple: true;\n  value?: Value[];\n  defaultValue?: Value[];\n  onValueChange?: (value: Value[]) => void;\n}\n\nexport type ComboboxRootProps<Value = string> =\n  | SingleComboboxProps<Value>\n  | MultipleComboboxProps<Value>;\n\nexport const ComboboxRoot = <Value extends unknown | unknown[]>({\n  multiple = false,\n  children,\n  onValueChange,\n  onInputValueChange,\n  value: providedValue,\n  defaultValue,\n  items,\n  ...props\n}: ComboboxRootProps<Value>) => {\n  const [inputValue, setInputValue] = useState('');\n  const [internalValue, setInternalValue] = useState<\n    Value | Value[] | null | undefined\n  >(defaultValue ?? null);\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n\n  const computedValue = providedValue ?? internalValue;\n\n  const handleInputValueChange = useCallback(\n    (\n      value: string,\n      eventDetails: ComboboxPrimitive.Root.ChangeEventDetails\n    ) => {\n      setInputValue(value);\n      onInputValueChange?.(value);\n    },\n    [onInputValueChange]\n  );\n\n  const handleValueChange = useCallback(\n    (\n      value: Value | Value[] | null,\n      eventDetails: ComboboxPrimitive.Root.ChangeEventDetails\n    ) => {\n      setInternalValue(value);\n      if (multiple) {\n        (onValueChange as MultipleComboboxProps<Value>['onValueChange'])?.(\n          value as Value[]\n        );\n      } else {\n        (onValueChange as SingleComboboxProps<Value>['onValueChange'])?.(\n          value as Value | null\n        );\n      }\n    },\n    [onValueChange, multiple]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      multiple,\n      inputValue,\n      hasItems: !!items,\n      inputContainerRef,\n      value: computedValue,\n      onValueChange: handleValueChange\n    }),\n    [multiple, inputValue, items, computedValue, handleValueChange]\n  );\n\n  return (\n    <ComboboxContext.Provider\n      value={contextValue as ComboboxContextValue<unknown>}\n    >\n      <ComboboxPrimitive.Root\n        multiple={multiple}\n        onValueChange={handleValueChange}\n        onInputValueChange={handleInputValueChange}\n        items={items}\n        value={providedValue}\n        defaultValue={defaultValue}\n        modal\n        {...props}\n      >\n        {children}\n      </ComboboxPrimitive.Root>\n    </ComboboxContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAsBA;AAIO;AAGL;;AAEE;;AAIF;AACF;AA8BO;;AAWL;AAGA;AAEA;;;AAQI;AACF;;;;AAWK;;;AAIA;;AAIL;AAIF;;;;;AAMI;AACA;AACD;;AAsBL;;;"}

package/dist/components/combobox/combobox-root.d.ts

@@ -1,37 +1,30 @@
-import { ComboboxProviderProps } from '@ariakit/react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { RefObject } from 'react';
-interface ComboboxContextValue {
-    setValue: (value: string | string[]) => void;
-    value?: string | string[];
-    inputValue?: string;
-    setInputValue: (inputValue: string) => void;
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    inputRef: RefObject<HTMLInputElement | null>;
+interface ComboboxContextValue<Value = string> {
     multiple: boolean;
-    listRef: RefObject<HTMLDivElement | null>;
+    inputValue: string;
+    hasItems: boolean;
+    inputContainerRef: RefObject<HTMLDivElement | null>;
+    value: Value | Value[] | null | undefined;
+    onValueChange?: (value: Value | Value[] | null) => void;
 }
-export declare const useComboboxContext: () => ComboboxContextValue;
-export interface BaseComboboxRootProps extends Omit<ComboboxProviderProps, 'value' | 'setValue' | 'selectedValue' | 'setSelectedValue' | 'defaultSelectedValue' | 'defaultValue' | 'resetValueOnHide' | 'resetValueOnSelect'> {
-    onOpenChange?: (open: boolean) => void;
-    modal?: boolean;
-    inputValue?: string;
+export declare const useComboboxContext: <Value = string>() => ComboboxContextValue<Value>;
+export interface BaseComboboxRootProps<Value> extends Omit<ComboboxPrimitive.Root.Props<Value, boolean>, 'onValueChange' | 'onInputValueChange' | 'multiple'> {
     onInputValueChange?: (inputValue: string) => void;
-    defaultInputValue?: string;
 }
-export interface SingleComboboxProps extends BaseComboboxRootProps {
+export interface SingleComboboxProps<Value = string> extends BaseComboboxRootProps<Value> {
     multiple?: false;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    defaultValue?: string;
+    value?: Value | null;
+    defaultValue?: Value | null;
+    onValueChange?: (value: Value | null) => void;
 }
-export interface MultipleComboboxProps extends BaseComboboxRootProps {
+export interface MultipleComboboxProps<Value = string> extends BaseComboboxRootProps<Value> {
     multiple: true;
-    value?: string[];
-    onValueChange?: (value: string[]) => void;
-    defaultValue?: string[];
+    value?: Value[];
+    defaultValue?: Value[];
+    onValueChange?: (value: Value[]) => void;
 }
-export type ComboboxRootProps = SingleComboboxProps | MultipleComboboxProps;
-export declare const ComboboxRoot: ({ modal, multiple, children, value: providedValue, defaultValue, onValueChange, inputValue: providedInputValue, onInputValueChange, defaultInputValue, open: providedOpen, defaultOpen, onOpenChange, ...props }: ComboboxRootProps) => import("react/jsx-runtime").JSX.Element;
+export type ComboboxRootProps<Value = string> = SingleComboboxProps<Value> | MultipleComboboxProps<Value>;
+export declare const ComboboxRoot: <Value extends unknown>({ multiple, children, onValueChange, onInputValueChange, value: providedValue, defaultValue, items, ...props }: ComboboxRootProps<Value>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=combobox-root.d.ts.map

package/dist/components/combobox/combobox-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-root.d.ts","sourceRoot":"","sources":["../../../components/combobox/combobox-root.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAEL,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC7C,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC3C;AAMD,eAAO,MAAM,kBAAkB,QAAO,oBAQrC,CAAC;AACF,MAAM,WAAW,qBACf,SAAQ,IAAI,CACV,qBAAqB,EACnB,OAAO,GACP,UAAU,GACV,eAAe,GACf,kBAAkB,GAClB,sBAAsB,GACtB,cAAc,GACd,kBAAkB,GAClB,oBAAoB,CACvB;IACD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AACD,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AACD,MAAM,WAAW,qBAAsB,SAAQ,qBAAqB;IAClE,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AACD,MAAM,MAAM,iBAAiB,GAAG,mBAAmB,GAAG,qBAAqB,CAAC;AAE5E,eAAO,MAAM,YAAY,qNActB,iBAAiB,4CAuFnB,CAAC"}
+{"version":3,"file":"combobox-root.d.ts","sourceRoot":"","sources":["../../../components/combobox/combobox-root.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAEL,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,UAAU,oBAAoB,CAAC,KAAK,GAAG,MAAM;IAC3C,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CACzD;AAMD,eAAO,MAAM,kBAAkB,wBAE1B,qBAAqB,KAAK,CAQ9B,CAAC;AAEF,MAAM,WAAW,qBAAqB,CAAC,KAAK,CAC1C,SAAQ,IAAI,CACV,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,EAC5C,eAAe,GAAG,oBAAoB,GAAG,UAAU,CACpD;IACD,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,mBAAmB,CAAC,KAAK,GAAG,MAAM,CACjD,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,qBAAqB,CAAC,KAAK,GAAG,MAAM,CACnD,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IACpC,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,MAAM,iBAAiB,CAAC,KAAK,GAAG,MAAM,IACxC,mBAAmB,CAAC,KAAK,CAAC,GAC1B,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,eAAO,MAAM,YAAY,0IAStB,kBAAkB,KAAK,CAAC,4CAqE1B,CAAC"}

package/dist/components/combobox/combobox-root.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { ComboboxProvider } from '@ariakit/react';
-import { Popover } from 'radix-ui';
-import { createContext, useContext, useState, useRef, useCallback } from 'react';
+import { Combobox } from '@base-ui/react';
+import { createContext, useContext, useState, useRef, useCallback, useMemo } from 'react';
 
 const ComboboxContext = createContext(undefined);
 const useComboboxContext = () => {
@@ -12,51 +11,33 @@ const useComboboxContext = () => {
     }
     return context;
 };
-const ComboboxRoot = ({ modal = false, multiple = false, children, value: providedValue, defaultValue = multiple ? [] : undefined, onValueChange, inputValue: providedInputValue, onInputValueChange, defaultInputValue, open: providedOpen, defaultOpen = false, onOpenChange, ...props }) => {
-    const [internalValue, setInternalValue] = useState(defaultValue);
-    const [internalInputValue, setInternalInputValue] = useState(defaultInputValue);
-    const [internalOpen, setInternalOpen] = useState(defaultOpen);
-    const inputRef = useRef(null);
-    const listRef = useRef(null);
-    const value = providedValue ?? internalValue;
-    const inputValue = providedInputValue ?? internalInputValue;
-    const open = providedOpen ?? internalOpen;
-    const setValue = useCallback((newValue) => {
+const ComboboxRoot = ({ multiple = false, children, onValueChange, onInputValueChange, value: providedValue, defaultValue, items, ...props }) => {
+    const [inputValue, setInputValue] = useState('');
+    const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+    const inputContainerRef = useRef(null);
+    const computedValue = providedValue ?? internalValue;
+    const handleInputValueChange = useCallback((value, eventDetails) => {
+        setInputValue(value);
+        onInputValueChange?.(value);
+    }, [onInputValueChange]);
+    const handleValueChange = useCallback((value, eventDetails) => {
+        setInternalValue(value);
         if (multiple) {
-            const formattedValue = newValue
-                ? Array.isArray(newValue)
-                    ? newValue
-                    : [newValue]
-                : [];
-            setInternalValue(formattedValue);
-            onValueChange?.(formattedValue);
+            onValueChange?.(value);
         }
         else {
-            setInternalValue(String(newValue));
-            onValueChange?.(String(newValue));
+            onValueChange?.(value);
         }
     }, [onValueChange, multiple]);
-    const setInputValue = useCallback((newValue) => {
-        if (!multiple && newValue.length === 0)
-            setValue('');
-        setInternalInputValue(newValue);
-        onInputValueChange?.(newValue);
-    }, [onInputValueChange, setValue, multiple]);
-    const setOpen = useCallback((newOpen) => {
-        setInternalOpen(newOpen);
-        onOpenChange?.(newOpen);
-    }, [onOpenChange]);
-    return (jsx(ComboboxContext.Provider, { value: {
-            setValue,
-            value,
-            inputValue,
-            setInputValue,
-            open,
-            setOpen,
-            inputRef,
-            multiple,
-            listRef
-        }, children: jsx(Popover.Root, { open: open, onOpenChange: setOpen, modal: modal, children: jsx(ComboboxProvider, { open: open, setOpen: setOpen, value: inputValue, setValue: setInputValue, selectedValue: value, setSelectedValue: setValue, focusLoop: false, includesBaseElement: false, resetValueOnHide: multiple, resetValueOnSelect: multiple, ...props, children: children }) }) }));
+    const contextValue = useMemo(() => ({
+        multiple,
+        inputValue,
+        hasItems: !!items,
+        inputContainerRef,
+        value: computedValue,
+        onValueChange: handleValueChange
+    }), [multiple, inputValue, items, computedValue, handleValueChange]);
+    return (jsx(ComboboxContext.Provider, { value: contextValue, children: jsx(Combobox.Root, { multiple: multiple, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, items: items, value: providedValue, defaultValue: defaultValue, modal: true, ...props, children: children }) }));
 };
 
 export { ComboboxRoot, useComboboxContext };

package/dist/components/combobox/combobox-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-root.js","sources":["../../../components/combobox/combobox-root.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxProvider, ComboboxProviderProps } from '@ariakit/react';\nimport { Popover as PopoverPrimitive } from 'radix-ui';\nimport {\n  createContext,\n  RefObject,\n  useCallback,\n  useContext,\n  useRef,\n  useState\n} from 'react';\n\ninterface ComboboxContextValue {\n  setValue: (value: string | string[]) => void;\n  value?: string | string[];\n  inputValue?: string;\n  setInputValue: (inputValue: string) => void;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  multiple: boolean;\n  listRef: RefObject<HTMLDivElement | null>;\n}\n\nconst ComboboxContext = createContext<ComboboxContextValue | undefined>(\n  undefined\n);\n\nexport const useComboboxContext = (): ComboboxContextValue => {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(\n      'useComboboxContext must be used within a ComboboxProvider'\n    );\n  }\n  return context;\n};\nexport interface BaseComboboxRootProps\n  extends Omit<\n    ComboboxProviderProps,\n    | 'value'\n    | 'setValue'\n    | 'selectedValue'\n    | 'setSelectedValue'\n    | 'defaultSelectedValue'\n    | 'defaultValue'\n    | 'resetValueOnHide'\n    | 'resetValueOnSelect'\n  > {\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n  inputValue?: string;\n  onInputValueChange?: (inputValue: string) => void;\n  defaultInputValue?: string;\n}\nexport interface SingleComboboxProps extends BaseComboboxRootProps {\n  multiple?: false;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  defaultValue?: string;\n}\nexport interface MultipleComboboxProps extends BaseComboboxRootProps {\n  multiple: true;\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  defaultValue?: string[];\n}\nexport type ComboboxRootProps = SingleComboboxProps | MultipleComboboxProps;\n\nexport const ComboboxRoot = ({\n  modal = false,\n  multiple = false,\n  children,\n  value: providedValue,\n  defaultValue = multiple ? [] : undefined,\n  onValueChange,\n  inputValue: providedInputValue,\n  onInputValueChange,\n  defaultInputValue,\n  open: providedOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}: ComboboxRootProps) => {\n  const [internalValue, setInternalValue] = useState<\n    string | string[] | undefined\n  >(defaultValue);\n  const [internalInputValue, setInternalInputValue] =\n    useState(defaultInputValue);\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const value = providedValue ?? internalValue;\n  const inputValue = providedInputValue ?? internalInputValue;\n  const open = providedOpen ?? internalOpen;\n\n  const setValue = useCallback(\n    (newValue: string | string[] | undefined) => {\n      if (multiple) {\n        const formattedValue = newValue\n          ? Array.isArray(newValue)\n            ? newValue\n            : [newValue]\n          : [];\n        setInternalValue(formattedValue);\n        (onValueChange as MultipleComboboxProps['onValueChange'])?.(\n          formattedValue\n        );\n      } else {\n        setInternalValue(String(newValue));\n        (onValueChange as SingleComboboxProps['onValueChange'])?.(\n          String(newValue)\n        );\n      }\n    },\n    [onValueChange, multiple]\n  );\n\n  const setInputValue = useCallback(\n    (newValue: string) => {\n      if (!multiple && newValue.length === 0) setValue('');\n      setInternalInputValue(newValue);\n      onInputValueChange?.(newValue);\n    },\n    [onInputValueChange, setValue, multiple]\n  );\n\n  const setOpen = useCallback(\n    (newOpen: boolean) => {\n      setInternalOpen(newOpen);\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange]\n  );\n\n  return (\n    <ComboboxContext.Provider\n      value={{\n        setValue,\n        value,\n        inputValue,\n        setInputValue,\n        open,\n        setOpen,\n        inputRef,\n        multiple,\n        listRef\n      }}\n    >\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen} modal={modal}>\n        <ComboboxProvider\n          open={open}\n          setOpen={setOpen}\n          value={inputValue}\n          setValue={setInputValue}\n          selectedValue={value}\n          setSelectedValue={setValue}\n          focusLoop={false}\n          includesBaseElement={false}\n          resetValueOnHide={multiple}\n          resetValueOnSelect={multiple}\n          {...props}\n        >\n          {children}\n        </ComboboxProvider>\n      </PopoverPrimitive.Root>\n    </ComboboxContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAyBA;AAIO;AACL;;AAEE;;AAIF;AACF;AAiCa;;;;AAsBX;AACA;AAEA;AACA;AACA;AAEA;;;AAIQ;AACE;;;;AAIH;;;AAID;AACC;;AAIL;AAIF;AAEI;;;AAEA;;AAKJ;;AAGI;AACF;AAIF;;;;;;;;;;AAYK;AAqBP;;"}
+{"version":3,"file":"combobox-root.js","sources":["../../../components/combobox/combobox-root.tsx"],"sourcesContent":["'use client';\n\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react';\nimport {\n  createContext,\n  RefObject,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\ninterface ComboboxContextValue<Value = string> {\n  multiple: boolean;\n  inputValue: string;\n  hasItems: boolean;\n  inputContainerRef: RefObject<HTMLDivElement | null>;\n  value: Value | Value[] | null | undefined;\n  onValueChange?: (value: Value | Value[] | null) => void;\n}\n\nconst ComboboxContext = createContext<\n  ComboboxContextValue<unknown> | undefined\n>(undefined);\n\nexport const useComboboxContext = <\n  Value = string\n>(): ComboboxContextValue<Value> => {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(\n      'useComboboxContext must be used within a ComboboxProvider'\n    );\n  }\n  return context as ComboboxContextValue<Value>;\n};\n\nexport interface BaseComboboxRootProps<Value>\n  extends Omit<\n    ComboboxPrimitive.Root.Props<Value, boolean>,\n    'onValueChange' | 'onInputValueChange' | 'multiple'\n  > {\n  onInputValueChange?: (inputValue: string) => void;\n}\n\nexport interface SingleComboboxProps<Value = string>\n  extends BaseComboboxRootProps<Value> {\n  multiple?: false;\n  value?: Value | null;\n  defaultValue?: Value | null;\n  onValueChange?: (value: Value | null) => void;\n}\n\nexport interface MultipleComboboxProps<Value = string>\n  extends BaseComboboxRootProps<Value> {\n  multiple: true;\n  value?: Value[];\n  defaultValue?: Value[];\n  onValueChange?: (value: Value[]) => void;\n}\n\nexport type ComboboxRootProps<Value = string> =\n  | SingleComboboxProps<Value>\n  | MultipleComboboxProps<Value>;\n\nexport const ComboboxRoot = <Value extends unknown | unknown[]>({\n  multiple = false,\n  children,\n  onValueChange,\n  onInputValueChange,\n  value: providedValue,\n  defaultValue,\n  items,\n  ...props\n}: ComboboxRootProps<Value>) => {\n  const [inputValue, setInputValue] = useState('');\n  const [internalValue, setInternalValue] = useState<\n    Value | Value[] | null | undefined\n  >(defaultValue ?? null);\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n\n  const computedValue = providedValue ?? internalValue;\n\n  const handleInputValueChange = useCallback(\n    (\n      value: string,\n      eventDetails: ComboboxPrimitive.Root.ChangeEventDetails\n    ) => {\n      setInputValue(value);\n      onInputValueChange?.(value);\n    },\n    [onInputValueChange]\n  );\n\n  const handleValueChange = useCallback(\n    (\n      value: Value | Value[] | null,\n      eventDetails: ComboboxPrimitive.Root.ChangeEventDetails\n    ) => {\n      setInternalValue(value);\n      if (multiple) {\n        (onValueChange as MultipleComboboxProps<Value>['onValueChange'])?.(\n          value as Value[]\n        );\n      } else {\n        (onValueChange as SingleComboboxProps<Value>['onValueChange'])?.(\n          value as Value | null\n        );\n      }\n    },\n    [onValueChange, multiple]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      multiple,\n      inputValue,\n      hasItems: !!items,\n      inputContainerRef,\n      value: computedValue,\n      onValueChange: handleValueChange\n    }),\n    [multiple, inputValue, items, computedValue, handleValueChange]\n  );\n\n  return (\n    <ComboboxContext.Provider\n      value={contextValue as ComboboxContextValue<unknown>}\n    >\n      <ComboboxPrimitive.Root\n        multiple={multiple}\n        onValueChange={handleValueChange}\n        onInputValueChange={handleInputValueChange}\n        items={items}\n        value={providedValue}\n        defaultValue={defaultValue}\n        modal\n        {...props}\n      >\n        {children}\n      </ComboboxPrimitive.Root>\n    </ComboboxContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;AAsBA;AAIO;AAGL;;AAEE;;AAIF;AACF;AA8BO;;AAWL;AAGA;AAEA;;;AAQI;AACF;;;;AAWK;;;AAIA;;AAIL;AAIF;;;;;AAMI;AACA;AACD;;AAsBL;;"}

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

@@ -1,15 +1,9 @@
-export declare const Combobox: (({ modal, multiple, children, value: providedValue, defaultValue, onValueChange, inputValue: providedInputValue, onInputValueChange, defaultInputValue, open: providedOpen, defaultOpen, onOpenChange, ...props }: import("./combobox-root").ComboboxRootProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const Combobox: (<Value extends unknown>({ multiple, children, onValueChange, onInputValueChange, value: providedValue, defaultValue, items, ...props }: import("./combobox-root").ComboboxRootProps<Value>) => import("react/jsx-runtime").JSX.Element) & {
     Input: import("react").ForwardRefExoticComponent<import("./combobox-input").ComboboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
-    Content: import("react").ForwardRefExoticComponent<import("./combobox-content").ComboboxContentProps & import("react").RefAttributes<HTMLDivElement>>;
-    Item: import("react").ForwardRefExoticComponent<import("./combobox-item").ComboboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
-    Group: import("react").ForwardRefExoticComponent<Omit<import("@ariakit/react").ComboboxGroupOptions<"div"> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@ariakit/react").ComboboxGroupOptions<T>> & {
-        [index: `data-${string}`]: unknown;
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Label: import("react").ForwardRefExoticComponent<Omit<import("@ariakit/react").ComboboxGroupLabelOptions<"div"> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@ariakit/react").ComboboxGroupLabelOptions<T_1>> & {
-        [index: `data-${string}`]: unknown;
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Separator: import("react").ForwardRefExoticComponent<Omit<import("@ariakit/react").ComboboxSeparatorOptions<"hr"> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, keyof import("@ariakit/react").ComboboxSeparatorOptions<T_2>> & {
-        [index: `data-${string}`]: unknown;
-    }, "ref"> & import("react").RefAttributes<HTMLHRElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<import("./combobox-content").ComboboxContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("./combobox-item").ComboboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //# sourceMappingURL=combobox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../components/combobox/combobox.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CAOnB,CAAC"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../components/combobox/combobox.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,QAAQ;;;;;;;CAOnB,CAAC"}

package/dist/components/combobox/combobox.module.css.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"content":"combobox-module_content__5b8Oc","list":"combobox-module_list__0Kbu0","itemIcon":"combobox-module_itemIcon__bbgmL","menuitem":"combobox-module_menuitem__6PPmr","label":"combobox-module_label__oU1VF","separator":"combobox-module_separator__nn47j"};
+var styles = {"positioner":"combobox-module_positioner__4Dnxn","content":"combobox-module_content__5b8Oc","list":"combobox-module_list__0Kbu0","itemIcon":"combobox-module_itemIcon__bbgmL","menuitem":"combobox-module_menuitem__6PPmr","label":"combobox-module_label__oU1VF","separator":"combobox-module_separator__nn47j"};
 
 exports.default = styles;
 //# sourceMappingURL=combobox.module.css.cjs.map

package/dist/components/combobox/combobox.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"content":"combobox-module_content__5b8Oc","list":"combobox-module_list__0Kbu0","itemIcon":"combobox-module_itemIcon__bbgmL","menuitem":"combobox-module_menuitem__6PPmr","label":"combobox-module_label__oU1VF","separator":"combobox-module_separator__nn47j"};
+var styles = {"positioner":"combobox-module_positioner__4Dnxn","content":"combobox-module_content__5b8Oc","list":"combobox-module_list__0Kbu0","itemIcon":"combobox-module_itemIcon__bbgmL","menuitem":"combobox-module_menuitem__6PPmr","label":"combobox-module_label__oU1VF","separator":"combobox-module_separator__nn47j"};
 
 export { styles as default };
 //# sourceMappingURL=combobox.module.css.js.map