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

package/dist/components/SingleSelectV2/singleSelectV2.tokens.d.ts

@@ -0,0 +1,162 @@
+import { CSSObject } from 'styled-components';
+import { SingleSelectV2Size, SingleSelectV2Variant } from './singleSelectV2.types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+import { SelectV2ItemStates, SelectV2TriggerStates } from '../SelectV2/selectV2.tokenStates';
+export type SingleSelectV2ItemStates = SelectV2ItemStates;
+export type SingleSelectV2TriggerStates = SelectV2TriggerStates;
+type StateToken<T> = Record<SingleSelectV2ItemStates, T>;
+type TriggerStateToken<T> = Record<SingleSelectV2TriggerStates, T>;
+type VariantToken<T> = Record<SingleSelectV2Variant, T>;
+type SizeToken<T> = Record<SingleSelectV2Size, T>;
+type SubmenuTriggerStateToken<T> = Record<'default' | 'hover' | 'focus', T>;
+export type SingleSelectV2TokensType = {
+    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'];
+        };
+        placeholder: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
+        selectedValue: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
+    };
+    menu: {
+        content: {
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+            borderRadius: CSSObject['borderRadius'];
+            boxShadow: CSSObject['boxShadow'];
+        };
+        padding: SizeToken<VariantToken<{
+            top: CSSObject['paddingTop'];
+            right: CSSObject['paddingRight'];
+            bottom: CSSObject['paddingBottom'];
+            left: CSSObject['paddingLeft'];
+        }>>;
+        groupLabel: {
+            margin: CSSObject['margin'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: StateToken<CSSObject['color']>;
+        };
+        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']>;
+            groupLabelText: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: StateToken<CSSObject['color']>;
+            };
+            option: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: StateToken<CSSObject['color']>;
+            };
+            description: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: StateToken<CSSObject['color']>;
+            };
+            separator: {
+                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'];
+                backgroundColor: SubmenuTriggerStateToken<CSSObject['backgroundColor']>;
+            };
+            content: {
+                backgroundColor: CSSObject['backgroundColor'];
+                border: CSSObject['border'];
+                borderRadius: CSSObject['borderRadius'];
+                paddingTop: CSSObject['paddingTop'];
+                paddingRight: CSSObject['paddingRight'];
+                paddingBottom: CSSObject['paddingBottom'];
+                paddingLeft: CSSObject['paddingLeft'];
+                boxShadow: CSSObject['boxShadow'];
+            };
+            optionText: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+            iconColor: CSSObject['color'];
+        };
+    };
+    mobilePanel: {
+        header: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            borderBottom: CSSObject['borderBottom'];
+        };
+    };
+};
+export type ResponsiveSingleSelectV2Tokens = {
+    [key in keyof BreakpointType]: SingleSelectV2TokensType;
+};
+export type SingleSelectV2MenuItemTokensType = SingleSelectV2TokensType['menu']['item'];
+export declare const getSingleSelectV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveSingleSelectV2Tokens;
+export {};

package/dist/components/SingleSelectV2/singleSelectV2.types.d.ts

