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

package/lib/components/InputsV2/utils/FloatingLabelsV2/FloatingLabelsV2.tsx

@@ -0,0 +1,96 @@
+import Text from '../../../Text/Text'
+import Block from '../../../Primitives/Block/Block'
+import type { InputSizeV2, InputStateV2 } from '../../inputV2.types'
+import { addPxToValue } from '../../../../global-utils/GlobalUtils'
+import type { FloatingLabelsV2Tokens } from '../../inputV2.tokens'
+import type { CSSObject } from 'styled-components'
+
+const FloatingLabelsV2 = ({
+    label,
+    required,
+    name,
+    inputId,
+    isInputFocusedOrWithValue = false,
+    topPadding,
+    leftPadding,
+    tokens,
+    size,
+    state,
+    backgroundColor = 'transparent',
+}: {
+    label: string
+    required: boolean
+    name: string
+    inputId: string
+    isInputFocusedOrWithValue: boolean
+    topPadding: number
+    leftPadding: number
+    tokens: FloatingLabelsV2Tokens
+    size: InputSizeV2
+    state: InputStateV2
+    backgroundColor?: CSSObject['backgroundColor']
+}) => {
+    const top = isInputFocusedOrWithValue ? topPadding : '50%'
+
+    return (
+        <Block
+            data-element="label"
+            position="absolute"
+            top={top}
+            left={leftPadding}
+            height="max-content"
+            zIndex={1}
+            style={{
+                transition: 'all 0.2s ease-in-out',
+                transform: 'translateY(-50%)',
+                transformOrigin: 'left center',
+                pointerEvents: 'none',
+                width: '90%',
+                backgroundColor: backgroundColor,
+            }}
+        >
+            <Block display="flex" alignItems="center" gap={4} width="100%">
+                <Text
+                    id={label || 'label'}
+                    data-element="floating-label"
+                    data-id={label || 'label'}
+                    as="label"
+                    htmlFor={inputId || name}
+                    fontWeight={tokens.placeholder.fontWeight[size]}
+                    fontSize={
+                        isInputFocusedOrWithValue
+                            ? '12px'
+                            : tokens.placeholder.fontSize[size]
+                    }
+                    lineHeight={
+                        isInputFocusedOrWithValue
+                            ? '18px'
+                            : addPxToValue(tokens.placeholder.lineHeight[size])
+                    }
+                    color={tokens.placeholder.color[state]}
+                    style={{
+                        transition:
+                            'font-size 0.2s ease-in-out, line-height 0.2s ease-in-out, font-weight 0.2s ease-in-out',
+                    }}
+                >
+                    {label}
+                </Text>
+                {required && (
+                    <sup
+                        data-element="required-icon"
+                        aria-hidden="true"
+                        style={{
+                            color: tokens.required.color,
+                            top: '-1px',
+                            left: '-1px',
+                        }}
+                    >
+                        *
+                    </sup>
+                )}
+            </Block>
+        </Block>
+    )
+}
+
+export default FloatingLabelsV2

package/lib/components/InputsV2/utils/InputFooter/InputFooterV2.tsx

@@ -0,0 +1,70 @@
+import Block from '../../../Primitives/Block/Block'
+import Text from '../../../Text/Text'
+import { InputSizeV2 } from '../../inputV2.types'
+import { addPxToValue } from '../../../../global-utils/GlobalUtils'
+import type { InputFooterV2Tokens } from '../../inputV2.tokens'
+
+type InputFooterV2Props = {
+    error?: boolean
+    errorMessage?: string
+    hintText?: string
+    errorId?: string
+    hintId?: string
+    tokens?: InputFooterV2Tokens
+    hintTextId?: string
+    errorMessageId?: string
+    size?: InputSizeV2
+}
+
+const InputFooterV2 = ({
+    error,
+    errorMessage,
+    hintText,
+    errorId,
+    hintId,
+    tokens,
+    hintTextId,
+    errorMessageId,
+    size = InputSizeV2.SM,
+}: InputFooterV2Props) => {
+    return (
+        ((error && errorMessage) || hintText) && (
+            <Block width={'100%'}>
+                {error && errorMessage && (
+                    <Text
+                        id={errorMessageId || errorId}
+                        role="alert"
+                        aria-live="polite"
+                        data-element="form-error"
+                        data-id={errorMessage || 'error-message'}
+                        color={tokens?.errorMessage.color}
+                        fontSize={tokens?.errorMessage?.fontSize[size]}
+                        fontWeight={tokens?.errorMessage?.fontWeight[size]}
+                        lineHeight={addPxToValue(
+                            tokens?.errorMessage?.lineHeight[size]
+                        )}
+                    >
+                        {errorMessage}
+                    </Text>
+                )}
+                {hintText && !error && (
+                    <Text
+                        id={hintTextId || hintId}
+                        data-element="hint-text"
+                        data-id={hintText || 'hint-text'}
+                        fontWeight={tokens?.hintText?.fontWeight[size]}
+                        fontSize={tokens?.hintText?.fontSize[size]}
+                        color={tokens?.hintText?.color?.default}
+                        lineHeight={addPxToValue(
+                            tokens?.hintText?.lineHeight[size]
+                        )}
+                    >
+                        {hintText}
+                    </Text>
+                )}
+            </Block>
+        )
+    )
+}
+
+export default InputFooterV2

