entangle-ui 0.8.2 → 0.10.0

package/dist/esm/components/Icons/UnlinkIcon.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Unlink icon — a broken chain.
+ *
+ * Indicates that two values are decoupled (no longer linked). Pair with
+ * `LinkIcon` to render a toggle: link → unlink. Common in coordinate
+ * inputs, transform locks, color-channel groups.
+ *
+ * @example
+ * ```tsx
+ * <IconButton aria-label="Unlink axes">
+ *   <UnlinkIcon />
+ * </IconButton>
+ * ```
+ */
+const UnlinkIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M9 17H7A5 5 0 0 1 7 7h2" }), jsx("path", { d: "M15 7h2a5 5 0 0 1 0 10h-2" }), jsx("line", { x1: "3", y1: "3", x2: "21", y2: "21" })] }));
+});
+UnlinkIcon.displayName = 'UnlinkIcon';
+
+export { UnlinkIcon };
+//# sourceMappingURL=UnlinkIcon.js.map

package/dist/esm/components/Icons/UnlinkIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnlinkIcon.js","sources":["../../../../../src/components/Icons/UnlinkIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAQA;;;;;;;;;;;;;AAaG;AACI;AAEH;AAOF;AAGF;;"}

package/dist/esm/components/Icons/UnlockIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnlockIcon.js","sources":["../../../../../src/components/Icons/UnlockIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAMF;AAGF;;"}
+{"version":3,"file":"UnlockIcon.js","sources":["../../../../../src/components/Icons/UnlockIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AASA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAMF;AAGF;;"}

package/dist/esm/components/Icons/UploadIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadIcon.js","sources":["../../../../../src/components/Icons/UploadIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAOF;AAGF;;"}
+{"version":3,"file":"UploadIcon.js","sources":["../../../../../src/components/Icons/UploadIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AASA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAOF;AAGF;;"}

package/dist/esm/components/Icons/UserIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserIcon.js","sources":["../../../../../src/components/Icons/UserIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAQL;AAGF;;"}
+{"version":3,"file":"UserIcon.js","sources":["../../../../../src/components/Icons/UserIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AASA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAQL;AAGF;;"}

package/dist/esm/components/Icons/UsersIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"UsersIcon.js","sources":["../../../../../src/components/Icons/UsersIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAEH;AAQF;AAGF;;"}
+{"version":3,"file":"UsersIcon.js","sources":["../../../../../src/components/Icons/UsersIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAQA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAEH;AAQF;AAGF;;"}

package/dist/esm/components/Icons/WarningIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningIcon.js","sources":["../../../../../src/components/Icons/WarningIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAUP;AAEA;;"}
+{"version":3,"file":"WarningIcon.js","sources":["../../../../../src/components/Icons/WarningIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AASA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAUP;AAEA;;"}

package/dist/esm/components/Icons/ZoomInIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomInIcon.js","sources":["../../../../../src/components/Icons/ZoomInIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAQF;AAGF;;"}
+{"version":3,"file":"ZoomInIcon.js","sources":["../../../../../src/components/Icons/ZoomInIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AASA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAQF;AAGF;;"}

package/dist/esm/components/Icons/ZoomOutIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomOutIcon.js","sources":["../../../../../src/components/Icons/ZoomOutIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAUP;AAEA;;"}
+{"version":3,"file":"ZoomOutIcon.js","sources":["../../../../../src/components/Icons/ZoomOutIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AASA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAUP;AAEA;;"}

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

@@ -1,13 +1,13 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useMemo, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useRef, useState, useMemo, useCallback } from 'react';
+import { CanvasContainer } from '../../primitives/canvas/CanvasContainer.js';
 import { cx } from '../../../utils/cx.js';
 import { roundToPrecision } from '../../../utils/mathUtils.js';
-import { CanvasContainer } from '../../primitives/canvas/CanvasContainer.js';
+import { bottomBarStyle, pickerWidthVar, cartesianPickerRecipe } from './CartesianPicker.css.js';
 import { useCartesianInteraction } from './useCartesianInteraction.js';
 import { useCartesianRenderer } from './useCartesianRenderer.js';
-import { bottomBarStyle, pickerWidthVar, cartesianPickerRecipe } from './CartesianPicker.css.js';
 
 const CartesianPicker = ({ value, defaultValue, domainX = [-1, 1], domainY = [-1, 1], showGrid = true, gridSubdivisions = 4, showAxisLabels = true, showOriginAxes = true, showCrosshair = true, crosshairStyle = 'dashed', labelX, labelY, markerRadius = 6, snapToGrid = false, step, clampToRange = true, precision = 2, width = 200, height = 200, responsive = false, disabled = false, readOnly = false, onChange, onChangeComplete, renderBackground, renderBottomBar, className, testId, id, style, ...rest }) => {
     const canvasRef = useRef(null);

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

@@ -1 +1 @@
-{"version":3,"file":"CartesianPicker.js","sources":["../../../../../../src/components/controls/CartesianPicker/CartesianPicker.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAoBO;AAiCL;;;AAOA;;AAMA;;;;AAKI;AACF;AAIF;AAEI;AACF;;AAKF;;AAEE;AACA;AACA;;;;;;;AAOF;;;AAIE;;;;;;;;;;;;AAYA;AACA;AACD;;AAGD;;AAEE;;;;;;;;;;;;;;;;;AAiBD;;;;;AAQD;AAIM;;AAEE;;AAEH;AAsBK;;;;;;AAMD;AAKX;AAEA;;"}
+{"version":3,"file":"CartesianPicker.js","sources":["../../../../../../src/components/controls/CartesianPicker/CartesianPicker.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAuBO;AAiCL;;;AAOA;;AAMA;;;;AAKI;AACF;AAIF;AAEI;AACF;;AAKF;;AAEE;AACA;AACA;;;;;;;AAOF;;;AAIE;;;;;;;;;;;;AAYA;AACA;AACD;;AAGD;;AAEE;;;;;;;;;;;;;;;;;AAiBD;;;;;AAQD;AAIM;;AAEE;;AAEH;AAsBK;;;;;;AAMD;AAKX;AAEA;;"}

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

@@ -1,7 +1,7 @@
 "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 { clamp, roundToPrecision } from '../../../utils/mathUtils.js';
 
 function snapValue(value, step) {
     if (step === 0)
@@ -11,8 +11,10 @@ function snapValue(value, 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);
+    // Ref drives synchronous reads inside the pointer handlers; the state mirror
+    // is the value exposed for rendering (kept in sync on drag start/end).
     const isDraggingRef = useRef(false);
-    const [, setForceUpdate] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
     const getCanvasSize = useCallback(() => {
         const canvas = canvasRef.current;
         if (!canvas)
@@ -63,7 +65,7 @@ function useCartesianInteraction(options) {
         const domain = canvasToDomain(px, py, viewport, w, h);
         const newPoint = applyConstraints(domain.x, domain.y, e.ctrlKey);
         isDraggingRef.current = true;
-        setForceUpdate(n => n + 1);
+        setIsDragging(true);
         canvas.setPointerCapture(e.pointerId);
         onChange(newPoint);
     }, [
@@ -123,7 +125,7 @@ function useCartesianInteraction(options) {
             return;
         if (isDraggingRef.current) {
             isDraggingRef.current = false;
-            setForceUpdate(n => n + 1);
+            setIsDragging(false);
             canvas.releasePointerCapture(e.pointerId);
             // Compute final point for onChangeComplete
             const { px, py } = getCanvasPointerPosition(e, canvas);
@@ -214,7 +216,7 @@ function useCartesianInteraction(options) {
         onChangeComplete,
     ]);
     return {
-        isDragging: isDraggingRef.current,
+        isDragging,
         isHovered,
         handlers: {
             onPointerDown,

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

@@ -1 +1 @@
-{"version":3,"file":"useCartesianInteraction.js","sources":["../../../../../../src/components/controls/CartesianPicker/useCartesianInteraction.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AA2CA;;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;;"}
+{"version":3,"file":"useCartesianInteraction.js","sources":["../../../../../../src/components/controls/CartesianPicker/useCartesianInteraction.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AA6CA;;AACkB;;AAElB;AAEM;AAGJ;;;;AAoBA;;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.map

@@ -1 +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;;"}
+{"version":3,"file":"useCartesianRenderer.js","sources":["../../../../../../src/components/controls/CartesianPicker/useCartesianRenderer.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA+CM;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.map

@@ -1 +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;;"}
+{"version":3,"file":"AlphaSlider.js","sources":["../../../../../../src/components/controls/ColorPicker/AlphaSlider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAiBO;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

@@ -1,8 +1,8 @@
 "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';
+import { rgbToHex, hsvToRgb } from './colorUtils.js';
 
 const ColorArea = ({ hue, saturation, value, onChange, onChangeComplete, }) => {
     const areaRef = useRef(null);
@@ -56,7 +56,7 @@ const ColorArea = ({ hue, saturation, value, onChange, onChangeComplete, }) => {
     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 } })] }));
+    return (jsxs("div", { ref: areaRef, className: colorAreaStyle, role: "slider", tabIndex: 0, "aria-label": "Color saturation and brightness", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": value, "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';
 

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

@@ -1 +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;;"}
+{"version":3,"file":"ColorArea.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorArea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAoBO;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;AAyBF;AAEA;;"}

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

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
+import { inputsRowStyle, modeToggleStyle, inputColStyle, smallInputStyle, inputLabelStyle } from './ColorPicker.css.js';
 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);
@@ -56,7 +56,21 @@ const ColorInputs = ({ hsva, inputModes, defaultInputMode, showAlpha, showEyeDro
             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 }))] }) }));
+    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';
 

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

@@ -1 +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;;"}
+{"version":3,"file":"ColorInputs.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorInputs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AA8BO;;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;;;AAuCY;;AAcA;;;;AAiCA;;AAcA;;;AA+BA;AACF;AAiBd;AAEA;;"}

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

@@ -11,7 +11,9 @@ const ColorPalette = ({ palette, currentColor, onSelect, title = 'Palette', defa
     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))) }) }));
+                        }), onClick: () => {
+                            handleSelect(shade.color);
+                        }, children: jsx("span", { className: paletteShadeColorStyle, style: { background: shade.color } }) }, shade.color)))] }, color.name))) }) }));
 };
 ColorPalette.displayName = 'ColorPalette';
 

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

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

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

