@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,34 @@
+/**
+ * ColorPicker animations
+ * IMPORTANT: Always import from 'motion/react' NOT 'framer-motion'
+ */
+/**
+ * Popover content fade-in animation
+ */
+const contentVariants = {
+    hidden: {
+        opacity: 0,
+        scale: 0.95,
+        y: -10,
+    },
+    visible: {
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        transition: {
+            duration: 0.15,
+            ease: 'easeOut',
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.95,
+        y: -10,
+        transition: {
+            duration: 0.1,
+            ease: 'easeIn',
+        },
+    },
+};
+
+export { contentVariants };

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { ColorPickerContextValue, ColorPickerProps } from './ColorPicker.types';
+/**
+ * ColorPicker Context
+ */
+export declare const ColorPickerContext: React.Context<ColorPickerContextValue | undefined>;
+/**
+ * Hook to access ColorPicker context
+ */
+export declare const useColorPicker: () => ColorPickerContextValue;
+/**
+ * Export compound component with sub-components
+ * Following Flikkui pattern (like Accordion, Tabs, Table)
+ */
+export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>> & {
+    Trigger: React.FC<import("./ColorPicker.types").ColorPickerTriggerProps>;
+    Content: React.FC<import("./ColorPicker.types").ColorPickerContentProps>;
+    Canvas: React.FC<{
+        className?: string;
+    }>;
+    Swatch: React.FC<import("./ColorPicker.types").ColorPickerSwatchProps>;
+    Sliders: React.FC<import("./ColorPicker.types").ColorPickerSlidersProps>;
+    Input: React.FC<import("./ColorPicker.types").ColorPickerInputProps>;
+    FormatSelector: React.FC<import("./ColorPicker.types").ColorPickerFormatSelectorProps>;
+    EyeDropper: React.FC<import("./ColorPicker.types").ColorPickerEyeDropperProps>;
+    Presets: React.FC<import("./ColorPicker.types").ColorPickerPresetsProps>;
+};

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

@@ -0,0 +1,174 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { createContext, useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { colorPickerTheme } from './ColorPicker.theme.js';
+import { ColorPicker2DCanvas } from './ColorPicker2DCanvas.js';
+import { ColorPickerContent } from './ColorPickerContent.js';
+import { ColorPickerEyeDropper } from './ColorPickerEyeDropper.js';
+import { ColorPickerFormatSelector } from './ColorPickerFormatSelector.js';
+import { ColorPickerInput } from './ColorPickerInput.js';
+import { ColorPickerPresets } from './ColorPickerPresets.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;
+};
+/**
+ * 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) => {
+    // Parse initial color value
+    const initialColor = useMemo(() => {
+        const parsed = parseColor(value || defaultValue);
+        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);
+    // Refs for positioning (like Dropdown)
+    const triggerRef = useRef(null);
+    // Update color when controlled value changes
+    useEffect(() => {
+        if (value !== undefined) {
+            const parsed = parseColor(value);
+            if (parsed) {
+                setColor(parsed);
+            }
+        }
+    }, [value]);
+    // Individual channel setters
+    const setHue = useCallback((h) => {
+        setColor((prev) => ({ ...prev, h }));
+    }, []);
+    const setSaturation = useCallback((s) => {
+        setColor((prev) => ({ ...prev, s }));
+    }, []);
+    const setLightness = useCallback((l) => {
+        setColor((prev) => ({ ...prev, l }));
+    }, []);
+    const setAlpha = useCallback((a) => {
+        setColor((prev) => ({ ...prev, a }));
+    }, []);
+    // Utility functions to get color in different formats
+    const getHexValue = useCallback(() => {
+        return formatHex(color.h, color.s, color.l);
+    }, [color]);
+    const getRgbValue = useCallback(() => {
+        return formatRgb(color.h, color.s, color.l, color.a);
+    }, [color]);
+    const getHslValue = useCallback(() => {
+        return formatHsl(color.h, color.s, color.l, color.a);
+    }, [color]);
+    const getFormattedValue = useCallback(() => {
+        switch (format) {
+            case 'hex':
+                return getHexValue();
+            case 'rgb':
+                return getRgbValue();
+            case 'hsl':
+                return getHslValue();
+            default:
+                return getHexValue();
+        }
+    }, [format, getHexValue, getRgbValue, getHslValue]);
+    // Notify parent of color changes
+    const prevFormattedRef = useRef(undefined);
+    useEffect(() => {
+        const formatted = getFormattedValue();
+        if (onChange && !disabled && formatted !== prevFormattedRef.current) {
+            prevFormattedRef.current = formatted;
+            onChange(formatted);
+        }
+    }, [color, format, onChange, disabled, getFormattedValue]);
+    // Merge theme
+    const mergedTheme = useMemo(() => ({
+        ...colorPickerTheme,
+        ...theme,
+    }), [theme]);
+    // Context value
+    const contextValue = useMemo(() => ({
+        color,
+        setColor,
+        setHue,
+        setSaturation,
+        setLightness,
+        setAlpha,
+        format,
+        setFormat,
+        isOpen,
+        setIsOpen,
+        triggerRef,
+        placement: 'bottom-start',
+        offset: 4,
+        showAlpha,
+        showEyeDropper,
+        presetColors,
+        size,
+        state,
+        disabled,
+        theme: mergedTheme,
+        getHexValue,
+        getRgbValue,
+        getHslValue,
+        getFormattedValue,
+        onChange,
+    }), [
+        color,
+        setColor,
+        setHue,
+        setSaturation,
+        setLightness,
+        setAlpha,
+        format,
+        setFormat,
+        isOpen,
+        setIsOpen,
+        showAlpha,
+        showEyeDropper,
+        presetColors,
+        size,
+        state,
+        disabled,
+        mergedTheme,
+        getHexValue,
+        getRgbValue,
+        getHslValue,
+        getFormattedValue,
+        onChange,
+    ]);
+    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 }))] }) }));
+});
+ColorPickerRoot.displayName = 'ColorPicker';
+/**
+ * Export compound component with sub-components
+ * Following Flikkui pattern (like Accordion, Tabs, Table)
+ */
+const ColorPicker = Object.assign(ColorPickerRoot, {
+    Trigger: ColorPickerTrigger,
+    Content: ColorPickerContent,
+    Canvas: ColorPicker2DCanvas,
+    Swatch: ColorPickerSwatch,
+    Sliders: ColorPickerSliders,
+    Input: ColorPickerInput,
+    FormatSelector: ColorPickerFormatSelector,
+    EyeDropper: ColorPickerEyeDropper,
+    Presets: ColorPickerPresets,
+});
+
+export { ColorPicker, ColorPickerContext, useColorPicker };

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

@@ -0,0 +1,6 @@
+import type { ColorPickerTheme } from './ColorPicker.types';
+/**
+ * ColorPicker theme configuration
+ * Following Dropdown/Select popup styling patterns
+ */
+export declare const colorPickerTheme: ColorPickerTheme;

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

@@ -0,0 +1,20 @@
+/**
+ * ColorPicker theme configuration
+ * Following Dropdown/Select popup styling patterns
+ */
+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-[280px] 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-xs font-medium text-[var(--color-text-secondary)]',
+    inputContainerStyle: 'flex items-center gap-2',
+    formatSelectorStyle: 'flex-shrink-0',
+    presetGridStyle: 'mt-3 grid 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',
+    eyedropperButtonStyle: 'flex-shrink-0',
+};
+
+export { colorPickerTheme };

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

@@ -0,0 +1,219 @@
+import React from 'react';
+import type { HSLA } from './colorUtils';
+export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
+export type ColorPickerSize = 'sm' | 'md' | 'lg';
+export type ColorPickerState = 'default' | 'invalid' | 'disabled';
+/**
+ * Root ColorPicker component props
+ */
+export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Controlled color value (hex, rgb, rgba, hsl, hsla)
+     */
+    value?: string;
+    /**
+     * Default color value for uncontrolled component
+     * @default '#000000'
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when color changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Color format for output
+     * @default 'hex'
+     */
+    format?: ColorFormat;
+    /**
+     * Whether to show alpha/opacity slider
+     * @default true
+     */
+    showAlpha?: boolean;
+    /**
+     * Whether to show eyedropper button (if browser supports it)
+     * @default true
+     */
+    showEyeDropper?: boolean;
+    /**
+     * Array of preset colors to display
+     */
+    presetColors?: string[];
+    /**
+     * Size of the color picker
+     * @default 'md'
+     */
+    size?: ColorPickerSize;
+    /**
+     * State of the color picker
+     * @default 'default'
+     */
+    state?: ColorPickerState;
+    /**
+     * Whether the color picker is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Label for the color picker
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the picker
+     */
+    helperText?: string;
+    /**
+     * Whether the picker is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Theme overrides
+     */
+    theme?: ColorPickerThemeOverrides;
+    /**
+     * Custom className for container
+     */
+    className?: string;
+    /**
+     * Children components (compound pattern)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Context value for ColorPicker
+ */
+export interface ColorPickerContextValue {
+    color: HSLA;
+    setColor: (color: HSLA) => void;
+    setHue: (h: number) => void;
+    setSaturation: (s: number) => void;
+    setLightness: (l: number) => void;
+    setAlpha: (a: number) => void;
+    format: ColorFormat;
+    setFormat: (format: ColorFormat) => void;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    triggerRef: React.RefObject<HTMLElement>;
+    placement: string;
+    offset: number;
+    showAlpha: boolean;
+    showEyeDropper: boolean;
+    presetColors?: string[];
+    size: ColorPickerSize;
+    state: ColorPickerState;
+    disabled: boolean;
+    theme: ColorPickerTheme;
+    getHexValue: () => string;
+    getRgbValue: () => string;
+    getHslValue: () => string;
+    getFormattedValue: () => string;
+    onChange?: (value: string) => void;
+}
+/**
+ * ColorPicker theme overrides
+ */
+export interface ColorPickerThemeOverrides {
+    baseStyle?: string;
+    triggerStyle?: string;
+    swatchStyle?: string;
+    contentStyle?: string;
+    sliderContainerStyle?: string;
+    sliderLabelStyle?: string;
+    inputContainerStyle?: string;
+    formatSelectorStyle?: string;
+    presetGridStyle?: string;
+    presetSwatchStyle?: string;
+    eyedropperButtonStyle?: string;
+}
+/**
+ * ColorPicker theme
+ */
+export interface ColorPickerTheme {
+    baseStyle: string;
+    triggerStyle: string;
+    swatchStyle: string;
+    contentStyle: string;
+    sliderContainerStyle: string;
+    sliderLabelStyle: string;
+    inputContainerStyle: string;
+    formatSelectorStyle: string;
+    presetGridStyle: string;
+    presetSwatchStyle: string;
+    eyedropperButtonStyle: string;
+}
+/**
+ * ColorPickerTrigger props
+ */
+export interface ColorPickerTriggerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'onChange'> {
+    className?: string;
+}
+/**
+ * ColorPickerContent props
+ */
+export interface ColorPickerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Whether to render in a portal (default: true)
+     */
+    portal?: boolean;
+    /**
+     * Whether to animate (default: true)
+     */
+    animation?: boolean;
+}
+/**
+ * ColorPickerSwatch props
+ */
+export interface ColorPickerSwatchProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the swatch
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether to show checkerboard pattern for transparency
+     * @default true
+     */
+    showCheckerboard?: boolean;
+    className?: string;
+}
+/**
+ * ColorPickerSliders props
+ */
+export interface ColorPickerSlidersProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether to show individual channel labels
+     * @default true
+     */
+    showLabels?: boolean;
+    className?: string;
+}
+/**
+ * ColorPickerInput props
+ */
+export interface ColorPickerInputProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+/**
+ * ColorPickerFormatSelector props
+ */
+export interface ColorPickerFormatSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+/**
+ * ColorPickerEyeDropper props
+ */
+export interface ColorPickerEyeDropperProps extends React.HTMLAttributes<HTMLButtonElement> {
+    className?: string;
+}
+/**
+ * ColorPickerPresets props
+ */
+export interface ColorPickerPresetsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom preset colors (overrides context presetColors)
+     */
+    colors?: string[];
+    className?: string;
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * ColorPicker2DCanvas - Main 2D draggable color picker
+ * Horizontal axis: Saturation (0-100%)
+ * Vertical axis: Brightness/Value (0-100%)
+ * This is the PRIMARY feature of the color picker
+ */
+export declare const ColorPicker2DCanvas: React.FC<{
+    className?: string;
+}>;

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

