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

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,16 +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;
@@ -61,11 +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,4 +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';
-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;
+import { ResponsiveKeyValuePairTokens } from '../components/KeyValuePair/KeyValuePair.tokens';
+import { ResponsiveCardTokens } from '../components/Card/card.tokens';
+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;

package/dist/main.d.ts

@@ -19,6 +19,7 @@ export * from './components/Snackbar';
 export * from './components/Charts';
 export * from './components/DateRangePicker';
 export * from './components/StatCard';
+export * from './components/Card';
 export * from './components/Inputs';
 export * from './components/Menu';
 export * from './components/DataTable';