flikkui 0.1.0-beta.11

package/dist/components/forms/InputCounter/InputCounter.types.d.ts

@@ -0,0 +1,54 @@
+import { HTMLMotionProps, Transition } from 'motion/react';
+import { ButtonProps } from '../../core/Button/Button.types';
+/**
+ * InputCounter component props
+ * @property {number} value - Current counter value (controlled)
+ * @property {function} onChange - Callback when value changes
+ * @property {number} min - Minimum allowed value (optional)
+ * @property {number} max - Maximum allowed value (optional)
+ * @property {number} step - Increment/decrement step size (default: 1)
+ * @property {boolean} disabled - Whether the counter is disabled
+ * @property {function} formatNumber - Custom number formatter
+ * @property {object} buttonProps - Props to pass to increment/decrement buttons
+ * @property {object} theme - Theme overrides for styling
+ * @property {object} transition - Custom Framer Motion transition
+ */
+export interface InputCounterProps extends Omit<HTMLMotionProps<'div'>, 'onChange'> {
+    /** Current counter value (controlled) */
+    value: number;
+    /** Callback when value changes */
+    onChange: (value: number) => void;
+    /** Minimum allowed value (optional) */
+    min?: number;
+    /** Maximum allowed value (optional) */
+    max?: number;
+    /** Increment/decrement step size (default: 1) */
+    step?: number;
+    /** Whether the counter is disabled */
+    disabled?: boolean;
+    /** Number of decimal places to display (auto-detected from step if not specified) */
+    decimalPlaces?: number;
+    /** Custom number formatter (e.g., for decimals or localization) */
+    formatNumber?: (value: number) => string;
+    /** Additional class names */
+    className?: string;
+    /** Props to pass to increment/decrement buttons (omitting onClick) */
+    buttonProps?: Omit<ButtonProps, 'onClick'>;
+    /** Theme overrides for styling */
+    theme?: Partial<InputCounterTheme>;
+    /** Custom Framer Motion transition */
+    transition?: Transition;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+}
+/**
+ * Theme configuration for InputCounter component
+ */
+export interface InputCounterTheme {
+    /** Base container style */
+    baseStyle: string;
+    /** Wrapper style for button animations */
+    buttonWrapperStyle: string;
+    /** Number display style */
+    numberStyle: string;
+}

package/dist/components/forms/InputCounter/index.d.ts

@@ -0,0 +1,3 @@
+export { InputCounter } from './InputCounter';
+export type { InputCounterProps, InputCounterTheme, } from './InputCounter.types';
+export { inputCounterTheme } from './InputCounter.theme';

package/dist/components/forms/InputCreditCard/InputCreditCard.animations.d.ts

@@ -0,0 +1,9 @@
+import { Variants } from 'motion/react';
+/**
+ * Animation variants for the container
+ */
+export declare const containerVariants: Variants;
+/**
+ * Animation variants for the inputs
+ */
+export declare const inputVariants: Variants;

package/dist/components/forms/InputCreditCard/InputCreditCard.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { InputCreditCardProps } from "./InputCreditCard.types";
+/**
+ * InputCreditCard component for collecting credit card information
+ * Displays a multi-field form for credit card entry with properly connected borders
+ *
+ * @example
+ * ```tsx
+ * <InputCreditCard
+ *   legendText="Payment Information"
+ *   expiryDateLabel="Expiry Date"
+ *   cvcLabel="CVC"
+ *   onCardNumberChange={(number) => console.log(number)}
+ *   onExpiryDateChange={(date) => console.log(date)}
+ *   onCvcChange={(cvc) => console.log(cvc)}
+ * />
+ * ```
+ */
+export declare const InputCreditCard: React.FC<InputCreditCardProps>;

package/dist/components/forms/InputCreditCard/InputCreditCard.js