package/lib/components/InputsV2/utils/InputLabels/InputLabelsV2.tsx

@@ -0,0 +1,95 @@
+import { HelpCircleIcon } from 'lucide-react'
+import Block from '../../../Primitives/Block/Block'
+import Text from '../../../Text/Text'
+import { Tooltip, TooltipSize } from '../../../Tooltip'
+import { InputSizeV2, InputStateV2 } from '../../inputV2.types'
+import { addPxToValue } from '../../../../global-utils/GlobalUtils'
+import type { InputLabelsV2Tokens } from '../../inputV2.tokens'
+
+export type InputLabelsV2Props = {
+    label?: string
+    sublabel?: string
+    helpIconText?: string
+    name?: string
+    inputId?: string
+    required?: boolean
+    tokens?: InputLabelsV2Tokens
+    labelId?: string
+    size?: InputSizeV2
+    state?: InputStateV2
+}
+const InputLabelsV2 = ({
+    label,
+    sublabel,
+    helpIconText,
+    name,
+    inputId,
+    required,
+    tokens,
+    labelId,
+    size = InputSizeV2.SM,
+    state = InputStateV2.DEFAULT,
+}: InputLabelsV2Props) => {
+    return (
+        label && (
+            <Block display="flex" alignItems="center" gap={4} width={'100%'}>
+                <Text
+                    id={labelId}
+                    data-element="input-label"
+                    data-id={label || 'label'}
+                    as="label"
+                    htmlFor={inputId || name}
+                    fontWeight={tokens?.label?.fontWeight[size]}
+                    fontSize={tokens?.label?.fontSize[size]}
+                    color={tokens?.label?.color?.[state]}
+                    lineHeight={addPxToValue(tokens?.label?.lineHeight[size])}
+                >
+                    {label}
+                </Text>
+                {required && (
+                    <sup
+                        data-element="required-icon"
+                        aria-hidden="true"
+                        style={{
+                            color: tokens?.required?.color,
+                            top: '-1px',
+                            left: '-1px',
+                        }}
+                    >
+                        *
+                    </sup>
+                )}
+                {sublabel && (
+                    <Text
+                        data-element="input-sublabel"
+                        data-id={sublabel || 'sublabel'}
+                        fontWeight={tokens?.subLabel?.fontWeight[size]}
+                        fontSize={tokens?.subLabel?.fontSize[size]}
+                        color={tokens?.subLabel?.color?.[state]}
+                        lineHeight={addPxToValue(
+                            tokens?.subLabel?.lineHeight[size]
+                        )}
+                    >
+                        ({sublabel})
+                    </Text>
+                )}
+
+                {helpIconText && (
+                    <Block data-element="icon" contentCentered size={16}>
+                        <Tooltip
+                            content={helpIconText}
+                            size={TooltipSize.SMALL}
+                        >
+                            <HelpCircleIcon
+                                size={tokens?.helpIcon?.width[size]}
+                                color={tokens?.helpIcon?.color?.[state]}
+                            />
+                        </Tooltip>
+                    </Block>
+                )}
+            </Block>
+        )
+    )
+}
+
+export default InputLabelsV2

package/lib/components/InputsV2/utils/InputSlots/InputSlots.tsx

@@ -0,0 +1,43 @@
+import { CSSObject } from 'styled-components'
+import Block from '../../../Primitives/Block/Block'
+
+type InputSlotPosition = 'left' | 'right'
+
+type InputSlotProps = {
+    position: InputSlotPosition
+    slotRef: React.RefObject<HTMLDivElement | null>
+    top: number
+    bottom: number
+    left: number
+    right: number
+    dataElement: string
+    children: React.ReactNode
+    maxHeight?: CSSObject['maxHeight']
+}
+
+const InputSlots = ({
+    position,
+    slotRef,
+    top,
+    bottom,
+    left,
+    right,
+    dataElement,
+    children,
+}: InputSlotProps) => (
+    <Block
+        data-element={dataElement}
+        ref={slotRef}
+        position="absolute"
+        top={top}
+        bottom={bottom}
+        left={position === 'left' ? left : undefined}
+        right={position === 'right' ? right : undefined}
+        contentCentered
+    >
+        {children}
+    </Block>
+)
+
+InputSlots.displayName = 'InputSlots'
+export default InputSlots

package/lib/components/InputsV2/utils/utils.ts

