flikkui 0.1.0-beta.9 → 0.2.0-beta.2

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

@@ -0,0 +1,25 @@
+/**
+ * Internal theme structure for the FileUpload component
+ */
+interface FileUploadTheme {
+    containerStyle: string;
+    dropzoneStyle: string;
+    dropzoneActiveStyle: string;
+    dropzoneDisabledStyle: string;
+    contentStyle: string;
+    iconStyle: string;
+    textStyle: string;
+    helperTextStyle: string;
+    descriptionStyle: string;
+    previewContainerStyle: string;
+    previewItemStyle: string;
+    previewImageStyle: string;
+    previewFileStyle: string;
+    removeButtonStyle: string;
+}
+/**
+ * Default theme for the FileUpload component
+ * Uses production-ready CSS variables from global.scss
+ */
+export declare const fileUploadTheme: FileUploadTheme;
+export {};

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

@@ -0,0 +1,36 @@
+/**
+ * Default theme for the FileUpload component
+ * Uses production-ready CSS variables from global.scss
+ */
+const fileUploadTheme = {
+    // Container wrapper
+    containerStyle: "w-full",
+    // Dropzone area (default state)
+    dropzoneStyle: "relative flex flex-col items-center justify-center w-full min-h-[160px] p-6 border border-dashed border-[var(--color-border)] rounded-[var(--form-rounded)] bg-[var(--color-background-secondary)] hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-primary)] transition-colors duration-400 cursor-pointer",
+    // Dropzone when dragging over
+    dropzoneActiveStyle: "border-[var(--color-primary)] bg-[var(--color-primary-50)] scale-[1.01]",
+    // Dropzone when disabled
+    dropzoneDisabledStyle: "cursor-not-allowed opacity-60 hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-border)]",
+    // Content wrapper inside dropzone
+    contentStyle: "flex flex-col items-center text-center pointer-events-none",
+    // Upload icon
+    iconStyle: "size-8 text-[var(--color-text-placeholder)]",
+    // Main text
+    textStyle: "text-sm font-medium text-[var(--color-text-primary)]",
+    // Helper text
+    helperTextStyle: "text-sm text-[var(--color-text-muted)] mt-1",
+    // Description below dropzone
+    descriptionStyle: "text-xs text-[var(--color-text-muted)] mt-1",
+    // Preview container
+    previewContainerStyle: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-4",
+    // Individual preview item
+    previewItemStyle: "relative group rounded-lg border border-[var(--color-border)] overflow-hidden bg-[var(--color-background-secondary)]",
+    // Preview image
+    previewImageStyle: "w-full h-32 object-cover",
+    // Preview file (non-image)
+    previewFileStyle: "flex items-center justify-center w-full h-32 p-3 text-sm text-[var(--color-text-secondary)] text-center break-all",
+    // Remove button
+    removeButtonStyle: "absolute top-1 right-1  -translate-y-1 opacity-0 group-hover:opacity-100 transition-all duration-400 group-hover:-translate-y-0",
+};
+
+export { fileUploadTheme };

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

