@pathscale/ui 2.5.0 → 2.6.0

package/dist/components/input-otp/InputOTP.generated.js

@@ -1,11 +1,11 @@
-import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./InputOTP.css";
-import { For, Show, createContext, createEffect, createMemo, createSignal, onMount, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { For, Show, createContext, createEffect, createMemo, createSignal, omit, onSettled, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./InputOTP.recipe.js";
 import { resolveState } from "../vocabulary.js";
-var _tmpl$ = /*#__PURE__*/ template("<div><input>"), _tmpl$2 = /*#__PURE__*/ template("<div>");
+var _tmpl$ = /*#__PURE__*/ template("<div><input>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<div><!><!>");
 const REGEXP_ONLY_DIGITS = "^\\d+$";
 const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
 const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
@@ -16,44 +16,21 @@ const invokeEventHandler = (handler, event)=>{
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
 const __solidLayoutInputOTPRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "value",
-        "defaultValue",
-        "onChange",
-        "onComplete",
-        "maxLength",
-        "variant",
-        "pattern",
-        "name",
-        "autoFocus",
-        "state",
-        "disabled",
-        "issues",
-        "inputClassName",
-        "inputMode",
-        "onMouseDown",
-        "onFocusOut",
-        "aria-invalid",
-        "ref"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "value", "defaultValue", "onChange", "onComplete", "maxLength", "variant", "pattern", "name", "autoFocus", "state", "disabled", "issues", "inputClassName", "inputmode", "onMouseDown", "onFocusOut", "aria-invalid", "ref");
     let inputRef;
     let rootRef;
-    const [internalValue, setInternalValue] = createSignal(local.defaultValue ?? "");
+    const [internalValue, setInternalValue] = createSignal(p.defaultValue ?? "");
     const [activeIndex, setActiveIndexSignal] = createSignal(0);
     const [isFocused, setIsFocused] = createSignal(false);
     const maxLength = ()=>{
-        const parsed = Number(local.maxLength);
+        const parsed = Number(p.maxLength);
         if (!Number.isFinite(parsed)) return 6;
         return Math.max(1, Math.floor(parsed));
     };
     const patternRegex = createMemo(()=>{
-        if (!local.pattern) return;
+        if (!p.pattern) return;
         try {
-            return new RegExp(local.pattern);
+            return new RegExp(p.pattern);
         } catch  {
             return;
         }
@@ -72,24 +49,24 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
         }
         return result.join("");
     };
-    const normalizedControlledValue = createMemo(()=>sanitizeValue(local.value ?? ""));
-    const value = createMemo(()=>void 0 !== local.value ? normalizedControlledValue() : sanitizeValue(internalValue()));
+    const normalizedControlledValue = createMemo(()=>sanitizeValue(p.value ?? ""));
+    const value = createMemo(()=>void 0 !== p.value ? normalizedControlledValue() : sanitizeValue(internalValue()));
     const chars = createMemo(()=>{
         const current = value();
         return Array.from({
             length: maxLength()
         }, (_, index)=>current[index] ?? "");
     });
-    const variant = ()=>local.variant ?? "primary";
-    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
-    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues)) || Boolean(local["aria-invalid"]) || "true" === local["aria-invalid"];
+    const variant = ()=>p.variant ?? "primary";
+    const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled);
+    const isInvalid = ()=>Boolean("invalid" === resolveState(p.state, p.issues)) || Boolean(p["aria-invalid"]) || "true" === p["aria-invalid"];
     const setValue = (nextValue)=>{
         const normalized = sanitizeValue(nextValue);
         const current = value();
         if (normalized === current) return;
-        if (void 0 === local.value) setInternalValue(normalized);
-        local.onChange?.(normalized);
-        if (normalized.length === maxLength()) local.onComplete?.(normalized);
+        if (void 0 === p.value) setInternalValue(normalized);
+        p.onChange?.(normalized);
+        if (normalized.length === maxLength()) p.onComplete?.(normalized);
     };
     const normalizeIndex = (index)=>{
         const bounded = clamp(index, 0, maxLength());
@@ -119,7 +96,7 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
         setActiveIndexSignal(resolveActiveSlot(bounded));
     };
     const handleRootMouseDown = (event)=>{
-        invokeEventHandler(local.onMouseDown, event);
+        invokeEventHandler(p.onMouseDown, event);
         if (event.defaultPrevented || isDisabled()) return;
         const target = event.target;
         if (target.closest('[data-slot="input-otp-slot"]')) return;
@@ -127,7 +104,7 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
         focusInputAt(value().length);
     };
     const handleFocusOut = (event)=>{
-        invokeEventHandler(local.onFocusOut, event);
+        invokeEventHandler(p.onFocusOut, event);
         if (event.defaultPrevented) return;
         const nextTarget = event.relatedTarget;
         if (rootRef?.contains(nextTarget)) return;
@@ -147,7 +124,7 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
         if (current.length > maxLength()) setValue(current.slice(0, maxLength()));
     });
     createEffect(()=>{
-        if (void 0 !== local.value) return;
+        if (void 0 !== p.value) return;
         const normalized = sanitizeValue(internalValue());
         if (normalized !== internalValue()) setInternalValue(normalized);
     });
