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

package/lib/components/MultiSelectV2/multiSelectV2.tokens.types.ts

@@ -0,0 +1,237 @@
+import type { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+import {
+    MultiSelectV2Size,
+    MultiSelectV2SelectionTagType,
+    MultiSelectV2Variant,
+} from './multiSelectV2.types'
+import type {
+    SelectV2ItemStates,
+    SelectV2TriggerStates,
+} from '../SelectV2/selectV2.tokenStates'
+
+type StateToken<T> = Record<SelectV2ItemStates, T>
+type TriggerStateToken<T> = Record<SelectV2TriggerStates, T>
+type VariantToken<T> = Record<MultiSelectV2Variant, T>
+type SizeToken<T> = Record<MultiSelectV2Size, T>
+type SelectionTagTypeToken<T> = Record<MultiSelectV2SelectionTagType, T>
+
+export type MultiSelectV2TriggerStates = SelectV2TriggerStates
+
+export type MultiSelectV2ItemStates = SelectV2ItemStates
+
+export type MultiSelectV2TokensType = {
+    gap: CSSObject['gap']
+
+    label: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: StateToken<CSSObject['color']>
+    }
+    subLabel: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: StateToken<CSSObject['color']>
+    }
+    hintText: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: StateToken<CSSObject['color']>
+    }
+    errorMessage: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: CSSObject['color']
+    }
+    required: {
+        color: CSSObject['color']
+    }
+
+    trigger: {
+        height: SizeToken<VariantToken<CSSObject['height']>>
+        padding: SizeToken<
+            VariantToken<{
+                top: CSSObject['paddingTop']
+                right: CSSObject['paddingRight']
+                bottom: CSSObject['paddingBottom']
+                left: CSSObject['paddingLeft']
+            }>
+        >
+        borderRadius: SizeToken<VariantToken<CSSObject['borderRadius']>>
+        boxShadow: VariantToken<CSSObject['boxShadow']>
+        backgroundColor: VariantToken<
+            TriggerStateToken<CSSObject['backgroundColor']>
+        >
+        outline: VariantToken<TriggerStateToken<CSSObject['outline']>>
+        slot: {
+            gap: CSSObject['gap']
+            width: CSSObject['width']
+        }
+        selectionTag: VariantToken<
+            SelectionTagTypeToken<{
+                color: CSSObject['color']
+                backgroundColor: CSSObject['backgroundColor']
+                fontWeight: CSSObject['fontWeight']
+                paddingTop: CSSObject['paddingTop']
+                paddingRight: CSSObject['paddingRight']
+                paddingBottom: CSSObject['paddingBottom']
+                paddingLeft: CSSObject['paddingLeft']
+            }>
+        > & {
+            marginLeft: CSSObject['margin']
+            borderRadius: CSSObject['borderRadius']
+        }
+        chevron: {
+            gap: CSSObject['gap']
+            width: CSSObject['width']
+            height: CSSObject['height']
+            iconSize?: number
+        }
+        clearButton?: {
+            backgroundColor: TriggerStateToken<CSSObject['backgroundColor']>
+            outline: TriggerStateToken<CSSObject['outline']>
+            color: CSSObject['color']
+            width?: CSSObject['width']
+        }
+        floatingLabel: {
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+        }
+        placeholder: {
+            color: CSSObject['color']
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+        }
+        selectedValue: {
+            color: CSSObject['color']
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+        }
+    }
+
+    menu: {
+        backgroundColor: CSSObject['backgroundColor']
+        border: CSSObject['border']
+        borderRadius: CSSObject['borderRadius']
+        padding: SizeToken<
+            VariantToken<{
+                top: CSSObject['paddingTop']
+                right: CSSObject['paddingRight']
+                bottom: CSSObject['paddingBottom']
+                left: CSSObject['paddingLeft']
+            }>
+        >
+        minWidth: CSSObject['minWidth']
+        scroll: {
+            height: CSSObject['height']
+            maxHeight: CSSObject['maxHeight']
+        }
+        header: {
+            backgroundColor: CSSObject['backgroundColor']
+            borderBottom: CSSObject['borderBottom']
+            selectAllRowPaddingLeft: CSSObject['paddingLeft']
+            selectAllRowPaddingRight: CSSObject['paddingRight']
+        }
+        selectAll: {
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            borderRadius: CSSObject['borderRadius']
+        }
+        list: {
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+        }
+        actions: {
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            gap: CSSObject['gap']
+            backgroundColor: CSSObject['backgroundColor']
+            borderTop: CSSObject['borderTop']
+        }
+        item: {
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            margin: CSSObject['margin']
+            borderRadius: CSSObject['borderRadius']
+            gap: CSSObject['gap']
+            backgroundColor: StateToken<CSSObject['backgroundColor']>
+            optionsLabel: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: StateToken<CSSObject['color']>
+                paddingTop: CSSObject['paddingTop']
+                paddingRight: CSSObject['paddingRight']
+                paddingBottom: CSSObject['paddingBottom']
+                paddingLeft: CSSObject['paddingLeft']
+            }
+            option: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: StateToken<CSSObject['color']>
+            }
+            description: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: StateToken<CSSObject['color']>
+            }
+            seperator: {
+                color: CSSObject['color']
+                height: CSSObject['height']
+                margin: CSSObject['margin']
+            }
+        }
+    }
+
+    subMenu: {
+        trigger: {
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            margin: CSSObject['margin']
+            borderRadius: CSSObject['borderRadius']
+        }
+        content: {
+            borderRadius: CSSObject['borderRadius']
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+        }
+    }
+
+    drawer: {
+        header: {
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            borderBottom: CSSObject['borderBottom']
+        }
+        search: {
+            paddingTop: CSSObject['paddingTop']
+            paddingRight: CSSObject['paddingRight']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            marginTop: CSSObject['margin']
+            marginBottom: CSSObject['margin']
+        }
+        content: {
+            gap: CSSObject['gap']
+        }
+    }
+}
+
+export type ResponsiveMultiSelectV2Tokens = {
+    [key in keyof BreakpointType]: MultiSelectV2TokensType
+}

