@pathscale/ui 2.5.0 → 2.6.0

package/dist/components/tabs/Tabs.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 "./Tabs.css";
-import { createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Tabs.recipe.js";
 import { observeTabIndicator } from "./Tabs.measurement.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><span>"), _tmpl$3 = /*#__PURE__*/ template("<button>"), _tmpl$4 = /*#__PURE__*/ template("<span>");
@@ -12,24 +12,16 @@ const invokeEventHandler = (handler, event)=>{
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
 const __solidLayoutTabsRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "orientation",
-        "variant",
-        "selectedKey",
-        "defaultSelectedKey",
-        "onSelectionChange"
-    ]);
+    const others = omit(p, "children", "class", "orientation", "variant", "selectedKey", "defaultSelectedKey", "onSelectionChange");
     const baseId = createUniqueId();
-    const [internalSelectedKey, setInternalSelectedKey] = createSignal(local.defaultSelectedKey);
+    const [internalSelectedKey, setInternalSelectedKey] = createSignal(p.defaultSelectedKey);
     const [tabs, setTabs] = createSignal([]);
-    const isControlled = ()=>void 0 !== local.selectedKey;
-    const selectedKey = ()=>isControlled() ? local.selectedKey : internalSelectedKey();
+    const isControlled = ()=>void 0 !== p.selectedKey;
+    const selectedKey = ()=>isControlled() ? p.selectedKey : internalSelectedKey();
     const setSelectedKey = (key)=>{
-        if (isControlled()) return void local.onSelectionChange?.(key);
+        if (isControlled()) return void p.onSelectionChange?.(key);
         setInternalSelectedKey(key);
-        local.onSelectionChange?.(key);
+        p.onSelectionChange?.(key);
     };
     const registerTab = (info)=>{
         setTabs((prev)=>{
@@ -44,10 +36,10 @@ const __solidLayoutTabsRoot = (_stable, p)=>{
     };
     const getTabId = (key)=>`${baseId}-tab-${String(key)}`;
     const getPanelId = (key)=>`${baseId}-panel-${String(key)}`;
-    const classes = ()=>twMerge(CLASSES.base, "secondary" === local.variant && CLASSES.variant.secondary, local.class);
+    const classes = ()=>twMerge(CLASSES.base, "secondary" === p.variant && CLASSES.variant.secondary, p.class);
     const context = createMemo(()=>({
-            orientation: local.orientation ?? "horizontal",
-            variant: local.variant ?? "primary",
+            orientation: p.orientation ?? "horizontal",
+            variant: p.variant ?? "primary",
             selectedKey,
             setSelectedKey,
             registerTab,
@@ -56,7 +48,7 @@ const __solidLayoutTabsRoot = (_stable, p)=>{
             getTabId,
             getPanelId
         }));
-    return createComponent(TabsContext.Provider, {
+    return createComponent(TabsContext, {
         get value () {
             return context();
         },
@@ -67,10 +59,10 @@ const __solidLayoutTabsRoot = (_stable, p)=>{
                 }), {
                 "data-slot": "tabs",
                 get ["data-orientation"] () {
-                    return local.orientation ?? "horizontal";
+                    return p.orientation ?? "horizontal";
                 }
-            }), false, true);
-            insert(_el$, ()=>local.children);
+            }), true);
+            insert(_el$, ()=>p.children);
             return _el$;
         }
     });
