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

package/lib/components/ButtonV2/buttonV2.tokens.ts

@@ -0,0 +1,87 @@
+import type { CSSObject } from 'styled-components'
+import {
+    ButtonV2Size,
+    ButtonV2State,
+    ButtonV2SubType,
+    ButtonV2Type,
+    PaddingDirection,
+} from './buttonV2.types'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+import { FoundationTokenType } from '../../tokens/theme.token'
+import { getButtonV2LightTokens } from './buttonV2.light.tokens'
+import { Theme } from '../../context/theme.enum'
+import { getButtonV2DarkTokens } from './buttonV2.dark.tokens'
+
+export type ButtonV2TokensType = Readonly<{
+    gap: CSSObject['gap']
+    backgroundColor: {
+        [key in ButtonV2Type]: {
+            [key in ButtonV2SubType]: {
+                [key in ButtonV2State]: CSSObject['background']
+            }
+        }
+    }
+    borderRadius: {
+        [key in ButtonV2Size]: {
+            [key in ButtonV2Type]: {
+                [key in ButtonV2SubType]: CSSObject['borderRadius']
+            }
+        }
+    }
+    padding: {
+        [key in PaddingDirection]: {
+            [key in ButtonV2Size]: {
+                [key in ButtonV2Type]: {
+                    [key in ButtonV2SubType]: CSSObject['padding']
+                }
+            }
+        }
+    }
+    border: {
+        [key in ButtonV2Type]: {
+            [key in ButtonV2SubType]: {
+                [key in ButtonV2State]: CSSObject['border']
+            }
+        }
+    }
+    shadow: {
+        [key in ButtonV2Type]: {
+            [key in ButtonV2SubType]: {
+                [key in ButtonV2State]: CSSObject['boxShadow']
+            }
+        }
+    }
+    text: {
+        color: {
+            [key in ButtonV2Type]: {
+                [key in ButtonV2SubType]: {
+                    [key in ButtonV2State]: CSSObject['color']
+                }
+            }
+        }
+        fontSize: {
+            [key in ButtonV2Size]: CSSObject['fontSize']
+        }
+        fontWeight: {
+            [key in ButtonV2Size]: CSSObject['fontWeight']
+        }
+        lineHeight: {
+            [key in ButtonV2Size]: CSSObject['lineHeight']
+        }
+    }
+}>
+
+export type ResponsiveButtonV2Tokens = {
+    [key in keyof BreakpointType]: ButtonV2TokensType
+}
+
+export const getButtonV2Tokens = (
+    foundationToken: FoundationTokenType,
+    theme: Theme | string = Theme.LIGHT
+): ResponsiveButtonV2Tokens => {
+    if (theme === Theme.DARK || theme === 'dark') {
+        return getButtonV2DarkTokens(foundationToken)
+    }
+
+    return getButtonV2LightTokens(foundationToken)
+}

package/lib/components/ButtonV2/buttonV2.types.ts

@@ -0,0 +1,80 @@
+import React from 'react'
+import type { SkeletonVariant } from '../Skeleton/skeleton.tokens'
+
+export enum ButtonV2Type {
+    PRIMARY = 'primary',
+    SECONDARY = 'secondary',
+    DANGER = 'danger',
+    SUCCESS = 'success',
+}
+
+export enum ButtonV2Size {
+    SMALL = 'sm',
+    MEDIUM = 'md',
+    LARGE = 'lg',
+}
+
+export enum ButtonV2SubType {
+    DEFAULT = 'default',
+    ICON_ONLY = 'iconOnly',
+    INLINE = 'inline',
+}
+
+export enum ButtonV2State {
+    DEFAULT = 'default',
+    HOVER = 'hover',
+    ACTIVE = 'active',
+    DISABLED = 'disabled',
+}
+
+export enum PaddingDirection {
+    TOP = 'top',
+    RIGHT = 'right',
+    BOTTOM = 'bottom',
+    LEFT = 'left',
+}
+
+export type ButtonSlot = {
+    slot: React.ReactNode
+    maxHeight?: string | number
+}
+
+export type ButtonSkeleton = {
+    showSkeleton?: boolean
+    skeletonVariant?: SkeletonVariant
+}
+
+export type ButtonBaseProps = {
+    buttonType?: ButtonV2Type
+    size?: ButtonV2Size
+    subType?: ButtonV2SubType
+    text?: string
+    leftSlot?: ButtonSlot
+    rightSlot?: ButtonSlot
+    loading?: boolean
+    skeleton?: ButtonSkeleton
+    buttonGroupPosition?: 'center' | 'left' | 'right'
+    width?: string | number
+    minWidth?: string | number
+    maxWidth?: string | number
+    state?: ButtonV2State
+}
+
+export type ButtonV2Props = ButtonBaseProps &
+    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'className'>
+
+export type LinkButtonProps = ButtonBaseProps & {
+    href: string
+    target?: string
+    rel?: string
+    disabled?: boolean
+} & Omit<
+        React.AnchorHTMLAttributes<HTMLAnchorElement>,
+        | 'href'
+        | 'target'
+        | 'rel'
+        | 'children'
+        | 'className'
+        | 'style'
+        | 'dangerouslySetInnerHTML'
+    >

