@raystack/apsara 0.56.7 → 1.0.0-rc.1

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 { 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();
+function SelectGroup({ className, children, ...props }) {
+    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 }));
-});
-SelectGroup.displayName = Select.Group.displayName;
-const SelectLabel = forwardRef(({ className, ...props }, ref) => {
-    const { shouldFilter } = useSelectContext();
+    const GroupPrimitive = autocomplete
+        ? Combobox.Group
+        : Select.Group;
+    return (jsx(GroupPrimitive, { className: cx(styles.menugroup, className), ...props, children: children }));
+}
+SelectGroup.displayName = 'Select.Group';
+function SelectLabel({ className, ...props }) {
+    const { shouldFilter, autocomplete } = useSelectContext();
     if (shouldFilter)
         return null;
-    return (jsx(Select.Label, { ref: ref, className: cx(styles.label, className), ...props }));
-});
-SelectLabel.displayName = Select.Label.displayName;
-const SelectSeparator = forwardRef(({ className, ...props }, ref) => {
-    const { shouldFilter } = useSelectContext();
+    const LabelPrimitive = autocomplete
+        ? Combobox.GroupLabel
+        : Select.GroupLabel;
+    return jsx(LabelPrimitive, { className: cx(styles.label, className), ...props });
+}
+SelectLabel.displayName = 'Select.Label';
+function SelectSeparator({ className, ...props }) {
+    const { shouldFilter, autocomplete } = useSelectContext();
     if (shouldFilter)
         return null;
-    return (jsx(Select.Separator, { ref: ref, className: cx(styles.separator, className), ...props }));
-});
-SelectSeparator.displayName = Select.Separator.displayName;
+    const SeparatorPrimitive = autocomplete
+        ? Combobox.Separator
+        : Select.Separator;
+    return (jsx(SeparatorPrimitive, { className: cx(styles.separator, className), ...props }));
+}
+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, ReactNode } from 'react';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectGroupProps extends SelectPrimitive.Group.Props {}\n\nexport function SelectGroup({\n  className,\n  children,\n  ...props\n}: SelectGroupProps) {\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 className={cx(styles.menugroup, className)} {...props}>\n      {children}\n    </GroupPrimitive>\n  );\n}\nSelectGroup.displayName = 'Select.Group';\n\nexport interface SelectLabelProps extends SelectPrimitive.GroupLabel.Props {}\n\nexport function SelectLabel({ className, ...props }: SelectLabelProps) {\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 <LabelPrimitive className={cx(styles.label, className)} {...props} />;\n}\nSelectLabel.displayName = 'Select.Label';\n\nexport interface SelectSeparatorProps extends SelectPrimitive.Separator.Props {}\n\nexport function SelectSeparator({ className, ...props }: SelectSeparatorProps) {\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      className={cx(styles.separator, className)}\n      {...props}\n    />\n  );\n}\nSelectSeparator.displayName = 'Select.Separator';\n"],"names":[],"mappings":";;;;;;;;AAaM;;AAOJ;AAAkB;;;AAIhB;;AAOJ;AACA;AAIM;;AAGJ;AAAkB;;;AAIhB;AAEF;AACF;AACA;AAIM;;AAGJ;AAAkB;;;AAIhB;AAEF;AAMF;AACA;;"}

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;;"}

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

