@pathscale/ui 1.2.1 → 1.2.3

package/dist/components/footer/footer.css

@@ -1,51 +1,51 @@
 @layer components {
-  .footer-title {
-      margin-bottom: calc(0.25rem * 2);
-      text-transform: uppercase;
-      opacity: 60%;
-      font-weight: 600;
-    }
+  .footer__title {
+    margin-bottom: calc(0.25rem * 2);
+    text-transform: uppercase;
+    opacity: 60%;
+    font-weight: 600;
+  }
 
   .footer {
-      display: grid;
-      width: 100%;
-      grid-auto-flow: row;
-      place-items: start;
-      column-gap: calc(0.25rem * 4);
-      row-gap: calc(0.25rem * 10);
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-    }
+    display: grid;
+    width: 100%;
+    grid-auto-flow: row;
+    place-items: start;
+    column-gap: calc(0.25rem * 4);
+    row-gap: calc(0.25rem * 10);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 
   .footer > * {
-      display: grid;
-      place-items: start;
-      gap: calc(0.25rem * 2);
-    }
-
-  .footer.footer-center {
-      grid-auto-flow: column dense;
-      place-items: center;
-      text-align: center;
-    }
-
-  .footer.footer-center > * {
-      place-items: center;
-    }
-
-  .footer-horizontal {
-      grid-auto-flow: column;
-    }
-
-  .footer-horizontal.footer-center {
-      grid-auto-flow: row dense;
-    }
-
-  .footer-vertical {
-      grid-auto-flow: row;
-    }
-
-  .footer-vertical.footer-center {
-      grid-auto-flow: column dense;
-    }
+    display: grid;
+    place-items: start;
+    gap: calc(0.25rem * 2);
+  }
+
+  .footer--center {
+    grid-auto-flow: column dense;
+    place-items: center;
+    text-align: center;
+  }
+
+  .footer--center > * {
+    place-items: center;
+  }
+
+  .footer--horizontal {
+    grid-auto-flow: column;
+  }
+
+  .footer--horizontal.footer--center {
+    grid-auto-flow: row dense;
+  }
+
+  .footer--vertical {
+    grid-auto-flow: row;
+  }
+
+  .footer--vertical.footer--center {
+    grid-auto-flow: column dense;
+  }
 }

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

@@ -0,0 +1,17 @@
+import { type Component, 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;
+};
+/**
+ * Displays a single field error string.
+ *
+ * Pure presentation — has no form or field awareness. Pass an already-normalized
+ * `message` string from `getFirstFieldError()` or `useField().error()`.
+ *
+ * Hidden (returns null) when `message` is undefined or empty.
+ */
+declare const FieldErrorMessage: Component<FieldErrorMessageProps>;
+export default FieldErrorMessage;
+export { FieldErrorMessage };

package/dist/components/form/FieldErrorMessage.js

@@ -0,0 +1,23 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>");
+const FieldErrorMessage = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return props.message;
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("text-xs text-error mt-0.5", props.class, props.className)
+                }), {
+                "data-slot": "field-error-message",
+                role: "alert",
+                "aria-live": "polite"
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.message);
+            return _el$;
+        }
+    });
+const form_FieldErrorMessage = FieldErrorMessage;
+export { FieldErrorMessage, form_FieldErrorMessage as default };

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

@@ -0,0 +1,3 @@
+export declare const CLASSES: {
+    readonly base: "form";
+};

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

@@ -0,0 +1,4 @@
+const CLASSES = {
+    base: "form"
+};
+export { CLASSES };

package/dist/components/form/Form.css

@@ -0,0 +1,5 @@
+@layer components {
+  .form {
+    display: block;
+  }
+}

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

