@pathscale/ui 2.5.0 → 2.6.1

package/dist/components/collapsible/Collapsible.generated.js

@@ -1,8 +1,8 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Collapsible.css";
-import { Show, createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Show, createContext, createMemo, createSignal, createUniqueId, omit, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Collapsible.recipe.js";
 import { shouldMountCollapsibleContent } from "./Collapsible.mounting.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<h3>"), _tmpl$3 = /*#__PURE__*/ template("<button>"), _tmpl$4 = /*#__PURE__*/ template("<div><div>"), _tmpl$5 = /*#__PURE__*/ template("<span>"), _tmpl$6 = /*#__PURE__*/ template('<svg fill=none role=presentation viewBox="0 0 24 24"width=100% height=100%><path d="M6 9L12 15L18 9"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
@@ -14,31 +14,20 @@ const useCollapsibleContext = ()=>{
 };
 const normalizeKey = (value)=>String(value);
 const __solidLayoutCollapsibleRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "id",
-        "open",
-        "defaultOpen",
-        "onOpenChange",
-        "state",
-        "disabled"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "id", "open", "defaultOpen", "onOpenChange", "state", "disabled");
     const uniqueId = createUniqueId();
-    const itemId = ()=>normalizeKey(local.id ?? uniqueId);
+    const itemId = ()=>normalizeKey(p.id ?? uniqueId);
     const triggerId = ()=>`collapsible-trigger-${itemId()}`;
     const contentId = ()=>`collapsible-content-${itemId()}`;
-    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
-    const isControlled = createMemo(()=>void 0 !== local.open);
-    const standaloneOpen = createMemo(()=>isControlled() ? Boolean(local.open) : internalOpen());
-    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(p.defaultOpen));
+    const isControlled = createMemo(()=>void 0 !== p.open);
+    const standaloneOpen = createMemo(()=>isControlled() ? Boolean(p.open) : internalOpen());
+    const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled);
     const isExpanded = ()=>standaloneOpen();
     const setOpen = (next)=>{
         if (isDisabled()) return;
         if (!isControlled()) setInternalOpen(next);
-        if (standaloneOpen() !== next) local.onOpenChange?.(next);
+        if (standaloneOpen() !== next) p.onOpenChange?.(next);
     };
     const toggle = ()=>setOpen(!isExpanded());
     const ctx = {
@@ -48,12 +37,12 @@ const __solidLayoutCollapsibleRoot = (_stable, p)=>{
         contentId,
         toggle
     };
-    return createComponent(CollapsibleContext.Provider, {
+    return createComponent(CollapsibleContext, {
         value: ctx,
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, isExpanded() && CLASSES.flag.expanded, isDisabled() && CLASSES.flag.disabled, local.class)
+                    class: twMerge(CLASSES.base, isExpanded() && CLASSES.flag.expanded, isDisabled() && CLASSES.flag.disabled, p.class)
                 }), {
                 "data-slot": "collapsible",
                 get ["data-expanded"] () {
@@ -63,13 +52,13 @@ const __solidLayoutCollapsibleRoot = (_stable, p)=>{
                     return isDisabled() ? "true" : "false";
                 },
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
-            }), false, true);
-            insert(_el$, ()=>local.children);
+            }), true);
+            insert(_el$, ()=>p.children);
             return _el$;
         }
     });
