@juspay/blend-design-system 0.0.37-beta.4 → 0.0.37-beta.6

package/dist/components/TooltipV2/tooltipV2.tokens.d.ts

@@ -1,37 +1,5 @@
-import { CSSObject } from 'styled-components';
-import { TooltipV2Size } from './tooltipV2.types';
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { BreakpointType } from '../../breakpoints/breakPoints';
 import { Theme } from '../../context/theme.enum';
-export type TooltipV2TokensType = {
-    background: CSSObject['backgroundColor'];
-    borderRadius: {
-        [key in TooltipV2Size]: CSSObject['borderRadius'];
-    };
-    maxWidth: {
-        [key in TooltipV2Size]: CSSObject['maxWidth'];
-    };
-    padding: {
-        [key in TooltipV2Size]: CSSObject['padding'];
-    };
-    gap: {
-        [key in TooltipV2Size]: CSSObject['gap'];
-    };
-    text: {
-        color: CSSObject['color'];
-        fontWeight: {
-            [key in TooltipV2Size]: CSSObject['fontWeight'];
-        };
-        fontSize: {
-            [key in TooltipV2Size]: CSSObject['fontSize'];
-        };
-        lineHeight: {
-            [key in TooltipV2Size]: CSSObject['lineHeight'];
-        };
-    };
-    zIndex: CSSObject['zIndex'];
-};
-export type ResponsiveTooltipV2Tokens = {
-    [key in keyof BreakpointType]: TooltipV2TokensType;
-};
+import { ResponsiveTooltipV2Tokens } from './tooltipV2.tokens.types';
+export type { TooltipV2TokensType, ResponsiveTooltipV2Tokens, } from './tooltipV2.tokens.types';
 export declare const getTooltipV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTooltipV2Tokens;

package/dist/components/TooltipV2/tooltipV2.tokens.types.d.ts

@@ -0,0 +1,34 @@
+import { CSSObject } from 'styled-components';
+import { TooltipV2Size } from './tooltipV2.types';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type TooltipV2TokensType = {
+    background: CSSObject['backgroundColor'];
+    borderRadius: {
+        [key in TooltipV2Size]: CSSObject['borderRadius'];
+    };
+    maxWidth: {
+        [key in TooltipV2Size]: CSSObject['maxWidth'];
+    };
+    padding: {
+        [key in TooltipV2Size]: CSSObject['padding'];
+    };
+    gap: {
+        [key in TooltipV2Size]: CSSObject['gap'];
+    };
+    text: {
+        color: CSSObject['color'];
+        fontWeight: {
+            [key in TooltipV2Size]: CSSObject['fontWeight'];
+        };
+        fontSize: {
+            [key in TooltipV2Size]: CSSObject['fontSize'];
+        };
+        lineHeight: {
+            [key in TooltipV2Size]: CSSObject['lineHeight'];
+        };
+    };
+    zIndex: CSSObject['zIndex'];
+};
+export type ResponsiveTooltipV2Tokens = {
+    [key in keyof BreakpointType]: TooltipV2TokensType;
+};

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

@@ -1,14 +1,6 @@
 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;
-};
+import { LeftPanelInfo, MerchantInfo } from '../shared/layoutTypes';
+export type { MerchantInfo } from '../shared/layoutTypes';
 export type TopbarProps = {
     children?: ReactNode;
     /** Sidebar expansion state */

package/dist/components/TopbarV2/topbarV2.dark.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveTopbarV2Tokens } from './topbarV2.tokens';
+import { ResponsiveTopbarV2Tokens } from './topbarV2.tokens.types';
 export declare const getTopbarV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveTopbarV2Tokens;

package/dist/components/TopbarV2/topbarV2.light.tokens.d.ts

@@ -1,3 +1,3 @@
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { ResponsiveTopbarV2Tokens } from './topbarV2.tokens';
+import { ResponsiveTopbarV2Tokens } from './topbarV2.tokens.types';
 export declare const getTopbarV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveTopbarV2Tokens;

package/dist/components/TopbarV2/topbarV2.tokens.d.ts

@@ -1,83 +1,5 @@
-import { CSSObject } from 'styled-components';
 import { FoundationTokenType } from '../../tokens/theme.token';
-import { BreakpointType } from '../../breakpoints/breakPoints';
 import { Theme } from '../../context/theme.enum';
