@juspay/blend-design-system 0.0.19 → 0.0.20

package/dist/components/MultiSelect/multiSelect.tokens.d.ts

@@ -3,29 +3,62 @@ import { MultiSelectMenuSize, MultiSelectSelectionTagType, MultiSelectVariant }
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 type TriggerStates = 'open' | 'closed' | 'hover' | 'focus' | 'error';
-export type SingleSelectItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled' | 'selected';
+export type MultiSelectItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled' | 'selected';
 export type MultiSelectTokensType = {
+    gap: CSSObject['gap'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in MultiSelectItemStates]: CSSObject['color'];
+        };
+    };
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in MultiSelectItemStates]: CSSObject['color'];
+        };
+    };
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in MultiSelectItemStates]: CSSObject['color'];
+        };
+    };
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    required: {
+        color: CSSObject['color'];
+    };
     trigger: {
         height: {
-            [key in MultiSelectMenuSize]: CSSObject['height'];
-        };
-        paddingX: {
-            [key in MultiSelectMenuSize]: CSSObject['padding'];
+            [key in MultiSelectMenuSize]: {
+                [key in MultiSelectVariant]: CSSObject['height'];
+            };
         };
-        paddingY: {
-            [key in MultiSelectMenuSize]: CSSObject['padding'];
+        padding: {
+            [key in MultiSelectMenuSize]: {
+                [key in MultiSelectVariant]: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
+                };
+            };
         };
         borderRadius: {
-            [key in MultiSelectMenuSize]: CSSObject['borderRadius'];
+            [key in MultiSelectMenuSize]: {
+                [key in MultiSelectVariant]: CSSObject['borderRadius'];
+            };
         };
         boxShadow: {
             [key in MultiSelectVariant]: CSSObject['boxShadow'];
         };
         backgroundColor: {
-            container: {
-                [key in TriggerStates]: CSSObject['backgroundColor'];
-            };
-            'no-container': {
+            [key in MultiSelectVariant]: {
                 [key in TriggerStates]: CSSObject['backgroundColor'];
             };
         };
@@ -35,7 +68,7 @@ export type MultiSelectTokensType = {
             };
         };
         selectionTag: {
-            container: {
+            [key in MultiSelectVariant]: {
                 [key in MultiSelectSelectionTagType]: {
                     color: CSSObject['color'];
                     backgroundColor: CSSObject['backgroundColor'];
@@ -44,41 +77,52 @@ export type MultiSelectTokensType = {
             };
         };
     };
-    dropdown: {
-        shadow: CSSObject['boxShadow'];
+    menu: {
         backgroundColor: CSSObject['backgroundColor'];
-        paddingTop: CSSObject['paddingTop'];
-        paddingBottom: CSSObject['paddingBottom'];
         border: CSSObject['border'];
-        outline: CSSObject['outline'];
         borderRadius: CSSObject['borderRadius'];
+        padding: {
+            [key in MultiSelectMenuSize]: {
+                [key in MultiSelectVariant]: {
+                    x: CSSObject['padding'];
+                    y: CSSObject['padding'];
+                };
+            };
+        };
         item: {
             padding: CSSObject['padding'];
             margin: CSSObject['margin'];
             borderRadius: CSSObject['borderRadius'];
             gap: CSSObject['gap'];
             backgroundColor: {
-                [key in SingleSelectItemStates]: CSSObject['backgroundColor'];
+                [key in MultiSelectItemStates]: CSSObject['backgroundColor'];
             };
-            label: {
+            optionsLabel: {
                 fontSize: CSSObject['fontSize'];
                 fontWeight: CSSObject['fontWeight'];
                 color: {
-                    [key in SingleSelectItemStates]: CSSObject['color'];
+                    [key in MultiSelectItemStates]: CSSObject['color'];
                 };
             };
-            subLabel: {
+            option: {
                 fontSize: CSSObject['fontSize'];
                 fontWeight: CSSObject['fontWeight'];
                 color: {
-                    [key in SingleSelectItemStates]: CSSObject['color'];
+                    [key in MultiSelectItemStates]: CSSObject['color'];
                 };
             };
-        };
-        seperator: {
-            color: CSSObject['color'];
-            height: CSSObject['height'];
-            margin: CSSObject['margin'];
+            description: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: {
+                    [key in MultiSelectItemStates]: CSSObject['color'];
+                };
+            };
+            seperator: {
+                color: CSSObject['color'];
+                height: CSSObject['height'];
+                margin: CSSObject['margin'];
+            };
         };
     };
     drawer: {

package/dist/components/MultiSelect/types.d.ts

@@ -104,6 +104,14 @@ export type MultiSelectProps = {
     showItemDividers?: boolean;
     showHeaderBorder?: boolean;
     fullWidth?: boolean;
+    enableVirtualization?: boolean;
+    virtualListItemHeight?: number;
+    virtualListOverscan?: number;
+    itemsToRender?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+    loadingComponent?: React.ReactNode;
 };
 export type MultiSelectMenuProps = {
     items: MultiSelectMenuGroupType[];
@@ -139,4 +147,12 @@ export type MultiSelectMenuProps = {
         disabled?: boolean;
         loading?: boolean;
     };
+    enableVirtualization?: boolean;
+    virtualListItemHeight?: number;
+    virtualListOverscan?: number;
+    itemsToRender?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+    loadingComponent?: React.ReactNode;
 };

package/dist/components/Popover/PopoverFooter.d.ts

@@ -1,6 +1,6 @@
 import { PopoverProps } from './types';
 declare const PopoverFooter: {
-    ({ primaryAction, secondaryAction, }: Pick<PopoverProps, "primaryAction" | "secondaryAction">): import("react/jsx-runtime").JSX.Element | null;
+    ({ primaryAction, secondaryAction, size, }: Pick<PopoverProps, "primaryAction" | "secondaryAction" | "size">): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export default PopoverFooter;

package/dist/components/Popover/popover.tokens.d.ts

@@ -1,45 +1,81 @@
 import { CSSObject } from 'styled-components';
 import { PopoverSize } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+/**
+ * Popover Tokens following the pattern: [target].CSSProp.[size]
+ *
+ * Structure:
+ * - target: container | headerContainer.heading | headerContainer.description | footer
+ * - CSSProp:
+ *   - container: background | border | shadow | gap | zIndex | borderRadius | padding.left | padding.right | padding.top | padding.bottom
+ *   - headerContainer.heading: color | fontSize | fontWeight | lineHeight
+ *   - headerContainer.description: color | fontSize | fontWeight | lineHeight
+ *   - footer: gap
+ * - size: small | medium (popover size)
+ *
+ * Notes:
+ * - Size-independent properties: background, border, shadow, zIndex, header/description color
+ * - Size-dependent properties: gap, borderRadius, all padding sides, heading/description fontSize/fontWeight/lineHeight, footer.gap
+ */
 export type PopoverTokenType = {
     background: CSSObject['backgroundColor'];
     border: CSSObject['border'];
     shadow: FoundationTokenType['shadows'];
-    gap: CSSObject['gap'];
+    gap: {
+        [key in PopoverSize]: CSSObject['gap'];
+    };
     zIndex: CSSObject['zIndex'];
-    borderRadius: CSSObject['borderRadius'];
+    borderRadius: {
+        [key in PopoverSize]: CSSObject['borderRadius'];
+    };
     padding: {
-        horizontal: CSSObject['paddingLeft'];
-        top: CSSObject['paddingTop'];
-        bottom: CSSObject['paddingBottom'];
+        left: {
+            [key in PopoverSize]: CSSObject['paddingLeft'];
+        };
+        right: {
+            [key in PopoverSize]: CSSObject['paddingRight'];
+        };
+        top: {
+            [key in PopoverSize]: CSSObject['paddingTop'];
+        };
+        bottom: {
+            [key in PopoverSize]: CSSObject['paddingBottom'];
+        };
     };
     headerContainer: {
         heading: {
+            color: CSSObject['color'];
             fontSize: {
                 [key in PopoverSize]: CSSObject['fontSize'];
             };
             fontWeight: {
                 [key in PopoverSize]: CSSObject['fontWeight'];
             };
-            color: {
-                [key in PopoverSize]: CSSObject['color'];
+            lineHeight: {
+                [key in PopoverSize]: CSSObject['lineHeight'];
             };
         };
         description: {
+            color: CSSObject['color'];
             fontSize: {
                 [key in PopoverSize]: CSSObject['fontSize'];
             };
-            color: {
-                [key in PopoverSize]: CSSObject['color'];
-            };
             fontWeight: {
                 [key in PopoverSize]: CSSObject['fontWeight'];
             };
+            lineHeight: {
+                [key in PopoverSize]: CSSObject['lineHeight'];
+            };
         };
     };
     footer: {
-        justifyContent: CSSObject['justifyContent'];
-        gap: CSSObject['gap'];
+        gap: {
+            [key in PopoverSize]: CSSObject['gap'];
+        };
     };
 };
-export declare const getPopoverTokens: (foundationTokens: FoundationTokenType) => PopoverTokenType;
+export type ResponsivePopoverTokens = {
+    [key in keyof BreakpointType]: PopoverTokenType;
+};
+export declare const getPopoverTokens: (foundationTokens: FoundationTokenType) => ResponsivePopoverTokens;

package/dist/components/Popover/types.d.ts

@@ -1,5 +1,5 @@
-import { ButtonV2Props } from '../Button';
-export type PopoverActionType = Omit<ButtonV2Props, 'buttonGroupPosition' | 'subType'>;
+import { ButtonProps } from '../Button';
+export type PopoverActionType = Omit<ButtonProps, 'buttonGroupPosition' | 'subType'>;
 export declare enum PopoverSize {
     SMALL = "small",
     MEDIUM = "medium"

package/dist/components/ProgressBar/index.d.ts

@@ -1,3 +1,2 @@
 export { default as ProgressBar } from './ProgressBar';
 export * from './types';
-export * from './utils';

package/dist/components/ProgressBar/progressbar.tokens.d.ts

@@ -1,55 +1,66 @@
-import { ProgressBarSize } from './types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ProgressBarSize, ProgressBarVariant, ProgressBarType } from './types';
 import { CSSObject } from 'styled-components';
+/**
+ * ProgressBar Tokens following the pattern: [target].CSSProp.[size].[variant].[type]
+ *
+ * Structure:
+ * - target: container | linear | circular | label (defines what element the token applies to)
+ * - CSSProp: overflow | borderRadius | height | backgroundColor | stroke | etc.
+ * - size: small | medium | large (only for size-dependent properties)
+ * - variant: solid | segmented (for linear progress bars)
+ * - type: solid | segmented (for circular progress bars)
+ *
+ * Size-independent properties: overflow, backgroundColor, backgroundImage, stroke, color
+ * Size-dependent properties: height, size, strokeWidth
+ */
 export type ProgressBarTokenType = {
-    container: {
-        borderRadius: string;
-        overflow: string;
-    };
-    height: {
-        [ProgressBarSize.SMALL]: CSSObject['height'];
-        [ProgressBarSize.MEDIUM]: CSSObject['height'];
-        [ProgressBarSize.LARGE]: CSSObject['height'];
-    };
-    fill: {
-        solid: {
-            backgroundColor: CSSObject['backgroundColor'];
-            borderRadius: CSSObject['borderRadius'];
+    linear: {
+        height: {
+            [key in ProgressBarSize]: CSSObject['height'];
         };
-        segmented: {
-            backgroundColor: CSSObject['backgroundColor'];
-            borderRadius: CSSObject['borderRadius'];
+        fill: {
+            backgroundColor: {
+                [key in Exclude<ProgressBarVariant, 'circular'>]: CSSObject['backgroundColor'];
+            };
+            borderRadius: {
+                [key in Exclude<ProgressBarVariant, 'circular'>]: CSSObject['borderRadius'];
+            };
         };
-    };
-    empty: {
-        solid: {
-            backgroundColor: CSSObject['backgroundColor'];
+        empty: {
+            backgroundColor: {
+                [key in Exclude<ProgressBarVariant, 'circular'>]: CSSObject['backgroundColor'];
+            };
+            backgroundImage: {
+                segmented: CSSObject['backgroundImage'];
+            };
+            backgroundSize: {
+                segmented: CSSObject['backgroundSize'];
+            };
         };
-        segmented: {
-            backgroundColor: CSSObject['backgroundColor'];
-            backgroundImage: CSSObject['backgroundImage'];
-            backgroundSize: CSSObject['backgroundSize'];
+        borderRadius: {
+            [key in Exclude<ProgressBarVariant, 'circular'>]: CSSObject['borderRadius'];
         };
     };
     circular: {
         size: {
-            [ProgressBarSize.SMALL]: CSSObject['width'];
-            [ProgressBarSize.MEDIUM]: CSSObject['width'];
-            [ProgressBarSize.LARGE]: CSSObject['width'];
+            [key in ProgressBarSize]: CSSObject['width'];
         };
         strokeWidth: {
-            [ProgressBarSize.SMALL]: number;
-            [ProgressBarSize.MEDIUM]: number;
-            [ProgressBarSize.LARGE]: number;
+            [key in ProgressBarSize]: number;
         };
-        solid: {
-            stroke: CSSObject['stroke'];
-            background: CSSObject['stroke'];
+        stroke: {
+            [key in ProgressBarType]: CSSObject['stroke'];
         };
-        segmented: {
-            stroke: CSSObject['stroke'];
-            background: CSSObject['stroke'];
-            dashArray: string;
-            dashOffset: string;
+        background: {
+            [key in ProgressBarType]: CSSObject['stroke'];
+        };
+        dashArray: {
+            [key in ProgressBarType]: string;
+        };
+        dashOffset: {
+            [key in ProgressBarType]: string;
         };
     };
     label: {
@@ -59,5 +70,7 @@ export type ProgressBarTokenType = {
     };
     transition: string;
 };
-declare const progressBarTokens: ProgressBarTokenType;
-export default progressBarTokens;
+export type ResponsiveProgressBarTokens = {
+    [key in keyof BreakpointType]: ProgressBarTokenType;
+};
+export declare const getProgressBarTokens: (foundationToken: FoundationTokenType) => ResponsiveProgressBarTokens;

package/dist/components/Radio/radio.token.d.ts

@@ -6,46 +6,48 @@ export type RadioState = 'default' | 'hover' | 'disabled' | 'error';
 export type RadioIndicatorState = 'active' | 'inactive';
 export type RadioTokensType = Readonly<{
     gap: CSSObject['gap'];
-    slotGap: CSSObject['gap'];
-    groupGap: CSSObject['gap'];
+    group: {
+        gap: CSSObject['gap'];
+    };
     indicator: {
         [key in RadioIndicatorState]: {
-            background: {
-                [key in Exclude<RadioState, 'error'>]: CSSObject['backgroundColor'];
+            backgroundColor: {
+                [key in RadioState]: CSSObject['backgroundColor'];
             };
-            border: {
-                [key in Exclude<RadioState, 'error'>]: CSSObject['borderColor'];
+            borderColor: {
+                [key in RadioState]: CSSObject['borderColor'];
             };
         };
     };
     activeIndicator: {
         active: {
-            background: {
+            backgroundColor: {
                 [key in Exclude<RadioState, 'hover' | 'error'>]: CSSObject['backgroundColor'];
             };
         };
     };
     content: {
         label: {
+            gap: CSSObject['gap'];
             color: {
                 [key in RadioState]: CSSObject['color'];
             };
-            font: {
-                [key in RadioSize]: {
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                };
+            fontSize: {
+                [key in RadioSize]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in RadioSize]: CSSObject['fontWeight'];
             };
         };
         sublabel: {
             color: {
                 [key in RadioState]: CSSObject['color'];
             };
-            font: {
-                [key in RadioSize]: {
-                    fontSize: CSSObject['fontSize'];
-                    fontWeight: CSSObject['fontWeight'];
-                };
+            fontSize: {
+                [key in RadioSize]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in RadioSize]: CSSObject['fontWeight'];
             };
         };
     };
@@ -54,22 +56,17 @@ export type RadioTokensType = Readonly<{
     };
     borderWidth: {
         [key in RadioIndicatorState]: {
-            [key in Exclude<RadioState, 'error'>]: number;
+            [key in RadioState]: number;
         };
     };
     slot: {
-        size: {
-            [key in RadioSize]: CSSObject['width'];
-        };
+        [key in RadioSize]: CSSObject['width'];
     };
     required: {
         color: CSSObject['color'];
-        spacing: CSSObject['marginLeft'];
     };
 }>;
 export type ResponsiveRadioTokens = {
     [key in keyof BreakpointType]: RadioTokensType;
 };
 export declare const getRadioTokens: (foundationToken: ThemeType) => ResponsiveRadioTokens;
-declare const radioTokens: ResponsiveRadioTokens;
-export default radioTokens;

package/dist/components/Sidebar/sidebar.tokens.d.ts

@@ -0,0 +1,77 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type SidebarState = 'default' | 'hover' | 'active';
+export type SidebarVariant = 'expanded' | 'collapsed';
+/**
+ * Sidebar Tokens following the pattern: [target].CSSProp.[variant].[state]
+ *
+ * Structure matches Card pattern for consistency:
+ * - Base properties: maxWidth, borderRadius, zIndex, transition, backgroundColor.[state]
+ * - Target sections: leftPanel.*, header.*, body.*, footer.*, mainContent.*
+ * - Each target has: backgroundColor, padding, border, gap, specific properties
+ * - Interactive elements have state-based styling: [state] = default | hover | active
+ *
+ * Pattern examples:
+ * - maxWidth.[variant] (sidebar's maximum width based on state)
+ * - backgroundColor.[state] (sidebar background with states)
+ * - leftPanel.backgroundColor (tenant panel background)
+ * - header.toggleButton.backgroundColor.[state] (interactive toggle button)
+ * - body.padding (directory content area spacing)
+ * - footer.height (footer section height)
+ * - mainContent.topbar.transition (topbar auto-hide animation)
+ */
+export type SidebarTokenType = {
+    maxWidth: {
+        withLeftPanel: CSSObject['maxWidth'];
+        withoutLeftPanel: CSSObject['maxWidth'];
+    };
+    backgroundColor: CSSObject['backgroundColor'];
+    borderRight: CSSObject['border'];
+    leftPanel: {
+        width: CSSObject['width'];
+        backgroundColor: CSSObject['backgroundColor'];
+        borderRight: CSSObject['border'];
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        gap: CSSObject['gap'];
+        item: {
+            width: CSSObject['width'];
+            borderRadius: CSSObject['borderTopLeftRadius'];
+            border: {
+                [key in SidebarState]: CSSObject['border'];
+            };
+            backgroundColor: {
+                [key in SidebarState]: CSSObject['backgroundColor'];
+            };
+        };
+    };
+    header: {
+        backgroundColor: CSSObject['backgroundColor'];
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        gap: CSSObject['gap'];
+        borderBottom: CSSObject['border'];
+        toggleButton: {
+            backgroundColor: {
+                [key in SidebarState]: CSSObject['backgroundColor'];
+            };
+        };
+    };
+    footer: {
+        backgroundColor: CSSObject['backgroundColor'];
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        borderTop: CSSObject['border'];
+    };
+};
+export type ResponsiveSidebarTokens = {
+    [key in keyof BreakpointType]: SidebarTokenType;
+};
+export declare const getSidebarTokens: (foundationToken: FoundationTokenType) => ResponsiveSidebarTokens;

package/dist/components/Sidebar/utils.d.ts

@@ -1,11 +1,12 @@
 import { TenantItem } from './types';
+import { SidebarTokenType } from './sidebar.tokens';
 export declare const arrangeTenants: (tenants: TenantItem[], selectedLabel: string, maxVisible: number) => {
     visibleTenants: TenantItem[];
     hiddenTenants: TenantItem[];
     hasMoreTenants: boolean;
 };
-export declare const getSidebarWidth: (isExpanded: boolean, isHovering: boolean, hasLeftPanel: boolean) => string;
-export declare const getSidebarBorder: (isExpanded: boolean, isHovering: boolean) => string;
+export declare const getSidebarWidth: (isExpanded: boolean, isHovering: boolean, hasLeftPanel: boolean, tokens: SidebarTokenType) => string;
+export declare const getSidebarBorder: (isExpanded: boolean, isHovering: boolean, tokens: SidebarTokenType) => string;
 export declare const getTopbarStyles: (enableAutoHide: boolean, showTopbar: boolean) => {
     transform?: undefined;
     transition?: undefined;

package/dist/components/SingleSelect/SingleSelect.d.ts

@@ -1,3 +1,3 @@
 import { SingleSelectProps } from './types';
-declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, error, errorMessage, size, items, name, variant, disabled, selected, onSelect, enableSearch, searchPlaceholder, slot, customTrigger, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minMenuWidth, maxMenuWidth, maxMenuHeight, onBlur, onFocus, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

package/dist/components/SingleSelect/SingleSelectMenu.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { SelectMenuAlignment, SelectMenuSide, SelectMenuGroupType } from '../Select';
+import { SelectMenuSize, SelectMenuVariant } from './types';
 type SingleSelectMenuProps = {
     items: SelectMenuGroupType[];
     selected: string;
@@ -17,6 +18,15 @@ type SingleSelectMenuProps = {
     alignOffset?: number;
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    size?: SelectMenuSize;
+    variant?: SelectMenuVariant;
+    enableVirtualization?: boolean;
+    virtualListItemHeight?: number;
+    virtualListOverscan?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+    loadingComponent?: React.ReactNode;
 };
-declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, enableSearch, searchPlaceholder, disabled, alignment, side, sideOffset, alignOffset, open, onOpenChange, size, variant, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, }: SingleSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectMenu;