flikkui 0.1.0-beta.11

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

@@ -0,0 +1,324 @@
+import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { inputTheme } from './Input.theme.js';
+import { cn } from '../../../utils/cn.js';
+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';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/solid/esm/LockClosedIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/solid/esm/EyeSlashIcon.js';
+import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/solid/esm/EyeIcon.js';
+
+var Input = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.state, state = _c === void 0 ? "default" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, label = _a.label, _e = _a.labelClassName, labelClassName = _e === void 0 ? "" : _e, helperText = _a.helperText, _f = _a.helperTextClassName, helperTextClassName = _f === void 0 ? "" : _f, _g = _a.wrapperClassName, wrapperClassName = _g === void 0 ? "" : _g, _h = _a.inputGroupClassName, inputGroupClassName = _h === void 0 ? "" : _h, iconStart = _a.iconStart, iconEnd = _a.iconEnd, contentStart = _a.contentStart, contentEnd = _a.contentEnd, addonPrefix = _a.addonPrefix, addonSuffix = _a.addonSuffix, keyboardShortcut = _a.keyboardShortcut, id = _a.id, required = _a.required, _j = _a.type, type = _j === void 0 ? "text" : _j, _k = _a.passwordToggle, passwordToggle = _k === void 0 ? type === "password" : _k, passwordStrengthIndicator = _a.passwordStrengthIndicator, _l = _a.showNumberControls, showNumberControls = _l === void 0 ? false : _l, min = _a.min, max = _a.max, _m = _a.step, step = _m === void 0 ? 1 : _m, onChange = _a.onChange, value = _a.value, currencyDecimalPlaces = _a.currencyDecimalPlaces, props = __rest(_a, ["size", "state", "className", "label", "labelClassName", "helperText", "helperTextClassName", "wrapperClassName", "inputGroupClassName", "iconStart", "iconEnd", "contentStart", "contentEnd", "addonPrefix", "addonSuffix", "keyboardShortcut", "id", "required", "type", "passwordToggle", "passwordStrengthIndicator", "showNumberControls", "min", "max", "step", "onChange", "value", "currencyDecimalPlaces"]);
+    // Deprecation warnings for old props
+    if (process.env.NODE_ENV !== 'production') {
+        if (addonPrefix) {
+            console.warn('[Input]: `addonPrefix` is deprecated and will be removed in v0.2.0. Use `contentStart` instead.');
+        }
+        if (addonSuffix) {
+            console.warn('[Input]: `addonSuffix` is deprecated and will be removed in v0.2.0. Use `contentEnd` instead.');
+        }
+    }
+    var _o = useState(false), isFocused = _o[0], setIsFocused = _o[1];
+    var _p = useState(false), showPassword = _p[0], setShowPassword = _p[1];
+    var inputId = id || "input-".concat(Math.random().toString(36).substring(2, 9));
+    var _q = useState(value !== undefined
+        ? typeof value === "number"
+            ? value
+            : typeof value === "string"
+                ? parseFloat(value) || undefined
+                : undefined
+        : undefined), numberValue = _q[0], setNumberValue = _q[1];
+    var inputRef = useRef(null);
+    var cursorPositionRef = useRef(null);
+    // Default icons based on input type
+    var defaultPasswordIcon = type === "password" && !iconStart ? (React__default.createElement(ForwardRef, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
+    var defaultSearchIcon = type === "search" && !iconStart ? (React__default.createElement(SearchIcon, { size: "sm", className: inputTheme.typeStyles.search.iconStyle })) : null;
+    // Use the provided iconStart or the default icon based on input type
+    var finalLeftIcon = iconStart || defaultPasswordIcon || defaultSearchIcon;
+    // Support both old and new prop names (prefer new)
+    var finalContentStart = contentStart !== null && contentStart !== void 0 ? contentStart : addonPrefix;
+    var finalContentEnd = contentEnd !== null && contentEnd !== void 0 ? contentEnd : addonSuffix;
+    // Derived state flags for internal use
+    var hasLeftIcon = Boolean(finalLeftIcon);
+    var isDisabled = state === "disabled";
+    var isInvalid = state === "invalid";
+    var hasRightIcon = Boolean(iconEnd);
+    var hasContentStart = Boolean(finalContentStart);
+    var hasContentEnd = Boolean(finalContentEnd);
+    var hasKeyboardShortcut = Boolean(keyboardShortcut);
+    var isPasswordField = type === "password" && passwordToggle;
+    var isNumberField = type === "number";
+    var displayNumberControls = isNumberField && showNumberControls;
+    var isMaskedInput = ['creditCard', 'expiryDate', 'phone', 'ssn', 'currency'].includes(type);
+    // Password strength indicator flags
+    var hasPasswordStrength = type === "password" && (passwordStrengthIndicator === null || passwordStrengthIndicator === void 0 ? void 0 : passwordStrengthIndicator.show);
+    var strengthPosition = (passwordStrengthIndicator === null || passwordStrengthIndicator === void 0 ? void 0 : passwordStrengthIndicator.position) || 'right';
+    var showStrengthWithLabel = hasPasswordStrength && strengthPosition === 'right';
+    var showStrengthBelow = hasPasswordStrength && strengthPosition === 'below';
+    // State class for CSS selectors
+    var stateClass = isInvalid
+        ? "state-invalid"
+        : isDisabled
+            ? "state-disabled"
+            : "state-default";
+    // Set the ref from forwardRef or create one
+    var setInputRef = function (el) {
+        inputRef.current = el;
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    };
+    // Determine the actual input type to use
+    var actualInputType = isPasswordField && showPassword ? "text" : (isMaskedInput ? "text" : type);
+    // Validate masked inputs
+    useEffect(function () {
+        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(function () {
+        if (isNumberField && value !== undefined) {
+            var parsedValue = typeof value === "number"
+                ? value
+                : typeof value === "string"
+                    ? parseFloat(value) || undefined
+                    : undefined;
+            setNumberValue(parsedValue);
+        }
+    }, [value, isNumberField]);
+    // Toggle password visibility
+    var handleTogglePassword = function () {
+        if (!isDisabled) {
+            setShowPassword(!showPassword);
+        }
+    };
+    // Handle input group click for addon variations - focus the input
+    var handleInputGroupClick = function (e) {
+        // Only handle click if the input isn't already focused or disabled
+        if (!isFocused && !isDisabled && inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    // Increment number value
+    var handleIncrement = function () {
+        if (isDisabled)
+            return;
+        var stepValue = typeof step === "number" ? step : 1;
+        var currentValue = numberValue !== undefined ? numberValue : 0;
+        var newValue = currentValue + stepValue;
+        // Apply constraints
+        if (max !== undefined && typeof max === "number" && newValue > max) {
+            newValue = max;
+        }
+        setNumberValue(newValue);
+        updateNumberValue(newValue);
+    };
+    // Decrement number value
+    var handleDecrement = function () {
+        if (isDisabled)
+            return;
+        var stepValue = typeof step === "number" ? step : 1;
+        var currentValue = numberValue !== undefined ? numberValue : 0;
+        var newValue = currentValue - stepValue;
+        // Apply constraints
+        if (min !== undefined && typeof min === "number" && newValue < min) {
+            newValue = min;
+        }
+        setNumberValue(newValue);
+        updateNumberValue(newValue);
+    };
+    // Update the input value and trigger onChange
+    var updateNumberValue = function (newValue) {
+        if (inputRef.current) {
+            inputRef.current.value = newValue.toString();
+            // Create and dispatch a synthetic event
+            var event_1 = new Event("input", { bubbles: true });
+            inputRef.current.dispatchEvent(event_1);
+            // Call onChange handler if provided
+            if (onChange) {
+                onChange(event_1);
+            }
+        }
+    };
+    // Handle input change
+    var handleInputChange = function (e) {
+        // Store original value and cursor position
+        var originalValue = e.target.value;
+        cursorPositionRef.current = e.target.selectionStart;
+        if (isMaskedInput) {
+            // Apply masking with options
+            var maskedValue = applyInputMask(originalValue, type, { currencyDecimalPlaces: currencyDecimalPlaces });
+            // Update the input value
+            e.target.value = maskedValue;
+            // Adjust cursor position
+            if (cursorPositionRef.current !== null) {
+                var newCursorPosition_1 = getAdjustedCursorPosition(originalValue, maskedValue, cursorPositionRef.current);
+                // Set the cursor position after React updates the DOM
+                setTimeout(function () {
+                    if (inputRef.current) {
+                        inputRef.current.setSelectionRange(newCursorPosition_1, newCursorPosition_1);
+                    }
+                }, 0);
+            }
+            // For currency inputs, ensure we immediately validate
+            if (type === 'currency' && isInvalid && onChange) {
+                var event_2 = __assign({}, e);
+                onChange(event_2);
+            }
+        }
+        else if (isNumberField) {
+            var value_1 = e.target.value;
+            var parsedValue = value_1 ? parseFloat(value_1) : undefined;
+            setNumberValue(parsedValue);
+        }
+        // Call the original onChange handler
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    // Theme classes - using simplified approach with design tokens
+    var wrapperClasses = inputTheme.wrapperStyle;
+    var inputGroupClasses = inputTheme.inputGroupStyle;
+    var baseClasses = inputTheme.baseStyle;
+    var sizeClasses = inputTheme.sizes[size];
+    var stateClasses = inputTheme.states[state];
+    var helperTextClasses = inputTheme.helperText;
+    // Icon classes using design tokens
+    var iconStartClasses = inputTheme.iconStartStyle;
+    var iconEndClasses = inputTheme.iconEndStyle;
+    var iconStartPadding = inputTheme.iconPadding.left;
+    var iconEndPadding = inputTheme.iconPadding.right;
+    // Content classes - size-aware
+    var contentStyleClasses = inputTheme.contentStyle[size];
+    var contentStartStyle = inputTheme.contentStartStyle;
+    var contentEndStyle = inputTheme.contentEndStyle;
+    // Interactive element classes
+    var passwordToggleClasses = inputTheme.passwordToggleStyle;
+    var numberButtonsContainerClasses = inputTheme.numberButtonsContainerStyle;
+    var numberButtonClasses = inputTheme.numberButtonStyle;
+    // Password toggle button component
+    var PasswordToggleButton = function () {
+        if (!isPasswordField)
+            return null;
+        var toggleIconActive = inputTheme.typeStyles.password.toggleIconActive;
+        var toggleIconInactive = inputTheme.typeStyles.password.toggleIconInactive;
+        return (React__default.createElement("div", { className: passwordToggleClasses, onClick: function (e) {
+                e.stopPropagation(); // Prevent parent click handler
+                handleTogglePassword();
+            }, "aria-label": showPassword ? "Hide password" : "Show password", role: "button", tabIndex: 0, onKeyDown: function (e) {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleTogglePassword();
+                }
+            } }, showPassword ? (React__default.createElement(ForwardRef$1, { className: toggleIconActive, "aria-hidden": "true" })) : (React__default.createElement(ForwardRef$2, { className: toggleIconInactive, "aria-hidden": "true" }))));
+    };
+    // Number input buttons component
+    var NumberButtons = function () {
+        if (!isNumberField)
+            return null;
+        var isAtMax = max !== undefined &&
+            numberValue !== undefined &&
+            typeof max === "number" &&
+            numberValue >= max;
+        var isAtMin = min !== undefined &&
+            numberValue !== undefined &&
+            typeof min === "number" &&
+            numberValue <= min;
+        var incrementIconStyle = inputTheme.typeStyles.number.incrementIconStyle;
+        var decrementIconStyle = inputTheme.typeStyles.number.decrementIconStyle;
+        return (React__default.createElement("div", { className: numberButtonsContainerClasses },
+            React__default.createElement("button", { type: "button", className: "".concat(numberButtonClasses), onClick: function (e) {
+                    e.stopPropagation(); // Prevent parent click handler
+                    handleDecrement();
+                }, disabled: isDisabled || isAtMin, "aria-label": "Decrease value", tabIndex: -1 },
+                React__default.createElement(MinusIcon, { size: "xs", className: decrementIconStyle, "aria-hidden": "true" })),
+            React__default.createElement("button", { type: "button", className: "".concat(numberButtonClasses), onClick: function (e) {
+                    e.stopPropagation(); // Prevent parent click handler
+                    handleIncrement();
+                }, disabled: isDisabled || isAtMax, "aria-label": "Increase value", tabIndex: -1 },
+                React__default.createElement(PlusIcon, { size: "xs", className: incrementIconStyle, "aria-hidden": "true" }))));
+    };
+    // Password Strength Indicator component
+    var PasswordStrengthIndicator = function (_a) {
+        var _b = _a.inline, inline = _b === void 0 ? false : _b;
+        if (!hasPasswordStrength) {
+            return null;
+        }
+        var strength = passwordStrengthIndicator.strength || "strong";
+        var customLabel = passwordStrengthIndicator.customLabel;
+        var indicatorClassName = passwordStrengthIndicator.className || "";
+        // Get theme values using design tokens
+        var containerStyle = "".concat(inputTheme.passwordStrengthIndicator.containerStyle, " ").concat(inline ? "" : "mt-2");
+        var labelStyle = inputTheme.passwordStrengthIndicator.labelStyle;
+        var dotStyle = inputTheme.passwordStrengthIndicator.dotStyle;
+        var dotActiveStyle = inputTheme.passwordStrengthIndicator.dotActiveStyle;
+        var dotInactiveStyle = inputTheme.passwordStrengthIndicator.dotInactiveStyle;
+        // Get color and label based on strength using design tokens
+        var strengthConfig = inputTheme.passwordStrengthIndicator.strengthStyles[strength] || {
+            label: "Password",
+            color: "text-[var(--color-text-muted)]",
+        };
+        var colorClass = strengthConfig.color || "text-neutral-500";
+        var label = customLabel || strengthConfig.label || "Password";
+        // Determine number of active dots based on strength
+        var getActiveDots = function (strength) {
+            switch (strength) {
+                case "weak":
+                    return 1;
+                case "moderate":
+                    return 2;
+                case "strong":
+                    return 4;
+                case "very-strong":
+                    return 5;
+                default:
+                    return 0;
+            }
+        };
+        var activeDots = getActiveDots(strength);
+        return (React__default.createElement("div", { className: "".concat(containerStyle, " ").concat(indicatorClassName, " ").concat(colorClass) },
+            React__default.createElement("div", { className: labelStyle }, label),
+            __spreadArray([], Array(5), true).map(function (_, index) { return (React__default.createElement("div", { key: index, className: "".concat(dotStyle, " ").concat(index < activeDots ? dotActiveStyle : dotInactiveStyle) })); })));
+    };
+    return (React__default.createElement("div", { className: cn(wrapperClasses, stateClass, wrapperClassName) },
+        label && (React__default.createElement("div", { className: "flex justify-between items-center" },
+            React__default.createElement(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required }, label),
+            showStrengthWithLabel && (React__default.createElement(PasswordStrengthIndicator, { inline: true })))),
+        React__default.createElement("div", null,
+            React__default.createElement("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), onClick: handleInputGroupClick, role: "presentation" },
+                hasContentStart && (React__default.createElement("div", { className: cn(contentStyleClasses, contentStartStyle) }, finalContentStart)),
+                React__default.createElement("div", { className: "relative flex-1" },
+                    React__default.createElement("input", __assign({ ref: setInputRef, id: inputId, type: actualInputType, className: cn(baseClasses, sizeClasses, hasLeftIcon && iconStartPadding, (hasRightIcon || isPasswordField || displayNumberControls) && iconEndPadding, className // User className has highest priority
+                        ), disabled: isDisabled, "aria-invalid": isInvalid, required: required, min: min, max: max, step: step, value: value, onChange: handleInputChange, onFocus: function (e) {
+                            var _a;
+                            setIsFocused(true);
+                            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                        }, onBlur: function (e) {
+                            var _a;
+                            setIsFocused(false);
+                            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                        }, placeholder: props.placeholder }, props)),
+                    hasLeftIcon && (React__default.createElement("div", { className: iconStartClasses }, finalLeftIcon)),
+                    hasRightIcon && !isPasswordField && !displayNumberControls && (React__default.createElement("div", { className: iconEndClasses }, iconEnd)),
+                    isPasswordField && React__default.createElement(PasswordToggleButton, null),
+                    displayNumberControls && React__default.createElement(NumberButtons, null),
+                    hasKeyboardShortcut && (React__default.createElement("div", { className: inputTheme.keyboardShortcutStyle }, keyboardShortcut))),
+                hasContentEnd && (React__default.createElement("div", { className: cn(contentStyleClasses, contentEndStyle) }, finalContentEnd)))),
+        showStrengthBelow && (React__default.createElement(PasswordStrengthIndicator, { inline: false })),
+        helperText && (React__default.createElement("div", { className: cn(helperTextClasses, helperTextClassName) }, 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,86 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for the Input component - Clean & Organized
+ * Uses flat structure with design tokens
+ */
+var inputTheme = {
+    // Base container styles
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Input group styles with design tokens
+    inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
+    // Base input styles - extends common form control with design tokens
+    baseStyle: "".concat(formsBaseTheme.controlBaseStyle, " py-2 px-3"),
+    // Size variants - composed from atomic tokens
+    sizes: {
+        sm: "".concat(formsBaseTheme.sizes.sm.text, " ").concat(formsBaseTheme.sizes.sm.padding, " ").concat(formsBaseTheme.sizes.sm.height),
+        md: "".concat(formsBaseTheme.sizes.md.text, " ").concat(formsBaseTheme.sizes.md.padding, " ").concat(formsBaseTheme.sizes.md.height),
+        lg: "".concat(formsBaseTheme.sizes.lg.text, " ").concat(formsBaseTheme.sizes.lg.padding, " ").concat(formsBaseTheme.sizes.lg.height),
+    },
+    // State variants using design tokens
+    states: formsBaseTheme.states,
+    // 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 ".concat(formsBaseTheme.sizes.sm.text, " text-[var(--color-text-muted)] shrink-0"),
+        md: "flex items-center px-3 ".concat(formsBaseTheme.sizes.md.text, " text-[var(--color-text-muted)] shrink-0"),
+        lg: "flex items-center px-3 ".concat(formsBaseTheme.sizes.lg.text, " text-[var(--color-text-muted)] shrink-0"),
+    },
+    contentStartStyle: "pr-0",
+    contentEndStyle: "pl-0",
+    // Keyboard shortcut display
+    keyboardShortcutStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-text-muted)] z-10",
+    // 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",
+    // Number input controls
+    numberButtonsContainerStyle: "absolute inset-y-0 right-0 flex flex-row items-center pr-2 z-10 gap-1",
+    numberButtonStyle: "bg-surface-elevated flex items-center justify-center text-[var(--color-text-muted)] hover:bg-surface-hover hover:text-[var(--color-text-primary)] cursor-pointer size-6 rounded-sm transition-colors",
+    // Type-specific styles organized by input type
+    typeStyles: {
+        password: {
+            toggleIconActive: "size-5 text-[var(--color-text-primary)]",
+            toggleIconInactive: "size-5 text-[var(--color-text-muted)]",
+        },
+        search: {
+            iconStyle: "text-[var(--color-text-muted)]",
+        },
+        number: {
+            incrementIconStyle: "text-[var(--color-text-muted)]",
+            decrementIconStyle: "text-[var(--color-text-muted)]",
+        },
+    },
+    // 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-border",
+        strengthStyles: {
+            weak: {
+                label: "Weak",
+                color: "text-[var(--color-danger)]",
+            },
+            moderate: {
+                label: "Moderate",
+                color: "text-[var(--color-warning)]",
+            },
+            strong: {
+                label: "Strong",
+                color: "text-[var(--color-success)]",
+            },
+            "very-strong": {
+                label: "Very Strong",
+                color: "text-[var(--color-success)]",
+            },
+        },
+    },
+};
+
+export { inputTheme };

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

@@ -0,0 +1,147 @@
+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} addonPrefix - Content to display as a prefix
+ * @property {React.ReactNode} addonSuffix - Content to display as a suffix
+ * @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;
+    /**
+     * @deprecated Use contentStart instead. Will be removed in v0.2.0
+     */
+    addonPrefix?: React.ReactNode;
+    /**
+     * @deprecated Use contentEnd instead. Will be removed in v0.2.0
+     */
+    addonSuffix?: 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;
+    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,82 @@
+/**
+ * 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;
+/**
+ * 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;