@@ -156,13 +133,13 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
         const active = clamp(activeIndex(), 0, maxLength());
         inputRef?.setSelectionRange(active, active);
     });
-    onMount(()=>{
-        if (!local.autoFocus || isDisabled()) return;
+    onSettled(()=>{
+        if (!p.autoFocus || isDisabled()) return;
         queueMicrotask(()=>{
             focusInputAt(value().length);
         });
     });
-    return createComponent(InputOTPContext.Provider, {
+    return createComponent(InputOTPContext, {
         value: {
             value,
             chars,
@@ -177,12 +154,12 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
         },
         get children () {
             var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
-            use((node)=>{
-                rootRef = node;
-                if ("function" == typeof local.ref) local.ref(node);
-            }, _el$);
+            ref(()=>(node)=>{
+                    rootRef = node;
+                    if ("function" == typeof p.ref) p.ref(node);
+                }, _el$);
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], local.class)
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], p.class)
                 }), {
                 "data-slot": "input-otp",
                 get ["data-disabled"] () {
@@ -192,35 +169,35 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
                     return isInvalid() ? "true" : void 0;
                 },
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 },
                 onMouseDown: handleRootMouseDown,
                 onFocusOut: handleFocusOut
-            }), false, true);
+            }), true);
             var _ref$ = inputRef;
