entangle-ui 0.3.0 → 0.5.0

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

@@ -1,45 +1,8 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useCallback } from 'react';
-import styled from '@emotion/styled';
+import { alphaTrackStyle, alphaGradientStyle, alphaThumbStyle } from './ColorPicker.css.js';
 
-const StyledTrack = styled.div `
-  position: relative;
-  width: 100%;
-  height: 4px;
-  border-radius: ${props => props.theme.borderRadius.sm}px;
-  cursor: pointer;
-  user-select: none;
-  touch-action: none;
-
-  /* Checkerboard for transparency */
-  background-image:
-    linear-gradient(45deg, #ccc 25%, transparent 25%),
-    linear-gradient(-45deg, #ccc 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #ccc 75%),
-    linear-gradient(-45deg, transparent 75%, #ccc 75%);
-  background-size: 8px 8px;
-  background-position:
-    0 0,
-    0 4px,
-    4px -4px,
-    -4px 0px;
-`;
-const StyledGradient = styled.div `
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-`;
-const StyledThumb = styled.div `
-  position: absolute;
-  top: 50%;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 2px solid white;
-  box-shadow: ${props => props.theme.shadows.sm};
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-`;
 const AlphaSlider = ({ alpha, color, onChange, onChangeComplete, }) => {
     const trackRef = useRef(null);
     const getAlpha = useCallback((clientX) => {
@@ -82,9 +45,9 @@ const AlphaSlider = ({ alpha, color, onChange, onChangeComplete, }) => {
         onChange(Number(newAlpha.toFixed(2)));
     }, [alpha, onChange]);
     const thumbPosition = `${alpha * 100}%`;
-    return (jsxs(StyledTrack, { ref: trackRef, 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(StyledGradient, { style: {
+    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(StyledThumb, { style: { left: thumbPosition } })] }));
+                } }), jsx("div", { className: alphaThumbStyle, style: { left: thumbPosition } })] }));
 };
 AlphaSlider.displayName = 'AlphaSlider';
 

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":["_jsxs","_jsx"],"mappings":"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"}
+{"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

@@ -1,38 +1,9 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useCallback } from 'react';
-import styled from '@emotion/styled';
 import { rgbToHex, hsvToRgb } from './colorUtils.js';
+import { colorAreaStyle, saturationGradientStyle, valueGradientStyle, colorAreaThumbStyle } from './ColorPicker.css.js';
 
