@raystack/apsara 0.56.5 → 1.0.0-rc.0

package/dist/components/color-picker/color-picker-alpha.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-alpha.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAEvE,eAAO,MAAM,gBAAgB,4BAG1B,qBAAqB,4CAkBvB,CAAC"}
+{"version":3,"file":"color-picker-alpha.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAK/C,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AAEtD,eAAO,MAAM,gBAAgB,4BAG1B,qBAAqB,4CAqBvB,CAAC"}

package/dist/components/color-picker/color-picker-alpha.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slider } from '@base-ui/react/slider';
 import { cx } from 'class-variance-authority';
-import { Slider } from 'radix-ui';
-import { useColorPicker } from './color-picker-root.js';
 import styles from './color-picker.module.css.js';
+import { useColorPicker } from './color-picker-root.js';
 
 const ColorPickerAlpha = ({ className, ...props }) => {
     const { alpha = 1, setColor } = useColorPicker();
-    return (jsxs(Slider.Root, { className: cx(styles.sliderRoot, className), max: 100, onValueChange: ([alpha]) => setColor({ alpha: alpha / 100 }), step: 1, value: [alpha * 100], ...props, children: [jsxs(Slider.Track, { className: cx(styles.sliderTrack, styles.alphaTrack), children: [jsx("div", { className: styles.alphaTrackGradient }), jsx(Slider.Range, { className: styles.sliderRange })] }), jsx(Slider.Thumb, { className: styles.sliderThumb })] }));
+    return (jsx(Slider.Root, { className: cx(styles.sliderRoot, className), max: 100, onValueChange: value => setColor({ alpha: value / 100 }), step: 1, value: alpha * 100, thumbAlignment: 'edge', ...props, children: jsx(Slider.Control, { className: styles.sliderControl, children: jsxs(Slider.Track, { className: cx(styles.sliderTrack, styles.alphaTrack), children: [jsx("div", { className: styles.alphaTrackGradient }), jsx(Slider.Indicator, { className: styles.sliderRange }), jsx(Slider.Thumb, { className: styles.sliderThumb, "aria-label": 'Alpha' })] }) }) }));
 };
 
 export { ColorPickerAlpha };

package/dist/components/color-picker/color-picker-alpha.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-alpha.js","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerAlphaProps = ComponentProps<typeof Slider.Root>;\n\nexport const ColorPickerAlpha = ({\n  className,\n  ...props\n}: ColorPickerAlphaProps) => {\n  const { alpha = 1, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={100}\n      onValueChange={([alpha]) => setColor({ alpha: alpha / 100 })}\n      step={1}\n      value={[alpha * 100]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>\n        <div className={styles.alphaTrackGradient} />\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAUO;;;AAqBP;;"}
+{"version":3,"file":"color-picker-alpha.js","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["'use client';\n\nimport { Slider } from '@base-ui/react/slider';\nimport { cx } from 'class-variance-authority';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\n\nexport type ColorPickerAlphaProps = Slider.Root.Props;\n\nexport const ColorPickerAlpha = ({\n  className,\n  ...props\n}: ColorPickerAlphaProps) => {\n  const { alpha = 1, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={100}\n      onValueChange={value => setColor({ alpha: (value as number) / 100 })}\n      step={1}\n      value={alpha * 100}\n      thumbAlignment='edge'\n      {...props}\n    >\n      <Slider.Control className={styles.sliderControl}>\n        <Slider.Track className={cx(styles.sliderTrack, styles.alphaTrack)}>\n          <div className={styles.alphaTrackGradient} />\n          <Slider.Indicator className={styles.sliderRange} />\n          <Slider.Thumb className={styles.sliderThumb} aria-label='Alpha' />\n        </Slider.Track>\n      </Slider.Control>\n    </Slider.Root>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AASO;;;AAwBP;;"}

package/dist/components/color-picker/color-picker-hue.cjs

@@ -2,14 +2,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var slider = require('@base-ui/react/slider');
 var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
-var colorPickerRoot = require('./color-picker-root.cjs');
 var colorPicker_module = require('./color-picker.module.css.cjs');
+var colorPickerRoot = require('./color-picker-root.cjs');
 
 const ColorPickerHue = ({ className, ...props }) => {
     const { hue, setColor } = colorPickerRoot.useColorPicker();
-    return (jsxRuntime.jsxs(radixUi.Slider.Root, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderRoot, className), max: 360, onValueChange: ([hue]) => setColor({ h: hue }), step: 1, value: [hue], ...props, children: [jsxRuntime.jsx(radixUi.Slider.Track, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderTrack, colorPicker_module.default.hueTrack), children: jsxRuntime.jsx(radixUi.Slider.Range, { className: colorPicker_module.default.sliderRange }) }), jsxRuntime.jsx(radixUi.Slider.Thumb, { className: colorPicker_module.default.sliderThumb })] }));
+    return (jsxRuntime.jsx(slider.Slider.Root, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderRoot, className), max: 360, onValueChange: value => setColor({ h: value }), step: 1, value: hue, thumbAlignment: 'edge', ...props, children: jsxRuntime.jsx(slider.Slider.Control, { className: colorPicker_module.default.sliderControl, children: jsxRuntime.jsxs(slider.Slider.Track, { className: classVarianceAuthority.cx(colorPicker_module.default.sliderTrack, colorPicker_module.default.hueTrack), children: [jsxRuntime.jsx(slider.Slider.Indicator, { className: colorPicker_module.default.sliderRange }), jsxRuntime.jsx(slider.Slider.Thumb, { className: colorPicker_module.default.sliderThumb, "aria-label": 'Hue' })] }) }) }));
 };
 
 exports.ColorPickerHue = ColorPickerHue;

