flikkui 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/components/feedback/index.d.ts

@@ -3,9 +3,9 @@ export type { AlertProps, AlertTheme, AlertThemeOverrides } from './Alert';
 export { Toast, ToastProvider, useToast, useToastContext } from './Toast';
 export type { ToastProps, ToastData, ToastProviderProps, ToastTheme, ToastThemeOverrides, UseToastReturn, UseToastOptions, } from './Toast';
 export { Notification } from './Notification';
-export type { NotificationProps, NotificationTheme, NotificationThemeOverrides, NotificationAction } from './Notification';
-export { Spinner } from './Spinner';
+export type { NotificationProps, NotificationVariant, NotificationTheme } from './Notification';
+export { default as Spinner } from './Spinner';
 export { ChatMessage } from './ChatMessage';
 export type { ChatMessageProps, ChatMessageVariant, ChatMessageAvatarProps, ChatMessageTheme, ChatMessageThemeOverrides } from './ChatMessage';
 export { default as Empty } from './Empty';
-export type { EmptyProps, EmptyVariant, EmptyThemeOverrides } from './Empty';
+export type { EmptyProps, EmptyTheme } from './Empty';

package/dist/components/forms/Checkbox/Checkbox.js

@@ -10,8 +10,8 @@ import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/
  * Checkbox component for selecting one or more options
  */
 var Checkbox = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, controlledChecked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, onChange = _a.onChange, label = _a.label, description = _a.description, _c = _a.state, state = _c === void 0 ? "default" : _c, themeOverrides = _a.theme, className = _a.className, restProps = __rest(_a, ["id", "name", "value", "checked", "indeterminate", "onChange", "label", "description", "state", "theme", "className"]);
-    var _d = useState(false), internalChecked = _d[0], setInternalChecked = _d[1];
+    var id = _a.id, name = _a.name, value = _a.value, controlledChecked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, onChange = _a.onChange, label = _a.label, description = _a.description, _c = _a.state, state = _c === void 0 ? "default" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, className = _a.className, restProps = __rest(_a, ["id", "name", "value", "checked", "indeterminate", "onChange", "label", "description", "state", "size", "className"]);
+    var _e = useState(false), internalChecked = _e[0], setInternalChecked = _e[1];
     var inputRef = useRef(null);
     // Determine if component is controlled or uncontrolled
     var isControlled = controlledChecked !== undefined;
@@ -24,7 +24,6 @@ var Checkbox = function (_a) {
     }, [indeterminate]);
     // Derive state flags
     var isDisabled = state === "disabled";
-    var isInvalid = state === "invalid";
     var handleChange = function (e) {
         if (isDisabled)
             return;
@@ -33,19 +32,14 @@ var Checkbox = function (_a) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
     };
-    // Create state class for CSS selectors (like other components)
-    var stateClass = isInvalid
-        ? "state-invalid"
-        : isDisabled
-            ? "state-disabled"
-            : "state-default";
-    return (React__default.createElement("div", __assign({ className: cn(checkboxTheme.container, stateClass, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.container, className) }, restProps),
-        React__default.createElement("div", { className: cn(checkboxTheme.inputContainer, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.inputContainer) },
-            React__default.createElement("input", { ref: inputRef, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? "".concat(id, "-description") : undefined, "aria-invalid": isInvalid, className: cn(checkboxTheme.input, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.input) }),
-            (isChecked || indeterminate) && (indeterminate ? (React__default.createElement(ForwardRef, { className: cn(checkboxTheme.checkmark, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.checkmark), strokeWidth: 3 })) : isDisabled ? (React__default.createElement(ForwardRef, { className: cn(checkboxTheme.checkmark, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.checkmark), strokeWidth: 3 })) : (React__default.createElement(ForwardRef$1, { className: cn(checkboxTheme.checkmark, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.checkmark), strokeWidth: 3 })))),
-        (label || description) && (React__default.createElement("div", { className: cn(checkboxTheme.labelContainer, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.labelContainer) },
-            label && React__default.createElement(FormLabel, { htmlFor: id, className: "!mb-0", state: state }, label),
-            description && (React__default.createElement("div", { id: "".concat(id, "-description"), className: cn(checkboxTheme.description, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.description) }, description))))));
+    return (React__default.createElement("div", __assign({ className: cn(checkboxTheme.baseStyle, className) }, restProps),
+        React__default.createElement("div", { className: cn(checkboxTheme.inputContainerStyle, checkboxTheme.sizes[size]) },
+            React__default.createElement("input", { ref: inputRef, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? "".concat(id, "-description") : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }),
+            indeterminate && (React__default.createElement(ForwardRef, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-neutral-600 transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 })),
+            isChecked && !indeterminate && (React__default.createElement(ForwardRef$1, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-white transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 }))),
+        (label || description) && (React__default.createElement("div", { className: "cursor-pointer" },
+            label && (React__default.createElement(FormLabel, { htmlFor: id, className: "!mb-0", state: state }, label)),
+            description && (React__default.createElement("div", { id: "".concat(id, "-description"), className: checkboxTheme.descriptionStyle }, description))))));
 };
 
 export { Checkbox, Checkbox as default };

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

@@ -2,12 +2,14 @@
  * Default theme configuration for the Checkbox component
  */
 var checkboxTheme = {
-    container: "relative flex items-start gap-3",
-    inputContainer: "relative flex-shrink-0 group grid size-6 grid-cols-1",
-    labelContainer: "cursor-pointer",
-    input: "col-start-1 row-start-1 appearance-none rounded-md border-2 border-gray-300 bg-white size-6 checked:border-primary-600 checked:bg-primary-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 checked:outline-2 checked:outline-primary-100 checked:outline-offset-1 transition-all duration-400",
-    checkmark: "pointer-events-none col-start-1 row-start-1 size-4 self-center justify-self-center opacity-0 group-has-[:checked]:opacity-100 stroke-white group-has-[:disabled]:stroke-neutral-400 transition-opacity duration-200",
-    description: "text-sm text-text-secondary mt-1",
+    baseStyle: "relative flex items-start gap-3",
+    inputContainerStyle: "relative flex-shrink-0 group grid grid-cols-1",
+    inputStyle: "col-start-1 row-start-1 appearance-none rounded-md border-2 border-gray-300 bg-white checked:border-primary-base checked:bg-primary-base disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 checked:outline-2 checked:outline-primary-100 checked:outline-offset-1 transition-all duration-400 data-[state=disabled]:border-gray-300 data-[state=disabled]:bg-gray-100",
+    descriptionStyle: "text-base text-text-secondary mt-0.5",
+    sizes: {
+        sm: "size-5 mt-0.25",
+        md: "size-6"
+    }
 };
 
 export { checkboxTheme };

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;