@raystack/apsara 0.46.0-rc.3 → 0.46.0-rc.5

package/dist/v1/components/select/select-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-content.d.ts","sourceRoot":"","sources":["../../../../v1/components/select/select-content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAM1D,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,kBAAkB;IAC5E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,+GAsDzB,CAAC"}
+{"version":3,"file":"select-content.d.ts","sourceRoot":"","sources":["../../../../v1/components/select/select-content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAO1D,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,kBAAkB;IAC5E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,+GA2FzB,CAAC"}

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

@@ -1,18 +1,27 @@
 import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
-import { forwardRef } from 'react';
-import { Portal, Content as Content2, Viewport } from '../../node_modules/.pnpm/@radix-ui_react-select@2.2.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.js';
 import { Combobox } from '../../node_modules/.pnpm/@ariakit_react-core@0.4.16_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@ariakit/react-core/esm/combobox/combobox.js';
 import { ComboboxList } from '../../node_modules/.pnpm/@ariakit_react-core@0.4.16_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@ariakit/react-core/esm/__chunks/MAXQOH4L.js';
+import { Portal, Content as Content2, Viewport } from '../../node_modules/.pnpm/@radix-ui_react-select@2.2.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/.pnpm/@radix-ui_react-slot@1.0.2_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.js';
 import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
-import styles from './select.module.css.js';
+import { forwardRef, useCallback } from 'react';
 import { useSelectContext } from './select-root.js';
+import styles from './select.module.css.js';
 
-const SelectContent = forwardRef(({ className, children, position = "popper", searchPlaceholder = "Search...", sideOffset = 4, ...props }, ref) => {
-    const { autocomplete } = useSelectContext();
-    return (jsxRuntimeExports.jsx(Portal, { children: jsxRuntimeExports.jsx(Content2, { role: autocomplete ? "dialog" : undefined, ref: ref, position: position, sideOffset: sideOffset, className: cx(styles.content, className), ...props, children: jsxRuntimeExports.jsx(Viewport, { className: cx(styles.viewport, autocomplete && styles.comboboxViewport), children: autocomplete ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Combobox, { autoSelect: true, placeholder: searchPlaceholder, className: styles.comboboxInput, onBlurCapture: event => {
+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 (jsxRuntimeExports.jsx(Portal, { children: jsxRuntimeExports.jsx(Content2, { 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: jsxRuntimeExports.jsx(Viewport, { className: cx(styles.viewport, autocomplete && styles.comboboxViewport), asChild: !autocomplete ? asChild : undefined, children: autocomplete ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Combobox, { autoSelect: true, placeholder: searchPlaceholder, className: styles.comboboxInput, onBlurCapture: event => {
                                 event.preventDefault();
                                 event.stopPropagation();
-                            } }), jsxRuntimeExports.jsx(ComboboxList, { className: styles.comboboxContent, children: children })] })) : (children) }) }) }));
+                            } }), jsxRuntimeExports.jsx(ComboboxList, { className: styles.comboboxContent, "aria-multiselectable": multiple ? true : undefined, render: asChild ? jsxRuntimeExports.jsx($5e63c961fc1ce211$export$8c6ed5c666ac1360, {}) : undefined, children: children })] })) : (children) }) }) }));
 });
 SelectContent.displayName = Content2.displayName;
 

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

