@pathscale/ui 1.3.1 → 1.4.0

package/dist/components/floating-dock/FloatingDock.recipe.js

@@ -0,0 +1,45 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "floating-dock",
+    bar: "floating-dock__bar",
+    barOrientation: {
+        horizontal: "floating-dock__bar--horizontal",
+        vertical: "floating-dock__bar--vertical"
+    },
+    barMobileDock: "floating-dock__bar--mobile-dock",
+    bg: "floating-dock__bg",
+    item: "floating-dock__item",
+    icon: "floating-dock__icon",
+    tooltip: "floating-dock__tooltip",
+    mobile: "floating-dock__mobile",
+    mobileToggle: "floating-dock__mobile-toggle",
+    mobilePopup: "floating-dock__mobile-popup",
+    mobilePopupDirection: {
+        top: "floating-dock__mobile-popup--top",
+        bottom: "floating-dock__mobile-popup--bottom",
+        left: "floating-dock__mobile-popup--left",
+        right: "floating-dock__mobile-popup--right"
+    },
+    mobileItem: "floating-dock__mobile-item",
+    buttonReset: "floating-dock__button-reset",
+    menuIcon: "floating-dock__menu-icon"
+};
+const componentRecipe = recipe({
+    component: "floating-dock",
+    slots: {
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/floating-dock/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./FloatingDock";
-export type { FloatingDockProps, FloatingDockItem, FloatingDockDirection, } from "./FloatingDock";
+export { default } from "./FloatingDock.generated";
+export type { FloatingDockProps, FloatingDockItem, FloatingDockDirection, } from "./FloatingDock.generated";

package/dist/components/floating-dock/index.js

@@ -1 +1 @@
-export { default } from "./FloatingDock.js";
+export { default } from "./FloatingDock.generated.js";

package/dist/components/footer/Footer.generated.d.ts

@@ -0,0 +1,14 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./footer.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type FooterProps = IComponentBaseProps & {
+    children?: JSX.Element;
+    center?: boolean;
+    horizontal?: boolean;
+    vertical?: boolean;
+};
+declare const FooterNamespaces: __LayoutComponent<FooterProps> & {
+    Title: __LayoutComponent<import("./FooterTitle.generated").FooterTitleProps>;
+};
+export default FooterNamespaces;

package/dist/components/footer/Footer.generated.js

@@ -0,0 +1,42 @@
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./footer.css";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { FooterTitle } from "./FooterTitle.generated.js";
+import { CLASSES, componentRecipe } from "./Footer.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<footer>");
+const __solidLayoutFooter = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "center",
+        "horizontal",
+        "vertical"
+    ]);
+    const classes = ()=>twMerge(CLASSES.base, local.center && CLASSES.flag.center, local.horizontal && CLASSES.flag.horizontal, local.vertical && CLASSES.flag.vertical, local.class, local.className);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, ()=>({
+                class: classes()
+            })), false, true);
+        insert(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const Footer = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFooter,
+    embedded: true
+});
+const FooterNamespaces = Object.assign(Footer, {
+    Title: FooterTitle
+});
+const Footer_generated = FooterNamespaces;
+export default Footer_generated;

package/dist/components/footer/Footer.recipe.d.ts

@@ -0,0 +1,15 @@
+export declare const CLASSES: {
+    readonly base: "footer";
+    readonly title: "footer__title";
+    readonly flag: {
+        readonly center: "footer--center";
+        readonly horizontal: "footer--horizontal";
+        readonly vertical: "footer--vertical";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "footer";
+    readonly slots: {
+        readonly root: {};
+    };
+}>;

package/dist/components/footer/Footer.recipe.js

@@ -0,0 +1,29 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "footer",
+    title: "footer__title",
+    flag: {
+        center: "footer--center",
+        horizontal: "footer--horizontal",
+        vertical: "footer--vertical"
+    }
+};
+const componentRecipe = recipe({
+    component: "footer",
+    slots: {
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/footer/FooterTitle.generated.d.ts

@@ -0,0 +1,7 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import { type JSX } from "solid-js";
+export type FooterTitleProps = IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export declare const FooterTitle: __LayoutComponent<FooterTitleProps>;

package/dist/components/footer/FooterTitle.generated.js

@@ -0,0 +1,33 @@
+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 { CLASSES, componentRecipe } from "./Footer.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<h6>");
+const __solidLayoutFooterTitle = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const classes = ()=>twMerge(CLASSES.title, local.class, local.className);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, ()=>({
+                class: classes()
+            })), false, true);
+        insert(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const FooterTitle = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFooterTitle,
+    embedded: true
+});
+export { FooterTitle };

package/dist/components/footer/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from "./Footer";
-export type { FooterProps } from "./Footer";
-export type { FooterTitleProps } from "./FooterTitle";
+export { default } from "./Footer.generated";
+export type { FooterProps } from "./Footer.generated";
+export type { FooterTitleProps } from "./FooterTitle.generated";

