@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/color-area/ColorArea.generated.js

@@ -0,0 +1,221 @@
+import { mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./ColorArea.css";
+import { createSignal, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./ColorArea.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div><div>");
+const DEFAULT_VALUE = {
+    h: 0,
+    s: 100,
+    v: 100
+};
+const clamp = (value, min, max)=>Math.min(max, Math.max(min, value));
+const normalizeValue = (value)=>({
+        h: (value.h % 360 + 360) % 360,
+        s: clamp(value.s, 0, 100),
+        v: clamp(value.v, 0, 100)
+    });
+const hsvToRgb = (h, s, v)=>{
+    const saturation = clamp(s, 0, 100) / 100;
+    const brightness = clamp(v, 0, 100) / 100;
+    const hue = (h % 360 + 360) % 360;
+    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 __solidLayoutColorArea = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "class",
+        "className",
+        "value",
+        "onChange",
+        "isDisabled",
+        "dataTheme",
+        "style",
+        "aria-label"
+    ]);
+    const [internalValue, setInternalValue] = createSignal(DEFAULT_VALUE);
+    const [isDragging, setIsDragging] = createSignal(false);
+    let areaRef;
+    const isControlled = ()=>void 0 !== local.value;
+    const currentValue = ()=>normalizeValue(local.value ?? internalValue());
+    const isDisabled = ()=>Boolean(local.isDisabled);
+    const emitChange = (next)=>{
+        const normalized = normalizeValue(next);
+        if (!isControlled()) setInternalValue(normalized);
+        local.onChange?.(normalized);
+    };
+    const updateFromPointer = (clientX, clientY)=>{
+        if (!areaRef || isDisabled()) return;
+        const rect = areaRef.getBoundingClientRect();
+        const saturation = (clientX - rect.left) / rect.width * 100;
+        const vertical = (clientY - rect.top) / rect.height * 100;
+        const brightness = 100 - vertical;
+        emitChange({
+            h: currentValue().h,
+            s: saturation,
+            v: brightness
+        });
+    };
+    const handlePointerDown = (event)=>{
+        if (isDisabled()) return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        setIsDragging(true);
+        updateFromPointer(event.clientX, event.clientY);
+    };
+    const handlePointerMove = (event)=>{
+        if (!isDragging()) return;
+        updateFromPointer(event.clientX, event.clientY);
+    };
+    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 step = event.shiftKey ? 10 : 1;
+        const value = currentValue();
+        if ("ArrowLeft" === event.key) {
+            event.preventDefault();
+            emitChange({
+                ...value,
+                s: value.s - step
+            });
+            return;
+        }
+        if ("ArrowRight" === event.key) {
+            event.preventDefault();
+            emitChange({
+                ...value,
+                s: value.s + step
+            });
+            return;
+        }
+        if ("ArrowUp" === event.key) {
+            event.preventDefault();
+            emitChange({
+                ...value,
+                v: value.v + step
+            });
+            return;
+        }
+        if ("ArrowDown" === event.key) {
+            event.preventDefault();
+            emitChange({
+                ...value,
+                v: value.v - step
+            });
+        }
+    };
+    const style = ()=>{
+        const color = currentValue();
+        const thumb = hsvToRgb(color.h, color.s, color.v);
+        const userStyle = local.style;
+        return {
+            "--color-area-background": `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${color.h} 100% 50%))`,
+            "--color-area-thumb-color": `rgb(${thumb.r} ${thumb.g} ${thumb.b})`,
+            ...userStyle
+        };
+    };
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        var _ref$ = areaRef;
+        "function" == typeof _ref$ ? use(_ref$, _el$) : areaRef = _el$;
+        spread(_el$, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.base, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "color-area",
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get tabIndex () {
+                return isDisabled() ? -1 : 0;
+            },
+            role: "slider",
+            get ["aria-label"] () {
+                return local["aria-label"] ?? "Color area";
+            },
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            get ["aria-valuenow"] () {
+                return Math.round(currentValue().s);
+            },
+            get ["aria-valuetext"] () {
+                return `Saturation ${Math.round(currentValue().s)}%, Brightness ${Math.round(currentValue().v)}%`;
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get style () {
+                return style();
+            },
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onLostPointerCapture: handleLostPointerCapture,
+            onKeyDown: handleKeyDown
+        }), false, true);
+        spread(_el$2, mergeProps(()=>({
+                class: CLASSES.slot.thumb
+            }), {
+            "data-slot": "color-area-thumb",
+            get ["data-dragging"] () {
+                return isDragging() ? "true" : "false";
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get style () {
+                return {
+                    left: `${currentValue().s}%`,
+                    top: `${100 - currentValue().v}%`,
+                    "background-color": "var(--color-area-thumb-color)"
+                };
+            }
+        }), false, false);
+        return _el$;
+    })();
+};
+const ColorArea = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutColorArea,
+    embedded: true
+});
+const ColorArea_generated = ColorArea;
+export default ColorArea_generated;

