@pathscale/ui 1.3.0 → 1.4.0

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

@@ -1,175 +0,0 @@
-import { mergeProps, spread, template } from "solid-js/web";
-import "./ColorField.css";
-import { createEffect, createSignal, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { formatColor, parseColor } from "../color-wheel-flower/ColorUtils.js";
-import { CLASSES } from "./ColorField.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div><div><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 = parseColor(value);
-    if (!parsed) return null;
-    const formatted = formatColor(parsed, format);
-    return "hex" === format ? formatted.toUpperCase() : formatted;
-};
-const ColorField = (props)=>{
-    const [local, others] = 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] = createSignal(initialValue());
-    const [lastValidValue, setLastValidValue] = createSignal(initialValue());
-    const [isInvalid, setIsInvalid] = createSignal(false);
-    const [isFocused, setIsFocused] = createSignal(false);
-    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;
-        spread(_el$, mergeProps(()=>({
-                class: twMerge(CLASSES.base, local.fullWidth && CLASSES.flag.fullWidth, isDisabled() && CLASSES.flag.disabled, local.class, local.className)
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            "data-slot": "color-field",
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-invalid"] () {
-                return isInvalid() ? "true" : "false";
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            }
-        }), false, true);
-        spread(_el$2, mergeProps(()=>({
-                class: twMerge(CLASSES.slot.group, isInvalid() && CLASSES.flag.groupInvalid, local.fullWidth && CLASSES.flag.groupFullWidth)
-            }), {
-            "data-slot": "color-field-group",
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-invalid"] () {
-                return isInvalid() ? "true" : "false";
-            }
-        }), false, true);
-        spread(_el$3, mergeProps(others, {
-            type: "text",
-            get value () {
-                return inputValue();
-            },
-            get disabled () {
-                return isDisabled();
-            }
-        }, ()=>({
-                class: CLASSES.slot.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);
-        return _el$;
-    })();
-};
-const color_field_ColorField = ColorField;
-export default color_field_ColorField;

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

@@ -1,8 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "color-picker";
-    readonly slot: {
-        readonly area: "color-picker__area";
-        readonly slider: "color-picker__slider";
-        readonly field: "color-picker__field";
-    };
-};

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

@@ -1,9 +0,0 @@
-const CLASSES = {
-    base: "color-picker",
-    slot: {
-        area: "color-picker__area",
-        slider: "color-picker__slider",
-        field: "color-picker__field"
-    }
-};
-export { CLASSES };

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

@@ -1,33 +0,0 @@
-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

