@carbonbits/sixr 1.3.0 → 1.5.0

package/dist/form.cjs

@@ -24,54 +24,172 @@ var form_exports = {};
 __export(form_exports, {
   Form: () => Form,
   FormError: () => FormError,
-  SubmitButton: () => SubmitButton
+  SubmitButton: () => SubmitButton,
+  useFormInstance: () => useFormInstance
 });
 module.exports = __toCommonJS(form_exports);
-var import_react = require("react");
+var import_standard_schema = require("@hookform/resolvers/standard-schema");
+var import_react_hook_form = require("react-hook-form");
+
+// src/components/button/index.tsx
+var import_react_slot2 = require("@radix-ui/react-slot");
+
+// src/components/typography/index.tsx
+var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
-var SubmittingContext = (0, import_react.createContext)(false);
-var FORM_CLASSES = "flex flex-col gap-4";
-var FIELDSET_CLASSES = "contents border-0 p-0 m-0 min-w-0";
-function Form({ onSubmit, children, className, ...rest }) {
-  const [submitting, setSubmitting] = (0, import_react.useState)(false);
-  const handleSubmit = (0, import_react.useCallback)(
-    (event) => {
-      event.preventDefault();
-      const result = onSubmit();
-      if (result && typeof result.then === "function") {
-        setSubmitting(true);
-        result.finally(() => setSubmitting(false)).catch(() => void 0);
-      }
-    },
-    [onSubmit]
-  );
+var DEFAULT_ELEMENT = {
+  display: "h1",
+  heading: "h2",
+  subheading: "h3",
+  body: "p",
+  label: "span",
+  hint: "p",
+  code: "code"
+};
+var DEFAULT_WEIGHT = {
+  display: "semibold",
+  heading: "semibold",
+  subheading: "medium",
+  body: "regular",
+  label: "semibold",
+  hint: "regular",
+  code: "regular"
+};
+var VARIANT_CLASSES = {
+  display: "text-display leading-tight tracking-tight",
+  heading: "text-heading leading-tight tracking-tight",
+  subheading: "text-subheading leading-snug",
+  body: "text-field leading-normal",
+  label: "text-label leading-normal",
+  hint: "text-hint leading-normal",
+  code: "font-code text-field leading-normal"
+};
+var TONE_CLASSES = {
+  default: "text-fg",
+  muted: "text-fg-muted",
+  subtle: "text-fg-subtle",
+  accent: "text-accent",
+  "on-accent": "text-on-accent",
+  success: "text-success",
+  warning: "text-warning",
+  info: "text-info",
+  danger: "text-danger"
+};
+var WEIGHT_CLASSES = {
+  regular: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var ALIGN_CLASSES = {
+  start: "text-start",
+  center: "text-center",
+  end: "text-end"
+};
+var ICON_CLASSES = "inline-flex shrink-0 items-center [&>svg]:h-[1em] [&>svg]:w-[1em]";
+function typographyClassName({
+  variant,
+  tone,
+  weight,
+  align,
+  truncate,
+  hasIcon,
+  className
+}) {
+  return [
+    VARIANT_CLASSES[variant],
+    TONE_CLASSES[tone],
+    WEIGHT_CLASSES[weight],
+    align ? ALIGN_CLASSES[align] : "",
+    hasIcon ? "inline-flex items-center gap-1.5" : "",
+    // With an icon the root is a flex container, and text-overflow only
+    // clips block text, so the text span carries the truncation instead.
+    truncate && !hasIcon ? "truncate" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+}
+function Typography({
+  variant = "body",
+  tone = "default",
+  weight,
+  align,
+  truncate = false,
+  icon,
+  iconPosition = "leading",
+  as,
+  asChild = false,
+  className,
+  children,
+  ...rest
+}) {
+  const hasIcon = icon !== void 0 && icon !== null;
+  const Component = asChild ? import_react_slot.Slot : as ?? DEFAULT_ELEMENT[variant];
+  const iconNode = hasIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: ICON_CLASSES, children: icon }) : null;
+  const content = hasIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    iconPosition === "leading" ? iconNode : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: truncate ? "min-w-0 truncate" : void 0, children }),
+    iconPosition === "trailing" ? iconNode : null
+  ] }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "form",
+    Component,
     {
-      noValidate: true,
       ...rest,
-      onSubmit: handleSubmit,
-      className: [FORM_CLASSES, className ?? ""].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SubmittingContext.Provider, { value: submitting, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", { disabled: submitting, className: FIELDSET_CLASSES, children }) })
+      className: typographyClassName({
+        variant,
+        tone,
+        weight: weight ?? DEFAULT_WEIGHT[variant],
+        align,
+        truncate,
+        hasIcon,
+        className
+      }),
+      children: content
     }
   );
 }