@@ -1,17 +1,40 @@
-import ValidatedForm, { useFormValidation } from "./ValidatedForm";
-export type { FormProps } from "./FormBase";
-export type { ValidatedFormProps } from "./ValidatedForm";
-export type { FormFieldProps } from "./FormField";
-export type { PasswordFieldProps } from "./PasswordField";
-export type { NumberFieldProps } from "./NumberField";
-export type { FormDropdownProps, DropdownOption } from "./FormDropdown";
-export { useFormValidation };
-declare const _default: import("solid-js").ParentComponent<import("./FormBase").FormProps> & {
-    Label: import("solid-js").ParentComponent<import("./Label").LabelProps>;
-    Validated: typeof ValidatedForm;
-    Field: import("solid-js").Component<import("./FormField").FormFieldProps>;
-    Password: import("solid-js").Component<import("./PasswordField").PasswordFieldProps>;
-    Number: import("solid-js").Component<import("./NumberField").NumberFieldProps>;
-    Dropdown: import("solid-js").Component<import("./FormDropdown").FormDropdownProps>;
+import "./Form.css";
+import { type Component, 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: Component<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>;
 };
-export default _default;
+declare const FormWithContext: Component<FormWithContextProps>;
+/**
+ * Styled form element.
+ *
+ * **Without `form` prop** — renders a plain `<form>` with DaisyUI base styles.
+ *
+ * **With `form` prop** — provides the form instance via context so that child
+ * `<FormField>`, `<FormSubmitButton>`, and `useField()` calls resolve
+ * automatically without prop drilling. Also wires `onSubmit` to
+ * `form.handleSubmit()` automatically.
+ *
+ * ```tsx
+ * const form = createForm({ defaultValues, schema, onSubmit });
+ * <Form form={form} class="space-y-4">{...}</Form>
+ * ```
+ */
+declare const Form: (props: FormRootProps | FormWithContextProps) => JSX.Element;
+export default Form;
+export { Form, FormRoot, FormWithContext };
+export type { FormRootProps as FormProps };

package/dist/components/form/Form.js

@@ -1,17 +1,78 @@
-import * as __WEBPACK_EXTERNAL_MODULE__FormBase_js_90e50c3a__ from "./FormBase.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__ from "./Label.js";
-import * as __WEBPACK_EXTERNAL_MODULE__ValidatedForm_js_56b86c0b__ from "./ValidatedForm.js";
-import * as __WEBPACK_EXTERNAL_MODULE__FormField_js_940fe8a4__ from "./FormField.js";
-import * as __WEBPACK_EXTERNAL_MODULE__PasswordField_js_9859d7de__ from "./PasswordField.js";
-import * as __WEBPACK_EXTERNAL_MODULE__NumberField_js_68db54de__ from "./NumberField.js";
-import * as __WEBPACK_EXTERNAL_MODULE__FormDropdown_js_0063c469__ from "./FormDropdown.js";
-const Form = Object.assign(__WEBPACK_EXTERNAL_MODULE__FormBase_js_90e50c3a__["default"], {
-    Label: __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__["default"],
-    Validated: __WEBPACK_EXTERNAL_MODULE__ValidatedForm_js_56b86c0b__["default"],
-    Field: __WEBPACK_EXTERNAL_MODULE__FormField_js_940fe8a4__["default"],
-    Password: __WEBPACK_EXTERNAL_MODULE__PasswordField_js_9859d7de__["default"],
-    Number: __WEBPACK_EXTERNAL_MODULE__NumberField_js_68db54de__["default"],
-    Dropdown: __WEBPACK_EXTERNAL_MODULE__FormDropdown_js_0063c469__["default"]
-});
-var __webpack_exports__useFormValidation = __WEBPACK_EXTERNAL_MODULE__ValidatedForm_js_56b86c0b__.useFormValidation;
-export { Form as default, __webpack_exports__useFormValidation as useFormValidation };
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Form.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__Form_classes_js_b7c9f8c6__ from "./Form.classes.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_form_FormContext_js_e27dc1c5__ from "../../hooks/form/FormContext.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<form>");
+const FormRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Form_classes_js_b7c9f8c6__.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 FormWithContext = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "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 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__hooks_form_FormContext_js_e27dc1c5__.FormContext.Provider, {
+        get value () {
+            return local.form;
+        },
+        get children () {
+            var _el$2 = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                onSubmit: handleSubmit
+            }, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Form_classes_js_b7c9f8c6__.CLASSES.base, local.class, local.className)
+                }), {
+                "data-slot": "form",
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+            return _el$2;
+        }
+    });
+};
+const Form = (props)=>{
+    if ("form" in props && null != props.form) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FormWithContext, props);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FormRoot, props);
+};
+Form.Root = FormRoot;
+Form.WithContext = FormWithContext;
+const form_Form = Form;
+export { Form, FormRoot, FormWithContext, form_Form as default };

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