@@ -0,0 +1,94 @@
+/**
+ * FileUpload component props
+ * Supports both click-to-upload and drag-and-drop
+ */
+export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {
+    /**
+     * Accepted file types (MIME types or file extensions)
+     * @example ["image/*", ".pdf", ".doc"]
+     */
+    accept?: string | string[];
+    /**
+     * Whether to allow multiple file selection
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Maximum file size in bytes
+     * @example 5000000 // 5MB
+     */
+    maxSize?: number;
+    /**
+     * Maximum number of files (when multiple is true)
+     */
+    maxFiles?: number;
+    /**
+     * Whether the upload area is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when files are selected/dropped
+     */
+    onUpload?: (files: File[]) => void;
+    /**
+     * Callback when files are removed
+     */
+    onRemove?: (file: File) => void;
+    /**
+     * Callback when there's an error (invalid file type, size exceeded, etc.)
+     */
+    onError?: (error: FileUploadError) => void;
+    /**
+     * Show preview thumbnails for images
+     * @default true
+     */
+    showPreview?: boolean;
+    /**
+     * Custom upload button text
+     * @default "Choose files"
+     */
+    buttonText?: string;
+    /**
+     * Custom dropzone helper text
+     * @default "or drag and drop"
+     */
+    helperText?: string;
+    /**
+     * Helper text displayed below the upload area
+     */
+    description?: string;
+    /**
+     * Custom CSS class for the container
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: FileUploadThemeOverrides;
+}
+export interface FileUploadError {
+    type: 'file-too-large' | 'file-invalid-type' | 'too-many-files';
+    message: string;
+    file?: File;
+}
+export interface UploadedFile {
+    file: File;
+    preview?: string;
+}
+export interface FileUploadThemeOverrides {
+    containerStyle?: string;
+    dropzoneStyle?: string;
+    dropzoneActiveStyle?: string;
+    dropzoneDisabledStyle?: string;
+    contentStyle?: string;
+    iconStyle?: string;
+    textStyle?: string;
+    helperTextStyle?: string;
+    descriptionStyle?: string;
+    previewContainerStyle?: string;
+    previewItemStyle?: string;
+    previewImageStyle?: string;
+    previewFileStyle?: string;
+    removeButtonStyle?: string;
+}

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

@@ -0,0 +1,3 @@
+export { FileUpload } from './FileUpload';
+export { fileUploadTheme } from './FileUpload.theme';
+export type { FileUploadProps, FileUploadError, FileUploadThemeOverrides, UploadedFile } from './FileUpload.types';

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

@@ -1,4 +1,3 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { formLabelTheme } from './FormLabel.theme.js';
 import { cn } from '../../../utils/cn.js';
@@ -6,9 +5,8 @@ import { cn } from '../../../utils/cn.js';
 /**
  * FormLabel component for providing consistent labeling for form elements
  */
-var FormLabel = function (_a) {
-    var htmlFor = _a.htmlFor, children = _a.children, className = _a.className, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.state, state = _c === void 0 ? 'default' : _c, props = __rest(_a, ["htmlFor", "children", "className", "required", "state"]);
-    return (React__default.createElement("label", __assign({ htmlFor: htmlFor, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], className) }, props),
+const FormLabel = ({ htmlFor, children, className, required = false, state = 'default', ...props }) => {
+    return (React__default.createElement("label", { htmlFor: htmlFor, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], className), ...props },
         children,
         required && (React__default.createElement("span", { className: formLabelTheme.requiredIndicatorStyle }, "*"))));
 };

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

@@ -1,13 +1,13 @@
 /**
  * Clean theme structure for FormLabel component
  */
-var formLabelTheme = {
+const formLabelTheme = {
     // Base styles for the label element
     baseStyle: "block text-sm/6 font-medium mb-2",
     // State variants - using design tokens from global.scss
     stateStyles: {
-        default: "text-text-primary",
-        disabled: "text-text-disabled",
+        default: "text-[var(--color-text-primary)]",
+        disabled: "text-[var(--color-text-primary)]/80",
         invalid: "text-[var(--color-danger)]",
     },
     // Required indicator style

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

@@ -1,8 +1,8 @@
-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 { 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';
@@ -10,54 +10,62 @@ 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, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, 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", "leftIcon", "rightIcon", "addonPrefix", "addonSuffix", "keyboardShortcut", "id", "required", "type", "passwordToggle", "passwordStrengthIndicator", "showNumberControls", "min", "max", "step", "onChange", "value", "currencyDecimalPlaces"]);
-    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
+const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, addonPrefix, addonSuffix, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, value, currencyDecimalPlaces, ...props }, ref) => {
+    // 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.');
+        }
+    }
+    const [isFocused, setIsFocused] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
+    const [numberValue, setNumberValue] = 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);
+        : undefined);
+    const inputRef = useRef(null);
+    const cursorPositionRef = useRef(null);
     // Default icons based on input type