@@ -1 +1 @@
-{"version":3,"file":"select-content.js","sources":["../../../../v1/components/select/select-content.tsx"],"sourcesContent":["import { ElementRef, forwardRef } from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Combobox, ComboboxList } from \"@ariakit/react\";\nimport { cx } from \"class-variance-authority\";\nimport styles from \"./select.module.css\";\nimport { useSelectContext } from \"./select-root\";\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      ...props\n    },\n    ref,\n  ) => {\n    const { autocomplete } = useSelectContext();\n\n    return (\n      <SelectPrimitive.Portal>\n        <SelectPrimitive.Content\n          role={autocomplete ? \"dialog\" : undefined}\n          ref={ref}\n          position={position}\n          sideOffset={sideOffset}\n          className={cx(styles.content, className)}\n          {...props}>\n          <SelectPrimitive.Viewport\n            className={cx(\n              styles.viewport,\n              autocomplete && styles.comboboxViewport,\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 className={styles.comboboxContent}>\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":["_jsx","SelectPrimitive.Portal","SelectPrimitive.Content","SelectPrimitive.Viewport","_jsxs"],"mappings":";;;;;;;;;AAWO,MAAM,aAAa,GAAG,UAAU,CAIrC,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,QAAQ,EACnB,iBAAiB,GAAG,WAAW,EAC/B,UAAU,GAAG,CAAC,EACd,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE5C,QACEA,sBAACC,MAAsB,EACrB,EAAA,QAAA,EAAAD,qBAAA,CAACE,QAAuB,IACtB,IAAI,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,EACzC,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EAAA,GACpC,KAAK,EACT,QAAA,EAAAF,qBAAA,CAACG,QAAwB,IACvB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,QAAQ,EACf,YAAY,IAAI,MAAM,CAAC,gBAAgB,CACxC,YACA,YAAY,IACXC,gEACEJ,qBAAC,CAAA,QAAQ,IACP,UAAU,EAAA,IAAA,EACV,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,aAAa,EAAE,KAAK,IAAG;gCACrB,KAAK,CAAC,cAAc,EAAE,CAAC;gCACvB,KAAK,CAAC,eAAe,EAAE,CAAC;6BACzB,EAAA,CACD,EACFA,qBAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,eAAe,EAC5C,QAAA,EAAA,QAAQ,GACI,CACd,EAAA,CAAA,KAEH,QAAQ,CACT,EACwB,CAAA,EAAA,CACH,EACH,CAAA,EACzB;AACJ,CAAC,EACD;AACF,aAAa,CAAC,WAAW,GAAGE,QAAuB,CAAC,WAAW;;;;"}
+{"version":3,"file":"select-content.js","sources":["../../../../v1/components/select/select-content.tsx"],"sourcesContent":["import { Combobox, ComboboxList } from '@ariakit/react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cx } from 'class-variance-authority';\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 /> : 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":["_jsx","SelectPrimitive.Portal","SelectPrimitive.Content","SelectPrimitive.Viewport","_jsxs","_Fragment","Slot"],"mappings":";;;;;;;;;;AAYa,MAAA,aAAa,GAAG,UAAU,CAIrC,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,QAAQ,EACnB,iBAAiB,GAAG,WAAW,EAC/B,UAAU,GAAG,CAAC,EACd,OAAO,EACP,eAAe,EAAE,uBAAuB,EACxC,oBAAoB,EAAE,4BAA4B,EAClD,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,yBAAyB,EAAE,GACzD,gBAAgB,EAAE,CAAC;AAErB,IAAA,MAAM,oBAAoB,GAAG,WAAW,CAGtC,KAAK,IAAG;QACN,yBAAyB,CAAC,KAAK,CAAC,CAAC;AACjC,QAAA,4BAA4B,GAAG,KAAK,CAAC,CAAC;AACxC,KAAC,EACD,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,CAC1D,CAAC;AAEF,IAAA,MAAM,eAAe,GAAG,WAAW,CAGjC,KAAK,IAAG;QACN,yBAAyB,CAAC,KAAK,CAAC,CAAC;AACjC,QAAA,uBAAuB,GAAG,KAAK,CAAC,CAAC;AACnC,KAAC,EACD,CAAC,yBAAyB,EAAE,uBAAuB,CAAC,CACrD,CAAC;AAEF,IAAA,QACEA,qBAAA,CAACC,MAAsB,EACrB,EAAA,QAAA,EAAAD,qBAAA,CAACE,QAAuB,EACtB,EAAA,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EACxC,eAAe,EAAE,QAAQ,GAAG,eAAe,GAAG,uBAAuB,EACrE,oBAAoB,EAClB,QAAQ,GAAG,oBAAoB,GAAG,4BAA4B,EAEhE,IAAI,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,EACnB,sBAAA,EAAA,CAAC,YAAY,IAAI,QAAQ,GAAG,IAAI,GAAG,SAAS,0BAC5C,QAAQ,GAAG,IAAI,GAAG,SAAS,KAC7C,KAAK,EAAA,QAAA,EAETF,qBAAC,CAAAG,QAAwB,EAAA,EACvB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,QAAQ,EACf,YAAY,IAAI,MAAM,CAAC,gBAAgB,CACxC,EACD,OAAO,EAAE,CAAC,YAAY,GAAG,OAAO,GAAG,SAAS,YAE3C,YAAY,IACXC,sBACE,CAAAC,0BAAA,EAAA,EAAA,QAAA,EAAA,CAAAL,qBAAA,CAAC,QAAQ,EAAA,EACP,UAAU,EACV,IAAA,EAAA,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,aAAa,EAAE,KAAK,IAAG;gCACrB,KAAK,CAAC,cAAc,EAAE,CAAC;gCACvB,KAAK,CAAC,eAAe,EAAE,CAAC;6BACzB,EAAA,CACD,EACFA,qBAAC,CAAA,YAAY,IACX,SAAS,EAAE,MAAM,CAAC,eAAe,EAAA,sBAAA,EACX,QAAQ,GAAG,IAAI,GAAG,SAAS,EACjD,MAAM,EAAE,OAAO,GAAGA,sBAACM,yCAAI,EAAA,EAAA,CAAG,GAAG,SAAS,EAAA,QAAA,EAErC,QAAQ,EAAA,CACI,IACd,KAEH,QAAQ,CACT,EACwB,CAAA,EAAA,CACH,EACH,CAAA,EACzB;AACJ,CAAC,EACD;AACF,aAAa,CAAC,WAAW,GAAGJ,QAAuB,CAAC,WAAW;;;;"}

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

@@ -1,36 +1,37 @@
 'use strict';
 
 var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
-var React = require('react');
-var index = require('../../node_modules/.pnpm/@radix-ui_react-select@2.2.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.cjs');
 var JMHAJKUZ = require('../../node_modules/.pnpm/@ariakit_react-core@0.4.16_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@ariakit/react-core/esm/__chunks/JMHAJKUZ.cjs');
+var index = require('../../node_modules/.pnpm/@radix-ui_react-select@2.2.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.cjs');
 var index$1 = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
-var select_module = require('./select.module.css.cjs');
+var React = require('react');
+var checkbox = require('../checkbox/checkbox.cjs');
+var utils = require('../dropdown-menu/utils.cjs');
 var text = require('../text/text.cjs');
 var selectRoot = require('./select-root.cjs');
-var utils = require('../dropdown-menu/utils.cjs');
+var select_module = require('./select.module.css.cjs');
 
-const SelectItem = React.forwardRef(({ className, textProps = {}, children, value, leadingIcon, disabled, ...props }, ref) => {
-    const { registerIcon, unregisterIcon, autocomplete, searchValue, value: selectValue, shouldFilter, } = selectRoot.useSelectContext();
-    React.useEffect(() => {
-        if (!leadingIcon)
-            return;
-        registerIcon(value, leadingIcon);
-        return () => {
-            unregisterIcon(value);
-        };
-    }, [value, leadingIcon]);
-    const isSelected = value === selectValue.value;
+const SelectItem = React.forwardRef(({ className, children, value, leadingIcon, disabled, ...props }, ref) => {
+    const { registerItem, unregisterItem, autocomplete, searchValue, value: selectValue, shouldFilter, multiple } = selectRoot.useSelectContext();
+    const isSelected = multiple
+        ? selectValue?.includes(value)
+        : value === selectValue;
     const isMatched = utils.getMatch(value, children, searchValue);
     const isHidden = shouldFilter && isSelected && !isMatched;
+    const element = typeof children === 'string' ? (jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [leadingIcon && jsxRuntime.jsxRuntimeExports.jsx("div", { className: select_module.default.itemIcon, children: leadingIcon }), jsxRuntime.jsxRuntimeExports.jsx(text.Text, { children: children })] })) : (children);
+    React.useLayoutEffect(() => {
+        registerItem({ leadingIcon, children, value });
+        return () => {
+            unregisterItem(value);
+        };
+    }, [value, children, registerItem, unregisterItem, leadingIcon]);
     if (shouldFilter && !isMatched && !isSelected) {
         // Not selected and doesn't match search, so don't render at all
         return null;
     }
-    const element = (jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [leadingIcon && jsxRuntime.jsxRuntimeExports.jsx("div", { className: select_module.default.itemIcon, children: leadingIcon }), jsxRuntime.jsxRuntimeExports.jsx(index.ItemText, { children: jsxRuntime.jsxRuntimeExports.jsx(text.Text, { ...textProps, children: children }) })] }));
-    return (jsxRuntime.jsxRuntimeExports.jsx(index.Item, { ref: ref, value: value, className: index$1.cx(select_module.default.menuitem, className, isHidden && select_module.default.hidden), "data-hidden": isHidden, disabled: disabled || isHidden, asChild: autocomplete, ...props, children: autocomplete ? (jsxRuntime.jsxRuntimeExports.jsx(JMHAJKUZ.ComboboxItem, { onBlurCapture: event => {
+    return (jsxRuntime.jsxRuntimeExports.jsx(index.Item, { ref: ref, value: value, className: index$1.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.jsxRuntimeExports.jsxs(JMHAJKUZ.ComboboxItem, { clickOnEnter: false, clickOnSpace: false, onBlurCapture: event => {
                 event.preventDefault();
-            }, children: element })) : (element) }));
+            }, children: [multiple && jsxRuntime.jsxRuntimeExports.jsx(checkbox.Checkbox, { checked: isSelected }), element] })) : (jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [multiple && jsxRuntime.jsxRuntimeExports.jsx(checkbox.Checkbox, { checked: isSelected }), element] })) }));
 });
 SelectItem.displayName = index.Item.displayName;
 

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