-function FormError({ children }) {
-  if (!children) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", className: "text-hint text-danger", children });
+
+// src/components/button/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var BASE_CLASSES = "inline-flex shrink-0 items-center justify-center gap-2 rounded-field border font-[inherit] text-field font-semibold outline-none transition-colors focus-visible:ring-3 focus-visible:ring-accent-soft disabled:cursor-not-allowed disabled:opacity-45";
+var VARIANT_CLASSES2 = {
+  primary: "border-transparent bg-accent text-on-accent enabled:hover:bg-accent-2",
+  secondary: "border-line bg-surface text-fg enabled:hover:bg-surface-2",
+  ghost: "border-transparent bg-transparent text-fg enabled:hover:bg-surface-2"
+};
+var SIZE_CLASSES = {
+  md: "h-10 px-4",
+  lg: "h-11 px-5"
+};
+var LABEL_TONE = {
+  primary: "on-accent",
+  secondary: "default",
+  ghost: "default"
+};
+function buttonClassName({
+  variant,
+  size,
+  fullWidth,
+  className
+}) {
+  return [
+    BASE_CLASSES,
+    VARIANT_CLASSES2[variant],
+    SIZE_CLASSES[size],
+    fullWidth ? "w-full" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
 }
 function Spinner() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "svg",
     {
       className: "h-4 w-4 animate-spin",
       viewBox: "0 0 24 24",
       fill: "none",
       "aria-hidden": "true",
+      "data-testid": "button-spinner",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "circle",
           {
             className: "opacity-25",
@@ -82,7 +200,7 @@ function Spinner() {
             strokeWidth: "4"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
             className: "opacity-75",
@@ -94,31 +212,154 @@ function Spinner() {
     }
   );
 }
-var BUTTON_CLASSES = "flex h-10 w-full items-center justify-center gap-2 rounded-field bg-accent font-[inherit] text-field font-semibold text-on-accent outline-none focus:ring-3 focus:ring-accent-soft disabled:cursor-not-allowed disabled:opacity-45";
-function SubmitButton({
-  children,
+function Button({
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  loading = false,
   loadingLabel,
+  asChild = false,
+  type = "button",
+  disabled,
   className,
+  children,
   ...rest
 }) {
-  const submitting = (0, import_react.useContext)(SubmittingContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const classes = buttonClassName({ variant, size, fullWidth, className });
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_slot2.Slot, { ...rest, className: classes, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
       ...rest,
-      type: "submit",
-      className: [BUTTON_CLASSES, className ?? ""].filter(Boolean).join(" "),
-      children: submitting ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}),
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      className: classes,
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}),
         loadingLabel
-      ] }) : children
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Typography,
+        {
+          as: "span",
+          variant: "body",
+          weight: "semibold",
+          tone: LABEL_TONE[variant],
+          children
+        }
+      )
     }
   );
 }
+
+// src/components/form/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function useFormInstance({
+  schema,
+  defaultValues,
+  mode = "onTouched"
+}) {
+  return (0, import_react_hook_form.useForm)({
+    resolver: schema ? (0, import_standard_schema.standardSchemaResolver)(schema) : void 0,
+    defaultValues,
+    mode,
+    reValidateMode: "onChange"
+  });
+}
+var FORM_CLASSES = "flex flex-col gap-4";
+var FIELDSET_CLASSES = "contents border-0 p-0 m-0 min-w-0";
+function errorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function Form({
+  schema,
+  defaultValues,
+  mode,
+  onSubmit,
+  form: external,
+  children,
+  className,
+  ...rest
+}) {
+  const internal = useFormInstance({ schema, defaultValues, mode });
+  const form = external ?? internal;
+  const { isSubmitting } = form.formState;
+  const submit = form.handleSubmit(async (values) => {
+    try {
+      await onSubmit(values, form);
+    } catch (error) {
+      form.setError("root", { type: "submit", message: errorMessage(error) });
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_hook_form.FormProvider, { ...form, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "form",
+    {
+      noValidate: true,
+      ...rest,
+      onSubmit: submit,
+      className: [FORM_CLASSES, className ?? ""].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("fieldset", { disabled: isSubmitting, className: FIELDSET_CLASSES, children })
+    }
+  ) });
+}
+function FormErrorMessage({ children, className }) {
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Typography,
+    {
+      as: "p",
+      variant: "hint",
+      tone: "danger",
+      role: "alert",
+      className,
+      children
+    }
+  );
+}
+function ConnectedFormError({ children, className }) {
+  const { errors } = (0, import_react_hook_form.useFormState)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormErrorMessage, { className, children: children ?? errors.root?.message });
+}
+function FormError(props) {
+  const form = (0, import_react_hook_form.useFormContext)();
+  return form ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ConnectedFormError, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormErrorMessage, { ...props });
+}
+function ConnectedSubmitButton({
+  children,
+  loadingLabel,
+  fullWidth = true,
+  ...rest
+}) {
+  const { isSubmitting } = (0, import_react_hook_form.useFormState)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Button,
+    {
+      ...rest,
+      type: "submit",
+      fullWidth,
+      loading: isSubmitting,
+      loadingLabel,
+      children
+    }
+  );
+}
+function SubmitButton(props) {
+  const form = (0, import_react_hook_form.useFormContext)();
+  if (form) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ConnectedSubmitButton, { ...props });
+  }
+  const { fullWidth = true, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...rest, type: "submit", fullWidth });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Form,
   FormError,
-  SubmitButton
+  SubmitButton,
+  useFormInstance
 });
 //# sourceMappingURL=form.cjs.map

