@tribepad/themis 1.0.0

package/dist/elements/NumberField/NumberField.d.ts

@@ -0,0 +1,43 @@
+/**
+ * NumberField component for numeric input with optional stepper buttons.
+ *
+ * @example
+ * ```tsx
+ * import { NumberField } from '@tribepad/themis/elements/NumberField';
+ *
+ * // Basic usage
+ * <NumberField label="Quantity" />
+ *
+ * // With constraints
+ * <NumberField
+ *   label="Quantity"
+ *   minValue={1}
+ *   maxValue={100}
+ *   step={1}
+ *   defaultValue={5}
+ * />
+ *
+ * // Currency formatting
+ * <NumberField
+ *   label="Price"
+ *   formatOptions={{ style: 'currency', currency: 'USD' }}
+ *   step={0.01}
+ *   defaultValue={9.99}
+ * />
+ *
+ * // Allow negative numbers
+ * <NumberField
+ *   label="Temperature"
+ *   allowNegative
+ *   formatOptions={{ style: 'unit', unit: 'celsius' }}
+ * />
+ *
+ * // Hidden steppers
+ * <NumberField
+ *   label="Account Number"
+ *   stepperLayout="hidden"
+ * />
+ * ```
+ */
+export declare const NumberField: import("react").ForwardRefExoticComponent<Omit<import("react-aria-components").NumberFieldProps, "children"> & import("./NumberField.types").ThemisNumberFieldCustomProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=NumberField.d.ts.map

package/dist/elements/NumberField/NumberField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/elements/NumberField/NumberField.tsx"],"names":[],"mappings":"AAqDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,WAAW,4NAgKvB,CAAC"}

package/dist/elements/NumberField/NumberField.types.d.ts

