@raystack/apsara 0.56.7 → 1.0.0-rc.1

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 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 = ({\n  ref,\n  className,\n  children,\n  style,\n  render,\n  initialFocus,\n  finalFocus,\n  sideOffset = 4,\n  ...positionerProps\n}: ComboboxContentProps) => {\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};\nComboboxContent.displayName = 'Combobox.Content';\n"],"names":[],"mappings":";;;;;;;;;AAcO;AAWL;AACA;AAuBF;AACA;;"}

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

@@ -1,6 +1,8 @@
-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: {
+    ({ ref, className, children, style, render, initialFocus, finalFocus, sideOffset, ...positionerProps }: ComboboxContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# 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;AAK/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;4GAUzB,oBAAoB;;CAyBtB,CAAC"}

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

@@ -1,37 +1,15 @@
 "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 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 }) }) }));
-});
-ComboboxContent.displayName = 'ComboboxContent';
+const ComboboxContent = ({ ref, className, children, style, render, initialFocus, finalFocus, sideOffset = 4, ...positionerProps }) => {
+    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 = '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 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 = ({\n  ref,\n  className,\n  children,\n  style,\n  render,\n  initialFocus,\n  finalFocus,\n  sideOffset = 4,\n  ...positionerProps\n}: ComboboxContentProps) => {\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};\nComboboxContent.displayName = 'Combobox.Content';\n"],"names":[],"mappings":";;;;;;;AAcO;AAWL;AACA;AAuBF;AACA;;"}

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

@@ -2,46 +2,22 @@
 '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 }) }) }));
-});
-ComboboxInput.displayName = 'ComboboxInput';
+const ComboboxInput = ({ ref, ...props }) => {
+    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 = '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 { type ComponentProps } from 'react';\nimport { InputField } from '../input-field';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport interface ComboboxInputProps\n  extends Omit<\n    ComponentProps<typeof InputField>,\n    'trailingIcon' | 'suffix' | 'chips' | 'maxChipsVisible'\n  > {}\n\nexport const ComboboxInput = ({ ref, ...props }: ComboboxInputProps) => {\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":";;;;;;;;;;AAeO;AACL;AAEA;;AASgB;AACA;AAED;AACH;AAQd;AACA;;"}

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

@@ -1,5 +1,9 @@
-import { InputFieldProps } from '../input-field/input-field';
-export interface ComboboxInputProps extends Omit<InputFieldProps, 'trailingIcon' | 'suffix' | 'chips' | 'maxChipsVisible'> {
+import { type ComponentProps } from 'react';
+import { InputField } from '../input-field';
+export interface ComboboxInputProps extends Omit<ComponentProps<typeof InputField>, 'trailingIcon' | 'suffix' | 'chips' | 'maxChipsVisible'> {
 }
-export declare const ComboboxInput: import("react").ForwardRefExoticComponent<ComboboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const ComboboxInput: {
+    ({ ref, ...props }: ComboboxInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=combobox-input.d.ts.map

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":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI5C,MAAM,WAAW,kBACf,SAAQ,IAAI,CACV,cAAc,CAAC,OAAO,UAAU,CAAC,EACjC,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,iBAAiB,CACxD;CAAG;AAEN,eAAO,MAAM,aAAa;wBAAuB,kBAAkB;;CAwBlE,CAAC"}

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

@@ -1,45 +1,21 @@
 "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 { 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 }) }) }));
-});
-ComboboxInput.displayName = 'ComboboxInput';
+const ComboboxInput = ({ ref, ...props }) => {
+    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 = '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 { type ComponentProps } from 'react';\nimport { InputField } from '../input-field';\nimport styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport interface ComboboxInputProps\n  extends Omit<\n    ComponentProps<typeof InputField>,\n    'trailingIcon' | 'suffix' | 'chips' | 'maxChipsVisible'\n  > {}\n\nexport const ComboboxInput = ({ ref, ...props }: ComboboxInputProps) => {\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":";;;;;;;;AAeO;AACL;AAEA;;AASgB;AACA;AAED;AACH;AAQd;AACA;;"}

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

@@ -2,34 +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 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 = ({ className, children, value: providedValue, leadingIcon, disabled, render, ...props }) => {
     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] }));
