flikkui 0.1.0-beta.4 → 0.1.0-beta.6

package/dist/components/feedback/Notification/Notification.theme.js

@@ -0,0 +1,49 @@
+import ForwardRef from '../../../node_modules/@heroicons/react/24/solid/esm/XCircleIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/solid/esm/ExclamationTriangleIcon.js';
+import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/solid/esm/CheckCircleIcon.js';
+import ForwardRef$3 from '../../../node_modules/@heroicons/react/24/solid/esm/InformationCircleIcon.js';
+import ForwardRef$4 from '../../../node_modules/@heroicons/react/24/solid/esm/BellIcon.js';
+
+var notificationTheme = {
+    // Base container styles - layout and spacing only
+    baseStyle: 'relative flex items-start gap-4 rounded-xl border-t border-white px-6 py-4 shadow-md shadow-[var(--color-neutral-500)]/10 bg-white/80 backdrop-blur-sm ring-[1px] ring-offset-[0.5px] text-sm',
+    // Title typography only (color comes from variant)
+    titleStyle: 'font-semibold',
+    // Description text styles - stays neutral across all variants
+    descriptionStyle: 'text-text-secondary/90 mt-1',
+    // Comprehensive variant definitions
+    variants: {
+        default: {
+            containerStyle: 'bg-[var(--color-neutral-50)] ring-border',
+            iconColor: 'text-[var(--color-primary)]',
+            titleColor: 'text-text-primary',
+            defaultIcon: ForwardRef$4,
+        },
+        info: {
+            containerStyle: 'bg-[var(--color-primary-50)] ring-[var(--color-primary)]/10',
+            iconColor: 'text-[var(--color-primary)]',
+            titleColor: 'text-[var(--color-primary-700)]',
+            defaultIcon: ForwardRef$3,
+        },
+        success: {
+            containerStyle: 'bg-[var(--color-success-50)] ring-[var(--color-success)]/20',
+            iconColor: 'text-[var(--color-success)]',
+            titleColor: 'text-[var(--color-success-700)]',
+            defaultIcon: ForwardRef$2,
+        },
+        warning: {
+            containerStyle: 'bg-[var(--color-warning-50)] ring-[var(--color-warning)]/10',
+            iconColor: 'text-[var(--color-warning)]',
+            titleColor: 'text-[var(--color-warning-700)]',
+            defaultIcon: ForwardRef$1,
+        },
+        error: {
+            containerStyle: 'bg-[var(--color-danger-50)] ring-[var(--color-danger)]/10',
+            iconColor: 'text-[var(--color-danger)]',
+            titleColor: 'text-[var(--color-danger-700)]',
+            defaultIcon: ForwardRef,
+        },
+    },
+};
+
+export { notificationTheme };

package/dist/components/feedback/Spinner/Spinner.theme.js

@@ -12,12 +12,12 @@ var spinnerTheme = {
     },
     // Color variants
     colors: {
-        primary: "border-primary-600 border-t-transparent",
-        secondary: "border-neutral-400 border-t-transparent",
+        primary: "border-[var(--color-primary-600)] border-t-transparent",
+        secondary: "border-[var(--color-neutral-400)] border-t-transparent",
         success: "border-green-500 border-t-transparent",
         warning: "border-yellow-500 border-t-transparent",
         error: "border-red-500 border-t-transparent",
-        neutral: "border-neutral-500 border-t-transparent",
+        neutral: "border-[var(--color-neutral-500)] border-t-transparent",
     },
     // Animation class with drop shadow
     animation: "animate-[spin_1s_linear_infinite] rounded-full",

package/dist/components/feedback/Toast/Toast.animations.js

