@juspay/blend-design-system 0.0.36-beta.1 → 0.0.36

package/dist/components/MultiSelectV2/multiSelectV2.tokens.d.ts

@@ -0,0 +1,216 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { MultiSelectV2Size, MultiSelectV2SelectionTagType, MultiSelectV2Variant } from './multiSelectV2.types';
+import { Theme } from '../../context/theme.enum';
+import { SelectV2ItemStates, SelectV2TriggerStates } from '../SelectV2/selectV2.tokenStates';
+type StateToken<T> = Record<SelectV2ItemStates, T>;
+type TriggerStateToken<T> = Record<SelectV2TriggerStates, T>;
+type VariantToken<T> = Record<MultiSelectV2Variant, T>;
+type SizeToken<T> = Record<MultiSelectV2Size, T>;
+type SelectionTagTypeToken<T> = Record<MultiSelectV2SelectionTagType, T>;
+export type MultiSelectV2TriggerStates = SelectV2TriggerStates;
+export type MultiSelectV2ItemStates = SelectV2ItemStates;
+export type MultiSelectV2TokensType = {
+    gap: CSSObject['gap'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: StateToken<CSSObject['color']>;
+    };
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: StateToken<CSSObject['color']>;
+    };
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: StateToken<CSSObject['color']>;
+    };
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    required: {
+        color: CSSObject['color'];
+    };
+    trigger: {
+        height: SizeToken<VariantToken<CSSObject['height']>>;
+        padding: SizeToken<VariantToken<{
+            top: CSSObject['paddingTop'];
+            right: CSSObject['paddingRight'];
+            bottom: CSSObject['paddingBottom'];
+            left: CSSObject['paddingLeft'];
+        }>>;
+        borderRadius: SizeToken<VariantToken<CSSObject['borderRadius']>>;
+        boxShadow: VariantToken<CSSObject['boxShadow']>;
+        backgroundColor: VariantToken<TriggerStateToken<CSSObject['backgroundColor']>>;
+        outline: VariantToken<TriggerStateToken<CSSObject['outline']>>;
+        slot: {
+            gap: CSSObject['gap'];
+            width: CSSObject['width'];
+        };
+        selectionTag: VariantToken<SelectionTagTypeToken<{
+            color: CSSObject['color'];
+            backgroundColor: CSSObject['backgroundColor'];
+            fontWeight: CSSObject['fontWeight'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+        }>> & {
+            marginLeft: CSSObject['margin'];
+            borderRadius: CSSObject['borderRadius'];
+        };
+        chevron: {
+            gap: CSSObject['gap'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            iconSize?: number;
+        };
+        clearButton?: {
+            backgroundColor: TriggerStateToken<CSSObject['backgroundColor']>;
+            outline: TriggerStateToken<CSSObject['outline']>;
+            color: CSSObject['color'];
+            width?: CSSObject['width'];
+        };
+        floatingLabel: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+        };
+        placeholder: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
+        selectedValue: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
+    };
+    menu: {
+        backgroundColor: CSSObject['backgroundColor'];
+        border: CSSObject['border'];
+        borderRadius: CSSObject['borderRadius'];
+        padding: SizeToken<VariantToken<{
+            top: CSSObject['paddingTop'];
+            right: CSSObject['paddingRight'];
+            bottom: CSSObject['paddingBottom'];
+            left: CSSObject['paddingLeft'];
+        }>>;
+        minWidth: CSSObject['minWidth'];
+        scroll: {
+            height: CSSObject['height'];
+            maxHeight: CSSObject['maxHeight'];
+        };
+        header: {
+            backgroundColor: CSSObject['backgroundColor'];
+            borderBottom: CSSObject['borderBottom'];
+            selectAllRowPaddingLeft: CSSObject['paddingLeft'];
+            selectAllRowPaddingRight: CSSObject['paddingRight'];
+        };
+        selectAll: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            borderRadius: CSSObject['borderRadius'];
+        };
+        list: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+        };
+        actions: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            gap: CSSObject['gap'];
+            backgroundColor: CSSObject['backgroundColor'];
+            borderTop: CSSObject['borderTop'];
+        };
+        item: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            margin: CSSObject['margin'];
+            borderRadius: CSSObject['borderRadius'];
+            gap: CSSObject['gap'];
+            backgroundColor: StateToken<CSSObject['backgroundColor']>;
+            optionsLabel: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: StateToken<CSSObject['color']>;
+                paddingTop: CSSObject['paddingTop'];
+                paddingRight: CSSObject['paddingRight'];
+                paddingBottom: CSSObject['paddingBottom'];
+                paddingLeft: CSSObject['paddingLeft'];
+            };
+            option: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: StateToken<CSSObject['color']>;
+            };
+            description: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: StateToken<CSSObject['color']>;
+            };
+            seperator: {
+                color: CSSObject['color'];
+                height: CSSObject['height'];
+                margin: CSSObject['margin'];
+            };
+        };
+    };
+    subMenu: {
+        trigger: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            margin: CSSObject['margin'];
+            borderRadius: CSSObject['borderRadius'];
+        };
+        content: {
+            borderRadius: CSSObject['borderRadius'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+        };
+    };
+    drawer: {
+        header: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            borderBottom: CSSObject['borderBottom'];
+        };
+        search: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            marginTop: CSSObject['margin'];
+            marginBottom: CSSObject['margin'];
+        };
+        content: {
+            gap: CSSObject['gap'];
+        };
+    };
+};
+export type ResponsiveMultiSelectV2Tokens = {
+    [key in keyof BreakpointType]: MultiSelectV2TokensType;
+};
+export declare const getMultiSelectV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveMultiSelectV2Tokens;
+export {};