@@ -0,0 +1,142 @@
+import { ReactNode, ReactElement, RefObject, ButtonHTMLAttributes } from 'react';
+import { CSSObject } from 'styled-components';
+import { SingleSelectV2TokensType } from './singleSelectV2.tokens';
+import { SelectV2Alignment, SelectV2FlattenedItemBase, SelectV2BaseItemType, SelectV2MenuRootPropsBase, SelectV2SkeletonProps, SelectV2Side, SelectV2Size, SelectV2Variant } from '../SelectV2/selectV2.shared.types';
+import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu';
+export { SelectV2Alignment as SingleSelectV2Alignment };
+export { SelectV2Variant as SingleSelectV2Variant };
+export { SelectV2Size as SingleSelectV2Size };
+export { SelectV2Side as SingleSelectV2Side };
+export type { SelectV2SkeletonProps as SingleSelectV2SkeletonProps };
+export type SelectV2MenuDimensions = {
+    minWidth?: CSSObject['minWidth'];
+    maxWidth?: CSSObject['maxWidth'];
+    maxHeight?: CSSObject['maxHeight'];
+};
+export type SelectV2TriggerDimensions = {
+    minWidth?: CSSObject['minWidth'];
+    maxWidth?: CSSObject['maxWidth'];
+    width?: CSSObject['width'];
+};
+export type SelectV2MenuPosition = {
+    alignment?: SelectV2Alignment;
+    side?: SelectV2Side;
+    sideOffset?: number;
+    alignOffset?: number;
+};
+export type SelectV2ErrorState = {
+    show?: boolean;
+    message?: string;
+};
+export type SelectV2SearchConfig = {
+    show?: boolean;
+    placeholder?: string;
+};
+export type SingleSelectV2ItemType = SelectV2BaseItemType & {
+    subMenu?: SingleSelectV2ItemType[];
+};
+export type SingleSelectV2GroupType = {
+    groupLabel?: string;
+    items: SingleSelectV2ItemType[];
+    showSeparator?: boolean;
+};
+export type FlattenedItem = SelectV2FlattenedItemBase<SingleSelectV2ItemType>;
+export type MenuListSharedProps = {
+    selected: string;
+    onSelect: (value: string) => void;
+    singleSelectTokens: SingleSelectV2TokensType;
+    size: SelectV2Size;
+    variant: SelectV2Variant;
+};
+export type MenuListProps = MenuListSharedProps & {
+    filteredItems: SingleSelectV2GroupType[];
+    enableSearch?: boolean;
+};
+export type VirtualItemShape = {
+    key: string | number | bigint;
+    index: number;
+    start: number;
+};
+export type VirtualListProps = MenuListSharedProps & {
+    flattenedItems: FlattenedItem[];
+    virtualViewportHeight: number;
+    virtualItems: VirtualItemShape[];
+    totalSize: number;
+    measureElement: (node: Element | null) => void;
+    loadingComponent?: ReactNode;
+    hasMore?: boolean;
+    virtualScrollRef: RefObject<HTMLDivElement | null>;
+};
+export type MenuSearchProps = {
+    enabled?: boolean;
+    hasItems: boolean;
+    backgroundColor: string;
+    searchPlaceholder: string;
+    searchText: string;
+    onSearchTextChange: (value: string) => void;
+    searchInputRef: RefObject<HTMLInputElement | null>;
+    containerRef?: RefObject<HTMLDivElement | null>;
+};
+export type MenuRootProps = SelectV2MenuRootPropsBase;
+export type SingleSelectV2MenuProps = {
+    items: SingleSelectV2GroupType[];
+    selected: string;
+    onSelect: (value: string) => void;
+    trigger: ReactElement;
+    menuDimensions?: SelectV2MenuDimensions;
+    search?: SelectV2SearchConfig;
+    disabled?: boolean;
+    menuPosition?: SelectV2MenuPosition;
+    collisionBoundary?: DropdownMenuContentProps['collisionBoundary'];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    size?: SelectV2Size;
+    variant?: SelectV2Variant;
+    enableVirtualization?: boolean;
+    virtualListItemHeight?: number;
+    virtualListOverscan?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+    loadingComponent?: ReactNode;
+    skeleton?: SelectV2SkeletonProps;
+    allowCustomValue?: boolean;
+    customValueLabel?: string;
+    menuId?: string;
+};
+export type SingleSelectV2PropsBase = {
+    label?: string;
+    subLabel?: string;
+    hintText?: string;
+    required?: boolean;
+    helpIconText?: string;
+    placeholder: string;
+    size?: SelectV2Size;
+    variant?: SelectV2Variant;
+    items: SingleSelectV2GroupType[];
+    selected: string;
+    onSelect: (value: string) => void;
+    search?: SelectV2SearchConfig;
+    slot?: ReactNode;
+    customTrigger?: ReactElement;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    usePanelOnMobile?: boolean;
+    menuPosition?: SelectV2MenuPosition;
+    menuDimensions?: SelectV2MenuDimensions;
+    triggerDimensions?: SelectV2TriggerDimensions;
+    inline?: boolean;
+    error?: SelectV2ErrorState;
+    enableVirtualization?: boolean;
+    virtualListItemHeight?: number;
+    virtualListOverscan?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+    loadingComponent?: ReactNode;
+    skeleton?: SelectV2SkeletonProps;
+    allowCustomValue?: boolean;
+    customValueLabel?: string;
+    singleSelectGroupPosition?: 'center' | 'left' | 'right';
+};
+export type SingleSelectV2Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'className' | 'onSelect' | 'slot'> & SingleSelectV2PropsBase;

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

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { SingleSelectV2TokensType } from './singleSelectV2.tokens';
+import { SingleSelectV2Size, SingleSelectV2Variant, FlattenedItem, SingleSelectV2GroupType, SingleSelectV2ItemType, SingleSelectV2SkeletonProps } from './singleSelectV2.types';
+export declare const defaultSingleSelectV2Skeleton: SingleSelectV2SkeletonProps;
+export declare const DROPDOWN_DATA_ATTR: "data-dropdown=\"dropdown\"";
+export declare const MENU_SCROLL_SELECTORS: readonly ["[data-dropdown=\"dropdown\"]", "[role=\"listbox\"]", "[role=\"menu\"]", "[data-radix-popper-content-wrapper]", "[data-radix-dropdown-menu-content]"];
+export declare const DEFAULT_END_REACHED_THRESHOLD = 200;
+export type AriaAttributes = {
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-invalid'?: boolean;
+    [key: string]: unknown;
+};
+export type ExtractedAriaProps = {
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    restProps: Record<string, unknown>;
+};
+export type AccessibilitySetupOptions = {
+    name?: string;
+    generatedId: string;
+    label?: string;
+    hintText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    rest?: Record<string, unknown>;
+    prefix?: string;
+    needsMenuId?: boolean;
+};
+export type AccessibilitySetupResult = {
+    uniqueName: string;
+    labelId?: string;
+    hintTextId?: string;
+    errorMessageId?: string;
+    menuId?: string;
+    ariaAttributes: AriaAttributes;
+};
+export declare function getBorderRadius(size: SingleSelectV2Size, variant: SingleSelectV2Variant, singleSelectGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: SingleSelectV2TokensType): {
+    borderRadius: string;
+    borderRight?: string;
+};
+export declare function getValueLabelMap(groups: SingleSelectV2GroupType[]): Record<string, string>;
+export declare const generateAccessibilityIds: (uniqueName: string, options: {
+    hasLabel?: boolean;
+    hasHintText?: boolean;
+    hasErrorMessage?: boolean;
+    needsMenuId?: boolean;
+}) => {
+    labelId?: string;
+    hintTextId?: string;
+    errorMessageId?: string;
+    menuId?: string;
+};
+export declare const extractAriaProps: (rest: Record<string, unknown> | undefined) => ExtractedAriaProps;
+export declare const mergeAriaDescribedBy: (...ids: (string | undefined)[]) => string | undefined;
+export declare const buildAriaAttributes: (options: {
+    error?: boolean;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    ariaLabel?: string;
+    restProps?: Record<string, unknown>;
+}) => AriaAttributes;
+export declare const setupAccessibility: (options: AccessibilitySetupOptions) => AccessibilitySetupResult;
+export declare function flattenGroups(groups: SingleSelectV2GroupType[]): FlattenedItem[];
+export declare function filterMenuGroups(groups: SingleSelectV2GroupType[], searchText: string): SingleSelectV2GroupType[];
+export declare function filterMenuItem(item: SingleSelectV2ItemType, lower: string): SingleSelectV2ItemType | null;
+export declare function isTooltipWrappingTrigger(trigger: ReactNode): boolean;
+export declare function getMenuItemIndex(filteredGroups: SingleSelectV2GroupType[], groupId: number, itemIndex: number): number;
+export declare const VIRTUAL_ROW_ESTIMATES: {
+    readonly label: 32;
+    readonly separator: 8;
+    readonly item: 38;
+    readonly itemWithSubLabel: 58;
+};
+export declare function getVirtualRowEstimate(flattened: FlattenedItem[], index: number): number;
+export declare function getItemOrdinalIndex(flattened: FlattenedItem[], flatIndex: number): number;

