@floegence/floe-webapp-core 0.86.76 → 0.87.0

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

@@ -1,7 +1,15 @@
 import { type JSX, type Accessor } from 'solid-js';
-export interface FormProps extends Omit<JSX.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+import { useFormControl } from './formFieldContext';
+export interface FormProps extends Omit<JSX.FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'onReset'> {
     /** Called when form is submitted */
-    onSubmit?: (e: SubmitEvent) => void | Promise<void>;
+    onSubmit?: (e: SubmitEvent, context: {
+        form: HTMLFormElement;
+        data: FormData;
+    }) => void | Promise<void>;
+    /** Host-owned validation. Return field messages; undefined means valid. */
+    validate?: (data: FormData) => Record<string, string> | undefined | Promise<Record<string, string> | undefined>;
+    onReset?: (event: Event) => void;
+    onSubmitError?: (error: unknown) => void;
     /** Additional class names */
     class?: string;
     children: JSX.Element;
@@ -12,6 +20,13 @@ export interface FormProps extends Omit<JSX.FormHTMLAttributes<HTMLFormElement>,
  */
 export declare function Form(props: FormProps): JSX.Element;
 export interface FormFieldProps {
+    /** Put explicit control identities here so the label shares the same ID. */
+    id?: string;
+    error?: string;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
     /** Field name for identification */
     name?: string;
     /** Additional class names */
@@ -36,11 +51,11 @@ export declare function FormLabel(props: FormLabelProps): JSX.Element;
 export interface FormControlProps {
     /** Additional class names */
     class?: string;
-    children: JSX.Element;
+    children: JSX.Element | ((control: ReturnType<typeof useFormControl>) => JSX.Element);
 }
 /**
- * Wrapper for form input elements. Passes field context props to children.
- * Children should accept id, aria-describedby, and aria-invalid props.
+ * Layout wrapper. Floe inputs consume the context directly. Custom controls
+ * can use the render function to spread the same reactive field properties.
  */
 export declare function FormControl(props: FormControlProps): JSX.Element;
 export interface FormDescriptionProps {
@@ -55,6 +70,10 @@ export declare function FormDescription(props: FormDescriptionProps): JSX.Elemen
 export interface FormMessageProps {
     /** Error message to display */
     error?: string;
+    /** Issues from validators implementing Standard Schema. */
+    errors?: readonly {
+        message: string;
+    }[];
     /** Additional class names */
     class?: string;
     children?: JSX.Element;

package/dist/components/ui/Form.js

@@ -1,230 +1,281 @@
-import { createComponent as f, spread as h, mergeProps as v, insert as c, effect as g, className as p, setAttribute as $, template as a } from "solid-js/web";
-import { splitProps as d, createSignal as _, Show as m, createUniqueId as S, createContext as F, useContext as y } from "solid-js";
-import { cn as u } from "../../utils/cn.js";
-var k = /* @__PURE__ */ a("<form>"), x = /* @__PURE__ */ a("<div>"), E = /* @__PURE__ */ a('<span class="text-error ml-0.5"aria-hidden=true>*'), I = /* @__PURE__ */ a("<label>"), j = /* @__PURE__ */ a("<div data-field-control>"), q = /* @__PURE__ */ a("<p>"), P = /* @__PURE__ */ a("<p role=alert>"), D = /* @__PURE__ */ a('<h3 class="text-sm font-medium text-foreground">'), A = /* @__PURE__ */ a('<p class="text-[length:var(--floe-type-caption)] text-[var(--floe-ink-soft)]">'), L = /* @__PURE__ */ a("<div class=space-y-0.5>"), V = /* @__PURE__ */ a("<div><div class=space-y-3>"), M = /* @__PURE__ */ a('<div><div class="flex-1 h-px bg-border"></div><span class="text-[length:var(--floe-type-caption)] text-[var(--floe-ink-quiet)] uppercase tracking-[0.06em]"></span><div class="flex-1 h-px bg-border">');
-const C = F();
-function N() {
-  return y(C);
+import { createComponent as f, spread as _, mergeProps as y, insert as a, memo as L, effect as b, className as F, setAttribute as C, template as d } from "solid-js/web";
+import { splitProps as $, createSignal as S, onCleanup as I, createUniqueId as j, Show as x, For as O, createContext as A, useContext as R } from "solid-js";
+import { cn as g } from "../../utils/cn.js";
+import { useFormField as q, useFormControl as B, FormFieldContext as T } from "./formFieldContext.js";
+var V = /* @__PURE__ */ d("<form>"), H = /* @__PURE__ */ d('<p class="text-caption text-muted-foreground">'), E = /* @__PURE__ */ d("<div>"), N = /* @__PURE__ */ d('<span class="text-error ml-0.5"aria-hidden=true>*'), U = /* @__PURE__ */ d("<label>"), z = /* @__PURE__ */ d("<div data-field-control>"), G = /* @__PURE__ */ d("<p>"), J = /* @__PURE__ */ d("<ul>"), K = /* @__PURE__ */ d("<div role=alert>"), Q = /* @__PURE__ */ d("<li>"), W = /* @__PURE__ */ d('<h3 class="text-sm font-medium text-foreground">'), X = /* @__PURE__ */ d('<p class="text-[length:var(--floe-type-caption)] text-[var(--floe-ink-soft)]">'), Y = /* @__PURE__ */ d("<div class=space-y-0.5>"), Z = /* @__PURE__ */ d("<div><div class=space-y-3>"), ee = /* @__PURE__ */ d('<div><div class="flex-1 h-px bg-border"></div><span class="text-[length:var(--floe-type-caption)] text-[var(--floe-ink-quiet)] uppercase tracking-[0.06em]"></span><div class="flex-1 h-px bg-border">');
+const M = A();
+function P() {
+  return R(M);
 }
-function B(l) {
-  const [e, n] = d(l, ["onSubmit", "class", "children"]), [r, t] = _(!1), s = async (o) => {
-    if (o.preventDefault(), !r() && e.onSubmit) {
-      t(!0);
-      try {
-        await e.onSubmit(o);
-      } finally {
-        t(!1);
+function se(l) {
+  const [e, r] = $(l, ["onSubmit", "onReset", "validate", "onSubmitError", "class", "children"]), [s, t] = S(!1), [n, o] = S({});
+  let c = 0;
+  I(() => {
+    c++;
+  });
+  const v = async (u) => {
+    if (u.preventDefault(), s()) return;
+    const i = u.currentTarget, m = new FormData(i, u.submitter), h = ++c;
+    t(!0);
+    try {
+      const p = e.validate ? await e.validate(m) : void 0;
+      if (h !== c) return;
+      if (o(p ?? {}), p && Object.values(p).some(Boolean)) {
+        const k = Array.from(i.elements).find((D) => "name" in D && p[String(D.name)]);
+        k instanceof HTMLElement && (k.closest("[data-field]")?.querySelector('[role="combobox"]') ?? k).focus();
+        return;
       }
+      await e.onSubmit?.(u, {
+        form: i,
+        data: m
+      });
+    } catch (p) {
+      if (h !== c) return;
+      if (e.onSubmitError) e.onSubmitError(p);
+      else throw p;
+    } finally {
+      h === c && t(!1);
     }
-  }, i = {
-    isSubmitting: r,
-    setSubmitting: t
+  }, w = {
+    isSubmitting: s,
+    setSubmitting: t,
+    errors: n
   };
-  return f(C.Provider, {
-    value: i,
+  return f(M.Provider, {
+    value: w,
     get children() {
-      var o = k();
-      return o.addEventListener("submit", s), h(o, v({
+      var u = V();
+      return u.addEventListener("reset", (i) => {
+        e.onReset?.(i), !i.defaultPrevented && (c++, o({}), t(!1));
+      }), u.addEventListener("submit", v), _(u, y({
+        get "aria-busy"() {
+          return s() || void 0;
+        },
         get class() {
-          return u("space-y-4", e.class);
+          return g("space-y-4", e.class);
         }
-      }, n), !1, !0), c(o, () => e.children), o;
+      }, r), !1, !0), a(u, () => e.children), u;
     }
   });
 }
-const w = F();
-function b() {
-  const l = y(w);
-  if (!l)
-    throw new Error("useFormField must be used within a FormField");
-  return l;
-}
-function G(l) {
-  const [e, n] = d(l, ["name", "class", "children"]), r = S(), [t, s] = _(), i = {
-    id: `field-${r}`,
-    errorId: `field-${r}-error`,
-    helperId: `field-${r}-helper`,
-    hasError: () => !!t(),
-    setError: s
+function ie(l) {
+  const e = P(), [r, s] = $(l, ["id", "name", "error", "description", "required", "disabled", "readOnly", "class", "children"]), t = j(), n = () => r.id ?? `field-${t}`, [o, c] = S([]), [v, w] = S([]), u = {
+    id: n,
+    name: () => r.name,
+    error: () => r.error || (r.name ? e?.errors()[r.name] : void 0) || v().map((i) => i.error()).find(Boolean),
+    required: () => r.required,
+    disabled: () => r.disabled,
+    readOnly: () => r.readOnly,
+    descriptionIds: () => [...r.description ? [`${n()}-helper`] : [], ...o()],
+    messageIds: () => [...r.error || r.name && e?.errors()[r.name] ? [`${n()}-error`] : [], ...v().filter((i) => i.error()).map((i) => i.id)],
+    registerDescription: (i) => (c((m) => [...m, i]), () => c((m) => m.filter((h) => h !== i))),
+    registerMessage: (i, m) => (w((h) => [...h, {
+      id: i,
+      error: m
+    }]), () => w((h) => h.filter((p) => p.id !== i)))
   };
-  return f(w.Provider, {
-    value: i,
+  return f(T.Provider, {
+    value: u,
     get children() {
-      var o = x();
-      return h(o, v({
+      var i = E();
+      return _(i, y({
         get class() {
-          return u("space-y-1.5", e.class);
+          return g("space-y-1.5", r.class);
         },
         get "data-field"() {
-          return e.name;
+          return r.name;
         }
-      }, n), !1, !0), c(o, () => e.children), o;
+      }, s), !1, !0), a(i, () => r.children, null), a(i, f(x, {
+        get when() {
+          return r.description;
+        },
+        get children() {
+          var m = H();
+          return a(m, () => r.description), b(() => C(m, "id", `${n()}-helper`)), m;
+        }
+      }), null), i;
     }
   });
 }
-function H(l) {
-  const [e, n] = d(l, ["required", "class", "children"]), r = b();
+function oe(l) {
+  const [e, r] = $(l, ["required", "class", "children"]), s = q();
   return (() => {
-    var t = I();
-    return h(t, v({
+    var t = U();
+    return _(t, y({
       get for() {
-        return r.id;
+        return s?.id();
       },
       get class() {
-        return u("block text-xs font-medium text-foreground", r.hasError() && "text-error", e.class);
+        return g("block text-xs font-medium text-foreground", s?.error() && "text-error", e.class);
       }
-    }, n), !1, !0), c(t, () => e.children, null), c(t, f(m, {
+    }, r), !1, !0), a(t, () => e.children, null), a(t, f(x, {
       get when() {
-        return e.required;
+        return e.required ?? s?.required();
       },
       get children() {
-        return E();
+        return N();
       }
     }), null), t;
   })();
 }
-function J(l) {
-  const [e] = d(l, ["class", "children"]), n = b();
+function ae(l) {
+  const [e] = $(l, ["class", "children"]), r = q(), s = B();
   return (() => {
-    var r = j();
-    return c(r, () => e.children), g((t) => {
-      var s = u("relative", e.class), i = n.id;
-      return s !== t.e && p(r, t.e = s), i !== t.t && $(r, "data-field-id", t.t = i), t;
+    var t = z();
+    return a(t, (() => {
+      var n = L(() => typeof e.children == "function");
+      return () => n() ? e.children(s) : e.children;
+    })()), b((n) => {
+      var o = g("relative", e.class), c = r?.id();
+      return o !== n.e && F(t, n.e = o), c !== n.t && C(t, "data-field-id", n.t = c), n;
     }, {
       e: void 0,
       t: void 0
-    }), r;
+    }), t;
   })();
 }
-function K(l) {
-  const [e] = d(l, ["class", "children"]), n = b();
-  return (() => {
-    var r = q();
-    return c(r, () => e.children), g((t) => {
-      var s = n.helperId, i = u("text-[length:var(--floe-type-caption)] text-[var(--floe-ink-soft)]", e.class);
-      return s !== t.e && $(r, "id", t.e = s), i !== t.t && p(r, t.t = i), t;
-    }, {
-      e: void 0,
-      t: void 0
-    }), r;
+function ce(l) {
+  const [e] = $(l, ["class", "children"]), r = q(), s = j(), t = `${r?.id() ?? s}-description-${s}`;
+  return r && I(r.registerDescription(t)), (() => {
+    var n = G();
+    return C(n, "id", t), a(n, () => e.children), b(() => F(n, g("text-[length:var(--floe-type-caption)] text-[var(--floe-ink-soft)]", e.class))), n;
   })();
 }
-function O(l) {
-  const [e] = d(l, ["error", "class", "children"]), n = b(), r = () => !!e.error || !!e.children;
-  return f(m, {
+function de(l) {
+  const e = q(), r = j(), s = `message-${r}`, t = () => l.error || l.errors?.map((n) => n.message).join(" ") || (l.children ? String(l.children) : void 0);
+  return e && I(e.registerMessage(s, () => t())), f(x, {
     get when() {
-      return r();
+      return t() || e?.error();
     },
     get children() {
-      var t = P();
-      return c(t, () => e.error ?? e.children), g((s) => {
-        var i = n.errorId, o = u("text-caption text-error", e.class);
-        return i !== s.e && $(t, "id", s.e = i), o !== s.t && p(t, s.t = o), s;
+      var n = K();
+      return a(n, f(x, {
+        get when() {
+          return l.errors?.length;
+        },
+        get fallback() {
+          return l.error ?? l.children ?? e?.error();
+        },
+        get children() {
+          var o = J();
+          return a(o, f(O, {
+            get each() {
+              return l.errors;
+            },
+            children: (c) => (() => {
+              var v = Q();
+              return a(v, () => c.message), v;
+            })()
+          })), o;
+        }
+      })), b((o) => {
+        var c = t() ? s : `${e?.id() ?? r}-error`, v = g("text-caption text-error", l.class);
+        return c !== o.e && C(n, "id", o.e = c), v !== o.t && F(n, o.t = v), o;
       }, {
         e: void 0,
         t: void 0
-      }), t;
+      }), n;
     }
   });
 }
-function Q(l) {
-  const [e, n] = d(l, ["align", "class", "children"]), r = {
+function ue(l) {
+  const [e, r] = $(l, ["align", "class", "children"]), s = {
     start: "justify-start",
     center: "justify-center",
     end: "justify-end",
     between: "justify-between"
   };
   return (() => {
-    var t = x();
-    return h(t, v({
+    var t = E();
+    return _(t, y({
       get class() {
-        return u("flex items-center gap-2 pt-2", r[e.align ?? "end"], e.class);
+        return g("flex items-center gap-2 pt-2", s[e.align ?? "end"], e.class);
       }
-    }, n), !1, !0), c(t, () => e.children), t;
+    }, r), !1, !0), a(t, () => e.children), t;
   })();
 }
-function T(l) {
-  const [e, n] = d(l, ["title", "description", "class", "children"]);
+function me(l) {
+  const [e, r] = $(l, ["title", "description", "class", "children"]);
   return (() => {
-    var r = V(), t = r.firstChild;
-    return h(r, v({
+    var s = Z(), t = s.firstChild;
+    return _(s, y({
       get class() {
-        return u("space-y-3", e.class);
+        return g("space-y-3", e.class);
       }
-    }, n), !1, !0), c(r, f(m, {
+    }, r), !1, !0), a(s, f(x, {
       get when() {
         return e.title || e.description;
       },
       get children() {
-        var s = L();
-        return c(s, f(m, {
+        var n = Y();
+        return a(n, f(x, {
           get when() {
             return e.title;
           },
           get children() {
-            var i = D();
-            return c(i, () => e.title), i;
+            var o = W();
+            return a(o, () => e.title), o;
           }
-        }), null), c(s, f(m, {
+        }), null), a(n, f(x, {
           get when() {
             return e.description;
           },
           get children() {
-            var i = A();
-            return c(i, () => e.description), i;
+            var o = X();
+            return a(o, () => e.description), o;
           }
-        }), null), s;
+        }), null), n;
       }
-    }), t), c(t, () => e.children), r;
+    }), t), a(t, () => e.children), s;
   })();
 }
-function W(l) {
-  const [e] = d(l, ["label", "class"]);
-  return f(m, {
+function fe(l) {
+  const [e] = $(l, ["label", "class"]);
+  return f(x, {
     get when() {
       return e.label;
     },
     get fallback() {
       return (() => {
-        var n = x();
-        return g(() => p(n, u("h-px bg-border my-4", e.class))), n;
+        var r = E();
+        return b(() => F(r, g("h-px bg-border my-4", e.class))), r;
       })();
     },
     get children() {
-      var n = M(), r = n.firstChild, t = r.nextSibling;
-      return c(t, () => e.label), g(() => p(n, u("flex items-center gap-3 my-4", e.class))), n;
+      var r = ee(), s = r.firstChild, t = s.nextSibling;
+      return a(t, () => e.label), b(() => F(r, g("flex items-center gap-3 my-4", e.class))), r;
     }
   });
 }
-function X(l) {
-  const [e, n] = d(l, ["cols", "class", "children"]), r = {
+function ge(l) {
+  const [e, r] = $(l, ["cols", "class", "children"]), s = {
     1: "grid-cols-1",
     2: "sm:grid-cols-2",
     3: "sm:grid-cols-3",
     4: "sm:grid-cols-4"
   };
   return (() => {
-    var t = x();
-    return h(t, v({
+    var t = E();
+    return _(t, y({
       get class() {
-        return u("grid gap-3 grid-cols-1", r[e.cols ?? 2], e.class);
+        return g("grid gap-3 grid-cols-1", s[e.cols ?? 2], e.class);
       }
-    }, n), !1, !0), c(t, () => e.children), t;
+    }, r), !1, !0), a(t, () => e.children), t;
   })();
 }
-function Y() {
-  return N()?.isSubmitting;
+function ve() {
+  return P()?.isSubmitting;
 }
 export {
-  B as Form,
-  Q as FormActions,
-  J as FormControl,
-  K as FormDescription,
-  W as FormDivider,
-  G as FormField,
-  H as FormLabel,
-  O as FormMessage,
-  X as FormRow,
-  T as FormSection,
-  Y as useFormSubmitting
+  se as Form,
+  ue as FormActions,
+  ae as FormControl,
+  ce as FormDescription,
+  fe as FormDivider,
+  ie as FormField,
+  oe as FormLabel,
+  de as FormMessage,
+  ge as FormRow,
+  me as FormSection,
+  ve as useFormSubmitting
 };

package/dist/components/ui/Input.d.ts

@@ -27,6 +27,12 @@ export declare function Textarea(props: TextareaProps): JSX.Element;
  * NumberInput - Number input with increment/decrement buttons
  */
 export interface NumberInputProps {
+    id?: string;
+    name?: string;
+    required?: boolean;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    readOnly?: boolean;
     /** Current value */
     value: number;
     /** Called when value changes */