package/dist/form.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/form/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ButtonHTMLAttributes,\n  createContext,\n  type FormHTMLAttributes,\n  type ReactNode,\n  type SubmitEvent,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\n\nconst SubmittingContext = createContext(false);\n\nexport type FormProps = Omit<\n  FormHTMLAttributes<HTMLFormElement>,\n  \"onSubmit\"\n> & {\n  onSubmit: () => void | Promise<void>;\n  children: ReactNode;\n};\n\nconst FORM_CLASSES = \"flex flex-col gap-4\";\nconst FIELDSET_CLASSES = \"contents border-0 p-0 m-0 min-w-0\";\n\nexport function Form({ onSubmit, children, className, ...rest }: FormProps) {\n  const [submitting, setSubmitting] = useState(false);\n\n  const handleSubmit = useCallback(\n    (event: SubmitEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      const result = onSubmit();\n      if (result && typeof result.then === \"function\") {\n        setSubmitting(true);\n        result.finally(() => setSubmitting(false)).catch(() => undefined);\n      }\n    },\n    [onSubmit],\n  );\n\n  return (\n    <form\n      noValidate\n      {...rest}\n      onSubmit={handleSubmit}\n      className={[FORM_CLASSES, className ?? \"\"].filter(Boolean).join(\" \")}\n    >\n      <SubmittingContext.Provider value={submitting}>\n        <fieldset disabled={submitting} className={FIELDSET_CLASSES}>\n          {children}\n        </fieldset>\n      </SubmittingContext.Provider>\n    </form>\n  );\n}\n\nexport function FormError({ children }: { children?: ReactNode }) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <p role=\"alert\" className=\"text-hint text-danger\">\n      {children}\n    </p>\n  );\n}\n\nfunction Spinner() {\n  return (\n    <svg\n      className=\"h-4 w-4 animate-spin\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12H4Z\"\n      />\n    </svg>\n  );\n}\n\nexport type SubmitButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"type\"\n> & {\n  loadingLabel?: ReactNode;\n};\n\nconst BUTTON_CLASSES =\n  \"flex h-10 w-full items-center justify-center gap-2 rounded-field bg-accent font-[inherit] text-field font-semibold text-on-accent outline-none focus:ring-3 focus:ring-accent-soft disabled:cursor-not-allowed disabled:opacity-45\";\n\nexport function SubmitButton({\n  children,\n  loadingLabel,\n  className,\n  ...rest\n}: SubmitButtonProps) {\n  const submitting = useContext(SubmittingContext);\n\n  return (\n    <button\n      {...rest}\n      type=\"submit\"\n      className={[BUTTON_CLASSES, className ?? \"\"].filter(Boolean).join(\" \")}\n    >\n      {submitting ? (\n        <>\n          <Spinner />\n          {loadingLabel}\n        </>\n      ) : (\n        children\n      )}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBASO;AAsCC;AApCR,IAAM,wBAAoB,4BAAc,KAAK;AAU7C,IAAM,eAAe;AACrB,IAAM,mBAAmB;AAElB,SAAS,KAAK,EAAE,UAAU,UAAU,WAAW,GAAG,KAAK,GAAc;AAC1E,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAElD,QAAM,mBAAe;AAAA,IACnB,CAAC,UAAwC;AACvC,YAAM,eAAe;AACrB,YAAM,SAAS,SAAS;AACxB,UAAI,UAAU,OAAO,OAAO,SAAS,YAAY;AAC/C,sBAAc,IAAI;AAClB,eAAO,QAAQ,MAAM,cAAc,KAAK,CAAC,EAAE,MAAM,MAAM,MAAS;AAAA,MAClE;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAU;AAAA,MACT,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,WAAW,CAAC,cAAc,aAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEnE,sDAAC,kBAAkB,UAAlB,EAA2B,OAAO,YACjC,sDAAC,cAAS,UAAU,YAAY,WAAW,kBACxC,UACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,UAAU,EAAE,SAAS,GAA6B;AAChE,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE,4CAAC,OAAE,MAAK,SAAQ,WAAU,yBACvB,UACH;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MAEZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA;AAAA,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,GAAE;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EACF;AAEJ;AASA,IAAM,iBACJ;AAEK,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,iBAAa,yBAAW,iBAAiB;AAE/C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,WAAW,CAAC,gBAAgB,aAAa,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAEpE,uBACC,4EACE;AAAA,oDAAC,WAAQ;AAAA,QACR;AAAA,SACH,IAEA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../src/components/form/index.tsx","../src/components/button/index.tsx","../src/components/typography/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { standardSchemaResolver } from \"@hookform/resolvers/standard-schema\";\nimport type { StandardSchemaV1 } from \"@standard-schema/spec\";\nimport type { FormHTMLAttributes, ReactNode } from \"react\";\nimport {\n  type DefaultValues,\n  type FieldValues,\n  FormProvider,\n  type Mode,\n  type UseFormReturn,\n  useForm,\n  useFormContext,\n  useFormState,\n} from \"react-hook-form\";\nimport { Button, type ButtonProps } from \"@/components/button\";\nimport { Typography } from \"@/components/typography\";\n\n/**\n * A `<form>` on react-hook-form. The schema — any Standard Schema, which\n * every zod 4 schema is — validates the whole form: on first blur per field,\n * then on every change once a field has gone invalid, and again on submit.\n * Fields register themselves through `FieldRoot` (and so through every\n * input in this library), so a form is the schema, the inputs and a submit.\n *\n * `onSubmit` only runs with values the schema accepted, typed as its output.\n * Throwing from it — or calling `form.setError(\"root\", …)` — surfaces the\n * message through `FormError`. While it is pending the fields are disabled\n * and `SubmitButton` shows its spinner.\n *\n * Pass your own `form` (from `useFormInstance`) when a screen needs to reach\n * the instance itself, for `setError`, `reset` or `watch`.\n */\n\nexport type FormSchema = StandardSchemaV1<FieldValues, FieldValues>;\n\nexport type FormInput<Schema extends FormSchema> =\n  StandardSchemaV1.InferInput<Schema>;\nexport type FormOutput<Schema extends FormSchema> =\n  StandardSchemaV1.InferOutput<Schema>;\n\nexport type FormInstance<Schema extends FormSchema> = UseFormReturn<\n  FormInput<Schema>,\n  unknown,\n  FormOutput<Schema>\n>;\n\nexport type UseFormInstanceOptions<Schema extends FormSchema> = {\n  schema?: Schema;\n  defaultValues?: DefaultValues<FormInput<Schema>>;\n  /** When a field first validates. `onTouched`: first blur, then every change. */\n  mode?: Mode;\n};\n\n// biome-ignore lint/style/useComponentExportOnlyModules: the hook is how a screen holds the instance Form would otherwise create, and belongs on the same subpath.\nexport function useFormInstance<Schema extends FormSchema>({\n  schema,\n  defaultValues,\n  mode = \"onTouched\",\n}: UseFormInstanceOptions<Schema>): FormInstance<Schema> {\n  return useForm<FormInput<Schema>, unknown, FormOutput<Schema>>({\n    resolver: schema ? standardSchemaResolver(schema) : undefined,\n    defaultValues,\n    mode,\n    reValidateMode: \"onChange\",\n  });\n}\n\nexport type FormProps<Schema extends FormSchema = FormSchema> = Omit<\n  FormHTMLAttributes<HTMLFormElement>,\n  \"onSubmit\"\n> &\n  UseFormInstanceOptions<Schema> & {\n    onSubmit: (\n      values: FormOutput<Schema>,\n      form: FormInstance<Schema>,\n    ) => void | Promise<void>;\n    /** An instance from `useFormInstance`, when the screen needs it too. */\n    form?: FormInstance<Schema>;\n    children: ReactNode;\n  };\n\nconst FORM_CLASSES = \"flex flex-col gap-4\";\nconst FIELDSET_CLASSES = \"contents border-0 p-0 m-0 min-w-0\";\n\nfunction errorMessage(error: unknown): string {\n  return error instanceof Error ? error.message : String(error);\n}\n\nexport function Form<Schema extends FormSchema = FormSchema>({\n  schema,\n  defaultValues,\n  mode,\n  onSubmit,\n  form: external,\n  children,\n  className,\n  ...rest\n}: FormProps<Schema>) {\n  const internal = useFormInstance<Schema>({ schema, defaultValues, mode });\n  const form = external ?? internal;\n  const { isSubmitting } = form.formState;\n\n  const submit = form.handleSubmit(async (values) => {\n    try {\n      await onSubmit(values, form);\n    } catch (error) {\n      form.setError(\"root\", { type: \"submit\", message: errorMessage(error) });\n    }\n  });\n\n  return (\n    <FormProvider {...form}>\n      <form\n        noValidate\n        {...rest}\n        onSubmit={submit}\n        className={[FORM_CLASSES, className ?? \"\"].filter(Boolean).join(\" \")}\n      >\n        <fieldset disabled={isSubmitting} className={FIELDSET_CLASSES}>\n          {children}\n        </fieldset>\n      </form>\n    </FormProvider>\n  );\n}\n\nexport type FormErrorProps = {\n  /** A message to show in place of the form's own root error. */\n  children?: ReactNode;\n  className?: string;\n};\n\nfunction FormErrorMessage({ children, className }: FormErrorProps) {\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <Typography\n      as=\"p\"\n      variant=\"hint\"\n      tone=\"danger\"\n      role=\"alert\"\n      className={className}\n    >\n      {children}\n    </Typography>\n  );\n}\n\nfunction ConnectedFormError({ children, className }: FormErrorProps) {\n  const { errors } = useFormState();\n\n  return (\n    <FormErrorMessage className={className}>\n      {children ?? errors.root?.message}\n    </FormErrorMessage>\n  );\n}\n\n/**\n * The form-level error: a rejected credential, a failed request. Shows\n * `children` when given, otherwise whatever `onSubmit` threw or\n * `form.setError(\"root\", …)` recorded. Renders nothing while there is none.\n */\nexport function FormError(props: FormErrorProps) {\n  const form = useFormContext() as UseFormReturn<FieldValues> | null;\n\n  return form ? (\n    <ConnectedFormError {...props} />\n  ) : (\n    <FormErrorMessage {...props} />\n  );\n}\n\nexport type SubmitButtonProps = Omit<\n  ButtonProps,\n  \"type\" | \"loading\" | \"asChild\"\n>;\n\nfunction ConnectedSubmitButton({\n  children,\n  loadingLabel,\n  fullWidth = true,\n  ...rest\n}: SubmitButtonProps) {\n  const { isSubmitting } = useFormState();\n\n  return (\n    <Button\n      {...rest}\n      type=\"submit\"\n      fullWidth={fullWidth}\n      loading={isSubmitting}\n      loadingLabel={loadingLabel}\n    >\n      {children}\n    </Button>\n  );\n}\n\n/**\n * `Button` bound to the enclosing `Form`: always `type=\"submit\"`, full width\n * as the design's forms are, and loading for as long as `onSubmit` runs.\n */\nexport function SubmitButton(props: SubmitButtonProps) {\n  const form = useFormContext() as UseFormReturn<FieldValues> | null;\n\n  if (form) {\n    return <ConnectedSubmitButton {...props} />;\n  }\n\n  const { fullWidth = true, ...rest } = props;\n\n  return <Button {...rest} type=\"submit\" fullWidth={fullWidth} />;\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport type { ButtonHTMLAttributes, ReactNode, Ref } from \"react\";\nimport { Typography, type TypographyTone } from \"@/components/typography\";\n\n/**\n * The design's primary action, as the auth screens use it: a 40px (or 44px)\n * accent-filled control with the field type scale, a 4px radius and the\n * shared 45% disabled opacity. `secondary` and `ghost` cover the quieter\n * actions that sit beside it.\n *\n * Server-safe: no state, no handlers of its own. `asChild` composes onto a\n * consumer's element — a `next/link` for a navigation styled as a button —\n * through Radix `Slot`, so the link keeps its own semantics. `loading` swaps\n * the label for a spinner and disables the control; it applies to the\n * rendered `<button>` only, since a child element owns its own content.\n */\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\";\nexport type ButtonSize = \"md\" | \"lg\";\n\nexport type ButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> & {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** Stretch to the container, as the auth forms' submit does. */\n  fullWidth?: boolean;\n  /** Shows a spinner in place of the label and disables the control. */\n  loading?: boolean;\n  /** Shown next to the spinner while `loading`; nothing but the spinner otherwise. */\n  loadingLabel?: ReactNode;\n  /** Merge the styles onto the child element instead of rendering a button. */\n  asChild?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n  children: ReactNode;\n};\n\nconst BASE_CLASSES =\n  \"inline-flex shrink-0 items-center justify-center gap-2 rounded-field border font-[inherit] text-field font-semibold outline-none transition-colors focus-visible:ring-3 focus-visible:ring-accent-soft disabled:cursor-not-allowed disabled:opacity-45\";\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary:\n    \"border-transparent bg-accent text-on-accent enabled:hover:bg-accent-2\",\n  secondary: \"border-line bg-surface text-fg enabled:hover:bg-surface-2\",\n  ghost: \"border-transparent bg-transparent text-fg enabled:hover:bg-surface-2\",\n};\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  md: \"h-10 px-4\",\n  lg: \"h-11 px-5\",\n};\n\nconst LABEL_TONE: Record<ButtonVariant, TypographyTone> = {\n  primary: \"on-accent\",\n  secondary: \"default\",\n  ghost: \"default\",\n};\n\nfunction buttonClassName({\n  variant,\n  size,\n  fullWidth,\n  className,\n}: {\n  variant: ButtonVariant;\n  size: ButtonSize;\n  fullWidth: boolean;\n  className: string | undefined;\n}): string {\n  return [\n    BASE_CLASSES,\n    VARIANT_CLASSES[variant],\n    SIZE_CLASSES[size],\n    fullWidth ? \"w-full\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction Spinner() {\n  return (\n    <svg\n      className=\"h-4 w-4 animate-spin\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      data-testid=\"button-spinner\"\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12H4Z\"\n      />\n    </svg>\n  );\n}\n\nexport function Button({\n  variant = \"primary\",\n  size = \"md\",\n  fullWidth = false,\n  loading = false,\n  loadingLabel,\n  asChild = false,\n  type = \"button\",\n  disabled,\n  className,\n  children,\n  ...rest\n}: ButtonProps) {\n  const classes = buttonClassName({ variant, size, fullWidth, className });\n\n  if (asChild) {\n    return (\n      <Slot {...rest} className={classes}>\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <button\n      {...rest}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      className={classes}\n    >\n      {loading ? (\n        <>\n          <Spinner />\n          {loadingLabel}\n        </>\n      ) : (\n        <Typography\n          as=\"span\"\n          variant=\"body\"\n          weight=\"semibold\"\n          tone={LABEL_TONE[variant]}\n        >\n          {children}\n        </Typography>\n      )}\n    </button>\n  );\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport type { ElementType, HTMLAttributes, ReactNode, Ref } from \"react\";\n\n/**\n * The library's type scale. Everything that renders text — field labels, hints,\n * form errors, headings — goes through here, so a size or colour lives in one\n * place and the tokens in `src/styles/index.css` stay the single source of\n * truth for what \"hint\" or \"muted\" means.\n *\n * Server-safe: no state, no handlers, no directive. It composes Radix `Slot`\n * for `asChild`, which is how a consumer puts these styles on their own\n * element (a `next/link`, a Radix `Label`) without an extra wrapper.\n */\n\nexport type TypographyVariant =\n  | \"display\"\n  | \"heading\"\n  | \"subheading\"\n  | \"body\"\n  | \"label\"\n  | \"hint\"\n  | \"code\";\n\nexport type TypographyTone =\n  | \"default\"\n  | \"muted\"\n  | \"subtle\"\n  | \"accent\"\n  | \"on-accent\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"danger\";\n\nexport type TypographyWeight = \"regular\" | \"medium\" | \"semibold\" | \"bold\";\n\nexport type TypographyElement =\n  | \"p\"\n  | \"span\"\n  | \"div\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"label\"\n  | \"code\"\n  | \"strong\"\n  | \"em\"\n  | \"small\";\n\nexport type TypographyProps = Omit<HTMLAttributes<HTMLElement>, \"color\"> & {\n  /** Size and default element. `body` unless told otherwise. */\n  variant?: TypographyVariant;\n  /** Colour role, from the design tokens. */\n  tone?: TypographyTone;\n  /** Overrides the variant's default weight. */\n  weight?: TypographyWeight;\n  align?: \"start\" | \"center\" | \"end\";\n  /** Clip to one line with an ellipsis. */\n  truncate?: boolean;\n  /**\n   * An icon rendered beside the text, hidden from assistive tech. Sized to the\n   * text with `1em`, so the same SVG fits every variant.\n   */\n  icon?: ReactNode;\n  iconPosition?: \"leading\" | \"trailing\";\n  /** The element to render. Defaults per variant (`h2` for a heading, and so on). */\n  as?: TypographyElement;\n  /**\n   * Radix-style composition: render the child element itself, with these\n   * styles merged onto it, instead of a wrapper. Takes precedence over `as`.\n   */\n  asChild?: boolean;\n  ref?: Ref<HTMLElement>;\n  children?: ReactNode;\n};\n\nconst DEFAULT_ELEMENT: Record<TypographyVariant, TypographyElement> = {\n  display: \"h1\",\n  heading: \"h2\",\n  subheading: \"h3\",\n  body: \"p\",\n  label: \"span\",\n  hint: \"p\",\n  code: \"code\",\n};\n\nconst DEFAULT_WEIGHT: Record<TypographyVariant, TypographyWeight> = {\n  display: \"semibold\",\n  heading: \"semibold\",\n  subheading: \"medium\",\n  body: \"regular\",\n  label: \"semibold\",\n  hint: \"regular\",\n  code: \"regular\",\n};\n\nconst VARIANT_CLASSES: Record<TypographyVariant, string> = {\n  display: \"text-display leading-tight tracking-tight\",\n  heading: \"text-heading leading-tight tracking-tight\",\n  subheading: \"text-subheading leading-snug\",\n  body: \"text-field leading-normal\",\n  label: \"text-label leading-normal\",\n  hint: \"text-hint leading-normal\",\n  code: \"font-code text-field leading-normal\",\n};\n\nconst TONE_CLASSES: Record<TypographyTone, string> = {\n  default: \"text-fg\",\n  muted: \"text-fg-muted\",\n  subtle: \"text-fg-subtle\",\n  accent: \"text-accent\",\n  \"on-accent\": \"text-on-accent\",\n  success: \"text-success\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  danger: \"text-danger\",\n};\n\nconst WEIGHT_CLASSES: Record<TypographyWeight, string> = {\n  regular: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\",\n};\n\nconst ALIGN_CLASSES = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n} as const;\n\nconst ICON_CLASSES =\n  \"inline-flex shrink-0 items-center [&>svg]:h-[1em] [&>svg]:w-[1em]\";\n\nfunction typographyClassName({\n  variant,\n  tone,\n  weight,\n  align,\n  truncate,\n  hasIcon,\n  className,\n}: {\n  variant: TypographyVariant;\n  tone: TypographyTone;\n  weight: TypographyWeight;\n  align: \"start\" | \"center\" | \"end\" | undefined;\n  truncate: boolean;\n  hasIcon: boolean;\n  className: string | undefined;\n}): string {\n  return [\n    VARIANT_CLASSES[variant],\n    TONE_CLASSES[tone],\n    WEIGHT_CLASSES[weight],\n    align ? ALIGN_CLASSES[align] : \"\",\n    hasIcon ? \"inline-flex items-center gap-1.5\" : \"\",\n    // With an icon the root is a flex container, and text-overflow only\n    // clips block text, so the text span carries the truncation instead.\n    truncate && !hasIcon ? \"truncate\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nexport function Typography({\n  variant = \"body\",\n  tone = \"default\",\n  weight,\n  align,\n  truncate = false,\n  icon,\n  iconPosition = \"leading\",\n  as,\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: TypographyProps) {\n  const hasIcon = icon !== undefined && icon !== null;\n  // Widened to `ElementType`: the union of intrinsic tags would otherwise\n  // demand a `ref` typed to one specific element.\n  const Component: ElementType = asChild\n    ? Slot\n    : (as ?? DEFAULT_ELEMENT[variant]);\n\n  const iconNode = hasIcon ? (\n    <span aria-hidden=\"true\" className={ICON_CLASSES}>\n      {icon}\n    </span>\n  ) : null;\n\n  const content = hasIcon ? (\n    <>\n      {iconPosition === \"leading\" ? iconNode : null}\n      <span className={truncate ? \"min-w-0 truncate\" : undefined}>\n        {children}\n      </span>\n      {iconPosition === \"trailing\" ? iconNode : null}\n    </>\n  ) : (\n    children\n  );\n\n  return (\n    <Component\n      {...rest}\n      className={typographyClassName({\n        variant,\n        tone,\n        weight: weight ?? DEFAULT_WEIGHT[variant],\n        align,\n        truncate,\n        hasIcon,\n        className,\n      })}\n    >\n      {content}\n    </Component>\n  );\n}\n"],"mappings":"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","names":["import_react_slot","import_jsx_runtime","VARIANT_CLASSES","import_jsx_runtime"]}

