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

package/dist/components/InputsV2/ChatInputV2/ChatInputV2Mobile.tokens.d.ts

@@ -0,0 +1,60 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { InputStateV2 } from '../inputV2.types';
+import { Theme } from '../../../context/theme.enum';
+export type Dimensions = {
+    width: CSSObject['width'];
+    height: CSSObject['height'];
+    minHeight: CSSObject['minHeight'];
+    maxHeight: CSSObject['maxHeight'];
+    minWidth: CSSObject['minWidth'];
+    maxWidth: CSSObject['maxWidth'];
+};
+export type ChatInputV2MobileTokensType = {
+    gap: CSSObject['gap'];
+    attachmentButtonDimensions: {
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+        border: CSSObject['border'];
+        borderRadius: CSSObject['borderRadius'];
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor'];
+        };
+        color: CSSObject['color'];
+    };
+    inputContainer: {
+        border: {
+            [key in InputStateV2]: CSSObject['border'];
+        };
+        borderRadius: {
+            [key in InputStateV2]: CSSObject['borderRadius'];
+        };
+        boxShadow: {
+            [key in InputStateV2]: CSSObject['boxShadow'];
+        };
+        paddingLeft: CSSObject['paddingLeft'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingBottom: CSSObject['paddingBottom'];
+        lineHeight: CSSObject['lineHeight'];
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+        placeholder: {
+            color: CSSObject['color'];
+        };
+        backgroundColor: CSSObject['backgroundColor'];
+    } & Dimensions;
+    secondaryAction: {
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+        borderRadius: CSSObject['borderRadius'];
+        right: CSSObject['right'];
+        bottom: CSSObject['bottom'];
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor'];
+        };
+        color: CSSObject['color'];
+    };
+};
+export declare const getChatInputV2MobileTokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ChatInputV2MobileTokensType;
+export default getChatInputV2MobileTokens;

package/dist/components/InputsV2/ChatInputV2/MobileChatInputV2.d.ts

@@ -0,0 +1,17 @@
+declare const MobileChatInputV2: import('react').ForwardRefExoticComponent<{
+    disabled?: boolean;
+    value: string;
+    onChange?: (value: string) => void;
+    topContent?: import('react').ReactNode;
+    secondaryAction?: import('react').ReactNode;
+    placeholder?: string;
+    attachedFiles?: import('./ChatInputV2.types').AttachedFile[];
+    handleAttachClick?: () => void;
+    onFileRemove?: (fileId: string) => void;
+    onFileClick?: (file: import('./ChatInputV2.types').AttachedFile) => void;
+    onSecondaryActionClick?: () => void;
+    id?: string;
+    webTokens: import('./ChatInputV2.tokens').ChatInputV2TokensType;
+    onEnter?: () => void;
+} & Omit<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "className" | "onFocus" | "onBlur" | "onChange" | "cols"> & import('react').RefAttributes<HTMLDivElement>>;
+export default MobileChatInputV2;

package/dist/components/InputsV2/ChatInputV2/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ChatInputV2 } from './ChatInputV2';
+export { default as MobileChatInputV2 } from './MobileChatInputV2';
+export * from './ChatInputV2.types';
+export * from './ChatInputV2.tokens';

package/dist/components/InputsV2/ChatInputV2/utils.d.ts

@@ -0,0 +1,43 @@
+import { ChangeEvent, Ref } from 'react';
+import { AttachedFile } from './ChatInputV2.types';
+export declare const FILE_NAME_TAG_MAX_LEN = 8;
+export declare const truncateFileNameForTag: (name: string) => string;
+/** Layout buffer and “+ N more” reserve — mirrors `AttachmentFile` in ChatInput. */
+export declare const ATTACHMENT_ROW_BUFFER_PX = 30;
+export declare const ATTACHMENT_ROW_MORE_BUTTON_RESERVE_PX = 100;
+export declare const ATTACHMENT_ROW_GAP_PX = 8;
+export declare const OVERFLOW_MENU_TRIGGER_CLASS = "overflow-menu-trigger";
+/** Outer container resize: ignore tiny fluctuations; treat meaningful width change as ≥10px. */
+export declare function isSignificantOuterWidthChange(previousWidth: number, nextWidth: number): boolean;
+/** Wider viewport → allow re-measuring with more chips visible (see `isExpanding` in row). */
+export declare function isOuterWidthExpanding(previousWidth: number, nextWidth: number): boolean;
+/**
+ * After `attachedFiles.length` changes, update visible cutoff without flashing all chips on remove
+ * or jumping to full list on add.
+ */
+export declare function reduceCutoffForFileCountChange(previousFileCount: number, nextFileCount: number): (currentCutoff: number) => number;
+/** When true with fewer rendered chips than files, the row first sets the cutoff to all files, then re-runs (viewport widening or file list shrink). */
+export declare function shouldExpandCutoffToMeasureAllChips(isExpanding: boolean, renderedChipCount: number, attachedFileCount: number): boolean;
+type ComputeCutoffArgs = {
+    filesContainer: HTMLElement;
+    attachedFileCount: number;
+    /** Inter-chip gap in px — must match `gap` on the flex row (from tokens, e.g. `attachedFilesContainer.gap`). */
+    rowGapPx: number;
+};
+/**
+ * Walk visible chip DOM nodes and compute how many files can stay inline before “+ N more”.
+ */
+export declare function computeAttachmentRowCutoff({ filesContainer, attachedFileCount, rowGapPx, }: ComputeCutoffArgs): number;
+export declare function sliceVisibleAttachedFiles(attachedFiles: AttachedFile[], cutOffIndex: number): AttachedFile[];
+export declare function sliceOverflowAttachedFiles(attachedFiles: AttachedFile[], cutOffIndex: number): AttachedFile[];
+/** Max height in px: explicit prop wins; otherwise parse token `maxHeight` (defaults to 200). */
+export declare function resolveChatInputV2TextareaMaxHeightPx(textareaMaxHeightProp: number | undefined, tokenMaxHeight: unknown): number;
+/** ChatGPT-style auto-grow: clamp scroll height to `maxHeightPx`. */
+export declare function applyChatInputV2TextareaAutoHeight(el: HTMLTextAreaElement | null, maxHeightPx: number): void;
+export declare function notifyChatInputV2DuplicateFiles(duplicateFileNames: string[]): void;
+/** Hidden file input: filters duplicates vs `attachedFiles`, shows SnackbarV2, forwards new files. Resets input value. */
+export declare function handleChatInputV2FileInputChange(e: ChangeEvent<HTMLInputElement>, attachedFiles: AttachedFile[], onAttachFiles: (files: File[]) => void): void;
+export declare function assignForwardedRef<T>(node: T | null, ref: Ref<T | null> | null | undefined): void;
+export declare const truncatePlaceholder: (textarea: HTMLTextAreaElement | null, placeholder: string | undefined) => string | undefined;
+export declare const removePxFromValue: (value: number | string) => number;
+export {};

package/dist/components/InputsV2/MultiValueInputV2/MultiValueInputV2.d.ts

@@ -0,0 +1,27 @@
+import { TagShape, TagSize, TagVariant } from '../../Tags';
+import { InputSizeV2 } from '../inputV2.types';
+declare const MultiValueInputV2: import('react').ForwardRefExoticComponent<{
+    value?: string;
+    label?: string;
+    sublabel?: string;
+    helpIconHintText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    disabled?: boolean;
+    tags?: {
+        value: string[];
+        size: TagSize;
+        shape: TagShape;
+        variant: TagVariant;
+    };
+    onChange?: (value: string) => void;
+    onTagAdd?: (tag: string) => void;
+    onTagRemove?: (tag: string) => void;
+    size?: InputSizeV2;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+} & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "style" | "className" | "onFocus" | "onBlur" | "onChange" | "value"> & import('react').RefAttributes<HTMLInputElement>>;
+export default MultiValueInputV2;

package/dist/components/InputsV2/MultiValueInputV2/MultiValueInputV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens';
+export declare const getMultiValueInputV2DarkTokens: (foundationTokens: FoundationTokenType) => ResponsiveMultiValueInputV2Tokens;

