@pathscale/ui 0.1.1 → 1.1.1

package/dist/components/color-field/ColorField.d.ts

@@ -0,0 +1,15 @@
+import "./ColorField.css";
+import { type Component, type JSX } from "solid-js";
+import { type ColorFormat } from "../colorpicker/ColorUtils";
+import type { IComponentBaseProps } from "../types";
+export type ColorFieldFormat = ColorFormat;
+export type ColorFieldProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> & IComponentBaseProps & {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    isDisabled?: boolean;
+    format?: ColorFieldFormat;
+    fullWidth?: boolean;
+};
+declare const ColorField: Component<ColorFieldProps>;
+export default ColorField;

package/dist/components/color-field/ColorField.js

@@ -0,0 +1,165 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./ColorField.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__colorpicker_ColorUtils_js_79ac07b0__ from "../colorpicker/ColorUtils.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=color-field><div data-slot=color-field-group><input>");
+const FALLBACK_COLOR = "#FFFFFF";
+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 normalizeColor = (value, format)=>{
+    const parsed = (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.parseColor)(value);
+    if (!parsed) return null;
+    const formatted = (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.formatColor)(parsed, format);
+    return "hex" === format ? formatted.toUpperCase() : formatted;
+};
+const ColorField = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "value",
+        "defaultValue",
+        "onChange",
+        "isDisabled",
+        "disabled",
+        "format",
+        "fullWidth",
+        "dataTheme",
+        "onInput",
+        "onBlur",
+        "onFocus",
+        "onKeyDown"
+    ]);
+    const format = ()=>local.format ?? "hex";
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const initialValue = ()=>{
+        const seed = local.value ?? local.defaultValue ?? FALLBACK_COLOR;
+        return normalizeColor(seed, format()) ?? FALLBACK_COLOR;
+    };
+    const [inputValue, setInputValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initialValue());
+    const [lastValidValue, setLastValidValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initialValue());
+    const [isInvalid, setIsInvalid] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [isFocused, setIsFocused] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const nextValue = local.value;
+        const nextFormat = format();
+        if (isFocused()) return;
+        if (void 0 !== nextValue) {
+            const normalized = normalizeColor(nextValue, nextFormat) ?? lastValidValue();
+            setInputValue(normalized);
+            setLastValidValue(normalized);
+            setIsInvalid(false);
+            return;
+        }
+        const normalized = normalizeColor(lastValidValue(), nextFormat) ?? FALLBACK_COLOR;
+        setInputValue(normalized);
+        setLastValidValue(normalized);
+        setIsInvalid(false);
+    });
+    const emitIfValid = (value)=>{
+        const normalized = normalizeColor(value, format());
+        if (!normalized) return null;
+        local.onChange?.(normalized);
+        return normalized;
+    };
+    const commit = ()=>{
+        const normalized = emitIfValid(inputValue());
+        if (normalized) {
+            setInputValue(normalized);
+            setLastValidValue(normalized);
+            setIsInvalid(false);
+            return;
+        }
+        setInputValue(lastValidValue());
+        setIsInvalid(false);
+    };
+    const handleInput = (event)=>{
+        invokeEventHandler(local.onInput, event);
+        if (event.defaultPrevented) return;
+        const raw = event.currentTarget.value;
+        setInputValue(raw);
+        const normalized = emitIfValid(raw);
+        if (normalized) {
+            setLastValidValue(normalized);
+            setIsInvalid(false);
+            return;
+        }
+        setIsInvalid(raw.trim().length > 0);
+    };
+    const handleBlur = (event)=>{
+        invokeEventHandler(local.onBlur, event);
+        setIsFocused(false);
+        if (event.defaultPrevented) return;
+        commit();
+    };
+    const handleFocus = (event)=>{
+        invokeEventHandler(local.onFocus, event);
+        if (event.defaultPrevented) return;
+        setIsFocused(true);
+    };
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented) return;
+        if ("Enter" === event.key) {
+            event.preventDefault();
+            commit();
+        }
+        if ("Escape" === event.key) {
+            event.preventDefault();
+            setInputValue(lastValidValue());
+            setIsInvalid(false);
+            event.currentTarget.blur();
+        }
+    };
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            type: "text",
+            get value () {
+                return inputValue();
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            class: "color-field__input",
+            "data-slot": "color-field-input",
+            spellcheck: false,
+            autocapitalize: "off",
+            autocomplete: "off",
+            autocorrect: "off",
+            get ["aria-invalid"] () {
+                return isInvalid() ? "true" : "false";
+            },
+            onInput: handleInput,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            onKeyDown: handleKeyDown
+        }), false, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-field", local.fullWidth && "color-field--full-width", isDisabled() && "color-field--disabled", local.class, local.className), _v$2 = local.dataTheme, _v$3 = isDisabled() ? "true" : "false", _v$4 = isInvalid() ? "true" : "false", _v$5 = isDisabled() ? "true" : "false", _v$6 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-field__group", isInvalid() && "color-field__group--invalid", local.fullWidth && "color-field__group--full-width"), _v$7 = isDisabled() ? "true" : "false", _v$8 = isInvalid() ? "true" : "false";
+            _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-theme", _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-disabled", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-invalid", _p$.o = _v$4);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.i = _v$5);
+            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.n = _v$6);
+            _v$7 !== _p$.s && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-disabled", _p$.s = _v$7);
+            _v$8 !== _p$.h && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-invalid", _p$.h = _v$8);
+            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 color_field_ColorField = ColorField;
+export { color_field_ColorField as default };

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