-            "function" == typeof _ref$ ? use(_ref$, _el$2) : inputRef = _el$2;
+            "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$2) : inputRef = _el$2;
             spread(_el$2, mergeProps(()=>({
-                    class: twMerge(CLASSES.Input.base, local.inputClassName)
+                    class: twMerge(CLASSES.Input.base, p.inputClassName)
                 }), {
                 "data-slot": "input-otp-input",
                 type: "text",
-                get inputMode () {
-                    return local.inputMode;
+                get inputmode () {
+                    return p.inputmode;
                 },
                 get pattern () {
-                    return local.pattern;
+                    return p.pattern;
                 },
-                get maxLength () {
+                get maxlength () {
                     return maxLength();
                 },
                 get value () {
                     return value();
                 },
                 get name () {
-                    return local.name;
+                    return p.name;
                 },
                 get disabled () {
                     return isDisabled();
@@ -239,8 +216,8 @@ const __solidLayoutInputOTPRoot = (_stable, p)=>{
                 onInput: handleInput,
                 onKeyDown: handleKeyDown,
                 onSelect: ()=>syncActiveFromInputCaret()
-            }), false, false);
-            insert(_el$, ()=>local.children ?? createComponent(InputOTPGroup, {
+            }), false);
+            insert(_el$, ()=>p.children ?? createComponent(InputOTPGroup, {
                     get children () {
                         return createComponent(For, {
                             get each () {
@@ -264,28 +241,21 @@ const InputOTPRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutInputOTPGroup = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$3 = _tmpl$2();
-        spread(_el$3, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Group.base, local.class)
-            }), {
-            "data-slot": "input-otp-group",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$3, ()=>local.children);
-        return _el$3;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$3 = _tmpl$2();
+    spread(_el$3, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Group.base, p.class)
+        }), {
+        "data-slot": "input-otp-group",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$3, ()=>p.children);
+    return _el$3;
 };
 const InputOTPGroup = defineComponent({
     recipe: componentRecipe,
@@ -294,79 +264,71 @@ const InputOTPGroup = defineComponent({
 });
 const __solidLayoutInputOTPSlot = (_stable, p)=>{
     const context = useContext(InputOTPContext);
-    const [local, others] = splitProps(p, [
-        "index",
-        "class",
-        "dataTheme",
-        "style",
-        "onMouseDown"
-    ]);
-    const char = ()=>context?.chars()[local.index] ?? "";
-    const isActive = ()=>Boolean(context?.isFocused()) && !Boolean(context?.isDisabled()) && (context?.activeIndex() ?? 0) === local.index;
+    const others = omit(p, "index", "class", "dataTheme", "style", "onMouseDown");
+    const char = ()=>context?.chars()[p.index] ?? "";
+    const isActive = ()=>Boolean(context?.isFocused()) && !Boolean(context?.isDisabled()) && (context?.activeIndex() ?? 0) === p.index;
     const handleMouseDown = (event)=>{
-        invokeEventHandler(local.onMouseDown, event);
+        invokeEventHandler(p.onMouseDown, event);
         if (event.defaultPrevented || context?.isDisabled()) return;
         event.preventDefault();
-        context?.setActiveIndex(local.index);
-        context?.focusInputAt(local.index);
+        context?.setActiveIndex(p.index);
+        context?.focusInputAt(p.index);
     };
-    return (()=>{
-        var _el$4 = _tmpl$2();
-        spread(_el$4, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Slot.base, local.class)
-            }), {
-            "data-slot": "input-otp-slot",
-            get ["data-active"] () {
-                return isActive() ? "true" : void 0;
-            },
-            get ["data-filled"] () {
-                return char().length > 0 ? "true" : void 0;
-            },
-            get ["data-disabled"] () {
-                return context?.isDisabled() ? "true" : void 0;
-            },
-            get ["data-invalid"] () {
-                return context?.isInvalid() ? "true" : void 0;
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            onMouseDown: handleMouseDown
-        }), false, true);
-        insert(_el$4, createComponent(Show, {
-            get when () {
-                return char().length > 0;
-            },
-            get children () {
-                var _el$5 = _tmpl$2();
-                spread(_el$5, mergeProps(()=>({
-                        class: CLASSES.Slot.value
-                    }), {
-                    "data-slot": "input-otp-slot-value"
-                }), false, true);
-                insert(_el$5, char);
-                return _el$5;
-            }
-        }), null);
-        insert(_el$4, createComponent(Show, {
-            get when () {
-                return memo(()=>!!isActive())() && 0 === char().length;
-            },
-            get children () {
-                var _el$6 = _tmpl$2();
-                spread(_el$6, mergeProps(()=>({
-                        class: CLASSES.Slot.caret
-                    }), {
-                    "data-slot": "input-otp-caret"
-                }), false, false);
-                return _el$6;
-            }
-        }), null);
-        return _el$4;
-    })();
+    var _el$4 = _tmpl$3(), _el$7 = _el$4.firstChild, _el$8 = _el$7.nextSibling;
+    spread(_el$4, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Slot.base, p.class)
+        }), {
+        "data-slot": "input-otp-slot",
+        get ["data-active"] () {
+            return isActive() ? "true" : void 0;
+        },
+        get ["data-filled"] () {
+            return char().length > 0 ? "true" : void 0;
+        },
+        get ["data-disabled"] () {
+            return context?.isDisabled() ? "true" : void 0;
+        },
+        get ["data-invalid"] () {
+            return context?.isInvalid() ? "true" : void 0;
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        onMouseDown: handleMouseDown
+    }), true);
+    insert(_el$4, createComponent(Show, {
+        get when () {
+            return char().length > 0;
+        },
+        get children () {
+            var _el$5 = _tmpl$2();
+            spread(_el$5, mergeProps(()=>({
+                    class: CLASSES.Slot.value
+                }), {
+                "data-slot": "input-otp-slot-value"
+            }), true);
+            insert(_el$5, char);
+            return _el$5;
+        }
+    }), _el$7);
+    insert(_el$4, createComponent(Show, {
+        get when () {
+            return memo(()=>!!isActive())() ? 0 === char().length : isActive();
+        },
+        get children () {
+            var _el$6 = _tmpl$2();
+            spread(_el$6, mergeProps(()=>({
+                    class: CLASSES.Slot.caret
+                }), {
+                "data-slot": "input-otp-caret"
+            }), false);
+            return _el$6;
+        }
+    }), _el$8);
+    return _el$4;
 };
 const InputOTPSlot = defineComponent({
     recipe: componentRecipe,
@@ -374,28 +336,21 @@ const InputOTPSlot = defineComponent({
     embedded: true
 });
 const __solidLayoutInputOTPSeparator = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$7 = _tmpl$2();
-        spread(_el$7, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Separator.base, local.class)
-            }), {
-            "data-slot": "input-otp-separator",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$7, ()=>local.children);
-        return _el$7;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$9 = _tmpl$2();
+    spread(_el$9, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Separator.base, p.class)
+        }), {
+        "data-slot": "input-otp-separator",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$9, ()=>p.children);
+    return _el$9;
 };
 const InputOTPSeparator = defineComponent({
     recipe: componentRecipe,

package/dist/components/input-otp/InputOTP.recipe.d.ts

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

package/dist/components/join/Join.generated.d.ts

@@ -1,5 +1,5 @@
 import type { Component as __LayoutComponent } from "solid-js";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 export type JoinProps = UIBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
     responsive?: boolean;

package/dist/components/join/Join.generated.js

@@ -1,41 +1,31 @@
-import { insert, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
-import { children, createMemo, splitProps } from "solid-js";
+import { insert, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import { children, createMemo, omit } from "solid-js";
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Join.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const __solidLayoutJoin = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "responsive",
-        "vertical",
-        "horizontal",
-        "class",
-        "dataTheme",
-        "style",
-        "children"
-    ]);
-    const resolvedChildren = children(()=>local.children);
+    const others = omit(p, "responsive", "vertical", "horizontal", "class", "dataTheme", "style", "children");
+    const resolvedChildren = children(()=>p.children);
     const classes = createMemo(()=>twMerge(CLASSES.base, clsx({
-            [CLASSES.flag.vertical]: !local.responsive && local.vertical,
-            [CLASSES.flag.horizontal]: !local.responsive && local.horizontal,
-            [CLASSES.flag.responsive]: local.responsive
-        }), local.class));
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, ()=>({
-                class: classes()
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$, resolvedChildren);
-        return _el$;
-    })();
+            [CLASSES.flag.vertical]: !p.responsive && p.vertical,
+            [CLASSES.flag.horizontal]: !p.responsive && p.horizontal,
+            [CLASSES.flag.responsive]: p.responsive
+        }), p.class));
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(others, ()=>({
+            class: classes()
+        }), {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$, resolvedChildren);
+    return _el$;
 };
 const Join = defineComponent({
     recipe: componentRecipe,

package/dist/components/join/Join.recipe.d.ts

@@ -6,7 +6,7 @@ export declare const CLASSES: {
         readonly responsive: "join-vertical lg:join-horizontal";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "join";
     readonly slots: {
         readonly root: {};

package/dist/components/kbd/Kbd.generated.d.ts

@@ -1,6 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Kbd.css";
-import { type Component, type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { type Component } from "solid-js";
 import type { UIBaseProps } from "../vocabulary";
 export type KbdVariant = "default" | "light";
 export type KbdKey = "command" | "shift" | "ctrl" | "option" | "enter" | "delete" | "escape" | "tab" | "capslock" | "up" | "right" | "down" | "left" | "pageup" | "pagedown" | "home" | "end" | "help" | "space" | "fn" | "win" | "alt";