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

package/dist/components/ProgressBarV2/progressBarV2.tokens.d.ts

@@ -0,0 +1,63 @@
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ProgressBarV2Appearance, ProgressBarV2Size } from './progressBarV2.types';
+import { CSSObject } from 'styled-components';
+export type ProgressBarV2TokenType = {
+    linear: {
+        height: {
+            [key in ProgressBarV2Size]: CSSObject['height'];
+        };
+        fill: {
+            backgroundColor: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor'];
+            };
+            borderRadius: {
+                [key in ProgressBarV2Appearance]: CSSObject['borderRadius'];
+            };
+        };
+        empty: {
+            backgroundColor: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor'];
+            };
+            backgroundImage: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundImage'];
+            };
+            backgroundSize: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundSize'];
+            };
+        };
+        borderRadius: {
+            [key in ProgressBarV2Appearance]: CSSObject['borderRadius'];
+        };
+        gap: CSSObject['gap'];
+    };
+    circular: {
+        size: {
+            [key in ProgressBarV2Size]: CSSObject['width'];
+        };
+        strokeWidth: {
+            [key in ProgressBarV2Size]: number;
+        };
+        stroke: {
+            [key in ProgressBarV2Appearance]: CSSObject['stroke'];
+        };
+        background: {
+            [key in ProgressBarV2Appearance]: CSSObject['stroke'];
+        };
+        dashArray: {
+            [key in ProgressBarV2Appearance]: string;
+        };
+        motion: string;
+    };
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    transition: string;
+};
+export type ResponsiveProgressBarV2Tokens = {
+    [key in keyof BreakpointType]: ProgressBarV2TokenType;
+};
+export declare const getProgressBarV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveProgressBarV2Tokens;

package/dist/components/ProgressBarV2/progressBarV2.types.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from 'react';
+import { ProgressBarV2TokenType } from './progressBarV2.tokens';
+export declare enum ProgressBarV2Size {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+/** Bar geometry: horizontal track vs circular ring. */
+export declare enum ProgressBarV2Variant {
+    LINEAR = "linear",
+    CIRCULAR = "circular"
+}
+/**
+ * Fill / stroke style shared by linear and circular progress (continuous vs segmented).
+ */
+export declare enum ProgressBarV2Appearance {
+    SOLID = "solid",
+    SEGMENTED = "segmented"
+}
+export type ProgressBarV2Props = {
+    value: number;
+    size?: ProgressBarV2Size;
+    variant?: ProgressBarV2Variant;
+    appearance?: ProgressBarV2Appearance;
+    showLabel?: boolean;
+    min?: number;
+    max?: number;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>;
+export type ProgressBarV2InternalProps = {
+    value: number;
+    min: number;
+    max: number;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    showLabel: boolean;
+    tokens: ProgressBarV2TokenType;
+};
+export type CircularProgressBarV2Props = ProgressBarV2InternalProps & {
+    size: ProgressBarV2Size;
+    appearance: ProgressBarV2Appearance;
+};
+export type LinearProgressBarV2Props = ProgressBarV2InternalProps & {
+    size: ProgressBarV2Size;
+    appearance: ProgressBarV2Appearance;
+};

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, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, singleSelectGroupPosition, allowDeselect, ...rest }: 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, inline, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, singleSelectGroupPosition, allowDeselect, ...rest }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

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

