@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.2

package/dist/components/scroll-area/scroll-area.js

@@ -2,13 +2,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './scroll-area.module.css.js';
 import { ScrollAreaScrollbar } from './scroll-area-scrollbar.js';
 
-const ScrollArea = forwardRef(({ className, type = 'hover', children, ...props }, ref) => {
-    return (jsxs(ScrollArea$1.Root, { ref: ref, className: cx(styles.root, className), ...props, children: [jsx(ScrollArea$1.Viewport, { className: styles.viewport, children: jsx(ScrollArea$1.Content, { children: children }) }), jsx(ScrollAreaScrollbar, { orientation: 'vertical', type: type }), jsx(ScrollAreaScrollbar, { orientation: 'horizontal', type: type }), jsx(ScrollArea$1.Corner, { className: styles.corner })] }));
-});
+function ScrollArea({ className, type = 'hover', children, ...props }) {
+    return (jsxs(ScrollArea$1.Root, { className: cx(styles.root, className), ...props, children: [jsx(ScrollArea$1.Viewport, { className: styles.viewport, children: jsx(ScrollArea$1.Content, { children: children }) }), jsx(ScrollAreaScrollbar, { orientation: 'vertical', type: type }), jsx(ScrollAreaScrollbar, { orientation: 'horizontal', type: type }), jsx(ScrollArea$1.Corner, { className: styles.corner })] }));
+}
 ScrollArea.displayName = 'ScrollArea';
 
 export { ScrollArea };

package/dist/components/scroll-area/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","sources":["../../../components/scroll-area/scroll-area.tsx"],"sourcesContent":["'use client';\n\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\nimport { cx } from 'class-variance-authority';\nimport { forwardRef } from 'react';\nimport styles from './scroll-area.module.css';\nimport { ScrollAreaScrollbar } from './scroll-area-scrollbar';\n\nexport type ScrollAreaType = 'always' | 'hover' | 'scroll';\n\nexport interface ScrollAreaProps extends ScrollAreaPrimitive.Root.Props {\n  type?: ScrollAreaType;\n}\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n  ({ className, type = 'hover', children, ...props }, ref) => {\n    return (\n      <ScrollAreaPrimitive.Root\n        ref={ref}\n        className={cx(styles.root, className)}\n        {...props}\n      >\n        <ScrollAreaPrimitive.Viewport className={styles.viewport}>\n          <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>\n        </ScrollAreaPrimitive.Viewport>\n        <ScrollAreaScrollbar orientation='vertical' type={type} />\n        <ScrollAreaScrollbar orientation='horizontal' type={type} />\n        <ScrollAreaPrimitive.Corner className={styles.corner} />\n      </ScrollAreaPrimitive.Root>\n    );\n  }\n);\n\nScrollArea.displayName = 'ScrollArea';\n"],"names":[],"mappings":";;;;;;;;;AAgBI;AAcF;AAGF;;"}
+{"version":3,"file":"scroll-area.js","sources":["../../../components/scroll-area/scroll-area.tsx"],"sourcesContent":["'use client';\n\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\nimport { cx } from 'class-variance-authority';\nimport styles from './scroll-area.module.css';\nimport { ScrollAreaScrollbar } from './scroll-area-scrollbar';\n\nexport type ScrollAreaType = 'always' | 'hover' | 'scroll';\n\nexport interface ScrollAreaProps extends ScrollAreaPrimitive.Root.Props {\n  type?: ScrollAreaType;\n}\n\nexport function ScrollArea({\n  className,\n  type = 'hover',\n  children,\n  ...props\n}: ScrollAreaProps) {\n  return (\n    <ScrollAreaPrimitive.Root className={cx(styles.root, className)} {...props}>\n      <ScrollAreaPrimitive.Viewport className={styles.viewport}>\n        <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollAreaScrollbar orientation='vertical' type={type} />\n      <ScrollAreaScrollbar orientation='horizontal' type={type} />\n      <ScrollAreaPrimitive.Corner className={styles.corner} />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nScrollArea.displayName = 'ScrollArea';\n"],"names":[],"mappings":";;;;;;;AAagB;AAMd;AAUF;AAEA;;"}

package/dist/components/search/search.cjs

@@ -5,18 +5,17 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactIcons = require('@radix-ui/react-icons');
 var iconButton = require('../icon-button/icon-button.cjs');
 var inputField = require('../input-field/input-field.cjs');
-var React = require('react');
 var search_module = require('./search.module.css.cjs');
 
-const Search = React.forwardRef(({ className, disabled, placeholder = 'Search', size, showClearButton, onClear, value, onChange, width = '100%', variant = 'default', ...props }, ref) => {
+function Search({ className, disabled, placeholder = 'Search', size, showClearButton, onClear, value, onChange, width = '100%', variant = 'default', ...props }) {
     const trailingIconWithClear = showClearButton && value ? (jsxRuntime.jsx("div", { className: search_module.default.clearButtonWrapper, children: jsxRuntime.jsx(iconButton.IconButton, { size: size === 'small' ? 2 : 3, onClick: e => {
                 e.stopPropagation();
                 if (!disabled && onClear) {
                     onClear();
                 }
             }, disabled: disabled, "aria-label": 'Clear search', className: search_module.default.clearButton, children: jsxRuntime.jsx(reactIcons.CrossCircledIcon, {}) }) })) : undefined;
-    return (jsxRuntime.jsx("div", { className: search_module.default.container, role: 'search', style: { width }, children: jsxRuntime.jsx(inputField.InputField, { leadingIcon: jsxRuntime.jsx(reactIcons.MagnifyingGlassIcon, {}), trailingIcon: trailingIconWithClear, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, size: size, className: className, "aria-label": placeholder, variant: variant, ref: ref, ...props }) }));
-});
+    return (jsxRuntime.jsx("div", { className: search_module.default.container, role: 'search', style: { width }, children: jsxRuntime.jsx(inputField.InputField, { leadingIcon: jsxRuntime.jsx(reactIcons.MagnifyingGlassIcon, {}), trailingIcon: trailingIconWithClear, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, size: size, className: className, "aria-label": placeholder, variant: variant, ...props }) }));
+}
 Search.displayName = 'Search';
 
 exports.Search = Search;

