@juspay/blend-design-system 0.0.20-beta → 0.0.20

package/dist/components/Accordion/accordion.tokens.d.ts

@@ -2,7 +2,26 @@ import { CSSObject } from 'styled-components';
 import { AccordionType } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
-export type AccordionState = 'default' | 'hover' | 'active' | 'disabled' | 'open' | 'closed';
+export type AccordionState = 'default' | 'hover' | 'active' | 'disabled' | 'open';
+/**
+ * Accordion Tokens following the pattern: [target].CSSProp.[variant].[state]
+ *
+ * Structure:
+ * - target: container | trigger | separator (defines what element the token applies to)
+ * - CSSProp: gap | borderRadius | padding | backgroundColor | border | fontSize | fontWeight | color
+ * - variant: border | noBorder (accordion variant)
+ * - state: default | hover | active | disabled | open (interaction state)
+ *
+ * Pattern examples:
+ * - container.gap.[variant]
+ * - container.borderRadius.[variant]
+ * - trigger.backgroundColor.[variant].[state]
+ * - trigger.border.[variant].[state]
+ * - trigger.padding.[variant]
+ * - text.fontSize (size-independent)
+ * - text.fontWeight (size-independent)
+ * - text.color.[state]
+ */
 export type AccordionTokenType = {
     gap: {
         [key in AccordionType]: CSSObject['gap'];
@@ -10,40 +29,40 @@ export type AccordionTokenType = {
     borderRadius: {
         [key in AccordionType]: CSSObject['borderRadius'];
     };
-    item: {
-        trigger: {
-            border: {
-                [key in AccordionType]: {
-                    [key in AccordionState]?: CSSObject['border'];
-                };
-            };
-            padding: {
-                [key in AccordionType]: CSSObject['padding'];
+    trigger: {
+        backgroundColor: {
+            [key in AccordionType]: {
+                [key in AccordionState]: CSSObject['backgroundColor'];
             };
-            backgroundColor: {
-                [key in AccordionType]: {
-                    [key in AccordionState]?: CSSObject['backgroundColor'];
-                };
+        };
+        border: {
+            [key in AccordionType]: {
+                [key in AccordionState]: CSSObject['border'];
             };
+        };
+        padding: {
+            [key in AccordionType]: CSSObject['padding'];
+        };
+        text: {
             title: {
                 fontSize: CSSObject['fontSize'];
                 fontWeight: CSSObject['fontWeight'];
                 color: {
-                    [key in AccordionState]?: CSSObject['color'];
+                    [key in AccordionState]: CSSObject['color'];
                 };
             };
             subtext: {
                 fontSize: CSSObject['fontSize'];
                 gap: CSSObject['gap'];
                 color: {
-                    [key in AccordionState]?: CSSObject['color'];
+                    [key in AccordionState]: CSSObject['color'];
                 };
             };
         };
-        separator: {
-            color: {
-                [key in AccordionType]: CSSObject['color'];
-            };
+    };
+    separator: {
+        color: {
+            [key in AccordionType]: CSSObject['color'];
         };
     };
 };

package/dist/components/Alert/alert.tokens.d.ts

@@ -2,7 +2,24 @@ import { CSSObject } from 'styled-components';
 import { AlertStyle, AlertVariant } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
+/**
+ * Alert Tokens following the pattern: [target].CSSProp.[variant].[style]
+ *
+ * Structure:
+ * - target: container | button (defines the element the token applies to)
+ * - CSSProp:
+ *   - container: padding | borderRadius | background.[variant].[style] | border.[variant]
+ *   - button: color per [variant]
+ * - variant: primary | warning | success | purple | neutral | error | orange
+ * - style: subtle | noFill (applies to background only)
+ *
+ * Notes:
+ * - Size-independent properties: padding, borderRadius, background, border, button
+ * - Background uses an additional style dimension; border/button are variant-only
+ */
 export type AlertTokenType = {
+    maxWidth: CSSObject['maxWidth'];
+    gap: CSSObject['gap'];
     padding: CSSObject['padding'];
     borderRadius: CSSObject['borderRadius'];
     background: {
@@ -11,15 +28,57 @@ export type AlertTokenType = {
         };
     };
     border: {
-        [key in AlertVariant]: CSSObject['color'];
+        [key in AlertVariant]: {
+            [key in AlertStyle]: CSSObject['color'];
+        };
+    };
+    text: {
+        heading: {
+            color: {
+                [key in AlertVariant]: CSSObject['color'];
+            };
+            fontWeight: CSSObject['fontWeight'];
+            fontSize: CSSObject['fontSize'];
+            lineHeight: CSSObject['lineHeight'];
+        };
+        description: {
+            color: {
+                [key in AlertVariant]: CSSObject['color'];
+            };
+            fontWeight: CSSObject['fontWeight'];
+            fontSize: CSSObject['fontSize'];
+            lineHeight: CSSObject['lineHeight'];
+        };
     };
     button: {
-        [key in AlertVariant]: CSSObject['color'];
+        gap: CSSObject['gap'];
+        primaryAction: {
+            color: {
+                [key in AlertVariant]: CSSObject['color'];
+            };
+            fontWeight: CSSObject['fontWeight'];
+            fontSize: CSSObject['fontSize'];
+            lineHeight: CSSObject['lineHeight'];
+        };
+        secondaryAction: {
+            color: {
+                [key in AlertVariant]: CSSObject['color'];
+            };
+            fontWeight: CSSObject['fontWeight'];
+            fontSize: CSSObject['fontSize'];
+            lineHeight: CSSObject['lineHeight'];
+        };
+        closeButton: {
+            color: {
+                [key in AlertVariant]: CSSObject['color'];
+            };
+            fontWeight: CSSObject['fontWeight'];
+            fontSize: CSSObject['fontSize'];
+            lineHeight: CSSObject['lineHeight'];
+        };
     };
 };
 export type ResponsiveAlertTokens = {
     [key in keyof BreakpointType]: AlertTokenType;
 };
-declare const alertTokens: AlertTokenType;
 export declare const getAlertTokens: (foundationToken: FoundationTokenType) => ResponsiveAlertTokens;
-export default alertTokens;

package/dist/components/Avatar/avatar.tokens.d.ts

@@ -1,71 +1,82 @@
-declare const avatarTokens: {
+import { CSSObject } from 'styled-components';
+import { ThemeType } from '../../tokens';
+import { AvatarSize, AvatarShape } from './types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type AvatarState = 'default' | 'online';
+export type AvatarVariant = 'withImage' | 'withoutImage';
+/**
+ * Avatar Tokens following the design system pattern
+ *
+ * Pattern: component.[target].CSSProp.[size].[variant].[subType].[state].value
+ *
+ * Structure:
+ * - gap: Spacing between avatar and slots
+ * - container: Main avatar container properties
+ * - text: Fallback text styling
+ * - indicator: Online status indicator
+ * - slot: Leading and trailing slot styling
+ */
+export type AvatarTokensType = {
+    gap: CSSObject['gap'];
     container: {
-        background: {
-            default: string;
+        size: {
+            [key in AvatarSize]: {
+                width: CSSObject['width'];
+                height: CSSObject['height'];
+            };
+        };
+        backgroundColor: {
+            [key in AvatarVariant]: {
+                [key in AvatarState]: CSSObject['backgroundColor'];
+            };
         };
         border: {
-            withImage: string;
-            withoutImage: string;
+            [key in AvatarVariant]: {
+                [key in AvatarState]: CSSObject['border'];
+            };
+        };
+        borderRadius: {
+            [key in AvatarShape]: CSSObject['borderRadius'];
         };
     };
     text: {
         color: {
-            default: string;
+            [key in AvatarState]: CSSObject['color'];
         };
-    };
-    indicator: {
-        background: {
-            default: string;
+        fontSize: {
+            [key in AvatarSize]: CSSObject['fontSize'];
         };
-        ring: {
-            color: string;
+        fontWeight: {
+            [key in AvatarSize]: CSSObject['fontWeight'];
         };
     };
-    sizes: {
-        sm: {
-            width: string;
-            height: string;
-            fontSize: string;
-            fontWeight: string;
-            indicatorSize: string;
-            indicatorRingWidth: string;
-            indicatorOffset: string;
-        };
-        md: {
-            width: string;
-            height: string;
-            fontSize: string;
-            fontWeight: string;
-            indicatorSize: string;
-            indicatorRingWidth: string;
-            indicatorOffset: string;
+    indicator: {
+        backgroundColor: {
+            [key in AvatarState]: CSSObject['backgroundColor'];
         };
-        lg: {
-            width: string;
-            height: string;
-            fontSize: string;
-            fontWeight: string;
-            indicatorSize: string;
-            indicatorRingWidth: string;
-            indicatorOffset: string;
+        border: {
+            [key in AvatarState]: {
+                color: CSSObject['borderColor'];
+                width: CSSObject['borderWidth'];
+            };
         };
-        xl: {
-            width: string;
-            height: string;
-            fontSize: string;
-            fontWeight: string;
-            indicatorSize: string;
-            indicatorRingWidth: string;
-            indicatorOffset: string;
+        size: {
+            [key in AvatarSize]: {
+                width: CSSObject['width'];
+                height: CSSObject['height'];
+            };
         };
+        borderRadius: CSSObject['borderRadius'];
+        boxShadow: CSSObject['boxShadow'];
     };
-    shapes: {
-        circular: {
-            borderRadius: string;
-        };
-        rounded: {
-            borderRadius: string;
+    slot: {
+        spacing: CSSObject['margin'];
+        color: {
+            [key in AvatarState]: CSSObject['color'];
         };
     };
 };
-export default avatarTokens;
+export type ResponsiveAvatarTokens = {
+    [key in keyof BreakpointType]: AvatarTokensType;
+};
+export declare const getAvatarTokens: (foundationToken: ThemeType) => ResponsiveAvatarTokens;

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

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react';
 export declare enum AvatarSize {
+    XS = "xs",
     SM = "sm",
     MD = "md",
     LG = "lg",

package/dist/components/AvatarGroup/avatarGroup.tokens.d.ts

@@ -1,89 +1,63 @@
-declare const avatarGroupTokens: {
+import { CSSObject } from 'styled-components';
+import { ThemeType } from '../../tokens';
+import { AvatarSize, AvatarShape } from '../Avatar/types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+/**
+ * AvatarGroup Tokens following the design system pattern
+ *
+ * Structure:
+ * - gap: Spacing between avatars in the group
+ * - container: Group container properties
+ * - avatar: Individual avatar styling within the group
+ * - overflowCounter: Overflow counter styling
+ */
+export type AvatarGroupTokensType = {
+    gap: CSSObject['gap'];
     container: {
-        spacing: {
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
+        marginLeft: {
+            [key in AvatarSize]: CSSObject['margin'];
         };
     };
     avatar: {
-        stacking: {
-            zIndex: number;
-        };
         selected: {
-            ringColor: string;
-            ringWidth: string;
-            ringOffset: string;
+            ringColor: CSSObject['borderColor'];
+            ringWidth: CSSObject['borderWidth'];
+            ringOffset: CSSObject['outlineOffset'];
         };
         border: {
-            width: string;
-            color: string;
+            width: CSSObject['borderWidth'];
+            color: CSSObject['borderColor'];
         };
     };
     overflowCounter: {
         background: {
-            default: string;
-            hover: string;
-            active: string;
+            default: CSSObject['backgroundColor'];
+            hover: CSSObject['backgroundColor'];
+            active: CSSObject['backgroundColor'];
         };
         text: {
-            color: string;
+            color: CSSObject['color'];
         };
         border: {
-            width: string;
-            color: string;
-        };
-        sizes: {
-            sm: {
-                width: string;
-                height: string;
-                fontSize: string;
-                fontWeight: string;
-                indicatorSize: string;
-                indicatorRingWidth: string;
-                indicatorOffset: string;
-            };
-            md: {
-                width: string;
-                height: string;
-                fontSize: string;
-                fontWeight: string;
-                indicatorSize: string;
-                indicatorRingWidth: string;
-                indicatorOffset: string;
-            };
-            lg: {
-                width: string;
-                height: string;
-                fontSize: string;
-                fontWeight: string;
-                indicatorSize: string;
-                indicatorRingWidth: string;
-                indicatorOffset: string;
-            };
-            xl: {
-                width: string;
-                height: string;
-                fontSize: string;
-                fontWeight: string;
-                indicatorSize: string;
-                indicatorRingWidth: string;
-                indicatorOffset: string;
+            width: CSSObject['borderWidth'];
+            color: CSSObject['borderColor'];
+        };
+        size: {
+            [key in AvatarSize]: {
+                width: CSSObject['width'];
+                height: CSSObject['height'];
+                fontSize: CSSObject['fontSize'];
             };
         };
-        shapes: {
-            circular: {
-                borderRadius: string;
-            };
-            rounded: {
-                borderRadius: string;
-            };
+        borderRadius: {
+            [key in AvatarShape]: CSSObject['borderRadius'];
         };
     };
     menu: {
-        spacing: string;
-        zIndex: number;
+        marginTop: CSSObject['margin'];
     };
 };
-export default avatarGroupTokens;
+export type ResponsiveAvatarGroupTokens = {
+    [key in keyof BreakpointType]: AvatarGroupTokensType;
+};
+export declare const getAvatarGroupTokens: (foundationToken: ThemeType) => ResponsiveAvatarGroupTokens;

package/dist/components/Breadcrumb/breadcrumb.tokens.d.ts

@@ -1,31 +1,41 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
-type BreadcrumbItemType = 'active' | 'inactive';
+export type BreadcrumbState = 'default' | 'hover' | 'active';
+/**
+ * Breadcrumb Tokens following the pattern: [target].CSSProp.[state]
+ *
+ * Structure:
+ * - target: container | item | separator (defines what element the token applies to)
+ * - CSSProp: height | padding | gap | fontSize | fontWeight | color | background
+ * - state: active | inactive (breadcrumb item state)
+ *
+ * Pattern examples:
+ * - container.height
+ * - container.padding
+ * - container.gap
+ * - item.padding
+ * - item.gap
+ * - item.text.fontSize.[state]
+ * - item.text.fontWeight.[state]
+ * - item.text.color.[state]
+ * - item.background.[state]
+ */
 export type BreadcrumbTokenType = {
-    height: CSSObject['height'];
-    padding: CSSObject['padding'];
     gap: CSSObject['gap'];
     item: {
         padding: CSSObject['padding'];
         gap: CSSObject['gap'];
-        fontSize: {
-            [key in BreadcrumbItemType]: CSSObject['fontSize'];
-        };
-        fontWeight: {
-            [key in BreadcrumbItemType]: CSSObject['fontWeight'];
-        };
-        color: {
-            [key in BreadcrumbItemType]: CSSObject['color'];
-        };
-        background: {
-            [key in BreadcrumbItemType]: CSSObject['background'];
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: {
+                [key in BreadcrumbState]: CSSObject['color'];
+            };
         };
     };
 };
 export type ResponsiveBreadcrumbTokens = {
     [key in keyof BreakpointType]: BreadcrumbTokenType;
 };
-declare const breadcrumbTokens: BreadcrumbTokenType;
 export declare const getBreadcrumbTokens: (foundationToken: FoundationTokenType) => ResponsiveBreadcrumbTokens;
-export default breadcrumbTokens;

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonSize, ButtonSubType, ButtonType } from './types';
+import { ButtonSize, ButtonState, ButtonSubType, ButtonType } from './types';
 declare const Button: import('react').ForwardRefExoticComponent<{
     buttonType?: ButtonType;
     size?: ButtonSize;
@@ -14,5 +14,6 @@ declare const Button: import('react').ForwardRefExoticComponent<{
     buttonGroupPosition?: "center" | "left" | "right";
     fullWidth?: boolean;
     justifyContent?: import('styled-components').CSSObject["justifyContent"];
+    state?: ButtonState;
 } & Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "style" | "className"> & import('react').RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/components/Button/button.tokens.d.ts

@@ -1,8 +1,21 @@
 import { CSSObject } from 'styled-components';
-import { ButtonSize, ButtonSubType, ButtonType } from './types';
+import { ButtonSize, ButtonState, ButtonSubType, ButtonType } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
-export type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
+/**
+ * Button Tokens following the pattern: [target].CSSProp.[size].[variant].[subType].[state]
+ *
+ * Structure:
+ * - target: container | text (defines what element the token applies to)
+ * - CSSProp: backgroundColor | borderRadius | padding | border | shadow | outline | color
+ * - size: sm | md | lg (only for size-dependent properties like padding)
+ * - variant: primary | secondary | danger | success (button type/variant)
+ * - subType: default | iconOnly | inline (button sub-type)
+ * - state: default | hover | active | disabled (interaction state)
+ *
+ * Size-independent properties: backgroundColor, borderRadius, border, shadow, outline, color
+ * Size-dependent properties: padding
+ */
 export type ButtonTokensType = {
     gap: CSSObject['gap'];
     backgroundColor: {
@@ -12,23 +25,20 @@ export type ButtonTokensType = {
             };
         };
     };
-    color: {
-        [key in ButtonType]: {
-            [key in ButtonSubType]: {
-                [key in ButtonState]: CSSObject['color'];
-            };
-        };
-    };
     borderRadius: {
-        [key in ButtonType]: {
-            [key in ButtonSubType]: {
-                [key in ButtonState]: CSSObject['borderRadius'];
+        [key in ButtonSize]: {
+            [key in ButtonType]: {
+                [key in ButtonSubType]: {
+                    [key in ButtonState]: CSSObject['borderRadius'];
+                };
             };
         };
     };
     padding: {
         [key in ButtonSize]: {
-            [key in ButtonSubType]: CSSObject['padding'];
+            [key in ButtonType]: {
+                [key in ButtonSubType]: CSSObject['padding'];
+            };
         };
     };
     border: {
@@ -52,6 +62,21 @@ export type ButtonTokensType = {
             };
         };
     };
+    text: {
+        color: {
+            [key in ButtonType]: {
+                [key in ButtonSubType]: {
+                    [key in ButtonState]: CSSObject['color'];
+                };
+            };
+        };
+        fontSize: {
+            [key in ButtonSize]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in ButtonSize]: CSSObject['fontWeight'];
+        };
+    };
 };
 export type ResponsiveButtonTokens = {
     [key in keyof BreakpointType]: ButtonTokensType;

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

@@ -16,7 +16,13 @@ export declare enum ButtonSubType {
     ICON_ONLY = "iconOnly",
     INLINE = "inline"
 }
-export type ButtonV2Props = {
+export declare enum ButtonState {
+    DEFAULT = "default",
+    HOBVER = "hover",
+    ACTIVE = "active",
+    DISABLED = "disabled"
+}
+export type ButtonProps = {
     buttonType?: ButtonType;
     size?: ButtonSize;
     subType?: ButtonSubType;
@@ -31,4 +37,5 @@ export type ButtonV2Props = {
     buttonGroupPosition?: 'center' | 'left' | 'right';
     fullWidth?: boolean;
     justifyContent?: CSSObject['justifyContent'];
+    state?: ButtonState;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'className'>;

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ButtonGroupProps } from './types';
-declare const ButtonGroupV2: React.FC<ButtonGroupProps>;
-export default ButtonGroupV2;
+declare const ButtonGroup: React.FC<ButtonGroupProps>;
+export default ButtonGroup;

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

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
-import { ButtonV2Props } from '../Button';
+import { ButtonProps } from '../Button';
 export type ButtonGroupProps = {
     stacked?: boolean;
-    children: ReactElement<ButtonV2Props> | ReactElement<ButtonV2Props>[];
+    children: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];
 };