-const StyledArea = styled.div `
-  position: relative;
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  border-radius: ${props => props.theme.borderRadius.sm}px;
-  cursor: crosshair;
-  user-select: none;
-  touch-action: none;
-  overflow: hidden;
-`;
-const StyledSaturationGradient = styled.div `
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to right, #ffffff, transparent);
-`;
-const StyledValueGradient = styled.div `
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to top, #000000, transparent);
-`;
-const StyledThumb = styled.div `
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 2px solid white;
-  box-shadow: ${({ theme }) => theme.shadows.thumb};
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-`;
 const ColorArea = ({ hue, saturation, value, onChange, onChangeComplete, }) => {
     const areaRef = useRef(null);
     const getSV = useCallback((clientX, clientY) => {
@@ -85,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(StyledArea, { ref: areaRef, 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(StyledSaturationGradient, {}), jsx(StyledValueGradient, {}), jsx(StyledThumb, { style: { left: thumbX, top: thumbY } })] }));
+    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';
 

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":["_jsxs","_jsx"],"mappings":"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"}
+{"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

@@ -1,75 +1,10 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
-import styled from '@emotion/styled';
 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 StyledInputsRow = styled.div `
-  display: flex;
-  align-items: flex-start;
-  gap: ${props => props.theme.spacing.md}px;
-`;
-const StyledModeToggle = styled.button `
-  /* Reset */
-  margin: 0;
-  padding: 2px 6px;
-  border: 1px solid ${props => props.theme.colors.border.default};
-  background: transparent;
-  font-family: inherit;
-  outline: none;
-  cursor: pointer;
-
-  flex-shrink: 0;
-  border-radius: ${props => props.theme.borderRadius.sm}px;
-  font-size: ${props => props.theme.typography.fontSize.xs}px;
-  color: ${props => props.theme.colors.text.muted};
-  transition:
-    background ${props => props.theme.transitions.fast},
-    color ${props => props.theme.transitions.fast};
-
-  &:hover {
-    background: ${props => props.theme.colors.surface.hover};
-    color: ${props => props.theme.colors.text.primary};
-  }
-
-  &:focus-visible {
-    box-shadow: ${props => props.theme.shadows.focus};
-  }
-`;
-const StyledSmallInput = styled.input `
-  /* Reset */
-  margin: 0;
-  border: 1px solid ${props => props.theme.colors.border.default};
-  outline: none;
-  font-family: inherit;
-
-  background: ${props => props.theme.colors.surface.default};
-  color: ${props => props.theme.colors.text.primary};
-  font-size: ${props => props.theme.typography.fontSize.xs}px;
-  padding: 2px 4px;
-  border-radius: ${props => props.theme.borderRadius.sm}px;
-  width: 100%;
-  min-width: 0;
-  text-align: center;
-
-  &:focus {
-    border-color: ${props => props.theme.colors.border.focus};
-  }
-`;
-const StyledLabel = styled.span `
-  font-size: ${props => props.theme.typography.fontSize.xxs}px;
-  color: ${props => props.theme.colors.text.disabled};
-  text-align: center;
-  display: block;
-  margin-top: 1px;
-`;
-const StyledInputCol = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-`;
 const ColorInputs = ({ hsva, inputModes, defaultInputMode, showAlpha, showEyeDropper = false, disabled = false, onSetFromString, onSetAlpha, onSetHue, onSetSaturationValue, }) => {
     const [mode, setMode] = useState(defaultInputMode);
     const cycleMode = useCallback(() => {
@@ -121,7 +56,7 @@ const ColorInputs = ({ hsva, inputModes, defaultInputMode, showAlpha, showEyeDro
             return;
         onSetAlpha(num / 100);
     }, [onSetAlpha]);
-    return (jsx("div", { children: jsxs(StyledInputsRow, { children: [inputModes.length > 1 && (jsx(StyledModeToggle, { type: "button", onClick: cycleMode, children: mode.toUpperCase() })), mode === 'hex' && (jsxs(StyledInputCol, { children: [jsx(StyledSmallInput, { defaultValue: hex, maxLength: 6, onChange: handleHexChange, onBlur: handleHexBlur, "aria-label": "Hex color" }, hex), jsx(StyledLabel, { children: "HEX" })] })), mode === 'rgb' && (jsxs(Fragment, { children: [jsxs(StyledInputCol, { children: [jsx(StyledSmallInput, { type: "number", min: 0, max: 255, value: r, onChange: e => handleRgbChange('r', e.target.value), "aria-label": "Red" }), jsx(StyledLabel, { children: "R" })] }), jsxs(StyledInputCol, { children: [jsx(StyledSmallInput, { type: "number", min: 0, max: 255, value: g, onChange: e => handleRgbChange('g', e.target.value), "aria-label": "Green" }), jsx(StyledLabel, { children: "G" })] }), jsxs(StyledInputCol, { children: [jsx(StyledSmallInput, { type: "number", min: 0, max: 255, value: b, onChange: e => handleRgbChange('b', e.target.value), "aria-label": "Blue" }), jsx(StyledLabel, { children: "B" })] })] })), mode === 'hsl' && (jsxs(Fragment, { children: [jsxs(StyledInputCol, { children: [jsx(StyledSmallInput, { type: "number", min: 0, max: 360, value: hsl.h, onChange: e => handleHslChange('h', e.target.value), "aria-label": "Hue" }), jsx(StyledLabel, { children: "H" })] }), jsxs(StyledInputCol, { children: [jsx(StyledSmallInput, { type: "number", min: 0, max: 100, value: hsl.s, onChange: e => handleHslChange('s', e.target.value), "aria-label": "Saturation" }), jsx(StyledLabel, { children: "S" })] }), jsxs(StyledInputCol, { children: [jsx(StyledSmallInput, { type: "number", min: 0, max: 100, value: hsl.l, onChange: e => handleHslChange('l', e.target.value), "aria-label": "Lightness" }), jsx(StyledLabel, { children: "L" })] })] })), showAlpha && (jsxs(StyledInputCol, { children: [jsx(StyledSmallInput, { type: "number", min: 0, max: 100, value: Math.round(hsva.a * 100), onChange: e => handleAlphaChange(e.target.value), "aria-label": "Alpha" }), jsx(StyledLabel, { 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":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"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

@@ -1,87 +1,17 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
-import styled from '@emotion/styled';
 import { Collapsible } from '../../primitives/Collapsible/Collapsible.js';
+import { paletteContainerStyle, paletteRowStyle, paletteRowLabelStyle, paletteShadeColorStyle, paletteShadeRecipe } from './ColorPicker.css.js';
 
-const StyledPaletteContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: ${props => props.theme.spacing.xs}px;
-  max-height: 200px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 4px;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${props => props.theme.colors.surface.hover};
-    border-radius: 2px;
-  }
-`;
-const StyledPaletteRow = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 1px;
-`;
-const StyledRowLabel = styled.span `
-  font-size: ${props => props.theme.typography.fontSize.xs}px;
-  color: ${props => props.theme.colors.text.muted};
-  width: 18px;
-  flex-shrink: 0;
-  text-align: center;
-  overflow: hidden;
-  user-select: none;
-`;
-const StyledShade = styled.button `
-  /* Reset */
-  margin: 0;
-  padding: 0;
-  border: ${props => props.$selected
-    ? `2px solid ${props.theme.colors.text.primary}`
-    : '1px solid transparent'};
-  font-family: inherit;
-  outline: none;
-  cursor: pointer;
-  background: transparent;
-
-  /* Layout */
-  flex: 1;
-  aspect-ratio: 1;
-  min-width: 0;
-  border-radius: 1px;
-  transition:
-    transform ${props => props.theme.transitions.fast},
-    border-color ${props => props.theme.transitions.fast};
-
-  &:hover {
-    transform: scale(1.3);
-    z-index: 1;
-    position: relative;
-  }
-
-  &:focus-visible {
-    box-shadow: ${props => props.theme.shadows.focus};
-  }
-`;
-const StyledShadeColor = styled.span `
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-`;
 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(StyledPaletteContainer, { role: "radiogroup", "aria-label": "Color palette", children: palette.map(color => (jsxs(StyledPaletteRow, { children: [jsx(StyledRowLabel, { children: color.name.slice(0, 2) }), color.shades.map(shade => (jsx(StyledShade, { type: "button", role: "radio", "aria-checked": shade.color.toLowerCase() === normalizedCurrent, "aria-label": `${color.name} ${shade.label}`, title: `${color.name} ${shade.label} (${shade.color})`, "$selected": shade.color.toLowerCase() === normalizedCurrent, onClick: () => handleSelect(shade.color), children: jsx(StyledShadeColor, { style: { background: shade.color } }) }, shade.color)))] }, color.name))) }) }));
+    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';
 

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":["_jsx","_jsxs"],"mappings":"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"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import styled from '@emotion/styled';
 import { Popover } from '../../primitives/Popover/Popover.js';
 import { PopoverTrigger } from '../../primitives/Popover/PopoverTrigger.js';
 import { PopoverContent } from '../../primitives/Popover/PopoverContent.js';
@@ -15,6 +15,7 @@ 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 = {
@@ -27,21 +28,6 @@ const PALETTE_MAP = {
     'skin-tones': SKIN_TONES_PALETTE,
     vintage: VINTAGE_PALETTE,
 };
-// --- Styled ---
-const StyledPickerBody = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: ${props => props.theme.spacing.lg}px;
-`;
-const StyledTriggerRow = styled.div `
-  display: flex;
-  align-items: center;
-  gap: ${props => props.theme.spacing.sm}px;
-`;
-const StyledLabel = styled.span `
-  font-size: ${props => props.theme.typography.fontSize.xs}px;
-  color: ${props => props.theme.colors.text.secondary};
-`;
 // --- Component ---
 const ColorPicker = ({ value, defaultValue = '#007acc', format = 'hex', showAlpha = false, inputModes = ['hex', 'rgb', 'hsl'], defaultInputMode = 'hex', presets, showEyeDropper = false, palette, size = 'md', swatchShape = 'square', label, disabled = false, inline = false, pickerWidth = 240, onChange, onChangeComplete, className, style, testId, ...rest }) => {
     const colorState = useColor({
@@ -63,11 +49,11 @@ const ColorPicker = ({ value, defaultValue = '#007acc', format = 'hex', showAlph
         }
         return { colors: palette.colors, title: palette.name };
     }, [palette]);
-    const pickerBody = (jsxs(StyledPickerBody, { "data-testid": testId ? `${testId}-panel` : undefined, children: [jsx(ColorArea, { hue: colorState.hsva.h, saturation: colorState.hsva.s, value: colorState.hsva.v, onChange: colorState.setSaturationValue, onChangeComplete: colorState.commitChange }), jsx(HueSlider, { hue: colorState.hsva.h, onChange: colorState.setHue, onChangeComplete: colorState.commitChange }), showAlpha && (jsx(AlphaSlider, { alpha: colorState.hsva.a, color: colorState.hexString, onChange: colorState.setAlpha, onChangeComplete: colorState.commitChange })), jsx(ColorInputs, { hsva: colorState.hsva, inputModes: inputModes, defaultInputMode: defaultInputMode, showAlpha: showAlpha, showEyeDropper: showEyeDropper, disabled: disabled, onSetFromString: colorState.setFromString, onSetAlpha: colorState.setAlpha, onSetHue: colorState.setHue, onSetSaturationValue: colorState.setSaturationValue }), presets && presets.length > 0 && (jsx(ColorPresets, { presets: presets, currentColor: colorState.hexString, onSelect: colorState.setFromString })), resolvedPalette && (jsx(ColorPalette, { palette: resolvedPalette.colors, currentColor: colorState.hexString, onSelect: colorState.setFromString, title: resolvedPalette.title }))] }));
+    const pickerBody = (jsxs("div", { className: pickerBodyStyle, "data-testid": testId ? `${testId}-panel` : undefined, children: [jsx(ColorArea, { hue: colorState.hsva.h, saturation: colorState.hsva.s, value: colorState.hsva.v, onChange: colorState.setSaturationValue, onChangeComplete: colorState.commitChange }), jsx(HueSlider, { hue: colorState.hsva.h, onChange: colorState.setHue, onChangeComplete: colorState.commitChange }), showAlpha && (jsx(AlphaSlider, { alpha: colorState.hsva.a, color: colorState.hexString, onChange: colorState.setAlpha, onChangeComplete: colorState.commitChange })), jsx(ColorInputs, { hsva: colorState.hsva, inputModes: inputModes, defaultInputMode: defaultInputMode, showAlpha: showAlpha, showEyeDropper: showEyeDropper, disabled: disabled, onSetFromString: colorState.setFromString, onSetAlpha: colorState.setAlpha, onSetHue: colorState.setHue, onSetSaturationValue: colorState.setSaturationValue }), presets && presets.length > 0 && (jsx(ColorPresets, { presets: presets, currentColor: colorState.hexString, onSelect: colorState.setFromString })), resolvedPalette && (jsx(ColorPalette, { palette: resolvedPalette.colors, currentColor: colorState.hexString, onSelect: colorState.setFromString, title: resolvedPalette.title }))] }));
     if (inline) {
         return (jsx("div", { className: className, style: { ...style, width: pickerWidth }, "data-testid": testId, ...rest, children: pickerBody }));
     }
-    return (jsxs(Popover, { children: [jsx(PopoverTrigger, { children: jsxs(StyledTriggerRow, { className: className, style: style, "data-testid": testId, ...rest, children: [jsx(ColorSwatch, { color: colorState.hexString, size: size, shape: swatchShape, disabled: disabled, testId: testId ? `${testId}-swatch` : undefined }), label && jsx(StyledLabel, { children: label })] }) }), jsx(PopoverContent, { width: pickerWidth, padding: "md", children: pickerBody })] }));
+    return (jsxs(Popover, { children: [jsx(PopoverTrigger, { children: jsxs("div", { className: triggerRowStyle, "data-testid": testId, ...rest, children: [jsx(ColorSwatch, { color: colorState.hexString, size: size, shape: swatchShape, disabled: disabled, testId: testId ? `${testId}-swatch` : undefined }), label && jsx("span", { className: labelStyle, children: label })] }) }), jsx(PopoverContent, { width: pickerWidth, padding: "md", children: pickerBody })] }));
 };
 ColorPicker.displayName = 'ColorPicker';
 

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":["_jsxs","_jsx"],"mappings":"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"}
+{"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;;"}