-});
-ComboboxItem.displayName = 'ComboboxItem';
+    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, { 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 = '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 { 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 = ({\n  className,\n  children,\n  value: providedValue,\n  leadingIcon,\n  disabled,\n  render,\n  ...props\n}: ComboboxItemProps) => {\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      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};\nComboboxItem.displayName = 'Combobox.Item';\n"],"names":[],"mappings":";;;;;;;;;;;;AAea;;AAUT;AACA;AACE;;;;AAMJ;;AAEE;AAAgB;;AAGlB;AAUA;AAQQ;AACA;AASV;AACA;;"}

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

@@ -1,7 +1,10 @@
-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: {
+    ({ className, children, value: providedValue, leadingIcon, disabled, render, ...props }: ComboboxItemProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
 //# 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,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,CAAC,IAAI,CAAC,KAAK;IACrE,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,YAAY;6FAQtB,iBAAiB;;CA2CnB,CAAC"}

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

@@ -1,33 +1,32 @@
 "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 = ({ className, children, value: providedValue, leadingIcon, disabled, render, ...props }) => {
     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] }));
-});
-ComboboxItem.displayName = 'ComboboxItem';
+    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, { 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 = '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 { 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 = ({\n  className,\n  children,\n  value: providedValue,\n  leadingIcon,\n  disabled,\n  render,\n  ...props\n}: ComboboxItemProps) => {\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      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};\nComboboxItem.displayName = 'Combobox.Item';\n"],"names":[],"mappings":";;;;;;;;;;AAea;;AAUT;AACA;AACE;;;;AAMJ;;AAEE;AAAgB;;AAGlB;AAUA;AAQQ;AACA;AASV;AACA;;"}

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

@@ -2,33 +2,32 @@
 '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 ComboboxLabel = ({ className, ...props }) => {
+    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 }));
-});
-ComboboxLabel.displayName = 'ComboboxLabel';
-const ComboboxGroup = React.forwardRef(({ className, children, ...props }, ref) => {
-    const { inputValue } = comboboxRoot.useComboboxContext();
-    if (inputValue?.length)
+    return (jsxRuntime.jsx(react.Combobox.GroupLabel, { className: classVarianceAuthority.cx(combobox_module.default.label, className), ...props }));
+};
+ComboboxLabel.displayName = 'Combobox.Label';
+const ComboboxGroup = ({ className, children, ...props }) => {
+    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 }));
-});
-ComboboxGroup.displayName = 'ComboboxGroup';
-const ComboboxSeparator = React.forwardRef(({ className, ...props }, ref) => {
-    const { inputValue } = comboboxRoot.useComboboxContext();
-    if (inputValue?.length)
+    return (jsxRuntime.jsx(react.Combobox.Group, { className: classVarianceAuthority.cx(combobox_module.default.group, className), ...props, children: children }));
+};
+ComboboxGroup.displayName = 'Combobox.Group';
+const ComboboxSeparator = ({ className, ...props }) => {
+    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 }));
-});
-ComboboxSeparator.displayName = 'ComboboxSeparator';
+    return (jsxRuntime.jsx(react.Combobox.Separator, { className: classVarianceAuthority.cx(combobox_module.default.separator, className), ...props }));
+};
+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 styles from './combobox.module.css';\nimport { useComboboxContext } from './combobox-root';\n\nexport const ComboboxLabel = ({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) => {\n  const { inputValue, hasItems } = useComboboxContext();\n  if (!hasItems && inputValue?.length) return null;\n\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cx(styles.label, className)}\n      {...props}\n    />\n  );\n};\nComboboxLabel.displayName = 'Combobox.Label';\n\nexport const ComboboxGroup = ({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Group.Props) => {\n  const { inputValue, hasItems } = useComboboxContext();\n  if (!hasItems && inputValue?.length) return children;\n\n  return (\n    <ComboboxPrimitive.Group className={cx(styles.group, className)} {...props}>\n      {children}\n    </ComboboxPrimitive.Group>\n  );\n};\nComboboxGroup.displayName = 'Combobox.Group';\n\nexport const ComboboxSeparator = ({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) => {\n  const { inputValue, hasItems } = useComboboxContext();\n  if (!hasItems && inputValue?.length) return null;\n\n  return (\n    <ComboboxPrimitive.Separator\n      className={cx(styles.separator, className)}\n      {...props}\n    />\n  );\n};\nComboboxSeparator.displayName = 'Combobox.Separator';\n"],"names":[],"mappings":";;;;;;;;;AAOO;;AAKL;AAAqC;;AAQvC;AACA;AAEO;;AAML;AAAqC;;AAOvC;AACA;AAEO;;AAKL;AAAqC;;AAQvC;AACA;;;;"}

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

@@ -1,10 +1,14 @@
-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>>;
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+export declare const ComboboxLabel: {
+    ({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export declare const ComboboxGroup: {
+    ({ className, children, ...props }: ComboboxPrimitive.Group.Props): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    displayName: string;
+};
+export declare const ComboboxSeparator: {
+    ({ className, ...props }: ComboboxPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
 //# 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":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAK/D,eAAO,MAAM,aAAa;8BAGvB,kBAAkB,UAAU,CAAC,KAAK;;CAUpC,CAAC;AAGF,eAAO,MAAM,aAAa;wCAIvB,kBAAkB,KAAK,CAAC,KAAK;;CAS/B,CAAC;AAGF,eAAO,MAAM,iBAAiB;8BAG3B,kBAAkB,SAAS,CAAC,KAAK;;CAUnC,CAAC"}

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

@@ -1,32 +1,31 @@
 "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 ComboboxLabel = ({ className, ...props }) => {
+    const { inputValue, hasItems } = useComboboxContext();
+    if (!hasItems && inputValue?.length)
         return null;
-    return (jsx(ComboboxGroupLabel, { ref: ref, className: cx(styles.label, className), ...props }));
-});
-ComboboxLabel.displayName = 'ComboboxLabel';
-const ComboboxGroup = forwardRef(({ className, children, ...props }, ref) => {
-    const { inputValue } = useComboboxContext();
-    if (inputValue?.length)
+    return (jsx(Combobox.GroupLabel, { className: cx(styles.label, className), ...props }));
+};
+ComboboxLabel.displayName = 'Combobox.Label';
+const ComboboxGroup = ({ className, children, ...props }) => {
+    const { inputValue, hasItems } = useComboboxContext();
+    if (!hasItems && inputValue?.length)
         return children;
-    return (jsx(ComboboxGroup$1, { ref: ref, className: cx(styles.group, className), ...props, children: children }));
-});
-ComboboxGroup.displayName = 'ComboboxGroup';
-const ComboboxSeparator = forwardRef(({ className, ...props }, ref) => {
-    const { inputValue } = useComboboxContext();
-    if (inputValue?.length)
+    return (jsx(Combobox.Group, { className: cx(styles.group, className), ...props, children: children }));
+};
+ComboboxGroup.displayName = 'Combobox.Group';
+const ComboboxSeparator = ({ className, ...props }) => {
+    const { inputValue, hasItems } = useComboboxContext();
+    if (!hasItems && inputValue?.length)
         return null;
-    return (jsx(ComboboxSeparator$1, { ref: ref, className: cx(styles.separator, className), ...props }));
-});
-ComboboxSeparator.displayName = 'ComboboxSeparator';
+    return (jsx(Combobox.Separator, { className: cx(styles.separator, className), ...props }));
+};
+ComboboxSeparator.displayName = 'Combobox.Separator';
 
 export { ComboboxGroup, ComboboxLabel, ComboboxSeparator };
 //# sourceMappingURL=combobox-misc.js.map