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

package/lib/components/ProgressBarV2/utils.ts

@@ -0,0 +1,154 @@
+import type { CSSObject } from 'styled-components'
+import type { ProgressBarV2TokenType } from './progressBarV2.tokens'
+import { ProgressBarV2Size } from './progressBarV2.types'
+
+/**
+ * Returns ordered bounds so `min` ≤ `max` (swaps when the caller passes a reversed range).
+ * Use this for progressbar ARIA (`aria-valuemin` must be ≤ `aria-valuemax`) and for math.
+ */
+export const normalizeRange = (
+    min: number,
+    max: number
+): { min: number; max: number } => {
+    if (max < min) {
+        return { min: max, max: min }
+    }
+    return { min, max }
+}
+
+export const clampValue = (value: number, min: number, max: number): number => {
+    const { min: lo, max: hi } = normalizeRange(min, max)
+    return Math.min(hi, Math.max(lo, value))
+}
+export const getProgressBarValueState = (
+    value: number,
+    min: number,
+    max: number
+): {
+    rangeMin: number
+    rangeMax: number
+    clampedValue: number
+    percentage: number
+} => {
+    const { min: rangeMin, max: rangeMax } = normalizeRange(min, max)
+    const clampedValue = clampValue(value, rangeMin, rangeMax)
+    const percentage =
+        rangeMax === rangeMin
+            ? 0
+            : ((clampedValue - rangeMin) / (rangeMax - rangeMin)) * 100
+    return { rangeMin, rangeMax, clampedValue, percentage }
+}
+
+export const calculatePercentage = (
+    value: number,
+    min: number,
+    max: number
+): number => getProgressBarValueState(value, min, max).percentage
+
+export const parseTokenValue = (
+    tokenValue: string | number | undefined,
+    fallback: number
+): number => {
+    if (typeof tokenValue === 'number') return tokenValue
+    if (!tokenValue) return fallback
+    const parsed = parseFloat(String(tokenValue))
+    return isNaN(parsed) ? fallback : parsed
+}
+
+export const extractAriaProps = (
+    rest: Record<string, unknown> | undefined
+): {
+    'aria-label'?: string
+    'aria-labelledby'?: string
+    restProps: Record<string, unknown>
+} => {
+    if (!rest) {
+        return { restProps: {} }
+    }
+
+    const {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        ...restProps
+    } = rest as {
+        'aria-label'?: string
+        'aria-labelledby'?: string
+        [key: string]: unknown
+    }
+
+    return {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+        restProps,
+    }
+}
+
+export const generateDefaultAriaLabel = (
+    value: number,
+    min: number,
+    max: number
+): string => {
+    const percentage = Math.round(calculatePercentage(value, min, max))
+    return `Progress: ${percentage}%`
+}
+
+export const getCircularDimensions = (
+    size: ProgressBarV2Size,
+    tokens: ProgressBarV2TokenType
+): {
+    circularSize: CSSObject['width']
+    sizeNum: number
+    strokeWidth: number
+    radius: number
+    circumference: number
+    center: number
+} => {
+    const circularSizeValue = tokens.circular.size[size]
+    // Preserve token type for width/height: numeric tokens stay numbers; avoid String(n) → unitless "n" in CSS.
+    const circularSize: CSSObject['width'] =
+        circularSizeValue === undefined || circularSizeValue === null
+            ? 48
+            : circularSizeValue
+    const sizeNum = parseTokenValue(circularSizeValue, 48)
+    const strokeWidth = parseTokenValue(tokens.circular.strokeWidth[size], 4)
+    const radius = (sizeNum - strokeWidth) / 2
+    const circumference = 2 * Math.PI * radius
+    const center = sizeNum / 2
+
+    return {
+        circularSize,
+        sizeNum,
+        strokeWidth,
+        radius,
+        circumference,
+        center,
+    }
+}
+
+/** Parse token like `"4 2"` or `"8 4"` into [dashLen, gapLen]. */
+export const parseCircularDashToken = (
+    token: string | undefined,
+    fallbackDash = 8,
+    fallbackGap = 4
+): [number, number] => {
+    if (!token || !String(token).trim()) {
+        return [fallbackDash, fallbackGap]
+    }
+    const parts = String(token)
+        .trim()
+        .split(/[\s,]+/)
+        .map((x) => parseFloat(x))
+        .filter((n) => Number.isFinite(n) && n > 0)
+    if (parts.length >= 2) {
+        return [parts[0], parts[1]]
+    }
+    return [fallbackDash, fallbackGap]
+}
+
+export const calculateCircularProgressStroke = (
+    circumference: number,
+    percentage: number
+) => ({
+    strokeDasharray: String(circumference),
+    strokeDashoffset: circumference - (percentage / 100) * circumference,
+})

