entangle-ui 0.2.0 → 0.4.0

package/dist/esm/components/controls/CartesianPicker/useCartesianInteraction.js

@@ -0,0 +1,230 @@
+"use client";
+import { useState, useRef, useCallback } from 'react';
+import { clamp, roundToPrecision } from '../../../utils/mathUtils.js';
+import { getCanvasPointerPosition, canvasToDomain, hitTestPoint } from '../../primitives/canvas/canvasCoords.js';
+import '../../primitives/canvas/CanvasContainer.js';
+
+function snapValue(value, step) {
+    if (step === 0)
+        return value;
+    return Math.round(value / step) * step;
+}
+function useCartesianInteraction(options) {
+    const { point, viewport, canvasRef, domainX, domainY, disabled, readOnly, clampToRange, snapToGrid, gridSubdivisions, step, precision, onChange, onChangeComplete, } = options;
+    const [isHovered, setIsHovered] = useState(false);
+    const isDraggingRef = useRef(false);
+    const [, setForceUpdate] = useState(0);
+    const getCanvasSize = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return { w: 200, h: 200 };
+        const rect = canvas.getBoundingClientRect();
+        return { w: rect.width, h: rect.height };
+    }, [canvasRef]);
+    const applyConstraints = useCallback((rawX, rawY, ctrlKey) => {
+        let newX = rawX;
+        let newY = rawY;
+        // Apply snap
+        if (step) {
+            const [stepX, stepY] = Array.isArray(step) ? step : [step, step];
+            newX = snapValue(newX, stepX);
+            newY = snapValue(newY, stepY);
+        }
+        else if (snapToGrid !== ctrlKey) {
+            // Ctrl toggles snap behavior
+            const xStep = (domainX[1] - domainX[0]) / gridSubdivisions;
+            const yStep = (domainY[1] - domainY[0]) / gridSubdivisions;
+            newX = snapValue(newX, xStep);
+            newY = snapValue(newY, yStep);
+        }
+        newX = roundToPrecision(newX, precision);
+        newY = roundToPrecision(newY, precision);
+        if (clampToRange) {
+            newX = clamp(newX, domainX[0], domainX[1]);
+            newY = clamp(newY, domainY[0], domainY[1]);
+        }
+        return { x: newX, y: newY };
+    }, [
+        step,
+        snapToGrid,
+        gridSubdivisions,
+        domainX,
+        domainY,
+        precision,
+        clampToRange,
+    ]);
+    const onPointerDown = useCallback((e) => {
+        if (disabled || readOnly || e.button !== 0)
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const { px, py } = getCanvasPointerPosition(e, canvas);
+        const { w, h } = getCanvasSize();
+        const domain = canvasToDomain(px, py, viewport, w, h);
+        const newPoint = applyConstraints(domain.x, domain.y, e.ctrlKey);
+        isDraggingRef.current = true;
+        setForceUpdate(n => n + 1);
+        canvas.setPointerCapture(e.pointerId);
+        onChange(newPoint);
+    }, [
+        disabled,
+        readOnly,
+        canvasRef,
+        viewport,
+        getCanvasSize,
+        applyConstraints,
+        onChange,
+    ]);
+    const onPointerMove = useCallback((e) => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        if (isDraggingRef.current) {
+            if (readOnly)
+                return;
+            const { px, py } = getCanvasPointerPosition(e, canvas);
+            const { w, h } = getCanvasSize();
+            const domain = canvasToDomain(px, py, viewport, w, h);
+            const newPoint = applyConstraints(domain.x, domain.y, e.ctrlKey);
+            onChange(newPoint);
+            return;
+        }
+        // Hover detection
+        const { px, py } = getCanvasPointerPosition(e, canvas);
+        const { w, h } = getCanvasSize();
+        const dist = hitTestPoint(px, py, point, viewport, w, h, 12);
+        const hovering = dist !== Infinity;
+        setIsHovered(hovering);
+        if (disabled) {
+            canvas.style.cursor = 'not-allowed';
+        }
+        else if (readOnly) {
+            canvas.style.cursor = 'default';
+        }
+        else if (hovering) {
+            canvas.style.cursor = 'grab';
+        }
+        else {
+            canvas.style.cursor = 'crosshair';
+        }
+    }, [
+        canvasRef,
+        viewport,
+        point,
+        disabled,
+        readOnly,
+        getCanvasSize,
+        applyConstraints,
+        onChange,
+    ]);
+    const onPointerUp = useCallback((e) => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        if (isDraggingRef.current) {
+            isDraggingRef.current = false;
+            setForceUpdate(n => n + 1);
+            canvas.releasePointerCapture(e.pointerId);
+            // Compute final point for onChangeComplete
+            const { px, py } = getCanvasPointerPosition(e, canvas);
+            const { w, h } = getCanvasSize();
+            const domain = canvasToDomain(px, py, viewport, w, h);
+            const finalPoint = applyConstraints(domain.x, domain.y, e.ctrlKey);
+            onChangeComplete?.(finalPoint);
+        }
+    }, [canvasRef, viewport, getCanvasSize, applyConstraints, onChangeComplete]);
+    const onKeyDown = useCallback((e) => {
+        if (disabled || readOnly)
+            return;
+        const xRange = domainX[1] - domainX[0];
+        const yRange = domainY[1] - domainY[0];
+        let baseStep;
+        if (step) {
+            const [stepX] = Array.isArray(step) ? step : [step, step];
+            baseStep = stepX;
+        }
+        else {
+            baseStep = xRange / gridSubdivisions;
+        }
+        const fineMultiplier = e.shiftKey ? 0.1 : 1;
+        const xStep = baseStep * fineMultiplier;
+        const yStep = (step
+            ? Array.isArray(step)
+                ? step[1]
+                : step
+            : yRange / gridSubdivisions) * fineMultiplier;
+        let newX = point.x;
+        let newY = point.y;
+        let handled = false;
+        switch (e.key) {
+            case 'ArrowLeft':
+                newX -= xStep;
+                handled = true;
+                break;
+            case 'ArrowRight':
+                newX += xStep;
+                handled = true;
+                break;
+            case 'ArrowUp':
+                newY += yStep;
+                handled = true;
+                break;
+            case 'ArrowDown':
+                newY -= yStep;
+                handled = true;
+                break;
+            case 'Home': {
+                // Reset to center of domain
+                newX = (domainX[0] + domainX[1]) / 2;
+                newY = (domainY[0] + domainY[1]) / 2;
+                handled = true;
+                break;
+            }
+            case '0': {
+                // Reset to origin
+                newX = 0;
+                newY = 0;
+                handled = true;
+                break;
+            }
+        }
+        if (!handled)
+            return;
+        e.preventDefault();
+        newX = roundToPrecision(newX, precision);
+        newY = roundToPrecision(newY, precision);
+        if (clampToRange) {
+            newX = clamp(newX, domainX[0], domainX[1]);
+            newY = clamp(newY, domainY[0], domainY[1]);
+        }
+        const newPoint = { x: newX, y: newY };
+        onChange(newPoint);
+        onChangeComplete?.(newPoint);
+    }, [
+        disabled,
+        readOnly,
+        point,
+        domainX,
+        domainY,
+        step,
+        gridSubdivisions,
+        precision,
+        clampToRange,
+        onChange,
+        onChangeComplete,
+    ]);
+    return {
+        isDragging: isDraggingRef.current,
+        isHovered,
+        handlers: {
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onKeyDown,
+        },
+    };
+}
+
+export { useCartesianInteraction };
+//# sourceMappingURL=useCartesianInteraction.js.map