@@ -1,14 +1,45 @@
-import { type Component } from "solid-js";
-import type { InputProps } from "../input";
-export interface FormFieldProps extends Omit<InputProps, "ref"> {
-    label: string;
+import { type Component, 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;
-    required?: boolean;
-    labelClass?: string;
-    errorClass?: string;
-    containerClass?: string;
-    description?: string;
-    descriptionClass?: string;
-}
-export declare const FormField: Component<FormFieldProps>;
+    /** 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;
+};
+/**
+ * Compound field primitive: Label + Input + error message.
+ *
+ * Reads the form instance from `<Form form={...}>` context automatically.
+ * Pass `form` explicitly only when rendering inside a Portal.
+ *
+ * ```tsx
+ * <Form form={form} class="space-y-4">
+ *   <FormField name="email" label="Email address" />
+ *   <FormField name="password" label="Password" inputProps={{ type: "password" }} />
+ * </Form>
+ * ```
+ */
+declare const FormField: Component<FormFieldProps>;
 export default FormField;
+export { FormField };

package/dist/components/form/FormField.js

@@ -1,78 +1,88 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__ from "../input/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__ValidatedForm_js_56b86c0b__ from "./ValidatedForm.js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__ from "./Label.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="text-error ml-1">*');
+import * as __WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__ from "../input/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__label_index_js_2049cd83__ from "../label/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_form_FormContext_js_e27dc1c5__ from "../../hooks/form/FormContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_form_getFirstFieldError_js_b4e4d106__ from "../../hooks/form/getFirstFieldError.js";
+import * as __WEBPACK_EXTERNAL_MODULE__FieldErrorMessage_js_821323c5__ from "./FieldErrorMessage.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const FormField = (props)=>{
-    const { errors, touched } = (0, __WEBPACK_EXTERNAL_MODULE__ValidatedForm_js_56b86c0b__.useFormValidation)();
-    const [local, inputProps] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const [local, _rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "name",
         "label",
-        "required",
-        "labelClass",
-        "errorClass",
-        "containerClass",
-        "description",
-        "descriptionClass",
+        "inputProps",
         "class",
-        "className"
+        "className",
+        "form"
     ]);
-    const containerClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("flex flex-col gap-2", local.containerClass));
-    const descriptionClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("text-sm text-base-content/70", local.descriptionClass));
-    const errorClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("text-error text-sm", local.errorClass));
-    const inputClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className));
-    const hasError = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>touched(props.name) && !!errors(props.name));
-    return (()=>{
-        var _el$ = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__Label_js_56960635__["default"], {
-            get title () {
-                return local.label;
-            },
-            get ["class"] () {
-                return local.labelClass;
-            },
-            get children () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.required)() && _tmpl$3();
-            }
-        }), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
-            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.description);
-            return ()=>_c$() && (()=>{
-                    var _el$4 = _tmpl$();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.description);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, descriptionClasses()));
-                    return _el$4;
-                })();
-        })(), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get id () {
-                return props.name;
-            },
-            get ["aria-invalid"] () {
-                return hasError();
-            },
-            get ["aria-required"] () {
-                return local.required;
-            },
-            get ["class"] () {
-                return inputClasses();
-            }
-        }, inputProps)), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
-            get when () {
-                return hasError();
-            },
-            get children () {
-                var _el$2 = _tmpl$();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>errors(props.name));
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, errorClasses()));
-                return _el$2;
-            }
-        }), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, containerClasses()));
-        return _el$;
-    })();
+    const resolveForm = ()=>{
+        if (null != local.form) return local.form;
+        return (0, __WEBPACK_EXTERNAL_MODULE__hooks_form_FormContext_js_e27dc1c5__.useFormContext)();
+    };
+    const form = resolveForm();
+    const tsForm = form._tsForm;
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(tsForm.Field, {
+        get name () {
+            return local.name;
+        },
+        children: (field)=>{
+            const errorMessage = ()=>field().state.meta.isTouched ? (0, __WEBPACK_EXTERNAL_MODULE__hooks_form_getFirstFieldError_js_b4e4d106__.getFirstFieldError)(field().state.meta.errors ?? []) : void 0;
+            return (()=>{
+                var _el$ = _tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("flex flex-col gap-1", local.class, local.className)
+                    }), {
+                    "data-slot": "form-field"
+                }), false, true);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return local.label;
+                    },
+                    get children () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__label_index_js_2049cd83__["default"], {
+                            get ["for"] () {
+                                return local.name;
+                            },
+                            get ["data-invalid"] () {
+                                return Boolean(errorMessage()) ? "true" : void 0;
+                            },
+                            get children () {
+                                return local.label;
+                            }
+                        });
+                    }
+                }), null);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__["default"].Field, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.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);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__FieldErrorMessage_js_821323c5__.FieldErrorMessage, {
+                    get message () {
+                        return errorMessage();
+                    }
+                }), null);
+                return _el$;
+            })();
+        }
+    });
 };
 const form_FormField = FormField;
 export { FormField, form_FormField as default };

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