package/dist/components/color-picker/color-picker-hue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-hue.cjs","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;\nexport const ColorPickerHue = ({\n  className,\n  ...props\n}: ColorPickerHueProps) => {\n  const { hue, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={360}\n      onValueChange={([hue]) => setColor({ h: hue })}\n      step={1}\n      value={[hue]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AASO;;;AAoBP;;"}
+{"version":3,"file":"color-picker-hue.cjs","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["'use client';\n\nimport { Slider } from '@base-ui/react/slider';\nimport { cx } from 'class-variance-authority';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\n\nexport type ColorPickerHueProps = Slider.Root.Props;\nexport const ColorPickerHue = ({\n  className,\n  ...props\n}: ColorPickerHueProps) => {\n  const { hue, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={360}\n      onValueChange={value => setColor({ h: value as number })}\n      step={1}\n      value={hue}\n      thumbAlignment='edge'\n      {...props}\n    >\n      <Slider.Control className={styles.sliderControl}>\n        <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n          <Slider.Indicator className={styles.sliderRange} />\n          <Slider.Thumb className={styles.sliderThumb} aria-label='Hue' />\n        </Slider.Track>\n      </Slider.Control>\n    </Slider.Root>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAQO;;;AAuBP;;"}

package/dist/components/color-picker/color-picker-hue.d.ts

@@ -1,5 +1,4 @@
-import { Slider } from 'radix-ui';
-import { type ComponentProps } from 'react';
-export type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;
+import { Slider } from '@base-ui/react/slider';
+export type ColorPickerHueProps = Slider.Root.Props;
 export declare const ColorPickerHue: ({ className, ...props }: ColorPickerHueProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=color-picker-hue.d.ts.map

package/dist/components/color-picker/color-picker-hue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-hue.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-hue.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AACrE,eAAO,MAAM,cAAc,4BAGxB,mBAAmB,4CAiBrB,CAAC"}
+{"version":3,"file":"color-picker-hue.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker-hue.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAK/C,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AACpD,eAAO,MAAM,cAAc,4BAGxB,mBAAmB,4CAoBrB,CAAC"}

package/dist/components/color-picker/color-picker-hue.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slider } from '@base-ui/react/slider';
 import { cx } from 'class-variance-authority';
-import { Slider } from 'radix-ui';
-import { useColorPicker } from './color-picker-root.js';
 import styles from './color-picker.module.css.js';
+import { useColorPicker } from './color-picker-root.js';
 
 const ColorPickerHue = ({ className, ...props }) => {
     const { hue, setColor } = useColorPicker();
-    return (jsxs(Slider.Root, { className: cx(styles.sliderRoot, className), max: 360, onValueChange: ([hue]) => setColor({ h: hue }), step: 1, value: [hue], ...props, children: [jsx(Slider.Track, { className: cx(styles.sliderTrack, styles.hueTrack), children: jsx(Slider.Range, { className: styles.sliderRange }) }), jsx(Slider.Thumb, { className: styles.sliderThumb })] }));
+    return (jsx(Slider.Root, { className: cx(styles.sliderRoot, className), max: 360, onValueChange: value => setColor({ h: value }), step: 1, value: hue, thumbAlignment: 'edge', ...props, children: jsx(Slider.Control, { className: styles.sliderControl, children: jsxs(Slider.Track, { className: cx(styles.sliderTrack, styles.hueTrack), children: [jsx(Slider.Indicator, { className: styles.sliderRange }), jsx(Slider.Thumb, { className: styles.sliderThumb, "aria-label": 'Hue' })] }) }) }));
 };
 
 export { ColorPickerHue };

package/dist/components/color-picker/color-picker-hue.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-hue.js","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Slider } from 'radix-ui';\nimport { type ComponentProps } from 'react';\nimport { useColorPicker } from './color-picker-root';\nimport styles from './color-picker.module.css';\n\nexport type ColorPickerHueProps = ComponentProps<typeof Slider.Root>;\nexport const ColorPickerHue = ({\n  className,\n  ...props\n}: ColorPickerHueProps) => {\n  const { hue, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={360}\n      onValueChange={([hue]) => setColor({ h: hue })}\n      step={1}\n      value={[hue]}\n      {...props}\n    >\n      <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n        <Slider.Range className={styles.sliderRange} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.sliderThumb} />\n    </Slider.Root>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AASO;;;AAoBP;;"}
+{"version":3,"file":"color-picker-hue.js","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["'use client';\n\nimport { Slider } from '@base-ui/react/slider';\nimport { cx } from 'class-variance-authority';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\n\nexport type ColorPickerHueProps = Slider.Root.Props;\nexport const ColorPickerHue = ({\n  className,\n  ...props\n}: ColorPickerHueProps) => {\n  const { hue, setColor } = useColorPicker();\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={360}\n      onValueChange={value => setColor({ h: value as number })}\n      step={1}\n      value={hue}\n      thumbAlignment='edge'\n      {...props}\n    >\n      <Slider.Control className={styles.sliderControl}>\n        <Slider.Track className={cx(styles.sliderTrack, styles.hueTrack)}>\n          <Slider.Indicator className={styles.sliderRange} />\n          <Slider.Thumb className={styles.sliderThumb} aria-label='Hue' />\n        </Slider.Track>\n      </Slider.Control>\n    </Slider.Root>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAQO;;;AAuBP;;"}

package/dist/components/color-picker/color-picker.d.ts

@@ -0,0 +1,8 @@
+export declare const ColorPicker: (({ value, defaultValue, onValueChange, defaultMode, mode: providedMode, onModeChange, ...props }: import("./color-picker-root").ColorPickerProps) => import("react/jsx-runtime").JSX.Element) & {
+    Area: ({ className, ...props }: import("./color-picker-area").ColorPickerAreaProps) => import("react/jsx-runtime").JSX.Element;
+    Hue: ({ className, ...props }: import("./color-picker-hue").ColorPickerHueProps) => import("react/jsx-runtime").JSX.Element;
+    Alpha: ({ className, ...props }: import("./color-picker-alpha").ColorPickerAlphaProps) => import("react/jsx-runtime").JSX.Element;
+    Input: (props: Omit<import("../input-field/input-field").InputFieldProps & import("react").RefAttributes<HTMLInputElement>, "ref">) => import("react/jsx-runtime").JSX.Element;
+    Mode: ({ className, options, ...props }: import("./color-picker-mode").ColorPickerModeProps) => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/components/color-picker/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW;;;;;;CAMtB,CAAC"}

package/dist/components/color-picker/color-picker.module.css.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"sliderRoot":"color-picker-module_sliderRoot__Nbq80","sliderRange":"color-picker-module_sliderRange__yCQ1V","sliderTrack":"color-picker-module_sliderTrack__aXp7n","hueTrack":"color-picker-module_hueTrack__wx1Wz","sliderThumb":"color-picker-module_sliderThumb__oN9nI","alphaTrack":"color-picker-module_alphaTrack__QySYG","alphaTrackGradient":"color-picker-module_alphaTrackGradient__QxdDS","selectTrigger":"color-picker-module_selectTrigger__hwv-W","selectionRoot":"color-picker-module_selectionRoot__ez-fs","selectionThumb":"color-picker-module_selectionThumb__gk6OK"};
+var styles = {"sliderRoot":"color-picker-module_sliderRoot__Nbq80","sliderControl":"color-picker-module_sliderControl__kQPiC","sliderRange":"color-picker-module_sliderRange__yCQ1V","sliderTrack":"color-picker-module_sliderTrack__aXp7n","hueTrack":"color-picker-module_hueTrack__wx1Wz","sliderThumb":"color-picker-module_sliderThumb__oN9nI","alphaTrack":"color-picker-module_alphaTrack__QySYG","alphaTrackGradient":"color-picker-module_alphaTrackGradient__QxdDS","selectTrigger":"color-picker-module_selectTrigger__hwv-W","selectionRoot":"color-picker-module_selectionRoot__ez-fs","selectionThumb":"color-picker-module_selectionThumb__gk6OK"};
 
 exports.default = styles;
 //# sourceMappingURL=color-picker.module.css.cjs.map

package/dist/components/color-picker/color-picker.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"sliderRoot":"color-picker-module_sliderRoot__Nbq80","sliderRange":"color-picker-module_sliderRange__yCQ1V","sliderTrack":"color-picker-module_sliderTrack__aXp7n","hueTrack":"color-picker-module_hueTrack__wx1Wz","sliderThumb":"color-picker-module_sliderThumb__oN9nI","alphaTrack":"color-picker-module_alphaTrack__QySYG","alphaTrackGradient":"color-picker-module_alphaTrackGradient__QxdDS","selectTrigger":"color-picker-module_selectTrigger__hwv-W","selectionRoot":"color-picker-module_selectionRoot__ez-fs","selectionThumb":"color-picker-module_selectionThumb__gk6OK"};
+var styles = {"sliderRoot":"color-picker-module_sliderRoot__Nbq80","sliderControl":"color-picker-module_sliderControl__kQPiC","sliderRange":"color-picker-module_sliderRange__yCQ1V","sliderTrack":"color-picker-module_sliderTrack__aXp7n","hueTrack":"color-picker-module_hueTrack__wx1Wz","sliderThumb":"color-picker-module_sliderThumb__oN9nI","alphaTrack":"color-picker-module_alphaTrack__QySYG","alphaTrackGradient":"color-picker-module_alphaTrackGradient__QxdDS","selectTrigger":"color-picker-module_selectTrigger__hwv-W","selectionRoot":"color-picker-module_selectionRoot__ez-fs","selectionThumb":"color-picker-module_selectionThumb__gk6OK"};
 
 export { styles as default };
 //# sourceMappingURL=color-picker.module.css.js.map

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

@@ -2,38 +2,17 @@
 '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 radixUi = require('radix-ui');
 var React = require('react');
 var combobox_module = require('./combobox.module.css.cjs');
 var comboboxRoot = require('./combobox-root.cjs');
 
-const ComboboxContent = React.forwardRef(({ className, children, sideOffset = 4, align = 'start', onOpenAutoFocus, onInteractOutside, onFocusOutside, ...props }, ref) => {
-    const { inputRef, listRef, value, setInputValue, multiple } = comboboxRoot.useComboboxContext();
-    const handleOnInteractOutside = React.useCallback(event => {
-        const target = event.target;
-        const isInput = target === inputRef.current;
-        const inListbox = target && listRef.current?.contains(target);
-        if (isInput || inListbox) {
-            event.preventDefault();
-            return;
-        }
-        if (!multiple) {
-            if (typeof value === 'string' && value.length)
-                setInputValue(value);
-            else
-                setInputValue('');
-        }
-        onInteractOutside?.(event);
-    }, [onInteractOutside, inputRef, listRef, multiple, value, setInputValue]);
-    const handleOnOpenAutoFocus = React.useCallback(event => {
-        event.preventDefault();
-        onOpenAutoFocus?.(event);
-    }, [onOpenAutoFocus]);
-    return (jsxRuntime.jsx(radixUi.Popover.Portal, { children: jsxRuntime.jsx(radixUi.Popover.Content, { ref: ref, sideOffset: sideOffset, align: align, className: classVarianceAuthority.cx(combobox_module.default.content, className), onOpenAutoFocus: handleOnOpenAutoFocus, onInteractOutside: handleOnInteractOutside, ...props, children: jsxRuntime.jsx(react.ComboboxList, { ref: listRef, role: 'listbox', className: combobox_module.default.list, children: children }) }) }));
+const ComboboxContent = React.forwardRef(({ className, children, style, render, initialFocus, finalFocus, sideOffset = 4, ...positionerProps }, ref) => {
+    const { inputContainerRef } = comboboxRoot.useComboboxContext();
+    return (jsxRuntime.jsx(react.Combobox.Portal, { children: jsxRuntime.jsx(react.Combobox.Positioner, { sideOffset: sideOffset, className: combobox_module.default.positioner, anchor: inputContainerRef, ...positionerProps, children: jsxRuntime.jsx(react.Combobox.Popup, { ref: ref, className: classVarianceAuthority.cx(combobox_module.default.content, className), style: style, render: render, initialFocus: initialFocus, finalFocus: finalFocus, children: jsxRuntime.jsx(react.Combobox.List, { className: combobox_module.default.list, children: children }) }) }) }));
 });
-ComboboxContent.displayName = 'ComboboxContent';
+ComboboxContent.displayName = 'Combobox.Content';
 
 exports.ComboboxContent = ComboboxContent;
 //# sourceMappingURL=combobox-content.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-content.cjs","sources":["../../../components/combobox/combobox-content.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxList } from '@ariakit/react';\nimport { cx } from 'class-variance-authority';\nimport { Popover as PopoverPrimitive } from 'radix-ui';\nimport {\n  ComponentPropsWithoutRef,\n  ElementRef,\n  forwardRef,\n  useCallback\n} from 'react';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport interface ComboboxContentProps\n  extends Omit<\n    ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,\n    'asChild'\n  > {}\n\nexport const ComboboxContent = forwardRef<\n  ElementRef<typeof PopoverPrimitive.Content>,\n  ComboboxContentProps\n>(\n  (\n    {\n      className,\n      children,\n      sideOffset = 4,\n      align = 'start',\n      onOpenAutoFocus,\n      onInteractOutside,\n      onFocusOutside,\n      ...props\n    },\n    ref\n  ) => {\n    const { inputRef, listRef, value, setInputValue, multiple } =\n      useComboboxContext();\n\n    const handleOnInteractOutside = useCallback<\n      NonNullable<\n        ComponentPropsWithoutRef<\n          typeof PopoverPrimitive.Content\n        >['onInteractOutside']\n      >\n    >(\n      event => {\n        const target = event.target as Element | null;\n        const isInput = target === inputRef.current;\n        const inListbox = target && listRef.current?.contains(target);\n        if (isInput || inListbox) {\n          event.preventDefault();\n          return;\n        }\n        if (!multiple) {\n          if (typeof value === 'string' && value.length) setInputValue(value);\n          else setInputValue('');\n        }\n        onInteractOutside?.(event);\n      },\n      [onInteractOutside, inputRef, listRef, multiple, value, setInputValue]\n    );\n\n    const handleOnOpenAutoFocus = useCallback<\n      NonNullable<\n        ComponentPropsWithoutRef<\n          typeof PopoverPrimitive.Content\n        >['onOpenAutoFocus']\n      >\n    >(\n      event => {\n        event.preventDefault();\n        onOpenAutoFocus?.(event);\n      },\n      [onOpenAutoFocus]\n    );\n    return (\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          align={align}\n          className={cx(styles.content, className)}\n          onOpenAutoFocus={handleOnOpenAutoFocus}\n          onInteractOutside={handleOnInteractOutside}\n          {...props}\n        >\n          <ComboboxList ref={listRef} role='listbox' className={styles.list}>\n            {children}\n          </ComboboxList>\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    );\n  }\n);\nComboboxContent.displayName = 'ComboboxContent';\n"],"names":[],"mappings":";;;;;;;;;;;AAoBO;AAiBH;AAGA;AAQI;AACA;AACA;AACA;;;;;AAKE;;;;;AAGF;AACF;AAIF;;AASI;AACF;AAGF;AAiBF;AAEF;;"}
+{"version":3,"file":"combobox-content.cjs","sources":["../../../components/combobox/combobox-content.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 interface ComboboxContentProps\n  extends Omit<\n      ComboboxPrimitive.Positioner.Props,\n      'render' | 'className' | 'style'\n    >,\n    ComboboxPrimitive.Popup.Props {}\n\nexport const ComboboxContent = forwardRef<\n  ElementRef<typeof ComboboxPrimitive.Popup>,\n  ComboboxContentProps\n>(\n  (\n    {\n      className,\n      children,\n      style,\n      render,\n      initialFocus,\n      finalFocus,\n      sideOffset = 4,\n      ...positionerProps\n    },\n    ref\n  ) => {\n    const { inputContainerRef } = useComboboxContext();\n    return (\n      <ComboboxPrimitive.Portal>\n        <ComboboxPrimitive.Positioner\n          sideOffset={sideOffset}\n          className={styles.positioner}\n          anchor={inputContainerRef}\n          {...positionerProps}\n        >\n          <ComboboxPrimitive.Popup\n            ref={ref}\n            className={cx(styles.content, className)}\n            style={style}\n            render={render}\n            initialFocus={initialFocus}\n            finalFocus={finalFocus}\n          >\n            <ComboboxPrimitive.List className={styles.list}>\n              {children}\n            </ComboboxPrimitive.List>\n          </ComboboxPrimitive.Popup>\n        </ComboboxPrimitive.Positioner>\n      </ComboboxPrimitive.Portal>\n    );\n  }\n);\nComboboxContent.displayName = 'Combobox.Content';\n"],"names":[],"mappings":";;;;;;;;;;AAeO;AAiBH;AACA;AAuBF;AAEF;;"}

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

@@ -1,6 +1,5 @@
-import { Popover as PopoverPrimitive } from 'radix-ui';
-import { ComponentPropsWithoutRef } from 'react';
-export interface ComboboxContentProps extends Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, 'asChild'> {
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+export interface ComboboxContentProps extends Omit<ComboboxPrimitive.Positioner.Props, 'render' | 'className' | 'style'>, ComboboxPrimitive.Popup.Props {
 }
-export declare const ComboboxContent: import("react").ForwardRefExoticComponent<ComboboxContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxContent: import("react").ForwardRefExoticComponent<Omit<ComboboxContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=combobox-content.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-content.d.ts","sourceRoot":"","sources":["../../../components/combobox/combobox-content.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EACL,wBAAwB,EAIzB,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,EACzD,SAAS,CACV;CAAG;AAEN,eAAO,MAAM,eAAe,iHA2E3B,CAAC"}
+{"version":3,"file":"combobox-content.d.ts","sourceRoot":"","sources":["../../../components/combobox/combobox-content.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAM/D,MAAM,WAAW,oBACf,SAAQ,IAAI,CACR,iBAAiB,CAAC,UAAU,CAAC,KAAK,EAClC,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC,EACD,iBAAiB,CAAC,KAAK,CAAC,KAAK;CAAG;AAEpC,eAAO,MAAM,eAAe,8HA0C3B,CAAC"}

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

@@ -1,37 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { ComboboxList } from '@ariakit/react';
+import { Combobox } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { Popover } from 'radix-ui';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef } from 'react';
 import styles from './combobox.module.css.js';
 import { useComboboxContext } from './combobox-root.js';
 
-const ComboboxContent = forwardRef(({ className, children, sideOffset = 4, align = 'start', onOpenAutoFocus, onInteractOutside, onFocusOutside, ...props }, ref) => {
-    const { inputRef, listRef, value, setInputValue, multiple } = useComboboxContext();
-    const handleOnInteractOutside = useCallback(event => {
-        const target = event.target;
-        const isInput = target === inputRef.current;
-        const inListbox = target && listRef.current?.contains(target);
-        if (isInput || inListbox) {
-            event.preventDefault();
-            return;
-        }
-        if (!multiple) {
-            if (typeof value === 'string' && value.length)
-                setInputValue(value);
-            else
-                setInputValue('');
-        }
-        onInteractOutside?.(event);
-    }, [onInteractOutside, inputRef, listRef, multiple, value, setInputValue]);
-    const handleOnOpenAutoFocus = useCallback(event => {
-        event.preventDefault();
-        onOpenAutoFocus?.(event);
-    }, [onOpenAutoFocus]);
-    return (jsx(Popover.Portal, { children: jsx(Popover.Content, { ref: ref, sideOffset: sideOffset, align: align, className: cx(styles.content, className), onOpenAutoFocus: handleOnOpenAutoFocus, onInteractOutside: handleOnInteractOutside, ...props, children: jsx(ComboboxList, { ref: listRef, role: 'listbox', className: styles.list, children: children }) }) }));
+const ComboboxContent = forwardRef(({ className, children, style, render, initialFocus, finalFocus, sideOffset = 4, ...positionerProps }, ref) => {
+    const { inputContainerRef } = useComboboxContext();
+    return (jsx(Combobox.Portal, { children: jsx(Combobox.Positioner, { sideOffset: sideOffset, className: styles.positioner, anchor: inputContainerRef, ...positionerProps, children: jsx(Combobox.Popup, { ref: ref, className: cx(styles.content, className), style: style, render: render, initialFocus: initialFocus, finalFocus: finalFocus, children: jsx(Combobox.List, { className: styles.list, children: children }) }) }) }));
 });
-ComboboxContent.displayName = 'ComboboxContent';
+ComboboxContent.displayName = 'Combobox.Content';
 
 export { ComboboxContent };
 //# sourceMappingURL=combobox-content.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-content.js","sources":["../../../components/combobox/combobox-content.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxList } from '@ariakit/react';\nimport { cx } from 'class-variance-authority';\nimport { Popover as PopoverPrimitive } from 'radix-ui';\nimport {\n  ComponentPropsWithoutRef,\n  ElementRef,\n  forwardRef,\n  useCallback\n} from 'react';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport interface ComboboxContentProps\n  extends Omit<\n    ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,\n    'asChild'\n  > {}\n\nexport const ComboboxContent = forwardRef<\n  ElementRef<typeof PopoverPrimitive.Content>,\n  ComboboxContentProps\n>(\n  (\n    {\n      className,\n      children,\n      sideOffset = 4,\n      align = 'start',\n      onOpenAutoFocus,\n      onInteractOutside,\n      onFocusOutside,\n      ...props\n    },\n    ref\n  ) => {\n    const { inputRef, listRef, value, setInputValue, multiple } =\n      useComboboxContext();\n\n    const handleOnInteractOutside = useCallback<\n      NonNullable<\n        ComponentPropsWithoutRef<\n          typeof PopoverPrimitive.Content\n        >['onInteractOutside']\n      >\n    >(\n      event => {\n        const target = event.target as Element | null;\n        const isInput = target === inputRef.current;\n        const inListbox = target && listRef.current?.contains(target);\n        if (isInput || inListbox) {\n          event.preventDefault();\n          return;\n        }\n        if (!multiple) {\n          if (typeof value === 'string' && value.length) setInputValue(value);\n          else setInputValue('');\n        }\n        onInteractOutside?.(event);\n      },\n      [onInteractOutside, inputRef, listRef, multiple, value, setInputValue]\n    );\n\n    const handleOnOpenAutoFocus = useCallback<\n      NonNullable<\n        ComponentPropsWithoutRef<\n          typeof PopoverPrimitive.Content\n        >['onOpenAutoFocus']\n      >\n    >(\n      event => {\n        event.preventDefault();\n        onOpenAutoFocus?.(event);\n      },\n      [onOpenAutoFocus]\n    );\n    return (\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          align={align}\n          className={cx(styles.content, className)}\n          onOpenAutoFocus={handleOnOpenAutoFocus}\n          onInteractOutside={handleOnInteractOutside}\n          {...props}\n        >\n          <ComboboxList ref={listRef} role='listbox' className={styles.list}>\n            {children}\n          </ComboboxList>\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    );\n  }\n);\nComboboxContent.displayName = 'ComboboxContent';\n"],"names":[],"mappings":";;;;;;;;;AAoBO;AAiBH;AAGA;AAQI;AACA;AACA;AACA;;;;;AAKE;;;;;AAGF;AACF;AAIF;;AASI;AACF;AAGF;AAiBF;AAEF;;"}
+{"version":3,"file":"combobox-content.js","sources":["../../../components/combobox/combobox-content.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 interface ComboboxContentProps\n  extends Omit<\n      ComboboxPrimitive.Positioner.Props,\n      'render' | 'className' | 'style'\n    >,\n    ComboboxPrimitive.Popup.Props {}\n\nexport const ComboboxContent = forwardRef<\n  ElementRef<typeof ComboboxPrimitive.Popup>,\n  ComboboxContentProps\n>(\n  (\n    {\n      className,\n      children,\n      style,\n      render,\n      initialFocus,\n      finalFocus,\n      sideOffset = 4,\n      ...positionerProps\n    },\n    ref\n  ) => {\n    const { inputContainerRef } = useComboboxContext();\n    return (\n      <ComboboxPrimitive.Portal>\n        <ComboboxPrimitive.Positioner\n          sideOffset={sideOffset}\n          className={styles.positioner}\n          anchor={inputContainerRef}\n          {...positionerProps}\n        >\n          <ComboboxPrimitive.Popup\n            ref={ref}\n            className={cx(styles.content, className)}\n            style={style}\n            render={render}\n            initialFocus={initialFocus}\n            finalFocus={finalFocus}\n          >\n            <ComboboxPrimitive.List className={styles.list}>\n              {children}\n            </ComboboxPrimitive.List>\n          </ComboboxPrimitive.Popup>\n        </ComboboxPrimitive.Positioner>\n      </ComboboxPrimitive.Portal>\n    );\n  }\n);\nComboboxContent.displayName = 'Combobox.Content';\n"],"names":[],"mappings":";;;;;;;;AAeO;AAiBH;AACA;AAuBF;AAEF;;"}

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

@@ -2,46 +2,23 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('@ariakit/react');
+var react = require('@base-ui/react');
 var reactIcons = require('@radix-ui/react-icons');
-var radixUi = require('radix-ui');
 var React = require('react');
 var inputField = require('../input-field/input-field.cjs');
 var combobox_module = require('./combobox.module.css.cjs');
 var comboboxRoot = require('./combobox-root.cjs');
 
-const ComboboxInput = React.forwardRef(({ onBlur, ...props }, ref) => {
-    const { inputRef, listRef, value, multiple, inputValue, setInputValue, setValue } = comboboxRoot.useComboboxContext();
-    const handleOnKeyDown = React.useCallback((event) => {
-        if (event.key === 'Backspace') {
-            if (multiple && !inputValue?.length) {
-                event.preventDefault();
-                setValue(value?.slice(0, -1));
-            }
-        }
-    }, [multiple, inputValue, value, setValue]);
-    const handleOnBlur = React.useCallback((event) => {
-        const target = event.relatedTarget;
-        const isInput = target === inputRef.current;
-        const inListbox = target && listRef.current?.contains(target);
-        if (isInput || inListbox)
-            return;
-        if (!multiple) {
-            if (typeof value === 'string' && value.length)
-                setInputValue(value);
-            else
-                setInputValue('');
-        }
-        onBlur?.(event);
-    }, [onBlur, multiple, value, inputRef, listRef, setInputValue]);
-    return (jsxRuntime.jsx(radixUi.Popover.Anchor, { asChild: true, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(react.Combobox, { autoSelect: 'always', ref: inputRef, render: jsxRuntime.jsx(inputField.InputField, { chips: multiple && Array.isArray(value)
-                        ? value.map(val => ({
-                            label: val,
-                            onRemove: () => setValue(value?.filter(v => v !== val))
-                        }))
-                        : undefined, trailingIcon: jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: combobox_module.default.triggerIcon }), ...props }), onBlur: handleOnBlur, onKeyDown: handleOnKeyDown }) }) }));
+const ComboboxInput = React.forwardRef(({ ...props }, ref) => {
+    const { multiple, inputContainerRef, value, onValueChange } = comboboxRoot.useComboboxContext();
+    return (jsxRuntime.jsx(react.Combobox.Input, { ref: ref, render: jsxRuntime.jsx(inputField.InputField, { containerRef: inputContainerRef, chips: multiple && Array.isArray(value)
+                ? value.map(val => ({
+                    label: val,
+                    onRemove: () => onValueChange?.(value?.filter(v => v !== val))
+                }))
+                : undefined, trailingIcon: jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: combobox_module.default.triggerIcon }), ...props }) }));
 });
-ComboboxInput.displayName = 'ComboboxInput';
+ComboboxInput.displayName = 'Combobox.Input';
 
 exports.ComboboxInput = ComboboxInput;
 //# sourceMappingURL=combobox-input.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-input.cjs","sources":["../../../components/combobox/combobox-input.tsx"],"sourcesContent":["'use client';\n\nimport { Combobox } from '@ariakit/react';\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { Popover as PopoverPrimitive } from 'radix-ui';\nimport {\n  ElementRef,\n  FocusEvent,\n  forwardRef,\n  KeyboardEvent,\n  useCallback\n} from 'react';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport interface ComboboxInputProps\n  extends Omit<\n    InputFieldProps,\n    'trailingIcon' | 'suffix' | 'chips' | 'maxChipsVisible'\n  > {}\n\nexport const ComboboxInput = forwardRef<\n  ElementRef<typeof Combobox>,\n  ComboboxInputProps\n>(({ onBlur, ...props }, ref) => {\n  const {\n    inputRef,\n    listRef,\n    value,\n    multiple,\n    inputValue,\n    setInputValue,\n    setValue\n  } = useComboboxContext();\n\n  const handleOnKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Backspace') {\n        if (multiple && !inputValue?.length) {\n          event.preventDefault();\n          setValue((value as string[])?.slice(0, -1));\n        }\n      }\n    },\n    [multiple, inputValue, value, setValue]\n  );\n  const handleOnBlur = useCallback(\n    (event: FocusEvent<HTMLInputElement>) => {\n      const target = event.relatedTarget as Element | null;\n      const isInput = target === inputRef.current;\n      const inListbox = target && listRef.current?.contains(target);\n      if (isInput || inListbox) return;\n      if (!multiple) {\n        if (typeof value === 'string' && value.length) setInputValue(value);\n        else setInputValue('');\n      }\n      onBlur?.(event);\n    },\n    [onBlur, multiple, value, inputRef, listRef, setInputValue]\n  );\n\n  return (\n    <PopoverPrimitive.Anchor asChild>\n      <div>\n        <Combobox\n          autoSelect='always'\n          ref={inputRef}\n          render={\n            <InputField\n              chips={\n                multiple && Array.isArray(value)\n                  ? value.map(val => ({\n                      label: val,\n                      onRemove: () =>\n                        setValue((value as string[])?.filter(v => v !== val))\n                    }))\n                  : undefined\n              }\n              trailingIcon={<ChevronDownIcon className={styles.triggerIcon} />}\n              {...props}\n            />\n          }\n          onBlur={handleOnBlur}\n          onKeyDown={handleOnKeyDown}\n        />\n      </div>\n    </PopoverPrimitive.Anchor>\n  );\n});\nComboboxInput.displayName = 'ComboboxInput';\n"],"names":[],"mappings":";;;;;;;;;;;;AAuBa;AAIX;AAUA;AAEI;AACE;;;;;;AAQN;AAEI;AACA;AACA;;;;AAGE;;;;;AAGF;AACF;AAIF;;AAWoB;AACA;AAED;AACH;AAYlB;AACA;;"}
+{"version":3,"file":"combobox-input.cjs","sources":["../../../components/combobox/combobox-input.tsx"],"sourcesContent":["'use client';\n\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react';\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { ElementRef, forwardRef } from 'react';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport interface ComboboxInputProps\n  extends Omit<\n    InputFieldProps,\n    'trailingIcon' | 'suffix' | 'chips' | 'maxChipsVisible'\n  > {}\n\nexport const ComboboxInput = forwardRef<\n  ElementRef<typeof ComboboxPrimitive.Input>,\n  ComboboxInputProps\n>(({ ...props }, ref) => {\n  const { multiple, inputContainerRef, value, onValueChange } =\n    useComboboxContext();\n  return (\n    <ComboboxPrimitive.Input\n      ref={ref}\n      render={\n        <InputField\n          containerRef={inputContainerRef}\n          chips={\n            multiple && Array.isArray(value)\n              ? value.map(val => ({\n                  label: val,\n                  onRemove: () =>\n                    onValueChange?.((value as string[])?.filter(v => v !== val))\n                }))\n              : undefined\n          }\n          trailingIcon={<ChevronDownIcon className={styles.triggerIcon} />}\n          {...props}\n        />\n      }\n    />\n  );\n});\nComboboxInput.displayName = 'Combobox.Input';\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO;AAIL;AAEA;;AASgB;AACA;AAED;AACH;AAQd;AACA;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-input.d.ts","sourceRoot":"","sources":["../../../components/combobox/combobox-input.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAI7D,MAAM,WAAW,kBACf,SAAQ,IAAI,CACV,eAAe,EACf,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,iBAAiB,CACxD;CAAG;AAEN,eAAO,MAAM,aAAa,iHAmExB,CAAC"}
+{"version":3,"file":"combobox-input.d.ts","sourceRoot":"","sources":["../../../components/combobox/combobox-input.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAI7D,MAAM,WAAW,kBACf,SAAQ,IAAI,CACV,eAAe,EACf,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,iBAAiB,CACxD;CAAG;AAEN,eAAO,MAAM,aAAa,iHA2BxB,CAAC"}

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

@@ -1,45 +1,22 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Combobox } from '@ariakit/react';
+import { Combobox } from '@base-ui/react';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
-import { Popover } from 'radix-ui';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef } from 'react';
 import { InputField } from '../input-field/input-field.js';
 import styles from './combobox.module.css.js';
 import { useComboboxContext } from './combobox-root.js';
 
-const ComboboxInput = forwardRef(({ onBlur, ...props }, ref) => {
-    const { inputRef, listRef, value, multiple, inputValue, setInputValue, setValue } = useComboboxContext();
-    const handleOnKeyDown = useCallback((event) => {
-        if (event.key === 'Backspace') {
-            if (multiple && !inputValue?.length) {
-                event.preventDefault();
-                setValue(value?.slice(0, -1));
-            }
-        }
-    }, [multiple, inputValue, value, setValue]);
-    const handleOnBlur = useCallback((event) => {
-        const target = event.relatedTarget;
-        const isInput = target === inputRef.current;
-        const inListbox = target && listRef.current?.contains(target);
-        if (isInput || inListbox)
-            return;
-        if (!multiple) {
-            if (typeof value === 'string' && value.length)
-                setInputValue(value);
-            else
-                setInputValue('');
-        }
-        onBlur?.(event);
-    }, [onBlur, multiple, value, inputRef, listRef, setInputValue]);
-    return (jsx(Popover.Anchor, { asChild: true, children: jsx("div", { children: jsx(Combobox, { autoSelect: 'always', ref: inputRef, render: jsx(InputField, { chips: multiple && Array.isArray(value)
-                        ? value.map(val => ({
-                            label: val,
-                            onRemove: () => setValue(value?.filter(v => v !== val))
-                        }))
-                        : undefined, trailingIcon: jsx(ChevronDownIcon, { className: styles.triggerIcon }), ...props }), onBlur: handleOnBlur, onKeyDown: handleOnKeyDown }) }) }));
+const ComboboxInput = forwardRef(({ ...props }, ref) => {
+    const { multiple, inputContainerRef, value, onValueChange } = useComboboxContext();
+    return (jsx(Combobox.Input, { ref: ref, render: jsx(InputField, { containerRef: inputContainerRef, chips: multiple && Array.isArray(value)
+                ? value.map(val => ({
+                    label: val,
+                    onRemove: () => onValueChange?.(value?.filter(v => v !== val))
+                }))
+                : undefined, trailingIcon: jsx(ChevronDownIcon, { className: styles.triggerIcon }), ...props }) }));
 });
-ComboboxInput.displayName = 'ComboboxInput';
+ComboboxInput.displayName = 'Combobox.Input';
 
 export { ComboboxInput };
 //# sourceMappingURL=combobox-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-input.js","sources":["../../../components/combobox/combobox-input.tsx"],"sourcesContent":["'use client';\n\nimport { Combobox } from '@ariakit/react';\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { Popover as PopoverPrimitive } from 'radix-ui';\nimport {\n  ElementRef,\n  FocusEvent,\n  forwardRef,\n  KeyboardEvent,\n  useCallback\n} from 'react';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport interface ComboboxInputProps\n  extends Omit<\n    InputFieldProps,\n    'trailingIcon' | 'suffix' | 'chips' | 'maxChipsVisible'\n  > {}\n\nexport const ComboboxInput = forwardRef<\n  ElementRef<typeof Combobox>,\n  ComboboxInputProps\n>(({ onBlur, ...props }, ref) => {\n  const {\n    inputRef,\n    listRef,\n    value,\n    multiple,\n    inputValue,\n    setInputValue,\n    setValue\n  } = useComboboxContext();\n\n  const handleOnKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Backspace') {\n        if (multiple && !inputValue?.length) {\n          event.preventDefault();\n          setValue((value as string[])?.slice(0, -1));\n        }\n      }\n    },\n    [multiple, inputValue, value, setValue]\n  );\n  const handleOnBlur = useCallback(\n    (event: FocusEvent<HTMLInputElement>) => {\n      const target = event.relatedTarget as Element | null;\n      const isInput = target === inputRef.current;\n      const inListbox = target && listRef.current?.contains(target);\n      if (isInput || inListbox) return;\n      if (!multiple) {\n        if (typeof value === 'string' && value.length) setInputValue(value);\n        else setInputValue('');\n      }\n      onBlur?.(event);\n    },\n    [onBlur, multiple, value, inputRef, listRef, setInputValue]\n  );\n\n  return (\n    <PopoverPrimitive.Anchor asChild>\n      <div>\n        <Combobox\n          autoSelect='always'\n          ref={inputRef}\n          render={\n            <InputField\n              chips={\n                multiple && Array.isArray(value)\n                  ? value.map(val => ({\n                      label: val,\n                      onRemove: () =>\n                        setValue((value as string[])?.filter(v => v !== val))\n                    }))\n                  : undefined\n              }\n              trailingIcon={<ChevronDownIcon className={styles.triggerIcon} />}\n              {...props}\n            />\n          }\n          onBlur={handleOnBlur}\n          onKeyDown={handleOnKeyDown}\n        />\n      </div>\n    </PopoverPrimitive.Anchor>\n  );\n});\nComboboxInput.displayName = 'ComboboxInput';\n"],"names":[],"mappings":";;;;;;;;;;AAuBa;AAIX;AAUA;AAEI;AACE;;;;;;AAQN;AAEI;AACA;AACA;;;;AAGE;;;;;AAGF;AACF;AAIF;;AAWoB;AACA;AAED;AACH;AAYlB;AACA;;"}
+{"version":3,"file":"combobox-input.js","sources":["../../../components/combobox/combobox-input.tsx"],"sourcesContent":["'use client';\n\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react';\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { ElementRef, forwardRef } from 'react';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport interface ComboboxInputProps\n  extends Omit<\n    InputFieldProps,\n    'trailingIcon' | 'suffix' | 'chips' | 'maxChipsVisible'\n  > {}\n\nexport const ComboboxInput = forwardRef<\n  ElementRef<typeof ComboboxPrimitive.Input>,\n  ComboboxInputProps\n>(({ ...props }, ref) => {\n  const { multiple, inputContainerRef, value, onValueChange } =\n    useComboboxContext();\n  return (\n    <ComboboxPrimitive.Input\n      ref={ref}\n      render={\n        <InputField\n          containerRef={inputContainerRef}\n          chips={\n            multiple && Array.isArray(value)\n              ? value.map(val => ({\n                  label: val,\n                  onRemove: () =>\n                    onValueChange?.((value as string[])?.filter(v => v !== val))\n                }))\n              : undefined\n          }\n          trailingIcon={<ChevronDownIcon className={styles.triggerIcon} />}\n          {...props}\n        />\n      }\n    />\n  );\n});\nComboboxInput.displayName = 'Combobox.Input';\n"],"names":[],"mappings":";;;;;;;;;AAgBO;AAIL;AAEA;;AASgB;AACA;AAED;AACH;AAQd;AACA;;"}

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

@@ -2,34 +2,34 @@
 '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 checkbox = require('../checkbox/checkbox.cjs');
-var utils = require('../dropdown-menu/utils.cjs');
+var utils = require('../menu/utils.cjs');
 var text = require('../text/text.cjs');
 var combobox_module = require('./combobox.module.css.cjs');
 var comboboxRoot = require('./combobox-root.cjs');
 
-const ComboboxItem = React.forwardRef(({ className, children, value: providedValue, leadingIcon, disabled, ...props }, ref) => {
+const ComboboxItem = React.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 } = comboboxRoot.useComboboxContext();
-    const isSelected = multiple
-        ? comboboxValue?.includes(value ?? '')
-        : value === comboboxValue;
-    const isMatched = utils.getMatch(value, children, inputValue);
-    const element = typeof children === 'string' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [leadingIcon && jsxRuntime.jsx("div", { className: combobox_module.default.itemIcon, children: leadingIcon }), jsxRuntime.jsx(text.Text, { children: children })] })) : (children);
-    if (inputValue?.length && !isMatched) {
-        // Doesn't match search, so don't render at all
-        return null;
+    const { multiple, inputValue, hasItems } = comboboxRoot.useComboboxContext();
+    // When items prop is not provided on Root, use custom filtering
+    if (!hasItems && inputValue?.length) {
+        const isMatched = utils.getMatch(value, children, inputValue);
+        if (!isMatched)
+            return null;
     }
-    return (jsxRuntime.jsxs(react.ComboboxItem, { ref: ref, value: value, className: classVarianceAuthority.cx(combobox_module.default.menuitem, className), focusOnHover: true, "aria-selected": isSelected, "data-selected": isSelected, resetValueOnSelect: multiple, ...props, children: [multiple && jsxRuntime.jsx(checkbox.Checkbox, { checked: isSelected }), element] }));
+    const element = typeof children === 'string' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [leadingIcon && jsxRuntime.jsx("div", { className: combobox_module.default.itemIcon, children: leadingIcon }), jsxRuntime.jsx(text.Text, { children: children })] })) : (children);
+    return (jsxRuntime.jsx(react.Combobox.Item, { ref: ref, value: value, className: classVarianceAuthority.cx(combobox_module.default.menuitem, className), disabled: disabled, ...props, render: render
+            ? render
+            : (renderProps, state) => (jsxRuntime.jsxs("div", { ...renderProps, children: [multiple && jsxRuntime.jsx(checkbox.Checkbox, { checked: state.selected }), element] })) }));
 });
-ComboboxItem.displayName = 'ComboboxItem';
+ComboboxItem.displayName = 'Combobox.Item';
 
 exports.ComboboxItem = ComboboxItem;
 //# sourceMappingURL=combobox-item.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-item.cjs","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.cjs","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-item.d.ts

@@ -1,7 +1,7 @@
-import { ComboboxItem as AriakitComboboxItem } from '@ariakit/react';
-import { ComponentPropsWithoutRef } from 'react';
-export interface ComboboxItemProps extends ComponentPropsWithoutRef<typeof AriakitComboboxItem> {
-    leadingIcon?: React.ReactNode;
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { ReactNode } from 'react';
+export interface ComboboxItemProps extends ComboboxPrimitive.Item.Props {
+    leadingIcon?: ReactNode;
 }
-export declare const ComboboxItem: import("react").ForwardRefExoticComponent<ComboboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxItem: import("react").ForwardRefExoticComponent<Omit<ComboboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=combobox-item.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-item.d.ts","sourceRoot":"","sources":["../../../components/combobox/combobox-item.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErE,OAAO,EAAE,wBAAwB,EAA0B,MAAM,OAAO,CAAC;AAOzE,MAAM,WAAW,iBACf,SAAQ,wBAAwB,CAAC,OAAO,mBAAmB,CAAC;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,8GA0DxB,CAAC"}
+{"version":3,"file":"combobox-item.d.ts","sourceRoot":"","sources":["../../../components/combobox/combobox-item.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9C,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,CAAC,IAAI,CAAC,KAAK;IACrE,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,2HAyDxB,CAAC"}