@pathscale/ui 2.4.0 → 2.6.0

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

@@ -1,8 +1,8 @@
-import { memo, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ColorSlider.css";
-import { createEffect, createMemo, createSignal, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createEffect, createMemo, createSignal, omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./ColorSlider.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div><div></div><div>");
 const clamp = (value, min, max)=>Math.min(max, Math.max(min, value));
@@ -20,30 +20,20 @@ const fromPercent = (type, percent)=>{
     return clamped / 100 * 360;
 };
 const __solidLayoutColorSlider = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "value",
-        "defaultValue",
-        "onChange",
-        "type",
-        "state",
-        "style",
-        "dataTheme",
-        "aria-label"
-    ]);
-    const sliderType = ()=>local.type ?? "hue";
-    const isDisabled = ()=>Boolean("disabled" === local.state);
+    const others = omit(p, "class", "value", "defaultValue", "onChange", "type", "state", "style", "dataTheme", "aria-label");
+    const sliderType = ()=>p.type ?? "hue";
+    const isDisabled = ()=>Boolean("disabled" === p.state);
     const initialValue = ()=>{
         const fallback = "alpha" === sliderType() ? 1 : 0;
-        return normalizeValue(sliderType(), local.value ?? local.defaultValue ?? fallback);
+        return normalizeValue(sliderType(), p.value ?? p.defaultValue ?? fallback);
     };
     const [internalValue, setInternalValue] = createSignal(initialValue());
     const [isDragging, setIsDragging] = createSignal(false);
     let sliderRef;
