@pathscale/ui 1.3.1 → 1.4.0

package/dist/components/chip/Chip.classes.js

@@ -1,30 +0,0 @@
-const CLASSES = {
-    base: "chip",
-    slot: {
-        icon: "chip__icon",
-        iconStart: "chip__icon--start",
-        iconEnd: "chip__icon--end",
-        label: "chip__label",
-        remove: "chip__remove",
-        removeIcon: "chip__remove-icon"
-    },
-    variant: {
-        solid: "chip--solid",
-        flat: "chip--flat",
-        bordered: "chip--bordered"
-    },
-    color: {
-        default: "chip--default",
-        primary: "chip--primary",
-        accent: "chip--accent",
-        success: "chip--success",
-        warning: "chip--warning",
-        danger: "chip--danger"
-    },
-    size: {
-        sm: "chip--sm",
-        md: "chip--md",
-        lg: "chip--lg"
-    }
-};
-export { CLASSES };

package/dist/components/chip/Chip.d.ts

@@ -1,25 +0,0 @@
-import { type JSX } from "solid-js";
-import "./Chip.css";
-type ChipVariant = "solid" | "flat" | "bordered";
-type ChipColor = "default" | "primary" | "accent" | "success" | "warning" | "danger";
-type ChipSize = "sm" | "md" | "lg";
-interface ChipRootProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color" | "onRemove"> {
-    class?: string;
-    className?: string;
-    children?: JSX.Element;
-    variant?: ChipVariant;
-    color?: ChipColor;
-    size?: ChipSize;
-    startIcon?: JSX.Element;
-    endIcon?: JSX.Element;
-    onRemove?: () => void;
-    removeButtonLabel?: string;
-    isDisabled?: boolean;
-}
-declare const ChipRoot: (props: ChipRootProps) => JSX.Element;
-interface ChipLabelProps extends JSX.HTMLAttributes<HTMLSpanElement> {
-    class?: string;
-}
-declare const ChipLabel: (props: ChipLabelProps) => JSX.Element;
-export { ChipRoot, ChipLabel };
-export type { ChipRootProps, ChipLabelProps, ChipVariant, ChipColor, ChipSize };

package/dist/components/chip/Chip.js

@@ -1,138 +0,0 @@
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
-import { clsx } from "clsx";
-import { Show, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import "./Chip.css";
-import { CLASSES } from "./Chip.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<button type=button>");
-const ChipRoot = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "variant",
-        "color",
-        "size",
-        "startIcon",
-        "endIcon",
-        "onRemove",
-        "removeButtonLabel",
-        "isDisabled"
-    ]);
-    const classes = ()=>{
-        const variant = local.variant ?? "solid";
-        const color = local.color ?? "default";
-        const size = local.size ?? "md";
-        return twMerge(clsx(CLASSES.base, CLASSES.variant[variant], CLASSES.color[color], CLASSES.size[size], local.class, local.className));
-    };
-    const chipChildren = ()=>{
-        const c = local.children;
-        if ("string" == typeof c || "number" == typeof c) return createComponent(ChipLabel, {
-            children: c
-        });
-        return c;
-    };
-    const handleRemove = (event)=>{
-        event.stopPropagation();
-        local.onRemove?.();
-    };
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, ()=>({
-                class: classes()
-            }), {
-            "data-slot": "chip",
-            get ["data-disabled"] () {
-                return local.isDisabled ? "true" : "false";
-            },
-            get ["data-removable"] () {
-                return local.onRemove ? "true" : "false";
-            }
-        }), false, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return local.startIcon;
-            },
-            get children () {
-                var _el$2 = _tmpl$();
-                spread(_el$2, mergeProps(()=>({
-                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
-                    }), {
-                    "data-slot": "chip-start-icon"
-                }), false, true);
-                insert(_el$2, ()=>local.startIcon);
-                return _el$2;
-            }
-        }), null);
-        insert(_el$, chipChildren, null);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return memo(()=>!!local.onRemove)() && local.endIcon;
-            },
-            get children () {
-                var _el$3 = _tmpl$2();
-                spread(_el$3, mergeProps(()=>({
-                        class: CLASSES.slot.remove
-                    }), {
-                    "data-slot": "chip-remove",
-                    get ["aria-label"] () {
-                        return local.removeButtonLabel ?? "Remove";
-                    },
-                    onClick: handleRemove,
-                    get disabled () {
-                        return Boolean(local.isDisabled);
-                    }
-                }), false, true);
-                insert(_el$3, createComponent(Show, {
-                    get when () {
-                        return local.endIcon;
-                    },
-                    get children () {
-                        var _el$4 = _tmpl$();
-                        spread(_el$4, mergeProps(()=>({
-                                class: CLASSES.slot.removeIcon
-                            }), {
-                            "data-slot": "chip-remove-icon"
-                        }), false, true);
-                        insert(_el$4, ()=>local.endIcon);
-                        return _el$4;
-                    }
-                }));
-                return _el$3;
-            }
-        }), null);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return memo(()=>!local.onRemove)() && local.endIcon;
-            },
-            get children () {
-                var _el$5 = _tmpl$();
-                spread(_el$5, mergeProps(()=>({
-                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
-                    }), {
-                    "data-slot": "chip-end-icon"
-                }), false, true);
-                insert(_el$5, ()=>local.endIcon);
-                return _el$5;
-            }
-        }), null);
-        return _el$;
-    })();
-};
-const ChipLabel = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class"
-    ]);
-    return (()=>{
-        var _el$6 = _tmpl$();
-        spread(_el$6, mergeProps(()=>({
-                class: twMerge(CLASSES.slot.label, local.class)
-            }), {
-            "data-slot": "chip-label"
-        }, others), false, true);
-        insert(_el$6, ()=>local.children);
-        return _el$6;
-    })();
-};
-export { ChipLabel, ChipRoot };