package/dist/esm/components/controls/CartesianPicker/useCartesianInteraction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCartesianInteraction.js","sources":["../../../../../../src/components/controls/CartesianPicker/useCartesianInteraction.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAwCA;;AACkB;;AAElB;AAEM;AAGJ;;AAkBA;;AAGA;AACE;AACA;;AACA;AACA;AACF;;;;;;;AAUM;AACA;;AACK;;AAEL;AACA;AACA;AACA;;AAGF;AACA;;AAGE;AACA;;;AAIJ;;;;;;;;AASC;AAGH;;;AAGI;AACA;;AAEA;;AAGA;AACA;AAEA;;AAEA;;AAGF;;;;;;;;AASC;AAGH;AAEI;AACA;;AAEA;AACE;;AACA;;AAEA;AACA;;;;;AAMF;;AAEA;AACA;;;AAIE;;;AAEA;;;AAEA;;;AAEA;;AAEJ;;;;;;;;;AAUC;AAGH;AAEI;AACA;;AAEA;AACE;;AAEA;;AAGA;;AAEA;AACA;AACA;;AAEJ;AAIF;;;;;AAOI;;;;;;AAKE;;AAGF;AACA;;AAGI;AACE;AACA;AACF;AAEJ;AACA;;AAGA;AACE;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAME;AACA;;;;;;;;;;;;AAaJ;;;AAGA;AACA;;AAGE;AACA;;;;AAKF;AACF;;;;;;;;;;;;AAaC;;;;AAMD;;;;;AAKC;;AAEL;;"}