@@ -10,7 +10,7 @@ export type SingleSelectTriggerProps = {
     required: boolean;
     valueLabelMap: Record<string, string>;
     open: boolean;
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     slot: React.ReactNode;
     variant: SelectMenuVariant;
     isSmallScreenWithLargeSize: boolean;

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { SkeletonVariant } from '../Skeleton';
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum SelectMenuAlignment {
@@ -96,8 +97,6 @@ export type SingleSelectProps = {
     maxMenuWidth?: number;
     maxMenuHeight?: number;
     inline?: boolean;
-    onBlur?: () => void;
-    onFocus?: () => void;
     error?: boolean;
     errorMessage?: string;
     fullWidth?: boolean;
@@ -115,4 +114,4 @@ export type SingleSelectProps = {
     customValueLabel?: string;
     singleSelectGroupPosition?: 'center' | 'left' | 'right';
     allowDeselect?: boolean;
-};
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'slot' | 'onSelect'>;

package/dist/components/StatCardV2/StatCardV2.chartConfig.d.ts

@@ -0,0 +1,2 @@
+import { ChartV2Options } from '../ChartsV2';
+export declare const buildStatCardV2ChartOptions: (overrides?: ChartV2Options) => ChartV2Options;

package/dist/components/StatCardV2/StatCardV2.d.ts

@@ -0,0 +1,16 @@
+import { StatCardV2Variant } from './statcardV2.types';
+declare const StatCardV2: import('react').ForwardRefExoticComponent<{
+    title: string;
+    variant?: StatCardV2Variant;
+    titleIcon?: import('react').ReactNode;
+    actionIcon?: import('react').ReactNode;
+    value?: string;
+    progressValue?: number;
+    helpIconText?: string;
+    change?: import('./statcardV2.types').StatCardV2Change;
+    subtitle?: string;
+    options?: import('../ChartsV2').ChartV2Options;
+    skeleton?: import('./statcardV2.types').StatCardV2SkeletonProps;
+    dropdownProps?: import('../SingleSelect').SingleSelectProps;
+} & import('react').HTMLAttributes<HTMLDivElement> & import('./statcardV2.types').StatCardV2Dimensions & import('react').RefAttributes<HTMLDivElement>>;
+export default StatCardV2;

package/dist/components/StatCardV2/StatCardV2Change.d.ts

@@ -0,0 +1,3 @@
+import { StatCardV2ChangeProps } from './statcardV2.types';
+declare const StatCardV2Change: ({ changeValueText, leftSymbol, rightSymbol, arrowDirection, changeType, tokens, id, }: StatCardV2ChangeProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatCardV2Change;

package/dist/components/StatCardV2/StatCardV2NoData.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { StatCardV2Props } from './statcardV2.types';
+import { StatCardV2TokensType } from './statcardV2.tokens';
+type StatCardV2NoDataProps = Pick<StatCardV2Props, 'title' | 'titleIcon' | 'helpIconText' | 'subtitle' | 'dropdownProps' | 'maxWidth' | 'minWidth' | 'width' | 'height'> & {
+    tokens: StatCardV2TokensType;
+    isSmallScreen: boolean;
+    filteredProps: React.ComponentProps<'div'>;
+};
+declare const StatCardV2NoData: ({ title, titleIcon, helpIconText, subtitle, dropdownProps, maxWidth, minWidth, width, height, tokens, isSmallScreen, filteredProps, }: StatCardV2NoDataProps) => import("react/jsx-runtime").JSX.Element;
+export default StatCardV2NoData;

package/dist/components/StatCardV2/StatCardV2Skeleton.d.ts

@@ -0,0 +1,7 @@
+import { StatCardV2SkeletonProps } from './statcardV2.types';
+declare const StatCardV2Skeleton: ({ skeleton, maxWidth, minWidth, }: {
+    skeleton: StatCardV2SkeletonProps;
+    maxWidth: string | number;
+    minWidth: string | number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default StatCardV2Skeleton;

package/dist/components/StatCardV2/StatCardV2Subtitle.d.ts

@@ -0,0 +1,3 @@
+import { StatCardV2SubtitleProps } from './statcardV2.types';
+declare const StatCardV2Subtitle: ({ subtitle, tokens, id, }: StatCardV2SubtitleProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatCardV2Subtitle;

package/dist/components/StatCardV2/StatCardV2Title.d.ts

@@ -0,0 +1,3 @@
+import { StatCardV2TitleProps } from './statcardV2.types';
+declare const StatCardV2Title: ({ title, helpIconText, tokens, id, }: StatCardV2TitleProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StatCardV2Title;

package/dist/components/StatCardV2/StatCardV2Value.d.ts

@@ -0,0 +1,11 @@
+import { StatCardV2Props, StatCardV2Variant } from './statcardV2.types';
+import { StatCardV2TokensType } from './statcardV2.tokens';
+export declare const STATCARD_FALLBACK_DISPLAY = "--";
+export declare const renderVariantFallbackValue: (tokens: StatCardV2TokensType, variant: StatCardV2Variant) => import("react/jsx-runtime").JSX.Element;
+declare const StatCardV2Value: ({ value, tokens, variant, id, }: {
+    value: StatCardV2Props["value"];
+    tokens: StatCardV2TokensType;
+    variant: StatCardV2Variant;
+    id?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default StatCardV2Value;

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

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

package/dist/components/StatCardV2/statcardV2.dark.tokens.d.ts

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

package/dist/components/StatCardV2/statcardV2.light.tokens.d.ts

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

package/dist/components/StatCardV2/statcardV2.tokens.d.ts

@@ -0,0 +1,81 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/theme.enum';
+import { StatCardV2ChangeType, StatCardV2Variant } from './statcardV2.types';
+export type StatCardV2TokensType = {
+    height: CSSObject['height'];
+    width: CSSObject['width'];
+    maxWidth: CSSObject['maxWidth'];
+    minWidth: CSSObject['minWidth'];
+    paddingTop: CSSObject['paddingTop'];
+    paddingBottom: CSSObject['paddingBottom'];
+    paddingLeft: CSSObject['paddingLeft'];
+    paddingRight: CSSObject['paddingRight'];
+    border: CSSObject['border'];
+    borderRadius: CSSObject['borderRadius'];
+    backgroundColor: CSSObject['backgroundColor'];
+    boxShadow: CSSObject['boxShadow'];
+    topContainer: {
+        gap: CSSObject['gap'];
+        dataContainer: {
+            gap: CSSObject['gap'];
+            titleContainer: {
+                gap: CSSObject['gap'];
+                title: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+                helpIcon: {
+                    width: CSSObject['width'];
+                    height: CSSObject['height'];
+                    color: {
+                        default: CSSObject['color'];
+                        hover: CSSObject['color'];
+                    };
+                };
+            };
+            statsContainer: {
+                gap: CSSObject['gap'];
+                value: {
+                    [key in StatCardV2Variant]: {
+                        fontSize: CSSObject['fontSize'];
+                        fontWeight: CSSObject['fontWeight'];
+                        color: CSSObject['color'];
+                        lineHeight: CSSObject['lineHeight'];
+                    };
+                };
+                changeContainer: {
+                    gap: CSSObject['gap'];
+                    change: {
+                        fontSize: CSSObject['fontSize'];
+                        fontWeight: CSSObject['fontWeight'];
+                        color: {
+                            [key in StatCardV2ChangeType]: CSSObject['color'];
+                        };
+                        lineHeight: CSSObject['lineHeight'];
+                    };
+                    arrow: {
+                        width: CSSObject['width'];
+                        height: CSSObject['height'];
+                        color: {
+                            [key in StatCardV2ChangeType]: CSSObject['color'];
+                        };
+                    };
+                };
+            };
+            subtitle: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+        };
+    };
+};
+export type ResponsiveStatCardV2Tokens = {
+    [key in keyof BreakpointType]: StatCardV2TokensType;
+};
+export declare const getStatCardV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveStatCardV2Tokens;

package/dist/components/StatCardV2/statcardV2.types.d.ts

@@ -0,0 +1,78 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { CSSObject } from 'styled-components';
+import { StatCardV2TokensType } from './statcardV2.tokens';
+import { ChartV2Options } from '../ChartsV2';
+import { SkeletonVariant } from '../Skeleton';
+import { SingleSelectProps } from '../SingleSelect';
+export type StatCardV2Dimensions = {
+    width?: CSSObject['width'];
+    maxWidth?: CSSObject['maxWidth'];
+    minWidth?: CSSObject['minWidth'];
+    height?: CSSObject['height'];
+};
+export declare enum StatCardV2Variant {
+    CHART = "chart",
+    PROGRESS_BAR = "progress",
+    NUMBER = "number"
+}
+export declare enum StatCardV2ArrowDirection {
+    UP = "up",
+    DOWN = "down"
+}
+export declare enum StatCardV2ChangeType {
+    INCREASE = "increase",
+    DECREASE = "decrease"
+}
+export declare enum StatCardV2Alignment {
+    LEFT = "left",
+    CENTER = "center"
+}
+export type StatCardV2Change = {
+    value: string;
+    changeType: StatCardV2ChangeType;
+    leftSymbol?: string;
+    rightSymbol?: string;
+    arrowDirection?: StatCardV2ArrowDirection;
+    tooltip?: ReactNode;
+};
+export type StatCardV2SkeletonProps = {
+    variant: SkeletonVariant;
+    show: boolean;
+    height?: CSSObject['height'];
+    maxWidth?: CSSObject['maxWidth'];
+    minWidth?: CSSObject['minWidth'];
+};
+export type StatCardV2TitleProps = {
+    title: string;
+    helpIconText?: string;
+    tokens: StatCardV2TokensType;
+    id?: string;
+};
+export type StatCardV2ChangeProps = {
+    changeValueText?: string;
+    leftSymbol?: string;
+    rightSymbol?: string;
+    arrowDirection: StatCardV2ArrowDirection;
+    changeType: StatCardV2ChangeType;
+    tokens: StatCardV2TokensType;
+    id?: string;
+};
+export type StatCardV2SubtitleProps = {
+    subtitle?: string;
+    tokens: StatCardV2TokensType;
+    id?: string;
+};
+export type StatCardV2Props = {
+    title: string;
+    variant?: StatCardV2Variant;
+    titleIcon?: ReactNode;
+    actionIcon?: ReactNode;
+    value?: string;
+    progressValue?: number;
+    helpIconText?: string;
+    change?: StatCardV2Change;
+    subtitle?: string;
+    options?: ChartV2Options;
+    skeleton?: StatCardV2SkeletonProps;
+    dropdownProps?: SingleSelectProps;
+} & HTMLAttributes<HTMLDivElement> & StatCardV2Dimensions;

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

@@ -0,0 +1,7 @@
+import { StatCardV2Change } from './statcardV2.types';
+export declare const buildStatCardV2AriaLabel: (params: {
+    title?: string;
+    value?: string;
+    subtitle?: string;
+    change?: StatCardV2Change;
+}) => string;

package/dist/components/TabsV2/StyledTabsV2.d.ts

@@ -0,0 +1,26 @@
+import { TabsV2Variant, TabsV2Size } from './tabsV2.types';
+import { TabsV2TokensType } from './tabsV2.tokens';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export declare const StyledTabsRoot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<TabsPrimitive.TabsProps & import('react').RefAttributes<HTMLDivElement>, {
+    $tabsToken: TabsV2TokensType;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledTabsContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<TabsPrimitive.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, {
+    $tabsToken: TabsV2TokensType;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledTabsList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>, {
+    $variant: TabsV2Variant;
+    $size: TabsV2Size;
+    $expanded: boolean;
+    $fitContent: boolean;
+    $tabsToken: TabsV2TokensType;
+    $hideIndicator?: boolean;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledTabsTrigger: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, {
+    $variant: TabsV2Variant;
+    $size: TabsV2Size;
+    $tabsToken: TabsV2TokensType;
+    $isOverlay?: boolean;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const TabsV2IconContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $tabsToken: TabsV2TokensType;
+}>> & string;

package/dist/components/TabsV2/TabsV2.d.ts

@@ -0,0 +1,15 @@
+import { TabsV2Size, TabsV2Variant } from './tabsV2.types';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+import * as React from 'react';
+declare const TabsV2: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: TabsV2Variant;
+    size?: TabsV2Size;
+    expanded?: boolean;
+    fitContent?: boolean;
+    disabled?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+    stickyHeader?: boolean;
+    offsetTop?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export default TabsV2;

package/dist/components/TabsV2/TabsV2Content.d.ts

@@ -0,0 +1,2 @@
+declare const TabsV2Content: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default TabsV2Content;

package/dist/components/TabsV2/TabsV2List.d.ts

@@ -0,0 +1,14 @@
+import { TabsV2Variant } from './tabsV2.types';
+import * as React from 'react';
+declare const TabsV2List: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: TabsV2Variant;
+    size?: import('./tabsV2.types').TabsV2Size;
+    expanded?: boolean;
+    fitContent?: boolean;
+    disabled?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
+    stickyHeader?: boolean;
+    offsetTop?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export default TabsV2List;

package/dist/components/TabsV2/TabsV2Trigger.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { TabsV2Variant } from './tabsV2.types';
+declare const TabsV2Trigger: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-tabs').TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    value: string;
+    variant?: TabsV2Variant;
+    size?: import('./tabsV2.types').TabsV2Size;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    children: string | number;
+    disabled?: boolean;
+    closable?: boolean;
+    onClose?: () => void;
+    isActive?: boolean;
+    isOverlay?: boolean;
+    tabsGroupId?: string;
+    showSkeleton?: boolean;
+    skeletonVariant?: import('../Skeleton').SkeletonVariant;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default TabsV2Trigger;

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

@@ -0,0 +1,8 @@
+export { default as TabsV2 } from './TabsV2';
+export { default as TabsV2List } from './TabsV2List';
+export { default as TabsV2Trigger } from './TabsV2Trigger';
+export { default as TabsV2Content } from './TabsV2Content';
+export { TabsV2Provider, useTabsV2Context } from './tabsV2.context';
+export type { TabsV2ContextValue } from './tabsV2.context';
+export { getTabsV2Tokens, type TabsV2TokensType, type ResponsiveTabsV2Tokens, } from './tabsV2.tokens';
+export * from './tabsV2.types';

package/dist/components/TabsV2/tabsV2.context.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { TabsV2Variant, TabsV2Size } from './tabsV2.types';
+import { SkeletonVariant } from '../Skeleton/skeleton.tokens';
+export type TabsV2ContextValue = {
+    variant: TabsV2Variant;
+    size: TabsV2Size;
+    expanded: boolean;
+    fitContent: boolean;
+    disabled: boolean;
+    showSkeleton: boolean;
+    skeletonVariant: SkeletonVariant;
+    stickyHeader: boolean;
+    offsetTop: number;
+    activeTab: string;
+};
+export declare const TabsV2Context: import('react').Context<TabsV2ContextValue>;
+export declare const TabsV2Provider: ({ value, children, }: {
+    value: TabsV2ContextValue;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useTabsV2Context: () => TabsV2ContextValue;

package/dist/components/TabsV2/tabsV2.dark.tokens.d.ts

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

package/dist/components/TabsV2/tabsV2.light.tokens.d.ts

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

package/dist/components/TabsV2/tabsV2.tokens.d.ts

@@ -0,0 +1,97 @@
+import { CSSObject } from 'styled-components';
+import { TabsV2Variant, TabsV2Size, TabsV2State } from './tabsV2.types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type TabsV2TokensType = {
+    width: CSSObject['width'];
+    outline: CSSObject['outline'];
+    tabList: {
+        gap: CSSObject['gap'];
+        backgroundColor: {
+            [key in TabsV2Variant]: CSSObject['backgroundColor'];
+        };
+        borderRadius: {
+            [key in TabsV2Size]: {
+                [key in TabsV2Variant]: CSSObject['borderRadius'];
+            };
+        };
+        padding: {
+            [key in TabsV2Size]: {
+                [key in TabsV2Variant]: {
+                    top: CSSObject['paddingTop'];
+                    right: CSSObject['paddingRight'];
+                    bottom: CSSObject['paddingBottom'];
+                    left: CSSObject['paddingLeft'];
+                };
+            };
+        };
+        activeIndicator: {
+            height: CSSObject['height'];
+            color: CSSObject['color'];
+            position: {
+                bottom: CSSObject['bottom'];
+            };
+            transition: CSSObject['transition'];
+            zIndex: CSSObject['zIndex'];
+        };
+        stickyHeader: {
+            boxShadow: CSSObject['boxShadow'];
+            zIndex: CSSObject['zIndex'];
+        };
+        trigger: {
+            gap: CSSObject['gap'];
+            icon: {
+                maxWidth: CSSObject['maxWidth'];
+            };
+            backgroundColor: {
+                [key in TabsV2Variant]: {
+                    [key in TabsV2State]: CSSObject['backgroundColor'];
+                };
+            };
+            borderRadius: {
+                [key in TabsV2Size]: {
+                    [key in TabsV2Variant]: CSSObject['borderRadius'];
+                };
+            };
+            border: {
+                [key in TabsV2Variant]: CSSObject['border'];
+            };
+            padding: {
+                [key in TabsV2Size]: {
+                    [key in TabsV2Variant]: {
+                        top: CSSObject['paddingTop'];
+                        right: CSSObject['paddingRight'];
+                        bottom: CSSObject['paddingBottom'];
+                        left: CSSObject['paddingLeft'];
+                    };
+                };
+            };
+            text: {
+                color: {
+                    [key in TabsV2Variant]: {
+                        [key in TabsV2State]: CSSObject['color'];
+                    };
+                };
+                fontSize: {
+                    [key in TabsV2Size]: CSSObject['fontSize'];
+                };
+                fontWeight: {
+                    [key in TabsV2Size]: CSSObject['fontWeight'];
+                };
+            };
+            closeButton: {
+                width: CSSObject['width'];
+                borderRadius: CSSObject['borderRadius'];
+                backgroundColor: {
+                    [key in TabsV2State]: CSSObject['backgroundColor'];
+                };
+            };
+            transition: CSSObject['transition'];
+        };
+    };
+};
+export type ResponsiveTabsV2Tokens = {
+    [key in keyof BreakpointType]: TabsV2TokensType;
+};
+export declare const getTabsV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTabsV2Tokens;