@pathscale/ui 2.5.0 → 2.6.1

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

@@ -1,8 +1,8 @@
-import { createComponent, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Slider.css";
-import { Show, createSignal, createUniqueId, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Show, createSignal, createUniqueId } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Slider.recipe.js";
 import { createSliderInteractionHandlers } from "./Slider.interactions.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<div><div><div></div><div>");
@@ -16,35 +16,20 @@ function snapToStep(val, min, max, step) {
 const __solidLayoutSlider = (_stable, p)=>{
     let trackRef;
     let thumbRef;
-    const [local] = splitProps(p, [
-        "label",
-        "value",
-        "onChange",
-        "onChangeEnd",
-        "min",
-        "max",
-        "step",
-        "disabled",
-        "formatValue",
-        "size",
-        "dataTheme",
-        "class",
-        "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 min = ()=>p.min ?? 0;
+    const max = ()=>p.max ?? 100;
+    const step = ()=>p.step ?? 1;
+    const size = ()=>p.size ?? "md";
+    const isDisabled = ()=>Boolean(p.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;
+        return (p.value - min()) / range;
     };
-    const formattedValue = ()=>local.formatValue ? local.formatValue(local.value) : String(local.value);
+    const formattedValue = ()=>p.formatValue ? p.formatValue(p.value) : String(p.value);
     const thumbLeft = ()=>{
         const f = fraction();
         return `calc(${f} * 100% + (0.5 - ${f}) * var(--slider-thumb-w) + ${1 - 2 * f} * var(--slider-pad))`;
@@ -70,9 +55,9 @@ const __solidLayoutSlider = (_stable, p)=>{
         };
     };
     const getValueFromPosition = (clientX)=>{
-        if (!trackRef) return local.value;
+        if (!trackRef) return p.value;
         const geometry = dragGeometry ?? measureTrack();
-        if (!geometry || geometry.usable <= 0) return local.value;
+        if (!geometry || geometry.usable <= 0) return p.value;
         const frac = clamp((clientX - geometry.left - geometry.inset) / geometry.usable, 0, 1);
         const raw = min() + frac * (max() - min());
         return snapToStep(raw, min(), max(), step());
@@ -109,151 +94,150 @@ const __solidLayoutSlider = (_stable, p)=>{
     };
     const interactions = createSliderInteractionHandlers({
         isDisabled,
-        value: ()=>local.value,
+        value: ()=>p.value,
         valueFromPosition: getValueFromPosition,
         valueFromKey: getValueFromKey,
         onDragGeometry: (active)=>{
             dragGeometry = active ? measureTrack() : void 0;
         },
         isThumb: (target)=>Boolean(thumbRef && target === thumbRef),
-        onChange: (value)=>local.onChange(value),
-        onChangeEnd: (value)=>local.onChangeEnd?.(value),
+        onChange: (value)=>p.onChange(value),
+        onChangeEnd: (value)=>p.onChangeEnd?.(value),
         onDraggingChange: setDragging
     });
     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)
-            }), {
-            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",
-            get onPointerDown () {
-                return interactions.onPointerDown;
-            },
-            get onPointerMove () {
-                return interactions.onPointerMove;
-            },
-            get onPointerUp () {
-                return interactions.onPointerUp;
-            },
-            get onPointerCancel () {
-                return interactions.onPointerCancel;
-            }
-        }), false, true);
-        spread(_el$5, mergeProps(()=>({
-                class: CLASSES.fill
-            }), {
-            "data-slot": "slider-fill",
-            get style () {
-                return {
-                    width: fillWidth()
-                };
-            }
-        }), false, false);
-        var _ref$2 = thumbRef;
-        "function" == typeof _ref$2 ? use(_ref$2, _el$6) : thumbRef = _el$6;
-        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;
-            },
-            get onKeyDown () {
-                return interactions.onKeyDown;
-            },
-            get onKeyUp () {
-                return interactions.onKeyUp;
-            },
-            onFocus: handleFocus,
-            onBlur: ()=>{
-                interactions.onBlur();
-                handleBlur();
-            }
-        }), false, false);
-        return _el$;
-    })();
+    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()], p.class)
+        }), {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        "data-slot": "slider",
+        get ["data-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$, createComponent(Show, {
+        get when () {
+            return p.label;
+        },
+        get children () {
+            return [
+                (()=>{
+                    var _el$2 = _tmpl$();
+                    spread(_el$2, mergeProps({
+                        id: labelId
+                    }, ()=>({
+                            class: CLASSES.label
+                        }), {
+                        "data-slot": "label"
+                    }), true);
+                    insert(_el$2, ()=>p.label);
+                    return _el$2;
+                })(),
+                (()=>{
+                    var _el$3 = _tmpl$();
+                    spread(_el$3, mergeProps(()=>({
+                            class: CLASSES.output
+                        }), {
+                        "data-slot": "slider-output",
+                        "aria-live": "polite"
+                    }), true);
+                    insert(_el$3, formattedValue);
+                    return _el$3;
+                })()
+            ];
+        }
+    }), _el$4);
+    var _ref$ = trackRef;
+    "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$4) : trackRef = _el$4;
+    spread(_el$4, mergeProps(()=>({
+            class: CLASSES.track
+        }), {
+        "data-slot": "slider-track",
+        get onPointerDown () {
+            return interactions.onPointerDown;
+        },
+        get onPointerMove () {
+            return interactions.onPointerMove;
+        },
+        get onPointerUp () {
+            return interactions.onPointerUp;
+        },
+        get onPointerCancel () {
+            return interactions.onPointerCancel;
+        }
+    }), true);
+    spread(_el$5, mergeProps(()=>({
+            class: CLASSES.fill
+        }), {
+        "data-slot": "slider-fill",
+        get style () {
+            return {
+                width: fillWidth()
+            };
+        }
+    }), false);
+    var _ref$2 = thumbRef;
+    "function" == typeof _ref$2 || Array.isArray(_ref$2) ? ref(()=>_ref$2, _el$6) : thumbRef = _el$6;
+    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 p.value;
+        },
+        get ["aria-valuetext"] () {
+            return formattedValue();
+        },
+        get ["aria-labelledby"] () {
+            return p.label ? labelId : void 0;
+        },
+        get ["aria-disabled"] () {
+            return isDisabled() ? "true" : void 0;
+        },
+        get onKeyDown () {
+            return interactions.onKeyDown;
+        },
+        get onKeyUp () {
+            return interactions.onKeyUp;
+        },
+        onFocus: handleFocus,
+        onBlur: ()=>{
+            interactions.onBlur();
+            handleBlur();
+        }
+    }), false);
+    return _el$;
 };
 const Slider = defineComponent({
     recipe: componentRecipe,

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

@@ -11,7 +11,7 @@ export declare const CLASSES: {
         readonly lg: "slider--lg";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "slider";
     readonly slots: {
         readonly label: {};

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

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Spinner.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { Flavor, Size, UIBaseProps } from "../vocabulary";
 export type SpinnerShape = "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity";
 export type SpinnerProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & UIBaseProps & {

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

@@ -1,19 +1,17 @@
-import { createComponent, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, memo, mergeProps, setAttribute, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/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$;
-    })();
+    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 = (_stable, p)=>(()=>{
         var _el$8 = _tmpl$2();
@@ -27,7 +25,7 @@ const __solidLayoutSpinnerLayout = (_stable, p)=>(()=>{
             get style () {
                 return p.style;
             }
-        }), false, true);
+        }), true);
         insert(_el$8, (()=>{
             var _c$ = memo(()=>"spinner" === p.shape);
             return ()=>_c$() ? createComponent(SpinnerSVG, {}) : void 0;

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

@@ -4,7 +4,7 @@
  * means solid/soft/outline everywhere else. The fleet passed `bars` at 23 of
  * the 38 sites that used the old `Loading` alias.
  */
-export declare const spinner: import("solid-layouts").Recipe<{
+export declare const spinner: import("solid-layouts/solid-2").Recipe<{
     readonly component: "spinner";
     readonly element: "span";
     readonly slots: {

package/dist/components/status/status.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 /**
  * Aggregate status: combining many conditions into one indicator without
  * losing the one fact that matters.

package/dist/components/switch/Switch.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Switch.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, Flavor, State } from "../vocabulary";
 export type ToggleColor = "default" | "accent" | "success" | "warning" | "danger";
 export type ToggleSize = "sm" | "md" | "lg";