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

package/dist/components/Inputs/DropdownInput/dropdownInput.tokens.d.ts

@@ -3,26 +3,67 @@ import { FoundationTokenType } from '../../../tokens/theme.token';
 import { DropdownInputSize, DropdownInputState } from './types';
 import { BreakpointType } from '../../../breakpoints/breakPoints';
 export type DropdownInputTokensType = {
-    input: {
-        gap: CSSObject['gap'];
-        borderRadius?: CSSObject['borderRadius'];
-        boxShadow: {
-            [key in DropdownInputState]: CSSObject['boxShadow'];
+    gap: CSSObject['gap'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in DropdownInputState]: CSSObject['color'];
         };
-        paddingX: {
-            [key in DropdownInputSize]: CSSObject['padding'];
+    };
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in DropdownInputState]: CSSObject['color'];
         };
-        paddingY: {
-            [key in DropdownInputSize]: CSSObject['padding'];
+    };
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in DropdownInputState]: CSSObject['color'];
         };
-        border: {
-            [key in DropdownInputState]: CSSObject['border'];
+    };
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    required: {
+        color: CSSObject['color'];
+    };
+    helpIcon: {
+        width: CSSObject['width'];
+        color: {
+            [key in DropdownInputState]: CSSObject['color'];
+        };
+    };
+    inputContainer: {
+        gap: CSSObject['gap'];
+        fontSize: {
+            [key in DropdownInputSize]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in DropdownInputSize]: CSSObject['fontWeight'];
         };
         color: {
             [key in DropdownInputState]: CSSObject['color'];
         };
-        outline: {
-            [key in DropdownInputState]: CSSObject['outline'];
+        borderRadius?: {
+            [key in DropdownInputSize]: CSSObject['borderRadius'];
+        };
+        boxShadow: CSSObject['boxShadow'];
+        padding: {
+            x: {
+                [key in DropdownInputSize]: CSSObject['padding'];
+            };
+            y: {
+                [key in DropdownInputSize]: CSSObject['padding'];
+            };
+        };
+        border: {
+            [key in DropdownInputState]: CSSObject['border'];
         };
         backgroundColor: {
             [key in DropdownInputState]: CSSObject['backgroundColor'];
@@ -32,6 +73,4 @@ export type DropdownInputTokensType = {
 export type ResponsiveDropdownInputTokens = {
     [key in keyof BreakpointType]: DropdownInputTokensType;
 };
-declare const dropdownInputTokens: Readonly<DropdownInputTokensType>;
-export declare const getDropdownInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveDropdownInputTokens;
-export default dropdownInputTokens;
+export declare const getDropdownInputTokens: (foundationTokens: FoundationTokenType) => ResponsiveDropdownInputTokens;

package/dist/components/Inputs/DropdownInput/types.d.ts

@@ -36,6 +36,8 @@ export type DropdownInputProps = {
     onDropdownClose?: () => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
-    maxDropdownHeight?: number;
     dropdownPosition?: DropdownPosition;
+    maxMenuHeight?: number;
+    minMenuWidth?: number;
+    maxMenuWidth?: number;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus' | 'slot'>;

package/dist/components/Inputs/MultiValueInput/multiValueInput.tokens.d.ts

@@ -1,18 +1,63 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
 import { MultiValueInputSize, MultiValueInputState } from './types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 export type MultiValueInputTokensType = {
-    input: {
+    gap: CSSObject['gap'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in MultiValueInputState]: CSSObject['color'];
+        };
+    };
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in MultiValueInputState]: CSSObject['color'];
+        };
+    };
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in MultiValueInputState]: CSSObject['color'];
+        };
+    };
+    helpIcon: {
+        width: CSSObject['width'];
+        color: {
+            [key in MultiValueInputState]: CSSObject['color'];
+        };
+    };
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    required: {
+        color: CSSObject['color'];
+    };
+    inputContainer: {
+        fontSize: {
+            [key in MultiValueInputSize]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in MultiValueInputSize]: CSSObject['fontWeight'];
+        };
         gap: CSSObject['gap'];
         borderRadius?: CSSObject['borderRadius'];
         boxShadow: {
             [key in MultiValueInputState]: CSSObject['boxShadow'];
         };
