@juspay/blend-design-system 0.0.37-beta.5 → 0.0.37-beta.7

package/lib/components/SidebarV2/SidebarV2MobileNavigation/mobile.dark.tokens.ts

@@ -1,8 +1,8 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import {
+import type {
     ResponsiveMobileNavigationV2Tokens,
     MobileNavigationV2TokenType,
-} from './mobile.tokens'
+} from './mobile.tokens.types'
 
 export const getMobileNavigationV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SidebarV2/SidebarV2MobileNavigation/mobile.light.tokens.ts

@@ -1,8 +1,8 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
-import {
+import type {
     ResponsiveMobileNavigationV2Tokens,
     MobileNavigationV2TokenType,
-} from './mobile.tokens'
+} from './mobile.tokens.types'
 
 export const getMobileNavigationV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SidebarV2/SidebarV2MobileNavigation/mobile.tokens.ts

@@ -1,92 +1,14 @@
-import type { CSSObject } from 'styled-components'
-import { BreakpointType } from '../../../breakpoints/breakPoints'
 import { type FoundationTokenType } from '../../../tokens/theme.token'
 import { Theme } from '../../../context/theme.enum'
 import { getMobileNavigationV2LightTokens } from './mobile.light.tokens'
 import { getMobileNavigationV2DarkTokens } from './mobile.dark.tokens'
+import type { ResponsiveMobileNavigationV2Tokens } from './mobile.tokens.types'
 
-export type MobileNavigationV2State = 'default' | 'active'
-
-export type MobileNavigationV2TokenType = {
-    /**
-     * MobileNavigationV2 anatomy
-     * - container: floating dock surface
-     * - layout: padding/gaps/safe-area offsets used for height calculations
-     * - row: a horizontal strip of items (primary and optional secondary rows)
-     * - item: each navigation button
-     * - primaryAction: optional center primary action button
-     */
-    container: {
-        zIndex: CSSObject['zIndex']
-        /** Base/fallback dock fill; use a color that already includes alpha (e.g. `#RRGGBBAA`). */
-        backgroundColor: CSSObject['backgroundColor']
-        /** Optional fill when `backdrop-filter` is supported (typically slightly lower alpha). */
-        background?: CSSObject['background']
-        border: CSSObject['border']
-        borderWidth: CSSObject['borderWidth']
-        borderRadius: CSSObject['borderRadius']
-        backdropFilter: CSSObject['backdropFilter']
-        transition: CSSObject['transition']
-    }
-    layout: {
-        safeAreaOffset: CSSObject['padding']
-        floatingPadding: CSSObject['padding']
-        primaryActionMarginX: CSSObject['margin']
-        itemLabelMarginTop: CSSObject['margin']
-        itemLabelLineHeight: CSSObject['lineHeight']
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        paddingRight: CSSObject['paddingRight']
-        gap: CSSObject['gap']
-        rowPaddingTop: CSSObject['paddingTop']
-        rowPaddingBottom: CSSObject['paddingBottom']
-        rowPaddingLeft: CSSObject['paddingLeft']
-        rowPaddingRight: CSSObject['paddingRight']
-        rowGap: CSSObject['gap']
-    }
-    item: {
-        width: CSSObject['width']
-        height: CSSObject['height']
-        borderRadius: CSSObject['borderRadius']
-        gap: CSSObject['gap']
-        backgroundColor: {
-            [key in MobileNavigationV2State]: CSSObject['backgroundColor']
-        }
-        color: { [key in MobileNavigationV2State]: CSSObject['color'] }
-        fontWeight: CSSObject['fontWeight']
-        icon: {
-            width: CSSObject['width']
-            height: CSSObject['height']
-            borderRadius: CSSObject['borderRadius']
-            transition: CSSObject['transition']
-            /** SVG stroke width for Lucide-style icons. */
-            strokeWidth: number
-        }
-        text: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            textAlign: CSSObject['textAlign']
-        }
-    }
-    primaryAction: {
-        width: CSSObject['width']
-        height: CSSObject['height']
-        borderRadius: CSSObject['borderRadius']
-        background: CSSObject['background']
-        boxShadow: CSSObject['boxShadow']
-        color: CSSObject['color']
-        icon: {
-            width: CSSObject['width']
-            height: CSSObject['height']
-            strokeWidth: number
-        }
-    }
-}
-
-export type ResponsiveMobileNavigationV2Tokens = {
-    [key in keyof BreakpointType]: MobileNavigationV2TokenType
-}
+export type {
+    MobileNavigationV2State,
+    MobileNavigationV2TokenType,
+    ResponsiveMobileNavigationV2Tokens,
+} from './mobile.tokens.types'
 
 export const getMobileNavigationV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/SidebarV2/SidebarV2MobileNavigation/mobile.tokens.types.ts

