entangle-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import styled from '@emotion/styled';
+
+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) => {
+        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(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: {
+                    background: `linear-gradient(to right, transparent, ${color})`,
+                } }), jsx(StyledThumb, { 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":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import styled from '@emotion/styled';
+import { rgbToHex, hsvToRgb } from './colorUtils.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) => {
+        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(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 } })] }));
+};
+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":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,129 @@
+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';
+
+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(() => {
+        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(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 }))] }) }));
+};
+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":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

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

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import styled from '@emotion/styled';
+import { Collapsible } from '../../primitives/Collapsible/Collapsible.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))) }) }));
+};
+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":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -0,0 +1,75 @@
+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';
+import { ColorSwatch } from './ColorSwatch.js';
+import { ColorArea } from './ColorArea.js';
+import { HueSlider } from './HueSlider.js';
+import { AlphaSlider } from './AlphaSlider.js';
+import { ColorInputs } from './ColorInputs.js';
+import { ColorPresets } from './ColorPresets.js';
+import { ColorPalette } from './ColorPalette.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';
+
+// --- Constants ---
+const PALETTE_MAP = {
+    material: MATERIAL_PALETTE,
+    tailwind: TAILWIND_PALETTE,
+    pastel: PASTEL_PALETTE,
+    earth: EARTH_PALETTE,
+    neon: NEON_PALETTE,
+    monochrome: MONOCHROME_PALETTE,
+    '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({
+        value,
+        defaultValue,
+        format,
+        onChange,
+        onChangeComplete,
+    });
+    const resolvedPalette = useMemo(() => {
+        if (!palette)
+            return undefined;
+        if (typeof palette === 'string') {
+            const found = PALETTE_MAP[palette];
+            return found ? { colors: found.colors, title: found.name } : undefined;
+        }
+        if (Array.isArray(palette)) {
+            return { colors: palette, title: 'Palette' };
+        }
+        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 }))] }));
+    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 })] }));
+};
+ColorPicker.displayName = 'ColorPicker';
+
+export { ColorPicker };
+//# sourceMappingURL=ColorPicker.js.map

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

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

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

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import styled from '@emotion/styled';
+
+const StyledGrid = styled.div `
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 3px;
+  overflow: hidden;
+  padding: 4px;
+`;
+const StyledPreset = 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;
+
+  /* Size */
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: ${props => props.theme.borderRadius.sm}px;
+  transition:
+    transform ${props => props.theme.transitions.fast},
+    border-color ${props => props.theme.transitions.fast};
+
+  &:hover {
+    transform: scale(1.15);
+    z-index: 1;
+  }
+
+  &:focus-visible {
+    box-shadow: ${props => props.theme.shadows.focus};
+  }
+`;
+const StyledPresetColor = styled.span `
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+`;
+const ColorPresets = ({ presets, currentColor, onSelect, }) => {
+    const handleClick = useCallback((color) => {
+        onSelect(color);
+    }, [onSelect]);
+    const normalizedCurrent = currentColor.toLowerCase();
+    return (jsx(StyledGrid, { role: "radiogroup", "aria-label": "Color presets", children: presets.map((preset, i) => (jsx(StyledPreset, { type: "button", role: "radio", "aria-checked": preset.color.toLowerCase() === normalizedCurrent, "aria-label": preset.label ?? preset.color, title: preset.label ?? preset.color, "$selected": preset.color.toLowerCase() === normalizedCurrent, onClick: () => handleClick(preset.color), children: jsx(StyledPresetColor, { style: { background: preset.color } }) }, `${preset.color}-${i}`))) }));
+};
+ColorPresets.displayName = 'ColorPresets';
+
+export { ColorPresets };
+//# sourceMappingURL=ColorPresets.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPresets.js","sources":["../../../../../../src/components/controls/ColorPicker/ColorPresets.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAUA,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM5B;AAMD,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAmB;;;;AAIzC,UAAA,EAAA,KAAK,IACb,KAAK,CAAC;MACF,CAAa,UAAA,EAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAE;AAChD,MAAE,uBAAuB,CAAA;;;;;;;;;mBASZ,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAA;;gBAEvC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAA;mBAClC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAA;;;;;;;;kBAQtC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAA;;CAEnD;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;CAKpC;AAEM,MAAM,YAAY,GAAgC,CAAC,EACxD,OAAO,EACP,YAAY,EACZ,QAAQ,GACT,KAAI;AACH,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAa,KAAI;QAChB,QAAQ,CAAC,KAAK,CAAC;AACjB,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,MAAM,iBAAiB,GAAG,YAAY,CAAC,WAAW,EAAE;IAEpD,QACEA,IAAC,UAAU,EAAA,EAAC,IAAI,EAAC,YAAY,EAAY,YAAA,EAAA,eAAe,EACrD,QAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,MACrBA,GAAA,CAAC,YAAY,EAAA,EAEX,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,kBACE,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,iBAAiB,EAAA,YAAA,EAClD,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,EACxC,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,EAAA,WAAA,EACxB,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,iBAAiB,EAC3D,OAAO,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,EAAA,QAAA,EAExCA,IAAC,iBAAiB,EAAA,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE,EAAI,CAAA,EAAA,EATrD,GAAG,MAAM,CAAC,KAAK,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE,CAUd,CAChB,CAAC,EACS,CAAA;AAEjB;AAEA,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}