@juspay/blend-design-system 0.0.8 → 0.0.9-beta

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

@@ -53,9 +53,7 @@ export type ButtonTokensType = {
         };
     };
 };
-declare const buttonTokens: ButtonTokensType;
 export type ResponsiveButtonTokens = {
     [key in keyof BreakpointType]: ButtonTokensType;
 };
 export declare const getButtonTokens: (foundationToken: FoundationTokenType) => ResponsiveButtonTokens;
-export default buttonTokens;

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

@@ -1,3 +1,3 @@
 import { DropdownInputProps } from './types';
-declare const DropdownInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, slot, size, placeholder, dropDownValue, onDropDownChange, dropDownItems, dropdownName, onDropdownOpen, onDropdownClose, onBlur, onFocus, ...rest }: DropdownInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownInput: ({ label, sublabel, disabled, helpIconHintText, name, required, error, errorMessage, hintText, value, onChange, slot, size, placeholder, dropDownValue, onDropDownChange, dropDownItems, dropdownName, onDropdownOpen, onDropdownClose, onBlur, onFocus, maxDropdownHeight, ...rest }: DropdownInputProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownInput;

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

@@ -30,4 +30,5 @@ export type DropdownInputProps = {
     onDropdownClose?: () => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    maxDropdownHeight?: number;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus'>;

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

@@ -18,5 +18,6 @@ export type ModalProps = {
     customFooter?: ReactNode;
     headerRightSlot?: ReactNode;
     showDivider?: boolean;
+    minWidth?: string;
 };
 export {};

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

@@ -1,3 +1,3 @@
 import { MultiSelectProps } from './types';
-declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, useDrawerOnMobile, minWidth, maxWidth, maxHeight, alignment, side, sideOffset, alignOffset, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, useDrawerOnMobile, minWidth, maxWidth, maxHeight, alignment, side, sideOffset, alignOffset, inline, onBlur, onFocus, error, errorMessage, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

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

@@ -17,6 +17,8 @@ export type MultiSelectTriggerProps = {
     open: boolean;
     onClick?: () => void;
     multiSelectTokens: MultiSelectTokensType;
+    inline?: boolean;
+    error?: boolean;
 };
-declare const MultiSelectTrigger: ({ selectedValues, slot, variant, size, isSmallScreen, onChange, name, label, placeholder, required, selectionTagType, valueLabelMap, open, onClick, multiSelectTokens, }: MultiSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectTrigger: ({ selectedValues, slot, variant, size, isSmallScreen, onChange, name, label, placeholder, required, selectionTagType, valueLabelMap, open, onClick, multiSelectTokens, inline, error, }: MultiSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectTrigger;

package/dist/components/MultiSelect/multiSelect.tokens.d.ts

@@ -2,7 +2,7 @@ import { CSSObject } from 'styled-components';
 import { MultiSelectMenuSize, MultiSelectSelectionTagType, MultiSelectVariant } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
-type TriggerStates = 'open' | 'closed' | 'hover' | 'focus';
+type TriggerStates = 'open' | 'closed' | 'hover' | 'focus' | 'error';
 export type SingleSelectItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled' | 'selected';
 export type MultiSelectTokensType = {
     trigger: {
@@ -80,6 +80,5 @@ export type MultiSelectTokensType = {
 export type ResponsiveMultiSelectTokens = {
     [key in keyof BreakpointType]: MultiSelectTokensType;
 };
-export declare const multiSelectTokens: MultiSelectTokensType;
 export declare const getMultiSelectTokens: (foundationToken: FoundationTokenType) => ResponsiveMultiSelectTokens;
 export {};

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

@@ -69,6 +69,11 @@ export type MultiSelectProps = {
     side?: MultiSelectMenuSide;
     sideOffset?: number;
     alignOffset?: number;
+    inline?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    error?: boolean;
+    errorMessage?: string;
 };
 export type MultiSelectMenuProps = {
     items: MultiSelectMenuGroupType[];

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

@@ -1,3 +1,3 @@
 import { SingleSelectProps } from './types';
-declare const SingleSelect: ({ label, subLabel, hintText, required, helpIconText, placeholder, size, items, name, variant, disabled, selected, onSelect, enableSearch, slot, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minWidth, maxWidth, maxHeight, }: 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, slot, useDrawerOnMobile, alignment, side, sideOffset, alignOffset, minWidth, maxWidth, maxHeight, onBlur, onFocus, inline, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelect;

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

@@ -16,6 +16,9 @@ export type SingleSelectTriggerProps = {
     isSmallScreenWithLargeSize: boolean;
     isItemSelected: boolean;
     singleSelectTokens: SingleSelectTokensType;
+    inline?: boolean;
+    error?: boolean;
+    errorMessage?: string;
 };
-declare const SingleSelectTrigger: ({ size, selected, label, name, placeholder, required, valueLabelMap, open, onClick, slot, variant, isSmallScreenWithLargeSize, isItemSelected, singleSelectTokens, }: SingleSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const SingleSelectTrigger: ({ size, selected, label, name, placeholder, required, valueLabelMap, open, onClick, slot, variant, isSmallScreenWithLargeSize, isItemSelected, singleSelectTokens, inline, error, }: SingleSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectTrigger;

package/dist/components/SingleSelect/singleSelect.tokens.d.ts

@@ -2,7 +2,7 @@ import { CSSObject } from 'styled-components';
 import { SelectMenuSize, SelectMenuVariant } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
 import { BreakpointType } from '../../breakpoints/breakPoints';
-type TriggerStates = 'open' | 'closed' | 'hover' | 'focus';
+type TriggerStates = 'open' | 'closed' | 'hover' | 'focus' | 'error';
 export type SingleSelectItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled' | 'selected';
 export type SingleSelectTokensType = {
     trigger: {
@@ -71,6 +71,5 @@ export type SingleSelectTokensType = {
 export type ResponsiveSingleSelectTokens = {
     [key in keyof BreakpointType]: SingleSelectTokensType;
 };
-export declare const singleSelectTokens: SingleSelectTokensType;
 export declare const getSingleSelectTokens: (foundationToken: FoundationTokenType) => ResponsiveSingleSelectTokens;
 export {};

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

@@ -76,4 +76,9 @@ export type SingleSelectProps = {
     minWidth?: number;
     maxWidth?: number;
     maxHeight?: number;
+    inline?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    error?: boolean;
+    errorMessage?: string;
 };

package/dist/components/Snackbar/Snackbar.d.ts

@@ -1,4 +1,6 @@
+import { default as React } from 'react';
 import { Toaster as Snackbar } from 'sonner';
-import { AddToastOptions } from './types';
+import { AddToastOptions, CustomToastProps } from './types';
+export declare const StyledToast: React.FC<CustomToastProps>;
 export declare const addSnackbar: ({ header, description, variant, onClose, actionButton, }: AddToastOptions) => string | number;
 export default Snackbar;

package/dist/components/Snackbar/snackbar.tokens.d.ts

@@ -1,52 +1,52 @@
 import { CSSObject } from 'styled-components';
-import { VariantType } from '../Text/Text';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { SnackbarVariant } from './types';
 export type SnackbarTokens = Readonly<{
-    icon: {
-        color: {
-            info: CSSObject['color'];
-            success: CSSObject['color'];
-            warning: CSSObject['color'];
-            error: CSSObject['color'];
-        };
-    };
+    backgroundColor: CSSObject['backgroundColor'];
+    borderRadius: CSSObject['borderRadius'];
+    padding: CSSObject['padding'];
+    minWidth: CSSObject['minWidth'];
+    maxWidth: CSSObject['maxWidth'];
+    boxShadow: CSSObject['boxShadow'];
+    gap: CSSObject['gap'];
     container: {
-        backgroundColor: CSSObject['color'];
-        borderRadius: CSSObject['borderRadius'];
-        padding: CSSObject['padding'];
-        minWidth: CSSObject['minWidth'];
-        maxWidth: CSSObject['maxWidth'];
-        boxShadow: CSSObject['boxShadow'];
-    };
-    header: {
-        layout: {
-            gap: CSSObject['gap'];
-            marginBottom: CSSObject['marginBottom'];
-            iconGap: CSSObject['gap'];
-        };
-        text: {
-            color: CSSObject['color'];
-            variant: VariantType;
+        gap: CSSObject['gap'];
+        infoIcon: {
+            [key in SnackbarVariant]: {
+                color: CSSObject['color'];
+                size: CSSObject['size'];
+            };
         };
-    };
-    description: {
-        layout: {
-            paddingLeft: CSSObject['paddingLeft'];
+        content: {
             gap: CSSObject['gap'];
-        };
-        text: {
-            color: CSSObject['color'];
-            variant: VariantType;
+            textContainer: {
+                gap: CSSObject['gap'];
+                header: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+                description: {
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                };
+            };
+            actionButton: {
+                padding: CSSObject['padding'];
+                color: CSSObject['color'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+            };
         };
     };
-    actionButton: {
-        layout: {
-            paddingX: CSSObject['padding'];
-        };
-        text: {
-            color: CSSObject['color'];
-            variant: VariantType;
-        };
+    crossIcon: {
+        size: CSSObject['fontSize'];
+        color: CSSObject['color'];
     };
 }>;
-declare const snackbarTokens: SnackbarTokens;
-export default snackbarTokens;
+export type ResponsiveSnackbarTokens = {
+    [key in keyof BreakpointType]: SnackbarTokens;
+};
+export declare const getSnackbarTokens: (foundationToken: FoundationTokenType) => ResponsiveSnackbarTokens;

package/dist/components/StatCard/StatCard.d.ts

@@ -1,6 +1,6 @@
 import { StatCardProps } from './types';
 declare const StatCard: {
-    ({ title, value, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, value, change, subtitle, variant, chartData, progressValue, titleIcon, actionIcon, helpIconText, dropdownProps, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default StatCard;

package/dist/components/StatCard/statcard.tokens.d.ts

@@ -1,9 +1,11 @@
 import { CSSObject } from 'styled-components';
-import { StatCardVariant } from './types';
+import { ChangeType, StatCardVariant } from './types';
 import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
 export type StatCardState = 'default' | 'hover' | 'loading';
 export type StatCardTokenType = {
     height: CSSObject['height'];
+    maxWidth: CSSObject['maxWidth'];
     border: {
         [key in StatCardState]?: CSSObject['border'];
     };
@@ -19,7 +21,7 @@ export type StatCardTokenType = {
         titleIcon: {
             width: CSSObject['width'];
             height: CSSObject['height'];
-            marginBottom: CSSObject['marginBottom'];
+            margin: CSSObject['margin'];
         };
         title: {
             [key in StatCardVariant]: {
@@ -47,19 +49,16 @@ export type StatCardTokenType = {
             };
         };
         change: {
-            marginLeft: CSSObject['marginLeft'];
+            margin: CSSObject['margin'];
             arrow: {
                 width: CSSObject['width'];
                 height: CSSObject['height'];
-                marginRight: CSSObject['marginRight'];
+                margin: CSSObject['margin'];
             };
             text: {
-                fontSize: CSSObject['fontSize'];
-                fontWeight: CSSObject['fontWeight'];
-                increase: {
-                    color: CSSObject['color'];
-                };
-                decrease: {
+                [key in ChangeType]: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
                     color: CSSObject['color'];
                 };
             };
@@ -92,12 +91,15 @@ export type StatCardTokenType = {
         line: {
             strokeWidth: CSSObject['strokeWidth'];
             activeDot: {
-                radius: number;
+                borderRadius: CSSObject['borderRadius'];
                 fill: CSSObject['fill'];
             };
         };
         bar: {
-            radius: number[];
+            borderTopRightRadius: CSSObject['borderTopRightRadius'];
+            borderTopLeftRadius: CSSObject['borderTopLeftRadius'];
+            borderBottomRightRadius: CSSObject['borderBottomRightRadius'];
+            borderBottomLeftRadius: CSSObject['borderBottomLeftRadius'];
             fill: CSSObject['fill'];
             activeBar: {
                 fill: CSSObject['fill'];
@@ -142,4 +144,7 @@ export type StatCardTokenType = {
         };
     };
 };
-export declare const getStatCardToken: (foundationToken: FoundationTokenType) => StatCardTokenType;
+export type ResponsiveStatCardTokens = {
+    [key in keyof BreakpointType]: StatCardTokenType;
+};
+export declare const getStatCardToken: (foundationToken: FoundationTokenType) => ResponsiveStatCardTokens;

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { SingleSelectProps } from '../SingleSelect';
 export declare enum StatCardVariant {
     LINE = "line",
     PROGRESS_BAR = "progress",
@@ -29,4 +30,5 @@ export type StatCardProps = {
     titleIcon?: ReactNode;
     actionIcon?: ReactNode;
     helpIconText?: string;
+    dropdownProps?: SingleSelectProps;
 };

package/dist/context/ThemeContext.d.ts

@@ -23,12 +23,13 @@ import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSele
 import { TableTokenType } from '../components/DataTable/dataTable.tokens';
 import { CalendarTokenType } from '../components/DateRangePicker/dateRangePicker.tokens';
 import { ResponsiveAccordionTokens } from '../components/Accordion/accordion.tokens';
-import { StatCardTokenType } from '../components/StatCard/statcard.tokens';
+import { ResponsiveStatCardTokens } from '../components/StatCard/statcard.tokens';
 import { ProgressBarTokenType } from '../components/ProgressBar/progressbar.tokens';
 import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
 import { BreakpointType } from '../breakpoints/breakPoints';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
+import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: SearchInputTokensType;
@@ -55,10 +56,11 @@ export type ComponentTokenType = {
     TABLE?: TableTokenType;
     CALENDAR?: CalendarTokenType;
     ACCORDION?: ResponsiveAccordionTokens;
-    STAT_CARD?: StatCardTokenType;
+    STAT_CARD?: ResponsiveStatCardTokens;
     PROGRESS_BAR?: ProgressBarTokenType;
     DRAWER?: DrawerTokensType;
     CHARTS?: ResponsiveChartTokens;
+    SNACKBAR?: ResponsiveSnackbarTokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/useComponentToken.d.ts

@@ -23,9 +23,10 @@ import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSele
 import { TableTokenType } from '../components/DataTable/dataTable.tokens';
 import { CalendarTokenType } from '../components/DateRangePicker/dateRangePicker.tokens';
 import { ResponsiveAccordionTokens } from '../components/Accordion/accordion.tokens';
-import { StatCardTokenType } from '../components/StatCard/statcard.tokens';
+import { ResponsiveStatCardTokens } from '../components/StatCard/statcard.tokens';
 import { ProgressBarTokenType } from '../components/ProgressBar/progressbar.tokens';
 import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | OTPInputTokensType | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | TooltipTokensType | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | TableTokenType | CalendarTokenType | ResponsiveAccordionTokens | StatCardTokenType | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens;
+import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens';
+export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | OTPInputTokensType | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | TooltipTokensType | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | TableTokenType | CalendarTokenType | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens | ResponsiveSnackbarTokens;