@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,156 @@
+import { jsx } from 'react/jsx-runtime';
+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)}
+ * />
+ * ```
+ */
+const InputDate = React__default.forwardRef(({ value = '', onChange, onComplete, dateFormat, minDate, maxDate, className, ...props }, ref) => {
+    const [maskedValue, setMaskedValue] = useState('');
+    const inputRef = useRef(null);
+    const cursorPositionRef = useRef(null);
+    const getDefaultDateFormat = () => {
+        if (typeof navigator !== 'undefined') {
+            const lang = (navigator.language || '').toLowerCase();
+            if (lang.startsWith('en-us'))
+                return 'MM/DD/YYYY';
+        }
+        return 'DD/MM/YYYY';
+    };
+    const resolvedFormat = dateFormat !== null && dateFormat !== void 0 ? dateFormat : getDefaultDateFormat();
+    // Initialize masked value from prop value
+    useEffect(() => {
+        if (value) {
+            const formatted = formatDateInput(value, resolvedFormat);
+            setMaskedValue(formatted);
+        }
+        else {
+            setMaskedValue('');
+        }
+    }, [value, resolvedFormat]);
+    // Generate placeholder based on format
+    const getPlaceholder = () => {
+        return resolvedFormat.toLowerCase().replace(/m/g, 'm').replace(/d/g, 'd').replace(/y/g, 'y');
+    };
+    // Handle backspace to delete slash along with digit
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Backspace' && !e.metaKey && !e.ctrlKey) {
+            const cursorPos = e.currentTarget.selectionStart;
+            const cursorEnd = e.currentTarget.selectionEnd;
+            // Only handle if no text is selected and cursor is right after a slash
+            if (cursorPos === cursorEnd && cursorPos !== null && cursorPos > 0) {
+                const currentValue = e.currentTarget.value;
+                const charBeforeCursor = currentValue[cursorPos - 1];
+                // If the character before cursor is a slash, delete it along with the digit before it
+                if (charBeforeCursor === '/') {
+                    e.preventDefault();
+                    const newValue = currentValue.slice(0, cursorPos - 2) + currentValue.slice(cursorPos);
+                    const masked = formatDateInput(newValue, resolvedFormat);
+                    setMaskedValue(masked);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(masked);
+                    // Set cursor position after the deletion
+                    setTimeout(() => {
+                        if (inputRef.current) {
+                            const newPos = Math.max(0, cursorPos - 2);
+                            inputRef.current.setSelectionRange(newPos, newPos);
+                        }
+                    }, 0);
+                }
+            }
+        }
+    }, [resolvedFormat, onChange]);
+    // Handle input change with masking
+    const handleChange = useCallback((e) => {
+        const originalValue = e.target.value;
+        cursorPositionRef.current = e.target.selectionStart;
+        // Apply date masking
+        const 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
+                const parts = masked.split('/');
+                let month, day, year;
+                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;
+                }
+                const dateObj = new Date(year, month - 1, day);
+                // Check min/max date constraints
+                let 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(() => {
+            if (inputRef.current) {
+                // Always place cursor at the end of the formatted value
+                const newPosition = masked.length;
+                inputRef.current.setSelectionRange(newPosition, newPosition);
+            }
+        }, 0);
+    }, [resolvedFormat, onChange, onComplete, minDate, maxDate]);
+    // Set the ref from forwardRef
+    const setInputRef = (el) => {
+        inputRef.current = el;
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    return (jsx(Input, { 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.
+ */
+const 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>>;

package/dist/components/forms/InputOTP/InputOTP.js

@@ -0,0 +1,175 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Input } from '../Input/Input.js';
+import '../Input/Input.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { inputOTPTheme } from './InputOTP.theme.js';
+
+/**
+ * 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"
+ * />
+ * ```
+ */
+const InputOTP = React__default.forwardRef(({ length = 6, value = '', onChange, onComplete, disabled = false, label, helperText, error, autoFocus = true, className, ...props }, ref) => {
+    const inputRefs = useRef([]);
+    const theme = inputOTPTheme;
+    // Internal state for uncontrolled usage
+    const [internalValue, setInternalValue] = useState('');
+    // Use controlled value if provided, otherwise use internal state
+    const currentValue = value !== undefined ? value : internalValue;
+    const setValue = onChange || setInternalValue;
+    // Convert value to array of characters
+    const valueArray = currentValue.padEnd(length, '').split('').slice(0, length);
+    // Auto-focus first input on mount
+    useEffect(() => {
+        if (autoFocus && inputRefs.current[0] && !disabled) {
+            inputRefs.current[0].focus();
+        }
+    }, [autoFocus, disabled]);
+    // Handle input change
+    const handleChange = useCallback((index, newValue) => {
+        var _a;
+        if (disabled)
+            return;
+        // Only allow single character (take last character if multiple)
+        const char = newValue.slice(-1);
+        // Create new value array
+        const newValueArray = [...valueArray];
+        newValueArray[index] = char;
+        // Convert back to string and remove trailing spaces
+        const newValueString = newValueArray.join('').trimEnd();
+        setValue(newValueString);
+        // Auto-focus next input if character was entered
+        if (char && index < length - 1) {
+            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        // Check if OTP is complete
+        if (newValueString.length === length) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValueString);
+        }
+    }, [disabled, valueArray, length, setValue, onComplete]);
+    // Handle key down for navigation and deletion
+    const handleKeyDown = useCallback((index, event) => {
+        var _a, _b, _c, _d, _e;
+        if (disabled)
+            return;
+        switch (event.key) {
+            case 'Backspace':
+                if (!valueArray[index] && index > 0) {
+                    // If current field is empty, move to previous and clear it
+                    event.preventDefault();
+                    (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+                    handleChange(index - 1, '');
+                }
+                break;
+            case 'Delete':
+                // Clear current field
+                event.preventDefault();
+                handleChange(index, '');
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (index > 0) {
+                    (_b = inputRefs.current[index - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (index < length - 1) {
+                    (_c = inputRefs.current[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                (_d = inputRefs.current[0]) === null || _d === void 0 ? void 0 : _d.focus();
+                break;
+            case 'End':
+                event.preventDefault();
+                (_e = inputRefs.current[length - 1]) === null || _e === void 0 ? void 0 : _e.focus();
+                break;
+        }
+    }, [disabled, valueArray, length, handleChange]);
+    // Handle paste
+    const handlePaste = useCallback((event) => {
+        var _a;
+        if (disabled)
+            return;
+        event.preventDefault();
+        const pastedData = event.clipboardData.getData('text').slice(0, length);
+        if (pastedData) {
+            setValue(pastedData);
+            // Focus the next empty field or last field
+            const nextIndex = Math.min(pastedData.length, length - 1);
+            (_a = inputRefs.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            // Check if OTP is complete
+            if (pastedData.length === length) {
+                onComplete === null || onComplete === void 0 ? void 0 : onComplete(pastedData);
+            }
+        }
+    }, [disabled, length, setValue, onComplete]);
+    // Handle focus and blur (simplified since we removed focus state)
+    const handleFocus = useCallback((index) => {
+        // Focus logic can be added here if needed
+    }, []);
+    const handleBlur = useCallback(() => {
+        // Blur logic can be added here if needed
+    }, []);
+    // State class for CSS selectors (matches Input component pattern)
+    const stateClass = error
+        ? "state-invalid"
+        : disabled
+            ? "state-disabled"
+            : "state-default";
+    // Build classes with shadcn pattern - user className has highest priority
+    const wrapperClasses = cn(theme.wrapperStyle, stateClass, className);
+    const containerClasses = cn(theme.containerStyle);
+    // Get input classes based on position within group
+    const getInputClasses = (index) => {
+        if (length === 6) {
+            // For 6-digit: two groups of 3
+            const isFirst = index === 0 || index === 3;
+            const isLast = index === 2 || index === 5;
+            return cn(theme.inputGroupStyle, 'relative focus-within:z-10', {
+                'rounded-r-none -mr-px': !isLast,
+                'rounded-l-none': !isFirst,
+            });
+        }
+        else {
+            // For other lengths: one group
+            const isFirst = index === 0;
+            const isLast = index === length - 1;
+            return cn(theme.inputGroupStyle, 'relative focus-within:z-10', {
+                'rounded-r-none -mr-px': !isLast,
+                'rounded-l-none': !isFirst,
+            });
+        }
+    };
+    return (jsxs("div", { ref: ref, className: wrapperClasses, ...props, children: [label && (jsx(FormLabel, { htmlFor: `otp-input-0`, state: error ? "invalid" : disabled ? "disabled" : "default", children: label })), jsx("div", { className: containerClasses, children: length === 6 ? (
+                // For 6-digit OTP, create two groups of 3
+                jsxs(Fragment, { children: [jsx("div", { className: "flex", children: Array.from({ length: 3 }, (_, i) => (jsx(Input, { ref: (el) => {
+                                    inputRefs.current[i] = el;
+                                }, id: `otp-input-${i}`, type: "text", value: valueArray[i] || '', onChange: (e) => handleChange(i, e.target.value), onKeyDown: (e) => handleKeyDown(i, e), onFocus: () => handleFocus(i), onBlur: handleBlur, onPaste: i === 0 ? handlePaste : undefined, disabled: disabled, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(i), wrapperClassName: "space-y-0 w-auto" }, i))) }), jsx("span", { className: theme.separatorStyle, children: "\u2014" }), jsx("div", { className: "flex", children: Array.from({ length: 3 }, (_, i) => {
+                                const index = i + 3;
+                                return (jsx(Input, { ref: (el) => {
+                                        inputRefs.current[index] = el;
+                                    }, id: `otp-input-${index}`, type: "text", value: valueArray[index] || '', onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), onFocus: () => handleFocus(index), onBlur: handleBlur, disabled: disabled, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(index), wrapperClassName: "space-y-0 w-auto" }, index));
+                            }) })] })) : (
+                // For other lengths, create one group
+                jsx("div", { className: "flex", children: Array.from({ length }, (_, index) => (jsx(Input, { ref: (el) => {
+                            inputRefs.current[index] = el;
+                        }, id: `otp-input-${index}`, type: "text", value: valueArray[index] || '', onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), onFocus: () => handleFocus(index), onBlur: handleBlur, onPaste: index === 0 ? handlePaste : undefined, disabled: disabled, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(index), wrapperClassName: "space-y-0 w-auto" }, index))) })) }), (error || helperText) && (jsx("div", { className: cn(theme.helperText), children: error || helperText }))] }));
+});
+InputOTP.displayName = 'InputOTP';
+
+export { InputOTP };

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

@@ -0,0 +1,6 @@
+import { InputOTPTheme } from './InputOTP.types';
+/**
+ * Default theme for InputOTP component - Clean & Organized
+ * Uses flat structure with design tokens following library patterns
+ */
+export declare const inputOTPTheme: InputOTPTheme;

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

@@ -0,0 +1,22 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for InputOTP component - Clean & Organized
+ * Uses flat structure with design tokens following library patterns
+ */
+const inputOTPTheme = {
+    // Base container styles
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // OTP input container
+    containerStyle: 'flex items-center gap-3',
+    // Individual input field styles with design tokens
+    inputStyle: 'text-center text-lg text-[var(--color-text-primary)] h-full',
+    // Input group wrapper for grouped inputs (overrides default Input styling)
+    inputGroupStyle: 'w-12 min-w-12 h-12 min-h-12',
+    // Separator between input groups
+    separatorStyle: 'text-[var(--color-text-muted)] font-medium select-none',
+    // Helper text with state handling (reuses form base)
+    helperText: formsBaseTheme.helperText,
+};
+
+export { inputOTPTheme };

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

@@ -0,0 +1,49 @@
+export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Number of OTP input fields
+     * @default 6
+     */
+    length?: number;
+    /**
+     * Current OTP value
+     */
+    value?: string;
+    /**
+     * Callback when OTP value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback when OTP is complete (all fields filled)
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Whether the input is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Label for the OTP input group
+     */
+    label?: string;
+    /**
+     * Helper text below the inputs
+     */
+    helperText?: string;
+    /**
+     * Error message
+     */
+    error?: string;
+    /**
+     * Auto-focus the first input on mount
+     * @default true
+     */
+    autoFocus?: boolean;
+}
+export interface InputOTPTheme {
+    wrapperStyle: string;
+    containerStyle: string;
+    inputStyle: string;
+    inputGroupStyle: string;
+    separatorStyle: string;
+    helperText: string;
+}

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

@@ -0,0 +1,3 @@
+export { InputOTP } from './InputOTP';
+export type { InputOTPProps, InputOTPTheme } from './InputOTP.types';
+export { inputOTPTheme } from './InputOTP.theme';

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { InputTagProps } from "./InputTag.types";
+/**
+ * InputTag component for entering multiple tags/keywords.
+ *
+ * Supports:
+ * - Enter key to add tag
+ * - Comma to add tag
+ * - Paste multiple comma-separated values
+ * - Backspace to remove last tag (when input is empty)
+ * - Click X to remove individual tags
+ * - Optional dropdown suggestions with filtering
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic free-form tags (uncontrolled)
+ * <InputTag
+ *   defaultValue={['JavaScript', 'React']}
+ *   onChange={(tags) => console.log(tags)}
+ * />
+ *
+ * // Controlled with max tags
+ * <InputTag
+ *   value={tags}
+ *   onChange={setTags}
+ *   maxTags={5}
+ * />
+ *
+ * // With suggestions dropdown
+ * <InputTag
+ *   suggestions={[
+ *     { id: '1', label: 'React', value: 'react' },
+ *     { id: '2', label: 'Vue', value: 'vue' },
+ *   ]}
+ *   creatable={true}
+ * />
+ * ```
+ */
+export declare const InputTag: React.ForwardRefExoticComponent<InputTagProps & React.RefAttributes<HTMLDivElement>>;