package/lib/components/Radio/Radio.tsx

@@ -0,0 +1,237 @@
+import React from 'react'
+import { type RadioProps, RadioSize } from './types'
+import { getRadioTextProps, getRadioLabelStyles } from './utils'
+import { StyledRadioInput } from './StyledRadio'
+import Block from '../Primitives/Block/Block'
+import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'
+import { Tooltip } from '../Tooltip/Tooltip'
+import type { RadioTokensType } from './radio.token'
+
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { FOUNDATION_THEME } from '../../tokens'
+import { useErrorShake } from '../common/useErrorShake'
+import { getErrorShakeStyle } from '../common/error.animations'
+import { getTruncatedText } from '../../global-utils/GlobalUtils'
+
+export const Radio = ({
+    id,
+    checked,
+    defaultChecked = false,
+    onChange,
+    disabled = false,
+    required = false,
+    error = false,
+    size = RadioSize.MEDIUM,
+    children,
+    subtext,
+    slot,
+    name,
+    value,
+    maxLength,
+    ...rest
+}: RadioProps) => {
+    const radioTokens = useResponsiveTokens<RadioTokensType>('RADIO')
+    const generatedId = React.useId()
+    const uniqueId = id || generatedId
+    const shouldShake = useErrorShake(error)
+    const labelMaxLength = maxLength?.label
+    const subtextMaxLength = maxLength?.subtext
+
+    const subtextId = subtext ? `${uniqueId}-subtext` : undefined
+    const customAriaDescribedBy = (rest as { 'aria-describedby'?: string })[
+        'aria-describedby'
+    ]
+    const ariaDescribedBy =
+        subtextId && customAriaDescribedBy
+            ? `${customAriaDescribedBy} ${subtextId}`
+            : subtextId || customAriaDescribedBy
+
+    return (
+        <Block
+            data-radio={children ?? 'radio'}
+            data-status={disabled ? 'disabled' : 'enabled'}
+            data-state={checked ? 'checked' : 'unchecked'}
+            data-id={value ?? ''}
+            display="flex"
+            alignItems={subtext ? 'flex-start' : 'center'}
+            gap={radioTokens.gap}
+        >
+            <StyledRadioInput
+                type="radio"
+                id={uniqueId}
+                name={name}
+                checked={checked}
+                defaultChecked={defaultChecked}
+                disabled={disabled}
+                required={required}
+                onChange={onChange}
+                size={size}
+                $isDisabled={disabled}
+                $isChecked={checked || false}
+                $error={error}
+                $tokens={radioTokens}
+                style={getErrorShakeStyle(shouldShake)}
+                {...rest}
+                aria-required={required ? true : undefined}
+                aria-invalid={error ? true : undefined}
+                aria-describedby={ariaDescribedBy}
+            />
+
+            <RadioContent
+                uniqueId={uniqueId}
+                disabled={disabled}
+                error={error}
+                required={required}
+                size={size}
+                children={children}
+                subtext={subtext}
+                radioTokens={radioTokens}
+                slot={slot}
+                labelMaxLength={labelMaxLength}
+                subtextMaxLength={subtextMaxLength}
+                subtextId={subtextId}
+            />
+        </Block>
+    )
+}
+
+const RadioContent: React.FC<{
+    uniqueId: string
+    disabled: boolean
+    error: boolean
+    required: boolean
+    size: RadioSize
+    children?: React.ReactNode
+    subtext?: React.ReactNode
+    radioTokens: RadioTokensType
+    slot?: React.ReactNode
+    labelMaxLength?: number
+    subtextMaxLength?: number
+    subtextId?: string
+}> = ({
+    uniqueId,
+    disabled,
+    error,
+    required,
+    size,
+    children,
+    subtext,
+    radioTokens,
+    slot,
+    labelMaxLength,
+    subtextMaxLength,
+    subtextId,
+}) => {
+    const labelStyles = getRadioLabelStyles(radioTokens, disabled)
+    const textProps = getRadioTextProps(radioTokens, size, disabled, error)
+    const subtextProps = getRadioTextProps(
+        radioTokens,
+        size,
+        disabled,
+        error,
+        true
+    )
+    const isStringLabel =
+        typeof children === 'string' || typeof children === 'number'
+    const labelTruncation = isStringLabel
+        ? getTruncatedText(String(children), labelMaxLength)
+        : null
+    const subtextIsString =
+        typeof subtext === 'string' || typeof subtext === 'number'
+    const subtextTruncation = subtextIsString
+        ? getTruncatedText(String(subtext), subtextMaxLength)
+        : null
+
+    const labelContent = children ? (
+        <label htmlFor={uniqueId} style={labelStyles}>
+            <PrimitiveText
+                as="span"
+                fontSize={textProps.fontSize}
+                fontWeight={textProps.fontWeight}
+                color={textProps.color}
+            >
+                {labelTruncation?.isTruncated
+                    ? labelTruncation.truncatedValue
+                    : children}
+                {required && (
+                    <PrimitiveText
+                        as="span"
+                        color={radioTokens.required.color}
+                        style={{
+                            marginLeft: FOUNDATION_THEME.unit[2],
+                        }}
+                    >
+                        *
+                    </PrimitiveText>
+                )}
+            </PrimitiveText>
+        </label>
+    ) : null
+
+    const labelWithTooltip =
+        labelTruncation?.isTruncated && labelContent ? (
+            <Tooltip content={labelTruncation.fullValue}>
+                {labelContent}
+            </Tooltip>
+        ) : (
+            labelContent
+        )
+
+    const subtextContent = subtext ? (
+        <Block id={subtextId}>
+            <PrimitiveText
+                data-element="radio-description"
+                data-id={subtext ?? ''}
+                data-status={disabled ? 'disabled' : 'enabled'}
+                data-description-text={subtext}
+                as="span"
+                fontSize={subtextProps.fontSize}
+                fontWeight={subtextProps.fontWeight}
+                color={subtextProps.color}
+            >
+                {subtextTruncation?.isTruncated
+                    ? subtextTruncation.truncatedValue
+                    : subtext}
+            </PrimitiveText>
+        </Block>
+    ) : null
+
+    const subtextWithTooltip =
+        subtextTruncation?.isTruncated && subtextContent ? (
+            <Tooltip content={subtextTruncation.fullValue}>
+                {subtextContent}
+            </Tooltip>
+        ) : (
+            subtextContent
+        )
+
+    return (
+        <Block display="flex" flexDirection="column">
+            {labelWithTooltip && (
+                <Block
+                    data-element="radio-label"
+                    data-id={children ?? ''}
+                    display="flex"
+                    alignItems="center"
+                    gap={radioTokens.content.label.gap}
+                >
+                    {labelWithTooltip}
+                    {slot && (
+                        <Block
+                            data-element="icon"
+                            as="span"
+                            width={radioTokens.slot[size]}
+                        >
+                            {slot}
+                        </Block>
+                    )}
+                </Block>
+            )}
+            {subtextWithTooltip}
+        </Block>
+    )
+}
+
+Radio.displayName = 'Radio'
+
+export default Radio