@@ -0,0 +1,3 @@
+import ColorField from "./ColorField";
+export type { ColorFieldProps, ColorFieldFormat } from "./ColorField";
+export default ColorField;

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

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

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

@@ -0,0 +1,28 @@
+@layer components {
+  .color-picker {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: fit-content;
+    min-width: 14rem;
+    max-width: 100%;
+  }
+
+  .color-picker[data-disabled="true"] {
+    opacity: 0.9;
+  }
+
+  .color-picker__area {
+    width: 100%;
+    max-width: 14rem;
+  }
+
+  .color-picker__slider {
+    width: 100%;
+    max-width: 14rem;
+  }
+
+  .color-picker__field {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,33 @@
+import "./ColorPicker.css";
+import { type Component, type JSX } from "solid-js";
+import { type ColorAreaProps, type ColorAreaValue } from "../color-area";
+import { type ColorFieldProps } from "../color-field";
+import { type ColorSliderProps } from "../color-slider";
+import type { IComponentBaseProps } from "../types";
+export type ColorPickerAreaProps = Omit<ColorAreaProps, "value" | "onChange" | "isDisabled"> & {
+    onChange?: (value: ColorAreaValue) => void;
+};
+declare const ColorPickerArea: Component<ColorPickerAreaProps>;
+export type ColorPickerSliderProps = Omit<ColorSliderProps, "value" | "onChange" | "isDisabled"> & {
+    onChange?: (value: number) => void;
+};
+declare const ColorPickerSlider: Component<ColorPickerSliderProps>;
+export type ColorPickerFieldProps = Omit<ColorFieldProps, "value" | "onChange" | "isDisabled"> & {
+    onChange?: (value: string) => void;
+};
+declare const ColorPickerField: Component<ColorPickerFieldProps>;
+export type ColorPickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    isDisabled?: boolean;
+};
+declare const ColorPickerRoot: Component<ColorPickerProps>;
+declare const ColorPicker: Component<ColorPickerProps> & {
+    Root: Component<ColorPickerProps>;
+    Area: Component<ColorPickerAreaProps>;
+    Slider: Component<ColorPickerSliderProps>;
+    Field: Component<ColorPickerFieldProps>;
+};
+export { ColorPicker as default, ColorPicker, ColorPickerRoot, ColorPickerArea, ColorPickerSlider, ColorPickerField, };

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 };