@pathscale/ui 1.1.0 → 1.1.1

package/dist/components/color-picker/ColorPicker.js

@@ -0,0 +1,369 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./ColorPicker.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_area_index_js_f79642f5__ from "../color-area/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__ from "../color-field/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__ from "../color-slider/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__ from "../colorpicker/ColorUtils.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const DEFAULT_COLOR = "#3B82F6";
+const ColorPickerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const clamp = (value, min, max)=>Math.min(max, Math.max(min, value));
+const normalizeHue = (value)=>(value % 360 + 360) % 360;
+const normalizeHsv = (value)=>({
+        h: normalizeHue(value.h),
+        s: clamp(value.s, 0, 100),
+        v: clamp(value.v, 0, 100)
+    });
+const normalizeAlpha = (value)=>clamp(value, 0, 1);
+const normalizeHex = (value)=>{
+    const trimmed = value.trim();
+    if (!trimmed) return "";
+    const prefixed = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+    return prefixed.toUpperCase();
+};
+const rgbToHsv = (r, g, b)=>{
+    const rNorm = clamp(r, 0, 255) / 255;
+    const gNorm = clamp(g, 0, 255) / 255;
+    const bNorm = clamp(b, 0, 255) / 255;
+    const max = Math.max(rNorm, gNorm, bNorm);
+    const min = Math.min(rNorm, gNorm, bNorm);
+    const delta = max - min;
+    let hue = 0;
+    if (0 !== delta) hue = max === rNorm ? ((gNorm - bNorm) / delta + (gNorm < bNorm ? 6 : 0)) * 60 : max === gNorm ? ((bNorm - rNorm) / delta + 2) * 60 : ((rNorm - gNorm) / delta + 4) * 60;
+    const saturation = 0 === max ? 0 : delta / max * 100;
+    const brightness = 100 * max;
+    return normalizeHsv({
+        h: hue,
+        s: saturation,
+        v: brightness
+    });
+};
+const hsvToRgb = (h, s, v)=>{
+    const hue = normalizeHue(h);
+    const saturation = clamp(s, 0, 100) / 100;
+    const brightness = clamp(v, 0, 100) / 100;
+    const chroma = brightness * saturation;
+    const huePrime = hue / 60;
+    const x = chroma * (1 - Math.abs(huePrime % 2 - 1));
+    const match = brightness - chroma;
+    let rPrime = 0;
+    let gPrime = 0;
+    let bPrime = 0;
+    if (huePrime >= 0 && huePrime < 1) {
+        rPrime = chroma;
+        gPrime = x;
+    } else if (huePrime < 2) {
+        rPrime = x;
+        gPrime = chroma;
+    } else if (huePrime < 3) {
+        gPrime = chroma;
+        bPrime = x;
+    } else if (huePrime < 4) {
+        gPrime = x;
+        bPrime = chroma;
+    } else if (huePrime < 5) {
+        rPrime = x;
+        bPrime = chroma;
+    } else {
+        rPrime = chroma;
+        bPrime = x;
+    }
+    return {
+        r: Math.round((rPrime + match) * 255),
+        g: Math.round((gPrime + match) * 255),
+        b: Math.round((bPrime + match) * 255)
+    };
+};
+const formatOutputColor = (value)=>{
+    if (value.alpha >= 1) return value.hex;
+    const rgb = hsvToRgb(value.hsv.h, value.hsv.s, value.hsv.v);
+    const alpha = Number(value.alpha.toFixed(2));
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+};
+const toColorState = (value)=>{
+    if (!value) return null;
+    const parsed = (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.parseColor)(value);
+    if (!parsed) return null;
+    const hex = normalizeHex((0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.formatColor)(parsed, "hex"));
+    const hsv = rgbToHsv(parsed.rgb.r, parsed.rgb.g, parsed.rgb.b);
+    const alpha = normalizeAlpha(parsed.rgb.a ?? 1);
+    return {
+        hex,
+        hsv,
+        alpha
+    };
+};
+const fallbackState = ()=>{
+    const parsed = toColorState(DEFAULT_COLOR);
+    if (parsed) return parsed;
+    return {
+        hex: DEFAULT_COLOR,
+        hsv: {
+            h: 0,
+            s: 75,
+            v: 96
+        },
+        alpha: 1
+    };
+};
+const ColorPickerArea = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(ColorPickerContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "onChange",
+        "dataTheme"
+    ]);
+    if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_area_index_js_f79642f5__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__area", local.class, local.className);
+        },
+        get dataTheme () {
+            return local.dataTheme;
+        },
+        get onChange () {
+            return local.onChange;
+        }
+    }));
+    const handleChange = (next)=>{
+        ctx.setFromArea(next);
+        local.onChange?.(next);
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_area_index_js_f79642f5__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get value () {
+            return ctx.value().hsv;
+        },
+        get isDisabled () {
+            return ctx.isDisabled();
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__area", local.class, local.className);
+        },
+        get dataTheme () {
+            return local.dataTheme;
+        },
+        onChange: handleChange
+    }));
+};
+const ColorPickerSlider = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(ColorPickerContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "onChange",
+        "type",
+        "style",
+        "dataTheme"
+    ]);
+    const sliderType = ()=>local.type ?? "hue";
+    if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get type () {
+            return sliderType();
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__slider", local.class, local.className);
+        },
+        get dataTheme () {
+            return local.dataTheme;
+        },
+        get style () {
+            return local.style;
+        },
+        get onChange () {
+            return local.onChange;
+        }
+    }));
+    const value = ()=>"alpha" === sliderType() ? ctx.value().alpha : ctx.value().hsv.h;
+    const handleChange = (next)=>{
+        ctx.setFromSlider(sliderType(), next);
+        local.onChange?.(next);
+    };
+    const sliderStyle = ()=>{
+        const userStyle = local.style;
+        if ("alpha" !== sliderType()) return {
+            ...userStyle
+        };
+        const rgb = hsvToRgb(ctx.value().hsv.h, ctx.value().hsv.s, ctx.value().hsv.v);
+        return {
+            "--color-slider-alpha-color": `rgb(${rgb.r} ${rgb.g} ${rgb.b})`,
+            ...userStyle
+        };
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get type () {
+            return sliderType();
+        },
+        get value () {
+            return value();
+        },
+        get isDisabled () {
+            return ctx.isDisabled();
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__slider", local.class, local.className);
+        },
+        get dataTheme () {
+            return local.dataTheme;
+        },
+        get style () {
+            return sliderStyle();
+        },
+        onChange: handleChange
+    }));
+};
+const ColorPickerField = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(ColorPickerContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "onChange",
+        "fullWidth",
+        "format",
+        "dataTheme"
+    ]);
+    if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__field", local.class, local.className);
+        },
+        get dataTheme () {
+            return local.dataTheme;
+        },
+        get format () {
+            return local.format;
+        },
+        get fullWidth () {
+            return local.fullWidth ?? true;
+        },
+        get onChange () {
+            return local.onChange;
+        }
+    }));
+    const handleChange = (next)=>{
+        ctx.setFromField(next);
+        local.onChange?.(next);
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get value () {
+            return ctx.value().hex;
+        },
+        get isDisabled () {
+            return ctx.isDisabled();
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__field", local.class, local.className);
+        },
+        get dataTheme () {
+            return local.dataTheme;
+        },
+        get format () {
+            return local.format;
+        },
+        get fullWidth () {
+            return local.fullWidth ?? true;
+        },
+        onChange: handleChange
+    }));
+};
+const ColorPickerRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "children",
+        "value",
+        "defaultValue",
+        "onChange",
+        "isDisabled",
+        "dataTheme"
+    ]);
+    const [internalState, setInternalState] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(toColorState(local.value ?? local.defaultValue) ?? fallbackState());
+    const isControlled = ()=>void 0 !== local.value;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!isControlled()) return;
+        const next = toColorState(local.value);
+        if (next) setInternalState(next);
+    });
+    const currentState = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (!isControlled()) return internalState();
+        return toColorState(local.value) ?? internalState();
+    });
+    const emitChange = (next)=>{
+        if (!isControlled()) setInternalState(next);
+        local.onChange?.(formatOutputColor(next));
+    };
+    const setFromArea = (nextValue)=>{
+        const hsv = normalizeHsv(nextValue);
+        const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
+        const hex = normalizeHex((0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.rgbToHex)(rgb.r, rgb.g, rgb.b));
+        emitChange({
+            hex,
+            hsv,
+            alpha: currentState().alpha
+        });
+    };
+    const setFromSlider = (type, value)=>{
+        if ("alpha" === type) return void emitChange({
+            ...currentState(),
+            alpha: normalizeAlpha(value)
+        });
+        const hsv = normalizeHsv({
+            ...currentState().hsv,
+            h: value
+        });
+        const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
+        const hex = normalizeHex((0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.rgbToHex)(rgb.r, rgb.g, rgb.b));
+        emitChange({
+            hex,
+            hsv,
+            alpha: currentState().alpha
+        });
+    };
+    const setFromField = (nextValue)=>{
+        const next = toColorState(nextValue);
+        if (!next) return;
+        emitChange(next);
+    };
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
+            value: currentState,
+            isDisabled: ()=>Boolean(local.isDisabled),
+            setFromArea,
+            setFromField,
+            setFromSlider
+        }));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorPickerContext.Provider, {
+        get value () {
+            return context();
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (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-picker", local.class, local.className);
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                "data-slot": "color-picker",
+                get ["data-disabled"] () {
+                    return local.isDisabled ? "true" : "false";
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children ?? [
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorPickerArea, {}),
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorPickerSlider, {
+                        type: "hue"
+                    }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorPickerField, {})
+                ]);
+            return _el$;
+        }
+    });
+};
+const ColorPicker = Object.assign(ColorPickerRoot, {
+    Root: ColorPickerRoot,
+    Area: ColorPickerArea,
+    Slider: ColorPickerSlider,
+    Field: ColorPickerField
+});
+export { ColorPicker, ColorPickerArea, ColorPickerField, ColorPickerRoot, ColorPickerSlider, ColorPicker as default };

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default, ColorPicker, ColorPickerRoot, ColorPickerArea, ColorPickerSlider, ColorPickerField, } from "./ColorPicker";
+export type { ColorPickerProps, ColorPickerAreaProps, ColorPickerSliderProps, ColorPickerFieldProps, } from "./ColorPicker";