@@ -0,0 +1,74 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo, useState, useCallback } from 'react';
+import { Input } from '../Input/Input.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { InputCreditCardTheme } from './InputCreditCard.theme.js';
+
+/**
+ * InputCreditCard component for collecting credit card information
+ * Displays a multi-field form for credit card entry with properly connected borders
+ *
+ * @example
+ * ```tsx
+ * <InputCreditCard
+ *   legendText="Payment Information"
+ *   expiryDateLabel="Expiry Date"
+ *   cvcLabel="CVC"
+ *   onCardNumberChange={(number) => console.log(number)}
+ *   onExpiryDateChange={(date) => console.log(date)}
+ *   onCvcChange={(cvc) => console.log(cvc)}
+ * />
+ * ```
+ */
+var InputCreditCard = function (_a) {
+    var onCardNumberChange = _a.onCardNumberChange, onExpiryDateChange = _a.onExpiryDateChange, onCvcChange = _a.onCvcChange, _b = _a.expiryDateLabel, expiryDateLabel = _b === void 0 ? "MM / YY" : _b, _c = _a.cvcLabel, cvcLabel = _c === void 0 ? "CVC" : _c, _d = _a.legendText, legendText = _d === void 0 ? "Payment Information" : _d, _e = _a.cardNumberInputProps, cardNumberInputProps = _e === void 0 ? {} : _e, _f = _a.expiryDateInputProps, expiryDateInputProps = _f === void 0 ? {} : _f, _g = _a.cvcInputProps, cvcInputProps = _g === void 0 ? {} : _g, _h = _a.className, className = _h === void 0 ? "" : _h, _j = _a.theme, theme = _j === void 0 ? {} : _j;
+    // Merge the default theme with the provided theme overrides
+    var mergedTheme = useMemo(function () { return (__assign(__assign(__assign({}, InputCreditCardTheme), theme), { expiryDateInput: __assign(__assign({}, InputCreditCardTheme.expiryDateInput), theme.expiryDateInput), cvcInput: __assign(__assign({}, InputCreditCardTheme.cvcInput), theme.cvcInput) })); }, [theme]);
+    // State for card details
+    var _k = useState(""), cardNumber = _k[0], setCardNumber = _k[1];
+    var _l = useState(""), expiryDate = _l[0], setExpiryDate = _l[1];
+    var _m = useState(""), cvc = _m[0], setCvc = _m[1];
+    var _o = useState(null); _o[0]; var setFocused = _o[1];
+    // Handle card number change
+    var handleCardNumberChange = useCallback(function (e) {
+        var newCardNumber = e.target.value;
+        setCardNumber(newCardNumber);
+        onCardNumberChange === null || onCardNumberChange === void 0 ? void 0 : onCardNumberChange(newCardNumber);
+    }, [onCardNumberChange]);
+    // Handle expiry date change
+    var handleExpiryDateChange = useCallback(function (e) {
+        var newExpiryDate = e.target.value;
+        setExpiryDate(newExpiryDate);
+        onExpiryDateChange === null || onExpiryDateChange === void 0 ? void 0 : onExpiryDateChange(newExpiryDate);
+    }, [onExpiryDateChange]);
+    // Handle CVC change
+    var handleCvcChange = useCallback(function (e) {
+        var newCvc = e.target.value;
+        setCvc(newCvc);
+        onCvcChange === null || onCvcChange === void 0 ? void 0 : onCvcChange(newCvc);
+    }, [onCvcChange]);
+    // Handle focus states
+    var handleFocus = useCallback(function (field) {
+        setFocused(field);
+    }, []);
+    var handleBlur = useCallback(function () {
+        setFocused(null);
+    }, []);
+    // Create unique IDs for accessibility
+    useMemo(function () { return "card-fieldset-".concat(Math.random().toString(36).substring(2, 9)); }, []);
+    var cardNumberId = useMemo(function () { return "card-number-".concat(Math.random().toString(36).substring(2, 9)); }, []);
+    var expiryDateId = useMemo(function () { return "expiry-date-".concat(Math.random().toString(36).substring(2, 9)); }, []);
+    var cvcId = useMemo(function () { return "cvc-".concat(Math.random().toString(36).substring(2, 9)); }, []);
+    return (React__default.createElement("div", { className: "w-full ".concat(className), "data-testid": "input-credit-card-fieldset" },
+        React__default.createElement(FormLabel, { htmlFor: cardNumberId, className: mergedTheme.legendStyles }, legendText),
+        React__default.createElement("div", { className: "grid gap-0 ".concat(mergedTheme.contentStyles), "data-testid": "input-credit-card-content" },
+            React__default.createElement("div", { className: "w-full relative focus-within:z-10", "data-testid": "input-card-number" },
+                React__default.createElement(Input, __assign({ id: cardNumberId, type: "creditCard", value: cardNumber, onChange: handleCardNumberChange, placeholder: "Card Number", "aria-label": "card number", onFocus: function () { return handleFocus("cardNumber"); }, onBlur: handleBlur, inputGroupClassName: "rounded-b-none" }, cardNumberInputProps))),
+            React__default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 w-full -mt-px relative" },
+                React__default.createElement("div", { className: "".concat(mergedTheme.expiryDateWrapperStyles || "", " w-full sm:pr-0"), "data-testid": "input-expiry-date relative focus-within:z-10" },
+                    React__default.createElement(Input, __assign({ id: expiryDateId, type: "expiryDate", value: expiryDate, onChange: handleExpiryDateChange, placeholder: expiryDateLabel, "aria-label": expiryDateLabel, onFocus: function () { return handleFocus("expiryDate"); }, onBlur: handleBlur, inputGroupClassName: "sm:rounded-bl-md rounded-t-none sm:rounded-tr-none sm:rounded-br-none relative focus-within:z-10" }, expiryDateInputProps))),
+                React__default.createElement("div", { className: "".concat(mergedTheme.cvcWrapperStyles || "", " w-full"), "data-testid": "input-cvc relative focus-within:z-10" },
+                    React__default.createElement(Input, __assign({ id: cvcId, type: "tel", maxLength: 3, pattern: "[0-9]*", inputMode: "numeric", value: cvc, onChange: handleCvcChange, placeholder: cvcLabel, "aria-label": cvcLabel, onFocus: function () { return handleFocus("cvc"); }, onBlur: handleBlur, inputGroupClassName: " sm:rounded-br-md rounded-t-none rounded-bl-md sm:rounded-bl-none relative focus-within:z-10" }, cvcInputProps)))))));
+};
+
+export { InputCreditCard };