package/dist/form.d.cts

@@ -1,17 +1,86 @@
 import * as react from 'react';
-import { FormHTMLAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, Ref, FormHTMLAttributes } from 'react';
+import { StandardSchemaV1 } from '@standard-schema/spec';
+import { FieldValues, DefaultValues, Mode, UseFormReturn } from 'react-hook-form';
 
-type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & {
-    onSubmit: () => void | Promise<void>;
+/**
+ * The design's primary action, as the auth screens use it: a 40px (or 44px)
+ * accent-filled control with the field type scale, a 4px radius and the
+ * shared 45% disabled opacity. `secondary` and `ghost` cover the quieter
+ * actions that sit beside it.
+ *
+ * Server-safe: no state, no handlers of its own. `asChild` composes onto a
+ * consumer's element — a `next/link` for a navigation styled as a button —
+ * through Radix `Slot`, so the link keeps its own semantics. `loading` swaps
+ * the label for a spinner and disables the control; it applies to the
+ * rendered `<button>` only, since a child element owns its own content.
+ */
+type ButtonVariant = "primary" | "secondary" | "ghost";
+type ButtonSize = "md" | "lg";
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Stretch to the container, as the auth forms' submit does. */
+    fullWidth?: boolean;
+    /** Shows a spinner in place of the label and disables the control. */
+    loading?: boolean;
+    /** Shown next to the spinner while `loading`; nothing but the spinner otherwise. */
+    loadingLabel?: ReactNode;
+    /** Merge the styles onto the child element instead of rendering a button. */
+    asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+    children: ReactNode;
+};
+
+/**
+ * A `<form>` on react-hook-form. The schema — any Standard Schema, which
+ * every zod 4 schema is — validates the whole form: on first blur per field,
+ * then on every change once a field has gone invalid, and again on submit.
+ * Fields register themselves through `FieldRoot` (and so through every
+ * input in this library), so a form is the schema, the inputs and a submit.
+ *
+ * `onSubmit` only runs with values the schema accepted, typed as its output.
+ * Throwing from it — or calling `form.setError("root", …)` — surfaces the
+ * message through `FormError`. While it is pending the fields are disabled
+ * and `SubmitButton` shows its spinner.
+ *
+ * Pass your own `form` (from `useFormInstance`) when a screen needs to reach
+ * the instance itself, for `setError`, `reset` or `watch`.
+ */
+type FormSchema = StandardSchemaV1<FieldValues, FieldValues>;
+type FormInput<Schema extends FormSchema> = StandardSchemaV1.InferInput<Schema>;
+type FormOutput<Schema extends FormSchema> = StandardSchemaV1.InferOutput<Schema>;
+type FormInstance<Schema extends FormSchema> = UseFormReturn<FormInput<Schema>, unknown, FormOutput<Schema>>;
+type UseFormInstanceOptions<Schema extends FormSchema> = {
+    schema?: Schema;
+    defaultValues?: DefaultValues<FormInput<Schema>>;
+    /** When a field first validates. `onTouched`: first blur, then every change. */
+    mode?: Mode;
+};
+declare function useFormInstance<Schema extends FormSchema>({ schema, defaultValues, mode, }: UseFormInstanceOptions<Schema>): FormInstance<Schema>;
+type FormProps<Schema extends FormSchema = FormSchema> = Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & UseFormInstanceOptions<Schema> & {
+    onSubmit: (values: FormOutput<Schema>, form: FormInstance<Schema>) => void | Promise<void>;
+    /** An instance from `useFormInstance`, when the screen needs it too. */
+    form?: FormInstance<Schema>;
     children: ReactNode;
 };