package/dist/components/close-button/CloseButton.classes.d.ts

@@ -1,11 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "close-button";
-    readonly variant: {
-        readonly default: "close-button--default";
-    };
-    readonly slot: {
-        readonly icon: "close-button__icon";
-        readonly iconStart: "close-button__icon--start";
-        readonly iconEnd: "close-button__icon--end";
-    };
-};

package/dist/components/close-button/CloseButton.classes.js

@@ -1,12 +0,0 @@
-const CLASSES = {
-    base: "close-button",
-    variant: {
-        default: "close-button--default"
-    },
-    slot: {
-        icon: "close-button__icon",
-        iconStart: "close-button__icon--start",
-        iconEnd: "close-button__icon--end"
-    }
-};
-export { CLASSES };

package/dist/components/close-button/CloseButton.d.ts

@@ -1,14 +0,0 @@
-import "./CloseButton.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type CloseButtonVariant = "default";
-export type CloseButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> & IComponentBaseProps & {
-    variant?: CloseButtonVariant;
-    isDisabled?: boolean;
-    isPending?: boolean;
-    startIcon?: JSX.Element;
-    endIcon?: JSX.Element;
-    className?: string;
-};
-declare const CloseButton: Component<CloseButtonProps>;
-export default CloseButton;

package/dist/components/close-button/CloseButton.js

@@ -1,84 +0,0 @@
-import { insert, memo, mergeProps, spread, template } from "solid-js/web";
-import "./CloseButton.css";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./CloseButton.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<button>"), _tmpl$2 = /*#__PURE__*/ template("<span>");
-const CloseButton = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "variant",
-        "isDisabled",
-        "isPending",
-        "startIcon",
-        "endIcon",
-        "type",
-        "dataTheme",
-        "style",
-        "aria-label"
-    ]);
-    const variant = ()=>local.variant ?? "default";
-    const disabled = ()=>Boolean(local.isDisabled) || Boolean(local.isPending);
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, {
-            get type () {
-                return local.type ?? "button";
-            },
-            get ["aria-label"] () {
-                return local["aria-label"] ?? "Close";
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.base, CLASSES.variant[variant()], local.class, local.className)
-            }), {
-            "data-slot": "close-button",
-            get ["data-pending"] () {
-                return local.isPending ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get disabled () {
-                return disabled();
-            },
-            get ["aria-disabled"] () {
-                return disabled() ? "true" : "false";
-            }
-        }), false, true);
-        insert(_el$, (()=>{
-            var _c$ = memo(()=>!!local.startIcon);
-            return ()=>_c$() ? (()=>{
-                    var _el$2 = _tmpl$2();
-                    spread(_el$2, mergeProps(()=>({
-                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
-                        }), {
-                        "data-slot": "close-button-start-icon"
-                    }), false, true);
-                    insert(_el$2, ()=>local.startIcon);
-                    return _el$2;
-                })() : null;
-        })(), null);
-        insert(_el$, ()=>local.children, null);
-        insert(_el$, (()=>{
-            var _c$2 = memo(()=>!!local.endIcon);
-            return ()=>_c$2() ? (()=>{
-                    var _el$3 = _tmpl$2();
-                    spread(_el$3, mergeProps(()=>({
-                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
-                        }), {
-                        "data-slot": "close-button-end-icon"
-                    }), false, true);
-                    insert(_el$3, ()=>local.endIcon);
-                    return _el$3;
-                })() : null;
-        })(), null);
-        return _el$;
-    })();
-};
-const close_button_CloseButton = CloseButton;
-export default close_button_CloseButton;

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

@@ -1,6 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "color-area";
-    readonly slot: {
-        readonly thumb: "color-area__thumb";
-    };
-};

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

@@ -1,7 +0,0 @@
-const CLASSES = {
-    base: "color-area",
-    slot: {
-        thumb: "color-area__thumb"
-    }
-};
-export { CLASSES };

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

@@ -1,15 +0,0 @@
-import "./ColorArea.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type ColorAreaValue = {
-    h: number;
-    s: number;
-    v: number;
-};
-export type ColorAreaProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
-    value?: ColorAreaValue;
-    onChange?: (value: ColorAreaValue) => void;
-    isDisabled?: boolean;
-};
-declare const ColorArea: Component<ColorAreaProps>;
-export default ColorArea;

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

@@ -1,215 +0,0 @@
-import { mergeProps, spread, template, use } from "solid-js/web";
-import "./ColorArea.css";
-import { createSignal, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./ColorArea.classes.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 ColorArea = (props)=>{
-    const [local, others] = splitProps(props, [
-        "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 color_area_ColorArea = ColorArea;
-export default color_area_ColorArea;

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

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

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

@@ -1,14 +0,0 @@
-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"
-    }
-};
-export { CLASSES };

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

@@ -1,15 +0,0 @@
-import "./ColorField.css";
-import { type Component, 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: Component<ColorFieldProps>;
-export default ColorField;