package/dist/components/MultiSelectV2/multiSelectV2.types.d.ts

@@ -0,0 +1,124 @@
+import { ReactNode, ReactElement, ButtonHTMLAttributes } from 'react';
+import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu';
+import { SelectV2FlattenedItemBase, SelectV2BaseItemType, SelectV2MenuRootPropsBase, SelectV2SkeletonProps, SelectV2Size, SelectV2Variant } from '../SelectV2/selectV2.shared.types';
+import { SelectV2MenuDimensions, SelectV2TriggerDimensions, SelectV2MenuPosition, SelectV2ErrorState, SelectV2SearchConfig } from '../SingleSelectV2/singleSelectV2.types';
+export { SelectV2Alignment as MultiSelectV2Alignment, SelectV2Variant as MultiSelectV2Variant, SelectV2Size as MultiSelectV2Size, SelectV2Side as MultiSelectV2Side, } from '../SelectV2/selectV2.shared.types';
+export type { SelectV2SkeletonProps as MultiSelectV2SkeletonProps };
+export type { SelectV2MenuDimensions, SelectV2TriggerDimensions, SelectV2MenuPosition, SelectV2ErrorState, SelectV2SearchConfig, };
+export declare enum MultiSelectV2SelectionTagType {
+    COUNT = "count",
+    TEXT = "text"
+}
+export type MultiSelectV2ItemType = SelectV2BaseItemType & {
+    alwaysSelected?: boolean;
+    subMenu?: MultiSelectV2ItemType[];
+};
+export type MultiSelectV2GroupType = {
+    groupLabel?: string;
+    items: MultiSelectV2ItemType[];
+    showSeparator?: boolean;
+};
+export type FlattenedMultiSelectV2Item = SelectV2FlattenedItemBase<MultiSelectV2ItemType>;
+export type MultiSelectV2MenuProps = {
+    items: MultiSelectV2GroupType[];
+    selected: string[];
+    onSelect: (value: string) => void;
+    trigger: ReactElement;
+    menuDimensions?: SelectV2MenuDimensions;
+    disabled?: boolean;
+    search?: SelectV2SearchConfig;
+    enableSelectAll?: boolean;
+    selectAllText?: string;
+    onSelectAll?: (selectAll: boolean, filteredItems: MultiSelectV2GroupType[]) => void;
+    maxSelections?: number;
+    menuPosition?: SelectV2MenuPosition;
+    collisionBoundary?: DropdownMenuContentProps['collisionBoundary'];
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    showActionButtons?: boolean;
+    primaryAction?: {
+        text: string;
+        onClick: (selectedValues: string[]) => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    secondaryAction?: {
+        text: string;
+        onClick: () => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    enableVirtualization?: boolean;
+    virtualListItemHeight?: number;
+    virtualListOverscan?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+    loadingComponent?: ReactNode;
+    skeleton?: SelectV2SkeletonProps;
+    size?: SelectV2Size;
+    variant?: SelectV2Variant;
+    allowCustomValue?: boolean;
+    customValueLabel?: string;
+    menuId?: string;
+};
+export type MenuRootProps = SelectV2MenuRootPropsBase & {
+    onInteractOutside?: (e: Event) => void;
+    onPointerDownOutside?: (e: Event) => void;
+};
+export type MultiSelectV2Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'className' | 'onChange' | 'slot'> & {
+    selectedValues: string[];
+    onChange: (value: string | string[]) => void;
+    items?: MultiSelectV2GroupType[];
+    label: string;
+    subLabel?: string;
+    helpIconText?: string;
+    required?: boolean;
+    variant?: SelectV2Variant;
+    selectionTagType?: MultiSelectV2SelectionTagType;
+    slot?: ReactNode;
+    hintText?: string;
+    placeholder: string;
+    size?: SelectV2Size;
+    search?: SelectV2SearchConfig;
+    enableSelectAll?: boolean;
+    selectAllText?: string;
+    maxSelections?: number;
+    customTrigger?: ReactElement;
+    usePanelOnMobile?: boolean;
+    triggerDimensions?: SelectV2TriggerDimensions;
+    menuDimensions?: SelectV2MenuDimensions;
+    menuPosition?: SelectV2MenuPosition;
+    inline?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    error?: SelectV2ErrorState;
+    showActionButtons?: boolean;
+    primaryAction?: {
+        text: string;
+        onClick: (selectedValues: string[]) => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    secondaryAction?: {
+        text: string;
+        onClick: () => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    showItemDividers?: boolean;
+    showHeaderBorder?: boolean;
+    enableVirtualization?: boolean;
+    virtualListItemHeight?: number;
+    virtualListOverscan?: number;
+    itemsToRender?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+    loadingComponent?: ReactNode;
+    skeleton?: SelectV2SkeletonProps;
+    allowCustomValue?: boolean;
+    customValueLabel?: string;
+    showClearButton?: boolean;
+    onClearAllClick?: () => void;
+    multiSelectGroupPosition?: 'center' | 'left' | 'right';
+};

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

@@ -0,0 +1,23 @@
+import { MultiSelectV2TokensType } from './multiSelectV2.tokens';
+import { MultiSelectV2Size, MultiSelectV2Variant, FlattenedMultiSelectV2Item, MultiSelectV2GroupType, MultiSelectV2ItemType } from './multiSelectV2.types';
+export declare const getSelectAllState: (selected: string[], availableValues: string[]) => {
+    allSelected: boolean;
+    someSelected: boolean;
+};
+export declare const getValueLabelMap: (groups: MultiSelectV2GroupType[]) => Record<string, string>;
+export declare function getMultiSelectBorderRadius(size: MultiSelectV2Size, variant: MultiSelectV2Variant, multiSelectGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: MultiSelectV2TokensType, shouldShowClearButton: boolean): string;
+export declare function getMultiSelectCrossBorderRadius(size: MultiSelectV2Size, variant: MultiSelectV2Variant, multiSelectGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: MultiSelectV2TokensType): {
+    borderRadius: string;
+    borderRight?: string;
+};
+export declare const getFilteredMenuItem: (item: MultiSelectV2ItemType, queryLower: string) => MultiSelectV2ItemType | null;
+export declare const filterMenuGroups: (groups: MultiSelectV2GroupType[], searchText: string) => MultiSelectV2GroupType[];
+export declare const getAllAvailableValues: (groups: MultiSelectV2GroupType[]) => string[];
+export declare const handleSelectAll: (selectAll: boolean, items: MultiSelectV2GroupType[], selectedValues: string[], onChange: (value: string) => void) => void;
+export declare const flattenMenuGroups: (groups: MultiSelectV2GroupType[]) => FlattenedMultiSelectV2Item[];
+export declare const getTriggerLeftPadding: (tokens: MultiSelectV2TokensType, size: MultiSelectV2Size, variant: MultiSelectV2Variant) => number;
+export declare const getTriggerTopPadding: (tokens: MultiSelectV2TokensType, size: MultiSelectV2Size, variant: MultiSelectV2Variant) => number;
+/** @deprecated Use getTriggerLeftPadding */
+export declare const getTriggerHorizontalPadding: (tokens: MultiSelectV2TokensType, size: MultiSelectV2Size, variant: MultiSelectV2Variant) => number;
+/** @deprecated Use getTriggerTopPadding */
+export declare const getTriggerVerticalPadding: (tokens: MultiSelectV2TokensType, size: MultiSelectV2Size, variant: MultiSelectV2Variant) => number;

package/dist/components/PopoverV2/MobilePopoverV2.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { PopoverV2Props } from './popoverV2.types';
+type MobilePopoverV2Props = PopoverV2Props & {
+    useDrawerOnMobile?: boolean;
+};
+declare const MobilePopoverV2: React.FC<MobilePopoverV2Props>;
+export default MobilePopoverV2;

package/dist/components/PopoverV2/PopoverV2.d.ts

@@ -0,0 +1,23 @@
+import { PopoverV2Align, PopoverV2Side, PopoverV2Size } from './popoverV2.types';
+declare const PopoverV2: import('react').ForwardRefExoticComponent<{
+    heading?: string;
+    description?: string;
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    showCloseButton?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    asModal?: boolean;
+    primaryAction?: import('./popoverV2.types').PopoverV2ActionType;
+    secondaryAction?: import('./popoverV2.types').PopoverV2ActionType;
+    sideOffset?: number;
+    side?: PopoverV2Side;
+    align?: PopoverV2Align;
+    alignOffset?: number;
+    size?: PopoverV2Size;
+    onClose?: () => void;
+    useDrawerOnMobile?: boolean;
+    avoidCollisions?: boolean;
+    skeleton?: import('./popoverV2.types').PopoverV2SkeletonProps;
+} & import('./popoverV2.types').PopoverV2Dimensions & Omit<import('react').HTMLAttributes<HTMLDivElement>, "style" | "className" | "slot"> & import('react').RefAttributes<HTMLDivElement>>;
+export default PopoverV2;

package/dist/components/PopoverV2/PopoverV2Footer.d.ts

@@ -0,0 +1,12 @@
+import { PopoverV2TokenType } from './popoverV2.token';
+import { PopoverV2Props } from './popoverV2.types';
+import { SkeletonVariant } from '../Skeleton';
+declare const PopoverV2Footer: {
+    ({ popoverTokens, primaryAction, secondaryAction, size, showSkeleton, skeletonVariant, }: Pick<PopoverV2Props, "primaryAction" | "secondaryAction" | "size"> & {
+        showSkeleton?: boolean;
+        skeletonVariant?: SkeletonVariant;
+        popoverTokens: PopoverV2TokenType;
+    }): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default PopoverV2Footer;

package/dist/components/PopoverV2/PopoverV2Header.d.ts

@@ -0,0 +1,14 @@
+import { PopoverV2TokenType } from './popoverV2.token';
+import { PopoverV2Props } from './popoverV2.types';
+import { SkeletonVariant } from '../Skeleton';
+declare const PopoverV2Header: {
+    ({ popoverTokens, heading, description, showCloseButton, onClose, size, showSkeleton, skeletonVariant, headingId, descriptionId, }: Pick<PopoverV2Props, "heading" | "description" | "showCloseButton" | "size" | "onClose"> & {
+        showSkeleton?: boolean;
+        skeletonVariant?: SkeletonVariant;
+        headingId?: string;
+        descriptionId?: string;
+        popoverTokens: PopoverV2TokenType;
+    }): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export default PopoverV2Header;

package/dist/components/PopoverV2/PopoverV2Skeleton.d.ts

@@ -0,0 +1,21 @@
+import { SkeletonVariant } from '../Skeleton';
+import { PopoverV2TokenType } from './popoverV2.token';
+import { PopoverV2Size } from './popoverV2.types';
+declare const PopoverV2Skeleton: ({ popoverTokens, size, headerSkeleton, bodySkeleton, footerSkeleton, skeletonVariant, }: {
+    popoverTokens: PopoverV2TokenType;
+    size: PopoverV2Size;
+    headerSkeleton?: {
+        show?: boolean | undefined;
+        showCloseButton?: boolean | undefined;
+    };
+    bodySkeleton?: {
+        show: boolean;
+        width: string;
+        height: string | number;
+    };
+    footerSkeleton?: {
+        show: boolean;
+    };
+    skeletonVariant: SkeletonVariant;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default PopoverV2Skeleton;

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

@@ -0,0 +1,3 @@
+export { default as PopoverV2 } from './PopoverV2';
+export * from './popoverV2.token';
+export * from './popoverV2.types';

package/dist/components/PopoverV2/popoverV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsivePopoverV2Tokens } from './popoverV2.token';
+export declare const getPopoverV2DarkToken: (foundationTokens: FoundationTokenType) => ResponsivePopoverV2Tokens;

package/dist/components/PopoverV2/popoverV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsivePopoverV2Tokens } from './popoverV2.token';
+export declare const getPopoverV2LightToken: (foundationTokens: FoundationTokenType) => ResponsivePopoverV2Tokens;

package/dist/components/PopoverV2/popoverV2.token.d.ts

@@ -0,0 +1,72 @@
+import { CSSObject } from 'styled-components';
+import { PopoverV2Size } from './popoverV2.types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type PopoverV2TokenType = {
+    background: CSSObject['backgroundColor'];
+    border: CSSObject['border'];
+    shadow: FoundationTokenType['shadows'];
+    gap: {
+        [key in PopoverV2Size]: CSSObject['gap'];
+    };
+    zIndex: CSSObject['zIndex'];
+    borderRadius: {
+        [key in PopoverV2Size]: CSSObject['borderRadius'];
+    };
+    padding: {
+        left: {
+            [key in PopoverV2Size]: CSSObject['paddingLeft'];
+        };
+        right: {
+            [key in PopoverV2Size]: CSSObject['paddingRight'];
+        };
+        top: {
+            [key in PopoverV2Size]: CSSObject['paddingTop'];
+        };
+        bottom: {
+            [key in PopoverV2Size]: CSSObject['paddingBottom'];
+        };
+    };
+    TopContainer: {
+        gap: {
+            [key in PopoverV2Size]: CSSObject['gap'];
+        };
+        heading: {
+            color: CSSObject['color'];
+            fontSize: {
+                [key in PopoverV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in PopoverV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in PopoverV2Size]: CSSObject['lineHeight'];
+            };
+            IconSize: {
+                [key in PopoverV2Size]: CSSObject['size'];
+            };
+        };
+        description: {
+            color: CSSObject['color'];
+            fontSize: {
+                [key in PopoverV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in PopoverV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in PopoverV2Size]: CSSObject['lineHeight'];
+            };
+        };
+    };
+    bottomContainer: {
+        gap: {
+            [key in PopoverV2Size]: CSSObject['gap'];
+        };
+    };
+};
+export type ResponsivePopoverV2Tokens = {
+    [key in keyof BreakpointType]: PopoverV2TokenType;
+};
+export declare const getPopoverV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsivePopoverV2Tokens;

package/dist/components/PopoverV2/popoverV2.types.d.ts

@@ -0,0 +1,59 @@
+import { ButtonProps } from '../Button';
+import { SkeletonVariant } from '../Skeleton';
+export type PopoverV2ActionType = Omit<ButtonProps, 'buttonGroupPosition' | 'subType'>;
+export declare enum PopoverV2Size {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare enum PopoverV2Side {
+    TOP = "top",
+    RIGHT = "right",
+    BOTTOM = "bottom",
+    LEFT = "left"
+}
+export declare enum PopoverV2Align {
+    START = "start",
+    CENTER = "center",
+    END = "end"
+}
+type BodySkeletonV2Props = {
+    show?: boolean;
+    width?: string;
+    height?: string | number;
+};
+export type PopoverV2SkeletonProps = {
+    show?: boolean;
+    variant?: SkeletonVariant;
+    bodySkeletonProps?: BodySkeletonV2Props;
+};
+export type PopoverV2Dimensions = {
+    width?: number;
+    maxWidth?: number;
+    minWidth?: number;
+    height?: number;
+    minHeight?: number;
+    maxHeight?: number;
+};
+export type PopoverV2Props = {
+    heading?: string;
+    description?: string;
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    showCloseButton?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    asModal?: boolean;
+    primaryAction?: PopoverV2ActionType;
+    secondaryAction?: PopoverV2ActionType;
+    sideOffset?: number;
+    side?: PopoverV2Side;
+    align?: PopoverV2Align;
+    alignOffset?: number;
+    size?: PopoverV2Size;
+    onClose?: () => void;
+    useDrawerOnMobile?: boolean;
+    avoidCollisions?: boolean;
+    skeleton?: PopoverV2SkeletonProps;
+} & PopoverV2Dimensions & Omit<React.HTMLAttributes<HTMLDivElement>, 'slot' | 'className' | 'style'>;
+export {};

package/dist/components/Select/SelectItem/types.d.ts

@@ -36,4 +36,6 @@ export type SelectItemProps = {
     className?: string;
     selectedPosition?: 'first' | 'middle' | 'last' | 'only' | 'none';
     index?: number;
+    /** @default 'SINGLE_SELECT' – use SelectV2.SelectItemV2 for SingleSelectV2 */
+    tokenKey?: 'SINGLE_SELECT';
 };

package/dist/components/SelectV2/SelectItemV2.d.ts

@@ -0,0 +1,3 @@
+import { SelectItemV2Props } from './types';
+declare const SelectItemV2: import('react').ForwardRefExoticComponent<SelectItemV2Props & import('react').RefAttributes<HTMLDivElement>>;
+export default SelectItemV2;

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

@@ -0,0 +1,4 @@
+export { default as SelectItemV2 } from './SelectItemV2';
+export type { SelectItemV2Props, SingleSelectItemV2Props, MultiSelectItemV2Props, SelectV2ItemType, SelectV2MenuItemTokensBase, } from './types';
+export { SELECT_V2_MENU_Z_INDEX } from './selectV2.constants';
+export * from './selectV2.shared.types';

package/dist/components/SelectV2/selectV2.constants.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Shared constants for SelectV2-family components.
+ *
+ * Kept as constants (not theme tokens) because layering/z-index is behavioral
+ * infrastructure, not a visual theme primitive.
+ */
+export declare const SELECT_V2_MENU_Z_INDEX = 101;