@pathscale/ui 1.1.55 → 1.1.56

package/dist/components/colorpicker/ColorPickerGradientSelector.js

@@ -0,0 +1,9 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE__SaturationBrightness_js_260379ed__ from "./SaturationBrightness.js";
+import * as __WEBPACK_EXTERNAL_MODULE__HueSlider_js_2f8e5d2a__ from "./HueSlider.js";
+const ColorPickerGradientSelector = ()=>[
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__SaturationBrightness_js_260379ed__["default"], {}),
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__HueSlider_js_2f8e5d2a__["default"], {})
+    ];
+const colorpicker_ColorPickerGradientSelector = ColorPickerGradientSelector;
+export { colorpicker_ColorPickerGradientSelector as default };

package/dist/components/colorpicker/ColorPickerWheelSelector.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from "solid-js";
+declare const ColorPickerWheelSelector: () => JSX.Element;
+export default ColorPickerWheelSelector;

package/dist/components/colorpicker/ColorPickerWheelSelector.js

@@ -0,0 +1,9 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorWheel_js_83f4ee9c__ from "./ColorWheel.js";
+import * as __WEBPACK_EXTERNAL_MODULE__LightnessSlider_js_8323e906__ from "./LightnessSlider.js";
+const ColorPickerWheelSelector = ()=>[
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__ColorWheel_js_83f4ee9c__["default"], {}),
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__LightnessSlider_js_8323e906__["default"], {})
+    ];
+const colorpicker_ColorPickerWheelSelector = ColorPickerWheelSelector;
+export { colorpicker_ColorPickerWheelSelector as default };

package/dist/components/colorpicker/ColorPreview.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "solid-js";
+import type { ColorValue } from "./ColorUtils";
+export interface ColorPreviewProps {
+    color: ColorValue;
+    disabled?: boolean;
+    onClick?: () => void;
+    class?: string;
+    className?: string;
+}
+declare const ColorPreview: (props: ColorPreviewProps) => JSX.Element;
+export default ColorPreview;

package/dist/components/colorpicker/ColorPreview.js

@@ -0,0 +1,47 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__ from "./ColorUtils.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button><div class="w-full h-full relative">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0">');
+const ColorPreview = (props)=>{
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("w-10 h-10 rounded border-2 cursor-pointer transition-all duration-150 overflow-hidden", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "border-base-300 hover:scale-110 hover:shadow-lg": !props.disabled,
+            "border-base-200 opacity-50 cursor-not-allowed": props.disabled
+        }), props.class, props.className);
+    const hasAlpha = ()=>props.color.hsl.a < 1;
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.addEventListener)(_el$, "click", props.onClick, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!hasAlpha());
+            return ()=>_c$() && (()=>{
+                    var _el$3 = _tmpl$2();
+                    _el$3.style.setProperty("background-image", "linear-gradient(45deg, hsl(var(--b3)) 25%, transparent 25%), linear-gradient(-45deg, hsl(var(--b3)) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, hsl(var(--b3)) 75%), linear-gradient(-45deg, transparent 75%, hsl(var(--b3)) 75%)");
+                    _el$3.style.setProperty("background-size", "8px 8px");
+                    _el$3.style.setProperty("background-position", "0 0, 0 4px, 4px -4px, -4px 0px");
+                    return _el$3;
+                })();
+        })(), _el$2);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = props.disabled, _v$3 = `Current color: ${(0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.formatColor)(props.color, "hex")}`, _v$4 = props.disabled ? -1 : 0, _v$5 = `rgba(${props.color.rgb.r}, ${props.color.rgb.g}, ${props.color.rgb.b}, ${props.color.rgb.a})`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (_el$.disabled = _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-label", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.o = _v$4);
+            _v$5 !== _p$.i && (null != (_p$.i = _v$5) ? _el$2.style.setProperty("background-color", _v$5) : _el$2.style.removeProperty("background-color"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0
+        });
+        return _el$;
+    })();
+};
+const colorpicker_ColorPreview = ColorPreview;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+export { colorpicker_ColorPreview as default };