package/dist/components/search/search.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"search.cjs","sources":["../../../components/search/search.tsx"],"sourcesContent":["'use client';\n\nimport { CrossCircledIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';\nimport { IconButton } from '../icon-button';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\n\nimport { forwardRef } from 'react';\nimport styles from './search.module.css';\n\nexport interface SearchProps extends Omit<InputFieldProps, 'leadingIcon'> {\n  showClearButton?: boolean;\n  onClear?: () => void;\n  variant?: 'default' | 'borderless';\n}\n\nexport const Search = forwardRef<HTMLInputElement, SearchProps>(\n  (\n    {\n      className,\n      disabled,\n      placeholder = 'Search',\n      size,\n      showClearButton,\n      onClear,\n      value,\n      onChange,\n      width = '100%',\n      variant = 'default',\n      ...props\n    }: SearchProps,\n    ref\n  ) => {\n    const trailingIconWithClear =\n      showClearButton && value ? (\n        <div className={styles.clearButtonWrapper}>\n          <IconButton\n            size={size === 'small' ? 2 : 3}\n            onClick={e => {\n              e.stopPropagation();\n              if (!disabled && onClear) {\n                onClear();\n              }\n            }}\n            disabled={disabled}\n            aria-label='Clear search'\n            className={styles.clearButton}\n          >\n            <CrossCircledIcon />\n          </IconButton>\n        </div>\n      ) : undefined;\n\n    return (\n      <div className={styles.container} role='search' style={{ width }}>\n        <InputField\n          leadingIcon={<MagnifyingGlassIcon />}\n          trailingIcon={trailingIconWithClear}\n          placeholder={placeholder}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n          size={size}\n          className={className}\n          aria-label={placeholder}\n          variant={variant}\n          ref={ref}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nSearch.displayName = 'Search';\n"],"names":[],"mappings":";;;;;;;;;;AAgBa;AAiBT;;AAOU;AACE;;;AAYZ;AAkBF;AAGF;;"}
+{"version":3,"file":"search.cjs","sources":["../../../components/search/search.tsx"],"sourcesContent":["'use client';\n\nimport { CrossCircledIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';\nimport { IconButton } from '../icon-button';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\n\nimport styles from './search.module.css';\n\nexport interface SearchProps extends Omit<InputFieldProps, 'leadingIcon'> {\n  showClearButton?: boolean;\n  onClear?: () => void;\n  variant?: 'default' | 'borderless';\n}\n\nexport function Search({\n  className,\n  disabled,\n  placeholder = 'Search',\n  size,\n  showClearButton,\n  onClear,\n  value,\n  onChange,\n  width = '100%',\n  variant = 'default',\n  ...props\n}: SearchProps) {\n  const trailingIconWithClear =\n    showClearButton && value ? (\n      <div className={styles.clearButtonWrapper}>\n        <IconButton\n          size={size === 'small' ? 2 : 3}\n          onClick={e => {\n            e.stopPropagation();\n            if (!disabled && onClear) {\n              onClear();\n            }\n          }}\n          disabled={disabled}\n          aria-label='Clear search'\n          className={styles.clearButton}\n        >\n          <CrossCircledIcon />\n        </IconButton>\n      </div>\n    ) : undefined;\n\n  return (\n    <div className={styles.container} role='search' style={{ width }}>\n      <InputField\n        leadingIcon={<MagnifyingGlassIcon />}\n        trailingIcon={trailingIconWithClear}\n        placeholder={placeholder}\n        disabled={disabled}\n        value={value}\n        onChange={onChange}\n        size={size}\n        className={className}\n        aria-label={placeholder}\n        variant={variant}\n        {...props}\n      />\n    </div>\n  );\n}\n\nSearch.displayName = 'Search';\n"],"names":[],"mappings":";;;;;;;;;AAegB;AAad;;AAOU;AACE;;;AAYZ;AAiBF;AAEA;;"}

package/dist/components/search/search.d.ts

@@ -4,5 +4,8 @@ export interface SearchProps extends Omit<InputFieldProps, 'leadingIcon'> {
     onClear?: () => void;
     variant?: 'default' | 'borderless';
 }
-export declare const Search: import("react").ForwardRefExoticComponent<SearchProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function Search({ className, disabled, placeholder, size, showClearButton, onClear, value, onChange, width, variant, ...props }: SearchProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Search {
+    var displayName: string;
+}
 //# sourceMappingURL=search.d.ts.map

package/dist/components/search/search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../components/search/search.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAK7D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC;IACvE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACpC;AAED,eAAO,MAAM,MAAM,0GAwDlB,CAAC"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../components/search/search.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAI7D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC;IACvE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACpC;AAED,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,WAAsB,EACtB,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAc,EACd,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,WAAW,2CAsCb;yBAlDe,MAAM"}

package/dist/components/search/search.js

