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

package/lib/components/Inputs/NumberInput/utils.ts

@@ -0,0 +1,329 @@
+/**
+ * Sanitizes a number input string to ensure it's a valid number format
+ * Similar to Chakra UI's number input sanitization behavior
+ *
+ * @param inputValue - The raw input string value
+ * @param allowNegative - Whether negative numbers are allowed
+ * @returns Sanitized string value
+ */
+export const sanitizeNumberInput = (
+    inputValue: string,
+    allowNegative: boolean = true
+): string => {
+    // Allow empty string for intermediate editing states
+    if (inputValue === '') {
+        return ''
+    }
+
+    // Allow lone minus for intermediate typing (e.g., user is typing "-5")
+    if (inputValue === '-' && allowNegative) {
+        return '-'
+    }
+
+    // Remove all characters except: digits, decimal point, and minus sign
+    let sanitized = inputValue.replace(/[^\d.-]/g, '')
+
+    // Handle negative sign restrictions
+    if (!allowNegative) {
+        // Remove all minus signs
+        sanitized = sanitized.replace(/-/g, '')
+    } else {
+        // Only allow minus at the start
+        const firstMinusIndex = sanitized.indexOf('-')
+        if (firstMinusIndex !== -1) {
+            // Keep only the first minus and only if it's at position 0
+            if (firstMinusIndex === 0) {
+                // Remove all other minus signs
+                sanitized = '-' + sanitized.substring(1).replace(/-/g, '')
+            } else {
+                // Minus not at start - remove all minus signs
+                sanitized = sanitized.replace(/-/g, '')
+            }
+        }
+    }
+
+    // Handle multiple decimal points - keep only the first one
+    const firstDotIndex = sanitized.indexOf('.')
+    if (firstDotIndex !== -1) {
+        const beforeDot = sanitized.substring(0, firstDotIndex + 1)
+        const afterDot = sanitized
+            .substring(firstDotIndex + 1)
+            .replace(/\./g, '')
+        sanitized = beforeDot + afterDot
+    }
+
+    // Prevent -0, -0., -0.0, -0.00, etc.
+    if (sanitized.startsWith('-0')) {
+        const afterZero = sanitized.substring(2)
+        // Check if it's exactly -0 or -0. or -0.000...
+        if (afterZero === '' || afterZero === '.' || /^\.0+$/.test(afterZero)) {
+            sanitized = '0'
+        }
+    }
+
+    return sanitized
+}
+
+/**
+ * Clamps a numeric value to the nearest valid boundary (min or max)
+ * If value is less than min, returns min
+ * If value is greater than max, returns max
+ * Otherwise returns the value unchanged
+ *
+ * @param value - The numeric value to clamp
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns Clamped numeric value
+ */
+export const clampToBoundary = (
+    value: number,
+    min?: number,
+    max?: number
+): number => {
+    if (min !== undefined && value < min) {
+        return min
+    }
+    if (max !== undefined && value > max) {
+        return max
+    }
+    return value
+}
+
+/**
+ * Increments a value by step, respecting min/max constraints
+ *
+ * @param currentValue - Current numeric value (can be null)
+ * @param step - Step size
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @param preventNegative - Whether to prevent negative values
+ * @returns New incremented value, clamped to boundaries
+ */
+export const incrementValue = (
+    currentValue: number | null,
+    step: number = 1,
+    min?: number,
+    max?: number,
+    preventNegative: boolean = false
+): number => {
+    const baseValue = currentValue ?? min ?? 0
+    const newValue = baseValue + step
+    let clampedValue = clampToBoundary(newValue, min, max)
+
+    if (preventNegative && clampedValue < 0) {
+        clampedValue = 0
+    }
+
+    return clampedValue
+}
+
+/**
+ * Decrements a value by step, respecting min/max constraints
+ *
+ * @param currentValue - Current numeric value (can be null)
+ * @param step - Step size
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @param preventNegative - Whether to prevent negative values
+ * @returns New decremented value, clamped to boundaries
+ */
+export const decrementValue = (
+    currentValue: number | null,
+    step: number = 1,
+    min?: number,
+    max?: number,
+    preventNegative: boolean = false
+): number => {
+    const baseValue = currentValue ?? min ?? 0
+    const newValue = baseValue - step
+    let clampedValue = clampToBoundary(newValue, min, max)
+
+    if (preventNegative && clampedValue < 0) {
+        clampedValue = 0
+    }
+
+    return clampedValue
+}
+
+/**
+ * Clamps and sanitizes the value on blur
+ * Similar to Chakra UI's clampValueOnBlur behavior
+ *
+ * @param inputValue - The input string value
+ * @param allowNegative - Whether negative numbers are allowed
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns Clamped and sanitized value string
+ */
+export const clampValueOnBlur = (
+    inputValue: string,
+    allowNegative: boolean = true,
+    min?: number,
+    max?: number
+): string => {
+    if (inputValue === '' || inputValue === '-') {
+        return ''
+    }
+
+    // Sanitize first
+    const sanitized = sanitizeNumberInput(inputValue, allowNegative)
+
+    // If still empty or just minus, return empty
+    if (sanitized === '' || sanitized === '-') {
+        return ''
+    }
+
+    const numValue = Number(sanitized)
+
+    // If not a valid number, return empty
+    if (isNaN(numValue)) {
+        return ''
+    }
+
+    // Prevent -0
+    const normalizedValue = Object.is(numValue, -0) ? 0 : numValue
+
+    let clampedValue = normalizedValue
+    if (!allowNegative && clampedValue < 0) {
+        clampedValue = 0
+    }
+
+    clampedValue = clampToBoundary(clampedValue, min, max)
+
+    return String(clampedValue)
+}
+
+/**
+ * Checks if a numeric value is outside the valid range
+ *
+ * @param value - The numeric value to check
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns True if value is outside the valid range
+ */
+export const isValueOutsideRange = (
+    value: number,
+    min?: number,
+    max?: number
+): boolean => {
+    if (min !== undefined && value < min) return true
+    if (max !== undefined && value > max) return true
+    return false
+}
+
+/**
+ * Checks if incrementing would exceed max
+ *
+ * @param currentValue - Current numeric value (can be null)
+ * @param step - Step size
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns True if incrementing would exceed max
+ */
+export const wouldExceedMax = (
+    currentValue: number | null,
+    step: number,
+    min?: number,
+    max?: number
+): boolean => {
+    if (max === undefined) return false
+    const baseValue = currentValue ?? min ?? 0
+    return baseValue + step > max
+}
+
+/**
+ * Checks if decrementing would go below min
+ *
+ * @param currentValue - Current numeric value (can be null)
+ * @param step - Step size
+ * @param min - Minimum allowed value
+ * @param preventNegative - Whether to prevent negative values
+ * @returns True if decrementing would go below min
+ */
+export const wouldGoBelowMin = (
+    currentValue: number | null,
+    step: number,
+    min?: number,
+    preventNegative: boolean = false
+): boolean => {
+    if (currentValue === null) {
+        if (preventNegative) return true
+        if (min !== undefined) {
+            const startValue = min ?? 0
+            return startValue - step < min
+        }
+        return false
+    }
+
+    if (min !== undefined) {
+        return currentValue <= min || currentValue - step < min
+    }
+
+    if (preventNegative) {
+        return currentValue <= 0 || currentValue - step < 0
+    }
+
+    return false
+}
+
+/**
+ * Generates an error message for a value outside the valid range
+ *
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns Error message string
+ */
+export const getRangeErrorMessage = (min?: number, max?: number): string => {
+    if (min !== undefined && max !== undefined) {
+        return `Value must be between ${min} and ${max}`
+    }
+    if (min !== undefined) {
+        return `Value must be at least ${min}`
+    }
+    if (max !== undefined) {
+        return `Value must be at most ${max}`
+    }
+    return 'Invalid value'
+}
+
+/**
+ * Validates if a number value is within min/max bounds
+ *
+ * @param value - The number value to validate
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @returns True if value is within bounds, false otherwise
+ */
+export const isValueInRange = (
+    value: number | null | undefined,
+    min?: number,
+    max?: number
+): boolean => {
+    if (value === null || value === undefined) {
+        return true
+    }
+
+    if (min !== undefined && value < min) {
+        return false
+    }
+
+    if (max !== undefined && value > max) {
+        return false
+    }
+
+    return true
+}
+
+/**
+ * Validates if a string represents a valid number
+ *
+ * @param value - The string value to validate
+ * @returns True if valid number, false otherwise
+ */
+export const isValidNumber = (value: string): boolean => {
+    if (value === '' || value === '-') {
+        return false
+    }
+    const num = Number(value)
+    return !isNaN(num) && isFinite(num)
+}