-        paddingX: {
-            [key in MultiValueInputSize]: CSSObject['padding'];
-        };
-        paddingY: {
-            [key in MultiValueInputSize]: CSSObject['padding'];
+        padding: {
+            x: {
+                [key in MultiValueInputSize]: CSSObject['padding'];
+            };
+            y: {
+                [key in MultiValueInputSize]: CSSObject['padding'];
+            };
         };
         border: {
             [key in MultiValueInputState]: CSSObject['border'];
@@ -20,14 +65,12 @@ export type MultiValueInputTokensType = {
         color: {
             [key in MultiValueInputState]: CSSObject['color'];
         };
-        outline: {
-            [key in MultiValueInputState]: CSSObject['outline'];
-        };
         backgroundColor: {
             [key in MultiValueInputState]: CSSObject['backgroundColor'];
         };
     };
 };
-declare const multiValueInputTokens: Readonly<MultiValueInputTokensType>;
-export declare const getMultiValueInputTokens: (foundationTheme: FoundationTokenType) => MultiValueInputTokensType;
-export default multiValueInputTokens;
+export type ResponsiveMultiValueInputTokens = {
+    [key in keyof BreakpointType]: MultiValueInputTokensType;
+};
+export declare const getMultiValueInputTokens: (foundationTokens: FoundationTokenType) => ResponsiveMultiValueInputTokens;

package/dist/components/Inputs/NumberInput/numberInput.tokens.d.ts

@@ -2,11 +2,10 @@ import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
 import { BreakpointType } from '../../../breakpoints/breakPoints';
 declare enum TextInputSize {
-    SM = "sm",
     MD = "md",
     LG = "lg"
 }
-declare enum TextInputState {
+declare enum NumberInputState {
     DEFAULT = "default",
     HOVER = "hover",
     FOCUS = "focus",
@@ -14,36 +13,90 @@ declare enum TextInputState {
     DISABLED = "disabled"
 }
 export type NumberInputTokensType = {
-    input: {
-        gap: CSSObject['gap'];
-        borderRadius?: CSSObject['borderRadius'];
-        boxShadow: {
-            [key in TextInputState]: CSSObject['boxShadow'];
+    gap: CSSObject['gap'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in NumberInputState]: CSSObject['color'];
         };
-        paddingX: {
-            [key in TextInputSize]: CSSObject['padding'];
+    };
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in NumberInputState]: CSSObject['color'];
         };
-        paddingY: {
-            [key in TextInputSize]: CSSObject['padding'];
+    };
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in NumberInputState]: CSSObject['color'];
         };
-        border: {
-            [key in TextInputState]: CSSObject['border'];
+    };
+    helpIcon: {
+        width: CSSObject['width'];
+        color: {
+            [key in NumberInputState]: CSSObject['color'];
+        };
+    };
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    required: {
+        color: CSSObject['color'];
+    };
+    inputContainer: {
+        fontSize: {
+            [key in TextInputSize]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in TextInputSize]: CSSObject['fontWeight'];
         };
         color: {
-            [key in TextInputState]: CSSObject['color'];
+            [key in NumberInputState]: CSSObject['color'];
         };
-        outline: {
-            [key in TextInputState]: CSSObject['outline'];
+        borderRadius: {
+            [key in TextInputSize]: CSSObject['borderRadius'];
+        };
+        boxShadow: CSSObject['boxShadow'];
+        padding: {
+            x: {
+                [key in TextInputSize]: CSSObject['padding'];
+            };
+            y: {
+                [key in TextInputSize]: CSSObject['padding'];
+            };
+        };
+        border: {
+            [key in NumberInputState]: CSSObject['border'];
         };
         backgroundColor: {
-            default: CSSObject['backgroundColor'];
-            disabled: CSSObject['backgroundColor'];
+            [key in NumberInputState]: CSSObject['backgroundColor'];
+        };
+        stepperButton: {
+            width: {
+                [key in TextInputSize]: CSSObject['width'];
+            };
+            backgroundColor: {
+                [key in NumberInputState]: CSSObject['backgroundColor'];
+            };
+            icon: {
+                color: {
+                    [key in NumberInputState]: CSSObject['color'];
+                };
+                width: {
+                    [key in TextInputSize]: CSSObject['width'];
+                };
+            };
         };
     };
 };
 export type ResponsiveNumberInputTokens = {
     [key in keyof BreakpointType]: NumberInputTokensType;
 };
-declare const numberInputTokens: Readonly<NumberInputTokensType>;
-export declare const getNumberInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveNumberInputTokens;
-export default numberInputTokens;
+export declare const getNumberInputTokens: (foundationToken: FoundationTokenType) => ResponsiveNumberInputTokens;
+export {};

package/dist/components/Inputs/OTPInput/OTPInput.d.ts

@@ -1,3 +1,3 @@
 import { OTPProps } from './types';
-declare const OTPInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, length, autoFocus, onChange, form, ...rest }: OTPProps) => import("react/jsx-runtime").JSX.Element;
+declare const OTPInput: ({ label, placeholder, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, length, autoFocus, onChange, form, ...rest }: OTPProps) => import("react/jsx-runtime").JSX.Element;
 export default OTPInput;

package/dist/components/Inputs/OTPInput/otpInput.tokens.d.ts

