@pathscale/ui 1.3.1 → 1.4.0

package/dist/components/separator/Separator.classes.d.ts

@@ -1,12 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "separator";
-    readonly orientation: {
-        readonly horizontal: "separator--horizontal";
-        readonly vertical: "separator--vertical";
-    };
-    readonly variant: {
-        readonly default: "separator--default";
-        readonly secondary: "separator--secondary";
-        readonly tertiary: "separator--tertiary";
-    };
-};

package/dist/components/separator/Separator.classes.js

@@ -1,13 +0,0 @@
-const CLASSES = {
-    base: "separator",
-    orientation: {
-        horizontal: "separator--horizontal",
-        vertical: "separator--vertical"
-    },
-    variant: {
-        default: "separator--default",
-        secondary: "separator--secondary",
-        tertiary: "separator--tertiary"
-    }
-};
-export { CLASSES };

package/dist/components/separator/Separator.d.ts

@@ -1,12 +0,0 @@
-import "./Separator.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type SeparatorOrientation = "horizontal" | "vertical";
-export type SeparatorVariant = "default" | "secondary" | "tertiary";
-export type SeparatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    orientation?: SeparatorOrientation;
-    variant?: SeparatorVariant;
-};
-declare const Separator: Component<SeparatorProps>;
-export default Separator;
-export { Separator };

package/dist/components/separator/Separator.js

@@ -1,50 +0,0 @@
-import { mergeProps, spread, template } from "solid-js/web";
-import "./Separator.css";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./Separator.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>");
-const Separator = (props)=>{
-    const [local, others] = splitProps(props, [
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "orientation",
-        "variant",
-        "role"
-    ]);
-    const orientation = ()=>local.orientation ?? "horizontal";
-    const variant = ()=>local.variant ?? "default";
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, {
-            get role () {
-                return local.role ?? "separator";
-            },
-            get ["aria-orientation"] () {
-                return orientation();
-            },
-            "data-slot": "separator",
-            get ["data-orientation"] () {
-                return orientation();
-            },
-            get ["data-variant"] () {
-                return variant();
-            },
-            get ["class"] () {
-                return twMerge(CLASSES.base, CLASSES.orientation[orientation()], CLASSES.variant[variant()], local.class, local.className);
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, false);
-        return _el$;
-    })();
-};
-const separator_Separator = Separator;
-export default separator_Separator;
-export { Separator };

package/dist/components/size-picker/SizePicker.classes.d.ts

@@ -1,3 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "inline-flex gap-1";
-};

package/dist/components/size-picker/SizePicker.classes.js

@@ -1,4 +0,0 @@
-const CLASSES = {
-    base: "inline-flex gap-1"
-};
-export { CLASSES };

package/dist/components/size-picker/SizePicker.d.ts

@@ -1,10 +0,0 @@
-import { type Component } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-import { type SizePreset } from "./sizeStore";
-export interface SizePickerProps extends IComponentBaseProps {
-    storagePrefix?: string;
-    onSizeChange?: (size: SizePreset) => void;
-    "aria-label"?: string;
-}
-declare const SizePicker: Component<SizePickerProps>;
-export default SizePicker;

package/dist/components/size-picker/SizePicker.js

