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

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

@@ -1,51 +1,132 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { createContext, useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import React__default, { useRef, useMemo, useState, useCallback, 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 { ColorPickerContent } from './ColorPickerContent.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';
 
+const DEFAULT_GRADIENT = {
+    type: 'linear',
+    angle: 90,
+    stops: [
+        { id: 'stop-1', color: '#000000', position: 0 },
+        { id: 'stop-2', color: '#FFFFFF', position: 100 },
+    ],
+};
 /**
- * ColorPicker Context
- */
-const ColorPickerContext = createContext(undefined);
-/**
- * Hook to access ColorPicker context
+ * In gradient/image mode the controlled `value` is a CSS gradient string, not a solid
+ * color — don't feed it to `parseColor` (it would emit an "Unsupported color format" warning
+ * and return null). Skip parsing for gradient values.
  */
-const useColorPicker = () => {
-    const context = React__default.useContext(ColorPickerContext);
-    if (!context) {
-        throw new Error('useColorPicker must be used within a ColorPicker component');
-    }
-    return context;
-};
+const isGradientString = (v) => /^(?:repeating-)?(?:linear|radial|conic)-gradient\(/.test(v.trim());
 /**
  * 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, errorMessage, required = false, theme, className, id, children, ...props }, ref) => {
+    const generatedId = React__default.useId();
+    const componentId = id || generatedId;
+    const stopIdRef = useRef(0);
+    // errorMessage takes precedence over helperText while invalid; helperText
+    // behavior is unchanged otherwise.
+    const displayedMessage = state === 'invalid' && errorMessage ? errorMessage : helperText;
+    const describedById = displayedMessage ? `${componentId}-helper` : undefined;
     // Parse initial color value
     const initialColor = useMemo(() => {
-        const parsed = parseColor(value || defaultValue);
+        const initial = value || defaultValue;
+        const parsed = initial && !isGradientString(initial) ? parseColor(initial) : null;
         return parsed || { h: 0, s: 0, l: 0, a: 1 };
     }, [value, defaultValue]);
     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-${++stopIdRef.current}`,
+            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);
-    // Update color when controlled value changes
+    // 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 (skip gradient/image values — not solid colors)
     useEffect(() => {
-        if (value !== undefined) {
+        if (value !== undefined && !isGradientString(value)) {
             const parsed = parseColor(value);
             if (parsed) {
                 setColor(parsed);
@@ -87,15 +168,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,8 +204,17 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         setAlpha,
         format,
         setFormat,
+        mode,
+        setMode,
+        gradient,
+        setGradient,
+        updateGradientStop,
+        addGradientStop,
+        removeGradientStop,
         isOpen,
         setIsOpen,
+        describedById,
+        dialogId: `${componentId}-dialog`,
         triggerRef,
         placement: 'bottom-start',
         offset: 4,
@@ -127,7 +229,11 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         getRgbValue,
         getHslValue,
         getFormattedValue,
+        getOutputValue,
         onChange,
+        savedColors,
+        addSavedColor,
+        removeSavedColor,
     }), [
         color,
         setColor,
@@ -137,8 +243,17 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         setAlpha,
         format,
         setFormat,
+        mode,
+        setMode,
+        gradient,
+        setGradient,
+        updateGradientStop,
+        addGradientStop,
+        removeGradientStop,
         isOpen,
         setIsOpen,
+        describedById,
+        componentId,
         showAlpha,
         showEyeDropper,
         presetColors,
@@ -150,9 +265,13 @@ 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-xs text-[var(--color-text-secondary)]', state === 'invalid' && 'text-[var(--color-danger)]'), children: helperText }))] }) }));
+    return (jsx(ColorPickerContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: componentId, required: required, state: state, children: label })) : (label)), children, displayedMessage && (typeof displayedMessage === 'string' ? (jsx("div", { id: `${componentId}-helper`, role: state === 'invalid' ? 'alert' : undefined, className: cn('mt-1.5 text-sm text-[var(--color-text-secondary)]', state === 'invalid' && 'text-[var(--color-danger)]'), children: displayedMessage })) : (displayedMessage))] }) }));
 });
 ColorPickerRoot.displayName = 'ColorPicker';
 /**
@@ -161,7 +280,8 @@ ColorPickerRoot.displayName = 'ColorPicker';
  */
 const ColorPicker = Object.assign(ColorPickerRoot, {
     Trigger: ColorPickerTrigger,
-    Content: ColorPickerContent,
+    Header: ColorPickerHeader,
+    Body: ColorPickerBody,
     Canvas: ColorPicker2DCanvas,
     Swatch: ColorPickerSwatch,
     Sliders: ColorPickerSliders,
@@ -169,6 +289,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',
+    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'
@@ -57,16 +83,43 @@ export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     /**
      * Label for the color picker
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Helper text displayed below the picker
      */
-    helperText?: string;
+    helperText?: React.ReactNode;
+    /**
+     * Error message shown instead of `helperText` when `state="invalid"`.
+     * Takes precedence over `helperText` while invalid; `helperText` is
+     * unaffected/still shown as normal otherwise.
+     */
+    errorMessage?: React.ReactNode;
     /**
      * Whether the picker is required
      * @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,10 +145,19 @@ 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;
+    describedById?: string;
+    dialogId: string;
     triggerRef: React.RefObject<HTMLElement>;
-    placement: string;
+    placement: import("../../../hooks/useSelectPortal").SelectPlacement;
     offset: number;
     showAlpha: boolean;
     showEyeDropper: boolean;
@@ -108,7 +170,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 +191,10 @@ export interface ColorPickerThemeOverrides {
     presetGridStyle?: string;
     presetSwatchStyle?: string;
     eyedropperButtonStyle?: string;
+    sectionLabelStyle?: string;
+    savedColorsGridStyle?: string;
+    savedColorsAddButtonStyle?: string;
+    colorPreviewStyle?: string;
 }
 /**
  * ColorPicker theme
@@ -141,6 +211,10 @@ export interface ColorPickerTheme {
     presetGridStyle: string;
     presetSwatchStyle: string;
     eyedropperButtonStyle: string;
+    sectionLabelStyle: string;
+    savedColorsGridStyle: string;
+    savedColorsAddButtonStyle: string;
+    colorPreviewStyle: string;
 }
 /**
  * ColorPickerTrigger props
@@ -149,9 +223,9 @@ export interface ColorPickerTriggerProps extends Omit<React.InputHTMLAttributes<
     className?: string;
 }
 /**
- * ColorPickerContent props
+ * ColorPickerBody props
  */
-export interface ColorPickerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ColorPickerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     className?: string;
     /**
@@ -215,5 +289,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,9 @@
+"use client";
 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 +73,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.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerBodyProps } from './ColorPicker.types';
+/**
+ * ColorPickerBody - Popover content wrapper following Dropdown/Select patterns
+ * Uses portal rendering and useSelectPortal for positioning
+ */
+export declare const ColorPickerBody: React.FC<ColorPickerBodyProps>;

package/dist/components/forms/ColorPicker/{ColorPickerContent.js → ColorPickerBody.js}

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { useContext, useRef, useEffect } from 'react';
@@ -6,27 +7,27 @@ 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';
 
 /**
- * ColorPickerContent - Popover content wrapper following Dropdown/Select patterns
+ * ColorPickerBody - Popover content wrapper following Dropdown/Select patterns
  * Uses portal rendering and useSelectPortal for positioning
  */
-const ColorPickerContent = ({ children, className, portal = true, animation = true, ...rest }) => {
+const ColorPickerBody = ({ children, className, portal = true, animation = true, ...rest }) => {
     const context = useContext(ColorPickerContext);
     const contentRef = useRef(null);
     const shouldReduceMotion = useReducedMotion();
     const isClient = useIsClient();
     if (!context) {
-        throw new Error('ColorPickerContent must be used within a ColorPicker');
+        throw new Error('ColorPicker.Body must be used within a ColorPicker');
     }
-    const { isOpen, setIsOpen, theme, triggerRef, placement, offset } = context;
+    const { isOpen, setIsOpen, theme, triggerRef, placement, offset, dialogId } = context;
     // Use positioning hook (same as Dropdown/Select)
     const { position, cssVariables } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
-        placement: placement,
+        placement,
         offset: offset || 4,
         autoWidth: false,
     });
@@ -52,9 +53,9 @@ const ColorPickerContent = ({ children, className, portal = true, animation = tr
         document.addEventListener('keydown', handleEscape);
         return () => document.removeEventListener('keydown', handleEscape);
     }, [isOpen, setIsOpen, triggerRef]);
-    // Extract DOM props to avoid type conflicts with Framer Motion
-    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...domProps } = rest;
-    const content = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: contentRef, role: "dialog", "aria-label": "Color picker", className: cn('fixed z-50', theme.contentStyle, className), style: {
+    // Extract DOM event handler props that conflict with Framer Motion
+    const { onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...domProps } = rest;
+    const content = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: contentRef, id: dialogId, role: "dialog", "aria-label": "Color picker", className: cn('fixed z-50', theme.contentStyle, className), style: {
                 ...cssVariables,
                 top: `${position.top}px`,
                 left: `${position.left}px`,
@@ -66,10 +67,12 @@ const ColorPickerContent = ({ children, className, portal = true, animation = tr
                     damping: 30,
                 }, "data-state": isOpen ? 'open' : 'closed', ...domProps, children: children })) }));
     // Use portal if specified (same as Dropdown)
-    return portal && isClient
-        ? createPortal(content, document.body)
-        : content;
+    if (portal) {
+        const target = isClient ? document.body : null;
+        return target ? createPortal(content, target) : null;
+    }
+    return content;
 };
-ColorPickerContent.displayName = 'ColorPickerContent';
+ColorPickerBody.displayName = 'ColorPicker.Body';
 
-export { ColorPickerContent };
+export { ColorPickerBody };

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,13 @@
+"use client";
+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 };