@pathscale/ui 1.3.1 → 1.4.0

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

@@ -1,187 +0,0 @@
-import { memo, mergeProps, spread, template, use } from "solid-js/web";
-import "./ColorSlider.css";
-import { createEffect, createMemo, createSignal, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./ColorSlider.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div><div></div><div>");
-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] = 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] = createSignal(initialValue());
-    const [isDragging, setIsDragging] = createSignal(false);
-    let sliderRef;
-    const isControlled = ()=>void 0 !== local.value;
-    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 = 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$ ? use(_ref$, _el$) : sliderRef = _el$;
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.base, "alpha" === sliderType() && CLASSES.flag.alpha, isDragging() && CLASSES.flag.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 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);
-        spread(_el$2, mergeProps(()=>({
-                class: CLASSES.slot.track
-            }), {
-            "data-slot": "color-slider-track"
-        }), false, false);
-        spread(_el$3, mergeProps(()=>({
-                class: CLASSES.slot.thumb
-            }), {
-            "data-slot": "color-slider-thumb",
-            get ["data-dragging"] () {
-                return isDragging() ? "true" : "false";
-            },
-            get style () {
-                return {
-                    left: `${percent()}%`,
-                    "background-color": "var(--color-slider-thumb-color)"
-                };
-            }
-        }), false, false);
-        return _el$;
-    })();
-};
-const color_slider_ColorSlider = ColorSlider;
-export default color_slider_ColorSlider;

package/dist/components/color-swatch/ColorSwatch.classes.d.ts

@@ -1,14 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "color-swatch";
-    readonly shape: {
-        readonly circle: "color-swatch--circle";
-        readonly square: "color-swatch--square";
-    };
-    readonly size: {
-        readonly xs: "color-swatch--xs";
-        readonly sm: "color-swatch--sm";
-        readonly md: "color-swatch--md";
-        readonly lg: "color-swatch--lg";
-        readonly xl: "color-swatch--xl";
-    };
-};

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

@@ -1,15 +0,0 @@
-const CLASSES = {
-    base: "color-swatch",
-    shape: {
-        circle: "color-swatch--circle",
-        square: "color-swatch--square"
-    },
-    size: {
-        xs: "color-swatch--xs",
-        sm: "color-swatch--sm",
-        md: "color-swatch--md",
-        lg: "color-swatch--lg",
-        xl: "color-swatch--xl"
-    }
-};
-export { CLASSES };

package/dist/components/color-swatch/ColorSwatch.d.ts

@@ -1,17 +0,0 @@
-import "./ColorSwatch.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type ColorSwatchShape = "circle" | "square";
-export type ColorSwatchSize = "xs" | "sm" | "md" | "lg" | "xl";
-export type ColorSwatchProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "onSelect"> & IComponentBaseProps & {
-    color: string;
-    colorName?: string;
-    shape?: ColorSwatchShape;
-    size?: ColorSwatchSize;
-    isSelected?: boolean;
-    isDisabled?: boolean;
-    onSelect?: (color: string) => void;
-    onChange?: (color: string) => void;
-};
-declare const ColorSwatch: Component<ColorSwatchProps>;
-export default ColorSwatch;

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

@@ -1,133 +0,0 @@
-import { memo, mergeProps, spread, template } from "solid-js/web";
-import "./ColorSwatch.css";
-import { splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { ColorSwatchPickerContext } from "../color-swatch-picker/ColorSwatchPicker.js";
-import { CLASSES } from "./ColorSwatch.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<button>");
-const invokeEventHandler = (handler, event)=>{
-    if ("function" == typeof handler) return void handler(event);
-    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
-};
-const ColorSwatch = (props)=>{
-    const picker = useContext(ColorSwatchPickerContext);
-    const [local, others] = splitProps(props, [
-        "class",
-        "className",
-        "color",
-        "colorName",
-        "shape",
-        "size",
-        "isSelected",
-        "isDisabled",
-        "disabled",
-        "onSelect",
-        "onChange",
-        "onClick",
-        "onKeyDown",
-        "style",
-        "dataTheme",
-        "aria-label",
-        "role",
-        "tabIndex"
-    ]);
-    const isInsidePicker = ()=>Boolean(picker);
-    const hasPickerSelection = ()=>picker ? void 0 !== picker.value() : false;
-    const shape = ()=>local.shape ?? "circle";
-    const size = ()=>local.size ?? "md";
-    const isDisabled = ()=>{
-        const localDisabled = Boolean(local.isDisabled) || Boolean(local.disabled);
-        const pickerDisabled = picker ? picker.isDisabled() : false;
-        return localDisabled || pickerDisabled;
-    };
-    const isSelected = ()=>{
-        if (void 0 !== local.isSelected) return Boolean(local.isSelected);
-        if (!picker) return false;
-        return picker.value() === local.color;
-    };
-    const emitSelection = ()=>{
-        local.onSelect?.(local.color);
-        local.onChange?.(local.color);
-        picker?.select(local.color);
-    };
-    const handleClick = (event)=>{
-        invokeEventHandler(local.onClick, event);
-        if (event.defaultPrevented || isDisabled()) return;
-        emitSelection();
-    };
-    const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
-        if (event.defaultPrevented || isDisabled()) return;
-        if ("Enter" === event.key || " " === event.key) {
-            event.preventDefault();
-            emitSelection();
-        }
-    };
-    const style = ()=>{
-        const userStyle = local.style;
-        return {
-            "--color-swatch-current": local.color,
-            ...userStyle
-        };
-    };
-    const tabIndex = ()=>{
-        if (void 0 !== local.tabIndex) return local.tabIndex;
-        if (!isInsidePicker()) return;
-        if (!hasPickerSelection()) return 0;
-        return isSelected() ? 0 : -1;
-    };
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, {
-            type: "button",
-            get ["class"] () {
-                return twMerge(CLASSES.base, CLASSES.shape[shape()], CLASSES.size[size()], local.class, local.className);
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            "data-slot": "color-swatch",
-            get ["data-color-value"] () {
-                return local.color;
-            },
-            get ["data-picker-item"] () {
-                return isInsidePicker() ? "true" : "false";
-            },
-            get ["data-selected"] () {
-                return isSelected() ? "true" : "false";
-            },
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get disabled () {
-                return isDisabled();
-            },
-            get role () {
-                return local.role ?? (isInsidePicker() ? "radio" : "option");
-            },
-            get tabIndex () {
-                return tabIndex();
-            },
-            get ["aria-label"] () {
-                return local["aria-label"] ?? local.colorName ?? `Color ${local.color}`;
-            },
-            get ["aria-selected"] () {
-                return isSelected() ? "true" : "false";
-            },
-            get ["aria-checked"] () {
-                return memo(()=>!!isInsidePicker())() ? isSelected() ? "true" : "false" : void 0;
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get style () {
-                return style();
-            },
-            onClick: handleClick,
-            onKeyDown: handleKeyDown
-        }), false, false);
-        return _el$;
-    })();
-};
-const color_swatch_ColorSwatch = ColorSwatch;
-export default color_swatch_ColorSwatch;

package/dist/components/color-swatch-picker/ColorSwatchPicker.classes.d.ts

@@ -1,3 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "color-swatch-picker";
-};

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

@@ -1,4 +0,0 @@
-const CLASSES = {
-    base: "color-swatch-picker"
-};
-export { CLASSES };

package/dist/components/color-swatch-picker/ColorSwatchPicker.d.ts

@@ -1,18 +0,0 @@
-import "./ColorSwatchPicker.css";
-import { type Accessor, type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type ColorSwatchPickerContextValue = {
-    value: Accessor<string | undefined>;
-    isDisabled: Accessor<boolean>;
-    select: (value: string) => void;
-};
-export declare const ColorSwatchPickerContext: import("solid-js").Context<ColorSwatchPickerContextValue | undefined>;
-export type ColorSwatchPickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & IComponentBaseProps & {
-    children: JSX.Element;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-    isDisabled?: boolean;
-};
-declare const ColorSwatchPicker: Component<ColorSwatchPickerProps>;
-export { ColorSwatchPicker as default, ColorSwatchPicker };

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

@@ -1,110 +0,0 @@
-import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-import "./ColorSwatchPicker.css";
-import { createContext, createMemo, createSignal, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./ColorSwatchPicker.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>");
-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 ColorSwatchPickerContext = createContext();
-const ColorSwatchPicker = (props)=>{
-    const [local, others] = splitProps(props, [
-        "class",
-        "className",
-        "children",
-        "value",
-        "defaultValue",
-        "onChange",
-        "isDisabled",
-        "dataTheme",
-        "role",
-        "onKeyDown"
-    ]);
-    const [internalValue, setInternalValue] = createSignal(local.defaultValue);
-    let rootRef;
-    const isControlled = ()=>void 0 !== local.value;
-    const currentValue = ()=>isControlled() ? local.value : internalValue();
-    const isDisabled = ()=>Boolean(local.isDisabled);
-    const setValue = (next)=>{
-        if (isDisabled()) return;
-        if (!isControlled()) setInternalValue(next);
-        local.onChange?.(next);
-    };
-    const getEnabledItems = ()=>{
-        if (!rootRef) return [];
-        return Array.from(rootRef.querySelectorAll('[data-picker-item="true"][data-disabled="false"]'));
-    };
-    const findFocusedOrSelectedIndex = (items)=>{
-        if (!items.length) return -1;
-        const active = document.activeElement;
-        const focusedIndex = items.findIndex((item)=>item === active);
-        if (focusedIndex >= 0) return focusedIndex;
-        const selected = currentValue();
-        if (!selected) return 0;
-        const selectedIndex = items.findIndex((item)=>item.dataset.colorValue === selected);
-        return selectedIndex >= 0 ? selectedIndex : 0;
-    };
-    const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
-        if (event.defaultPrevented || isDisabled()) return;
-        const key = event.key;
-        const moveNext = "ArrowRight" === key || "ArrowDown" === key;
-        const movePrev = "ArrowLeft" === key || "ArrowUp" === key;
-        const moveFirst = "Home" === key;
-        const moveLast = "End" === key;
-        if (!moveNext && !movePrev && !moveFirst && !moveLast) return;
-        const items = getEnabledItems();
-        if (!items.length) return;
-        event.preventDefault();
-        const currentIndex = findFocusedOrSelectedIndex(items);
-        let nextIndex = currentIndex;
-        if (moveFirst) nextIndex = 0;
-        else if (moveLast) nextIndex = items.length - 1;
-        else if (moveNext) nextIndex = (currentIndex + 1 + items.length) % items.length;
-        else if (movePrev) nextIndex = (currentIndex - 1 + items.length) % items.length;
-        const nextItem = items[nextIndex];
-        if (!nextItem) return;
-        nextItem.focus();
-        const nextColor = nextItem.dataset.colorValue;
-        if (nextColor) setValue(nextColor);
-    };
-    const context = createMemo(()=>({
-            value: currentValue,
-            isDisabled,
-            select: setValue
-        }));
-    return createComponent(ColorSwatchPickerContext.Provider, {
-        get value () {
-            return context();
-        },
-        get children () {
-            var _el$ = _tmpl$();
-            var _ref$ = rootRef;
-            "function" == typeof _ref$ ? use(_ref$, _el$) : rootRef = _el$;
-            spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, local.class, local.className)
-                }), {
-                get ["data-theme"] () {
-                    return local.dataTheme;
-                },
-                "data-slot": "color-swatch-picker",
-                get ["data-disabled"] () {
-                    return isDisabled() ? "true" : "false";
-                },
-                get role () {
-                    return local.role ?? "radiogroup";
-                },
-                get ["aria-disabled"] () {
-                    return isDisabled() ? "true" : "false";
-                },
-                onKeyDown: handleKeyDown
-            }), false, true);
-            insert(_el$, ()=>local.children);
-            return _el$;
-        }
-    });
-};
-export default ColorSwatchPicker;
-export { ColorSwatchPicker, ColorSwatchPickerContext };

