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

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

@@ -42,6 +42,9 @@ export interface MultipleSelectProps extends BaseSelectProps {
     defaultValue?: string[];
 }
 export type SelectRootProps = SingleSelectProps | MultipleSelectProps;
-export declare const SelectRoot: (props: SelectRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectRoot: {
+    (props: SelectRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};
 //# sourceMappingURL=select-root.d.ts.map

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

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

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Combobox, Select } from '@base-ui/react';
-import { createContext, useContext, useState, useCallback, useMemo } from 'react';
+import { createContext, useState, useCallback, useMemo, useContext } from 'react';
 
 /*
 Root context to manage the Select control
@@ -87,12 +87,13 @@ const SelectRoot = (props) => {
         ...rest
     };
     if (autocomplete) {
-        return (jsx(SelectContext.Provider, { value: contextValue, children: jsx(Combobox.Root, { ...commonProps, onInputValueChange: handleSearchValueChange, filter: itemsProp ? undefined : null, items: itemsProp, loopFocus: false, 
+        return (jsx(SelectContext, { value: contextValue, children: jsx(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 (jsx(SelectContext.Provider, { value: contextValue, children: jsx(Select.Root, { ...commonProps, required: required, name: name, children: children }) }));
+    return (jsx(SelectContext, { value: contextValue, children: jsx(Select.Root, { ...commonProps, required: required, name: name, children: children }) }));
 };
+SelectRoot.displayName = 'Select';
 
 export { SelectRoot, useSelectContext };
 //# sourceMappingURL=select-root.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-root.js","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.js","sources":["../../../components/select/select-root.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport {\n  createContext,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState\n} from 'react';\nimport { ItemType } from './types';\n\ninterface CommonProps {\n  autocomplete?: boolean;\n  autocompleteMode?: 'auto' | 'manual';\n  searchValue?: string;\n  onSearch?: (value: string) => void;\n  defaultSearchValue?: string;\n}\n\ninterface SelectContextValue extends CommonProps {\n  value?: string | string[];\n  registerItem: (item: ItemType) => void;\n  unregisterItem: (value: string) => void;\n  multiple: boolean;\n  items: Record<string, ItemType>;\n  hasItems?: boolean;\n}\n\ninterface UseSelectContext extends SelectContextValue {\n  shouldFilter?: boolean;\n}\n\n/*\nRoot context to manage the Select control\n@remarks Only for internal usage.\n*/\nconst SelectContext = createContext<SelectContextValue | undefined>(undefined);\n\nexport const useSelectContext = (): UseSelectContext => {\n  const context = useContext(SelectContext);\n  if (!context) {\n    throw new Error('useSelectContext must be used within a SelectProvider');\n  }\n  const shouldFilter = !!(\n    context?.autocomplete &&\n    context?.autocompleteMode === 'auto' &&\n    context?.searchValue?.length\n  );\n  return {\n    ...context,\n    shouldFilter\n  };\n};\n\ninterface BaseSelectProps extends CommonProps {\n  children?: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  items?: string[];\n}\n\nexport interface SingleSelectProps extends BaseSelectProps {\n  multiple?: false;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  defaultValue?: string;\n}\n\nexport interface MultipleSelectProps extends BaseSelectProps {\n  multiple: true;\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  defaultValue?: string[];\n}\n\nexport type SelectRootProps = SingleSelectProps | MultipleSelectProps;\n\nexport const SelectRoot = (props: SelectRootProps) => {\n  const {\n    children,\n    value: providedValue,\n    onValueChange,\n    defaultValue,\n    autocomplete,\n    autocompleteMode = 'auto',\n    searchValue: providedSearchValue,\n    onSearch,\n    defaultSearchValue = '',\n    open: providedOpen,\n    defaultOpen = false,\n    onOpenChange,\n    multiple = false,\n    disabled,\n    required,\n    name,\n    items: itemsProp,\n    ...rest\n  } = props;\n\n  const [internalValue, setInternalValue] = useState<\n    string | string[] | undefined\n  >(defaultValue);\n  const [internalSearchValue, setInternalSearchValue] =\n    useState(defaultSearchValue);\n  const [registeredItems, setRegisteredItems] = useState<\n    SelectContextValue['items']\n  >({});\n\n  const computedValue = providedValue ?? internalValue;\n  const searchValue = providedSearchValue ?? internalSearchValue;\n\n  const handleValueChange = useCallback(\n    (value: any, _eventDetails?: any) => {\n      setInternalValue(value);\n      if (multiple) {\n        (onValueChange as MultipleSelectProps['onValueChange'])?.(\n          value as string[]\n        );\n      } else {\n        (onValueChange as SingleSelectProps['onValueChange'])?.(\n          value as string\n        );\n      }\n    },\n    [multiple, onValueChange]\n  );\n\n  const handleSearchValueChange = useCallback(\n    (value: string, _eventDetails?: any) => {\n      setInternalSearchValue(value);\n      onSearch?.(value);\n    },\n    [onSearch]\n  );\n\n  const handleOpenChange = useCallback(\n    (open: boolean, _eventDetails?: any) => {\n      onOpenChange?.(open);\n    },\n    [onOpenChange]\n  );\n\n  const registerItem = useCallback<SelectContextValue['registerItem']>(item => {\n    setRegisteredItems(prev => ({ ...prev, [item.value]: item }));\n  }, []);\n\n  const unregisterItem = useCallback<SelectContextValue['unregisterItem']>(\n    value => {\n      setRegisteredItems(prev => {\n        const { [value]: _, ...rest } = prev;\n        return rest;\n      });\n    },\n    []\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      value: computedValue,\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      autocompleteMode,\n      searchValue,\n      multiple,\n      items: registeredItems,\n      hasItems: !!itemsProp\n    }),\n    [\n      computedValue,\n      registerItem,\n      unregisterItem,\n      autocomplete,\n      autocompleteMode,\n      searchValue,\n      multiple,\n      registeredItems,\n      itemsProp\n    ]\n  );\n\n  const commonProps = {\n    value: providedValue as any,\n    defaultValue: defaultValue as any,\n    onValueChange: handleValueChange,\n    open: providedOpen,\n    defaultOpen,\n    onOpenChange: handleOpenChange,\n    multiple: multiple as any,\n    disabled,\n    modal: true as const,\n    ...rest\n  };\n\n  if (autocomplete) {\n    return (\n      <SelectContext value={contextValue}>\n        <ComboboxPrimitive.Root\n          {...commonProps}\n          onInputValueChange={handleSearchValueChange}\n          filter={itemsProp ? undefined : null}\n          items={itemsProp}\n          loopFocus={false}\n          // @ts-ignore BaseUI types are not up to date\n          autoHighlight='always'\n        >\n          {children}\n        </ComboboxPrimitive.Root>\n      </SelectContext>\n    );\n  }\n\n  return (\n    <SelectContext value={contextValue}>\n      <SelectPrimitive.Root {...commonProps} required={required} name={name}>\n        {children}\n      </SelectPrimitive.Root>\n    </SelectContext>\n  );\n};\n\nSelectRoot.displayName = 'Select';\n"],"names":[],"mappings":";;;;;AAqCA;;;AAGE;AACF;AAEO;AACL;;AAEE;;AAEF;;AAGE;;AAGA;;;AAGJ;AA6Ba;;;;;AA+BX;AACA;;;;AAMO;;;AAIA;;AAIL;;;AAOE;AACF;;AAME;AACF;AAIF;;;AAIA;;AAGM;AACA;AACF;;AAKJ;AAEI;;;;;;;AAOA;;AAED;;;;;;;;;;AAWA;AAGH;AACE;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;;AAIA;;AASM;;;AAeV;AAEA;;"}

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

@@ -5,7 +5,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('@base-ui/react');
 var reactIcons = require('@radix-ui/react-icons');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var flex = require('../flex/flex.cjs');
 var select_module = require('./select.module.css.cjs');
 var selectRoot = require('./select-root.cjs');
@@ -26,13 +25,13 @@ const trigger = classVarianceAuthority.cva(select_module.default.trigger, {
         variant: 'outline'
     }
 });
-const SelectTrigger = React.forwardRef(({ size, variant, className, children, iconProps = {}, 'aria-label': ariaLabel, ...props }, ref) => {
+function SelectTrigger({ ref, size, variant, className, children, iconProps = {}, 'aria-label': ariaLabel, ...props }) {
     const { multiple, autocomplete } = selectRoot.useSelectContext();
     const TriggerPrimitive = autocomplete
         ? react.Combobox.Trigger
         : react.Select.Trigger;
     return (jsxRuntime.jsxs(TriggerPrimitive, { "data-multiselectable": multiple ? true : undefined, ref: ref, className: trigger({ size, variant, className }), "aria-label": ariaLabel || 'Select option', ...props, children: [jsxRuntime.jsx(flex.Flex, { className: select_module.default.triggerContent, align: 'center', gap: 2, children: children }), jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: select_module.default.triggerIcon, "aria-hidden": 'true', ...iconProps })] }));
-});
+}
 SelectTrigger.displayName = 'Select.Trigger';
 
 exports.SelectTrigger = SelectTrigger;

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