@@ -0,0 +1,112 @@
+/**
+ * NumberField Component Types
+ *
+ * Zod schemas and TypeScript types for the NumberField component.
+ * CVA variants are in a separate file (NumberField.variants.ts) to separate
+ * styling concerns from type definitions.
+ *
+ * Note: Zod schemas are used for contract tests and developer guardrails,
+ * not runtime validation. This follows the established Themis pattern.
+ *
+ * @see {@link ../../docs/prd/numberfield-prd.md} for full requirements
+ */
+import { z } from 'zod';
+import type { NumberFieldProps as AriaNumberFieldProps, ValidationResult } from 'react-aria-components';
+/**
+ * Default maximum value (UINT32_MAX) to prevent overflow/Infinity.
+ */
+export declare const DEFAULT_MAX_VALUE = 4294967295;
+/**
+ * Default minimum value for non-negative numbers.
+ */
+export declare const DEFAULT_MIN_VALUE = 0;
+/**
+ * Minimum value when allowNegative is enabled (INT32_MIN + 1).
+ */
+export declare const NEGATIVE_MIN_VALUE = -2147483647;
+/**
+ * Size variants for NumberField component.
+ * - 'sm': Compact size (36px height) - touch targets via padding
+ * - 'default': Standard size (40px height) - AAA compliant
+ * - 'lg': Large size (48px height) - AAA compliant
+ */
+export type NumberFieldSize = 'sm' | 'default' | 'lg';
+/**
+ * Layout options for stepper buttons.
+ * - 'sides': Buttons on left (-) and right (+) of input (default)
+ * - 'stacked': Buttons stacked vertically on right side
+ * - 'hidden': No stepper buttons (keyboard/typing only)
+ */
+export type StepperLayout = 'sides' | 'stacked' | 'hidden';
+/**
+ * Zod schema for NumberField props validation.
+ * Used for contract tests and developer guardrails, not runtime validation.
+ */
+export declare const NumberFieldPropsSchema: z.ZodObject<{
+    value: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+    defaultValue: z.ZodOptional<z.ZodNumber>;
+    minValue: z.ZodOptional<z.ZodNumber>;
+    maxValue: z.ZodOptional<z.ZodNumber>;
+    allowNegative: z.ZodOptional<z.ZodBoolean>;
+    step: z.ZodOptional<z.ZodNumber>;
+    formatOptions: z.ZodOptional<z.ZodCustom<Intl.NumberFormatOptions, Intl.NumberFormatOptions>>;
+    isDisabled: z.ZodOptional<z.ZodBoolean>;
+    isReadOnly: z.ZodOptional<z.ZodBoolean>;
+    isRequired: z.ZodOptional<z.ZodBoolean>;
+    isInvalid: z.ZodOptional<z.ZodBoolean>;
+    isWheelDisabled: z.ZodOptional<z.ZodBoolean>;
+    validate: z.ZodOptional<z.ZodFunction<z.core.$ZodFunctionArgs, z.core.$ZodFunctionOut>>;
+    validationBehavior: z.ZodDefault<z.ZodEnum<{
+        native: "native";
+        aria: "aria";
+    }>>;
+    label: z.ZodString;
+    description: z.ZodOptional<z.ZodString>;
+    errorMessage: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodFunction<z.core.$ZodFunctionArgs, z.core.$ZodFunctionOut>]>>;
+    stepperLayout: z.ZodDefault<z.ZodEnum<{
+        hidden: "hidden";
+        sides: "sides";
+        stacked: "stacked";
+    }>>;
+    incrementAriaLabel: z.ZodOptional<z.ZodString>;
+    decrementAriaLabel: z.ZodOptional<z.ZodString>;
+    name: z.ZodOptional<z.ZodString>;
+    size: z.ZodDefault<z.ZodEnum<{
+        default: "default";
+        sm: "sm";
+        lg: "lg";
+    }>>;
+    onChange: z.ZodOptional<z.ZodFunction<z.core.$ZodFunctionArgs, z.core.$ZodFunctionOut>>;
+    onFocus: z.ZodOptional<z.ZodFunction<z.core.$ZodFunctionArgs, z.core.$ZodFunctionOut>>;
+    onBlur: z.ZodOptional<z.ZodFunction<z.core.$ZodFunctionArgs, z.core.$ZodFunctionOut>>;
+    onFocusChange: z.ZodOptional<z.ZodFunction<z.core.$ZodFunctionArgs, z.core.$ZodFunctionOut>>;
+    className: z.ZodOptional<z.ZodString>;
+    autoFocus: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>;
+/**
+ * Custom props added to NumberField (not from React Aria).
+ */
+export interface ThemisNumberFieldCustomProps {
+    /** Size variant: 'sm', 'default', or 'lg' */
+    size?: NumberFieldSize;
+    /** Field label (required for accessibility) */
+    label: string;
+    /** Description text below the field */
+    description?: string;
+    /** Error message when field is invalid */
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    /** Layout for stepper buttons */
+    stepperLayout?: StepperLayout;
+    /** Custom aria-label for increment button */
+    incrementAriaLabel?: string;
+    /** Custom aria-label for decrement button */
+    decrementAriaLabel?: string;
+    /** Allow negative numbers (sets minValue to -2147483647 if not explicitly set) */
+    allowNegative?: boolean;
+}
+/**
+ * Props for the NumberField component.
+ * Combines React Aria's NumberFieldProps with Themis-specific props.
+ */
+export type NumberFieldProps = Omit<AriaNumberFieldProps, 'children'> & ThemisNumberFieldCustomProps;
+//# sourceMappingURL=NumberField.types.d.ts.map

package/dist/elements/NumberField/NumberField.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.types.d.ts","sourceRoot":"","sources":["../../../src/elements/NumberField/NumberField.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EACV,gBAAgB,IAAI,oBAAoB,EACxC,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAM/B;;GAEG;AACH,eAAO,MAAM,iBAAiB,aAAa,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,kBAAkB,cAAc,CAAC;AAM9C;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;AAMtD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAM3D;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8EjC,CAAC;AAMH;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,6CAA6C;IAC7C,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAC;IACnE,iCAAiC;IACjC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kFAAkF;IAClF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,GACnE,4BAA4B,CAAC"}

package/dist/elements/NumberField/NumberField.variants.d.ts