@@ -0,0 +1,58 @@
+var toastAnimations = {
+    // Initial state when toast appears
+    initial: {
+        opacity: 0,
+        y: 50,
+        scale: 0.3,
+    },
+    // Exit animation when toast is dismissed
+    exit: {
+        opacity: 0,
+        scale: 0.5,
+        transition: { duration: 0.2 },
+    },
+    // Spring transition configuration
+    transition: {
+        type: "spring",
+        stiffness: 500,
+        damping: 30,
+        mass: 1,
+    },
+};
+// Stacking animation utilities
+var getToastStackingAnimation = function (index, totalToasts, isExpanded) {
+    if (totalToasts === 1)
+        return {};
+    var maxVisible = 3; // Show max 3 toasts in stack
+    var stackIndex = Math.min(index, maxVisible - 1);
+    if (isExpanded) {
+        // Expanded state - show all toasts with sufficient gap to prevent overlap
+        // Use a larger gap to accommodate variable heights
+        return {
+            y: index * 100, // 100px gap between toasts when expanded (increased from 80px)
+            scale: 1,
+            zIndex: totalToasts - index,
+            opacity: 1,
+        };
+    }
+    else {
+        // Stacked state - compress toasts
+        if (index >= maxVisible) {
+            // Show toasts beyond max visible but more compressed
+            return {
+                y: (maxVisible - 1) * 16,
+                scale: 1 - (maxVisible - 1) * 0.08,
+                zIndex: 0,
+                opacity: 0.3,
+            };
+        }
+        return {
+            y: stackIndex * 16, // 16px offset for each toast (increased from 12px)
+            scale: 1 - stackIndex * 0.08,
+            zIndex: totalToasts - index,
+            opacity: 1 - stackIndex * 0.25,
+        };
+    }
+};
+
+export { getToastStackingAnimation, toastAnimations };

package/dist/components/feedback/Toast/Toast.js

@@ -0,0 +1,67 @@
+import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { toastTheme } from './Toast.theme.js';
+import { toastAnimations, getToastStackingAnimation } from './Toast.animations.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/solid/esm/ArrowPathIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/solid/esm/XCircleIcon.js';
+import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/solid/esm/ExclamationTriangleIcon.js';
+import ForwardRef$3 from '../../../node_modules/@heroicons/react/24/solid/esm/CheckCircleIcon.js';
+import ForwardRef$4 from '../../../node_modules/@heroicons/react/24/solid/esm/InformationCircleIcon.js';
+import ForwardRef$5 from '../../../node_modules/@heroicons/react/24/solid/esm/XMarkIcon.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var variantIcons = {
+    info: ForwardRef$4,
+    success: ForwardRef$3,
+    warning: ForwardRef$2,
+    error: ForwardRef$1,
+    loading: ForwardRef,
+};
+var Toast = React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f;
+    var toast = _a.toast, className = _a.className; _a.theme; var onDismiss = _a.onDismiss, _h = _a.index, index = _h === void 0 ? 0 : _h, _j = _a.isExpanded, isExpanded = _j === void 0 ? false : _j, _k = _a.totalToasts, totalToasts = _k === void 0 ? 1 : _k, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave; __rest(_a, ["toast", "className", "theme", "onDismiss", "index", "isExpanded", "totalToasts", "onMouseEnter", "onMouseLeave"]);
+    var id = toast.id, _l = toast.variant, variant = _l === void 0 ? 'info' : _l, title = toast.title, description = toast.description, icon = toast.icon, action = toast.action, _m = toast.duration, duration = _m === void 0 ? 5000 : _m, _o = toast.dismissible, dismissible = _o === void 0 ? true : _o;
+    var IconComponent = variantIcons[variant];
+    // Auto-dismiss after duration
+    useEffect(function () {
+        if (duration > 0 && dismissible) {
+            var timer_1 = setTimeout(function () {
+                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
+            }, duration);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [duration, dismissible, id, onDismiss]);
+    var handleDismiss = function () {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(id);
+    };
+    var handleActionClick = function () {
+        action === null || action === void 0 ? void 0 : action.onClick();
+        if (dismissible) {
+            handleDismiss();
+        }
+    };
+    var stackingStyle = getToastStackingAnimation(index, totalToasts, isExpanded);
+    return (React__default.createElement(motion.div, { ref: ref, layout: true, initial: toastAnimations.initial, animate: {
+            opacity: (_b = stackingStyle.opacity) !== null && _b !== void 0 ? _b : 1,
+            y: (_c = stackingStyle.y) !== null && _c !== void 0 ? _c : 0,
+            scale: (_d = stackingStyle.scale) !== null && _d !== void 0 ? _d : 1,
+            zIndex: (_e = stackingStyle.zIndex) !== null && _e !== void 0 ? _e : 1
+        }, exit: toastAnimations.exit, transition: toastAnimations.transition, className: cn(toastTheme.baseStyle, toastTheme.variants[variant], 'pointer-events-auto', index > 0 && !isExpanded && 'absolute top-0 left-0', className), style: {
+            zIndex: (_f = stackingStyle.zIndex) !== null && _f !== void 0 ? _f : 1,
+            position: index > 0 ? 'absolute' : 'relative',
+            top: index > 0 ? 0 : undefined,
+            left: index > 0 ? 0 : undefined,
+        }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: "alert", "aria-live": "polite" },
+        React__default.createElement("div", { className: toastTheme.iconStyle }, icon || React__default.createElement(IconComponent, { className: cn("w-5 h-5", variant === 'loading' && "animate-spin") })),
+        React__default.createElement("div", { className: "flex-1 min-w-0" },
+            title && (React__default.createElement("div", { className: toastTheme.titleStyle }, title)),
+            description && (React__default.createElement("div", { className: toastTheme.descriptionStyle }, description)),
+            action && (React__default.createElement("div", { className: "mt-2" },
+                React__default.createElement("button", { type: "button", className: toastTheme.actionStyle, onClick: handleActionClick }, action.label)))),
+        dismissible && (React__default.createElement("button", { type: "button", className: toastTheme.closeButtonStyle, onClick: handleDismiss, "aria-label": "Dismiss notification" },
+            React__default.createElement(ForwardRef$5, { className: "w-4 h-4" })))));
+});
+Toast.displayName = 'Toast';
+
+export { Toast };

