flikkui 0.1.0-beta.2

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

@@ -0,0 +1,129 @@
+import React from 'react';
+/**
+ * Date range object
+ */
+export interface DateRange {
+    /** Start date of the range */
+    start: Date | null;
+    /** End date of the range */
+    end: Date | null;
+}
+/**
+ * Range preset configuration
+ */
+export interface RangePreset {
+    /** Display label for the preset */
+    label: string;
+    /** Number of days to go back from today */
+    days?: number;
+    /** Specific date range value */
+    value?: DateRange | 'current-month' | 'current-year' | 'last-month' | 'last-year';
+    /** Function to calculate dynamic range */
+    getValue?: () => DateRange;
+}
+/**
+ * DateRangePicker modes
+ */
+export type DateRangePickerMode = 'single' | 'dual' | 'input';
+/**
+ * DateRangePicker component props
+ */
+export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Start date of the range (controlled mode) */
+    startDate?: Date | null;
+    /** End date of the range (controlled mode) */
+    endDate?: Date | null;
+    /** Default date range (uncontrolled mode) */
+    defaultRange?: DateRange;
+    /** Callback fired when date range changes */
+    onChange?: (range: DateRange) => void;
+    /** Display mode for the range picker */
+    mode?: DateRangePickerMode;
+    /** Whether to allow selecting the same day for start and end */
+    allowSameDay?: boolean;
+    /** Maximum number of days that can be selected in range */
+    maxRange?: number;
+    /** Minimum number of days that must be selected in range */
+    minRange?: number;
+    /** Predefined date range presets */
+    presets?: RangePreset[];
+    /** Show preset buttons */
+    showPresets?: boolean;
+    /** Custom placeholder text for input mode */
+    placeholder?: [string, string];
+    /** Whether to auto-close after range selection */
+    closeOnSelect?: boolean;
+    /** Custom separator between dates in display */
+    separator?: string;
+    /** Additional class name for the container */
+    className?: string;
+    /** Component-level theme overrides */
+    theme?: DateRangePickerThemeOverrides;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Function to determine if a specific date should be disabled */
+    isDateDisabled?: (date: Date) => boolean;
+    /** Format for displaying dates */
+    dateFormat?: string;
+    /** Whether to highlight today's date */
+    showToday?: boolean;
+    /** Custom weekday labels */
+    weekdays?: string[];
+    /** Custom month names */
+    months?: string[];
+    /** Enable year picker functionality */
+    enableYearPicker?: boolean;
+    /** Enable month picker functionality */
+    enableMonthPicker?: boolean;
+    /** Show today button in header */
+    showTodayButton?: boolean;
+}
+/**
+ * Internal range state for tracking selection
+ */
+export interface RangeSelectionState {
+    /** Currently selected start date */
+    startDate: Date | null;
+    /** Currently selected end date */
+    endDate: Date | null;
+    /** Date being hovered over (for preview) */
+    hoverDate: Date | null;
+    /** Which date is being selected (start or end) */
+    selectingDate: 'start' | 'end' | null;
+    /** Whether the range selection is complete */
+    isComplete: boolean;
+}
+/**
+ * Theme overrides for the DateRangePicker component
+ */
+export interface DateRangePickerThemeOverrides {
+    /** Container styles */
+    containerStyle?: string;
+    /** Dual calendar container styles */
+    dualCalendarStyle?: string;
+    /** Individual calendar wrapper styles */
+    calendarWrapperStyle?: string;
+    /** Presets panel styles */
+    presetsStyle?: string;
+    /** Preset button styles */
+    presetButtonStyle?: string;
+    /** Active preset button styles */
+    activePresetStyle?: string;
+    /** Input container styles for input mode */
+    inputContainerStyle?: string;
+    /** Range connector styles (for input mode) */
+    rangeConnectorStyle?: string;
+    /** Styles for dates in range */
+    rangeStyles?: {
+        /** Style for start date */
+        startDate?: string;
+        /** Style for end date */
+        endDate?: string;
+        /** Style for dates in between */
+        inRange?: string;
+        /** Style for hover preview */
+        hoverRange?: string;
+    };
+}

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