@@ -1,64 +0,0 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { For, createMemo, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { clsx } from "clsx";
-import button_0 from "../button/index.js";
-import { createSizeStore } from "./sizeStore.js";
-import { CLASSES } from "./SizePicker.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>");
-const PRESETS = [
-    "M",
-    "L",
-    "XL"
-];
-const SizePicker = (props)=>{
-    const [local, others] = splitProps(props, [
-        "storagePrefix",
-        "onSizeChange",
-        "aria-label",
-        "class",
-        "className",
-        "style",
-        "dataTheme"
-    ]);
-    const store = createMemo(()=>createSizeStore(local.storagePrefix ?? "theme"));
-    const handleClick = (preset)=>{
-        store().setSize(preset);
-        local.onSizeChange?.(preset);
-    };
-    const classes = ()=>twMerge(CLASSES.base, clsx(local.class, local.className));
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(()=>({
-                class: classes()
-            }), {
-            get style () {
-                return local.style;
-            },
-            role: "radiogroup",
-            get ["aria-label"] () {
-                return local["aria-label"] ?? "Change text size";
-            }
-        }, others), false, true);
-        insert(_el$, createComponent(For, {
-            each: PRESETS,
-            children: (preset)=>createComponent(button_0, {
-                    type: "button",
-                    size: "sm",
-                    get variant () {
-                        return store().size() === preset ? "primary" : "ghost";
-                    },
-                    onClick: ()=>handleClick(preset),
-                    role: "radio",
-                    get ["aria-checked"] () {
-                        return store().size() === preset;
-                    },
-                    "aria-label": `Size ${preset}`,
-                    children: preset
-                })
-        }));
-        return _el$;
-    })();
-};
-const size_picker_SizePicker = SizePicker;
-export default size_picker_SizePicker;

package/dist/components/skeleton/Skeleton.classes.d.ts

@@ -1,8 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "skeleton";
-    readonly animation: {
-        readonly shimmer: "skeleton--shimmer";
-        readonly pulse: "skeleton--pulse";
-        readonly none: "skeleton--none";
-    };
-};

package/dist/components/skeleton/Skeleton.classes.js

@@ -1,9 +0,0 @@
-const CLASSES = {
-    base: "skeleton",
-    animation: {
-        shimmer: "skeleton--shimmer",
-        pulse: "skeleton--pulse",
-        none: "skeleton--none"
-    }
-};
-export { CLASSES };

package/dist/components/skeleton/Skeleton.d.ts

@@ -1,9 +0,0 @@
-import "./Skeleton.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type SkeletonAnimation = "shimmer" | "pulse" | "none";
-export type SkeletonProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    animationType?: SkeletonAnimation;
-};
-declare const Skeleton: Component<SkeletonProps>;
-export default Skeleton;

package/dist/components/skeleton/Skeleton.js

@@ -1,33 +0,0 @@
-import { mergeProps, spread, template } from "solid-js/web";
-import "./Skeleton.css";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./Skeleton.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>");
-const Skeleton = (props)=>{
-    const [local, others] = splitProps(props, [
-        "class",
-        "className",
-        "animationType",
-        "dataTheme",
-        "style"
-    ]);
-    const animation = ()=>local.animationType ?? "shimmer";
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.base, CLASSES.animation[animation()], local.class, local.className)
-            }), {
-            "data-slot": "skeleton",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, false);
-        return _el$;
-    })();
-};
-const skeleton_Skeleton = Skeleton;
-export default skeleton_Skeleton;

package/dist/components/slider/Slider.classes.d.ts

@@ -1,13 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "slider";
-    readonly label: "slider__label";
-    readonly output: "slider__output";
-    readonly track: "slider__track";
-    readonly fill: "slider__fill";
-    readonly thumb: "slider__thumb";
-    readonly size: {
-        readonly sm: "slider--sm";
-        readonly md: "slider--md";
-        readonly lg: "slider--lg";
-    };
-};

package/dist/components/slider/Slider.classes.js

@@ -1,14 +0,0 @@
-const CLASSES = {
-    base: "slider",
-    label: "slider__label",
-    output: "slider__output",
-    track: "slider__track",
-    fill: "slider__fill",
-    thumb: "slider__thumb",
-    size: {
-        sm: "slider--sm",
-        md: "slider--md",
-        lg: "slider--lg"
-    }
-};
-export { CLASSES };

package/dist/components/slider/Slider.d.ts

@@ -1,22 +0,0 @@
-import "./Slider.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type SliderSize = "sm" | "md" | "lg";
-type SliderBaseProps = {
-    label?: string;
-    value: number;
-    onChange: (value: number) => void;
-    min?: number;
-    max?: number;
-    step?: number;
-    disabled?: boolean;
-    formatValue?: (value: number) => string;
-    size?: SliderSize;
-    dataTheme?: string;
-    class?: string;
-    className?: string;
-    style?: JSX.CSSProperties;
-};
-export type SliderProps = SliderBaseProps & IComponentBaseProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof SliderBaseProps>;
-declare const Slider: Component<SliderProps>;
-export default Slider;

