@krizaka/ui 3.0.0 → 3.2.0

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;

package/registry/examples/form/upload.js

@@ -0,0 +1,32 @@
+"use client";
+
+// registry/examples/form/upload.tsx
+import { createKrizakaForm } from "@krizaka/ui/form";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var upload = createKrizakaForm({
+  schema: z.object({
+    video: z.array(z.instanceof(Blob)).length(1, "upload.video.required"),
+    title: z.string().min(3).max(100),
+    description: z.string().max(2e3),
+    tags: z.array(z.string()).max(10),
+    visibility: z.enum(["public", "followers", "private"])
+  }),
+  defaultValues: { video: [], title: "", description: "", tags: [], visibility: "public" },
+  i18n: { t: (key) => key === "upload.video.required" ? "Choose the video to publish." : void 0 }
+});
+var VISIBILITY = [{ value: "public", label: "Everyone" }, { value: "followers", label: "My followers" }, { value: "private", label: "Only me" }];
+function FormUpload() {
+  const form = upload.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 600)) });
+  return /* @__PURE__ */ jsxs(form.Form, { "aria-label": "Publish a video", className: "flex w-96 flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(form.FileUpload, { name: "video", label: "Video", title: "Drop your video here", browseLabel: "Choose a file", hint: "MP4 or MOV, up to 4 GB.", accept: "video/*", maxSize: 4 * 1024 ** 3, removeLabel: (file) => `Remove ${file}` }),
+    /* @__PURE__ */ jsx(form.TextField, { name: "title", label: "Title", maxLength: 100 }),
+    /* @__PURE__ */ jsx(form.TextArea, { name: "description", label: "Description", rows: 3 }),
+    /* @__PURE__ */ jsx(form.TagInput, { name: "tags", label: "Tags", max: 10, hint: "Up to 10, separated by commas." }),
+    /* @__PURE__ */ jsx(form.Select, { name: "visibility", label: "Who can watch", options: VISIBILITY }),
+    /* @__PURE__ */ jsx(form.Submit, { children: "Publish" })
+  ] });
+}
+export {
+  FormUpload as default
+};

package/registry/examples/form/upload.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { createKrizakaForm } from "@krizaka/ui/form";
+import { z } from "zod";
+
+const upload = createKrizakaForm({
+  schema: z.object({
+    video: z.array(z.instanceof(Blob)).length(1, "upload.video.required"),
+    title: z.string().min(3).max(100),
+    description: z.string().max(2000),
+    tags: z.array(z.string()).max(10),
+    visibility: z.enum(["public", "followers", "private"]),
+  }),
+  defaultValues: { video: [] as Blob[], title: "", description: "", tags: [] as string[], visibility: "public" as const },
+  i18n: { t: (key) => (key === "upload.video.required" ? "Choose the video to publish." : undefined) },
+});
+const VISIBILITY = [{ value: "public", label: "Everyone" }, { value: "followers", label: "My followers" }, { value: "private", label: "Only me" }];
+
+// A video and what describes it: the file, a title, a description, tags and who sees it — sent once, together.
+export default function FormUpload() {
+  const form = upload.useForm({ onSubmit: (values) => new Promise((done) => setTimeout(() => done(values), 600)) });
+  return (
+    <form.Form aria-label="Publish a video" className="flex w-96 flex-col gap-4">
+      <form.FileUpload name="video" label="Video" title="Drop your video here" browseLabel="Choose a file" hint="MP4 or MOV, up to 4 GB." accept="video/*" maxSize={4 * 1024 ** 3} removeLabel={(file) => `Remove ${file}`} />
+      <form.TextField name="title" label="Title" maxLength={100} />
+      <form.TextArea name="description" label="Description" rows={3} />
+      <form.TagInput name="tags" label="Tags" max={10} hint="Up to 10, separated by commas." />
+      <form.Select name="visibility" label="Who can watch" options={VISIBILITY} />
+      <form.Submit>Publish</form.Submit>
+    </form.Form>
+  );
+}

package/registry/field.json

@@ -6,7 +6,7 @@
   "description": "A form field: a label, a hint and an error around an `Input`, a `Textarea` or a native `Select`.",
   "status": "stable",
   "category": "forms",
