@juspay/blend-design-system 0.0.37-beta.5 → 0.0.37-beta.7

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

@@ -0,0 +1,97 @@
+import { CSSObject } from 'styled-components';
+import { TabsV2Variant, TabsV2Size, TabsV2State } from './tabsV2.types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+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'];
+                };
+            };
+        };
+        borderBottom: {
+            [key in TabsV2Variant]: CSSObject['borderBottom'];
+        };
+        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;
+};

package/dist/components/TagV2/tagV2.dark.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveTagV2Tokens } from './tagV2.tokens';
+import { ResponsiveTagV2Tokens } from './tagV2.tokens.types';
 export declare const getTagV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveTagV2Tokens;

package/dist/components/TagV2/tagV2.light.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveTagV2Tokens } from './tagV2.tokens';
+import { ResponsiveTagV2Tokens } from './tagV2.tokens.types';
 export declare const getTagV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveTagV2Tokens;

package/dist/components/TagV2/tagV2.tokens.d.ts

@@ -1,61 +1,5 @@
-import { CSSObject } from 'styled-components';
-import { TagV2Color, TagV2Size, TagV2Type, TagV2SubType, TagV2PaddingDirection } from './TagV2.types';
-import { BreakpointType } from '../../breakpoints/breakPoints';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { Theme } from '../../context/theme.enum';
-export type TagV2TokensType = Readonly<{
-    border: {
-        [key in TagV2Type]: {
-            [key in TagV2Color]: CSSObject['border'];
-        };
-    };
-    borderRadius: {
-        [key in TagV2Size]: {
-            [key in TagV2SubType]: CSSObject['borderRadius'];
-        };
-    };
-    backgroundColor: {
-        [key in TagV2Type]: {
-            [key in TagV2Color]: CSSObject['backgroundColor'];
-        };
-    };
-    height: {
-        [key in TagV2Size]: CSSObject['height'];
-    };
-    padding: {
-        [key in TagV2PaddingDirection]: {
-            [key in TagV2Size]: CSSObject['padding'];
-        };
-    };
-    gap: CSSObject['gap'];
-    leftSlot: {
-        maxHeight: {
-            [key in TagV2Size]: CSSObject['maxHeight'];
-        };
-    };
-    rightSlot: {
-        maxHeight: {
-            [key in TagV2Size]: CSSObject['maxHeight'];
-        };
-    };
-    text: {
-        color: {
-            [key in TagV2Type]: {
-                [key in TagV2Color]: CSSObject['color'];
-            };
-        };
-        fontSize: {
-            [key in TagV2Size]: CSSObject['fontSize'];
-        };
-        fontWeight: {
-            [key in TagV2Size]: CSSObject['fontWeight'];
-        };
-        lineHeight: {
-            [key in TagV2Size]: CSSObject['lineHeight'];
-        };
-    };
-}>;
-export type ResponsiveTagV2Tokens = {
-    [key in keyof BreakpointType]: TagV2TokensType;
-};
+import { ResponsiveTagV2Tokens } from './tagV2.tokens.types';
+export type { ResponsiveTagV2Tokens, TagV2TokensType, } from './tagV2.tokens.types';
 export declare const getTagV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTagV2Tokens;

package/dist/components/TagV2/tagV2.tokens.types.d.ts

@@ -0,0 +1,58 @@
+import { CSSObject } from 'styled-components';
+import { TagV2Color, TagV2Size, TagV2Type, TagV2SubType, TagV2PaddingDirection } from './TagV2.types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type TagV2TokensType = Readonly<{
+    border: {
+        [key in TagV2Type]: {
+            [key in TagV2Color]: CSSObject['border'];
+        };
+    };
+    borderRadius: {
+        [key in TagV2Size]: {
+            [key in TagV2SubType]: CSSObject['borderRadius'];
+        };
+    };
+    backgroundColor: {
+        [key in TagV2Type]: {
+            [key in TagV2Color]: CSSObject['backgroundColor'];
+        };
+    };
+    height: {
+        [key in TagV2Size]: CSSObject['height'];
+    };
+    padding: {
+        [key in TagV2PaddingDirection]: {
+            [key in TagV2Size]: CSSObject['padding'];
+        };
+    };
+    gap: CSSObject['gap'];
+    leftSlot: {
+        maxHeight: {
+            [key in TagV2Size]: CSSObject['maxHeight'];
+        };
+    };
+    rightSlot: {
+        maxHeight: {
+            [key in TagV2Size]: CSSObject['maxHeight'];
+        };
+    };
+    text: {
+        color: {
+            [key in TagV2Type]: {
+                [key in TagV2Color]: CSSObject['color'];
+            };
+        };
+        fontSize: {
+            [key in TagV2Size]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in TagV2Size]: CSSObject['fontWeight'];
+        };
+        lineHeight: {
+            [key in TagV2Size]: CSSObject['lineHeight'];
+        };
+    };
+}>;
+export type ResponsiveTagV2Tokens = {
+    [key in keyof BreakpointType]: TagV2TokensType;
+};