package/dist/components/footer/index.js

@@ -1 +1 @@
-export { default } from "./Footer.js";
+export { default } from "./Footer.generated.js";

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

@@ -0,0 +1,10 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import { type JSX } from "solid-js";
+export type FieldErrorMessageProps = JSX.HTMLAttributes<HTMLParagraphElement> & {
+    /** Pre-normalized error string. Renders nothing when undefined or empty. */
+    message?: string;
+    className?: string;
+};
+declare const FieldErrorMessage: __LayoutComponent<FieldErrorMessageProps>;
+export default FieldErrorMessage;
+export { FieldErrorMessage };

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

@@ -0,0 +1,31 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import { Show } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { componentRecipe } from "./Form.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<p>");
+const __solidLayoutFieldErrorMessage = (_stable, p)=>createComponent(Show, {
+        get when () {
+            return p.message;
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            spread(_el$, mergeProps(p, ()=>({
+                    class: twMerge("text-xs text-error mt-0.5", p.class, p.className)
+                }), {
+                "data-slot": "field-error-message",
+                role: "alert",
+                "aria-live": "polite"
+            }), false, true);
+            insert(_el$, ()=>p.message);
+            return _el$;
+        }
+    });
+const FieldErrorMessage = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFieldErrorMessage,
+    embedded: true
+});
+const FieldErrorMessage_generated = FieldErrorMessage;
+export default FieldErrorMessage_generated;
+export { FieldErrorMessage };

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

@@ -0,0 +1,26 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Form.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import { type AnyFormApi } from "../../hooks/form/FormContext";
+export type FormRootProps = JSX.FormHTMLAttributes<HTMLFormElement> & IComponentBaseProps;
+declare const FormRoot: __LayoutComponent<FormRootProps>;
+export type FormWithContextProps = Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & IComponentBaseProps & {
+    /**
+     * The form API returned by `createForm()`.
+     * Providing this prop switches the component into context-providing mode:
+     * it registers the form instance for all `<FormField>`, `<FormSubmitButton>`,
+     * and `useField()` calls in the subtree.
+     */
+    form: AnyFormApi;
+    /**
+     * Optional additional onSubmit handler called *after* `form.handleSubmit()`.
+     * Rarely needed — prefer setting `onSubmit` on `createForm(options)` instead.
+     */
+    onSubmit?: JSX.EventHandlerUnion<HTMLFormElement, SubmitEvent>;
+};
+declare const FormWithContext: __LayoutComponent<FormWithContextProps>;
+declare const Form: __LayoutComponent<FormRootProps | FormWithContextProps>;
+export default Form;
+export { Form, FormRoot, FormWithContext };
+export type { FormRootProps as FormProps };

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

@@ -0,0 +1,95 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Form.css";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+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",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.base, local.class, local.className)
+            }), {
+            "data-slot": "form",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, false);
+        return _el$;
+    })();
+};
+const FormRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFormRoot,
+    embedded: true
+});
+const __solidLayoutFormWithContext = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "form",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onSubmit",
+        "children"
+    ]);
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        local.form._tsForm.handleSubmit();
+        if ("function" == typeof local.onSubmit) local.onSubmit(e);
+    };
+    return createComponent(FormContext.Provider, {
+        get value () {
+            return local.form;
+        },
+        get children () {
+            var _el$2 = _tmpl$();
+            spread(_el$2, mergeProps(others, {
+                onSubmit: handleSubmit
+            }, ()=>({
+                    class: twMerge(CLASSES.base, local.class, local.className)
+                }), {
+                "data-slot": "form",
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            insert(_el$2, ()=>local.children);
+            return _el$2;
+        }
+    });
+};
+const FormWithContext = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFormWithContext,
+    embedded: true
+});
+const __solidLayoutForm = (_stable, p)=>{
+    if ("form" in p && null != p.form) return createComponent(FormWithContext, p);
+    return createComponent(FormRoot, p);
+};
+const Form = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutForm,
+    embedded: true
+});
+Form.Root = FormRoot;
+Form.WithContext = FormWithContext;
+const Form_generated = Form;
+export default Form_generated;
+export { Form, FormRoot, FormWithContext };

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

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

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