@@ -0,0 +1,82 @@
+/**
+ * NumberField Component CVA Variants
+ *
+ * Class Variance Authority (CVA) variant definitions for the NumberField component.
+ * Separated from types to maintain clean separation of concerns.
+ *
+ * Styling uses semantic CSS tokens that map to ThemeProvider variables:
+ * - --background: Input background color
+ * - --foreground: Text color
+ * - --input: Input border color (default state)
+ * - --ring: Focus ring color
+ * - --accent: Stepper button hover background
+ * - --accent-foreground: Stepper button hover text
+ * - --destructive: Error state border and text
+ * - --muted-foreground: Placeholder/disabled text
+ *
+ * @see {@link ../../docs/prd/numberfield-prd.md} for full requirements
+ */
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Variants for the NumberField container (Group element).
+ * Contains the input and stepper buttons.
+ *
+ * Size notes:
+ * - sm (36px): Compact, touch targets achieved via padding
+ * - default (40px): Standard size, AAA compliant touch targets
+ * - lg (48px): Large size, enhanced touch targets
+ */
+export declare const numberFieldVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    isInvalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Variants for the numeric input element.
+ * Hides native spinners and centers text.
+ */
+export declare const numberFieldInputVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Variants for the stepper buttons (increment/decrement).
+ * Supports different positions for sides and stacked layouts.
+ *
+ * Touch target strategy:
+ * - Visual button size varies with component size
+ * - 44x44px minimum touch target achieved via padding/hit area
+ */
+export declare const numberFieldStepperVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    position?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Variants for the NumberField label.
+ */
+export declare const numberFieldLabelVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Variants for the description text below the field.
+ */
+export declare const numberFieldDescriptionVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Variants for the error message display.
+ */
+export declare const numberFieldErrorVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Variant props for numberFieldVariants CVA function.
+ */
+export type NumberFieldVariantProps = VariantProps<typeof numberFieldVariants>;
+/**
+ * Variant props for numberFieldInputVariants CVA function.
+ */
+export type NumberFieldInputVariantProps = VariantProps<typeof numberFieldInputVariants>;
+/**
+ * Variant props for numberFieldStepperVariants CVA function.
+ */
+export type NumberFieldStepperVariantProps = VariantProps<typeof numberFieldStepperVariants>;
+//# sourceMappingURL=NumberField.variants.d.ts.map

package/dist/elements/NumberField/NumberField.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.variants.d.ts","sourceRoot":"","sources":["../../../src/elements/NumberField/NumberField.variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAMlE;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB;;;8EA4B/B,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,wBAAwB;;8EAwBpC,CAAC;AAMF;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B;;;8EAkCtC,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,wBAAwB;;8EAoBpC,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,8BAA8B;;8EAiB1C,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,wBAAwB;;8EAkBpC,CAAC;AAMF;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAE/E;;GAEG;AACH,MAAM,MAAM,4BAA4B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEzF;;GAEG;AACH,MAAM,MAAM,8BAA8B,GAAG,YAAY,CAAC,OAAO,0BAA0B,CAAC,CAAC"}

package/dist/elements/NumberField/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * NumberField Component
+ *
+ * A fully accessible numeric input component with optional stepper buttons.
+ *
+ * @example
+ * ```tsx
+ * import { NumberField } from '@tribepad/themis/elements/NumberField';
+ *
+ * <NumberField
+ *   label="Quantity"
+ *   minValue={1}
+ *   maxValue={100}
+ *   defaultValue={5}
+ * />
+ * ```
+ *
+ * @see {@link ../../docs/prd/numberfield-prd.md} for full requirements
+ */
+export { NumberField } from './NumberField';
+export type { NumberFieldProps, NumberFieldSize, StepperLayout, ThemisNumberFieldCustomProps, } from './NumberField.types';
+export { NumberFieldPropsSchema, DEFAULT_MAX_VALUE, DEFAULT_MIN_VALUE, NEGATIVE_MIN_VALUE, } from './NumberField.types';
+export { numberFieldVariants, numberFieldInputVariants, numberFieldStepperVariants, numberFieldLabelVariants, numberFieldDescriptionVariants, numberFieldErrorVariants, } from './NumberField.variants';
+export type { NumberFieldVariantProps, NumberFieldInputVariantProps, NumberFieldStepperVariantProps, } from './NumberField.variants';
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/NumberField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/NumberField/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,4BAA4B,GAC7B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,wBAAwB,EACxB,8BAA8B,EAC9B,wBAAwB,GACzB,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EACV,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,GAC/B,MAAM,wBAAwB,CAAC"}