@@ -0,0 +1,27 @@
+import { type ParentComponent } 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;
+};
+/**
+ * Submit button that subscribes to form state and disables/shows pending
+ * automatically.
+ *
+ * Must be rendered inside a `<Form form={...}>` component (or receive an
+ * explicit `form` prop).
+ *
+ * ```tsx
+ * <Form form={form}>
+ *   ...
+ *   <FormSubmitButton>Log in</FormSubmitButton>
+ * </Form>
+ * ```
+ */
+declare const FormSubmitButton: ParentComponent<FormSubmitButtonProps>;
+export default FormSubmitButton;
+export { FormSubmitButton };

package/dist/components/form/FormSubmitButton.js

@@ -0,0 +1,36 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_form_FormContext_js_e27dc1c5__ from "../../hooks/form/FormContext.js";
+const FormSubmitButton_FormSubmitButton = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "form",
+        "children"
+    ]);
+    const resolveForm = ()=>{
+        if (null != local.form) return local.form;
+        return (0, __WEBPACK_EXTERNAL_MODULE__hooks_form_FormContext_js_e27dc1c5__.useFormContext)();
+    };
+    const form = resolveForm();
+    const tsForm = form._tsForm;
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(tsForm.Subscribe, {
+        selector: (s)=>({
+                canSubmit: s.canSubmit,
+                isSubmitting: s.isSubmitting
+            }),
+        children: (state)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                type: "submit",
+                get isDisabled () {
+                    return !state().canSubmit;
+                },
+                get isPending () {
+                    return state().isSubmitting;
+                },
+                get children () {
+                    return local.children;
+                }
+            }))
+    });
+};
+const FormSubmitButton = FormSubmitButton_FormSubmitButton;
+export { FormSubmitButton_FormSubmitButton as FormSubmitButton, FormSubmitButton as default };

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

@@ -1,4 +1,4 @@
-export { default } from "./Form";
-export { type FormProps, type ValidatedFormProps, type FormFieldProps, type PasswordFieldProps, type NumberFieldProps, useFormValidation, } from "./Form";
-export type { LabelProps } from "./Label";
-export { default as FormDropdown, type FormDropdownProps, type DropdownOption, } from "./FormDropdown";
+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";

package/dist/components/form/index.js

@@ -1,6 +1,12 @@
 import * as __WEBPACK_EXTERNAL_MODULE__Form_js_cf7aa139__ from "./Form.js";
-import * as __WEBPACK_EXTERNAL_MODULE__FormDropdown_js_0063c469__ from "./FormDropdown.js";
-var __webpack_exports__FormDropdown = __WEBPACK_EXTERNAL_MODULE__FormDropdown_js_0063c469__["default"];
+import * as __WEBPACK_EXTERNAL_MODULE__FormField_js_940fe8a4__ from "./FormField.js";
+import * as __WEBPACK_EXTERNAL_MODULE__FormSubmitButton_js_5c732699__ from "./FormSubmitButton.js";
+import * as __WEBPACK_EXTERNAL_MODULE__FieldErrorMessage_js_821323c5__ from "./FieldErrorMessage.js";
+var __webpack_exports__FieldErrorMessage = __WEBPACK_EXTERNAL_MODULE__FieldErrorMessage_js_821323c5__.FieldErrorMessage;
+var __webpack_exports__Form = __WEBPACK_EXTERNAL_MODULE__Form_js_cf7aa139__.Form;
+var __webpack_exports__FormField = __WEBPACK_EXTERNAL_MODULE__FormField_js_940fe8a4__.FormField;
+var __webpack_exports__FormRoot = __WEBPACK_EXTERNAL_MODULE__Form_js_cf7aa139__.FormRoot;
+var __webpack_exports__FormSubmitButton = __WEBPACK_EXTERNAL_MODULE__FormSubmitButton_js_5c732699__.FormSubmitButton;
+var __webpack_exports__FormWithContext = __WEBPACK_EXTERNAL_MODULE__Form_js_cf7aa139__.FormWithContext;
 var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Form_js_cf7aa139__["default"];
-var __webpack_exports__useFormValidation = __WEBPACK_EXTERNAL_MODULE__Form_js_cf7aa139__.useFormValidation;
-export { __webpack_exports__FormDropdown as FormDropdown, __webpack_exports__default as default, __webpack_exports__useFormValidation as useFormValidation };
+export { __webpack_exports__FieldErrorMessage as FieldErrorMessage, __webpack_exports__Form as Form, __webpack_exports__FormField as FormField, __webpack_exports__FormRoot as FormRoot, __webpack_exports__FormSubmitButton as FormSubmitButton, __webpack_exports__FormWithContext as FormWithContext, __webpack_exports__default as default };