package/dist/esm/components/controls/CartesianPicker/useCartesianRenderer.js

@@ -0,0 +1,122 @@
+"use client";
+import { useCallback } from 'react';
+import { drawGrid, drawDomainBounds, drawOriginAxes, drawAxisLabels, drawCrosshair, drawPointMarker } from '../../primitives/canvas/canvasDrawing.js';
+import { resolveCanvasTheme } from '../../primitives/canvas/canvasTheme.js';
+import { useCanvasRenderer } from '../../primitives/canvas/useCanvasRenderer.js';
+import '../../primitives/canvas/CanvasContainer.js';
+
+function useCartesianRenderer(options) {
+    const { canvasRef, point, viewport, domainX, domainY, showGrid, gridSubdivisions, showAxisLabels, showOriginAxes: showOrigin, showCrosshair, crosshairStyle, labelX, labelY, markerRadius, disabled, isHovered, isDragging, renderBackground, } = options;
+    const draw = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+        const rect = canvas.getBoundingClientRect();
+        const w = rect.width;
+        const h = rect.height;
+        // Set canvas resolution for retina
+        if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
+            canvas.width = w * dpr;
+            canvas.height = h * dpr;
+            ctx.scale(dpr, dpr);
+        }
+        else {
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        }
+        const theme = resolveCanvasTheme(canvas);
+        const opacity = disabled ? 0.4 : 1;
+        const domain = { domainX, domainY };
+        // 1. Clear background
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = theme.backgroundSecondary;
+        ctx.fillRect(0, 0, w, h);
+        // 2. Custom background
+        if (renderBackground) {
+            ctx.save();
+            renderBackground(ctx, {
+                width: w,
+                height: h,
+                viewport,
+                domainX,
+                domainY,
+            });
+            ctx.restore();
+        }
+        // 3. Grid lines
+        if (showGrid) {
+            drawGrid(ctx, w, h, theme, {
+                subdivisions: gridSubdivisions,
+                domain,
+                viewport,
+                opacity,
+            });
+        }
+        // 4. Domain bounds
+        drawDomainBounds(ctx, w, h, theme, domain, viewport, opacity);
+        // 5. Origin axes
+        if (showOrigin) {
+            drawOriginAxes(ctx, w, h, theme, viewport, opacity);
+        }
+        // 6. Axis labels
+        if (showAxisLabels) {
+            drawAxisLabels(ctx, w, h, theme, {
+                subdivisions: gridSubdivisions,
+                domain,
+                viewport,
+                opacity,
+                labelX,
+                labelY,
+            });
+        }
+        // 7. Crosshair
+        if (showCrosshair) {
+            drawCrosshair(ctx, w, h, theme, {
+                point,
+                viewport,
+                lineStyle: crosshairStyle,
+                opacity,
+            });
+        }
+        // 8. Point marker
+        drawPointMarker(ctx, w, h, theme, {
+            point,
+            viewport,
+            radius: markerRadius,
+            hovered: isHovered,
+            dragging: isDragging,
+            opacity,
+        });
+        ctx.globalAlpha = 1;
+    }, [
+        canvasRef,
+        point,
+        viewport,
+        domainX,
+        domainY,
+        showGrid,
+        gridSubdivisions,
+        showAxisLabels,
+        showOrigin,
+        showCrosshair,
+        crosshairStyle,
+        labelX,
+        labelY,
+        markerRadius,
+        disabled,
+        isHovered,
+        isDragging,
+        renderBackground,
+    ]);
+    useCanvasRenderer({
+        draw,
+        deps: [draw],
+        paused: false,
+    });
+}
+
+export { useCartesianRenderer };
+//# sourceMappingURL=useCartesianRenderer.js.map