package/dist/components/Tags/tag.dark.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveTagTokens } from './tag.tokens';
+import { ResponsiveTagTokens } from './tag.tokens.types';
 export declare const getTagDarkTokens: (foundationToken: FoundationTokenType) => ResponsiveTagTokens;

package/dist/components/Tags/tag.light.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveTagTokens } from './tag.tokens';
+import { ResponsiveTagTokens } from './tag.tokens.types';
 export declare const getTagLightTokens: (foundationToken: FoundationTokenType) => ResponsiveTagTokens;

package/dist/components/Tags/tag.tokens.d.ts

@@ -1,60 +1,6 @@
-import { CSSObject } from 'styled-components';
-import { TagColor, TagShape, TagSize, TagVariant } from './types';
-import { BreakpointType } from '../../breakpoints/breakPoints';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { Theme } from '../../context/theme.enum';
-/**
- * Tag Tokens following the pattern: [target].CSSProp.[size].[variant].[subType]
- *
- * Structure:
- * - target: container | text (defines what element the token applies to)
- * - CSSProp: backgroundColor | borderRadius | padding | border | color | fontSize | fontWeight | gap | height
- * - size: xs | sm | md | lg (only for size-dependent properties like padding, fontSize, height)
- * - variant: noFill | attentive | subtle (tag variant)
- * - subType: neutral | primary | success | error | warning | purple (tag color)
- *
- * Size-independent properties: backgroundColor, border, color
- * Size-dependent properties: borderRadius, padding, fontSize, fontWeight, gap, height
- */
-export type TagTokensType = Readonly<{
-    minWidth: CSSObject['minWidth'];
-    maxWidth: CSSObject['maxWidth'];
-    width: CSSObject['width'];
-    gap: CSSObject['gap'];
-    backgroundColor: {
-        [key in TagVariant]: {
-            [key in TagColor]: CSSObject['backgroundColor'];
-        };
-    };
-    borderRadius: {
-        [key in TagSize]: {
-            [key in TagShape]: CSSObject['borderRadius'];
-        };
-    };
-    padding: {
-        [key in TagSize]: CSSObject['padding'];
-    };
-    border: {
-        [key in TagVariant]: {
-            [key in TagColor]: CSSObject['border'];
-        };
-    };
-    text: {
-        color: {
-            [key in TagVariant]: {
-                [key in TagColor]: CSSObject['color'];
-            };
-        };
-        fontSize: {
-            [key in TagSize]: CSSObject['fontSize'];
-        };
-        fontWeight: {
-            [key in TagSize]: CSSObject['fontWeight'];
-        };
-    };
-}>;
-export type ResponsiveTagTokens = {
-    [key in keyof BreakpointType]: TagTokensType;
-};
+import { ResponsiveTagTokens } from './tag.tokens.types';
+export type { ResponsiveTagTokens, TagTokensType } from './tag.tokens.types';
 export declare const getTagTokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTagTokens;
 export default getTagTokens;

package/dist/components/Tags/tag.tokens.types.d.ts

@@ -0,0 +1,56 @@
+import { CSSObject } from 'styled-components';
+import { TagColor, TagShape, TagSize, TagVariant } from './types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+/**
+ * Tag Tokens following the pattern: [target].CSSProp.[size].[variant].[subType]
+ *
+ * Structure:
+ * - target: container | text (defines what element the token applies to)
+ * - CSSProp: backgroundColor | borderRadius | padding | border | color | fontSize | fontWeight | gap | height
+ * - size: xs | sm | md | lg (only for size-dependent properties like padding, fontSize, height)
+ * - variant: noFill | attentive | subtle (tag variant)
+ * - subType: neutral | primary | success | error | warning | purple (tag color)
+ *
+ * Size-independent properties: backgroundColor, border, color
+ * Size-dependent properties: borderRadius, padding, fontSize, fontWeight, gap, height
+ */
+export type TagTokensType = Readonly<{
+    minWidth: CSSObject['minWidth'];
+    maxWidth: CSSObject['maxWidth'];
+    width: CSSObject['width'];
+    gap: CSSObject['gap'];
+    backgroundColor: {
+        [key in TagVariant]: {
+            [key in TagColor]: CSSObject['backgroundColor'];
+        };
+    };
+    borderRadius: {
+        [key in TagSize]: {
+            [key in TagShape]: CSSObject['borderRadius'];
+        };
+    };
+    padding: {
+        [key in TagSize]: CSSObject['padding'];
+    };
+    border: {
+        [key in TagVariant]: {
+            [key in TagColor]: CSSObject['border'];
+        };
+    };
+    text: {
+        color: {
+            [key in TagVariant]: {
+                [key in TagColor]: CSSObject['color'];
+            };
+        };
+        fontSize: {
+            [key in TagSize]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in TagSize]: CSSObject['fontWeight'];
+        };
+    };
+}>;
+export type ResponsiveTagTokens = {
+    [key in keyof BreakpointType]: TagTokensType;
+};

