@juspay/blend-design-system 0.0.15 → 0.0.16-beta

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

@@ -10,6 +10,11 @@ export type DataPoint = {
     aux?: {
         label: string;
         val: number;
+        type?: AxisType;
+        dateOnly?: boolean;
+        smart?: boolean;
+        timeZone?: string;
+        hour12?: boolean;
     }[];
 };
 export declare enum ChartLegendPosition {

package/dist/components/Checkbox/checkbox.token.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from 'styled-components';
 import { ThemeType } from '../../tokens';
-import { CheckboxCheckedState, CheckboxInteractionState, CheckboxSize } from './types';
+import { CheckboxSize, CheckboxInteractionState } from './types';
 import { BreakpointType } from '../../breakpoints/breakPoints';
 export type CheckboxTokensType = {
     gap: CSSObject['gap'];
@@ -14,7 +14,13 @@ export type CheckboxTokensType = {
             };
         };
         background: {
-            [key in CheckboxCheckedState]?: {
+            checked?: {
+                [key in CheckboxInteractionState]?: CSSObject['backgroundColor'];
+            };
+            unchecked?: {
+                [key in CheckboxInteractionState]?: CSSObject['backgroundColor'];
+            };
+            indeterminate?: {
                 [key in CheckboxInteractionState]?: CSSObject['backgroundColor'];
             };
         };
@@ -22,7 +28,13 @@ export type CheckboxTokensType = {
             radius: CSSObject['borderRadius'];
             width: CSSObject['borderWidth'];
             color: {
-                [key in CheckboxCheckedState]?: {
+                checked?: {
+                    [key in CheckboxInteractionState]?: CSSObject['borderColor'];
+                };
+                unchecked?: {
+                    [key in CheckboxInteractionState]?: CSSObject['borderColor'];
+                };
+                indeterminate?: {
                     [key in CheckboxInteractionState]?: CSSObject['borderColor'];
                 };
             };
@@ -36,7 +48,10 @@ export type CheckboxTokensType = {
     };
     icon: {
         color: {
-            [key in Exclude<CheckboxCheckedState, 'unchecked'>]?: {
+            checked?: {
+                [key in Extract<CheckboxInteractionState, 'default' | 'disabled'>]?: CSSObject['color'];
+            };
+            indeterminate?: {
                 [key in Extract<CheckboxInteractionState, 'default' | 'disabled'>]?: CSSObject['color'];
             };
         };

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

@@ -3,8 +3,17 @@ export declare enum CheckboxSize {
     SMALL = "sm",
     MEDIUM = "md"
 }
-export type CheckboxCheckedState = 'checked' | 'unchecked' | 'indeterminate';
-export type CheckboxInteractionState = 'default' | 'hover' | 'disabled' | 'error';
+export declare enum CheckboxCheckedState {
+    CHECKED = "checked",
+    UNCHECKED = "unchecked",
+    INDETERMINATE = "indeterminate"
+}
+export declare enum CheckboxInteractionState {
+    DEFAULT = "default",
+    HOVER = "hover",
+    DISABLED = "disabled",
+    ERROR = "error"
+}
 export type CheckboxProps = {
     id?: string;
     value?: string;

package/dist/components/KeyValuePair/KeyValuePair.d.ts

@@ -0,0 +1,3 @@
+import { KeyValuePairPropTypes } from './types';
+declare const KeyValuePair: import('react').ForwardRefExoticComponent<KeyValuePairPropTypes & import('react').RefAttributes<HTMLDivElement>>;
+export default KeyValuePair;

package/dist/components/KeyValuePair/KeyValuePair.tokens.d.ts

@@ -0,0 +1,19 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { KeyValuePairSize, KeyValuePairStateType } from './types';
+export type KeyValuePairTokensType = {
+    gap: CSSObject['gap'];
+    keyColor: CSSObject['color'];
+    valueColor: CSSObject['color'];
+    keyFontSize: CSSObject['fontSize'];
+    valueFontSize: {
+        [key in KeyValuePairSize]: {
+            [key in KeyValuePairStateType]: CSSObject['fontSize'];
+        };
+    };
+};
+export type ResponsiveKeyValuePairTokens = {
+    [key in keyof BreakpointType]: KeyValuePairTokensType;
+};
+export declare const getKeyValuePairTokens: (foundationToken: FoundationTokenType) => ResponsiveKeyValuePairTokens;

package/dist/components/KeyValuePair/index.d.ts

@@ -0,0 +1,2 @@
+export { default as KeyValuePair } from './KeyValuePair';
+export * from './types';

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

@@ -0,0 +1,19 @@
+export declare enum KeyValuePairStateType {
+    vertical = 0,
+    horizontal = 1
+}
+export declare enum KeyValuePairSize {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export type KeyValuePairPropTypes = {
+    keyString: string;
+    size?: KeyValuePairSize;
+    value?: string;
+    keySlot?: React.ReactNode;
+    valueLeftSlot?: React.ReactNode;
+    valueRightSlot?: React.ReactNode;
+    keyValuePairState?: KeyValuePairStateType;
+    maxWidth?: string;
+};

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { DirectoryData } from '../Directory/types';
+import { MerchantInfo } from '../Topbar/types';
 export type LeftPanelItem = {
     label: string;
     icon: ReactNode;
@@ -19,4 +20,6 @@ export type SidebarProps = {
     footer?: ReactNode;
     sidebarTopSlot?: ReactNode;
     sidebarCollapseKey?: string;
+    merchantInfo?: MerchantInfo;
+    rightActions?: ReactNode;
 };

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

@@ -2,5 +2,5 @@ import { default as React } from 'react';
 import { Toaster as Snackbar } from 'sonner';
 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 declare const addSnackbar: ({ header, description, variant, onClose, actionButton, duration, }: AddToastOptions) => string | number;
 export default Snackbar;

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

@@ -12,7 +12,9 @@ export type AddToastOptions = {
     actionButton?: {
         label: string;
         onClick: () => void;
+        autoDismiss?: boolean;
     };
+    duration?: number;
 };
 export type CustomToastProps = {
     header: string;
@@ -22,5 +24,7 @@ export type CustomToastProps = {
     actionButton?: {
         label: string;
         onClick: () => void;
+        autoDismiss?: boolean;
     };
+    toastId?: string | number;
 };

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

@@ -12,7 +12,7 @@ export type SwitchProps = {
     required?: boolean;
     error?: boolean;
     size?: SwitchSize;
-    label?: ReactNode;
+    label?: string;
     subtext?: ReactNode;
     slot?: ReactNode;
     name?: string;

package/dist/components/Topbar/Topbar.d.ts

@@ -0,0 +1,3 @@
+import { TopbarProps } from './types';
+declare const Topbar: import('react').ForwardRefExoticComponent<TopbarProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Topbar;

package/dist/components/Topbar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Topbar } from './Topbar';
+export type { TopbarProps, MerchantInfo } from './types';

package/dist/components/Topbar/topbar.tokens.d.ts

@@ -0,0 +1,87 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type TopbarState = 'default' | 'hover' | 'active';
+export type TopbarTokensType = {
+    height: CSSObject['height'];
+    position: CSSObject['position'];
+    top: CSSObject['top'];
+    zIndex: CSSObject['zIndex'];
+    borderBottom: CSSObject['borderBottom'];
+    backgroundColor: CSSObject['backgroundColor'];
+    backdropFilter: CSSObject['backdropFilter'];
+    padding: CSSObject['padding'];
+    gap: CSSObject['gap'];
+    toggleButton: {
+        borderRadius: CSSObject['borderRadius'];
+        padding: CSSObject['padding'];
+        backgroundColor: {
+            [key in TopbarState]: CSSObject['backgroundColor'];
+        };
+        transition: CSSObject['transition'];
+        icon: {
+            size: CSSObject['width'];
+            color: CSSObject['color'];
+        };
+    };
+    actionButton: {
+        borderRadius: CSSObject['borderRadius'];
+        padding: CSSObject['padding'];
+        minWidth: CSSObject['minWidth'];
+        height: CSSObject['height'];
+        backgroundColor: {
+            [key in TopbarState]: CSSObject['backgroundColor'];
+        };
+        transition: CSSObject['transition'];
+        icon: {
+            size: CSSObject['width'];
+            color: CSSObject['color'];
+        };
+    };
+    tenantIconButton: {
+        borderRadius: CSSObject['borderRadius'];
+        minHeight: CSSObject['minHeight'];
+        backgroundColor: {
+            [key in TopbarState]: CSSObject['backgroundColor'];
+        };
+        transition: CSSObject['transition'];
+    };
+    merchantSelectTrigger: {
+        gap: CSSObject['gap'];
+        icon: {
+            size: CSSObject['width'];
+            color: CSSObject['color'];
+        };
+        text: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+    };
+    leftSection: {
+        gap: CSSObject['gap'];
+        maxHeight: CSSObject['maxHeight'];
+        divider: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+    };
+    centerSection: {
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: CSSObject['color'];
+        };
+    };
+    rightSection: {
+        gap: CSSObject['gap'];
+    };
+    sidebarSection: {
+        gap: CSSObject['gap'];
+    };
+};
+export type ResponsiveTopbarTokens = {
+    [key in keyof BreakpointType]: TopbarTokensType;
+};
+export declare const getTopbarTokens: (foundationToken: FoundationTokenType) => ResponsiveTopbarTokens;

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { LeftPanelInfo } from '../Sidebar/types';
+export type MerchantInfo = {
+    items: Array<{
+        label: string;
+        value: string;
+        icon?: ReactNode;
+    }>;
+    selected: string;
+    onSelect: (value: string) => void;
+};
+export type TopbarProps = {
+    children?: ReactNode;
+    isExpanded?: boolean;
+    onToggleExpansion?: () => void;
+    showToggleButton?: boolean;
+    sidebarTopSlot?: ReactNode;
+    topbar?: ReactNode;
+    title?: string;
+    leftAction?: ReactNode;
+    rightActions?: ReactNode;
+    showBackButton?: boolean;
+    onBackClick?: () => void;
+    leftPanel?: LeftPanelInfo;
+    merchantInfo?: MerchantInfo;
+};

package/dist/context/ThemeContext.d.ts

@@ -1,6 +1,5 @@
-import { ThemeType } from '../tokens';
-import { ResponsiveTagTokens } from '../components/Tags/tag.tokens';
 import { SearchInputTokensType } from '../components/Inputs/SearchInput/searchInput.tokens';
+import { ResponsiveTagTokens } from '../components/Tags/tag.tokens';
 import { ResponsiveTextAreaTokens } from '../components/Inputs/TextArea/textarea.token';
 import { ResponsiveRadioTokens } from '../components/Radio/radio.token';
 import { ResponsiveSwitchTokens } from '../components/Switch/switch.token';
@@ -20,17 +19,20 @@ import { ResponsiveBreadcrumbTokens } from '../components/Breadcrumb/breadcrumb.
 import { PopoverTokenType } from '../components/Popover/popover.tokens';
 import { ResponsiveMenuTokensType } from '../components/Menu/menu.tokens';
 import { ResponsiveMultiSelectTokens } from '../components/MultiSelect/multiSelect.tokens';
+import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 import { ResponsiveTableTokens } from '../components/DataTable/dataTable.tokens';
 import { ResponsiveCalendarTokens } from '../components/DateRangePicker/dateRangePicker.tokens';
 import { ResponsiveAccordionTokens } from '../components/Accordion/accordion.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';
+import { ResponsiveKeyValuePairTokens } from '../components/KeyValuePair/KeyValuePair.tokens';
 import { ResponsiveCardTokens } from '../components/Card/card.tokens';
+import { ResponsiveTopbarTokens } from '../components/Topbar/topbar.tokens';
+import { ThemeType } from '../tokens';
+import { BREAKPOINTS } from '../breakpoints/breakPoints';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: SearchInputTokensType;
@@ -62,12 +64,14 @@ export type ComponentTokenType = {
     DRAWER?: DrawerTokensType;
     CHARTS?: ResponsiveChartTokens;
     SNACKBAR?: ResponsiveSnackbarTokens;
+    KEYVALUEPAIR?: ResponsiveKeyValuePairTokens;
     CARD?: ResponsiveCardTokens;
+    TOPBAR?: ResponsiveTopbarTokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;
     componentTokens: Required<ComponentTokenType>;
-    breakpoints: BreakpointType;
+    breakpoints: typeof BREAKPOINTS;
 };
 declare const ThemeContext: import('react').Context<ThemeContextType>;
 export declare const useTheme: () => ThemeContextType;

package/dist/context/useComponentToken.d.ts

@@ -29,5 +29,7 @@ import { DrawerTokensType } from '../components/Drawer/drawer.tokens';
 import { ResponsiveSingleSelectTokens } from '../components/SingleSelect/singleSelect.tokens';
 import { ResponsiveChartTokens } from '../components/Charts/chart.tokens';
 import { ResponsiveSnackbarTokens } from '../components/Snackbar/snackbar.tokens';
+import { ResponsiveKeyValuePairTokens } from '../components/KeyValuePair/KeyValuePair.tokens';
 import { ResponsiveCardTokens } from '../components/Card/card.tokens';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveCardTokens;
+import { ResponsiveTopbarTokens } from '../components/Topbar/topbar.tokens';
+export declare const useComponentToken: (component: keyof ComponentTokenType) => SearchInputTokensType | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | MultiValueInputTokensType | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ModalTokensType | ResponsiveBreadcrumbTokens | PopoverTokenType | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ProgressBarTokenType | DrawerTokensType | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveTopbarTokens;