@skiddph/prui 0.3.0 → 0.4.0

package/dist/core.js

@@ -1,64 +1,67 @@
 import { cn as e } from "./core/cn.js";
-import { Button as a, buttonPropsMeta as p } from "./core/button.js";
-import { Input as l, Textarea as i, inputPropsMeta as d, textareaPropsMeta as n } from "./core/input.js";
-import { Label as c, Separator as m, labelPropsMeta as P, separatorPropsMeta as f } from "./core/label.js";
-import { Select as g, SelectContent as C, SelectItem as b, SelectTrigger as D, SelectValue as T, selectPropsMeta as S } from "./core/select.js";
-import { Switch as w, switchPropsMeta as A } from "./core/switch.js";
-import { Tabs as v, TabsContent as B, TabsList as F, TabsTrigger as H, tabsPropsMeta as I } from "./core/tabs.js";
-import { Avatar as V, Badge as j, Card as k, CardContent as q, CardDescription as y, CardFooter as z, CardHeader as E, CardTitle as G, avatarPropsMeta as J, badgePropsMeta as K, cardPropsMeta as N } from "./core/card.js";
-import { Dialog as Q, DialogContent as R, DialogDescription as U, DialogFooter as W, DialogHeader as X, DialogTitle as Y, dialogPropsMeta as Z } from "./core/dialog.js";
-import { Dropdown as $, dropdownPropsMeta as oo } from "./core/dropdown.js";
-import { ScrollArea as eo, scrollAreaPropsMeta as to } from "./core/scroll-area.js";
-import { Modal as po, confirmModal as so, confirmModalPropsMeta as lo, modalPropsMeta as io } from "./core/modal.js";
+import { resolveSurface as a, withSurface as p } from "./core/surface.js";
+import { Button as l, buttonPropsMeta as i } from "./core/button.js";
+import { Input as n, Textarea as M, inputPropsMeta as c, textareaPropsMeta as f } from "./core/input.js";
+import { Label as P, Separator as x, labelPropsMeta as g, separatorPropsMeta as C } from "./core/label.js";
+import { Select as b, SelectContent as D, SelectItem as T, SelectTrigger as u, SelectValue as w, selectPropsMeta as h } from "./core/select.js";
+import { Switch as A, switchPropsMeta as B } from "./core/switch.js";
+import { Tabs as H, TabsContent as I, TabsList as L, TabsTrigger as V, tabsPropsMeta as j } from "./core/tabs.js";
+import { Avatar as q, Badge as y, Card as z, CardContent as E, CardDescription as G, CardFooter as J, CardHeader as K, CardTitle as N, avatarPropsMeta as O, badgePropsMeta as Q, cardPropsMeta as R } from "./core/card.js";
+import { Dialog as W, DialogContent as X, DialogDescription as Y, DialogFooter as Z, DialogHeader as _, DialogTitle as $, dialogPropsMeta as rr } from "./core/dialog.js";
+import { Dropdown as er, dropdownPropsMeta as tr } from "./core/dropdown.js";
+import { ScrollArea as pr, scrollAreaPropsMeta as sr } from "./core/scroll-area.js";
+import { Modal as ir, confirmModal as dr, confirmModalPropsMeta as nr, modalPropsMeta as Mr } from "./core/modal.js";
 export {
-  V as Avatar,
-  j as Badge,
-  a as Button,
-  k as Card,
-  q as CardContent,
-  y as CardDescription,
-  z as CardFooter,
-  E as CardHeader,
-  G as CardTitle,
-  Q as Dialog,
-  R as DialogContent,
-  U as DialogDescription,
-  W as DialogFooter,
-  X as DialogHeader,
-  Y as DialogTitle,
-  $ as Dropdown,
-  l as Input,
-  c as Label,
-  po as Modal,
-  eo as ScrollArea,
-  g as Select,
-  C as SelectContent,
-  b as SelectItem,
-  D as SelectTrigger,
-  T as SelectValue,
-  m as Separator,
-  w as Switch,
-  v as Tabs,
-  B as TabsContent,
-  F as TabsList,
-  H as TabsTrigger,
-  i as Textarea,
-  J as avatarPropsMeta,
-  K as badgePropsMeta,
-  p as buttonPropsMeta,
-  N as cardPropsMeta,
+  q as Avatar,
+  y as Badge,
+  l as Button,
+  z as Card,
+  E as CardContent,
+  G as CardDescription,
+  J as CardFooter,
+  K as CardHeader,
+  N as CardTitle,
+  W as Dialog,
+  X as DialogContent,
+  Y as DialogDescription,
+  Z as DialogFooter,
+  _ as DialogHeader,
+  $ as DialogTitle,
+  er as Dropdown,
+  n as Input,
+  P as Label,
+  ir as Modal,
+  pr as ScrollArea,
+  b as Select,
+  D as SelectContent,
+  T as SelectItem,
+  u as SelectTrigger,
+  w as SelectValue,
+  x as Separator,
+  A as Switch,
+  H as Tabs,
+  I as TabsContent,
+  L as TabsList,
+  V as TabsTrigger,
+  M as Textarea,
+  O as avatarPropsMeta,
+  Q as badgePropsMeta,
+  i as buttonPropsMeta,
+  R as cardPropsMeta,
   e as cn,
-  so as confirmModal,
-  lo as confirmModalPropsMeta,
-  Z as dialogPropsMeta,
-  oo as dropdownPropsMeta,
-  d as inputPropsMeta,
-  P as labelPropsMeta,
-  io as modalPropsMeta,
-  to as scrollAreaPropsMeta,
-  S as selectPropsMeta,
-  f as separatorPropsMeta,
-  A as switchPropsMeta,
-  I as tabsPropsMeta,
-  n as textareaPropsMeta
+  dr as confirmModal,
+  nr as confirmModalPropsMeta,
+  rr as dialogPropsMeta,
+  tr as dropdownPropsMeta,
+  c as inputPropsMeta,
+  g as labelPropsMeta,
+  Mr as modalPropsMeta,
+  a as resolveSurface,
+  sr as scrollAreaPropsMeta,
+  h as selectPropsMeta,
+  C as separatorPropsMeta,
+  B as switchPropsMeta,
+  j as tabsPropsMeta,
+  f as textareaPropsMeta,
+  p as withSurface
 };

package/dist/forms/form.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { PropsMeta } from '../core/props-meta';
+import { FormMessage, FormGroupColumns, SafeParseSchema } from './types';
+import * as React from "react";
+export interface FormProps {
+    /** Registry id referenced by <FormButton form={...}>. */
+    id: string;
+    children?: ReactNode;
+    /** Optional zod-shaped schema. Any object with safeParse works. */
+    schema?: SafeParseSchema;
+    initialValues?: Record<string, unknown>;
+    onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
+    onReset?: () => void;
+    /** Validate as the user types; off means validate on blur and submit. */
+    validateOnChange?: boolean;
+    className?: string;
+}
+export declare function Form({ id, children, schema, initialValues, onSubmit, onReset, validateOnChange, className }: FormProps): React.JSX.Element;
+export interface FormGroupProps {
+    label?: string;
+    description?: string;
+    /** Columns per breakpoint; every entry is 1 to 4. */
+    columns?: number | FormGroupColumns;
+    gap?: "sm" | "md" | "lg";
+    children?: ReactNode;
+    className?: string;
+}
+export declare function FormGroup({ label, description, columns, gap, children, className }: FormGroupProps): React.JSX.Element;
+export interface FormInputProps {
+    name: string;
+    label?: string;
+    type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search" | "date" | "time" | "datetime-local" | "textarea" | "select" | "switch" | "checkbox";
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    pattern?: RegExp;
+    patternMessage?: string;
+    /** Select/switch/checkbox options. */
+    options?: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
+    rows?: number;
+    /** Static helper line under the control. */
+    help?: ReactNode;
+    /** Caller message under the control; validation errors take precedence. */
+    message?: FormMessage;
+    validate?: (value: unknown, values: Record<string, unknown>) => string | null;
+    onChange?: (value: unknown) => void;
+    className?: string;
+}
+export declare function FormInput({ name, label, type, placeholder, required, disabled, readOnly, autoFocus, minLength, maxLength, min, max, step, pattern, patternMessage, options, rows, help, message, validate, onChange, className, }: FormInputProps): React.JSX.Element;
+export interface FormButtonProps {
+    /** The id of the <Form> this button drives. */
+    form: string;
+    action?: "submit" | "reset" | "clear";
+    /** Disable rule: while the referenced form is invalid or untouched. */
+    disableWhen?: "invalid" | "pristine" | "never";
+    variant?: "primary" | "default" | "ghost" | "danger" | "outline" | "soft" | "link";
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    children?: ReactNode;
+    onClick?: () => void;
+    className?: string;
+}
+export declare function FormButton({ form, action, disableWhen, variant, size, disabled, children, onClick, className }: FormButtonProps): React.JSX.Element;
+export declare const formPropsMeta: PropsMeta;
+export declare const formGroupPropsMeta: PropsMeta;
+export declare const formInputPropsMeta: PropsMeta;
+export declare const formButtonPropsMeta: PropsMeta;

package/dist/forms/index.d.ts

@@ -0,0 +1,8 @@
+import { FormApi } from './types';
+/** Higher-order forms: config-driven inputs, responsive groups, zod-optional
+ * validation, and buttons that drive a form from outside its scope. */
+export { Form, FormGroup, FormInput, FormButton, formPropsMeta, formGroupPropsMeta, formInputPropsMeta, formButtonPropsMeta, type FormProps, type FormGroupProps, type FormInputProps, type FormButtonProps, } from './form';
+export { registerForm, getFormApi, formIds, } from './registry';
+/** Resolve a mounted form's API by id: submit, reset, clear, read state. */
+export declare function useFormApi(id: string): FormApi | undefined;
+export type { SafeParseSchema, FormFieldRule, FormSnapshot, FormApi, FormGroupColumns, FormMessage, } from './types';

package/dist/forms/registry.d.ts

@@ -0,0 +1,4 @@
+import { FormApi } from './types';
+export declare function registerForm(api: FormApi): () => void;
+export declare function getFormApi(id: string): FormApi | undefined;
+export declare function formIds(): string[];

package/dist/forms/types.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+/**
+ * A validator shaped like zod's schema. Structurally typed so any version
+ * of zod (or anything with the same safeParse shape) works without this
+ * package depending on it.
+ */
+export interface SafeParseSchema<T = Record<string, unknown>> {
+    safeParse(data: unknown): {
+        success: boolean;
+        data?: T | unknown;
+        error?: {
+            issues: ReadonlyArray<{
+                path: ReadonlyArray<string | number | symbol>;
+                message: string;
+            }>;
+        };
+    };
+}
+export interface FormFieldRule {
+    label: string;
+    required?: boolean;
+    validate?: (value: unknown, values: Record<string, unknown>) => string | null;
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: RegExp;
+    patternMessage?: string;
+}
+export interface FormSnapshot {
+    isValid: boolean;
+    isDirty: boolean;
+    errorCount: number;
+    values: Record<string, unknown>;
+}
+export interface FormApi {
+    readonly id: string;
+    submit(): Promise<boolean>;
+    reset(): void;
+    clear(): void;
+    setField(name: string, value: unknown): void;
+    getValue(name: string): unknown;
+    getState(): FormSnapshot;
+    subscribe(listener: (snapshot: FormSnapshot) => void): () => void;
+}
+export interface FormGroupColumns {
+    base?: 1 | 2 | 3 | 4;
+    sm?: 1 | 2 | 3 | 4;
+    md?: 1 | 2 | 3 | 4;
+    lg?: 1 | 2 | 3 | 4;
+}
+export interface FormMessage {
+    message: ReactNode;
+    type?: "info" | "warning" | "success";
+}

package/dist/forms.js

@@ -0,0 +1,364 @@
+import { jsx as v, jsxs as O } from "react/jsx-runtime";
+import * as m from "react";
+import { Button as L } from "./core/button.js";
+import { Textarea as q, Input as z } from "./core/input.js";
+import { Label as H } from "./core/label.js";
+import { Select as J } from "./core/select.js";
+import { Switch as K } from "./core/switch.js";
+import { cn as k } from "./core/cn.js";
+const M = /* @__PURE__ */ new Map();
+function Q(t) {
+  return M.set(t.id, t), () => {
+    M.get(t.id) === t && M.delete(t.id);
+  };
+}
+function R(t) {
+  return M.get(t);
+}
+function at() {
+  return [...M.keys()];
+}
+const G = m.createContext(null);
+function U() {
+  const t = m.useContext(G);
+  if (!t) throw new Error("Form components must be rendered inside <Form>.");
+  return t;
+}
+function _(t) {
+  return t == null || t === "" || Array.isArray(t) && t.length === 0;
+}
+function D(t, r, o) {
+  var i;
+  return r.required && _(t) ? `${r.label} is required.` : _(t) ? null : r.minLength !== void 0 && String(t).length < r.minLength ? `${r.label} must be at least ${r.minLength} characters.` : r.maxLength !== void 0 && String(t).length > r.maxLength ? `${r.label} must be at most ${r.maxLength} characters.` : r.min !== void 0 && typeof t == "number" && t < r.min ? `${r.label} must be ${r.min} or more.` : r.max !== void 0 && typeof t == "number" && t > r.max ? `${r.label} must be ${r.max} or less.` : r.pattern && !r.pattern.test(String(t)) ? r.patternMessage ?? `${r.label} has an invalid format.` : ((i = r.validate) == null ? void 0 : i.call(r, t, o)) ?? null;
+}
+function ut({ id: t, children: r, schema: o, initialValues: i = {}, onSubmit: p, onReset: g, validateOnChange: a = !0, className: h }) {
+  const [s, d] = m.useState({ ...i }), [w, b] = m.useState({}), [T, y] = m.useState(null), S = m.useRef(/* @__PURE__ */ new Map()), P = m.useRef(/* @__PURE__ */ new Set()), C = m.useRef({ ...i }), I = () => {
+    let e = !0;
+    for (const [l, u] of S.current)
+      if (D(s[l], u, s) !== null) {
+        e = !1;
+        break;
+      }
+    e && o && (o.safeParse(s).success || (e = !1));
+    const n = Object.keys(s).some((l) => s[l] !== C.current[l]) || Object.keys(C.current).length !== Object.keys(s).length;
+    return { isValid: e, isDirty: n, errorCount: Object.keys(w).length, values: { ...s } };
+  }, V = (e) => {
+    var l;
+    const n = {};
+    for (const [u, f] of S.current) {
+      const x = D(e[u], f, e);
+      x && (n[u] = x);
+    }
+    if (o) {
+      const u = o.safeParse(e);
+      if (!u.success)
+        for (const f of ((l = u.error) == null ? void 0 : l.issues) ?? []) {
+          const x = String(f.path[0] ?? "");
+          x && !n[x] ? n[x] = f.message : x || (n.__form__ = f.message);
+        }
+    }
+    return n;
+  }, A = async () => {
+    const e = V(s);
+    if (b(e), Object.keys(e).length > 0)
+      return y(null), !1;
+    y(null);
+    try {
+      return await (p == null ? void 0 : p({ ...s })), !0;
+    } catch (n) {
+      return y(n instanceof Error ? n.message : String(n)), !1;
+    }
+  }, j = () => {
+    d({ ...C.current }), b({}), y(null), g == null || g();
+  }, B = () => {
+    d({}), b({}), y(null);
+  }, F = (e, n) => d((l) => ({ ...l, [e]: n })), E = () => {
+    const e = I();
+    for (const n of P.current) n(e);
+  }, $ = m.useMemo(
+    () => ({
+      id: t,
+      submit: async () => A(),
+      reset: j,
+      clear: B,
+      setField: F,
+      getValue: (e) => s[e],
+      getState: () => I(),
+      subscribe: (e) => (P.current.add(e), () => P.current.delete(e))
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- the api closes over the latest render state
+    [t, s, w, o, p, g]
+  );
+  m.useEffect(() => Q($), [$]), m.useEffect(() => {
+    E();
+  });
+  const N = {
+    id: t,
+    getValue: (e) => s[e],
+    setValue: (e, n) => {
+      if (d((l) => ({ ...l, [e]: n })), a) {
+        const l = S.current.get(e);
+        if (l) {
+          const u = D(n, l, { ...s, [e]: n });
+          b((f) => {
+            if (u) return { ...f, [e]: u };
+            if (!(e in f)) return f;
+            const x = { ...f };
+            return delete x[e], x;
+          });
+        }
+      }
+      y(null);
+    },
+    registerField: (e, n) => S.current.set(e, n),
+    unregisterField: (e) => S.current.delete(e),
+    errorFor: (e) => w[e],
+    markTouched: (e) => {
+      const n = S.current.get(e);
+      if (n && a) {
+        const l = D(s[e], n, s);
+        b((u) => {
+          if (l) return { ...u, [e]: l };
+          if (!(e in u)) return u;
+          const f = { ...u };
+          return delete f[e], f;
+        });
+      }
+    },
+    formError: T
+  };
+  return /* @__PURE__ */ v(G.Provider, { value: N, children: /* @__PURE__ */ v(
+    "form",
+    {
+      id: t,
+      className: k("prui-form flex flex-col gap-4", h),
+      noValidate: !0,
+      onSubmit: (e) => {
+        e.preventDefault(), A();
+      },
+      onReset: (e) => {
+        e.preventDefault(), j();
+      },
+      children: r
+    }
+  ) });
+}
+const W = { 1: "grid-cols-1", 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4" }, X = { 2: "sm:grid-cols-2", 3: "sm:grid-cols-3", 4: "sm:grid-cols-4" }, Y = { 2: "md:grid-cols-2", 3: "md:grid-cols-3", 4: "md:grid-cols-4" }, Z = { 2: "lg:grid-cols-2", 3: "lg:grid-cols-3", 4: "lg:grid-cols-4" };
+function ct({ label: t, description: r, columns: o = 1, gap: i = "md", children: p, className: g }) {
+  const a = typeof o == "number" ? { base: o } : o, h = a.base ?? 1, s = [
+    "grid",
+    W[h],
+    a.sm && a.sm > 1 ? X[a.sm] : null,
+    a.md && a.md > 1 ? Y[a.md] : null,
+    a.lg && a.lg > 1 ? Z[a.lg] : null
+  ].filter(Boolean), d = i === "sm" ? "gap-x-2 gap-y-3" : i === "lg" ? "gap-x-6 gap-y-4" : "gap-x-4 gap-y-3";
+  return /* @__PURE__ */ O(
+    "div",
+    {
+      role: "group",
+      className: k("prui-form-group rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-4", g),
+      children: [
+        t ? /* @__PURE__ */ v("div", { className: "text-sm font-semibold text-[var(--prui-fg)]", children: t }) : null,
+        r ? /* @__PURE__ */ v("div", { className: "mb-1 text-xs text-[var(--prui-dim)]", children: r }) : null,
+        /* @__PURE__ */ v("div", { className: k(...s, d), children: p })
+      ]
+    }
+  );
+}
+function dt({
+  name: t,
+  label: r = t,
+  type: o = "text",
+  placeholder: i,
+  required: p,
+  disabled: g,
+  readOnly: a,
+  autoFocus: h,
+  minLength: s,
+  maxLength: d,
+  min: w,
+  max: b,
+  step: T,
+  pattern: y,
+  patternMessage: S,
+  options: P,
+  rows: C = 3,
+  help: I,
+  message: V,
+  validate: A,
+  onChange: j,
+  className: B
+}) {
+  const F = U();
+  m.useEffect(() => (F.registerField(t, { label: r, required: p, validate: A, minLength: s, maxLength: d, min: w, max: b, pattern: y, patternMessage: S }), () => F.unregisterField(t)), [t]);
+  const E = F.getValue(t), $ = F.errorFor(t), N = (c) => {
+    F.setValue(t, c), j == null || j(c);
+  }, e = `prui-field-${F.id}-${t}`, n = `${e}-msg`, l = $ ?? (V == null ? void 0 : V.message) ?? I, u = $ ? "error" : V ? V.type ?? "info" : "help", f = {
+    error: "text-[var(--prui-danger)]",
+    warning: "text-[var(--prui-warn)]",
+    info: "text-[var(--prui-dim)]",
+    success: "text-[var(--prui-ok)]",
+    help: "text-[var(--prui-dim)]"
+  }[u], x = o === "textarea" ? /* @__PURE__ */ v(
+    q,
+    {
+      id: e,
+      rows: C,
+      placeholder: i,
+      disabled: g,
+      readOnly: a,
+      autoFocus: h,
+      minLength: s,
+      maxLength: d,
+      className: k("w-full", B),
+      value: String(E ?? ""),
+      onChange: (c) => N(c.target.value),
+      onBlur: () => F.markTouched(t),
+      "aria-invalid": $ ? !0 : void 0,
+      "aria-describedby": l ? n : void 0
+    }
+  ) : o === "select" ? /* @__PURE__ */ v(
+    J,
+    {
+      id: e,
+      className: k("w-full", B),
+      options: (P ?? []).map((c) => ({ label: c.label, value: c.value, disabled: c.disabled })),
+      placeholder: i,
+      disabled: g,
+      value: String(E ?? ""),
+      onChange: (c) => N(c),
+      "aria-label": r
+    }
+  ) : o === "switch" || o === "checkbox" ? /* @__PURE__ */ v(
+    K,
+    {
+      id: e,
+      checked: !!E,
+      disabled: g,
+      onChange: (c) => N(c),
+      "aria-label": r
+    }
+  ) : /* @__PURE__ */ v(
+    z,
+    {
+      id: e,
+      type: o,
+      placeholder: i,
+      disabled: g,
+      readOnly: a,
+      autoFocus: h,
+      minLength: s,
+      maxLength: d,
+      min: w,
+      max: b,
+      step: T,
+      pattern: y == null ? void 0 : y.source,
+      className: k("w-full", B),
+      value: String(E ?? ""),
+      onChange: (c) => N(o === "number" ? c.target.value === "" ? "" : Number(c.target.value) : c.target.value),
+      onBlur: () => F.markTouched(t),
+      "aria-invalid": $ ? !0 : void 0,
+      "aria-describedby": l ? n : void 0
+    }
+  );
+  return /* @__PURE__ */ O("div", { className: k("prui-form-input flex flex-col gap-1.5", B), "data-testid": `form-input-${t}`, children: [
+    r ? /* @__PURE__ */ O(H, { htmlFor: e, children: [
+      r,
+      p ? /* @__PURE__ */ v("span", { className: "ml-0.5 text-[var(--prui-danger)]", children: "*" }) : null
+    ] }) : null,
+    x,
+    l ? /* @__PURE__ */ v("p", { id: n, className: k("text-xs", f), role: $ ? "alert" : void 0, children: l }) : null
+  ] });
+}
+function tt(t) {
+  const [r, o] = m.useState(() => {
+    var i;
+    return ((i = R(t)) == null ? void 0 : i.getState()) ?? null;
+  });
+  return m.useEffect(() => {
+    const i = R(t);
+    if (!i) {
+      o(null);
+      return;
+    }
+    return o(i.getState()), i.subscribe((p) => o(p));
+  }, [t]), r;
+}
+function ft({ form: t, action: r = "submit", disableWhen: o = "never", variant: i, size: p, disabled: g, children: a, onClick: h, className: s }) {
+  const d = tt(t), w = g || (o === "invalid" && d ? !d.isValid : !1) || (o === "pristine" && d ? !d.isDirty : !1);
+  return /* @__PURE__ */ v(
+    L,
+    {
+      type: "button",
+      variant: i ?? "default",
+      size: p,
+      disabled: w,
+      className: s,
+      "data-testid": `form-button-${t}-${r}`,
+      onClick: () => {
+        const b = R(t);
+        if (!b) {
+          console.warn(`[prui] FormButton: no <Form id="${t}"> is mounted.`);
+          return;
+        }
+        r === "submit" ? b.submit() : r === "reset" ? b.reset() : r === "clear" && b.clear(), h == null || h();
+      },
+      children: a
+    }
+  );
+}
+const mt = {
+  name: "Form",
+  props: [
+    { name: "id", type: "string", default: null, control: "text" },
+    { name: "schema", type: "SafeParseSchema (zod-compatible)", default: "undefined", control: "none" },
+    { name: "initialValues", type: "Record<string, unknown>", default: "{}", control: "object" },
+    { name: "onSubmit", type: "(values) => void | Promise<void>", default: null, control: "none" },
+    { name: "validateOnChange", type: "boolean", default: "true", control: "boolean" }
+  ]
+}, pt = {
+  name: "FormGroup",
+  props: [
+    { name: "label", type: "string", default: null, control: "text" },
+    { name: "description", type: "string", default: null, control: "text" },
+    { name: "columns", type: "number | { base?, sm?, md?, lg? }", default: "1", control: "number" },
+    { name: "gap", type: "'sm' | 'md' | 'lg'", default: "'md'", control: "select", options: ["sm", "md", "lg"] }
+  ]
+}, gt = {
+  name: "FormInput",
+  props: [
+    { name: "name", type: "string", default: null, control: "text" },
+    { name: "label", type: "string", default: "name", control: "text" },
+    { name: "type", type: "text | email | password | number | tel | url | search | date | time | datetime-local | textarea | select | switch | checkbox", default: "'text'", control: "select", options: ["text", "email", "password", "number", "date", "textarea", "select", "switch"] },
+    { name: "required", type: "boolean", default: "false", control: "boolean" },
+    { name: "help", type: "ReactNode", default: null, control: "text" },
+    { name: "message", type: "{ message, type: 'info' | 'warning' | 'success' }", default: null, control: "object" },
+    { name: "options", type: "{ label, value }[]", default: "select/switch only", control: "object" },
+    { name: "validate", type: "(value, values) => string | null", default: null, control: "none" }
+  ]
+}, bt = {
+  name: "FormButton",
+  props: [
+    { name: "form", type: "string (id of the target <Form>)", default: null, control: "text" },
+    { name: "action", type: "'submit' | 'reset' | 'clear'", default: "'submit'", control: "select", options: ["submit", "reset", "clear"] },
+    { name: "disableWhen", type: "'invalid' | 'pristine' | 'never'", default: "'never'", control: "select", options: ["invalid", "pristine", "never"] },
+    { name: "variant", type: "ButtonVariant", default: "'default'", control: "select", options: ["primary", "default", "ghost", "danger", "outline", "soft", "link"] }
+  ]
+};
+function xt(t) {
+  return R(t);
+}
+export {
+  ut as Form,
+  ft as FormButton,
+  ct as FormGroup,
+  dt as FormInput,
+  bt as formButtonPropsMeta,
+  pt as formGroupPropsMeta,
+  at as formIds,
+  gt as formInputPropsMeta,
+  mt as formPropsMeta,
+  R as getFormApi,
+  Q as registerForm,
+  xt as useFormApi
+};

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export * from './data-table';
 export * from './app';
 export * from './pages';
 export * from './theme';
+export { FormGroup, FormInput, FormButton, useFormApi, registerForm, getFormApi, formGroupPropsMeta, formInputPropsMeta, formButtonPropsMeta, type FormGroupProps, type FormInputProps, type FormButtonProps, type SafeParseSchema, } from './forms';