package/lib/components/Radio/RadioGroup.tsx

@@ -0,0 +1,248 @@
+import React, { forwardRef, useState, useCallback, useId, useMemo } from 'react'
+import type { RadioGroupProps } from './types'
+import { isRadioElement, isValidRadioValue, getRadioTextProps } from './utils'
+import Block from '../Primitives/Block/Block'
+import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'
+import Radio from './Radio'
+import type { RadioTokensType } from './radio.token'
+import { RadioSize } from './types'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { FOUNDATION_THEME } from '../../tokens'
+import { useErrorShake } from '../common/useErrorShake'
+import { getErrorShakeStyle } from '../common/error.animations'
+
+const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+    (
+        {
+            id,
+            children,
+            label,
+            name,
+            value,
+            defaultValue,
+            onChange,
+            disabled,
+            required,
+            error,
+            ...rest
+        },
+        ref
+    ) => {
+        const radioTokens = useResponsiveTokens<RadioTokensType>('RADIO')
+        const generatedId = useId()
+        const uniqueId = id || generatedId
+        const shouldShake = useErrorShake(error || false)
+
+        const ariaLabelledBy = (rest as { 'aria-labelledby'?: string })[
+            'aria-labelledby'
+        ]
+        const customAriaDescribedBy = (rest as { 'aria-describedby'?: string })[
+            'aria-describedby'
+        ]
+        const labelId =
+            !ariaLabelledBy && label ? `${uniqueId}-label` : undefined
+
+        // Internal state for uncontrolled mode
+        const [internalValue, setInternalValue] = useState<string | undefined>(
+            defaultValue
+        )
+
+        // Determine if controlled or uncontrolled
+        const isControlled = value !== undefined
+        const currentValue = isControlled ? value : internalValue
+
+        const handleGroupChange = useCallback(
+            (newValue: string) => {
+                if (!isControlled) {
+                    setInternalValue(newValue)
+                }
+                onChange?.(newValue)
+            },
+            [isControlled, onChange]
+        )
+
+        // Handle keyboard navigation
+        const handleKeyDown = useCallback(
+            (e: React.KeyboardEvent) => {
+                if (disabled) return
+
+                const radios = Array.from(
+                    e.currentTarget.querySelectorAll(
+                        'input[type="radio"]:not(:disabled)'
+                    )
+                )
+                const currentIndex = radios.findIndex(
+                    (radio) => radio === e.target
+                )
+
+                if (currentIndex === -1) return
+
+                let nextIndex = currentIndex
+
+                switch (e.key) {
+                    case 'ArrowDown':
+                    case 'ArrowRight':
+                        e.preventDefault()
+                        nextIndex = (currentIndex + 1) % radios.length
+                        break
+                    case 'ArrowUp':
+                    case 'ArrowLeft':
+                        e.preventDefault()
+                        nextIndex =
+                            currentIndex === 0
+                                ? radios.length - 1
+                                : currentIndex - 1
+                        break
+                    case ' ':
+                    case 'Enter': {
+                        e.preventDefault()
+                        const targetRadio = radios[
+                            currentIndex
+                        ] as HTMLInputElement
+                        if (targetRadio && targetRadio.value) {
+                            handleGroupChange(targetRadio.value)
+                        }
+                        return
+                    }
+                    default:
+                        return
+                }
+
+                const nextRadio = radios[nextIndex] as HTMLInputElement
+                if (nextRadio) {
+                    nextRadio.focus()
+                    if (nextRadio.value) {
+                        handleGroupChange(nextRadio.value)
+                    }
+                }
+            },
+            [disabled, handleGroupChange]
+        )
+
+        // Memoize cloning so simple group-level disabled toggles don't require
+        // re-cloning every child. Group disabled is applied via a <fieldset>.
+        const enhancedChildren = useMemo(() => {
+            return React.Children.map(children, (child) => {
+                if (
+                    !React.isValidElement(child) ||
+                    !isRadioElement(child, Radio)
+                ) {
+                    return null
+                }
+
+                const childValue = child.props.value
+                if (!isValidRadioValue(childValue)) {
+                    console.warn(
+                        'RadioGroup: Radio child must have a string value prop'
+                    )
+                    return null
+                }
+
+                const isChecked = currentValue === childValue
+
+                return React.cloneElement(child, {
+                    name,
+                    checked: isChecked,
+                    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+                        if (e.target.checked) {
+                            handleGroupChange(childValue)
+                        }
+                    },
+                    // Note: do NOT derive from group `disabled` here; group-level
+                    // disabled is handled by the wrapping <fieldset>.
+                    disabled: child.props.disabled,
+                    error: error || child.props.error,
+                    required: required || child.props.required,
+                })
+            })
+        }, [children, currentValue, error, handleGroupChange, name, required])
+
+        return (
+            <Block
+                data-radiogroup={label ?? 'radiogroup'}
+                data-status={disabled ? 'disabled' : 'enabled'}
+                ref={ref}
+                id={uniqueId}
+                display="flex"
+                flexDirection="column"
+                gap={radioTokens.group.gap}
+                role="radiogroup"
+                style={getErrorShakeStyle(shouldShake)}
+                onKeyDown={handleKeyDown}
+                {...rest}
+                aria-label={!ariaLabelledBy && !labelId ? label : undefined}
+                aria-labelledby={ariaLabelledBy || labelId}
+                aria-describedby={customAriaDescribedBy}
+                aria-required={required ? true : undefined}
+                aria-invalid={error ? true : undefined}
+            >
+                {label && (
+                    <GroupLabel
+                        radioTokens={radioTokens}
+                        required={required}
+                        id={labelId}
+                    >
+                        {label}
+                    </GroupLabel>
+                )}
+                <fieldset
+                    disabled={disabled}
+                    style={{
+                        margin: 0,
+                        padding: 0,
+                        border: 0,
+                        minInlineSize: 0,
+                    }}
+                >
+                    <Block
+                        display="flex"
+                        flexDirection="column"
+                        gap={radioTokens.group.gap}
+                    >
+                        {enhancedChildren}
+                    </Block>
+                </fieldset>
+            </Block>
+        )
+    }
+)
+
+const GroupLabel: React.FC<{
+    children: React.ReactNode
+    radioTokens: RadioTokensType
+    required?: boolean
+    id?: string
+}> = ({ children, radioTokens, required, id }) => {
+    const textProps = getRadioTextProps(
+        radioTokens,
+        RadioSize.MEDIUM,
+        false,
+        false
+    )
+
+    return (
+        <PrimitiveText
+            as="label"
+            id={id}
+            fontSize={textProps.fontSize}
+            fontWeight={textProps.fontWeight}
+            color={textProps.color}
+            style={{ marginBottom: radioTokens.group.gap }}
+        >
+            {children}
+            {required && (
+                <PrimitiveText
+                    as="span"
+                    color={radioTokens.required.color}
+                    style={{ marginLeft: FOUNDATION_THEME.unit[2] }}
+                >
+                    *
+                </PrimitiveText>
+            )}
+        </PrimitiveText>
+    )
+}
+
+RadioGroup.displayName = 'RadioGroup'
+
+export default RadioGroup

