@pathscale/ui 2.4.0 → 2.6.0

package/dist/components/form/FieldErrorMessage.generated.js

@@ -1,7 +1,7 @@
-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 { Show } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { twMerge } from "../../lib/twMerge.js";
 import { componentRecipe } from "./Form.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<p>");
 const __solidLayoutFieldErrorMessage = (_stable, p)=>createComponent(Show, {
@@ -16,7 +16,7 @@ const __solidLayoutFieldErrorMessage = (_stable, p)=>createComponent(Show, {
                 "data-slot": "field-error-message",
                 role: "alert",
                 "aria-live": "polite"
-            }), false, true);
+            }), true);
             insert(_el$, ()=>p.message);
             return _el$;
         }

package/dist/components/form/Form.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Form.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 import { type AnyFormApi } from "../../hooks/form/FormContext";
 export type FormRootProps = JSX.FormHTMLAttributes<HTMLFormElement> & UIBaseProps;

package/dist/components/form/Form.generated.js

@@ -1,32 +1,27 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { claimElement, createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Form.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 "./Form.recipe.js";
 import { FormContext } from "../../hooks/form/FormContext.js";
 var _tmpl$ = /*#__PURE__*/ template("<form>");
 const __solidLayoutFormRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.base, local.class)
-            }), {
-            "data-slot": "form",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, false);
-        return _el$;
-    })();
+    const others = omit(p, "class", "dataTheme", "style");
+    var _el$ = _tmpl$();
+    claimElement(_el$);
+    spread(_el$, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.base, p.class)
+        }), {
+        "data-slot": "form",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), false);
+    return _el$;
 };
 const FormRoot = defineComponent({
     recipe: componentRecipe,
@@ -34,40 +29,34 @@ const FormRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutFormWithContext = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "form",
-        "class",
-        "dataTheme",
-        "style",
-        "onSubmit",
-        "children"
-    ]);
+    const others = omit(p, "form", "class", "dataTheme", "style", "onSubmit", "children");
     const handleSubmit = (e)=>{
         e.preventDefault();
         e.stopPropagation();
-        local.form._tsForm.handleSubmit();
-        if ("function" == typeof local.onSubmit) local.onSubmit(e);
+        p.form.submit();
+        if ("function" == typeof p.onSubmit) p.onSubmit(e);
     };
-    return createComponent(FormContext.Provider, {
+    return createComponent(FormContext, {
         get value () {
-            return local.form;
+            return p.form;
         },
         get children () {
             var _el$2 = _tmpl$();
+            claimElement(_el$2);
             spread(_el$2, mergeProps(others, {
                 onSubmit: handleSubmit
             }, ()=>({
-                    class: twMerge(CLASSES.base, local.class)
+                    class: twMerge(CLASSES.base, p.class)
                 }), {
                 "data-slot": "form",
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
-            }), false, true);
-            insert(_el$2, ()=>local.children);
+            }), true);
+            insert(_el$2, ()=>p.children);
             return _el$2;
         }
     });

package/dist/components/form/Form.recipe.d.ts

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

