@krizaka/ui 3.0.0 → 3.1.0

package/registry/examples/form/native/profile.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/form/native/profile.tsx
+import { KrizakaQueryProvider, useMutation } from "@krizaka/query";
+import { Button } from "@krizaka/ui/native";
+import { createKrizakaForm } from "@krizaka/ui/native/form";
+import { z } from "zod";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var profile = createKrizakaForm({
+  schema: z.object({ displayName: z.string().min(2).max(40), bio: z.string().max(160), category: z.enum(["travel", "music", "science", "sport"]), links: z.array(z.object({ url: z.url() })).max(3) }),
+  defaultValues: { displayName: "Elena Varga", bio: "Night skies over the Tatras.", category: "travel", links: [{ url: "https://elena.example" }] }
+});
+var CATEGORIES = [{ value: "travel", label: "Travel" }, { value: "music", label: "Music" }, { value: "science", label: "Science" }, { value: "sport", label: "Sport" }];
+function ProfileForm() {
+  const mutation = useMutation({ mutationFn: (values) => new Promise((done) => setTimeout(() => done(values), 400)) });
+  const form = profile.useForm({ onSubmit: (values) => mutation.mutateAsync(values) });
+  return /* @__PURE__ */ jsxs(form.Form, { "aria-label": "Your profile", style: { width: 312 }, children: [
+    /* @__PURE__ */ jsx(form.TextField, { name: "displayName", label: "Display name", autoComplete: "name" }),
+    /* @__PURE__ */ jsx(form.TextArea, { name: "bio", label: "Bio", maxLength: 160 }),
+    /* @__PURE__ */ jsx(form.RadioGroup, { name: "category", label: "Category", options: CATEGORIES }),
+    /* @__PURE__ */ jsx(form.FieldArray, { name: "links", children: (links) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      links.items.map((_, i) => /* @__PURE__ */ jsx(form.TextField, { name: `links[${i}].url`, label: `Link ${i + 1}`, keyboardType: "url", autoCapitalize: "none" }, i)),
+      links.items.length < 3 ? /* @__PURE__ */ jsx(Button, { label: "Add a link", variant: "ghost", size: "sm", onPress: () => links.push({ url: "" }) }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx(form.Submit, { label: "Save the profile" })
+  ] });
+}
+function NativeFormProfile() {
+  return /* @__PURE__ */ jsx(KrizakaQueryProvider, { children: /* @__PURE__ */ jsx(ProfileForm, {}) });
+}
+export {
+  NativeFormProfile as default
+};

package/registry/examples/form/native/profile.tsx

@@ -0,0 +1,36 @@
+import { KrizakaQueryProvider, useMutation } from "@krizaka/query";
+import { Button } from "@krizaka/ui/native";
+import { createKrizakaForm } from "@krizaka/ui/native/form";
+import { z } from "zod";
+
+const profile = createKrizakaForm({
+  schema: z.object({ displayName: z.string().min(2).max(40), bio: z.string().max(160), category: z.enum(["travel", "music", "science", "sport"]), links: z.array(z.object({ url: z.url() })).max(3) }),
+  defaultValues: { displayName: "Elena Varga", bio: "Night skies over the Tatras.", category: "travel" as "travel" | "music" | "science" | "sport", links: [{ url: "https://elena.example" }] },
+});
+const CATEGORIES = [{ value: "travel", label: "Travel" }, { value: "music", label: "Music" }, { value: "science", label: "Science" }, { value: "sport", label: "Sport" }];
+
+function ProfileForm() {
+  const mutation = useMutation({ mutationFn: (values: unknown) => new Promise((done) => setTimeout(() => done(values), 400)) });
+  const form = profile.useForm({ onSubmit: (values) => mutation.mutateAsync(values) });
+  return (
+    <form.Form aria-label="Your profile" style={{ width: 312 }}>
+      <form.TextField name="displayName" label="Display name" autoComplete="name" />
+      <form.TextArea name="bio" label="Bio" maxLength={160} />
+      <form.RadioGroup name="category" label="Category" options={CATEGORIES} />
+      <form.FieldArray name="links">
+        {(links) => (
+          <>
+            {links.items.map((_, i) => <form.TextField key={i} name={`links[${i}].url`} label={`Link ${i + 1}`} keyboardType="url" autoCapitalize="none" />)}
+            {links.items.length < 3 ? <Button label="Add a link" variant="ghost" size="sm" onPress={() => links.push({ url: "" })} /> : null}
+          </>
+        )}
+      </form.FieldArray>
+      <form.Submit label="Save the profile" />
+    </form.Form>
+  );
+}
+
+// A profile saved by a mutation of @krizaka/query; the list of links grows.
+export default function NativeFormProfile() {
+  return <KrizakaQueryProvider><ProfileForm /></KrizakaQueryProvider>;
+}

package/registry/examples/form/native/settings.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/form/native/settings.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/form/native/settings.tsx
+import { createKrizakaForm } from "@krizaka/ui/native/form";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var settings = createKrizakaForm({
+  schema: z.object({ language: z.enum(["en", "fr", "es"]), emailDigest: z.boolean(), pushMessages: z.boolean(), quality: z.enum(["auto", "data-saver", "best"]) }),
+  defaultValues: { language: "en", emailDigest: true, pushMessages: false, quality: "auto" }
+});
+var LANGUAGES = [{ value: "en", label: "English" }, { value: "fr", label: "Fran\xE7ais" }, { value: "es", label: "Espa\xF1ol" }];
+var QUALITY = [{ value: "auto", label: "Automatic" }, { value: "data-saver", label: "Data saver" }, { value: "best", label: "Best" }];
+function NativeFormSettings() {
+  const form = settings.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 400)) });
+  return /* @__PURE__ */ jsxs(form.Form, { "aria-label": "Settings", style: { width: 312 }, children: [
+    /* @__PURE__ */ jsx(form.Select, { name: "language", label: "Language", options: LANGUAGES }),
+    /* @__PURE__ */ jsx(form.Switch, { name: "emailDigest", label: "Weekly e-mail", hint: "What happened on your channel." }),
+    /* @__PURE__ */ jsx(form.Switch, { name: "pushMessages", label: "Message notifications" }),
+    /* @__PURE__ */ jsx(form.RadioGroup, { name: "quality", label: "Video quality", options: QUALITY }),
+    /* @__PURE__ */ jsx(form.Submit, { label: "Save the settings" })
+  ] });
+}
+export {
+  NativeFormSettings as default
+};