package/dist/components/colorpicker/ColorSwatches.d.ts

@@ -0,0 +1,8 @@
+import { type JSX } from "solid-js";
+export interface ColorSwatchesProps {
+    swatches: string[];
+    class?: string;
+    className?: string;
+}
+declare const ColorSwatches: (props: ColorSwatchesProps) => JSX.Element;
+export default ColorSwatches;

package/dist/components/colorpicker/ColorSwatches.js

@@ -0,0 +1,67 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__ from "./colorpickerContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__ from "./ColorUtils.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button>");
+const ColorSwatches = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.useColorPickerContext)();
+    const handleSwatchClick = (swatch)=>{
+        if (context.disabled()) return;
+        const color = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.parseColor)(swatch);
+        if (color) context.onChange(color);
+    };
+    const handleKeyDown = (e, swatch)=>{
+        if (context.disabled()) return;
+        if ("Enter" === e.key || " " === e.key) {
+            e.preventDefault();
+            handleSwatchClick(swatch);
+        }
+    };
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("grid grid-cols-8 gap-2 w-full", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "opacity-50 pointer-events-none": context.disabled()
+        }), props.class, props.className);
+    const swatchClasses = (swatch)=>{
+        const isSelected = context.color().hex.toLowerCase() === swatch.toLowerCase();
+        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("w-8 h-8 rounded cursor-pointer border-2 transition-all duration-150", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "border-primary ring-2 ring-primary ring-offset-2 ring-offset-base-100": isSelected,
+            "border-base-300 hover:scale-110 hover:shadow-lg": !isSelected
+        }));
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+            get each () {
+                return props.swatches;
+            },
+            children: (swatch)=>(()=>{
+                    var _el$2 = _tmpl$2();
+                    _el$2.$$keydown = (e)=>handleKeyDown(e, swatch);
+                    _el$2.$$click = ()=>handleSwatchClick(swatch);
+                    null != swatch ? _el$2.style.setProperty("background-color", swatch) : _el$2.style.removeProperty("background-color");
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-label", `Select color ${swatch}`);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                        var _v$ = swatchClasses(swatch), _v$2 = context.disabled(), _v$3 = context.disabled() ? -1 : 0;
+                        _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
+                        _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
+                        _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "tabindex", _p$.a = _v$3);
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0
+                    });
+                    return _el$2;
+                })()
+        }));
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, classes()));
+        return _el$;
+    })();
+};
+const colorpicker_ColorSwatches = ColorSwatches;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click",
+    "keydown"
+]);
+export { colorpicker_ColorSwatches as default };

package/dist/components/colorpicker/ColorWheel.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "solid-js";
+export interface ColorWheelProps {
+    class?: string;
+    className?: string;
+}
+declare const ColorWheel: (props: ColorWheelProps) => JSX.Element;
+export default ColorWheel;

package/dist/components/colorpicker/ColorWheel.js

@@ -0,0 +1,106 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__ from "./colorpickerContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__ from "./ColorUtils.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div role=slider aria-label="Color Wheel"><div>');
+const ColorWheel_ColorWheel = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.useColorPickerContext)();
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let containerRef;
+    let cursorRef;
+    const hue = ()=>context.color().hsl.h;
+    const saturation = ()=>context.color().hsl.s;
+    const lightness = ()=>context.color().hsl.l;
+    const updateColor = (x, y)=>{
+        if (!containerRef || context.disabled()) return;
+        const rect = containerRef.getBoundingClientRect();
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const dx = x - rect.left - centerX;
+        const dy = y - rect.top - centerY;
+        let angle = 180 / Math.PI * Math.atan2(dy, dx) + 90;
+        if (angle < 0) angle += 360;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const radius = rect.width / 2;
+        const s = Math.min(100, distance / radius * 100);
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(Math.round(angle), Math.round(s), lightness(), context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    const handleMouseDown = (e)=>{
+        if (context.disabled()) return;
+        setIsDragging(true);
+        updateColor(e.clientX, e.clientY);
+        e.preventDefault();
+    };
+    const handleMouseMove = (e)=>{
+        if (isDragging()) {
+            updateColor(e.clientX, e.clientY);
+            e.preventDefault();
+        }
+    };
+    const handleMouseUp = ()=>{
+        setIsDragging(false);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+    });
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative w-48 h-48 rounded-full cursor-crosshair select-none overflow-hidden mx-auto", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "opacity-50 cursor-not-allowed": context.disabled()
+        }), props.class, props.className);
+    const cursorPosition = ()=>{
+        const hRad = (hue() - 90) * (Math.PI / 180);
+        const sNorm = saturation() / 100;
+        const x = 50 + 50 * sNorm * Math.cos(hRad);
+        const y = 50 + 50 * sNorm * Math.sin(hRad);
+        return {
+            x,
+            y
+        };
+    };
+    const cursorClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("absolute w-4 h-4 border-2 border-white rounded-full shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-1/2", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "ring-2 ring-primary": isDragging()
+        }));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        _el$.$$mousedown = handleMouseDown;
+        var _ref$ = containerRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
+        _el$.style.setProperty("background", "\n          radial-gradient(circle, white 0%, transparent 100%),\n          conic-gradient(\n            from 0deg,\n            hsl(0, 100%, 50%),\n            hsl(60, 100%, 50%),\n            hsl(120, 100%, 50%),\n            hsl(180, 100%, 50%),\n            hsl(240, 100%, 50%),\n            hsl(300, 100%, 50%),\n            hsl(360, 100%, 50%)\n          )\n        ");
+        var _ref$2 = cursorRef;
+        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$2) : cursorRef = _el$2;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = context.disabled() ? -1 : 0, _v$3 = `Hue ${Math.round(hue())}deg, Saturation ${Math.round(saturation())}%`, _v$4 = context.disabled(), _v$5 = cursorClasses(), _v$6 = `${cursorPosition().x}%`, _v$7 = `${cursorPosition().y}%`, _v$8 = `hsl(${hue()}, ${saturation()}%, 50%)`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuetext", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.o = _v$4);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.i = _v$5);
+            _v$6 !== _p$.n && (null != (_p$.n = _v$6) ? _el$2.style.setProperty("left", _v$6) : _el$2.style.removeProperty("left"));
+            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$2.style.setProperty("top", _v$7) : _el$2.style.removeProperty("top"));
+            _v$8 !== _p$.h && (null != (_p$.h = _v$8) ? _el$2.style.setProperty("background-color", _v$8) : _el$2.style.removeProperty("background-color"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0,
+            h: void 0
+        });
+        return _el$;
+    })();
+};
+const ColorWheel = ColorWheel_ColorWheel;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousedown"
+]);
+export { ColorWheel as default };

package/dist/components/{color-wheel-flower → colorpicker}/ColorWheelFlower.js

@@ -5,11 +5,10 @@ import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__color_swatch_index_js_6938a92b__ from "../color-swatch/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__color_swatch_picker_index_js_d4d4ca4f__ from "../color-swatch-picker/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__colorWheelFlowerContext_js_cc353a63__ from "./colorWheelFlowerContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__ from "./colorpickerContext.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__ from "./ColorUtils.js";
 import * as __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__ from "../../motion/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__ from "./ColorWheelFlower.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div><div></div></div><div><div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div><span></span><span>");
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div data-slot=color-wheel-flower><div class=color-wheel-flower__rings><div class="color-wheel-flower__ring-shell color-wheel-flower__ring-shell--outer"><div class="color-wheel-flower__ring color-wheel-flower__ring--outer"></div></div><div class="color-wheel-flower__ring-shell color-wheel-flower__ring-shell--inner"><div class="color-wheel-flower__ring color-wheel-flower__ring--inner">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=color-wheel-flower__dot><div class=color-wheel-flower__dot-frame><div class=color-wheel-flower__dot-motion><span class=color-wheel-flower__halo></span><span>");
 const parseRgbToHsl = (rgbString)=>{
     const match = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
     if (!match) return {
@@ -37,9 +36,6 @@ const createColorItem = (id, rgb, offsetX, offsetY, options)=>{
         id,
         rgb,
         hex: (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.rgbToHex)(r, g, b).toUpperCase(),
-        r,
-        g,
-        b,
         offsetX,
         offsetY,
         hue: hsl.hue,
@@ -369,11 +365,7 @@ const MAX_RADIUS = Math.max(...LAYOUT.map((l)=>Math.sqrt(l.offsetX ** 2 + l.offs
 const MAX_WAVE_DISTANCE = 2 * MAX_RADIUS;
 const MAX_WAVE_DELAY = 0.12;
 const ColorWheelFlower = (props)=>{
-    const [local] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "class",
-        "className"
-    ]);
-    const context = (0, __WEBPACK_EXTERNAL_MODULE__colorWheelFlowerContext_js_cc353a63__.useColorPickerContext)();
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.useColorPickerContext)();
     const [selectedIndex, setSelectedIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
     const [hoveredIndex, setHoveredIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
     const [pressedIndex, setPressedIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
@@ -461,22 +453,7 @@ const ColorWheelFlower = (props)=>{
         }
         setSelectedIndex(index);
         if (item.isCenter) return void context.onChange((0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(0, 0, 100, context.color().hsl.a));
-        const alpha = context.color().hsl.a;
-        context.onChange({
-            rgb: {
-                r: item.r,
-                g: item.g,
-                b: item.b,
-                a: alpha
-            },
-            hsl: {
-                h: item.hue,
-                s: item.saturation,
-                l: item.lightness,
-                a: alpha
-            },
-            hex: item.hex
-        });
+        context.onChange((0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(item.hue, item.saturation, item.lightness, context.color().hsl.a));
     };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         const selected = selectedIndex();
@@ -556,49 +533,16 @@ const ColorWheelFlower = (props)=>{
     });
     const pickerValue = ()=>colors()[visualSelectedIndex()]?.hex;
     return (()=>{
-        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild;
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+        _el$.addEventListener("mouseleave", handlePointerLeave);
+        _el$.$$mousemove = handlePointerMove;
         var _ref$ = containerRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.base, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-                    [__WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.flag.disabled]: context.disabled()
-                }), local.class, local.className)
-            }), {
-            onMouseMove: handlePointerMove,
-            onMouseLeave: handlePointerLeave,
-            "data-slot": "color-wheel-flower",
-            get ["data-disabled"] () {
-                return context.disabled() ? "true" : "false";
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.rings
-            })), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.ringShell.base, __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.ringShell.outer)
-            })), false, true);
         var _ref$2 = outerRingRef;
         "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$4) : outerRingRef = _el$4;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.ring.base, __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.ring.outer)
-            }), {
-            get style () {
-                return {
-                    background: outerRingBackground(),
-                    "box-shadow": outerRingGlow(),
-                    transition: reduceMotion ? "none" : "background 450ms ease-in-out, box-shadow 300ms ease-out"
-                };
-            }
-        }), false, false);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.ringShell.base, __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.ringShell.inner)
-            })), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.ring.base, __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.ring.inner)
-            })), false, false);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_swatch_picker_index_js_d4d4ca4f__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.picker
-            }), {
+        _el$4.style.setProperty("transition", reduceMotion ? "none" : "background 450ms ease-in-out, box-shadow 300ms ease-out");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_swatch_picker_index_js_d4d4ca4f__["default"], {
+            class: "color-wheel-flower__picker",
             get value () {
                 return pickerValue();
             },
@@ -711,45 +655,19 @@ const ColorWheelFlower = (props)=>{
                             dotControl?.stop();
                         });
                         return (()=>{
-                            var _el$7 = _tmpl$2(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling;
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                    class: __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.dot.base
-                                }), {
-                                get style () {
-                                    return {
-                                        left: `calc(50% + ${item.offsetX}px)`,
-                                        top: `calc(50% + ${item.offsetY}px)`
-                                    };
-                                }
-                            }), false, true);
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                    class: __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.dot.frame
-                                })), false, true);
+                            var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
                             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
                                 motionRef = el;
-                            }, _el$9);
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                    class: __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.dot.motion
-                                })), false, true);
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                    class: __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.halo
-                                }), {
-                                get style () {
-                                    return {
-                                        opacity: glowOpacity(),
-                                        "box-shadow": `0 0 8px ${toRgba(item.rgb, 0.3)}, 0 0 3px rgba(255,255,255,0.35)`,
-                                        transition: reduceMotion ? "none" : "opacity 200ms ease-out, box-shadow 200ms ease-out"
-                                    };
-                                }
-                            }), false, false);
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_swatch_index_js_6938a92b__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                            }, _el$7);
+                            _el$8.style.setProperty("transition", reduceMotion ? "none" : "opacity 200ms ease-out, box-shadow 200ms ease-out");
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_swatch_index_js_6938a92b__["default"], {
                                 get color () {
                                     return item.hex;
                                 },
-                                size: "lg"
-                            }, ()=>({
-                                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.swatch.base, item.isCenter && __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.swatch.center)
-                                }), {
+                                size: "lg",
+                                get ["class"] () {
+                                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-wheel-flower__swatch", item.isCenter && "color-wheel-flower__swatch--center");
+                                },
                                 get colorName () {
                                     return item.isCenter ? "Reset to neutral" : `Theme color ${item.hex}`;
                                 },
@@ -780,18 +698,48 @@ const ColorWheelFlower = (props)=>{
                                 onPointerCancel: ()=>{
                                     if (!context.disabled()) setPressedIndex(null);
                                 }
-                            })), _el$1);
-                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                    class: (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(__WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.highlight.base, isHovered() && __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.highlight.hovered, isPulsing() && __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_classes_js_01229d60__.CLASSES.highlight.pulsing)
-                                })), false, false);
-                            return _el$7;
+                            }), _el$9);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                var _v$5 = `calc(50% + ${item.offsetX}px)`, _v$6 = `calc(50% + ${item.offsetY}px)`, _v$7 = glowOpacity(), _v$8 = `0 0 8px ${toRgba(item.rgb, 0.3)}, 0 0 3px rgba(255,255,255,0.35)`, _v$9 = (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("color-wheel-flower__highlight", isHovered() && "color-wheel-flower__highlight--hovered", isPulsing() && "color-wheel-flower__highlight--pulsing");
+                                _v$5 !== _p$.e && (null != (_p$.e = _v$5) ? _el$5.style.setProperty("left", _v$5) : _el$5.style.removeProperty("left"));
+                                _v$6 !== _p$.t && (null != (_p$.t = _v$6) ? _el$5.style.setProperty("top", _v$6) : _el$5.style.removeProperty("top"));
+                                _v$7 !== _p$.a && (null != (_p$.a = _v$7) ? _el$8.style.setProperty("opacity", _v$7) : _el$8.style.removeProperty("opacity"));
+                                _v$8 !== _p$.o && (null != (_p$.o = _v$8) ? _el$8.style.setProperty("box-shadow", _v$8) : _el$8.style.removeProperty("box-shadow"));
+                                _v$9 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$9, _p$.i = _v$9);
+                                return _p$;
+                            }, {
+                                e: void 0,
+                                t: void 0,
+                                a: void 0,
+                                o: void 0,
+                                i: void 0
+                            });
+                            return _el$5;
                         })();
                     }
                 });
             }
-        })), null);
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-wheel-flower", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+                "color-wheel-flower--disabled": context.disabled()
+            }), props.class, props.className), _v$2 = context.disabled() ? "true" : "false", _v$3 = outerRingBackground(), _v$4 = outerRingGlow();
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-disabled", _p$.t = _v$2);
+            _v$3 !== _p$.a && (null != (_p$.a = _v$3) ? _el$4.style.setProperty("background", _v$3) : _el$4.style.removeProperty("background"));
+            _v$4 !== _p$.o && (null != (_p$.o = _v$4) ? _el$4.style.setProperty("box-shadow", _v$4) : _el$4.style.removeProperty("box-shadow"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+        });
         return _el$;
     })();
 };