@@ -3,18 +3,17 @@ import { jsx } from 'react/jsx-runtime';
 import { CrossCircledIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { IconButton } from '../icon-button/icon-button.js';
 import { InputField } from '../input-field/input-field.js';
-import { forwardRef } from 'react';
 import styles from './search.module.css.js';
 
-const Search = forwardRef(({ className, disabled, placeholder = 'Search', size, showClearButton, onClear, value, onChange, width = '100%', variant = 'default', ...props }, ref) => {
+function Search({ className, disabled, placeholder = 'Search', size, showClearButton, onClear, value, onChange, width = '100%', variant = 'default', ...props }) {
     const trailingIconWithClear = showClearButton && value ? (jsx("div", { className: styles.clearButtonWrapper, children: jsx(IconButton, { size: size === 'small' ? 2 : 3, onClick: e => {
                 e.stopPropagation();
                 if (!disabled && onClear) {
                     onClear();
                 }
             }, disabled: disabled, "aria-label": 'Clear search', className: styles.clearButton, children: jsx(CrossCircledIcon, {}) }) })) : undefined;
-    return (jsx("div", { className: styles.container, role: 'search', style: { width }, children: jsx(InputField, { leadingIcon: jsx(MagnifyingGlassIcon, {}), trailingIcon: trailingIconWithClear, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, size: size, className: className, "aria-label": placeholder, variant: variant, ref: ref, ...props }) }));
-});
+    return (jsx("div", { className: styles.container, role: 'search', style: { width }, children: jsx(InputField, { leadingIcon: jsx(MagnifyingGlassIcon, {}), trailingIcon: trailingIconWithClear, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, size: size, className: className, "aria-label": placeholder, variant: variant, ...props }) }));
+}
 Search.displayName = 'Search';
 
 export { Search };

package/dist/components/search/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","sources":["../../../components/search/search.tsx"],"sourcesContent":["'use client';\n\nimport { CrossCircledIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';\nimport { IconButton } from '../icon-button';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\n\nimport { forwardRef } from 'react';\nimport styles from './search.module.css';\n\nexport interface SearchProps extends Omit<InputFieldProps, 'leadingIcon'> {\n  showClearButton?: boolean;\n  onClear?: () => void;\n  variant?: 'default' | 'borderless';\n}\n\nexport const Search = forwardRef<HTMLInputElement, SearchProps>(\n  (\n    {\n      className,\n      disabled,\n      placeholder = 'Search',\n      size,\n      showClearButton,\n      onClear,\n      value,\n      onChange,\n      width = '100%',\n      variant = 'default',\n      ...props\n    }: SearchProps,\n    ref\n  ) => {\n    const trailingIconWithClear =\n      showClearButton && value ? (\n        <div className={styles.clearButtonWrapper}>\n          <IconButton\n            size={size === 'small' ? 2 : 3}\n            onClick={e => {\n              e.stopPropagation();\n              if (!disabled && onClear) {\n                onClear();\n              }\n            }}\n            disabled={disabled}\n            aria-label='Clear search'\n            className={styles.clearButton}\n          >\n            <CrossCircledIcon />\n          </IconButton>\n        </div>\n      ) : undefined;\n\n    return (\n      <div className={styles.container} role='search' style={{ width }}>\n        <InputField\n          leadingIcon={<MagnifyingGlassIcon />}\n          trailingIcon={trailingIconWithClear}\n          placeholder={placeholder}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n          size={size}\n          className={className}\n          aria-label={placeholder}\n          variant={variant}\n          ref={ref}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nSearch.displayName = 'Search';\n"],"names":[],"mappings":";;;;;;;;AAgBa;AAiBT;;AAOU;AACE;;;AAYZ;AAkBF;AAGF;;"}
+{"version":3,"file":"search.js","sources":["../../../components/search/search.tsx"],"sourcesContent":["'use client';\n\nimport { CrossCircledIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';\nimport { IconButton } from '../icon-button';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\n\nimport styles from './search.module.css';\n\nexport interface SearchProps extends Omit<InputFieldProps, 'leadingIcon'> {\n  showClearButton?: boolean;\n  onClear?: () => void;\n  variant?: 'default' | 'borderless';\n}\n\nexport function Search({\n  className,\n  disabled,\n  placeholder = 'Search',\n  size,\n  showClearButton,\n  onClear,\n  value,\n  onChange,\n  width = '100%',\n  variant = 'default',\n  ...props\n}: SearchProps) {\n  const trailingIconWithClear =\n    showClearButton && value ? (\n      <div className={styles.clearButtonWrapper}>\n        <IconButton\n          size={size === 'small' ? 2 : 3}\n          onClick={e => {\n            e.stopPropagation();\n            if (!disabled && onClear) {\n              onClear();\n            }\n          }}\n          disabled={disabled}\n          aria-label='Clear search'\n          className={styles.clearButton}\n        >\n          <CrossCircledIcon />\n        </IconButton>\n      </div>\n    ) : undefined;\n\n  return (\n    <div className={styles.container} role='search' style={{ width }}>\n      <InputField\n        leadingIcon={<MagnifyingGlassIcon />}\n        trailingIcon={trailingIconWithClear}\n        placeholder={placeholder}\n        disabled={disabled}\n        value={value}\n        onChange={onChange}\n        size={size}\n        className={className}\n        aria-label={placeholder}\n        variant={variant}\n        {...props}\n      />\n    </div>\n  );\n}\n\nSearch.displayName = 'Search';\n"],"names":[],"mappings":";;;;;;;AAegB;AAad;;AAOU;AACE;;;AAYZ;AAiBF;AAEA;;"}

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

@@ -4,17 +4,16 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@base-ui/react');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var select_module = require('./select.module.css.cjs');
 var selectRoot = require('./select-root.cjs');
 
-const SelectContent = React.forwardRef(({ className, children, searchPlaceholder = 'Search...', sideOffset = 4, ...props }, ref) => {
+function SelectContent({ className, children, searchPlaceholder = 'Search...', sideOffset = 4, ...props }) {
     const { autocomplete, multiple } = selectRoot.useSelectContext();
     if (autocomplete) {
-        return (jsxRuntime.jsx(react.Combobox.Portal, { children: jsxRuntime.jsx(react.Combobox.Positioner, { sideOffset: sideOffset, className: select_module.default.positioner, children: jsxRuntime.jsxs(react.Combobox.Popup, { ref: ref, className: classVarianceAuthority.cx(select_module.default.content, className), "data-multiselectable": multiple ? true : undefined, ...props, children: [jsxRuntime.jsx(react.Combobox.Input, { placeholder: searchPlaceholder, className: select_module.default.comboboxInput }), jsxRuntime.jsx(react.Combobox.List, { className: select_module.default.comboboxContent, "aria-multiselectable": multiple ? true : undefined, children: children })] }) }) }));
+        return (jsxRuntime.jsx(react.Combobox.Portal, { children: jsxRuntime.jsx(react.Combobox.Positioner, { sideOffset: sideOffset, className: select_module.default.positioner, children: jsxRuntime.jsxs(react.Combobox.Popup, { className: classVarianceAuthority.cx(select_module.default.content, className), "data-multiselectable": multiple ? true : undefined, ...props, children: [jsxRuntime.jsx(react.Combobox.Input, { placeholder: searchPlaceholder, className: select_module.default.comboboxInput }), jsxRuntime.jsx(react.Combobox.List, { className: select_module.default.comboboxContent, "aria-multiselectable": multiple ? true : undefined, children: children })] }) }) }));
     }
-    return (jsxRuntime.jsx(react.Select.Positioner, { sideOffset: sideOffset, className: select_module.default.positioner, alignItemWithTrigger: false, children: jsxRuntime.jsx(react.Select.Popup, { ref: ref, className: classVarianceAuthority.cx(select_module.default.content, className), "data-multiselectable": multiple ? true : undefined, ...props, children: jsxRuntime.jsx(react.Select.List, { className: select_module.default.viewport, children: children }) }) }));
-});
+    return (jsxRuntime.jsx(react.Select.Positioner, { sideOffset: sideOffset, className: select_module.default.positioner, alignItemWithTrigger: false, children: jsxRuntime.jsx(react.Select.Popup, { className: classVarianceAuthority.cx(select_module.default.content, className), "data-multiselectable": multiple ? true : undefined, ...props, children: jsxRuntime.jsx(react.Select.List, { className: select_module.default.viewport, children: children }) }) }));
+}
 SelectContent.displayName = 'Select.Content';
 
 exports.SelectContent = SelectContent;

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

@@ -1 +1 @@
-{"version":3,"file":"select-content.cjs","sources":["../../../components/select/select-content.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { forwardRef, ReactNode } from 'react';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectContentProps {\n  className?: string;\n  children?: ReactNode;\n  searchPlaceholder?: string;\n  sideOffset?: number;\n  style?: React.CSSProperties;\n}\n\nexport const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      className,\n      children,\n      searchPlaceholder = 'Search...',\n      sideOffset = 4,\n      ...props\n    },\n    ref\n  ) => {\n    const { autocomplete, multiple } = useSelectContext();\n\n    if (autocomplete) {\n      return (\n        <ComboboxPrimitive.Portal>\n          <ComboboxPrimitive.Positioner\n            sideOffset={sideOffset}\n            className={styles.positioner}\n          >\n            <ComboboxPrimitive.Popup\n              ref={ref}\n              className={cx(styles.content, className)}\n              data-multiselectable={multiple ? true : undefined}\n              {...props}\n            >\n              <ComboboxPrimitive.Input\n                placeholder={searchPlaceholder}\n                className={styles.comboboxInput}\n              />\n              <ComboboxPrimitive.List\n                className={styles.comboboxContent}\n                aria-multiselectable={multiple ? true : undefined}\n              >\n                {children}\n              </ComboboxPrimitive.List>\n            </ComboboxPrimitive.Popup>\n          </ComboboxPrimitive.Positioner>\n        </ComboboxPrimitive.Portal>\n      );\n    }\n\n    return (\n      <SelectPrimitive.Positioner\n        sideOffset={sideOffset}\n        className={styles.positioner}\n        alignItemWithTrigger={false}\n      >\n        <SelectPrimitive.Popup\n          ref={ref}\n          className={cx(styles.content, className)}\n          data-multiselectable={multiple ? true : undefined}\n          {...props}\n        >\n          <SelectPrimitive.List className={styles.viewport}>\n            {children}\n          </SelectPrimitive.List>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    );\n  }\n);\nSelectContent.displayName = 'Select.Content';\n"],"names":[],"mappings":";;;;;;;;;;AAmBa;;;;;AA0CT;AAkBF;AAEF;;"}
+{"version":3,"file":"select-content.cjs","sources":["../../../components/select/select-content.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectContentProps\n  extends Omit<\n      SelectPrimitive.Positioner.Props,\n      'render' | 'className' | 'style' | 'ref'\n    >,\n    SelectPrimitive.Popup.Props {\n  searchPlaceholder?: string;\n}\n\nexport function SelectContent({\n  className,\n  children,\n  searchPlaceholder = 'Search...',\n  sideOffset = 4,\n  ...props\n}: SelectContentProps) {\n  const { autocomplete, multiple } = useSelectContext();\n\n  if (autocomplete) {\n    return (\n      <ComboboxPrimitive.Portal>\n        <ComboboxPrimitive.Positioner\n          sideOffset={sideOffset}\n          className={styles.positioner}\n        >\n          <ComboboxPrimitive.Popup\n            className={cx(styles.content, className)}\n            data-multiselectable={multiple ? true : undefined}\n            {...props}\n          >\n            <ComboboxPrimitive.Input\n              placeholder={searchPlaceholder}\n              className={styles.comboboxInput}\n            />\n            <ComboboxPrimitive.List\n              className={styles.comboboxContent}\n              aria-multiselectable={multiple ? true : undefined}\n            >\n              {children}\n            </ComboboxPrimitive.List>\n          </ComboboxPrimitive.Popup>\n        </ComboboxPrimitive.Positioner>\n      </ComboboxPrimitive.Portal>\n    );\n  }\n\n  return (\n    <SelectPrimitive.Positioner\n      sideOffset={sideOffset}\n      className={styles.positioner}\n      alignItemWithTrigger={false}\n    >\n      <SelectPrimitive.Popup\n        className={cx(styles.content, className)}\n        data-multiselectable={multiple ? true : undefined}\n        {...props}\n      >\n        <SelectPrimitive.List className={styles.viewport}>\n          {children}\n        </SelectPrimitive.List>\n      </SelectPrimitive.Popup>\n    </SelectPrimitive.Positioner>\n  );\n}\nSelectContent.displayName = 'Select.Content';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAwDE;AAiBF;AACA;;"}

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

@@ -1,10 +1,9 @@
-import { ReactNode } from 'react';
-export interface SelectContentProps {
-    className?: string;
-    children?: ReactNode;
+import { Select as SelectPrimitive } from '@base-ui/react';
+export interface SelectContentProps extends Omit<SelectPrimitive.Positioner.Props, 'render' | 'className' | 'style' | 'ref'>, SelectPrimitive.Popup.Props {
     searchPlaceholder?: string;
-    sideOffset?: number;
-    style?: React.CSSProperties;
 }
-export declare const SelectContent: import("react").ForwardRefExoticComponent<SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function SelectContent({ className, children, searchPlaceholder, sideOffset, ...props }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectContent {
+    var displayName: string;
+}
 //# sourceMappingURL=select-content.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-content.d.ts","sourceRoot":"","sources":["../../../components/select/select-content.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,+GA6DzB,CAAC"}
+{"version":3,"file":"select-content.d.ts","sourceRoot":"","sources":["../../../components/select/select-content.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,MAAM,IAAI,eAAe,EAC1B,MAAM,gBAAgB,CAAC;AAKxB,MAAM,WAAW,kBACf,SAAQ,IAAI,CACR,eAAe,CAAC,UAAU,CAAC,KAAK,EAChC,QAAQ,GAAG,WAAW,GAAG,OAAO,GAAG,KAAK,CACzC,EACD,eAAe,CAAC,KAAK,CAAC,KAAK;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,iBAA+B,EAC/B,UAAc,EACd,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAgDpB;yBAtDe,aAAa"}

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

@@ -2,17 +2,16 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Combobox, Select } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './select.module.css.js';
 import { useSelectContext } from './select-root.js';
 
-const SelectContent = forwardRef(({ className, children, searchPlaceholder = 'Search...', sideOffset = 4, ...props }, ref) => {
+function SelectContent({ className, children, searchPlaceholder = 'Search...', sideOffset = 4, ...props }) {
     const { autocomplete, multiple } = useSelectContext();
     if (autocomplete) {
-        return (jsx(Combobox.Portal, { children: jsx(Combobox.Positioner, { sideOffset: sideOffset, className: styles.positioner, children: jsxs(Combobox.Popup, { ref: ref, className: cx(styles.content, className), "data-multiselectable": multiple ? true : undefined, ...props, children: [jsx(Combobox.Input, { placeholder: searchPlaceholder, className: styles.comboboxInput }), jsx(Combobox.List, { className: styles.comboboxContent, "aria-multiselectable": multiple ? true : undefined, children: children })] }) }) }));
+        return (jsx(Combobox.Portal, { children: jsx(Combobox.Positioner, { sideOffset: sideOffset, className: styles.positioner, children: jsxs(Combobox.Popup, { className: cx(styles.content, className), "data-multiselectable": multiple ? true : undefined, ...props, children: [jsx(Combobox.Input, { placeholder: searchPlaceholder, className: styles.comboboxInput }), jsx(Combobox.List, { className: styles.comboboxContent, "aria-multiselectable": multiple ? true : undefined, children: children })] }) }) }));
     }
-    return (jsx(Select.Positioner, { sideOffset: sideOffset, className: styles.positioner, alignItemWithTrigger: false, children: jsx(Select.Popup, { ref: ref, className: cx(styles.content, className), "data-multiselectable": multiple ? true : undefined, ...props, children: jsx(Select.List, { className: styles.viewport, children: children }) }) }));
-});
+    return (jsx(Select.Positioner, { sideOffset: sideOffset, className: styles.positioner, alignItemWithTrigger: false, children: jsx(Select.Popup, { className: cx(styles.content, className), "data-multiselectable": multiple ? true : undefined, ...props, children: jsx(Select.List, { className: styles.viewport, children: children }) }) }));
+}
 SelectContent.displayName = 'Select.Content';
 
 export { SelectContent };

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

@@ -1 +1 @@
-{"version":3,"file":"select-content.js","sources":["../../../components/select/select-content.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { forwardRef, ReactNode } from 'react';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectContentProps {\n  className?: string;\n  children?: ReactNode;\n  searchPlaceholder?: string;\n  sideOffset?: number;\n  style?: React.CSSProperties;\n}\n\nexport const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      className,\n      children,\n      searchPlaceholder = 'Search...',\n      sideOffset = 4,\n      ...props\n    },\n    ref\n  ) => {\n    const { autocomplete, multiple } = useSelectContext();\n\n    if (autocomplete) {\n      return (\n        <ComboboxPrimitive.Portal>\n          <ComboboxPrimitive.Positioner\n            sideOffset={sideOffset}\n            className={styles.positioner}\n          >\n            <ComboboxPrimitive.Popup\n              ref={ref}\n              className={cx(styles.content, className)}\n              data-multiselectable={multiple ? true : undefined}\n              {...props}\n            >\n              <ComboboxPrimitive.Input\n                placeholder={searchPlaceholder}\n                className={styles.comboboxInput}\n              />\n              <ComboboxPrimitive.List\n                className={styles.comboboxContent}\n                aria-multiselectable={multiple ? true : undefined}\n              >\n                {children}\n              </ComboboxPrimitive.List>\n            </ComboboxPrimitive.Popup>\n          </ComboboxPrimitive.Positioner>\n        </ComboboxPrimitive.Portal>\n      );\n    }\n\n    return (\n      <SelectPrimitive.Positioner\n        sideOffset={sideOffset}\n        className={styles.positioner}\n        alignItemWithTrigger={false}\n      >\n        <SelectPrimitive.Popup\n          ref={ref}\n          className={cx(styles.content, className)}\n          data-multiselectable={multiple ? true : undefined}\n          {...props}\n        >\n          <SelectPrimitive.List className={styles.viewport}>\n            {children}\n          </SelectPrimitive.List>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    );\n  }\n);\nSelectContent.displayName = 'Select.Content';\n"],"names":[],"mappings":";;;;;;;;AAmBa;;;;;AA0CT;AAkBF;AAEF;;"}
+{"version":3,"file":"select-content.js","sources":["../../../components/select/select-content.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectContentProps\n  extends Omit<\n      SelectPrimitive.Positioner.Props,\n      'render' | 'className' | 'style' | 'ref'\n    >,\n    SelectPrimitive.Popup.Props {\n  searchPlaceholder?: string;\n}\n\nexport function SelectContent({\n  className,\n  children,\n  searchPlaceholder = 'Search...',\n  sideOffset = 4,\n  ...props\n}: SelectContentProps) {\n  const { autocomplete, multiple } = useSelectContext();\n\n  if (autocomplete) {\n    return (\n      <ComboboxPrimitive.Portal>\n        <ComboboxPrimitive.Positioner\n          sideOffset={sideOffset}\n          className={styles.positioner}\n        >\n          <ComboboxPrimitive.Popup\n            className={cx(styles.content, className)}\n            data-multiselectable={multiple ? true : undefined}\n            {...props}\n          >\n            <ComboboxPrimitive.Input\n              placeholder={searchPlaceholder}\n              className={styles.comboboxInput}\n            />\n            <ComboboxPrimitive.List\n              className={styles.comboboxContent}\n              aria-multiselectable={multiple ? true : undefined}\n            >\n              {children}\n            </ComboboxPrimitive.List>\n          </ComboboxPrimitive.Popup>\n        </ComboboxPrimitive.Positioner>\n      </ComboboxPrimitive.Portal>\n    );\n  }\n\n  return (\n    <SelectPrimitive.Positioner\n      sideOffset={sideOffset}\n      className={styles.positioner}\n      alignItemWithTrigger={false}\n    >\n      <SelectPrimitive.Popup\n        className={cx(styles.content, className)}\n        data-multiselectable={multiple ? true : undefined}\n        {...props}\n      >\n        <SelectPrimitive.List className={styles.viewport}>\n          {children}\n        </SelectPrimitive.List>\n      </SelectPrimitive.Popup>\n    </SelectPrimitive.Positioner>\n  );\n}\nSelectContent.displayName = 'Select.Content';\n"],"names":[],"mappings":";;;;;;;;;;;;AAwDE;AAiBF;AACA;;"}

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

@@ -11,7 +11,7 @@ var text = require('../text/text.cjs');
 var select_module = require('./select.module.css.cjs');
 var selectRoot = require('./select-root.cjs');
 
-const SelectItem = React.forwardRef(({ className, children, value: providedValue, leadingIcon, disabled, ...props }, ref) => {
+function SelectItem({ className, children, value: providedValue, leadingIcon, disabled, ...props }) {
     const value = String(providedValue);
     const { registerItem, unregisterItem, autocomplete, searchValue, value: selectValue, shouldFilter, hasItems, multiple } = selectRoot.useSelectContext();
     const isSelected = multiple
@@ -32,8 +32,8 @@ const SelectItem = React.forwardRef(({ className, children, value: providedValue
     const ItemPrimitive = autocomplete
         ? react.Combobox.Item
         : react.Select.Item;
-    return (jsxRuntime.jsx(ItemPrimitive, { ref: ref, value: value, className: classVarianceAuthority.cx(select_module.default.menuitem, className, isHidden && select_module.default.hidden), "data-hidden": isHidden || undefined, disabled: disabled || isHidden, ...props, render: (renderProps, state) => (jsxRuntime.jsxs("div", { ...renderProps, children: [multiple && jsxRuntime.jsx(checkbox.Checkbox, { checked: state.selected }), element] })) }));
-});
+    return (jsxRuntime.jsx(ItemPrimitive, { value: value, className: classVarianceAuthority.cx(select_module.default.menuitem, className, isHidden && select_module.default.hidden), "data-hidden": isHidden || undefined, disabled: disabled || isHidden, ...props, render: (renderProps, state) => (jsxRuntime.jsxs("div", { ...renderProps, children: [multiple && jsxRuntime.jsx(checkbox.Checkbox, { checked: state.selected }), element] })) }));
+}
 SelectItem.displayName = 'Select.Item';
 
 exports.SelectItem = SelectItem;

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

@@ -1 +1 @@
-{"version":3,"file":"select-item.cjs","sources":["../../../components/select/select-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { forwardRef, ReactNode, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../menu/utils';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectItemProps {\n  className?: string;\n  children?: ReactNode;\n  value: string;\n  leadingIcon?: ReactNode;\n  disabled?: boolean;\n}\n\nexport const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n  (\n    {\n      className,\n      children,\n      value: providedValue,\n      leadingIcon,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const value = String(providedValue);\n    const {\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      searchValue,\n      value: selectValue,\n      shouldFilter,\n      hasItems,\n      multiple\n    } = useSelectContext();\n\n    const isSelected = multiple\n      ? selectValue?.includes(value)\n      : value === selectValue;\n    const isMatched = getMatch(value, children, searchValue);\n    const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;\n\n    const element =\n      typeof children === 'string' ? (\n        <>\n          {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}\n          <Text>{children}</Text>\n        </>\n      ) : (\n        children\n      );\n\n    useLayoutEffect(() => {\n      registerItem({ leadingIcon, children, value });\n      return () => {\n        unregisterItem(value);\n      };\n    }, [value, children, registerItem, unregisterItem, leadingIcon]);\n\n    if (shouldFilter && !hasItems && !isMatched && !isSelected) {\n      return null;\n    }\n\n    const ItemPrimitive = autocomplete\n      ? ComboboxPrimitive.Item\n      : SelectPrimitive.Item;\n\n    return (\n      <ItemPrimitive\n        ref={ref}\n        value={value}\n        className={cx(styles.menuitem, className, isHidden && styles.hidden)}\n        data-hidden={isHidden || undefined}\n        disabled={disabled || isHidden}\n        {...props}\n        render={(renderProps, state) => (\n          <div {...renderProps}>\n            {multiple && <Checkbox checked={state.selected} />}\n            {element}\n          </div>\n        )}\n      />\n    );\n  }\n);\nSelectItem.displayName = 'Select.Item';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsBa;AAYT;;;AAaE;AACA;;;AAIF;;;AAYE;;AAEA;AACF;;AAGE;;;;AAKA;AAEF;AAgBF;AAEF;;"}
+{"version":3,"file":"select-item.cjs","sources":["../../../components/select/select-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { ReactNode, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../menu/utils';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectItemProps extends SelectPrimitive.Item.Props {\n  leadingIcon?: ReactNode;\n}\n\nexport function SelectItem({\n  className,\n  children,\n  value: providedValue,\n  leadingIcon,\n  disabled,\n  ...props\n}: SelectItemProps) {\n  const value = String(providedValue);\n  const {\n    registerItem,\n    unregisterItem,\n    autocomplete,\n    searchValue,\n    value: selectValue,\n    shouldFilter,\n    hasItems,\n    multiple\n  } = useSelectContext();\n\n  const isSelected = multiple\n    ? selectValue?.includes(value)\n    : value === selectValue;\n  const isMatched = getMatch(value, children, searchValue);\n  const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;\n\n  const element =\n    typeof children === 'string' ? (\n      <>\n        {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}\n        <Text>{children}</Text>\n      </>\n    ) : (\n      children\n    );\n\n  useLayoutEffect(() => {\n    registerItem({ leadingIcon, children, value });\n    return () => {\n      unregisterItem(value);\n    };\n  }, [value, children, registerItem, unregisterItem, leadingIcon]);\n\n  if (shouldFilter && !hasItems && !isMatched && !isSelected) {\n    return null;\n  }\n\n  const ItemPrimitive = autocomplete\n    ? ComboboxPrimitive.Item\n    : SelectPrimitive.Item;\n\n  return (\n    <ItemPrimitive\n      value={value}\n      className={cx(styles.menuitem, className, isHidden && styles.hidden)}\n      data-hidden={isHidden || undefined}\n      disabled={disabled || isHidden}\n      {...props}\n      render={(renderProps, state) => (\n        <div {...renderProps}>\n          {multiple && <Checkbox checked={state.selected} />}\n          {element}\n        </div>\n      )}\n    />\n  );\n}\nSelectItem.displayName = 'Select.Item';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA0BE;;;AAaE;AACA;;;AAIF;;;AAYE;;AAEA;AACF;;AAGE;;;;AAKA;AAEF;AAeF;AACA;;"}

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

@@ -1,10 +1,10 @@
+import { Select as SelectPrimitive } from '@base-ui/react';
 import { ReactNode } from 'react';
-export interface SelectItemProps {
-    className?: string;
-    children?: ReactNode;
-    value: string;
+export interface SelectItemProps extends SelectPrimitive.Item.Props {
     leadingIcon?: ReactNode;
-    disabled?: boolean;
 }
-export declare const SelectItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function SelectItem({ className, children, value: providedValue, leadingIcon, disabled, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace SelectItem {
+    var displayName: string;
+}
 //# sourceMappingURL=select-item.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../components/select/select-item.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAc,SAAS,EAAmB,MAAM,OAAO,CAAC;AAO/D,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,4GAwEtB,CAAC"}
+{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../components/select/select-item.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,MAAM,IAAI,eAAe,EAC1B,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAOnD,MAAM,WAAW,eAAgB,SAAQ,eAAe,CAAC,IAAI,CAAC,KAAK;IACjE,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,aAAa,EACpB,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,kDA2DjB;yBAlEe,UAAU"}

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

@@ -2,14 +2,14 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Combobox, Select } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { forwardRef, useLayoutEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import { Checkbox } from '../checkbox/checkbox.js';
 import { getMatch } from '../menu/utils.js';
 import { Text } from '../text/text.js';
 import styles from './select.module.css.js';
 import { useSelectContext } from './select-root.js';
 
-const SelectItem = forwardRef(({ className, children, value: providedValue, leadingIcon, disabled, ...props }, ref) => {
+function SelectItem({ className, children, value: providedValue, leadingIcon, disabled, ...props }) {
     const value = String(providedValue);
     const { registerItem, unregisterItem, autocomplete, searchValue, value: selectValue, shouldFilter, hasItems, multiple } = useSelectContext();
     const isSelected = multiple
@@ -30,8 +30,8 @@ const SelectItem = forwardRef(({ className, children, value: providedValue, lead
     const ItemPrimitive = autocomplete
         ? Combobox.Item
         : Select.Item;
-    return (jsx(ItemPrimitive, { ref: ref, value: value, className: cx(styles.menuitem, className, isHidden && styles.hidden), "data-hidden": isHidden || undefined, disabled: disabled || isHidden, ...props, render: (renderProps, state) => (jsxs("div", { ...renderProps, children: [multiple && jsx(Checkbox, { checked: state.selected }), element] })) }));
-});
+    return (jsx(ItemPrimitive, { value: value, className: cx(styles.menuitem, className, isHidden && styles.hidden), "data-hidden": isHidden || undefined, disabled: disabled || isHidden, ...props, render: (renderProps, state) => (jsxs("div", { ...renderProps, children: [multiple && jsx(Checkbox, { checked: state.selected }), element] })) }));
+}
 SelectItem.displayName = 'Select.Item';
 
 export { SelectItem };

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

@@ -1 +1 @@
-{"version":3,"file":"select-item.js","sources":["../../../components/select/select-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { forwardRef, ReactNode, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../menu/utils';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectItemProps {\n  className?: string;\n  children?: ReactNode;\n  value: string;\n  leadingIcon?: ReactNode;\n  disabled?: boolean;\n}\n\nexport const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n  (\n    {\n      className,\n      children,\n      value: providedValue,\n      leadingIcon,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const value = String(providedValue);\n    const {\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      searchValue,\n      value: selectValue,\n      shouldFilter,\n      hasItems,\n      multiple\n    } = useSelectContext();\n\n    const isSelected = multiple\n      ? selectValue?.includes(value)\n      : value === selectValue;\n    const isMatched = getMatch(value, children, searchValue);\n    const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;\n\n    const element =\n      typeof children === 'string' ? (\n        <>\n          {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}\n          <Text>{children}</Text>\n        </>\n      ) : (\n        children\n      );\n\n    useLayoutEffect(() => {\n      registerItem({ leadingIcon, children, value });\n      return () => {\n        unregisterItem(value);\n      };\n    }, [value, children, registerItem, unregisterItem, leadingIcon]);\n\n    if (shouldFilter && !hasItems && !isMatched && !isSelected) {\n      return null;\n    }\n\n    const ItemPrimitive = autocomplete\n      ? ComboboxPrimitive.Item\n      : SelectPrimitive.Item;\n\n    return (\n      <ItemPrimitive\n        ref={ref}\n        value={value}\n        className={cx(styles.menuitem, className, isHidden && styles.hidden)}\n        data-hidden={isHidden || undefined}\n        disabled={disabled || isHidden}\n        {...props}\n        render={(renderProps, state) => (\n          <div {...renderProps}>\n            {multiple && <Checkbox checked={state.selected} />}\n            {element}\n          </div>\n        )}\n      />\n    );\n  }\n);\nSelectItem.displayName = 'Select.Item';\n"],"names":[],"mappings":";;;;;;;;;;;AAsBa;AAYT;;;AAaE;AACA;;;AAIF;;;AAYE;;AAEA;AACF;;AAGE;;;;AAKA;AAEF;AAgBF;AAEF;;"}
+{"version":3,"file":"select-item.js","sources":["../../../components/select/select-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { ReactNode, useLayoutEffect } from 'react';\nimport { Checkbox } from '../checkbox';\nimport { getMatch } from '../menu/utils';\nimport { Text } from '../text';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectItemProps extends SelectPrimitive.Item.Props {\n  leadingIcon?: ReactNode;\n}\n\nexport function SelectItem({\n  className,\n  children,\n  value: providedValue,\n  leadingIcon,\n  disabled,\n  ...props\n}: SelectItemProps) {\n  const value = String(providedValue);\n  const {\n    registerItem,\n    unregisterItem,\n    autocomplete,\n    searchValue,\n    value: selectValue,\n    shouldFilter,\n    hasItems,\n    multiple\n  } = useSelectContext();\n\n  const isSelected = multiple\n    ? selectValue?.includes(value)\n    : value === selectValue;\n  const isMatched = getMatch(value, children, searchValue);\n  const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;\n\n  const element =\n    typeof children === 'string' ? (\n      <>\n        {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}\n        <Text>{children}</Text>\n      </>\n    ) : (\n      children\n    );\n\n  useLayoutEffect(() => {\n    registerItem({ leadingIcon, children, value });\n    return () => {\n      unregisterItem(value);\n    };\n  }, [value, children, registerItem, unregisterItem, leadingIcon]);\n\n  if (shouldFilter && !hasItems && !isMatched && !isSelected) {\n    return null;\n  }\n\n  const ItemPrimitive = autocomplete\n    ? ComboboxPrimitive.Item\n    : SelectPrimitive.Item;\n\n  return (\n    <ItemPrimitive\n      value={value}\n      className={cx(styles.menuitem, className, isHidden && styles.hidden)}\n      data-hidden={isHidden || undefined}\n      disabled={disabled || isHidden}\n      {...props}\n      render={(renderProps, state) => (\n        <div {...renderProps}>\n          {multiple && <Checkbox checked={state.selected} />}\n          {element}\n        </div>\n      )}\n    />\n  );\n}\nSelectItem.displayName = 'Select.Item';\n"],"names":[],"mappings":";;;;;;;;;;;;AA0BE;;;AAaE;AACA;;;AAIF;;;AAYE;;AAEA;AACF;;AAGE;;;;AAKA;AAEF;AAeF;AACA;;"}

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

@@ -8,35 +8,35 @@ var React = require('react');
 var select_module = require('./select.module.css.cjs');
 var selectRoot = require('./select-root.cjs');
 
-const SelectGroup = React.forwardRef(({ className, children, ...props }, ref) => {
+function SelectGroup({ className, children, ...props }) {
     const { shouldFilter, autocomplete } = selectRoot.useSelectContext();
     if (shouldFilter)
         return jsxRuntime.jsx(React.Fragment, { children: children });
     const GroupPrimitive = autocomplete
         ? react.Combobox.Group
         : react.Select.Group;
-    return (jsxRuntime.jsx(GroupPrimitive, { ref: ref, className: classVarianceAuthority.cx(select_module.default.menugroup, className), ...props, children: children }));
-});
+    return (jsxRuntime.jsx(GroupPrimitive, { className: classVarianceAuthority.cx(select_module.default.menugroup, className), ...props, children: children }));
+}
 SelectGroup.displayName = 'Select.Group';
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => {
+function SelectLabel({ className, ...props }) {
     const { shouldFilter, autocomplete } = selectRoot.useSelectContext();
     if (shouldFilter)
         return null;
     const LabelPrimitive = autocomplete
         ? react.Combobox.GroupLabel
         : react.Select.GroupLabel;
-    return (jsxRuntime.jsx(LabelPrimitive, { ref: ref, className: classVarianceAuthority.cx(select_module.default.label, className), ...props }));
-});
+    return jsxRuntime.jsx(LabelPrimitive, { className: classVarianceAuthority.cx(select_module.default.label, className), ...props });
+}
 SelectLabel.displayName = 'Select.Label';
-const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => {
+function SelectSeparator({ className, ...props }) {
     const { shouldFilter, autocomplete } = selectRoot.useSelectContext();
     if (shouldFilter)
         return null;
     const SeparatorPrimitive = autocomplete
         ? react.Combobox.Separator
         : react.Select.Separator;
-    return (jsxRuntime.jsx(SeparatorPrimitive, { ref: ref, className: classVarianceAuthority.cx(select_module.default.separator, className), ...props }));
-});
+    return (jsxRuntime.jsx(SeparatorPrimitive, { className: classVarianceAuthority.cx(select_module.default.separator, className), ...props }));
+}
 SelectSeparator.displayName = 'Select.Separator';
 
 exports.SelectGroup = SelectGroup;

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

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

@@ -1,16 +1,20 @@
-import { ReactNode } from 'react';
-export interface SelectGroupProps {
-    className?: string;
-    children?: ReactNode;
+import { Select as SelectPrimitive } from '@base-ui/react';
+export interface SelectGroupProps extends SelectPrimitive.Group.Props {
 }
-export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface SelectLabelProps {
-    className?: string;
-    children?: ReactNode;
+export declare function SelectGroup({ className, children, ...props }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectGroup {
+    var displayName: string;
 }
-export declare const SelectLabel: import("react").ForwardRefExoticComponent<SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface SelectSeparatorProps {
-    className?: string;
+export interface SelectLabelProps extends SelectPrimitive.GroupLabel.Props {
+}
+export declare function SelectLabel({ className, ...props }: SelectLabelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace SelectLabel {
+    var displayName: string;
+}
+export interface SelectSeparatorProps extends SelectPrimitive.Separator.Props {
+}
+export declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace SelectSeparator {
+    var displayName: string;
 }
-export declare const SelectSeparator: import("react").ForwardRefExoticComponent<SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=select-misc.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-misc.d.ts","sourceRoot":"","sources":["../../../components/select/select-misc.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIxD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,6GAoBvB,CAAC;AAGF,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,6GAkBvB,CAAC;AAGF,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,iHAkB3B,CAAC"}
+{"version":3,"file":"select-misc.d.ts","sourceRoot":"","sources":["../../../components/select/select-misc.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,MAAM,IAAI,eAAe,EAC1B,MAAM,gBAAgB,CAAC;AAMxB,MAAM,WAAW,gBAAiB,SAAQ,eAAe,CAAC,KAAK,CAAC,KAAK;CAAG;AAExE,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAclB;yBAlBe,WAAW;;;AAqB3B,MAAM,WAAW,gBAAiB,SAAQ,eAAe,CAAC,UAAU,CAAC,KAAK;CAAG;AAE7E,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,kDAUpE;yBAVe,WAAW;;;AAa3B,MAAM,WAAW,oBAAqB,SAAQ,eAAe,CAAC,SAAS,CAAC,KAAK;CAAG;AAEhF,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,kDAe5E;yBAfe,eAAe"}

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

@@ -2,39 +2,39 @@
 import { jsx } from 'react/jsx-runtime';
 import { Combobox, Select } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-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) => {
+function SelectGroup({ className, children, ...props }) {
     const { shouldFilter, autocomplete } = useSelectContext();
     if (shouldFilter)
         return jsx(Fragment, { children: children });
     const GroupPrimitive = autocomplete
         ? Combobox.Group
         : Select.Group;
-    return (jsx(GroupPrimitive, { ref: ref, className: cx(styles.menugroup, className), ...props, children: children }));
-});
+    return (jsx(GroupPrimitive, { className: cx(styles.menugroup, className), ...props, children: children }));
+}
 SelectGroup.displayName = 'Select.Group';
-const SelectLabel = forwardRef(({ className, ...props }, ref) => {
+function SelectLabel({ className, ...props }) {
     const { shouldFilter, autocomplete } = useSelectContext();
     if (shouldFilter)
         return null;
     const LabelPrimitive = autocomplete
         ? Combobox.GroupLabel
         : Select.GroupLabel;
-    return (jsx(LabelPrimitive, { ref: ref, className: cx(styles.label, className), ...props }));
-});
+    return jsx(LabelPrimitive, { className: cx(styles.label, className), ...props });
+}
 SelectLabel.displayName = 'Select.Label';
-const SelectSeparator = forwardRef(({ className, ...props }, ref) => {
+function SelectSeparator({ className, ...props }) {
     const { shouldFilter, autocomplete } = useSelectContext();
     if (shouldFilter)
         return null;
     const SeparatorPrimitive = autocomplete
         ? Combobox.Separator
         : Select.Separator;
-    return (jsx(SeparatorPrimitive, { ref: ref, className: cx(styles.separator, className), ...props }));
-});
+    return (jsx(SeparatorPrimitive, { className: cx(styles.separator, className), ...props }));
+}
 SelectSeparator.displayName = 'Select.Separator';
 
 export { SelectGroup, SelectLabel, SelectSeparator };

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 {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { Fragment, forwardRef, ReactNode } from 'react';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface SelectGroupProps {\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(\n  ({ className, children, ...props }, ref) => {\n    const { shouldFilter, autocomplete } = useSelectContext();\n\n    if (shouldFilter) return <Fragment>{children}</Fragment>;\n\n    const GroupPrimitive = autocomplete\n      ? ComboboxPrimitive.Group\n      : SelectPrimitive.Group;\n\n    return (\n      <GroupPrimitive\n        ref={ref}\n        className={cx(styles.menugroup, className)}\n        {...props}\n      >\n        {children}\n      </GroupPrimitive>\n    );\n  }\n);\nSelectGroup.displayName = 'Select.Group';\n\nexport interface SelectLabelProps {\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(\n  ({ className, ...props }, ref) => {\n    const { shouldFilter, autocomplete } = useSelectContext();\n\n    if (shouldFilter) return null;\n\n    const LabelPrimitive = autocomplete\n      ? ComboboxPrimitive.GroupLabel\n      : SelectPrimitive.GroupLabel;\n\n    return (\n      <LabelPrimitive\n        ref={ref}\n        className={cx(styles.label, className)}\n        {...props}\n      />\n    );\n  }\n);\nSelectLabel.displayName = 'Select.Label';\n\nexport interface SelectSeparatorProps {\n  className?: string;\n}\n\nexport const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(\n  ({ className, ...props }, ref) => {\n    const { shouldFilter, autocomplete } = useSelectContext();\n\n    if (shouldFilter) return null;\n\n    const SeparatorPrimitive = autocomplete\n      ? ComboboxPrimitive.Separator\n      : SelectPrimitive.Separator;\n\n    return (\n      <SeparatorPrimitive\n        ref={ref}\n        className={cx(styles.separator, className)}\n        {...props}\n      />\n    );\n  }\n);\nSelectSeparator.displayName = 'Select.Separator';\n"],"names":[],"mappings":";;;;;;;;AAgBa;;AAIT;AAAkB;;;AAIhB;;AAWJ;AAEF;AAOa;;AAIT;AAAkB;;;AAIhB;;AASJ;AAEF;AAMa;;AAIT;AAAkB;;;AAIhB;;AASJ;AAEF;;"}
+{"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-root.cjs

@@ -89,12 +89,13 @@ const SelectRoot = (props) => {
         ...rest
     };
     if (autocomplete) {
-        return (jsxRuntime.jsx(SelectContext.Provider, { value: contextValue, children: jsxRuntime.jsx(react.Combobox.Root, { ...commonProps, onInputValueChange: handleSearchValueChange, filter: itemsProp ? undefined : null, items: itemsProp, loopFocus: false, 
+        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.Provider, { value: contextValue, children: jsxRuntime.jsx(react.Select.Root, { ...commonProps, required: required, name: name, 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 {\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.Provider 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.Provider>\n    );\n  }\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <SelectPrimitive.Root {...commonProps} required={required} name={name}>\n        {children}\n      </SelectPrimitive.Root>\n    </SelectContext.Provider>\n  );\n};\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;;AAQR;AAOF;;;"}
+{"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;;;"}