package/registry/examples/form/native/settings.tsx

@@ -0,0 +1,23 @@
+import { createKrizakaForm } from "@krizaka/ui/native/form";
+import { z } from "zod";
+
+const settings = createKrizakaForm({
+  schema: z.object({ language: z.enum(["en", "fr", "es"]), emailDigest: z.boolean(), pushMessages: z.boolean(), quality: z.enum(["auto", "data-saver", "best"]) }),
+  defaultValues: { language: "en" as "en" | "fr" | "es", emailDigest: true, pushMessages: false, quality: "auto" as "auto" | "data-saver" | "best" },
+});
+const LANGUAGES = [{ value: "en", label: "English" }, { value: "fr", label: "Français" }, { value: "es", label: "Español" }];
+const QUALITY = [{ value: "auto", label: "Automatic" }, { value: "data-saver", label: "Data saver" }, { value: "best", label: "Best" }];
+
+// The app's settings: the system's switches, chips for a choice — saved in one go.
+export default function NativeFormSettings() {
+  const form = settings.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 400)) });
+  return (
+    <form.Form aria-label="Settings" style={{ width: 312 }}>
+      <form.Select name="language" label="Language" options={LANGUAGES} />
+      <form.Switch name="emailDigest" label="Weekly e-mail" hint="What happened on your channel." />
+      <form.Switch name="pushMessages" label="Message notifications" />
+      <form.RadioGroup name="quality" label="Video quality" options={QUALITY} />
+      <form.Submit label="Save the settings" />
+    </form.Form>
+  );
+}

package/registry/examples/form/native/sign-up.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/form/native/sign-up.js