@@ -0,0 +1,91 @@
+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';
+
+/**
+ * ColorPicker2DCanvas - Main 2D draggable color picker
+ * Horizontal axis: Saturation (0-100%)
+ * Vertical axis: Brightness/Value (0-100%)
+ * This is the PRIMARY feature of the color picker
+ */
+const ColorPicker2DCanvas = ({ className }) => {
+    const context = useContext(ColorPickerContext);
+    const canvasRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    if (!context) {
+        throw new Error('ColorPicker2DCanvas must be used within a ColorPicker');
+    }
+    const { color, setColor } = context;
+    // Convert HSL to HSV for the 2D picker (works better with saturation/brightness)
+    const rgb = hslToRgb(color.h, color.s, color.l);
+    const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+    // Position is based on HSV saturation and value
+    const positionX = hsv.s / 100; // 0-1
+    const positionY = 1 - hsv.v / 100; // 0-1 (inverted because canvas top = bright)
+    const updateColorFromPosition = useCallback((clientX, clientY) => {
+        if (!canvasRef.current)
+            return;
+        const rect = canvasRef.current.getBoundingClientRect();
+        const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
+        // X = saturation (0-100)
+        // Y = brightness/value (100-0, inverted)
+        const newSaturation = x * 100;
+        const newValue = (1 - y) * 100;
+        // Convert HSV back to HSL
+        color.h;
+        const s = newSaturation;
+        const v = newValue;
+        // HSV to HSL conversion
+        const l = ((2 - s / 100) * v) / 2;
+        const sl = l !== 0 && l !== 100
+            ? ((v - l) / Math.min(l, 100 - l)) * 100
+            : 0;
+        setColor({
+            ...color,
+            s: Math.round(sl),
+            l: Math.round(l),
+        });
+    }, [color, setColor]);
+    const handlePointerDown = (e) => {
+        e.preventDefault();
+        setIsDragging(true);
+        updateColorFromPosition(e.clientX, e.clientY);
+    };
+    const handlePointerMove = useCallback((e) => {
+        if (!isDragging)
+            return;
+        updateColorFromPosition(e.clientX, e.clientY);
+    }, [isDragging, updateColorFromPosition]);
+    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]);
+    // 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: {
+            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: {
+                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)',
+            } }) }));
+};
+ColorPicker2DCanvas.displayName = 'ColorPicker2DCanvas';
+
+export { ColorPicker2DCanvas };

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

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

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