@@ -1 +1 @@
-{"version":3,"file":"select-item.cjs","sources":["../../../../v1/components/select/select-item.tsx"],"sourcesContent":["import { ElementRef, forwardRef, useEffect } from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { ComboboxItem } from \"@ariakit/react\";\nimport { cx } from \"class-variance-authority\";\nimport styles from \"./select.module.css\";\nimport { Text, TextProps } from \"../text\";\nimport { useSelectContext } from \"./select-root\";\nimport { getMatch } from \"../dropdown-menu/utils\";\n\nexport const SelectItem = forwardRef<\n  ElementRef<typeof SelectPrimitive.Item>,\n  Omit<SelectPrimitive.SelectItemProps, \"asChild\"> & {\n    textProps?: TextProps;\n    leadingIcon?: React.ReactNode;\n  }\n>(\n  (\n    {\n      className,\n      textProps = {},\n      children,\n      value,\n      leadingIcon,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const {\n      registerIcon,\n      unregisterIcon,\n      autocomplete,\n      searchValue,\n      value: selectValue,\n      shouldFilter,\n    } = useSelectContext();\n\n    useEffect(() => {\n      if (!leadingIcon) return;\n\n      registerIcon(value, leadingIcon);\n      return () => {\n        unregisterIcon(value);\n      };\n    }, [value, leadingIcon]);\n\n    const isSelected = value === selectValue.value;\n    const isMatched = getMatch(value, children, searchValue);\n    const isHidden = shouldFilter && isSelected && !isMatched;\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    const element = (\n      <>\n        {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}\n        <SelectPrimitive.ItemText>\n          <Text {...textProps}>{children}</Text>\n        </SelectPrimitive.ItemText>\n      </>\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        {...props}>\n        {autocomplete ? (\n          <ComboboxItem\n            onBlurCapture={event => {\n              event.preventDefault();\n            }}>\n            {element}\n          </ComboboxItem>\n        ) : (\n          element\n        )}\n      </SelectPrimitive.Item>\n    );\n  },\n);\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"names":["forwardRef","useSelectContext","useEffect","getMatch","_jsxs","_Fragment","_jsx","styles","SelectPrimitive.ItemText","Text","SelectPrimitive.Item","cx","ComboboxItem"],"mappings":";;;;;;;;;;;;AASO,MAAM,UAAU,GAAGA,gBAAU,CAOlC,CACE,EACE,SAAS,EACT,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,KAAK,EACL,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,EACJ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EACX,KAAK,EAAE,WAAW,EAClB,YAAY,GACb,GAAGC,2BAAgB,EAAE,CAAC;IAEvBC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,WAAW;YAAE,OAAO;AAEzB,QAAA,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;AACjC,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,KAAK,CAAC,CAAC;AACxB,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;AAEzB,IAAA,MAAM,UAAU,GAAG,KAAK,KAAK,WAAW,CAAC,KAAK,CAAC;IAC/C,MAAM,SAAS,GAAGC,cAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,YAAY,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;IAE1D,IAAI,YAAY,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,EAAE;;AAE7C,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,MAAM,OAAO,IACXC,iCAAA,CAAAC,qCAAA,EAAA,EAAA,QAAA,EAAA,CACG,WAAW,IAAIC,gCAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,qBAAM,CAAC,QAAQ,YAAG,WAAW,EAAA,CAAO,EACpED,gCAAA,CAACE,cAAwB,EAAA,EAAA,QAAA,EACvBF,iCAACG,SAAI,EAAA,EAAA,GAAK,SAAS,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,EACb,CAAA,CAAA,EAAA,CAC1B,CACJ,CAAC;IAEF,QACEH,gCAAC,CAAAI,UAAoB,EACnB,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAEC,UAAE,CAACJ,qBAAM,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,IAAIA,qBAAM,CAAC,MAAM,CAAC,EAAA,aAAA,EACvD,QAAQ,EACrB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,OAAO,EAAE,YAAY,EAAA,GACjB,KAAK,EAAA,QAAA,EACR,YAAY,IACXD,gCAAA,CAACM,qBAAY,EAAA,EACX,aAAa,EAAE,KAAK,IAAG;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;AACzB,aAAC,EACA,QAAA,EAAA,OAAO,EACK,CAAA,KAEf,OAAO,CACR,EACoB,CAAA,EACvB;AACJ,CAAC,EACD;AACF,UAAU,CAAC,WAAW,GAAGF,UAAoB,CAAC,WAAW;;;;"}
+{"version":3,"file":"select-item.cjs","sources":["../../../../v1/components/select/select-item.tsx"],"sourcesContent":["import { ComboboxItem } from '@ariakit/react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { cx } from 'class-variance-authority';\nimport { ElementRef, forwardRef, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../dropdown-menu/utils';\nimport { Text } from '../text';\nimport { useSelectContext } from './select-root';\nimport styles from './select.module.css';\n\nexport const SelectItem = forwardRef<\n  ElementRef<typeof SelectPrimitive.Item>,\n  Omit<SelectPrimitive.SelectItemProps, 'asChild'> & {\n    leadingIcon?: React.ReactNode;\n  }\n>(({ className, children, value, leadingIcon, disabled, ...props }, ref) => {\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});\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"names":["forwardRef","useSelectContext","getMatch","_jsxs","_jsx","styles","Text","useLayoutEffect","SelectPrimitive.Item","cx","ComboboxItem","Checkbox","_Fragment"],"mappings":";;;;;;;;;;;;;AAUa,MAAA,UAAU,GAAGA,gBAAU,CAKlC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACzE,MAAM,EACJ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EACX,KAAK,EAAE,WAAW,EAClB,YAAY,EACZ,QAAQ,EACT,GAAGC,2BAAgB,EAAE,CAAC;IAEvB,MAAM,UAAU,GAAG,QAAQ;AACzB,UAAE,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC;AAC9B,UAAE,KAAK,KAAK,WAAW,CAAC;IAC1B,MAAM,SAAS,GAAGC,cAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,YAAY,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AAE1D,IAAA,MAAM,OAAO,GACX,OAAO,QAAQ,KAAK,QAAQ,IAC1BC,sFACG,WAAW,IAAIC,gCAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,qBAAM,CAAC,QAAQ,EAAA,QAAA,EAAG,WAAW,EAAO,CAAA,EACpED,gCAAC,CAAAE,SAAI,cAAE,QAAQ,EAAA,CAAQ,CACtB,EAAA,CAAA,KAEH,QAAQ,CACT,CAAC;IAEJC,qBAAe,CAAC,MAAK;QACnB,YAAY,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;AAC/C,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,KAAK,CAAC,CAAC;AACxB,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjE,IAAI,YAAY,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,EAAE;;AAE7C,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,QACEH,gCAAA,CAACI,UAAoB,EACnB,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAEC,UAAE,CAACJ,qBAAM,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,IAAIA,qBAAM,CAAC,MAAM,CAAC,EAAA,aAAA,EACvD,QAAQ,EACrB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,OAAO,EAAE,YAAY,EAAA,eAAA,EACN,UAAU,EAAA,cAAA,EACX,UAAU,EAAA,GACpB,KAAK,EAAA,QAAA,EAER,YAAY,IACXF,iCAAC,CAAAO,qBAAY,EACX,EAAA,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,KAAK,IAAG;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;AACzB,aAAC,EAEA,QAAA,EAAA,CAAA,QAAQ,IAAIN,gCAAA,CAACO,iBAAQ,EAAC,EAAA,OAAO,EAAE,UAAU,GAAI,EAC7C,OAAO,CACK,EAAA,CAAA,KAEfR,iCAAA,CAAAS,qCAAA,EAAA,EAAA,QAAA,EAAA,CACG,QAAQ,IAAIR,gCAAC,CAAAO,iBAAQ,IAAC,OAAO,EAAE,UAAU,EAAA,CAAI,EAC7C,OAAO,CAAA,EAAA,CACP,CACJ,EAAA,CACoB,EACvB;AACJ,CAAC,EAAE;AACH,UAAU,CAAC,WAAW,GAAGH,UAAoB,CAAC,WAAW;;;;"}

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

@@ -1,7 +1,5 @@
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { TextProps } from "../text";
+import * as SelectPrimitive from '@radix-ui/react-select';
 export declare const SelectItem: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps, "asChild"> & {
-    textProps?: TextProps | undefined;
     leadingIcon?: React.ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=select-item.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../../v1/components/select/select-item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAI1D,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,UAAU;;kBAIL,MAAM,SAAS;kDAyEhC,CAAC"}
+{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../../v1/components/select/select-item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAS1D,eAAO,MAAM,UAAU;kBAGL,MAAM,SAAS;kDAwE/B,CAAC"}

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

@@ -1,34 +1,35 @@
 import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
-import { forwardRef, useEffect } from 'react';
-import { ItemText, Item } from '../../node_modules/.pnpm/@radix-ui_react-select@2.2.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.js';
 import { ComboboxItem } from '../../node_modules/.pnpm/@ariakit_react-core@0.4.16_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@ariakit/react-core/esm/__chunks/JMHAJKUZ.js';
+import { Item } from '../../node_modules/.pnpm/@radix-ui_react-select@2.2.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.js';
 import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
-import styles from './select.module.css.js';
+import { forwardRef, useLayoutEffect } from 'react';
+import { Checkbox } from '../checkbox/checkbox.js';
+import { getMatch } from '../dropdown-menu/utils.js';
 import { Text } from '../text/text.js';
 import { useSelectContext } from './select-root.js';
-import { getMatch } from '../dropdown-menu/utils.js';
+import styles from './select.module.css.js';
 
-const SelectItem = forwardRef(({ className, textProps = {}, children, value, leadingIcon, disabled, ...props }, ref) => {
-    const { registerIcon, unregisterIcon, autocomplete, searchValue, value: selectValue, shouldFilter, } = useSelectContext();
-    useEffect(() => {
-        if (!leadingIcon)
-            return;
-        registerIcon(value, leadingIcon);
-        return () => {
-            unregisterIcon(value);
-        };
-    }, [value, leadingIcon]);
-    const isSelected = value === selectValue.value;
+const SelectItem = forwardRef(({ className, children, value, leadingIcon, disabled, ...props }, ref) => {
+    const { registerItem, unregisterItem, autocomplete, searchValue, value: selectValue, shouldFilter, multiple } = useSelectContext();
+    const isSelected = multiple
+        ? selectValue?.includes(value)
+        : value === selectValue;
     const isMatched = getMatch(value, children, searchValue);
     const isHidden = shouldFilter && isSelected && !isMatched;
+    const element = typeof children === 'string' ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [leadingIcon && jsxRuntimeExports.jsx("div", { className: styles.itemIcon, children: leadingIcon }), jsxRuntimeExports.jsx(Text, { children: children })] })) : (children);
+    useLayoutEffect(() => {
+        registerItem({ leadingIcon, children, value });
+        return () => {
+            unregisterItem(value);
+        };
+    }, [value, children, registerItem, unregisterItem, leadingIcon]);
     if (shouldFilter && !isMatched && !isSelected) {
         // Not selected and doesn't match search, so don't render at all
         return null;
     }
-    const element = (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [leadingIcon && jsxRuntimeExports.jsx("div", { className: styles.itemIcon, children: leadingIcon }), jsxRuntimeExports.jsx(ItemText, { children: jsxRuntimeExports.jsx(Text, { ...textProps, children: children }) })] }));
-    return (jsxRuntimeExports.jsx(Item, { ref: ref, value: value, className: cx(styles.menuitem, className, isHidden && styles.hidden), "data-hidden": isHidden, disabled: disabled || isHidden, asChild: autocomplete, ...props, children: autocomplete ? (jsxRuntimeExports.jsx(ComboboxItem, { onBlurCapture: event => {
+    return (jsxRuntimeExports.jsx(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 ? (jsxRuntimeExports.jsxs(ComboboxItem, { clickOnEnter: false, clickOnSpace: false, onBlurCapture: event => {
                 event.preventDefault();
-            }, children: element })) : (element) }));
+            }, children: [multiple && jsxRuntimeExports.jsx(Checkbox, { checked: isSelected }), element] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [multiple && jsxRuntimeExports.jsx(Checkbox, { checked: isSelected }), element] })) }));
 });
 SelectItem.displayName = Item.displayName;
 

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

@@ -1 +1 @@
-{"version":3,"file":"select-item.js","sources":["../../../../v1/components/select/select-item.tsx"],"sourcesContent":["import { ElementRef, forwardRef, useEffect } from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { ComboboxItem } from \"@ariakit/react\";\nimport { cx } from \"class-variance-authority\";\nimport styles from \"./select.module.css\";\nimport { Text, TextProps } from \"../text\";\nimport { useSelectContext } from \"./select-root\";\nimport { getMatch } from \"../dropdown-menu/utils\";\n\nexport const SelectItem = forwardRef<\n  ElementRef<typeof SelectPrimitive.Item>,\n  Omit<SelectPrimitive.SelectItemProps, \"asChild\"> & {\n    textProps?: TextProps;\n    leadingIcon?: React.ReactNode;\n  }\n>(\n  (\n    {\n      className,\n      textProps = {},\n      children,\n      value,\n      leadingIcon,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const {\n      registerIcon,\n      unregisterIcon,\n      autocomplete,\n      searchValue,\n      value: selectValue,\n      shouldFilter,\n    } = useSelectContext();\n\n    useEffect(() => {\n      if (!leadingIcon) return;\n\n      registerIcon(value, leadingIcon);\n      return () => {\n        unregisterIcon(value);\n      };\n    }, [value, leadingIcon]);\n\n    const isSelected = value === selectValue.value;\n    const isMatched = getMatch(value, children, searchValue);\n    const isHidden = shouldFilter && isSelected && !isMatched;\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    const element = (\n      <>\n        {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}\n        <SelectPrimitive.ItemText>\n          <Text {...textProps}>{children}</Text>\n        </SelectPrimitive.ItemText>\n      </>\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        {...props}>\n        {autocomplete ? (\n          <ComboboxItem\n            onBlurCapture={event => {\n              event.preventDefault();\n            }}>\n            {element}\n          </ComboboxItem>\n        ) : (\n          element\n        )}\n      </SelectPrimitive.Item>\n    );\n  },\n);\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"names":["_jsxs","_Fragment","_jsx","SelectPrimitive.ItemText","SelectPrimitive.Item"],"mappings":";;;;;;;;;;AASO,MAAM,UAAU,GAAG,UAAU,CAOlC,CACE,EACE,SAAS,EACT,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,KAAK,EACL,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,EACJ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EACX,KAAK,EAAE,WAAW,EAClB,YAAY,GACb,GAAG,gBAAgB,EAAE,CAAC;IAEvB,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,WAAW;YAAE,OAAO;AAEzB,QAAA,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;AACjC,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,KAAK,CAAC,CAAC;AACxB,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;AAEzB,IAAA,MAAM,UAAU,GAAG,KAAK,KAAK,WAAW,CAAC,KAAK,CAAC;IAC/C,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,YAAY,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;IAE1D,IAAI,YAAY,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,EAAE;;AAE7C,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,MAAM,OAAO,IACXA,sBAAA,CAAAC,0BAAA,EAAA,EAAA,QAAA,EAAA,CACG,WAAW,IAAIC,qBAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,QAAQ,YAAG,WAAW,EAAA,CAAO,EACpEA,qBAAA,CAACC,QAAwB,EAAA,EAAA,QAAA,EACvBD,sBAAC,IAAI,EAAA,EAAA,GAAK,SAAS,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,EACb,CAAA,CAAA,EAAA,CAC1B,CACJ,CAAC;IAEF,QACEA,qBAAC,CAAAE,IAAoB,EACnB,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,IAAI,MAAM,CAAC,MAAM,CAAC,EAAA,aAAA,EACvD,QAAQ,EACrB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,OAAO,EAAE,YAAY,EAAA,GACjB,KAAK,EAAA,QAAA,EACR,YAAY,IACXF,qBAAA,CAAC,YAAY,EAAA,EACX,aAAa,EAAE,KAAK,IAAG;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;AACzB,aAAC,EACA,QAAA,EAAA,OAAO,EACK,CAAA,KAEf,OAAO,CACR,EACoB,CAAA,EACvB;AACJ,CAAC,EACD;AACF,UAAU,CAAC,WAAW,GAAGE,IAAoB,CAAC,WAAW;;;;"}
+{"version":3,"file":"select-item.js","sources":["../../../../v1/components/select/select-item.tsx"],"sourcesContent":["import { ComboboxItem } from '@ariakit/react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { cx } from 'class-variance-authority';\nimport { ElementRef, forwardRef, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../dropdown-menu/utils';\nimport { Text } from '../text';\nimport { useSelectContext } from './select-root';\nimport styles from './select.module.css';\n\nexport const SelectItem = forwardRef<\n  ElementRef<typeof SelectPrimitive.Item>,\n  Omit<SelectPrimitive.SelectItemProps, 'asChild'> & {\n    leadingIcon?: React.ReactNode;\n  }\n>(({ className, children, value, leadingIcon, disabled, ...props }, ref) => {\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});\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"names":["_jsxs","_jsx","SelectPrimitive.Item","_Fragment"],"mappings":";;;;;;;;;;;AAUa,MAAA,UAAU,GAAG,UAAU,CAKlC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACzE,MAAM,EACJ,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EACX,KAAK,EAAE,WAAW,EAClB,YAAY,EACZ,QAAQ,EACT,GAAG,gBAAgB,EAAE,CAAC;IAEvB,MAAM,UAAU,GAAG,QAAQ;AACzB,UAAE,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC;AAC9B,UAAE,KAAK,KAAK,WAAW,CAAC;IAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,YAAY,IAAI,UAAU,IAAI,CAAC,SAAS,CAAC;AAE1D,IAAA,MAAM,OAAO,GACX,OAAO,QAAQ,KAAK,QAAQ,IAC1BA,gEACG,WAAW,IAAIC,qBAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,QAAA,EAAG,WAAW,EAAO,CAAA,EACpEA,qBAAC,CAAA,IAAI,cAAE,QAAQ,EAAA,CAAQ,CACtB,EAAA,CAAA,KAEH,QAAQ,CACT,CAAC;IAEJ,eAAe,CAAC,MAAK;QACnB,YAAY,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;AAC/C,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,KAAK,CAAC,CAAC;AACxB,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjE,IAAI,YAAY,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,EAAE;;AAE7C,QAAA,OAAO,IAAI,CAAC;KACb;AAED,IAAA,QACEA,qBAAA,CAACC,IAAoB,EACnB,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,IAAI,MAAM,CAAC,MAAM,CAAC,EAAA,aAAA,EACvD,QAAQ,EACrB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,OAAO,EAAE,YAAY,EAAA,eAAA,EACN,UAAU,EAAA,cAAA,EACX,UAAU,EAAA,GACpB,KAAK,EAAA,QAAA,EAER,YAAY,IACXF,sBAAC,CAAA,YAAY,EACX,EAAA,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,KAAK,IAAG;gBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;AACzB,aAAC,EAEA,QAAA,EAAA,CAAA,QAAQ,IAAIC,qBAAA,CAAC,QAAQ,EAAC,EAAA,OAAO,EAAE,UAAU,GAAI,EAC7C,OAAO,CACK,EAAA,CAAA,KAEfD,sBAAA,CAAAG,0BAAA,EAAA,EAAA,QAAA,EAAA,CACG,QAAQ,IAAIF,qBAAC,CAAA,QAAQ,IAAC,OAAO,EAAE,UAAU,EAAA,CAAI,EAC7C,OAAO,CAAA,EAAA,CACP,CACJ,EAAA,CACoB,EACvB;AACJ,CAAC,EAAE;AACH,UAAU,CAAC,WAAW,GAAGC,IAAoB,CAAC,WAAW;;;;"}

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

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var index$1 = require('../../node_modules/.pnpm/@radix-ui_react-select@2.2.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.cjs');
+var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
+var React = require('react');
+var chip = require('../chip/chip.cjs');
+var text = require('../text/text.cjs');
+var select_module = require('./select.module.css.cjs');
+
+/*
+ * Approximate width calculation based on font size
+ * Average character width is roughly 0.6 times the font size
+ */
+const calculateTextWidth = (text, fontSize = 11) => {
+    const avgCharWidth = fontSize * 0.6;
+    return text.length * avgCharWidth;
+};
+const SelectMultipleValue = React.forwardRef(({ data = [], ...props }, ref) => {
+    const containerRef = React.useRef(null);
+    const [visibleCount, setVisibleCount] = React.useState(data.length);
+    const [containerWidth, setContainerWidth] = React.useState(0);
+    React.useLayoutEffect(() => {
+        if (!containerRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                setContainerWidth(entry.contentRect.width - 70);
+            }
+        });
+        resizeObserver.observe(containerRef.current);
+        return () => resizeObserver.disconnect();
+    }, []);
+    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;
+            return calculateTextWidth(text) + 8 + iconWidth;
+        });
+        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) {
+                count++;
+                totalWidth = newWidth;
+            }
+            else {
+                break;
+            }
+        }
+        setVisibleCount(count);
+    }, [data, containerWidth]);
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { ref: containerRef, className: index.cx(select_module.default.valueContent), children: jsxRuntime.jsxRuntimeExports.jsx(index$1.Value, { ref: ref, ...props, children: jsxRuntime.jsxRuntimeExports.jsxs("div", { className: index.cx(select_module.default.valueContent), children: [data.slice(0, visibleCount).map(item => (jsxRuntime.jsxRuntimeExports.jsx(chip.Chip, { leadingIcon: item.leadingIcon, children: typeof item.children === 'string' ? item.children : item.value }, item.value))), data.length > visibleCount && (jsxRuntime.jsxRuntimeExports.jsxs(text.Text, { children: ["+", data.length - visibleCount] }))] }) }) }));
+});
+
+exports.SelectMultipleValue = SelectMultipleValue;
+//# sourceMappingURL=select-multiple-value.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-multiple-value.cjs","sources":["../../../../v1/components/select/select-multiple-value.tsx"],"sourcesContent":["import * as SelectPrimitive from '@radix-ui/react-select';\nimport { cx } from 'class-variance-authority';\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":["forwardRef","useRef","useState","useLayoutEffect","_jsx","cx","styles","SelectPrimitive.Value","_jsxs","Chip","Text"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-multiple-value.d.ts","sourceRoot":"","sources":["../../../../v1/components/select/select-multiple-value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAY1D,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"}

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