@@ -0,0 +1,38 @@
+"use client";
+
+// registry/examples/form/native/sign-up.tsx
+import { KrizakaApiError } from "@krizaka/query";
+import { createKrizakaForm, latestBirthDate } from "@krizaka/ui/native/form";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var signUp = createKrizakaForm({
+  schema: z.object({
+    email: z.email(),
+    username: z.string().min(3).max(30).regex(/^[a-z0-9_]+$/, "signUp.username.format"),
+    password: z.string().min(8),
+    dateOfBirth: z.iso.date().refine((d) => d <= latestBirthDate(18), "form.errors.UNDERAGE"),
+    acceptTerms: z.boolean().refine(Boolean, "signUp.terms.required")
+  }),
+  defaultValues: { email: "", username: "", password: "", dateOfBirth: "", acceptTerms: false }
+});
+var WORDS = { "signUp.username.format": "Lowercase letters, digits and _ only.", "signUp.username.taken": "This username is taken.", "signUp.terms.required": "Accept the terms to continue.", "form.errors.UNDERAGE": "You must be 18 or older.", "form.errors.BIRTH_DATE_INVALID": "Enter your real date of birth.", "form.errors.USERNAME_RESERVED": "This username is reserved.", "apiErrors.ACCOUNT_EXISTS": "This e-mail already has an account. Sign in instead." };
+var taken = (u) => new Promise((done) => setTimeout(() => done(["eric", "elena"].includes(u)), 300));
+var register = async (v) => {
+  if (v.username === "admin") throw new KrizakaApiError({ status: 400, code: "USERNAME_RESERVED" });
+  if (v.email.endsWith("@orochia.com")) throw new KrizakaApiError({ status: 409, code: "ACCOUNT_EXISTS" });
+};
+function NativeFormSignUp() {
+  const form = signUp.useForm({ i18n: { t: (key) => WORDS[key], locale: "en-GB" }, codeFields: { UNDERAGE: "dateOfBirth", BIRTH_DATE_INVALID: "dateOfBirth", USERNAME_RESERVED: "username" }, onSubmit: register });
+  return /* @__PURE__ */ jsxs(form.Form, { "aria-label": "Create your account", style: { width: 312 }, children: [
+    /* @__PURE__ */ jsx(form.TextField, { name: "email", label: "E-mail", keyboardType: "email-address", autoComplete: "email", autoCapitalize: "none", textContentType: "emailAddress" }),
+    /* @__PURE__ */ jsx(form.TextField, { name: "username", label: "Username", autoCapitalize: "none", autoComplete: "username", transform: (v) => v.toLowerCase().replace(/\s+/g, "_"), availableHint: "Free", validateAsync: async (u) => await taken(u) ? { key: "signUp.username.taken", suggestion: { label: `Use @${u}_${u.length}`, value: `${u}_${u.length}` } } : null }),
+    /* @__PURE__ */ jsx(form.TextField, { name: "password", label: "Password", secureTextEntry: true, autoComplete: "new-password", textContentType: "newPassword", hint: "At least 8 characters." }),
+    /* @__PURE__ */ jsx(form.DateField, { name: "dateOfBirth", label: "Date of birth", autoComplete: "bday", hint: "Private, never shown." }),
+    /* @__PURE__ */ jsx(form.Checkbox, { name: "acceptTerms", label: "I accept the terms and the privacy policy" }),
+    /* @__PURE__ */ jsx(form.FormError, {}),
+    /* @__PURE__ */ jsx(form.Submit, { label: "Create my account", brand: "orochia" })
+  ] });
+}
+export {
+  NativeFormSignUp as default
+};

package/registry/examples/form/native/sign-up.tsx

@@ -0,0 +1,34 @@
+import { KrizakaApiError } from "@krizaka/query";
+import { createKrizakaForm, latestBirthDate } from "@krizaka/ui/native/form";
+import { z } from "zod";
+
+// The same schema as the web form (a product keeps it in packages/core): the same rules, the same keys.
+const signUp = createKrizakaForm({
+  schema: z.object({
+    email: z.email(),
+    username: z.string().min(3).max(30).regex(/^[a-z0-9_]+$/, "signUp.username.format"),
+    password: z.string().min(8),
+    dateOfBirth: z.iso.date().refine((d) => d <= latestBirthDate(18), "form.errors.UNDERAGE"),
+    acceptTerms: z.boolean().refine(Boolean, "signUp.terms.required"),
+  }),
+  defaultValues: { email: "", username: "", password: "", dateOfBirth: "", acceptTerms: false },
+});
+const WORDS: Record<string, string> = { "signUp.username.format": "Lowercase letters, digits and _ only.", "signUp.username.taken": "This username is taken.", "signUp.terms.required": "Accept the terms to continue.", "form.errors.UNDERAGE": "You must be 18 or older.", "form.errors.BIRTH_DATE_INVALID": "Enter your real date of birth.", "form.errors.USERNAME_RESERVED": "This username is reserved.", "apiErrors.ACCOUNT_EXISTS": "This e-mail already has an account. Sign in instead." };
+const taken = (u: string) => new Promise<boolean>((done) => setTimeout(() => done(["eric", "elena"].includes(u)), 300));
+const register = async (v: { email: string; username: string }) => { if (v.username === "admin") throw new KrizakaApiError({ status: 400, code: "USERNAME_RESERVED" }); if (v.email.endsWith("@orochia.com")) throw new KrizakaApiError({ status: 409, code: "ACCOUNT_EXISTS" }); };
+
+// Sign-up in the app: the return key walks the fields, the username is checked as typed, the 18+ birth date is day · month · year.
+export default function NativeFormSignUp() {
+  const form = signUp.useForm({ i18n: { t: (key) => WORDS[key], locale: "en-GB" }, codeFields: { UNDERAGE: "dateOfBirth", BIRTH_DATE_INVALID: "dateOfBirth", USERNAME_RESERVED: "username" }, onSubmit: register });
+  return (
+    <form.Form aria-label="Create your account" style={{ width: 312 }}>
+      <form.TextField name="email" label="E-mail" keyboardType="email-address" autoComplete="email" autoCapitalize="none" textContentType="emailAddress" />
+      <form.TextField name="username" label="Username" autoCapitalize="none" autoComplete="username" transform={(v) => v.toLowerCase().replace(/\s+/g, "_")} availableHint="Free" validateAsync={async (u) => ((await taken(u)) ? { key: "signUp.username.taken", suggestion: { label: `Use @${u}_${u.length}`, value: `${u}_${u.length}` } } : null)} />
+      <form.TextField name="password" label="Password" secureTextEntry autoComplete="new-password" textContentType="newPassword" hint="At least 8 characters." />
+      <form.DateField name="dateOfBirth" label="Date of birth" autoComplete="bday" hint="Private, never shown." />
+      <form.Checkbox name="acceptTerms" label="I accept the terms and the privacy policy" />
+      <form.FormError />
+      <form.Submit label="Create my account" brand="orochia" />
+    </form.Form>
+  );
+}