package/dist/components/TooltipV2/TooltipV2.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as TooltipV2 } from './TooltipV2';
+export * from './tooltipV2.tokens';
+export * from './tooltipV2.types';

package/dist/components/TooltipV2/tooltipV2.animation.d.ts

@@ -0,0 +1 @@
+export declare const tooltipV2ContentAnimations: import('styled-components').RuleSet<object>;

package/dist/components/TooltipV2/tooltipV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveTooltipV2Tokens } from './tooltipV2.tokens';
+export declare const getTooltipV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveTooltipV2Tokens;

package/dist/components/TooltipV2/tooltipV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveTooltipV2Tokens } from './tooltipV2.tokens';
+export declare const getTooltipV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveTooltipV2Tokens;

package/dist/components/TooltipV2/tooltipV2.tokens.d.ts

@@ -0,0 +1,37 @@
+import { CSSObject } from 'styled-components';
+import { TooltipV2Size } from './tooltipV2.types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type TooltipV2TokensType = {
+    background: CSSObject['backgroundColor'];
+    borderRadius: {
+        [key in TooltipV2Size]: CSSObject['borderRadius'];
+    };
+    maxWidth: {
+        [key in TooltipV2Size]: CSSObject['maxWidth'];
+    };
+    padding: {
+        [key in TooltipV2Size]: CSSObject['padding'];
+    };
+    gap: {
+        [key in TooltipV2Size]: CSSObject['gap'];
+    };
+    text: {
+        color: CSSObject['color'];
+        fontWeight: {
+            [key in TooltipV2Size]: CSSObject['fontWeight'];
+        };
+        fontSize: {
+            [key in TooltipV2Size]: CSSObject['fontSize'];
+        };
+        lineHeight: {
+            [key in TooltipV2Size]: CSSObject['lineHeight'];
+        };
+    };
+    zIndex: CSSObject['zIndex'];
+};
+export type ResponsiveTooltipV2Tokens = {
+    [key in keyof BreakpointType]: TooltipV2TokensType;
+};
+export declare const getTooltipV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTooltipV2Tokens;

