@raystack/apsara 0.56.5 → 1.0.0-rc.0

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

@@ -1,28 +1,19 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Combobox, ComboboxList } from '@ariakit/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Combobox, Select } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { Select, Slot } from 'radix-ui';
-import { forwardRef, useCallback } from 'react';
-import { useSelectContext } from './select-root.js';
+import { forwardRef } from 'react';
 import styles from './select.module.css.js';
+import { useSelectContext } from './select-root.js';
 
-const SelectContent = forwardRef(({ className, children, position = 'popper', searchPlaceholder = 'Search...', sideOffset = 4, asChild, onEscapeKeyDown: providedOnEscapeKeyDown, onPointerDownOutside: providedOnPointerDownOutside, ...props }, ref) => {
-    const { autocomplete, multiple, updateSelectionInProgress } = useSelectContext();
-    const onPointerDownOutside = useCallback(event => {
-        updateSelectionInProgress(false);
-        providedOnPointerDownOutside?.(event);
-    }, [updateSelectionInProgress, providedOnPointerDownOutside]);
-    const onEscapeKeyDown = useCallback(event => {
-        updateSelectionInProgress(false);
-        providedOnEscapeKeyDown?.(event);
-    }, [updateSelectionInProgress, providedOnEscapeKeyDown]);
-    return (jsx(Select.Portal, { children: jsx(Select.Content, { ref: ref, position: position, sideOffset: sideOffset, className: cx(styles.content, className), onEscapeKeyDown: multiple ? onEscapeKeyDown : providedOnEscapeKeyDown, onPointerDownOutside: multiple ? onPointerDownOutside : providedOnPointerDownOutside, role: autocomplete ? 'dialog' : 'listbox', "aria-multiselectable": !autocomplete && multiple ? true : undefined, "data-multiselectable": multiple ? true : undefined, ...props, children: jsx(Select.Viewport, { className: cx(styles.viewport, autocomplete && styles.comboboxViewport), asChild: !autocomplete ? asChild : undefined, children: autocomplete ? (jsxs(Fragment, { children: [jsx(Combobox, { autoSelect: true, placeholder: searchPlaceholder, className: styles.comboboxInput, onBlurCapture: event => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                            } }), jsx(ComboboxList, { className: styles.comboboxContent, "aria-multiselectable": multiple ? true : undefined, render: asChild ? jsx(Slot.Root, {}) : undefined, children: children })] })) : (children) }) }) }));
+const SelectContent = forwardRef(({ className, children, searchPlaceholder = 'Search...', sideOffset = 4, ...props }, ref) => {
+    const { autocomplete, multiple } = useSelectContext();
+    if (autocomplete) {
+        return (jsx(Combobox.Portal, { children: jsx(Combobox.Positioner, { sideOffset: sideOffset, className: styles.positioner, children: jsxs(Combobox.Popup, { ref: ref, className: cx(styles.content, className), "data-multiselectable": multiple ? true : undefined, ...props, children: [jsx(Combobox.Input, { placeholder: searchPlaceholder, className: styles.comboboxInput }), jsx(Combobox.List, { className: styles.comboboxContent, "aria-multiselectable": multiple ? true : undefined, children: children })] }) }) }));
+    }
+    return (jsx(Select.Positioner, { sideOffset: sideOffset, className: styles.positioner, alignItemWithTrigger: false, children: jsx(Select.Popup, { ref: ref, className: cx(styles.content, className), "data-multiselectable": multiple ? true : undefined, ...props, children: jsx(Select.List, { className: styles.viewport, children: children }) }) }));
 });
-SelectContent.displayName = Select.Content.displayName;
+SelectContent.displayName = 'Select.Content';
 
 export { SelectContent };
 //# sourceMappingURL=select-content.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-content.js","sources":["../../../components/select/select-content.tsx"],"sourcesContent":["'use client';\n\nimport { Combobox, ComboboxList } from '@ariakit/react';\nimport { cx } from 'class-variance-authority';\nimport { Select as SelectPrimitive, Slot } from 'radix-ui';\nimport { ElementRef, forwardRef, useCallback } from 'react';\nimport { useSelectContext } from './select-root';\nimport styles from './select.module.css';\n\nexport interface SelectContentProps extends SelectPrimitive.SelectContentProps {\n  searchPlaceholder?: string;\n}\n\nexport const SelectContent = forwardRef<\n  ElementRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(\n  (\n    {\n      className,\n      children,\n      position = 'popper',\n      searchPlaceholder = 'Search...',\n      sideOffset = 4,\n      asChild,\n      onEscapeKeyDown: providedOnEscapeKeyDown,\n      onPointerDownOutside: providedOnPointerDownOutside,\n      ...props\n    },\n    ref\n  ) => {\n    const { autocomplete, multiple, updateSelectionInProgress } =\n      useSelectContext();\n\n    const onPointerDownOutside = useCallback<\n      NonNullable<SelectContentProps['onPointerDownOutside']>\n    >(\n      event => {\n        updateSelectionInProgress(false);\n        providedOnPointerDownOutside?.(event);\n      },\n      [updateSelectionInProgress, providedOnPointerDownOutside]\n    );\n\n    const onEscapeKeyDown = useCallback<\n      NonNullable<SelectContentProps['onEscapeKeyDown']>\n    >(\n      event => {\n        updateSelectionInProgress(false);\n        providedOnEscapeKeyDown?.(event);\n      },\n      [updateSelectionInProgress, providedOnEscapeKeyDown]\n    );\n\n    return (\n      <SelectPrimitive.Portal>\n        <SelectPrimitive.Content\n          ref={ref}\n          position={position}\n          sideOffset={sideOffset}\n          className={cx(styles.content, className)}\n          onEscapeKeyDown={multiple ? onEscapeKeyDown : providedOnEscapeKeyDown}\n          onPointerDownOutside={\n            multiple ? onPointerDownOutside : providedOnPointerDownOutside\n          }\n          role={autocomplete ? 'dialog' : 'listbox'}\n          aria-multiselectable={!autocomplete && multiple ? true : undefined}\n          data-multiselectable={multiple ? true : undefined}\n          {...props}\n        >\n          <SelectPrimitive.Viewport\n            className={cx(\n              styles.viewport,\n              autocomplete && styles.comboboxViewport\n            )}\n            asChild={!autocomplete ? asChild : undefined}\n          >\n            {autocomplete ? (\n              <>\n                <Combobox\n                  autoSelect\n                  placeholder={searchPlaceholder}\n                  className={styles.comboboxInput}\n                  onBlurCapture={event => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                  }}\n                />\n                <ComboboxList\n                  className={styles.comboboxContent}\n                  aria-multiselectable={multiple ? true : undefined}\n                  render={asChild ? <Slot.Root /> : undefined}\n                >\n                  {children}\n                </ComboboxList>\n              </>\n            ) : (\n              children\n            )}\n          </SelectPrimitive.Viewport>\n        </SelectPrimitive.Content>\n      </SelectPrimitive.Portal>\n    );\n  }\n);\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n"],"names":[],"mappings":";;;;;;;;;AAaa;;AAqBT;;AAKI;AACF;AAIF;;AAKI;AACF;AAIF;;;;AAiDF;AAEF;;"}
+{"version":3,"file":"select-content.js","sources":["../../../components/select/select-content.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { forwardRef, ReactNode } from 'react';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectContentProps {\n  className?: string;\n  children?: ReactNode;\n  searchPlaceholder?: string;\n  sideOffset?: number;\n  style?: React.CSSProperties;\n}\n\nexport const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      className,\n      children,\n      searchPlaceholder = 'Search...',\n      sideOffset = 4,\n      ...props\n    },\n    ref\n  ) => {\n    const { autocomplete, multiple } = useSelectContext();\n\n    if (autocomplete) {\n      return (\n        <ComboboxPrimitive.Portal>\n          <ComboboxPrimitive.Positioner\n            sideOffset={sideOffset}\n            className={styles.positioner}\n          >\n            <ComboboxPrimitive.Popup\n              ref={ref}\n              className={cx(styles.content, className)}\n              data-multiselectable={multiple ? true : undefined}\n              {...props}\n            >\n              <ComboboxPrimitive.Input\n                placeholder={searchPlaceholder}\n                className={styles.comboboxInput}\n              />\n              <ComboboxPrimitive.List\n                className={styles.comboboxContent}\n                aria-multiselectable={multiple ? true : undefined}\n              >\n                {children}\n              </ComboboxPrimitive.List>\n            </ComboboxPrimitive.Popup>\n          </ComboboxPrimitive.Positioner>\n        </ComboboxPrimitive.Portal>\n      );\n    }\n\n    return (\n      <SelectPrimitive.Positioner\n        sideOffset={sideOffset}\n        className={styles.positioner}\n        alignItemWithTrigger={false}\n      >\n        <SelectPrimitive.Popup\n          ref={ref}\n          className={cx(styles.content, className)}\n          data-multiselectable={multiple ? true : undefined}\n          {...props}\n        >\n          <SelectPrimitive.List className={styles.viewport}>\n            {children}\n          </SelectPrimitive.List>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    );\n  }\n);\nSelectContent.displayName = 'Select.Content';\n"],"names":[],"mappings":";;;;;;;;AAmBa;;;;;AA0CT;AAkBF;AAEF;;"}

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

@@ -2,24 +2,23 @@
 '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 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 select_module = require('./select.module.css.cjs');
 var selectRoot = require('./select-root.cjs');
 
 const SelectItem = React.forwardRef(({ className, children, value: providedValue, leadingIcon, disabled, ...props }, ref) => {
     const value = String(providedValue);
-    const { registerItem, unregisterItem, autocomplete, searchValue, value: selectValue, shouldFilter, multiple } = selectRoot.useSelectContext();
+    const { registerItem, unregisterItem, autocomplete, searchValue, value: selectValue, shouldFilter, hasItems, multiple } = selectRoot.useSelectContext();
     const isSelected = multiple
         ? selectValue?.includes(value)
         : value === selectValue;
     const isMatched = utils.getMatch(value, children, searchValue);
-    const isHidden = shouldFilter && isSelected && !isMatched;
+    const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;
     const element = typeof children === 'string' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [leadingIcon && jsxRuntime.jsx("div", { className: select_module.default.itemIcon, children: leadingIcon }), jsxRuntime.jsx(text.Text, { children: children })] })) : (children);
     React.useLayoutEffect(() => {
         registerItem({ leadingIcon, children, value });
@@ -27,15 +26,15 @@ const SelectItem = React.forwardRef(({ className, children, value: providedValue
             unregisterItem(value);
         };
     }, [value, children, registerItem, unregisterItem, leadingIcon]);
-    if (shouldFilter && !isMatched && !isSelected) {
-        // Not selected and doesn't match search, so don't render at all
+    if (shouldFilter && !hasItems && !isMatched && !isSelected) {
         return null;
     }
-    return (jsxRuntime.jsx(radixUi.Select.Item, { ref: ref, value: value, className: classVarianceAuthority.cx(select_module.default.menuitem, className, isHidden && select_module.default.hidden), "data-hidden": isHidden, disabled: disabled || isHidden, asChild: autocomplete, "aria-selected": isSelected, "data-checked": isSelected, ...props, children: autocomplete ? (jsxRuntime.jsxs(react.ComboboxItem, { clickOnEnter: false, clickOnSpace: false, onBlurCapture: event => {
-                event.preventDefault();
-            }, children: [multiple && jsxRuntime.jsx(checkbox.Checkbox, { checked: isSelected }), element] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [multiple && jsxRuntime.jsx(checkbox.Checkbox, { checked: isSelected }), element] })) }));
+    const ItemPrimitive = autocomplete
+        ? react.Combobox.Item
+        : react.Select.Item;
+    return (jsxRuntime.jsx(ItemPrimitive, { ref: ref, value: value, className: classVarianceAuthority.cx(select_module.default.menuitem, className, isHidden && select_module.default.hidden), "data-hidden": isHidden || undefined, disabled: disabled || isHidden, ...props, render: (renderProps, state) => (jsxRuntime.jsxs("div", { ...renderProps, children: [multiple && jsxRuntime.jsx(checkbox.Checkbox, { checked: state.selected }), element] })) }));
 });
-SelectItem.displayName = radixUi.Select.Item.displayName;
+SelectItem.displayName = 'Select.Item';
 
 exports.SelectItem = SelectItem;
 //# sourceMappingURL=select-item.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-item.cjs","sources":["../../../components/select/select-item.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxItem } from '@ariakit/react';\nimport { cx } from 'class-variance-authority';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport { ElementRef, forwardRef, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../dropdown-menu/utils';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport const SelectItem = forwardRef<\n  ElementRef<typeof SelectPrimitive.Item>,\n  Omit<SelectPrimitive.SelectItemProps, 'asChild'> & {\n    leadingIcon?: React.ReactNode;\n  }\n>(\n  (\n    {\n      className,\n      children,\n      value: providedValue,\n      leadingIcon,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const value = String(providedValue);\n    const {\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      searchValue,\n      value: selectValue,\n      shouldFilter,\n      multiple\n    } = useSelectContext();\n\n    const isSelected = multiple\n      ? selectValue?.includes(value)\n      : value === selectValue;\n    const isMatched = getMatch(value, children, searchValue);\n    const isHidden = shouldFilter && isSelected && !isMatched;\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    useLayoutEffect(() => {\n      registerItem({ leadingIcon, children, value });\n      return () => {\n        unregisterItem(value);\n      };\n    }, [value, children, registerItem, unregisterItem, leadingIcon]);\n\n    if (shouldFilter && !isMatched && !isSelected) {\n      // Not selected and doesn't match search, so don't render at all\n      return null;\n    }\n\n    return (\n      <SelectPrimitive.Item\n        ref={ref}\n        value={value}\n        className={cx(styles.menuitem, className, isHidden && styles.hidden)}\n        data-hidden={isHidden}\n        disabled={disabled || isHidden}\n        asChild={autocomplete}\n        aria-selected={isSelected}\n        data-checked={isSelected}\n        {...props}\n      >\n        {autocomplete ? (\n          <ComboboxItem\n            clickOnEnter={false}\n            clickOnSpace={false}\n            onBlurCapture={event => {\n              event.preventDefault();\n            }}\n          >\n            {multiple && <Checkbox checked={isSelected} />}\n            {element}\n          </ComboboxItem>\n        ) : (\n          <>\n            {multiple && <Checkbox checked={isSelected} />}\n            {element}\n          </>\n        )}\n      </SelectPrimitive.Item>\n    );\n  }\n);\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYa;AAiBT;;;AAYE;AACA;;;AAIF;;;AAYE;;AAEA;AACF;;;AAIE;;AAGF;;AAkBQ;AAaV;AAEF;;"}
+{"version":3,"file":"select-item.cjs","sources":["../../../components/select/select-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { forwardRef, ReactNode, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../menu/utils';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectItemProps {\n  className?: string;\n  children?: ReactNode;\n  value: string;\n  leadingIcon?: ReactNode;\n  disabled?: boolean;\n}\n\nexport const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n  (\n    {\n      className,\n      children,\n      value: providedValue,\n      leadingIcon,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const value = String(providedValue);\n    const {\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      searchValue,\n      value: selectValue,\n      shouldFilter,\n      hasItems,\n      multiple\n    } = useSelectContext();\n\n    const isSelected = multiple\n      ? selectValue?.includes(value)\n      : value === selectValue;\n    const isMatched = getMatch(value, children, searchValue);\n    const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;\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    useLayoutEffect(() => {\n      registerItem({ leadingIcon, children, value });\n      return () => {\n        unregisterItem(value);\n      };\n    }, [value, children, registerItem, unregisterItem, leadingIcon]);\n\n    if (shouldFilter && !hasItems && !isMatched && !isSelected) {\n      return null;\n    }\n\n    const ItemPrimitive = autocomplete\n      ? ComboboxPrimitive.Item\n      : SelectPrimitive.Item;\n\n    return (\n      <ItemPrimitive\n        ref={ref}\n        value={value}\n        className={cx(styles.menuitem, className, isHidden && styles.hidden)}\n        data-hidden={isHidden || undefined}\n        disabled={disabled || isHidden}\n        {...props}\n        render={(renderProps, state) => (\n          <div {...renderProps}>\n            {multiple && <Checkbox checked={state.selected} />}\n            {element}\n          </div>\n        )}\n      />\n    );\n  }\n);\nSelectItem.displayName = 'Select.Item';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsBa;AAYT;;;AAaE;AACA;;;AAIF;;;AAYE;;AAEA;AACF;;AAGE;;;;AAKA;AAEF;AAgBF;AAEF;;"}

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

@@ -1,5 +1,10 @@
-import { Select as SelectPrimitive } from 'radix-ui';
-export declare const SelectItem: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps, "asChild"> & {
-    leadingIcon?: React.ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
+import { ReactNode } from 'react';
+export interface SelectItemProps {
+    className?: string;
+    children?: ReactNode;
+    value: string;
+    leadingIcon?: ReactNode;
+    disabled?: boolean;
+}
+export declare const SelectItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=select-item.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../components/select/select-item.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAQrD,eAAO,MAAM,UAAU;kBAGL,MAAM,SAAS;kDAqFhC,CAAC"}
+{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../components/select/select-item.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAc,SAAS,EAAmB,MAAM,OAAO,CAAC;AAO/D,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,4GAwEtB,CAAC"}

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

@@ -1,23 +1,22 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { ComboboxItem } from '@ariakit/react';
+import { Combobox, Select } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { Select } from 'radix-ui';
 import { forwardRef, useLayoutEffect } 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 './select.module.css.js';
 import { useSelectContext } from './select-root.js';
 
 const SelectItem = forwardRef(({ className, children, value: providedValue, leadingIcon, disabled, ...props }, ref) => {
     const value = String(providedValue);
-    const { registerItem, unregisterItem, autocomplete, searchValue, value: selectValue, shouldFilter, multiple } = useSelectContext();
+    const { registerItem, unregisterItem, autocomplete, searchValue, value: selectValue, shouldFilter, hasItems, multiple } = useSelectContext();
     const isSelected = multiple
         ? selectValue?.includes(value)
         : value === selectValue;
     const isMatched = getMatch(value, children, searchValue);
-    const isHidden = shouldFilter && isSelected && !isMatched;
+    const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;
     const element = typeof children === 'string' ? (jsxs(Fragment, { children: [leadingIcon && jsx("div", { className: styles.itemIcon, children: leadingIcon }), jsx(Text, { children: children })] })) : (children);
     useLayoutEffect(() => {
         registerItem({ leadingIcon, children, value });
@@ -25,15 +24,15 @@ const SelectItem = forwardRef(({ className, children, value: providedValue, lead
             unregisterItem(value);
         };
     }, [value, children, registerItem, unregisterItem, leadingIcon]);
-    if (shouldFilter && !isMatched && !isSelected) {
-        // Not selected and doesn't match search, so don't render at all
+    if (shouldFilter && !hasItems && !isMatched && !isSelected) {
         return null;
     }
-    return (jsx(Select.Item, { ref: ref, value: value, className: cx(styles.menuitem, className, isHidden && styles.hidden), "data-hidden": isHidden, disabled: disabled || isHidden, asChild: autocomplete, "aria-selected": isSelected, "data-checked": isSelected, ...props, children: autocomplete ? (jsxs(ComboboxItem, { clickOnEnter: false, clickOnSpace: false, onBlurCapture: event => {
-                event.preventDefault();
-            }, children: [multiple && jsx(Checkbox, { checked: isSelected }), element] })) : (jsxs(Fragment, { children: [multiple && jsx(Checkbox, { checked: isSelected }), element] })) }));
+    const ItemPrimitive = autocomplete
+        ? Combobox.Item
+        : Select.Item;
+    return (jsx(ItemPrimitive, { ref: ref, value: value, className: cx(styles.menuitem, className, isHidden && styles.hidden), "data-hidden": isHidden || undefined, disabled: disabled || isHidden, ...props, render: (renderProps, state) => (jsxs("div", { ...renderProps, children: [multiple && jsx(Checkbox, { checked: state.selected }), element] })) }));
 });
-SelectItem.displayName = Select.Item.displayName;
+SelectItem.displayName = 'Select.Item';
 
 export { SelectItem };
 //# sourceMappingURL=select-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-item.js","sources":["../../../components/select/select-item.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxItem } from '@ariakit/react';\nimport { cx } from 'class-variance-authority';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport { ElementRef, forwardRef, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../dropdown-menu/utils';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport const SelectItem = forwardRef<\n  ElementRef<typeof SelectPrimitive.Item>,\n  Omit<SelectPrimitive.SelectItemProps, 'asChild'> & {\n    leadingIcon?: React.ReactNode;\n  }\n>(\n  (\n    {\n      className,\n      children,\n      value: providedValue,\n      leadingIcon,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const value = String(providedValue);\n    const {\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      searchValue,\n      value: selectValue,\n      shouldFilter,\n      multiple\n    } = useSelectContext();\n\n    const isSelected = multiple\n      ? selectValue?.includes(value)\n      : value === selectValue;\n    const isMatched = getMatch(value, children, searchValue);\n    const isHidden = shouldFilter && isSelected && !isMatched;\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    useLayoutEffect(() => {\n      registerItem({ leadingIcon, children, value });\n      return () => {\n        unregisterItem(value);\n      };\n    }, [value, children, registerItem, unregisterItem, leadingIcon]);\n\n    if (shouldFilter && !isMatched && !isSelected) {\n      // Not selected and doesn't match search, so don't render at all\n      return null;\n    }\n\n    return (\n      <SelectPrimitive.Item\n        ref={ref}\n        value={value}\n        className={cx(styles.menuitem, className, isHidden && styles.hidden)}\n        data-hidden={isHidden}\n        disabled={disabled || isHidden}\n        asChild={autocomplete}\n        aria-selected={isSelected}\n        data-checked={isSelected}\n        {...props}\n      >\n        {autocomplete ? (\n          <ComboboxItem\n            clickOnEnter={false}\n            clickOnSpace={false}\n            onBlurCapture={event => {\n              event.preventDefault();\n            }}\n          >\n            {multiple && <Checkbox checked={isSelected} />}\n            {element}\n          </ComboboxItem>\n        ) : (\n          <>\n            {multiple && <Checkbox checked={isSelected} />}\n            {element}\n          </>\n        )}\n      </SelectPrimitive.Item>\n    );\n  }\n);\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"names":[],"mappings":";;;;;;;;;;;;AAYa;AAiBT;;;AAYE;AACA;;;AAIF;;;AAYE;;AAEA;AACF;;;AAIE;;AAGF;;AAkBQ;AAaV;AAEF;;"}
+{"version":3,"file":"select-item.js","sources":["../../../components/select/select-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { forwardRef, ReactNode, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../menu/utils';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectItemProps {\n  className?: string;\n  children?: ReactNode;\n  value: string;\n  leadingIcon?: ReactNode;\n  disabled?: boolean;\n}\n\nexport const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n  (\n    {\n      className,\n      children,\n      value: providedValue,\n      leadingIcon,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const value = String(providedValue);\n    const {\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      searchValue,\n      value: selectValue,\n      shouldFilter,\n      hasItems,\n      multiple\n    } = useSelectContext();\n\n    const isSelected = multiple\n      ? selectValue?.includes(value)\n      : value === selectValue;\n    const isMatched = getMatch(value, children, searchValue);\n    const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;\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    useLayoutEffect(() => {\n      registerItem({ leadingIcon, children, value });\n      return () => {\n        unregisterItem(value);\n      };\n    }, [value, children, registerItem, unregisterItem, leadingIcon]);\n\n    if (shouldFilter && !hasItems && !isMatched && !isSelected) {\n      return null;\n    }\n\n    const ItemPrimitive = autocomplete\n      ? ComboboxPrimitive.Item\n      : SelectPrimitive.Item;\n\n    return (\n      <ItemPrimitive\n        ref={ref}\n        value={value}\n        className={cx(styles.menuitem, className, isHidden && styles.hidden)}\n        data-hidden={isHidden || undefined}\n        disabled={disabled || isHidden}\n        {...props}\n        render={(renderProps, state) => (\n          <div {...renderProps}>\n            {multiple && <Checkbox checked={state.selected} />}\n            {element}\n          </div>\n        )}\n      />\n    );\n  }\n);\nSelectItem.displayName = 'Select.Item';\n"],"names":[],"mappings":";;;;;;;;;;;AAsBa;AAYT;;;AAaE;AACA;;;AAIF;;;AAYE;;AAEA;AACF;;AAGE;;;;AAKA;AAEF;AAgBF;AAEF;;"}

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

@@ -2,33 +2,42 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
 var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
 var React = require('react');
 var select_module = require('./select.module.css.cjs');
 var selectRoot = require('./select-root.cjs');
 
 const SelectGroup = React.forwardRef(({ className, children, ...props }, ref) => {
-    const { shouldFilter } = selectRoot.useSelectContext();
+    const { shouldFilter, autocomplete } = selectRoot.useSelectContext();
     if (shouldFilter)
         return jsxRuntime.jsx(React.Fragment, { children: children });
-    return (jsxRuntime.jsx(radixUi.Select.Group, { ref: ref, className: classVarianceAuthority.cx(select_module.default.menugroup, className), ...props, children: children }));
+    const GroupPrimitive = autocomplete
+        ? react.Combobox.Group
+        : react.Select.Group;
+    return (jsxRuntime.jsx(GroupPrimitive, { ref: ref, className: classVarianceAuthority.cx(select_module.default.menugroup, className), ...props, children: children }));
 });
-SelectGroup.displayName = radixUi.Select.Group.displayName;
+SelectGroup.displayName = 'Select.Group';
 const SelectLabel = React.forwardRef(({ className, ...props }, ref) => {
-    const { shouldFilter } = selectRoot.useSelectContext();
+    const { shouldFilter, autocomplete } = selectRoot.useSelectContext();
     if (shouldFilter)
         return null;
-    return (jsxRuntime.jsx(radixUi.Select.Label, { ref: ref, className: classVarianceAuthority.cx(select_module.default.label, className), ...props }));
+    const LabelPrimitive = autocomplete
+        ? react.Combobox.GroupLabel
+        : react.Select.GroupLabel;
+    return (jsxRuntime.jsx(LabelPrimitive, { ref: ref, className: classVarianceAuthority.cx(select_module.default.label, className), ...props }));
 });
-SelectLabel.displayName = radixUi.Select.Label.displayName;
+SelectLabel.displayName = 'Select.Label';
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => {
-    const { shouldFilter } = selectRoot.useSelectContext();
+    const { shouldFilter, autocomplete } = selectRoot.useSelectContext();
     if (shouldFilter)
         return null;
-    return (jsxRuntime.jsx(radixUi.Select.Separator, { ref: ref, className: classVarianceAuthority.cx(select_module.default.separator, className), ...props }));
+    const SeparatorPrimitive = autocomplete
+        ? react.Combobox.Separator
+        : react.Select.Separator;
+    return (jsxRuntime.jsx(SeparatorPrimitive, { ref: ref, className: classVarianceAuthority.cx(select_module.default.separator, className), ...props }));
 });
-SelectSeparator.displayName = radixUi.Select.Separator.displayName;
+SelectSeparator.displayName = 'Select.Separator';
 
 exports.SelectGroup = SelectGroup;
 exports.SelectLabel = SelectLabel;

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

@@ -1 +1 @@
-{"version":3,"file":"select-misc.cjs","sources":["../../../components/select/select-misc.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport { ElementRef, Fragment, forwardRef } from 'react';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport const SelectGroup = forwardRef<\n  ElementRef<typeof SelectPrimitive.Group>,\n  SelectPrimitive.SelectGroupProps\n>(({ className, children, ...props }, ref) => {\n  const { shouldFilter } = useSelectContext();\n\n  if (shouldFilter) return <Fragment>{children}</Fragment>;\n\n  return (\n    <SelectPrimitive.Group\n      ref={ref}\n      className={cx(styles.menugroup, className)}\n      {...props}\n    >\n      {children}\n    </SelectPrimitive.Group>\n  );\n});\nSelectGroup.displayName = SelectPrimitive.Group.displayName;\n\nexport const SelectLabel = forwardRef<\n  ElementRef<typeof SelectPrimitive.Label>,\n  SelectPrimitive.SelectLabelProps\n>(({ className, ...props }, ref) => {\n  const { shouldFilter } = useSelectContext();\n\n  if (shouldFilter) return null;\n\n  return (\n    <SelectPrimitive.Label\n      ref={ref}\n      className={cx(styles.label, className)}\n      {...props}\n    />\n  );\n});\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nexport const SelectSeparator = forwardRef<\n  ElementRef<typeof SelectPrimitive.Separator>,\n  SelectPrimitive.SelectSeparatorProps\n>(({ className, ...props }, ref) => {\n  const { shouldFilter } = useSelectContext();\n\n  if (shouldFilter) return null;\n  return (\n    <SelectPrimitive.Separator\n      ref={ref}\n      className={cx(styles.separator, className)}\n      {...props}\n    />\n  );\n});\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n"],"names":[],"mappings":";;;;;;;;;;AAQa;AAIX;AAEA;AAAkB;;AAWpB;AACA;AAEa;AAIX;AAEA;AAAkB;;AASpB;AACA;AAEa;AAIX;AAEA;AAAkB;;AAQpB;AACA;;;;"}
+{"version":3,"file":"select-misc.cjs","sources":["../../../components/select/select-misc.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { Fragment, forwardRef, ReactNode } from 'react';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectGroupProps {\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(\n  ({ className, children, ...props }, ref) => {\n    const { shouldFilter, autocomplete } = useSelectContext();\n\n    if (shouldFilter) return <Fragment>{children}</Fragment>;\n\n    const GroupPrimitive = autocomplete\n      ? ComboboxPrimitive.Group\n      : SelectPrimitive.Group;\n\n    return (\n      <GroupPrimitive\n        ref={ref}\n        className={cx(styles.menugroup, className)}\n        {...props}\n      >\n        {children}\n      </GroupPrimitive>\n    );\n  }\n);\nSelectGroup.displayName = 'Select.Group';\n\nexport interface SelectLabelProps {\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(\n  ({ className, ...props }, ref) => {\n    const { shouldFilter, autocomplete } = useSelectContext();\n\n    if (shouldFilter) return null;\n\n    const LabelPrimitive = autocomplete\n      ? ComboboxPrimitive.GroupLabel\n      : SelectPrimitive.GroupLabel;\n\n    return (\n      <LabelPrimitive\n        ref={ref}\n        className={cx(styles.label, className)}\n        {...props}\n      />\n    );\n  }\n);\nSelectLabel.displayName = 'Select.Label';\n\nexport interface SelectSeparatorProps {\n  className?: string;\n}\n\nexport const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(\n  ({ className, ...props }, ref) => {\n    const { shouldFilter, autocomplete } = useSelectContext();\n\n    if (shouldFilter) return null;\n\n    const SeparatorPrimitive = autocomplete\n      ? ComboboxPrimitive.Separator\n      : SelectPrimitive.Separator;\n\n    return (\n      <SeparatorPrimitive\n        ref={ref}\n        className={cx(styles.separator, className)}\n        {...props}\n      />\n    );\n  }\n);\nSelectSeparator.displayName = 'Select.Separator';\n"],"names":[],"mappings":";;;;;;;;;;AAgBa;;AAIT;AAAkB;;;AAIhB;;AAWJ;AAEF;AAOa;;AAIT;AAAkB;;;AAIhB;;AASJ;AAEF;AAMa;;AAIT;AAAkB;;;AAIhB;;AASJ;AAEF;;;;"}

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

@@ -1,5 +1,16 @@
-import { Select as SelectPrimitive } from 'radix-ui';
-export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SelectLabel: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SelectSeparator: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+import { ReactNode } from 'react';
+export interface SelectGroupProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SelectLabelProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare const SelectLabel: import("react").ForwardRefExoticComponent<SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SelectSeparatorProps {
+    className?: string;
+}
+export declare const SelectSeparator: import("react").ForwardRefExoticComponent<SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=select-misc.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-misc.d.ts","sourceRoot":"","sources":["../../../components/select/select-misc.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAKrD,eAAO,MAAM,WAAW,6HAiBtB,CAAC;AAGH,eAAO,MAAM,WAAW,6HAetB,CAAC;AAGH,eAAO,MAAM,eAAe,iIAc1B,CAAC"}
+{"version":3,"file":"select-misc.d.ts","sourceRoot":"","sources":["../../../components/select/select-misc.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIxD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,6GAoBvB,CAAC;AAGF,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,6GAkBvB,CAAC;AAGF,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,iHAkB3B,CAAC"}

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

@@ -1,32 +1,41 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { Combobox, Select } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { Select } from 'radix-ui';
 import { forwardRef, Fragment } from 'react';
 import styles from './select.module.css.js';
 import { useSelectContext } from './select-root.js';
 
 const SelectGroup = forwardRef(({ className, children, ...props }, ref) => {
-    const { shouldFilter } = useSelectContext();
+    const { shouldFilter, autocomplete } = useSelectContext();
     if (shouldFilter)
         return jsx(Fragment, { children: children });
-    return (jsx(Select.Group, { ref: ref, className: cx(styles.menugroup, className), ...props, children: children }));
+    const GroupPrimitive = autocomplete
+        ? Combobox.Group
+        : Select.Group;
+    return (jsx(GroupPrimitive, { ref: ref, className: cx(styles.menugroup, className), ...props, children: children }));
 });
-SelectGroup.displayName = Select.Group.displayName;
+SelectGroup.displayName = 'Select.Group';
 const SelectLabel = forwardRef(({ className, ...props }, ref) => {
-    const { shouldFilter } = useSelectContext();
+    const { shouldFilter, autocomplete } = useSelectContext();
     if (shouldFilter)
         return null;
-    return (jsx(Select.Label, { ref: ref, className: cx(styles.label, className), ...props }));
+    const LabelPrimitive = autocomplete
+        ? Combobox.GroupLabel
+        : Select.GroupLabel;
+    return (jsx(LabelPrimitive, { ref: ref, className: cx(styles.label, className), ...props }));
 });
-SelectLabel.displayName = Select.Label.displayName;
+SelectLabel.displayName = 'Select.Label';
 const SelectSeparator = forwardRef(({ className, ...props }, ref) => {
-    const { shouldFilter } = useSelectContext();
+    const { shouldFilter, autocomplete } = useSelectContext();
     if (shouldFilter)
         return null;
-    return (jsx(Select.Separator, { ref: ref, className: cx(styles.separator, className), ...props }));
+    const SeparatorPrimitive = autocomplete
+        ? Combobox.Separator
+        : Select.Separator;
+    return (jsx(SeparatorPrimitive, { ref: ref, className: cx(styles.separator, className), ...props }));
 });
-SelectSeparator.displayName = Select.Separator.displayName;
+SelectSeparator.displayName = 'Select.Separator';
 
 export { SelectGroup, SelectLabel, SelectSeparator };
 //# sourceMappingURL=select-misc.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-misc.js","sources":["../../../components/select/select-misc.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport { ElementRef, Fragment, forwardRef } from 'react';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport const SelectGroup = forwardRef<\n  ElementRef<typeof SelectPrimitive.Group>,\n  SelectPrimitive.SelectGroupProps\n>(({ className, children, ...props }, ref) => {\n  const { shouldFilter } = useSelectContext();\n\n  if (shouldFilter) return <Fragment>{children}</Fragment>;\n\n  return (\n    <SelectPrimitive.Group\n      ref={ref}\n      className={cx(styles.menugroup, className)}\n      {...props}\n    >\n      {children}\n    </SelectPrimitive.Group>\n  );\n});\nSelectGroup.displayName = SelectPrimitive.Group.displayName;\n\nexport const SelectLabel = forwardRef<\n  ElementRef<typeof SelectPrimitive.Label>,\n  SelectPrimitive.SelectLabelProps\n>(({ className, ...props }, ref) => {\n  const { shouldFilter } = useSelectContext();\n\n  if (shouldFilter) return null;\n\n  return (\n    <SelectPrimitive.Label\n      ref={ref}\n      className={cx(styles.label, className)}\n      {...props}\n    />\n  );\n});\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nexport const SelectSeparator = forwardRef<\n  ElementRef<typeof SelectPrimitive.Separator>,\n  SelectPrimitive.SelectSeparatorProps\n>(({ className, ...props }, ref) => {\n  const { shouldFilter } = useSelectContext();\n\n  if (shouldFilter) return null;\n  return (\n    <SelectPrimitive.Separator\n      ref={ref}\n      className={cx(styles.separator, className)}\n      {...props}\n    />\n  );\n});\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n"],"names":[],"mappings":";;;;;;;;AAQa;AAIX;AAEA;AAAkB;;AAWpB;AACA;AAEa;AAIX;AAEA;AAAkB;;AASpB;AACA;AAEa;AAIX;AAEA;AAAkB;;AAQpB;AACA;;"}
+{"version":3,"file":"select-misc.js","sources":["../../../components/select/select-misc.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { Fragment, forwardRef, ReactNode } from 'react';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectGroupProps {\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(\n  ({ className, children, ...props }, ref) => {\n    const { shouldFilter, autocomplete } = useSelectContext();\n\n    if (shouldFilter) return <Fragment>{children}</Fragment>;\n\n    const GroupPrimitive = autocomplete\n      ? ComboboxPrimitive.Group\n      : SelectPrimitive.Group;\n\n    return (\n      <GroupPrimitive\n        ref={ref}\n        className={cx(styles.menugroup, className)}\n        {...props}\n      >\n        {children}\n      </GroupPrimitive>\n    );\n  }\n);\nSelectGroup.displayName = 'Select.Group';\n\nexport interface SelectLabelProps {\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(\n  ({ className, ...props }, ref) => {\n    const { shouldFilter, autocomplete } = useSelectContext();\n\n    if (shouldFilter) return null;\n\n    const LabelPrimitive = autocomplete\n      ? ComboboxPrimitive.GroupLabel\n      : SelectPrimitive.GroupLabel;\n\n    return (\n      <LabelPrimitive\n        ref={ref}\n        className={cx(styles.label, className)}\n        {...props}\n      />\n    );\n  }\n);\nSelectLabel.displayName = 'Select.Label';\n\nexport interface SelectSeparatorProps {\n  className?: string;\n}\n\nexport const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(\n  ({ className, ...props }, ref) => {\n    const { shouldFilter, autocomplete } = useSelectContext();\n\n    if (shouldFilter) return null;\n\n    const SeparatorPrimitive = autocomplete\n      ? ComboboxPrimitive.Separator\n      : SelectPrimitive.Separator;\n\n    return (\n      <SeparatorPrimitive\n        ref={ref}\n        className={cx(styles.separator, className)}\n        {...props}\n      />\n    );\n  }\n);\nSelectSeparator.displayName = 'Select.Separator';\n"],"names":[],"mappings":";;;;;;;;AAgBa;;AAIT;AAAkB;;;AAIhB;;AAWJ;AAEF;AAOa;;AAIT;AAAkB;;;AAIhB;;AASJ;AAEF;AAMa;;AAIT;AAAkB;;;AAIhB;;AASJ;AAEF;;"}

package/dist/components/select/select-multiple-value.cjs

@@ -3,7 +3,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
 var React = require('react');
 var chip = require('../chip/chip.cjs');
 var text = require('../text/text.cjs');
@@ -17,7 +16,7 @@ const calculateTextWidth = (text, fontSize = 11) => {
     const avgCharWidth = fontSize * 0.6;
     return text.length * avgCharWidth;
 };
-const SelectMultipleValue = React.forwardRef(({ data = [], ...props }, ref) => {
+const SelectMultipleValue = ({ data = [] }) => {
     const containerRef = React.useRef(null);
     const [visibleCount, setVisibleCount] = React.useState(data.length);
     const [containerWidth, setContainerWidth] = React.useState(0);
@@ -35,7 +34,6 @@ const SelectMultipleValue = React.forwardRef(({ data = [], ...props }, ref) => {
     React.useLayoutEffect(() => {
         if (!containerRef.current || data.length === 0)
             return;
-        // Calculate chip widths based on text length and icon width
         const chipWidths = data.map(item => {
             const text = typeof item.children === 'string' ? item.children : item.value;
             const iconWidth = item.leadingIcon ? 16 : 0;
@@ -43,12 +41,10 @@ const SelectMultipleValue = React.forwardRef(({ data = [], ...props }, ref) => {
         });
         let totalWidth = 0;
         let count = 0;
-        // Always show at least one chip
         if (data.length > 0) {
             count = 1;
             totalWidth = chipWidths[0];
         }
-        // Try to fit more chips
         for (let i = 1; i < data.length; i++) {
             const newWidth = totalWidth + chipWidths[i];
             if (newWidth <= containerWidth) {
@@ -61,8 +57,8 @@ const SelectMultipleValue = React.forwardRef(({ data = [], ...props }, ref) => {
         }
         setVisibleCount(count);
     }, [data, containerWidth]);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: classVarianceAuthority.cx(select_module.default.valueContent), children: jsxRuntime.jsx(radixUi.Select.Value, { ref: ref, ...props, children: jsxRuntime.jsxs("div", { className: classVarianceAuthority.cx(select_module.default.valueContent), children: [data.slice(0, visibleCount).map(item => (jsxRuntime.jsx(chip.Chip, { leadingIcon: item.leadingIcon, children: typeof item.children === 'string' ? item.children : item.value }, item.value))), data.length > visibleCount && (jsxRuntime.jsxs(text.Text, { children: ["+", data.length - visibleCount] }))] }) }) }));
-});
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classVarianceAuthority.cx(select_module.default.valueContent), children: [data.slice(0, visibleCount).map(item => (jsxRuntime.jsx(chip.Chip, { leadingIcon: item.leadingIcon, children: typeof item.children === 'string' ? item.children : item.value }, item.value))), data.length > visibleCount && jsxRuntime.jsxs(text.Text, { children: ["+", data.length - visibleCount] })] }));
+};
 
 exports.SelectMultipleValue = SelectMultipleValue;
 //# sourceMappingURL=select-multiple-value.cjs.map

package/dist/components/select/select-multiple-value.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-multiple-value.cjs","sources":["../../../components/select/select-multiple-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport {\n  ElementRef,\n  forwardRef,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\nimport { Chip } from '../chip';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { ItemType } from './types';\n\ninterface SelectMultipleValueProps extends SelectPrimitive.SelectValueProps {\n  data: ItemType[];\n}\n\n/*\n * Approximate width calculation based on font size\n * Average character width is roughly 0.6 times the font size\n */\nconst calculateTextWidth = (text: string, fontSize: number = 11): number => {\n  const avgCharWidth = fontSize * 0.6;\n  return text.length * avgCharWidth;\n};\n\nexport const SelectMultipleValue = forwardRef<\n  ElementRef<typeof SelectPrimitive.Value>,\n  SelectMultipleValueProps\n>(({ data = [], ...props }, ref) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [visibleCount, setVisibleCount] = useState(data.length);\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current) return;\n\n    const resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        setContainerWidth(entry.contentRect.width - 70);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current || data.length === 0) return;\n\n    // Calculate chip widths based on text length and icon width\n    const chipWidths: number[] = data.map(item => {\n      const text =\n        typeof item.children === 'string' ? item.children : item.value;\n      const iconWidth = item.leadingIcon ? 16 : 0;\n      return calculateTextWidth(text) + 8 + iconWidth;\n    });\n\n    let totalWidth = 0;\n    let count = 0;\n\n    // Always show at least one chip\n    if (data.length > 0) {\n      count = 1;\n      totalWidth = chipWidths[0];\n    }\n\n    // Try to fit more chips\n    for (let i = 1; i < data.length; i++) {\n      const newWidth = totalWidth + chipWidths[i];\n      if (newWidth <= containerWidth) {\n        count++;\n        totalWidth = newWidth;\n      } else {\n        break;\n      }\n    }\n\n    setVisibleCount(count);\n  }, [data, containerWidth]);\n\n  return (\n    <div ref={containerRef} className={cx(styles.valueContent)}>\n      <SelectPrimitive.Value ref={ref} {...props}>\n        <div className={cx(styles.valueContent)}>\n          {data.slice(0, visibleCount).map(item => (\n            <Chip key={item.value} leadingIcon={item.leadingIcon}>\n              {typeof item.children === 'string' ? item.children : item.value}\n            </Chip>\n          ))}\n          {data.length > visibleCount && (\n            <Text>+{data.length - visibleCount}</Text>\n          )}\n        </div>\n      </SelectPrimitive.Value>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;AAoBA;;;AAGG;AACH;AACE;AACA;AACF;AAEa;AAIX;AACA;;;;;AAME;AACE;;;AAGF;AAEA;AACA;;;;;;;;AAUE;;AAEF;;;;AAMA;;AAEE;;;AAIF;;AAEE;AACE;;;;;;;;AAQN;;AAkBF;;"}
+{"version":3,"file":"select-multiple-value.cjs","sources":["../../../components/select/select-multiple-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { Chip } from '../chip';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { ItemType } from './types';\n\ninterface SelectMultipleValueProps {\n  data: ItemType[];\n}\n\n/*\n * Approximate width calculation based on font size\n * Average character width is roughly 0.6 times the font size\n */\nconst calculateTextWidth = (text: string, fontSize: number = 11): number => {\n  const avgCharWidth = fontSize * 0.6;\n  return text.length * avgCharWidth;\n};\n\nexport const SelectMultipleValue = ({\n  data = []\n}: SelectMultipleValueProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [visibleCount, setVisibleCount] = useState(data.length);\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current) return;\n\n    const resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        setContainerWidth(entry.contentRect.width - 70);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current || data.length === 0) return;\n\n    const chipWidths: number[] = data.map(item => {\n      const text =\n        typeof item.children === 'string' ? item.children : item.value;\n      const iconWidth = item.leadingIcon ? 16 : 0;\n      return calculateTextWidth(text) + 8 + iconWidth;\n    });\n\n    let totalWidth = 0;\n    let count = 0;\n\n    if (data.length > 0) {\n      count = 1;\n      totalWidth = chipWidths[0];\n    }\n\n    for (let i = 1; i < data.length; i++) {\n      const newWidth = totalWidth + chipWidths[i];\n      if (newWidth <= containerWidth) {\n        count++;\n        totalWidth = newWidth;\n      } else {\n        break;\n      }\n    }\n\n    setVisibleCount(count);\n  }, [data, containerWidth]);\n\n  return (\n    <div ref={containerRef} className={cx(styles.valueContent)}>\n      {data.slice(0, visibleCount).map(item => (\n        <Chip key={item.value} leadingIcon={item.leadingIcon}>\n          {typeof item.children === 'string' ? item.children : item.value}\n        </Chip>\n      ))}\n      {data.length > visibleCount && <Text>+{data.length - visibleCount}</Text>}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAaA;;;AAGG;AACH;AACE;AACA;AACF;AAEa;AAGX;AACA;;;;;AAME;AACE;;;AAGF;AAEA;AACA;;;;;;;AASE;;AAEF;;;AAKA;;AAEE;;AAGF;;AAEE;AACE;;;;;;;;AAQN;AAEA;AAUF;;"}

package/dist/components/select/select-multiple-value.d.ts

@@ -1,8 +1,7 @@
-import { Select as SelectPrimitive } from 'radix-ui';
 import { ItemType } from './types';
-interface SelectMultipleValueProps extends SelectPrimitive.SelectValueProps {
+interface SelectMultipleValueProps {
     data: ItemType[];
 }
-export declare const SelectMultipleValue: import("react").ForwardRefExoticComponent<SelectMultipleValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SelectMultipleValue: ({ data }: SelectMultipleValueProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=select-multiple-value.d.ts.map

package/dist/components/select/select-multiple-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-multiple-value.d.ts","sourceRoot":"","sources":["../../../components/select/select-multiple-value.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAWrD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,UAAU,wBAAyB,SAAQ,eAAe,CAAC,gBAAgB;IACzE,IAAI,EAAE,QAAQ,EAAE,CAAC;CAClB;AAWD,eAAO,MAAM,mBAAmB,sHAuE9B,CAAC"}
+{"version":3,"file":"select-multiple-value.d.ts","sourceRoot":"","sources":["../../../components/select/select-multiple-value.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,UAAU,wBAAwB;IAChC,IAAI,EAAE,QAAQ,EAAE,CAAC;CAClB;AAWD,eAAO,MAAM,mBAAmB,aAE7B,wBAAwB,4CA2D1B,CAAC"}

package/dist/components/select/select-multiple-value.js

@@ -1,8 +1,7 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
-import { Select } from 'radix-ui';
-import { forwardRef, useRef, useState, useLayoutEffect } from 'react';
+import { useRef, useState, useLayoutEffect } from 'react';
 import { Chip } from '../chip/chip.js';
 import { Text } from '../text/text.js';
 import styles from './select.module.css.js';
@@ -15,7 +14,7 @@ const calculateTextWidth = (text, fontSize = 11) => {
     const avgCharWidth = fontSize * 0.6;
     return text.length * avgCharWidth;
 };
-const SelectMultipleValue = forwardRef(({ data = [], ...props }, ref) => {
+const SelectMultipleValue = ({ data = [] }) => {
     const containerRef = useRef(null);
     const [visibleCount, setVisibleCount] = useState(data.length);
     const [containerWidth, setContainerWidth] = useState(0);
@@ -33,7 +32,6 @@ const SelectMultipleValue = forwardRef(({ data = [], ...props }, ref) => {
     useLayoutEffect(() => {
         if (!containerRef.current || data.length === 0)
             return;
-        // Calculate chip widths based on text length and icon width
         const chipWidths = data.map(item => {
             const text = typeof item.children === 'string' ? item.children : item.value;
             const iconWidth = item.leadingIcon ? 16 : 0;
@@ -41,12 +39,10 @@ const SelectMultipleValue = forwardRef(({ data = [], ...props }, ref) => {
         });
         let totalWidth = 0;
         let count = 0;
-        // Always show at least one chip
         if (data.length > 0) {
             count = 1;
             totalWidth = chipWidths[0];
         }
-        // Try to fit more chips
         for (let i = 1; i < data.length; i++) {
             const newWidth = totalWidth + chipWidths[i];
             if (newWidth <= containerWidth) {
@@ -59,8 +55,8 @@ const SelectMultipleValue = forwardRef(({ data = [], ...props }, ref) => {
         }
         setVisibleCount(count);
     }, [data, containerWidth]);
-    return (jsx("div", { ref: containerRef, className: cx(styles.valueContent), children: jsx(Select.Value, { ref: ref, ...props, children: jsxs("div", { className: cx(styles.valueContent), children: [data.slice(0, visibleCount).map(item => (jsx(Chip, { leadingIcon: item.leadingIcon, children: typeof item.children === 'string' ? item.children : item.value }, item.value))), data.length > visibleCount && (jsxs(Text, { children: ["+", data.length - visibleCount] }))] }) }) }));
-});
+    return (jsxs("div", { ref: containerRef, className: cx(styles.valueContent), children: [data.slice(0, visibleCount).map(item => (jsx(Chip, { leadingIcon: item.leadingIcon, children: typeof item.children === 'string' ? item.children : item.value }, item.value))), data.length > visibleCount && jsxs(Text, { children: ["+", data.length - visibleCount] })] }));
+};
 
 export { SelectMultipleValue };
 //# sourceMappingURL=select-multiple-value.js.map

package/dist/components/select/select-multiple-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-multiple-value.js","sources":["../../../components/select/select-multiple-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport {\n  ElementRef,\n  forwardRef,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\nimport { Chip } from '../chip';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { ItemType } from './types';\n\ninterface SelectMultipleValueProps extends SelectPrimitive.SelectValueProps {\n  data: ItemType[];\n}\n\n/*\n * Approximate width calculation based on font size\n * Average character width is roughly 0.6 times the font size\n */\nconst calculateTextWidth = (text: string, fontSize: number = 11): number => {\n  const avgCharWidth = fontSize * 0.6;\n  return text.length * avgCharWidth;\n};\n\nexport const SelectMultipleValue = forwardRef<\n  ElementRef<typeof SelectPrimitive.Value>,\n  SelectMultipleValueProps\n>(({ data = [], ...props }, ref) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [visibleCount, setVisibleCount] = useState(data.length);\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current) return;\n\n    const resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        setContainerWidth(entry.contentRect.width - 70);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current || data.length === 0) return;\n\n    // Calculate chip widths based on text length and icon width\n    const chipWidths: number[] = data.map(item => {\n      const text =\n        typeof item.children === 'string' ? item.children : item.value;\n      const iconWidth = item.leadingIcon ? 16 : 0;\n      return calculateTextWidth(text) + 8 + iconWidth;\n    });\n\n    let totalWidth = 0;\n    let count = 0;\n\n    // Always show at least one chip\n    if (data.length > 0) {\n      count = 1;\n      totalWidth = chipWidths[0];\n    }\n\n    // Try to fit more chips\n    for (let i = 1; i < data.length; i++) {\n      const newWidth = totalWidth + chipWidths[i];\n      if (newWidth <= containerWidth) {\n        count++;\n        totalWidth = newWidth;\n      } else {\n        break;\n      }\n    }\n\n    setVisibleCount(count);\n  }, [data, containerWidth]);\n\n  return (\n    <div ref={containerRef} className={cx(styles.valueContent)}>\n      <SelectPrimitive.Value ref={ref} {...props}>\n        <div className={cx(styles.valueContent)}>\n          {data.slice(0, visibleCount).map(item => (\n            <Chip key={item.value} leadingIcon={item.leadingIcon}>\n              {typeof item.children === 'string' ? item.children : item.value}\n            </Chip>\n          ))}\n          {data.length > visibleCount && (\n            <Text>+{data.length - visibleCount}</Text>\n          )}\n        </div>\n      </SelectPrimitive.Value>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAoBA;;;AAGG;AACH;AACE;AACA;AACF;AAEa;AAIX;AACA;;;;;AAME;AACE;;;AAGF;AAEA;AACA;;;;;;;;AAUE;;AAEF;;;;AAMA;;AAEE;;;AAIF;;AAEE;AACE;;;;;;;;AAQN;;AAkBF;;"}
+{"version":3,"file":"select-multiple-value.js","sources":["../../../components/select/select-multiple-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { Chip } from '../chip';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { ItemType } from './types';\n\ninterface SelectMultipleValueProps {\n  data: ItemType[];\n}\n\n/*\n * Approximate width calculation based on font size\n * Average character width is roughly 0.6 times the font size\n */\nconst calculateTextWidth = (text: string, fontSize: number = 11): number => {\n  const avgCharWidth = fontSize * 0.6;\n  return text.length * avgCharWidth;\n};\n\nexport const SelectMultipleValue = ({\n  data = []\n}: SelectMultipleValueProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [visibleCount, setVisibleCount] = useState(data.length);\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current) return;\n\n    const resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        setContainerWidth(entry.contentRect.width - 70);\n      }\n    });\n\n    resizeObserver.observe(containerRef.current);\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current || data.length === 0) return;\n\n    const chipWidths: number[] = data.map(item => {\n      const text =\n        typeof item.children === 'string' ? item.children : item.value;\n      const iconWidth = item.leadingIcon ? 16 : 0;\n      return calculateTextWidth(text) + 8 + iconWidth;\n    });\n\n    let totalWidth = 0;\n    let count = 0;\n\n    if (data.length > 0) {\n      count = 1;\n      totalWidth = chipWidths[0];\n    }\n\n    for (let i = 1; i < data.length; i++) {\n      const newWidth = totalWidth + chipWidths[i];\n      if (newWidth <= containerWidth) {\n        count++;\n        totalWidth = newWidth;\n      } else {\n        break;\n      }\n    }\n\n    setVisibleCount(count);\n  }, [data, containerWidth]);\n\n  return (\n    <div ref={containerRef} className={cx(styles.valueContent)}>\n      {data.slice(0, visibleCount).map(item => (\n        <Chip key={item.value} leadingIcon={item.leadingIcon}>\n          {typeof item.children === 'string' ? item.children : item.value}\n        </Chip>\n      ))}\n      {data.length > visibleCount && <Text>+{data.length - visibleCount}</Text>}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAaA;;;AAGG;AACH;AACE;AACA;AACF;AAEa;AAGX;AACA;;;;;AAME;AACE;;;AAGF;AAEA;AACA;;;;;;;AASE;;AAEF;;;AAKA;;AAEE;;AAGF;;AAEE;AACE;;;;;;;;AAQN;AAEA;AAUF;;"}