@@ -2,8 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('@ariakit/react');
-var radixUi = require('radix-ui');
+var react = require('@base-ui/react');
 var React = require('react');
 
 /*
@@ -24,92 +23,79 @@ const useSelectContext = () => {
         shouldFilter
     };
 };
-const SELECT_INTERNAL_VALUE = 'SELECT_INTERNAL_VALUE';
 const SelectRoot = (props) => {
-    const { children, value: providedValue, onValueChange, defaultValue, autocomplete, autocompleteMode = 'auto', searchValue: providedSearchValue, onSearch, defaultSearchValue = '', open: providedOpen, defaultOpen = false, onOpenChange, htmlAutoComplete, multiple = false, ...rest } = props;
+    const { children, value: providedValue, onValueChange, defaultValue, autocomplete, autocompleteMode = 'auto', searchValue: providedSearchValue, onSearch, defaultSearchValue = '', open: providedOpen, defaultOpen = false, onOpenChange, multiple = false, disabled, required, name, items: itemsProp, ...rest } = props;
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const [internalSearchValue, setInternalSearchValue] = React.useState(defaultSearchValue);
-    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-    const [items, setItems] = React.useState({});
-    const id = React.useId();
-    const isSelectionInProgress = React.useRef(false);
+    const [registeredItems, setRegisteredItems] = React.useState({});
     const computedValue = providedValue ?? internalValue;
     const searchValue = providedSearchValue ?? internalSearchValue;
-    const open = providedOpen ?? internalOpen;
-    const updateSelectionInProgress = React.useCallback((value) => {
-        isSelectionInProgress.current = value;
-    }, []);
-    const setValue = React.useCallback((value) => {
-        /*
-         * If the select is placed inside a form, onChange is called with an empty value
-         * WORKAROUND FOR ISSUE https://github.com/radix-ui/primitives/issues/3135
-         */
-        if (value === '')
-            return;
+    const handleValueChange = React.useCallback((value, _eventDetails) => {
+        setInternalValue(value);
         if (multiple) {
-            updateSelectionInProgress(true);
-            const set = new Set(Array.isArray(computedValue)
-                ? computedValue
-                : [computedValue ?? ''].filter(Boolean));
-            if (set.has(value))
-                set.delete(value);
-            else
-                set.add(value);
-            const newValue = Array.from(set);
-            setInternalValue(newValue);
-            onValueChange?.(newValue);
+            onValueChange?.(value);
         }
         else {
-            setInternalValue(value);
             onValueChange?.(value);
         }
-    }, [multiple, onValueChange, computedValue, updateSelectionInProgress]);
-    const setSearchValue = React.useCallback((value) => {
+    }, [multiple, onValueChange]);
+    const handleSearchValueChange = React.useCallback((value, _eventDetails) => {
         setInternalSearchValue(value);
         onSearch?.(value);
     }, [onSearch]);