-    const isControlled = ()=>void 0 !== local.value;
+    const isControlled = ()=>void 0 !== p.value;
     createEffect(()=>{
         const nextType = sliderType();
-        const nextValue = local.value;
+        const nextValue = p.value;
         if (void 0 === nextValue) {
             if (!isControlled()) setInternalValue((current)=>normalizeValue(nextType, current));
             return;
@@ -51,17 +41,18 @@ const __solidLayoutColorSlider = (_stable, p)=>{
         setInternalValue(normalizeValue(nextType, nextValue));
     });
     const currentValue = createMemo(()=>{
-        if (isControlled()) return normalizeValue(sliderType(), local.value ?? internalValue());
+        if (isControlled()) return normalizeValue(sliderType(), p.value ?? internalValue());
         return normalizeValue(sliderType(), internalValue());
     });
     const emitChange = (next)=>{
         const normalized = normalizeValue(sliderType(), next);
         if (!isControlled()) setInternalValue(normalized);
-        local.onChange?.(normalized);
+        p.onChange?.(normalized);
     };
     const updateFromPointer = (clientX)=>{
-        if (!sliderRef || isDisabled()) return;
-        const rect = sliderRef.getBoundingClientRect();
+        const node = sliderRef;
+        if (!node || isDisabled()) return;
+        const rect = node.getBoundingClientRect();
         if (rect.width <= 0) return;
         const percent = (clientX - rect.left) / rect.width * 100;
         emitChange(fromPercent(sliderType(), percent));
@@ -97,7 +88,7 @@ const __solidLayoutColorSlider = (_stable, p)=>{
     };
     const percent = ()=>toPercent(sliderType(), currentValue());
     const sliderStyle = ()=>{
-        const userStyle = local.style;
+        const userStyle = p.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%)`,
@@ -113,75 +104,73 @@ const __solidLayoutColorSlider = (_stable, p)=>{
         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)
-            }), {
-            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$;
-    })();
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    var _ref$ = sliderRef;
+    "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$) : sliderRef = _el$;
+    spread(_el$, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.base, "alpha" === sliderType() && CLASSES.flag.alpha, isDragging() && CLASSES.flag.dragging, p.class)
+        }), {
+        get ["data-theme"] () {
+            return p.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 p["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 "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
+    }), true);
+    spread(_el$2, mergeProps(()=>({
+            class: CLASSES.slot.track
+        }), {
+        "data-slot": "color-slider-track"
+    }), 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);
+    return _el$;
 };
 const ColorSlider = defineComponent({
     recipe: componentRecipe,

package/dist/components/color-slider/ColorSlider.recipe.d.ts

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

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

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorSwatch.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, State } from "../vocabulary";
 export type ColorSwatchShape = "circle" | "square";
 export type ColorSwatchSize = "xs" | "sm" | "md" | "lg" | "xl";

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

@@ -1,8 +1,8 @@
-import { memo, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ColorSwatch.css";
-import { splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { omit, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { ColorSwatchPickerContext } from "../color-swatch-picker/ColorSwatchPicker.generated.js";
 import { CLASSES, componentRecipe } from "./ColorSwatch.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<button>");
@@ -12,51 +12,33 @@ const invokeEventHandler = (handler, event)=>{
 };
 const __solidLayoutColorSwatch = (_stable, p)=>{
     const picker = useContext(ColorSwatchPickerContext);
-    const [local, others] = splitProps(p, [
-        "class",
-        "color",
-        "colorName",
-        "shape",
-        "size",
-        "isSelected",
-        "state",
-        "disabled",
-        "onSelect",
-        "onChange",
-        "onClick",
-        "onKeyDown",
-        "style",
-        "dataTheme",
-        "aria-label",
-        "role",
-        "tabIndex"
-    ]);
+    const others = omit(p, "class", "color", "colorName", "shape", "size", "isSelected", "state", "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 shape = ()=>p.shape ?? "circle";
+    const size = ()=>p.size ?? "md";
     const isDisabled = ()=>{
-        const localDisabled = Boolean("disabled" === local.state) || Boolean(local.disabled);
+        const localDisabled = Boolean("disabled" === p.state) || Boolean(p.disabled);
         const pickerDisabled = picker ? picker.isDisabled() : false;
         return localDisabled || pickerDisabled;
     };
     const isSelected = ()=>{
-        if (void 0 !== local.isSelected) return Boolean(local.isSelected);
+        if (void 0 !== p.isSelected) return Boolean(p.isSelected);
         if (!picker) return false;
-        return picker.value() === local.color;
+        return picker.value() === p.color;
     };
     const emitSelection = ()=>{
-        local.onSelect?.(local.color);
-        local.onChange?.(local.color);
-        picker?.select(local.color);
+        p.onSelect?.(p.color);
+        p.onChange?.(p.color);
+        picker?.select(p.color);
     };
     const handleClick = (event)=>{
-        invokeEventHandler(local.onClick, event);
+        invokeEventHandler(p.onClick, event);
         if (event.defaultPrevented || isDisabled()) return;
         emitSelection();
     };
     const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
+        invokeEventHandler(p.onKeyDown, event);
         if (event.defaultPrevented || isDisabled()) return;
         if ("Enter" === event.key || " " === event.key) {
             event.preventDefault();
@@ -64,70 +46,68 @@ const __solidLayoutColorSwatch = (_stable, p)=>{
         }
     };
     const style = ()=>{
-        const userStyle = local.style;
+        const userStyle = p.style;
         return {
-            "--color-swatch-current": local.color,
+            "--color-swatch-current": p.color,
             ...userStyle
         };
     };
-    const tabIndex = ()=>{
-        if (void 0 !== local.tabIndex) return local.tabIndex;
+    const tabindex = ()=>{
+        if (void 0 !== p.tabindex) return p.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);
-            },
-            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$;
-    })();
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(others, {
+        type: "button",
+        get ["class"] () {
+            return twMerge(CLASSES.base, CLASSES.shape[shape()], CLASSES.size[size()], p.class);
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        "data-slot": "color-swatch",
+        get ["data-color-value"] () {
+            return p.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 p.role ?? (isInsidePicker() ? "radio" : "option");
+        },
+        get tabindex () {
+            return tabindex();
+        },
+        get ["aria-label"] () {
+            return p["aria-label"] ?? p.colorName ?? `Color ${p.color}`;
+        },
+        get ["aria-selected"] () {
+            return isSelected() ? "true" : "false";
+        },
+        get ["aria-checked"] () {
+            return isInsidePicker() ? isSelected() ? "true" : "false" : void 0;
+        },
+        get ["aria-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        get style () {
+            return style();
+        },
+        onClick: handleClick,
+        onKeyDown: handleKeyDown
+    }), false);
+    return _el$;
 };
 const ColorSwatch = defineComponent({
     recipe: componentRecipe,

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

@@ -12,7 +12,7 @@ export declare const CLASSES: {
         readonly xl: "color-swatch--xl";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "color-swatch";
     readonly slots: {
         readonly "color-swatch": {};

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

@@ -1,13 +1,14 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorSwatchPicker.css";
-import { type Accessor, type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { type Accessor } from "solid-js";
 import type { UIBaseProps, State } from "../vocabulary";
 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 declare const ColorSwatchPickerContext: import("solid-js").Context<ColorSwatchPickerContextValue>;
 export type ColorSwatchPickerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & UIBaseProps & {
     children: JSX.Element;
     value?: string;

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

@@ -1,8 +1,8 @@
-import { createComponent, insert, mergeProps, 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 "./ColorSwatchPicker.css";
-import { createContext, createMemo, createSignal, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createContext, createMemo, createSignal, omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./ColorSwatchPicker.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const invokeEventHandler = (handler, event)=>{
@@ -11,26 +11,16 @@ const invokeEventHandler = (handler, event)=>{
 };
 const ColorSwatchPickerContext = createContext();
 const __solidLayoutColorSwatchPicker = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "children",
-        "value",
-        "defaultValue",
-        "onChange",
-        "state",
-        "dataTheme",
-        "role",
-        "onKeyDown"
-    ]);
-    const [internalValue, setInternalValue] = createSignal(local.defaultValue);
+    const others = omit(p, "class", "children", "value", "defaultValue", "onChange", "state", "dataTheme", "role", "onKeyDown");
+    const [internalValue, setInternalValue] = createSignal(p.defaultValue);
     let rootRef;
-    const isControlled = ()=>void 0 !== local.value;
-    const currentValue = ()=>isControlled() ? local.value : internalValue();
-    const isDisabled = ()=>Boolean("disabled" === local.state);
+    const isControlled = ()=>void 0 !== p.value;
+    const currentValue = ()=>isControlled() ? p.value : internalValue();
+    const isDisabled = ()=>Boolean("disabled" === p.state);
     const setValue = (next)=>{
         if (isDisabled()) return;
         if (!isControlled()) setInternalValue(next);
-        local.onChange?.(next);
+        p.onChange?.(next);
     };
     const getEnabledItems = ()=>{
         if (!rootRef) return [];
@@ -47,7 +37,7 @@ const __solidLayoutColorSwatchPicker = (_stable, p)=>{
         return selectedIndex >= 0 ? selectedIndex : 0;
     };
     const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
+        invokeEventHandler(p.onKeyDown, event);
         if (event.defaultPrevented || isDisabled()) return;
         const key = event.key;
         const moveNext = "ArrowRight" === key || "ArrowDown" === key;
@@ -75,33 +65,33 @@ const __solidLayoutColorSwatchPicker = (_stable, p)=>{
             isDisabled,
             select: setValue
         }));
-    return createComponent(ColorSwatchPickerContext.Provider, {
+    return createComponent(ColorSwatchPickerContext, {
         get value () {
             return context();
         },
         get children () {
             var _el$ = _tmpl$();
             var _ref$ = rootRef;
-            "function" == typeof _ref$ ? use(_ref$, _el$) : rootRef = _el$;
+            "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$) : rootRef = _el$;
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, local.class)
+                    class: twMerge(CLASSES.base, p.class)
                 }), {
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 "data-slot": "color-swatch-picker",
                 get ["data-disabled"] () {
                     return isDisabled() ? "true" : "false";
                 },
                 get role () {
-                    return local.role ?? "radiogroup";
+                    return p.role ?? "radiogroup";
                 },
                 get ["aria-disabled"] () {
                     return isDisabled() ? "true" : "false";
                 },
                 onKeyDown: handleKeyDown
-            }), false, true);
-            insert(_el$, ()=>local.children);
+            }), true);
+            insert(_el$, ()=>p.children);
             return _el$;
         }
     });

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

@@ -1,7 +1,7 @@
 export declare const CLASSES: {
     readonly base: "color-swatch-picker";
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "color-swatch-picker";
     readonly slots: {
         readonly "color-swatch-picker": {};