@@ -2,20 +2,20 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { Popover } from '../../primitives/Popover/Popover.js';
-import { PopoverTrigger } from '../../primitives/Popover/PopoverTrigger.js';
 import { PopoverContent } from '../../primitives/Popover/PopoverContent.js';
-import { ColorSwatch } from './ColorSwatch.js';
-import { ColorArea } from './ColorArea.js';
-import { HueSlider } from './HueSlider.js';
+import { PopoverTrigger } from '../../primitives/Popover/PopoverTrigger.js';
 import { AlphaSlider } from './AlphaSlider.js';
+import { ColorArea } from './ColorArea.js';
 import { ColorInputs } from './ColorInputs.js';
-import { ColorPresets } from './ColorPresets.js';
 import { ColorPalette } from './ColorPalette.js';
+import { pickerBodyStyle, triggerRowStyle, labelStyle } from './ColorPicker.css.js';
+import { ColorPresets } from './ColorPresets.js';
+import { ColorSwatch } from './ColorSwatch.js';
+import { HueSlider } from './HueSlider.js';
 import { MATERIAL_PALETTE } from './palettes/material.js';
 import { TAILWIND_PALETTE } from './palettes/tailwind.js';
 import { VINTAGE_PALETTE, SKIN_TONES_PALETTE, MONOCHROME_PALETTE, NEON_PALETTE, EARTH_PALETTE, PASTEL_PALETTE } from './palettes/professional.js';
 import { useColor } from './useColor.js';