@@ -81,20 +73,15 @@ const TabsRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutTabListContainer = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "children"
-    ]);
-    return (()=>{
-        var _el$2 = _tmpl$();
-        spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.listContainer, local.class)
-            }), {
-            "data-slot": "tabs-list-container"
-        }), false, true);
-        insert(_el$2, ()=>local.children);
-        return _el$2;
-    })();
+    const others = omit(p, "class", "children");
+    var _el$2 = _tmpl$();
+    spread(_el$2, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.listContainer, p.class)
+        }), {
+        "data-slot": "tabs-list-container"
+    }), true);
+    insert(_el$2, ()=>p.children);
+    return _el$2;
 };
 const TabListContainer = defineComponent({
     recipe: componentRecipe,
@@ -103,11 +90,7 @@ const TabListContainer = defineComponent({
 });
 const __solidLayoutTabList = (_stable, p)=>{
     const ctx = useContext(TabsContext);
-    const [local, others] = splitProps(p, [
-        "class",
-        "children",
-        "ref"
-    ]);
+    const others = omit(p, "class", "children", "ref");
     const [indicatorStyle, setIndicatorStyle] = createSignal({
         "--tabs-indicator-x": "0px",
         "--tabs-indicator-y": "0px",
@@ -118,15 +101,15 @@ const __solidLayoutTabList = (_stable, p)=>{
     const [indicatorReady, setIndicatorReady] = createSignal(false);
     let listRef;
     let rafId;
-    if (!ctx) return (()=>{
+    if (!ctx) {
         var _el$3 = _tmpl$();
-        spread(_el$3, others, false, true);
-        insert(_el$3, ()=>local.children);
+        spread(_el$3, others, true);
+        insert(_el$3, ()=>p.children);
         return _el$3;
-    })();
+    }
     const setListRef = (element)=>{
         listRef = element;
-        if ("function" == typeof local.ref) local.ref(element);
+        if ("function" == typeof p.ref) p.ref(element);
     };
     const measureIndicator = ()=>{
         if (!listRef) return;
@@ -175,7 +158,7 @@ const __solidLayoutTabList = (_stable, p)=>{
         ], scheduleMeasure);
         onCleanup(disconnect);
     });
-    onMount(()=>{
+    onSettled(()=>{
         scheduleMeasure();
         window.addEventListener("resize", scheduleMeasure);
         onCleanup(()=>{
@@ -183,39 +166,37 @@ const __solidLayoutTabList = (_stable, p)=>{
             if (void 0 !== rafId) cancelAnimationFrame(rafId);
         });
     });
-    return (()=>{
-        var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
-        use(setListRef, _el$4);
-        spread(_el$4, mergeProps(others, {
-            role: "tablist",
-            get ["aria-orientation"] () {
-                return ctx.orientation;
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.slot.list, local.class)
-            }), {
-            "data-slot": "tabs-list",
-            get ["data-orientation"] () {
-                return ctx.orientation;
-            }
-        }), false, true);
-        insert(_el$4, ()=>local.children, _el$5);
-        spread(_el$5, mergeProps(()=>({
-                class: CLASSES.slot.indicator
-            }), {
-            "data-slot": "tabs-indicator",
-            get ["data-ready"] () {
-                return indicatorReady() ? "true" : "false";
-            },
-            get ["data-visible"] () {
-                return indicatorVisible() ? "true" : "false";
-            },
-            get style () {
-                return indicatorStyle();
-            }
-        }), false, false);
-        return _el$4;
-    })();
+    var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
+    ref(()=>setListRef, _el$4);
+    spread(_el$4, mergeProps(others, {
+        role: "tablist",
+        get ["aria-orientation"] () {
+            return ctx.orientation;
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.slot.list, p.class)
+        }), {
+        "data-slot": "tabs-list",
+        get ["data-orientation"] () {
+            return ctx.orientation;
+        }
+    }), true);
+    insert(_el$4, ()=>p.children, _el$5);
+    spread(_el$5, mergeProps(()=>({
+            class: CLASSES.slot.indicator
+        }), {
+        "data-slot": "tabs-indicator",
+        get ["data-ready"] () {
+            return indicatorReady() ? "true" : "false";
+        },
+        get ["data-visible"] () {
+            return indicatorVisible() ? "true" : "false";
+        },
+        get style () {
+            return indicatorStyle();
+        }
+    }), false);
+    return _el$4;
 };
 const TabList = defineComponent({
     recipe: componentRecipe,
@@ -224,34 +205,27 @@ const TabList = defineComponent({
 });
 const __solidLayoutTab = (_stable, p)=>{
     const ctx = useContext(TabsContext);
-    const [local, others] = splitProps(p, [
-        "class",
-        "children",
-        "id",
-        "state",
-        "onClick",
-        "onKeyDown"
-    ]);
+    const others = omit(p, "class", "children", "id", "state", "onClick", "onKeyDown");
     let tabRef;
-    if (!ctx) return (()=>{
+    if (!ctx) {
         var _el$6 = _tmpl$3();
         spread(_el$6, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.tab, local.class)
-            })), false, true);
-        insert(_el$6, ()=>local.children);
+                class: twMerge(CLASSES.slot.tab, p.class)
+            })), true);
+        insert(_el$6, ()=>p.children);
         return _el$6;
-    })();
-    const isSelected = createMemo(()=>ctx.selectedKey() === local.id);
-    const isDisabled = ()=>Boolean("disabled" === local.state);
-    onMount(()=>{
+    }
+    const isSelected = createMemo(()=>ctx.selectedKey() === p.id);
+    const isDisabled = ()=>Boolean("disabled" === p.state);
+    onSettled(()=>{
         if (tabRef) ctx.registerTab({
-            key: local.id,
+            key: p.id,
             ref: tabRef,
             disabled: isDisabled()
         });
     });
     onCleanup(()=>{
-        ctx.unregisterTab(local.id);
+        ctx.unregisterTab(p.id);
     });
     const focusTab = (info)=>{
         info.ref.focus();
@@ -260,13 +234,13 @@ const __solidLayoutTab = (_stable, p)=>{
     const moveFocus = (direction)=>{
         const list = ctx.tabs().filter((tab)=>!tab.disabled);
         if (!list.length) return;
-        const index = list.findIndex((tab)=>tab.key === local.id);
+        const index = list.findIndex((tab)=>tab.key === p.id);
         if (-1 === index) return;
         const nextIndex = (index + direction + list.length) % list.length;
         focusTab(list[nextIndex]);
     };
     const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
+        invokeEventHandler(p.onKeyDown, event);
         if (event.defaultPrevented) return;
         if (isDisabled()) return;
         const isHorizontal = "horizontal" === ctx.orientation;
@@ -290,52 +264,50 @@ const __solidLayoutTab = (_stable, p)=>{
         }
     };
     const handleClick = (event)=>{
-        invokeEventHandler(local.onClick, event);
+        invokeEventHandler(p.onClick, event);
         if (event.defaultPrevented) return;
         if (isDisabled()) return;
-        ctx.setSelectedKey(local.id);
+        ctx.setSelectedKey(p.id);
     };
-    const classes = ()=>twMerge(CLASSES.slot.tab, local.class);
-    return (()=>{
-        var _el$7 = _tmpl$3();
-        var _ref$ = tabRef;
-        "function" == typeof _ref$ ? use(_ref$, _el$7) : tabRef = _el$7;
-        spread(_el$7, mergeProps(others, {
-            get id () {
-                return ctx.getTabId(local.id);
-            },
-            role: "tab"
-        }, ()=>({
-                class: classes()
-            }), {
-            "data-slot": "tabs-tab",
-            get ["data-selected"] () {
-                return isSelected() ? "true" : "false";
-            },
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["aria-selected"] () {
-                return isSelected();
-            },
-            get ["aria-controls"] () {
-                return ctx.getPanelId(local.id);
-            },
-            get ["aria-disabled"] () {
-                return isDisabled();
-            },
-            get disabled () {
-                return isDisabled();
-            },
-            get tabIndex () {
-                return isSelected() ? 0 : -1;
-            },
-            onKeyDown: handleKeyDown,
-            onClick: handleClick
-        }), false, true);
-        insert(_el$7, ()=>local.children);
-        return _el$7;
-    })();
+    const classes = ()=>twMerge(CLASSES.slot.tab, p.class);
+    var _el$7 = _tmpl$3();
+    var _ref$ = tabRef;
+    "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$7) : tabRef = _el$7;
+    spread(_el$7, mergeProps(others, {
+        get id () {
+            return ctx.getTabId(p.id);
+        },
+        role: "tab"
+    }, ()=>({
+            class: classes()
+        }), {
+        "data-slot": "tabs-tab",
+        get ["data-selected"] () {
+            return isSelected() ? "true" : "false";
+        },
+        get ["data-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        get ["aria-selected"] () {
+            return isSelected() ? "true" : "false";
+        },
+        get ["aria-controls"] () {
+            return ctx.getPanelId(p.id);
+        },
+        get ["aria-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        get disabled () {
+            return isDisabled();
+        },
+        get tabindex () {
+            return isSelected() ? 0 : -1;
+        },
+        onKeyDown: handleKeyDown,
+        onClick: handleClick
+    }), true);
+    insert(_el$7, ()=>p.children);
+    return _el$7;
 };
 const Tab = defineComponent({
     recipe: componentRecipe,
@@ -345,42 +317,36 @@ const Tab = defineComponent({
 const TabIndicator = ()=>null;
 const __solidLayoutTabPanel = (_stable, p)=>{
     const ctx = useContext(TabsContext);
-    const [local, others] = splitProps(p, [
-        "class",
-        "children",
-        "id"
-    ]);
-    if (!ctx) return (()=>{
+    const others = omit(p, "class", "children", "id");
+    if (!ctx) {
         var _el$8 = _tmpl$();
-        spread(_el$8, others, false, true);
-        insert(_el$8, ()=>local.children);
+        spread(_el$8, others, true);
+        insert(_el$8, ()=>p.children);
         return _el$8;
-    })();
-    const isSelected = ()=>ctx.selectedKey() === local.id;
-    return (()=>{
-        var _el$9 = _tmpl$();
-        spread(_el$9, mergeProps(others, {
-            get id () {
-                return ctx.getPanelId(local.id);
-            },
-            role: "tabpanel",
-            get ["aria-labelledby"] () {
-                return ctx.getTabId(local.id);
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.slot.panel, local.class)
-            }), {
-            "data-slot": "tabs-panel",
-            get ["data-orientation"] () {
-                return ctx.orientation;
-            },
-            get hidden () {
-                return !isSelected();
-            }
-        }), false, true);
-        insert(_el$9, ()=>local.children);
-        return _el$9;
-    })();
+    }
+    const isSelected = ()=>ctx.selectedKey() === p.id;
+    var _el$9 = _tmpl$();
+    spread(_el$9, mergeProps(others, {
+        get id () {
+            return ctx.getPanelId(p.id);
+        },
+        role: "tabpanel",
+        get ["aria-labelledby"] () {
+            return ctx.getTabId(p.id);
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.slot.panel, p.class)
+        }), {
+        "data-slot": "tabs-panel",
+        get ["data-orientation"] () {
+            return ctx.orientation;
+        },
+        get hidden () {
+            return !isSelected();
+        }
+    }), true);
+    insert(_el$9, ()=>p.children);
+    return _el$9;
 };
 const TabPanel = defineComponent({
     recipe: componentRecipe,
@@ -388,20 +354,16 @@ const TabPanel = defineComponent({
     embedded: true
 });
 const __solidLayoutTabSeparator = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class"
-    ]);
-    return (()=>{
-        var _el$0 = _tmpl$4();
-        spread(_el$0, mergeProps(others, {
-            "aria-hidden": "true"
-        }, ()=>({
-                class: twMerge(CLASSES.slot.separator, local.class)
-            }), {
-            "data-slot": "tabs-separator"
-        }), false, false);
-        return _el$0;
-    })();
+    const others = omit(p, "class");
+    var _el$0 = _tmpl$4();
+    spread(_el$0, mergeProps(others, {
+        "aria-hidden": "true"
+    }, ()=>({
+            class: twMerge(CLASSES.slot.separator, p.class)
+        }), {
+        "data-slot": "tabs-separator"
+    }), false);
+    return _el$0;
 };
 const TabSeparator = defineComponent({
     recipe: componentRecipe,

package/dist/components/tabs/Tabs.recipe.d.ts

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

package/dist/components/text/Text.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Text.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 export type TextSize = "xs" | "sm" | "base" | "lg" | "xl";
 export type TextVariant = "default" | "muted" | "subtle" | "success" | "warning" | "danger";

package/dist/components/text/Text.generated.js

@@ -1,63 +1,49 @@
-import { insert, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { insert, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Text.css";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Text.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>");
 const __solidLayoutTextRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "size",
-        "variant",
-        "weight",
-        "transform",
-        "tracking",
-        "leading",
-        "family"
-    ]);
-    const size = ()=>local.size ?? "base";
-    const variant = ()=>local.variant ?? "default";
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.base, local.class)
-            }), {
-            "data-slot": "text",
-            get ["data-size"] () {
-                return size();
-            },
-            get ["data-variant"] () {
-                return variant();
-            },
-            get ["data-weight"] () {
-                return local.weight;
-            },
-            get ["data-transform"] () {
-                return local.transform;
-            },
-            get ["data-tracking"] () {
-                return local.tracking;
-            },
-            get ["data-leading"] () {
-                return local.leading;
-            },
-            get ["data-family"] () {
-                return local.family;
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$, ()=>local.children);
-        return _el$;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style", "size", "variant", "weight", "transform", "tracking", "leading", "family");
+    const size = ()=>p.size ?? "base";
+    const variant = ()=>p.variant ?? "default";
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.base, p.class)
+        }), {
+        "data-slot": "text",
+        get ["data-size"] () {
+            return size();
+        },
+        get ["data-variant"] () {
+            return variant();
+        },
+        get ["data-weight"] () {
+            return p.weight;
+        },
+        get ["data-transform"] () {
+            return p.transform;
+        },
+        get ["data-tracking"] () {
+            return p.tracking;
+        },
+        get ["data-leading"] () {
+            return p.leading;
+        },
+        get ["data-family"] () {
+            return p.family;
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$, ()=>p.children);
+    return _el$;
 };
 const TextRoot = defineComponent({
     recipe: componentRecipe,

package/dist/components/text/Text.recipe.d.ts

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

package/dist/components/textarea/Textarea.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Textarea.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, State, Issue } from "../vocabulary";
 export type TextareaVariant = "primary" | "secondary";
 export type TextareaRootProps = Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, "children"> & UIBaseProps & {