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

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

@@ -0,0 +1,186 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TrashIcon, PlusIcon, ClipboardDocumentCheckIcon, ClipboardDocumentIcon } from '@heroicons/react/20/solid';
+import { useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Button } from '../../core/Button/Button.js';
+import { Segmented } from '../../core/Segmented/Segmented.js';
+import { Input } from '../Input/Input.js';
+import '../Input/Input.theme.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
+import { ColorPicker2DCanvas } from './ColorPicker2DCanvas.js';
+import { ColorPickerSliders } from './ColorPickerSliders.js';
+import { parseColor, formatHex } from './colorUtils.js';
+
+/**
+ * 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.
+ */
+const ColorPickerGradient = ({ className, ...props }) => {
+    var _a, _b, _c;
+    const context = useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error('ColorPickerGradient must be used within a ColorPicker');
+    }
+    const { color, setColor, gradient, setGradient, updateGradientStop, addGradientStop, removeGradientStop, getOutputValue, showEyeDropper, } = context;
+    const [selectedStopId, setSelectedStopId] = useState((_b = (_a = gradient.stops[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
+    const [copied, setCopied] = useState(false);
+    const [dragStopId, setDragStopId] = useState(null);
+    const stopBarRef = useRef(null);
+    // Track whether color change originated from stop selection (to avoid update loops)
+    const isSelectingStopRef = useRef(false);
+    const selectedStop = gradient.stops.find(s => s.id === selectedStopId);
+    // --- Sync selected stop color → main color picker (when selecting a stop) ---
+    const selectStop = useCallback((stopId) => {
+        setSelectedStopId(stopId);
+        const stop = gradient.stops.find(s => s.id === stopId);
+        if (stop) {
+            const parsed = parseColor(stop.color);
+            if (parsed) {
+                isSelectingStopRef.current = true;
+                setColor(parsed);
+                // Reset after a tick so the next color change from canvas/slider will update the stop
+                requestAnimationFrame(() => { isSelectingStopRef.current = false; });
+            }
+        }
+    }, [gradient.stops, setColor]);
+    // Load first stop's color into picker on mount
+    useEffect(() => {
+        if (selectedStopId) {
+            const stop = gradient.stops.find(s => s.id === selectedStopId);
+            if (stop) {
+                const parsed = parseColor(stop.color);
+                if (parsed) {
+                    isSelectingStopRef.current = true;
+                    setColor(parsed);
+                    requestAnimationFrame(() => { isSelectingStopRef.current = false; });
+                }
+            }
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // --- Sync main color picker → selected stop (when user picks via canvas/slider) ---
+    useEffect(() => {
+        if (isSelectingStopRef.current || !selectedStopId)
+            return;
+        const hex = formatHex(color.h, color.s, color.l);
+        updateGradientStop(selectedStopId, { color: hex });
+    }, [color.h, color.s, color.l]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Build the left-to-right preview gradient (ignoring angle for the bar)
+    const barGradientCSS = (() => {
+        const sorted = [...gradient.stops].sort((a, b) => a.position - b.position);
+        const stopStrings = sorted.map(s => `${s.color} ${s.position}%`).join(', ');
+        return `linear-gradient(to right, ${stopStrings})`;
+    })();
+    // Full output CSS
+    const outputCSS = getOutputValue();
+    // --- Type toggle ---
+    const handleTypeChange = (value) => {
+        setGradient({ ...gradient, type: value });
+    };
+    // --- Angle ---
+    const handleAngleChange = (e) => {
+        const val = parseInt(e.target.value, 10);
+        if (!isNaN(val)) {
+            setGradient({ ...gradient, angle: Math.max(0, Math.min(360, val)) });
+        }
+    };
+    // --- Stop bar interaction ---
+    const getPositionFromX = useCallback((clientX) => {
+        if (!stopBarRef.current)
+            return 0;
+        const rect = stopBarRef.current.getBoundingClientRect();
+        const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        return Math.round(ratio * 100);
+    }, []);
+    const handleStopBarClick = (e) => {
+        if (e.target.closest('[data-stop-marker]'))
+            return;
+        const position = getPositionFromX(e.clientX);
+        addGradientStop(position);
+    };
+    const handleStopPointerDown = useCallback((e, stopId) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragStopId(stopId);
+        selectStop(stopId);
+    }, [selectStop]);
+    const handlePointerMove = useCallback((e) => {
+        if (!dragStopId)
+            return;
+        const position = getPositionFromX(e.clientX);
+        updateGradientStop(dragStopId, { position });
+    }, [dragStopId, getPositionFromX, updateGradientStop]);
+    const handlePointerUp = useCallback(() => {
+        setDragStopId(null);
+    }, []);
+    useEffect(() => {
+        if (dragStopId) {
+            window.addEventListener('pointermove', handlePointerMove);
+            window.addEventListener('pointerup', handlePointerUp);
+            return () => {
+                window.removeEventListener('pointermove', handlePointerMove);
+                window.removeEventListener('pointerup', handlePointerUp);
+            };
+        }
+    }, [dragStopId, handlePointerMove, handlePointerUp]);
+    // --- Selected stop color input editing ---
+    const [colorInput, setColorInput] = useState((_c = selectedStop === null || selectedStop === void 0 ? void 0 : selectedStop.color) !== null && _c !== void 0 ? _c : '');
+    useEffect(() => {
+        if (selectedStop) {
+            setColorInput(selectedStop.color);
+        }
+    }, [selectedStop === null || selectedStop === void 0 ? void 0 : selectedStop.id, selectedStop === null || selectedStop === void 0 ? void 0 : selectedStop.color]); // eslint-disable-line react-hooks/exhaustive-deps
+    const handleColorInputChange = (e) => {
+        const val = e.target.value;
+        setColorInput(val);
+        if (selectedStop) {
+            const parsed = parseColor(val);
+            if (parsed) {
+                updateGradientStop(selectedStop.id, {
+                    color: formatHex(parsed.h, parsed.s, parsed.l),
+                });
+                // Also update the canvas/sliders
+                isSelectingStopRef.current = true;
+                setColor(parsed);
+                requestAnimationFrame(() => { isSelectingStopRef.current = false; });
+            }
+        }
+    };
+    const handleColorInputBlur = () => {
+        if (selectedStop) {
+            setColorInput(selectedStop.color);
+        }
+    };
+    const handlePositionChange = (e) => {
+        const val = parseInt(e.target.value, 10);
+        if (selectedStop && !isNaN(val)) {
+            updateGradientStop(selectedStop.id, {
+                position: Math.max(0, Math.min(100, val)),
+            });
+        }
+    };
+    // --- Copy ---
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(outputCSS);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        }
+        catch (_a) { }
+    };
+    return (jsxs("div", { className: cn('space-y-3', className), ...props, children: [jsx(ColorPicker2DCanvas, {}), jsx(ColorPickerSliders, { className: "flex-1" }), jsxs("div", { className: "flex items-center gap-3", children: [jsxs(Segmented, { value: gradient.type, onChange: handleTypeChange, size: "sm", children: [jsx(Segmented.Item, { value: "linear", children: "Linear" }), jsx(Segmented.Item, { value: "radial", children: "Radial" })] }), gradient.type === 'linear' && (jsxs("div", { className: "flex items-center gap-1", children: [jsx(Input, { size: "sm", type: "number", value: String(gradient.angle), onChange: handleAngleChange, className: "!w-16 text-center", "aria-label": "Gradient angle" }), jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: "deg" })] }))] }), jsx("div", { className: "h-8 rounded-lg ring-1 ring-inset ring-black/5", style: { background: outputCSS }, "aria-label": "Gradient preview" }), jsxs("div", { className: "space-y-1", children: [jsx("div", { className: "text-xs font-medium text-[var(--color-text-muted)]", children: "Color Stops" }), jsx("div", { ref: stopBarRef, onClick: handleStopBarClick, className: "relative h-4 rounded-full cursor-pointer touch-none select-none", style: { backgroundImage: barGradientCSS }, "aria-label": "Gradient stops", children: gradient.stops.map(stop => (jsx("div", { "data-stop-marker": true, onPointerDown: (e) => handleStopPointerDown(e, stop.id), onClick: (e) => {
+                                e.stopPropagation();
+                                selectStop(stop.id);
+                            }, className: cn('absolute top-1/2 size-4 rounded-full border-2 border-white shadow-md cursor-grab active:cursor-grabbing', selectedStopId === stop.id && 'ring-2 ring-[var(--color-primary)] ring-offset-1'), style: {
+                                left: `${stop.position}%`,
+                                transform: 'translate(-50%, -50%)',
+                                backgroundColor: stop.color,
+                            }, role: "slider", "aria-label": `Color stop at ${stop.position}%`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": stop.position, tabIndex: 0 }, stop.id))) })] }), selectedStop && (jsxs("div", { className: "flex items-center gap-2", children: [jsx(Input, { size: "sm", value: colorInput, onChange: handleColorInputChange, onBlur: handleColorInputBlur, "aria-label": "Stop color", className: "flex-1 !font-mono", contentStart: jsx("div", { className: "size-4 rounded-full flex-shrink-0 border border-[var(--color-border)]", style: { backgroundColor: selectedStop.color } }) }), jsxs("div", { className: "flex items-center gap-0.5", children: [jsx(Input, { size: "sm", type: "number", value: String(selectedStop.position), onChange: handlePositionChange, className: "!w-16 text-center", "aria-label": "Stop position" }), jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: "%" })] }), gradient.stops.length > 2 && (jsx(Button, { variant: "ghost", size: "sm", color: "danger", iconOnly: true, onClick: () => {
+                            removeGradientStop(selectedStop.id);
+                            const remaining = gradient.stops.filter(s => s.id !== selectedStop.id);
+                            if (remaining[0])
+                                selectStop(remaining[0].id);
+                        }, "aria-label": "Remove color stop", children: jsx(TrashIcon, { className: "size-4" }) })), jsx(Button, { variant: "ghost", size: "sm", color: "neutral", iconOnly: true, onClick: () => addGradientStop(50), "aria-label": "Add color stop", children: jsx(PlusIcon, { className: "size-4" }) })] })), jsxs("div", { className: "flex items-center gap-2 border border-[var(--color-border)] rounded-lg px-3 py-2", children: [jsx("code", { className: "flex-1 text-xs font-mono text-[var(--color-text-secondary)] truncate", children: outputCSS }), jsx(Button, { variant: "ghost", size: "sm", color: "neutral", iconOnly: true, onClick: handleCopy, "aria-label": "Copy gradient CSS", title: copied ? 'Copied!' : 'Copy CSS', children: copied ? (jsx(ClipboardDocumentCheckIcon, { className: "size-4 text-[var(--color-success)]" })) : (jsx(ClipboardDocumentIcon, { className: "size-4" })) })] })] }));
+};
+ColorPickerGradient.displayName = 'ColorPickerGradient';
+
+export { ColorPickerGradient };

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ColorPickerMode } from './ColorPicker.types';
+export interface ColorPickerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Available modes/tabs to show */
+    modes?: ColorPickerMode[];
+    /** Currently active mode (overrides context) */
+    activeMode?: ColorPickerMode;
+    /** Callback when mode changes */
+    onModeChange?: (mode: ColorPickerMode) => void;
+    /** Whether to show the close button */
+    showClose?: boolean;
+    className?: string;
+}
+export declare const ColorPickerHeader: React.FC<ColorPickerHeaderProps>;

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

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { XMarkIcon } from '@heroicons/react/20/solid';
+import { useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
+
+const modeLabels = {
+    solid: 'Solid',
+    gradient: 'Gradient',
+    image: 'Image',
+};
+const ColorPickerHeader = ({ modes = ['solid'], activeMode: activeModeFromProp, onModeChange, showClose = true, className, ...props }) => {
+    const context = useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error('ColorPickerHeader must be used within a ColorPicker');
+    }
+    const { setIsOpen, mode: contextMode, setMode: contextSetMode } = context;
+    const activeMode = activeModeFromProp !== null && activeModeFromProp !== void 0 ? activeModeFromProp : contextMode;
+    const handleModeChange = (mode) => {
+        if (onModeChange) {
+            onModeChange(mode);
+        }
+        contextSetMode(mode);
+    };
+    return (jsxs("div", { className: cn('flex items-center justify-between border-b border-[var(--color-border)] -mx-4 -mt-4 px-4', className), ...props, children: [jsx("div", { className: "flex items-center gap-4", children: modes.map((mode) => (jsxs("button", { type: "button", onClick: () => handleModeChange(mode), className: cn('py-3 text-sm font-medium transition-colors relative cursor-pointer', activeMode === mode
+                        ? 'text-[var(--color-primary)]'
+                        : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]'), "aria-selected": activeMode === mode, role: "tab", children: [modeLabels[mode], activeMode === mode && (jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-primary)] rounded-full" }))] }, mode))) }), showClose && (jsx("button", { type: "button", onClick: () => setIsOpen(false), className: "p-1 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors rounded-md hover:bg-[var(--color-background-secondary)] cursor-pointer", "aria-label": "Close color picker", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
+};
+ColorPickerHeader.displayName = 'ColorPickerHeader';
+
+export { ColorPickerHeader };

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ColorPickerImageProps } from './ColorPicker.types';
+/**
+ * ColorPickerImage - Pick colors from an uploaded image
+ */
+export declare const ColorPickerImage: React.FC<ColorPickerImageProps>;

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

@@ -0,0 +1,154 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowUpTrayIcon, XMarkIcon } from '@heroicons/react/20/solid';
+import { useContext, useRef, useState, useEffect, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Button } from '../../core/Button/Button.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
+import { rgbToHsl } from './colorUtils.js';
+
+/**
+ * ColorPickerImage - Pick colors from an uploaded image
+ */
+const ColorPickerImage = ({ className, ...props }) => {
+    const context = useContext(ColorPickerContext);
+    if (!context) {
+        throw new Error('ColorPickerImage must be used within a ColorPicker');
+    }
+    const { setColor } = context;
+    const canvasRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const [imageSrc, setImageSrc] = useState(null);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [pickedColor, setPickedColor] = useState(null);
+    const [cursorPos, setCursorPos] = useState(null);
+    // Clean up object URL on unmount or change
+    useEffect(() => {
+        return () => {
+            if (imageSrc)
+                URL.revokeObjectURL(imageSrc);
+        };
+    }, [imageSrc]);
+    const loadImage = useCallback((file) => {
+        if (!file.type.startsWith('image/'))
+            return;
+        // Clean up previous
+        if (imageSrc)
+            URL.revokeObjectURL(imageSrc);
+        const url = URL.createObjectURL(file);
+        setImageSrc(url);
+        setImageLoaded(false);
+        setPickedColor(null);
+        setCursorPos(null);
+        const img = new Image();
+        img.onload = () => {
+            const canvas = canvasRef.current;
+            if (!canvas)
+                return;
+            // Fit image within container while maintaining aspect ratio
+            const maxWidth = 300;
+            const maxHeight = 200;
+            let width = img.width;
+            let height = img.height;
+            if (width > maxWidth || height > maxHeight) {
+                const ratio = Math.min(maxWidth / width, maxHeight / height);
+                width = Math.round(width * ratio);
+                height = Math.round(height * ratio);
+            }
+            // Account for device pixel ratio for sharp rendering
+            const dpr = window.devicePixelRatio || 1;
+            canvas.width = width * dpr;
+            canvas.height = height * dpr;
+            canvas.style.width = `${width}px`;
+            canvas.style.height = `${height}px`;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            ctx.scale(dpr, dpr);
+            ctx.drawImage(img, 0, 0, width, height);
+            setImageLoaded(true);
+        };
+        img.src = url;
+    }, [imageSrc]);
+    // File input handler
+    const handleFileChange = (e) => {
+        var _a;
+        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file)
+            loadImage(file);
+    };
+    // Drag and drop handlers
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setIsDragOver(true);
+    };
+    const handleDragLeave = () => {
+        setIsDragOver(false);
+    };
+    const handleDrop = (e) => {
+        var _a;
+        e.preventDefault();
+        setIsDragOver(false);
+        const file = (_a = e.dataTransfer.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file)
+            loadImage(file);
+    };
+    // Pick color from canvas
+    const pickColorAtPosition = useCallback((clientX, clientY) => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const dpr = window.devicePixelRatio || 1;
+        // Map click position to canvas pixel coordinates
+        const x = Math.round(((clientX - rect.left) / rect.width) * canvas.width / dpr) * dpr;
+        const y = Math.round(((clientY - rect.top) / rect.height) * canvas.height / dpr) * dpr;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const pixel = ctx.getImageData(x, y, 1, 1).data;
+        const r = pixel[0];
+        const g = pixel[1];
+        const b = pixel[2];
+        const a = pixel[3] / 255;
+        const hsl = rgbToHsl(r, g, b);
+        setColor({ ...hsl, a });
+        // Set picked color for display
+        const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();
+        setPickedColor(hex);
+        // Set cursor position as percentage
+        setCursorPos({
+            x: ((clientX - rect.left) / rect.width) * 100,
+            y: ((clientY - rect.top) / rect.height) * 100,
+        });
+    }, [setColor]);
+    const handleCanvasClick = (e) => {
+        pickColorAtPosition(e.clientX, e.clientY);
+    };
+    // Clear image
+    const handleClear = () => {
+        if (imageSrc)
+            URL.revokeObjectURL(imageSrc);
+        setImageSrc(null);
+        setImageLoaded(false);
+        setPickedColor(null);
+        setCursorPos(null);
+        if (fileInputRef.current)
+            fileInputRef.current.value = '';
+    };
+    return (jsxs("div", { className: cn('space-y-3', className), ...props, children: [!imageLoaded ? (
+            /* Upload dropzone */
+            jsxs("div", { onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, className: cn('flex flex-col items-center justify-center gap-2 h-[200px] rounded-xl border-2 border-dashed cursor-pointer transition-colors', isDragOver
+                    ? 'border-[var(--color-primary)] bg-[var(--color-primary-50)]'
+                    : 'border-[var(--color-border)] hover:border-[var(--color-primary)] hover:bg-[var(--color-background-secondary)]'), children: [jsx(ArrowUpTrayIcon, { className: "size-8 text-[var(--color-text-muted)]" }), jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: "Click or drag an image" }), jsx("div", { className: "text-xs text-[var(--color-text-placeholder)]", children: "PNG, JPG, SVG, WebP" }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, className: "hidden", "aria-label": "Upload image" })] })) : (
+            /* Canvas with color picking */
+            jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "relative inline-block rounded-xl overflow-hidden ring-1 ring-inset ring-black/5", children: [jsx("canvas", { ref: canvasRef, onClick: handleCanvasClick, className: "cursor-crosshair block" }), cursorPos && (jsx("div", { className: "absolute w-5 h-5 border-2 border-white rounded-full pointer-events-none", style: {
+                                    left: `${cursorPos.x}%`,
+                                    top: `${cursorPos.y}%`,
+                                    transform: 'translate(-50%, -50%)',
+                                    boxShadow: '0 0 0 1.5px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.15)',
+                                }, children: pickedColor && (jsx("div", { className: "absolute inset-1 rounded-full", style: { backgroundColor: pickedColor } })) }))] }), jsxs("div", { className: "flex items-center justify-between", children: [pickedColor && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "size-5 rounded-full border border-[var(--color-border)]", style: { backgroundColor: pickedColor } }), jsx("span", { className: "text-xs font-mono text-[var(--color-text-secondary)]", children: pickedColor })] })), jsxs(Button, { variant: "ghost", size: "sm", color: "neutral", onClick: handleClear, "aria-label": "Remove image", className: "ml-auto", children: [jsx(XMarkIcon, { className: "size-3.5" }), "Change"] })] })] })), !imageLoaded && jsx("canvas", { ref: canvasRef, className: "hidden" })] }));
+};
+ColorPickerImage.displayName = 'ColorPickerImage';
+
+export { ColorPickerImage };

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