package/dist/components/forms/InputCreditCard/InputCreditCard.theme.d.ts

@@ -0,0 +1,31 @@
+import { InputCreditCardThemeOverrides } from './InputCreditCard.types';
+/**
+ * Default theme for the InputCreditCard component
+ */
+export declare const inputCreditCardTheme: InputCreditCardThemeOverrides;
+/**
+ * Styled theme matching the reference design
+ */
+export declare const styledInputCreditCardTheme: {
+    container?: string;
+    legendStyles?: string;
+    fieldsetStyles?: string;
+    contentStyles?: string;
+    expiryDateWrapperStyles?: string;
+    cvcWrapperStyles?: string;
+    cardNumberInput?: import("..").InputTheme;
+    expiryDateInput?: import("..").InputTheme;
+    cvcInput?: import("..").InputTheme;
+    inputPositions?: import("./InputCreditCard.types").InputPositionStyles;
+    chevronStyles?: string;
+    baseInputGroupStyle?: string;
+    topInputGroupStyle?: string;
+    middleInputGroupStyle?: string;
+    bottomLeftInputGroupStyle?: string;
+    bottomRightInputGroupStyle?: string;
+    bottomFullInputGroupStyle?: string;
+};
+/**
+ * Export InputCreditCardTheme for use in component
+ */
+export declare const InputCreditCardTheme: InputCreditCardThemeOverrides;

package/dist/components/forms/InputCreditCard/InputCreditCard.theme.js

