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

package/lib/components/Inputs/OTPInput/otpInput.tokens.ts

@@ -0,0 +1,255 @@
+import type { CSSObject } from 'styled-components'
+import type { FoundationTokenType } from '../../../tokens/theme.token'
+import { BreakpointType } from '../../../breakpoints/breakPoints'
+
+enum OTPInputState {
+    DEFAULT = 'default',
+    HOVER = 'hover',
+    FOCUS = 'focus',
+    ERROR = 'error',
+    DISABLED = 'disabled',
+}
+
+export type OTPInputTokensType = {
+    gap: CSSObject['gap']
+    label: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: {
+            [key in OTPInputState]: CSSObject['color']
+        }
+    }
+    subLabel: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: {
+            [key in OTPInputState]: CSSObject['color']
+        }
+    }
+    helpIcon: {
+        width: CSSObject['width']
+        color: {
+            [key in OTPInputState]: CSSObject['color']
+        }
+    }
+    hintText: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: {
+            [key in OTPInputState]: CSSObject['color']
+        }
+    }
+    errorMessage: {
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        color: CSSObject['color']
+    }
+    required: {
+        color: CSSObject['color']
+    }
+    inputContainer: {
+        gap: CSSObject['gap']
+        input: {
+            height: CSSObject['height']
+            width: CSSObject['width']
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            color: {
+                [key in OTPInputState]: CSSObject['color']
+            }
+            borderRadius: CSSObject['borderRadius']
+            boxShadow: CSSObject['boxShadow']
+            border: {
+                [key in OTPInputState]: CSSObject['border']
+            }
+            backgroundColor: {
+                [key in OTPInputState]: CSSObject['backgroundColor']
+            }
+        }
+    }
+}
+
+export type ResponsiveOTPInputTokens = {
+    [key in keyof BreakpointType]: OTPInputTokensType
+}
+
+export const getOTPInputTokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveOTPInputTokens => {
+    return {
+        sm: {
+            gap: foundationToken.unit[8],
+            label: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[500],
+                color: {
+                    default: foundationToken.colors.gray[700],
+                    hover: foundationToken.colors.gray[700],
+                    focus: foundationToken.colors.gray[700],
+                    disabled: foundationToken.colors.gray[400],
+                    error: foundationToken.colors.red[600],
+                },
+            },
+            subLabel: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[400],
+                color: {
+                    default: foundationToken.colors.gray[400],
+                    hover: foundationToken.colors.gray[400],
+                    focus: foundationToken.colors.gray[400],
+                    disabled: foundationToken.colors.gray[300],
+                    error: foundationToken.colors.red[600],
+                },
+            },
+            helpIcon: {
+                width: foundationToken.unit[14],
+                color: {
+                    default: foundationToken.colors.gray[400],
+                    hover: foundationToken.colors.gray[400],
+                    focus: foundationToken.colors.gray[400],
+                    disabled: foundationToken.colors.gray[400],
+                    error: foundationToken.colors.red[600],
+                },
+            },
+            hintText: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[400],
+                color: {
+                    default: foundationToken.colors.gray[500],
+                    hover: foundationToken.colors.gray[500],
+                    focus: foundationToken.colors.gray[500],
+                    disabled: foundationToken.colors.gray[400],
+                    error: foundationToken.colors.red[600],
+                },
+            },
+            errorMessage: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[500],
+                color: foundationToken.colors.red[600],
+            },
+            required: {
+                color: foundationToken.colors.red[600],
+            },
+            inputContainer: {
+                gap: foundationToken.unit[12],
+
+                input: {
+                    height: foundationToken.unit[48],
+                    width: foundationToken.unit[42],
+                    fontSize: foundationToken.font.size.heading.md.fontSize,
+                    fontWeight: foundationToken.font.weight[600],
+                    borderRadius: foundationToken.border.radius[12],
+                    boxShadow: foundationToken.shadows.sm,
+
+                    border: {
+                        default: `1px solid ${foundationToken.colors.gray[200]}`,
+                        hover: `1px solid ${foundationToken.colors.gray[400]}`,
+                        focus: `1px solid ${foundationToken.colors.primary[500]}`,
+                        error: `1px solid ${foundationToken.colors.red[500]}`,
+                        disabled: `1px solid ${foundationToken.colors.gray[200]}`,
+                    },
+                    backgroundColor: {
+                        default: foundationToken.colors.gray[0],
+                        disabled: foundationToken.colors.gray[50],
+                        hover: foundationToken.colors.gray[0],
+                        focus: foundationToken.colors.gray[0],
+                        error: foundationToken.colors.gray[0],
+                    },
+                    color: {
+                        default: foundationToken.colors.gray[700],
+                        hover: foundationToken.colors.gray[700],
+                        focus: foundationToken.colors.gray[700],
+                        error: foundationToken.colors.red[800],
+                        disabled: foundationToken.colors.gray[300],
+                    },
+                },
+            },
+        },
+        lg: {
+            gap: foundationToken.unit[8],
+            label: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[500],
+                color: {
+                    default: foundationToken.colors.gray[700],
+                    hover: foundationToken.colors.gray[700],
+                    focus: foundationToken.colors.gray[700],
+                    disabled: foundationToken.colors.gray[400],
+                    error: foundationToken.colors.red[600],
+                },
+            },
+            subLabel: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[400],
+                color: {
+                    default: foundationToken.colors.gray[400],
+                    hover: foundationToken.colors.gray[400],
+                    focus: foundationToken.colors.gray[400],
+                    disabled: foundationToken.colors.gray[300],
+                    error: foundationToken.colors.red[600],
+                },
+            },
+            helpIcon: {
+                width: foundationToken.unit[14],
+                color: {
+                    default: foundationToken.colors.gray[400],
+                    hover: foundationToken.colors.gray[400],
+                    focus: foundationToken.colors.gray[400],
+                    disabled: foundationToken.colors.gray[400],
+                    error: foundationToken.colors.red[600],
+                },
+            },
+            hintText: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[400],
+                color: {
+                    default: foundationToken.colors.gray[500],
+                    hover: foundationToken.colors.gray[500],
+                    focus: foundationToken.colors.gray[500],
+                    disabled: foundationToken.colors.gray[400],
+                    error: foundationToken.colors.red[600],
+                },
+            },
+            errorMessage: {
+                fontSize: foundationToken.font.size.body.md.fontSize,
+                fontWeight: foundationToken.font.weight[500],
+                color: foundationToken.colors.red[600],
+            },
+            required: {
+                color: foundationToken.colors.red[600],
+            },
+            inputContainer: {
+                gap: foundationToken.unit[12],
+                input: {
+                    height: foundationToken.unit[48],
+                    width: foundationToken.unit[42],
+                    fontSize: foundationToken.font.size.heading.md.fontSize,
+                    fontWeight: foundationToken.font.weight[600],
+                    borderRadius: foundationToken.border.radius[12],
+                    boxShadow: foundationToken.shadows.sm,
+                    border: {
+                        default: `1px solid ${foundationToken.colors.gray[200]}`,
+                        hover: `1px solid ${foundationToken.colors.gray[400]}`,
+                        focus: `1px solid ${foundationToken.colors.primary[500]}`,
+                        error: `1px solid ${foundationToken.colors.red[500]}`,
+                        disabled: `1px solid ${foundationToken.colors.gray[200]}`,
+                    },
+                    backgroundColor: {
+                        default: foundationToken.colors.gray[0],
+                        disabled: foundationToken.colors.gray[50],
+                        hover: foundationToken.colors.gray[0],
+                        focus: foundationToken.colors.gray[0],
+                        error: foundationToken.colors.gray[0],
+                    },
+                    color: {
+                        default: foundationToken.colors.gray[800],
+                        hover: foundationToken.colors.gray[800],
+                        focus: foundationToken.colors.gray[800],
+                        error: foundationToken.colors.red[800],
+                        disabled: foundationToken.colors.gray[300],
+                    },
+                },
+            },
+        },
+    }
+}