package/dist/components/InputsV2/MultiValueInputV2/MultiValueInputV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveMultiValueInputV2Tokens } from './MultiValueInputV2.tokens';
+export declare const getMultiValueInputV2LightTokens: (foundationTokens: FoundationTokenType) => ResponsiveMultiValueInputV2Tokens;

package/dist/components/InputsV2/MultiValueInputV2/MultiValueInputV2.tokens.d.ts

@@ -0,0 +1,74 @@
+import { CSSObject } from 'styled-components';
+import { InputSizeV2, InputStateV2 } from '../inputV2.types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { Theme } from '../../../context/theme.enum';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { InputFooterV2Tokens, InputLabelsV2Tokens } from '../inputV2.tokens';
+export type MultiValueInputV2TokensType = {
+    gap: CSSObject['gap'];
+    borderRadius: CSSObject['borderRadius'];
+    topContainer: InputLabelsV2Tokens;
+    inputContainer: {
+        offSet: number;
+        fontSize: {
+            [key in InputSizeV2]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in InputSizeV2]: CSSObject['fontWeight'];
+        };
+        gap: CSSObject['gap'];
+        borderRadius?: CSSObject['borderRadius'];
+        boxShadow: {
+            [key in InputStateV2]: CSSObject['boxShadow'];
+        };
+        paddingTop: {
+            [key in InputSizeV2]: CSSObject['paddingTop'];
+        };
+        paddingRight: {
+            [key in InputSizeV2]: CSSObject['paddingRight'];
+        };
+        paddingBottom: {
+            [key in InputSizeV2]: CSSObject['paddingBottom'];
+        };
+        paddingLeft: {
+            [key in InputSizeV2]: CSSObject['paddingLeft'];
+        };
+        border: {
+            [key in InputStateV2]: CSSObject['border'];
+        };
+        color: {
+            [key in InputStateV2]: CSSObject['color'];
+        };
+        placeholderColor: {
+            default: CSSObject['color'];
+            focus: CSSObject['color'];
+            hover: CSSObject['color'];
+            error: CSSObject['color'];
+            disabled: CSSObject['color'];
+        };
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor'];
+        };
+        closeButton: {
+            width: CSSObject['width'];
+        };
+        leftSlot: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+        };
+        rightSlot: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+        };
+        /** Vertical alignment for slot row vs tags (`top` / `marginTop` in layout) */
+        slotAlignTop: {
+            withTags: CSSObject['top'];
+            withoutTags: CSSObject['top'];
+        };
+    };
+    bottomContainer: InputFooterV2Tokens;
+};
+export type ResponsiveMultiValueInputV2Tokens = {
+    [key in keyof BreakpointType]: MultiValueInputV2TokensType;
+};
+export declare const getMultiValueInputV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveMultiValueInputV2Tokens;

package/dist/components/InputsV2/MultiValueInputV2/MultiValueV2.types.d.ts

@@ -0,0 +1,26 @@
+import { TagShape, TagSize, TagVariant } from '../../Tags/types';
+import { InputSizeV2 } from '../inputV2.types';
+export type MultiValueInputV2Props = {
+    value?: string;
+    label?: string;
+    sublabel?: string;
+    helpIconHintText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    disabled?: boolean;
+    tags?: {
+        value: string[];
+        size: TagSize;
+        shape: TagShape;
+        variant: TagVariant;
+    };
+    onChange?: (value: string) => void;
+    onTagAdd?: (tag: string) => void;
+    onTagRemove?: (tag: string) => void;
+    size?: InputSizeV2;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange' | 'value' | 'onFocus' | 'onBlur'>;

package/dist/components/InputsV2/MultiValueInputV2/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MultiValueInputV2 } from './MultiValueInputV2';
+export * from './MultiValueInputV2.tokens';
+export * from './MultiValueV2.types';

package/dist/components/InputsV2/NumberInputV2/NumberInputV2.d.ts