package/dist/elements/NumberField/index.js

@@ -0,0 +1,57 @@
+'use strict';
+
+require('../../chunk-6SP7UB3D.js');
+var chunkKFXXRLTP_js = require('../../chunk-KFXXRLTP.js');
+require('../../chunk-3YOY2VJ6.js');
+require('../../chunk-Y3GT7ETK.js');
+require('../../chunk-B5Q4UPL6.js');
+require('../../chunk-VIREG536.js');
+
+
+
+Object.defineProperty(exports, "DEFAULT_MAX_VALUE", {
+  enumerable: true,
+  get: function () { return chunkKFXXRLTP_js.DEFAULT_MAX_VALUE; }
+});
+Object.defineProperty(exports, "DEFAULT_MIN_VALUE", {
+  enumerable: true,
+  get: function () { return chunkKFXXRLTP_js.DEFAULT_MIN_VALUE; }
+});
+Object.defineProperty(exports, "NEGATIVE_MIN_VALUE", {
+  enumerable: true,
+  get: function () { return chunkKFXXRLTP_js.NEGATIVE_MIN_VALUE; }
+});
+Object.defineProperty(exports, "NumberField", {
+  enumerable: true,
+  get: function () { return chunkKFXXRLTP_js.NumberField; }
+});
+Object.defineProperty(exports, "NumberFieldPropsSchema", {
+  enumerable: true,
+  get: function () { return chunkKFXXRLTP_js.NumberFieldPropsSchema; }
+});
+Object.defineProperty(exports, "numberFieldDescriptionVariants", {
+  enumerable: true,
+  get: function () { return chunkKFXXRLTP_js.numberFieldDescriptionVariants; }
+});
+Object.defineProperty(exports, "numberFieldErrorVariants", {
+  enumerable: true,
+  get: function () { return chunkKFXXRLTP_js.numberFieldErrorVariants; }
+});
+Object.defineProperty(exports, "numberFieldInputVariants", {
+  enumerable: true,
+  get: function () { return chunkKFXXRLTP_js.numberFieldInputVariants; }
+});
+Object.defineProperty(exports, "numberFieldLabelVariants", {
+  enumerable: true,
+  get: function () { return chunkKFXXRLTP_js.numberFieldLabelVariants; }
+});
+Object.defineProperty(exports, "numberFieldStepperVariants", {
+  enumerable: true,
+  get: function () { return chunkKFXXRLTP_js.numberFieldStepperVariants; }
+});
+Object.defineProperty(exports, "numberFieldVariants", {
+  enumerable: true,
+  get: function () { return chunkKFXXRLTP_js.numberFieldVariants; }
+});
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/elements/NumberField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/elements/NumberField/index.mjs

@@ -0,0 +1,8 @@
+import '../../chunk-4NHAP4AN.mjs';
+export { DEFAULT_MAX_VALUE, DEFAULT_MIN_VALUE, NEGATIVE_MIN_VALUE, NumberField, NumberFieldPropsSchema, numberFieldDescriptionVariants, numberFieldErrorVariants, numberFieldInputVariants, numberFieldLabelVariants, numberFieldStepperVariants, numberFieldVariants } from '../../chunk-A3YUJA6W.mjs';
+import '../../chunk-BDXKKMBZ.mjs';
+import '../../chunk-FPKEAJRZ.mjs';
+import '../../chunk-HK46BT5U.mjs';
+import '../../chunk-E2KQFV3O.mjs';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/elements/NumberField/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}