package/lib/components/ButtonV2/index.ts

@@ -0,0 +1,11 @@
+export { default as ButtonV2 } from './ButtonV2'
+export { renderButtonContent } from './ButtonV2'
+export { default as IconButton } from './IconButton'
+export { default as LinkButton } from './LinkButton'
+export { ButtonGroupV2 } from './ButtonGroupV2'
+export type { ButtonV2Props, LinkButtonProps } from './buttonV2.types'
+export type { IconButtonProps } from './IconButton'
+export type { ButtonGroupV2Props, ButtonGroupPosition } from './ButtonGroupV2'
+export * from './buttonV2.types'
+export * from './buttonV2.tokens'
+export * from './utils'

package/lib/components/ButtonV2/utils.ts

@@ -0,0 +1,348 @@
+import { addPxToValue } from './../../global-utils/GlobalUtils'
+import type { MouseEvent } from 'react'
+import {
+    ButtonV2Size,
+    ButtonV2State,
+    ButtonV2SubType,
+    ButtonV2Type,
+    PaddingDirection,
+} from './buttonV2.types'
+import type { ButtonV2TokensType } from './buttonV2.tokens'
+import { FOUNDATION_THEME } from '../../tokens'
+
+export function getButtonV2BorderRadius(
+    size: ButtonV2Size,
+    buttonType: ButtonV2Type,
+    subType: ButtonV2SubType,
+    buttonGroupPosition: 'center' | 'left' | 'right' | undefined,
+    tokens: ButtonV2TokensType
+): string {
+    const variantBorderRadius = String(
+        tokens.borderRadius[size][buttonType][subType]
+    )
+
+    if (buttonGroupPosition === undefined) {
+        return variantBorderRadius
+    }
+
+    if (buttonGroupPosition === 'left') {
+        return `${variantBorderRadius} 0 0 ${variantBorderRadius}`
+    }
+
+    if (buttonGroupPosition === 'right') {
+        return `0 ${variantBorderRadius} ${variantBorderRadius} 0`
+    }
+
+    return '0px 0px 0px 0px'
+}
+
+export function createButtonClickHandler(
+    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void,
+    isSkeleton?: boolean,
+    isDisabled?: boolean,
+    isLoading?: boolean
+) {
+    return (event: MouseEvent<HTMLButtonElement>) => {
+        if (isSkeleton || isDisabled || isLoading) return
+        onClick?.(event)
+    }
+}
+
+export function getButtonHeight(subType: ButtonV2SubType): string | undefined {
+    if (subType === ButtonV2SubType.INLINE) {
+        return 'fit-content'
+    }
+    return undefined
+}
+
+export function getIconMaxHeight(
+    subType: ButtonV2SubType,
+    leftSlotMaxHeight: string | number | undefined,
+    rightSlotMaxHeight: string | number | undefined,
+    size: ButtonV2Size
+): string {
+    if (subType === ButtonV2SubType.INLINE) {
+        return '100%'
+    }
+    // Default max height based on button size
+    const defaultMaxHeightMap: Record<ButtonV2Size, string> = {
+        [ButtonV2Size.SMALL]: '16px',
+        [ButtonV2Size.MEDIUM]: '18px',
+        [ButtonV2Size.LARGE]: '20px',
+    }
+    const defaultMaxHeight = defaultMaxHeightMap[size] || '16px'
+    return String(leftSlotMaxHeight ?? rightSlotMaxHeight ?? defaultMaxHeight)
+}
+
+export function getButtonStatus(
+    isLoading: boolean | undefined,
+    isDisabled: boolean | undefined
+): 'loading' | 'disabled' | 'enabled' {
+    if (isLoading) return 'loading'
+    if (isDisabled) return 'disabled'
+    return 'enabled'
+}
+
+export function getButtonTabIndex(
+    isDisabled: boolean,
+    providedTabIndex?: number
+): number {
+    if (isDisabled) return -1
+    if (providedTabIndex !== undefined) {
+        return Math.max(-1, Math.min(0, providedTabIndex))
+    }
+    return 0
+}
+
+export function getSkeletonBorderRadius(
+    size: ButtonV2Size,
+    buttonType: ButtonV2Type,
+    subType: ButtonV2SubType,
+    buttonGroupPosition: 'center' | 'left' | 'right' | undefined,
+    tokens: ButtonV2TokensType
+): string {
+    return getButtonV2BorderRadius(
+        size,
+        buttonType,
+        subType,
+        buttonGroupPosition,
+        tokens
+    )
+}
+
+export function getSkeletonWidth(width?: string | number): string {
+    return width ? String(width) : 'fit-content'
+}
+
+export function getButtonBorderStyles(
+    buttonGroupPosition: 'center' | 'left' | 'right' | undefined,
+    defaultBorder: string | undefined
+): {
+    border?: string
+    borderTop?: string
+    borderRight?: string
+    borderBottom?: string
+    borderLeft?: string
+} {
+    const border = defaultBorder ?? 'none'
+
+    if (buttonGroupPosition === undefined) {
+        return { border }
+    }
+
+    if (buttonGroupPosition === 'left') {
+        return {
+            borderTop: border,
+            borderBottom: border,
+            borderLeft: border,
+            borderRight: border,
+        }
+    }
+
+    if (buttonGroupPosition === 'right') {
+        return {
+            borderTop: border,
+            borderBottom: border,
+            borderLeft: border,
+            borderRight: border,
+        }
+    }
+
+    return {
+        borderTop: border,
+        borderBottom: border,
+        borderLeft: 'none',
+        borderRight: 'none',
+    }
+}
+
+/** Return type for getButtonStyles (explicit to avoid csstype reference in .d.ts) */
+export type ButtonStylesReturn = {
+    background?: string
+    color?: string
+    border?: string
+    borderTop?: string
+    borderBottom?: string
+    borderLeft?: string
+    borderRight?: string
+    cursor?: string
+    _active?: Record<string, string | number | undefined>
+    _hover?: Record<string, string | number | undefined>
+    _focusVisible?: Record<string, string | number | undefined>
+    _disabled?: Record<string, string | number | undefined>
+}
+
+/**
+ * Get all button styles in one call for better performance
+ */
+export function getButtonStyles(
+    isSkeleton: boolean,
+    isDisabled: boolean,
+    buttonType: ButtonV2Type,
+    subType: ButtonV2SubType,
+    tokens: ButtonV2TokensType,
+    buttonGroupPosition?: 'center' | 'left' | 'right'
+): ButtonStylesReturn {
+    const tokenState = isSkeleton
+        ? 'transparent'
+        : tokens.backgroundColor[buttonType][subType].default
+    const textColorState = isSkeleton
+        ? 'transparent'
+        : tokens.text.color[buttonType][subType].default
+    const borderState = isSkeleton
+        ? 'transparent'
+        : tokens.border[buttonType][subType].default
+
+    const borderStyles = buttonGroupPosition
+        ? getButtonBorderStyles(buttonGroupPosition, String(borderState))
+        : { border: String(borderState) }
+
+    const activeBorder = tokens.border[buttonType][subType]?.active
+    const activeBorderStyles =
+        buttonGroupPosition && !isSkeleton && !isDisabled && activeBorder
+            ? getButtonBorderStyles(buttonGroupPosition, String(activeBorder))
+            : undefined
+
+    const hoverBorder = tokens.border[buttonType][subType]?.hover
+    const hoverBorderStyles =
+        buttonGroupPosition && !isSkeleton && hoverBorder
+            ? getButtonBorderStyles(buttonGroupPosition, String(hoverBorder))
+            : undefined
+
+    const defaultBorder = tokens.border[buttonType][subType]?.default
+    const focusBorderStyles =
+        buttonGroupPosition && !isSkeleton && defaultBorder
+            ? getButtonBorderStyles(buttonGroupPosition, String(defaultBorder))
+            : undefined
+
+    const disabledBorder = tokens.border[buttonType][subType]?.disabled
+    const disabledBorderStyles =
+        buttonGroupPosition && !isSkeleton && disabledBorder
+            ? getButtonBorderStyles(buttonGroupPosition, String(disabledBorder))
+            : undefined
+
+    return {
+        background: tokenState,
+        color: textColorState,
+        ...borderStyles,
+        _active:
+            isSkeleton || isDisabled
+                ? undefined
+                : {
+                      background:
+                          tokens.backgroundColor[buttonType][subType].active,
+                      ...(activeBorderStyles || {
+                          border: String(
+                              tokens.border[buttonType][subType].active
+                          ),
+                      }),
+                      boxShadow: tokens.shadow[buttonType][subType].active,
+                      transform: 'scale(0.99)',
+                  },
+        _hover: isSkeleton
+            ? undefined
+            : {
+                  background: tokens.backgroundColor[buttonType][subType].hover,
+                  color: tokens.text.color[buttonType][subType].hover,
+                  ...(hoverBorderStyles || {
+                      border: String(tokens.border[buttonType][subType].hover),
+                  }),
+              },
+        _focusVisible: isSkeleton
+            ? undefined
+            : {
+                  ...(focusBorderStyles || {
+                      border: String(
+                          tokens.border[buttonType][subType].default
+                      ),
+                  }),
+                  boxShadow: `0 0 0 3px ${FOUNDATION_THEME.colors.primary[200]}`,
+              },
+        _disabled: isSkeleton
+            ? {
+                  background: 'transparent',
+                  border: 'transparent',
+                  borderTop: 'none',
+                  borderBottom: 'none',
+                  borderLeft: 'none',
+                  borderRight: 'none',
+                  cursor: 'default',
+              }
+            : {
+                  background:
+                      tokens.backgroundColor[buttonType][subType].disabled,
+                  ...(disabledBorderStyles || {
+                      border: String(
+                          tokens.border[buttonType][subType].disabled
+                      ),
+                  }),
+                  cursor: 'not-allowed',
+              },
+    } as ButtonStylesReturn
+}
+
+export function getIconColor(
+    isSkeleton: boolean,
+    disabled: boolean | undefined,
+    buttonType: ButtonV2Type,
+    subType: ButtonV2SubType,
+    tokens: ButtonV2TokensType
+): string {
+    if (isSkeleton) return 'transparent'
+    const color =
+        tokens.text.color[buttonType][subType][
+            disabled ? ButtonV2State.DISABLED : ButtonV2State.DEFAULT
+        ]
+    return color ? String(color) : 'transparent'
+}
+
+export function getTextColor(
+    isSkeleton: boolean,
+    disabled: boolean | undefined,
+    state: ButtonV2State,
+    buttonType: ButtonV2Type,
+    subType: ButtonV2SubType,
+    tokens: ButtonV2TokensType
+): string {
+    if (isSkeleton) return 'transparent'
+    const color =
+        tokens.text.color[buttonType][subType][
+            disabled ? ButtonV2State.DISABLED : state
+        ]
+    return color ? String(color) : 'transparent'
+}
+
+export function getButtonPadding(
+    size: ButtonV2Size,
+    buttonType: ButtonV2Type,
+    subType: ButtonV2SubType,
+    tokens: ButtonV2TokensType
+): {
+    top: string
+    right: string
+    bottom: string
+    left: string
+} {
+    return {
+        top: String(
+            tokens.padding[PaddingDirection.TOP][size][buttonType][subType]
+        ),
+        right: String(
+            tokens.padding[PaddingDirection.RIGHT][size][buttonType][subType]
+        ),
+        bottom: String(
+            tokens.padding[PaddingDirection.BOTTOM][size][buttonType][subType]
+        ),
+        left: String(
+            tokens.padding[PaddingDirection.LEFT][size][buttonType][subType]
+        ),
+    }
+}
+
+export function getButtonLineHeight(
+    size: ButtonV2Size,
+    tokens: ButtonV2TokensType
+): string {
+    const lineHeight = tokens.text.lineHeight?.[size]
+    return lineHeight ? addPxToValue(lineHeight) : 'normal'
+}