package/dist/components/feedback/Toast/Toast.theme.js

@@ -0,0 +1,18 @@
+var toastTheme = {
+    baseStyle: 'flex items-start gap-3 rounded-2xl border-[2px] px-4 py-3 shadow-2xl backdrop-blur-sm min-w-80 max-w-md ring-[0.5px] ring-white',
+    variants: {
+        info: 'bg-sky-200/50 border-sky-200/40 text-sky-800 shadow-sky-600/20',
+        success: 'bg-[var(--color-success-100)]/50 border-[var(--color-success-200)]/40 text-[var(--color-success-800)] shadow-[var(--color-success-600)]/20',
+        warning: 'bg-[var(--color-warning-100)]/50 border-[var(--color-warning-200)]/40 text-[var(--color-warning-800)] shadow-[var(--color-warning-600)]/20',
+        error: 'bg-[var(--color-danger-100)]/50 border-[var(--color-danger-200)]/40 text-[var(--color-danger-800)] shadow-[var(--color-danger-600)]/20',
+        loading: 'bg-gray-100/50 border-[var(--color-neutral-200)]/40 text-text-primary',
+    },
+    iconStyle: 'flex-shrink-0 size-5 mt-0.5',
+    titleStyle: 'font-semibold text-sm',
+    descriptionStyle: 'text-sm mt-0.5 opacity-60',
+    actionStyle: 'text-xs font-medium px-2 py-1 rounded border bg-white/80 hover:bg-white transition-colors cursor-pointer',
+    closeButtonStyle: 'absolute top-2 right-2 flex-shrink-0 w-4 h-4 opacity-70 hover:opacity-100 transition-opacity cursor-pointer',
+    containerStyle: 'fixed z-50 pointer-events-none',
+};
+
+export { toastTheme };

package/dist/components/feedback/Toast/ToastProvider.js