package/dist/components/Timeline/timeline.dark.token.d.ts

@@ -1,8 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { TimelineTokensType } from './timeline.token';
-import { BreakpointType } from '../../breakpoints/breakPoints';
-type ResponsiveTimelineTokens = {
-    [key in keyof BreakpointType]: TimelineTokensType;
-};
+import { ResponsiveTimelineTokens } from './timeline.tokens.types';
 export declare const getTimelineDarkTokens: (foundationToken: FoundationTokenType) => ResponsiveTimelineTokens;
-export {};

package/dist/components/Timeline/timeline.light.token.d.ts

@@ -1,8 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { TimelineTokensType } from './timeline.token';
-import { BreakpointType } from '../../breakpoints/breakPoints';
-type ResponsiveTimelineTokens = {
-    [key in keyof BreakpointType]: TimelineTokensType;
-};
+import { ResponsiveTimelineTokens } from './timeline.tokens.types';
 export declare const getTimelineLightTokens: (foundationToken: FoundationTokenType) => ResponsiveTimelineTokens;
-export {};

package/dist/components/Timeline/timeline.token.d.ts

@@ -1,132 +1,5 @@
-import { CSSObject } from 'styled-components';
-import { TimelineNodeStatus } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { BreakpointType } from '../../breakpoints/breakPoints';
 import { Theme } from '../../context/theme.enum';
-export type TimelineStatusColors = {
-    [key in TimelineNodeStatus]: CSSObject['backgroundColor'];
-};
-export type TimelineTokensType = {
-    track: {
-        width: CSSObject['width'];
-        backgroundColor: CSSObject['backgroundColor'];
-        left: CSSObject['left'];
-    };
-    indicator: {
-        left: CSSObject['left'];
-        width: CSSObject['width'];
-        height: CSSObject['height'];
-    };
-    statusColors: TimelineStatusColors;
-    label: {
-        paddingLeft: CSSObject['paddingLeft'];
-        marginBottom: CSSObject['marginBottom'];
-        circle: {
-            left: CSSObject['left'];
-            width: CSSObject['width'];
-            height: CSSObject['height'];
-            backgroundColor: CSSObject['backgroundColor'];
-            border: CSSObject['border'];
-        };
-        mask: {
-            backgroundColor: CSSObject['backgroundColor'];
-            height: CSSObject['height'];
-        };
-        text: {
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
-            color: CSSObject['color'];
-        };
-    };
-    header: {
-        row: {
-            paddingLeft: CSSObject['paddingLeft'];
-            marginBottom: CSSObject['marginBottom'];
-            gap: CSSObject['gap'];
-        };
-        section: {
-            marginBottom: CSSObject['marginBottom'];
-        };
-        title: {
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
-            color: CSSObject['color'];
-        };
-        timestamp: {
-            fontSize: CSSObject['fontSize'];
-            color: CSSObject['color'];
-            gap: CSSObject['gap'];
-        };
-    };
-    subsection: {
-        paddingLeft: CSSObject['paddingLeft'];
-        marginTop: CSSObject['marginTop'];
-        marginBottom: CSSObject['marginBottom'];
-        marginLeft: CSSObject['marginLeft'];
-        rootIndicator: {
-            top: CSSObject['top'];
-        };
-        headerRow: {
-            gap: CSSObject['gap'];
-        };
-        titleRow: {
-            gap: CSSObject['gap'];
-        };
-        datetimeGroup: {
-            gap: CSSObject['gap'];
-        };
-        title: {
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
-            color: CSSObject['color'];
-            gap: CSSObject['gap'];
-        };
-        description: {
-            fontSize: CSSObject['fontSize'];
-            color: CSSObject['color'];
-            marginTop: CSSObject['marginTop'];
-            marginBottom: CSSObject['marginBottom'];
-            lineHeight: CSSObject['lineHeight'];
-        };
-        datetime: {
-            fontSize: CSSObject['fontSize'];
-            color: CSSObject['color'];
-            gap: CSSObject['gap'];
-        };
-        connector: {
-            left: CSSObject['left'];
-            width: CSSObject['width'];
-            height: CSSObject['height'];
-            color: CSSObject['color'];
-        };
-        avatar: {
-            width: CSSObject['width'];
-            height: CSSObject['height'];
-            marginTop: CSSObject['marginTop'];
-        };
-        user: {
-            fontSize: CSSObject['fontSize'];
-            color: CSSObject['color'];
-            marginLeft: CSSObject['marginLeft'];
-        };
-        time: {
-            fontSize: CSSObject['fontSize'];
-            color: CSSObject['color'];
-        };
-        separator: {
-            width: CSSObject['width'];
-            height: CSSObject['height'];
-            color: CSSObject['color'];
-            marginLeft: CSSObject['marginLeft'];
-            marginRight: CSSObject['marginRight'];
-        };
-    };
-    showMore: {
-        paddingLeft: CSSObject['paddingLeft'];
-        marginTop: CSSObject['marginTop'];
-    };
-};
-export type ResponsiveTimelineTokens = {
-    [key in keyof BreakpointType]: TimelineTokensType;
-};
+import { ResponsiveTimelineTokens } from './timeline.tokens.types';
+export type { ResponsiveTimelineTokens, TimelineTokensType, TimelineStatusColors, } from './timeline.tokens.types';
 export declare const getTimelineTokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTimelineTokens;