@@ -1,7 +1,3 @@
 import React from "react";
 import type { ColorPickerInputProps } from "./ColorPicker.types";
-/**
- * ColorPickerInput - Manual color value input
- * Supports hex, rgb, and hsl input based on selected format
- */
 export declare const ColorPickerInput: React.FC<ColorPickerInputProps>;

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

@@ -1,27 +1,37 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useContext, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext, useState, useEffect } from 'react';
+import { ChevronUpDownIcon, ClipboardDocumentCheckIcon, ClipboardDocumentIcon } from '@heroicons/react/20/solid';
 import { cn } from '../../../utils/cn.js';
-import { Input } from '../Input/Input.js';
-import '../Input/Input.theme.js';
-import { ColorPickerContext } from './ColorPicker.js';
-import { hslToRgb, parseColor } from './colorUtils.js';
+import { Button } from '../../core/Button/Button.js';
+import { ColorPickerContext } from './ColorPickerContext.js';
+import { parseColor, hslToRgb } from './colorUtils.js';
 
-/**
- * ColorPickerInput - Manual color value input
- * Supports hex, rgb, and hsl input based on selected format
- */
 const ColorPickerInput = ({ className, ...props }) => {
     const context = useContext(ColorPickerContext);
     if (!context) {
         throw new Error("ColorPickerInput must be used within a ColorPicker");
     }
-    const { color, setColor, format, theme, getFormattedValue } = context;
+    const { color, setColor, format, setFormat, theme, getFormattedValue, showAlpha } = context;
     const [inputValue, setInputValue] = useState(getFormattedValue());
     const [isInvalid, setIsInvalid] = useState(false);
+    const [copied, setCopied] = useState(false);
+    // Sync inputValue when color changes externally (canvas, sliders, presets)
+    useEffect(() => {
+        if (!isInvalid) {
+            setInputValue(getFormattedValue());
+        }
+    }, [color, format]); // eslint-disable-line react-hooks/exhaustive-deps
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(getFormattedValue());
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        }
+        catch (_a) { }
+    };
     const handleChange = (e) => {
         const value = e.target.value;
         setInputValue(value);
-        // Try to parse the color
         const parsed = parseColor(value);
         if (parsed) {
             setColor(parsed);
@@ -32,7 +42,6 @@ const ColorPickerInput = ({ className, ...props }) => {
         }
     };
     const handleBlur = () => {
-        // Reset to current valid color if invalid
         if (isInvalid) {
             setInputValue(getFormattedValue());
             setIsInvalid(false);
@@ -43,54 +52,37 @@ const ColorPickerInput = ({ className, ...props }) => {
             e.currentTarget.blur();
         }
     };
-    // Render different input types based on format
-    if (format === "hex") {
-        return (jsx("div", { className: cn(theme.inputContainerStyle, className), ...props, children: jsx(Input, { type: "text", size: "sm", value: inputValue, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, state: isInvalid ? "invalid" : "default", placeholder: "#000000", className: "flex-1 text-base font-mono", "aria-label": "Hex color value" }) }));
-    }
-    if (format === "rgb") {
-        const rgb = hslToRgb(color.h, color.s, color.l);
-        return (jsxs("div", { className: cn(theme.inputContainerStyle, "flex gap-2", className), ...props, children: [jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.r, onChange: (e) => {
-                        const newR = parseInt(e.target.value, 10);
-                        if (!isNaN(newR) && newR >= 0 && newR <= 255) {
-                            const parsed = parseColor(`rgb(${newR}, ${rgb.g}, ${rgb.b})`);
-                            if (parsed)
-                                setColor(parsed);
-                        }
-                    }, className: "flex-1 text-base", "aria-label": "Red", placeholder: "R" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.g, onChange: (e) => {
-                        const newG = parseInt(e.target.value, 10);
-                        if (!isNaN(newG) && newG >= 0 && newG <= 255) {
-                            const parsed = parseColor(`rgb(${rgb.r}, ${newG}, ${rgb.b})`);
-                            if (parsed)
-                                setColor(parsed);
-                        }
-                    }, className: "flex-1 text-base", "aria-label": "Green", placeholder: "G" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.b, onChange: (e) => {
-                        const newB = parseInt(e.target.value, 10);
-                        if (!isNaN(newB) && newB >= 0 && newB <= 255) {
-                            const parsed = parseColor(`rgb(${rgb.r}, ${rgb.g}, ${newB})`);
-                            if (parsed)
-                                setColor(parsed);
-                        }
-                    }, className: "flex-1 text-base", "aria-label": "Blue", placeholder: "B" })] }));
-    }
-    if (format === "hsl") {
-        return (jsxs("div", { className: cn(theme.inputContainerStyle, "flex gap-2", className), ...props, children: [jsx(Input, { type: "number", size: "sm", min: 0, max: 360, value: Math.round(color.h), onChange: (e) => {
-                        const newH = parseInt(e.target.value, 10);
-                        if (!isNaN(newH) && newH >= 0 && newH <= 360) {
-                            setColor({ ...color, h: newH });
-                        }
-                    }, className: "flex-1 text-base", "aria-label": "Hue", placeholder: "H" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.s), onChange: (e) => {
-                        const newS = parseInt(e.target.value, 10);
-                        if (!isNaN(newS) && newS >= 0 && newS <= 100) {
-                            setColor({ ...color, s: newS });
-                        }
-                    }, className: "flex-1 text-base", "aria-label": "Saturation", placeholder: "S" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.l), onChange: (e) => {
-                        const newL = parseInt(e.target.value, 10);
-                        if (!isNaN(newL) && newL >= 0 && newL <= 100) {
-                            setColor({ ...color, l: newL });
-                        }
-                    }, className: "flex-1 text-base", "aria-label": "Lightness", placeholder: "L" })] }));
-    }
-    return null;
+    // Cycle through formats on click
+    const cycleFormat = () => {
+        const formats = ['hex', 'rgb', 'hsl'];
+        const currentIndex = formats.indexOf(format);
+        const nextIndex = (currentIndex + 1) % formats.length;
+        setFormat(formats[nextIndex]);
+    };
+    // Format display label
+    const formatLabel = format === 'hex' ? 'Hex' : format === 'rgb' ? 'RGB' : 'HSL';
+    // Alpha as percentage
+    const alphaPercent = Math.round(color.a * 100);
+    // Handle alpha change
+    const handleAlphaChange = (e) => {
+        const val = parseInt(e.target.value, 10);
+        if (!isNaN(val) && val >= 0 && val <= 100) {
+            setColor({ ...color, a: val / 100 });
+        }
+    };
+    // For RGB/HSL, show channel values inline
+    const getDisplayValue = () => {
+        if (format === 'hex')
+            return inputValue;
+        if (format === 'rgb') {
+            const rgb = hslToRgb(color.h, color.s, color.l);
+            return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
+        }
+        return `${Math.round(color.h)}°, ${Math.round(color.s)}%, ${Math.round(color.l)}%`;
+    };
+    // Get the current color as rgba for the swatch
+    const swatchColor = `hsla(${color.h}, ${color.s}%, ${color.l}%, ${color.a})`;
+    return (jsxs("div", { className: cn("flex items-stretch border border-[var(--color-border)] rounded-lg overflow-hidden divide-x divide-[var(--color-border)]", className), ...props, children: [jsxs(Button, { variant: "ghost", size: "sm", color: "neutral", onClick: cycleFormat, "aria-label": "Change color format", className: "!rounded-none !border-0 !px-3 !py-2 flex-shrink-0", children: [formatLabel, jsx(ChevronUpDownIcon, { className: "size-4 text-[var(--color-text-muted)]" })] }), jsxs("div", { className: "flex items-center gap-2 px-3 py-2 flex-1 min-w-0", children: [jsx("div", { className: "size-5 rounded-full flex-shrink-0 border border-[var(--color-border)]", style: { backgroundColor: swatchColor } }), jsx("input", { type: "text", value: format === 'hex' ? inputValue : getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: format !== 'hex', className: cn("flex-1 min-w-0 bg-transparent text-sm font-mono text-[var(--color-text-primary)] outline-none", isInvalid && "text-[var(--color-danger)]"), "aria-label": "Color value" }), jsx(Button, { variant: "ghost", size: "sm", color: "neutral", iconOnly: true, onClick: handleCopy, "aria-label": "Copy color value", title: copied ? "Copied!" : "Copy color value", className: "!p-0 !size-auto flex-shrink-0", children: copied ? (jsx(ClipboardDocumentCheckIcon, { className: "size-4 text-[var(--color-success)]" })) : (jsx(ClipboardDocumentIcon, { className: "size-4" })) })] }), showAlpha && (jsxs("div", { className: "flex items-center px-3 py-2 flex-shrink-0", children: [jsx("input", { type: "number", min: 0, max: 100, value: alphaPercent, onChange: handleAlphaChange, className: "w-10 bg-transparent text-sm text-[var(--color-text-primary)] text-center outline-none font-mono", "aria-label": "Opacity percentage" }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: "%" })] }))] }));
 };
 ColorPickerInput.displayName = "ColorPickerInput";
 

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

@@ -1,14 +1,15 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
+import { CheckIcon } from '@heroicons/react/16/solid';
 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 +42,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(CheckIcon, { 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>;