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

package/dist/components/Inputs/UnitInput/unitInput.tokens.d.ts

@@ -10,35 +10,91 @@ declare enum UnitInputState {
     DISABLED = "disabled"
 }
 export type UnitInputTokensType = {
-    input: {
-        gap: CSSObject['gap'];
-        borderRadius?: CSSObject['borderRadius'];
-        boxShadow: {
-            [key in UnitInputState]: CSSObject['boxShadow'];
+    gap: CSSObject['gap'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in UnitInputState]: CSSObject['color'];
         };
-        paddingX: {
-            [key in UnitInputSize]: CSSObject['padding'];
+    };
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in UnitInputState]: CSSObject['color'];
         };
-        paddingY: {
-            [key in UnitInputSize]: CSSObject['padding'];
+    };
+    helpIcon: {
+        width: CSSObject['width'];
+        color: {
+            [key in UnitInputState]: CSSObject['color'];
         };
-        border: {
-            [key in UnitInputState]: CSSObject['border'];
+    };
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in UnitInputState]: CSSObject['color'];
+        };
+    };
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    required: {
+        color: CSSObject['color'];
+    };
+    inputContainer: {
+        fontSize: {
+            [key in UnitInputSize]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in UnitInputSize]: CSSObject['fontWeight'];
         };
         color: {
             [key in UnitInputState]: CSSObject['color'];
         };
-        outline: {
-            [key in UnitInputState]: CSSObject['outline'];
+        borderRadius: {
+            [key in UnitInputSize]: CSSObject['borderRadius'];
+        };
+        boxShadow: CSSObject['boxShadow'];
+        padding: {
+            x: {
+                [key in UnitInputSize]: CSSObject['padding'];
+            };
+            y: {
+                [key in UnitInputSize]: CSSObject['padding'];
+            };
+        };
+        border: {
+            [key in UnitInputState]: CSSObject['border'];
         };
         backgroundColor: {
             [key in UnitInputState]: CSSObject['backgroundColor'];
         };
+        unit: {
+            fontSize: {
+                [key in UnitInputSize]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in UnitInputSize]: CSSObject['fontWeight'];
+            };
+            color: {
+                [key in UnitInputState]: CSSObject['color'];
+            };
+            padding: {
+                [key in UnitInputSize]: CSSObject['padding'];
+            };
+            backgroundColor: {
+                [key in UnitInputState]: CSSObject['backgroundColor'];
+            };
+        };
     };
 };
-declare const unitInputTokens: UnitInputTokensType;
 export type ResponsiveUnitInputTokens = {
     [key in keyof BreakpointType]: UnitInputTokensType;
 };
-export declare const getUnitInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveUnitInputTokens;
-export default unitInputTokens;
+export declare const getUnitInputTokens: (foundationTokens: FoundationTokenType) => ResponsiveUnitInputTokens;
+export {};

package/dist/components/Inputs/utils/InputFooter/InputFooter.d.ts

@@ -1,8 +1,24 @@
+type InputFooterTokens = {
+    hintText?: {
+        fontWeight?: number | string;
+        fontSize?: number | string;
+        color?: {
+            default?: string;
+            disabled?: string;
+        };
+    };
+    errorMessage?: {
+        fontWeight?: number | string;
+        fontSize?: number | string;
+        color?: string;
+    };
+};
 type InputFooterProps = {
     error?: boolean;
     errorMessage?: string;
     hintText?: string;
     disabled?: boolean;
+    tokens?: InputFooterTokens;
 };
-declare const InputFooter: ({ error, errorMessage, hintText, disabled, }: InputFooterProps) => "" | import("react/jsx-runtime").JSX.Element | undefined;
+declare const InputFooter: ({ error, errorMessage, hintText, disabled, tokens, }: InputFooterProps) => "" | import("react/jsx-runtime").JSX.Element | undefined;
 export default InputFooter;

package/dist/components/Inputs/utils/InputLabels/InputLabels.d.ts

