flikkui 0.1.0-beta.2 → 0.1.0-beta.3

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

@@ -2,21 +2,15 @@ import React from 'react';
 /**
  * State variants for the checkbox component
  */
-export type CheckboxState = 'default' | 'disabled' | 'invalid';
+export type CheckboxState = 'default' | 'disabled';
+/**
+ * Size variants for the checkbox component
+ */
+export type CheckboxSize = 'sm' | 'md';
 /**
  * Checkbox component props
- * @property {string} id - Unique identifier for the checkbox input
- * @property {string} name - Name for the checkbox input
- * @property {string} value - Value for the checkbox input
- * @property {boolean} checked - Whether the checkbox is checked
- * @property {(checked: boolean, value: string) => void} onChange - Function called when the checkbox state changes
- * @property {string} label - Label text for the checkbox
- * @property {string} description - Optional description text
- * @property {CheckboxState} state - The state of the checkbox (default, disabled, invalid)
- * @property {CheckboxThemeOverrides} theme - Optional theme overrides
- * @property {string} className - Additional class names for styling override
  */
-export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
     id: string;
     name: string;
     value: string;
@@ -26,27 +20,16 @@ export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     label?: string;
     description?: string;
     state?: CheckboxState;
-    theme?: CheckboxThemeOverrides;
+    size?: CheckboxSize;
+    className?: string;
 }
 /**
  * Checkbox theme configuration
  */
 export interface CheckboxTheme {
-    container: string;
-    inputContainer: string;
-    labelContainer: string;
-    input: string;
-    checkmark: string;
-    description: string;
-}
-/**
- * Checkbox theme overrides
- */
-export interface CheckboxThemeOverrides {
-    container?: string;
-    inputContainer?: string;
-    labelContainer?: string;
-    input?: string;
-    checkmark?: string;
-    description?: string;
+    baseStyle: string;
+    inputContainerStyle: string;
+    inputStyle: string;
+    descriptionStyle: string;
+    sizes: Record<CheckboxSize, string>;
 }

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

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

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

@@ -1,23 +1,16 @@
+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';
 
 /**
- * FormLabel component for providing a label for form elements
+ * FormLabel component for providing consistent labeling 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 },
+    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),
         children,
-        required && React__default.createElement("span", { className: requiredIndicatorStyle }, "*")));
+        required && (React__default.createElement("span", { className: formLabelTheme.requiredIndicatorStyle }, "*"))));
 };
 
-export { FormLabel, FormLabel as default };
+export { FormLabel };

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

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

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

@@ -1,12 +1,12 @@
 /**
- * Default theme for the FormLabel component
+ * Clean theme structure for 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: "",
+    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",
         invalid: "text-danger-base",
     },
@@ -14,4 +14,4 @@ var formLabelTheme = {
     requiredIndicatorStyle: "text-danger-base ml-1",
 };
 
-export { formLabelTheme as default, formLabelTheme };
+export { formLabelTheme };

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

@@ -1,14 +1,12 @@
 import React from 'react';
+/**
+ * State variants for the FormLabel component
+ */
+export type FormLabelState = 'default' | 'disabled' | 'invalid';
 /**
  * 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 {
+export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     /** The ID of the form element the label is associated with */
     htmlFor: string;
     /** The content of the label */
@@ -19,18 +17,12 @@ export interface FormLabelProps {
     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
+ * FormLabel theme configuration
  */
-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;
+export interface FormLabelTheme {
+    baseStyle: string;
+    stateStyles: Record<FormLabelState, string>;
+    requiredIndicatorStyle: string;
 }

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

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

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

@@ -1,4 +1,3 @@
 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

@@ -2,6 +2,7 @@ import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tsl
 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';
@@ -14,29 +15,22 @@ import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/solid/esm/Ey
 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 _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 _3 = useState(value !== undefined
+    var _q = useState(value !== undefined
         ? typeof value === "number"
             ? value
             : typeof value === "string"
                 ? parseFloat(value) || undefined
                 : undefined
-        : undefined), numberValue = _3[0], setNumberValue = _3[1];
+        : 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" && !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;
+    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;
     // Derived state flags for internal use
@@ -182,40 +176,32 @@ var Input = React__default.forwardRef(function (_a, ref) {
             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 || "";
+    // 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 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;
+    // Interactive element classes
+    var passwordToggleClasses = inputTheme.passwordToggleStyle;
+    var numberButtonsContainerClasses = inputTheme.numberButtonsContainerStyle;
+    var numberButtonClasses = 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";
+        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();
@@ -228,7 +214,6 @@ var Input = React__default.forwardRef(function (_a, ref) {
     };
     // Number input buttons component
     var NumberButtons = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!isNumberField)
             return null;
         var isAtMax = max !== undefined &&
@@ -239,12 +224,8 @@ var Input = React__default.forwardRef(function (_a, ref) {
             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";
+        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
@@ -259,35 +240,23 @@ var Input = React__default.forwardRef(function (_a, ref) {
     };
     // 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;
+        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
-        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]) || {
+        // 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-neutral-500",
+            color: "text-text-muted",
         };
         var colorClass = strengthConfig.color || "text-neutral-500";
         var label = customLabel || strengthConfig.label || "Password";
@@ -311,17 +280,16 @@ var Input = React__default.forwardRef(function (_a, ref) {
             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) },
+    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: "".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: cn(inputGroupClasses, stateClasses, inputGroupClassName), onClick: handleInputGroupClick, role: "presentation" },
+                hasAddonPrefix && (React__default.createElement("div", { className: cn(addonStyle, 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) {
+                    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) {
                             var _a;
                             setIsFocused(true);
                             (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
@@ -334,13 +302,11 @@ var Input = React__default.forwardRef(function (_a, ref) {
                     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)))),
+                    hasKeyboardShortcut && (React__default.createElement("div", { className: inputTheme.keyboardShortcutStyle }, keyboardShortcut))),
+                hasAddonSuffix && (React__default.createElement("div", { className: cn(addonStyle, addonSuffixStyle) }, addonSuffix)))),
         showStrengthBelow && (React__default.createElement(PasswordStrengthIndicator, { inline: false })),
-        helperText && (React__default.createElement("div", { className: "".concat(helperTextClasses, " ").concat(helperTextClassName) }, helperText))));
+        helperText && (React__default.createElement("div", { className: cn(helperTextClasses, helperTextClassName) }, helperText))));
 });
 Input.displayName = "Input";
 