-    const handleOpenChange = React.useCallback((value) => {
-        if (isSelectionInProgress.current)
-            return;
-        setInternalOpen(value);
-        onOpenChange?.(value);
+    const handleOpenChange = React.useCallback((open, _eventDetails) => {
+        onOpenChange?.(open);
     }, [onOpenChange]);
     const registerItem = React.useCallback(item => {
-        setItems(prev => ({ ...prev, [item.value]: item }));
+        setRegisteredItems(prev => ({ ...prev, [item.value]: item }));
     }, []);
     const unregisterItem = React.useCallback(value => {
-        setItems(prev => {
+        setRegisteredItems(prev => {
             const { [value]: _, ...rest } = prev;
             return rest;
         });
     }, []);
-    /*
-     * Radix internally shows the placeholder when the value is empty.
-     * This value is used to manage the internal value of Radix Select to make it work
-     */
-    const radixValue = React.useMemo(() => {
-        if (!computedValue)
-            return '';
-        if (typeof computedValue === 'string')
-            return computedValue;
-        if (Array.isArray(computedValue) && computedValue.length)
-            return `${SELECT_INTERNAL_VALUE}-${id}`;
-        return String(computedValue) ?? '';
-    }, [computedValue, id]);
-    const element = (jsxRuntime.jsx(react.ComboboxProvider, { resetValueOnHide: true, focusLoop: false, includesBaseElement: false, value: searchValue, setValue: setSearchValue, open: open, setOpen: handleOpenChange, children: children }));
-    return (jsxRuntime.jsx(SelectContext.Provider, { value: {
-            value: computedValue,
-            registerItem,
-            unregisterItem,
-            autocomplete,
-            autocompleteMode,
-            searchValue,
-            multiple,
-            items,
-            updateSelectionInProgress,
-            setValue
-        }, children: jsxRuntime.jsx(radixUi.Select.Root, { autoComplete: htmlAutoComplete, value: radixValue, onValueChange: setValue, open: open, onOpenChange: handleOpenChange, ...rest, children: autocomplete ? element : children }) }));
+    const contextValue = React.useMemo(() => ({
+        value: computedValue,
+        registerItem,
+        unregisterItem,
+        autocomplete,
+        autocompleteMode,
+        searchValue,
+        multiple,
+        items: registeredItems,
+        hasItems: !!itemsProp
+    }), [
+        computedValue,
+        registerItem,
+        unregisterItem,
+        autocomplete,
+        autocompleteMode,
+        searchValue,
+        multiple,
+        registeredItems,
+        itemsProp
+    ]);
+    const commonProps = {
+        value: providedValue,
+        defaultValue: defaultValue,
+        onValueChange: handleValueChange,
+        open: providedOpen,
+        defaultOpen,
+        onOpenChange: handleOpenChange,
+        multiple: multiple,
+        disabled,
+        modal: true,
+        ...rest
+    };
+    if (autocomplete) {
+        return (jsxRuntime.jsx(SelectContext, { value: contextValue, children: jsxRuntime.jsx(react.Combobox.Root, { ...commonProps, onInputValueChange: handleSearchValueChange, filter: itemsProp ? undefined : null, items: itemsProp, loopFocus: false, 
+                // @ts-ignore BaseUI types are not up to date
+                autoHighlight: 'always', children: children }) }));
+    }
+    return (jsxRuntime.jsx(SelectContext, { value: contextValue, children: jsxRuntime.jsx(react.Select.Root, { ...commonProps, required: required, name: name, children: children }) }));
 };
+SelectRoot.displayName = 'Select';
 
 exports.SelectRoot = SelectRoot;
 exports.useSelectContext = useSelectContext;

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

@@ -1 +1 @@
-{"version":3,"file":"select-root.cjs","sources":["../../../components/select/select-root.tsx"],"sourcesContent":["'use client';\n\nimport { ComboboxProvider } from '@ariakit/react';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport { ItemType } from './types';\n\ninterface CommonProps {\n  autocomplete?: boolean;\n  autocompleteMode?: 'auto' | 'manual';\n  searchValue?: string;\n  onSearch?: (value: string) => void;\n  defaultSearchValue?: string;\n}\n\ninterface SelectContextValue extends CommonProps {\n  value?: string | string[];\n  registerItem: (item: ItemType) => void;\n  unregisterItem: (value: string) => void;\n  multiple: boolean;\n  items: Record<string, ItemType>;\n  updateSelectionInProgress: (value: boolean) => void;\n  setValue: (value: string) => void;\n}\n\ninterface UseSelectContext extends SelectContextValue {\n  shouldFilter?: boolean;\n}\n\n/*\nRoot context to manage the Select control\n@remarks Only for internal usage.\n*/\nconst SelectContext = createContext<SelectContextValue | undefined>(undefined);\n\nexport const useSelectContext = (): UseSelectContext => {\n  const context = useContext(SelectContext);\n  if (!context) {\n    throw new Error('useSelectContext must be used within a SelectProvider');\n  }\n  const shouldFilter = !!(\n    context?.autocomplete &&\n    context?.autocompleteMode === 'auto' &&\n    context?.searchValue?.length\n  );\n  return {\n    ...context,\n    shouldFilter\n  };\n};\n\ninterface NormalSelectRootProps extends SelectPrimitive.SelectProps {\n  autocomplete?: false;\n  autocompleteMode?: never;\n  searchValue?: never;\n  onSearch?: never;\n  defaultSearchValue?: never;\n}\n\ninterface AutocompleteSelectRootProps\n  extends SelectPrimitive.SelectProps,\n    CommonProps {\n  autocomplete: true;\n}\n\nexport type BaseSelectProps = Omit<\n  NormalSelectRootProps | AutocompleteSelectRootProps,\n  'autoComplete' | 'value' | 'onValueChange' | 'defaultValue'\n> & {\n  htmlAutoComplete?: string;\n};\n\nexport interface SingleSelectProps extends BaseSelectProps {\n  multiple?: false;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  defaultValue?: string;\n}\n\nexport interface MultipleSelectProps extends BaseSelectProps {\n  multiple: true;\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  defaultValue?: string[];\n}\n\nexport type SelectRootProps = SingleSelectProps | MultipleSelectProps;\n\nconst SELECT_INTERNAL_VALUE = 'SELECT_INTERNAL_VALUE';\n\nexport const SelectRoot = (props: SelectRootProps) => {\n  const {\n    children,\n    value: providedValue,\n    onValueChange,\n    defaultValue,\n    autocomplete,\n    autocompleteMode = 'auto',\n    searchValue: providedSearchValue,\n    onSearch,\n    defaultSearchValue = '',\n    open: providedOpen,\n    defaultOpen = false,\n    onOpenChange,\n    htmlAutoComplete,\n    multiple = false,\n    ...rest\n  } = props;\n\n  const [internalValue, setInternalValue] = useState<\n    string | string[] | undefined\n  >(defaultValue);\n  const [internalSearchValue, setInternalSearchValue] =\n    useState(defaultSearchValue);\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const [items, setItems] = useState<SelectContextValue['items']>({});\n  const id = useId();\n  const isSelectionInProgress = useRef(false);\n\n  const computedValue = providedValue ?? internalValue;\n  const searchValue = providedSearchValue ?? internalSearchValue;\n  const open = providedOpen ?? internalOpen;\n\n  const updateSelectionInProgress = useCallback((value: boolean) => {\n    isSelectionInProgress.current = value;\n  }, []);\n\n  const setValue = useCallback(\n    (value: string) => {\n      /*\n       * If the select is placed inside a form, onChange is called with an empty value\n       * WORKAROUND FOR ISSUE https://github.com/radix-ui/primitives/issues/3135\n       */\n      if (value === '') return;\n\n      if (multiple) {\n        updateSelectionInProgress(true);\n        const set = new Set<string>(\n          Array.isArray(computedValue)\n            ? computedValue\n            : [computedValue ?? ''].filter(Boolean)\n        );\n\n        if (set.has(value)) set.delete(value);\n        else set.add(value);\n\n        const newValue = Array.from(set);\n\n        setInternalValue(newValue);\n        (onValueChange as MultipleSelectProps['onValueChange'])?.(newValue);\n      } else {\n        setInternalValue(value);\n        (onValueChange as SingleSelectProps['onValueChange'])?.(value);\n      }\n    },\n    [multiple, onValueChange, computedValue, updateSelectionInProgress]\n  );\n\n  const setSearchValue = useCallback(\n    (value: string) => {\n      setInternalSearchValue(value);\n      onSearch?.(value);\n    },\n    [onSearch]\n  );\n\n  const handleOpenChange = useCallback(\n    (value: boolean) => {\n      if (isSelectionInProgress.current) return;\n      setInternalOpen(value);\n      onOpenChange?.(value);\n    },\n    [onOpenChange]\n  );\n\n  const registerItem = useCallback<SelectContextValue['registerItem']>(item => {\n    setItems(prev => ({ ...prev, [item.value]: item }));\n  }, []);\n\n  const unregisterItem = useCallback<SelectContextValue['unregisterItem']>(\n    value => {\n      setItems(prev => {\n        const { [value]: _, ...rest } = prev;\n        return rest;\n      });\n    },\n    []\n  );\n\n  /*\n   * Radix internally shows the placeholder when the value is empty.\n   * This value is used to manage the internal value of Radix Select to make it work\n   */\n  const radixValue = useMemo(() => {\n    if (!computedValue) return '';\n    if (typeof computedValue === 'string') return computedValue;\n    if (Array.isArray(computedValue) && computedValue.length)\n      return `${SELECT_INTERNAL_VALUE}-${id}`;\n    return String(computedValue) ?? '';\n  }, [computedValue, id]);\n\n  const element = (\n    <ComboboxProvider\n      resetValueOnHide\n      focusLoop={false}\n      includesBaseElement={false}\n      value={searchValue}\n      setValue={setSearchValue}\n      open={open}\n      setOpen={handleOpenChange}\n    >\n      {children}\n    </ComboboxProvider>\n  );\n\n  return (\n    <SelectContext.Provider\n      value={{\n        value: computedValue,\n        registerItem,\n        unregisterItem,\n        autocomplete,\n        autocompleteMode,\n        searchValue,\n        multiple,\n        items,\n        updateSelectionInProgress,\n        setValue\n      }}\n    >\n      <SelectPrimitive.Root\n        autoComplete={htmlAutoComplete}\n        value={radixValue}\n        onValueChange={setValue}\n        open={open}\n        onOpenChange={handleOpenChange}\n        {...rest}\n      >\n        {autocomplete ? element : children}\n      </SelectPrimitive.Root>\n    </SelectContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAqCA;;;AAGE;AACF;AAEO;AACL;;AAEE;;AAEF;;AAGE;;AAGA;;;AAGJ;AAuCA;AAEa;;;;;;AA0BX;AACA;AAEA;AACA;AACA;AAEA;AACE;;AAGF;AAEI;;;AAGG;;;;;;AAOG;AACA;AAGJ;AAAoB;;AACf;;;AAKJ;;;;AAGA;;;AAMP;;AAGI;AACF;AAIF;;;;AAII;AACF;AAIF;;;AAIA;;AAGM;AACA;AACF;;AAKJ;;;AAGG;AACH;AACE;AAAoB;;AACmB;;AAErC;AACF;AACF;AAEA;AAcA;AAGM;;;;;;;;;;AAUD;AAcP;;;"}
+{"version":3,"file":"select-root.cjs","sources":["../../../components/select/select-root.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport {\n  createContext,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState\n} from 'react';\nimport { ItemType } from './types';\n\ninterface CommonProps {\n  autocomplete?: boolean;\n  autocompleteMode?: 'auto' | 'manual';\n  searchValue?: string;\n  onSearch?: (value: string) => void;\n  defaultSearchValue?: string;\n}\n\ninterface SelectContextValue extends CommonProps {\n  value?: string | string[];\n  registerItem: (item: ItemType) => void;\n  unregisterItem: (value: string) => void;\n  multiple: boolean;\n  items: Record<string, ItemType>;\n  hasItems?: boolean;\n}\n\ninterface UseSelectContext extends SelectContextValue {\n  shouldFilter?: boolean;\n}\n\n/*\nRoot context to manage the Select control\n@remarks Only for internal usage.\n*/\nconst SelectContext = createContext<SelectContextValue | undefined>(undefined);\n\nexport const useSelectContext = (): UseSelectContext => {\n  const context = useContext(SelectContext);\n  if (!context) {\n    throw new Error('useSelectContext must be used within a SelectProvider');\n  }\n  const shouldFilter = !!(\n    context?.autocomplete &&\n    context?.autocompleteMode === 'auto' &&\n    context?.searchValue?.length\n  );\n  return {\n    ...context,\n    shouldFilter\n  };\n};\n\ninterface BaseSelectProps extends CommonProps {\n  children?: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  items?: string[];\n}\n\nexport interface SingleSelectProps extends BaseSelectProps {\n  multiple?: false;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  defaultValue?: string;\n}\n\nexport interface MultipleSelectProps extends BaseSelectProps {\n  multiple: true;\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  defaultValue?: string[];\n}\n\nexport type SelectRootProps = SingleSelectProps | MultipleSelectProps;\n\nexport const SelectRoot = (props: SelectRootProps) => {\n  const {\n    children,\n    value: providedValue,\n    onValueChange,\n    defaultValue,\n    autocomplete,\n    autocompleteMode = 'auto',\n    searchValue: providedSearchValue,\n    onSearch,\n    defaultSearchValue = '',\n    open: providedOpen,\n    defaultOpen = false,\n    onOpenChange,\n    multiple = false,\n    disabled,\n    required,\n    name,\n    items: itemsProp,\n    ...rest\n  } = props;\n\n  const [internalValue, setInternalValue] = useState<\n    string | string[] | undefined\n  >(defaultValue);\n  const [internalSearchValue, setInternalSearchValue] =\n    useState(defaultSearchValue);\n  const [registeredItems, setRegisteredItems] = useState<\n    SelectContextValue['items']\n  >({});\n\n  const computedValue = providedValue ?? internalValue;\n  const searchValue = providedSearchValue ?? internalSearchValue;\n\n  const handleValueChange = useCallback(\n    (value: any, _eventDetails?: any) => {\n      setInternalValue(value);\n      if (multiple) {\n        (onValueChange as MultipleSelectProps['onValueChange'])?.(\n          value as string[]\n        );\n      } else {\n        (onValueChange as SingleSelectProps['onValueChange'])?.(\n          value as string\n        );\n      }\n    },\n    [multiple, onValueChange]\n  );\n\n  const handleSearchValueChange = useCallback(\n    (value: string, _eventDetails?: any) => {\n      setInternalSearchValue(value);\n      onSearch?.(value);\n    },\n    [onSearch]\n  );\n\n  const handleOpenChange = useCallback(\n    (open: boolean, _eventDetails?: any) => {\n      onOpenChange?.(open);\n    },\n    [onOpenChange]\n  );\n\n  const registerItem = useCallback<SelectContextValue['registerItem']>(item => {\n    setRegisteredItems(prev => ({ ...prev, [item.value]: item }));\n  }, []);\n\n  const unregisterItem = useCallback<SelectContextValue['unregisterItem']>(\n    value => {\n      setRegisteredItems(prev => {\n        const { [value]: _, ...rest } = prev;\n        return rest;\n      });\n    },\n    []\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      value: computedValue,\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      autocompleteMode,\n      searchValue,\n      multiple,\n      items: registeredItems,\n      hasItems: !!itemsProp\n    }),\n    [\n      computedValue,\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      autocompleteMode,\n      searchValue,\n      multiple,\n      registeredItems,\n      itemsProp\n    ]\n  );\n\n  const commonProps = {\n    value: providedValue as any,\n    defaultValue: defaultValue as any,\n    onValueChange: handleValueChange,\n    open: providedOpen,\n    defaultOpen,\n    onOpenChange: handleOpenChange,\n    multiple: multiple as any,\n    disabled,\n    modal: true as const,\n    ...rest\n  };\n\n  if (autocomplete) {\n    return (\n      <SelectContext value={contextValue}>\n        <ComboboxPrimitive.Root\n          {...commonProps}\n          onInputValueChange={handleSearchValueChange}\n          filter={itemsProp ? undefined : null}\n          items={itemsProp}\n          loopFocus={false}\n          // @ts-ignore BaseUI types are not up to date\n          autoHighlight='always'\n        >\n          {children}\n        </ComboboxPrimitive.Root>\n      </SelectContext>\n    );\n  }\n\n  return (\n    <SelectContext value={contextValue}>\n      <SelectPrimitive.Root {...commonProps} required={required} name={name}>\n        {children}\n      </SelectPrimitive.Root>\n    </SelectContext>\n  );\n};\n\nSelectRoot.displayName = 'Select';\n"],"names":[],"mappings":";;;;;;;AAqCA;;;AAGE;AACF;AAEO;AACL;;AAEE;;AAEF;;AAGE;;AAGA;;;AAGJ;AA6Ba;;;;;AA+BX;AACA;;;;AAMO;;;AAIA;;AAIL;;;AAOE;AACF;;AAME;AACF;AAIF;;;AAIA;;AAGM;AACA;AACF;;AAKJ;AAEI;;;;;;;AAOA;;AAED;;;;;;;;;;AAWA;AAGH;AACE;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;;AAIA;;AASM;;;AAeV;AAEA;;;"}

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

@@ -1,4 +1,4 @@
-import { Select as SelectPrimitive } from 'radix-ui';
+import { ReactNode } from 'react';
 import { ItemType } from './types';
 interface CommonProps {
     autocomplete?: boolean;
@@ -13,26 +13,22 @@ interface SelectContextValue extends CommonProps {
     unregisterItem: (value: string) => void;
     multiple: boolean;
     items: Record<string, ItemType>;
-    updateSelectionInProgress: (value: boolean) => void;
-    setValue: (value: string) => void;
+    hasItems?: boolean;
 }
 interface UseSelectContext extends SelectContextValue {
     shouldFilter?: boolean;
 }
 export declare const useSelectContext: () => UseSelectContext;
-interface NormalSelectRootProps extends SelectPrimitive.SelectProps {
-    autocomplete?: false;
-    autocompleteMode?: never;
-    searchValue?: never;
-    onSearch?: never;
-    defaultSearchValue?: never;
+interface BaseSelectProps extends CommonProps {
+    children?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    items?: string[];
 }
-interface AutocompleteSelectRootProps extends SelectPrimitive.SelectProps, CommonProps {
-    autocomplete: true;
-}
-export type BaseSelectProps = Omit<NormalSelectRootProps | AutocompleteSelectRootProps, 'autoComplete' | 'value' | 'onValueChange' | 'defaultValue'> & {
-    htmlAutoComplete?: string;
-};
 export interface SingleSelectProps extends BaseSelectProps {
     multiple?: false;
     value?: string;
@@ -46,6 +42,9 @@ export interface MultipleSelectProps extends BaseSelectProps {
     defaultValue?: string[];
 }
 export type SelectRootProps = SingleSelectProps | MultipleSelectProps;
-export declare const SelectRoot: (props: SelectRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectRoot: {
+    (props: SelectRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};
 //# sourceMappingURL=select-root.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-root.d.ts","sourceRoot":"","sources":["../../../components/select/select-root.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAUrD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,UAAU,kBAAmB,SAAQ,WAAW;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAChC,yBAAyB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,UAAU,gBAAiB,SAAQ,kBAAkB;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAQD,eAAO,MAAM,gBAAgB,QAAO,gBAcnC,CAAC;AAEF,UAAU,qBAAsB,SAAQ,eAAe,CAAC,WAAW;IACjE,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;AAED,UAAU,2BACR,SAAQ,eAAe,CAAC,WAAW,EACjC,WAAW;IACb,YAAY,EAAE,IAAI,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,qBAAqB,GAAG,2BAA2B,EACnD,cAAc,GAAG,OAAO,GAAG,eAAe,GAAG,cAAc,CAC5D,GAAG;IACF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAItE,eAAO,MAAM,UAAU,UAAW,eAAe,4CAwJhD,CAAC"}
+{"version":3,"file":"select-root.d.ts","sourceRoot":"","sources":["../../../components/select/select-root.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,UAAU,kBAAmB,SAAQ,WAAW;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAiB,SAAQ,kBAAkB;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAQD,eAAO,MAAM,gBAAgB,QAAO,gBAcnC,CAAC;AAEF,UAAU,eAAgB,SAAQ,WAAW;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEtE,eAAO,MAAM,UAAU;YAAW,eAAe;;CA8IhD,CAAC"}