@@ -0,0 +1,38 @@
+import { AnyRef, InputStateV2 } from '../inputV2.types'
+
+export const setExternalRef = <T>(ref: AnyRef<T>, value: T | null): void => {
+    if (!ref) return
+
+    if (typeof ref === 'function') {
+        ref(value)
+    } else {
+        ref.current = value
+    }
+}
+
+/** Derives stable suffix ids from a non-empty base (typically `id` prop or `useId()`). */
+export const generateAccessibilityIds = (baseId: string) => {
+    return {
+        errorId: `${baseId}-error`,
+        hintId: `${baseId}-hint`,
+        groupId: `${baseId}-group`,
+        firstInputId: `${baseId}-0`,
+    }
+}
+
+export const getInteractionState = (state: InputStateV2) => {
+    switch (state) {
+        case InputStateV2.DEFAULT:
+            return 'default'
+        case InputStateV2.HOVER:
+            return 'hover'
+        case InputStateV2.FOCUS:
+            return 'focus'
+        case InputStateV2.ERROR:
+            return 'error'
+        case InputStateV2.DISABLED:
+            return 'disabled'
+        default:
+            return 'default'
+    }
+}

package/lib/components/KeyValuePair/KeyValuePair.tokens.ts

@@ -0,0 +1,111 @@
+import type { CSSObject } from 'styled-components'
+import { KeyValuePairSize } from './types'
+import type { FoundationTokenType } from '../../tokens/theme.token'
+import type { BreakpointType } from '../../breakpoints/breakPoints'
+
+/**
+ * KeyValuePair Tokens following the pattern: [target].CSSProp.[size].[state]
+ * component.CSSProp.[size].[variant].[subType].[state].value
+ * Structure:
+ * - target: container | key | value (defines what element the token applies to)
+ * - CSSProp: gap | color | fontSize
+ * - size: sm | md | lg (only for size-dependent properties like value fontSize)
+ * - state: vertical | horizontal (layout state)
+ *
+ * Size-independent properties: gap, key color, key fontSize, value color
+ * Size-dependent properties: value fontSize
+ */
+export type KeyValuePairTokensType = {
+    // gap: CSSObject['gap']
+    // // Pattern: key.color (size-independent)
+    gap: {
+        [key in 'vertical' | 'horizontal']: CSSObject['gap']
+    }
+
+    key: {
+        color: CSSObject['color']
+        // Pattern: key.fontSize (size-independent)
+        fontSize: CSSObject['fontSize']
+        fontWeight: CSSObject['fontWeight']
+        gap: CSSObject['gap']
+    }
+    // Pattern: value.color (size-independent)
+    // Pattern: value.fontSize.[size] (size-dependent)
+    // Pattern: value.fontWeight (size-independent)
+    value: {
+        color: CSSObject['color']
+        fontSize: {
+            [key in KeyValuePairSize]: CSSObject['fontSize']
+        }
+        fontWeight: CSSObject['fontWeight']
+        gap: CSSObject['gap']
+    }
+}
+
+export type ResponsiveKeyValuePairTokens = {
+    [key in keyof BreakpointType]: KeyValuePairTokensType
+}
+
+export const getKeyValuePairTokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveKeyValuePairTokens => {
+    return {
+        sm: {
+            gap: {
+                vertical: foundationToken.unit[4],
+                horizontal: foundationToken.unit[32],
+            },
+            // Pattern: key.color (size-independent)
+            key: {
+                color: foundationToken.colors.gray[500],
+                // Pattern: key.fontSize (size-independent)
+                fontSize: foundationToken.font.size.body.md.fontSize, // 14px
+                fontWeight: foundationToken.font.weight[400], // 400
+                gap: foundationToken.unit[8], // 8px
+            },
+            // Pattern: value.color (size-independent)
+            // Pattern: value.fontSize.[size].[state] (size-dependent)
+            value: {
+                color: foundationToken.colors.gray[700],
+                fontSize: {
+                    [KeyValuePairSize.SMALL]:
+                        foundationToken.font.size.body.md.fontSize, // 14px
+                    [KeyValuePairSize.MEDIUM]:
+                        foundationToken.font.size.body.lg.fontSize, // 16px
+                    [KeyValuePairSize.LARGE]: 18, // 18px
+                },
+                fontWeight: foundationToken.font.weight[500],
+                gap: foundationToken.unit[8], // 8px
+            },
+        },
+        lg: {
+            gap: {
+                vertical: foundationToken.unit[4],
+                horizontal: foundationToken.unit[32],
+            },
+            // Pattern: key.color (size-independent)
+            key: {
+                color: foundationToken.colors.gray[500],
+                // Pattern: key.fontSize (size-independent) - Fixed to 14px instead of 16px
+                fontSize: foundationToken.font.size.body.md.fontSize, // 14px (was lg.fontSize which is 16px)
+                fontWeight: foundationToken.font.weight[400], // 400
+                gap: foundationToken.unit[8], // 8px
+            },
+            // Pattern: value.color (size-independent)
+            // Pattern: value.fontSize.[size].[state] (size-dependent)
+            value: {
+                color: foundationToken.colors.gray[700],
+                fontSize: {
+                    [KeyValuePairSize.SMALL]:
+                        foundationToken.font.size.body.md.fontSize, // 14px
+                    [KeyValuePairSize.MEDIUM]:
+                        foundationToken.font.size.body.lg.fontSize, // 16px
+                    [KeyValuePairSize.LARGE]:
+                        foundationToken.font.size.heading.sm.fontSize, // 18px
+                },
+                fontWeight: foundationToken.font.weight[500],
+                gap: foundationToken.unit[8], // 8px
+            },
+        },
+    }
+}