@pathscale/ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,231 @@
+import { createComponent, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Slider.css";
+import { Show, createSignal, createUniqueId, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Slider.recipe.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 __solidLayoutSlider = (_stable, p)=>{
+    let trackRef;
+    const [local] = splitProps(p, [
+        "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 = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutSlider,
+    embedded: true
+});
+const Slider_generated = Slider;
+export default Slider_generated;

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

@@ -0,0 +1,25 @@
+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";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "slider";
+    readonly slots: {
+        readonly label: {};
+        readonly root: {};
+        readonly slider: {};
+        readonly "slider-fill": {};
+        readonly "slider-output": {};
+        readonly "slider-thumb": {};
+        readonly "slider-track": {};
+    };
+}>;

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

@@ -0,0 +1,69 @@
+import { recipe } from "../../lib/layouts/index.js";
+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"
+    }
+};
+const componentRecipe = recipe({
+    component: "slider",
+    slots: {
+        label: {},
+        root: {},
+        slider: {},
+        "slider-fill": {},
+        "slider-output": {},
+        "slider-thumb": {},
+        "slider-track": {}
+    },
+    _layouts: {
+        slots: {
+            label: {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            },
+            slider: {
+                base: "",
+                axes: {}
+            },
+            "slider-fill": {
+                base: "",
+                axes: {}
+            },
+            "slider-output": {
+                base: "",
+                axes: {}
+            },
+            "slider-thumb": {
+                base: "",
+                axes: {}
+            },
+            "slider-track": {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            label: 0,
+            root: 1,
+            slider: 2,
+            "slider-fill": 3,
+            "slider-output": 4,
+            "slider-thumb": 5,
+            "slider-track": 6
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1,2 +1,2 @@
-export { default } from "./Slider";
-export type { SliderProps, SliderSize } from "./Slider";
+export { default } from "./Slider.generated";
+export type { SliderProps, SliderSize } from "./Slider.generated";

package/dist/components/slider/index.js

@@ -1 +1 @@
-export { default } from "./Slider.js";
+export { default } from "./Slider.generated.js";

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

@@ -0,0 +1,14 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Spinner.css";
+import { 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;
+};
+export declare const SpinnerLayout: __LayoutComponent<SpinnerProps>;

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

@@ -0,0 +1,42 @@
+import { createComponent, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Spinner.css";
+import { createUniqueId } from "solid-js";
+import { spinner } from "./Spinner.recipe.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 __solidLayoutSpinnerLayout = ({ slot, children }, p)=>(()=>{
+        var _el$8 = _tmpl$2();
+        spread(_el$8, mergeProps(()=>slot.root, {
+            role: "status",
+            get ["aria-label"] () {
+                return p.label ?? "Loading";
+            },
+            "aria-busy": "true",
+            "aria-live": "polite",
+            get style () {
+                return p.style;
+            }
+        }), false, true);
+        insert(_el$8, (()=>{
+            var _c$ = memo(()=>"spinner" === p.variant);
+            return ()=>_c$() ? createComponent(SpinnerSVG, {}) : void 0;
+        })());
+        return _el$8;
+    })();
+const SpinnerLayout = defineComponent({
+    recipe: spinner,
+    layout: __solidLayoutSpinnerLayout,
+    embedded: true
+});
+export { SpinnerLayout };

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

@@ -0,0 +1,65 @@
+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";
+    };
+};
+export declare const spinner: import("solid-layouts").Recipe<{
+    readonly component: "spinner";
+    readonly element: "span";
+    readonly slots: {
+        readonly root: {
+            readonly base: "spinner";
+        };
+    };
+    readonly props: {
+        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";
+        };
+        readonly label: {};
+    };
+    readonly defaults: {
+        readonly size: "md";
+        readonly color: "current";
+        readonly variant: "spinner";
+        readonly label: "Loading";
+    };
+}>;

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

@@ -0,0 +1,48 @@
+import { recipe } from "../../lib/layouts/index.js";
+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"
+    }
+};
+const spinner = recipe({
+    component: "spinner",
+    element: "span",
+    slots: {
+        root: {
+            base: CLASSES.base
+        }
+    },
+    props: {
+        size: CLASSES.size,
+        color: CLASSES.color,
+        variant: CLASSES.variant,
+        label: {}
+    },
+    defaults: {
+        size: "md",
+        color: "current",
+        variant: "spinner",
+        label: "Loading"
+    }
+});
+export { CLASSES, spinner };

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

@@ -1 +1,2 @@
-export { default, default as Spinner, default as Loading, type SpinnerProps, type SpinnerSize, type SpinnerColor, type SpinnerVariant, } from "./Spinner";
+export { SpinnerLayout as default, SpinnerLayout as Spinner, SpinnerLayout as Loading, } from "./Spinner.generated";
+export type { SpinnerProps, SpinnerSize, SpinnerColor, SpinnerVariant } from "./Spinner.generated";

package/dist/components/spinner/index.js

@@ -1 +1 @@
-export { default as Loading, default as Spinner, default } from "./Spinner.js";
+export { SpinnerLayout as Loading, SpinnerLayout as Spinner, SpinnerLayout as default } from "./Spinner.generated.js";

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

@@ -0,0 +1,13 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Surface.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SurfaceVariant = "default" | "secondary" | "tertiary" | "transparent";
+export type SurfaceVariants = {
+    variant?: SurfaceVariant;
+};
+export type SurfaceProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & SurfaceVariants & {
+    children?: JSX.Element;
+};
+export declare const Surface: __LayoutComponent<SurfaceProps>;
+export default Surface;

package/dist/components/surface/Surface.generated.js

@@ -0,0 +1,42 @@
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Surface.css";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Surface.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>");
+const __solidLayoutSurface = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "variant"
+    ]);
+    const variant = ()=>local.variant ?? "default";
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.base, CLASSES.variant[variant()], local.class, local.className)
+            }), {
+            "data-slot": "surface",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const Surface = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutSurface,
+    embedded: true
+});
+const Surface_generated = Surface;
+export default Surface_generated;
+export { Surface };

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

@@ -0,0 +1,16 @@
+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";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "surface";
+    readonly slots: {
+        readonly root: {};
+        readonly surface: {};
+    };
+}>;

package/dist/components/surface/Surface.recipe.js

@@ -0,0 +1,35 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "surface",
+    variant: {
+        default: "surface--default",
+        secondary: "surface--secondary",
+        tertiary: "surface--tertiary",
+        transparent: "surface--transparent"
+    }
+};
+const componentRecipe = recipe({
+    component: "surface",
+    slots: {
+        root: {},
+        surface: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            },
+            surface: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0,
+            surface: 1
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/surface/index.d.ts

@@ -1 +1 @@
-export { default, Surface, type SurfaceProps, type SurfaceVariant, type SurfaceVariants } from "./Surface";
+export { default, Surface, type SurfaceProps, type SurfaceVariant, type SurfaceVariants } from "./Surface.generated";

package/dist/components/surface/index.js

@@ -1 +1 @@
-export { Surface, default } from "./Surface.js";
+export { Surface, default } from "./Surface.generated.js";

package/dist/components/table/ExpandToggle.generated.d.ts

@@ -0,0 +1,12 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ExpandToggleProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onToggle"> & IComponentBaseProps & {
+    expanded: boolean;
+    onToggle?: () => void;
+    size?: number;
+    label?: string;
+    disabled?: boolean;
+};
+declare const ExpandToggle: __LayoutComponent<ExpandToggleProps>;
+export default ExpandToggle;