package/dist/elements/OTPInput/OTPInput.d.ts

@@ -0,0 +1,105 @@
+import { type FocusEvent } from 'react';
+import { type OTPInputRef } from './OTPInput.types';
+/**
+ * OTPInput Component
+ *
+ * A fully accessible, WCAG 2.2 AAA-compliant OTP (One-Time Password) input component.
+ *
+ * Key Features:
+ * - Single hidden input for screen readers (not multiple separate inputs)
+ * - Visual digit boxes for optimal UX
+ * - WCAG 2.2 AAA compliant (7:1 contrast, 44x44px touch targets)
+ * - Auto-advance on digit entry
+ * - Paste support with validation
+ * - Controlled and uncontrolled modes
+ * - Custom validation
+ * - React Hook Form compatible
+ *
+ * Accessibility:
+ * - Single tab stop (entire OTP is one field)
+ * - Proper ARIA attributes (label, describedby, invalid, errormessage)
+ * - Screen reader announcements for digit count and errors
+ * - Visible focus indicators (7:1 contrast)
+ * - Keyboard navigation (arrows, home, end, backspace, delete)
+ *
+ * @example Basic usage
+ * ```tsx
+ * <OTPInput
+ *   label="Enter verification code"
+ *   length={6}
+ *   onChange={(value) => console.log(value)}
+ *   onComplete={(code) => console.log('Complete:', code)}
+ * />
+ * ```
+ *
+ * @example Controlled mode with validation
+ * ```tsx
+ * const [otp, setOtp] = useState('');
+ * const [error, setError] = useState('');
+ *
+ * <OTPInput
+ *   label="Enter 6-digit code sent to your email"
+ *   value={otp}
+ *   onChange={setOtp}
+ *   error={error}
+ *   validate={(value) => {
+ *     if (value === '000000') return 'Invalid code';
+ *     return null;
+ *   }}
+ * />
+ * ```
+ *
+ * @example With ref API
+ * ```tsx
+ * const otpRef = useRef<OTPInputRef>(null);
+ *
+ * <OTPInput
+ *   ref={otpRef}
+ *   label="Enter verification code"
+ * />
+ *
+ * // Programmatic control
+ * otpRef.current?.clear();
+ * otpRef.current?.setValue('123456');
+ * ```
+ */
+export declare const OTPInput: import("react").ForwardRefExoticComponent<Omit<{
+    label: string;
+    length: number;
+    inputMode: "text" | "tel" | "numeric";
+    type: "custom" | "numeric" | "alphanumeric";
+    disabled: boolean;
+    readOnly: boolean;
+    size: "sm" | "lg" | "md";
+    showSuccess: boolean;
+    mask: boolean;
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    pattern?: RegExp | undefined;
+    description?: string | undefined;
+    error?: string | undefined;
+    className?: string | undefined;
+    digitClassName?: string | undefined;
+    onChange?: import("zod/v4/core").$InferOuterFunctionType<import("zod/v4/core").$ZodFunctionArgs, import("zod/v4/core").$ZodFunctionOut> | undefined;
+    onComplete?: import("zod/v4/core").$InferOuterFunctionType<import("zod/v4/core").$ZodFunctionArgs, import("zod/v4/core").$ZodFunctionOut> | undefined;
+    onPaste?: import("zod/v4/core").$InferOuterFunctionType<import("zod/v4/core").$ZodFunctionArgs, import("zod/v4/core").$ZodFunctionOut> | undefined;
+    validate?: import("zod/v4/core").$InferOuterFunctionType<import("zod/v4/core").$ZodFunctionArgs, import("zod/v4/core").$ZodFunctionOut> | undefined;
+    onFocus?: import("zod/v4/core").$InferOuterFunctionType<import("zod/v4/core").$ZodFunctionArgs, import("zod/v4/core").$ZodFunctionOut> | undefined;
+    onBlur?: import("zod/v4/core").$InferOuterFunctionType<import("zod/v4/core").$ZodFunctionArgs, import("zod/v4/core").$ZodFunctionOut> | undefined;
+}, "type" | "length" | "onFocus" | "onBlur" | "mask" | "onPaste" | "onChange" | "size" | "disabled" | "inputMode" | "validate" | "showSuccess" | "readOnly" | "onComplete"> & {
+    length?: number;
+    inputMode?: "numeric" | "text" | "tel";
+    type?: "numeric" | "alphanumeric" | "custom";
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: "sm" | "md" | "lg";
+    showSuccess?: boolean;
+    mask?: boolean;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    onPaste?: (value: string) => boolean | Promise<boolean>;
+    validate?: (value: string) => string | null;
+    onFocus?: (e: FocusEvent) => void;
+    onBlur?: (e: FocusEvent) => void;
+} & import("react").RefAttributes<OTPInputRef>>;
+//# sourceMappingURL=OTPInput.d.ts.map

