@flikk/ui 1.0.0-beta.21 → 1.0.0-beta.22

package/dist/components/forms/ColorPicker/ColorPickerSavedColors.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { PlusIcon } from '@heroicons/react/20/solid';
+import { useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Button } from '../../core/Button/Button.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
+import { parseColor } from './colorUtils.js';
+
+/**
+ * Detect whether a saved color string is a CSS gradient
+ */
+const isGradientValue = (value) => value.includes('gradient(');
+const ColorPickerSavedColors = ({ label = 'Saved', maxColors = 16, className, ...props }) => {
+    const context = useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error('ColorPickerSavedColors must be used within a ColorPicker');
+    }
+    const { color, setColor, savedColors, addSavedColor, removeSavedColor, getOutputValue, mode, theme } = context;
+    const handleSaveColor = () => {
+        if (savedColors.length >= maxColors)
+            return;
+        // Save the output value — gradient CSS string in gradient mode, solid color in solid mode
+        addSavedColor(getOutputValue());
+    };
+    const handleSelectColor = (colorValue) => {
+        // Only apply solid colors to the color state; gradients are display-only
+        if (!isGradientValue(colorValue)) {
+            const parsed = parseColor(colorValue);
+            if (parsed) {
+                setColor(parsed);
+            }
+        }
+    };
+    const handleKeyDown = (e, colorValue) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleSelectColor(colorValue);
+        }
+    };
+    // Check if a saved color matches current color
+    const isSelected = (colorValue) => {
+        if (isGradientValue(colorValue))
+            return false;
+        const parsed = parseColor(colorValue);
+        if (!parsed)
+            return false;
+        return (Math.abs(parsed.h - color.h) < 1 &&
+            Math.abs(parsed.s - color.s) < 1 &&
+            Math.abs(parsed.l - color.l) < 1);
+    };
+    // Handle double-click to remove
+    const handleDoubleClick = (index) => {
+        removeSavedColor(index);
+    };
+    return (jsxs("div", { className: cn(className), ...props, children: [jsxs("div", { className: "flex items-center justify-between mb-2", children: [label !== false && (jsx("span", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: label })), savedColors.length < maxColors && (jsxs(Button, { variant: "ghost", size: "sm", color: "neutral", onClick: handleSaveColor, "aria-label": "Save current color", className: "!px-2 !py-1 !text-sm !font-medium", children: [jsx(PlusIcon, { className: "size-4" }), "Add"] }))] }), savedColors.length > 0 && (jsx("div", { className: "flex items-center gap-2 flex-wrap", children: savedColors.map((colorValue, index) => {
+                    const gradient = isGradientValue(colorValue);
+                    const selected = isSelected(colorValue);
+                    return (jsx("button", { type: "button", tabIndex: 0, onClick: () => handleSelectColor(colorValue), onDoubleClick: () => handleDoubleClick(index), onKeyDown: (e) => handleKeyDown(e, colorValue), className: cn('size-7 rounded-full cursor-pointer transition-all flex-shrink-0', 'hover:scale-110 focus:outline-none', selected
+                            ? 'ring-2 ring-[var(--color-primary)] ring-offset-2 ring-offset-[var(--color-surface)]'
+                            : 'ring-1 ring-black/10'), style: {
+                            // Use `background` so both solid colors and CSS gradients render
+                            background: gradient ? colorValue : undefined,
+                            backgroundColor: gradient ? undefined : colorValue,
+                        }, "aria-label": `Select saved color ${gradient ? 'gradient' : colorValue}`, title: `${colorValue} (double-click to remove)` }, `${colorValue}-${index}`));
+                }) }))] }));
+};
+ColorPickerSavedColors.displayName = 'ColorPickerSavedColors';
+
+export { ColorPickerSavedColors };

package/dist/components/forms/ColorPicker/ColorPickerSliders.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { ColorPickerSlidersProps } from './ColorPicker.types';
 /**
- * ColorPickerSliders - Compact Hue and Alpha sliders
- * Matches reference design with inline values
+ * ColorPickerSliders - Hue and Alpha sliders with gradient tracks
  */
 export declare const ColorPickerSliders: React.FC<ColorPickerSlidersProps>;

package/dist/components/forms/ColorPicker/ColorPickerSliders.js