@@ -0,0 +1,35 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { inputTheme } from '../Input/Input.theme.js';
+
+/**
+ * Default theme for the InputCreditCard component
+ */
+var inputCreditCardTheme = {
+    container: 'w-full',
+    fieldsetStyles: 'w-full',
+    expiryDateWrapperStyles: 'grid grid-cols-1',
+    cvcWrapperStyles: '',
+    // Only keeping border radius positioning styles
+    baseInputGroupStyle: '',
+    // Specific styles for various positions
+    topInputGroupStyle: 'rounded-t-md rounded-b-none',
+    middleInputGroupStyle: 'rounded-none',
+    bottomLeftInputGroupStyle: 'rounded-bl-md rounded-br-none sm:border-r-0',
+    bottomRightInputGroupStyle: 'rounded-br-md rounded-bl-none',
+    bottomFullInputGroupStyle: 'rounded-b-md rounded-t-none',
+    // Using default input theme for all inputs
+    cardNumberInput: __assign({}, inputTheme),
+    expiryDateInput: __assign({}, inputTheme),
+    cvcInput: __assign({}, inputTheme),
+    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4',
+};
+/**
+ * Styled theme matching the reference design
+ */
+__assign({}, inputCreditCardTheme);
+/**
+ * Export InputCreditCardTheme for use in component
+ */
+var InputCreditCardTheme = inputCreditCardTheme;
+
+export { InputCreditCardTheme, inputCreditCardTheme };

package/dist/components/forms/InputCreditCard/InputCreditCard.types.d.ts

@@ -0,0 +1,88 @@
+import { InputProps, InputTheme } from '../Input/Input.types';
+/**
+ * InputCreditCard component props
+ * @property {function} onCardNumberChange - Callback when card number changes
+ * @property {function} onExpiryDateChange - Callback when expiry date changes
+ * @property {function} onCvcChange - Callback when CVC changes
+ * @property {string} expiryDateLabel - Label for expiry date input
+ * @property {string} cvcLabel - Label for CVC input
+ * @property {string} legendText - Text displayed as the form label
+ * @property {InputCreditCardThemeOverrides} theme - Theme overrides for the credit card input
+ */
+export interface InputCreditCardProps {
+    /** Callback when card number changes */
+    onCardNumberChange?: (cardNumber: string) => void;
+    /** Callback when expiry date changes */
+    onExpiryDateChange?: (expiryDate: string) => void;
+    /** Callback when CVC changes */
+    onCvcChange?: (cvc: string) => void;
+    /** Label for expiry date input */
+    expiryDateLabel?: string;
+    /** Label for CVC input */
+    cvcLabel?: string;
+    /** Text displayed as the form label */
+    legendText?: string;
+    /** Props passed to the card number input */
+    cardNumberInputProps?: Omit<InputProps, 'ref'>;
+    /** Props passed to the expiry date input */
+    expiryDateInputProps?: Omit<InputProps, 'ref'>;
+    /** Props passed to the CVC input */
+    cvcInputProps?: Omit<InputProps, 'ref'>;
+    /** Class name for the container */
+    className?: string;
+    /** Component-level theme overrides */
+    theme?: InputCreditCardThemeOverrides;
+}
+/**
+ * Input position types within the credit card form
+ */
+export type InputCreditCardPosition = 'top' | 'middle' | 'bottomLeft' | 'bottomRight' | 'bottomFull';
+/**
+ * Input position styles
+ */
+export interface InputPositionStyles {
+    top: string;
+    middle: string;
+    bottomLeft: string;
+    bottomRight: string;
+    bottomFull: string;
+}
+/**
+ * Theme overrides for the InputCreditCard component
+ */
+export interface InputCreditCardThemeOverrides {
+    /** Container styles */
+    container?: string;
+    /** Styles for the legend element */
+    legendStyles?: string;
+    /** Styles for the fieldset element */
+    fieldsetStyles?: string;
+    /** Styles for the content container */
+    contentStyles?: string;
+    /** Styles for the expiry date input wrapper */
+    expiryDateWrapperStyles?: string;
+    /** Styles for the CVC input wrapper */
+    cvcWrapperStyles?: string;
+    /** Card number input theme overrides */
+    cardNumberInput?: InputTheme;
+    /** Expiry date input theme overrides */
+    expiryDateInput?: InputTheme;
+    /** CVC input theme overrides */
+    cvcInput?: InputTheme;
+    /** Styles for input positions */
+    inputPositions?: InputPositionStyles;
+    /** Styles for the chevron icon */
+    chevronStyles?: string;
+    /** Base input group style that serves as foundation for all positions */
+    baseInputGroupStyle?: string;
+    /** Style for the top input (first in sequence) */
+    topInputGroupStyle?: string;
+    /** Style for middle inputs (between first and last) */
+    middleInputGroupStyle?: string;
+    /** Style for bottom-left input (in a split bottom row) */
+    bottomLeftInputGroupStyle?: string;
+    /** Style for bottom-right input (in a split bottom row) */
+    bottomRightInputGroupStyle?: string;
+    /** Style for a full-width bottom input (when only one bottom input is shown) */
+    bottomFullInputGroupStyle?: string;
+}