-    var defaultPasswordIcon = type === "password" && !leftIcon ? (React__default.createElement(ForwardRef, { className: "size-5 text-text-muted" })) : null;
-    var defaultSearchIcon = type === "search" && !leftIcon ? (React__default.createElement(SearchIcon, { size: "sm", className: inputTheme.typeStyles.search.iconStyle })) : null;
-    // Use the provided leftIcon or the default icon based on input type
-    var finalLeftIcon = leftIcon || defaultPasswordIcon || defaultSearchIcon;
+    const defaultPasswordIcon = type === "password" && !iconStart ? (React__default.createElement(LockClosedIcon, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
+    const 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
+    const finalLeftIcon = iconStart || defaultPasswordIcon || defaultSearchIcon;
+    // Support both old and new prop names (prefer new)
+    const finalContentStart = contentStart !== null && contentStart !== void 0 ? contentStart : addonPrefix;
+    const 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(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);
+    const hasLeftIcon = Boolean(finalLeftIcon);
+    const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
+    const hasRightIcon = Boolean(iconEnd);
+    const hasContentStart = Boolean(finalContentStart);
+    const hasContentEnd = Boolean(finalContentEnd);
+    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
-    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';
+    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
-    var stateClass = isInvalid
+    const stateClass = isInvalid
         ? "state-invalid"
         : isDisabled
             ? "state-disabled"
             : "state-default";
     // Set the ref from forwardRef or create one
-    var setInputRef = function (el) {
+    const setInputRef = (el) => {
         inputRef.current = el;
         if (typeof ref === "function") {
             ref(el);
@@ -67,18 +75,18 @@ var Input = React__default.forwardRef(function (_a, ref) {
         }
     };
     // Determine the actual input type to use
-    var actualInputType = isPasswordField && showPassword ? "text" : (isMaskedInput ? "text" : type);
+    const actualInputType = isPasswordField && showPassword ? "text" : (isMaskedInput ? "text" : type);
     // Validate masked inputs
-    useEffect(function () {
+    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(function () {
+    useEffect(() => {
         if (isNumberField && value !== undefined) {
-            var parsedValue = typeof value === "number"
+            const parsedValue = typeof value === "number"
                 ? value
                 : typeof value === "string"
                     ? parseFloat(value) || undefined
@@ -87,25 +95,25 @@ var Input = React__default.forwardRef(function (_a, ref) {
         }
     }, [value, isNumberField]);
     // Toggle password visibility
-    var handleTogglePassword = function () {
+    const handleTogglePassword = () => {
         if (!isDisabled) {
             setShowPassword(!showPassword);
         }
     };
     // Handle input group click for addon variations - focus the input
-    var handleInputGroupClick = function (e) {
+    const handleInputGroupClick = (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 () {
+    const handleIncrement = () => {
         if (isDisabled)
             return;
-        var stepValue = typeof step === "number" ? step : 1;
-        var currentValue = numberValue !== undefined ? numberValue : 0;
-        var newValue = currentValue + stepValue;
+        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;
@@ -114,12 +122,12 @@ var Input = React__default.forwardRef(function (_a, ref) {
         updateNumberValue(newValue);
     };
     // Decrement number value
-    var handleDecrement = function () {
+    const handleDecrement = () => {
         if (isDisabled)
             return;
-        var stepValue = typeof step === "number" ? step : 1;
-        var currentValue = numberValue !== undefined ? numberValue : 0;
-        var newValue = currentValue - stepValue;
+        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;
@@ -128,47 +136,47 @@ var Input = React__default.forwardRef(function (_a, ref) {
         updateNumberValue(newValue);
     };
     // Update the input value and trigger onChange
-    var updateNumberValue = function (newValue) {
+    const updateNumberValue = (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);
+            const event = new Event("input", { bubbles: true });
+            inputRef.current.dispatchEvent(event);
             // Call onChange handler if provided
             if (onChange) {
-                onChange(event_1);
+                onChange(event);
             }
         }
     };
     // Handle input change
-    var handleInputChange = function (e) {
+    const handleInputChange = (e) => {
         // Store original value and cursor position
-        var originalValue = e.target.value;
+        const originalValue = e.target.value;
         cursorPositionRef.current = e.target.selectionStart;
         if (isMaskedInput) {
             // Apply masking with options
-            var maskedValue = applyInputMask(originalValue, type, { currencyDecimalPlaces: currencyDecimalPlaces });
+            const 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);
+                const newCursorPosition = getAdjustedCursorPosition(originalValue, maskedValue, cursorPositionRef.current);
                 // Set the cursor position after React updates the DOM
-                setTimeout(function () {
+                setTimeout(() => {
                     if (inputRef.current) {
-                        inputRef.current.setSelectionRange(newCursorPosition_1, newCursorPosition_1);
+                        inputRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
                     }
                 }, 0);
             }
             // For currency inputs, ensure we immediately validate
             if (type === 'currency' && isInvalid && onChange) {
-                var event_2 = __assign({}, e);
-                onChange(event_2);
+                const event = { ...e };
+                onChange(event);
             }
         }
         else if (isNumberField) {
-            var value_1 = e.target.value;
-            var parsedValue = value_1 ? parseFloat(value_1) : undefined;
+            const value = e.target.value;
+            const parsedValue = value ? parseFloat(value) : undefined;
             setNumberValue(parsedValue);
         }
         // Call the original onChange handler
@@ -177,91 +185,90 @@ var Input = React__default.forwardRef(function (_a, ref) {
         }
     };
     // 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;
+    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
-    var leftIconClasses = inputTheme.leftIconStyle;
-    var rightIconClasses = inputTheme.rightIconStyle;
-    var leftIconPadding = inputTheme.iconPadding.left;
-    var rightIconPadding = inputTheme.iconPadding.right;
-    // Addon classes
-    var addonStyle = inputTheme.addonStyle;
-    var addonPrefixStyle = inputTheme.addonPrefixStyle;
-    var addonSuffixStyle = inputTheme.addonSuffixStyle;
+    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
-    var passwordToggleClasses = inputTheme.passwordToggleStyle;
-    var numberButtonsContainerClasses = inputTheme.numberButtonsContainerStyle;
-    var numberButtonClasses = inputTheme.numberButtonStyle;
+    const passwordToggleClasses = inputTheme.passwordToggleStyle;
+    const numberButtonsContainerClasses = inputTheme.numberButtonsContainerStyle;
+    const numberButtonClasses = inputTheme.numberButtonStyle;
     // Password toggle button component
-    var PasswordToggleButton = function () {
+    const PasswordToggleButton = () => {
         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) {
+        const toggleIconActive = inputTheme.typeStyles.password.toggleIconActive;
+        const toggleIconInactive = inputTheme.typeStyles.password.toggleIconInactive;
+        return (React__default.createElement("div", { className: passwordToggleClasses, onClick: (e) => {
                 e.stopPropagation(); // Prevent parent click handler
                 handleTogglePassword();
-            }, "aria-label": showPassword ? "Hide password" : "Show password", role: "button", tabIndex: 0, onKeyDown: function (e) {
+            }, "aria-label": showPassword ? "Hide password" : "Show password", role: "button", tabIndex: 0, onKeyDown: (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" }))));
+            } }, showPassword ? (React__default.createElement(EyeSlashIcon, { className: toggleIconActive, "aria-hidden": "true" })) : (React__default.createElement(EyeIcon, { className: toggleIconInactive, "aria-hidden": "true" }))));
     };
     // Number input buttons component
-    var NumberButtons = function () {
+    const NumberButtons = () => {
         if (!isNumberField)
             return null;
-        var isAtMax = max !== undefined &&
+        const isAtMax = max !== undefined &&
             numberValue !== undefined &&
             typeof max === "number" &&
             numberValue >= max;
-        var isAtMin = min !== undefined &&
+        const isAtMin = min !== undefined &&
             numberValue !== undefined &&
             typeof min === "number" &&
             numberValue <= min;
-        var incrementIconStyle = inputTheme.typeStyles.number.incrementIconStyle;
-        var decrementIconStyle = inputTheme.typeStyles.number.decrementIconStyle;
+        const incrementIconStyle = inputTheme.typeStyles.number.incrementIconStyle;
+        const decrementIconStyle = inputTheme.typeStyles.number.decrementIconStyle;
         return (React__default.createElement("div", { className: numberButtonsContainerClasses },
-            React__default.createElement("button", { type: "button", className: "".concat(numberButtonClasses), onClick: function (e) {
+            React__default.createElement("button", { type: "button", className: `${numberButtonClasses}`, onClick: (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) {
+            React__default.createElement("button", { type: "button", className: `${numberButtonClasses}`, onClick: (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;
+    const PasswordStrengthIndicator = ({ inline = false }) => {
         if (!hasPasswordStrength) {
             return null;
         }
-        var strength = passwordStrengthIndicator.strength || "strong";
-        var customLabel = passwordStrengthIndicator.customLabel;
-        var indicatorClassName = passwordStrengthIndicator.className || "";
+        const strength = passwordStrengthIndicator.strength || "strong";
+        const customLabel = passwordStrengthIndicator.customLabel;
+        const 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;
+        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;
         // Get color and label based on strength using design tokens
-        var strengthConfig = inputTheme.passwordStrengthIndicator.strengthStyles[strength] || {
+        const strengthConfig = inputTheme.passwordStrengthIndicator.strengthStyles[strength] || {
             label: "Password",
-            color: "text-text-muted",
+            color: "text-[var(--color-text-muted)]",
         };
-        var colorClass = strengthConfig.color || "text-neutral-500";
-        var label = customLabel || strengthConfig.label || "Password";
+        const colorClass = strengthConfig.color || "text-neutral-500";
+        const label = customLabel || strengthConfig.label || "Password";
         // Determine number of active dots based on strength
-        var getActiveDots = function (strength) {
+        const getActiveDots = (strength) => {
             switch (strength) {
                 case "weak":
                     return 1;
@@ -275,10 +282,10 @@ var Input = React__default.forwardRef(function (_a, ref) {
                     return 0;
             }
         };
-        var activeDots = getActiveDots(strength);
-        return (React__default.createElement("div", { className: "".concat(containerStyle, " ").concat(indicatorClassName, " ").concat(colorClass) },
+        const activeDots = getActiveDots(strength);
+        return (React__default.createElement("div", { className: `${containerStyle} ${indicatorClassName} ${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) })); })));
+            [...Array(5)].map((_, index) => (React__default.createElement("div", { key: index, className: `${dotStyle} ${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" },
@@ -286,24 +293,24 @@ var Input = React__default.forwardRef(function (_a, ref) {
             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" },
-                hasAddonPrefix && (React__default.createElement("div", { className: cn(addonStyle, addonPrefixStyle) }, addonPrefix)),
+                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 && leftIconPadding, (hasRightIcon || isPasswordField || displayNumberControls) && rightIconPadding, 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) {
+                    React__default.createElement("input", { 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: (e) => {
                             var _a;
                             setIsFocused(true);
                             (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                        }, onBlur: function (e) {
+                        }, onBlur: (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)),
+                        }, 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))),
-                hasAddonSuffix && (React__default.createElement("div", { className: cn(addonStyle, addonSuffixStyle) }, addonSuffix)))),
+                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))));
 });

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

@@ -4,4 +4,3 @@ import { InputTheme } from "./Input.types";
  * Uses flat structure with design tokens
  */
 export declare const inputTheme: InputTheme;
-export default inputTheme;