package/lib/components/Popover/types.ts

@@ -1,5 +1,5 @@
-import type { ButtonProps } from '../Button'
-import { SkeletonVariant } from '../Skeleton'
+import type { ButtonProps } from '../Button/types'
+import type { SkeletonVariant } from '../Skeleton/types'
 
 export type PopoverActionType = Omit<
     ButtonProps,

package/lib/components/PopoverV2/popoverV2.dark.tokens.tsx

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsivePopoverV2Tokens } from './popoverV2.token'
+import type { ResponsivePopoverV2Tokens } from './popoverV2.tokens.types'
 
 export const getPopoverV2DarkToken = (
     foundationTokens: FoundationTokenType

package/lib/components/PopoverV2/popoverV2.light.tokens.tsx

@@ -1,5 +1,5 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
-import { ResponsivePopoverV2Tokens } from './popoverV2.token'
+import type { ResponsivePopoverV2Tokens } from './popoverV2.tokens.types'
 
 export const getPopoverV2LightToken = (
     foundationTokens: FoundationTokenType

package/lib/components/PopoverV2/popoverV2.token.ts

@@ -1,77 +1,13 @@
-import type { CSSObject } from 'styled-components'
-import { PopoverV2Size } from './popoverV2.types'
 import type { FoundationTokenType } from '../../tokens/theme.token'
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { Theme } from '../../context/theme.enum'
 import { getPopoverV2LightToken } from './popoverV2.light.tokens'
 import { getPopoverV2DarkToken } from './popoverV2.dark.tokens'
-export type PopoverV2TokenType = {
-    background: CSSObject['backgroundColor']
-    border: CSSObject['border']
-    shadow: FoundationTokenType['shadows']
-    gap: {
-        [key in PopoverV2Size]: CSSObject['gap']
-    }
-    zIndex: CSSObject['zIndex']
-    borderRadius: {
-        [key in PopoverV2Size]: CSSObject['borderRadius']
-    }
-    padding: {
-        left: {
-            [key in PopoverV2Size]: CSSObject['paddingLeft']
-        }
-        right: {
-            [key in PopoverV2Size]: CSSObject['paddingRight']
-        }
-        top: {
-            [key in PopoverV2Size]: CSSObject['paddingTop']
-        }
-        bottom: {
-            [key in PopoverV2Size]: CSSObject['paddingBottom']
-        }
-    }
-    TopContainer: {
-        gap: {
-            [key in PopoverV2Size]: CSSObject['gap']
-        }
-        heading: {
-            color: CSSObject['color']
-            fontSize: {
-                [key in PopoverV2Size]: CSSObject['fontSize']
-            }
-            fontWeight: {
-                [key in PopoverV2Size]: CSSObject['fontWeight']
-            }
-            lineHeight: {
-                [key in PopoverV2Size]: CSSObject['lineHeight']
-            }
-            IconSize: {
-                [key in PopoverV2Size]: CSSObject['size']
-            }
-        }
-        description: {
-            color: CSSObject['color']
-            fontSize: {
-                [key in PopoverV2Size]: CSSObject['fontSize']
-            }
-            fontWeight: {
-                [key in PopoverV2Size]: CSSObject['fontWeight']
-            }
-            lineHeight: {
-                [key in PopoverV2Size]: CSSObject['lineHeight']
-            }
-        }
-    }
-    bottomContainer: {
-        gap: {
-            [key in PopoverV2Size]: CSSObject['gap']
-        }
-    }
-}
+import type { ResponsivePopoverV2Tokens } from './popoverV2.tokens.types'
 
-export type ResponsivePopoverV2Tokens = {
-    [key in keyof BreakpointType]: PopoverV2TokenType
-}
+export type {
+    PopoverV2TokenType,
+    ResponsivePopoverV2Tokens,
+} from './popoverV2.tokens.types'
 
 export const getPopoverV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/PopoverV2/popoverV2.tokens.types.ts

@@ -0,0 +1,72 @@
+import type { CSSObject } from 'styled-components'
+import { PopoverV2Size } from './popoverV2.types'
+import type { FoundationTokenType } from '../../tokens/theme.token'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export type PopoverV2TokenType = {
+    background: CSSObject['backgroundColor']
+    border: CSSObject['border']
+    shadow: FoundationTokenType['shadows']
+    gap: {
+        [key in PopoverV2Size]: CSSObject['gap']
+    }
+    zIndex: CSSObject['zIndex']
+    borderRadius: {
+        [key in PopoverV2Size]: CSSObject['borderRadius']
+    }
+    padding: {
+        left: {
+            [key in PopoverV2Size]: CSSObject['paddingLeft']
+        }
+        right: {
+            [key in PopoverV2Size]: CSSObject['paddingRight']
+        }
+        top: {
+            [key in PopoverV2Size]: CSSObject['paddingTop']
+        }
+        bottom: {
+            [key in PopoverV2Size]: CSSObject['paddingBottom']
+        }
+    }
+    TopContainer: {
+        gap: {
+            [key in PopoverV2Size]: CSSObject['gap']
+        }
+        heading: {
+            color: CSSObject['color']
+            fontSize: {
+                [key in PopoverV2Size]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in PopoverV2Size]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in PopoverV2Size]: CSSObject['lineHeight']
+            }
+            IconSize: {
+                [key in PopoverV2Size]: CSSObject['size']
+            }
+        }
+        description: {
+            color: CSSObject['color']
+            fontSize: {
+                [key in PopoverV2Size]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in PopoverV2Size]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in PopoverV2Size]: CSSObject['lineHeight']
+            }
+        }
+    }
+    bottomContainer: {
+        gap: {
+            [key in PopoverV2Size]: CSSObject['gap']
+        }
+    }
+}
+
+export type ResponsivePopoverV2Tokens = {
+    [key in keyof BreakpointType]: PopoverV2TokenType
+}

package/lib/components/PopoverV2/popoverV2.types.ts

@@ -1,5 +1,5 @@
-import type { ButtonProps } from '../Button'
-import { SkeletonVariant } from '../Skeleton'
+import type { ButtonProps } from '../Button/types'
+import type { SkeletonVariant } from '../Skeleton/types'
 
 export type PopoverV2ActionType = Omit<
     ButtonProps,

package/lib/components/ProgressBarV2/progressBarV2.dark.tokens.ts

@@ -3,7 +3,7 @@ import {
     ProgressBarV2Appearance,
     ProgressBarV2Size,
 } from './progressBarV2.types'
-import type { ResponsiveProgressBarV2Tokens } from './progressBarV2.tokens'
+import type { ResponsiveProgressBarV2Tokens } from './progressBarV2.tokens.types'
 
 export const getProgressBarV2DarkTokens = (
     foundationToken: FoundationTokenType

package/lib/components/ProgressBarV2/progressBarV2.light.tokens.ts

@@ -3,7 +3,7 @@ import {
     ProgressBarV2Appearance,
     ProgressBarV2Size,
 } from './progressBarV2.types'
-import type { ResponsiveProgressBarV2Tokens } from './progressBarV2.tokens'
+import type { ResponsiveProgressBarV2Tokens } from './progressBarV2.tokens.types'
 
 export const getProgressBarV2LightTokens = (
     foundationToken: FoundationTokenType

package/lib/components/ProgressBarV2/progressBarV2.tokens.ts

@@ -1,72 +1,13 @@
-import { BreakpointType } from '../../breakpoints/breakPoints'
 import { Theme } from '../../context/theme.enum'
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { getProgressBarV2DarkTokens } from './progressBarV2.dark.tokens'
 import { getProgressBarV2LightTokens } from './progressBarV2.light.tokens'
-import type {
-    ProgressBarV2Appearance,
-    ProgressBarV2Size,
-} from './progressBarV2.types'
-import type { CSSObject } from 'styled-components'
+import type { ResponsiveProgressBarV2Tokens } from './progressBarV2.tokens.types'
 
-export type ProgressBarV2TokenType = {
-    linear: {
-        height: {
-            [key in ProgressBarV2Size]: CSSObject['height']
-        }
-        fill: {
-            backgroundColor: {
-                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor']
-            }
-            borderRadius: {
-                [key in ProgressBarV2Appearance]: CSSObject['borderRadius']
-            }
-        }
-        empty: {
-            backgroundColor: {
-                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor']
-            }
-            backgroundImage: {
-                [key in ProgressBarV2Appearance]: CSSObject['backgroundImage']
-            }
-            backgroundSize: {
-                [key in ProgressBarV2Appearance]: CSSObject['backgroundSize']
-            }
-        }
-        borderRadius: {
-            [key in ProgressBarV2Appearance]: CSSObject['borderRadius']
-        }
-        gap: CSSObject['gap']
-    }
-    circular: {
-        size: {
-            [key in ProgressBarV2Size]: CSSObject['width']
-        }
-        strokeWidth: {
-            [key in ProgressBarV2Size]: number
-        }
-        stroke: {
-            [key in ProgressBarV2Appearance]: CSSObject['stroke']
-        }
-        background: {
-            [key in ProgressBarV2Appearance]: CSSObject['stroke']
-        }
-        dashArray: {
-            [key in ProgressBarV2Appearance]: string
-        }
-        motion: string
-    }
-    label: {
-        fontSize: CSSObject['fontSize']
-        fontWeight: CSSObject['fontWeight']
-        color: CSSObject['color']
-    }
-    transition: string
-}
-
-export type ResponsiveProgressBarV2Tokens = {
-    [key in keyof BreakpointType]: ProgressBarV2TokenType
-}
+export type {
+    ProgressBarV2TokenType,
+    ResponsiveProgressBarV2Tokens,
+} from './progressBarV2.tokens.types'
 
 export const getProgressBarV2Tokens = (
     foundationToken: FoundationTokenType,

package/lib/components/ProgressBarV2/progressBarV2.tokens.types.ts

@@ -0,0 +1,81 @@
+import { BreakpointType } from '../../breakpoints/breakPoints'
+import type { CSSObject } from 'styled-components'
+
+export enum ProgressBarV2Size {
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+}
+
+/** Bar geometry: horizontal track vs circular ring. */
+export enum ProgressBarV2Variant {
+    LINEAR = 'linear',
+    CIRCULAR = 'circular',
+}
+
+/**
+ * Fill / stroke style shared by linear and circular progress (continuous vs segmented).
+ */
+export enum ProgressBarV2Appearance {
+    SOLID = 'solid',
+    SEGMENTED = 'segmented',
+}
+
+export type ProgressBarV2TokenType = {
+    linear: {
+        height: {
+            [key in ProgressBarV2Size]: CSSObject['height']
+        }
+        fill: {
+            backgroundColor: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor']
+            }
+            borderRadius: {
+                [key in ProgressBarV2Appearance]: CSSObject['borderRadius']
+            }
+        }
+        empty: {
+            backgroundColor: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundColor']
+            }
+            backgroundImage: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundImage']
+            }
+            backgroundSize: {
+                [key in ProgressBarV2Appearance]: CSSObject['backgroundSize']
+            }
+        }
+        borderRadius: {
+            [key in ProgressBarV2Appearance]: CSSObject['borderRadius']
+        }
+        gap: CSSObject['gap']
+    }
+    circular: {
+        size: {
+            [key in ProgressBarV2Size]: CSSObject['width']
+        }
+        strokeWidth: {
+            [key in ProgressBarV2Size]: number
+        }
+        stroke: {
+            [key in ProgressBarV2Appearance]: CSSObject['stroke']
+        }
+        background: {
+            [key in ProgressBarV2Appearance]: CSSObject['stroke']
+        }
+        dashArray: {
+            [key in ProgressBarV2Appearance]: string
+        }
+        motion: string
+    }
+    label: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: CSSObject['color']
+    }
+    transition: string
+}
+
+export type ResponsiveProgressBarV2Tokens = {
+    [key in keyof BreakpointType]: ProgressBarV2TokenType
+}