package/registry/examples/form/native/upload.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/form/native/upload.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/form/native/upload.tsx
+import { createKrizakaForm } from "@krizaka/ui/native/form";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var upload = createKrizakaForm({
+  schema: z.object({ title: z.string().min(3).max(100), description: z.string().max(2e3), visibility: z.enum(["public", "followers", "private"]) }),
+  defaultValues: { title: "Sunrise over Rysy", description: "", visibility: "public" }
+});
+var VISIBILITY = [{ value: "public", label: "Everyone" }, { value: "followers", label: "Followers" }, { value: "private", label: "Only me" }];
+function NativeFormUpload() {
+  const form = upload.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 600)) });
+  return /* @__PURE__ */ jsxs(form.Form, { "aria-label": "Publish a video", style: { width: 312 }, children: [
+    /* @__PURE__ */ jsx(form.TextField, { name: "title", label: "Title", maxLength: 100 }),
+    /* @__PURE__ */ jsx(form.TextArea, { name: "description", label: "Description", placeholder: "What happens in it?" }),
+    /* @__PURE__ */ jsx(form.RadioGroup, { name: "visibility", label: "Who can watch", options: VISIBILITY }),
+    /* @__PURE__ */ jsx(form.Submit, { label: "Publish" })
+  ] });
+}
+export {
+  NativeFormUpload as default
+};

package/registry/examples/form/native/upload.tsx

@@ -0,0 +1,22 @@
+import { createKrizakaForm } from "@krizaka/ui/native/form";
+import { z } from "zod";
+
+// What describes a video picked from the library (the picker is the app's: expo-image-picker): title, description, audience.
+const upload = createKrizakaForm({
+  schema: z.object({ title: z.string().min(3).max(100), description: z.string().max(2000), visibility: z.enum(["public", "followers", "private"]) }),
+  defaultValues: { title: "Sunrise over Rysy", description: "", visibility: "public" as "public" | "followers" | "private" },
+});
+const VISIBILITY = [{ value: "public", label: "Everyone" }, { value: "followers", label: "Followers" }, { value: "private", label: "Only me" }];
+
+// The details of an upload, then the button that publishes them with the file.
+export default function NativeFormUpload() {
+  const form = upload.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 600)) });
+  return (
+    <form.Form aria-label="Publish a video" style={{ width: 312 }}>
+      <form.TextField name="title" label="Title" maxLength={100} />
+      <form.TextArea name="description" label="Description" placeholder="What happens in it?" />
+      <form.RadioGroup name="visibility" label="Who can watch" options={VISIBILITY} />
+      <form.Submit label="Publish" />
+    </form.Form>
+  );
+}

package/registry/examples/form/profile.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/form/profile.js