package/dist/components/Timeline/timeline.tokens.types.d.ts

@@ -0,0 +1,129 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { TimelineNodeStatus } from './types';
+export type TimelineStatusColors = {
+    [key in TimelineNodeStatus]: CSSObject['backgroundColor'];
+};
+export type TimelineTokensType = {
+    track: {
+        width: CSSObject['width'];
+        backgroundColor: CSSObject['backgroundColor'];
+        left: CSSObject['left'];
+    };
+    indicator: {
+        left: CSSObject['left'];
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+    };
+    statusColors: TimelineStatusColors;
+    label: {
+        paddingLeft: CSSObject['paddingLeft'];
+        marginBottom: CSSObject['marginBottom'];
+        circle: {
+            left: CSSObject['left'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+        };
+        mask: {
+            backgroundColor: CSSObject['backgroundColor'];
+            height: CSSObject['height'];
+        };
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+    };
+    header: {
+        row: {
+            paddingLeft: CSSObject['paddingLeft'];
+            marginBottom: CSSObject['marginBottom'];
+            gap: CSSObject['gap'];
+        };
+        section: {
+            marginBottom: CSSObject['marginBottom'];
+        };
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+        timestamp: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+            gap: CSSObject['gap'];
+        };
+    };
+    subsection: {
+        paddingLeft: CSSObject['paddingLeft'];
+        marginTop: CSSObject['marginTop'];
+        marginBottom: CSSObject['marginBottom'];
+        marginLeft: CSSObject['marginLeft'];
+        rootIndicator: {
+            top: CSSObject['top'];
+        };
+        headerRow: {
+            gap: CSSObject['gap'];
+        };
+        titleRow: {
+            gap: CSSObject['gap'];
+        };
+        datetimeGroup: {
+            gap: CSSObject['gap'];
+        };
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+            gap: CSSObject['gap'];
+        };
+        description: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+            marginTop: CSSObject['marginTop'];
+            marginBottom: CSSObject['marginBottom'];
+            lineHeight: CSSObject['lineHeight'];
+        };
+        datetime: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+            gap: CSSObject['gap'];
+        };
+        connector: {
+            left: CSSObject['left'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            color: CSSObject['color'];
+        };
+        avatar: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            marginTop: CSSObject['marginTop'];
+        };
+        user: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+            marginLeft: CSSObject['marginLeft'];
+        };
+        time: {
+            fontSize: CSSObject['fontSize'];
+            color: CSSObject['color'];
+        };
+        separator: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            color: CSSObject['color'];
+            marginLeft: CSSObject['marginLeft'];
+            marginRight: CSSObject['marginRight'];
+        };
+    };
+    showMore: {
+        paddingLeft: CSSObject['paddingLeft'];
+        marginTop: CSSObject['marginTop'];
+    };
+};
+export type ResponsiveTimelineTokens = {
+    [key in keyof BreakpointType]: TimelineTokensType;
+};

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

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

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

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