@@ -0,0 +1,32 @@
+import { InputSizeV2 } from '../inputV2.types';
+import { default as React } from 'react';
+import { NumberInputV2Direction } from '.';
+declare const NumberInputV2: React.ForwardRefExoticComponent<{
+    slot?: {
+        left?: React.ReactNode;
+        right?: React.ReactNode;
+    };
+    value: number | null;
+    unit?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    error?: {
+        show: boolean;
+        message?: string;
+    };
+    size?: InputSizeV2;
+    label?: {
+        text: string;
+        subtext?: string;
+    };
+    unitDirection?: NumberInputV2Direction;
+    helpIconText?: string;
+    hintText?: string;
+    name?: string;
+    preventNegative?: boolean;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "style" | "className" | "slot" | "onFocus" | "onBlur" | "value"> & React.RefAttributes<HTMLInputElement>>;
+export default NumberInputV2;

package/dist/components/InputsV2/NumberInputV2/NumberInputV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveNumberInputV2Tokens } from './numberInputV2.tokens';
+export declare const getNumberInputV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveNumberInputV2Tokens;

package/dist/components/InputsV2/NumberInputV2/NumberInputV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveNumberInputV2Tokens } from './numberInputV2.tokens';
+export declare const getNumberInputV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveNumberInputV2Tokens;

package/dist/components/InputsV2/NumberInputV2/NumberInputV2Stepper.d.ts

@@ -0,0 +1,14 @@
+import { NumberInputV2TokensType } from './numberInputV2.tokens';
+import { InputSizeV2 } from '../inputV2.types';
+type NumberInputV2StepperProps = {
+    labelText: string;
+    disabled?: boolean;
+    borderState: 'default' | 'error';
+    isUpButtonDisabled: boolean;
+    isDownButtonDisabled: boolean;
+    onStep: (direction: 'up' | 'down') => void;
+    inputContainerTokens: NumberInputV2TokensType;
+    size: InputSizeV2;
+};
+declare const NumberInputV2Stepper: ({ labelText, disabled, borderState, isUpButtonDisabled, isDownButtonDisabled, onStep, inputContainerTokens, size, }: NumberInputV2StepperProps) => import("react/jsx-runtime").JSX.Element;
+export default NumberInputV2Stepper;

package/dist/components/InputsV2/NumberInputV2/NumberInputV2Unit.d.ts

@@ -0,0 +1,12 @@
+import { InputSizeV2, InputStateV2 } from '../inputV2.types';
+import { NumberInputV2TokensType } from './numberInputV2.tokens';
+import { NumberInputV2Direction } from './numberInputV2.types';
+export type NumberInputV2UnitProps = {
+    unit: string;
+    inputState: InputStateV2;
+    inputContainerTokens: NumberInputV2TokensType;
+    size: InputSizeV2;
+    unitDirection?: NumberInputV2Direction;
+};
+declare const NumberInputV2Unit: import('react').ForwardRefExoticComponent<NumberInputV2UnitProps & import('react').RefAttributes<HTMLDivElement>>;
+export default NumberInputV2Unit;

package/dist/components/InputsV2/NumberInputV2/StepperArrow.d.ts

@@ -0,0 +1,2 @@
+import { StepperArrowProps } from './numberInputV2.types';
+export declare const StepperArrow: ({ disabled, dimmed, flip, size, colorDefault, colorDisabled, }: StepperArrowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InputsV2/NumberInputV2/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NumberInputV2 } from './NumberInputV2';
+export * from './numberInputV2.tokens';
+export * from './numberInputV2.types';

package/dist/components/InputsV2/NumberInputV2/numberInputV2.tokens.d.ts