@@ -0,0 +1,35 @@
+"use client";
+
+// registry/examples/form/profile.tsx
+import { KrizakaQueryProvider, useMutation } from "@krizaka/query";
+import { Button } from "@krizaka/ui/button";
+import { createKrizakaForm } from "@krizaka/ui/form";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var profile = createKrizakaForm({
+  schema: z.object({ displayName: z.string().min(2).max(40), bio: z.string().max(160), categories: z.array(z.string()).min(1).max(3), tags: z.array(z.string()).max(10), links: z.array(z.object({ url: z.url() })).max(3) }),
+  defaultValues: { displayName: "Elena Varga", bio: "Night skies over the Tatras.", categories: ["travel"], tags: ["astro", "mountains"], links: [{ url: "https://elena.example" }] }
+});
+var CATEGORIES = [{ value: "travel", label: "Travel" }, { value: "music", label: "Music" }, { value: "science", label: "Science" }, { value: "sport", label: "Sport" }];
+function ProfileForm() {
+  const mutation = useMutation({ mutationFn: (values) => new Promise((done) => setTimeout(() => done(values), 400)) });
+  const form = profile.useForm({ onSubmit: (values) => mutation.mutateAsync(values) });
+  return /* @__PURE__ */ jsxs(form.Form, { "aria-label": "Your profile", className: "flex w-96 flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(form.TextField, { name: "displayName", label: "Display name", autoComplete: "name" }),
+    /* @__PURE__ */ jsx(form.TextArea, { name: "bio", label: "Bio", rows: 3, maxLength: 160, hint: "Up to 160 characters." }),
+    /* @__PURE__ */ jsx(form.Combobox, { name: "categories", label: "Categories", multiple: true, options: CATEGORIES, hint: "Up to three." }),
+    /* @__PURE__ */ jsx(form.TagInput, { name: "tags", label: "Tags", max: 10, normalize: (t) => t.toLowerCase().replace(/^#/, "") }),
+    /* @__PURE__ */ jsx(form.FieldArray, { name: "links", children: (links) => /* @__PURE__ */ jsxs("fieldset", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("legend", { className: "text-xs font-semibold text-fg-secondary", children: "Links" }),
+      links.items.map((_, i) => /* @__PURE__ */ jsx(form.TextField, { name: `links[${i}].url`, label: `Link ${i + 1}`, type: "url" }, i)),
+      links.items.length < 3 ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => links.push({ url: "" }), children: "Add a link" }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx(form.Submit, { children: "Save the profile" })
+  ] });
+}
+function FormProfile() {
+  return /* @__PURE__ */ jsx(KrizakaQueryProvider, { children: /* @__PURE__ */ jsx(ProfileForm, {}) });
+}
+export {
+  FormProfile as default
+};

package/registry/examples/form/profile.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { KrizakaQueryProvider, useMutation } from "@krizaka/query";
+import { Button } from "@krizaka/ui/button";
+import { createKrizakaForm } from "@krizaka/ui/form";
+import { z } from "zod";
+
+const profile = createKrizakaForm({
+  schema: z.object({ displayName: z.string().min(2).max(40), bio: z.string().max(160), categories: z.array(z.string()).min(1).max(3), tags: z.array(z.string()).max(10), links: z.array(z.object({ url: z.url() })).max(3) }),
+  defaultValues: { displayName: "Elena Varga", bio: "Night skies over the Tatras.", categories: ["travel"], tags: ["astro", "mountains"], links: [{ url: "https://elena.example" }] },
+});
+const CATEGORIES = [{ value: "travel", label: "Travel" }, { value: "music", label: "Music" }, { value: "science", label: "Science" }, { value: "sport", label: "Sport" }];
+
+function ProfileForm() {
+  const mutation = useMutation({ mutationFn: (values: unknown) => new Promise((done) => setTimeout(() => done(values), 400)) });
+  const form = profile.useForm({ onSubmit: (values) => mutation.mutateAsync(values) });
+  return (
+    <form.Form aria-label="Your profile" className="flex w-96 flex-col gap-4">
+      <form.TextField name="displayName" label="Display name" autoComplete="name" />
+      <form.TextArea name="bio" label="Bio" rows={3} maxLength={160} hint="Up to 160 characters." />
+      <form.Combobox name="categories" label="Categories" multiple options={CATEGORIES} hint="Up to three." />
+      <form.TagInput name="tags" label="Tags" max={10} normalize={(t) => t.toLowerCase().replace(/^#/, "")} />
+      <form.FieldArray name="links">
+        {(links) => (
+          <fieldset className="flex flex-col gap-2">
+            <legend className="text-xs font-semibold text-fg-secondary">Links</legend>
+            {links.items.map((_, i) => <form.TextField key={i} name={`links[${i}].url`} label={`Link ${i + 1}`} type="url" />)}
+            {links.items.length < 3 ? <Button type="button" size="sm" variant="ghost" onClick={() => links.push({ url: "" })}>Add a link</Button> : null}
+          </fieldset>
+        )}
+      </form.FieldArray>
+      <form.Submit>Save the profile</form.Submit>
+    </form.Form>
+  );
+}
+
+// A profile saved by a mutation of @krizaka/query: categories, tags, a list of links that grows.
+export default function FormProfile() {
+  return <KrizakaQueryProvider><ProfileForm /></KrizakaQueryProvider>;
+}

package/registry/examples/form/report.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/form/report.js

@@ -0,0 +1,30 @@
+"use client";
+
+// registry/examples/form/report.tsx
+import { createKrizakaForm } from "@krizaka/ui/form";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var report = createKrizakaForm({
+  schema: z.object({ reason: z.enum(["spam", "harassment", "minor", "copyright", "other"], { message: "report.reason.required" }), details: z.string().max(500), block: z.boolean() }),
+  defaultValues: { reason: "", details: "", block: false },
+  i18n: { t: (key) => key === "report.reason.required" ? "Choose what is wrong." : void 0 }
+});
+var REASONS = [
+  { value: "spam", label: "Spam or a scam" },
+  { value: "harassment", label: "Harassment" },
+  { value: "minor", label: "It may involve a minor" },
+  { value: "copyright", label: "It uses my work" },
+  { value: "other", label: "Something else" }
+];
+function FormReport() {
+  const form = report.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 400)) });
+  return /* @__PURE__ */ jsxs(form.Form, { "aria-label": "Report this video", className: "flex w-80 flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(form.RadioGroup, { name: "reason", label: "What is wrong?", options: REASONS }),
+    /* @__PURE__ */ jsx(form.TextArea, { name: "details", label: "Details", hint: "Optional. What should our team look at?", rows: 3, maxLength: 500 }),
+    /* @__PURE__ */ jsx(form.Checkbox, { name: "block", label: "Also block this account" }),
+    /* @__PURE__ */ jsx(form.Submit, { variant: "danger", children: "Send the report" })
+  ] });
+}
+export {
+  FormReport as default
+};

package/registry/examples/form/report.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { createKrizakaForm } from "@krizaka/ui/form";
+import { z } from "zod";
+
+const report = createKrizakaForm({
+  schema: z.object({ reason: z.enum(["spam", "harassment", "minor", "copyright", "other"], { message: "report.reason.required" }), details: z.string().max(500), block: z.boolean() }),
+  defaultValues: { reason: "" as unknown as "spam", details: "", block: false },
+  i18n: { t: (key) => (key === "report.reason.required" ? "Choose what is wrong." : undefined) },
+});
+const REASONS = [
+  { value: "spam", label: "Spam or a scam" },
+  { value: "harassment", label: "Harassment" },
+  { value: "minor", label: "It may involve a minor" },
+  { value: "copyright", label: "It uses my work" },
+  { value: "other", label: "Something else" },
+];
+
+// A report: one reason among a few, details, and blocking the account in the same step.
+export default function FormReport() {
+  const form = report.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 400)) });
+  return (
+    <form.Form aria-label="Report this video" className="flex w-80 flex-col gap-4">
+      <form.RadioGroup name="reason" label="What is wrong?" options={REASONS} />
+      <form.TextArea name="details" label="Details" hint="Optional. What should our team look at?" rows={3} maxLength={500} />
+      <form.Checkbox name="block" label="Also block this account" />
+      <form.Submit variant="danger">Send the report</form.Submit>
+    </form.Form>
+  );
+}