package/dist/components/forms/InputCreditCard/index.d.ts

@@ -0,0 +1,4 @@
+export { InputCreditCard } from './InputCreditCard';
+export type { InputCreditCardProps, InputCreditCardThemeOverrides } from './InputCreditCard.types';
+export { inputCreditCardTheme, styledInputCreditCardTheme } from './InputCreditCard.theme';
+export { containerVariants, inputVariants } from './InputCreditCard.animations';

package/dist/components/forms/InputDate/InputDate.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { InputDateProps } from './InputDate.types';
+/**
+ * InputDate component for entering dates with automatic masking
+ *
+ * Features:
+ * - Single input field with automatic slash insertion (e.g., "12252024" → "12/25/2024")
+ * - Multiple format support (MM/DD/YYYY, DD/MM/YYYY, YYYY/MM/DD)
+ * - Date validation (valid month, day, year ranges)
+ * - Min/max date range validation
+ * - Cursor position handling
+ * - Paste support
+ * - Inherits all Input component features (icons, addons, sizes, states, theming)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <InputDate
+ *   label="Date of Birth"
+ *   value={date}
+ *   onChange={setDate}
+ *   dateFormat="MM/DD/YYYY"
+ *   maxDate={new Date()}
+ *   onComplete={(date) => console.log('Valid date entered:', date)}
+ * />
+ * ```
+ */
+export declare const InputDate: React.ForwardRefExoticComponent<InputDateProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/forms/InputDate/InputDate.js