package/dist/components/form/FormField.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 { InputFieldProps } from "../input";
 import type { AnyFormApi } from "../../hooks/form/FormContext";
 /**

package/dist/components/form/FormField.generated.js

@@ -1,94 +1,79 @@
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
-import { Show, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import { Show, omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import input from "../input/index.js";
 import label from "../label/index.js";
 import { useFormContext } from "../../hooks/form/FormContext.js";
 import { getFirstFieldError } from "../../hooks/form/getFirstFieldError.js";
 import { FieldErrorMessage } from "./FieldErrorMessage.generated.js";
 import { componentRecipe } from "./Form.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>");
+var _tmpl$ = /*#__PURE__*/ template("<div><!><!><!>");
 const __solidLayoutFormField = (_stable, p)=>{
-    const [local, _rest] = splitProps(p, [
-        "name",
-        "label",
-        "inputProps",
-        "class",
-        "form"
-    ]);
+    omit(p, "name", "label", "inputProps", "class", "form");
     const resolveForm = ()=>{
-        if (null != local.form) return local.form;
+        if (null != p.form) return p.form;
         return useFormContext();
     };
     const form = resolveForm();
-    const tsForm = form._tsForm;
-    return createComponent(tsForm.Field, {
+    const meta = ()=>form.getFieldMeta(p.name);
+    const errorMessage = ()=>meta().isTouched ? getFirstFieldError(meta().errors) : void 0;
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+    spread(_el$, mergeProps(()=>({
+            class: twMerge("flex flex-col gap-1", p.class)
+        }), {
+        "data-slot": "form-field"
+    }), true);
+    insert(_el$, createComponent(Show, {
+        get when () {
+            return p.label;
+        },
+        get children () {
+            return createComponent(label, {
+                get ["for"] () {
+                    return p.name;
+                },
+                get ["data-invalid"] () {
+                    return errorMessage() ? "true" : void 0;
+                },
+                get children () {
+                    return p.label;
+                }
+            });
+        }
+    }), _el$2);
+    insert(_el$, createComponent(input.Field, mergeProps(()=>p.inputProps, {
+        get id () {
+            return p.name;
+        },
         get name () {
-            return local.name;
+            return p.name;
+        },
+        get value () {
+            return String(form.getFieldValue(p.name) ?? "");
         },
-        children: (field)=>{
-            const errorMessage = ()=>field().state.meta.isTouched ? getFirstFieldError(field().state.meta.errors ?? []) : void 0;
-            return (()=>{
-                var _el$ = _tmpl$();
-                spread(_el$, mergeProps(()=>({
-                        class: twMerge("flex flex-col gap-1", local.class)
-                    }), {
-                    "data-slot": "form-field"
-                }), false, true);
-                insert(_el$, createComponent(Show, {
-                    get when () {
-                        return local.label;
-                    },
-                    get children () {
-                        return createComponent(label, {
-                            get ["for"] () {
-                                return local.name;
-                            },
-                            get ["data-invalid"] () {
-                                return Boolean(errorMessage()) ? "true" : void 0;
-                            },
-                            get children () {
-                                return local.label;
-                            }
-                        });
-                    }
-                }), null);
-                insert(_el$, createComponent(input.Field, mergeProps(()=>local.inputProps, {
-                    get id () {
-                        return local.name;
-                    },
-                    get name () {
-                        return local.name;
-                    },
-                    get value () {
-                        return String(field().state.value ?? "");
-                    },
-                    onInput: (e)=>{
-                        field().handleChange(e.currentTarget.value);
-                    },
-                    onBlur: ()=>field().handleBlur(),
-                    get ["aria-invalid"] () {
-                        return Boolean(errorMessage()) ? true : void 0;
-                    },
-                    get issues () {
-                        return memo(()=>!!errorMessage())() ? [
-                            {
-                                code: "invalid",
-                                message: String(errorMessage())
-                            }
-                        ] : void 0;
-                    }
-                })), null);
-                insert(_el$, createComponent(FieldErrorMessage, {
-                    get message () {
-                        return errorMessage();
-                    }
-                }), null);
-                return _el$;
-            })();
+        onInput: (e)=>{
+            form.setFieldValue(p.name, e.currentTarget.value);
+        },
+        onBlur: ()=>form.validateField(p.name, "blur"),
+        get ["aria-invalid"] () {
+            return errorMessage() ? "true" : void 0;
+        },
+        get issues () {
+            return memo(()=>!!errorMessage())() ? [
+                {
+                    code: "invalid",
+                    message: String(errorMessage())
+                }
+            ] : void 0;
+        }
+    })), _el$3);
+    insert(_el$, createComponent(FieldErrorMessage, {
+        get message () {
+            return errorMessage();
         }
-    });
+    }), _el$4);
+    return _el$;
 };
 const FormField = defineComponent({
     recipe: componentRecipe,

package/dist/components/form/FormSubmitButton.generated.js

@@ -1,35 +1,25 @@
-import { createComponent, memo, mergeProps } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
-import { splitProps } from "solid-js";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import { omit } from "solid-js";
 import button_0 from "../button/index.js";
 import { useFormContext } from "../../hooks/form/FormContext.js";
 import { componentRecipe } from "./Form.recipe.js";
 const __solidLayoutFormSubmitButton = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "form",
-        "children"
-    ]);
+    const others = omit(p, "form", "children");
     const resolveForm = ()=>{
-        if (null != local.form) return local.form;
+        if (null != p.form) return p.form;
         return useFormContext();
     };
     const form = resolveForm();
-    const tsForm = form._tsForm;
-    return createComponent(tsForm.Subscribe, {
-        selector: (s)=>({
-                canSubmit: s.canSubmit,
-                isSubmitting: s.isSubmitting
-            }),
-        children: (state)=>createComponent(button_0, mergeProps(others, {
-                type: "submit",
-                get state () {
-                    return memo(()=>!!state().isSubmitting)() ? "loading" : state().canSubmit ? "default" : "disabled";
-                },
-                get children () {
-                    return local.children;
-                }
-            }))
-    });
+    return createComponent(button_0, mergeProps(others, {
+        type: "submit",
+        get state () {
+            return memo(()=>!!form.isSubmitting())() ? "loading" : form.isValid() ? "default" : "disabled";
+        },
+        get children () {
+            return p.children;
+        }
+    }));
 };
 const FormSubmitButton = defineComponent({
     recipe: componentRecipe,

package/dist/components/glow-card/GlowCard.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";
 import "./GlowCard.css";
 export type GlowCardProps = UIBaseProps & JSX.HTMLAttributes<HTMLDivElement>;

package/dist/components/glow-card/GlowCard.generated.js

@@ -1,49 +1,41 @@
-import { insert, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { insert, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import { omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { clsx } from "clsx";
 import "./GlowCard.css";
 import { CLASSES, componentRecipe } from "./GlowCard.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const __solidLayoutGlowCard = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "onMouseMove",
-        "style"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "onMouseMove", "style");
     const handleMouseMove = (e)=>{
         const rect = e.currentTarget.getBoundingClientRect();
         e.currentTarget.style.setProperty("--mouse-x", `${e.clientX - rect.left}px`);
         e.currentTarget.style.setProperty("--mouse-y", `${e.clientY - rect.top}px`);
-        if (Array.isArray(local.onMouseMove)) {
-            const [handler, data] = local.onMouseMove;
+        if (Array.isArray(p.onMouseMove)) {
+            const [handler, data] = p.onMouseMove;
             handler(data, e);
-        } else if ("function" == typeof local.onMouseMove) local.onMouseMove(e);
+        } else if ("function" == typeof p.onMouseMove) p.onMouseMove(e);
     };
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return twMerge(clsx(CLASSES.base, CLASSES.isolate, local.class));
-            },
-            get style () {
-                return local.style;
-            },
-            onMouseMove: handleMouseMove,
-            onMouseLeave: (e)=>{
-                e.currentTarget.style.setProperty("--mouse-x", "50%");
-                e.currentTarget.style.setProperty("--mouse-y", "50%");
-            }
-        }), false, true);
-        insert(_el$, ()=>local.children);
-        return _el$;
-    })();
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(others, {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get ["class"] () {
+            return twMerge(clsx(CLASSES.base, CLASSES.isolate, p.class));
+        },
+        get style () {
+            return p.style;
+        },
+        onMouseMove: handleMouseMove,
+        onMouseLeave: (e)=>{
+            e.currentTarget.style.setProperty("--mouse-x", "50%");
+            e.currentTarget.style.setProperty("--mouse-y", "50%");
+        }
+    }), true);
+    insert(_el$, ()=>p.children);
+    return _el$;
 };
 const GlowCard = defineComponent({
     recipe: componentRecipe,

package/dist/components/glow-card/GlowCard.recipe.d.ts

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

package/dist/components/grid/Grid.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Grid.css";
-import { type JSX } from "solid-js";
+import { type JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 import type { ResponsiveProp } from "../types";
 type GridFlow = "row" | "col" | "row-dense" | "col-dense";

package/dist/components/grid/Grid.generated.js

@@ -1,31 +1,21 @@
-import { Dynamic, createComponent, mergeProps } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { Dynamic, createComponent, mergeProps } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Grid.css";
-import { children, mergeProps as external_solid_js_mergeProps, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { children, merge, omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import clsx from "clsx";
 import { mapResponsiveProp } from "../utils.js";
 import { CLASSES, componentRecipe } from "./Grid.recipe.js";
 const __solidLayoutGrid = (_stable, p)=>{
-    const merged = external_solid_js_mergeProps({
+    const merged = merge({
         as: "div"
     }, p);
-    const [local, rest] = splitProps(merged, [
-        "as",
-        "class",
-        "children",
-        "cols",
-        "rows",
-        "flow",
-        "gap",
-        "autoCols",
-        "autoRows"
-    ]);
-    const resolvedChildren = children(()=>local.children);
-    const classes = clsx(CLASSES.base, mapResponsiveProp(local.cols, CLASSES.cols), mapResponsiveProp(local.rows, CLASSES.rows), mapResponsiveProp(local.flow, CLASSES.flow), mapResponsiveProp(local.gap, CLASSES.gap), mapResponsiveProp(local.autoCols, CLASSES.autoCols), mapResponsiveProp(local.autoRows, CLASSES.autoRows), local.class);
+    const rest = omit(merged, "as", "class", "children", "cols", "rows", "flow", "gap", "autoCols", "autoRows");
+    const resolvedChildren = children(()=>merged.children);
+    const classes = clsx(CLASSES.base, mapResponsiveProp(merged.cols, CLASSES.cols), mapResponsiveProp(merged.rows, CLASSES.rows), mapResponsiveProp(merged.flow, CLASSES.flow), mapResponsiveProp(merged.gap, CLASSES.gap), mapResponsiveProp(merged.autoCols, CLASSES.autoCols), mapResponsiveProp(merged.autoRows, CLASSES.autoRows), merged.class);
     return createComponent(Dynamic, mergeProps({
         get component () {
-            return local.as;
+            return merged.as;
         }
     }, ()=>({
             class: twMerge(classes)

package/dist/components/grid/Grid.recipe.d.ts

@@ -52,7 +52,7 @@ export declare const CLASSES: {
         readonly fr: "auto-rows-fr";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "grid";
     readonly slots: {
         readonly root: {};

package/dist/components/header/Header.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Header.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 export type HeaderRootProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 declare const HeaderRoot: __LayoutComponent<HeaderRootProps>;

package/dist/components/header/Header.generated.js

@@ -1,33 +1,26 @@
-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 "./Header.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 "./Header.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const __solidLayoutHeaderRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.base, local.class)
-            }), {
-            "data-slot": "header",
-            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");
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.base, p.class)
+        }), {
+        "data-slot": "header",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$, ()=>p.children);
+    return _el$;
 };
 const HeaderRoot = defineComponent({
     recipe: componentRecipe,

package/dist/components/header/Header.recipe.d.ts

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

package/dist/components/icon/Icon.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Icon.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { Flavor, UIBaseProps } from "../vocabulary";
 export type IconProps = UIBaseProps & {
     /**

package/dist/components/icon/Icon.generated.js

@@ -1,5 +1,5 @@
-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 "./Icon.css";
 import { Show } from "solid-js";
 import { icon } from "./Icon.recipe.js";
@@ -22,28 +22,24 @@ const __solidLayoutIconLayout = (_stable, p)=>(()=>{
                 return "string" == typeof p.src ? "preload" : "svg";
             },
             "aria-hidden": "true"
-        }), false, true);
+        }), true);
         insert(_el$, createComponent(Show, {
             get when () {
                 return "string" == typeof p.src;
             },
             get fallback () {
-                return (()=>{
-                    var _el$3 = _tmpl$();
-                    spread(_el$3, mergeProps(()=>_stable.slot.glyph), false, true);
-                    insert(_el$3, ()=>p.src);
-                    return _el$3;
-                })();
+                var _el$3 = _tmpl$();
+                spread(_el$3, mergeProps(()=>_stable.slot.glyph), true);
+                insert(_el$3, ()=>p.src);
+                return _el$3;
             },
             get children () {
                 var _el$2 = _tmpl$();
                 spread(_el$2, mergeProps(()=>_stable.slot.glyph, {
-                    get classList () {
-                        return {
-                            [preloadClasses(p.src)]: true
-                        };
+                    get ["class"] () {
+                        return preloadClasses(p.src);
                     }
-                }), false, false);
+                }), false);
                 return _el$2;
             }
         }));