@@ -0,0 +1,41 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "form"
+};
+const componentRecipe = recipe({
+    component: "form",
+    slots: {
+        "field-error-message": {},
+        form: {},
+        "form-field": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "field-error-message": {
+                base: "",
+                axes: {}
+            },
+            form: {
+                base: "",
+                axes: {}
+            },
+            "form-field": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "field-error-message": 0,
+            form: 1,
+            "form-field": 2,
+            root: 3
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -0,0 +1,33 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import { type JSX } from "solid-js";
+import type { InputFieldProps } from "../input";
+import type { AnyFormApi } from "../../hooks/form/FormContext";
+/**
+ * Props accepted by `<FormField>`.
+ *
+ * The component reads the form from context automatically (no `form` prop
+ * needed in normal usage). Pass `form` explicitly only when rendering outside
+ * the `<Form>` tree, e.g. inside a Portal or a Dialog.
+ */
+export type FormFieldProps = {
+    /** Field name — must match a key in `createForm({ defaultValues })`. */
+    name: string;
+    /** Rendered above the input. Optional — omit for unlabelled fields. */
+    label?: JSX.Element;
+    /**
+     * Props forwarded to the underlying `<Input.Field>` element.
+     * Use this to set `type`, `placeholder`, `autocomplete`, `startIcon`, etc.
+     */
+    inputProps?: Omit<InputFieldProps, "name" | "value" | "onInput" | "onBlur" | "aria-invalid" | "isInvalid">;
+    /** Container class override. */
+    class?: string;
+    className?: string;
+    /**
+     * Escape hatch: explicit form override for Portal / out-of-tree usage.
+     * When provided, the component does NOT read from context.
+     */
+    form?: AnyFormApi;
+};
+declare const FormField: __LayoutComponent<FormFieldProps>;
+export default FormField;
+export { FormField };

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

@@ -0,0 +1,96 @@
+import { createComponent, insert, 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 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>");
+const __solidLayoutFormField = (_stable, p)=>{
+    const [local, _rest] = splitProps(p, [
+        "name",
+        "label",
+        "inputProps",
+        "class",
+        "className",
+        "form"
+    ]);
+    const resolveForm = ()=>{
+        if (null != local.form) return local.form;
+        return useFormContext();
+    };
+    const form = resolveForm();
+    const tsForm = form._tsForm;
+    return createComponent(tsForm.Field, {
+        get name () {
+            return local.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, local.className)
+                    }), {
+                    "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 isInvalid () {
+                        return Boolean(errorMessage());
+                    }
+                })), null);
+                insert(_el$, createComponent(FieldErrorMessage, {
+                    get message () {
+                        return errorMessage();
+                    }
+                }), null);
+                return _el$;
+            })();
+        }
+    });
+};
+const FormField = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFormField,
+    embedded: true
+});
+const FormField_generated = FormField;
+export default FormField_generated;
+export { FormField };

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

@@ -0,0 +1,13 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import type { ButtonProps } from "../button";
+import type { AnyFormApi } from "../../hooks/form/FormContext";
+export type FormSubmitButtonProps = Omit<ButtonProps, "type" | "isDisabled" | "isPending"> & {
+    /**
+     * Escape hatch: explicit form override for Portal / out-of-tree usage.
+     * When provided, the component does NOT read from context.
+     */
+    form?: AnyFormApi;
+};
+declare const FormSubmitButton: __LayoutComponent<FormSubmitButtonProps>;
+export default FormSubmitButton;
+export { FormSubmitButton };

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

@@ -0,0 +1,44 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import { splitProps } 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 resolveForm = ()=>{
+        if (null != local.form) return local.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 isDisabled () {
+                    return !state().canSubmit;
+                },
+                get isPending () {
+                    return state().isSubmitting;
+                },
+                get children () {
+                    return local.children;
+                }
+            }))
+    });
+};
+const FormSubmitButton = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFormSubmitButton,
+    embedded: true
+});
+const FormSubmitButton_generated = FormSubmitButton;
+export default FormSubmitButton_generated;
+export { FormSubmitButton };

package/dist/components/form/index.d.ts

@@ -1,4 +1,4 @@
-export { default, Form, FormRoot, FormWithContext, type FormProps, type FormRootProps, type FormWithContextProps, } from "./Form";
-export { FormField, type FormFieldProps } from "./FormField";
-export { FormSubmitButton, type FormSubmitButtonProps } from "./FormSubmitButton";
-export { FieldErrorMessage, type FieldErrorMessageProps } from "./FieldErrorMessage";
+export { default, Form, FormRoot, FormWithContext, type FormProps, type FormRootProps, type FormWithContextProps, } from "./Form.generated";
+export { FormField, type FormFieldProps } from "./FormField.generated";
+export { FormSubmitButton, type FormSubmitButtonProps } from "./FormSubmitButton.generated";
+export { FieldErrorMessage, type FieldErrorMessageProps } from "./FieldErrorMessage.generated";

package/dist/components/form/index.js

@@ -1,6 +1,4 @@
-import { Form as external_Form_js_Form, FormRoot, FormWithContext } from "./Form.js";
-export { FormField } from "./FormField.js";
-export { FormSubmitButton } from "./FormSubmitButton.js";
-export { FieldErrorMessage } from "./FieldErrorMessage.js";
-export default external_Form_js_Form;
-export { FormRoot, FormWithContext, external_Form_js_Form as Form };
+export { Form, FormRoot, FormWithContext, default } from "./Form.generated.js";
+export { FormField } from "./FormField.generated.js";
+export { FormSubmitButton } from "./FormSubmitButton.generated.js";
+export { FieldErrorMessage } from "./FieldErrorMessage.generated.js";