@@ -0,0 +1,157 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import { Input } from '../Input/Input.js';
+import '../Input/Input.theme.js';
+import { formatDateInput, isValidDateInput } from '../Input/inputMasks.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * InputDate component for entering dates with automatic masking
+ *
+ * Features:
+ * - Single input field with automatic slash insertion (e.g., "12252024" → "12/25/2024")
+ * - Multiple format support (MM/DD/YYYY, DD/MM/YYYY, YYYY/MM/DD)
+ * - Date validation (valid month, day, year ranges)
+ * - Min/max date range validation
+ * - Cursor position handling
+ * - Paste support
+ * - Inherits all Input component features (icons, addons, sizes, states, theming)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <InputDate
+ *   label="Date of Birth"
+ *   value={date}
+ *   onChange={setDate}
+ *   dateFormat="MM/DD/YYYY"
+ *   maxDate={new Date()}
+ *   onComplete={(date) => console.log('Valid date entered:', date)}
+ * />
+ * ```
+ */
+var InputDate = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.value, value = _b === void 0 ? '' : _b, onChange = _a.onChange, onComplete = _a.onComplete, dateFormat = _a.dateFormat, minDate = _a.minDate, maxDate = _a.maxDate, className = _a.className, props = __rest(_a, ["value", "onChange", "onComplete", "dateFormat", "minDate", "maxDate", "className"]);
+    var _c = useState(''), maskedValue = _c[0], setMaskedValue = _c[1];
+    var inputRef = useRef(null);
+    var cursorPositionRef = useRef(null);
+    var getDefaultDateFormat = function () {
+        if (typeof navigator !== 'undefined') {
+            var lang = (navigator.language || '').toLowerCase();
+            if (lang.startsWith('en-us'))
+                return 'MM/DD/YYYY';
+        }
+        return 'DD/MM/YYYY';
+    };
+    var resolvedFormat = dateFormat !== null && dateFormat !== void 0 ? dateFormat : getDefaultDateFormat();
+    // Initialize masked value from prop value
+    useEffect(function () {
+        if (value) {
+            var formatted = formatDateInput(value, resolvedFormat);
+            setMaskedValue(formatted);
+        }
+        else {
+            setMaskedValue('');
+        }
+    }, [value, resolvedFormat]);
+    // Generate placeholder based on format
+    var getPlaceholder = function () {
+        return resolvedFormat.toLowerCase().replace(/m/g, 'm').replace(/d/g, 'd').replace(/y/g, 'y');
+    };
+    // Handle backspace to delete slash along with digit
+    var handleKeyDown = useCallback(function (e) {
+        if (e.key === 'Backspace' && !e.metaKey && !e.ctrlKey) {
+            var cursorPos_1 = e.currentTarget.selectionStart;
+            var cursorEnd = e.currentTarget.selectionEnd;
+            // Only handle if no text is selected and cursor is right after a slash
+            if (cursorPos_1 === cursorEnd && cursorPos_1 !== null && cursorPos_1 > 0) {
+                var currentValue = e.currentTarget.value;
+                var charBeforeCursor = currentValue[cursorPos_1 - 1];
+                // If the character before cursor is a slash, delete it along with the digit before it
+                if (charBeforeCursor === '/') {
+                    e.preventDefault();
+                    var newValue = currentValue.slice(0, cursorPos_1 - 2) + currentValue.slice(cursorPos_1);
+                    var masked = formatDateInput(newValue, resolvedFormat);
+                    setMaskedValue(masked);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(masked);
+                    // Set cursor position after the deletion
+                    setTimeout(function () {
+                        if (inputRef.current) {
+                            var newPos = Math.max(0, cursorPos_1 - 2);
+                            inputRef.current.setSelectionRange(newPos, newPos);
+                        }
+                    }, 0);
+                }
+            }
+        }
+    }, [resolvedFormat, onChange]);
+    // Handle input change with masking
+    var handleChange = useCallback(function (e) {
+        var originalValue = e.target.value;
+        cursorPositionRef.current = e.target.selectionStart;
+        // Apply date masking
+        var masked = formatDateInput(originalValue, resolvedFormat);
+        setMaskedValue(masked);
+        // Call onChange with formatted value
+        onChange === null || onChange === void 0 ? void 0 : onChange(masked);
+        // Check if date is complete and valid
+        if (masked.length === 10) {
+            if (isValidDateInput(masked, resolvedFormat)) {
+                // Parse the date based on format
+                var parts = masked.split('/');
+                var month = void 0, day = void 0, year = void 0;
+                switch (resolvedFormat) {
+                    case 'MM/DD/YYYY':
+                        month = parseInt(parts[0], 10);
+                        day = parseInt(parts[1], 10);
+                        year = parseInt(parts[2], 10);
+                        break;
+                    case 'DD/MM/YYYY':
+                        day = parseInt(parts[0], 10);
+                        month = parseInt(parts[1], 10);
+                        year = parseInt(parts[2], 10);
+                        break;
+                    case 'YYYY/MM/DD':
+                        year = parseInt(parts[0], 10);
+                        month = parseInt(parts[1], 10);
+                        day = parseInt(parts[2], 10);
+                        break;
+                    default:
+                        return;
+                }
+                var dateObj = new Date(year, month - 1, day);
+                // Check min/max date constraints
+                var isInRange = true;
+                if (minDate && dateObj < minDate)
+                    isInRange = false;
+                if (maxDate && dateObj > maxDate)
+                    isInRange = false;
+                if (isInRange) {
+                    onComplete === null || onComplete === void 0 ? void 0 : onComplete(dateObj);
+                }
+            }
+        }
+        // Adjust cursor position - move to end after formatting
+        setTimeout(function () {
+            if (inputRef.current) {
+                // Always place cursor at the end of the formatted value
+                var newPosition = masked.length;
+                inputRef.current.setSelectionRange(newPosition, newPosition);
+            }
+        }, 0);
+    }, [resolvedFormat, onChange, onComplete, minDate, maxDate]);
+    // Set the ref from forwardRef
+    var setInputRef = function (el) {
+        inputRef.current = el;
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    return (React__default.createElement(Input, __assign({ ref: setInputRef, type: "text", inputMode: "numeric", value: maskedValue, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: props.placeholder || getPlaceholder(), maxLength: 10, className: cn("tabular-nums", className) }, props)));
+});
+InputDate.displayName = 'InputDate';
+
+export { InputDate };

package/dist/components/forms/InputDate/InputDate.theme.d.ts

@@ -0,0 +1,11 @@
+/**
+ * InputDate theme
+ *
+ * Note: InputDate wraps the Input component and inherits all its theming.
+ * The only date-specific styling (tabular-nums for monospaced numbers)
+ * is applied directly in the component via className.
+ *
+ * This file is kept for consistency with other form components,
+ * but no theme configuration is needed.
+ */
+export declare const inputDateTheme: {};

package/dist/components/forms/InputDate/InputDate.theme.js

@@ -0,0 +1,13 @@
+/**
+ * InputDate theme
+ *
+ * Note: InputDate wraps the Input component and inherits all its theming.
+ * The only date-specific styling (tabular-nums for monospaced numbers)
+ * is applied directly in the component via className.
+ *
+ * This file is kept for consistency with other form components,
+ * but no theme configuration is needed.
+ */
+var inputDateTheme = {};
+
+export { inputDateTheme };

package/dist/components/forms/InputDate/InputDate.types.d.ts

@@ -0,0 +1,25 @@
+import { InputProps } from '../Input/Input.types';
+/**
+ * Date format options for displaying and parsing dates
+ */
+export type DateFormat = 'MM/DD/YYYY' | 'DD/MM/YYYY' | 'YYYY/MM/DD';
+/**
+ * InputDate component props
+ *
+ * Extends Input component props with date-specific functionality
+ * Wraps the base Input component and inherits all its features
+ */
+export interface InputDateProps extends Omit<InputProps, 'type' | 'onChange' | 'value' | 'inputMode' | 'maxLength'> {
+    /** Current date value (formatted string like "12/25/2024" or ISO string) */
+    value?: string;
+    /** Callback when date value changes (returns formatted string) */
+    onChange?: (value: string) => void;
+    /** Callback when a valid complete date is entered */
+    onComplete?: (date: Date) => void;
+    /** Date format for display and parsing (default: auto-detected from locale) */
+    dateFormat?: DateFormat;
+    /** Minimum allowed date */
+    minDate?: Date;
+    /** Maximum allowed date */
+    maxDate?: Date;
+}

package/dist/components/forms/InputDate/index.d.ts

@@ -0,0 +1,3 @@
+export { InputDate } from './InputDate';
+export type { InputDateProps, DateFormat, } from './InputDate.types';
+export { inputDateTheme } from './InputDate.theme';

package/dist/components/forms/InputOTP/InputOTP.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InputOTPProps } from './InputOTP.types';
+/**
+ * InputOTP component for entering one-time passwords or verification codes.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <InputOTP
+ *   length={6}
+ *   value={otpValue}
+ *   onChange={setOtpValue}
+ *   onComplete={handleOtpComplete}
+ *   label="Enter verification code"
+ * />
+ * ```
+ */
+export declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLDivElement>>;