-  "platforms": "web",
+  "platforms": "both",
   "whenToUse": [
     "For every text entry of a form: email, title, description, amount.",
     "`Select` for a choice among many options (a country): the platform's own menu, right on phones."
@@ -131,7 +131,107 @@
       }
     ]
   },
-  "native": null,
+  "native": {
+    "entry": "@krizaka/ui/native",
+    "import": "import { TextField } from \"@krizaka/ui/native\";",
+    "differences": [
+      "One component, `TextField`: the label, the input, the hint or the error together (no `Field.*` parts, no `htmlFor`).",
+      "Every `TextInput` prop passes through (`secureTextEntry`, `keyboardType`, `autoComplete`, `returnKeyType`); `multiline` is the text area; `onValueChange` gives the text.",
+      "`end` holds an adornment (a spinner, a check, a show-password button); `inputRef` focuses the input. No `Select`: a choice is a `Chip.Group` or a screen."
+    ],
+    "props": [
+      {
+        "component": "TextField",
+        "description": "A text field for React Native: its label, the input (every `TextInput` prop: `secureTextEntry`, `keyboardType`,\n`autoComplete`, `returnKeyType`…), a hint or an error under it — the web `Field` + `Input`. `multiline` makes it a\ntext area.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label above the input, passed translated (also its accessible name).",
+            "required": true
+          },
+          {
+            "name": "defaultValue",
+            "type": "string",
+            "default": null,
+            "description": "The text at first, uncontrolled.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available: dimmed, not focusable.",
+            "required": false
+          },
+          {
+            "name": "end",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Something at the end of the input: a spinner while a value is checked, a check once it is, a show-password button.",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "string",
+            "default": null,
+            "description": "An error under the input: a danger border and caption, read with it and announced. Replaces the hint.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the input (\"At least 8 characters\"), read with it.",
+            "required": false
+          },
+          {
+            "name": "inputRef",
+            "type": "Ref<TextInput>",
+            "default": null,
+            "description": "The input itself, to focus it (`ref.current?.focus()`) or move to the next field.",
+            "required": false
+          },
+          {
+            "name": "onValueChange",
+            "type": "((text: string) => void)",
+            "default": null,
+            "description": "Called on every key with the text.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field (label, input, caption).",
+            "required": false
+          },
+          {
+            "name": "value",
+            "type": "string",
+            "default": null,
+            "description": "The text (controlled).",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "default",
+        "title": "Sign-up fields",
+        "description": "E-mail and password: the right keyboards, autofill, a hint, then an error in place of the hint.",
+        "path": "examples/field/native/default.tsx",
+        "module": "@krizaka/ui/registry/examples/field/native/default",
+        "code": "import { TextField } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\n// The e-mail and the password of a sign-up: the right keyboards and autofill, a hint, then an error in its place.\nexport default function NativeFieldDefault() {\n  const [email, setEmail] = React.useState(\"eric@example.com\");\n  const [password, setPassword] = React.useState(\"hunter\");\n  return (\n    <View style={{ gap: 16, width: 296 }}>\n      <TextField label=\"E-mail\" value={email} onValueChange={setEmail} keyboardType=\"email-address\" autoComplete=\"email\" autoCapitalize=\"none\" textContentType=\"emailAddress\" hint=\"We send a link to confirm it.\" />\n      <TextField\n        label=\"Password\"\n        value={password}\n        onValueChange={setPassword}\n        secureTextEntry\n        autoComplete=\"new-password\"\n        textContentType=\"newPassword\"\n        error={password.length < 8 ? \"Use at least 8 characters.\" : undefined}\n      />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/field/native/default.dark.png",
+          "light": "examples/field/native/default.light.png"
+        }
+      }
+    ]
+  },
   "files": [
     {
       "path": "field/field.tsx",
@@ -143,11 +243,11 @@
     },
     {
       "path": "field/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Field\",\n  summary: \"A form field: a label, a hint and an error around an `Input`, a `Textarea` or a native `Select`.\",\n  status: \"stable\",\n  category: \"forms\",\n  platforms: \"web\",\n  whenToUse: [\n    \"For every text entry of a form: email, title, description, amount.\",\n    \"`Select` for a choice among many options (a country): the platform's own menu, right on phones.\",\n  ],\n  whenNotToUse: [\n    { when: \"To turn a setting on or off.\", use: \"switch\" },\n    { when: \"To choose among two to five options that should all be visible.\", use: \"radio-group\" },\n    { when: \"To pick a number in a range by feel.\", use: \"slider\" },\n  ],\n  bestPractices: [\n    \"Always a visible `Field.Label`: a placeholder is an example, never the label.\",\n    \"Put the hint before the error is possible (“We never share it”), the error after it is: what is wrong and how to fix it.\",\n    \"Use the right `type` (`email`, `url`, `number`) and `autoComplete`: phones show the right keyboard.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"Plain HTML wiring: `Field.Label htmlFor` = the control's `id`; hint and error ids in `aria-describedby`.\",\n      \"`invalid` sets `aria-invalid` and `data-invalid` on the control.\",\n      \"A disabled control is skipped by Tab: if the value matters, prefer `readOnly`.\",\n    ],\n  },\n  related: [\"checkbox\", \"switch\", \"radio-group\", \"slider\"],\n  web: {\n    imports: [\"Field\", \"Input\", \"Textarea\", \"Select\"],\n    examples: [\n      { name: \"default\", title: \"Default\", description: \"A label, an input and a hint.\" },\n      { name: \"invalid\", title: \"Invalid\", description: \"`invalid` and its error, read through `aria-describedby`.\" },\n      { name: \"disabled\", title: \"Disabled\", description: \"Not editable.\" },\n      { name: \"textarea\", title: \"Textarea\", description: \"A longer text.\" },\n      { name: \"select\", title: \"Select\", description: \"A native select.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Field\",\n  summary: \"A form field: a label, a hint and an error around an `Input`, a `Textarea` or a native `Select`.\",\n  status: \"stable\",\n  category: \"forms\",\n  platforms: \"both\",\n  whenToUse: [\n    \"For every text entry of a form: email, title, description, amount.\",\n    \"`Select` for a choice among many options (a country): the platform's own menu, right on phones.\",\n  ],\n  whenNotToUse: [\n    { when: \"To turn a setting on or off.\", use: \"switch\" },\n    { when: \"To choose among two to five options that should all be visible.\", use: \"radio-group\" },\n    { when: \"To pick a number in a range by feel.\", use: \"slider\" },\n  ],\n  bestPractices: [\n    \"Always a visible `Field.Label`: a placeholder is an example, never the label.\",\n    \"Put the hint before the error is possible (“We never share it”), the error after it is: what is wrong and how to fix it.\",\n    \"Use the right `type` (`email`, `url`, `number`) and `autoComplete`: phones show the right keyboard.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"Plain HTML wiring: `Field.Label htmlFor` = the control's `id`; hint and error ids in `aria-describedby`.\",\n      \"`invalid` sets `aria-invalid` and `data-invalid` on the control.\",\n      \"A disabled control is skipped by Tab: if the value matters, prefer `readOnly`.\",\n    ],\n  },\n  related: [\"checkbox\", \"switch\", \"radio-group\", \"slider\"],\n  web: {\n    imports: [\"Field\", \"Input\", \"Textarea\", \"Select\"],\n    examples: [\n      { name: \"default\", title: \"Default\", description: \"A label, an input and a hint.\" },\n      { name: \"invalid\", title: \"Invalid\", description: \"`invalid` and its error, read through `aria-describedby`.\" },\n      { name: \"disabled\", title: \"Disabled\", description: \"Not editable.\" },\n      { name: \"textarea\", title: \"Textarea\", description: \"A longer text.\" },\n      { name: \"select\", title: \"Select\", description: \"A native select.\" },\n    ],\n  },\n  native: {\n    imports: [\"TextField\"],\n    differences: [\n      \"One component, `TextField`: the label, the input, the hint or the error together (no `Field.*` parts, no `htmlFor`).\",\n      \"Every `TextInput` prop passes through (`secureTextEntry`, `keyboardType`, `autoComplete`, `returnKeyType`); `multiline` is the text area; `onValueChange` gives the text.\",\n      \"`end` holds an adornment (a spinner, a check, a show-password button); `inputRef` focuses the input. No `Select`: a choice is a `Chip.Group` or a screen.\",\n    ],\n    examples: [\n      { name: \"default\", title: \"Sign-up fields\", description: \"E-mail and password: the right keyboards, autofill, a hint, then an error in place of the hint.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [