@juspay/blend-design-system 0.0.37-beta.8 → 0.0.37

package/dist/node.d.ts

@@ -17,6 +17,7 @@ export { getCheckboxV2Tokens } from './components/SelectorV2/CheckboxV2/checkbox
 export { getCodeEditorV2Tokens } from './components/CodeEditorV2/codeEditorV2.tokens';
 export { getKeyValuePairV2Tokens } from './components/KeyValuePairV2/keyValuePairV2.tokens';
 export { getMenuV2Tokens } from './components/MenuV2/menuV2.tokens';
+export { getModalV2Tokens } from './components/ModalV2/modalV2.tokens';
 export { getMultiSelectV2Tokens } from './components/MultiSelectV2/multiSelectV2.tokens';
 export { getPopoverV2Tokens } from './components/PopoverV2/popoverV2.token';
 export { getProgressBarV2Tokens } from './components/ProgressBarV2/progressBarV2.tokens';
@@ -28,6 +29,7 @@ export { getStatCardV2Tokens } from './components/StatCardV2/statcardV2.tokens';
 export { getTabsV2Tokens } from './components/TabsV2/tabsV2.tokens';
 export { getTagV2Tokens } from './components/TagV2/tagV2.tokens';
 export { getTextInputV2Tokens } from './components/InputsV2/TextInputV2/TextInputV2.tokens';
+export { getUploadV2Tokens } from './components/InputsV2/UploadV2/UploadV2.tokens';
 export { getTimelineTokens } from './components/Timeline/timeline.token';
 export { getTopbarTokens } from './components/Topbar/topbar.tokens';
 export { getSidebarTokens } from './components/Sidebar/sidebar.tokens';

package/dist/node.js

@@ -1,4 +1,5 @@
-import { F as a, T as o, y as t, x as T, w as n, v as g, z as k, u as V, t as r, s as i, r as l, q as c, g as b, p as d, o as u, n as S, m as p, a as h, l as m, j as v, i as x, k as A, h as C, f as M, e as B, d as E, c as N, b as P } from "./node-CovJEwot.js";
+import { F as a, T as o, y as t, x as T, w as n, v as g, z as k, u as V, t as r, s as i, r as l, q as d, g as c, p as b, o as p, n as u, m as S, a as m, l as h, j as x, i as M, k as v, h as A, f as C, e as f, d as B, c as E, b as N } from "./breadcrumbV2.tokens-CovJEwot.js";
+import { g as w, a as y } from "./node-B3rrXW84.js";
 export {
   a as FOUNDATION_THEME,
   o as Theme,
@@ -11,21 +12,23 @@ export {
   r as getCheckboxV2Tokens,
   i as getCodeEditorV2Tokens,
   l as getKeyValuePairV2Tokens,
-  c as getMenuV2Tokens,
-  b as getMobileNavigationTokens,
-  d as getMultiSelectV2Tokens,
-  u as getPopoverV2Tokens,
-  S as getProgressBarV2Tokens,
-  p as getRadioV2Tokens,
-  h as getSidebarTokens,
-  m as getSingleSelectV2Tokens,
-  v as getSnackbarV2Tokens,
-  x as getStatCardV2Tokens,
-  A as getSwitchV2Tokens,
-  C as getTabsV2Tokens,
-  M as getTagV2Tokens,
-  B as getTextInputV2Tokens,
-  E as getTimelineTokens,
-  N as getTooltipV2Tokens,
-  P as getTopbarTokens
+  d as getMenuV2Tokens,
+  c as getMobileNavigationTokens,
+  w as getModalV2Tokens,
+  b as getMultiSelectV2Tokens,
+  p as getPopoverV2Tokens,
+  u as getProgressBarV2Tokens,
+  S as getRadioV2Tokens,
+  m as getSidebarTokens,
+  h as getSingleSelectV2Tokens,
+  x as getSnackbarV2Tokens,
+  M as getStatCardV2Tokens,
+  v as getSwitchV2Tokens,
+  A as getTabsV2Tokens,
+  C as getTagV2Tokens,
+  f as getTextInputV2Tokens,
+  B as getTimelineTokens,
+  E as getTooltipV2Tokens,
+  N as getTopbarTokens,
+  y as getUploadV2Tokens
 };

package/dist/token-engine.js

@@ -1,4 +1,4 @@
-import { F as u, T as d, g as k, a as E, b as V, c as g, d as v, e as p, f as S, h, i as R, j as A, k as y, l as C, m as N, n as I, o as P, p as m, q as _, r as B, s as L, t as w, u as M, v as j, w as U, x as D, y as G, z as H } from "./node-CovJEwot.js";
+import { F as u, T as d, g as k, a as E, b as V, c as g, d as v, e as p, f as S, h, i as R, j as A, k as y, l as C, m as N, n as I, o as P, p as m, q as _, r as B, s as L, t as w, u as M, v as j, w as U, x as D, y as G, z as H } from "./breadcrumbV2.tokens-CovJEwot.js";
 import { BRANCH_COLLECTION as ie, BRANCH_ID_PATTERN as ae, PRESETS as ce, PRESET_BLEND_DEFAULT as fe, PRESET_GREEN as le, PRESET_JUSPAY as Te, PRESET_ORANGE as ue, PRESET_PURPLE as de, RADIUS_PRESETS as Oe, SNAPSHOT_SUBCOLLECTION as ke, STORAGE_KEYS as Ee, TEAM_ROLE_PERMISSIONS as Ve, VERSION_PATTERN as ge, VERSION_SUBCOLLECTION as ve, analyzeContrast as pe, canUserPerformAction as Se, diffBrandConfigs as he, extractOverridePaths as Re, generateBranchId as Ae, generateColorScale as ye, getContrastRatio as Ce, getContrastRatioHex as Ne, getDefaultOnboardingState as Ie, getDefaultPreferences as Pe, getPreset as me, hexToRgb as _e, incrementVersion as Be, isValidHexColor as Le, listPresets as we, meetsWCAG as Me, parseBranchId as je, relativeLuminance as Ue, resolveWithInheritance as De, snapshotsPath as Ge, suggestForeground as He, validateAgainstLocks as xe, validateBranchId as Ke, validateBrandConfig as Fe, validatePaletteContrast as Je, validateVersion as $e, versionsPath as Ye } from "./tokens-server.js";
 function O(e) {
   const o = typeof structuredClone == "function" ? structuredClone(u) : JSON.parse(JSON.stringify(u));

package/lib/components/Accordion/AccordionItem.tsx

@@ -158,8 +158,8 @@ const StyledAccordionContent = styled(RadixAccordion.Content)<{
     $accordionType: AccordionType
     $accordionToken: AccordionTokenType
 }>((props) => ({
-    overflow: 'visible',
-    transition: 'all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+    overflow: 'hidden',
+    transition: 'height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
 
     '&[data-state="open"]': {
         animation: 'accordion-down 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
@@ -176,22 +176,18 @@ const StyledAccordionContent = styled(RadixAccordion.Content)<{
     '@keyframes accordion-down': {
         from: {
             height: 0,
-            opacity: 0,
         },
         to: {
             height: 'var(--radix-accordion-content-height)',
-            opacity: 1,
         },
     },
 
     '@keyframes accordion-up': {
         from: {
             height: 'var(--radix-accordion-content-height)',
-            opacity: 1,
         },
         to: {
             height: 0,
-            opacity: 0,
         },
     },
 

package/lib/components/Accordion/index.ts

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use AccordionV2 instead. */
 export { default as Accordion } from './Accordion'
+/** @deprecated Will be deprecated soon. Use AccordionV2 instead. */
 export { default as AccordionItem } from './AccordionItem'
 export * from './accordion.tokens'
 export * from './types'

package/lib/components/AccordionV2/AccordionV2Item.tsx

@@ -149,7 +149,7 @@ const StyledAccordionContent = styled(RadixAccordion.Content)<{
     $accordionType: AccordionV2Type
     $accordionToken: AccordionV2TokensType
 }>`
-    overflow: visible;
+    overflow: hidden;
     transition: ${ACCORDION_TRANSITION};
 
     &[data-state='open'] {

package/lib/components/AccordionV2/accordionV2.animations.ts

@@ -3,24 +3,20 @@ import { keyframes } from 'styled-components'
 export const accordionDown = keyframes`
     from {
         height: 0;
-        opacity: 0;
     }
     to {
         height: var(--radix-accordion-content-height);
-        opacity: 1;
     }
 `
 
 export const accordionUp = keyframes`
     from {
         height: var(--radix-accordion-content-height);
-        opacity: 1;
     }
     to {
         height: 0;
-        opacity: 0;
     }
 `
 
 export const ACCORDION_TRANSITION =
-    'all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+    'height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)'

package/lib/components/Alert/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use AlertV2 instead. */
 export { default as Alert } from './Alert'
 export * from './alert.tokens'
 export * from './types'

package/lib/components/Avatar/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use AvatarV2 instead. */
 export { default as Avatar } from './Avatar'
 export * from './avatar.tokens'
 export * from './types'

package/lib/components/Breadcrumb/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use BreadcrumbV2 instead. */
 export { default as Breadcrumb } from './Breadcrumb'
 export * from './breadcrumb.tokens'
 export * from './types'

package/lib/components/Button/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use ButtonV2 instead. */
 export { default as Button } from './Button'
 export * from './button.tokens'
 export * from './types'

package/lib/components/ButtonGroup/index.ts

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use ButtonGroupV2 instead. */
 export { default as ButtonGroup } from './ButtonGroup'
 export * from './types'

package/lib/components/Card/index.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use CardV2 instead. */
 export { default as Card } from './Card'
 export * from './card.tokens'
 export * from './types'

package/lib/components/CardV2/CardV2.tsx

@@ -0,0 +1,327 @@
+import { forwardRef, useId, useMemo } from 'react'
+import styled, { css } from 'styled-components'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { filterBlockedProps } from '../../utils/prop-helpers'
+import Block from '../Primitives/Block/Block'
+import type { CardV2TokensType } from './cardV2.tokens'
+import { CardV2Context } from './CardV2Context'
+import {
+    CardV2Actions,
+    CardV2Body,
+    CardV2Content,
+    CardV2Footer,
+    CardV2Header,
+    CardV2Media,
+    CardV2Meta,
+} from './CardV2Components'
+import CardV2Skeleton from './CardV2Skeleton'
+import {
+    CardV2ActionPlacement,
+    CardV2Orientation,
+    CardV2Padding,
+    CardV2Variant,
+    type CardV2Props,
+} from './cardV2.types'
+import {
+    getCardV2Padding,
+    isTextPrimitive,
+    toCardV2ActionArray,
+} from './CardV2.utils'
+
+const StyledCard = styled(Block)<{
+    $tokens: CardV2TokensType
+    $interactive: boolean
+    $selected: boolean
+}>`
+    transition:
+        border-color 160ms ease,
+        box-shadow 160ms ease,
+        transform 160ms ease;
+
+    ${({ $tokens, $interactive }) =>
+        $interactive &&
+        css`
+            cursor: pointer;
+
+            &:hover {
+                border: ${$tokens.state.hover.border};
+                box-shadow: ${$tokens.state.hover.boxShadow};
+            }
+        `}
+
+    ${({ $tokens, $selected }) =>
+        $selected &&
+        css`
+            border: ${$tokens.state.selected.border};
+            box-shadow: ${$tokens.state.selected.boxShadow};
+        `}
+
+    &:focus-visible {
+        outline: ${({ $tokens }) => $tokens.state.focus.outline};
+        outline-offset: ${({ $tokens }) => $tokens.state.focus.outlineOffset};
+    }
+`
+
+const CardV2Root = forwardRef<HTMLDivElement, CardV2Props>(
+    (
+        {
+            variant = CardV2Variant.OUTLINED,
+            orientation = CardV2Orientation.VERTICAL,
+            padding,
+            title,
+            truncateTitle,
+            subtitle,
+            description,
+            eyebrow,
+            media,
+            mediaWidth,
+            mediaHeight,
+            mediaMinHeight,
+            leadingSlot,
+            trailingSlot,
+            footer,
+            actions,
+            actionPlacement = CardV2ActionPlacement.BODY,
+            centered = false,
+            interactive = false,
+            selected = false,
+            skeleton,
+            width,
+            minWidth,
+            maxWidth,
+            height,
+            minHeight,
+            maxHeight,
+            scrollable,
+            children,
+            role,
+            tabIndex,
+            ...props
+        },
+        ref
+    ) => {
+        const tokens = useResponsiveTokens<CardV2TokensType>('CARDV2')
+        const filteredProps = filterBlockedProps(props)
+        const {
+            'aria-label': providedAriaLabel,
+            ...filteredPropsWithoutAriaLabel
+        } = filteredProps
+        const actionItems = toCardV2ActionArray(actions)
+        const isHorizontal = orientation === CardV2Orientation.HORIZONTAL
+        const resolvedPadding =
+            padding ??
+            (variant === CardV2Variant.GHOST
+                ? CardV2Padding.NONE
+                : CardV2Padding.COMFORTABLE)
+        const resolvedRole = role ?? (interactive ? 'button' : 'region')
+        const supportsAriaSelected = [
+            'gridcell',
+            'option',
+            'row',
+            'tab',
+            'treeitem',
+        ].includes(resolvedRole)
+        const hasBodyActions =
+            actionPlacement === CardV2ActionPlacement.BODY &&
+            actionItems.length > 0
+        const hasFooterActions =
+            actionPlacement === CardV2ActionPlacement.FOOTER &&
+            actionItems.length > 0
+        const hasHeaderContent = Boolean(
+            leadingSlot || eyebrow || title || subtitle || trailingSlot
+        )
+        const hasBodyContent = Boolean(
+            description || children || hasBodyActions
+        )
+        const hasFooterContent = Boolean(footer || hasFooterActions)
+        const hasContentColumn = Boolean(
+            hasHeaderContent || hasBodyContent || hasFooterContent
+        )
+        const shouldShowFooterDivider = Boolean(
+            hasFooterActions && (media || hasHeaderContent || hasBodyContent)
+        )
+        const resolvedScrollable = scrollable ?? Boolean(maxHeight)
+        const hasPropComposition = Boolean(
+            title ||
+            subtitle ||
+            description ||
+            eyebrow ||
+            media ||
+            leadingSlot ||
+            trailingSlot ||
+            footer ||
+            actionItems.length > 0
+        )
+        const baseId = useId()
+        const ids = {
+            eyebrow: `${baseId}-card-eyebrow`,
+            title: `${baseId}-card-title`,
+            subtitle: `${baseId}-card-subtitle`,
+            description: `${baseId}-card-description`,
+        }
+
+        const ariaLabel = useMemo(() => {
+            const parts = [title, subtitle, description].filter(isTextPrimitive)
+            return parts.length > 0 ? parts.join(' - ') : undefined
+        }, [title, subtitle, description])
+
+        return (
+            <CardV2Context.Provider
+                value={{
+                    tokens,
+                    centered,
+                    scrollable: resolvedScrollable,
+                    ids,
+                }}
+            >
+                <StyledCard
+                    ref={ref}
+                    $tokens={tokens}
+                    $interactive={interactive}
+                    $selected={selected}
+                    display="flex"
+                    flexDirection="column"
+                    width={width ?? tokens.width}
+                    minWidth={minWidth ?? tokens.minWidth}
+                    maxWidth={maxWidth ?? tokens.maxWidth}
+                    height={height}
+                    minHeight={minHeight}
+                    maxHeight={maxHeight}
+                    padding={getCardV2Padding(tokens, resolvedPadding)}
+                    border={tokens.border[variant]}
+                    borderRadius={tokens.borderRadius}
+                    backgroundColor={tokens.backgroundColor[variant]}
+                    boxShadow={tokens.boxShadow[variant]}
+                    overflow="hidden"
+                    role={resolvedRole}
+                    tabIndex={tabIndex ?? (interactive ? 0 : undefined)}
+                    aria-label={
+                        !title ? (providedAriaLabel ?? ariaLabel) : undefined
+                    }
+                    aria-labelledby={title ? ids.title : undefined}
+                    aria-describedby={
+                        description
+                            ? ids.description
+                            : subtitle
+                              ? ids.subtitle
+                              : undefined
+                    }
+                    aria-pressed={
+                        selected && resolvedRole === 'button' ? true : undefined
+                    }
+                    aria-selected={
+                        selected && supportsAriaSelected ? true : undefined
+                    }
+                    data-selected={selected || undefined}
+                    data-card-variant={variant}
+                    {...filteredPropsWithoutAriaLabel}
+                >
+                    {skeleton?.show ? (
+                        <CardV2Skeleton skeleton={skeleton} />
+                    ) : children && !hasPropComposition ? (
+                        <Block
+                            display="flex"
+                            flexDirection={isHorizontal ? 'row' : 'column'}
+                            alignItems={centered ? 'center' : 'stretch'}
+                            gap={tokens.layout.gap}
+                            minHeight={0}
+                            textAlign={centered ? 'center' : undefined}
+                        >
+                            {children}
+                        </Block>
+                    ) : (
+                        <Block
+                            display="flex"
+                            flexDirection={isHorizontal ? 'row' : 'column'}
+                            alignItems={
+                                isHorizontal && centered ? 'center' : 'stretch'
+                            }
+                            gap={
+                                media
+                                    ? tokens.layout.mediaGap[orientation]
+                                    : tokens.layout.gap
+                            }
+                            minHeight={0}
+                            textAlign={centered ? 'center' : undefined}
+                            justifyContent={centered ? 'center' : undefined}
+                        >
+                            <CardV2Media
+                                orientation={orientation}
+                                width={mediaWidth}
+                                height={mediaHeight}
+                                minHeight={mediaMinHeight}
+                            >
+                                {media}
+                            </CardV2Media>
+                            {hasContentColumn && (
+                                <Block
+                                    display="flex"
+                                    flexDirection="column"
+                                    minWidth={0}
+                                    minHeight={0}
+                                    gap={tokens.layout.gap}
+                                    textAlign={centered ? 'center' : undefined}
+                                    alignItems={centered ? 'center' : undefined}
+                                    width="100%"
+                                >
+                                    <CardV2Header
+                                        eyebrow={eyebrow}
+                                        title={title}
+                                        truncateTitle={truncateTitle}
+                                        subtitle={subtitle}
+                                        leadingSlot={leadingSlot}
+                                        trailingSlot={trailingSlot}
+                                    />
+                                    <CardV2Body
+                                        description={description}
+                                        actions={
+                                            hasBodyActions
+                                                ? actionItems
+                                                : undefined
+                                        }
+                                    >
+                                        {children}
+                                    </CardV2Body>
+                                    <CardV2Footer
+                                        divider={shouldShowFooterDivider}
+                                        actions={
+                                            hasFooterActions
+                                                ? actionItems
+                                                : undefined
+                                        }
+                                    >
+                                        {footer}
+                                    </CardV2Footer>
+                                </Block>
+                            )}
+                        </Block>
+                    )}
+                </StyledCard>
+            </CardV2Context.Provider>
+        )
+    }
+)
+
+CardV2Root.displayName = 'CardV2'
+
+const CardV2: typeof CardV2Root & {
+    Header: typeof CardV2Header
+    Meta: typeof CardV2Meta
+    Media: typeof CardV2Media
+    Body: typeof CardV2Body
+    Content: typeof CardV2Content
+    Actions: typeof CardV2Actions
+    Footer: typeof CardV2Footer
+    Skeleton: typeof CardV2Skeleton
+} = Object.assign(CardV2Root, {
+    Header: CardV2Header,
+    Meta: CardV2Meta,
+    Media: CardV2Media,
+    Body: CardV2Body,
+    Content: CardV2Content,
+    Actions: CardV2Actions,
+    Footer: CardV2Footer,
+    Skeleton: CardV2Skeleton,
+})
+
+export default CardV2

package/lib/components/CardV2/CardV2.utils.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react'
+import Block from '../Primitives/Block/Block'
+import Text from '../Text/Text'
+import type { CardV2TokensType } from './cardV2.tokens'
+import { CardV2Padding, type CardV2Action } from './cardV2.types'
+
+export const isTextPrimitive = (value: unknown): value is string | number =>
+    typeof value === 'string' || typeof value === 'number'
+
+export const toCardV2ActionArray = (
+    actions?: CardV2Action | CardV2Action[]
+) => {
+    if (!actions) return []
+    return Array.isArray(actions) ? actions : [actions]
+}
+
+export const getCardV2Padding = (
+    tokens: CardV2TokensType,
+    padding: CardV2Padding
+) => {
+    const paddingTokens = tokens.padding[padding]
+    return `${String(paddingTokens.y)} ${String(paddingTokens.x)}`
+}
+
+export const renderCardV2Text = ({
+    value,
+    id,
+    as,
+    styles,
+    dataElement,
+    truncate,
+}: {
+    value?: ReactNode
+    id: string
+    as: 'p' | 'h2'
+    styles: React.CSSProperties
+    dataElement: string
+    truncate?: boolean
+}) => {
+    if (!value) return null
+    const resolvedStyles = {
+        ...styles,
+        margin: 0,
+        lineHeight:
+            typeof styles.lineHeight === 'number'
+                ? `${styles.lineHeight}px`
+                : styles.lineHeight,
+        ...(truncate
+            ? {
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  maxWidth: '100%',
+              }
+            : {}),
+    }
+
+    if (isTextPrimitive(value)) {
+        return (
+            <Text
+                as={as}
+                id={id}
+                style={resolvedStyles}
+                truncate={truncate}
+                data-element={dataElement}
+            >
+                {value}
+            </Text>
+        )
+    }
+
+    return (
+        <Block id={id} style={resolvedStyles} data-element={dataElement}>
+            {value}
+        </Block>
+    )
+}