package/dist/esm/components/controls/CartesianPicker/useCartesianRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCartesianRenderer.js","sources":["../../../../../../src/components/controls/CartesianPicker/useCartesianRenderer.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AA6CM;AAGJ;AAqBA;AACE;AACA;;;AAGA;;AAEA;AAEA;AACA;AACA;;AAGA;AACE;AACA;AACA;;;AAEA;;AAGF;;AAEA;;AAGA;AACA;;;;;;AAOI;AACA;;;;AAID;;;;;;AAOC;;;;AAID;;;AAIH;;;AAIE;;;;;AAME;;;;;;AAMD;;;;;;;AAQC;;AAED;;;;;;AAOD;AACA;AACA;;AAED;AAED;AACF;;;;;;;;;;;;;;;;;;;AAmBC;AAED;;;AAGE;AACD;AACH;;"}

package/dist/esm/components/controls/ColorPicker/AlphaSlider.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import { alphaTrackStyle, alphaGradientStyle, alphaThumbStyle } from './ColorPicker.css.js';
+
+const AlphaSlider = ({ alpha, color, onChange, onChangeComplete, }) => {
+    const trackRef = useRef(null);
+    const getAlpha = useCallback((clientX) => {
+        const rect = trackRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+        const a = Number((x / rect.width).toFixed(2));
+        onChange(a);
+    }, [onChange]);
+    const handlePointerDown = useCallback((e) => {
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        getAlpha(e.clientX);
+    }, [getAlpha]);
+    const handlePointerMove = useCallback((e) => {
+        if (e.buttons === 0)
+            return;
+        getAlpha(e.clientX);
+    }, [getAlpha]);
+    const handlePointerUp = useCallback(() => {
+        onChangeComplete?.();
+    }, [onChangeComplete]);
+    const handleKeyDown = useCallback((e) => {
+        const step = e.shiftKey ? 0.01 : 0.05;
+        let newAlpha = alpha;
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                newAlpha = Math.min(1, alpha + step);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                newAlpha = Math.max(0, alpha - step);
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        onChange(Number(newAlpha.toFixed(2)));
+    }, [alpha, onChange]);
+    const thumbPosition = `${alpha * 100}%`;
+    return (jsxs("div", { ref: trackRef, className: alphaTrackStyle, role: "slider", tabIndex: 0, "aria-label": "Opacity", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(alpha * 100), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onKeyDown: handleKeyDown, children: [jsx("div", { className: alphaGradientStyle, style: {
+                    background: `linear-gradient(to right, transparent, ${color})`,
+                } }), jsx("div", { className: alphaThumbStyle, style: { left: thumbPosition } })] }));
+};
+AlphaSlider.displayName = 'AlphaSlider';
+
+export { AlphaSlider };
+//# sourceMappingURL=AlphaSlider.js.map

package/dist/esm/components/controls/ColorPicker/AlphaSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlphaSlider.js","sources":["../../../../../../src/components/controls/ColorPicker/AlphaSlider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAgBO;AAML;AAEA;;AAGI;;;AAGA;;AAEF;AAIF;;;AAII;AACF;AAIF;AAEI;;AACA;AACF;AAIF;;AAEA;AAEA;AAEI;;AAGA;AACE;AACA;;;AAGA;AACA;;;AAGA;;;;;AAMJ;AAIF;;;AAqBO;AAKT;AAEA;;"}