@@ -1,368 +0,0 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import "./ColorPicker.css";
-import { createContext, createEffect, createMemo, createSignal, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import color_area from "../color-area/index.js";
-import color_field from "../color-field/index.js";
-import color_slider from "../color-slider/index.js";
-import { formatColor, parseColor, rgbToHex } from "../color-wheel-flower/ColorUtils.js";
-import { CLASSES } from "./ColorPicker.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>");
-const DEFAULT_COLOR = "#3B82F6";
-const ColorPickerContext = 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 = parseColor(value);
-    if (!parsed) return null;
-    const hex = normalizeHex(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 = useContext(ColorPickerContext);
-    const [local, others] = splitProps(props, [
-        "class",
-        "className",
-        "onChange",
-        "dataTheme"
-    ]);
-    if (!ctx) return createComponent(color_area, mergeProps(others, ()=>({
-            class: twMerge(CLASSES.slot.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 createComponent(color_area, mergeProps(others, {
-        get value () {
-            return ctx.value().hsv;
-        },
-        get isDisabled () {
-            return ctx.isDisabled();
-        }
-    }, ()=>({
-            class: twMerge(CLASSES.slot.area, local.class, local.className)
-        }), {
-        get dataTheme () {
-            return local.dataTheme;
-        },
-        onChange: handleChange
-    }));
-};
-const ColorPickerSlider = (props)=>{
-    const ctx = useContext(ColorPickerContext);
-    const [local, others] = splitProps(props, [
-        "class",
-        "className",
-        "onChange",
-        "type",
-        "style",
-        "dataTheme"
-    ]);
-    const sliderType = ()=>local.type ?? "hue";
-    if (!ctx) return createComponent(color_slider, mergeProps(others, {
-        get type () {
-            return sliderType();
-        }
-    }, ()=>({
-            class: twMerge(CLASSES.slot.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 createComponent(color_slider, mergeProps(others, {
-        get type () {
-            return sliderType();
-        },
-        get value () {
-            return value();
-        },
-        get isDisabled () {
-            return ctx.isDisabled();
-        }
-    }, ()=>({
-            class: twMerge(CLASSES.slot.slider, local.class, local.className)
-        }), {
-        get dataTheme () {
-            return local.dataTheme;
-        },
-        get style () {
-            return sliderStyle();
-        },
-        onChange: handleChange
-    }));
-};
-const ColorPickerField = (props)=>{
-    const ctx = useContext(ColorPickerContext);
-    const [local, others] = splitProps(props, [
-        "class",
-        "className",
-        "onChange",
-        "fullWidth",
-        "format",
-        "dataTheme"
-    ]);
-    if (!ctx) return createComponent(color_field, mergeProps(others, ()=>({
-            class: twMerge(CLASSES.slot.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 createComponent(color_field, mergeProps(others, {
-        get value () {
-            return ctx.value().hex;
-        },
-        get isDisabled () {
-            return ctx.isDisabled();
-        }
-    }, ()=>({
-            class: twMerge(CLASSES.slot.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] = splitProps(props, [
-        "class",
-        "className",
-        "children",
-        "value",
-        "defaultValue",
-        "onChange",
-        "isDisabled",
-        "dataTheme"
-    ]);
-    const [internalState, setInternalState] = createSignal(toColorState(local.value ?? local.defaultValue) ?? fallbackState());
-    const isControlled = ()=>void 0 !== local.value;
-    createEffect(()=>{
-        if (!isControlled()) return;
-        const next = toColorState(local.value);
-        if (next) setInternalState(next);
-    });
-    const currentState = 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(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(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 = createMemo(()=>({
-            value: currentState,
-            isDisabled: ()=>Boolean(local.isDisabled),
-            setFromArea,
-            setFromField,
-            setFromSlider
-        }));
-    return createComponent(ColorPickerContext.Provider, {
-        get value () {
-            return context();
-        },
-        get children () {
-            var _el$ = _tmpl$();
-            spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, local.class, local.className)
-                }), {
-                get ["data-theme"] () {
-                    return local.dataTheme;
-                },
-                "data-slot": "color-picker",
-                get ["data-disabled"] () {
-                    return local.isDisabled ? "true" : "false";
-                }
-            }), false, true);
-            insert(_el$, ()=>local.children ?? [
-                    createComponent(ColorPickerArea, {}),
-                    createComponent(ColorPickerSlider, {
-                        type: "hue"
-                    }),
-                    createComponent(ColorPickerField, {})
-                ]);
-            return _el$;
-        }
-    });
-};
-const ColorPicker = Object.assign(ColorPickerRoot, {
-    Root: ColorPickerRoot,
-    Area: ColorPickerArea,
-    Slider: ColorPickerSlider,
-    Field: ColorPickerField
-});
-export default ColorPicker;
-export { ColorPicker, ColorPickerArea, ColorPickerField, ColorPickerRoot, ColorPickerSlider };

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

@@ -1,11 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "color-slider";
-    readonly slot: {
-        readonly track: "color-slider__track";
-        readonly thumb: "color-slider__thumb";
-    };
-    readonly flag: {
-        readonly alpha: "color-slider--alpha";
-        readonly dragging: "color-slider--dragging";
-    };
-};

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

@@ -1,12 +0,0 @@
-const CLASSES = {
-    base: "color-slider",
-    slot: {
-        track: "color-slider__track",
-        thumb: "color-slider__thumb"
-    },
-    flag: {
-        alpha: "color-slider--alpha",
-        dragging: "color-slider--dragging"
-    }
-};
-export { CLASSES };

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

@@ -1,13 +0,0 @@
-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;