@@ -0,0 +1,73 @@
+import { __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useState, useCallback, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { Toast } from './Toast.js';
+import { toastTheme } from './Toast.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+
+var ToastContext = createContext(undefined);
+var positionStyles = {
+    'top-left': 'top-4 left-4',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2',
+    'top-right': 'top-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-4 right-4',
+};
+var ToastProvider = function (_a) {
+    var children = _a.children, _b = _a.position, position = _b === void 0 ? 'top-right' : _b, _c = _a.maxToasts, maxToasts = _c === void 0 ? 5 : _c, _d = _a.defaultDuration, defaultDuration = _d === void 0 ? 5000 : _d;
+    var _e = useState([]), toasts = _e[0], setToasts = _e[1];
+    var _f = useState(false), isHovered = _f[0], setIsHovered = _f[1];
+    var hoverTimeoutRef = React__default.useRef(null);
+    var addToast = useCallback(function (toastData) {
+        var _a;
+        var id = Math.random().toString(36).substring(2, 9);
+        var newToast = __assign(__assign({}, toastData), { id: id, duration: (_a = toastData.duration) !== null && _a !== void 0 ? _a : defaultDuration });
+        setToasts(function (current) {
+            var updated = __spreadArray([newToast], current, true);
+            // Limit the number of toasts
+            return updated.slice(0, maxToasts);
+        });
+        return id;
+    }, [maxToasts, defaultDuration]);
+    var removeToast = useCallback(function (id) {
+        setToasts(function (current) { return current.filter(function (toast) { return toast.id !== id; }); });
+    }, []);
+    var removeAllToasts = useCallback(function () {
+        setToasts([]);
+    }, []);
+    var handleMouseEnter = useCallback(function () {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        setIsHovered(true);
+    }, []);
+    var handleMouseLeave = useCallback(function () {
+        // Add a small delay before collapsing to prevent flickering
+        hoverTimeoutRef.current = setTimeout(function () {
+            setIsHovered(false);
+        }, 150);
+    }, []);
+    var contextValue = {
+        toasts: toasts,
+        addToast: addToast,
+        removeToast: removeToast,
+        removeAllToasts: removeAllToasts,
+    };
+    return (React__default.createElement(ToastContext.Provider, { value: contextValue },
+        children,
+        typeof window !== 'undefined' && createPortal(React__default.createElement("div", { className: cn(toastTheme.containerStyle, positionStyles[position]), "aria-live": "polite", "aria-label": "Notifications" },
+            React__default.createElement("div", { className: "relative", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+                React__default.createElement(AnimatePresence, { mode: "popLayout" }, toasts.map(function (toast, index) { return (React__default.createElement(Toast, { key: toast.id, toast: toast, onDismiss: removeToast, index: index, isExpanded: isHovered, totalToasts: toasts.length, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave })); })))), document.body)));
+};
+var useToastContext = function () {
+    var context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToastContext must be used within a ToastProvider');
+    }
+    return context;
+};
+
+export { ToastProvider, useToastContext };

package/dist/components/feedback/Toast/useToast.js

@@ -0,0 +1,91 @@
+import { useCallback } from 'react';
+import { useToastContext } from './ToastProvider.js';
+
+var useToast = function () {
+    var _a = useToastContext(), addToast = _a.addToast, removeToast = _a.removeToast, removeAllToasts = _a.removeAllToasts;
+    var toast = useCallback(function (title, options) {
+        return addToast({
+            title: title,
+            variant: (options === null || options === void 0 ? void 0 : options.variant) || 'info',
+            description: options === null || options === void 0 ? void 0 : options.description,
+            duration: options === null || options === void 0 ? void 0 : options.duration,
+            dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        });
+    }, [addToast]);
+    var success = useCallback(function (title, options) {
+        return addToast({
+            title: title,
+            variant: 'success',
+            description: options === null || options === void 0 ? void 0 : options.description,
+            duration: options === null || options === void 0 ? void 0 : options.duration,
+            dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        });
+    }, [addToast]);
+    var error = useCallback(function (title, options) {
+        return addToast({
+            title: title,
+            variant: 'error',
+            description: options === null || options === void 0 ? void 0 : options.description,
+            duration: options === null || options === void 0 ? void 0 : options.duration,
+            dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        });
+    }, [addToast]);
+    var warning = useCallback(function (title, options) {
+        return addToast({
+            title: title,
+            variant: 'warning',
+            description: options === null || options === void 0 ? void 0 : options.description,
+            duration: options === null || options === void 0 ? void 0 : options.duration,
+            dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        });
+    }, [addToast]);
+    var info = useCallback(function (title, options) {
+        return addToast({
+            title: title,
+            variant: 'info',
+            description: options === null || options === void 0 ? void 0 : options.description,
+            duration: options === null || options === void 0 ? void 0 : options.duration,
+            dismissible: options === null || options === void 0 ? void 0 : options.dismissible,
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        });
+    }, [addToast]);
+    var loading = useCallback(function (title, options) {
+        var _a, _b;
+        return addToast({
+            title: title,
+            variant: 'loading',
+            description: options === null || options === void 0 ? void 0 : options.description,
+            duration: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : 0, // Loading toasts don't auto-dismiss by default
+            dismissible: (_b = options === null || options === void 0 ? void 0 : options.dismissible) !== null && _b !== void 0 ? _b : false, // Loading toasts are not dismissible by default
+            action: options === null || options === void 0 ? void 0 : options.action,
+            icon: options === null || options === void 0 ? void 0 : options.icon,
+        });
+    }, [addToast]);
+    var dismiss = useCallback(function (id) {
+        removeToast(id);
+    }, [removeToast]);
+    var dismissAll = useCallback(function () {
+        removeAllToasts();
+    }, [removeAllToasts]);
+    return {
+        toast: toast,
+        success: success,
+        error: error,
+        warning: warning,
+        info: info,
+        loading: loading,
+        dismiss: dismiss,
+        dismissAll: dismissAll,
+    };
+};
+
+export { useToast };

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

@@ -4,7 +4,7 @@
 var checkboxTheme = {
     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",
+    inputStyle: "col-start-1 row-start-1 appearance-none rounded-md border-2 border-gray-300 bg-white checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)] 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-[var(--color-primary-600)] checked:outline-2 checked:outline-[var(--color-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",

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

@@ -8,10 +8,10 @@ var formLabelTheme = {
     stateStyles: {
         default: "text-text-primary",
         disabled: "text-text-disabled",
-        invalid: "text-danger-base",
+        invalid: "text-[var(--color-danger)]",
     },
     // Required indicator style
-    requiredIndicatorStyle: "text-danger-base ml-1",
+    requiredIndicatorStyle: "text-[var(--color-danger)] ml-1",
 };
 
 export { formLabelTheme };

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

@@ -61,19 +61,19 @@ var inputTheme = {
         strengthStyles: {
             weak: {
                 label: "Weak",
-                color: "text-danger-base",
+                color: "text-[var(--color-danger)]",
             },
             moderate: {
                 label: "Moderate",
-                color: "text-warning-base",
+                color: "text-[var(--color-warning)]",
             },
             strong: {
                 label: "Strong",
-                color: "text-success-base",
+                color: "text-[var(--color-success)]",
             },
             "very-strong": {
                 label: "Very Strong",
-                color: "text-success-base",
+                color: "text-[var(--color-success)]",
             },
         },
     },

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

@@ -4,8 +4,8 @@
 var radioTheme = {
     baseStyle: "relative flex items-start gap-3",
     inputContainerStyle: "relative flex-shrink-0 flex items-center justify-center",
-    inputStyle: "appearance-none rounded-full border-2 border-gray-300 bg-white checked:border-primary-base checked:bg-white disabled:border-gray-300 disabled: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",
-    dotStyle: "absolute pointer-events-none rounded-full bg-primary-base opacity-0 transition-all duration-400",
+    inputStyle: "appearance-none rounded-full border-2 border-gray-300 bg-white checked:border-[var(--color-primary)] checked:bg-white disabled:border-gray-300 disabled:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 transition-all duration-400 data-[state=disabled]:border-gray-300 data-[state=disabled]:bg-gray-100",
+    dotStyle: "absolute pointer-events-none rounded-full bg-[var(--color-primary)] opacity-0 transition-all duration-400",
     descriptionStyle: "text-sm text-text-secondary mt-1",
     sizes: {
         sm: "size-5 mt-0.25",

package/dist/components/forms/Select/Select.js

@@ -1,5 +1,5 @@
 import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { createContext, useEffect, useState, useRef, useContext } from 'react';
+import React__default, { createContext, useState, useRef, useEffect, useContext } from 'react';
 import { selectTheme } from './Select.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { Input } from '../Input/Input.js';

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

@@ -26,15 +26,15 @@ var selectTheme = {
     // Hover state variants - inherited from common form theme
     hoverStates: formsBaseTheme.hoverStates,
     // Options container style
-    optionsContainerStyle: "absolute z-10 mt-1.5 w-full min-w-[14rem] max-h-60 overflow-auto rounded-[var(--form-rounded)] bg-white py-0 text-sm shadow-xl ring-1 ring-slate-200 focus:outline-none scrollbar-thin scrollbar-thumb-neutral-300 scrollbar-track-neutral-100",
+    optionsContainerStyle: "absolute z-10 mt-1.5 w-full min-w-[14rem] max-h-60 overflow-auto rounded-[var(--form-rounded)] bg-white py-0 text-sm shadow-xl ring-1 ring-slate-200 focus:outline-none scrollbar-thin scrollbar-thumb-[var(--color-neutral-300)] scrollbar-track-[var(--color-neutral-100)]",
     // Search input style
     searchInputStyle: "group",
     // Individual option style
-    optionStyle: "relative cursor-pointer select-none py-2 px-3 text-neutral-900 hover:text-primary-base hover:bg-primary-50/50",
+    optionStyle: "relative cursor-pointer select-none py-2 px-3 text-[var(--color-neutral-900)] hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)]/50",
     // Selected option style
-    selectedOptionStyle: "font-medium text-primary-base",
+    selectedOptionStyle: "font-medium text-[var(--color-primary)]",
     // Disabled option style
-    disabledOptionStyle: "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-neutral-900",
+    disabledOptionStyle: "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--color-neutral-900)]",
     // Helper text style - inherited from common form theme
     helperTextStyle: formsBaseTheme.helperText,
     // Helper text state variants
@@ -47,7 +47,7 @@ var selectTheme = {
     // Right icon style - inherited from common form theme
     rightIconStyle: formsBaseTheme.iconStyles.right,
     // Check icon style for selected options
-    checkIconStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-primary-600",
+    checkIconStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-primary-600)]",
     // Icon padding styles - inherited from common form theme
     iconPadding: formsBaseTheme.iconStyles.padding,
 };

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

@@ -8,7 +8,7 @@ var switchTheme = {
         container: "items-start",
         track: {
             base: "w-10 h-6 rounded-full transition-colors cursor-pointer shadow-inner",
-            checked: "bg-primary-600",
+            checked: "bg-[var(--color-primary-600)]",
             unchecked: "bg-slate-200",
             disabled: "opacity-50 cursor-not-allowed"
         },

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

@@ -10,20 +10,20 @@ var timePickerTheme = {
     // Input field styles - following Input component pattern
     inputStyle: [
         // Base styles
-        "w-full border border-neutral-300 rounded-[var(--form-rounded)]",
-        "bg-white text-neutral-900 placeholder:text-neutral-500",
+        "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-primary-500/20 focus:border-primary-500",
+        "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-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed",
-        "disabled:border-neutral-200"
+        "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-neutral-200",
+        "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",
@@ -32,7 +32,7 @@ var timePickerTheme = {
     ].join(" "),
     // Time selector container
     selectorContainerStyle: [
-        "flex divide-x divide-neutral-200",
+        "flex divide-x divide-[var(--color-neutral-200)]",
         "h-48 overflow-hidden"
     ].join(" "),
     // Individual selector column
@@ -43,31 +43,31 @@ var timePickerTheme = {
     // Time selector items
     selectorItemStyle: [
         "flex items-center justify-center py-2 px-3",
-        "text-sm font-medium text-neutral-700",
-        "hover:bg-neutral-50 cursor-pointer transition-colors",
-        "border-b border-neutral-100 last:border-b-0",
+        "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-primary-50 text-primary-700 font-semibold",
-        "border-l-2 border-l-primary-500"
+        "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-neutral-300 cursor-not-allowed",
+        "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-neutral-400 hover:text-neutral-600",
-        "hover:bg-neutral-100 transition-colors"
+        "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-neutral-400 pointer-events-none"
+        "text-[var(--color-neutral-400)] pointer-events-none"
     ].join(" "),
     // Size variants
     sizes: {
@@ -90,12 +90,12 @@ var timePickerTheme = {
     // State variants
     states: {
         default: {
-            inputStyle: "border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20",
-            dropdownStyle: "border-neutral-200"
+            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-neutral-50 border-neutral-200 text-neutral-400",
+                "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"

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

@@ -8,7 +8,7 @@ var 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-primary-600 focus-within:-outline-offset-1 focus-within:ring-4 focus-within:ring-primary-base/10 bg-white transition-all",
+    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",
     // 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
@@ -30,14 +30,14 @@ var formsBaseTheme = {
     // Common state variants
     states: {
         default: "",
-        disabled: "cursor-not-allowed bg-neutral-200 outline-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-danger-500 bg-danger-50 focus-within:outline-danger-500",
+        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)]",
     },
     // Common focus state variants
     focusStates: {
-        default: "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-primary-base/10",
+        default: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10",
         disabled: "outline-none",
-        invalid: "outline-2 outline-danger-500 -outline-offset-1 ring-4 ring-danger-500/10",
+        invalid: "outline-2 outline-[var(--color-danger-500)] -outline-offset-1 ring-4 ring-[var(--color-danger-500)]/10",
     },
     // Common hover state variants
     hoverStates: {
@@ -46,11 +46,11 @@ 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-danger-500",
+    helperText: "text-xs text-gray-500 mt-1.5 [.state-disabled_&]:text-gray-400 [.state-invalid_&]:text-[var(--color-danger-500)]",
     // Common icon styles
     iconStyles: {
-        left: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-neutral-500",
-        right: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-neutral-500",
+        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)]",
         padding: {
             left: "pl-10",
             right: "pr-10",