package/registry/examples/form/settings.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/form/settings.js

@@ -0,0 +1,30 @@
+"use client";
+
+// registry/examples/form/settings.tsx
+import { createKrizakaForm } from "@krizaka/ui/form";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var settings = createKrizakaForm({
+  schema: z.object({ language: z.enum(["en", "fr", "es"]), emailDigest: z.boolean(), pushMessages: z.boolean(), autoplayVolume: z.number().min(0).max(100), quality: z.enum(["auto", "data-saver", "best"]) }),
+  defaultValues: { language: "en", emailDigest: true, pushMessages: false, autoplayVolume: 40, quality: "auto" }
+});
+var LANGUAGES = [{ value: "en", label: "English" }, { value: "fr", label: "Fran\xE7ais" }, { value: "es", label: "Espa\xF1ol" }];
+var QUALITY = [{ value: "auto", label: "Automatic" }, { value: "data-saver", label: "Data saver" }, { value: "best", label: "Best" }];
+async function saveSettings() {
+  await new Promise((done) => setTimeout(done, 400));
+  return { ok: true };
+}
+function FormSettings() {
+  const form = settings.useFormWithAction(saveSettings);
+  return /* @__PURE__ */ jsxs(form.Form, { "aria-label": "Settings", className: "flex w-96 flex-col gap-5", children: [
+    /* @__PURE__ */ jsx(form.Select, { name: "language", label: "Language", options: LANGUAGES }),
+    /* @__PURE__ */ jsx(form.Switch, { name: "emailDigest", label: "Weekly e-mail", hint: "What happened on your channel." }),
+    /* @__PURE__ */ jsx(form.Switch, { name: "pushMessages", label: "Message notifications" }),
+    /* @__PURE__ */ jsx(form.Slider, { name: "autoplayVolume", label: "Autoplay volume", step: 10, formatValue: (v) => `${v} %` }),
+    /* @__PURE__ */ jsx(form.RadioGroup, { name: "quality", label: "Video quality", options: QUALITY, orientation: "horizontal" }),
+    /* @__PURE__ */ jsx(form.Submit, { children: "Save the settings" })
+  ] });
+}
+export {
+  FormSettings as default
+};