package/dist/components/color-area/ColorArea.recipe.d.ts

@@ -0,0 +1,14 @@
+export declare const CLASSES: {
+    readonly base: "color-area";
+    readonly slot: {
+        readonly thumb: "color-area__thumb";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "color-area";
+    readonly slots: {
+        readonly "color-area": {};
+        readonly "color-area-thumb": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/color-area/ColorArea.recipe.js

@@ -0,0 +1,38 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "color-area",
+    slot: {
+        thumb: "color-area__thumb"
+    }
+};
+const componentRecipe = recipe({
+    component: "color-area",
+    slots: {
+        "color-area": {},
+        "color-area-thumb": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "color-area": {
+                base: "",
+                axes: {}
+            },
+            "color-area-thumb": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "color-area": 0,
+            "color-area-thumb": 1,
+            root: 2
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1,3 +1,3 @@
-import ColorArea from "./ColorArea";
-export type { ColorAreaProps, ColorAreaValue } from "./ColorArea";
+import ColorArea from "./ColorArea.generated";
+export type { ColorAreaProps, ColorAreaValue } from "./ColorArea.generated";
 export default ColorArea;

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

@@ -1,3 +1,3 @@
-import ColorArea from "./ColorArea.js";
-const color_area = ColorArea;
+import ColorArea_generated from "./ColorArea.generated.js";
+const color_area = ColorArea_generated;
 export default color_area;

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

@@ -0,0 +1,16 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ColorField.css";
+import { type JSX } from "solid-js";
+import { type ColorFormat } from "../color-wheel-flower/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: __LayoutComponent<ColorFieldProps>;
+export default ColorField;

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

@@ -0,0 +1,181 @@
+import { mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+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, componentRecipe } from "./ColorField.recipe.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 __solidLayoutColorField = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "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 ColorField = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutColorField,
+    embedded: true
+});
+const ColorField_generated = ColorField;
+export default ColorField_generated;

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

@@ -0,0 +1,22 @@
+export declare const CLASSES: {
+    readonly base: "color-field";
+    readonly slot: {
+        readonly group: "color-field__group";
+        readonly input: "color-field__input";
+    };
+    readonly flag: {
+        readonly fullWidth: "color-field--full-width";
+        readonly disabled: "color-field--disabled";
+        readonly groupFullWidth: "color-field__group--full-width";
+        readonly groupInvalid: "color-field__group--invalid";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "color-field";
+    readonly slots: {
+        readonly "color-field": {};
+        readonly "color-field-group": {};
+        readonly "color-field-input": {};
+        readonly root: {};
+    };
+}>;

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

@@ -0,0 +1,51 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "color-field",
+    slot: {
+        group: "color-field__group",
+        input: "color-field__input"
+    },
+    flag: {
+        fullWidth: "color-field--full-width",
+        disabled: "color-field--disabled",
+        groupFullWidth: "color-field__group--full-width",
+        groupInvalid: "color-field__group--invalid"
+    }
+};
+const componentRecipe = recipe({
+    component: "color-field",
+    slots: {
+        "color-field": {},
+        "color-field-group": {},
+        "color-field-input": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "color-field": {
+                base: "",
+                axes: {}
+            },
+            "color-field-group": {
+                base: "",
+                axes: {}
+            },
+            "color-field-input": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "color-field": 0,
+            "color-field-group": 1,
+            "color-field-input": 2,
+            root: 3
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

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

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

@@ -1,3 +1,3 @@
-import ColorField from "./ColorField.js";
-const color_field = ColorField;
+import ColorField_generated from "./ColorField.generated.js";
+const color_field = ColorField_generated;
 export default color_field;

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

@@ -0,0 +1,34 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ColorPicker.css";
+import { 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: __LayoutComponent<ColorPickerAreaProps>;
+export type ColorPickerSliderProps = Omit<ColorSliderProps, "value" | "onChange" | "isDisabled"> & {
+    onChange?: (value: number) => void;
+};
+declare const ColorPickerSlider: __LayoutComponent<ColorPickerSliderProps>;
+export type ColorPickerFieldProps = Omit<ColorFieldProps, "value" | "onChange" | "isDisabled"> & {
+    onChange?: (value: string) => void;
+};
+declare const ColorPickerField: __LayoutComponent<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: __LayoutComponent<ColorPickerProps>;
+declare const ColorPicker: __LayoutComponent<ColorPickerProps> & {
+    Root: __LayoutComponent<ColorPickerProps>;
+    Area: __LayoutComponent<ColorPickerAreaProps>;
+    Slider: __LayoutComponent<ColorPickerSliderProps>;
+    Field: __LayoutComponent<ColorPickerFieldProps>;
+};
+export { ColorPicker as default, ColorPicker, ColorPickerRoot, ColorPickerArea, ColorPickerSlider, ColorPickerField, };