@@ -0,0 +1,135 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { InputSizeV2, InputStateV2 } from '../inputV2.types';
+import { Theme } from '../../../context/theme.enum';
+import { InputFooterV2Tokens, InputLabelsV2Tokens, FloatingLabelsV2Tokens } from '../inputV2.tokens';
+export type NumberInputV2TokensType = {
+    gap: CSSObject['gap'];
+    topContainer: InputLabelsV2Tokens;
+    inputContainer: {
+        placeholder: {
+            color: {
+                [key in InputStateV2]: CSSObject['color'];
+            };
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight'];
+            };
+        };
+        fontSize: {
+            [key in InputSizeV2]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in InputSizeV2]: CSSObject['fontWeight'];
+        };
+        color: {
+            [key in InputStateV2]: CSSObject['color'];
+        };
+        borderRadius: {
+            [key in InputSizeV2]: CSSObject['borderRadius'];
+        };
+        boxShadow: CSSObject['boxShadow'];
+        paddingTop: {
+            [key in InputSizeV2]: CSSObject['paddingTop'];
+        };
+        paddingRight: {
+            [key in InputSizeV2]: CSSObject['paddingRight'];
+        };
+        paddingBottom: {
+            [key in InputSizeV2]: CSSObject['paddingBottom'];
+        };
+        paddingLeft: {
+            [key in InputSizeV2]: CSSObject['paddingLeft'];
+        };
+        border: {
+            [key in InputStateV2]: CSSObject['border'];
+        };
+        lineHeight: {
+            [key in InputSizeV2]: CSSObject['lineHeight'];
+        };
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor'];
+        };
+        stepperButton: {
+            width: {
+                [key in InputSizeV2]: CSSObject['width'];
+            };
+            backgroundColor: {
+                [key in InputStateV2]: CSSObject['backgroundColor'];
+            };
+            icon: {
+                color: {
+                    [key in InputStateV2]: CSSObject['color'];
+                };
+                width: {
+                    [key in InputSizeV2]: CSSObject['width'];
+                };
+            };
+        };
+        slot: {
+            left: {
+                width: {
+                    [key in InputSizeV2]: CSSObject['width'];
+                };
+                height: {
+                    [key in InputSizeV2]: CSSObject['height'];
+                };
+                margin: {
+                    [key in InputSizeV2]: CSSObject['margin'];
+                };
+            };
+            right: {
+                width: {
+                    [key in InputSizeV2]: CSSObject['width'];
+                };
+                height: {
+                    [key in InputSizeV2]: CSSObject['height'];
+                };
+                margin: {
+                    [key in InputSizeV2]: CSSObject['margin'];
+                };
+            };
+        };
+    };
+    unit: {
+        fontSize: {
+            [key in InputSizeV2]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in InputSizeV2]: CSSObject['fontWeight'];
+        };
+        paddingTop: {
+            [key in InputSizeV2]: CSSObject['paddingTop'];
+        };
+        paddingRight: {
+            [key in InputSizeV2]: CSSObject['paddingRight'];
+        };
+        paddingBottom: {
+            [key in InputSizeV2]: CSSObject['paddingBottom'];
+        };
+        paddingLeft: {
+            [key in InputSizeV2]: CSSObject['paddingLeft'];
+        };
+        borderRadius: {
+            [key in InputSizeV2]: CSSObject['borderRadius'];
+        };
+        border: {
+            [key in InputStateV2]: CSSObject['border'];
+        };
+        color: {
+            [key in InputStateV2]: CSSObject['color'];
+        };
+    };
+    floatingLabels: FloatingLabelsV2Tokens;
+    bottomContainer: InputFooterV2Tokens;
+};
+export type ResponsiveNumberInputV2Tokens = {
+    [key in keyof BreakpointType]: NumberInputV2TokensType;
+};
+export declare const getNumberInputV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveNumberInputV2Tokens;

package/dist/components/InputsV2/NumberInputV2/numberInputV2.types.d.ts