-declare function Form({ onSubmit, children, className, ...rest }: FormProps): react.JSX.Element;
-declare function FormError({ children }: {
+declare function Form<Schema extends FormSchema = FormSchema>({ schema, defaultValues, mode, onSubmit, form: external, children, className, ...rest }: FormProps<Schema>): react.JSX.Element;
+type FormErrorProps = {
+    /** A message to show in place of the form's own root error. */
     children?: ReactNode;
-}): react.JSX.Element | null;
-type SubmitButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
-    loadingLabel?: ReactNode;
+    className?: string;
 };
-declare function SubmitButton({ children, loadingLabel, className, ...rest }: SubmitButtonProps): react.JSX.Element;
+/**
+ * The form-level error: a rejected credential, a failed request. Shows
+ * `children` when given, otherwise whatever `onSubmit` threw or
+ * `form.setError("root", …)` recorded. Renders nothing while there is none.
+ */
+declare function FormError(props: FormErrorProps): react.JSX.Element;
+type SubmitButtonProps = Omit<ButtonProps, "type" | "loading" | "asChild">;
+/**
+ * `Button` bound to the enclosing `Form`: always `type="submit"`, full width
+ * as the design's forms are, and loading for as long as `onSubmit` runs.
+ */
+declare function SubmitButton(props: SubmitButtonProps): react.JSX.Element;
 