package/dist/elements/OTPInput/OTPInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.d.ts","sourceRoot":"","sources":["../../../src/elements/OTPInput/OTPInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2C,KAAK,UAAU,EAAsB,MAAM,OAAO,CAAC;AAErG,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAUxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CAgLnB,CAAC"}

package/dist/elements/OTPInput/OTPInput.styles.d.ts

@@ -0,0 +1,83 @@
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * OTP Digit Box Variants
+ *
+ * Styling for individual digit display boxes using ShadCN CSS variables.
+ * Ensures WCAG 2.2 AAA compliance (7:1 contrast, 44x44px touch targets).
+ *
+ * CSS Variables used (from ShadCN):
+ * - --background: Base background color
+ * - --foreground: Text color
+ * - --border: Border color
+ * - --primary: Primary brand color (focus state)
+ * - --ring: Focus ring color
+ * - --destructive: Error state color
+ * - --destructive-foreground: Error text color
+ * - --success: Success state color (if available)
+ * - --muted: Muted background color
+ * - --muted-foreground: Placeholder/disabled text color
+ */
+export declare const otpDigitVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+    state?: "success" | "default" | "error" | "disabled" | "focus" | "filled" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * OTP Container Variants
+ *
+ * Styling for the main container that holds all digit boxes
+ */
+export declare const otpContainerVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * OTP Digit Group Variants
+ *
+ * Styling for the row of digit boxes
+ */
+export declare const otpDigitGroupVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * OTP Error Message Variants
+ *
+ * Styling for error messages displayed below input
+ */
+export declare const otpErrorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * OTP Description Variants
+ *
+ * Styling for description/help text
+ */
+export declare const otpDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Type export for variant props
+ * Allows TypeScript inference of variant combinations
+ */
+export type OTPDigitVariantProps = VariantProps<typeof otpDigitVariants>;
+export type OTPContainerVariantProps = VariantProps<typeof otpContainerVariants>;
+export type OTPDigitGroupVariantProps = VariantProps<typeof otpDigitGroupVariants>;
+/**
+ * Animation: Shake effect for errors
+ *
+ * Add this to tailwind.config.ts animations:
+ *
+ * ```ts
+ * module.exports = {
+ *   theme: {
+ *     extend: {
+ *       keyframes: {
+ *         shake: {
+ *           '0%, 100%': { transform: 'translateX(0)' },
+ *           '25%': { transform: 'translateX(-8px)' },
+ *           '75%': { transform: 'translateX(8px)' },
+ *         },
+ *       },
+ *       animation: {
+ *         shake: 'shake 200ms ease-in-out',
+ *       },
+ *     },
+ *   },
+ * };
+ * ```
+ */
+//# sourceMappingURL=OTPInput.styles.d.ts.map

package/dist/elements/OTPInput/OTPInput.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.styles.d.ts","sourceRoot":"","sources":["../../../src/elements/OTPInput/OTPInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,gBAAgB;;;8EA2J5B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;8EAsBhC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB;;8EAoBjC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,oFAM3B,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,oFAIjC,CAAC;AAEH;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACzE,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACjF,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAEnF;;;;;;;;;;;;;;;;;;;;;;;GAuBG"}