package/lib/components/Inputs/OTPInput/OTPInput.tsx

@@ -0,0 +1,355 @@
+import React, {
+    type ChangeEvent,
+    type KeyboardEvent,
+    useEffect,
+    useRef,
+    useState,
+    useId,
+} from 'react'
+import Block from '../../Primitives/Block/Block'
+import InputLabels from '../utils/InputLabels/InputLabels'
+import InputFooter from '../utils/InputFooter/InputFooter'
+import PrimitiveInput from '../../Primitives/PrimitiveInput/PrimitiveInput'
+
+import type { OTPProps } from './types'
+import type { OTPInputTokensType } from './otpInput.tokens'
+import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
+import { useErrorShake } from '../../common/useErrorShake'
+import {
+    getErrorShakeStyle,
+    errorShakeAnimation,
+} from '../../common/error.animations'
+import styled from 'styled-components'
+
+const Wrapper = styled(Block)`
+    ${errorShakeAnimation}
+`
+
+const OTPInput = ({
+    label,
+    placeholder,
+    sublabel,
+    disabled,
+    helpIconHintText,
+    name,
+    required,
+    error,
+    errorMessage,
+    hintText,
+    value = '',
+    length = 6,
+    autoFocus = false,
+    onChange,
+    form,
+    id: providedId,
+    ...rest
+}: OTPProps) => {
+    const otpInputTokens = useResponsiveTokens<OTPInputTokensType>('OTP_INPUT')
+    const [otp, setOtp] = useState<string[]>(() => {
+        const initial = (value || '').split('').slice(0, length)
+        return [
+            ...initial,
+            ...new Array(Math.max(length - initial.length, 0)).fill(''),
+        ]
+    })
+    const [, setActiveIndex] = useState<number>(-1)
+    const shouldShake = useErrorShake(error || false)
+    const inputRefs = useRef<HTMLInputElement[]>([])
+
+    // Generate unique IDs for accessibility
+    const generatedId = useId()
+    const baseId = providedId || generatedId
+    const errorId = `${baseId}-error`
+    const hintId = `${baseId}-hint`
+    const groupId = `${baseId}-group`
+    const firstInputId = `${baseId}-0`
+
+    // Construct aria-describedby to link hint and error messages
+    const ariaDescribedBy =
+        [
+            hintText && !error ? hintId : null,
+            error && errorMessage ? errorId : null,
+        ]
+            .filter(Boolean)
+            .join(' ') || undefined
+
+    useEffect(() => {
+        if (!disabled) return
+        const val = value || ''
+        const otpArray = val.split('').slice(0, length)
+        const paddedOtp = [
+            ...otpArray,
+            ...new Array(Math.max(length - otpArray.length, 0)).fill(''),
+        ]
+        setOtp(paddedOtp)
+    }, [disabled, value, length])
+
+    useEffect(() => {
+        setOtp((prevOtp) => {
+            if (prevOtp.length === length) return prevOtp
+            const newOtp = prevOtp.slice(0, length)
+            return [
+                ...newOtp,
+                ...new Array(Math.max(length - newOtp.length, 0)).fill(''),
+            ]
+        })
+    }, [length])
+
+    useEffect(() => {
+        if (autoFocus && inputRefs.current[0] && !disabled) {
+            inputRefs.current[0].focus()
+        }
+    }, [autoFocus, disabled])
+
+    const handleChange = (index: number, val: string) => {
+        if (disabled) return
+
+        if (val.length === 0) {
+            const newOtp = [...otp]
+            newOtp[index] = ''
+            setOtp(newOtp)
+            onChange?.(newOtp.join(''))
+            return
+        }
+
+        const newVal = val.slice(-1)
+
+        if (newVal && !/^\d$/.test(newVal)) return
+
+        if (otp[index] && newVal !== otp[index]) {
+            for (let i = index + 1; i < length; i++) {
+                if (!otp[i]) {
+                    const newOtp = [...otp]
+                    newOtp[i] = newVal
+                    setOtp(newOtp)
+                    onChange?.(newOtp.join(''))
+                    inputRefs.current[i]?.focus()
+                    return
+                }
+            }
+            return
+        }
+
+        const newOtp = [...otp]
+        newOtp[index] = newVal
+        setOtp(newOtp)
+
+        onChange?.(newOtp.join(''))
+
+        if (newVal && index < length - 1) {
+            inputRefs.current[index + 1]?.focus()
+        }
+    }
+
+    const handleKeyDown = (
+        index: number,
+        e: KeyboardEvent<HTMLInputElement>
+    ) => {
+        if (disabled) return
+
+        const key = e.key
+
+        if (key === 'Backspace') {
+            if (!otp[index] && index > 0) {
+                inputRefs.current[index - 1]?.focus()
+            }
+        } else if ((key === 'ArrowLeft' || key === 'Left') && index > 0) {
+            e.preventDefault()
+            inputRefs.current[index - 1]?.focus()
+        } else if (
+            (key === 'ArrowRight' || key === 'Right') &&
+            index < length - 1
+        ) {
+            e.preventDefault()
+            inputRefs.current[index + 1]?.focus()
+        }
+    }
+
+    // Handle paste
+    const handlePaste = (e: React.ClipboardEvent) => {
+        if (disabled) return
+
+        e.preventDefault()
+        const pastedData = e.clipboardData
+            .getData('text')
+            .replace(/\D/g, '')
+            .slice(0, length)
+        const otpArray = pastedData.split('')
+        const newOtp = [
+            ...otpArray,
+            ...new Array(length - otpArray.length).fill(''),
+        ]
+        setOtp(newOtp)
+        onChange?.(newOtp.join(''))
+
+        // Focus the next empty input or last input
+        const nextIndex = Math.min(otpArray.length, length - 1)
+        inputRefs.current[nextIndex]?.focus()
+    }
+
+    return (
+        <Block
+            data-otpinput={label ?? ''}
+            data-status={disabled ? 'disabled' : 'enabled'}
+            display="flex"
+            flexDirection="column"
+            gap={otpInputTokens.gap}
+            width={'100%'}
+        >
+            <InputLabels
+                label={label}
+                sublabel={sublabel}
+                helpIconHintText={helpIconHintText}
+                name={name}
+                inputId={firstInputId}
+                required={required}
+                tokens={otpInputTokens}
+            />
+            <Wrapper style={getErrorShakeStyle(shouldShake)}>
+                <Block
+                    id={groupId}
+                    role="group"
+                    aria-label={
+                        label
+                            ? `${label}${sublabel ? ` ${sublabel}` : ''}${
+                                  required ? ' (required)' : ''
+                              }`
+                            : undefined
+                    }
+                    aria-describedby={ariaDescribedBy}
+                    data-element="otp-input-container"
+                    display="flex"
+                    gap={otpInputTokens.inputContainer.gap}
+                    width={'100%'}
+                >
+                    {otp.map((digit, index) => {
+                        const inputId = `${baseId}-${index}`
+                        const ariaLabel = label
+                            ? `${label} digit ${index + 1} of ${length}`
+                            : `Digit ${index + 1} of ${length}`
+
+                        return (
+                            <PrimitiveInput
+                                id={inputId}
+                                data-element={`otp-input-${index}`}
+                                placeholder={placeholder}
+                                placeholderColor={'transparent'}
+                                form={form}
+                                name={name ? `${name}-${index}` : undefined}
+                                type="text"
+                                inputMode="numeric"
+                                pattern="[0-9]"
+                                autoComplete="one-time-code"
+                                width={
+                                    otpInputTokens.inputContainer.input.width
+                                }
+                                height={
+                                    otpInputTokens.inputContainer.input.height
+                                }
+                                borderRadius={
+                                    otpInputTokens.inputContainer.input
+                                        .borderRadius
+                                }
+                                style={{
+                                    textAlign: 'center',
+                                }}
+                                fontSize={
+                                    otpInputTokens.inputContainer.input.fontSize
+                                }
+                                fontWeight={
+                                    otpInputTokens.inputContainer.input
+                                        .fontWeight
+                                }
+                                ref={(el: HTMLInputElement) => {
+                                    inputRefs.current[index] = el
+                                }}
+                                key={index}
+                                border={
+                                    otpInputTokens.inputContainer.input.border[
+                                        error ? 'error' : 'default'
+                                    ]
+                                }
+                                outline="none"
+                                backgroundColor={
+                                    otpInputTokens.inputContainer.input
+                                        .backgroundColor[
+                                        error ? 'error' : 'default'
+                                    ]
+                                }
+                                transition="border 200ms ease-in-out, box-shadow 200ms ease-in-out, background-color 200ms ease-in-out"
+                                _hover={{
+                                    border: otpInputTokens.inputContainer.input
+                                        .border.hover,
+                                    backgroundColor:
+                                        otpInputTokens.inputContainer.input
+                                            .backgroundColor.hover,
+                                }}
+                                color={
+                                    otpInputTokens.inputContainer.input.color[
+                                        disabled ? 'disabled' : 'default'
+                                    ]
+                                }
+                                _focus={{
+                                    border: otpInputTokens.inputContainer.input
+                                        .border[error ? 'error' : 'focus'],
+                                    boxShadow: '0 0 0 3px #EFF6FF',
+                                    backgroundColor:
+                                        'rgba(239, 246, 255, 0.15)',
+                                }}
+                                disabled={disabled}
+                                _disabled={{
+                                    backgroundColor:
+                                        otpInputTokens.inputContainer.input
+                                            .backgroundColor.disabled,
+                                    border: otpInputTokens.inputContainer.input
+                                        .border.disabled,
+                                    cursor: 'not-allowed',
+                                }}
+                                value={digit}
+                                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                                    handleChange(index, e.target.value)
+                                }
+                                maxLength={1}
+                                onKeyDown={(
+                                    e: KeyboardEvent<HTMLInputElement>
+                                ) => handleKeyDown(index, e)}
+                                onFocus={(
+                                    e: React.FocusEvent<HTMLInputElement>
+                                ) => {
+                                    const input = e.target
+                                    const len = input.value.length
+                                    input.setSelectionRange(len, len)
+                                    setActiveIndex(index)
+                                }}
+                                onClick={(
+                                    e: React.MouseEvent<HTMLInputElement>
+                                ) => {
+                                    const input = e.currentTarget
+                                    const len = input.value.length
+                                    input.setSelectionRange(len, len)
+                                }}
+                                onBlur={() => setActiveIndex(-1)}
+                                onPaste={index === 0 ? handlePaste : undefined}
+                                aria-label={ariaLabel}
+                                aria-required={required ? 'true' : undefined}
+                                aria-invalid={error ? 'true' : 'false'}
+                                aria-describedby={ariaDescribedBy}
+                                {...rest}
+                            />
+                        )
+                    })}
+                </Block>
+            </Wrapper>
+            <InputFooter
+                hintText={hintText}
+                error={error}
+                errorMessage={errorMessage}
+                errorId={errorId}
+                hintId={hintId}
+                tokens={otpInputTokens}
+            />
+        </Block>
+    )
+}
+
+export default OTPInput