@@ -0,0 +1,85 @@
+import type { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../../breakpoints/breakPoints'
+
+export type MobileNavigationV2State = 'default' | 'active'
+
+export type MobileNavigationV2TokenType = {
+    /**
+     * MobileNavigationV2 anatomy
+     * - container: floating dock surface
+     * - layout: padding/gaps/safe-area offsets used for height calculations
+     * - row: a horizontal strip of items (primary and optional secondary rows)
+     * - item: each navigation button
+     * - primaryAction: optional center primary action button
+     */
+    container: {
+        zIndex: CSSObject['zIndex']
+        /** Base/fallback dock fill; use a color that already includes alpha (e.g. `#RRGGBBAA`). */
+        backgroundColor: CSSObject['backgroundColor']
+        /** Optional fill when `backdrop-filter` is supported (typically slightly lower alpha). */
+        background?: CSSObject['background']
+        border: CSSObject['border']
+        borderWidth: CSSObject['borderWidth']
+        borderRadius: CSSObject['borderRadius']
+        backdropFilter: CSSObject['backdropFilter']
+        transition: CSSObject['transition']
+    }
+    layout: {
+        safeAreaOffset: CSSObject['padding']
+        floatingPadding: CSSObject['padding']
+        primaryActionMarginX: CSSObject['margin']
+        itemLabelMarginTop: CSSObject['margin']
+        itemLabelLineHeight: CSSObject['lineHeight']
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+        gap: CSSObject['gap']
+        rowPaddingTop: CSSObject['paddingTop']
+        rowPaddingBottom: CSSObject['paddingBottom']
+        rowPaddingLeft: CSSObject['paddingLeft']
+        rowPaddingRight: CSSObject['paddingRight']
+        rowGap: CSSObject['gap']
+    }
+    item: {
+        width: CSSObject['width']
+        height: CSSObject['height']
+        borderRadius: CSSObject['borderRadius']
+        gap: CSSObject['gap']
+        backgroundColor: {
+            [key in MobileNavigationV2State]: CSSObject['backgroundColor']
+        }
+        color: { [key in MobileNavigationV2State]: CSSObject['color'] }
+        fontWeight: CSSObject['fontWeight']
+        icon: {
+            width: CSSObject['width']
+            height: CSSObject['height']
+            borderRadius: CSSObject['borderRadius']
+            transition: CSSObject['transition']
+            /** SVG stroke width for Lucide-style icons. */
+            strokeWidth: number
+        }
+        text: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            textAlign: CSSObject['textAlign']
+        }
+    }
+    primaryAction: {
+        width: CSSObject['width']
+        height: CSSObject['height']
+        borderRadius: CSSObject['borderRadius']
+        background: CSSObject['background']
+        boxShadow: CSSObject['boxShadow']
+        color: CSSObject['color']
+        icon: {
+            width: CSSObject['width']
+            height: CSSObject['height']
+            strokeWidth: number
+        }
+    }
+}
+
+export type ResponsiveMobileNavigationV2Tokens = {
+    [key in keyof BreakpointType]: MobileNavigationV2TokenType
+}

package/lib/components/SidebarV2/SidebarV2MobileNavigation/types.ts

@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes } from 'react'
 import type { NavbarItem } from '../../Directory/types'
-import type { MobileNavigationV2TokenType } from './mobile.tokens'
+import type { MobileNavigationV2TokenType } from './mobile.tokens.types'
 
 export type SidebarV2MobileNavigationItem = NavbarItem & {
     sectionLabel?: string

package/lib/components/SidebarV2/sidebarV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveSidebarV2Tokens } from './sidebarV2.tokens'
+import type { ResponsiveSidebarV2Tokens } from './sidebarV2.tokens.types'
 
 export const getSidebarV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SidebarV2/sidebarV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsiveSidebarV2Tokens } from './sidebarV2.tokens'