-export { Form, FormError, type FormProps, SubmitButton, type SubmitButtonProps };
+export { Form, FormError, type FormErrorProps, type FormInput, type FormInstance, type FormOutput, type FormProps, type FormSchema, SubmitButton, type SubmitButtonProps, type UseFormInstanceOptions, useFormInstance };

package/dist/form.d.ts

@@ -1,17 +1,86 @@
 import * as react from 'react';
-import { FormHTMLAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, Ref, FormHTMLAttributes } from 'react';
+import { StandardSchemaV1 } from '@standard-schema/spec';
+import { FieldValues, DefaultValues, Mode, UseFormReturn } from 'react-hook-form';
 
-type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & {
-    onSubmit: () => void | Promise<void>;
+/**
+ * The design's primary action, as the auth screens use it: a 40px (or 44px)
+ * accent-filled control with the field type scale, a 4px radius and the
+ * shared 45% disabled opacity. `secondary` and `ghost` cover the quieter
+ * actions that sit beside it.
+ *
+ * Server-safe: no state, no handlers of its own. `asChild` composes onto a
+ * consumer's element — a `next/link` for a navigation styled as a button —
+ * through Radix `Slot`, so the link keeps its own semantics. `loading` swaps
+ * the label for a spinner and disables the control; it applies to the
+ * rendered `<button>` only, since a child element owns its own content.
+ */
+type ButtonVariant = "primary" | "secondary" | "ghost";
+type ButtonSize = "md" | "lg";
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Stretch to the container, as the auth forms' submit does. */
+    fullWidth?: boolean;
+    /** Shows a spinner in place of the label and disables the control. */
+    loading?: boolean;
+    /** Shown next to the spinner while `loading`; nothing but the spinner otherwise. */
+    loadingLabel?: ReactNode;
+    /** Merge the styles onto the child element instead of rendering a button. */
+    asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+    children: ReactNode;
+};
+
+/**
+ * A `<form>` on react-hook-form. The schema — any Standard Schema, which
+ * every zod 4 schema is — validates the whole form: on first blur per field,
+ * then on every change once a field has gone invalid, and again on submit.
+ * Fields register themselves through `FieldRoot` (and so through every
+ * input in this library), so a form is the schema, the inputs and a submit.
+ *
+ * `onSubmit` only runs with values the schema accepted, typed as its output.
+ * Throwing from it — or calling `form.setError("root", …)` — surfaces the
+ * message through `FormError`. While it is pending the fields are disabled
+ * and `SubmitButton` shows its spinner.
+ *
+ * Pass your own `form` (from `useFormInstance`) when a screen needs to reach
+ * the instance itself, for `setError`, `reset` or `watch`.
+ */
+type FormSchema = StandardSchemaV1<FieldValues, FieldValues>;
+type FormInput<Schema extends FormSchema> = StandardSchemaV1.InferInput<Schema>;
+type FormOutput<Schema extends FormSchema> = StandardSchemaV1.InferOutput<Schema>;
+type FormInstance<Schema extends FormSchema> = UseFormReturn<FormInput<Schema>, unknown, FormOutput<Schema>>;
+type UseFormInstanceOptions<Schema extends FormSchema> = {
+    schema?: Schema;
+    defaultValues?: DefaultValues<FormInput<Schema>>;
+    /** When a field first validates. `onTouched`: first blur, then every change. */
+    mode?: Mode;
+};
+declare function useFormInstance<Schema extends FormSchema>({ schema, defaultValues, mode, }: UseFormInstanceOptions<Schema>): FormInstance<Schema>;
+type FormProps<Schema extends FormSchema = FormSchema> = Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & UseFormInstanceOptions<Schema> & {
+    onSubmit: (values: FormOutput<Schema>, form: FormInstance<Schema>) => void | Promise<void>;
+    /** An instance from `useFormInstance`, when the screen needs it too. */
+    form?: FormInstance<Schema>;
     children: ReactNode;
 };