package/dist/components/slider/Slider.js

@@ -1,225 +0,0 @@
-import { createComponent, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
-import "./Slider.css";
-import { Show, createSignal, createUniqueId, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./Slider.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<div><div><div></div><div>");
-function clamp(val, min, max) {
-    return Math.min(Math.max(val, min), max);
-}
-function snapToStep(val, min, max, step) {
-    const snapped = Math.round((val - min) / step) * step + min;
-    return clamp(snapped, min, max);
-}
-const Slider = (props)=>{
-    let trackRef;
-    const [local] = splitProps(props, [
-        "label",
-        "value",
-        "onChange",
-        "min",
-        "max",
-        "step",
-        "disabled",
-        "formatValue",
-        "size",
-        "dataTheme",
-        "class",
-        "className",
-        "style"
-    ]);
-    const min = ()=>local.min ?? 0;
-    const max = ()=>local.max ?? 100;
-    const step = ()=>local.step ?? 1;
-    const size = ()=>local.size ?? "md";
-    const isDisabled = ()=>Boolean(local.disabled);
-    const labelId = createUniqueId();
-    const [dragging, setDragging] = createSignal(false);
-    const [focusVisible, setFocusVisible] = createSignal(false);
-    const fraction = ()=>{
-        const range = max() - min();
-        if (range <= 0) return 0;
-        return (local.value - min()) / range;
-    };
-    const formattedValue = ()=>local.formatValue ? local.formatValue(local.value) : String(local.value);
-    const thumbLeft = ()=>{
-        const f = fraction();
-        return `calc(${f} * 100% + (0.5 - ${f}) * var(--slider-thumb-w) + ${1 - 2 * f} * var(--slider-pad))`;
-    };
-    const fillWidth = ()=>{
-        const f = fraction();
-        return `calc(${f} * 100% + ${1 - f} * var(--slider-thumb-w) + ${2 - 2 * f} * var(--slider-pad))`;
-    };
-    const getValueFromPosition = (clientX)=>{
-        if (!trackRef) return local.value;
-        const rect = trackRef.getBoundingClientRect();
-        const frac = clamp((clientX - rect.left) / rect.width, 0, 1);
-        const raw = min() + frac * (max() - min());
-        return snapToStep(raw, min(), max(), step());
-    };
-    const handlePointerDown = (e)=>{
-        if (isDisabled()) return;
-        e.preventDefault();
-        e.currentTarget.setPointerCapture(e.pointerId);
-        setDragging(true);
-        const val = getValueFromPosition(e.clientX);
-        if (val !== local.value) local.onChange(val);
-    };
-    const handlePointerMove = (e)=>{
-        if (!dragging()) return;
-        const val = getValueFromPosition(e.clientX);
-        if (val !== local.value) local.onChange(val);
-    };
-    const handlePointerUp = ()=>{
-        setDragging(false);
-    };
-    const handleKeyDown = (e)=>{
-        if (isDisabled()) return;
-        let newVal = local.value;
-        const s = step();
-        const bigStep = (max() - min()) / 10;
-        switch(e.key){
-            case "ArrowRight":
-            case "ArrowUp":
-                newVal = clamp(local.value + s, min(), max());
-                break;
-            case "ArrowLeft":
-            case "ArrowDown":
-                newVal = clamp(local.value - s, min(), max());
-                break;
-            case "PageUp":
-                newVal = clamp(local.value + bigStep, min(), max());
-                break;
-            case "PageDown":
-                newVal = clamp(local.value - bigStep, min(), max());
-                break;
-            case "Home":
-                newVal = min();
-                break;
-            case "End":
-                newVal = max();
-                break;
-            default:
-                return;
-        }
-        e.preventDefault();
-        if (newVal !== local.value) local.onChange(snapToStep(newVal, min(), max(), s));
-    };
-    const handleFocus = ()=>setFocusVisible(true);
-    const handleBlur = ()=>setFocusVisible(false);
-    return (()=>{
-        var _el$ = _tmpl$2(), _el$4 = _el$.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
-        spread(_el$, mergeProps(()=>({
-                class: twMerge(CLASSES.base, CLASSES.size[size()], local.class, local.className)
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            "data-slot": "slider",
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return local.label;
-            },
-            get children () {
-                return [
-                    (()=>{
-                        var _el$2 = _tmpl$();
-                        setAttribute(_el$2, "id", labelId);
-                        spread(_el$2, mergeProps(()=>({
-                                class: CLASSES.label
-                            }), {
-                            "data-slot": "label"
-                        }), false, true);
-                        insert(_el$2, ()=>local.label);
-                        return _el$2;
-                    })(),
-                    (()=>{
-                        var _el$3 = _tmpl$();
-                        spread(_el$3, mergeProps(()=>({
-                                class: CLASSES.output
-                            }), {
-                            "data-slot": "slider-output",
-                            "aria-live": "polite"
-                        }), false, true);
-                        insert(_el$3, formattedValue);
-                        return _el$3;
-                    })()
-                ];
-            }
-        }), _el$4);
-        var _ref$ = trackRef;
-        "function" == typeof _ref$ ? use(_ref$, _el$4) : trackRef = _el$4;
-        spread(_el$4, mergeProps(()=>({
-                class: CLASSES.track
-            }), {
-            "data-slot": "slider-track",
-            onPointerDown: handlePointerDown,
-            onPointerMove: handlePointerMove,
-            onPointerUp: handlePointerUp
-        }), false, true);
-        spread(_el$5, mergeProps(()=>({
-                class: CLASSES.fill
-            }), {
-            "data-slot": "slider-fill",
-            get style () {
-                return {
-                    width: fillWidth()
-                };
-            }
-        }), false, false);
-        spread(_el$6, mergeProps(()=>({
-                class: CLASSES.thumb
-            }), {
-            "data-slot": "slider-thumb",
-            get ["data-dragging"] () {
-                return dragging() ? "true" : "false";
-            },
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-focus-visible"] () {
-                return focusVisible() ? "true" : "false";
-            },
-            get style () {
-                return {
-                    left: thumbLeft()
-                };
-            },
-            role: "slider",
-            get tabIndex () {
-                return isDisabled() ? -1 : 0;
-            },
-            get ["aria-valuemin"] () {
-                return min();
-            },
-            get ["aria-valuemax"] () {
-                return max();
-            },
-            get ["aria-valuenow"] () {
-                return local.value;
-            },
-            get ["aria-valuetext"] () {
-                return formattedValue();
-            },
-            get ["aria-labelledby"] () {
-                return local.label ? labelId : void 0;
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : void 0;
-            },
-            onKeyDown: handleKeyDown,
-            onFocus: handleFocus,
-            onBlur: handleBlur
-        }), false, false);
-        return _el$;
-    })();
-};
-const slider_Slider = Slider;
-export default slider_Slider;

package/dist/components/spinner/Spinner.classes.d.ts

@@ -1,25 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "spinner";
-    readonly size: {
-        readonly xs: "spinner--xs";
-        readonly sm: "spinner--sm";
-        readonly md: "";
-        readonly lg: "spinner--lg";
-        readonly xl: "spinner--xl";
-    };
-    readonly color: {
-        readonly current: "spinner--current";
-        readonly accent: "spinner--accent";
-        readonly success: "spinner--success";
-        readonly warning: "spinner--warning";
-        readonly danger: "spinner--danger";
-    };
-    readonly variant: {
-        readonly spinner: "spinner--spinner";
-        readonly dots: "spinner--dots";
-        readonly ring: "spinner--ring";
-        readonly ball: "spinner--ball";
-        readonly bars: "spinner--bars";
-        readonly infinity: "spinner--infinity";
-    };
-};

