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

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

@@ -1,113 +1,70 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
 /**
  * Default theme configuration for TimePicker component
  *
- * This theme follows the Input component pattern and integrates with
- * the global design system using CSS variables.
+ * Follows the same pattern as Select and DatePicker, extending formsBaseTheme
+ * for consistent trigger styling across all form dropdowns.
  */
-var timePickerTheme = {
-    // Wrapper styles
-    wrapperStyle: "relative w-full",
-    // Input field styles - following Input component pattern
-    inputStyle: [
-        // Base styles
-        "w-full border border-[var(--color-neutral-300)] rounded-[var(--form-rounded)]",
-        "bg-white text-[var(--color-neutral-900)] placeholder:text-[var(--color-neutral-500)]",
-        "font-medium transition-colors duration-200",
-        "focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)]/20 focus:border-[var(--color-primary-500)]",
-        // Cursor and interaction
-        "cursor-pointer select-none",
-        // Disabled state
-        "disabled:bg-[var(--color-neutral-50)] disabled:text-[var(--color-neutral-400)] disabled:cursor-not-allowed",
-        "disabled:border-[var(--color-neutral-200)]"
-    ].join(" "),
-    // Dropdown container styles
-    dropdownStyle: [
-        // Base container
-        "absolute z-50 mt-2 bg-white border border-[var(--color-neutral-200)]",
-        "rounded-[var(--form-rounded)] shadow-lg",
-        // Animation and interaction
-        "animate-in fade-in-0 zoom-in-95 duration-200",
-        // Responsive width
-        "min-w-[280px] max-w-[320px]"
-    ].join(" "),
+const timePickerTheme = {
+    // Container wrapper
+    containerStyle: formsBaseTheme.wrapperStyle,
+    // Trigger base styles - extends common form input group style (same as Select/DatePicker)
+    baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
+    // Trigger size variants - composed from atomic tokens
+    triggerSizes: {
+        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
+        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.height}`,
+        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
+    },
+    // Trigger state variants - inherited from common form theme
+    triggerStates: formsBaseTheme.states,
+    // Trigger focus state variants - inherited from common form theme
+    triggerFocusStates: formsBaseTheme.focusStates,
+    // Trigger hover state variants - inherited from common form theme
+    triggerHoverStates: formsBaseTheme.hoverStates,
+    // Start icon style - inherited from common form theme
+    iconStartStyle: formsBaseTheme.iconStyles.left,
+    // End icon style - inherited from common form theme
+    iconEndStyle: formsBaseTheme.iconStyles.right,
+    // Icon padding styles - inherited from common form theme
+    iconStartPadding: formsBaseTheme.iconStyles.padding.left,
+    iconEndPadding: formsBaseTheme.iconStyles.padding.right,
+    // Clear button styles (positioned between left content and right icon)
+    clearButtonStyle: "absolute right-8 top-1/2 -translate-y-1/2 p-1 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors z-10",
+    // Dropdown container styles (TimePicker-specific)
+    // Width is controlled by trigger size via estimatedWidth parameter
+    dropdownStyle: "fixed z-[1000] mt-2 bg-white border border-[var(--color-border)] rounded-[var(--form-rounded)] shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
+    // Dropdown size variants - primarily for internal spacing/padding
+    dropdownSizes: {
+        sm: "",
+        md: "",
+        lg: "",
+    },
     // Time selector container
-    selectorContainerStyle: [
-        "flex divide-x divide-[var(--color-neutral-200)]",
-        "h-48 overflow-hidden"
-    ].join(" "),
+    selectorContainerStyle: "flex divide-x divide-[var(--color-border)] h-48 overflow-hidden",
     // Individual selector column
-    selectorColumnStyle: [
-        "flex-1 flex flex-col overflow-hidden",
-        "scroll-smooth"
-    ].join(" "),
+    selectorColumnStyle: "flex-1 flex flex-col overflow-hidden scroll-smooth",
+    // Column header styles
+    selectorHeaderStyle: "sticky top-0 bg-white/95 backdrop-blur-sm p-2 border-b border-[var(--color-border)]",
+    // Column header label styles
+    selectorHeaderLabelStyle: "text-xs font-semibold text-[var(--color-text-secondary)] uppercase tracking-wide",
     // Time selector items
-    selectorItemStyle: [
-        "flex items-center justify-center py-2 px-3",
-        "text-sm font-medium text-[var(--color-neutral-700)]",
-        "hover:bg-[var(--color-neutral-50)] cursor-pointer transition-colors",
-        "border-b border-[var(--color-neutral-100)] last:border-b-0",
-        "min-h-[2.5rem]"
-    ].join(" "),
-    // Selected item styles
-    selectedItemStyle: [
-        "bg-[var(--color-primary-50)] text-[var(--color-primary-700)] font-semibold",
-        "border-l-2 border-l-[var(--color-primary-500)]"
-    ].join(" "),
-    // Disabled item styles
-    disabledItemStyle: [
-        "text-[var(--color-neutral-300)] cursor-not-allowed",
-        "hover:bg-transparent"
-    ].join(" "),
-    // Clear button styles
-    clearButtonStyle: [
-        "absolute right-8 top-1/2 -translate-y-1/2",
-        "p-1 rounded text-[var(--color-neutral-400)] hover:text-[var(--color-neutral-600)]",
-        "hover:bg-[var(--color-neutral-100)] transition-colors"
-    ].join(" "),
-    // Trigger icon styles
-    triggerIconStyle: [
-        "absolute right-3 top-1/2 -translate-y-1/2",
-        "text-[var(--color-neutral-400)] pointer-events-none"
-    ].join(" "),
-    // Size variants
-    sizes: {
-        sm: {
-            inputStyle: "min-h-[var(--form-min-h-sm)] px-3 text-sm",
-            dropdownStyle: "min-w-[240px] max-w-[280px]",
-            selectorItemStyle: "py-1.5 px-2 text-xs min-h-[2rem]"
-        },
-        md: {
-            inputStyle: "min-h-[var(--form-min-h-md)] px-4 text-sm",
-            dropdownStyle: "min-w-[280px] max-w-[320px]",
-            selectorItemStyle: "py-2 px-3 text-sm min-h-[2.5rem]"
-        },
-        lg: {
-            inputStyle: "min-h-[var(--form-min-h-lg)] px-4 text-base",
-            dropdownStyle: "min-w-[320px] max-w-[360px]",
-            selectorItemStyle: "py-3 px-4 text-base min-h-[3rem]"
-        }
+    selectorItemStyle: "flex items-center justify-center py-2 px-3 text-sm font-medium text-[var(--color-text-secondary)] hover:bg-[var(--color-background-secondary)] cursor-pointer transition-colors border-b border-[var(--color-border)] last:border-b-0 min-h-[2.5rem] data-[selected=true]:bg-[var(--color-primary-50)] data-[selected=true]:text-[var(--color-primary-700)] data-[selected=true]:font-semibold data-[selected=true]:border-l-2 data-[selected=true]:border-l-[var(--color-primary-600)] data-[disabled=true]:text-[var(--color-text-disabled)] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent",
+    // Selector item size variants
+    selectorItemSizes: {
+        sm: "py-1.5 px-2 text-xs min-h-[2rem]",
+        md: "py-2 px-3 text-sm min-h-[2.5rem]",
+        lg: "py-3 px-4 text-base min-h-[3rem]",
+    },
+    // Helper text style - inherited from common form theme
+    helperTextStyle: formsBaseTheme.helperText,
+    // Helper text state variants
+    helperTextStates: {
+        default: "text-[var(--color-text-muted)]",
+        disabled: "text-[var(--color-text-disabled)]",
+        invalid: "text-red-600",
     },
-    // State variants
-    states: {
-        default: {
-            inputStyle: "border-[var(--color-neutral-300)] focus:border-[var(--color-primary-500)] focus:ring-[var(--color-primary-500)]/20",
-            dropdownStyle: "border-[var(--color-neutral-200)]"
-        },
-        disabled: {
-            inputStyle: [
-                "bg-[var(--color-neutral-50)] border-[var(--color-neutral-200)] text-[var(--color-neutral-400)]",
-                "cursor-not-allowed"
-            ].join(" "),
-            dropdownStyle: "opacity-50 pointer-events-none"
-        },
-        invalid: {
-            inputStyle: [
-                "border-red-300 focus:border-red-500 focus:ring-red-500/20",
-                "text-red-900"
-            ].join(" "),
-            dropdownStyle: "border-red-200"
-        }
-    }
 };
 
-export { timePickerTheme as default };
+export { timePickerTheme };

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

@@ -16,8 +16,8 @@ import React from 'react';
  * @property {boolean} clearable - Whether to show a clear button
  * @property {string} label - Optional label text
  * @property {string} helperText - Optional helper text
- * @property {React.ReactNode} leftIcon - Icon to display on the left
- * @property {React.ReactNode} rightIcon - Icon to display on the right
+ * @property {React.ReactNode} iconStart - Icon to display at the start (left side)
+ * @property {React.ReactNode} iconEnd - Icon to display at the end (right side)
  */
 export interface TimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'defaultValue'> {
     /** The selected time value in "HH:mm" or "HH:mm:ss" format */
@@ -50,10 +50,10 @@ export interface TimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInpu
     label?: string;
     /** Optional helper text */
     helperText?: string;
-    /** Icon to display on the left */
-    leftIcon?: React.ReactNode;
-    /** Icon to display on the right */
-    rightIcon?: React.ReactNode;
+    /** Icon to display at the start (left side) */
+    iconStart?: React.ReactNode;
+    /** Icon to display at the end (right side) */
+    iconEnd?: React.ReactNode;
     /** Additional class name for the wrapper */
     className?: string;
     /** Additional class name for the label */
@@ -94,39 +94,84 @@ export interface ParsedTime {
 }
 /**
  * Theme overrides for the TimePicker component
+ * Follows Select/DatePicker pattern with trigger-based styling
  */
 export interface TimePickerThemeOverrides {
-    /** Style for the outermost wrapper */
-    wrapperStyle?: string;
-    /** Style for the input element */
-    inputStyle?: string;
-    /** Style for the dropdown container */
+    /** Container wrapper style */
+    containerStyle?: string;
+    /** Base style for trigger button (extends formsBaseTheme.inputGroupBaseStyle) */
+    baseStyle?: string;
+    /** Trigger size variants */
+    triggerSizes?: Partial<Record<TimePickerSize, string>>;
+    /** Trigger state variants */
+    triggerStates?: Partial<Record<TimePickerState, string>>;
+    /** Trigger focus state variants */
+    triggerFocusStates?: Partial<Record<TimePickerState, string>>;
+    /** Trigger hover state variants */
+    triggerHoverStates?: Partial<Record<TimePickerState, string>>;
+    /** Start icon style (Clock icon) */
+    iconStartStyle?: string;
+    /** End icon style (Chevron icon) */
+    iconEndStyle?: string;
+    /** Start icon padding */
+    iconStartPadding?: string;
+    /** End icon padding */
+    iconEndPadding?: string;
+    /** Clear button style */
+    clearButtonStyle?: string;
+    /** Dropdown container style */
     dropdownStyle?: string;
-    /** Style for the time selector container */
+    /** Dropdown size variants */
+    dropdownSizes?: Partial<Record<TimePickerSize, string>>;
+    /** Time selector container style */
     selectorContainerStyle?: string;
-    /** Style for individual time selector columns */
+    /** Selector column style */
     selectorColumnStyle?: string;
-    /** Style for time selector items */
+    /** Selector column header container style */
+    selectorHeaderStyle?: string;
+    /** Selector column header label style */
+    selectorHeaderLabelStyle?: string;
+    /** Selector item style (use data-[selected=true] and data-[disabled=true]) */
     selectorItemStyle?: string;
-    /** Style for selected time items */
-    selectedItemStyle?: string;
-    /** Style for disabled time items */
-    disabledItemStyle?: string;
-    /** Style for the clear button */
-    clearButtonStyle?: string;
-    /** Style for the dropdown trigger icon */
-    triggerIconStyle?: string;
-    /** Size variants */
-    sizes?: Partial<Record<TimePickerSize, {
-        inputStyle?: string;
-        dropdownStyle?: string;
-        selectorItemStyle?: string;
-    }>>;
-    /** State variants */
-    states?: Partial<Record<TimePickerState, {
-        inputStyle?: string;
-        dropdownStyle?: string;
-    }>>;
+    /** Selector item size variants */
+    selectorItemSizes?: Partial<Record<TimePickerSize, string>>;
+    /** Helper text style */
+    helperTextStyle?: string;
+    /** Helper text state variants */
+    helperTextStates?: Partial<Record<TimePickerState, string>>;
+}
+/**
+ * TimePickerTrigger component props
+ */
+export interface TimePickerTriggerProps {
+    /** Element ID */
+    id?: string;
+    /** Whether the trigger is disabled */
+    disabled?: boolean;
+    /** Whether the dropdown is open */
+    isOpen?: boolean;
+    /** Visual state of the trigger */
+    state?: TimePickerState;
+    /** Size variant */
+    size?: TimePickerSize;
+    /** Whether to show clear button */
+    clearable?: boolean;
+    /** Clear button click handler */
+    onClear?: () => void;
+    /** Icon to display at the start (left side) */
+    iconStart?: React.ReactNode;
+    /** Icon to display at the end (right side) */
+    iconEnd?: React.ReactNode;
+    /** Additional className */
+    className?: string;
+    /** Click handler */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Focus handler */
+    onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Blur handler */
+    onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Display content (formatted time or placeholder) */
+    children?: React.ReactNode;
 }
 /**
  * Internal time selector props

package/dist/components/forms/TimePicker/TimePickerContent.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * TimePickerContent Component - contains the time selector dropdown
+ * Uses portal positioning like Select and DatePicker components
+ */
+interface TimePickerContentProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    portal?: boolean;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    offset?: number;
+    children?: React.ReactNode;
+}
+export declare const TimePickerContent: React.FC<TimePickerContentProps>;
+export {};

package/dist/components/forms/TimePicker/TimePickerContent.js

@@ -0,0 +1,49 @@
+import React__default, { useContext, useCallback } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../utils/cn.js';
+import { TimePickerContext } from './TimePicker.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { createDropdownAnimations } from '../Select/Select.animations.js';
+
+const TimePickerContent = ({ isOpen, onClose, portal = true, placement = 'bottom-start', offset = 4, children, }) => {
+    var _a, _b;
+    const context = useContext(TimePickerContext);
+    if (!context) {
+        throw new Error('TimePickerContent must be used within a TimePicker');
+    }
+    const { theme, triggerRef, size } = context;
+    // Use enhanced dropdown positioning hook with direction-aware animations
+    // Pass trigger width so dropdown matches trigger size
+    const triggerWidth = ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+    const { position, cssVariables, contentRef, isFlipped } = useSelectPortal({
+        triggerRef,
+        isOpen,
+        placement,
+        offset,
+        estimatedWidth: triggerWidth,
+    });
+    // Create direction-aware animations based on actual placement
+    const animations = createDropdownAnimations(isFlipped);
+    // Combine refs
+    const combinedRef = useCallback((el) => {
+        if (contentRef && typeof contentRef === 'object' && 'current' in contentRef) {
+            contentRef.current = el;
+        }
+    }, [contentRef]);
+    const contentElement = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: combinedRef, className: cn(theme.dropdownStyle, (_b = theme.dropdownSizes) === null || _b === void 0 ? void 0 : _b[size]), style: {
+            ...cssVariables,
+            overscrollBehavior: 'contain',
+            ...(portal ? {
+                top: `${position.top}px`,
+                left: `${position.left}px`,
+                minWidth: `${position.width}px`,
+            } : {})
+        }, variants: animations, initial: "initial", animate: "visible", exit: "exit" }, children))));
+    // Use portal if enabled and client-side
+    return portal && typeof document !== 'undefined'
+        ? createPortal(contentElement, document.body)
+        : contentElement;
+};
+
+export { TimePickerContent };

package/dist/components/forms/TimePicker/TimePickerTrigger.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TimePickerTriggerProps } from './TimePicker.types';
+/**
+ * TimePickerTrigger Component - styled like form input
+ * Displays selected time or placeholder text
+ * Follows the same pattern as DatePickerTrigger and SelectButton
+ */
+export declare const TimePickerTrigger: React.FC<TimePickerTriggerProps>;

package/dist/components/forms/TimePicker/TimePickerTrigger.js

@@ -0,0 +1,46 @@
+import React__default, { useContext } from 'react';
+import { ClockIcon, XMarkIcon, ChevronUpDownIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { TimePickerContext } from './TimePicker.js';
+
+/**
+ * TimePickerTrigger Component - styled like form input
+ * Displays selected time or placeholder text
+ * Follows the same pattern as DatePickerTrigger and SelectButton
+ */
+const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md', clearable, onClear, iconStart, iconEnd, className, onClick, onFocus, onBlur, children, }) => {
+    var _a, _b, _c, _d;
+    const context = useContext(TimePickerContext);
+    if (!context) {
+        throw new Error('TimePickerTrigger must be used within a TimePicker');
+    }
+    const { theme, triggerRef, hasValue } = context;
+    const baseStyle = theme.baseStyle || "";
+    const sizeStyle = ((_a = theme.triggerSizes) === null || _a === void 0 ? void 0 : _a[size]) || "";
+    const stateStyle = ((_b = theme.triggerStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
+    const hoverStateStyle = ((_c = theme.triggerHoverStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
+    const focusStateStyle = ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
+    const iconStartStyle = theme.iconStartStyle || "";
+    const iconEndStyle = theme.iconEndStyle || "";
+    const iconStartPadding = theme.iconStartPadding || "";
+    const iconEndPadding = clearable && hasValue ? "pr-16" : theme.iconEndPadding || "";
+    // Apply focused styles when open - same pattern as SelectButton and DatePickerTrigger
+    const activeFocusState = isOpen
+        ? focusStateStyle || "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
+        : "";
+    return (React__default.createElement("div", { className: "relative w-full" },
+        React__default.createElement("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, 'w-full cursor-pointer bg-white text-left', className // User overrides take highest precedence
+            ), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open time picker" },
+            iconStart !== undefined ? (iconStart && React__default.createElement("span", { className: iconStartStyle }, iconStart)) : (React__default.createElement("span", { className: iconStartStyle },
+                React__default.createElement(ClockIcon, { className: "h-4 w-4" }))),
+            React__default.createElement("span", { className: "block truncate" }, children),
+            clearable && hasValue && !disabled && (React__default.createElement("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    onClear === null || onClear === void 0 ? void 0 : onClear();
+                }, className: cn(theme.clearButtonStyle), "aria-label": "Clear time" },
+                React__default.createElement(XMarkIcon, { className: "w-4 h-4" }))),
+            iconEnd !== undefined ? (iconEnd && React__default.createElement("span", { className: iconEndStyle }, iconEnd)) : (React__default.createElement("span", { className: iconEndStyle },
+                React__default.createElement(ChevronUpDownIcon, { className: "h-4 w-4" }))))));
+};
+
+export { TimePickerTrigger };

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

@@ -1,4 +1,6 @@
 export { TimePicker } from './TimePicker';
-export type { TimePickerProps, TimeFormat, TimePickerSize, TimePickerState, TimePickerThemeOverrides, ParsedTime, TimePeriod } from './TimePicker.types';
-export { default as timePickerTheme } from './TimePicker.theme';
-export { default as timePickerAnimations } from './TimePicker.animations';
+export { TimePickerTrigger } from './TimePickerTrigger';
+export { TimePickerContent } from './TimePickerContent';
+export type { TimePickerProps, TimePickerTriggerProps, TimeFormat, TimePickerSize, TimePickerState, TimePickerThemeOverrides, ParsedTime, TimePeriod } from './TimePicker.types';
+export { timePickerTheme } from './TimePicker.theme';
+export { timePickerAnimations } from './TimePicker.animations';

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

@@ -9,16 +9,22 @@ export declare const formsBaseTheme: {
     controlBaseStyle: string;
     sizes: {
         sm: {
-            base: string;
-            textarea: string;
+            text: string;
+            padding: string;
+            height: string;
+            textareaHeight: string;
         };
         md: {
-            base: string;
-            textarea: string;
+            text: string;
+            padding: string;
+            height: string;
+            textareaHeight: string;
         };
         lg: {
-            base: string;
-            textarea: string;
+            text: string;
+            padding: string;
+            height: string;
+            textareaHeight: string;
         };
     };
     states: {
@@ -46,4 +52,3 @@ export declare const formsBaseTheme: {
         };
     };
 };
-export default formsBaseTheme;

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

@@ -4,40 +4,66 @@
  * Individual component themes should extend these base styles
  */
 // Common form theme configuration
-var formsBaseTheme = {
+const formsBaseTheme = {
     // Common wrapper style
     wrapperStyle: "relative w-full",
     // Common input group style with focus, hover, and state variations
-    inputGroupBaseStyle: "relative flex rounded-[var(--form-rounded)] outline outline-1 outline-gray-300 focus-within:outline-2 focus-within:outline-[var(--color-primary-600)] focus-within:-outline-offset-1 focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-white transition-all",
+    inputGroupBaseStyle: "relative flex rounded-[var(--form-rounded)] outline outline-1 outline-[var(--color-border)] " +
+        "focus-within:outline-2 focus-within:outline-[var(--color-primary-600)] focus-within:-outline-offset-1 " +
+        "focus-within:ring-4 focus-within:ring-[var(--color-primary)]/10 bg-white transition-all " +
+        // Dark mode
+        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] " +
+        "dark:focus-within:outline-[var(--color-primary-500)] dark:focus-within:ring-[var(--color-primary-500)]/20",
     // Common base input/control style
-    controlBaseStyle: "w-full bg-transparent text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none",
-    // Size variants - consistent across all form components
+    controlBaseStyle: "w-full bg-transparent text-sm text-[var(--color-text-primary)] " +
+        "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
+        // Dark mode
+        "dark:text-[var(--color-text-primary)] dark:placeholder:text-[var(--color-neutral-500)]",
+    // Size variants - atomic design tokens for composability
+    // These tokens can be composed together or used individually for maximum flexibility
     sizes: {
         sm: {
-            base: "text-xs py-[var(--form-py-sm)] px-[var(--form-px-sm)] min-h-[var(--form-min-h-sm)]",
-            textarea: "text-xs py-[var(--form-py-sm)] px-[var(--form-px-sm)] min-h-[calc(var(--form-min-h-sm)*2)]",
+            text: "text-sm",
+            padding: "py-[var(--form-py-sm)] px-[var(--form-px-sm)]",
+            height: "h-[var(--form-min-h-sm)]",
+            textareaHeight: "min-h-[calc(var(--form-min-h-sm)*2)]",
         },
         md: {
-            base: "text-sm py-[var(--form-py-md)] px-[var(--form-px-md)] min-h-[var(--form-min-h-md)]",
-            textarea: "text-sm py-[var(--form-py-md)] px-[var(--form-px-md)] min-h-[calc(var(--form-min-h-md)*2)]",
+            text: "text-sm",
+            padding: "py-[var(--form-py-md)] px-[var(--form-px-md)]",
+            height: "h-[var(--form-min-h-md)]",
+            textareaHeight: "min-h-[calc(var(--form-min-h-md)*2)]",
         },
         lg: {
-            base: "text-base py-[var(--form-py-lg)] px-[var(--form-px-lg)] min-h-[var(--form-min-h-lg)]",
-            textarea: "text-base py-[var(--form-py-lg)] px-[var(--form-px-lg)] min-h-[calc(var(--form-min-h-lg)*2)]",
+            text: "text-base",
+            padding: "py-[var(--form-py-lg)] px-[var(--form-px-lg)]",
+            height: "h-[var(--form-min-h-lg)]",
+            textareaHeight: "min-h-[calc(var(--form-min-h-lg)*2)]",
         },
     },
-    // TODO:disabled bg-class is not working
     // Common state variants
     states: {
         default: "",
-        disabled: "cursor-not-allowed bg-[var(--color-neutral-200)] outline-[var(--color-neutral-200)] [&_input]:text-gray-500 [&_textarea]:text-gray-500 [&_select]:text-gray-500 [&_input]:cursor-not-allowed [&_textarea]:cursor-not-allowed [&_select]:cursor-not-allowed [&_input]:placeholder:text-gray-400 [&_textarea]:placeholder:text-gray-400 [&_select]:placeholder:text-gray-400 [&_button]:cursor-not-allowed",
-        invalid: "outline-[var(--color-danger-500)] bg-[var(--color-danger-50)] focus-within:outline-[var(--color-danger-500)]",
+        disabled: "cursor-not-allowed bg-[var(--color-background-disabled)] outline-[var(--color-border)] " +
+            "[&_input]:text-[var(--color-text-disabled)] [&_textarea]:text-[var(--color-text-disabled)] " +
+            "[&_select]:text-[var(--color-text-disabled)] [&_input]:cursor-not-allowed " +
+            "[&_textarea]:cursor-not-allowed [&_select]:cursor-not-allowed " +
+            "[&_input]:placeholder:text-[var(--color-text-placeholder)] " +
+            "[&_textarea]:placeholder:text-[var(--color-text-placeholder)] " +
+            "[&_select]:placeholder:text-[var(--color-text-placeholder)] [&_button]:cursor-not-allowed " +
+            // Dark mode
+            "dark:bg-[var(--color-neutral-800)] dark:outline-[var(--color-neutral-700)]",
+        invalid: "outline-[var(--color-danger)] bg-[var(--color-danger-50)] focus-within:outline-[var(--color-danger)] " +
+            // Dark mode
+            "dark:bg-[var(--color-danger-950)]/30 dark:outline-[var(--color-danger-500)]",
     },
     // Common focus state variants
     focusStates: {
-        default: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10",
+        default: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10 " +
+            "dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
         disabled: "outline-none",
-        invalid: "outline-2 outline-[var(--color-danger-500)] -outline-offset-1 ring-4 ring-[var(--color-danger-500)]/10",
+        invalid: "outline-2 outline-[var(--color-danger-500)] -outline-offset-1 ring-4 ring-[var(--color-danger-500)]/10 " +
+            "dark:ring-[var(--color-danger-500)]/20",
     },
     // Common hover state variants
     hoverStates: {
@@ -46,11 +72,14 @@ var formsBaseTheme = {
         invalid: "",
     },
     // Common helper text style with state variations
-    helperText: "text-xs text-gray-500 mt-1.5 [.state-disabled_&]:text-gray-400 [.state-invalid_&]:text-[var(--color-danger-500)]",
+    helperText: "text-xs text-gray-500 mt-1.5 [.state-disabled_&]:text-gray-400 [.state-invalid_&]:text-[var(--color-danger-500)] " +
+        "dark:text-[var(--color-neutral-400)] dark:[.state-invalid_&]:text-[var(--color-danger-400)]",
     // Common icon styles
     iconStyles: {
-        left: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-[var(--color-neutral-500)]",
-        right: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-[var(--color-neutral-500)]",
+        left: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-[var(--color-text-muted)] " +
+            "dark:text-[var(--color-neutral-500)]",
+        right: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] " +
+            "dark:text-[var(--color-neutral-500)]",
         padding: {
             left: "pl-10",
             right: "pr-10",
@@ -58,4 +87,4 @@ var formsBaseTheme = {
     },
 };
 
-export { formsBaseTheme as default, formsBaseTheme };
+export { formsBaseTheme };