@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,14 +1,16 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
+import { Check } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
-import { ColorPickerContext } from './ColorPicker.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
 import { parseColor } from './colorUtils.js';
 
 /**
  * ColorPickerPresets - Grid of preset color swatches
  * Allows quick selection from predefined colors
  */
-const ColorPickerPresets = ({ colors: customColors, className, ...props }) => {
+const ColorPickerPresets = ({ colors: customColors, label = 'Preset colors', className, ...props }) => {
     const context = useContext(ColorPickerContext);
     if (!context) {
         throw new Error('ColorPickerPresets must be used within a ColorPicker');
@@ -41,15 +43,15 @@ const ColorPickerPresets = ({ colors: customColors, className, ...props }) => {
             Math.abs(parsed.s - color.s) < 1 &&
             Math.abs(parsed.l - color.l) < 1);
     };
-    return (jsx("div", { className: cn(theme.presetGridStyle, className), ...props, children: colors.map((presetColor, index) => {
-            const selected = isSelected(presetColor);
-            return (jsxs("button", { type: "button", role: "button", tabIndex: 0, onClick: () => handlePresetClick(presetColor), onKeyDown: (e) => handleKeyDown(e, presetColor), "data-selected": selected ? '' : undefined, className: cn(theme.presetSwatchStyle), "aria-label": `Select color ${presetColor}`, title: presetColor, children: [jsx("div", { className: "absolute inset-0 rounded", style: {
-                            backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")',
-                            backgroundSize: '8px 8px',
-                        } }), jsx("div", { className: "absolute inset-0 rounded", style: {
-                            backgroundColor: presetColor,
-                        } })] }, `${presetColor}-${index}`));
-        }) }));
+    return (jsxs("div", { className: cn(className), ...props, children: [label !== false && (jsx("div", { className: theme.sectionLabelStyle, children: label })), jsx("div", { className: cn(theme.presetGridStyle), children: colors.map((presetColor, index) => {
+                    const selected = isSelected(presetColor);
+                    return (jsxs("button", { type: "button", role: "button", tabIndex: 0, onClick: () => handlePresetClick(presetColor), onKeyDown: (e) => handleKeyDown(e, presetColor), "data-selected": selected ? '' : undefined, className: cn(theme.presetSwatchStyle), "aria-label": `Select color ${presetColor}`, title: presetColor, children: [jsx("div", { className: "absolute inset-0 rounded", style: {
+                                    backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")',
+                                    backgroundSize: '8px 8px',
+                                } }), jsx("div", { className: "absolute inset-0 rounded", style: {
+                                    backgroundColor: presetColor,
+                                } }), selected && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Check, { className: "size-3.5 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" }) }))] }, `${presetColor}-${index}`));
+                }) })] }));
 };
 ColorPickerPresets.displayName = 'ColorPickerPresets';
 

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ColorPickerSavedColorsProps } from './ColorPicker.types';
+export declare const ColorPickerSavedColors: React.FC<ColorPickerSavedColorsProps>;

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

@@ -0,0 +1,70 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Plus } from '@phosphor-icons/react';
+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: "mono", onClick: handleSaveColor, "aria-label": "Save current color", className: "!px-2 !py-1 !text-sm !font-medium", children: [jsx(Plus, { 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,82 @@
+"use client";
 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 +88,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,37 @@
+"use client";
 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

@@ -1,9 +1,10 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 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 +18,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, describedById, dialogId } = 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 +36,21 @@ 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 }) }));
+    // Keyboard access: the readOnly input is the focusable trigger, but clicks are
+    // handled by the wrapper — so wire Enter/Space/ArrowDown to open and Escape to close
+    // (preventDefault stops Space from scrolling / Enter from submitting a form).
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+            e.preventDefault();
+            setIsOpen(true);
+        }
+        else if (e.key === "Escape" && isOpen) {
+            setIsOpen(false);
+        }
+    };
+    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), role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-controls": dialogId, "aria-describedby": describedById, onKeyDown: handleKeyDown, ...props }) }));
 };
 ColorPickerTrigger.displayName = 'ColorPickerTrigger';
 

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

@@ -2,9 +2,10 @@
  * ColorPicker component exports
  * Compound component following Flikkui patterns
  */
-export { ColorPicker, useColorPicker, ColorPickerContext } from './ColorPicker';
+export { ColorPicker } from './ColorPicker';
+export { useColorPicker } from './ColorPickerContext';
 export { ColorPickerTrigger } from './ColorPickerTrigger';
-export { ColorPickerContent } from './ColorPickerContent';
+export { ColorPickerBody } from './ColorPickerBody';
 export { ColorPicker2DCanvas } from './ColorPicker2DCanvas';
 export { ColorPickerSwatch } from './ColorPickerSwatch';
 export { ColorPickerSliders } from './ColorPickerSliders';
@@ -12,6 +13,11 @@ export { ColorPickerInput } from './ColorPickerInput';
 export { ColorPickerFormatSelector } from './ColorPickerFormatSelector';
 export { ColorPickerEyeDropper } from './ColorPickerEyeDropper';
 export { ColorPickerPresets } from './ColorPickerPresets';
-export type { ColorPickerProps, ColorPickerTriggerProps, ColorPickerContentProps, 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';