@@ -1 +1 @@
-{"version":3,"file":"select-trigger.cjs","sources":["../../../components/select/select-trigger.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, forwardRef, SVGAttributes } from 'react';\nimport { Flex } from '../flex';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface IconProps extends SVGAttributes<SVGElement> {\n  children?: never;\n  color?: string;\n}\n\nconst trigger = cva(styles.trigger, {\n  variants: {\n    size: {\n      small: styles['trigger-small'],\n      medium: styles['trigger-medium']\n    },\n    variant: {\n      outline: styles['trigger-outline'],\n      text: styles['trigger-text']\n    }\n  },\n  defaultVariants: {\n    size: 'medium',\n    variant: 'outline'\n  }\n});\n\nexport interface SelectTriggerProps\n  extends ComponentPropsWithoutRef<'button'>,\n    VariantProps<typeof trigger> {\n  iconProps?: IconProps;\n}\n\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      size,\n      variant,\n      className,\n      children,\n      iconProps = {},\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const { multiple, autocomplete } = useSelectContext();\n\n    const TriggerPrimitive = autocomplete\n      ? ComboboxPrimitive.Trigger\n      : SelectPrimitive.Trigger;\n\n    return (\n      <TriggerPrimitive\n        data-multiselectable={multiple ? true : undefined}\n        ref={ref}\n        className={trigger({ size, variant, className })}\n        aria-label={ariaLabel || 'Select option'}\n        {...props}\n      >\n        <Flex className={styles.triggerContent} align='center' gap={2}>\n          {children}\n        </Flex>\n        <ChevronDownIcon\n          className={styles.triggerIcon}\n          aria-hidden='true'\n          {...iconProps}\n        />\n      </TriggerPrimitive>\n    );\n  }\n);\nSelectTrigger.displayName = 'Select.Trigger';\n"],"names":[],"mappings":";;;;;;;;;;;;AAkBA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACD;AACF;AAQM;;;;AAiBD;AAEF;AAkBF;AAEF;;"}
+{"version":3,"file":"select-trigger.cjs","sources":["../../../components/select/select-trigger.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport { ComponentProps, SVGAttributes } from 'react';\nimport { Flex } from '../flex';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface IconProps extends SVGAttributes<SVGElement> {\n  children?: never;\n  color?: string;\n}\n\nconst trigger = cva(styles.trigger, {\n  variants: {\n    size: {\n      small: styles['trigger-small'],\n      medium: styles['trigger-medium']\n    },\n    variant: {\n      outline: styles['trigger-outline'],\n      text: styles['trigger-text']\n    }\n  },\n  defaultVariants: {\n    size: 'medium',\n    variant: 'outline'\n  }\n});\n\nexport interface SelectTriggerProps\n  extends ComponentProps<'button'>,\n    VariantProps<typeof trigger> {\n  iconProps?: IconProps;\n  nativeButton?: boolean;\n}\n\nexport function SelectTrigger({\n  ref,\n  size,\n  variant,\n  className,\n  children,\n  iconProps = {},\n  'aria-label': ariaLabel,\n  ...props\n}: SelectTriggerProps) {\n  const { multiple, autocomplete } = useSelectContext();\n\n  const TriggerPrimitive = autocomplete\n    ? ComboboxPrimitive.Trigger\n    : SelectPrimitive.Trigger;\n\n  return (\n    <TriggerPrimitive\n      data-multiselectable={multiple ? true : undefined}\n      ref={ref}\n      className={trigger({ size, variant, className })}\n      aria-label={ariaLabel || 'Select option'}\n      {...props}\n    >\n      <Flex className={styles.triggerContent} align='center' gap={2}>\n        {children}\n      </Flex>\n      <ChevronDownIcon\n        className={styles.triggerIcon}\n        aria-hidden='true'\n        {...iconProps}\n      />\n    </TriggerPrimitive>\n  );\n}\nSelectTrigger.displayName = 'Select.Trigger';\n"],"names":[],"mappings":";;;;;;;;;;;AAkBA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACD;AACF;AASK;;;;AAcF;AAEF;AAkBF;AACA;;"}

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

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, SVGAttributes } from 'react';
+import { ComponentProps, SVGAttributes } from 'react';
 export interface IconProps extends SVGAttributes<SVGElement> {
     children?: never;
     color?: string;
@@ -8,9 +8,13 @@ declare const trigger: (props?: ({
     size?: "small" | "medium" | null | undefined;
     variant?: "text" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface SelectTriggerProps extends ComponentPropsWithoutRef<'button'>, VariantProps<typeof trigger> {
+export interface SelectTriggerProps extends ComponentProps<'button'>, VariantProps<typeof trigger> {
     iconProps?: IconProps;
+    nativeButton?: boolean;
+}
+export declare function SelectTrigger({ ref, size, variant, className, children, iconProps, 'aria-label': ariaLabel, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectTrigger {
+    var displayName: string;
 }
-export declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=select-trigger.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-trigger.d.ts","sourceRoot":"","sources":["../../../components/select/select-trigger.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,wBAAwB,EAAc,aAAa,EAAE,MAAM,OAAO,CAAC;AAK5E,MAAM,WAAW,SAAU,SAAQ,aAAa,CAAC,UAAU,CAAC;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO;;;8EAeX,CAAC;AAEH,MAAM,WAAW,kBACf,SAAQ,wBAAwB,CAAC,QAAQ,CAAC,EACxC,YAAY,CAAC,OAAO,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,kHAsCzB,CAAC"}
+{"version":3,"file":"select-trigger.d.ts","sourceRoot":"","sources":["../../../components/select/select-trigger.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtD,MAAM,WAAW,SAAU,SAAQ,aAAa,CAAC,UAAU,CAAC;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,OAAO;;;8EAeX,CAAC;AAEH,MAAM,WAAW,kBACf,SAAQ,cAAc,CAAC,QAAQ,CAAC,EAC9B,YAAY,CAAC,OAAO,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAc,EACd,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAyBpB;yBAlCe,aAAa"}

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

@@ -3,7 +3,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Combobox, Select } from '@base-ui/react';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import { Flex } from '../flex/flex.js';
 import styles from './select.module.css.js';
 import { useSelectContext } from './select-root.js';
@@ -24,13 +23,13 @@ const trigger = cva(styles.trigger, {
         variant: 'outline'
     }
 });
-const SelectTrigger = forwardRef(({ size, variant, className, children, iconProps = {}, 'aria-label': ariaLabel, ...props }, ref) => {
+function SelectTrigger({ ref, size, variant, className, children, iconProps = {}, 'aria-label': ariaLabel, ...props }) {
     const { multiple, autocomplete } = useSelectContext();
     const TriggerPrimitive = autocomplete
         ? Combobox.Trigger
         : Select.Trigger;
     return (jsxs(TriggerPrimitive, { "data-multiselectable": multiple ? true : undefined, ref: ref, className: trigger({ size, variant, className }), "aria-label": ariaLabel || 'Select option', ...props, children: [jsx(Flex, { className: styles.triggerContent, align: 'center', gap: 2, children: children }), jsx(ChevronDownIcon, { className: styles.triggerIcon, "aria-hidden": 'true', ...iconProps })] }));
-});
+}
 SelectTrigger.displayName = 'Select.Trigger';
 
 export { SelectTrigger };

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

@@ -1 +1 @@
-{"version":3,"file":"select-trigger.js","sources":["../../../components/select/select-trigger.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, forwardRef, SVGAttributes } from 'react';\nimport { Flex } from '../flex';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface IconProps extends SVGAttributes<SVGElement> {\n  children?: never;\n  color?: string;\n}\n\nconst trigger = cva(styles.trigger, {\n  variants: {\n    size: {\n      small: styles['trigger-small'],\n      medium: styles['trigger-medium']\n    },\n    variant: {\n      outline: styles['trigger-outline'],\n      text: styles['trigger-text']\n    }\n  },\n  defaultVariants: {\n    size: 'medium',\n    variant: 'outline'\n  }\n});\n\nexport interface SelectTriggerProps\n  extends ComponentPropsWithoutRef<'button'>,\n    VariantProps<typeof trigger> {\n  iconProps?: IconProps;\n}\n\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      size,\n      variant,\n      className,\n      children,\n      iconProps = {},\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const { multiple, autocomplete } = useSelectContext();\n\n    const TriggerPrimitive = autocomplete\n      ? ComboboxPrimitive.Trigger\n      : SelectPrimitive.Trigger;\n\n    return (\n      <TriggerPrimitive\n        data-multiselectable={multiple ? true : undefined}\n        ref={ref}\n        className={trigger({ size, variant, className })}\n        aria-label={ariaLabel || 'Select option'}\n        {...props}\n      >\n        <Flex className={styles.triggerContent} align='center' gap={2}>\n          {children}\n        </Flex>\n        <ChevronDownIcon\n          className={styles.triggerIcon}\n          aria-hidden='true'\n          {...iconProps}\n        />\n      </TriggerPrimitive>\n    );\n  }\n);\nSelectTrigger.displayName = 'Select.Trigger';\n"],"names":[],"mappings":";;;;;;;;;;AAkBA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACD;AACF;AAQM;;;;AAiBD;AAEF;AAkBF;AAEF;;"}
+{"version":3,"file":"select-trigger.js","sources":["../../../components/select/select-trigger.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Combobox as ComboboxPrimitive,\n  Select as SelectPrimitive\n} from '@base-ui/react';\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport { ComponentProps, SVGAttributes } from 'react';\nimport { Flex } from '../flex';\nimport styles from './select.module.css';\nimport { useSelectContext } from './select-root';\n\nexport interface IconProps extends SVGAttributes<SVGElement> {\n  children?: never;\n  color?: string;\n}\n\nconst trigger = cva(styles.trigger, {\n  variants: {\n    size: {\n      small: styles['trigger-small'],\n      medium: styles['trigger-medium']\n    },\n    variant: {\n      outline: styles['trigger-outline'],\n      text: styles['trigger-text']\n    }\n  },\n  defaultVariants: {\n    size: 'medium',\n    variant: 'outline'\n  }\n});\n\nexport interface SelectTriggerProps\n  extends ComponentProps<'button'>,\n    VariantProps<typeof trigger> {\n  iconProps?: IconProps;\n  nativeButton?: boolean;\n}\n\nexport function SelectTrigger({\n  ref,\n  size,\n  variant,\n  className,\n  children,\n  iconProps = {},\n  'aria-label': ariaLabel,\n  ...props\n}: SelectTriggerProps) {\n  const { multiple, autocomplete } = useSelectContext();\n\n  const TriggerPrimitive = autocomplete\n    ? ComboboxPrimitive.Trigger\n    : SelectPrimitive.Trigger;\n\n  return (\n    <TriggerPrimitive\n      data-multiselectable={multiple ? true : undefined}\n      ref={ref}\n      className={trigger({ size, variant, className })}\n      aria-label={ariaLabel || 'Select option'}\n      {...props}\n    >\n      <Flex className={styles.triggerContent} align='center' gap={2}>\n        {children}\n      </Flex>\n      <ChevronDownIcon\n        className={styles.triggerIcon}\n        aria-hidden='true'\n        {...iconProps}\n      />\n    </TriggerPrimitive>\n  );\n}\nSelectTrigger.displayName = 'Select.Trigger';\n"],"names":[],"mappings":";;;;;;;;;AAkBA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACD;AACF;AASK;;;;AAcF;AAEF;AAkBF;AACA;;"}

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

@@ -8,7 +8,7 @@ var select_module = require('./select.module.css.cjs');
 var selectMultipleValue = require('./select-multiple-value.cjs');
 var selectRoot = require('./select-root.cjs');
 
-const SelectValue = React.forwardRef(({ children, placeholder, className, ...props }, ref) => {
+function SelectValue({ children, placeholder, className, ...props }) {
     const { value, items, multiple } = selectRoot.useSelectContext();
     const hasValue = multiple
         ? Array.isArray(value) && value.length > 0
@@ -25,19 +25,19 @@ const SelectValue = React.forwardRef(({ children, placeholder, className, ...pro
         return items[value];
     }, [value, items, multiple]);
     if (!hasValue) {
-        return (jsxRuntime.jsx("span", { ref: ref, "data-placeholder": '', className: classVarianceAuthority.cx(select_module.default.placeholder, className), ...props, children: placeholder }));
+        return (jsxRuntime.jsx("span", { "data-placeholder": '', className: classVarianceAuthority.cx(select_module.default.placeholder, className), ...props, children: placeholder }));
     }
     if (typeof children === 'function') {
-        return (jsxRuntime.jsx("span", { ref: ref, className: className, ...props, children: children(item) }));
+        return (jsxRuntime.jsx("span", { className: className, ...props, children: children(item) }));
     }
     if (children) {
-        return (jsxRuntime.jsx("span", { ref: ref, className: className, ...props, children: children }));
+        return (jsxRuntime.jsx("span", { className: className, ...props, children: children }));
     }
     if (Array.isArray(item)) {
         return jsxRuntime.jsx(selectMultipleValue.SelectMultipleValue, { data: item });
     }
-    return (jsxRuntime.jsx("span", { ref: ref, className: className, ...props, children: jsxRuntime.jsxs("div", { className: classVarianceAuthority.cx(select_module.default.valueContent), children: [typeof item?.children === 'string' && item?.leadingIcon && (jsxRuntime.jsx("div", { className: select_module.default.itemIcon, children: item.leadingIcon })), item?.children ?? value] }) }));
-});
+    return (jsxRuntime.jsx("span", { className: className, ...props, children: jsxRuntime.jsxs("div", { className: classVarianceAuthority.cx(select_module.default.valueContent), children: [typeof item?.children === 'string' && item?.leadingIcon && (jsxRuntime.jsx("div", { className: select_module.default.itemIcon, children: item.leadingIcon })), item?.children ?? value] }) }));
+}
 SelectValue.displayName = 'Select.Value';
 
 exports.SelectValue = SelectValue;

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

@@ -1 +1 @@
-{"version":3,"file":"select-value.cjs","sources":["../../../components/select/select-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { forwardRef, ReactNode, useMemo } from 'react';\nimport styles from './select.module.css';\nimport { SelectMultipleValue } from './select-multiple-value';\nimport { useSelectContext } from './select-root';\nimport { ItemType } from './types';\n\ntype ValueType = Omit<ItemType, 'children'>;\n\ntype SelectValueProps = {\n  placeholder?: string;\n  children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;\n  className?: string;\n};\n\nexport const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(\n  ({ children, placeholder, className, ...props }, ref) => {\n    const { value, items, multiple } = useSelectContext();\n\n    const hasValue = multiple\n      ? Array.isArray(value) && value.length > 0\n      : !!value;\n\n    const item = useMemo(() => {\n      if (!value) return undefined;\n      if (multiple && Array.isArray(value)) {\n        const itemValues = value.map(v => items[v]);\n        if (itemValues.length === 1) return itemValues[0];\n        return itemValues;\n      }\n      return items[value as string];\n    }, [value, items, multiple]);\n\n    if (!hasValue) {\n      return (\n        <span\n          ref={ref}\n          data-placeholder=''\n          className={cx(styles.placeholder, className)}\n          {...props}\n        >\n          {placeholder}\n        </span>\n      );\n    }\n\n    if (typeof children === 'function') {\n      return (\n        <span ref={ref} className={className} {...props}>\n          {children(item)}\n        </span>\n      );\n    }\n\n    if (children) {\n      return (\n        <span ref={ref} className={className} {...props}>\n          {children}\n        </span>\n      );\n    }\n\n    if (Array.isArray(item)) {\n      return <SelectMultipleValue data={item} />;\n    }\n\n    return (\n      <span ref={ref} className={className} {...props}>\n        <div className={cx(styles.valueContent)}>\n          {typeof item?.children === 'string' && item?.leadingIcon && (\n            <div className={styles.itemIcon}>{item.leadingIcon}</div>\n          )}\n          {item?.children ?? value}\n        </div>\n      </span>\n    );\n  }\n);\nSelectValue.displayName = 'Select.Value';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsBM;AACA;AAEF;AACE;AAAY;;AAEV;AACA;AAA6B;AAC7B;;AAEF;;;;;AAgBF;AACE;;;AAQA;;AAOF;AACE;;;AAaJ;AAEF;;"}
+{"version":3,"file":"select-value.cjs","sources":["../../../components/select/select-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, ReactNode, useMemo } from 'react';\nimport styles from './select.module.css';\nimport { SelectMultipleValue } from './select-multiple-value';\nimport { useSelectContext } from './select-root';\nimport { ItemType } from './types';\n\ntype ValueType = Omit<ItemType, 'children'>;\n\ntype SelectValueProps = ComponentProps<'span'> & {\n  placeholder?: string;\n  children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;\n  className?: string;\n};\n\nexport function SelectValue({\n  children,\n  placeholder,\n  className,\n  ...props\n}: SelectValueProps) {\n  const { value, items, multiple } = useSelectContext();\n\n  const hasValue = multiple\n    ? Array.isArray(value) && value.length > 0\n    : !!value;\n\n  const item = useMemo(() => {\n    if (!value) return undefined;\n    if (multiple && Array.isArray(value)) {\n      const itemValues = value.map(v => items[v]);\n      if (itemValues.length === 1) return itemValues[0];\n      return itemValues;\n    }\n    return items[value as string];\n  }, [value, items, multiple]);\n\n  if (!hasValue) {\n    return (\n      <span\n        data-placeholder=''\n        className={cx(styles.placeholder, className)}\n        {...props}\n      >\n        {placeholder}\n      </span>\n    );\n  }\n\n  if (typeof children === 'function') {\n    return (\n      <span className={className} {...props}>\n        {children(item)}\n      </span>\n    );\n  }\n\n  if (children) {\n    return (\n      <span className={className} {...props}>\n        {children}\n      </span>\n    );\n  }\n\n  if (Array.isArray(item)) {\n    return <SelectMultipleValue data={item} />;\n  }\n\n  return (\n    <span className={className} {...props}>\n      <div className={cx(styles.valueContent)}>\n        {typeof item?.children === 'string' && item?.leadingIcon && (\n          <div className={styles.itemIcon}>{item.leadingIcon}</div>\n        )}\n        {item?.children ?? value}\n      </div>\n    </span>\n  );\n}\nSelectValue.displayName = 'Select.Value';\n"],"names":[],"mappings":";;;;;;;;;;AAiBgB;;;AASZ;AACA;AAEF;AACE;AAAY;;AAEV;AACA;AAA6B;AAC7B;;AAEF;;;;;AAeF;AACE;;;;;AAeF;AACE;;;AAaJ;AACA;;"}

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

@@ -1,11 +1,14 @@
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { ItemType } from './types';
 type ValueType = Omit<ItemType, 'children'>;
-type SelectValueProps = {
+type SelectValueProps = ComponentProps<'span'> & {
     placeholder?: string;
     children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;
     className?: string;
 };
-export declare const SelectValue: import("react").ForwardRefExoticComponent<SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function SelectValue({ children, placeholder, className, ...props }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectValue {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=select-value.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-value.d.ts","sourceRoot":"","sources":["../../../components/select/select-value.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,SAAS,EAAW,MAAM,OAAO,CAAC;AAIvD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,KAAK,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAE5C,KAAK,gBAAgB,GAAG;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,8GA8DvB,CAAC"}
+{"version":3,"file":"select-value.d.ts","sourceRoot":"","sources":["../../../components/select/select-value.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,KAAK,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAE5C,KAAK,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,WAAW,EACX,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CA2DlB;yBAhEe,WAAW"}

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx } from 'class-variance-authority';
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import styles from './select.module.css.js';
 import { SelectMultipleValue } from './select-multiple-value.js';
 import { useSelectContext } from './select-root.js';
 
-const SelectValue = forwardRef(({ children, placeholder, className, ...props }, ref) => {
+function SelectValue({ children, placeholder, className, ...props }) {
     const { value, items, multiple } = useSelectContext();
     const hasValue = multiple
         ? Array.isArray(value) && value.length > 0
@@ -23,19 +23,19 @@ const SelectValue = forwardRef(({ children, placeholder, className, ...props },
         return items[value];
     }, [value, items, multiple]);
     if (!hasValue) {
-        return (jsx("span", { ref: ref, "data-placeholder": '', className: cx(styles.placeholder, className), ...props, children: placeholder }));
+        return (jsx("span", { "data-placeholder": '', className: cx(styles.placeholder, className), ...props, children: placeholder }));
     }
     if (typeof children === 'function') {
-        return (jsx("span", { ref: ref, className: className, ...props, children: children(item) }));
+        return (jsx("span", { className: className, ...props, children: children(item) }));
     }
     if (children) {
-        return (jsx("span", { ref: ref, className: className, ...props, children: children }));
+        return (jsx("span", { className: className, ...props, children: children }));
     }
     if (Array.isArray(item)) {
         return jsx(SelectMultipleValue, { data: item });
     }
-    return (jsx("span", { ref: ref, className: className, ...props, children: jsxs("div", { className: cx(styles.valueContent), children: [typeof item?.children === 'string' && item?.leadingIcon && (jsx("div", { className: styles.itemIcon, children: item.leadingIcon })), item?.children ?? value] }) }));
-});
+    return (jsx("span", { className: className, ...props, children: jsxs("div", { className: cx(styles.valueContent), children: [typeof item?.children === 'string' && item?.leadingIcon && (jsx("div", { className: styles.itemIcon, children: item.leadingIcon })), item?.children ?? value] }) }));
+}
 SelectValue.displayName = 'Select.Value';
 
 export { SelectValue };

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

@@ -1 +1 @@
-{"version":3,"file":"select-value.js","sources":["../../../components/select/select-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { forwardRef, ReactNode, useMemo } from 'react';\nimport styles from './select.module.css';\nimport { SelectMultipleValue } from './select-multiple-value';\nimport { useSelectContext } from './select-root';\nimport { ItemType } from './types';\n\ntype ValueType = Omit<ItemType, 'children'>;\n\ntype SelectValueProps = {\n  placeholder?: string;\n  children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;\n  className?: string;\n};\n\nexport const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(\n  ({ children, placeholder, className, ...props }, ref) => {\n    const { value, items, multiple } = useSelectContext();\n\n    const hasValue = multiple\n      ? Array.isArray(value) && value.length > 0\n      : !!value;\n\n    const item = useMemo(() => {\n      if (!value) return undefined;\n      if (multiple && Array.isArray(value)) {\n        const itemValues = value.map(v => items[v]);\n        if (itemValues.length === 1) return itemValues[0];\n        return itemValues;\n      }\n      return items[value as string];\n    }, [value, items, multiple]);\n\n    if (!hasValue) {\n      return (\n        <span\n          ref={ref}\n          data-placeholder=''\n          className={cx(styles.placeholder, className)}\n          {...props}\n        >\n          {placeholder}\n        </span>\n      );\n    }\n\n    if (typeof children === 'function') {\n      return (\n        <span ref={ref} className={className} {...props}>\n          {children(item)}\n        </span>\n      );\n    }\n\n    if (children) {\n      return (\n        <span ref={ref} className={className} {...props}>\n          {children}\n        </span>\n      );\n    }\n\n    if (Array.isArray(item)) {\n      return <SelectMultipleValue data={item} />;\n    }\n\n    return (\n      <span ref={ref} className={className} {...props}>\n        <div className={cx(styles.valueContent)}>\n          {typeof item?.children === 'string' && item?.leadingIcon && (\n            <div className={styles.itemIcon}>{item.leadingIcon}</div>\n          )}\n          {item?.children ?? value}\n        </div>\n      </span>\n    );\n  }\n);\nSelectValue.displayName = 'Select.Value';\n"],"names":[],"mappings":";;;;;;;;;;;AAsBM;AACA;AAEF;AACE;AAAY;;AAEV;AACA;AAA6B;AAC7B;;AAEF;;;;;AAgBF;AACE;;;AAQA;;AAOF;AACE;;;AAaJ;AAEF;;"}
+{"version":3,"file":"select-value.js","sources":["../../../components/select/select-value.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps, ReactNode, useMemo } from 'react';\nimport styles from './select.module.css';\nimport { SelectMultipleValue } from './select-multiple-value';\nimport { useSelectContext } from './select-root';\nimport { ItemType } from './types';\n\ntype ValueType = Omit<ItemType, 'children'>;\n\ntype SelectValueProps = ComponentProps<'span'> & {\n  placeholder?: string;\n  children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;\n  className?: string;\n};\n\nexport function SelectValue({\n  children,\n  placeholder,\n  className,\n  ...props\n}: SelectValueProps) {\n  const { value, items, multiple } = useSelectContext();\n\n  const hasValue = multiple\n    ? Array.isArray(value) && value.length > 0\n    : !!value;\n\n  const item = useMemo(() => {\n    if (!value) return undefined;\n    if (multiple && Array.isArray(value)) {\n      const itemValues = value.map(v => items[v]);\n      if (itemValues.length === 1) return itemValues[0];\n      return itemValues;\n    }\n    return items[value as string];\n  }, [value, items, multiple]);\n\n  if (!hasValue) {\n    return (\n      <span\n        data-placeholder=''\n        className={cx(styles.placeholder, className)}\n        {...props}\n      >\n        {placeholder}\n      </span>\n    );\n  }\n\n  if (typeof children === 'function') {\n    return (\n      <span className={className} {...props}>\n        {children(item)}\n      </span>\n    );\n  }\n\n  if (children) {\n    return (\n      <span className={className} {...props}>\n        {children}\n      </span>\n    );\n  }\n\n  if (Array.isArray(item)) {\n    return <SelectMultipleValue data={item} />;\n  }\n\n  return (\n    <span className={className} {...props}>\n      <div className={cx(styles.valueContent)}>\n        {typeof item?.children === 'string' && item?.leadingIcon && (\n          <div className={styles.itemIcon}>{item.leadingIcon}</div>\n        )}\n        {item?.children ?? value}\n      </div>\n    </span>\n  );\n}\nSelectValue.displayName = 'Select.Value';\n"],"names":[],"mappings":";;;;;;;;AAiBgB;;;AASZ;AACA;AAEF;AACE;AAAY;;AAEV;AACA;AAA6B;AAC7B;;AAEF;;;;;AAeF;AACE;;;;;AAeF;AACE;;;AAaJ;AACA;;"}

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

@@ -1,23 +1,21 @@
-export declare const Select: ((props: import("./select-root").SelectRootProps) => import("react/jsx-runtime").JSX.Element) & {
-    Group: import("react").ForwardRefExoticComponent<import("./select-misc").SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-    Value: import("react").ForwardRefExoticComponent<{
-        placeholder?: string | undefined;
-        children?: import("react").ReactNode | ((value?: {
-            value: string;
-            leadingIcon?: import("react").ReactNode;
-        } | {
-            value: string;
-            leadingIcon?: import("react").ReactNode;
-        }[] | undefined) => import("react").ReactNode);
-        className?: string | undefined;
-    } & import("react").RefAttributes<HTMLSpanElement>>;
+import { SelectContent } from './select-content';
+import { SelectItem } from './select-item';
+import { SelectGroup, SelectLabel, SelectSeparator } from './select-misc';
+import { SelectTrigger } from './select-trigger';
+import { SelectValue } from './select-value';
+export declare const Select: {
+    (props: import("./select-root").SelectRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Group: typeof SelectGroup;
+    Value: typeof SelectValue;
     ScrollUpArrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectScrollUpArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ScrollDownArrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectScrollDownArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     List: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Trigger: import("react").ForwardRefExoticComponent<import("./select-trigger").SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<import("./select-content").SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
-    Item: import("react").ForwardRefExoticComponent<import("./select-item").SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
-    Separator: import("react").ForwardRefExoticComponent<import("./select-misc").SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
-    Label: import("react").ForwardRefExoticComponent<import("./select-misc").SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: typeof SelectTrigger;
+    Content: typeof SelectContent;
+    Item: typeof SelectItem;
+    Separator: typeof SelectSeparator;
+    Label: typeof SelectLabel;
 };
 //# sourceMappingURL=select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../components/select/select.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;CAWjB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../components/select/select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAWjB,CAAC"}

package/dist/components/side-panel/side-panel.cjs

@@ -18,15 +18,18 @@ const sidePanelRoot = classVarianceAuthority.cva(sidePanel_module.default['side-
         side: 'right'
     }
 });
-const SidePanelRoot = ({ children, side = 'right', className }) => {
-    return (jsxRuntime.jsx("aside", { className: sidePanelRoot({ side, className }), children: children }));
+const SidePanelRoot = ({ side = 'right', className, ...props }) => {
+    return jsxRuntime.jsx("aside", { className: sidePanelRoot({ side, className }), ...props });
 };
-const SidePanelHeader = ({ title, icon, actions = [], description }) => {
-    return (jsxRuntime.jsxs("div", { className: sidePanel_module.default['side-panel-header'], children: [jsxRuntime.jsxs(flex.Flex, { gap: 3, justify: 'between', align: 'center', children: [jsxRuntime.jsxs(flex.Flex, { gap: 3, children: [icon, jsxRuntime.jsx(text.Text, { size: 5, weight: 500, children: title })] }), jsxRuntime.jsx(flex.Flex, { gap: 3, children: actions?.map((action, index) => (jsxRuntime.jsx(React.Fragment, { children: action }, index))) })] }), description ? jsxRuntime.jsx(text.Text, { size: 2, children: description }) : null] }));
+SidePanelRoot.displayName = 'SidePanel';
+const SidePanelHeader = ({ title, icon, actions = [], description, ...props }) => {
+    return (jsxRuntime.jsxs("div", { className: sidePanel_module.default['side-panel-header'], ...props, children: [jsxRuntime.jsxs(flex.Flex, { gap: 3, justify: 'between', align: 'center', children: [jsxRuntime.jsxs(flex.Flex, { gap: 3, children: [icon, jsxRuntime.jsx(text.Text, { size: 5, weight: 500, children: title })] }), jsxRuntime.jsx(flex.Flex, { gap: 3, children: actions?.map((action, index) => (jsxRuntime.jsx(React.Fragment, { children: action }, index))) })] }), description ? jsxRuntime.jsx(text.Text, { size: 2, children: description }) : null] }));
 };
-const SidePanelSection = ({ children }) => {
-    return jsxRuntime.jsx("div", { className: sidePanel_module.default['side-panel-section'], children: children });
+SidePanelHeader.displayName = 'SidePanel.Header';
+const SidePanelSection = ({ className, ...props }) => {
+    return (jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(sidePanel_module.default['side-panel-section'], className), ...props }));
 };
+SidePanelSection.displayName = 'SidePanel.Section';
 const SidePanel = Object.assign(SidePanelRoot, {
     Header: SidePanelHeader,
     Section: SidePanelSection

package/dist/components/side-panel/side-panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"side-panel.cjs","sources":["../../../components/side-panel/side-panel.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { Fragment, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './side-panel.module.css';\n\nconst sidePanelRoot = cva(styles['side-panel'], {\n  variants: {\n    side: {\n      left: styles['side-panel-left'],\n      right: styles['side-panel-right']\n    }\n  },\n  defaultVariants: {\n    side: 'right'\n  }\n});\n\ninterface SidePanelProps extends VariantProps<typeof sidePanelRoot> {\n  children: ReactNode;\n  className?: string;\n}\n\nconst SidePanelRoot = ({\n  children,\n  side = 'right',\n  className\n}: SidePanelProps) => {\n  return (\n    <aside className={sidePanelRoot({ side, className })}>{children}</aside>\n  );\n};\n\ninterface SidePanelHeaderProps {\n  title: string;\n  icon?: ReactNode;\n  actions?: Array<ReactNode>;\n  description?: string;\n}\n\nconst SidePanelHeader = ({\n  title,\n  icon,\n  actions = [],\n  description\n}: SidePanelHeaderProps) => {\n  return (\n    <div className={styles['side-panel-header']}>\n      <Flex gap={3} justify='between' align='center'>\n        <Flex gap={3}>\n          {icon}\n          <Text size={5} weight={500}>\n            {title}\n          </Text>\n        </Flex>\n        <Flex gap={3}>\n          {actions?.map((action, index) => (\n            <Fragment key={index}>{action}</Fragment>\n          ))}\n        </Flex>\n      </Flex>\n      {description ? <Text size={2}>{description}</Text> : null}\n    </div>\n  );\n};\n\ninterface SidePanelSectionProps {\n  children: ReactNode;\n}\n\nconst SidePanelSection = ({ children }: SidePanelSectionProps) => {\n  return <div className={styles['side-panel-section']}>{children}</div>;\n};\n\nexport const SidePanel = Object.assign(SidePanelRoot, {\n  Header: SidePanelHeader,\n  Section: SidePanelSection\n});\n"],"names":["cva","styles","_jsx","_jsxs","Flex","Text","Fragment"],"mappings":";;;;;;;;;AAMA,MAAM,aAAa,GAAGA,0BAAG,CAACC,wBAAM,CAAC,YAAY,CAAC,EAAE;AAC9C,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAC/B,YAAA,KAAK,EAAEA,wBAAM,CAAC,kBAAkB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;AACd,KAAA;AACF,CAAA,CAAC,CAAC;AAOH,MAAM,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,SAAS,EACM,KAAI;AACnB,IAAA,QACEC,cAAO,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAS,EACxE;AACJ,CAAC,CAAC;AASF,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,EAAE,EACZ,WAAW,EACU,KAAI;IACzB,QACEC,yBAAK,SAAS,EAAEF,wBAAM,CAAC,mBAAmB,CAAC,EACzC,QAAA,EAAA,CAAAE,eAAA,CAACC,SAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,aAC5CD,eAAC,CAAAC,SAAI,IAAC,GAAG,EAAE,CAAC,EACT,QAAA,EAAA,CAAA,IAAI,EACLF,cAAA,CAACG,SAAI,EAAA,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EACvB,QAAA,EAAA,KAAK,EACD,CAAA,CAAA,EAAA,CACF,EACPH,cAAA,CAACE,SAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAA,QAAA,EACT,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BF,eAACI,cAAQ,EAAA,EAAA,QAAA,EAAc,MAAM,EAAA,EAAd,KAAK,CAAqB,CAC1C,CAAC,EAAA,CACG,IACF,EACN,WAAW,GAAGJ,cAAC,CAAAG,SAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAA,QAAA,EAAG,WAAW,EAAQ,CAAA,GAAG,IAAI,CACrD,EAAA,CAAA,EACN;AACJ,CAAC,CAAC;AAMF,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;IAC/D,OAAOH,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAED,wBAAM,CAAC,oBAAoB,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAC;AACxE,CAAC,CAAC;MAEW,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;AACpD,IAAA,MAAM,EAAE,eAAe;AACvB,IAAA,OAAO,EAAE,gBAAgB;AAC1B,CAAA;;;;"}
+{"version":3,"file":"side-panel.cjs","sources":["../../../components/side-panel/side-panel.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ComponentProps, Fragment, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './side-panel.module.css';\n\nconst sidePanelRoot = cva(styles['side-panel'], {\n  variants: {\n    side: {\n      left: styles['side-panel-left'],\n      right: styles['side-panel-right']\n    }\n  },\n  defaultVariants: {\n    side: 'right'\n  }\n});\n\ninterface SidePanelProps\n  extends ComponentProps<'aside'>,\n    VariantProps<typeof sidePanelRoot> {}\n\nconst SidePanelRoot = ({\n  side = 'right',\n  className,\n  ...props\n}: SidePanelProps) => {\n  return <aside className={sidePanelRoot({ side, className })} {...props} />;\n};\n\nSidePanelRoot.displayName = 'SidePanel';\n\ninterface SidePanelHeaderProps extends ComponentProps<'div'> {\n  title: string;\n  icon?: ReactNode;\n  actions?: Array<ReactNode>;\n  description?: string;\n}\n\nconst SidePanelHeader = ({\n  title,\n  icon,\n  actions = [],\n  description,\n  ...props\n}: SidePanelHeaderProps) => {\n  return (\n    <div className={styles['side-panel-header']} {...props}>\n      <Flex gap={3} justify='between' align='center'>\n        <Flex gap={3}>\n          {icon}\n          <Text size={5} weight={500}>\n            {title}\n          </Text>\n        </Flex>\n        <Flex gap={3}>\n          {actions?.map((action, index) => (\n            <Fragment key={index}>{action}</Fragment>\n          ))}\n        </Flex>\n      </Flex>\n      {description ? <Text size={2}>{description}</Text> : null}\n    </div>\n  );\n};\n\nSidePanelHeader.displayName = 'SidePanel.Header';\n\ninterface SidePanelSectionProps extends ComponentProps<'div'> {}\n\nconst SidePanelSection = ({ className, ...props }: SidePanelSectionProps) => {\n  return (\n    <div className={cx(styles['side-panel-section'], className)} {...props} />\n  );\n};\n\nSidePanelSection.displayName = 'SidePanel.Section';\n\nexport const SidePanel = Object.assign(SidePanelRoot, {\n  Header: SidePanelHeader,\n  Section: SidePanelSection\n});\n"],"names":["cva","styles","_jsx","_jsxs","Flex","Text","Fragment","cx"],"mappings":";;;;;;;;;AAMA,MAAM,aAAa,GAAGA,0BAAG,CAACC,wBAAM,CAAC,YAAY,CAAC,EAAE;AAC9C,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAC/B,YAAA,KAAK,EAAEA,wBAAM,CAAC,kBAAkB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;AACd,KAAA;AACF,CAAA,CAAC,CAAC;AAMH,MAAM,aAAa,GAAG,CAAC,EACrB,IAAI,GAAG,OAAO,EACd,SAAS,EACT,GAAG,KAAK,EACO,KAAI;AACnB,IAAA,OAAOC,cAAO,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAM,GAAA,KAAK,GAAI,CAAC;AAC7E,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,WAAW,CAAC;AASxC,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,EAAE,EACZ,WAAW,EACX,GAAG,KAAK,EACa,KAAI;IACzB,QACEC,yBAAK,SAAS,EAAEF,wBAAM,CAAC,mBAAmB,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EAAA,CACpDE,gBAACC,SAAI,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAC5C,QAAA,EAAA,CAAAD,eAAA,CAACC,SAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CACT,IAAI,EACLF,cAAC,CAAAG,SAAI,IAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAA,QAAA,EACvB,KAAK,EAAA,CACD,CACF,EAAA,CAAA,EACPH,eAACE,SAAI,EAAA,EAAC,GAAG,EAAE,CAAC,YACT,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BF,eAACI,cAAQ,EAAA,EAAA,QAAA,EAAc,MAAM,EAAA,EAAd,KAAK,CAAqB,CAC1C,CAAC,EAAA,CACG,IACF,EACN,WAAW,GAAGJ,cAAC,CAAAG,SAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAA,QAAA,EAAG,WAAW,EAAQ,CAAA,GAAG,IAAI,CACrD,EAAA,CAAA,EACN;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAIjD,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyB,KAAI;AAC1E,IAAA,QACEH,cAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEK,yBAAE,CAACN,wBAAM,CAAC,oBAAoB,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,CAAI,EAC1E;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,mBAAmB,CAAC;MAEtC,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;AACpD,IAAA,MAAM,EAAE,eAAe;AACvB,IAAA,OAAO,EAAE,gBAAgB;AAC1B,CAAA;;;;"}

package/dist/components/side-panel/side-panel.d.ts

@@ -1,24 +1,30 @@
 import { VariantProps } from 'class-variance-authority';
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 declare const sidePanelRoot: (props?: ({
     side?: "left" | "right" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface SidePanelProps extends VariantProps<typeof sidePanelRoot> {
-    children: ReactNode;
-    className?: string;
+interface SidePanelProps extends ComponentProps<'aside'>, VariantProps<typeof sidePanelRoot> {
 }
-interface SidePanelHeaderProps {
+interface SidePanelHeaderProps extends ComponentProps<'div'> {
     title: string;
     icon?: ReactNode;
     actions?: Array<ReactNode>;
     description?: string;
 }
-interface SidePanelSectionProps {
-    children: ReactNode;
+interface SidePanelSectionProps extends ComponentProps<'div'> {
 }
-export declare const SidePanel: (({ children, side, className }: SidePanelProps) => import("react/jsx-runtime").JSX.Element) & {
-    Header: ({ title, icon, actions, description }: SidePanelHeaderProps) => import("react/jsx-runtime").JSX.Element;
-    Section: ({ children }: SidePanelSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidePanel: {
+    ({ side, className, ...props }: SidePanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Header: {
+        ({ title, icon, actions, description, ...props }: SidePanelHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Section: {
+        ({ className, ...props }: SidePanelSectionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
 };
 export {};
 //# sourceMappingURL=side-panel.d.ts.map

package/dist/components/side-panel/side-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-panel.d.ts","sourceRoot":"","sources":["../../../components/side-panel/side-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5C,QAAA,MAAM,aAAa;;8EAUjB,CAAC;AAEH,UAAU,cAAe,SAAQ,YAAY,CAAC,OAAO,aAAa,CAAC;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA4BD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAMD,eAAO,MAAM,SAAS,mCA/CnB,cAAc;oDAkBd,oBAAoB;4BAyBiB,qBAAqB;CAO3D,CAAC"}
+{"version":3,"file":"side-panel.d.ts","sourceRoot":"","sources":["../../../components/side-panel/side-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAK5D,QAAA,MAAM,aAAa;;8EAUjB,CAAC;AAEH,UAAU,cACR,SAAQ,cAAc,CAAC,OAAO,CAAC,EAC7B,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAYzC,UAAU,oBAAqB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+BD,UAAU,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAUhE,eAAO,MAAM,SAAS;oCApDnB,cAAc;;;;0DAmBd,oBAAoB;;;;kCAyB4B,qBAAqB;;;CAWtE,CAAC"}

package/dist/components/side-panel/side-panel.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { cva } from 'class-variance-authority';
+import { cva, cx } from 'class-variance-authority';
 import { Fragment } from 'react';
 import { Flex } from '../flex/flex.js';
 import { Text } from '../text/text.js';
@@ -16,15 +16,18 @@ const sidePanelRoot = cva(styles['side-panel'], {
         side: 'right'
     }
 });
-const SidePanelRoot = ({ children, side = 'right', className }) => {
-    return (jsx("aside", { className: sidePanelRoot({ side, className }), children: children }));
+const SidePanelRoot = ({ side = 'right', className, ...props }) => {
+    return jsx("aside", { className: sidePanelRoot({ side, className }), ...props });
 };
-const SidePanelHeader = ({ title, icon, actions = [], description }) => {
-    return (jsxs("div", { className: styles['side-panel-header'], children: [jsxs(Flex, { gap: 3, justify: 'between', align: 'center', children: [jsxs(Flex, { gap: 3, children: [icon, jsx(Text, { size: 5, weight: 500, children: title })] }), jsx(Flex, { gap: 3, children: actions?.map((action, index) => (jsx(Fragment, { children: action }, index))) })] }), description ? jsx(Text, { size: 2, children: description }) : null] }));
+SidePanelRoot.displayName = 'SidePanel';
+const SidePanelHeader = ({ title, icon, actions = [], description, ...props }) => {
+    return (jsxs("div", { className: styles['side-panel-header'], ...props, children: [jsxs(Flex, { gap: 3, justify: 'between', align: 'center', children: [jsxs(Flex, { gap: 3, children: [icon, jsx(Text, { size: 5, weight: 500, children: title })] }), jsx(Flex, { gap: 3, children: actions?.map((action, index) => (jsx(Fragment, { children: action }, index))) })] }), description ? jsx(Text, { size: 2, children: description }) : null] }));
 };
-const SidePanelSection = ({ children }) => {
-    return jsx("div", { className: styles['side-panel-section'], children: children });
+SidePanelHeader.displayName = 'SidePanel.Header';
+const SidePanelSection = ({ className, ...props }) => {
+    return (jsx("div", { className: cx(styles['side-panel-section'], className), ...props }));
 };
+SidePanelSection.displayName = 'SidePanel.Section';
 const SidePanel = Object.assign(SidePanelRoot, {
     Header: SidePanelHeader,
     Section: SidePanelSection

package/dist/components/side-panel/side-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-panel.js","sources":["../../../components/side-panel/side-panel.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { Fragment, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './side-panel.module.css';\n\nconst sidePanelRoot = cva(styles['side-panel'], {\n  variants: {\n    side: {\n      left: styles['side-panel-left'],\n      right: styles['side-panel-right']\n    }\n  },\n  defaultVariants: {\n    side: 'right'\n  }\n});\n\ninterface SidePanelProps extends VariantProps<typeof sidePanelRoot> {\n  children: ReactNode;\n  className?: string;\n}\n\nconst SidePanelRoot = ({\n  children,\n  side = 'right',\n  className\n}: SidePanelProps) => {\n  return (\n    <aside className={sidePanelRoot({ side, className })}>{children}</aside>\n  );\n};\n\ninterface SidePanelHeaderProps {\n  title: string;\n  icon?: ReactNode;\n  actions?: Array<ReactNode>;\n  description?: string;\n}\n\nconst SidePanelHeader = ({\n  title,\n  icon,\n  actions = [],\n  description\n}: SidePanelHeaderProps) => {\n  return (\n    <div className={styles['side-panel-header']}>\n      <Flex gap={3} justify='between' align='center'>\n        <Flex gap={3}>\n          {icon}\n          <Text size={5} weight={500}>\n            {title}\n          </Text>\n        </Flex>\n        <Flex gap={3}>\n          {actions?.map((action, index) => (\n            <Fragment key={index}>{action}</Fragment>\n          ))}\n        </Flex>\n      </Flex>\n      {description ? <Text size={2}>{description}</Text> : null}\n    </div>\n  );\n};\n\ninterface SidePanelSectionProps {\n  children: ReactNode;\n}\n\nconst SidePanelSection = ({ children }: SidePanelSectionProps) => {\n  return <div className={styles['side-panel-section']}>{children}</div>;\n};\n\nexport const SidePanel = Object.assign(SidePanelRoot, {\n  Header: SidePanelHeader,\n  Section: SidePanelSection\n});\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;AAMA,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;AAC9C,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC/B,YAAA,KAAK,EAAE,MAAM,CAAC,kBAAkB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;AACd,KAAA;AACF,CAAA,CAAC,CAAC;AAOH,MAAM,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,GAAG,OAAO,EACd,SAAS,EACM,KAAI;AACnB,IAAA,QACEA,GAAO,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAS,EACxE;AACJ,CAAC,CAAC;AASF,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,EAAE,EACZ,WAAW,EACU,KAAI;IACzB,QACEC,cAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,EACzC,QAAA,EAAA,CAAAA,IAAA,CAAC,IAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,aAC5CA,IAAC,CAAA,IAAI,IAAC,GAAG,EAAE,CAAC,EACT,QAAA,EAAA,CAAA,IAAI,EACLD,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EACvB,QAAA,EAAA,KAAK,EACD,CAAA,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAA,QAAA,EACT,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BA,IAAC,QAAQ,EAAA,EAAA,QAAA,EAAc,MAAM,EAAA,EAAd,KAAK,CAAqB,CAC1C,CAAC,EAAA,CACG,IACF,EACN,WAAW,GAAGA,GAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAA,QAAA,EAAG,WAAW,EAAQ,CAAA,GAAG,IAAI,CACrD,EAAA,CAAA,EACN;AACJ,CAAC,CAAC;AAMF,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAyB,KAAI;IAC/D,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CAAC;AACxE,CAAC,CAAC;MAEW,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;AACpD,IAAA,MAAM,EAAE,eAAe;AACvB,IAAA,OAAO,EAAE,gBAAgB;AAC1B,CAAA;;;;"}
+{"version":3,"file":"side-panel.js","sources":["../../../components/side-panel/side-panel.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ComponentProps, Fragment, ReactNode } from 'react';\nimport { Flex } from '../flex';\nimport { Text } from '../text';\nimport styles from './side-panel.module.css';\n\nconst sidePanelRoot = cva(styles['side-panel'], {\n  variants: {\n    side: {\n      left: styles['side-panel-left'],\n      right: styles['side-panel-right']\n    }\n  },\n  defaultVariants: {\n    side: 'right'\n  }\n});\n\ninterface SidePanelProps\n  extends ComponentProps<'aside'>,\n    VariantProps<typeof sidePanelRoot> {}\n\nconst SidePanelRoot = ({\n  side = 'right',\n  className,\n  ...props\n}: SidePanelProps) => {\n  return <aside className={sidePanelRoot({ side, className })} {...props} />;\n};\n\nSidePanelRoot.displayName = 'SidePanel';\n\ninterface SidePanelHeaderProps extends ComponentProps<'div'> {\n  title: string;\n  icon?: ReactNode;\n  actions?: Array<ReactNode>;\n  description?: string;\n}\n\nconst SidePanelHeader = ({\n  title,\n  icon,\n  actions = [],\n  description,\n  ...props\n}: SidePanelHeaderProps) => {\n  return (\n    <div className={styles['side-panel-header']} {...props}>\n      <Flex gap={3} justify='between' align='center'>\n        <Flex gap={3}>\n          {icon}\n          <Text size={5} weight={500}>\n            {title}\n          </Text>\n        </Flex>\n        <Flex gap={3}>\n          {actions?.map((action, index) => (\n            <Fragment key={index}>{action}</Fragment>\n          ))}\n        </Flex>\n      </Flex>\n      {description ? <Text size={2}>{description}</Text> : null}\n    </div>\n  );\n};\n\nSidePanelHeader.displayName = 'SidePanel.Header';\n\ninterface SidePanelSectionProps extends ComponentProps<'div'> {}\n\nconst SidePanelSection = ({ className, ...props }: SidePanelSectionProps) => {\n  return (\n    <div className={cx(styles['side-panel-section'], className)} {...props} />\n  );\n};\n\nSidePanelSection.displayName = 'SidePanel.Section';\n\nexport const SidePanel = Object.assign(SidePanelRoot, {\n  Header: SidePanelHeader,\n  Section: SidePanelSection\n});\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;AAMA,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;AAC9C,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAC/B,YAAA,KAAK,EAAE,MAAM,CAAC,kBAAkB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;AACd,KAAA;AACF,CAAA,CAAC,CAAC;AAMH,MAAM,aAAa,GAAG,CAAC,EACrB,IAAI,GAAG,OAAO,EACd,SAAS,EACT,GAAG,KAAK,EACO,KAAI;AACnB,IAAA,OAAOA,GAAO,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAM,GAAA,KAAK,GAAI,CAAC;AAC7E,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,WAAW,CAAC;AASxC,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,GAAG,EAAE,EACZ,WAAW,EACX,GAAG,KAAK,EACa,KAAI;IACzB,QACEC,cAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EAAA,CACpDA,KAAC,IAAI,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAC5C,QAAA,EAAA,CAAAA,IAAA,CAAC,IAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CACT,IAAI,EACLD,GAAC,CAAA,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAA,QAAA,EACvB,KAAK,EAAA,CACD,CACF,EAAA,CAAA,EACPA,IAAC,IAAI,EAAA,EAAC,GAAG,EAAE,CAAC,YACT,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAC1BA,IAAC,QAAQ,EAAA,EAAA,QAAA,EAAc,MAAM,EAAA,EAAd,KAAK,CAAqB,CAC1C,CAAC,EAAA,CACG,IACF,EACN,WAAW,GAAGA,GAAC,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,CAAC,EAAA,QAAA,EAAG,WAAW,EAAQ,CAAA,GAAG,IAAI,CACrD,EAAA,CAAA,EACN;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAIjD,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyB,KAAI;AAC1E,IAAA,QACEA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,CAAI,EAC1E;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,mBAAmB,CAAC;MAEtC,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;AACpD,IAAA,MAAM,EAAE,eAAe;AACvB,IAAA,OAAO,EAAE,gBAAgB;AAC1B,CAAA;;;;"}

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

@@ -10,7 +10,7 @@ var tooltip = require('../tooltip/tooltip.cjs');
 var sidebar_module = require('./sidebar.module.css.cjs');
 var sidebarRoot = require('./sidebar-root.cjs');
 
-const SidebarItem = React.forwardRef(({ classNames, leadingIcon, children, active, disabled, as = jsxRuntime.jsx("a", {}), ...props }, ref) => {
+function SidebarItem({ classNames, leadingIcon, children, active, disabled, as = jsxRuntime.jsx("a", {}), ...props }) {
     const { isCollapsed, hideCollapsedItemTooltip } = React.useContext(sidebarRoot.SidebarContext);
     const shouldShowFallback = leadingIcon == undefined &&
         isCollapsed &&
@@ -23,7 +23,6 @@ const SidebarItem = React.forwardRef(({ classNames, leadingIcon, children, activ
         'aria-hidden': true
     };
     const content = React.cloneElement(as, {
-        ref,
         className: classVarianceAuthority.cx(sidebar_module.default['nav-item'], classNames?.root),
         'data-active': active,
         'data-disabled': disabled,
@@ -39,7 +38,7 @@ const SidebarItem = React.forwardRef(({ classNames, leadingIcon, children, activ
         return (jsxRuntime.jsxs(tooltip.Tooltip, { children: [jsxRuntime.jsx(tooltip.Tooltip.Trigger, { render: content }), jsxRuntime.jsx(tooltip.Tooltip.Content, { side: 'right', children: children })] }));
     }
     return content;
-});
+}
 SidebarItem.displayName = 'Sidebar.Item';
 
 exports.SidebarItem = SidebarItem;