package/dist/components/color-wheel-flower/ColorWheelFlower.classes.d.ts

@@ -1,33 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "color-wheel-flower";
-    readonly flag: {
-        readonly disabled: "color-wheel-flower--disabled";
-    };
-    readonly rings: "color-wheel-flower__rings";
-    readonly ringShell: {
-        readonly base: "color-wheel-flower__ring-shell";
-        readonly outer: "color-wheel-flower__ring-shell--outer";
-        readonly inner: "color-wheel-flower__ring-shell--inner";
-    };
-    readonly ring: {
-        readonly base: "color-wheel-flower__ring";
-        readonly outer: "color-wheel-flower__ring--outer";
-        readonly inner: "color-wheel-flower__ring--inner";
-    };
-    readonly picker: "color-wheel-flower__picker";
-    readonly dot: {
-        readonly base: "color-wheel-flower__dot";
-        readonly frame: "color-wheel-flower__dot-frame";
-        readonly motion: "color-wheel-flower__dot-motion";
-    };
-    readonly halo: "color-wheel-flower__halo";
-    readonly swatch: {
-        readonly base: "color-wheel-flower__swatch";
-        readonly center: "color-wheel-flower__swatch--center";
-    };
-    readonly highlight: {
-        readonly base: "color-wheel-flower__highlight";
-        readonly hovered: "color-wheel-flower__highlight--hovered";
-        readonly pulsing: "color-wheel-flower__highlight--pulsing";
-    };
-};

package/dist/components/color-wheel-flower/ColorWheelFlower.classes.js

@@ -1,34 +0,0 @@
-const CLASSES = {
-    base: "color-wheel-flower",
-    flag: {
-        disabled: "color-wheel-flower--disabled"
-    },
-    rings: "color-wheel-flower__rings",
-    ringShell: {
-        base: "color-wheel-flower__ring-shell",
-        outer: "color-wheel-flower__ring-shell--outer",
-        inner: "color-wheel-flower__ring-shell--inner"
-    },
-    ring: {
-        base: "color-wheel-flower__ring",
-        outer: "color-wheel-flower__ring--outer",
-        inner: "color-wheel-flower__ring--inner"
-    },
-    picker: "color-wheel-flower__picker",
-    dot: {
-        base: "color-wheel-flower__dot",
-        frame: "color-wheel-flower__dot-frame",
-        motion: "color-wheel-flower__dot-motion"
-    },
-    halo: "color-wheel-flower__halo",
-    swatch: {
-        base: "color-wheel-flower__swatch",
-        center: "color-wheel-flower__swatch--center"
-    },
-    highlight: {
-        base: "color-wheel-flower__highlight",
-        hovered: "color-wheel-flower__highlight--hovered",
-        pulsing: "color-wheel-flower__highlight--pulsing"
-    }
-};
-export { CLASSES };

package/dist/components/color-wheel-flower/ColorWheelFlower.d.ts

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