-const color_wheel_flower_ColorWheelFlower = ColorWheelFlower;
-export { color_wheel_flower_ColorWheelFlower as default };
+const colorpicker_ColorWheelFlower = ColorWheelFlower;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousemove"
+]);
+export { colorpicker_ColorWheelFlower as default };

package/dist/components/colorpicker/HueSlider.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "solid-js";
+export interface HueSliderProps {
+    class?: string;
+    className?: string;
+}
+declare const HueSlider: (props: HueSliderProps) => JSX.Element;
+export default HueSlider;

package/dist/components/colorpicker/HueSlider.js

@@ -0,0 +1,105 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__ from "./colorpickerContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__ from "./ColorUtils.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=slider aria-label=Hue aria-valuemin=0 aria-valuemax=360><div>");
+const HueSlider = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.useColorPickerContext)();
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let sliderRef;
+    const hue = ()=>context.color().hsl.h;
+    const updateHue = (clientX)=>{
+        if (!sliderRef || context.disabled()) return;
+        const rect = sliderRef.getBoundingClientRect();
+        const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const newHue = Math.round(360 * percentage);
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(newHue, context.color().hsl.s, context.color().hsl.l, context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    const handleMouseDown = (e)=>{
+        if (context.disabled()) return;
+        setIsDragging(true);
+        updateHue(e.clientX);
+        e.preventDefault();
+    };
+    const handleMouseMove = (e)=>{
+        if (isDragging()) {
+            updateHue(e.clientX);
+            e.preventDefault();
+        }
+    };
+    const handleMouseUp = ()=>{
+        setIsDragging(false);
+    };
+    const handleKeyDown = (e)=>{
+        if (context.disabled()) return;
+        const step = e.shiftKey ? 10 : 1;
+        let newHue = hue();
+        switch(e.key){
+            case "ArrowLeft":
+            case "ArrowDown":
+                newHue = (hue() - step + 360) % 360;
+                e.preventDefault();
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                newHue = (hue() + step) % 360;
+                e.preventDefault();
+                break;
+            default:
+                return;
+        }
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(newHue, context.color().hsl.s, context.color().hsl.l, context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+    });
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative w-full h-6 rounded cursor-pointer select-none", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "opacity-50 cursor-not-allowed": context.disabled()
+        }), props.class, props.className);
+    const thumbClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("absolute top-1/2 w-4 h-4 border-2 border-white rounded-full shadow-lg transform -translate-x-1/2 -translate-y-1/2 pointer-events-none", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "ring-2 ring-primary": isDragging()
+        }));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        _el$.$$keydown = handleKeyDown;
+        _el$.$$mousedown = handleMouseDown;
+        var _ref$ = sliderRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
+        _el$.style.setProperty("background", "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = context.disabled() ? -1 : 0, _v$3 = hue(), _v$4 = context.disabled(), _v$5 = thumbClasses(), _v$6 = `${hue() / 360 * 100}%`, _v$7 = `hsl(${hue()}, 100%, 50%)`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuenow", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.o = _v$4);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.i = _v$5);
+            _v$6 !== _p$.n && (null != (_p$.n = _v$6) ? _el$2.style.setProperty("left", _v$6) : _el$2.style.removeProperty("left"));
+            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$2.style.setProperty("background-color", _v$7) : _el$2.style.removeProperty("background-color"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0
+        });
+        return _el$;
+    })();
+};
+const colorpicker_HueSlider = HueSlider;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousedown",
+    "keydown"
+]);
+export { colorpicker_HueSlider as default };

package/dist/components/colorpicker/LightnessSlider.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "solid-js";
+export interface LightnessSliderProps {
+    class?: string;
+    className?: string;
+}
+declare const LightnessSlider: (props: LightnessSliderProps) => JSX.Element;
+export default LightnessSlider;