package/dist/components/spinner/Spinner.classes.js

@@ -1,26 +0,0 @@
-const CLASSES = {
-    base: "spinner",
-    size: {
-        xs: "spinner--xs",
-        sm: "spinner--sm",
-        md: "",
-        lg: "spinner--lg",
-        xl: "spinner--xl"
-    },
-    color: {
-        current: "spinner--current",
-        accent: "spinner--accent",
-        success: "spinner--success",
-        warning: "spinner--warning",
-        danger: "spinner--danger"
-    },
-    variant: {
-        spinner: "spinner--spinner",
-        dots: "spinner--dots",
-        ring: "spinner--ring",
-        ball: "spinner--ball",
-        bars: "spinner--bars",
-        infinity: "spinner--infinity"
-    }
-};
-export { CLASSES };

package/dist/components/spinner/Spinner.d.ts

@@ -1,14 +0,0 @@
-import "./Spinner.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
-export type SpinnerColor = "current" | "accent" | "success" | "warning" | "danger";
-export type SpinnerVariant = "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity";
-export type SpinnerProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
-    size?: SpinnerSize;
-    color?: SpinnerColor;
-    variant?: SpinnerVariant;
-    label?: string;
-};
-declare const Spinner: Component<SpinnerProps>;
-export default Spinner;