package/dist/esm/components/controls/ColorPicker/ColorArea.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import { rgbToHex, hsvToRgb } from './colorUtils.js';
+import { colorAreaStyle, saturationGradientStyle, valueGradientStyle, colorAreaThumbStyle } from './ColorPicker.css.js';
+
+const ColorArea = ({ hue, saturation, value, onChange, onChangeComplete, }) => {
+    const areaRef = useRef(null);
+    const getSV = useCallback((clientX, clientY) => {
+        const rect = areaRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+        const y = Math.max(0, Math.min(clientY - rect.top, rect.height));
+        const s = Math.round((x / rect.width) * 100);
+        const v = Math.round((1 - y / rect.height) * 100);
+        onChange(s, v);
+    }, [onChange]);
+    const handlePointerDown = useCallback((e) => {
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        getSV(e.clientX, e.clientY);
+    }, [getSV]);
+    const handlePointerMove = useCallback((e) => {
+        if (e.buttons === 0)
+            return;
+        getSV(e.clientX, e.clientY);
+    }, [getSV]);
+    const handlePointerUp = useCallback(() => {
+        onChangeComplete?.();
+    }, [onChangeComplete]);
+    const handleKeyDown = useCallback((e) => {
+        const step = e.shiftKey ? 1 : 5;
+        let newS = saturation;
+        let newV = value;
+        switch (e.key) {
+            case 'ArrowRight':
+                newS = Math.min(100, saturation + step);
+                break;
+            case 'ArrowLeft':
+                newS = Math.max(0, saturation - step);
+                break;
+            case 'ArrowUp':
+                newV = Math.min(100, value + step);
+                break;
+            case 'ArrowDown':
+                newV = Math.max(0, value - step);
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        onChange(newS, newV);
+    }, [saturation, value, onChange]);
+    const { r, g, b } = hsvToRgb(hue, 100, 100);
+    const hueColor = rgbToHex(r, g, b);
+    const thumbX = `${saturation}%`;
+    const thumbY = `${100 - value}%`;
+    return (jsxs("div", { ref: areaRef, className: colorAreaStyle, role: "slider", tabIndex: 0, "aria-label": "Color saturation and brightness", "aria-valuetext": `Saturation ${saturation}%, Brightness ${value}%`, style: { backgroundColor: hueColor }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onKeyDown: handleKeyDown, children: [jsx("div", { className: saturationGradientStyle }), jsx("div", { className: valueGradientStyle }), jsx("div", { className: colorAreaThumbStyle, style: { left: thumbX, top: thumbY } })] }));
+};
+ColorArea.displayName = 'ColorArea';
+
+export { ColorArea };
+//# sourceMappingURL=ColorArea.js.map

package/dist/esm/components/controls/ColorPicker/ColorArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorArea.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorArea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAmBO;AAOL;;;AAKI;;;;AAKA;AACA;AACA;AACF;AAIF;;;;AAKE;AAIF;AAEI;;;AAEF;AAIF;;AAEA;AAEA;AAEI;;;AAIA;AACE;;;AAGA;;;AAGA;;;AAGA;;;AAGA;;;;AAKF;;AAKJ;;AAEA;AACA;AAEA;AAsBF;AAEA;;"}

package/dist/esm/components/controls/ColorPicker/ColorInputs.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { hsvToRgb, rgbToHex, hsvToHsl, rgbToHsv, hslToHsv } from './colorUtils.js';
+import { EyeDropper } from './EyeDropper.js';
+import { inputsRowStyle, modeToggleStyle, inputColStyle, smallInputStyle, inputLabelStyle } from './ColorPicker.css.js';
+
+const ColorInputs = ({ hsva, inputModes, defaultInputMode, showAlpha, showEyeDropper = false, disabled = false, onSetFromString, onSetAlpha, onSetHue, onSetSaturationValue, }) => {
+    const [mode, setMode] = useState(defaultInputMode);
+    const cycleMode = useCallback(() => {
+        const idx = inputModes.indexOf(mode);
+        const next = inputModes[(idx + 1) % inputModes.length];
+        if (next)
+            setMode(next);
+    }, [mode, inputModes]);
+    const { r, g, b } = hsvToRgb(hsva.h, hsva.s, hsva.v);
+    const hex = rgbToHex(r, g, b).replace('#', '');
+    const hsl = hsvToHsl(hsva.h, hsva.s, hsva.v);
+    const handleHexChange = useCallback((e) => {
+        const val = e.target.value.replace('#', '');
+        if (/^[0-9a-fA-F]{6}$/.test(val)) {
+            onSetFromString(`#${val}`);
+        }
+    }, [onSetFromString]);
+    const handleHexBlur = useCallback((e) => {
+        const val = e.target.value.replace('#', '');
+        if (/^[0-9a-fA-F]{3}$/.test(val) || /^[0-9a-fA-F]{6}$/.test(val)) {
+            onSetFromString(`#${val}`);
+        }
+    }, [onSetFromString]);
+    const handleRgbChange = useCallback((channel, val) => {
+        const num = Math.max(0, Math.min(255, parseInt(val, 10)));
+        if (isNaN(num))
+            return;
+        const newR = channel === 'r' ? num : r;
+        const newG = channel === 'g' ? num : g;
+        const newB = channel === 'b' ? num : b;
+        const newHsv = rgbToHsv(newR, newG, newB);
+        onSetHue(newHsv.h);
+        onSetSaturationValue(newHsv.s, newHsv.v);
+    }, [r, g, b, onSetHue, onSetSaturationValue]);
+    const handleHslChange = useCallback((channel, val) => {
+        const num = parseInt(val, 10);
+        if (isNaN(num))
+            return;
+        const newH = channel === 'h' ? Math.max(0, Math.min(360, num)) : hsl.h;
+        const newS = channel === 's' ? Math.max(0, Math.min(100, num)) : hsl.s;
+        const newL = channel === 'l' ? Math.max(0, Math.min(100, num)) : hsl.l;
+        const newHsv = hslToHsv(newH, newS, newL);
+        onSetHue(newHsv.h);
+        onSetSaturationValue(newHsv.s, newHsv.v);
+    }, [hsl.h, hsl.s, hsl.l, onSetHue, onSetSaturationValue]);
+    const handleAlphaChange = useCallback((val) => {
+        const num = Math.max(0, Math.min(100, parseInt(val, 10)));
+        if (isNaN(num))
+            return;
+        onSetAlpha(num / 100);
+    }, [onSetAlpha]);
+    return (jsx("div", { children: jsxs("div", { className: inputsRowStyle, children: [inputModes.length > 1 && (jsx("button", { type: "button", className: modeToggleStyle, onClick: cycleMode, children: mode.toUpperCase() })), mode === 'hex' && (jsxs("div", { className: inputColStyle, children: [jsx("input", { className: smallInputStyle, defaultValue: hex, maxLength: 6, onChange: handleHexChange, onBlur: handleHexBlur, "aria-label": "Hex color" }, hex), jsx("span", { className: inputLabelStyle, children: "HEX" })] })), mode === 'rgb' && (jsxs(Fragment, { children: [jsxs("div", { className: inputColStyle, children: [jsx("input", { className: smallInputStyle, type: "number", min: 0, max: 255, value: r, onChange: e => handleRgbChange('r', e.target.value), "aria-label": "Red" }), jsx("span", { className: inputLabelStyle, children: "R" })] }), jsxs("div", { className: inputColStyle, children: [jsx("input", { className: smallInputStyle, type: "number", min: 0, max: 255, value: g, onChange: e => handleRgbChange('g', e.target.value), "aria-label": "Green" }), jsx("span", { className: inputLabelStyle, children: "G" })] }), jsxs("div", { className: inputColStyle, children: [jsx("input", { className: smallInputStyle, type: "number", min: 0, max: 255, value: b, onChange: e => handleRgbChange('b', e.target.value), "aria-label": "Blue" }), jsx("span", { className: inputLabelStyle, children: "B" })] })] })), mode === 'hsl' && (jsxs(Fragment, { children: [jsxs("div", { className: inputColStyle, children: [jsx("input", { className: smallInputStyle, type: "number", min: 0, max: 360, value: hsl.h, onChange: e => handleHslChange('h', e.target.value), "aria-label": "Hue" }), jsx("span", { className: inputLabelStyle, children: "H" })] }), jsxs("div", { className: inputColStyle, children: [jsx("input", { className: smallInputStyle, type: "number", min: 0, max: 100, value: hsl.s, onChange: e => handleHslChange('s', e.target.value), "aria-label": "Saturation" }), jsx("span", { className: inputLabelStyle, children: "S" })] }), jsxs("div", { className: inputColStyle, children: [jsx("input", { className: smallInputStyle, type: "number", min: 0, max: 100, value: hsl.l, onChange: e => handleHslChange('l', e.target.value), "aria-label": "Lightness" }), jsx("span", { className: inputLabelStyle, children: "L" })] })] })), showAlpha && (jsxs("div", { className: inputColStyle, children: [jsx("input", { className: smallInputStyle, type: "number", min: 0, max: 100, value: Math.round(hsva.a * 100), onChange: e => handleAlphaChange(e.target.value), "aria-label": "Alpha" }), jsx("span", { className: inputLabelStyle, children: "A" })] })), showEyeDropper && (jsx(EyeDropper, { onColorPick: onSetFromString, size: "sm", disabled: disabled }))] }) }));
+};
+ColorInputs.displayName = 'ColorInputs';
+
+export { ColorInputs };
+//# sourceMappingURL=ColorInputs.js.map

package/dist/esm/components/controls/ColorPicker/ColorInputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInputs.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorInputs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AA4BO;;AAcL;;AAEE;AACA;;AACF;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;AAIF;AAEI;AACA;AACE;;AAEJ;;;;;AAQE;AACA;AACA;;AAEA;;AAEF;;;;;AAQE;AACA;AACA;;AAEA;;AAEF;AAIF;;;;AAII;AACF;;AAuIJ;AAEA;;"}

package/dist/esm/components/controls/ColorPicker/ColorPalette.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { Collapsible } from '../../primitives/Collapsible/Collapsible.js';
+import { paletteContainerStyle, paletteRowStyle, paletteRowLabelStyle, paletteShadeColorStyle, paletteShadeRecipe } from './ColorPicker.css.js';
+
+const ColorPalette = ({ palette, currentColor, onSelect, title = 'Palette', defaultExpanded = false, }) => {
+    const handleSelect = useCallback((color) => {
+        onSelect(color);
+    }, [onSelect]);
+    const normalizedCurrent = currentColor.toLowerCase();
+    return (jsx(Collapsible, { trigger: title, defaultOpen: defaultExpanded, size: "sm", children: jsx("div", { className: paletteContainerStyle, role: "radiogroup", "aria-label": "Color palette", children: palette.map(color => (jsxs("div", { className: paletteRowStyle, children: [jsx("span", { className: paletteRowLabelStyle, children: color.name.slice(0, 2) }), color.shades.map(shade => (jsx("button", { type: "button", role: "radio", "aria-checked": shade.color.toLowerCase() === normalizedCurrent, "aria-label": `${color.name} ${shade.label}`, title: `${color.name} ${shade.label} (${shade.color})`, className: paletteShadeRecipe({
+                            selected: shade.color.toLowerCase() === normalizedCurrent,
+                        }), onClick: () => handleSelect(shade.color), children: jsx("span", { className: paletteShadeColorStyle, style: { background: shade.color } }) }, shade.color)))] }, color.name))) }) }));
+};
+ColorPalette.displayName = 'ColorPalette';
+
+export { ColorPalette };
+//# sourceMappingURL=ColorPalette.js.map

package/dist/esm/components/controls/ColorPicker/ColorPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPalette.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorPalette.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AA8BE;;AAGE;AAIF;;;;AAsCF;AAEA;;"}

package/dist/esm/components/controls/ColorPicker/ColorPicker.css.js

@@ -0,0 +1,34 @@
+import './../../../assets/src/components/controls/ColorPicker/ColorPicker.css.ts.vanilla-Do5nbdgO.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var alphaGradientStyle = 'ColorPicker_alphaGradientStyle__11dms9oa';
+var alphaThumbStyle = 'ColorPicker_alphaThumbStyle__11dms9ob';
+var alphaTrackStyle = 'ColorPicker_alphaTrackStyle__11dms9o9';
+var colorAreaStyle = 'ColorPicker_colorAreaStyle__11dms9o3';
+var colorAreaThumbStyle = 'ColorPicker_colorAreaThumbStyle__11dms9o6';
+var eyeDropperRecipe = createRuntimeFn({defaultClassName:'ColorPicker_eyeDropperRecipe__11dms9o12',variantClassNames:{size:{sm:'ColorPicker_eyeDropperRecipe_size_sm__11dms9o13',md:'ColorPicker_eyeDropperRecipe_size_md__11dms9o14',lg:'ColorPicker_eyeDropperRecipe_size_lg__11dms9o15'},disabled:{true:'ColorPicker_eyeDropperRecipe_disabled_true__11dms9o16',false:'ColorPicker_eyeDropperRecipe_disabled_false__11dms9o17'}},defaultVariants:{size:'md',disabled:false},compoundVariants:[]});
+var hueThumbStyle = 'ColorPicker_hueThumbStyle__11dms9o8';
+var hueTrackStyle = 'ColorPicker_hueTrackStyle__11dms9o7';
+var inputColStyle = 'ColorPicker_inputColStyle__11dms9ou';
+var inputLabelStyle = 'ColorPicker_inputLabelStyle__11dms9ot';
+var inputsRowStyle = 'ColorPicker_inputsRowStyle__11dms9oq';
+var labelStyle = 'ColorPicker_labelStyle__11dms9o2';
+var modeToggleStyle = 'ColorPicker_modeToggleStyle__11dms9or';
+var paletteContainerStyle = 'ColorPicker_paletteContainerStyle__11dms9ov';
+var paletteRowLabelStyle = 'ColorPicker_paletteRowLabelStyle__11dms9ox';
+var paletteRowStyle = 'ColorPicker_paletteRowStyle__11dms9ow';
+var paletteShadeColorStyle = 'ColorPicker_paletteShadeColorStyle__11dms9o11';
+var paletteShadeRecipe = createRuntimeFn({defaultClassName:'ColorPicker_paletteShadeRecipe__11dms9oy',variantClassNames:{selected:{true:'ColorPicker_paletteShadeRecipe_selected_true__11dms9oz',false:'ColorPicker_paletteShadeRecipe_selected_false__11dms9o10'}},defaultVariants:{selected:false},compoundVariants:[]});
+var pickerBodyStyle = 'ColorPicker_pickerBodyStyle__11dms9o0';
+var presetButtonRecipe = createRuntimeFn({defaultClassName:'ColorPicker_presetButtonRecipe__11dms9om',variantClassNames:{selected:{true:'ColorPicker_presetButtonRecipe_selected_true__11dms9on',false:'ColorPicker_presetButtonRecipe_selected_false__11dms9oo'}},defaultVariants:{selected:false},compoundVariants:[]});
+var presetColorStyle = 'ColorPicker_presetColorStyle__11dms9op';
+var presetsGridStyle = 'ColorPicker_presetsGridStyle__11dms9ol';
+var saturationGradientStyle = 'ColorPicker_saturationGradientStyle__11dms9o4';
+var smallInputStyle = 'ColorPicker_smallInputStyle__11dms9os';
+var swatchColorStyle = 'ColorPicker_swatchColorStyle__11dms9ok';
+var swatchRecipe = createRuntimeFn({defaultClassName:'ColorPicker_swatchRecipe__11dms9oc',variantClassNames:{size:{sm:'ColorPicker_swatchRecipe_size_sm__11dms9od',md:'ColorPicker_swatchRecipe_size_md__11dms9oe',lg:'ColorPicker_swatchRecipe_size_lg__11dms9of'},shape:{square:'ColorPicker_swatchRecipe_shape_square__11dms9og',circle:'ColorPicker_swatchRecipe_shape_circle__11dms9oh'},disabled:{true:'ColorPicker_swatchRecipe_disabled_true__11dms9oi',false:'ColorPicker_swatchRecipe_disabled_false__11dms9oj'}},defaultVariants:{size:'md',shape:'square',disabled:false},compoundVariants:[]});
+var triggerRowStyle = 'ColorPicker_triggerRowStyle__11dms9o1';
+var valueGradientStyle = 'ColorPicker_valueGradientStyle__11dms9o5';
+
+export { alphaGradientStyle, alphaThumbStyle, alphaTrackStyle, colorAreaStyle, colorAreaThumbStyle, eyeDropperRecipe, hueThumbStyle, hueTrackStyle, inputColStyle, inputLabelStyle, inputsRowStyle, labelStyle, modeToggleStyle, paletteContainerStyle, paletteRowLabelStyle, paletteRowStyle, paletteShadeColorStyle, paletteShadeRecipe, pickerBodyStyle, presetButtonRecipe, presetColorStyle, presetsGridStyle, saturationGradientStyle, smallInputStyle, swatchColorStyle, swatchRecipe, triggerRowStyle, valueGradientStyle };
+//# sourceMappingURL=ColorPicker.css.js.map

package/dist/esm/components/controls/ColorPicker/ColorPicker.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}