@flikk/ui 1.0.0-beta.1

package/dist/components/forms/Input/Input.js

@@ -0,0 +1,289 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { inputTheme } from './Input.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { LockClosedIcon, EyeSlashIcon, EyeIcon } from '@heroicons/react/24/solid';
+import { PlusIcon } from '../../../icons/core/PlusIcon.js';
+import { MinusIcon } from '../../../icons/core/MinusIcon.js';
+import { SearchIcon } from '../../../icons/core/SearchIcon.js';
+import '../../../icons/core/LockIcon.js';
+import '../../../icons/core/DollarIcon.js';
+import '../../../icons/core/TickIcon.js';
+import { validateMaskedInput, applyInputMask, getAdjustedCursorPosition } from './inputMasks.js';
+
+const PasswordToggleButton = ({ showPassword, onToggle, passwordToggleClasses, }) => {
+    const toggleIconActive = inputTheme.typeStyles.password.toggleIconActive;
+    const toggleIconInactive = inputTheme.typeStyles.password.toggleIconInactive;
+    return (jsx("div", { className: passwordToggleClasses, onClick: (e) => {
+            e.stopPropagation();
+            onToggle();
+        }, "aria-label": showPassword ? "Hide password" : "Show password", role: "button", tabIndex: 0, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onToggle();
+            }
+        }, children: showPassword ? (jsx(EyeSlashIcon, { className: toggleIconActive, "aria-hidden": "true" })) : (jsx(EyeIcon, { className: toggleIconInactive, "aria-hidden": "true" })) }));
+};
+const NumberButtons = ({ isDisabled, isAtMax, isAtMin, onIncrement, onDecrement, numberButtonsContainerClasses, numberButtonClasses, }) => {
+    const incrementIconStyle = inputTheme.typeStyles.number.incrementIconStyle;
+    const decrementIconStyle = inputTheme.typeStyles.number.decrementIconStyle;
+    return (jsxs("div", { className: numberButtonsContainerClasses, children: [jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
+                    e.stopPropagation();
+                    onDecrement();
+                }, disabled: isDisabled || isAtMin, "aria-label": "Decrease value", tabIndex: -1, children: jsx(MinusIcon, { size: "xs", className: decrementIconStyle, "aria-hidden": "true" }) }), jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
+                    e.stopPropagation();
+                    onIncrement();
+                }, disabled: isDisabled || isAtMax, "aria-label": "Increase value", tabIndex: -1, children: jsx(PlusIcon, { size: "xs", className: incrementIconStyle, "aria-hidden": "true" }) })] }));
+};
+const getActiveDots = (strength) => {
+    switch (strength) {
+        case "weak":
+            return 1;
+        case "moderate":
+            return 2;
+        case "strong":
+            return 4;
+        case "very-strong":
+            return 5;
+        default:
+            return 0;
+    }
+};
+const PasswordStrengthIndicator = ({ inline = false, passwordStrengthIndicator, }) => {
+    const strength = passwordStrengthIndicator.strength || "strong";
+    const customLabel = passwordStrengthIndicator.customLabel;
+    const indicatorClassName = passwordStrengthIndicator.className || "";
+    const containerStyle = `${inputTheme.passwordStrengthIndicator.containerStyle} ${inline ? "" : "mt-2"}`;
+    const labelStyle = inputTheme.passwordStrengthIndicator.labelStyle;
+    const dotStyle = inputTheme.passwordStrengthIndicator.dotStyle;
+    const dotActiveStyle = inputTheme.passwordStrengthIndicator.dotActiveStyle;
+    const dotInactiveStyle = inputTheme.passwordStrengthIndicator.dotInactiveStyle;
+    const strengthConfig = inputTheme.passwordStrengthIndicator
+        .strengthStyles[strength] || {
+        label: "Password",
+        color: "text-[var(--color-text-muted)]",
+    };
+    const colorClass = strengthConfig.color || "text-neutral-500";
+    const label = customLabel || strengthConfig.label || "Password";
+    const activeDots = getActiveDots(strength);
+    return (jsxs("div", { className: `${containerStyle} ${indicatorClassName} ${colorClass}`, children: [jsx("div", { className: labelStyle, children: label }), [...Array(5)].map((_, index) => (jsx("div", { className: `${dotStyle} ${index < activeDots ? dotActiveStyle : dotInactiveStyle}` }, index)))] }));
+};
+// ============================================================================
+// Main Input Component
+// ============================================================================
+const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, onFocus, onBlur, value, currencyDecimalPlaces, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const generatedId = React__default.useId();
+    const inputId = id || generatedId;
+    const [numberValue, setNumberValue] = useState(value !== undefined
+        ? typeof value === "number"
+            ? value
+            : typeof value === "string"
+                ? parseFloat(value) || undefined
+                : undefined
+        : undefined);
+    const inputRef = useRef(null);
+    const cursorPositionRef = useRef(null);
+    // Default icons based on input type
+    const defaultPasswordIcon = type === "password" && !iconStart ? (jsx(LockClosedIcon, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
+    const defaultSearchIcon = type === "search" && !iconStart ? (jsx(SearchIcon, { size: "sm", className: inputTheme.typeStyles.search.iconStyle })) : null;
+    // Use the provided iconStart or the default icon based on input type
+    const finalLeftIcon = iconStart || defaultPasswordIcon || defaultSearchIcon;
+    // Derived state flags for internal use
+    const hasLeftIcon = Boolean(finalLeftIcon);
+    const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
+    const hasRightIcon = Boolean(iconEnd);
+    const hasContentStart = Boolean(contentStart);
+    const hasContentEnd = Boolean(contentEnd);
+    const hasKeyboardShortcut = Boolean(keyboardShortcut);
+    const isPasswordField = type === "password" && passwordToggle;
+    const isNumberField = type === "number";
+    const displayNumberControls = isNumberField && showNumberControls;
+    const isMaskedInput = [
+        "creditCard",
+        "expiryDate",
+        "phone",
+        "ssn",
+        "currency",
+    ].includes(type);
+    // Password strength indicator flags
+    const hasPasswordStrength = type === "password" && (passwordStrengthIndicator === null || passwordStrengthIndicator === void 0 ? void 0 : passwordStrengthIndicator.show);
+    const strengthPosition = (passwordStrengthIndicator === null || passwordStrengthIndicator === void 0 ? void 0 : passwordStrengthIndicator.position) || "right";
+    const showStrengthWithLabel = hasPasswordStrength && strengthPosition === "right";
+    const showStrengthBelow = hasPasswordStrength && strengthPosition === "below";
+    // State class for CSS selectors
+    const stateClass = isInvalid
+        ? "state-invalid"
+        : isDisabled
+            ? "state-disabled"
+            : "state-default";
+    // Set the ref from forwardRef or create one
+    const setInputRef = (el) => {
+        inputRef.current = el;
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    // Determine the actual input type to use
+    const actualInputType = isPasswordField && showPassword ? "text" : isMaskedInput ? "text" : type;
+    // Validate masked inputs
+    useEffect(() => {
+        if (isMaskedInput && value) {
+            validateMaskedInput(type, value.toString());
+            // Optional: Add validation state handling here if needed
+        }
+    }, [value, type, isMaskedInput]);
+    // Sync the internal number value with the external value prop
+    useEffect(() => {
+        if (isNumberField && value !== undefined) {
+            const parsedValue = typeof value === "number"
+                ? value
+                : typeof value === "string"
+                    ? parseFloat(value) || undefined
+                    : undefined;
+            setNumberValue(parsedValue);
+        }
+    }, [value, isNumberField]);
+    // Toggle password visibility
+    const handleTogglePassword = useCallback(() => {
+        if (!isDisabled) {
+            setShowPassword((prev) => !prev);
+        }
+    }, [isDisabled]);
+    // Handle input group click for addon variations - focus the input
+    // Bail out when the click target is inside an interactive element (e.g. nested Select)
+    const handleInputGroupClick = (e) => {
+        const target = e.target;
+        if (target.closest('button, [role="button"], [role="listbox"], [role="combobox"], [aria-haspopup], select, a')) {
+            return;
+        }
+        if (!isFocused && !isDisabled && inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    // Increment number value
+    const handleIncrement = useCallback(() => {
+        if (isDisabled)
+            return;
+        const stepValue = typeof step === "number" ? step : 1;
+        const currentValue = numberValue !== undefined ? numberValue : 0;
+        let newValue = currentValue + stepValue;
+        // Apply constraints
+        if (max !== undefined && typeof max === "number" && newValue > max) {
+            newValue = max;
+        }
+        setNumberValue(newValue);
+        updateNumberValue(newValue);
+    }, [isDisabled, step, numberValue, max]);
+    // Decrement number value
+    const handleDecrement = useCallback(() => {
+        if (isDisabled)
+            return;
+        const stepValue = typeof step === "number" ? step : 1;
+        const currentValue = numberValue !== undefined ? numberValue : 0;
+        let newValue = currentValue - stepValue;
+        // Apply constraints
+        if (min !== undefined && typeof min === "number" && newValue < min) {
+            newValue = min;
+        }
+        setNumberValue(newValue);
+        updateNumberValue(newValue);
+    }, [isDisabled, step, numberValue, min]);
+    // Update the input value and trigger onChange
+    const updateNumberValue = (newValue) => {
+        if (inputRef.current) {
+            inputRef.current.value = newValue.toString();
+            // Create and dispatch a synthetic event
+            const event = new Event("input", { bubbles: true });
+            inputRef.current.dispatchEvent(event);
+            // Call onChange handler if provided
+            if (onChange) {
+                onChange(event);
+            }
+        }
+    };
+    // Handle input change
+    const handleInputChange = (e) => {
+        // Store original value and cursor position
+        const originalValue = e.target.value;
+        cursorPositionRef.current = e.target.selectionStart;
+        if (isMaskedInput) {
+            // Apply masking with options
+            const maskedValue = applyInputMask(originalValue, type, {
+                currencyDecimalPlaces: currencyDecimalPlaces,
+            });
+            // Update the input value
+            e.target.value = maskedValue;
+            // Adjust cursor position
+            if (cursorPositionRef.current !== null) {
+                const newCursorPosition = getAdjustedCursorPosition(originalValue, maskedValue, cursorPositionRef.current);
+                // Set the cursor position after React updates the DOM
+                setTimeout(() => {
+                    if (inputRef.current) {
+                        inputRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
+                    }
+                }, 0);
+            }
+            // For currency inputs, ensure we immediately validate
+            if (type === "currency" && isInvalid && onChange) {
+                const event = { ...e };
+                onChange(event);
+            }
+        }
+        else if (isNumberField) {
+            const value = e.target.value;
+            const parsedValue = value ? parseFloat(value) : undefined;
+            setNumberValue(parsedValue);
+        }
+        // Call the original onChange handler
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    // Theme classes - using simplified approach with design tokens
+    const wrapperClasses = inputTheme.wrapperStyle;
+    const inputGroupClasses = inputTheme.inputGroupStyle;
+    const baseClasses = inputTheme.baseStyle;
+    const sizeClasses = inputTheme.sizes[size];
+    const stateClasses = inputTheme.states[state];
+    const helperTextClasses = inputTheme.helperText;
+    // Icon classes using design tokens
+    const iconStartClasses = inputTheme.iconStartStyle;
+    const iconEndClasses = inputTheme.iconEndStyle;
+    const iconStartPadding = inputTheme.iconPadding.left;
+    const iconEndPadding = inputTheme.iconPadding.right;
+    // Content classes - size-aware
+    const contentStyleClasses = inputTheme.contentStyle[size];
+    const contentStartStyle = inputTheme.contentStartStyle;
+    const contentEndStyle = inputTheme.contentEndStyle;
+    // Interactive element classes
+    const passwordToggleClasses = inputTheme.passwordToggleStyle;
+    const numberButtonsContainerClasses = inputTheme.numberButtonsContainerStyle;
+    const numberButtonClasses = inputTheme.numberButtonStyle;
+    // Compute number bounds for NumberButtons
+    const isAtMax = max !== undefined &&
+        numberValue !== undefined &&
+        typeof max === "number" &&
+        numberValue >= max;
+    const isAtMin = min !== undefined &&
+        numberValue !== undefined &&
+        typeof min === "number" &&
+        numberValue <= min;
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (jsxs("div", { className: "flex justify-between items-center", children: [jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }), showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] })), jsx("div", { children: jsxs("div", { className: cn(inputGroupClasses, stateClasses, isFocused && (isInvalid ? inputTheme.inputGroupFocusInvalidStyle : inputTheme.inputGroupFocusStyle), inputGroupClassName), onClick: handleInputGroupClick, role: "presentation", children: [hasContentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentStyleClasses, contentStartStyle), children: contentStart })), jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: setInputRef, id: inputId, type: actualInputType, className: cn(baseClasses, sizeClasses, hasLeftIcon && iconStartPadding, (hasRightIcon || isPasswordField || displayNumberControls) &&
+                                        iconEndPadding, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, min: min, max: max, step: step, value: value, onChange: handleInputChange, onFocus: (e) => {
+                                        setIsFocused(true);
+                                        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+                                    }, onBlur: (e) => {
+                                        setIsFocused(false);
+                                        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), helperText && (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText }))] }));
+});
+Input.displayName = "Input";
+
+export { Input };

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