@@ -0,0 +1,41 @@
+import { InputSizeV2 } from '../inputV2.types';
+export declare enum NumberInputV2Direction {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export type NumberInputV2Props = {
+    slot?: {
+        left?: React.ReactNode;
+        right?: React.ReactNode;
+    };
+    value: number | null;
+    unit?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    error?: {
+        show: boolean;
+        message?: string;
+    };
+    size?: InputSizeV2;
+    label?: {
+        text: string;
+        subtext?: string;
+    };
+    unitDirection?: NumberInputV2Direction;
+    helpIconText?: string;
+    hintText?: string;
+    name?: string;
+    preventNegative?: boolean;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'value' | 'onBlur' | 'onFocus' | 'slot'>;
+export type StepperArrowProps = {
+    disabled?: boolean;
+    dimmed: boolean;
+    flip?: boolean;
+    size: number | string;
+    colorDefault: React.CSSProperties['color'];
+    colorDisabled: React.CSSProperties['color'];
+};

package/dist/components/InputsV2/NumberInputV2/utils.d.ts

@@ -0,0 +1,52 @@
+import { InputSizeV2, InputStateV2 } from '../inputV2.types';
+import { NumberInputV2TokensType } from './numberInputV2.tokens';
+import { NumberInputV2Direction } from './numberInputV2.types';
+/** Max length for `unit` after trim; longer values are invalid (error + unit hidden). */
+export declare const NUMBER_INPUT_V2_UNIT_MAX_LENGTH = 7;
+/** When non-empty `unit` exceeds the max length, returns a footer error message. */
+export declare const getNumberInputV2UnitLengthErrorMessage: (unit: string | undefined) => string | undefined;
+export declare const sanitizeNumberInput: (inputValue: string, allowNegative?: boolean) => string;
+export declare const clampToBoundary: (value: number, min?: number, max?: number) => number;
+export declare const getEffectiveNumericValue: (rawNumericValue: number | null, preventNegative: boolean, min?: number, max?: number) => number | null;
+export declare const incrementValue: (currentValue: number | null, step?: number, min?: number, max?: number, preventNegative?: boolean) => number;
+export declare const decrementValue: (currentValue: number | null, step?: number, min?: number, max?: number, preventNegative?: boolean) => number;
+export declare const clampValueOnBlur: (inputValue: string, allowNegative?: boolean, min?: number, max?: number) => string;
+export declare const isValueOutsideRange: (value: number, min?: number, max?: number) => boolean;
+export declare const getRangeErrorMessage: (min?: number, max?: number) => string;
+/** Stepping base: raw controlled number with only `preventNegative` applied (min/max handled in increment/decrement). */
+export declare const getSteppingBaseValue: (rawNumericValue: number | null, preventNegative: boolean) => number | null;
+export declare const getNumberInputDisplayValue: (isFocused: boolean, internalValue: string, value: number | null, effectiveNumericValue: number | null) => string;
+export declare const getInputFocusedOrWithValue: (isFocused: boolean, displayValue: string) => boolean;
+export declare const isSmallScreenWithLargeSize: (isSmallScreen: boolean, size: InputSizeV2) => boolean;
+export declare const getRangeErrorMessageIfOutside: (rawNumericValue: number | null, numericMin: number | undefined, numericMax: number | undefined) => string | undefined;
+export declare const getNumberInputHasError: (errorShow: boolean | undefined, errorMessage: string | undefined, rangeErrorMessage: string | undefined) => boolean;
+export declare const getNumberInputDisplayErrorMessage: (errorShow: boolean | undefined, errorMessage: string | undefined, rangeErrorMessage: string | undefined) => string | undefined;
+export declare const buildNumberInputAriaDescribedBy: (hintText: string | undefined, hasError: boolean, hintId: string, errorId: string, displayErrorMessage: string | undefined) => string | undefined;
+export declare const getNumberInputLabelState: (disabled: boolean | undefined, hasError: boolean, isFocused: boolean) => InputStateV2;
+/** Visual state for the unit strip (borders/color); includes hover so it matches `PrimitiveInput` `_hover` chrome. */
+export declare const getNumberInputUnitState: (disabled: boolean | undefined, hasError: boolean, isFocused: boolean, isHovered: boolean) => InputStateV2;
+export declare const computeIsUpButtonDisabled: (numericMax: number | undefined, steppingBaseValue: number | null, numericMin: number | undefined, stepValue: number) => boolean;
+export declare const computeIsDownButtonDisabled: (steppingBaseValue: number | null, preventNegative: boolean, numericMin: number | undefined, stepValue: number) => boolean;
+/** Parsed numeric string for controlled onChange, or empty string when incomplete/invalid. */
+export declare const sanitizedToCommittedValueString: (sanitized: string) => string;
+export declare const rawNumericToComparableString: (rawNumericValue: number | null) => string;
+export declare const shouldSkipControlledChange: (valueString: string, currentValueString: string) => boolean;
+export declare const shouldEmitBlurChange: (clamped: string, eventValue: string, clampedNumValue: number | null, rawNumericValue: number | null) => boolean;
+type NumberInputV2InputContainerTokens = NumberInputV2TokensType['inputContainer'];
+/** Subscribes to `element` width changes; calls `setWidth` with `offsetWidth`. Returns unsubscribe. */
+export declare const subscribeElementOffsetWidth: (element: HTMLElement, setWidth: (width: number) => void) => (() => void);
+/**
+ * Horizontal padding so input text clears absolutely positioned adornments on the **left**:
+ * - **Unit left**: unit width + left-slot margin + left-slot width + `paddingLeft` token.
+ * - **Unit right**: left-slot margin + left-slot width + `paddingLeft` only (unit and right
+ *   adornments do not affect left inset).
+ */
+export declare const getNumberInputV2PaddingLeft: (inputContainerTokens: NumberInputV2InputContainerTokens, size: InputSizeV2, showUnit: boolean, unitDirection: NumberInputV2Direction, measuredUnitWidth: number, measuredLeftSlotWidth: number, measuredRightSlotWidth: number) => string;
+/**
+ * Horizontal padding so input text clears absolutely positioned adornments on the **right**:
+ * - **Unit right**: unit width + `paddingRight` + right-slot width (matches slot `marginRight`
+ *   layout: unit + padding strip, then the right slot).
+ * - **Unit left**: right-slot margin + right-slot width + `paddingRight` only.
+ */
+export declare const getNumberInputV2PaddingRight: (inputContainerTokens: NumberInputV2InputContainerTokens, size: InputSizeV2, showUnit: boolean, unitDirection: NumberInputV2Direction, measuredUnitWidth: number, measuredLeftSlotWidth: number, measuredRightSlotWidth: number) => string;
+export {};

package/dist/components/InputsV2/OTPInputV2/OTPInputV2.d.ts

@@ -0,0 +1,14 @@
+declare const OTPInputV2: import('react').ForwardRefExoticComponent<{
+    label?: string;
+    sublabel?: string;
+    helpIconHintText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    value?: string;
+    length?: number;
+    autoFocus?: boolean;
+    onChange?: (value: string) => void;
+    form?: string;
+} & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "style" | "className" | "onChange" | "placeholder"> & import('react').RefAttributes<HTMLInputElement>>;
+export default OTPInputV2;

package/dist/components/InputsV2/OTPInputV2/OTPInputV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveOTPInputV2Tokens } from './OTPInputV2.tokens';
+export declare const getOTPInputV2DarkTokens: (foundationTokens: FoundationTokenType) => ResponsiveOTPInputV2Tokens;

package/dist/components/InputsV2/OTPInputV2/OTPInputV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveOTPInputV2Tokens } from './OTPInputV2.tokens';
+export declare const getOTPInputV2LightTokens: (foundationTokens: FoundationTokenType) => ResponsiveOTPInputV2Tokens;

package/dist/components/InputsV2/OTPInputV2/OTPInputV2.tokens.d.ts

@@ -0,0 +1,34 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { InputFooterV2Tokens, InputLabelsV2Tokens } from '../inputV2.tokens';
+import { InputStateV2 } from '../inputV2.types';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { Theme } from '../../../context/theme.enum';
+export type OTPInputV2TokensType = {
+    gap: CSSObject['gap'];
+    topContainer: InputLabelsV2Tokens;
+    inputContainer: {
+        gap: CSSObject['gap'];
+        input: {
+            height: CSSObject['height'];
+            width: CSSObject['width'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: {
+                [key in InputStateV2]: CSSObject['color'];
+            };
+            borderRadius: CSSObject['borderRadius'];
+            border: {
+                [key in InputStateV2]: CSSObject['border'];
+            };
+            backgroundColor: {
+                [key in InputStateV2]: CSSObject['backgroundColor'];
+            };
+        };
+    };
+    bottomContainer: InputFooterV2Tokens;
+};
+export type ResponsiveOTPInputV2Tokens = {
+    [key in keyof BreakpointType]: OTPInputV2TokensType;
+};
+export declare const getOTPInputV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveOTPInputV2Tokens;