@@ -0,0 +1,65 @@
+import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { Value } from '../../node_modules/.pnpm/@radix-ui_react-select@2.2.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.js';
+import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
+import { forwardRef, useRef, useState, useLayoutEffect } from 'react';
+import { Chip } from '../chip/chip.js';
+import { Text } from '../text/text.js';
+import styles from './select.module.css.js';
+
+/*
+ * Approximate width calculation based on font size
+ * Average character width is roughly 0.6 times the font size
+ */
+const calculateTextWidth = (text, fontSize = 11) => {
+    const avgCharWidth = fontSize * 0.6;
+    return text.length * avgCharWidth;
+};
+const SelectMultipleValue = forwardRef(({ data = [], ...props }, ref) => {
+    const containerRef = useRef(null);
+    const [visibleCount, setVisibleCount] = useState(data.length);
+    const [containerWidth, setContainerWidth] = useState(0);
+    useLayoutEffect(() => {
+        if (!containerRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                setContainerWidth(entry.contentRect.width - 70);
+            }
+        });
+        resizeObserver.observe(containerRef.current);
+        return () => resizeObserver.disconnect();
+    }, []);
+    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;
+            return calculateTextWidth(text) + 8 + iconWidth;
+        });
+        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) {
+                count++;
+                totalWidth = newWidth;
+            }
+            else {
+                break;
+            }
+        }
+        setVisibleCount(count);
+    }, [data, containerWidth]);
+    return (jsxRuntimeExports.jsx("div", { ref: containerRef, className: cx(styles.valueContent), children: jsxRuntimeExports.jsx(Value, { ref: ref, ...props, children: jsxRuntimeExports.jsxs("div", { className: cx(styles.valueContent), children: [data.slice(0, visibleCount).map(item => (jsxRuntimeExports.jsx(Chip, { leadingIcon: item.leadingIcon, children: typeof item.children === 'string' ? item.children : item.value }, item.value))), data.length > visibleCount && (jsxRuntimeExports.jsxs(Text, { children: ["+", data.length - visibleCount] }))] }) }) }));
+});
+
+export { SelectMultipleValue };
+//# sourceMappingURL=select-multiple-value.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-multiple-value.js","sources":["../../../../v1/components/select/select-multiple-value.tsx"],"sourcesContent":["import * as SelectPrimitive from '@radix-ui/react-select';\nimport { cx } from 'class-variance-authority';\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":["_jsx","SelectPrimitive.Value","_jsxs"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
-var React = require('react');
 var comboboxProvider = require('../../node_modules/.pnpm/@ariakit_react-core@0.4.16_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@ariakit/react-core/esm/combobox/combobox-provider.cjs');
 var index = require('../../node_modules/.pnpm/@radix-ui_react-select@2.2.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-select/dist/index.cjs');