package/lib/components/ProgressBarV2/progressBarV2.types.ts

@@ -1,25 +1,18 @@
 import type { HTMLAttributes } from 'react'
-import type { ProgressBarV2TokenType } from './progressBarV2.tokens'
+import {
+    ProgressBarV2Size,
+    ProgressBarV2Variant,
+    ProgressBarV2Appearance,
+    type ProgressBarV2TokenType,
+} from './progressBarV2.tokens.types'
 
-export enum ProgressBarV2Size {
-    SM = 'sm',
-    MD = 'md',
-    LG = 'lg',
-}
-
-/** Bar geometry: horizontal track vs circular ring. */
-export enum ProgressBarV2Variant {
-    LINEAR = 'linear',
-    CIRCULAR = 'circular',
-}
-
-/**
- * Fill / stroke style shared by linear and circular progress (continuous vs segmented).
- */
-export enum ProgressBarV2Appearance {
-    SOLID = 'solid',
-    SEGMENTED = 'segmented',
-}
+// Re-exported for backward compatibility: these enums were previously declared
+// here and are part of the public API.
+export {
+    ProgressBarV2Size,
+    ProgressBarV2Variant,
+    ProgressBarV2Appearance,
+} from './progressBarV2.tokens.types'
 
 export type ProgressBarV2Props = {
     value: number