package/lib/components/Radio/StyledRadio.tsx

@@ -0,0 +1,71 @@
+import styled, { css } from 'styled-components'
+import { RadioSize } from './types'
+import type { RadioTokensType } from './radio.token'
+
+import { radioAnimations } from './radio.animations'
+
+export const StyledRadioInput = styled.input<{
+    size: RadioSize
+    $isDisabled: boolean
+    $isChecked: boolean
+    $error?: boolean
+    $tokens: RadioTokensType
+}>`
+    appearance: none;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border-radius: 50%;
+    margin: 0;
+    padding: 0;
+    flex-shrink: 0;
+
+    ${({ size, $isChecked, $isDisabled, $tokens }) => {
+        const state = $isDisabled ? 'disabled' : 'default'
+        const indicatorState = $isChecked ? 'active' : 'inactive'
+
+        return css`
+            ${radioAnimations}
+
+            background-color: ${$tokens.indicator[indicatorState]
+                .backgroundColor[state]};
+            border: ${$tokens.borderWidth[indicatorState][state]}px solid
+                ${$tokens.indicator[indicatorState].borderColor[state]};
+            width: ${$tokens.height[size]};
+            height: ${$tokens.height[size]};
+
+            &::after {
+                content: '';
+                width: 50%;
+                height: 50%;
+                border-radius: 50%;
+                background-color: ${$isChecked
+                    ? $tokens.activeIndicator.active.backgroundColor[state]
+                    : 'transparent'};
+                transform: ${$isChecked ? 'scale(1)' : 'scale(0)'};
+                transition:
+                    transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
+            }
+            &:focus-visible {
+                outline: 2px solid
+                    ${$tokens.indicator[indicatorState].borderColor[state]};
+                outline-offset: 2px;
+                /* WCAG 2.4.7 Focus Visible (AA): Focus indicator must be visible
+                 * WCAG 1.4.11 Non-text Contrast (AA): Focus outline must have contrast ratio ≥3:1 against adjacent colors
+                 * Manual verification recommended for all states */
+            }
+
+            &:not(:disabled):hover {
+                background-color: ${$tokens.indicator[indicatorState]
+                    .backgroundColor.hover};
+                border-color: ${$tokens.indicator[indicatorState].borderColor
+                    .hover};
+            }
+
+            cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};
+        `
+    }}
+`