-import { pickerBodyStyle, triggerRowStyle, labelStyle } from './ColorPicker.css.js';
 
 // --- Constants ---
 const PALETTE_MAP = {

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorPicker.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;AAEO;;;;;;;AA6BJ;AAED;AAGE;AAAc;AACd;AACE;;;AAGF;;;AAGA;AACF;;;;;AAsEA;AAmBF;AAEA;;"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorPicker.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmCA;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;AAEO;;;;;;;AA6BJ;AAED;AAGE;AAAc;AACd;AACE;;;AAGF;;;AAGA;AACF;;;;;AAsEA;AAmBF;AAEA;;"}

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

@@ -10,7 +10,9 @@ const ColorPresets = ({ presets, currentColor, onSelect, }) => {
     const normalizedCurrent = currentColor.toLowerCase();
     return (jsx("div", { className: presetsGridStyle, role: "radiogroup", "aria-label": "Color presets", children: presets.map((preset, i) => (jsx("button", { type: "button", role: "radio", "aria-checked": preset.color.toLowerCase() === normalizedCurrent, "aria-label": preset.label ?? preset.color, title: preset.label ?? preset.color, className: presetButtonRecipe({
                 selected: preset.color.toLowerCase() === normalizedCurrent,
-            }), onClick: () => handleClick(preset.color), children: jsx("span", { className: presetColorStyle, style: { background: preset.color } }) }, `${preset.color}-${i}`))) }));
+            }), onClick: () => {
+                handleClick(preset.color);
+            }, children: jsx("span", { className: presetColorStyle, style: { background: preset.color } }) }, `${preset.color}-${i}`))) }));
 };
 ColorPresets.displayName = 'ColorPresets';
 

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPresets.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorPresets.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAgBO;AAKL;;AAGE;AAIF;AAEA;;AAgBS;AAWX;AAEA;;"}
+{"version":3,"file":"ColorPresets.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorPresets.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAkBO;AAKL;;AAGE;AAIF;AAEA;;AAgBS;AAEC;AACF;AAUV;AAEA;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorSwatch.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOO;AAaH;AAeF;AAGF;;"}
+{"version":3,"file":"ColorSwatch.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorSwatch.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAUO;AAaH;AAeF;AAGF;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"EyeDropper.js","sources":["../../../../../../src/components/controls/ColorPicker/EyeDropper.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkCA;AAEA;;;;;;;;;;AAUG;AACH;;AASE;AACE;;AAEA;;AAMI;;;AAIF;AAEJ;;AAGE;;AAGF;AAaF;AAEA;;"}
+{"version":3,"file":"EyeDropper.js","sources":["../../../../../../src/components/controls/ColorPicker/EyeDropper.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAqCA;AAEA;;;;;;;;;;AAUG;AACH;;AASE;AACE;;AAEA;;AAMI;;;AAIF;AAEJ;;AAGE;;AAGF;AAaF;AAEA;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.js","sources":["../../../../../../src/components/controls/ColorPicker/HueSlider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAWO;AAKL;AAEA;;AAGI;;;AAGA;;AAEF;AAIF;;;AAII;AACF;AAIF;AAEI;;AACA;AACF;AAIF;;AAEA;AAEA;AAEI;;AAGA;AACE;AACA;;;AAGA;AACA;;;AAGA;;;;;AAMJ;;;AAwBM;;;AAMV;AAEA;;"}
+{"version":3,"file":"HueSlider.js","sources":["../../../../../../src/components/controls/ColorPicker/HueSlider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAYO;AAKL;AAEA;;AAGI;;;AAGA;;AAEF;AAIF;;;AAII;AACF;AAIF;AAEI;;AACA;AACF;AAIF;;AAEA;AAEA;AAEI;;AAGA;AACE;AACA;;;AAGA;AACA;;;AAGA;;;;;AAMJ;;;AAwBM;;;AAMV;AAEA;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useColor.js","sources":["../../../../../../src/components/controls/ColorPicker/useColor.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAwCE;AAIA;AACA;AAIA;AAEA;;;;;;AAUA;;AAGE;;AAME;AACE;AACA;AACA;AACD;AACH;AAIF;;AAGE;AAIF;AAEI;;AAEF;AAIF;;;AAIA;;;AAGA;AAEA;;AAEE;AACF;AAEA;AACE;AACA;AACF;;;;;;;;;;;;;;AAgBF;;"}
+{"version":3,"file":"useColor.js","sources":["../../../../../../src/components/controls/ColorPicker/useColor.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AA0CE;AAIA;AACA;AAIA;AAEA;;;;;;AAUA;;AAGE;;AAME;AACE;AACA;AACA;AACD;AACH;AAIF;;AAGE;AAIF;AAEI;;AAEF;AAIF;;;AAIA;;;AAGA;AAEA;;AAEE;AACF;AAEA;AACE;AACA;AACF;;;;;;;;;;;;;;AAgBF;;"}

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

@@ -0,0 +1,20 @@
+import './../../../assets/src/components/controls/Combobox/Combobox.css.ts.vanilla-B7B5ttkq.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var checkmarkStyle = 'Combobox_checkmarkStyle__1pazsaxx';
+var chevronButtonStyle = 'Combobox_chevronButtonStyle__1pazsaxg';
+var chevronIconRecipe = createRuntimeFn({defaultClassName:'Combobox_chevronIconRecipe__1pazsaxh',variantClassNames:{open:{true:'Combobox_chevronIconRecipe_open_true__1pazsaxi',false:'Combobox_chevronIconRecipe_open_false__1pazsaxj'}},defaultVariants:{open:false},compoundVariants:[]});
+var clearButtonStyle = 'Combobox_clearButtonStyle__1pazsaxf';
+var containerStyle = 'Combobox_containerStyle__1pazsax0';
+var createRowStyle = 'Combobox_createRowStyle__1pazsaxy';
+var dropdownStyle = 'Combobox_dropdownStyle__1pazsaxl';
+var emptyMessageStyle = 'Combobox_emptyMessageStyle__1pazsaxw';
+var inputStyle = 'Combobox_inputStyle__1pazsaxe';
+var inputWrapperRecipe = createRuntimeFn({defaultClassName:'Combobox_inputWrapperRecipe__1pazsax1',variantClassNames:{size:{sm:'Combobox_inputWrapperRecipe_size_sm__1pazsax2',md:'Combobox_inputWrapperRecipe_size_md__1pazsax3',lg:'Combobox_inputWrapperRecipe_size_lg__1pazsax4'},variant:{'default':'Combobox_inputWrapperRecipe_variant_default__1pazsax5',ghost:'Combobox_inputWrapperRecipe_variant_ghost__1pazsax6',filled:'Combobox_inputWrapperRecipe_variant_filled__1pazsax7'},focused:{true:'Combobox_inputWrapperRecipe_focused_true__1pazsax8',false:'Combobox_inputWrapperRecipe_focused_false__1pazsax9'},error:{true:'Combobox_inputWrapperRecipe_error_true__1pazsaxa',false:'Combobox_inputWrapperRecipe_error_false__1pazsaxb'},disabled:{true:'Combobox_inputWrapperRecipe_disabled_true__1pazsaxc',false:'Combobox_inputWrapperRecipe_disabled_false__1pazsaxd'}},defaultVariants:{size:'md',variant:'default',focused:false,error:false,disabled:false},compoundVariants:[]});
+var optionDescriptionStyle = 'Combobox_optionDescriptionStyle__1pazsaxv';
+var optionItemRecipe = createRuntimeFn({defaultClassName:'Combobox_optionItemRecipe__1pazsaxn',variantClassNames:{active:{true:'Combobox_optionItemRecipe_active_true__1pazsaxo',false:'Combobox_optionItemRecipe_active_false__1pazsaxp'},selected:{true:'Combobox_optionItemRecipe_selected_true__1pazsaxq',false:'Combobox_optionItemRecipe_selected_false__1pazsaxr'},disabled:{true:'Combobox_optionItemRecipe_disabled_true__1pazsaxs',false:'Combobox_optionItemRecipe_disabled_false__1pazsaxt'}},defaultVariants:{active:false,selected:false,disabled:false},compoundVariants:[]});
+var optionLabelStyle = 'Combobox_optionLabelStyle__1pazsaxu';
+var optionsListStyle = 'Combobox_optionsListStyle__1pazsaxm';
+
+export { checkmarkStyle, chevronButtonStyle, chevronIconRecipe, clearButtonStyle, containerStyle, createRowStyle, dropdownStyle, emptyMessageStyle, inputStyle, inputWrapperRecipe, optionDescriptionStyle, optionItemRecipe, optionLabelStyle, optionsListStyle };
+//# sourceMappingURL=Combobox.css.js.map

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

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