+var React = require('react');
 
 /*
 Root context to manage the Select control
@@ -13,53 +13,95 @@ const SelectContext = React.createContext(undefined);
 const useSelectContext = () => {
     const context = React.useContext(SelectContext);
     if (!context) {
-        throw new Error("useSelectContext must be used within a SelectProvider");
+        throw new Error('useSelectContext must be used within a SelectProvider');
     }
     const shouldFilter = !!(context?.autocomplete &&
-        context?.autocompleteMode === "auto" &&
+        context?.autocompleteMode === 'auto' &&
         context?.searchValue?.length);
     return {
         ...context,
-        shouldFilter,
+        shouldFilter
     };
 };
-const SelectRoot = ({ children, value, onValueChange, defaultValue, autocomplete, autocompleteMode = "auto", searchValue: providedSearchValue, onSearch, defaultSearchValue = "", open: controlledOpen, defaultOpen = false, onOpenChange, htmlAutoComplete, ...props }) => {
+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 [internalValue, setInternalValue] = React.useState(defaultValue);
     const [internalSearchValue, setInternalSearchValue] = React.useState(defaultSearchValue);
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-    const icons = React.useRef({});
-    const computedValue = value ?? internalValue;
-    const icon = computedValue && icons.current?.[computedValue];
+    const [items, setItems] = React.useState({});
+    const id = React.useId();
+    const isSelectionInProgress = React.useRef(false);
+    const computedValue = providedValue ?? internalValue;
     const searchValue = providedSearchValue ?? internalSearchValue;
-    const open = controlledOpen ?? internalOpen;
-    const setValue = React.useCallback((_value) => {
-        onValueChange?.(_value);
-        setInternalValue(_value);
-    }, [onValueChange]);
+    const open = providedOpen ?? internalOpen;
+    const updateSelectionInProgress = React.useCallback((value) => {
+        isSelectionInProgress.current = value;
+    }, []);
+    const setValue = React.useCallback((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);
+        }
+        else {
+            setInternalValue(value);
+            onValueChange?.(value);
+        }
+    }, [multiple, onValueChange, computedValue, updateSelectionInProgress]);
     const setSearchValue = React.useCallback((value) => {
         setInternalSearchValue(value);
         onSearch?.(value);
     }, [onSearch]);
     const handleOpenChange = React.useCallback((value) => {
+        if (isSelectionInProgress.current)
+            return;
         setInternalOpen(value);
         onOpenChange?.(value);
     }, [onOpenChange]);
-    const registerIcon = React.useCallback((value, icon) => {
-        icons.current = { ...icons.current, [value]: icon };
+    const registerItem = React.useCallback(item => {
+        setItems(prev => ({ ...prev, [item.value]: item }));
     }, []);
-    const unregisterIcon = React.useCallback(value => {
-        const { [value]: _, ...rest } = icons.current;
-        icons.current = rest;
+    const unregisterItem = React.useCallback(value => {
+        setItems(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 (computedValue.length)
+            return `${SELECT_INTERNAL_VALUE}-${id}`;
+        return '';
+    }, [computedValue, id]);
     const element = (jsxRuntime.jsxRuntimeExports.jsx(comboboxProvider.ComboboxProvider, { resetValueOnHide: true, focusLoop: false, includesBaseElement: false, value: searchValue, setValue: setSearchValue, open: open, setOpen: handleOpenChange, children: children }));
     return (jsxRuntime.jsxRuntimeExports.jsx(SelectContext.Provider, { value: {
-            registerIcon,
-            unregisterIcon,
-            value: { value: computedValue, icon },
+            value: computedValue,
+            registerItem,
+            unregisterItem,
             autocomplete,
             autocompleteMode,
             searchValue,
-        }, children: jsxRuntime.jsxRuntimeExports.jsx(index.Root, { autoComplete: htmlAutoComplete, value: computedValue, onValueChange: setValue, open: open, onOpenChange: handleOpenChange, ...props, children: autocomplete ? element : children }) }));
+            multiple,
+            items,
+            updateSelectionInProgress,
+            setValue
+        }, children: jsxRuntime.jsxRuntimeExports.jsx(index.Root, { autoComplete: htmlAutoComplete, value: radixValue, onValueChange: setValue, open: open, onOpenChange: handleOpenChange, ...rest, children: autocomplete ? element : children }) }));
 };
 
 exports.SelectRoot = SelectRoot;