package/dist/components/TooltipV2/tooltipV2.types.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+export declare enum TooltipV2SlotDirection {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare enum TooltipV2Side {
+    TOP = "top",
+    RIGHT = "right",
+    LEFT = "left",
+    BOTTOM = "bottom"
+}
+export declare enum TooltipV2Align {
+    START = "start",
+    END = "end",
+    CENTER = "center"
+}
+export declare enum TooltipV2Size {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export type TooltipV2Props = {
+    children: ReactNode;
+    content: ReactNode | string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: TooltipV2Side;
+    align?: TooltipV2Align;
+    showArrow?: boolean;
+    size?: TooltipV2Size;
+    slot?: ReactNode;
+    slotDirection?: TooltipV2SlotDirection;
+    delayDuration?: number;
+    offset?: number;
+    maxWidth?: string;
+    fullWidth?: boolean;
+    disableInteractive?: boolean;
+};

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

@@ -1,3 +1,6 @@
 export { errorShakeAnimation, getErrorShakeStyle } from './error.animations';
 export { useErrorShake } from './useErrorShake';
 export { TruncatedTextWithTooltip } from './TruncatedTextWithTooltip';
+export { ResponsiveText } from '../KeyValuePairV2/ResponsiveText';
+export type { ResponsiveTextProps } from '../KeyValuePairV2/ResponsiveText';
+export { getTextStyles, getPrimitiveTextStyles, type TextOverflowMode, } from '../KeyValuePairV2/responsiveTextStyles';

package/dist/context/ThemeContext.d.ts

@@ -50,11 +50,17 @@ import { ResponsiveAlertV2Tokens } from '../components/AlertV2/alertV2.tokens';
 import { ResponsiveAccordionV2Tokens } from '../components/AccordionV2/accordionV2.tokens';
 import { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2/snackbarV2.tokens';
 import { ResponsiveSwitchV2Tokens } from '../components/SelectorV2/SwitchV2/switchV2.tokens';
+import { ResponsiveSingleSelectV2Tokens } from '../components/SingleSelectV2/singleSelectV2.tokens';
+import { ResponsiveMultiSelectV2Tokens } from '../components/MultiSelectV2/multiSelectV2.tokens';
 import { ResponsiveAvatarV2Tokens } from '../components/AvatarV2/avatarV2.tokens';
 import { ResponsiveTextInputV2Tokens } from '../components/InputsV2/TextInputV2/TextInputV2.tokens';
 import { ResponsiveChartV2Tokens } from '../components/ChartsV2/chartV2.tokens';
 import { ResponsiveTimelineTokens } from '../components/Timeline/timeline.token';
 import { ResponsiveCheckboxV2Tokens } from '../components/SelectorV2/CheckboxV2/checkboxV2.tokens';
+import { ResponsiveKeyValuePairV2Tokens } from '../components/KeyValuePairV2/keyValuePairV2.tokens';
+import { ResponsiveTooltipV2Tokens } from '../components/TooltipV2/tooltipV2.tokens';
+import { ResponsiveRadioV2Tokens } from '../components/SelectorV2/RadioV2/radioV2.tokens';
+import { ResponsivePopoverV2Tokens } from '../components/PopoverV2/popoverV2.token';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
@@ -106,10 +112,16 @@ export type ComponentTokenType = {
     ACCORDIONV2?: ResponsiveAccordionV2Tokens;
     SNACKBARV2?: ResponsiveSnackbarV2Tokens;
     SWITCHV2?: ResponsiveSwitchV2Tokens;
+    SINGLE_SELECT_V2?: ResponsiveSingleSelectV2Tokens;
+    MULTI_SELECT_V2?: ResponsiveMultiSelectV2Tokens;
     AVATARV2?: ResponsiveAvatarV2Tokens;
     TEXT_INPUTV2?: ResponsiveTextInputV2Tokens;
     CHARTSV2?: ResponsiveChartV2Tokens;
     CHECKBOXV2?: ResponsiveCheckboxV2Tokens;
+    KEYVALUEPAIRV2?: ResponsiveKeyValuePairV2Tokens;
+    TOOLTIPV2?: ResponsiveTooltipV2Tokens;
+    RADIOV2?: ResponsiveRadioV2Tokens;
+    POPOVERV2?: ResponsivePopoverV2Tokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/useComponentToken.d.ts

@@ -48,9 +48,14 @@ import { ResponsiveAlertV2Tokens } from '../components/AlertV2';
 import { ResponsiveAccordionV2Tokens } from '../components/AccordionV2';
 import { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2';
 import { ResponsiveSwitchV2Tokens } from '../components/SelectorV2/SwitchV2/switchV2.tokens';
+import { ResponsiveSingleSelectV2Tokens } from '../components/SingleSelectV2/singleSelectV2.tokens';
+import { ResponsiveMultiSelectV2Tokens } from '../components/MultiSelectV2/multiSelectV2.tokens';
 import { ResponsiveAvatarV2Tokens } from '../components/AvatarV2/avatarV2.tokens';
 import { ResponsiveTextInputV2Tokens } from '../components/InputsV2/TextInputV2/TextInputV2.tokens';
 import { ResponsiveChartV2Tokens } from '../components/ChartsV2/chartV2.tokens';
 import { ResponsiveTimelineTokens } from '../components/Timeline/timeline.token';
 import { ResponsiveCheckboxV2Tokens } from '../components/SelectorV2/CheckboxV2/checkboxV2.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveMobileNavigationTokens | ResponsiveDirectoryTokens | ResponsiveChatInputTokensType | ResponsiveButtonTokens | ResponsiveButtonV2Tokens | ResponsiveChatInputTokensType | ResponsiveTagV2Tokens | ResponsiveAlertV2Tokens | ResponsiveAccordionV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveChartV2Tokens | ResponsiveAvatarV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveTimelineTokens | ResponsiveCheckboxV2Tokens | ResponsiveTextInputV2Tokens;
+import { ResponsiveKeyValuePairV2Tokens } from '../components/KeyValuePairV2/keyValuePairV2.tokens';
+import { ResponsiveRadioV2Tokens } from '../components/SelectorV2/RadioV2/radioV2.tokens';
+import { ResponsivePopoverV2Tokens } from '../components/PopoverV2/popoverV2.token';
+export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveMobileNavigationTokens | ResponsiveDirectoryTokens | ResponsiveChatInputTokensType | ResponsiveButtonTokens | ResponsiveButtonV2Tokens | ResponsiveChatInputTokensType | ResponsiveTagV2Tokens | ResponsiveAlertV2Tokens | ResponsiveAccordionV2Tokens | ResponsiveSnackbarV2Tokens | ResponsiveSwitchV2Tokens | ResponsiveSingleSelectV2Tokens | ResponsiveMultiSelectV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveChartV2Tokens | ResponsiveAvatarV2Tokens | ResponsiveTextInputV2Tokens | ResponsiveTimelineTokens | ResponsiveCheckboxV2Tokens | ResponsiveKeyValuePairV2Tokens | ResponsiveRadioV2Tokens | ResponsivePopoverV2Tokens | ResponsiveTextInputV2Tokens;

package/dist/global-utils/GlobalUtils.d.ts

@@ -7,6 +7,11 @@ export declare const getTruncatedText: (text: string, limit?: number) => {
     isTruncated: boolean;
 };
 export declare const formatTextWithLineBreaks: (content: ReactNode | string) => ReactNode;
+/**
+ * Composes multiple refs (forwarded ref + trigger's ref) so both receive the same DOM instance.
+ * Use when cloning an element and passing a ref so the child's existing ref is not lost.
+ */
+export declare function composeRefs<T>(...refs: (React.Ref<T> | null | undefined)[]): React.RefCallback<T>;
 export declare const addPxToValue: (value?: number | string) => string;
 export declare const flattenChildren: (children: React.ReactNode) => React.ReactElement<unknown>[];
 export declare const useAutofillDetection: (inputRef: React.RefObject<HTMLInputElement | null>, setIsAutofilled: (value: boolean) => void) => void;

package/dist/main.d.ts

@@ -44,3 +44,4 @@ export * from './context';
 export * from './tokens';
 export * from './components/ChartsV2';
 export * from './components/Timeline';
+export * from './components/AlertV2';