+import type { ResponsiveSidebarV2Tokens } from './sidebarV2.tokens.types'
 
 export const getSidebarV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/SidebarV2/sidebarV2.tokens.ts

@@ -1,113 +1,14 @@
-import { CSSObject } from 'styled-components'
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { Theme } from '../../context/theme.enum'
 import { getSidebarV2DarkTokens } from './sidebarV2.dark.tokens'
 import { getSidebarV2LightTokens } from './sidebarV2.light.tokens'
+import type { ResponsiveSidebarV2Tokens } from './sidebarV2.tokens.types'
 
-export type SidebarV2ItemInteractionStates = 'default' | 'hover' | 'active'
-
-export type SidebarV2TokensType = {
-    container: {
-        zIndex: CSSObject['zIndex']
-        backgroundColor: CSSObject['backgroundColor']
-        borderRight: CSSObject['borderRight']
-        hoverPreview: {
-            boxShadow: CSSObject['boxShadow']
-        }
-        maxWidth: {
-            withLeftPanel: CSSObject['maxWidth']
-            withoutLeftPanel: CSSObject['maxWidth']
-            iconOnly: CSSObject['maxWidth']
-        }
-    }
-    leftPanel: {
-        width: CSSObject['width']
-        backgroundColor: CSSObject['backgroundColor']
-        borderRight: CSSObject['borderRight']
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        paddingRight: CSSObject['paddingRight']
-        gap: CSSObject['gap']
-        item: {
-            width: CSSObject['width']
-            borderRadius: CSSObject['borderRadius']
-            border: {
-                [key in SidebarV2ItemInteractionStates]: CSSObject['border']
-            }
-            backgroundColor: {
-                [key in SidebarV2ItemInteractionStates]: CSSObject['backgroundColor']
-            }
-        }
-    }
-    header: {
-        zIndex: CSSObject['zIndex']
-        backgroundColor: CSSObject['backgroundColor']
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        paddingRight: CSSObject['paddingRight']
-        gap: CSSObject['gap']
-        borderBottom: CSSObject['borderBottom']
-        borderBottomWidth: CSSObject['borderWidth']
-        scrolledBorderColor: CSSObject['color']
-        toggleButton: {
-            borderRadius: CSSObject['borderRadius']
-            padding: CSSObject['padding']
-            backgroundColor: {
-                [key in SidebarV2ItemInteractionStates]: CSSObject['backgroundColor']
-            }
-            width: CSSObject['width']
-            iconColor: CSSObject['color']
-        }
-    }
-    directory: {
-        gap: CSSObject['gap']
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        paddingRight: CSSObject['paddingRight']
-    }
-    footer: {
-        zIndex: CSSObject['zIndex']
-        backgroundColor: CSSObject['backgroundColor']
-        gap: CSSObject['gap']
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        paddingRight: CSSObject['paddingRight']
-        borderTop: CSSObject['borderTop']
-    }
-    primarySidebar: {
-        width: CSSObject['width']
-    }
-    secondarySidebar: {
-        width: CSSObject['width']
-        borderRight: CSSObject['borderRight']
-        backgroundColor: CSSObject['backgroundColor']
-        gap: CSSObject['gap']
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        paddingRight: CSSObject['paddingRight']
-        item: {
-            width: CSSObject['width']
-            height: CSSObject['height']
-            borderRadius: CSSObject['borderRadius']
-            border: {
-                [key in SidebarV2ItemInteractionStates]: CSSObject['border']
-            }
-            backgroundColor: {
-                [key in SidebarV2ItemInteractionStates]: CSSObject['backgroundColor']
-            }
-        }
-    }
-}
-
-export type ResponsiveSidebarV2Tokens = {
-    [key in keyof BreakpointType]: SidebarV2TokensType
-}
+export type {
+    SidebarV2ItemInteractionStates,
+    SidebarV2TokensType,
+    ResponsiveSidebarV2Tokens,
+} from './sidebarV2.tokens.types'
 
 export const getSidebarV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/SidebarV2/sidebarV2.tokens.types.ts