@@ -0,0 +1,6 @@
+import { InputTheme } from "./Input.types";
+/**
+ * Default theme for the Input component - Clean & Organized
+ * Uses flat structure with design tokens
+ */
+export declare const inputTheme: InputTheme;

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

@@ -0,0 +1,116 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for the Input component - Clean & Organized
+ * Uses flat structure with design tokens
+ */
+const inputTheme = {
+    // Base container styles
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Input group styles - no focus-within (focus is managed via JS for contentStart/contentEnd compatibility)
+    inputGroupStyle: "relative flex rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
+        "bg-white transition-all " +
+        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)]",
+    // JS-driven focus ring (applied when isFocused is true)
+    inputGroupFocusStyle: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 " +
+        "ring-4 ring-[var(--color-primary)]/10 " +
+        "dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
+    // JS-driven focus ring for invalid state
+    inputGroupFocusInvalidStyle: "outline-2 outline-[var(--color-danger)] -outline-offset-1 " +
+        "ring-4 ring-[var(--color-danger)]/10 " +
+        "dark:outline-[var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20",
+    // Base input styles - extends common form control with design tokens
+    baseStyle: `${formsBaseTheme.controlBaseStyle} py-2 px-3`,
+    // Size variants - composed from atomic tokens
+    sizes: {
+        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
+        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.height}`,
+        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
+    },
+    // State variants - custom invalid state without focus-within (focus handled via JS)
+    states: {
+        default: formsBaseTheme.states.default,
+        disabled: formsBaseTheme.states.disabled,
+        invalid: "outline-[var(--color-danger)] bg-[var(--color-danger-50)] " +
+            "dark:bg-[var(--color-danger-950)]/30 dark:outline-[var(--color-danger-500)]",
+    },
+    // Helper text styles with state handling
+    helperText: formsBaseTheme.helperText,
+    // Icon positioning styles
+    iconStartStyle: formsBaseTheme.iconStyles.left,
+    iconEndStyle: formsBaseTheme.iconStyles.right,
+    // Icon padding configuration
+    iconPadding: formsBaseTheme.iconStyles.padding,
+    // Content styles - prefix/suffix content with size-aware font sizes
+    contentStyle: {
+        sm: `flex items-center px-3 ${formsBaseTheme.sizes.sm.text} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`,
+        md: `flex items-center px-3 ${formsBaseTheme.sizes.md.text} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`,
+        lg: `flex items-center px-3 ${formsBaseTheme.sizes.lg.text} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`,
+    },
+    contentStartStyle: "pr-0 " +
+        "[&:has([aria-haspopup])]:pl-0 " +
+        "[&_[aria-haspopup]]:outline-none [&_[aria-haspopup]]:ring-0 [&_[aria-haspopup]]:shadow-none " +
+        "[&_[aria-haspopup]]:border-none [&_[aria-haspopup]]:rounded-none [&_[aria-haspopup]]:bg-transparent " +
+        "[&_[aria-haspopup]]:min-h-0 [&_[aria-haspopup]]:h-full",
+    contentEndStyle: "pl-0 " +
+        "[&:has([aria-haspopup])]:pr-0 " +
+        "[&_[aria-haspopup]]:outline-none [&_[aria-haspopup]]:ring-0 [&_[aria-haspopup]]:shadow-none " +
+        "[&_[aria-haspopup]]:border-none [&_[aria-haspopup]]:rounded-none [&_[aria-haspopup]]:bg-transparent " +
+        "[&_[aria-haspopup]]:min-h-0 [&_[aria-haspopup]]:h-full",
+    // Keyboard shortcut display
+    keyboardShortcutStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-text-muted)] z-10 " +
+        "dark:text-[var(--color-neutral-500)]",
+    // Password toggle button with hover states
+    passwordToggleStyle: "absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer " +
+        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10 " +
+        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)]",
+    // Number input controls
+    numberButtonsContainerStyle: "absolute inset-y-0 right-0 flex flex-row items-center pr-2 z-10 gap-1",
+    numberButtonStyle: "bg-[var(--color-background-secondary)] flex items-center justify-center " +
+        "text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] " +
+        "hover:text-[var(--color-text-primary)] cursor-pointer size-6 rounded-sm transition-colors " +
+        "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-500)] " +
+        "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)]",
+    // Type-specific styles organized by input type
+    typeStyles: {
+        password: {
+            toggleIconActive: "size-5 text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
+            toggleIconInactive: "size-5 text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
+        },
+        search: {
+            iconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
+        },
+        number: {
+            incrementIconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
+            decrementIconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
+        },
+    },
+    // Password strength indicator with design tokens
+    passwordStrengthIndicator: {
+        containerStyle: "flex items-center gap-1",
+        labelStyle: "text-xs font-semibold mr-1",
+        dotStyle: "size-1.5 rounded-full",
+        dotActiveStyle: "bg-current",
+        dotInactiveStyle: "bg-[var(--color-border)] dark:bg-[var(--color-neutral-700)]",
+        strengthStyles: {
+            weak: {
+                label: "Weak",
+                color: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
+            },
+            moderate: {
+                label: "Moderate",
+                color: "text-[var(--color-warning)] dark:text-[var(--color-warning-400)]",
+            },
+            strong: {
+                label: "Strong",
+                color: "text-[var(--color-success)] dark:text-[var(--color-success-400)]",
+            },
+            "very-strong": {
+                label: "Very Strong",
+                color: "text-[var(--color-success)] dark:text-[var(--color-success-400)]",
+            },
+        },
+    },
+};
+
+export { inputTheme };

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

@@ -0,0 +1,139 @@
+import React from 'react';
+/**
+ * Input component props
+ * @property {InputSize} size - The size of the input
+ * @property {InputState} state - The state of the input (default, disabled, invalid)
+ * @property {string} label - Optional label text for the input
+ * @property {string} helperText - Optional helper text displayed below the input
+ * @property {React.ReactNode} iconStart - Icon to display before the input
+ * @property {React.ReactNode} iconEnd - Icon to display after the input
+ * @property {React.ReactNode} keyboardShortcut - Keyboard shortcut to display on the right side
+ * @property {boolean} required - Whether the input is required
+ * @property {boolean} passwordToggle - Whether to show a toggle button for password fields
+ * @property {boolean} showNumberControls - Whether to display increment/decrement controls for number input
+ * @property {number} min - Minimum value for number input
+ * @property {number} max - Maximum value for number input
+ * @property {number} step - Step value for number input
+ * @property {PasswordStrengthIndicator} passwordStrengthIndicator - Password strength indicator configuration
+ * @property {number} currencyDecimalPlaces - Number of decimal places for currency inputs
+ */
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'className'> {
+    /** The size of the input */
+    size?: InputSize;
+    /** The state of the input (default, disabled, invalid) */
+    state?: InputState;
+    /**
+     * The type of input. In addition to standard HTML types,
+     * supports masked input types: 'creditCard', 'expiryDate', 'phone', 'ssn', 'currency'
+     */
+    type?: InputType;
+    /** Optional label text for the input */
+    label?: string;
+    /** Optional helper text displayed below the input */
+    helperText?: string;
+    /** Icon to display before the input (small decorative) */
+    iconStart?: React.ReactNode;
+    /** Icon to display after the input (small decorative) */
+    iconEnd?: React.ReactNode;
+    /** Content to display before the input (larger structural) */
+    contentStart?: React.ReactNode;
+    /** Content to display after the input (larger structural) */
+    contentEnd?: React.ReactNode;
+    /** Keyboard shortcut to display on the right side */
+    keyboardShortcut?: React.ReactNode;
+    /** Additional class name for the input (highest priority) */
+    className?: string;
+    /** Additional class name for the label */
+    labelClassName?: string;
+    /** Additional class name for the helper text */
+    helperTextClassName?: string;
+    /** Additional class name for the wrapper */
+    wrapperClassName?: string;
+    /** Additional class name for the input group */
+    inputGroupClassName?: string;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Whether to show a toggle button for password fields. Only works when type="password" */
+    passwordToggle?: boolean;
+    /** Whether to show increment/decrement controls for number inputs (false by default). Only works when type="number" */
+    showNumberControls?: boolean;
+    /** Password strength indicator configuration. Only applies when type="password" */
+    passwordStrengthIndicator?: PasswordStrengthIndicator;
+    /** Number of decimal places for currency inputs (default: 2). Only applies when type="currency" */
+    currencyDecimalPlaces?: number;
+}
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputState = 'default' | 'disabled' | 'invalid';
+/**
+ * Input types combining HTML standard types and custom masked input types
+ */
+export type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'color' | 'file' | 'hidden' | 'image' | 'range' | 'reset' | 'submit' | 'creditCard' | 'expiryDate' | 'phone' | 'ssn' | 'currency';
+/**
+ * Password strength indicator configuration
+ */
+export interface PasswordStrengthIndicator {
+    /** Whether to show the strength indicator */
+    show: boolean;
+    /** The current strength level */
+    strength?: PasswordStrength;
+    /** Custom label text to show. If not provided, default labels based on strength will be used */
+    customLabel?: string;
+    /** Custom class name for the indicator container */
+    className?: string;
+    /** The position of the strength indicator */
+    position?: 'right' | 'below';
+}
+/**
+ * Password strength levels
+ */
+export type PasswordStrength = 'weak' | 'moderate' | 'strong' | 'very-strong';
+/**
+ * Clean theme structure for Input component - following current Flikkui patterns
+ */
+export interface InputTheme {
+    wrapperStyle: string;
+    inputGroupStyle: string;
+    inputGroupFocusStyle: string;
+    inputGroupFocusInvalidStyle: string;
+    baseStyle: string;
+    sizes: Record<InputSize, string>;
+    states: Record<InputState, string>;
+    helperText: string;
+    iconStartStyle: string;
+    iconEndStyle: string;
+    iconPadding: {
+        left: string;
+        right: string;
+    };
+    contentStyle: Record<InputSize, string>;
+    contentStartStyle: string;
+    contentEndStyle: string;
+    keyboardShortcutStyle: string;
+    passwordToggleStyle: string;
+    numberButtonsContainerStyle: string;
+    numberButtonStyle: string;
+    typeStyles: {
+        password: {
+            toggleIconActive: string;
+            toggleIconInactive: string;
+        };
+        search: {
+            iconStyle: string;
+        };
+        number: {
+            incrementIconStyle: string;
+            decrementIconStyle: string;
+        };
+    };
+    passwordStrengthIndicator: {
+        containerStyle: string;
+        labelStyle: string;
+        dotStyle: string;
+        dotActiveStyle: string;
+        dotInactiveStyle: string;
+        strengthStyles: Record<PasswordStrength, {
+            label: string;
+            color: string;
+        }>;
+    };
+}

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

@@ -0,0 +1,3 @@
+export { Input } from './Input';
+export type { InputProps, InputSize, InputState, InputTheme, InputType, PasswordStrength, PasswordStrengthIndicator } from './Input.types';
+export { inputTheme } from './Input.theme';

package/dist/components/forms/Input/inputMasks.d.ts

@@ -0,0 +1,97 @@
+/**
+ * Input masking utilities for the Input component
+ * These functions handle formatting and validation for specialized input types
+ */
+/**
+ * Format credit card input with hyphens every 4 digits
+ * @param value The raw input value
+ * @returns The formatted credit card number
+ */
+export declare const formatCreditCard: (value: string) => string;
+/**
+ * Format expiry date input as MM/YY
+ * @param value The raw input value
+ * @returns The formatted expiry date
+ */
+export declare const formatExpiryDate: (value: string) => string;
+/**
+ * Validate month (01-12) in expiry date
+ * @param value The current input value
+ * @returns Whether the month is valid
+ */
+export declare const isValidMonth: (value: string) => boolean;
+/**
+ * Apply phone number formatting (US format: (XXX) XXX-XXXX)
+ * @param value The raw input value
+ * @returns The formatted phone number
+ */
+export declare const formatPhoneNumber: (value: string) => string;
+/**
+ * Format US Social Security Number (XXX-XX-XXXX)
+ * @param value The raw input value
+ * @returns The formatted SSN
+ */
+export declare const formatSSN: (value: string) => string;
+/**
+ * Format date input as MM/DD/YYYY, DD/MM/YYYY, or YYYY/MM/DD
+ * WITH REAL-TIME VALIDATION - prevents invalid month/day values as user types
+ * @param value The raw input value
+ * @param format The date format to use (default: MM/DD/YYYY)
+ * @returns The formatted date string (only valid digits are kept)
+ */
+export declare const formatDateInput: (value: string, format?: "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY/MM/DD") => string;
+/**
+ * Validate if a date string is a valid date
+ * @param value The formatted date string
+ * @param format The date format being used
+ * @returns Whether the date is valid
+ */
+export declare const isValidDateInput: (value: string, format?: "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY/MM/DD") => boolean;
+/**
+ * Format currency input (adds commas for thousands and limits decimal places)
+ * @param value The raw input value
+ * @param decimalPlaces Number of decimal places (default: 2)
+ * @returns The formatted currency value
+ */
+export declare const formatCurrency: (value: string, decimalPlaces?: number) => string;
+/**
+ * Apply specific input masking based on input type
+ * @param value The current input value
+ * @param type The type of mask to apply
+ * @param options Additional options for formatting
+ * @returns The masked/formatted value
+ */
+export declare const applyInputMask: (value: string, type: string, options?: {
+    currencyDecimalPlaces?: number;
+}) => string;
+/**
+ * Check if a masked input needs validation
+ * @param type The input mask type
+ * @param value The current value
+ * @returns Whether the value is valid or not
+ */
+export declare const validateMaskedInput: (type: string, value: string) => boolean;
+/**
+ * Format time input as HH:MM with real-time validation
+ * Prevents invalid hour/minute values as user types
+ * @param value The raw input value
+ * @param format The time format ('12h' or '24h')
+ * @returns The formatted time string (only valid digits are kept)
+ */
+export declare const formatTimeInput: (value: string, format?: "12h" | "24h") => string;
+/**
+ * Validate if a formatted time string is a complete, valid time
+ * @param value The formatted time string (HH:MM)
+ * @param format The time format ('12h' or '24h')
+ * @returns Whether the time is valid and complete
+ */
+export declare const isValidTimeInput: (value: string, format?: "12h" | "24h") => boolean;
+/**
+ * Get cursor position after applying a mask
+ * This helps maintain the cursor position when formatting
+ * @param previousValue Previous input value
+ * @param currentValue Current formatted value
+ * @param previousPosition Previous cursor position
+ * @returns The new cursor position
+ */
+export declare const getAdjustedCursorPosition: (previousValue: string, currentValue: string, previousPosition: number) => number;