@@ -0,0 +1,3 @@
+export { DateRangePicker as default, DateRangePicker } from './DateRangePicker';
+export type { DateRangePickerProps, DateRange, RangePreset, RangeSelectionState, DateRangePickerMode, DateRangePickerThemeOverrides } from './DateRangePicker.types';
+export { dateRangePickerTheme } from './DateRangePicker.theme';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FormLabelProps } from './FormLabel.types';
+/**
+ * FormLabel component for providing a label for form elements
+ */
+export declare const FormLabel: React.FC<FormLabelProps>;
+export default FormLabel;

package/dist/components/forms/FormLabel/FormLabel.js

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { formLabelTheme } from './FormLabel.theme.js';
+
+/**
+ * FormLabel component for providing a label for form elements
+ */
+var FormLabel = function (_a) {
+    var _b, _c;
+    var htmlFor = _a.htmlFor, children = _a.children, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.state, state = _f === void 0 ? 'default' : _f, _g = _a.theme, theme = _g === void 0 ? {} : _g;
+    // Get base classes from theme or use defaults
+    var baseClasses = theme.baseStyle || formLabelTheme.baseStyle;
+    // Define state classes
+    var stateClasses = ((_b = theme.states) === null || _b === void 0 ? void 0 : _b[state]) || ((_c = formLabelTheme.states) === null || _c === void 0 ? void 0 : _c[state]) || '';
+    // Required indicator style
+    var requiredIndicatorStyle = theme.requiredIndicatorStyle || formLabelTheme.requiredIndicatorStyle;
+    // Combine all classes for label
+    var combinedClassName = "".concat(baseClasses, " ").concat(stateClasses, " ").concat(className).trim();
+    return (React__default.createElement("label", { htmlFor: htmlFor, className: combinedClassName },
+        children,
+        required && React__default.createElement("span", { className: requiredIndicatorStyle }, "*")));
+};
+
+export { FormLabel, FormLabel as default };

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

@@ -0,0 +1,6 @@
+import { FormLabelThemeOverrides } from './FormLabel.types';
+/**
+ * Default theme for the FormLabel component
+ */
+export declare const formLabelTheme: FormLabelThemeOverrides;
+export default formLabelTheme;

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

@@ -0,0 +1,17 @@
+/**
+ * Default theme for the FormLabel component
+ */
+var formLabelTheme = {
+    // Base styles for the label element
+    baseStyle: "block text-sm/6 font-medium text-text-primary mb-2",
+    // State variants
+    states: {
+        default: "",
+        disabled: "text-text-disabled",
+        invalid: "text-danger-base",
+    },
+    // Required indicator style
+    requiredIndicatorStyle: "text-danger-base ml-1",
+};
+
+export { formLabelTheme as default, formLabelTheme };

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

@@ -0,0 +1,36 @@
+import React from 'react';
+/**
+ * FormLabel component props
+ * @property {string} htmlFor - The ID of the form element the label is associated with
+ * @property {React.ReactNode} children - The content of the label
+ * @property {string} className - Additional class name for the label
+ * @property {boolean} required - Whether the associated form element is required
+ * @property {'default' | 'disabled' | 'invalid'} state - The state of the label
+ * @property {FormLabelThemeOverrides} theme - Component-level theme overrides
+ */
+export interface FormLabelProps {
+    /** The ID of the form element the label is associated with */
+    htmlFor: string;
+    /** The content of the label */
+    children: React.ReactNode;
+    /** Additional class name for the label */
+    className?: string;
+    /** Whether the associated form element is required */
+    required?: boolean;
+    /** The state of the label */
+    state?: FormLabelState;
+    /** Component-level theme overrides */
+    theme?: FormLabelThemeOverrides;
+}
+export type FormLabelState = 'default' | 'disabled' | 'invalid';
+/**
+ * Theme overrides for the FormLabel component
+ */
+export interface FormLabelThemeOverrides {
+    /** Base style for the label */
+    baseStyle?: string;
+    /** State variants for the label */
+    states?: Partial<Record<FormLabelState, string>>;
+    /** Style for the required indicator */
+    requiredIndicatorStyle?: string;
+}

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

@@ -0,0 +1,3 @@
+export { default as FormLabel } from './FormLabel';
+export { default as formLabelTheme } from './FormLabel.theme';
+export * from './FormLabel.types';

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

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react-webpack5";
+import { Input } from "./Input";
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const PasswordWithToggle: Story;
+export declare const PasswordWithToggleAndIcon: Story;
+export declare const DisabledPasswordWithToggle: Story;
+export declare const NumberInput: Story;
+export declare const NumberInputWithLimits: Story;
+export declare const NumberInputWithIcon: Story;
+export declare const NumberInputWithAddon: Story;
+export declare const DisabledNumberInput: Story;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { InputProps } from "./Input.types";
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

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