@@ -9,24 +9,60 @@ declare enum OTPInputState {
     DISABLED = "disabled"
 }
 export type OTPInputTokensType = {
-    input: {
-        gap: CSSObject['gap'];
-        borderRadius: CSSObject['borderRadius'];
-        boxShadow: {
-            [key in OTPInputState]: CSSObject['boxShadow'];
+    gap: CSSObject['gap'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in OTPInputState]: CSSObject['color'];
         };
-        padding: CSSObject['padding'];
-        outline: {
-            [key in OTPInputState]: CSSObject['outline'];
+    };
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in OTPInputState]: CSSObject['color'];
         };
-        border: {
-            [key in OTPInputState]: CSSObject['border'];
+    };
+    helpIcon: {
+        width: CSSObject['width'];
+        color: {
+            [key in OTPInputState]: CSSObject['color'];
         };
+    };
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
         color: {
             [key in OTPInputState]: CSSObject['color'];
         };
-        backgroundColor: {
-            [key in OTPInputState]: CSSObject['backgroundColor'];
+    };
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    required: {
+        color: CSSObject['color'];
+    };
+    inputContainer: {
+        gap: CSSObject['gap'];
+        input: {
+            height: CSSObject['height'];
+            width: CSSObject['width'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: {
+                [key in OTPInputState]: CSSObject['color'];
+            };
+            borderRadius: CSSObject['borderRadius'];
+            boxShadow: CSSObject['boxShadow'];
+            border: {
+                [key in OTPInputState]: CSSObject['border'];
+            };
+            backgroundColor: {
+                [key in OTPInputState]: CSSObject['backgroundColor'];
+            };
         };
     };
 };

package/dist/components/Inputs/OTPInput/types.d.ts

@@ -10,4 +10,5 @@ export type OTPProps = {
     autoFocus?: boolean;
     onChange?: (value: string) => void;
     form?: string;
+    placeholder?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange'>;

package/dist/components/Inputs/SearchInput/searchInput.tokens.d.ts

@@ -1,45 +1,70 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
 declare enum SearchInputState {
     DEFAULT = "default",
     HOVER = "hover",
     FOCUS = "focus",
-    ERROR = "error"
+    ERROR = "error",
+    DISABLED = "disabled"
 }
 export type SearchInputTokensType = {
-    height: CSSObject['height'];
-    width: CSSObject['width'];
     gap: CSSObject['gap'];
-    padding: {
-        x: CSSObject['padding'];
-        y: CSSObject['padding'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in SearchInputState]: CSSObject['color'];
+        };
+    };
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in SearchInputState]: CSSObject['color'];
+        };
     };
-    borderRadius: CSSObject['borderRadius'];
-    borderTop: {
-        [key in SearchInputState]: CSSObject['borderTop'];
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in SearchInputState]: CSSObject['color'];
+        };
     };
-    borderLeft: {
-        [key in SearchInputState]: CSSObject['borderTop'];
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
     };
-    borderRight: {
-        [key in SearchInputState]: CSSObject['borderRight'];
+    required: {
+        color: CSSObject['color'];
     };
-    borderBottom: {
-        [key in SearchInputState]: CSSObject['borderBottom'];
+    inputContainer: {
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        borderRadius: CSSObject['borderRadius'];
+        borderBottom: {
+            [key in SearchInputState]: CSSObject['borderBottom'];
+        };
+        outline: CSSObject['outline'];
+        boxShadow: CSSObject['boxShadow'];
+        color: {
+            [key in SearchInputState]: CSSObject['color'];
+        };
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
     };
-    border?: {
-        radius: CSSObject['borderRadius'];
+    icon: {
         color: {
-            [key in SearchInputState]: CSSObject['borderColor'];
+            [key in SearchInputState]: CSSObject['color'];
         };
+        width: CSSObject['width'];
     };
-    outline: CSSObject['outline'];
-    boxShadow: CSSObject['boxShadow'];
-    color: CSSObject['color'];
-    fontSize: CSSObject['fontSize'];
-    fontWeight: CSSObject['fontWeight'];
-    placeholderColor: CSSObject['color'];
 };
-declare const searchInputTokens: Readonly<SearchInputTokensType>;
-export declare const getSearchInputTokens: (foundationTokens: FoundationTokenType) => SearchInputTokensType;
-export default searchInputTokens;
+export type ResponsiveSearchInputTokens = {
+    [key in keyof BreakpointType]: SearchInputTokensType;
+};
+export declare const getSearchInputTokens: (foundationTokens: FoundationTokenType) => ResponsiveSearchInputTokens;
+export default getSearchInputTokens;

package/dist/components/Inputs/TextArea/textarea.token.d.ts

@@ -1,31 +1,72 @@
 import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../../tokens/theme.token';
 import { BreakpointType } from '../../../breakpoints/breakPoints';
-type TextAreaState = 'default' | 'hover' | 'focus' | 'error' | 'disabled';
+declare enum TextAreaState {
+    DEFAULT = "default",
+    HOVER = "hover",
+    FOCUS = "focus",
+    ERROR = "error",
+    DISABLED = "disabled"
+}
 export type TextAreaTokensType = {
-    fontFamily: CSSObject['fontFamily'];
-    paddingX: CSSObject['padding'];
-    paddingY: CSSObject['padding'];
-    borderRadius: CSSObject['borderRadius'];
-    boxShadow: {
-        [key in TextAreaState]: CSSObject['boxShadow'];
+    gap: CSSObject['gap'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in TextAreaState]: CSSObject['color'];
+        };
     };
-    outline: {
-        [key in TextAreaState]: CSSObject['outline'];
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in TextAreaState]: CSSObject['color'];
+        };
     };