package/dist/components/spinner/Spinner.js

@@ -1,60 +0,0 @@
-import { createComponent, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
-import "./Spinner.css";
-import { createUniqueId, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./Spinner.classes.js";
-var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=spinner-icon fill=none viewBox="0 0 24 24"><defs><linearGradient x1=50% x2=50% y1=5.271% y2=91.793%><stop offset=0% stop-color=currentColor></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient><linearGradient x1=50% x2=50% y1=15.24% y2=87.15%><stop offset=0% stop-color=currentColor stop-opacity=0></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient></defs><g fill=none><path d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"transform="translate(1.5 1.625)"></path><path d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"transform="translate(1.5 1.625)">'), _tmpl$2 = /*#__PURE__*/ template("<span>");
-const SpinnerSVG = ()=>{
-    const id = createUniqueId();
-    return (()=>{
-        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
-        setAttribute(_el$3, "id", `spinner-grad1-${id}`);
-        setAttribute(_el$4, "id", `spinner-grad2-${id}`);
-        setAttribute(_el$6, "fill", `url(#spinner-grad1-${id})`);
-        setAttribute(_el$7, "fill", `url(#spinner-grad2-${id})`);
-        return _el$;
-    })();
-};
-const Spinner = (props)=>{
-    const [local, others] = splitProps(props, [
-        "size",
-        "color",
-        "variant",
-        "label",
-        "class",
-        "className",
-        "dataTheme",
-        "style"
-    ]);
-    const size = ()=>local.size ?? "md";
-    const color = ()=>local.color ?? "current";
-    const variant = ()=>local.variant ?? "spinner";
-    return (()=>{
-        var _el$8 = _tmpl$2();
-        spread(_el$8, mergeProps(others, {
-            role: "status",
-            get ["aria-label"] () {
-                return local.label ?? "Loading";
-            },
-            "aria-busy": "true",
-            "aria-live": "polite",
-            get ["class"] () {
-                return twMerge(CLASSES.base, CLASSES.size[size()], CLASSES.color[color()], CLASSES.variant[variant()], local.class, local.className);
-            },
-            "data-slot": "spinner",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$8, (()=>{
-            var _c$ = memo(()=>"spinner" === variant());
-            return ()=>_c$() ? createComponent(SpinnerSVG, {}) : void 0;
-        })());
-        return _el$8;
-    })();
-};
-const spinner_Spinner = Spinner;
-export default spinner_Spinner;

package/dist/components/surface/Surface.classes.d.ts

@@ -1,9 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "surface";
-    readonly variant: {
-        readonly default: "surface--default";
-        readonly secondary: "surface--secondary";
-        readonly tertiary: "surface--tertiary";
-        readonly transparent: "surface--transparent";
-    };
-};