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

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

@@ -1,38 +1,37 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { createContext, useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import React__default, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { colorPickerTheme } from './ColorPicker.theme.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
 import { ColorPicker2DCanvas } from './ColorPicker2DCanvas.js';
 import { ColorPickerBody } from './ColorPickerBody.js';
 import { ColorPickerEyeDropper } from './ColorPickerEyeDropper.js';
 import { ColorPickerFormatSelector } from './ColorPickerFormatSelector.js';
+import { ColorPickerGradient } from './ColorPickerGradient.js';
+import { ColorPickerHeader } from './ColorPickerHeader.js';
+import { ColorPickerImage } from './ColorPickerImage.js';
 import { ColorPickerInput } from './ColorPickerInput.js';
 import { ColorPickerPresets } from './ColorPickerPresets.js';
+import { ColorPickerSavedColors } from './ColorPickerSavedColors.js';
 import { ColorPickerSliders } from './ColorPickerSliders.js';
 import { ColorPickerSwatch } from './ColorPickerSwatch.js';
 import { ColorPickerTrigger } from './ColorPickerTrigger.js';
 import { parseColor, formatHex, formatRgb, formatHsl } from './colorUtils.js';
 
-/**
- * ColorPicker Context
- */
-const ColorPickerContext = createContext(undefined);
-/**
- * Hook to access ColorPicker context
- */
-const useColorPicker = () => {
-    const context = React__default.useContext(ColorPickerContext);
-    if (!context) {
-        throw new Error('useColorPicker must be used within a ColorPicker component');
-    }
-    return context;
+const DEFAULT_GRADIENT = {
+    type: 'linear',
+    angle: 90,
+    stops: [
+        { id: 'stop-1', color: '#000000', position: 0 },
+        { id: 'stop-2', color: '#FFFFFF', position: 100 },
+    ],
 };
 /**
  * ColorPicker Root Component
  * Follows Flikkui compound component pattern (similar to Accordion, Tabs, Popover)
  */
-const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000000', onChange, format: initialFormat = 'hex', showAlpha = true, showEyeDropper = true, presetColors, size = 'md', state = 'default', disabled = false, label, helperText, required = false, theme, className, children, ...props }, ref) => {
+const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000000', onChange, format: initialFormat = 'hex', showAlpha = true, showEyeDropper = true, presetColors, savedColors: savedColorsProp, onSavedColorsChange, defaultMode = 'solid', mode: modeProp, onModeChange, gradientValue: gradientProp, onGradientChange, size = 'md', state = 'default', disabled = false, label, helperText, required = false, theme, className, children, ...props }, ref) => {
     // Parse initial color value
     const initialColor = useMemo(() => {
         const parsed = parseColor(value || defaultValue);
@@ -41,8 +40,75 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
     const [color, setColor] = useState(initialColor);
     const [format, setFormat] = useState(initialFormat);
     const [isOpen, setIsOpen] = useState(false);
+    // Mode state (controlled/uncontrolled)
+    const [internalMode, setInternalMode] = useState(defaultMode);
+    const mode = modeProp !== null && modeProp !== void 0 ? modeProp : internalMode;
+    const setMode = useCallback((m) => {
+        if (onModeChange) {
+            onModeChange(m);
+        }
+        else {
+            setInternalMode(m);
+        }
+    }, [onModeChange]);
+    // Gradient state (controlled/uncontrolled)
+    const [internalGradient, setInternalGradient] = useState(gradientProp || DEFAULT_GRADIENT);
+    const gradient = gradientProp !== null && gradientProp !== void 0 ? gradientProp : internalGradient;
+    const setGradient = useCallback((g) => {
+        if (onGradientChange) {
+            onGradientChange(g);
+        }
+        else {
+            setInternalGradient(g);
+        }
+    }, [onGradientChange]);
+    const updateGradientStop = useCallback((id, updates) => {
+        const newGradient = {
+            ...gradient,
+            stops: gradient.stops.map(s => s.id === id ? { ...s, ...updates } : s),
+        };
+        setGradient(newGradient);
+    }, [gradient, setGradient]);
+    const addGradientStop = useCallback((position) => {
+        const newStop = {
+            id: `stop-${Date.now()}`,
+            color: formatHex(color.h, color.s, color.l),
+            position: Math.round(position),
+        };
+        setGradient({
+            ...gradient,
+            stops: [...gradient.stops, newStop].sort((a, b) => a.position - b.position),
+        });
+    }, [gradient, setGradient, color]);
+    const removeGradientStop = useCallback((id) => {
+        if (gradient.stops.length <= 2)
+            return;
+        setGradient({
+            ...gradient,
+            stops: gradient.stops.filter(s => s.id !== id),
+        });
+    }, [gradient, setGradient]);
     // Refs for positioning (like Dropdown)
     const triggerRef = useRef(null);
+    // Saved colors (controlled/uncontrolled)
+    const [internalSavedColors, setInternalSavedColors] = useState([]);
+    const savedColors = savedColorsProp !== null && savedColorsProp !== void 0 ? savedColorsProp : internalSavedColors;
+    const setSavedColors = useCallback((colors) => {
+        if (onSavedColorsChange) {
+            onSavedColorsChange(colors);
+        }
+        else {
+            setInternalSavedColors(colors);
+        }
+    }, [onSavedColorsChange]);
+    const addSavedColor = useCallback((colorValue) => {
+        if (!savedColors.includes(colorValue)) {
+            setSavedColors([...savedColors, colorValue]);
+        }
+    }, [savedColors, setSavedColors]);
+    const removeSavedColor = useCallback((index) => {
+        setSavedColors(savedColors.filter((_, i) => i !== index));
+    }, [savedColors, setSavedColors]);
     // Update color when controlled value changes
     useEffect(() => {
         if (value !== undefined) {
@@ -87,15 +153,27 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
                 return getHexValue();
         }
     }, [format, getHexValue, getRgbValue, getHslValue]);
+    // Get output value (accounts for mode)
+    const getOutputValue = useCallback(() => {
+        if (mode === 'gradient') {
+            const sortedStops = [...gradient.stops].sort((a, b) => a.position - b.position);
+            const stopStrings = sortedStops.map(s => `${s.color} ${s.position}%`).join(', ');
+            if (gradient.type === 'linear') {
+                return `linear-gradient(${gradient.angle}deg, ${stopStrings})`;
+            }
+            return `radial-gradient(circle, ${stopStrings})`;
+        }
+        return getFormattedValue();
+    }, [mode, gradient, getFormattedValue]);
     // Notify parent of color changes
-    const prevFormattedRef = useRef(undefined);
+    const prevOutputRef = useRef(undefined);
     useEffect(() => {
-        const formatted = getFormattedValue();
-        if (onChange && !disabled && formatted !== prevFormattedRef.current) {
-            prevFormattedRef.current = formatted;
-            onChange(formatted);
+        const output = getOutputValue();
+        if (onChange && !disabled && output !== prevOutputRef.current) {
+            prevOutputRef.current = output;
+            onChange(output);
         }
-    }, [color, format, onChange, disabled, getFormattedValue]);
+    }, [color, format, mode, gradient, onChange, disabled, getOutputValue]);
     // Merge theme
     const mergedTheme = useMemo(() => ({
         ...colorPickerTheme,
@@ -111,6 +189,13 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         setAlpha,
         format,
         setFormat,
+        mode,
+        setMode,
+        gradient,
+        setGradient,
+        updateGradientStop,
+        addGradientStop,
+        removeGradientStop,
         isOpen,
         setIsOpen,
         triggerRef,
@@ -127,7 +212,11 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         getRgbValue,
         getHslValue,
         getFormattedValue,
+        getOutputValue,
         onChange,
+        savedColors,
+        addSavedColor,
+        removeSavedColor,
     }), [
         color,
         setColor,
@@ -137,6 +226,13 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         setAlpha,
         format,
         setFormat,
+        mode,
+        setMode,
+        gradient,
+        setGradient,
+        updateGradientStop,
+        addGradientStop,
+        removeGradientStop,
         isOpen,
         setIsOpen,
         showAlpha,
@@ -150,7 +246,11 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         getRgbValue,
         getHslValue,
         getFormattedValue,
+        getOutputValue,
         onChange,
+        savedColors,
+        addSavedColor,
+        removeSavedColor,
     ]);
     return (jsx(ColorPickerContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [label && (jsx(FormLabel, { htmlFor: "color-picker", required: required, state: state, children: label })), children, helperText && (jsx("div", { className: cn('mt-1.5 text-sm text-[var(--color-text-secondary)]', state === 'invalid' && 'text-[var(--color-danger)]'), children: helperText }))] }) }));
 });