@@ -1,14 +1,81 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useContext, useMemo } from 'react';
+import { useContext, useMemo, useRef, useState, useCallback, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { Slider } from '../Slider/Slider.js';
-import '../Slider/Slider.theme.js';
-import { ColorPickerContext } from './ColorPicker.js';
-import { formatRgb } from './colorUtils.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
+import { hslToRgb } from './colorUtils.js';
 
+const ColorSliderTrack = ({ min, max, step, value, onChange, thumbColor, ariaLabel, trackStyle, className, }) => {
+    const trackRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const percentage = ((value - min) / (max - min)) * 100;
+    const getValueFromPosition = useCallback((clientX) => {
+        if (!trackRef.current)
+            return value;
+        const rect = trackRef.current.getBoundingClientRect();
+        const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const rawValue = min + ratio * (max - min);
+        // Snap to step
+        const stepped = Math.round(rawValue / step) * step;
+        return Math.max(min, Math.min(max, stepped));
+    }, [min, max, step, value]);
+    const handlePointerDown = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(true);
+        const newValue = getValueFromPosition(e.clientX);
+        onChange(newValue);
+    }, [getValueFromPosition, onChange]);
+    const handlePointerMove = useCallback((e) => {
+        if (!isDragging)
+            return;
+        const newValue = getValueFromPosition(e.clientX);
+        onChange(newValue);
+    }, [isDragging, getValueFromPosition, onChange]);
+    const handlePointerUp = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+    useEffect(() => {
+        if (isDragging) {
+            window.addEventListener('pointermove', handlePointerMove);
+            window.addEventListener('pointerup', handlePointerUp);
+            return () => {
+                window.removeEventListener('pointermove', handlePointerMove);
+                window.removeEventListener('pointerup', handlePointerUp);
+            };
+        }
+    }, [isDragging, handlePointerMove, handlePointerUp]);
+    const handleKeyDown = useCallback((e) => {
+        let delta = 0;
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                delta = step;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                delta = -step;
+                break;
+            case 'Home':
+                onChange(min);
+                e.preventDefault();
+                return;
+            case 'End':
+                onChange(max);
+                e.preventDefault();
+                return;
+            default:
+                return;
+        }
+        e.preventDefault();
+        onChange(Math.max(min, Math.min(max, value + delta)));
+    }, [min, max, step, value, onChange]);
+    return (jsx("div", { ref: trackRef, onPointerDown: handlePointerDown, className: cn('relative h-3 rounded-full cursor-pointer touch-none select-none', className), style: trackStyle, children: jsx("div", { className: "absolute top-1/2 size-5 rounded-full border-2 border-white shadow-md ring-1 ring-black/10 cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-1", style: {
+                left: `${percentage}%`,
+                transform: 'translate(-50%, -50%)',
+                backgroundColor: thumbColor,
+            }, onKeyDown: handleKeyDown, role: "slider", "aria-label": ariaLabel, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-orientation": "horizontal", tabIndex: 0 }) }));
+};
 /**
- * ColorPickerSliders - Compact Hue and Alpha sliders
- * Matches reference design with inline values
+ * ColorPickerSliders - Hue and Alpha sliders with gradient tracks
  */
 const ColorPickerSliders = ({ showLabels = false, className, ...props }) => {
     const context = useContext(ColorPickerContext);
@@ -20,24 +87,18 @@ const ColorPickerSliders = ({ showLabels = false, className, ...props }) => {
     // Hue gradient (rainbow)
     const hueGradient = useMemo(() => 'linear-gradient(to right, ' +
         '#FF0000 0%, #FFFF00 17%, #00FF00 33%, #00FFFF 50%, #0000FF 67%, #FF00FF 83%, #FF0000 100%)', []);
-    // Alpha gradient with checkerboard
+    // Alpha gradient
     const alphaGradient = useMemo(() => {
-        return `linear-gradient(to right, ${formatRgb(h, s, l, 0)}, ${formatRgb(h, s, l, 1)})`;
+        const rgb = hslToRgb(h, s, l);
+        return `linear-gradient(to right, rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0), rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1))`;
     }, [h, s, l]);
-    const checkerboardBackground = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")';
-    return (jsxs("div", { className: cn(theme.sliderContainerStyle, 'space-y-2', className), ...props, children: [jsx(Slider, { min: 0, max: 360, step: 1, value: h, onChange: (value) => setHue(value), "aria-label": "Hue", showValue: false, theme: {
-                    trackStyle: `h-2 rounded-full`,
-                    rangeStyle: 'h-full rounded-full bg-transparent',
-                    thumbStyle: 'size-4 rounded-full border-2 border-white shadow-md',
-                }, style: {
-                    ['--slider-track-bg']: hueGradient,
-                }, className: "[&_.slider-track]:bg-[image:var(--slider-track-bg)]" }), showAlpha && (jsx(Slider, { min: 0, max: 1, step: 0.01, value: a, onChange: (value) => setAlpha(value), "aria-label": "Opacity", showValue: false, theme: {
-                    trackStyle: `h-2 rounded-full`,
-                    rangeStyle: 'h-full rounded-full bg-transparent',
-                    thumbStyle: 'size-4 rounded-full border-2 border-white shadow-md',
-                }, style: {
-                    ['--slider-track-bg']: `${checkerboardBackground}, ${alphaGradient}`,
-                }, className: "[&_.slider-track]:bg-[length:8px_8px,100%] [&_.slider-track]:bg-[image:var(--slider-track-bg)]" }))] }));
+    const checkerboardBg = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")';
+    const rgb = hslToRgb(h, s, l);
+    const thumbAlphaColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${a})`;
+    return (jsxs("div", { className: cn(theme.sliderContainerStyle, 'space-y-2', className), ...props, children: [jsx(ColorSliderTrack, { min: 0, max: 360, step: 1, value: h, onChange: setHue, thumbColor: `hsl(${h}, 100%, 50%)`, ariaLabel: "Hue", trackStyle: { backgroundImage: hueGradient } }), showAlpha && (jsx(ColorSliderTrack, { min: 0, max: 1, step: 0.01, value: a, onChange: setAlpha, thumbColor: thumbAlphaColor, ariaLabel: "Opacity", trackStyle: {
+                    backgroundImage: `${alphaGradient}, ${checkerboardBg}`,
+                    backgroundSize: '100% 100%, 8px 8px',
+                } }))] }));
 };
 ColorPickerSliders.displayName = 'ColorPickerSliders';
 

package/dist/components/forms/ColorPicker/ColorPickerSwatch.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 import type { ColorPickerSwatchProps } from './ColorPicker.types';
 /**
  * ColorPickerSwatch - Visual color preview with optional checkerboard background
- * Shows the current color with transparency support
+ * Shows the current color (solid or gradient) with transparency support
  */
 export declare const ColorPickerSwatch: React.FC<ColorPickerSwatchProps>;

package/dist/components/forms/ColorPicker/ColorPickerSwatch.js

@@ -1,35 +1,36 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { ColorPickerContext } from './ColorPicker.js';
-import { formatRgb, hslToRgb } from './colorUtils.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
+import { formatRgb } from './colorUtils.js';
 
 /**
  * ColorPickerSwatch - Visual color preview with optional checkerboard background
- * Shows the current color with transparency support
+ * Shows the current color (solid or gradient) with transparency support
  */
 const ColorPickerSwatch = ({ size = 'md', showCheckerboard = true, className, ...props }) => {
     const context = useContext(ColorPickerContext);
     if (!context) {
         throw new Error('ColorPickerSwatch must be used within a ColorPicker');
     }
-    const { color, theme } = context;
+    const { color, mode, getOutputValue, theme } = context;
     const { h, s, l, a } = color;
-    // Convert HSL to RGB for display
-    hslToRgb(h, s, l);
     const rgbaColor = formatRgb(h, s, l, a);
+    const isGradient = mode === 'gradient';
+    const outputValue = isGradient ? getOutputValue() : rgbaColor;
     // Size variants
     const sizeClasses = {
         sm: 'size-5',
         md: 'size-6',
         lg: 'size-8',
     };
-    return (jsxs("div", { className: cn(theme.swatchStyle, sizeClasses[size], className), role: "img", "aria-label": `Color: ${rgbaColor}`, ...props, children: [showCheckerboard && a < 1 && (jsx("div", { className: "absolute inset-0", style: {
+    return (jsxs("div", { className: cn(theme.swatchStyle, sizeClasses[size], className), role: "img", "aria-label": `Color: ${isGradient ? 'gradient' : rgbaColor}`, ...props, children: [showCheckerboard && !isGradient && a < 1 && (jsx("div", { className: "absolute inset-0", style: {
                     backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")',
                     backgroundSize: '8px 8px',
                     backgroundPosition: '0 0',
-                } })), jsx("div", { className: "absolute inset-0", style: {
-                    backgroundColor: rgbaColor,
+                } })), jsx("div", { className: "absolute inset-0 rounded-[inherit]", style: {
+                    background: isGradient ? outputValue : undefined,
+                    backgroundColor: isGradient ? undefined : rgbaColor,
                 } })] }));
 };
 ColorPickerSwatch.displayName = 'ColorPickerSwatch';

package/dist/components/forms/ColorPicker/ColorPickerTrigger.js

@@ -3,7 +3,7 @@ import { useContext, useRef, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Input } from '../Input/Input.js';
 import '../Input/Input.theme.js';
-import { ColorPickerContext } from './ColorPicker.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
 import { ColorPickerSwatch } from './ColorPickerSwatch.js';
 
 /**
@@ -17,7 +17,11 @@ const ColorPickerTrigger = ({ className, ...props }) => {
     if (!context) {
         throw new Error('ColorPickerTrigger must be used within a ColorPicker');
     }
-    const { isOpen, setIsOpen, disabled, state, getFormattedValue, triggerRef } = context;
+    const { isOpen, setIsOpen, disabled, state, mode, gradient, getFormattedValue, triggerRef } = context;
+    // Display value: for gradient mode, show stop colors comma-separated
+    const displayValue = mode === 'gradient'
+        ? [...gradient.stops].sort((a, b) => a.position - b.position).map(s => s.color).join(', ')
+        : getFormattedValue();
     // Update triggerRef with the wrapper element for positioning
     useEffect(() => {
         if (wrapperRef.current) {
@@ -31,7 +35,7 @@ const ColorPickerTrigger = ({ className, ...props }) => {
             setIsOpen(!isOpen);
         }
     };
-    return (jsx("div", { ref: wrapperRef, onClick: handleWrapperClick, className: "relative", children: jsx(Input, { ref: inputRef, value: getFormattedValue(), readOnly: true, disabled: disabled, state: state, contentStart: jsx(ColorPickerSwatch, { size: "sm" }), className: cn('cursor-pointer pointer-events-none', className), "aria-expanded": isOpen, "aria-haspopup": "dialog", ...props }) }));
+    return (jsx("div", { ref: wrapperRef, onClick: handleWrapperClick, className: "relative", children: jsx(Input, { ref: inputRef, value: displayValue, readOnly: true, disabled: disabled, state: state, contentStart: jsx(ColorPickerSwatch, { size: "sm" }), className: cn('cursor-pointer pointer-events-none', className), "aria-expanded": isOpen, "aria-haspopup": "dialog", ...props }) }));
 };
 ColorPickerTrigger.displayName = 'ColorPickerTrigger';
 

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

@@ -2,7 +2,8 @@
  * ColorPicker component exports
  * Compound component following Flikkui patterns
  */
-export { ColorPicker, useColorPicker, ColorPickerContext } from './ColorPicker';
+export { ColorPicker } from './ColorPicker';
+export { useColorPicker, ColorPickerContext } from './ColorPickerContext';
 export { ColorPickerTrigger } from './ColorPickerTrigger';
 export { ColorPickerBody } from './ColorPickerBody';
 export { ColorPicker2DCanvas } from './ColorPicker2DCanvas';
@@ -12,6 +13,11 @@ export { ColorPickerInput } from './ColorPickerInput';
 export { ColorPickerFormatSelector } from './ColorPickerFormatSelector';
 export { ColorPickerEyeDropper } from './ColorPickerEyeDropper';
 export { ColorPickerPresets } from './ColorPickerPresets';
-export type { ColorPickerProps, ColorPickerTriggerProps, ColorPickerBodyProps, ColorPickerSwatchProps, ColorPickerSlidersProps, ColorPickerInputProps, ColorPickerFormatSelectorProps, ColorPickerEyeDropperProps, ColorPickerPresetsProps, ColorPickerContextValue, ColorPickerTheme, ColorPickerThemeOverrides, ColorFormat, ColorPickerSize, ColorPickerState, } from './ColorPicker.types';
+export { ColorPickerSavedColors } from './ColorPickerSavedColors';
+export { ColorPickerHeader } from './ColorPickerHeader';
+export { ColorPickerGradient } from './ColorPickerGradient';
+export { ColorPickerImage } from './ColorPickerImage';
+export type { ColorPickerHeaderProps } from './ColorPickerHeader';
+export type { ColorPickerProps, ColorPickerTriggerProps, ColorPickerBodyProps, ColorPickerSwatchProps, ColorPickerSlidersProps, ColorPickerInputProps, ColorPickerFormatSelectorProps, ColorPickerEyeDropperProps, ColorPickerPresetsProps, ColorPickerSavedColorsProps, ColorPickerGradientProps, ColorPickerImageProps, ColorPickerContextValue, ColorPickerTheme, ColorPickerThemeOverrides, ColorFormat, ColorPickerSize, ColorPickerState, ColorPickerMode, GradientType, GradientStop, GradientState, } from './ColorPicker.types';
 export type { RGB, RGBA, HSL, HSLA, HSV, HSVA } from './colorUtils';
 export { hexToRgb, rgbToHex, rgbToHsl, hslToRgb, rgbToHsv, hsvToRgb, validateHex, validateRgb, parseColor, formatHex, formatRgb, formatHsl, } from './colorUtils';

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

@@ -8,13 +8,13 @@ const cronInputTheme = {
     // Outer wrapper
     baseStyle: "relative w-full flex flex-col gap-3",
     // Label
-    labelStyle: "text-base font-medium text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
+    labelStyle: "text-sm font-medium text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
     // Visual builder grid
     builderStyle: "grid grid-cols-5 gap-2",
     // Individual field group
     fieldGroupStyle: "flex flex-col gap-1",
     // Field label
-    fieldLabelStyle: "text-sm font-medium text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
+    fieldLabelStyle: "text-xs font-medium text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
     // Select dropdown
     fieldSelectStyle: "w-full rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
         "bg-white text-[var(--color-text-primary)] cursor-pointer transition-all " +
@@ -45,7 +45,7 @@ const cronInputTheme = {
         lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
     },
     // Mode toggle button
-    modeToggleStyle: "inline-flex items-center justify-center rounded-[var(--form-radius)] px-3 py-1.5 text-sm font-medium " +
+    modeToggleStyle: "inline-flex items-center justify-center rounded-[var(--form-radius)] px-3 py-1.5 text-xs font-medium " +
         "cursor-pointer transition-all outline outline-1 outline-[var(--color-border)] " +
         "text-[var(--color-text-secondary)] bg-white hover:bg-[var(--color-background-secondary)] " +
         "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-400)] " +
@@ -56,7 +56,7 @@ const cronInputTheme = {
         "dark:outline-[var(--color-primary-500)] dark:bg-[var(--color-primary-500)]/10 dark:text-[var(--color-primary-400)] " +
         "dark:hover:bg-[var(--color-primary-500)]/15",
     // Preset button
-    presetButtonStyle: "inline-flex items-center rounded-[var(--form-radius)] px-2.5 py-1 text-sm font-medium " +
+    presetButtonStyle: "inline-flex items-center rounded-[var(--form-radius)] px-2.5 py-1 text-xs font-medium " +
         "cursor-pointer transition-all outline outline-1 outline-[var(--color-border)] " +
         "text-[var(--color-text-secondary)] bg-white hover:bg-[var(--color-background-secondary)] " +
         "hover:text-[var(--color-text-primary)] " +
@@ -67,18 +67,18 @@ const cronInputTheme = {
         "hover:bg-[var(--color-primary-100)] " +
         "dark:outline-[var(--color-primary-500)] dark:bg-[var(--color-primary-500)]/10 dark:text-[var(--color-primary-400)]",
     // Human-readable description
-    descriptionStyle: "flex items-center gap-2 text-base text-[var(--color-text-muted)] " +
+    descriptionStyle: "flex items-center gap-2 text-sm text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-400)]",
     // Next runs container
     nextRunsStyle: "flex flex-col gap-1",
     // Individual next run item
-    nextRunItemStyle: "flex items-center gap-2 text-sm text-[var(--color-text-muted)] " +
+    nextRunItemStyle: "flex items-center gap-2 text-xs text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-400)]",
     // Section heading
-    sectionHeadingStyle: "text-sm font-medium text-[var(--color-text-secondary)] uppercase tracking-wide " +
+    sectionHeadingStyle: "text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide " +
         "dark:text-[var(--color-neutral-400)]",
     // Validation error
-    errorStyle: "text-sm text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
+    errorStyle: "text-xs text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
 };
 
 export { cronInputTheme };

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

@@ -35,7 +35,7 @@ const datePickerTheme = {
     presetsContainerStyle: "flex flex-col gap-1 p-3 border-b sm:border-b-0 sm:border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] sm:min-w-[180px] " +
         "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
     // Preset button - with dark mode support
-    presetButtonStyle: "w-full text-left px-3 py-2 text-base rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
+    presetButtonStyle: "w-full text-left px-3 py-2 text-sm rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
         "text-[var(--color-text-secondary)] hover:bg-white hover:text-[var(--color-text-primary)] " +
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
         "data-[active=true]:bg-white data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium " +

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

@@ -23,7 +23,7 @@ const dateRangePickerTheme = {
         "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
     presetsContainerStyle: "hidden sm:flex flex-col gap-1 p-3 sm:border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] sm:min-w-[180px] " +
         "dark:bg-[var(--color-neutral-800)] ",
-    presetButtonStyle: "w-full text-left px-3 py-2 text-base font-medium rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
+    presetButtonStyle: "w-full text-left px-3 py-2 text-sm font-medium rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
         "flex items-center justify-between gap-2 " +
         "text-[var(--color-text-secondary)] hover:bg-white hover:text-[var(--color-text-primary)] " +
         "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
@@ -33,14 +33,14 @@ const dateRangePickerTheme = {
         "dark:focus-visible:ring-offset-[var(--color-neutral-800)]",
     presetCheckmarkStyle: "size-4 text-[var(--color-primary)] shrink-0",
     mobilePresetsContainerStyle: "sm:hidden px-3 pt-3 pb-1",
-    mobilePresetButtonStyle: "whitespace-nowrap px-3 py-1.5 text-sm font-medium rounded-full transition-colors cursor-pointer shrink-0 " +
+    mobilePresetButtonStyle: "whitespace-nowrap px-3 py-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer shrink-0 " +
         "bg-[var(--color-background-secondary)] text-[var(--color-text-secondary)] " +
         "hover:bg-[var(--color-background-tertiary)] hover:text-[var(--color-text-primary)] " +
         "data-[active=true]:bg-[var(--color-primary-50)] data-[active=true]:text-[var(--color-primary)] " +
         "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-300)] " +
         "dark:hover:bg-[var(--color-neutral-700)] " +
         "dark:data-[active=true]:bg-[var(--color-primary-950)] dark:data-[active=true]:text-[var(--color-primary-300)]",
-    mobileRangeDisplayStyle: "sm:hidden text-sm text-center py-2 text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
+    mobileRangeDisplayStyle: "sm:hidden text-xs text-center py-2 text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
     helperTextStyle: formsBaseTheme.helperText,
     helperTextStates: {
         default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",

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

@@ -16,11 +16,11 @@ const fileUploadTheme = {
     // Upload icon
     iconStyle: "size-8 text-[var(--color-text-placeholder)]",
     // Main text
-    textStyle: "text-base font-medium text-[var(--color-text-primary)]",
+    textStyle: "text-sm font-medium text-[var(--color-text-primary)]",
     // Helper text
-    helperTextStyle: "text-base text-[var(--color-text-muted)] mt-1",
+    helperTextStyle: "text-sm text-[var(--color-text-muted)] mt-1",
     // Description below dropzone
-    descriptionStyle: "text-sm text-[var(--color-text-muted)] mt-1",
+    descriptionStyle: "text-xs text-[var(--color-text-muted)] mt-1",
     // Preview container
     previewContainerStyle: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-4",
     // Individual preview item
@@ -28,7 +28,7 @@ const fileUploadTheme = {
     // Preview image
     previewImageStyle: "w-full h-32 object-cover",
     // Preview file (non-image)
-    previewFileStyle: "flex items-center justify-center w-full h-32 p-3 text-base text-[var(--color-text-secondary)] text-center break-all",
+    previewFileStyle: "flex items-center justify-center w-full h-32 p-3 text-sm text-[var(--color-text-secondary)] text-center break-all",
     // Remove button
     removeButtonStyle: "absolute top-1 right-1  -translate-y-1 opacity-0 group-hover:opacity-100 transition-all duration-400 group-hover:-translate-y-0",
 };

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

@@ -2,8 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useEffect } from 'react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { DocumentIcon, TrashIcon, XMarkIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
-import { FileTypeIcon } from '../../core/FileTypeIcon/FileTypeIcon.js';
-import { fileTypes } from '../../core/FileTypeIcon/fileTypes.js';
+import { Icon } from '../../core/Icon/Icon.js';
+import { fileTypes } from '../../core/Icon/data/fileTypes.js';
 import { cn } from '../../../utils/cn.js';
 import { getFileExtension, formatFileSize } from '../../../utils/formatUtils.js';
 import { Popover } from '../../core/Popover/Popover.js';
@@ -103,7 +103,7 @@ const FileUploadProgress = React__default.forwardRef(({ items, onRemove, onRetry
             const clampedProgress = Math.min(100, Math.max(0, item.progress));
             const ext = getFileExtension(item.file.name);
             const hasFileTypeIcon = ext !== null && isKnownFileType(ext);
-            return (jsxs("div", { className: (_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.itemStyle) !== null && _a !== void 0 ? _a : t.itemStyle, children: [hasFileTypeIcon ? (jsx("span", { className: "shrink-0", children: jsx(FileTypeIcon, { type: ext, size: "lg" }) })) : (jsx("span", { className: cn((_b = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconContainerStyle) !== null && _b !== void 0 ? _b : t.iconContainerStyle, t.iconSize), children: jsx(DocumentIcon, { className: (_c = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconStyle) !== null && _c !== void 0 ? _c : t.iconStyle }) })), jsxs("div", { className: (_d = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileInfoStyle) !== null && _d !== void 0 ? _d : t.fileInfoStyle, children: [jsx("p", { className: (_e = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileNameStyle) !== null && _e !== void 0 ? _e : t.fileNameStyle, children: item.file.name }), showFileSize && (jsx("p", { className: (_f = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileSizeStyle) !== null && _f !== void 0 ? _f : t.fileSizeStyle, children: formatFileSize(item.file.size) })), item.status === "error" && item.error && (jsx("p", { className: (_g = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.errorTextStyle) !== null && _g !== void 0 ? _g : t.errorTextStyle, children: item.error }))] }), jsx(RadialProgress, { progress: clampedProgress, status: item.status, strokeWidth: t.radialStroke, trackColor: (_h = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialTrackColor) !== null && _h !== void 0 ? _h : t.radialTrackColor, progressColor: radialProgressColors[item.status], centerTextStyle: (_j = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialCenterTextStyle) !== null && _j !== void 0 ? _j : t.radialCenterTextStyle, statusIconColor: statusIconColors[item.status], sizeClass: t.radialSize, shouldReduceMotion: shouldReduceMotion, confirmRemove: confirmRemove, completionDelay: completionDelay, onRemove: onRemove ? () => onRemove(item.id) : undefined, onRetry: onRetry ? () => onRetry(item.id) : undefined })] }, item.id));
+            return (jsxs("div", { className: (_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.itemStyle) !== null && _a !== void 0 ? _a : t.itemStyle, children: [hasFileTypeIcon ? (jsx("span", { className: "shrink-0", children: jsx(Icon, { icon: ext, size: "lg" }) })) : (jsx("span", { className: cn((_b = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconContainerStyle) !== null && _b !== void 0 ? _b : t.iconContainerStyle, t.iconSize), children: jsx(DocumentIcon, { className: (_c = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconStyle) !== null && _c !== void 0 ? _c : t.iconStyle }) })), jsxs("div", { className: (_d = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileInfoStyle) !== null && _d !== void 0 ? _d : t.fileInfoStyle, children: [jsx("p", { className: (_e = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileNameStyle) !== null && _e !== void 0 ? _e : t.fileNameStyle, children: item.file.name }), showFileSize && (jsx("p", { className: (_f = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileSizeStyle) !== null && _f !== void 0 ? _f : t.fileSizeStyle, children: formatFileSize(item.file.size) })), item.status === "error" && item.error && (jsx("p", { className: (_g = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.errorTextStyle) !== null && _g !== void 0 ? _g : t.errorTextStyle, children: item.error }))] }), jsx(RadialProgress, { progress: clampedProgress, status: item.status, strokeWidth: t.radialStroke, trackColor: (_h = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialTrackColor) !== null && _h !== void 0 ? _h : t.radialTrackColor, progressColor: radialProgressColors[item.status], centerTextStyle: (_j = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialCenterTextStyle) !== null && _j !== void 0 ? _j : t.radialCenterTextStyle, statusIconColor: statusIconColors[item.status], sizeClass: t.radialSize, shouldReduceMotion: shouldReduceMotion, confirmRemove: confirmRemove, completionDelay: completionDelay, onRemove: onRemove ? () => onRemove(item.id) : undefined, onRetry: onRetry ? () => onRetry(item.id) : undefined })] }, item.id));
         }) }));
 });
 FileUploadProgress.displayName = "FileUploadProgress";

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

@@ -4,8 +4,8 @@ const fileUploadProgressTheme = {
     iconContainerStyle: "flex items-center justify-center rounded-lg shrink-0 border border-[var(--color-border)] bg-[var(--color-background-secondary)]",
     iconStyle: "shrink-0 size-5 text-[var(--color-text-muted)]",
     fileInfoStyle: "flex-1 min-w-0",
-    fileNameStyle: "text-base font-medium text-[var(--color-text-primary)] truncate",
-    fileSizeStyle: "text-sm text-[var(--color-text-muted)]",
+    fileNameStyle: "text-sm font-medium text-[var(--color-text-primary)] truncate",
+    fileSizeStyle: "text-xs text-[var(--color-text-muted)]",
     radialTrackColor: "var(--color-background-tertiary)",
     radialProgressColors: {
         uploading: "var(--color-primary)",

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

@@ -3,7 +3,7 @@
  */
 const formLabelTheme = {
     // Base styles for the label element
-    baseStyle: "block text-base/6 font-medium mb-2",
+    baseStyle: "block text-sm/6 font-medium mb-2",
     // State variants - using design tokens from global.scss
     stateStyles: {
         default: "text-[var(--color-text-primary)]",

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

@@ -67,7 +67,7 @@ const PasswordStrengthIndicator = ({ inline = false, passwordStrengthIndicator,
 // ============================================================================
 // Main Input Component
 // ============================================================================
-const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, onFocus, onBlur, value, currencyDecimalPlaces, darkMode = false, ...props }, ref) => {
+const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, onFocus, onBlur, value, currencyDecimalPlaces, darkMode = false, showTypeIcon = true, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const generatedId = React__default.useId();
@@ -82,8 +82,8 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
     const inputRef = useRef(null);
     const cursorPositionRef = useRef(null);
     // Default icons based on input type
-    const defaultPasswordIcon = type === "password" && !iconStart ? (jsx(LockClosedIcon, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
-    const defaultSearchIcon = type === "search" && !iconStart ? (jsx(MagnifyingGlassIcon, { className: cn("size-5", inputTheme.typeStyles.search.iconStyle) })) : null;
+    const defaultPasswordIcon = showTypeIcon && type === "password" && !iconStart ? (jsx(LockClosedIcon, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
+    const defaultSearchIcon = showTypeIcon && type === "search" && !iconStart ? (jsx(MagnifyingGlassIcon, { className: cn("size-5", inputTheme.typeStyles.search.iconStyle) })) : null;
     // Use the provided iconStart or the default icon based on input type
     const finalLeftIcon = iconStart || defaultPasswordIcon || defaultSearchIcon;
     // Derived state flags for internal use

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

@@ -88,7 +88,7 @@ const inputTheme = {
     // Password strength indicator with design tokens
     passwordStrengthIndicator: {
         containerStyle: "flex items-center gap-1",
-        labelStyle: "text-sm font-semibold mr-1",
+        labelStyle: "text-xs font-semibold mr-1",
         dotStyle: "size-1.5 rounded-full",
         dotActiveStyle: "bg-current",
         dotInactiveStyle: "bg-[var(--color-border)] dark:bg-[var(--color-neutral-700)]",

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

@@ -61,6 +61,8 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     passwordStrengthIndicator?: PasswordStrengthIndicator;
     /** Number of decimal places for currency inputs (default: 2). Only applies when type="currency" */
     currencyDecimalPlaces?: number;
+    /** Whether to show the automatic type-based icon (lock for password, magnifier for search). Default: true */
+    showTypeIcon?: boolean;
     /**
      * Force dark mode styling for the component. Use when placing the component
      * on a dark background while the page is in light mode.

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

@@ -5,7 +5,7 @@
 const inputCounterTheme = {
     baseStyle: "flex items-center gap-3 transition-all p-1 border border-[var(--color-border)] rounded-[var(--form-radius)] w-fit",
     buttonWrapperStyle: "flex-shrink-0",
-    numberStyle: "min-w-fit text-center text-base font-medium text-[var(--color-text-primary)] tabular-nums select-none",
+    numberStyle: "min-w-fit text-center text-sm font-medium text-[var(--color-text-primary)] tabular-nums select-none",
 };
 
 export { inputCounterTheme };

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

@@ -10,7 +10,7 @@ const inputOTPTheme = {
     // OTP input container
     containerStyle: 'flex items-center gap-3',
     // Individual input field styles with design tokens
-    inputStyle: 'text-center text-xl text-[var(--color-text-primary)] h-full !p-0',
+    inputStyle: 'text-center text-lg text-[var(--color-text-primary)] h-full !p-0',
     // Input group wrapper for grouped inputs (overrides default Input styling)
     inputGroupStyle: 'w-10 min-w-10 h-10 min-h-10 sm:w-12 sm:min-w-12 sm:h-12 sm:min-h-12',
     // Separator between input groups

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

@@ -37,13 +37,13 @@ const mentionTheme = {
     suggestionAvatarStyle: "size-7 rounded-full object-cover shrink-0 " +
         "bg-[var(--color-background-tertiary)] dark:bg-[var(--color-neutral-700)]",
     // Avatar fallback (initials circle)
-    suggestionAvatarFallbackStyle: "size-7 rounded-full shrink-0 flex items-center justify-center text-sm font-medium " +
+    suggestionAvatarFallbackStyle: "size-7 rounded-full shrink-0 flex items-center justify-center text-xs font-medium " +
         "bg-[var(--color-primary-100)] text-[var(--color-primary-700)] " +
         "dark:bg-[var(--color-primary-900)] dark:text-[var(--color-primary-300)]",
     // Suggestion label text
-    suggestionLabelStyle: "text-base font-medium truncate",
+    suggestionLabelStyle: "text-sm font-medium truncate",
     // Suggestion description text
-    suggestionDescriptionStyle: "text-sm text-[var(--color-text-muted)] truncate " +
+    suggestionDescriptionStyle: "text-xs text-[var(--color-text-muted)] truncate " +
         "dark:text-[var(--color-neutral-500)]",
     // Empty state
     emptyMessageStyle: formsBaseTheme.dropdownStyles.emptyMessage,

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

@@ -29,7 +29,7 @@ const radioTheme = {
         sm: "size-2.5 mt-0.25",
         md: "size-3",
     },
-    descriptionStyle: "text-base text-[var(--color-text-secondary)]/80 mt-0.5",
+    descriptionStyle: "text-sm text-[var(--color-text-secondary)]/80 mt-0",
     sizes: {
         sm: "size-5 mt-0.5",
         md: "size-6",
@@ -37,8 +37,8 @@ const radioTheme = {
     // Group styles
     groupStyle: "flex flex-col gap-1.5",
     groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
-    groupDescriptionStyle: "text-base text-[var(--color-text-secondary)]/80 -mt-0.5 mb-1",
-    groupErrorStyle: "text-base text-[var(--color-danger)] mt-1.5",
+    groupDescriptionStyle: "text-sm text-[var(--color-text-secondary)]/80 -mt-0.5 mb-1",
+    groupErrorStyle: "text-sm text-[var(--color-danger)] mt-1.5",
     groupItemsStyle: "flex flex-col gap-3",
 };
 

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

@@ -32,7 +32,7 @@ const richTextEditorTheme = {
     // Dropdown styling (font size, color picker)
     dropdownStyle: "fixed z-[1000] min-w-[120px] py-1 bg-white/90 backdrop-blur-md rounded-[var(--form-radius)] shadow-xl ring-1 ring-[var(--color-border)] focus:outline-none",
     // Dropdown item styling
-    dropdownItemStyle: "block w-full px-3 py-2 text-left text-base text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed",
+    dropdownItemStyle: "block w-full px-3 py-2 text-left text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed",
     // Separator between toolbar sections
     separatorStyle: "w-px h-6 bg-[var(--color-border)] mx-1",
     // Color picker grid layout

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

@@ -60,7 +60,7 @@ const selectTheme = {
     iconPadding: formsBaseTheme.iconStyles.padding,
     // Multi-select chip styles
     chipContainerStyle: "flex flex-nowrap gap-1 items-center min-w-0 overflow-hidden -ml-2",
-    chipOverflowStyle: "inline-flex items-center shrink-0 whitespace-nowrap px-1.5 py-0.5 text-sm font-medium " +
+    chipOverflowStyle: "inline-flex items-center shrink-0 whitespace-nowrap px-1.5 py-0.5 text-xs font-medium " +
         "text-[var(--color-text-muted)]",
 };