@cube-dev/ui-kit 0.68.0 → 0.69.1

package/es/components/fields/FilterPicker/FilterPicker.js

@@ -1,12 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useRef, useState, } from 'react';
+import { Children, cloneElement, forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
+import { FocusScope, useKeyboard } from 'react-aria';
 import { Section as BaseSection, Item } from 'react-stately';
 import { useWarn } from '../../../_internal/hooks/use-warn';
 import { DirectionIcon } from '../../../icons';
@@ -43,7 +44,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, icon, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, placeholder, size = 'small', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, children, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, header, footer, headerStyles, footerStyles, allowsCustomValue, renderSummary, isCheckable, ...otherProps } = props;
+    let { qa, label, extra, icon, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, header, footer, headerStyles, footerStyles, allowsCustomValue, renderSummary, isCheckable, ...otherProps } = props;
     styles = extractStyles(otherProps, PROP_STYLES, styles);
     // Warn if isCheckable is false in single selection mode
     useWarn(isCheckable === false && selectionMode === 'single', {
@@ -103,7 +104,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                 : []);
         const labels = [];
         const extractLabels = (nodes) => {
-            React.Children.forEach(nodes, (child) => {
+            Children.forEach(nodes, (child) => {
                 if (!child || typeof child !== 'object')
                     return;
                 if (child.type === Item) {
@@ -124,7 +125,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         const processedKeys = new Set();
         // Modified extractLabels to track which keys we've processed
         const extractLabelsWithTracking = (nodes) => {
-            React.Children.forEach(nodes, (child) => {
+            Children.forEach(nodes, (child) => {
                 if (!child || typeof child !== 'object')
                     return;
                 if (child.type === Item) {
@@ -169,7 +170,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             : null,
         multiple: (effectiveSelectedKeys ?? []).map(normalizeKeyValue),
     });
-    React.useEffect(() => {
+    useEffect(() => {
         latestSelectionRef.current = {
             single: effectiveSelectedKey != null
                 ? normalizeKeyValue(effectiveSelectedKey)
@@ -179,7 +180,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     }, [effectiveSelectedKey, effectiveSelectedKeys]);
     const selectionsWhenClosed = useRef({ single: null, multiple: [] });
     // Function to sort children with selected items on top
-    const getSortedChildren = React.useCallback(() => {
+    const getSortedChildren = useCallback(() => {
         if (!children)
             return children;
         // When the popover is **closed** we don't want to trigger any resorting –
@@ -220,7 +221,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         };
         // Helper function to sort children array
         const sortChildrenArray = (childrenArray) => {
-            const cloneWithNormalizedKey = (item) => React.cloneElement(item, {
+            const cloneWithNormalizedKey = (item) => cloneElement(item, {
                 key: normalizeKeyValue(item.key),
             });
             const selected = [];
@@ -256,7 +257,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                         }
                     });
                     // Create new section with sorted children, preserving React element properly
-                    unselected.push(React.cloneElement(child, {
+                    unselected.push(cloneElement(child, {
                         ...child.props,
                         children: [...selectedItems, ...unselectedItems],
                     }));
@@ -275,7 +276,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             return [...selected, ...unselected];
         };
         // Sort the children
-        const childrenArray = React.Children.toArray(children);
+        const childrenArray = Children.toArray(children);
         const sortedChildren = sortChildrenArray(childrenArray);
         // Cache the sorted order when popover opens
         if (isPopoverOpen) {
@@ -292,16 +293,6 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     // FilterListBox handles custom values internally when allowsCustomValue={true}
     // We only provide the sorted original children
     const finalChildren = getSortedChildren();
-    // Function to close popover and focus trigger button
-    const closeAndFocus = React.useCallback((close) => {
-        close();
-        // Use setTimeout to ensure the popover closes first, then focus the trigger
-        setTimeout(() => {
-            if (triggerRef.current) {
-                triggerRef.current.focus();
-            }
-        }, 0);
-    }, []);
     const renderTriggerContent = () => {
         // When there is a selection and a custom summary renderer is provided – use it.
         if (hasSelection && typeof renderSummary === 'function') {
@@ -341,7 +332,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     // The trigger is rendered as a function so we can access the dialog state
     const renderTrigger = (state) => {
         // Track popover open/close state to control sorting
-        React.useEffect(() => {
+        useEffect(() => {
             if (state.isOpen !== isPopoverOpen) {
                 setIsPopoverOpen(state.isOpen);
                 if (!state.isOpen) {
@@ -352,64 +343,73 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                 }
             }
         }, [state.isOpen, isPopoverOpen]);
+        // Add keyboard support for arrow keys to open the popover
+        const { keyboardProps } = useKeyboard({
+            onKeyDown: (e) => {
+                if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !state.isOpen) {
+                    e.preventDefault();
+                    state.open();
+                }
+            },
+        });
         return (_jsx(Button, { ref: triggerRef, qa: props.qa || 'FilterPicker', type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled, isLoading: isLoading, mods: {
                 placeholder: !hasSelection,
                 selected: hasSelection,
                 ...externalMods,
-            }, icon: icon, rightIcon: _jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' }), styles: styles, ...otherProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
+            }, icon: icon, rightIcon: _jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' }), styles: styles, ...otherProps, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
     };
-    const filterPickerField = (_jsxs(DialogTrigger, { type: "popover", placement: "bottom start", shouldFlip: true, isDismissable: true, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: { gridRows: '1sf', ...popoverStyles }, children: _jsx(FilterListBox, { autoFocus: true, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, selectedKey: selectionMode === 'single' ? effectiveSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? effectiveSelectedKeys : undefined, disabledKeys: disabledKeys, focusOnHover: focusOnHover, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, stateRef: listStateRef, isCheckable: isCheckable, mods: {
-                        popover: true,
-                    }, header: header, footer: footer, headerStyles: headerStyles, footerStyles: footerStyles, qa: `${props.qa || 'FilterPicker'}ListBox`, onEscape: () => closeAndFocus(close), onOptionClick: (key) => {
-                        // For FilterPicker, clicking the content area should close the popover
-                        // in multiple selection mode (single mode already closes via onSelectionChange)
-                        if (selectionMode === 'multiple' && isCheckable) {
-                            closeAndFocus(close);
-                        }
-                    }, onSelectionChange: (selection) => {
-                        // No need to change any flags - children order is cached
-                        // Update internal state if uncontrolled
-                        if (selectionMode === 'single') {
-                            if (!isControlledSingle) {
-                                setInternalSelectedKey(selection);
+    const filterPickerField = (_jsxs(DialogTrigger, { type: "popover", placement: "bottom start", shouldFlip: true, isDismissable: true, children: [renderTrigger, (close) => (_jsx(Dialog, { display: "grid", styles: { gridRows: '1sf', ...popoverStyles }, children: _jsx(FocusScope, { restoreFocus: true, children: _jsx(FilterListBox, { autoFocus: true, "aria-label": `${props['aria-label'] ?? props.label ?? ''} Picker`, selectedKey: selectionMode === 'single' ? effectiveSelectedKey : undefined, selectedKeys: selectionMode === 'multiple' ? effectiveSelectedKeys : undefined, disabledKeys: disabledKeys, focusOnHover: focusOnHover, shouldFocusWrap: shouldFocusWrap, allowsCustomValue: allowsCustomValue, selectionMode: selectionMode, validationState: validationState, isDisabled: isDisabled, stateRef: listStateRef, isCheckable: isCheckable, mods: {
+                            popover: true,
+                        }, size: size === 'small' ? 'medium' : size, header: header, footer: footer, headerStyles: headerStyles, footerStyles: footerStyles, qa: `${props.qa || 'FilterPicker'}ListBox`, onEscape: () => close(), onOptionClick: (key) => {
+                            // For FilterPicker, clicking the content area should close the popover
+                            // in multiple selection mode (single mode already closes via onSelectionChange)
+                            if (selectionMode === 'multiple' && isCheckable) {
+                                close();
                             }
-                        }
-                        else {
-                            if (!isControlledMultiple) {
-                                let normalized = selection;
+                        }, onSelectionChange: (selection) => {
+                            // No need to change any flags - children order is cached
+                            // Update internal state if uncontrolled
+                            if (selectionMode === 'single') {
+                                if (!isControlledSingle) {
+                                    setInternalSelectedKey(selection);
+                                }
+                            }
+                            else {
+                                if (!isControlledMultiple) {
+                                    let normalized = selection;
+                                    if (Array.isArray(selection)) {
+                                        normalized = processSelectionArray(selection);
+                                    }
+                                    else if (selection &&
+                                        typeof selection === 'object' &&
+                                        selection instanceof Set) {
+                                        normalized = processSelectionArray(selection);
+                                    }
+                                    setInternalSelectedKeys(normalized);
+                                }
+                            }
+                            // Update latest selection ref synchronously
+                            if (selectionMode === 'single') {
+                                latestSelectionRef.current.single = selection;
+                            }
+                            else {
                                 if (Array.isArray(selection)) {
-                                    normalized = processSelectionArray(selection);
+                                    latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
                                 }
                                 else if (selection &&
                                     typeof selection === 'object' &&
                                     selection instanceof Set) {
-                                    normalized = processSelectionArray(selection);
+                                    latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
+                                }
+                                else {
+                                    latestSelectionRef.current.multiple = selection;
                                 }
-                                setInternalSelectedKeys(normalized);
-                            }
-                        }
-                        // Update latest selection ref synchronously
-                        if (selectionMode === 'single') {
-                            latestSelectionRef.current.single = selection;
-                        }
-                        else {
-                            if (Array.isArray(selection)) {
-                                latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
-                            }
-                            else if (selection &&
-                                typeof selection === 'object' &&
-                                selection instanceof Set) {
-                                latestSelectionRef.current.multiple = Array.from(new Set(processSelectionArray(selection)));
                             }
-                            else {
-                                latestSelectionRef.current.multiple = selection;
+                            onSelectionChange?.(selection);
+                            if (selectionMode === 'single') {
+                                close();
                             }
-                        }
-                        onSelectionChange?.(selection);
-                        if (selectionMode === 'single') {
-                            closeAndFocus(close);
-                        }
-                    }, children: finalChildren }) }))] }));
+                        }, children: finalChildren }) }) }))] }));
     return wrapWithField(filterPickerField, ref, mergeProps({
         ...props,
         styles: undefined,

package/es/components/fields/FilterPicker/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/Input/Input.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/Input/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/ListBox/ListBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 
@@ -15,6 +15,7 @@ import { useWarn } from '../../../_internal/hooks/use-warn';
 import { CheckIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { SIZES } from '../../../tokens';
 import { mergeProps, useCombinedRefs } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 // Import Menu styled components for header and footer
@@ -85,8 +86,8 @@ const OptionElement = tasty({
             ':last-of-type': '0',
         },
         height: {
-            '[data-size="small"]': 'min 4x',
-            '[data-size="medium"]': 'min 5x',
+            '': 'min @size-md',
+            '[data-size="large"]': 'min @size-lg',
         },
         boxSizing: 'border-box',
         radius: '1r',
@@ -224,7 +225,7 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = 'small', labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, escapeKeyBehavior, onEscape, isCheckable, onOptionClick, ...otherProps } = props;
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = 'medium', labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, escapeKeyBehavior, onEscape, isCheckable, onOptionClick, ...otherProps } = props;
     // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format
     const externalSelectionHandler = onSelectionChange || props.onChange;
     const wrappedOnSelectionChange = useMemo(() => {
@@ -333,7 +334,6 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
         'aria-label': props['aria-label'] || label?.toString(),
         isDisabled,
         shouldUseVirtualFocus: shouldUseVirtualFocus ?? false,
-        shouldFocusWrap: true,
         escapeKeyBehavior: onEscape ? 'none' : 'clearSelection',
     }, listState, listRef);
     const { isFocused, focusProps } = useFocus({ isDisabled });
@@ -353,9 +353,9 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
         estimateSize: (index) => {
             const currentItem = itemsArrayRef.current[index];
             if (currentItem?.props?.description) {
-                return 49;
+                return SIZES.XL + 1;
             }
-            return size === 'small' ? 33 : 41;
+            return size === 'large' ? SIZES.XL + 1 : SIZES.MD + 1;
         },
         measureElement: (el) => {
             return el.offsetHeight + 1;

package/es/components/fields/ListBox/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 
@@ -23,8 +23,8 @@ const StyledTextInputBase = tasty(TextInputBase, {
 const StepperContainer = tasty({
     styles: {
         display: 'grid',
-        gridColumns: '1fr',
-        gridRows: 'minmax(1px, 1fr) minmax(1px, 1fr)',
+        gridColumns: '1sf',
+        gridRows: '1sf 1sf',
         flow: 'column',
         placeSelf: 'stretch',
     },

package/es/components/fields/NumberInput/StepButton.js

@@ -1,38 +1,40 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CaretDownIcon, CaretUpIcon } from '../../../icons';
+import { DirectionIcon } from '../../../icons';
+import { tasty } from '../../../tasty';
 import { Button } from '../../actions';
-const STEP_BUTTON_STYLES = {
-    width: '4x',
-    radius: {
-        '': '0 (1r - 1bw) 0 0',
-        down: '0 0 (1r - 1bw) 0',
+const StepButtonElement = tasty(Button, {
+    preventDefault: true,
+    type: 'neutral',
+    styles: {
+        width: '2.5x',
+        height: 'auto',
+        radius: {
+            '': '0 (1r - 1bw) 0 0',
+            down: '0 0 (1r - 1bw) 0',
+        },
+        fontSize: '12px',
+        lineHeight: '12px',
+        fill: {
+            '': '#dark.0',
+            hovered: '#dark.04',
+            pressed: '#purple.10',
+            '[disabled]': '#dark.0',
+        },
+        '@icon-size': '1fs',
     },
-    fontSize: '12px',
-    lineHeight: '12px',
-    height: 'auto',
-    fill: {
-        '': '#dark.0',
-        hovered: '#dark.04',
-        pressed: '#purple.10',
-        '[disabled]': '#dark.0',
-    },
-    '@icon-size': {
-        '': '14px',
-        '[data-size="small"]': '13px',
-    },
-};
+});
 /**
  * Buttons for NumberField.
  */
 export function StepButton(props) {
-    return (_jsx(Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? _jsx(CaretUpIcon, {}) : _jsx(CaretDownIcon, {}), mods: {
+    return (_jsx(StepButtonElement, { preventDefault: true, type: "neutral", icon: _jsx(DirectionIcon, { to: props.direction }), mods: {
             up: props.direction === 'up',
             down: props.direction === 'down',
         }, label: `Step ${props.direction}`, ...props }));

package/es/components/fields/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/Radio.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 
@@ -22,8 +22,8 @@ const ClearButton = tasty(Button, {
     styles: {
         radius: 'right (1r - 1bw)',
         width: {
-            '': '4x',
-            '[data-size="small"]': '3x',
+            '': '3x',
+            '[data-size="large"]': '4x',
         },
         height: 'auto',
         placeSelf: 'stretch',

package/es/components/fields/SearchInput/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/Select/Select.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 
@@ -43,6 +43,8 @@ const SelectWrapperElement = tasty({
         },
         Value: {
             ...DEFAULT_INPUT_STYLES,
+            display: 'grid',
+            placeItems: 'center stretch',
             preset: {
                 '': 't3',
                 '[data-type="primary"]': 't3m',
@@ -62,8 +64,8 @@ const SelectWrapperElement = tasty({
             placeItems: 'center',
             width: {
                 '': '4x',
-                '[data-size="small"]': '3x',
-                '[data-size="medium"]': '4x',
+                '[data-size="small"]': '@size-xs',
+                '[data-size="medium"]': '@size-sm',
             },
             cursor: 'pointer',
             fontSize: 'inherit',
@@ -71,7 +73,7 @@ const SelectWrapperElement = tasty({
         ButtonIcon: {
             display: 'grid',
             placeItems: 'center',
-            width: 'min 4x',
+            width: 'min @size-sm',
             color: 'inherit',
             fontSize: '@icon-size',
         },
@@ -138,7 +140,7 @@ export const ListBoxElement = tasty({
             '': '0px 4px 16px #shadow',
             section: false,
         },
-        height: 'initial max-content (50vh - 4x)',
+        height: 'initial max-content (50vh - @size-md)',
         overflow: 'clip auto',
         scrollbar: 'styled',
     },
@@ -175,8 +177,8 @@ const OptionElement = tasty({
         transition: 'theme',
         width: 'max 100%',
         height: {
-            '': 'min 4x',
-            '[data-size="medium"]': 'min 5x',
+            '': 'min @size-md',
+            '[data-size="large"]': 'min @size-lg',
         },
         Label: {
             preset: 't3',
@@ -300,6 +302,9 @@ function Select(props, ref) {
     }, { labelProps }));
 }
 export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, minWidth, size = 'small', triggerRef, ...otherProps }) {
+    // For trigger+popover components, map 'small' size to 'medium' for list items
+    // while preserving 'medium' and 'large' sizes
+    const listItemSize = size === 'small' ? 'medium' : size;
     // Get props for the listbox
     let { listBoxProps } = useListBox({
         autoFocus: state.focusStrategy || true,
@@ -341,11 +346,11 @@ export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, ove
                             if (!isFirstSection) {
                                 renderedItems.push(_jsx(ListDivider, { as: "li", role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
                             }
-                            renderedItems.push(_jsx(SelectSection, { item: item, state: state, optionStyles: optionStyles, headingStyles: { padding: '.5x 1.5x' }, sectionStyles: undefined, shouldUseVirtualFocus: shouldUseVirtualFocus, size: size }, item.key));
+                            renderedItems.push(_jsx(SelectSection, { item: item, state: state, optionStyles: optionStyles, headingStyles: { padding: '.5x 1.5x' }, sectionStyles: undefined, shouldUseVirtualFocus: shouldUseVirtualFocus, size: listItemSize }, item.key));
                             isFirstSection = false;
                         }
                         else {
-                            renderedItems.push(_jsx(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus, size: size }, item.key));
+                            renderedItems.push(_jsx(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus, size: listItemSize }, item.key));
                         }
                     }
                     return (_jsx(ListBoxElement, { styles: listBoxStyles, ...listBoxProps, ref: listBoxRef, mods: { sections: hasSections }, children: renderedItems }));

package/es/components/fields/Select/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/Gradation.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/RangeSlider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/Slider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/SliderBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/SliderInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.68.0
+ * @cube-dev/ui-kit v0.69.1
  * Released under the MIT license.
  */