-declare function Form({ onSubmit, children, className, ...rest }: FormProps): react.JSX.Element;
-declare function FormError({ children }: {
+declare function Form<Schema extends FormSchema = FormSchema>({ schema, defaultValues, mode, onSubmit, form: external, children, className, ...rest }: FormProps<Schema>): react.JSX.Element;
+type FormErrorProps = {
+    /** A message to show in place of the form's own root error. */
     children?: ReactNode;
-}): react.JSX.Element | null;
-type SubmitButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
-    loadingLabel?: ReactNode;
+    className?: string;
 };
-declare function SubmitButton({ children, loadingLabel, className, ...rest }: SubmitButtonProps): react.JSX.Element;
+/**
+ * The form-level error: a rejected credential, a failed request. Shows
+ * `children` when given, otherwise whatever `onSubmit` threw or
+ * `form.setError("root", …)` recorded. Renders nothing while there is none.
+ */
+declare function FormError(props: FormErrorProps): react.JSX.Element;
+type SubmitButtonProps = Omit<ButtonProps, "type" | "loading" | "asChild">;
+/**
+ * `Button` bound to the enclosing `Form`: always `type="submit"`, full width
+ * as the design's forms are, and loading for as long as `onSubmit` runs.
+ */
+declare function SubmitButton(props: SubmitButtonProps): react.JSX.Element;
 
-export { Form, FormError, type FormProps, SubmitButton, type SubmitButtonProps };
+export { Form, FormError, type FormErrorProps, type FormInput, type FormInstance, type FormOutput, type FormProps, type FormSchema, SubmitButton, type SubmitButtonProps, type UseFormInstanceOptions, useFormInstance };