-export type TopbarV2State = 'default' | 'hover' | 'active';
-export type TopbarV2TokenType = {
-    zIndex: CSSObject['zIndex'];
-    height: CSSObject['height'];
-    borderBottom: CSSObject['borderBottom'];
-    backgroundColor: CSSObject['backgroundColor'];
-    backdropFilter: CSSObject['backdropFilter'];
-    padding: CSSObject['padding'];
-    gap: CSSObject['gap'];
-    separator: {
-        width: CSSObject['width'];
-        color: CSSObject['color'];
-    };
-    toggleButton: {
-        borderRadius: CSSObject['borderRadius'];
-        padding: CSSObject['padding'];
-        backgroundColor: {
-            [key in TopbarV2State]: 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 TopbarV2State]: CSSObject['backgroundColor'];
-        };
-        transition: CSSObject['transition'];
-        icon: {
-            size: CSSObject['width'];
-            color: CSSObject['color'];
-        };
-    };
-    tenantIconButton: {
-        borderRadius: CSSObject['borderRadius'];
-        minHeight: CSSObject['minHeight'];
-        backgroundColor: {
-            [key in TopbarV2State]: 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'];
-        };
-    };
-    rightSection: {
-        gap: CSSObject['gap'];
-    };
-    sidebarSection: {
-        gap: CSSObject['gap'];
-    };
-};
-export type ResponsiveTopbarV2Tokens = {
-    [key in keyof BreakpointType]: TopbarV2TokenType;
-};
+import { ResponsiveTopbarV2Tokens } from './topbarV2.tokens.types';
+export type { TopbarV2State, TopbarV2TokenType, ResponsiveTopbarV2Tokens, } from './topbarV2.tokens.types';
 export declare const getTopbarV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveTopbarV2Tokens;

package/dist/components/TopbarV2/topbarV2.tokens.types.d.ts

@@ -0,0 +1,80 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type TopbarV2State = 'default' | 'hover' | 'active';
+export type TopbarV2TokenType = {
+    zIndex: CSSObject['zIndex'];
+    height: CSSObject['height'];
+    borderBottom: CSSObject['borderBottom'];
+    backgroundColor: CSSObject['backgroundColor'];
+    backdropFilter: CSSObject['backdropFilter'];
+    padding: CSSObject['padding'];
+    gap: CSSObject['gap'];
+    separator: {
+        width: CSSObject['width'];
+        color: CSSObject['color'];
+    };
+    toggleButton: {
+        borderRadius: CSSObject['borderRadius'];
+        padding: CSSObject['padding'];
+        backgroundColor: {
+            [key in TopbarV2State]: 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 TopbarV2State]: CSSObject['backgroundColor'];
+        };
+        transition: CSSObject['transition'];
+        icon: {
+            size: CSSObject['width'];
+            color: CSSObject['color'];
+        };
+    };
+    tenantIconButton: {
+        borderRadius: CSSObject['borderRadius'];
+        minHeight: CSSObject['minHeight'];
+        backgroundColor: {
+            [key in TopbarV2State]: 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'];
+        };
+    };
+    rightSection: {
+        gap: CSSObject['gap'];
+    };
+    sidebarSection: {
+        gap: CSSObject['gap'];
+    };
+};
+export type ResponsiveTopbarV2Tokens = {
+    [key in keyof BreakpointType]: TopbarV2TokenType;
+};

package/dist/components/shared/layoutTypes.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { BadgeColor, BadgePosition, BadgeSize } from '../Badge/Badge.types';
+/**
+ * Layout-level types shared between the Sidebar and Topbar components.
+ *
+ * These live in a neutral module to avoid a circular dependency between
+ * `Sidebar/types` and `Topbar/types` (see issue #1473). Both components import
+ * from here, keeping the type graph a clean DAG.
+ */
+export type TenantBadge = {
+    text: string;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    position?: BadgePosition;
+};
+export type LeftPanelItem = {
+    label: string;
+    icon: ReactNode;
+    value?: string;
+    showInPanel?: boolean;
+    badge?: TenantBadge;
+};
+export type LeftPanelInfo = {
+    items: LeftPanelItem[];
+    selected: string;
+    onSelect: (value: string) => void;
+    tenantSlot1?: ReactNode;
+    tenantSlot2?: ReactNode;
+    tenantFooter?: ReactNode;
+};
+export type MerchantInfo = {
+    items: Array<{
+        label: string;
+        value: string;
+        icon?: ReactNode;
+    }>;
+    selected: string;
+    onSelect: (value: string) => void;
+};

package/dist/context/useComponentToken.d.ts

@@ -46,9 +46,9 @@ import { ResponsiveMobileNavigationV2Tokens } from '../components/SidebarV2/Side
 import { ResponsiveDirectoryTokens } from '../components/Directory/directory.tokens';
 import { ResponsiveChatInputTokensType } from '../components/ChatInput/chatInput.tokens';
 import { ResponsiveTagV2Tokens } from '../components/TagV2/tagV2.tokens';
-import { ResponsiveAlertV2Tokens } from '../components/AlertV2';
-import { ResponsiveAccordionV2Tokens } from '../components/AccordionV2';
-import { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2';
+import { ResponsiveAlertV2Tokens } from '../components/AlertV2/alertV2.tokens.types';
+import { ResponsiveAccordionV2Tokens } from '../components/AccordionV2/accordionV2.tokens.types';
+import { ResponsiveSnackbarV2Tokens } from '../components/SnackbarV2/snackbarV2.tokens.types';
 import { ResponsiveSwitchV2Tokens } from '../components/SelectorV2/SwitchV2/switchV2.tokens';
 import { ResponsiveSingleSelectV2Tokens } from '../components/SingleSelectV2/singleSelectV2.tokens';
 import { ResponsiveMultiSelectV2Tokens } from '../components/MultiSelectV2/multiSelectV2.tokens';