@@ -0,0 +1,106 @@
+import { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type SidebarV2ItemInteractionStates = 'default' | 'hover' | 'active'
+
+export type SidebarV2TokensType = {
+    container: {
+        zIndex: CSSObject['zIndex']
+        backgroundColor: CSSObject['backgroundColor']
+        borderRight: CSSObject['borderRight']
+        hoverPreview: {
+            boxShadow: CSSObject['boxShadow']
+        }
+        maxWidth: {
+            withLeftPanel: CSSObject['maxWidth']
+            withoutLeftPanel: CSSObject['maxWidth']
+            iconOnly: CSSObject['maxWidth']
+        }
+    }
+    leftPanel: {
+        width: CSSObject['width']
+        backgroundColor: CSSObject['backgroundColor']
+        borderRight: CSSObject['borderRight']
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+        gap: CSSObject['gap']
+        item: {
+            width: CSSObject['width']
+            borderRadius: CSSObject['borderRadius']
+            border: {
+                [key in SidebarV2ItemInteractionStates]: CSSObject['border']
+            }
+            backgroundColor: {
+                [key in SidebarV2ItemInteractionStates]: CSSObject['backgroundColor']
+            }
+        }
+    }
+    header: {
+        zIndex: CSSObject['zIndex']
+        backgroundColor: CSSObject['backgroundColor']
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+        gap: CSSObject['gap']
+        borderBottom: CSSObject['borderBottom']
+        borderBottomWidth: CSSObject['borderWidth']
+        scrolledBorderColor: CSSObject['color']
+        toggleButton: {
+            borderRadius: CSSObject['borderRadius']
+            padding: CSSObject['padding']
+            backgroundColor: {
+                [key in SidebarV2ItemInteractionStates]: CSSObject['backgroundColor']
+            }
+            width: CSSObject['width']
+            iconColor: CSSObject['color']
+        }
+    }
+    directory: {
+        gap: CSSObject['gap']
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+    }
+    footer: {
+        zIndex: CSSObject['zIndex']
+        backgroundColor: CSSObject['backgroundColor']
+        gap: CSSObject['gap']
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+        borderTop: CSSObject['borderTop']
+    }
+    primarySidebar: {
+        width: CSSObject['width']
+    }
+    secondarySidebar: {
+        width: CSSObject['width']
+        borderRight: CSSObject['borderRight']
+        backgroundColor: CSSObject['backgroundColor']
+        gap: CSSObject['gap']
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+        item: {
+            width: CSSObject['width']
+            height: CSSObject['height']
+            borderRadius: CSSObject['borderRadius']
+            border: {
+                [key in SidebarV2ItemInteractionStates]: CSSObject['border']
+            }
+            backgroundColor: {
+                [key in SidebarV2ItemInteractionStates]: CSSObject['backgroundColor']
+            }
+        }
+    }
+}
+
+export type ResponsiveSidebarV2Tokens = {
+    [key in keyof BreakpointType]: SidebarV2TokensType
+}

package/lib/components/SingleSelect/SingleSelectMenu.tsx

@@ -7,7 +7,7 @@ import styled from 'styled-components'
 import Text from '../Text/Text'
 import Block from '../Primitives/Block/Block'
 import { ChevronRight } from 'lucide-react'
-import { SearchInput } from '../Inputs'
+import { SearchInput } from '../Inputs/SearchInput'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import {
     usePreventParentScroll,

package/lib/components/SingleSelect/types.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SkeletonVariant } from '../Skeleton'
+import type { SkeletonVariant } from '../Skeleton/types'
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types'
 
 export enum SelectMenuAlignment {

package/lib/components/SingleSelectV2/singleSelectV2.dark.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import type { ResponsiveSingleSelectV2Tokens } from './singleSelectV2.tokens'
+import type { ResponsiveSingleSelectV2Tokens } from './singleSelectV2.tokens.types'
 import {
     SingleSelectV2Size,
     SingleSelectV2Variant,

package/lib/components/SingleSelectV2/singleSelectV2.light.tokens.ts

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import type { ResponsiveSingleSelectV2Tokens } from './singleSelectV2.tokens'
+import type { ResponsiveSingleSelectV2Tokens } from './singleSelectV2.tokens.types'
 import {
     SingleSelectV2Size,
     SingleSelectV2Variant,