package/registry/examples/form/settings.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { createKrizakaForm, type FormActionResult } from "@krizaka/ui/form";
+import { z } from "zod";
+
+const settings = createKrizakaForm({
+  schema: z.object({ language: z.enum(["en", "fr", "es"]), emailDigest: z.boolean(), pushMessages: z.boolean(), autoplayVolume: z.number().min(0).max(100), quality: z.enum(["auto", "data-saver", "best"]) }),
+  defaultValues: { language: "en" as "en" | "fr" | "es", emailDigest: true, pushMessages: false, autoplayVolume: 40, quality: "auto" as "auto" | "data-saver" | "best" },
+});
+const LANGUAGES = [{ value: "en", label: "English" }, { value: "fr", label: "Français" }, { value: "es", label: "Español" }];
+const QUALITY = [{ value: "auto", label: "Automatic" }, { value: "data-saver", label: "Data saver" }, { value: "best", label: "Best" }];
+// What a Server Action answers (`"use server"` in the app): done, or a refusal the form shows.
+async function saveSettings(): Promise<FormActionResult> {
+  await new Promise((done) => setTimeout(done, 400));
+  return { ok: true };
+}
+
+// Settings sent by a Server Action (`useFormWithAction`): switches, a menu, a slider, a choice.
+export default function FormSettings() {
+  const form = settings.useFormWithAction(saveSettings);
+  return (
+    <form.Form aria-label="Settings" className="flex w-96 flex-col gap-5">
+      <form.Select name="language" label="Language" options={LANGUAGES} />
+      <form.Switch name="emailDigest" label="Weekly e-mail" hint="What happened on your channel." />
+      <form.Switch name="pushMessages" label="Message notifications" />
+      <form.Slider name="autoplayVolume" label="Autoplay volume" step={10} formatValue={(v) => `${v} %`} />
+      <form.RadioGroup name="quality" label="Video quality" options={QUALITY} orientation="horizontal" />
+      <form.Submit>Save the settings</form.Submit>
+    </form.Form>
+  );
+}

package/registry/examples/form/sign-up.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/form/sign-up.js

@@ -0,0 +1,38 @@
+"use client";
+
+// registry/examples/form/sign-up.tsx
+import { KrizakaApiError } from "@krizaka/query";
+import { createKrizakaForm, latestBirthDate } from "@krizaka/ui/form";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var signUp = createKrizakaForm({
+  schema: z.object({
+    email: z.email(),
+    username: z.string().min(3).max(30).regex(/^[a-z0-9_]+$/, "signUp.username.format"),
+    password: z.string().min(8),
+    dateOfBirth: z.iso.date().refine((d) => d <= latestBirthDate(18), "form.errors.UNDERAGE"),
+    acceptTerms: z.boolean().refine(Boolean, "signUp.terms.required")
+  }),
+  defaultValues: { email: "", username: "", password: "", dateOfBirth: "", acceptTerms: false }
+});
+var WORDS = { "signUp.username.format": "Lowercase letters, digits and _ only.", "signUp.username.taken": "This username is taken.", "signUp.terms.required": "Accept the terms to continue.", "form.errors.UNDERAGE": "You must be 18 or older.", "form.errors.BIRTH_DATE_INVALID": "Enter your real date of birth.", "form.errors.USERNAME_RESERVED": "This username is reserved.", "apiErrors.ACCOUNT_EXISTS": "This e-mail already has an account. Sign in instead." };
+var taken = (u) => new Promise((done) => setTimeout(() => done(["eric", "elena"].includes(u)), 300));
+var register = async (v) => {
+  if (v.username === "admin") throw new KrizakaApiError({ status: 400, code: "USERNAME_RESERVED" });
+  if (v.email.endsWith("@orochia.com")) throw new KrizakaApiError({ status: 409, code: "ACCOUNT_EXISTS" });
+};
+function FormSignUp() {
+  const form = signUp.useForm({ i18n: { t: (key) => WORDS[key] }, codeFields: { UNDERAGE: "dateOfBirth", BIRTH_DATE_INVALID: "dateOfBirth", USERNAME_RESERVED: "username" }, onSubmit: register });
+  return /* @__PURE__ */ jsxs(form.Form, { "aria-label": "Create your account", className: "flex w-80 flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(form.TextField, { name: "email", label: "E-mail", type: "email", autoComplete: "email", hint: "We send a link to confirm it." }),
+    /* @__PURE__ */ jsx(form.TextField, { name: "username", label: "Username", start: "@", autoComplete: "username", transform: (v) => v.toLowerCase().replace(/\s+/g, "_"), availableHint: "Free", validateAsync: async (u) => await taken(u) ? { key: "signUp.username.taken", suggestion: { label: `Use @${u}_${u.length}`, value: `${u}_${u.length}` } } : null }),
+    /* @__PURE__ */ jsx(form.TextField, { name: "password", label: "Password", type: "password", autoComplete: "new-password", hint: "At least 8 characters." }),
+    /* @__PURE__ */ jsx(form.DateField, { name: "dateOfBirth", label: "Date of birth", entry: "parts", autoComplete: "bday", hint: "Private, never shown." }),
+    /* @__PURE__ */ jsx(form.Checkbox, { name: "acceptTerms", label: "I accept the terms and the privacy policy" }),
+    /* @__PURE__ */ jsx(form.FormError, {}),
+    /* @__PURE__ */ jsx(form.Submit, { children: "Create my account" })
+  ] });
+}
+export {
+  FormSignUp as default
+};