package/lib/components/Card/Card.tsx

@@ -0,0 +1,141 @@
+import { forwardRef, useId, useMemo } from 'react'
+import Block from '../Primitives/Block/Block'
+import { type CardProps } from './types'
+import type { CardTokenType } from './card.tokens'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { toPixels } from '../../global-utils/GlobalUtils'
+import {
+    getCardVariant,
+    isDefaultCard,
+    isAlignedCard,
+    isCustomCard,
+} from './utils'
+import { DefaultCard, AlignedCard, CustomCard } from './CardComponents'
+import CardSkeleton from './CardSkeleton'
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+    ({ maxWidth = 'auto', minHeight, maxHeight, skeleton, ...props }, ref) => {
+        const cardToken = useResponsiveTokens<CardTokenType>('CARD')
+        const variant = getCardVariant(
+            'variant' in props ? props.variant : undefined
+        )
+
+        // Generate unique IDs for ARIA relationships
+        const baseId = useId()
+        const cardId = `${baseId}-card`
+        const headerTitle =
+            'headerTitle' in props ? props.headerTitle : undefined
+
+        // Generate accessible label for the card
+        const cardLabel = useMemo(() => {
+            const parts: string[] = []
+            if ('headerTitle' in props && props.headerTitle) {
+                parts.push(props.headerTitle)
+            }
+            if ('bodyTitle' in props && props.bodyTitle) {
+                parts.push(props.bodyTitle)
+            }
+            return parts.length > 0 ? parts.join(' - ') : undefined
+        }, [props])
+
+        const renderCardContent = () => {
+            if (isDefaultCard(variant)) {
+                return (
+                    <DefaultCard
+                        props={
+                            props as Extract<CardProps, { variant?: undefined }>
+                        }
+                        cardToken={cardToken}
+                        maxHeight={maxHeight}
+                        baseId={baseId}
+                    />
+                )
+            }
+
+            if (isAlignedCard(variant)) {
+                return (
+                    <AlignedCard
+                        props={
+                            props as Extract<CardProps, { variant: 'aligned' }>
+                        }
+                        cardToken={cardToken}
+                        maxHeight={maxHeight}
+                        baseId={baseId}
+                    />
+                )
+            }
+
+            if (isCustomCard(variant)) {
+                return (
+                    <CustomCard
+                        props={
+                            props as Extract<CardProps, { variant: 'custom' }>
+                        }
+                        cardToken={cardToken}
+                        maxHeight={maxHeight}
+                        baseId={baseId}
+                    />
+                )
+            }
+
+            return null
+        }
+
+        const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+            const target = e.currentTarget as HTMLElement
+            target.style.outline = cardToken.border as string
+            target.style.backgroundColor = cardToken.backgroundColor as string
+        }
+
+        const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
+            const target = e.currentTarget as HTMLElement
+            target.style.outline = cardToken.border as string
+            target.style.backgroundColor = cardToken.backgroundColor as string
+        }
+
+        return (
+            <Block
+                ref={ref}
+                id={cardId}
+                maxWidth={
+                    maxWidth !== 'auto'
+                        ? toPixels(maxWidth)
+                        : cardToken.maxWidth
+                }
+                maxHeight={maxHeight ? toPixels(maxHeight) : undefined}
+                minHeight={minHeight ? toPixels(minHeight) : undefined}
+                outline={cardToken.border}
+                borderRadius={cardToken.borderRadius}
+                backgroundColor={cardToken.backgroundColor}
+                boxShadow={cardToken.boxShadow}
+                display="flex"
+                flexDirection="column"
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                data-card={headerTitle}
+                role="region"
+                aria-label={cardLabel}
+                aria-labelledby={
+                    'headerTitle' in props && props.headerTitle
+                        ? `${baseId}-header-title`
+                        : undefined
+                }
+            >
+                {skeleton?.show ? (
+                    <CardSkeleton
+                        skeleton={skeleton}
+                        maxHeight={maxHeight}
+                        minHeight={minHeight}
+                        maxWidth={maxWidth}
+                    />
+                ) : (
+                    renderCardContent()
+                )}
+            </Block>
+        )
+    }
+)
+
+Card.displayName = 'Card'
+
+export default Card