-    border: {
-        [key in TextAreaState]: CSSObject['border'];
+    helpIcon: {
+        width: CSSObject['width'];
+        color: {
+            [key in TextAreaState]: CSSObject['color'];
+        };
     };
-    color: {
-        [key in TextAreaState]: CSSObject['color'];
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in TextAreaState]: CSSObject['color'];
+        };
     };
-    backgroundColor: {
-        [key in TextAreaState]: CSSObject['backgroundColor'];
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    required: {
+        color: CSSObject['color'];
+    };
+    inputContainer: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        padding: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+        borderRadius: CSSObject['borderRadius'];
+        boxShadow: CSSObject['boxShadow'];
+        border: {
+            [key in TextAreaState]: CSSObject['border'];
+        };
+        color: {
+            [key in TextAreaState]: CSSObject['color'];
+        };
+        backgroundColor: {
+            [key in TextAreaState]: CSSObject['backgroundColor'];
+        };
     };
 };
 export type ResponsiveTextAreaTokens = {
     [key in keyof BreakpointType]: TextAreaTokensType;
 };
-export declare const textAreaTokens: TextAreaTokensType;
 export declare const getTextAreaTokens: (foundationTokens: FoundationTokenType) => ResponsiveTextAreaTokens;
-export default textAreaTokens;
+export default getTextAreaTokens;

package/dist/components/Inputs/TextInput/textInput.tokens.d.ts

@@ -3,26 +3,66 @@ import { FoundationTokenType } from '../../../tokens/theme.token';
 import { TextInputSize, TextInputState } from './types';
 import { BreakpointType } from '../../../breakpoints/breakPoints';
 export type TextInputTokensType = {
-    input: {
-        gap: CSSObject['gap'];
-        borderRadius?: CSSObject['borderRadius'];
-        boxShadow: {
-            [key in TextInputState]: CSSObject['boxShadow'];
+    gap: CSSObject['gap'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in TextInputState]: CSSObject['color'];
         };
-        paddingX: {
-            [key in TextInputSize]: CSSObject['padding'];
+    };
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in TextInputState]: CSSObject['color'];
         };
-        paddingY: {
-            [key in TextInputSize]: CSSObject['padding'];
+    };
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: {
+            [key in TextInputState]: CSSObject['color'];
         };
-        border: {
-            [key in TextInputState]: CSSObject['border'];
+    };
+    helpIcon: {
+        width: CSSObject['width'];
+        color: {
+            [key in TextInputState]: CSSObject['color'];
+        };
+    };
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    required: {
+        color: CSSObject['color'];
+    };
+    inputContainer: {
+        fontSize: {
+            [key in TextInputSize]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in TextInputSize]: CSSObject['fontWeight'];
         };
         color: {
             [key in TextInputState]: CSSObject['color'];
         };
-        outline: {
-            [key in TextInputState]: CSSObject['outline'];
+        borderRadius: {
+            [key in TextInputSize]: CSSObject['borderRadius'];
+        };
+        boxShadow: CSSObject['boxShadow'];
+        padding: {
+            x: {
+                [key in TextInputSize]: CSSObject['padding'];
+            };
+            y: {
+                [key in TextInputSize]: CSSObject['padding'];
+            };
+        };
+        border: {
+            [key in TextInputState]: CSSObject['border'];
         };
         backgroundColor: {
             [key in TextInputState]: CSSObject['backgroundColor'];
@@ -32,4 +72,4 @@ export type TextInputTokensType = {
 export type ResponsiveTextInputTokens = {
     [key in keyof BreakpointType]: TextInputTokensType;
 };
-export declare const getTextInputTokens: (foundationTheme: FoundationTokenType) => ResponsiveTextInputTokens;
+export declare const getTextInputTokens: (foundationTokens: FoundationTokenType) => ResponsiveTextInputTokens;