package/registry/examples/form/sign-up.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { KrizakaApiError } from "@krizaka/query";
+import { createKrizakaForm, latestBirthDate } from "@krizaka/ui/form";
+import { z } from "zod";
+
+// The schema the sign-up API parses with: the same rules, the same keys. `signUp.*` are the app's own words.
+const signUp = createKrizakaForm({
+  schema: z.object({
+    email: z.email(),
+    username: z.string().min(3).max(30).regex(/^[a-z0-9_]+$/, "signUp.username.format"),
+    password: z.string().min(8),
+    dateOfBirth: z.iso.date().refine((d) => d <= latestBirthDate(18), "form.errors.UNDERAGE"),
+    acceptTerms: z.boolean().refine(Boolean, "signUp.terms.required"),
+  }),
+  defaultValues: { email: "", username: "", password: "", dateOfBirth: "", acceptTerms: false },
+});
+const WORDS: Record<string, string> = { "signUp.username.format": "Lowercase letters, digits and _ only.", "signUp.username.taken": "This username is taken.", "signUp.terms.required": "Accept the terms to continue.", "form.errors.UNDERAGE": "You must be 18 or older.", "form.errors.BIRTH_DATE_INVALID": "Enter your real date of birth.", "form.errors.USERNAME_RESERVED": "This username is reserved.", "apiErrors.ACCOUNT_EXISTS": "This e-mail already has an account. Sign in instead." };
+const taken = (u: string) => new Promise<boolean>((done) => setTimeout(() => done(["eric", "elena"].includes(u)), 300));
+// The server's codes (Orochia's register API): the ones that belong to a field land under it, the others above the button.
+const register = async (v: { email: string; username: string }) => { if (v.username === "admin") throw new KrizakaApiError({ status: 400, code: "USERNAME_RESERVED" }); if (v.email.endsWith("@orochia.com")) throw new KrizakaApiError({ status: 409, code: "ACCOUNT_EXISTS" }); };
+
+// Orochia's sign-up: the username checked as it is typed (a free one offered), an 18+ birth date, the server's refusals in place.
+export default function FormSignUp() {
+  const form = signUp.useForm({ i18n: { t: (key) => WORDS[key] }, codeFields: { UNDERAGE: "dateOfBirth", BIRTH_DATE_INVALID: "dateOfBirth", USERNAME_RESERVED: "username" }, onSubmit: register });
+  return (
+    <form.Form aria-label="Create your account" className="flex w-80 flex-col gap-4">
+      <form.TextField name="email" label="E-mail" type="email" autoComplete="email" hint="We send a link to confirm it." />
+      <form.TextField name="username" label="Username" start="@" autoComplete="username" transform={(v) => v.toLowerCase().replace(/\s+/g, "_")} availableHint="Free" validateAsync={async (u) => ((await taken(u)) ? { key: "signUp.username.taken", suggestion: { label: `Use @${u}_${u.length}`, value: `${u}_${u.length}` } } : null)} />
+      <form.TextField name="password" label="Password" type="password" autoComplete="new-password" hint="At least 8 characters." />
+      <form.DateField name="dateOfBirth" label="Date of birth" entry="parts" autoComplete="bday" hint="Private, never shown." />
+      <form.Checkbox name="acceptTerms" label="I accept the terms and the privacy policy" />
+      <form.FormError />
+      <form.Submit>Create my account</form.Submit>
+    </form.Form>
+  );
+}

package/registry/examples/form/upload.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;