@@ -1,10 +1,39 @@
-type InputLabelsProps = {
+type InputLabelTokens = {
+    label?: {
+        fontWeight?: number | string;
+        fontSize?: number | string;
+        color?: {
+            default?: string;
+            disabled?: string;
+        };
+    };
+    subLabel?: {
+        fontWeight?: number | string;
+        fontSize?: number | string;
+        color?: {
+            default?: string;
+            disabled?: string;
+        };
+    };
+    required?: {
+        color?: string;
+    };
+    helpIcon?: {
+        width?: number | string;
+        color?: {
+            default?: string;
+            disabled?: string;
+        };
+    };
+};
+type InputLabelsProps<TTokens extends InputLabelTokens = InputLabelTokens> = {
     label?: string;
     sublabel?: string;
     disabled?: boolean;
     helpIconHintText?: string;
     name?: string;
     required?: boolean;
+    tokens?: Partial<TTokens>;
 };
 /**
  * @description InputLabels is a component that displays a label and sublabel for an input field.
@@ -14,5 +43,5 @@ type InputLabelsProps = {
  * @param {string} helpIconHintText - The hint text for the help icon.
  * @param {boolean} required - Whether the input field is required.
  */
-declare const InputLabels: ({ label, sublabel, disabled, helpIconHintText, name, required, }: InputLabelsProps) => "" | import("react/jsx-runtime").JSX.Element | undefined;
+declare const InputLabels: <TTokens extends InputLabelTokens>({ label, sublabel, disabled, helpIconHintText, name, required, tokens, }: InputLabelsProps<TTokens>) => "" | import("react/jsx-runtime").JSX.Element | undefined;
 export default InputLabels;

package/dist/components/Menu/Menu.d.ts

@@ -1,8 +1,8 @@
 import { CSSObject } from 'styled-components';
-import { MenuV2Props } from './types';
+import { MenuProps } from './types';
 export declare const contentBaseStyle: CSSObject;
 declare const Menu: {
-    ({ trigger, items, asModal, alignment, side, sideOffset, alignOffset, collisonBoundaryRef, maxHeight, enableSearch, searchPlaceholder, minWidth, maxWidth, open, onOpenChange, enableVirtualScrolling, virtualItemHeight, virtualOverscan, virtualScrollThreshold, }: MenuV2Props): import("react/jsx-runtime").JSX.Element;
+    ({ trigger, items, asModal, alignment, side, sideOffset, alignOffset, collisonBoundaryRef, maxHeight, enableSearch, searchPlaceholder, minWidth, maxWidth, open, onOpenChange, enableVirtualScrolling, virtualItemHeight, virtualOverscan, virtualScrollThreshold, }: MenuProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Menu;

package/dist/components/Menu/MenuItem.d.ts

@@ -1,7 +1,7 @@
-import { MenuItemV2Type } from './types';
+import { MenuItemType } from './types';
 declare const MenuItem: {
     ({ item, idx, maxHeight, }: {
-        item: MenuItemV2Type;
+        item: MenuItemType;
         idx: number;
         maxHeight?: number;
     }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/SubMenu.d.ts

@@ -1,6 +1,6 @@
-import { MenuItemV2Type } from './types';
+import { MenuItemType } from './types';
 export declare const SubMenu: ({ item, idx, maxHeight, }: {
-    item: MenuItemV2Type;
+    item: MenuItemType;
     idx: number;
     maxHeight?: number;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/menu.tokens.d.ts

@@ -1,22 +1,29 @@
 import { CSSObject } from 'styled-components';
-import { MenuItemV2ActionType, MenuItemV2Variant } from './types';
+import { MenuItemActionType, MenuItemVariant } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 export type MenuItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled';
 export type MenuTokensType = {
-    shadow: CSSObject['boxShadow'];
+    boxShadow: CSSObject['boxShadow'];
     backgroundColor: CSSObject['backgroundColor'];
-    paddingTop: CSSObject['paddingTop'];
-    paddingBottom: CSSObject['paddingBottom'];
+    padding: {
+        x: CSSObject['padding'];
+        y: CSSObject['padding'];
+    };
     border: CSSObject['border'];
-    outline: CSSObject['outline'];
     borderRadius: CSSObject['borderRadius'];
     item: {
-        padding: CSSObject['padding'];
-        margin: CSSObject['margin'];
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        margin: {
+            x: CSSObject['margin'];
+            y: CSSObject['margin'];
+        };
         borderRadius: CSSObject['borderRadius'];
         backgroundColor: {
-            [MenuItemV2Variant.DEFAULT]: {
+            [MenuItemVariant.DEFAULT]: {
                 enabled: {
                     [key in MenuItemStates]: CSSObject['backgroundColor'];
                 };
@@ -24,8 +31,8 @@ export type MenuTokensType = {
                     [key in MenuItemStates]: CSSObject['backgroundColor'];
                 };
             };
-            [MenuItemV2Variant.ACTION]: {
-                [key in MenuItemV2ActionType]: {
+            [MenuItemVariant.ACTION]: {
+                [key in MenuItemActionType]: {
                     enabled: {
                         [key in MenuItemStates]: CSSObject['backgroundColor'];
                     };
@@ -35,13 +42,25 @@ export type MenuTokensType = {
                 };
             };
         };
-        cursor: CSSObject['cursor'];
         gap: CSSObject['gap'];
-        label: {
+        optionsLabel: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+            padding: {
+                x: CSSObject['padding'];
+                y: CSSObject['padding'];
+            };
+            margin: {
+                x: CSSObject['margin'];
+                y: CSSObject['margin'];
+            };
+        };
+        option: {
             fontSize: CSSObject['fontSize'];
             fontWeight: CSSObject['fontWeight'];
             color: {
-                [MenuItemV2Variant.DEFAULT]: {
+                [MenuItemVariant.DEFAULT]: {
                     enabled: {
                         [key in MenuItemStates]: CSSObject['color'];
                     };
@@ -49,8 +68,8 @@ export type MenuTokensType = {
                         [key in MenuItemStates]: CSSObject['color'];
                     };
                 };
-                [MenuItemV2Variant.ACTION]: {
-                    [key in MenuItemV2ActionType]: {
+                [MenuItemVariant.ACTION]: {
+                    [key in MenuItemActionType]: {
                         enabled: {
                             [key in MenuItemStates]: CSSObject['color'];
                         };
@@ -61,11 +80,11 @@ export type MenuTokensType = {
                 };
             };
         };
-        subLabel: {
+        description: {
             fontSize: CSSObject['fontSize'];
             fontWeight: CSSObject['fontWeight'];
             color: {
-                [MenuItemV2Variant.DEFAULT]: {
+                [MenuItemVariant.DEFAULT]: {
                     enabled: {
                         [key in MenuItemStates]: CSSObject['color'];
                     };
@@ -73,8 +92,8 @@ export type MenuTokensType = {
                         [key in MenuItemStates]: CSSObject['color'];
                     };
                 };
-                [MenuItemV2Variant.ACTION]: {
-                    [key in MenuItemV2ActionType]: {
+                [MenuItemVariant.ACTION]: {
+                    [key in MenuItemActionType]: {
                         enabled: {
                             [key in MenuItemStates]: CSSObject['color'];
                         };
@@ -85,16 +104,17 @@ export type MenuTokensType = {
                 };
             };
         };
-    };
-    seperator: {
-        color: CSSObject['color'];
-        height: CSSObject['height'];
-        margin: CSSObject['margin'];
+        seperator: {
+            color: CSSObject['color'];
+            height: CSSObject['height'];
+            margin: {
+                x: CSSObject['margin'];
+                y: CSSObject['margin'];
+            };
+        };
     };
 };
 export type ResponsiveMenuTokensType = {
     [key in keyof BreakpointType]: MenuTokensType;
 };
-declare const menuTokens: MenuTokensType;
 export declare const getMenuTokens: (foundationToken: FoundationTokenType) => ResponsiveMenuTokensType;
-export default menuTokens;

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

@@ -10,9 +10,9 @@ export declare enum MenuSide {
     RIGHT = "right",
     BOTTOM = "bottom"
 }
-export type MenuV2Props = {
+export type MenuProps = {
     trigger: React.ReactNode;
-    items?: MenuV2GroupType[];
+    items?: MenuGroupType[];
     maxHeight?: number;
     minHeight?: number;
     maxWidth?: number;
@@ -20,7 +20,7 @@ export type MenuV2Props = {
     enableSearch?: boolean;
     searchPlaceholder?: string;
     enableVirtualScrolling?: boolean;
-    virtualItemHeight?: number | ((item: MenuItemV2Type, index: number) => number);
+    virtualItemHeight?: number | ((item: MenuItemType, index: number) => number);
     virtualOverscan?: number;
     virtualScrollThreshold?: number;
     open?: boolean;
@@ -32,26 +32,26 @@ export type MenuV2Props = {
     alignOffset?: number;
     collisonBoundaryRef?: Element | null | Array<Element | null>;
 };
-export declare enum MenuItemV2Variant {
+export declare enum MenuItemVariant {
     DEFAULT = "default",
     ACTION = "action"
 }
-export declare enum MenuItemV2ActionType {
+export declare enum MenuItemActionType {
     PRIMARY = "primary",
     DANGER = "danger"
 }
-export type MenuItemV2Type = {
+export type MenuItemType = {
     label: string;
     subLabel?: string;
     slot1?: React.ReactNode;
     slot2?: React.ReactNode;
     slot3?: React.ReactNode;
     slot4?: React.ReactNode;
-    variant?: MenuItemV2Variant;
-    actionType?: MenuItemV2ActionType;
+    variant?: MenuItemVariant;
+    actionType?: MenuItemActionType;
     disabled?: boolean;
     onClick?: () => void;
-    subMenu?: MenuItemV2Type[];
+    subMenu?: MenuItemType[];
     enableSubMenuSearch?: boolean;
     subMenuSearchPlaceholder?: string;
     tooltip?: string | React.ReactNode;
@@ -64,8 +64,8 @@ export type MenuItemV2Type = {
         offset?: number;
     };
 };
-export type MenuV2GroupType = {
+export type MenuGroupType = {
     label?: string;
-    items: MenuItemV2Type[];
+    items: MenuItemType[];
     showSeparator?: boolean;
 };

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

@@ -1,3 +1,3 @@
-import { MenuItemV2Type, MenuV2GroupType } from './types';
-export declare const filterMenuGroups: (groups: MenuV2GroupType[], searchText: string) => MenuV2GroupType[];
-export declare const filterMenuItem: (item: MenuItemV2Type, lower: string) => MenuItemV2Type | null;
+import { MenuGroupType, MenuItemType } from './types';
+export declare const filterMenuGroups: (groups: MenuGroupType[], searchText: string) => MenuGroupType[];
+export declare const filterMenuItem: (item: MenuItemType, lower: string) => MenuItemType | null;

package/dist/components/Modal/modal.tokens.d.ts

@@ -1,48 +1,74 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type ModalState = 'default';
+/**
+ * Modal Tokens following the pattern: [target].CSSProp.[state]
+ *
+ * Structure:
+ * - target: container | header | body | footer (defines what element the token applies to)
+ * - CSSProp: shadow | zIndex | borderRadius | padding | border | backgroundColor | fontSize | fontWeight | color | gap | alignItems
+ * - state: default (modal doesn't have interactive states)
+ *
+ * Pattern examples:
+ * - container.shadow
+ * - container.zIndex
+ * - container.borderRadius
+ * - header.padding
+ * - header.border
+ * - header.backgroundColor
+ * - header.text.title.fontSize
+ * - header.text.title.fontWeight
+ * - header.text.title.color
+ * - header.text.subtitle.fontSize
+ * - header.text.subtitle.color
+ * - body.padding
+ * - body.border
+ * - body.backgroundColor
+ * - footer.padding
+ * - footer.border
+ * - footer.backgroundColor
+ * - footer.alignItems
+ * - footer.gap
+ */
 export type ModalTokensType = {
-    shadow: CSSObject['boxShadow'];
-    zIndex: CSSObject['zIndex'];
+    boxShadow: CSSObject['boxShadow'];
     borderRadius: CSSObject['borderRadius'];
-    headerContainer: {
-        padding: CSSObject['padding'];
-        borderBottom: CSSObject['borderBottom'];
-        borderTop: CSSObject['borderTop'];
-        borderLeft: CSSObject['borderLeft'];
-        borderRight: CSSObject['borderRight'];
-        borderRadius: CSSObject['borderRadius'];
-        backgroundColor: CSSObject['backgroundColor'];
-        header: {
-            color: CSSObject['color'];
-            fontSize: CSSObject['fontSize'];
-            fontWeight: CSSObject['fontWeight'];
+    header: {
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
         };
-        subtitle: {
-            color: CSSObject['color'];
-            fontSize: CSSObject['fontSize'];
+        borderBottom: CSSObject['border'];
+        backgroundColor: CSSObject['backgroundColor'];
+        text: {
+            title: {
+                color: CSSObject['color'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+            };
+            subtitle: {
+                color: CSSObject['color'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+            };
         };
     };
-    bodyContainer: {
+    body: {
         padding: CSSObject['padding'];
-        borderBottom: CSSObject['borderBottom'];
-        borderTop: CSSObject['borderTop'];
-        borderLeft: CSSObject['borderLeft'];
-        borderRight: CSSObject['borderRight'];
-        borderRadius: CSSObject['borderRadius'];
         backgroundColor: CSSObject['backgroundColor'];
     };
-    footerContainer: {
+    footer: {
         padding: CSSObject['padding'];
-        borderBottom: CSSObject['borderBottom'];
-        borderTop: CSSObject['borderTop'];
-        borderLeft: CSSObject['borderLeft'];
-        borderRight: CSSObject['borderRight'];
-        borderRadius: CSSObject['borderRadius'];
+        borderTop: CSSObject['border'];
         backgroundColor: CSSObject['backgroundColor'];
-        alignItems: CSSObject['alignItems'];
         gap: CSSObject['gap'];
     };
+    closeButton: {
+        color: CSSObject['color'];
+    };
+};
+export type ResponsiveModalTokens = {
+    [key in keyof BreakpointType]: ModalTokensType;
 };
-export declare const modalTokens: ModalTokensType;
-export declare const getModalComponentTokens: (foundationToken: FoundationTokenType) => ModalTokensType;
-export default modalTokens;
+export declare const getModalComponentTokens: (foundationToken: FoundationTokenType) => ResponsiveModalTokens;

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { ButtonV2Props } from '../Button';
-type ModalButtonAction = Omit<ButtonV2Props, 'buttonGroupPosition'>;
+import { ButtonProps } from '../Button';
+type ModalButtonAction = Omit<ButtonProps, 'buttonGroupPosition'>;
 export type ModalProps = {
     isOpen: boolean;
     onClose: () => void;

package/dist/components/MultiSelect/MultiSelectMenu.d.ts

@@ -1,3 +1,3 @@
 import { MultiSelectMenuProps } from './types';
-declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectMenu;