@pathscale/ui 1.1.54 → 1.1.56

package/dist/components/color-slider/ColorSlider.js

@@ -2,8 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./ColorSlider.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__ from "./ColorSlider.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div></div><div>");
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=color-slider__track data-slot=color-slider-track></div><div class=color-slider__thumb data-slot=color-slider-thumb>");
 const clamp = (value, min, max)=>Math.min(max, Math.max(min, value));
 const normalizeValue = (type, value)=>{
     if ("alpha" === type) return clamp(value, 0, 1);
@@ -117,9 +116,10 @@ const ColorSlider = (props)=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
         var _ref$ = sliderRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.base, "alpha" === sliderType() && __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.flag.alpha, isDragging() && __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.flag.dragging, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-slider", "alpha" === sliderType() && "color-slider--alpha", isDragging() && "color-slider--dragging", local.class, local.className);
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -161,25 +161,16 @@ const ColorSlider = (props)=>{
             onLostPointerCapture: handleLostPointerCapture,
             onKeyDown: handleKeyDown
         }), 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__ColorSlider_classes_js_0a74b5c9__.CLASSES.slot.track
-            }), {
-            "data-slot": "color-slider-track"
-        }), false, false);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__ColorSlider_classes_js_0a74b5c9__.CLASSES.slot.thumb
-            }), {
-            "data-slot": "color-slider-thumb",
-            get ["data-dragging"] () {
-                return isDragging() ? "true" : "false";
-            },
-            get style () {
-                return {
-                    left: `${percent()}%`,
-                    "background-color": "var(--color-slider-thumb-color)"
-                };
-            }
-        }), false, false);
+        _el$3.style.setProperty("background-color", "var(--color-slider-thumb-color)");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = isDragging() ? "true" : "false", _v$2 = `${percent()}%`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "data-dragging", _p$.e = _v$);
+            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$3.style.setProperty("left", _v$2) : _el$3.style.removeProperty("left"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0
+        });
         return _el$;
     })();
 };

package/dist/components/color-swatch/ColorSwatch.js

@@ -3,12 +3,22 @@ import "./ColorSwatch.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__color_swatch_picker_ColorSwatchPicker_js_8e90244a__ from "../color-swatch-picker/ColorSwatchPicker.js";
-import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__ from "./ColorSwatch.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
+const shapeClassMap = {
+    circle: "color-swatch--circle",
+    square: "color-swatch--square"
+};
+const sizeClassMap = {
+    xs: "color-swatch--xs",
+    sm: "color-swatch--sm",
+    md: "color-swatch--md",
+    lg: "color-swatch--lg",
+    xl: "color-swatch--xl"
+};
 const ColorSwatch = (props)=>{
     const picker = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(__WEBPACK_EXTERNAL_MODULE__color_swatch_picker_ColorSwatchPicker_js_8e90244a__.ColorSwatchPickerContext);
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -81,7 +91,7 @@ const ColorSwatch = (props)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             type: "button",
             get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__.CLASSES.shape[shape()], __WEBPACK_EXTERNAL_MODULE__ColorSwatch_classes_js_d61387ae__.CLASSES.size[size()], local.class, local.className);
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-swatch", shapeClassMap[shape()], sizeClassMap[size()], local.class, local.className);
             },
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/color-swatch-picker/ColorSwatchPicker.js

@@ -2,7 +2,6 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./ColorSwatchPicker.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_classes_js_3ef482a8__ from "./ColorSwatchPicker.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -83,9 +82,10 @@ const ColorSwatchPicker = (props)=>{
             var _el$ = _tmpl$();
             var _ref$ = rootRef;
             "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : rootRef = _el$;
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorSwatchPicker_classes_js_3ef482a8__.CLASSES.base, local.class, local.className)
-                }), {
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-swatch-picker", local.class, local.className);
+                },
                 get ["data-theme"] () {
                     return local.dataTheme;
                 },

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

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

package/dist/components/colorpicker/AlphaSlider.js

@@ -0,0 +1,107 @@
+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="Alpha (opacity)"aria-valuemin=0 aria-valuemax=1><div class="absolute inset-0"></div><div class="absolute inset-0"></div><div>');
+const AlphaSlider = (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 alpha = ()=>context.color().hsl.a;
+    const updateAlpha = (clientX)=>{
+        if (!sliderRef || context.disabled()) return;
+        const rect = sliderRef.getBoundingClientRect();
+        const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const newAlpha = Math.round(100 * percentage) / 100;
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.setAlpha)(context.color(), newAlpha);
+        context.onChange(newColor);
+    };
+    const handleMouseDown = (e)=>{
+        if (context.disabled()) return;
+        setIsDragging(true);
+        updateAlpha(e.clientX);
+        e.preventDefault();
+    };
+    const handleMouseMove = (e)=>{
+        if (isDragging()) {
+            updateAlpha(e.clientX);
+            e.preventDefault();
+        }
+    };
+    const handleMouseUp = ()=>{
+        setIsDragging(false);
+    };
+    const handleKeyDown = (e)=>{
+        if (context.disabled()) return;
+        const step = e.shiftKey ? 0.1 : 0.01;
+        let newAlpha = alpha();
+        switch(e.key){
+            case "ArrowLeft":
+            case "ArrowDown":
+                newAlpha = Math.max(0, alpha() - step);
+                e.preventDefault();
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                newAlpha = Math.min(1, alpha() + step);
+                e.preventDefault();
+                break;
+            default:
+                return;
+        }
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.setAlpha)(context.color(), newAlpha);
+        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 overflow-hidden", (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$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+        _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$2.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$2.style.setProperty("background-size", "8px 8px");
+        _el$2.style.setProperty("background-position", "0 0, 0 4px, 4px -4px, -4px 0px");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = context.disabled() ? -1 : 0, _v$3 = alpha(), _v$4 = context.disabled(), _v$5 = `linear-gradient(to right, transparent, ${context.color().hex})`, _v$6 = thumbClasses(), _v$7 = `${100 * alpha()}%`;
+            _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 && (null != (_p$.i = _v$5) ? _el$3.style.setProperty("background", _v$5) : _el$3.style.removeProperty("background"));
+            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.n = _v$6);
+            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$4.style.setProperty("left", _v$7) : _el$4.style.removeProperty("left"));
+            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_AlphaSlider = AlphaSlider;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousedown",
+    "keydown"
+]);
+export { colorpicker_AlphaSlider as default };

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

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

package/dist/components/colorpicker/ColorInput.js

@@ -0,0 +1,88 @@
+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><input type=text aria-label="Color value"><select aria-label="Color format"><option value=hex>HEX</option><option value=rgb>RGB</option><option value=rgba>RGBA</option><option value=hsl>HSL</option><option value=hsla>HSLA');
+const ColorInput = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.useColorPickerContext)();
+    const [inputValue, setInputValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)("");
+    const [isValid, setIsValid] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(true);
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const formatted = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.formatColor)(context.color(), context.format());
+        setInputValue(formatted);
+        setIsValid(true);
+    });
+    const handleInput = (e)=>{
+        const target = e.target;
+        const value = target.value;
+        setInputValue(value);
+        const parsed = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.parseColor)(value);
+        parsed ? setIsValid(true) : setIsValid(false);
+    };
+    const handleKeyDown = (e)=>{
+        if ("Enter" === e.key) applyColor();
+    };
+    const handleBlur = ()=>{
+        applyColor();
+    };
+    const applyColor = ()=>{
+        const parsed = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.parseColor)(inputValue());
+        if (parsed) {
+            context.onChange(parsed);
+            setIsValid(true);
+        } else {
+            const formatted = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.formatColor)(context.color(), context.format());
+            setInputValue(formatted);
+            setIsValid(true);
+        }
+    };
+    const handleFormatChange = (e)=>{
+        const target = e.target;
+        const newFormat = target.value;
+        context.onFormatChange(newFormat);
+    };
+    const inputClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("flex-1 px-3 py-2 text-sm border rounded-l focus:outline-none focus:ring-2 focus:ring-primary", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "border-error focus:ring-error": !isValid(),
+            "border-base-300": isValid(),
+            "bg-base-200 cursor-not-allowed": context.disabled(),
+            "bg-base-100 text-base-content": !context.disabled()
+        }));
+    const selectClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("px-3 py-2 text-sm border border-l-0 rounded-r focus:outline-none focus:ring-2 focus:ring-primary bg-base-100 text-base-content border-base-300", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "bg-base-200 cursor-not-allowed": context.disabled()
+        }));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        _el$2.addEventListener("blur", handleBlur);
+        _el$2.$$keydown = handleKeyDown;
+        _el$2.$$input = handleInput;
+        _el$3.addEventListener("change", handleFormatChange);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("flex w-full", props.class, props.className), _v$2 = context.disabled(), _v$3 = inputClasses(), _v$4 = !isValid(), _v$5 = context.disabled(), _v$6 = selectClasses();
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _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__.className)(_el$2, _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-invalid", _p$.o = _v$4);
+            _v$5 !== _p$.i && (_el$3.disabled = _p$.i = _v$5);
+            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.n = _v$6);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$2.value = inputValue());
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$3.value = context.format());
+        return _el$;
+    })();
+};
+const colorpicker_ColorInput = ColorInput;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "input",
+    "keydown"
+]);
+export { colorpicker_ColorInput as default };

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

@@ -0,0 +1,18 @@
+import { type JSX } from "solid-js";
+import type { ColorFormat } from "./ColorUtils";
+import { IComponentBaseProps } from "../types";
+export type { ColorFormat } from "./ColorUtils";
+export type ColorPickerMode = "picker" | "wheel" | "flower";
+export interface ColorPickerProps extends IComponentBaseProps {
+    value?: string;
+    onChange?: (color: string) => void;
+    format?: ColorFormat;
+    disabled?: boolean;
+    swatches?: string[];
+    showAlpha?: boolean;
+    placement?: "top" | "bottom" | "left" | "right";
+    initialMode?: ColorPickerMode;
+    "aria-label"?: string;
+}
+declare const ColorPicker: (props: ColorPickerProps) => JSX.Element;
+export default ColorPicker;

package/dist/components/colorpicker/ColorPicker.js

@@ -0,0 +1,264 @@
+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";
+import * as __WEBPACK_EXTERNAL_MODULE__AlphaSlider_js_9037f62c__ from "./AlphaSlider.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorPickerGradientSelector_js_56799ff8__ from "./ColorPickerGradientSelector.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorPickerWheelSelector_js_ea2d44f8__ from "./ColorPickerWheelSelector.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorPickerFlowerSelector_js_461ceb45__ from "./ColorPickerFlowerSelector.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatches_js_ed23b2d2__ from "./ColorSwatches.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorInput_js_cca8d716__ from "./ColorInput.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorPreview_js_cbf20135__ from "./ColorPreview.js";
+import * as __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__ from "../../motion/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex p-1 mb-3 bg-base-200 rounded-md"><button type=button>Gradient</button><button type=button>Wheel</button><button type=button>Flower'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="pt-2 border-t border-base-300">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=space-y-4>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="fixed inset-0 z-40"aria-hidden=true>'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const DEFAULT_SWATCHES = [
+    "#FF6B6B",
+    "#4ECDC4",
+    "#45B7D1",
+    "#FFA07A",
+    "#98D8C8",
+    "#F7DC6F",
+    "#BB8FCE",
+    "#85929E",
+    "#FF5733",
+    "#C70039",
+    "#900C3F",
+    "#581845",
+    "#2ECC71",
+    "#3498DB",
+    "#9B59B6",
+    "#E74C3C"
+];
+const ColorPicker = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "value",
+        "onChange",
+        "format",
+        "disabled",
+        "swatches",
+        "showAlpha",
+        "placement",
+        "initialMode",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "aria-label"
+    ]);
+    const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [internalColor, setInternalColor] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)((0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.getDefaultColor)());
+    const [currentFormat, setCurrentFormat] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.format || "hex");
+    const [mode, setMode] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.initialMode || "picker");
+    let containerRef;
+    const color = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (local.value) {
+            const parsed = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.parseColor)(local.value);
+            if (parsed) {
+                setInternalColor(parsed);
+                return parsed;
+            }
+        }
+        return internalColor();
+    });
+    const handleColorChange = (newColor)=>{
+        setInternalColor(newColor);
+        if (local.onChange) {
+            const formatted = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.formatColor)(newColor, currentFormat());
+            local.onChange(formatted);
+        }
+    };
+    const handleFormatChange = (newFormat)=>{
+        setCurrentFormat(newFormat);
+        if (local.onChange) {
+            const formatted = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.formatColor)(color(), newFormat);
+            local.onChange(formatted);
+        }
+    };
+    const togglePicker = ()=>{
+        if (!local.disabled) setIsOpen(!isOpen());
+    };
+    const handleKeyDown = (e)=>{
+        if ("Escape" === e.key && isOpen()) {
+            setIsOpen(false);
+            e.preventDefault();
+        }
+    };
+    const contextValue = {
+        color,
+        format: currentFormat,
+        disabled: ()=>local.disabled || false,
+        onChange: handleColorChange,
+        onFormatChange: handleFormatChange
+    };
+    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative inline-block", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "opacity-50": local.disabled
+        }), local.class, local.className);
+    const popoverClasses = ()=>{
+        const base = "z-50 p-4 bg-base-100 rounded-lg shadow-xl border border-base-300 min-w-[280px]";
+        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(base, "absolute mt-2", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "bottom-full mb-2 mt-0": "top" === local.placement,
+            "top-full mt-2": "bottom" === local.placement || !local.placement,
+            "right-full mr-2": "left" === local.placement,
+            "left-full ml-2": "right" === local.placement
+        }));
+    };
+    const ModeSwitcher = ()=>(()=>{
+            var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+            _el$2.$$click = ()=>setMode("picker");
+            _el$3.$$click = ()=>setMode("wheel");
+            _el$4.$$click = ()=>setMode("flower");
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("flex-1 px-3 py-1 text-xs font-medium rounded-sm transition-colors", {
+                    "bg-base-100 shadow-sm text-base-content": "picker" === mode(),
+                    "text-base-content/60 hover:text-base-content": "picker" !== mode()
+                }), _v$2 = (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("flex-1 px-3 py-1 text-xs font-medium rounded-sm transition-colors", {
+                    "bg-base-100 shadow-sm text-base-content": "wheel" === mode(),
+                    "text-base-content/60 hover:text-base-content": "wheel" !== mode()
+                }), _v$3 = (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)("flex-1 px-3 py-1 text-xs font-medium rounded-sm transition-colors", {
+                    "bg-base-100 shadow-sm text-base-content": "flower" === mode(),
+                    "text-base-content/60 hover:text-base-content": "flower" !== mode()
+                });
+                _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
+                _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.t = _v$2);
+                _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.a = _v$3);
+                return _p$;
+            }, {
+                e: void 0,
+                t: void 0,
+                a: void 0
+            });
+            return _el$;
+        })();
+    const PopoverContent = ()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.MotionDiv, {
+            get initial () {
+                return __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionPresets.fadeUp.initial;
+            },
+            get animate () {
+                return __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionPresets.fadeUp.animate;
+            },
+            get exit () {
+                return __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionPresets.fadeUp.exit;
+            },
+            get transition () {
+                return __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.motionPresets.fadeUp.transition;
+            },
+            get ["class"] () {
+                return popoverClasses();
+            },
+            get children () {
+                return [
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ModeSwitcher, {}),
+                    (()=>{
+                        var _el$5 = _tmpl$3();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                            get when () {
+                                return "picker" === mode();
+                            },
+                            get children () {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__ColorPickerGradientSelector_js_56799ff8__["default"], {});
+                            }
+                        }), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                            get when () {
+                                return "wheel" === mode();
+                            },
+                            get children () {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__ColorPickerWheelSelector_js_ea2d44f8__["default"], {});
+                            }
+                        }), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                            get when () {
+                                return "flower" === mode();
+                            },
+                            get children () {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__ColorPickerFlowerSelector_js_461ceb45__["default"], {});
+                            }
+                        }), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                            get when () {
+                                return local.showAlpha;
+                            },
+                            get children () {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__AlphaSlider_js_9037f62c__["default"], {});
+                            }
+                        }), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__ColorInput_js_cca8d716__["default"], {}), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                            get when () {
+                                return local.swatches || DEFAULT_SWATCHES;
+                            },
+                            get children () {
+                                var _el$6 = _tmpl$2();
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__ColorSwatches_js_ed23b2d2__["default"], {
+                                    get swatches () {
+                                        return local.swatches || DEFAULT_SWATCHES;
+                                    }
+                                }));
+                                return _el$6;
+                            }
+                        }), null);
+                        return _el$5;
+                    })()
+                ];
+            }
+        });
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.ColorPickerContext.Provider, {
+        value: contextValue,
+        get children () {
+            var _el$7 = _tmpl$5();
+            _el$7.$$keydown = handleKeyDown;
+            var _ref$ = containerRef;
+            "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$7) : containerRef = _el$7;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                get ["class"] () {
+                    return containerClasses();
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }, others), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__ColorPreview_js_cbf20135__["default"], {
+                get color () {
+                    return color();
+                },
+                get disabled () {
+                    return local.disabled;
+                },
+                onClick: togglePicker,
+                get ["aria-label"] () {
+                    return local["aria-label"] || "Color picker";
+                }
+            }), null);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return isOpen() && !local.disabled;
+                },
+                get children () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(PopoverContent, {});
+                }
+            }), null);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return isOpen() && !local.disabled;
+                },
+                get children () {
+                    var _el$8 = _tmpl$4();
+                    _el$8.$$click = ()=>setIsOpen(false);
+                    return _el$8;
+                }
+            }), null);
+            return _el$7;
+        }
+    });
+};
+const colorpicker_ColorPicker = ColorPicker;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click",
+    "keydown"
+]);
+export { colorpicker_ColorPicker as default };

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

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

package/dist/components/colorpicker/ColorPickerFlowerSelector.js

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

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

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