@@ -161,6 +261,7 @@ ColorPickerRoot.displayName = 'ColorPicker';
  */
 const ColorPicker = Object.assign(ColorPickerRoot, {
     Trigger: ColorPickerTrigger,
+    Header: ColorPickerHeader,
     Body: ColorPickerBody,
     Canvas: ColorPicker2DCanvas,
     Swatch: ColorPickerSwatch,
@@ -169,6 +270,9 @@ const ColorPicker = Object.assign(ColorPickerRoot, {
     FormatSelector: ColorPickerFormatSelector,
     EyeDropper: ColorPickerEyeDropper,
     Presets: ColorPickerPresets,
+    SavedColors: ColorPickerSavedColors,
+    Gradient: ColorPickerGradient,
+    ImagePicker: ColorPickerImage,
 });
 
-export { ColorPicker, ColorPickerContext, useColorPicker };
+export { ColorPicker };

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

@@ -6,15 +6,18 @@ const colorPickerTheme = {
     baseStyle: 'relative inline-block w-full',
     triggerStyle: 'cursor-pointer',
     swatchStyle: 'relative size-5 flex-shrink-0 rounded border border-[var(--color-border)] overflow-hidden',
-    // Content matches Dropdown menu style
-    contentStyle: 'min-w-[min(280px,calc(100vw-2rem))] max-w-[320px] rounded-xl border border-[var(--color-border)] bg-white shadow-real-xl p-3 focus:outline-none',
-    sliderContainerStyle: 'space-y-2',
-    sliderLabelStyle: 'flex items-center justify-between text-sm font-medium text-[var(--color-text-secondary)]',
+    contentStyle: 'min-w-[min(300px,calc(100vw-2rem))] max-w-[340px] rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] shadow-real-xl p-4 space-y-3 focus:outline-none',
+    sliderContainerStyle: 'space-y-2.5',
+    sliderLabelStyle: 'flex items-center justify-between text-xs font-medium text-[var(--color-text-secondary)]',
     inputContainerStyle: 'flex items-center gap-2',
     formatSelectorStyle: 'flex-shrink-0',
-    presetGridStyle: 'mt-3 grid grid-cols-6 sm:grid-cols-8 gap-1.5',
-    presetSwatchStyle: 'relative size-7 cursor-pointer rounded border-2 border-transparent transition-all hover:border-[var(--color-primary)] hover:scale-110 focus:border-[var(--color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-opacity-20 data-[selected]:border-[var(--color-primary)] data-[selected]:ring-2 data-[selected]:ring-[var(--color-primary)] data-[selected]:ring-opacity-20',
+    presetGridStyle: 'grid grid-cols-8 gap-2',
+    presetSwatchStyle: 'relative size-6 cursor-pointer rounded-md border-2 border-transparent transition-all hover:border-[var(--color-primary)] hover:scale-110 focus:border-[var(--color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-opacity-20 data-[selected]:border-[var(--color-primary)] data-[selected]:ring-2 data-[selected]:ring-[var(--color-primary)] data-[selected]:ring-opacity-20',
     eyedropperButtonStyle: 'flex-shrink-0',
+    sectionLabelStyle: 'text-xs font-medium text-[var(--color-text-muted)] mb-2',
+    savedColorsGridStyle: 'grid grid-cols-8 gap-2',
+    savedColorsAddButtonStyle: 'size-6 rounded-md border-2 border-dashed border-[var(--color-border)] flex items-center justify-center hover:border-[var(--color-primary)] cursor-pointer transition-colors text-[var(--color-text-muted)] hover:text-[var(--color-primary)]',
+    colorPreviewStyle: 'relative size-8 flex-shrink-0 rounded-lg border border-[var(--color-border)] overflow-hidden',
 };
 
 export { colorPickerTheme };

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

@@ -3,6 +3,24 @@ import type { HSLA } from './colorUtils';
 export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
 export type ColorPickerSize = 'sm' | 'md' | 'lg';
 export type ColorPickerState = 'default' | 'invalid' | 'disabled';
+export type ColorPickerMode = 'solid' | 'gradient' | 'image';
+export type GradientType = 'linear' | 'radial';
+/**
+ * A single gradient color stop
+ */
+export interface GradientStop {
+    id: string;
+    color: string;
+    position: number;
+}
+/**
+ * Full gradient state
+ */
+export interface GradientState {
+    type: GradientType;
+    angle: number;
+    stops: GradientStop[];
+}
 /**
  * Root ColorPicker component props
  */
@@ -39,6 +57,14 @@ export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
      * Array of preset colors to display
      */
     presetColors?: string[];
+    /**
+     * Controlled saved colors array
+     */
+    savedColors?: string[];
+    /**
+     * Callback when saved colors change
+     */
+    onSavedColorsChange?: (colors: string[]) => void;
     /**
      * Size of the color picker
      * @default 'md'
@@ -67,6 +93,27 @@ export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
      * @default false
      */
     required?: boolean;
+    /**
+     * Default mode
+     * @default 'solid'
+     */
+    defaultMode?: ColorPickerMode;
+    /**
+     * Controlled mode
+     */
+    mode?: ColorPickerMode;
+    /**
+     * Callback when mode changes
+     */
+    onModeChange?: (mode: ColorPickerMode) => void;
+    /**
+     * Controlled gradient value
+     */
+    gradientValue?: GradientState;
+    /**
+     * Callback when gradient changes
+     */
+    onGradientChange?: (gradient: GradientState) => void;
     /**
      * Theme overrides
      */
@@ -92,6 +139,13 @@ export interface ColorPickerContextValue {
     setAlpha: (a: number) => void;
     format: ColorFormat;
     setFormat: (format: ColorFormat) => void;
+    mode: ColorPickerMode;
+    setMode: (mode: ColorPickerMode) => void;
+    gradient: GradientState;
+    setGradient: (gradient: GradientState) => void;
+    updateGradientStop: (id: string, updates: Partial<GradientStop>) => void;
+    addGradientStop: (position: number) => void;
+    removeGradientStop: (id: string) => void;
     isOpen: boolean;
     setIsOpen: (open: boolean) => void;
     triggerRef: React.RefObject<HTMLElement>;
@@ -108,7 +162,11 @@ export interface ColorPickerContextValue {
     getRgbValue: () => string;
     getHslValue: () => string;
     getFormattedValue: () => string;
+    getOutputValue: () => string;
     onChange?: (value: string) => void;
+    savedColors: string[];
+    addSavedColor: (color: string) => void;
+    removeSavedColor: (index: number) => void;
 }
 /**
  * ColorPicker theme overrides
@@ -125,6 +183,10 @@ export interface ColorPickerThemeOverrides {
     presetGridStyle?: string;
     presetSwatchStyle?: string;
     eyedropperButtonStyle?: string;
+    sectionLabelStyle?: string;
+    savedColorsGridStyle?: string;
+    savedColorsAddButtonStyle?: string;
+    colorPreviewStyle?: string;
 }
 /**
  * ColorPicker theme
@@ -141,6 +203,10 @@ export interface ColorPickerTheme {
     presetGridStyle: string;
     presetSwatchStyle: string;
     eyedropperButtonStyle: string;
+    sectionLabelStyle: string;
+    savedColorsGridStyle: string;
+    savedColorsAddButtonStyle: string;
+    colorPreviewStyle: string;
 }
 /**
  * ColorPickerTrigger props
@@ -215,5 +281,38 @@ export interface ColorPickerPresetsProps extends React.HTMLAttributes<HTMLDivEle
      * Custom preset colors (overrides context presetColors)
      */
     colors?: string[];
+    /**
+     * Section label text. Set to false to hide.
+     * @default "Preset colors"
+     */
+    label?: string | false;
+    className?: string;
+}
+/**
+ * ColorPickerSavedColors props
+ */
+export interface ColorPickerSavedColorsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Section label text. Set to false to hide.
+     * @default "Saved colors"
+     */
+    label?: string | false;
+    /**
+     * Maximum number of saved colors
+     * @default 16
+     */
+    maxColors?: number;
+    className?: string;
+}
+/**
+ * ColorPickerGradient props
+ */
+export interface ColorPickerGradientProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+/**
+ * ColorPickerImage props
+ */
+export interface ColorPickerImageProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
 }

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

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { useContext, useRef, useState, useCallback, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { ColorPickerContext } from './ColorPicker.js';
-import { hslToRgb, rgbToHsv } from './colorUtils.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
+import { hslToRgb, formatRgb, rgbToHsv } from './colorUtils.js';
 
 /**
  * ColorPicker2DCanvas - Main 2D draggable color picker
@@ -72,19 +72,56 @@ const ColorPicker2DCanvas = ({ className }) => {
             };
         }
     }, [isDragging, handlePointerMove, handlePointerUp]);
+    // Keyboard navigation handler
+    const handleKeyDown = useCallback((e) => {
+        const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+        if (!arrowKeys.includes(e.key))
+            return;
+        e.preventDefault();
+        const step = e.shiftKey ? 10 : 1;
+        let newS = hsv.s;
+        let newV = hsv.v;
+        switch (e.key) {
+            case 'ArrowRight':
+                newS = Math.min(100, newS + step);
+                break;
+            case 'ArrowLeft':
+                newS = Math.max(0, newS - step);
+                break;
+            case 'ArrowUp':
+                newV = Math.min(100, newV + step);
+                break;
+            case 'ArrowDown':
+                newV = Math.max(0, newV - step);
+                break;
+        }
+        // Convert HSV back to HSL (same conversion as updateColorFromPosition)
+        color.h;
+        const l = ((2 - newS / 100) * newV) / 2;
+        const sl = l !== 0 && l !== 100
+            ? ((newV - l) / Math.min(l, 100 - l)) * 100
+            : 0;
+        setColor({
+            ...color,
+            s: Math.round(sl),
+            l: Math.round(l),
+        });
+    }, [color, setColor, hsv.s, hsv.v]);
     // Background gradient based on current hue
     const hueColor = `hsl(${color.h}, 100%, 50%)`;
-    return (jsx("div", { ref: canvasRef, onPointerDown: handlePointerDown, className: cn('relative w-full h-48 cursor-crosshair rounded-lg overflow-hidden touch-none select-none', className), style: {
+    // Current picked color for the inner circle
+    const rgbaColor = formatRgb(color.h, color.s, color.l, color.a);
+    return (jsx("div", { ref: canvasRef, onPointerDown: handlePointerDown, onKeyDown: handleKeyDown, className: cn('relative w-full h-[200px] cursor-crosshair rounded-xl ring-1 ring-inset ring-black/5 overflow-hidden touch-none select-none', className), style: {
             background: `
           linear-gradient(to top, #000, transparent),
           linear-gradient(to right, #fff, ${hueColor})
         `,
-        }, role: "slider", "aria-label": "Color saturation and brightness", "aria-valuemin": 0, "aria-valuemax": 100, tabIndex: 0, children: jsx("div", { className: "absolute w-4 h-4 border-2 border-white rounded-full shadow-lg pointer-events-none", style: {
+        }, role: "slider", "aria-label": "Color saturation and brightness", "aria-valuemin": 0, "aria-valuemax": 100, tabIndex: 0, children: jsx("div", { className: "absolute w-5 h-5 border-2 border-white rounded-full pointer-events-none", style: {
                 left: `${positionX * 100}%`,
                 top: `${positionY * 100}%`,
                 transform: 'translate(-50%, -50%)',
-                boxShadow: '0 0 0 1px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2)',
-            } }) }));
+                boxShadow: '0 0 0 1.5px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.15)',
+            }, children: jsx("div", { className: "absolute inset-1 rounded-full", style: { backgroundColor: rgbaColor } }) }) }));
 };
 ColorPicker2DCanvas.displayName = 'ColorPicker2DCanvas';
 

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

@@ -6,7 +6,7 @@ import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { cn } from '../../../utils/cn.js';
 import { useClickOutside } from '../../../hooks/useClickOutside.js';
 import { contentVariants } from './ColorPicker.animations.js';
-import { ColorPickerContext } from './ColorPicker.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 
 /**

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ColorPickerContextValue } from './ColorPicker.types';
+export declare const ColorPickerContext: React.Context<ColorPickerContextValue | undefined>;
+export declare const useColorPicker: () => ColorPickerContextValue;

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

@@ -0,0 +1,12 @@
+import React__default, { createContext } from 'react';
+
+const ColorPickerContext = createContext(undefined);
+const useColorPicker = () => {
+    const context = React__default.useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error('useColorPicker must be used within a ColorPicker component');
+    }
+    return context;
+};
+
+export { ColorPickerContext, useColorPicker };

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

@@ -3,7 +3,7 @@ import { EyeDropperIcon } 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 './ColorPicker.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
 import { parseColor } from './colorUtils.js';
 
 // Check if browser supports EyeDropper API

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

@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Select } from '../Select/Select.js';
 import '../Select/Select.theme.js';
-import { ColorPickerContext } from './ColorPicker.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
 
 /**
  * ColorPickerFormatSelector - Dropdown to select color format (HEX/RGB/HSL)

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerGradientProps } from './ColorPicker.types';
+/**
+ * ColorPickerGradient - Gradient editor with canvas, sliders, stop bar, type toggle, angle control.
+ * The 2D canvas and hue slider pick the color for the currently selected gradient stop.
+ */
+export declare const ColorPickerGradient: React.FC<ColorPickerGradientProps>;