@@ -80,28 +69,21 @@ const CollapsibleRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutCollapsibleHeading = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$2 = _tmpl$2();
-        spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.heading, local.class)
-            }), {
-            "data-slot": "collapsible-heading",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$2, ()=>local.children);
-        return _el$2;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$2 = _tmpl$2();
+    spread(_el$2, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.heading, p.class)
+        }), {
+        "data-slot": "collapsible-heading",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$2, ()=>p.children);
+    return _el$2;
 };
 const CollapsibleHeading = defineComponent({
     recipe: componentRecipe,
@@ -110,68 +92,58 @@ const CollapsibleHeading = defineComponent({
 });
 const __solidLayoutCollapsibleTrigger = (_stable, p)=>{
     const ctx = useCollapsibleContext();
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "onClick",
-        "onKeyDown",
-        "type"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "onClick", "onKeyDown", "type");
     const handleClick = (event)=>{
-        if ("function" == typeof local.onClick) local.onClick(event);
+        if ("function" == typeof p.onClick) p.onClick(event);
         if (event.defaultPrevented) return;
         ctx.toggle();
     };
     const handleKeyDown = (event)=>{
-        if ("function" == typeof local.onKeyDown) local.onKeyDown(event);
+        if ("function" == typeof p.onKeyDown) p.onKeyDown(event);
         if (event.defaultPrevented) return;
         if ("Enter" === event.key || " " === event.key) {
             event.preventDefault();
             ctx.toggle();
         }
     };
-    return (()=>{
-        var _el$3 = _tmpl$3();
-        spread(_el$3, mergeProps(others, {
-            get id () {
-                return ctx.triggerId();
-            },
-            get type () {
-                return local.type ?? "button";
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.slot.trigger, local.class)
-            }), {
-            "data-slot": "collapsible-trigger",
-            get ["data-expanded"] () {
-                return ctx.isExpanded() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get ["aria-expanded"] () {
-                return ctx.isExpanded() ? "true" : "false";
-            },
-            get ["aria-controls"] () {
-                return ctx.contentId();
-            },
-            get ["aria-disabled"] () {
-                return ctx.isDisabled() ? "true" : void 0;
-            },
-            get disabled () {
-                return ctx.isDisabled();
-            },
-            onClick: handleClick,
-            onKeyDown: handleKeyDown
-        }), false, true);
-        insert(_el$3, ()=>local.children);
-        return _el$3;
-    })();
+    var _el$3 = _tmpl$3();
+    spread(_el$3, mergeProps(others, {
+        get id () {
+            return ctx.triggerId();
+        },
+        get type () {
+            return p.type ?? "button";
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.slot.trigger, p.class)
+        }), {
+        "data-slot": "collapsible-trigger",
+        get ["data-expanded"] () {
+            return ctx.isExpanded() ? "true" : "false";
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        get ["aria-expanded"] () {
+            return ctx.isExpanded() ? "true" : "false";
+        },
+        get ["aria-controls"] () {
+            return ctx.contentId();
+        },
+        get ["aria-disabled"] () {
+            return ctx.isDisabled() ? "true" : void 0;
+        },
+        get disabled () {
+            return ctx.isDisabled();
+        },
+        onClick: handleClick,
+        onKeyDown: handleKeyDown
+    }), true);
+    insert(_el$3, ()=>p.children);
+    return _el$3;
 };
 const CollapsibleTrigger = defineComponent({
     recipe: componentRecipe,
@@ -180,15 +152,9 @@ const CollapsibleTrigger = defineComponent({
 });
 const __solidLayoutCollapsibleContent = (_stable, p)=>{
     const ctx = useCollapsibleContext();
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "keepMounted"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "keepMounted");
     const expanded = ()=>ctx.isExpanded();
-    const keepMounted = ()=>local.keepMounted ?? true;
+    const keepMounted = ()=>p.keepMounted ?? true;
     return createComponent(Show, {
         get when () {
             return shouldMountCollapsibleContent(keepMounted(), expanded());
@@ -201,17 +167,17 @@ const __solidLayoutCollapsibleContent = (_stable, p)=>{
                 },
                 role: "region"
             }, ()=>({
-                    class: twMerge(CLASSES.slot.content, local.class)
+                    class: twMerge(CLASSES.slot.content, p.class)
                 }), {
                 "data-slot": "collapsible-content",
                 get ["data-expanded"] () {
                     return expanded() ? "true" : "false";
                 },
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 },
                 get ["aria-hidden"] () {
                     return expanded() ? "false" : "true";
@@ -219,8 +185,8 @@ const __solidLayoutCollapsibleContent = (_stable, p)=>{
                 get ["aria-labelledby"] () {
                     return ctx.triggerId();
                 }
-            }), false, true);
-            insert(_el$4, ()=>local.children);
+            }), true);
+            insert(_el$4, ()=>p.children);
             return _el$4;
         }
     });
@@ -231,33 +197,26 @@ const CollapsibleContent = defineComponent({
     embedded: true
 });
 const __solidLayoutCollapsibleBody = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild;
-        spread(_el$5, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.body, local.class)
-            }), {
-            "data-slot": "collapsible-body",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        spread(_el$6, mergeProps(()=>({
-                class: CLASSES.slot.bodyInner
-            }), {
-            "data-slot": "collapsible-body-inner"
-        }), false, true);
-        insert(_el$6, ()=>local.children);
-        return _el$5;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild;
+    spread(_el$5, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.body, p.class)
+        }), {
+        "data-slot": "collapsible-body",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    spread(_el$6, mergeProps(()=>({
+            class: CLASSES.slot.bodyInner
+        }), {
+        "data-slot": "collapsible-body-inner"
+    }), true);
+    insert(_el$6, ()=>p.children);
+    return _el$5;
 };
 const CollapsibleBody = defineComponent({
     recipe: componentRecipe,
@@ -266,33 +225,26 @@ const CollapsibleBody = defineComponent({
 });
 const __solidLayoutCollapsibleIndicator = (_stable, p)=>{
     const ctx = useCollapsibleContext();
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$7 = _tmpl$5();
-        spread(_el$7, mergeProps(others, {
-            "aria-hidden": "true"
-        }, ()=>({
-                class: twMerge(CLASSES.slot.indicator, local.class)
-            }), {
-            "data-slot": "collapsible-indicator",
-            get ["data-expanded"] () {
-                return ctx.isExpanded() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$7, ()=>local.children ?? _tmpl$6());
-        return _el$7;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$7 = _tmpl$5();
+    spread(_el$7, mergeProps(others, {
+        "aria-hidden": "true"
+    }, ()=>({
+            class: twMerge(CLASSES.slot.indicator, p.class)
+        }), {
+        "data-slot": "collapsible-indicator",
+        get ["data-expanded"] () {
+            return ctx.isExpanded() ? "true" : "false";
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$7, ()=>p.children ?? _tmpl$6());
+    return _el$7;
 };
 const CollapsibleIndicator = defineComponent({
     recipe: componentRecipe,

package/dist/components/collapsible/Collapsible.recipe.d.ts

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

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

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorArea.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, State } from "../vocabulary";
 export type ColorAreaValue = {
     h: number;

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

@@ -1,8 +1,8 @@
-import { 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 "./ColorArea.css";
-import { createSignal, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createSignal, omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./ColorArea.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div><div>");
 const DEFAULT_VALUE = {
@@ -53,25 +53,17 @@ const hsvToRgb = (h, s, v)=>{
     };
 };
 const __solidLayoutColorArea = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "value",
-        "onChange",
-        "state",
-        "dataTheme",
-        "style",
-        "aria-label"
-    ]);
+    const others = omit(p, "class", "value", "onChange", "state", "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("disabled" === local.state);
+    const isControlled = ()=>void 0 !== p.value;
+    const currentValue = ()=>normalizeValue(p.value ?? internalValue());
+    const isDisabled = ()=>Boolean("disabled" === p.state);
     const emitChange = (next)=>{
         const normalized = normalizeValue(next);
         if (!isControlled()) setInternalValue(normalized);
-        local.onChange?.(normalized);
+        p.onChange?.(normalized);
     };
     const updateFromPointer = (clientX, clientY)=>{
         if (!areaRef || isDisabled()) return;
@@ -142,74 +134,72 @@ const __solidLayoutColorArea = (_stable, p)=>{
     const style = ()=>{
         const color = currentValue();
         const thumb = hsvToRgb(color.h, color.s, color.v);
-        const userStyle = local.style;
+        const userStyle = p.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)
-            }), {
-            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$;
-    })();
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    var _ref$ = areaRef;
+    "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$) : areaRef = _el$;
+    spread(_el$, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.base, p.class)
+        }), {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        "data-slot": "color-area",
+        get ["data-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        get tabindex () {
+            return isDisabled() ? -1 : 0;
+        },
+        role: "slider",
+        get ["aria-label"] () {
+            return p["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
+    }), 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);
+    return _el$;
 };
 const ColorArea = defineComponent({
     recipe: componentRecipe,

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

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

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

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorField.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type ColorFormat } from "../color-wheel-flower/ColorUtils";
 import type { UIBaseProps, State } from "../vocabulary";
 export type ColorFieldFormat = ColorFormat;