feat(ListBox): add small size

src/components/fields/ComboBox/ComboBox.tsx

@@ -806,6 +806,7 @@ interface ComboBoxOverlayProps {
     onBlur: (e: React.FocusEvent) => void;
   };
   filter?: (nodes: Iterable<any>) => Iterable<any>;
+  size?: 'small' | 'medium' | 'large' | (string & {});
 }
 
 function ComboBoxOverlay({
@@ -835,6 +836,7 @@ function ComboBoxOverlay({
   ariaLabel,
   compositeFocusProps,
   filter,
+  size = 'medium',
 }: ComboBoxOverlayProps) {
   // Overlay positioning
   const {
@@ -927,6 +929,7 @@ function ComboBoxOverlay({
               sectionStyles={sectionStyles}
               headingStyles={headingStyles}
               stateRef={listStateRef}
+              size="medium"
               mods={{
                 popover: true,
               }}
@@ -1796,6 +1799,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
         ariaLabel={(props as any)['aria-label']}
         compositeFocusProps={compositeFocusProps}
         filter={filterFn}
+        size={size}
         onSelectionChange={handleSelectionChange}
         onClose={() => setIsPopoverOpen(false)}
       >

src/components/fields/FilterListBox/FilterListBox.tsx

@@ -912,7 +912,7 @@ export const FilterListBox = forwardRef(function FilterListBox<
           footer={footer}
           footerStyles={footerStyles}
           mods={mods}
-          size={size}
+          size="medium"
           styles={listBoxStyles}
           isCheckable={isCheckable}
           items={items as any}

src/components/fields/ListBox/ListBox.docs.mdx

@@ -232,6 +232,7 @@ Groups related items together with an optional heading.
 
 ### Sizes
 
+- `small` - Compact size for dense interfaces (28px item height)
 - `medium` - Standard size for general use (32px item height, default)
 - `large` - Emphasized size for important sections (40px item height)
 
@@ -498,6 +499,11 @@ const [selectedKey, setSelectedKey] = useState('apple');
 <Story of={ListBoxStories.DifferentSizes} />
 
 ```jsx
+<ListBox size="small" label="Small Size">
+  <ListBox.Item key="apple">Apple</ListBox.Item>
+  <ListBox.Item key="banana">Banana</ListBox.Item>
+</ListBox>
+
 <ListBox size="medium" label="Medium Size (Default)">
   <ListBox.Item key="apple">Apple</ListBox.Item>
   <ListBox.Item key="banana">Banana</ListBox.Item>

src/components/fields/ListBox/ListBox.stories.tsx

@@ -437,6 +437,12 @@ export const CheckableMultipleSelection: Story = {
 export const DifferentSizes: Story = {
   render: (args) => (
     <Space gap="2x" flow="column" placeItems="start">
+      <ListBox width="150px" {...args} size="small" label="Small ListBox">
+        {fruits.slice(0, 4).map((fruit) => (
+          <ListBox.Item key={fruit.key}>{fruit.label}</ListBox.Item>
+        ))}
+      </ListBox>
+
       <ListBox width="150px" {...args} size="medium" label="Medium ListBox">
         {fruits.slice(0, 4).map((fruit) => (
           <ListBox.Item key={fruit.key}>{fruit.label}</ListBox.Item>

src/components/fields/ListBox/ListBox.tsx

@@ -37,7 +37,7 @@ import {
   Styles,
   tasty,
 } from '../../../tasty';
-import { SIZES } from '../../../tokens';
+import { SIZES, SIZES_MAP } from '../../../tokens';
 import { mergeProps, useCombinedRefs } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 // Import Menu styled components for header and footer
@@ -248,7 +248,7 @@ export interface CubeListBoxProps<T>
   /** Additional modifiers for styling the ListBox */
   mods?: Record<string, boolean>;
   /** Size variant of the ListBox */
-  size?: 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large';
 
   /**
    * When `true`, clicking an already-selected item keeps it selected instead of toggling it off.
@@ -324,7 +324,7 @@ const SelectAllOption = ({
   isIndeterminate: boolean;
   isDisabled?: boolean;
   isCheckable?: boolean;
-  size?: 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large';
   state: any;
   lastFocusSourceRef: MutableRefObject<'keyboard' | 'mouse' | 'other'>;
   onClick: (propagate?: boolean) => void;
@@ -766,7 +766,7 @@ export const ListBox = forwardRef(function ListBox<T extends object>(
       if (currentItem?.props?.description) {
         return SIZES.XL + 1;
       }
-      return size === 'large' ? SIZES.XL + 1 : SIZES.MD + 1;
+      return SIZES[SIZES_MAP[size] as keyof typeof SIZES] + 1;
     },
     measureElement: (el) => {
       return el.offsetHeight + 1;
@@ -1027,7 +1027,7 @@ function Option({
   virtualIndex,
   lastFocusSourceRef,
 }: {
-  size?: 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large';
   item: any;
   state: any;
   styles?: Styles;
@@ -1241,7 +1241,7 @@ interface ListBoxSectionProps<T> {
   focusOnHover?: boolean;
   isCheckable?: boolean;
   onClick?: (key: Key) => void;
-  size?: 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large';
   lastFocusSourceRef?: MutableRefObject<'keyboard' | 'mouse' | 'other'>;
 }
 

src/components/fields/Picker/Picker.tsx

@@ -685,7 +685,7 @@ export const Picker = forwardRef(function Picker<T extends object>(
                 mods={{
                   popover: true,
                 }}
-                size={size === 'small' ? 'medium' : size}
+                size="medium"
                 showSelectAll={showSelectAll}
                 selectAllLabel={selectAllLabel}
                 header={header}

src/tokens.ts

@@ -46,6 +46,14 @@ export const SIZES = {
   XL: 48,
 };
 
+export const SIZES_MAP = {
+  xsmall: 'XS',
+  small: 'SM',
+  medium: 'MD',
+  large: 'LG',
+  xlarge: 'XL',
+};
+
 function color(name, opacity = 1) {
   return `rgb(${colors[name]} / ${opacity})`;
 }