@@ -0,0 +1,75 @@
+import { jsx } from 'react/jsx-runtime';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { useContext, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+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 { useIsClient } from '../../../hooks/useIsClient.js';
+
+/**
+ * ColorPickerContent - Popover content wrapper following Dropdown/Select patterns
+ * Uses portal rendering and useSelectPortal for positioning
+ */
+const ColorPickerContent = ({ 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');
+    }
+    const { isOpen, setIsOpen, theme, triggerRef, placement, offset } = context;
+    // Use positioning hook (same as Dropdown/Select)
+    const { position, cssVariables } = useSelectPortal({
+        triggerRef,
+        isOpen: isOpen || false,
+        placement: placement,
+        offset: offset || 4,
+        autoWidth: false,
+    });
+    // Click outside to close (same as Dropdown)
+    useClickOutside(contentRef, (e) => {
+        var _a;
+        if (e.target === triggerRef.current || ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            return;
+        }
+        setIsOpen(false);
+    });
+    // Handle Escape key
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleEscape = (event) => {
+            var _a;
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+                (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        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: {
+                ...cssVariables,
+                top: `${position.top}px`,
+                left: `${position.left}px`,
+            }, variants: shouldReduceMotion || !animation ? {} : contentVariants, initial: shouldReduceMotion || !animation ? undefined : 'hidden', animate: shouldReduceMotion || !animation ? undefined : 'visible', exit: shouldReduceMotion || !animation ? undefined : 'exit', transition: shouldReduceMotion || !animation
+                ? { duration: 0 }
+                : {
+                    type: 'spring',
+                    stiffness: 500,
+                    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;
+};
+ColorPickerContent.displayName = 'ColorPickerContent';
+
+export { ColorPickerContent };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerEyeDropperProps } from './ColorPicker.types';
+/**
+ * ColorPickerEyeDropper - Eyedropper tool to pick colors from screen
+ * Uses browser EyeDropper API (if available)
+ */
+export declare const ColorPickerEyeDropper: React.FC<ColorPickerEyeDropperProps>;