@pathscale/ui 1.1.55 → 1.1.56

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--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;
-  }
+      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;
+    }
 }

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

@@ -1,40 +1,17 @@
-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>;
+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>;
 };
-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 };
+export default _default;

package/dist/components/form/Form.js

@@ -1,78 +1,17 @@
-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 };
+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 };

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

@@ -0,0 +1,8 @@
+import { type JSX, type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type FormProps = Omit<JSX.HTMLAttributes<HTMLFormElement>, "ref"> & IComponentBaseProps & {
+    autoFocus?: boolean;
+    cycleOnEnter?: boolean;
+};
+declare const FormBase: ParentComponent<FormProps>;
+export default FormBase;

package/dist/components/form/FormBase.js

@@ -0,0 +1,74 @@
+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)("<form role=form>");
+const FormBase = (props)=>{
+    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        autoFocus: true,
+        cycleOnEnter: true
+    }, props);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
+        "children",
+        "dataTheme",
+        "class",
+        "className",
+        "autoFocus",
+        "cycleOnEnter"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("form-control", local.class, local.className);
+    let formRef;
+    const getFocusableElements = ()=>{
+        if (!formRef) return [];
+        return Array.from(formRef.querySelectorAll('input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled])'));
+    };
+    const handleKeyDown = (e)=>{
+        if (!local.cycleOnEnter || "Enter" !== e.key) return;
+        const focusableElements = getFocusableElements();
+        const activeElement = document.activeElement;
+        if (!formRef?.contains(activeElement)) return;
+        const currentIndex = focusableElements.indexOf(activeElement);
+        if (-1 === currentIndex) return;
+        e.preventDefault();
+        if (currentIndex === focusableElements.length - 1) formRef?.dispatchEvent(new Event("submit", {
+            bubbles: true,
+            cancelable: true
+        }));
+        else {
+            const nextElement = focusableElements[currentIndex + 1];
+            nextElement?.focus();
+        }
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (local.autoFocus && formRef) {
+            const focusableElements = getFocusableElements();
+            if (focusableElements.length > 0) {
+                const firstElement = focusableElements[0];
+                firstElement.focus();
+            }
+        }
+        if (local.cycleOnEnter && formRef) {
+            formRef.addEventListener("keydown", handleKeyDown);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+                formRef?.removeEventListener("keydown", handleKeyDown);
+            });
+        }
+    });
+    return (()=>{
+        var _el$ = _tmpl$();
+        var _ref$ = formRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : formRef = _el$;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
+        return _el$;
+    })();
+};
+const form_FormBase = FormBase;
+export { form_FormBase as default };

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

@@ -0,0 +1,25 @@
+import { type Component, type JSX } from "solid-js";
+export interface DropdownOption {
+    value: string;
+    label: string;
+}
+export interface FormDropdownProps {
+    label: string;
+    name: string;
+    options: DropdownOption[];
+    value?: string;
+    placeholder?: string;
+    required?: boolean;
+    labelClass?: string;
+    errorClass?: string;
+    containerClass?: string;
+    description?: string;
+    descriptionClass?: string;
+    class?: string;
+    className?: string;
+    icon?: JSX.Element;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+}
+export declare const FormDropdown: Component<FormDropdownProps>;
+export default FormDropdown;

package/dist/components/form/FormDropdown.js

@@ -0,0 +1,139 @@
+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";
+import * as __WEBPACK_EXTERNAL_MODULE__ValidatedForm_js_56b86c0b__ from "./ValidatedForm.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Label_js_56960635__ from "./Label.js";
+import * as __WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__ from "../dropdown/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="text-error ml-1">*'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=ml-2>");
+const FormDropdown_FormDropdown = (props)=>{
+    const { errors, touched, setData } = (0, __WEBPACK_EXTERNAL_MODULE__ValidatedForm_js_56b86c0b__.useFormValidation)();
+    const [local, _] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "label",
+        "name",
+        "options",
+        "value",
+        "placeholder",
+        "required",
+        "labelClass",
+        "errorClass",
+        "containerClass",
+        "description",
+        "descriptionClass",
+        "class",
+        "className",
+        "icon",
+        "onChange",
+        "disabled"
+    ]);
+    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 dropdownClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("border border-base-300 rounded px-4 py-2 w-full flex justify-between items-center", local.disabled ? "opacity-70 cursor-not-allowed" : "", local.class, local.className));
+    const hasError = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>touched(local.name) && !!errors(local.name));
+    const selectedOption = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.options.find((opt)=>opt.value === local.value));
+    const handleSelect = (value)=>{
+        setData(local.name, value);
+        if (local.onChange) local.onChange(value);
+    };
+    return (()=>{
+        var _el$ = _tmpl$3();
+        (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$4();
+            }
+        }), 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$5 = _tmpl$2();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.description);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, descriptionClasses()));
+                    return _el$5;
+                })();
+        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Root, {
+            class: "w-full",
+            get children () {
+                return [
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Trigger, {
+                        get ["class"] () {
+                            return dropdownClasses();
+                        },
+                        get ["aria-invalid"] () {
+                            return hasError();
+                        },
+                        get ["aria-required"] () {
+                            return local.required;
+                        },
+                        get id () {
+                            return local.name;
+                        },
+                        get disabled () {
+                            return local.disabled;
+                        },
+                        get children () {
+                            return [
+                                (()=>{
+                                    var _el$2 = _tmpl$();
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>selectedOption()?.label || local.placeholder || "Select an option");
+                                    return _el$2;
+                                })(),
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>local.icon || (()=>{
+                                        var _el$6 = _tmpl$5();
+                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
+                                            name: "icon-[mdi-light--chevron-down]",
+                                            width: 20,
+                                            height: 20
+                                        }));
+                                        return _el$6;
+                                    })())
+                            ];
+                        }
+                    }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Menu, {
+                        class: "w-full",
+                        align: "start",
+                        get children () {
+                            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                                get each () {
+                                    return local.options;
+                                },
+                                children: (option)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Item, {
+                                        onClick: ()=>handleSelect(option.value),
+                                        get ["class"] () {
+                                            return local.value === option.value ? "bg-base-200" : "";
+                                        },
+                                        get children () {
+                                            return option.label;
+                                        }
+                                    })
+                            });
+                        }
+                    })
+                ];
+            }
+        }), 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$3 = _tmpl$2();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>errors(local.name));
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, errorClasses()));
+                return _el$3;
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, containerClasses()));
+        return _el$;
+    })();
+};
+const FormDropdown = FormDropdown_FormDropdown;
+export { FormDropdown_FormDropdown as FormDropdown, FormDropdown as default };

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

@@ -1,45 +1,14 @@
-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 })`. */
+import { type Component } from "solid-js";
+import type { InputProps } from "../input";
+export interface FormFieldProps extends Omit<InputProps, "ref"> {
+    label: string;
     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;
-};
-/**
- * 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>;
+    required?: boolean;
+    labelClass?: string;
+    errorClass?: string;
+    containerClass?: string;
+    description?: string;
+    descriptionClass?: string;
+}
+export declare const FormField: Component<FormFieldProps>;
 export default FormField;
-export { FormField };