package/dist/components/color-picker/index.js

@@ -0,0 +1,8 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ColorPicker_js_c381c0c3__ from "./ColorPicker.js";
+var __webpack_exports__ColorPicker = __WEBPACK_EXTERNAL_MODULE__ColorPicker_js_c381c0c3__.ColorPicker;
+var __webpack_exports__ColorPickerArea = __WEBPACK_EXTERNAL_MODULE__ColorPicker_js_c381c0c3__.ColorPickerArea;
+var __webpack_exports__ColorPickerField = __WEBPACK_EXTERNAL_MODULE__ColorPicker_js_c381c0c3__.ColorPickerField;
+var __webpack_exports__ColorPickerRoot = __WEBPACK_EXTERNAL_MODULE__ColorPicker_js_c381c0c3__.ColorPickerRoot;
+var __webpack_exports__ColorPickerSlider = __WEBPACK_EXTERNAL_MODULE__ColorPicker_js_c381c0c3__.ColorPickerSlider;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ColorPicker_js_c381c0c3__["default"];
+export { __webpack_exports__ColorPicker as ColorPicker, __webpack_exports__ColorPickerArea as ColorPickerArea, __webpack_exports__ColorPickerField as ColorPickerField, __webpack_exports__ColorPickerRoot as ColorPickerRoot, __webpack_exports__ColorPickerSlider as ColorPickerSlider, __webpack_exports__default as default };

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

