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

package/dist/components/ChartsV2/chartV2.types.d.ts

@@ -1,4 +1,4 @@
-import { RefObject, ReactNode } from 'react';
+import { RefObject, ReactNode, HTMLAttributes } from 'react';
 import { HighchartsReactProps, HighchartsReactRefObject } from 'highcharts-react-official';
 import { default as Highcharts } from 'highcharts';
 import { ButtonProps } from '../Button';
@@ -41,23 +41,21 @@ export type ChartV2Axis = Highcharts.Axis;
 export type ChartV2Series = Highcharts.Series;
 export type ChartV2SeriesZonesOptionsObject = Highcharts.SeriesZonesOptionsObject;
 export type ChartV2ReactRefObject = HighchartsReactRefObject;
-export interface ChartV2ContainerProps {
+export type ChartV2ContainerProps = {
     children: ReactNode;
-}
-export interface ChartV2HeaderProps {
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style' | 'className'>;
+export type ChartV2HeaderProps = {
     children: ReactNode;
-}
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style' | 'className'>;
 export type ChartV2LegendItem = Highcharts.Series | Highcharts.Point;
-export interface ChartV2CustomLegendItem {
+export type ChartV2CustomLegendItem = {
     key: string;
     name: string;
     color?: string;
     value?: string | number;
-}
-export interface ChartV2LegendProps {
-    /** Single chart ref (use when legend controls one chart). */
+};
+export type ChartV2LegendProps = {
     chartRef?: RefObject<ChartV2ReactRefObject | null>;
-    /** Multiple chart refs (use for shared legend; visibility and hover sync across all). */
     chartRefs?: ReadonlyArray<RefObject<ChartV2ReactRefObject | null>>;
     customLegendItems?: ChartV2CustomLegendItem[];
     renderItem?: (params: {
@@ -69,4 +67,4 @@ export interface ChartV2LegendProps {
         onClick: () => void;
     }) => ReactNode;
     layout?: 'horizontal' | 'vertical';
-}
+} & Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'>;

package/dist/components/DataTable/dataTable.tokens.d.ts

@@ -88,6 +88,17 @@ type HeaderType = {
         columnManagerIcon: {
             width: CSSObject['width'];
             height: CSSObject['height'];
+            color: CSSObject['color'];
+        };
+        columnManagerTrigger?: {
+            backgroundColor: CSSObject['backgroundColor'];
+            opacity: CSSObject['disabledOpacity'];
+            focusVisible: {
+                outline: CSSObject['outline'];
+                outlineOffset: CSSObject['outlineOffset'];
+                borderRadius: CSSObject['borderRadius'];
+                boxShadow: CSSObject['boxShadow'];
+            };
         };
     };
 };

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

@@ -336,6 +336,7 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     isRowExpandable?: (row: T, index: number) => boolean;
     onRowExpansionChange?: (rowId: unknown, isExpanded: boolean, rowData: T) => void;
     enableRowSelection?: boolean;
+    showBulkActionBar?: boolean;
     onRowSelectionChange?: (selectedRowIds: string[], isSelected: boolean, rowId: string, rowData: T) => void;
     bulkActions?: BulkActionsConfig;
     rowActions?: RowActionsConfig<T>;

package/dist/components/KeyValuePairV2/KeyValuePairLayout.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export type KeyValuePairLayoutProps = {
+    containerStyle: React.CSSProperties;
+    keyContainerStyle: React.CSSProperties;
+    valueContainerStyle: React.CSSProperties;
+    keySlotStyle: React.CSSProperties;
+    keyContent: React.ReactNode;
+    valueContent: React.ReactNode;
+    keySlot?: React.ReactNode;
+    valueLeftSlot?: React.ReactNode;
+    valueRightSlot?: React.ReactNode;
+    dataKeyValuePair?: string;
+    ariaLabel?: string;
+    keyDataElement?: string;
+    keyDataId?: string;
+    valueDataElement?: string;
+    valueDataId?: string;
+};
+/**
+ * Layout-only presentational component for KeyValuePair.
+ * Renders the structure: container > key block (content + slot) | value block (left slot + content + right slot).
+ * No tokens or business logic; receives pre-computed styles and content.
+ */
+export declare const KeyValuePairLayout: React.ForwardRefExoticComponent<KeyValuePairLayoutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/KeyValuePairV2/KeyValuePairV2.d.ts

@@ -0,0 +1,23 @@
+import { KeyValuePairV2Size, KeyValuePairV2StateType } from './keyValuePairV2.types';
+/**
+ * Orchestrator: composes tokens, layout, and ResponsiveText.
+ * Computes styles and delegates structure to KeyValuePairLayout.
+ */
+declare const KeyValuePairV2: import('react').ForwardRefExoticComponent<{
+    keyString: string;
+    size?: KeyValuePairV2Size;
+    value?: string;
+    slots?: {
+        key?: React.ReactNode;
+        value?: {
+            left?: React.ReactNode;
+            right?: React.ReactNode;
+        };
+    };
+    keyValuePairState?: KeyValuePairV2StateType;
+    maxWidth?: string;
+    textOverflow?: import('./keyValuePairV2.types').TextOverflowMode;
+    maxLines?: number;
+    showTooltipOnTruncate?: boolean;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "style" | "className" | "slot" | "onChange"> & import('react').RefAttributes<HTMLDivElement>>;
+export default KeyValuePairV2;

package/dist/components/KeyValuePairV2/ResponsiveText.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { CSSObject } from 'styled-components';
+import { TextOverflowMode } from './responsiveTextStyles';
+export type ResponsiveTextProps = {
+    children: string;
+    fontSize: CSSObject['fontSize'];
+    color: CSSObject['color'];
+    className?: string;
+    fontWeight?: CSSObject['fontWeight'];
+    textOverflow?: TextOverflowMode;
+    maxLines?: number;
+    showTooltipOnTruncate?: boolean;
+    as?: React.ElementType;
+    id?: string;
+    role?: string;
+    slotPresent: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+export declare const ResponsiveText: ({ children, fontSize, color, className, fontWeight, textOverflow, maxLines, showTooltipOnTruncate, as: Component, id, role, slotPresent, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: ResponsiveTextProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/KeyValuePairV2/keyValuePairV2.dark.tokens.d.ts

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

package/dist/components/KeyValuePairV2/keyValuePairV2.light.tokens.d.ts

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

package/dist/components/KeyValuePairV2/keyValuePairV2.tokens.d.ts

@@ -0,0 +1,28 @@
+import { CSSObject } from 'styled-components';
+import { KeyValuePairV2Size } from './keyValuePairV2.types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/theme.enum';
+export type KeyValuePairV2TokensType = {
+    gap: {
+        [key in 'vertical' | 'horizontal']: CSSObject['gap'];
+    };
+    key: {
+        color: CSSObject['color'];
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        gap: CSSObject['gap'];
+    };
+    value: {
+        color: CSSObject['color'];
+        fontSize: {
+            [key in KeyValuePairV2Size]: CSSObject['fontSize'];
+        };
+        fontWeight: CSSObject['fontWeight'];
+        gap: CSSObject['gap'];
+    };
+};
+export type ResponsiveKeyValuePairV2Tokens = {
+    [key in keyof BreakpointType]: KeyValuePairV2TokensType;
+};
+export declare const getKeyValuePairV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveKeyValuePairV2Tokens;

package/dist/components/KeyValuePairV2/keyValuePairV2.types.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from 'react';
+export declare enum KeyValuePairV2StateType {
+    vertical = 0,
+    horizontal = 1
+}
+export declare enum KeyValuePairV2Size {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export type TextOverflowMode = 'truncate' | 'wrap' | 'wrap-clamp';
+export type KeyValuePairV2PropTypes = {
+    keyString: string;
+    size?: KeyValuePairV2Size;
+    value?: string;
+    slots?: {
+        key?: React.ReactNode;
+        value?: {
+            left?: React.ReactNode;
+            right?: React.ReactNode;
+        };
+    };
+    keyValuePairState?: KeyValuePairV2StateType;
+    maxWidth?: string;
+    textOverflow?: TextOverflowMode;
+    maxLines?: number;
+    showTooltipOnTruncate?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'slot' | 'onChange'>;

package/dist/components/KeyValuePairV2/responsiveTextStyles.d.ts

@@ -0,0 +1,4 @@
+import { CSSObject } from 'styled-components';
+export type TextOverflowMode = 'truncate' | 'wrap' | 'wrap-clamp';
+export declare const getTextStyles: (textOverflow: TextOverflowMode, maxLines: number, slotPresent: boolean) => CSSObject;
+export declare const getPrimitiveTextStyles: (textOverflow: TextOverflowMode) => CSSObject;

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

@@ -0,0 +1,15 @@
+import { CSSObject } from 'styled-components';
+import { TextOverflowMode, KeyValuePairV2StateType } from './keyValuePairV2.types';
+import { KeyValuePairV2TokensType } from './keyValuePairV2.tokens';
+/**
+ * Get container styles based on text overflow mode and max width
+ */
+export declare const getContainerStyles: (textOverflow: TextOverflowMode, maxWidth: string) => CSSObject;
+/**
+ * Get flex direction and gap based on layout state
+ */
+export declare const getLayoutStyles: (keyValuePairState: KeyValuePairV2StateType, keyValuePairTokens: KeyValuePairV2TokensType) => CSSObject;
+/**
+ * Get slot container styles
+ */
+export declare const getSlotStyles: (keyValuePairTokens: KeyValuePairV2TokensType) => CSSObject;

package/dist/components/SelectorV2/RadioV2/RadioV2.d.ts

@@ -0,0 +1,22 @@
+import { RadioV2ContentProps } from './radioV2.types';
+import { SelectorV2Size } from '../selectorV2.types';
+import { default as React } from 'react';
+declare const RadioV2: React.ForwardRefExoticComponent<{
+    checked?: boolean;
+    onCheckedChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    required?: boolean;
+    error?: boolean;
+    label?: string;
+    subLabel?: string;
+    size?: SelectorV2Size;
+    slot?: {
+        slot: React.ReactElement;
+        maxHeight?: import('styled-components').CSSObject["maxHeight"];
+    };
+    maxLength?: {
+        label?: number;
+        subLabel?: number;
+    };
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "style" | "className" | "slot" | "children" | "maxLength"> & React.RefAttributes<HTMLInputElement>>;
+export default RadioV2;
+export declare const RadioV2Content: ({ uniqueId, disabled, error, required, size, label, subLabel, slot, tokens, labelMaxLength, subLabelMaxLength, subLabelId, }: RadioV2ContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SelectorV2/RadioV2/StyledRadioV2.d.ts

@@ -0,0 +1,9 @@
+import { SelectorV2Size } from '../selectorV2.types';
+import { RadioV2TokensType } from './radioV2.tokens';
+export declare const StyledRadioV2Root: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    size: SelectorV2Size;
+    $isDisabled: boolean;
+    $isChecked: boolean;
+    $error?: boolean;
+    $tokens: RadioV2TokensType;
+}>> & string;

package/dist/components/SelectorV2/RadioV2/index.d.ts

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

package/dist/components/SelectorV2/RadioV2/radioV2.dark.tokens.d.ts

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

package/dist/components/SelectorV2/RadioV2/radioV2.light.tokens.d.ts

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

package/dist/components/SelectorV2/RadioV2/radioV2.tokens.d.ts

@@ -0,0 +1,83 @@
+import { Theme } from '../../../context/theme.enum';
+import { CSSObject } from 'styled-components';
+import { RadioV2IndicatorState } from './radioV2.types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { SelectorV2Size, SelectorV2InteractionState } from '../selectorV2.types';
+export type RadioV2TokensType = {
+    gap: CSSObject['gap'];
+    group: {
+        gap: CSSObject['gap'];
+    };
+    radio: {
+        indicator: {
+            [key in RadioV2IndicatorState]: {
+                backgroundColor: {
+                    [key in SelectorV2InteractionState]: CSSObject['backgroundColor'];
+                };
+                borderColor: {
+                    [key in SelectorV2InteractionState]: CSSObject['borderColor'];
+                };
+            };
+        };
+        activeIndicator: {
+            active: {
+                backgroundColor: {
+                    [key in Exclude<SelectorV2InteractionState, 'hover' | 'error'>]: CSSObject['backgroundColor'];
+                };
+            };
+        };
+        height: {
+            [key in SelectorV2Size]: CSSObject['height'];
+        };
+        borderWidth: {
+            [key in RadioV2IndicatorState]: {
+                [key in SelectorV2InteractionState]: number;
+            };
+        };
+    };
+    content: {
+        gap: CSSObject['gap'];
+        label: {
+            gap: CSSObject['gap'];
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in SelectorV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
+            };
+            slot: {
+                maxHeight: {
+                    [key in SelectorV2Size]: CSSObject['maxHeight'];
+                };
+            };
+        };
+        subLabel: {
+            color: {
+                [key in SelectorV2InteractionState]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in SelectorV2Size]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in SelectorV2Size]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in SelectorV2Size]: CSSObject['lineHeight'];
+            };
+        };
+        required: {
+            color: CSSObject['color'];
+        };
+    };
+};
+export type ResponsiveRadioV2Tokens = {
+    [key in keyof BreakpointType]: RadioV2TokensType;
+};
+export declare const getRadioV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveRadioV2Tokens;

package/dist/components/SelectorV2/RadioV2/radioV2.types.d.ts

@@ -0,0 +1,39 @@
+import { InputHTMLAttributes, ReactElement } from 'react';
+import { RadioV2TokensType } from './radioV2.tokens';
+import { CSSObject } from 'styled-components';
+import { SelectorV2Size } from '../selectorV2.types';
+export type RadioV2IndicatorState = 'active' | 'inactive';
+export type RadioV2ContentProps = {
+    uniqueId: string;
+    disabled: boolean;
+    error: boolean;
+    required: boolean;
+    size: SelectorV2Size;
+    label?: string;
+    subLabel?: string;
+    slot?: {
+        slot: ReactElement;
+        maxHeight?: CSSObject['maxHeight'];
+    };
+    tokens: RadioV2TokensType;
+    labelMaxLength?: number;
+    subLabelMaxLength?: number;
+    subLabelId?: string;
+};
+export type RadioV2Props = {
+    checked?: boolean;
+    onCheckedChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    required?: boolean;
+    error?: boolean;
+    label?: string;
+    subLabel?: string;
+    size?: SelectorV2Size;
+    slot?: {
+        slot: ReactElement;
+        maxHeight?: CSSObject['maxHeight'];
+    };
+    maxLength?: {
+        label?: number;
+        subLabel?: number;
+    };
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'slot' | 'size' | 'maxLength' | 'children'>;

package/dist/components/SelectorV2/SwitchV2/SwitchV2.d.ts

@@ -15,5 +15,5 @@ declare const SwitchV2: import('react').ForwardRefExoticComponent<{
         label?: number;
         subLabel?: number;
     };
-} & Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "style" | "className" | "slot" | "onChange"> & import('react').RefAttributes<HTMLButtonElement>>;
+} & Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "style" | "className" | "slot"> & import('react').RefAttributes<HTMLButtonElement>>;
 export default SwitchV2;

package/dist/components/SelectorV2/SwitchV2/switchV2.tokens.d.ts

@@ -1,9 +1,9 @@
 import { Theme } from '../../../context/theme.enum';
 import { CSSObject } from 'styled-components';
-import { SwitchV2State, SwitchV2Variant } from './switchV2.types';
+import { SwitchV2Variant } from './switchV2.types';
 import { BreakpointType } from '../../../breakpoints/breakPoints';
 import { FoundationTokenType } from '../../../tokens/theme.token';
-import { SelectorV2Size } from '../selectorV2.types';
+import { SelectorV2Size, SelectorV2InteractionState } from '../selectorV2.types';
 export type SwitchV2TokensType = {
     gap: CSSObject['gap'];
     switch: {
@@ -15,7 +15,7 @@ export type SwitchV2TokensType = {
         };
         backgroundColor: {
             [key in SwitchV2Variant]: {
-                [key in SwitchV2State]: CSSObject['backgroundColor'];
+                [key in SelectorV2InteractionState]: CSSObject['backgroundColor'];
             };
         };
         thumb: {
@@ -35,7 +35,7 @@ export type SwitchV2TokensType = {
         label: {
             gap: CSSObject['gap'];
             color: {
-                [key in SwitchV2State]: CSSObject['color'];
+                [key in SelectorV2InteractionState]: CSSObject['color'];
             };
             fontSize: {
                 [key in SelectorV2Size]: CSSObject['fontSize'];
@@ -54,7 +54,7 @@ export type SwitchV2TokensType = {
         };
         subLabel: {
             color: {
-                [key in SwitchV2State]: CSSObject['color'];
+                [key in SelectorV2InteractionState]: CSSObject['color'];
             };
             fontSize: {
                 [key in SelectorV2Size]: CSSObject['fontSize'];

package/dist/components/SelectorV2/SwitchV2/switchV2.types.d.ts

@@ -2,7 +2,6 @@ import { ButtonHTMLAttributes, ReactElement } from 'react';
 import { SwitchV2TokensType } from './switchV2.tokens';
 import { CSSObject } from 'styled-components';
 import { SelectorV2Size } from '../selectorV2.types';
-export type SwitchV2State = 'default' | 'hover' | 'disabled' | 'error';
 export type SwitchV2Variant = 'checked' | 'unchecked';
 export type SwitchV2ButtonProps = {
     id: string;
@@ -47,4 +46,4 @@ export type SwitchV2Props = {
         label?: number;
         subLabel?: number;
     };
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'slot' | 'onChange'>;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style' | 'slot'>;

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

@@ -1,5 +1,4 @@
-import { SwitchV2State } from '../SelectorV2/SwitchV2/switchV2.types';
-import { SelectorV2Size } from '../SelectorV2/selectorV2.types';
+import { SelectorV2InteractionState, SelectorV2Size } from '../SelectorV2/selectorV2.types';
 export type SelectorsSize = SelectorV2Size;
 export type SelectorsLabelTokensType = {
     content: {
@@ -7,7 +6,7 @@ export type SelectorsLabelTokensType = {
             fontSize: Record<SelectorsSize, string | number>;
             fontWeight: Record<SelectorsSize, string | number>;
             lineHeight: Record<SelectorsSize, string | number>;
-            color: Record<SwitchV2State, string>;
+            color: Record<SelectorV2InteractionState, string>;
         };
         required: {
             color: string;
@@ -20,7 +19,7 @@ export type SelectorsSubLabelTokensType = {
             fontSize: Record<SelectorsSize, string | number>;
             fontWeight: Record<SelectorsSize, string | number>;
             lineHeight: Record<SelectorsSize, string | number>;
-            color: Record<SwitchV2State, string>;
+            color: Record<SelectorV2InteractionState, string>;
         };
     };
 };

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

@@ -55,6 +55,9 @@ import { ResponsiveTextInputV2Tokens } from '../components/InputsV2/TextInputV2/
 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';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
@@ -110,6 +113,9 @@ export type ComponentTokenType = {
     TEXT_INPUTV2?: ResponsiveTextInputV2Tokens;
     CHARTSV2?: ResponsiveChartV2Tokens;
     CHECKBOXV2?: ResponsiveCheckboxV2Tokens;
+    KEYVALUEPAIRV2?: ResponsiveKeyValuePairV2Tokens;
+    TOOLTIPV2?: ResponsiveTooltipV2Tokens;
+    RADIOV2?: ResponsiveRadioV2Tokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/useComponentToken.d.ts

@@ -53,4 +53,6 @@ import { ResponsiveTextInputV2Tokens } from '../components/InputsV2/TextInputV2/
 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';
+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 | ResponsiveKeyValuePairV2Tokens | ResponsiveRadioV2Tokens | ResponsiveTextInputV2Tokens;