-export { Input, Input as default };
+export { Input };

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

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

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

@@ -1,63 +1,63 @@
 import { formsBaseTheme } from '../forms.theme.js';
 
 /**
- * Default theme for the Input component
- * Extends the common forms base theme
+ * Default theme for the Input component - Clean & Organized
+ * Uses flat structure with design tokens
  */
 var inputTheme = {
-    // Base container styles - inherited from common form theme
+    // Base container styles
     wrapperStyle: formsBaseTheme.wrapperStyle,
-    // Input group styles - inherited from common form theme
+    // Input group styles with design tokens
     inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
-    // Base input styles - extends the common control base style with padding
+    // Base input styles - extends common form control with design tokens
     baseStyle: "".concat(formsBaseTheme.controlBaseStyle, " py-2 px-3"),
-    // Size variants - uses the base sizes from common theme
+    // Size variants - organized by component size
     sizes: {
         sm: formsBaseTheme.sizes.sm.base,
         md: formsBaseTheme.sizes.md.base,
         lg: formsBaseTheme.sizes.lg.base,
     },
-    // State variants - inherited from common form theme
+    // State variants using design tokens
     states: formsBaseTheme.states,
-    // Helper text styles - inherited from common form theme
+    // Helper text styles with state handling
     helperText: formsBaseTheme.helperText,
-    // Icon styles - inherited from common form theme
+    // Icon positioning styles
     leftIconStyle: formsBaseTheme.iconStyles.left,
     rightIconStyle: formsBaseTheme.iconStyles.right,
-    // Icon padding styles - inherited from common form theme
+    // Icon padding configuration
     iconPadding: formsBaseTheme.iconStyles.padding,
-    // Addon styles - specific to Input component
-    addonStyle: "flex items-center px-3 text-gray-500 shrink-0",
+    // Addon styles - prefix/suffix content
+    addonStyle: "flex items-center px-3 text-text-muted shrink-0",
     addonPrefixStyle: "pr-0",
     addonSuffixStyle: "pl-0",
-    // Keyboard shortcut styles
-    keyboardShortcutStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 z-10",
-    // Password toggle button styles
-    passwordToggleStyle: "absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer text-neutral-500 hover:text-neutral-700 z-10",
-    // Number input styles
+    // Keyboard shortcut display
+    keyboardShortcutStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-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-text-muted hover:text-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-neutral-100 flex items-center justify-center text-neutral-500 hover:bg-neutral-200 cursor-pointer size-6 rounded-sm",
-    // Input types specific styles
+    numberButtonStyle: "bg-surface-elevated flex items-center justify-center text-text-muted hover:bg-surface-hover hover:text-text-primary cursor-pointer size-6 rounded-sm transition-colors",
+    // Type-specific styles organized by input type
     typeStyles: {
         password: {
-            toggleIconActive: "size-5 text-neutral-700",
-            toggleIconInactive: "size-5 text-neutral-500",
+            toggleIconActive: "size-5 text-text-primary",
+            toggleIconInactive: "size-5 text-text-muted",
         },
         search: {
-            iconStyle: "text-neutral-500",
+            iconStyle: "text-text-muted",
         },
         number: {
-            incrementIconStyle: "text-neutral-500",
-            decrementIconStyle: "text-neutral-500",
+            incrementIconStyle: "text-text-muted",
+            decrementIconStyle: "text-text-muted",
         },
     },
-    // Password strength indicator styles
+    // 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-neutral-200",
+        dotInactiveStyle: "bg-border",
         strengthStyles: {
             weak: {
                 label: "Weak",