@@ -0,0 +1,57 @@
+@layer components {
+  .color-slider {
+    position: relative;
+    width: 100%;
+    min-width: 10rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    cursor: pointer;
+    outline: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .color-slider[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .color-slider__track {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--color-slider-track-background);
+    box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.12);
+    overflow: hidden;
+  }
+
+  .color-slider__thumb {
+    position: absolute;
+    top: 50%;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 9999px;
+    border: 2px solid #ffffff;
+    box-shadow:
+      0 1px 2px oklch(0% 0 0 / 0.24),
+      0 0 0 1px oklch(0% 0 0 / 0.18);
+    transform: translate(-50%, -50%);
+    transition:
+      width 140ms ease,
+      height 140ms ease,
+      box-shadow 140ms ease;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .color-slider--dragging .color-slider__thumb,
+  .color-slider__thumb[data-dragging="true"] {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  .color-slider:focus-visible,
+  .color-slider[data-focus-visible="true"] {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent);
+  }
+}

package/dist/components/color-slider/ColorSlider.d.ts

@@ -0,0 +1,13 @@
+import "./ColorSlider.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ColorSliderType = "hue" | "alpha";
+export type ColorSliderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    type?: ColorSliderType;
+    isDisabled?: boolean;
+};
+declare const ColorSlider: Component<ColorSliderProps>;
+export default ColorSlider;

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

@@ -0,0 +1,178 @@
+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";
+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);
+    return clamp(value, 0, 360);
+};
+const toPercent = (type, value)=>{
+    if ("alpha" === type) return 100 * clamp(value, 0, 1);
+    return clamp(value, 0, 360) / 360 * 100;
+};
+const fromPercent = (type, percent)=>{
+    const clamped = clamp(percent, 0, 100);
+    if ("alpha" === type) return clamped / 100;
+    return clamped / 100 * 360;
+};
+const ColorSlider = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "value",
+        "defaultValue",
+        "onChange",
+        "type",
+        "isDisabled",
+        "style",
+        "dataTheme",
+        "aria-label"
+    ]);
+    const sliderType = ()=>local.type ?? "hue";
+    const isDisabled = ()=>Boolean(local.isDisabled);
+    const initialValue = ()=>{
+        const fallback = "alpha" === sliderType() ? 1 : 0;
+        return normalizeValue(sliderType(), local.value ?? local.defaultValue ?? fallback);
+    };
+    const [internalValue, setInternalValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initialValue());
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let sliderRef;
+    const isControlled = ()=>void 0 !== local.value;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const nextType = sliderType();
+        const nextValue = local.value;
+        if (void 0 === nextValue) {
+            if (!isControlled()) setInternalValue((current)=>normalizeValue(nextType, current));
+            return;
+        }
+        setInternalValue(normalizeValue(nextType, nextValue));
+    });
+    const currentValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (isControlled()) return normalizeValue(sliderType(), local.value ?? internalValue());
+        return normalizeValue(sliderType(), internalValue());
+    });
+    const emitChange = (next)=>{
+        const normalized = normalizeValue(sliderType(), next);
+        if (!isControlled()) setInternalValue(normalized);
+        local.onChange?.(normalized);
+    };
+    const updateFromPointer = (clientX)=>{
+        if (!sliderRef || isDisabled()) return;
+        const rect = sliderRef.getBoundingClientRect();
+        if (rect.width <= 0) return;
+        const percent = (clientX - rect.left) / rect.width * 100;
+        emitChange(fromPercent(sliderType(), percent));
+    };
+    const handlePointerDown = (event)=>{
+        if (isDisabled()) return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        setIsDragging(true);
+        updateFromPointer(event.clientX);
+    };
+    const handlePointerMove = (event)=>{
+        if (!isDragging()) return;
+        updateFromPointer(event.clientX);
+    };
+    const handlePointerUp = (event)=>{
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+        setIsDragging(false);
+    };
+    const handleLostPointerCapture = ()=>{
+        setIsDragging(false);
+    };
+    const handleKeyDown = (event)=>{
+        if (isDisabled()) return;
+        const key = event.key;
+        const isDecrease = "ArrowLeft" === key || "ArrowDown" === key;
+        const isIncrease = "ArrowRight" === key || "ArrowUp" === key;
+        if (!isDecrease && !isIncrease) return;
+        event.preventDefault();
+        const step = "alpha" === sliderType() ? event.shiftKey ? 0.1 : 0.01 : event.shiftKey ? 10 : 1;
+        const direction = isIncrease ? 1 : -1;
+        emitChange(currentValue() + direction * step);
+    };
+    const percent = ()=>toPercent(sliderType(), currentValue());
+    const sliderStyle = ()=>{
+        const userStyle = local.style;
+        if ("hue" === sliderType()) return {
+            "--color-slider-track-background": "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)",
+            "--color-slider-thumb-color": `hsl(${currentValue()} 100% 50%)`,
+            ...userStyle
+        };
+        return {
+            "--color-slider-track-background": "linear-gradient(to right, transparent, var(--color-slider-alpha-color, #000000)), repeating-conic-gradient(#cfd3da 0% 25%, #f3f4f6 0% 50%) 50% / 0.5rem 0.5rem",
+            "--color-slider-thumb-color": "var(--color-slider-alpha-color, #000000)",
+            ...userStyle
+        };
+    };
+    const valueText = ()=>{
+        if ("alpha" === sliderType()) return `Opacity ${Math.round(100 * currentValue())}%`;
+        return `Hue ${Math.round(currentValue())} degrees`;
+    };
+    return (()=>{
+        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, {
+            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;
+            },
+            "data-slot": "color-slider",
+            get ["data-type"] () {
+                return sliderType();
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            role: "slider",
+            get tabIndex () {
+                return isDisabled() ? -1 : 0;
+            },
+            get ["aria-label"] () {
+                return local["aria-label"] ?? ("alpha" === sliderType() ? "Alpha" : "Hue");
+            },
+            get ["aria-valuemin"] () {
+                return "alpha" === sliderType() ? 0 : 0;
+            },
+            get ["aria-valuemax"] () {
+                return "alpha" === sliderType() ? 1 : 360;
+            },
+            get ["aria-valuenow"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"alpha" === sliderType())() ? Number(currentValue().toFixed(2)) : Math.round(currentValue());
+            },
+            get ["aria-valuetext"] () {
+                return valueText();
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get style () {
+                return sliderStyle();
+            },
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onLostPointerCapture: handleLostPointerCapture,
+            onKeyDown: handleKeyDown
+        }), false, true);
+        _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$;
+    })();
+};
+const color_slider_ColorSlider = ColorSlider;
+export { color_slider_ColorSlider as default };

package/dist/components/color-slider/index.d.ts

@@ -0,0 +1,3 @@
+import ColorSlider from "./ColorSlider";
+export type { ColorSliderProps, ColorSliderType } from "./ColorSlider";
+export default ColorSlider;

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

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ColorSlider_js_db0865cb__ from "./ColorSlider.js";
+const color_slider = __WEBPACK_EXTERNAL_MODULE__ColorSlider_js_db0865cb__["default"];
+export { color_slider as default };