@@ -0,0 +1,346 @@
+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 { 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, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _p = _a.size, size = _p === void 0 ? "md" : _p, _q = _a.state, state = _q === void 0 ? "default" : _q, _r = _a.className, className = _r === void 0 ? "" : _r, label = _a.label, _s = _a.labelClassName, labelClassName = _s === void 0 ? "" : _s, helperText = _a.helperText, _t = _a.helperTextClassName, helperTextClassName = _t === void 0 ? "" : _t, _u = _a.wrapperClassName, wrapperClassName = _u === void 0 ? "" : _u, _v = _a.inputGroupClassName, inputGroupClassName = _v === void 0 ? "" : _v, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, addonPrefix = _a.addonPrefix, addonSuffix = _a.addonSuffix, keyboardShortcut = _a.keyboardShortcut, id = _a.id, 
+    // TODO: whats the diff between theme and classname? i want to use classname tooverride stying since this library is being build using tailwindcss
+    _w = _a.theme, 
+    // TODO: whats the diff between theme and classname? i want to use classname tooverride stying since this library is being build using tailwindcss
+    theme = _w === void 0 ? {} : _w, required = _a.required, _x = _a.type, type = _x === void 0 ? "text" : _x, _y = _a.passwordToggle, passwordToggle = _y === void 0 ? type === "password" : _y, passwordStrengthIndicator = _a.passwordStrengthIndicator, _z = _a.showNumberControls, showNumberControls = _z === void 0 ? false : _z, min = _a.min, max = _a.max, _0 = _a.step, step = _0 === void 0 ? 1 : _0, onChange = _a.onChange, value = _a.value, currencyDecimalPlaces = _a.currencyDecimalPlaces, props = __rest(_a, ["size", "state", "className", "label", "labelClassName", "helperText", "helperTextClassName", "wrapperClassName", "inputGroupClassName", "leftIcon", "rightIcon", "addonPrefix", "addonSuffix", "keyboardShortcut", "id", "theme", "required", "type", "passwordToggle", "passwordStrengthIndicator", "showNumberControls", "min", "max", "step", "onChange", "value", "currencyDecimalPlaces"]);
+    var _1 = useState(false), isFocused = _1[0], setIsFocused = _1[1];
+    var _2 = useState(false), showPassword = _2[0], setShowPassword = _2[1];
+    var inputId = id || "input-".concat(Math.random().toString(36).substring(2, 9));
+    var _3 = useState(value !== undefined
+        ? typeof value === "number"
+            ? value
+            : typeof value === "string"
+                ? parseFloat(value) || undefined
+                : undefined
+        : undefined), numberValue = _3[0], setNumberValue = _3[1];
+    var inputRef = useRef(null);
+    var cursorPositionRef = useRef(null);
+    // Default icons based on input type
+    var defaultPasswordIcon = type === "password" && !leftIcon ? (React__default.createElement(ForwardRef, { className: "size-5 text-neutral-500" })) : null;
+    var defaultSearchIcon = type === "search" && !leftIcon ? (React__default.createElement(SearchIcon, { size: "sm", className: ((_c = (_b = theme.typeStyles) === null || _b === void 0 ? void 0 : _b.search) === null || _c === void 0 ? void 0 : _c.iconStyle) ||
+            ((_e = (_d = inputTheme.typeStyles) === null || _d === void 0 ? void 0 : _d.search) === null || _e === void 0 ? void 0 : _e.iconStyle) ||
+            "text-neutral-500" })) : null;
+    // Use the provided leftIcon or the default icon based on input type
+    var finalLeftIcon = leftIcon || defaultPasswordIcon || defaultSearchIcon;
+    // Derived state flags for internal use
+    var hasLeftIcon = Boolean(finalLeftIcon);
+    var isDisabled = state === "disabled";
+    var isInvalid = state === "invalid";
+    var hasRightIcon = Boolean(rightIcon);
+    var hasAddonPrefix = Boolean(addonPrefix);
+    var hasAddonSuffix = Boolean(addonSuffix);
+    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);
+        }
+    };
+    // Get theme classes
+    var wrapperClasses = theme.wrapperStyle || inputTheme.wrapperStyle || "";
+    var inputGroupClasses = theme.inputGroupStyle || inputTheme.inputGroupStyle || "";
+    var baseClasses = theme.baseStyle || inputTheme.baseStyle || "";
+    var sizeClasses = ((_f = theme.sizes) === null || _f === void 0 ? void 0 : _f[size]) || ((_g = inputTheme.sizes) === null || _g === void 0 ? void 0 : _g[size]) || "";
+    var stateClasses = ((_h = theme.states) === null || _h === void 0 ? void 0 : _h[state]) || ((_j = inputTheme.states) === null || _j === void 0 ? void 0 : _j[state]) || "";
+    var helperTextClasses = theme.helperText || inputTheme.helperText || "";
+    // Icon related classes
+    var leftIconClasses = theme.leftIconStyle || inputTheme.leftIconStyle || "";
+    var rightIconClasses = theme.rightIconStyle || inputTheme.rightIconStyle || "";
+    var leftIconPadding = ((_k = theme.iconPadding) === null || _k === void 0 ? void 0 : _k.left) || ((_l = inputTheme.iconPadding) === null || _l === void 0 ? void 0 : _l.left) || "pl-10";
+    var rightIconPadding = ((_m = theme.iconPadding) === null || _m === void 0 ? void 0 : _m.right) || ((_o = inputTheme.iconPadding) === null || _o === void 0 ? void 0 : _o.right) || "pr-10";
+    // Addon related classes
+    var addonStyle = theme.addonStyle || inputTheme.addonStyle || "";
+    var addonPrefixStyle = theme.addonPrefixStyle || inputTheme.addonPrefixStyle || "";
+    var addonSuffixStyle = theme.addonSuffixStyle || inputTheme.addonSuffixStyle || "";
+    // Password toggle classes
+    var passwordToggleClasses = theme.passwordToggleStyle || inputTheme.passwordToggleStyle || "";
+    // Number input classes
+    var numberButtonsContainerClasses = theme.numberButtonsContainerStyle ||
+        inputTheme.numberButtonsContainerStyle ||
+        "";
+    var numberButtonClasses = theme.numberButtonStyle || inputTheme.numberButtonStyle || "";
+    // Password toggle button component
+    var PasswordToggleButton = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (!isPasswordField)
+            return null;
+        var toggleIconActive = ((_b = (_a = theme.typeStyles) === null || _a === void 0 ? void 0 : _a.password) === null || _b === void 0 ? void 0 : _b.toggleIconActive) ||
+            ((_d = (_c = inputTheme.typeStyles) === null || _c === void 0 ? void 0 : _c.password) === null || _d === void 0 ? void 0 : _d.toggleIconActive) ||
+            "w-5 h-5 text-neutral-700";
+        var toggleIconInactive = ((_f = (_e = theme.typeStyles) === null || _e === void 0 ? void 0 : _e.password) === null || _f === void 0 ? void 0 : _f.toggleIconInactive) ||
+            ((_h = (_g = inputTheme.typeStyles) === null || _g === void 0 ? void 0 : _g.password) === null || _h === void 0 ? void 0 : _h.toggleIconInactive) ||
+            "w-5 h-5 text-neutral-500";
+        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 () {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        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 = ((_b = (_a = theme.typeStyles) === null || _a === void 0 ? void 0 : _a.number) === null || _b === void 0 ? void 0 : _b.incrementIconStyle) ||
+            ((_d = (_c = inputTheme.typeStyles) === null || _c === void 0 ? void 0 : _c.number) === null || _d === void 0 ? void 0 : _d.incrementIconStyle) ||
+            "text-neutral-500";
+        var decrementIconStyle = ((_f = (_e = theme.typeStyles) === null || _e === void 0 ? void 0 : _e.number) === null || _f === void 0 ? void 0 : _f.decrementIconStyle) ||
+            ((_h = (_g = inputTheme.typeStyles) === null || _g === void 0 ? void 0 : _g.number) === null || _h === void 0 ? void 0 : _h.decrementIconStyle) ||
+            "text-neutral-500";
+        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, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _r = _a.inline, inline = _r === void 0 ? false : _r;
+        if (!hasPasswordStrength) {
+            return null;
+        }
+        var strength = passwordStrengthIndicator.strength || "strong";
+        var customLabel = passwordStrengthIndicator.customLabel;
+        var indicatorClassName = passwordStrengthIndicator.className || "";
+        // Get theme values
+        var containerStyle = ((_b = theme.passwordStrengthIndicator) === null || _b === void 0 ? void 0 : _b.containerStyle) ||
+            ((_c = inputTheme.passwordStrengthIndicator) === null || _c === void 0 ? void 0 : _c.containerStyle) ||
+            "flex items-center gap-1 ".concat(inline ? "" : "mt-2");
+        var labelStyle = ((_d = theme.passwordStrengthIndicator) === null || _d === void 0 ? void 0 : _d.labelStyle) ||
+            ((_e = inputTheme.passwordStrengthIndicator) === null || _e === void 0 ? void 0 : _e.labelStyle) ||
+            "text-xs font-semibold mr-1";
+        var dotStyle = ((_f = theme.passwordStrengthIndicator) === null || _f === void 0 ? void 0 : _f.dotStyle) ||
+            ((_g = inputTheme.passwordStrengthIndicator) === null || _g === void 0 ? void 0 : _g.dotStyle) ||
+            "size-1.5 rounded-full";
+        var dotActiveStyle = ((_h = theme.passwordStrengthIndicator) === null || _h === void 0 ? void 0 : _h.dotActiveStyle) ||
+            ((_j = inputTheme.passwordStrengthIndicator) === null || _j === void 0 ? void 0 : _j.dotActiveStyle) ||
+            "bg-current";
+        var dotInactiveStyle = ((_k = theme.passwordStrengthIndicator) === null || _k === void 0 ? void 0 : _k.dotInactiveStyle) ||
+            ((_l = inputTheme.passwordStrengthIndicator) === null || _l === void 0 ? void 0 : _l.dotInactiveStyle) ||
+            "bg-neutral-200";
+        // Get color and label based on strength
+        var strengthConfig = ((_o = (_m = theme.passwordStrengthIndicator) === null || _m === void 0 ? void 0 : _m.strengthStyles) === null || _o === void 0 ? void 0 : _o[strength]) ||
+            ((_q = (_p = inputTheme.passwordStrengthIndicator) === null || _p === void 0 ? void 0 : _p.strengthStyles) === null || _q === void 0 ? void 0 : _q[strength]) || {
+            label: "Password",
+            color: "text-neutral-500",
+        };
+        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: "".concat(wrapperClasses, " ").concat(stateClass, " ").concat(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: "".concat(inputGroupClasses, " ").concat(stateClasses, " ").concat(inputGroupClassName), onClick: handleInputGroupClick, role: "presentation" },
+                hasAddonPrefix && (React__default.createElement("div", { className: "".concat(addonStyle, " ").concat(addonPrefixStyle) }, addonPrefix)),
+                React__default.createElement("div", { className: "relative flex-1" },
+                    React__default.createElement("input", __assign({ ref: setInputRef, id: inputId, type: actualInputType, className: "\n                  ".concat(baseClasses, " \n                  ").concat(sizeClasses, " \n                  ").concat(hasLeftIcon ? leftIconPadding : "", " \n                  ").concat(hasRightIcon || isPasswordField || (displayNumberControls)
+                            ? rightIconPadding
+                            : "", "\n                  ").concat(className, "\n                "), 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: leftIconClasses }, finalLeftIcon)),
+                    hasRightIcon && !isPasswordField && !displayNumberControls && (React__default.createElement("div", { className: rightIconClasses }, rightIcon)),
+                    isPasswordField && React__default.createElement(PasswordToggleButton, null),
+                    displayNumberControls && React__default.createElement(NumberButtons, null),
+                    hasKeyboardShortcut && (React__default.createElement("div", { className: theme.keyboardShortcutStyle ||
+                            inputTheme.keyboardShortcutStyle ||
+                            "" }, keyboardShortcut))),
+                hasAddonSuffix && (React__default.createElement("div", { className: "".concat(addonStyle, " ").concat(addonSuffixStyle) }, addonSuffix)))),
+        showStrengthBelow && (React__default.createElement(PasswordStrengthIndicator, { inline: false })),
+        helperText && (React__default.createElement("div", { className: "".concat(helperTextClasses, " ").concat(helperTextClassName) }, helperText))));
+});
+Input.displayName = "Input";
+
+export { Input, Input as default };

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

@@ -0,0 +1,7 @@
+import { InputThemeOverrides } from "./Input.types";
+/**
+ * Default theme for the Input component
+ * Extends the common forms base theme
+ */
+export declare const inputTheme: InputThemeOverrides;
+export default inputTheme;