package/lib/components/Inputs/OTPInput/types.ts

@@ -0,0 +1,17 @@
+export type OTPProps = {
+    label?: string
+    sublabel?: string
+    helpIconHintText?: string
+    error?: boolean
+    errorMessage?: string
+    hintText?: string
+    value?: string
+    length?: number
+    autoFocus?: boolean
+    onChange?: (value: string) => void
+    form?: string
+    placeholder?: string
+} & Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'size' | 'style' | 'className' | 'onChange'
+>

package/lib/components/Inputs/SearchInput/SearchInput.tsx

@@ -0,0 +1,299 @@
+import {
+    useEffect,
+    forwardRef,
+    cloneElement,
+    isValidElement,
+    useMemo,
+} from 'react'
+import { useRef, useState } from 'react'
+import Block from '../../Primitives/Block/Block'
+import PrimitiveInput from '../../Primitives/PrimitiveInput/PrimitiveInput'
+import { X } from 'lucide-react'
+
+import type { SearchInputProps } from './types'
+import type { SearchInputTokensType } from './searchInput.tokens'
+import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
+import { FOUNDATION_THEME } from '../../../tokens'
+
+const toPixels = (value: string | number | undefined): number => {
+    if (typeof value === 'number') {
+        return value
+    }
+
+    if (typeof value === 'string') {
+        // Remove 'px' and convert to number
+        const numericValue = parseFloat(value.replace('px', ''))
+        return isNaN(numericValue) ? 0 : numericValue
+    }
+
+    return 0
+}
+
+const applyIconStyles = (
+    icon: React.ReactNode,
+    tokens: SearchInputTokensType,
+    disabled: boolean,
+    error: boolean
+): React.ReactNode => {
+    if (!isValidElement(icon)) {
+        return icon
+    }
+
+    const getIconColor = () => {
+        if (disabled) return tokens.icon.color.disabled
+        if (error) return tokens.icon.color.error
+        return tokens.icon.color.default
+    }
+
+    return cloneElement(
+        icon as React.ReactElement<{ style?: React.CSSProperties }>,
+        {
+            style: {
+                ...((icon.props as { style?: React.CSSProperties }).style ||
+                    {}),
+                color: getIconColor(),
+                width: tokens.icon.width,
+                height: tokens.icon.width,
+            },
+        }
+    )
+}
+
+const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+    (
+        {
+            leftSlot,
+            rightSlot,
+            error = false,
+            placeholder = 'Enter',
+            value,
+            onChange,
+            name,
+            allowClear = true,
+            onClear,
+            clearIcon,
+            ...rest
+        },
+        ref
+    ) => {
+        const searchInputTokens =
+            useResponsiveTokens<SearchInputTokensType>('SEARCH_INPUT')
+
+        const leftSlotRef = useRef<HTMLDivElement>(null)
+        const rightSlotRef = useRef<HTMLDivElement>(null)
+
+        const [leftSlotWidth, setLeftSlotWidth] = useState(0)
+        const [rightSlotWidth, setRightSlotWidth] = useState(0)
+        const [isFocused, setIsFocused] = useState(false)
+
+        const isRequired = rest.required ?? false
+
+        const showClearButton = allowClear && value && value.length > 0
+
+        const handleClear = () => {
+            if (onClear) {
+                onClear()
+            } else if (onChange) {
+                const syntheticEvent = {
+                    target: { value: '' },
+                    currentTarget: { value: '' },
+                    preventDefault: () => {},
+                    stopPropagation: () => {},
+                } as React.ChangeEvent<HTMLInputElement>
+                onChange(syntheticEvent)
+            }
+        }
+
+        const effectiveRightSlot = useMemo(
+            () =>
+                rightSlot
+                    ? rightSlot
+                    : showClearButton
+                      ? clearIcon || (
+                            <X size={16} style={{ cursor: 'pointer' }} />
+                        )
+                      : undefined,
+            [rightSlot, showClearButton, clearIcon]
+        )
+
+        useEffect(() => {
+            if (leftSlotRef.current) {
+                setLeftSlotWidth(leftSlotRef.current.offsetWidth)
+            } else {
+                setLeftSlotWidth(0)
+            }
+            if (rightSlotRef.current) {
+                setRightSlotWidth(rightSlotRef.current.offsetWidth)
+            } else {
+                setRightSlotWidth(0)
+            }
+        }, [leftSlot, effectiveRightSlot])
+
+        const paddingX = toPixels(searchInputTokens.inputContainer.padding.x)
+        const paddingY = toPixels(searchInputTokens.inputContainer.padding.y)
+        const GAP = toPixels(searchInputTokens.gap)
+
+        const paddingInlineStart = leftSlot
+            ? paddingX + leftSlotWidth + GAP
+            : paddingX
+        const paddingInlineEnd = effectiveRightSlot
+            ? paddingX + rightSlotWidth + GAP
+            : paddingX
+
+        const styledLeftSlot = leftSlot
+            ? applyIconStyles(
+                  leftSlot,
+                  searchInputTokens,
+                  rest.disabled || false,
+                  error
+              )
+            : null
+
+        const styledRightSlot = effectiveRightSlot
+            ? applyIconStyles(
+                  effectiveRightSlot,
+                  searchInputTokens,
+                  rest.disabled || false,
+                  error
+              )
+            : null
+
+        return (
+            <Block
+                data-searchinput={placeholder ?? ''}
+                data-status={rest.disabled ? 'disabled' : 'enabled'}
+                position="relative"
+                width={'100%'}
+            >
+                {styledLeftSlot && (
+                    <Block
+                        data-element="left-slot"
+                        ref={leftSlotRef}
+                        position="absolute"
+                        top={paddingY}
+                        left={paddingX}
+                        bottom={paddingY}
+                        contentCentered
+                        style={{
+                            transition:
+                                'transform 200ms ease-in-out, opacity 200ms ease-in-out',
+                            transform: isFocused ? 'scale(1.05)' : 'scale(1)',
+                            opacity: isFocused ? 1 : 0.7,
+                        }}
+                    >
+                        {styledLeftSlot}
+                    </Block>
+                )}
+
+                {styledRightSlot && (
+                    <Block
+                        data-element="right-slot"
+                        ref={rightSlotRef}
+                        position="absolute"
+                        top={paddingY}
+                        right={paddingX}
+                        bottom={paddingY}
+                        contentCentered
+                        onClick={
+                            showClearButton && !rightSlot
+                                ? handleClear
+                                : undefined
+                        }
+                        style={{
+                            transition:
+                                'transform 200ms ease-in-out, opacity 200ms ease-in-out',
+                            transform: isFocused ? 'scale(1.05)' : 'scale(1)',
+                            opacity: isFocused ? 1 : 0.7,
+                            cursor:
+                                showClearButton && !rightSlot
+                                    ? 'pointer'
+                                    : undefined,
+                        }}
+                    >
+                        {styledRightSlot}
+                    </Block>
+                )}
+
+                <PrimitiveInput
+                    type={'text'}
+                    role="searchbox"
+                    placeholderColor={FOUNDATION_THEME.colors.gray[400]}
+                    ref={ref}
+                    name={name}
+                    required={isRequired}
+                    aria-required={isRequired ? 'true' : undefined}
+                    aria-invalid={error ? 'true' : 'false'}
+                    value={value}
+                    onChange={onChange}
+                    placeholder={placeholder}
+                    width="100%"
+                    paddingInlineStart={paddingInlineStart}
+                    paddingInlineEnd={paddingInlineEnd}
+                    paddingY={paddingY}
+                    outline={searchInputTokens.inputContainer.outline}
+                    borderRadius={searchInputTokens.inputContainer.borderRadius}
+                    borderBottom={
+                        rest.disabled
+                            ? searchInputTokens.inputContainer.borderBottom
+                                  .disabled
+                            : error
+                              ? searchInputTokens.inputContainer.borderBottom
+                                    .error
+                              : searchInputTokens.inputContainer.borderBottom
+                                    .default
+                    }
+                    color={
+                        rest.disabled
+                            ? searchInputTokens.inputContainer.color.disabled
+                            : error
+                              ? searchInputTokens.inputContainer.color.error
+                              : searchInputTokens.inputContainer.color.default
+                    }
+                    fontSize={searchInputTokens.inputContainer.fontSize}
+                    fontWeight={searchInputTokens.inputContainer.fontWeight}
+                    transition="border-bottom 200ms ease-in-out, color 200ms ease-in-out"
+                    placeholderStyles={{
+                        transition: 'opacity 150ms ease-out',
+                        opacity: isFocused ? 0 : 1,
+                    }}
+                    _hover={{
+                        borderBottom: rest.disabled
+                            ? searchInputTokens.inputContainer.borderBottom
+                                  .disabled
+                            : searchInputTokens.inputContainer.borderBottom
+                                  .hover,
+                        color: rest.disabled
+                            ? searchInputTokens.inputContainer.color.disabled
+                            : searchInputTokens.inputContainer.color.hover,
+                    }}
+                    _focus={{
+                        borderBottom: rest.disabled
+                            ? searchInputTokens.inputContainer.borderBottom
+                                  .disabled
+                            : error
+                              ? searchInputTokens.inputContainer.borderBottom
+                                    .error
+                              : searchInputTokens.inputContainer.borderBottom
+                                    .focus,
+                        color: rest.disabled
+                            ? searchInputTokens.inputContainer.color.disabled
+                            : error
+                              ? searchInputTokens.inputContainer.color.error
+                              : searchInputTokens.inputContainer.color.focus,
+                    }}
+                    onFocus={(e) => {
+                        setIsFocused(true)
+                        rest.onFocus?.(e)
+                    }}
+                    onBlur={(e) => {
+                        setIsFocused(false)
+                        rest.onBlur?.(e)
+                    }}
+                    {...rest}
+                />
+            </Block>
+        )
+    }
+)
+
+export default SearchInput