@krizaka/ui 3.2.0 → 3.3.0

package/registry/form.json

@@ -31,7 +31,7 @@
     "Name refusals with keys in the schema (`z.string().regex(re, \"signUp.username.format\")`) and give the words in `messages/*.json`; the generic ones are `form.errors.*` (required, tooShort {minimum}…).",
     "Send with a mutation of @krizaka/query (`onSubmit: (v) => mutation.mutateAsync(v)`) or a Server Action (`useFormWithAction`): a thrown `KrizakaApiError` or `{ ok: false, problem }` puts its `fields` under their fields.",
     "Never disable the submit button for an invalid form: a refused submit shows every error and focuses the first.",
-    "Pick the field for the value: `DateField entry=\"parts\"` for a memorable date (a birth date), the calendar for a date near today; `Money` stores cents; `RadioGroup` for two to five visible choices, `Select` beyond.",
+    "Pick the field for the value: `DateField entry=\"parts\"` (typed) or `entry=\"wheel\"` for a memorable date (a birth date, bounded by `max`), the calendar for a date near today; `Money` stores cents; `RadioGroup` for two to five visible choices (`variant` list · cards · buttons · segmented), `Select` beyond.",
     "Need a control the package does not have? `form.Field` gives its value, setter, error and ids — never import @tanstack/* in a product."
   ],
   "accessibility": {
@@ -193,7 +193,7 @@
       },
       {
         "component": "DateField",
-        "description": "A date of the form (`YYYY-MM-DD`, `\"\"` for none): a calendar, or day · month · year typed in the locale's order.",
+        "description": "A date of the form (`YYYY-MM-DD`, `\"\"` for none): a calendar, day · month · year typed, or wheels.",
         "props": [
           {
             "name": "label",
@@ -213,7 +213,7 @@
             "name": "autoComplete",
             "type": "\"off\" | \"bday\"",
             "default": null,
-            "description": "`bday` for a date of birth.",
+            "description": "`bday` for a date of birth: typed boxes are autofilled; the wheels rest on 1 January 2000 until turned.",
             "required": false
           },
           {
@@ -232,9 +232,9 @@
           },
           {
             "name": "entry",
-            "type": "\"calendar\" | \"parts\"",
+            "type": "\"wheel\" | \"calendar\" | \"parts\"",
             "default": "calendar",
-            "description": "`calendar` (default: a date near today — a publication, an appointment) or `parts` (day · month · year typed: a\nmemorable date, a birth date).",
+            "description": "`calendar` (default: a date near today — a publication, an appointment), `parts` (day · month · year typed: a\nmemorable date, a birth date) or `wheel` (three wheels bounded by `min` / `max`: a birth date on a phone).",
             "required": false
           },
           {
@@ -248,21 +248,21 @@
             "name": "labels",
             "type": "(Partial<DatePickerLabels> & Partial<Record<DatePart, string>>)",
             "default": null,
-            "description": "The words of the calendar, or the names of the boxes (`day`, `month`, `year`), passed translated.",
+            "description": "The words of the calendar, or the names of the parts (`day`, `month`, `year`), passed translated.",
             "required": false
           },
           {
             "name": "max",
             "type": "string",
             "default": null,
-            "description": "The latest date (ISO), for the calendar (`latestBirthDate(18)` for an age gate).",
+            "description": "The latest date (ISO), for the calendar and the wheels (`latestBirthDate(18)` for an age gate).",
             "required": false
           },
           {
             "name": "min",
             "type": "string",
             "default": null,
-            "description": "The earliest date (ISO), for the calendar.",
+            "description": "The earliest date (ISO), for the calendar and the wheels.",
             "required": false
           }
         ]
@@ -548,9 +548,9 @@
           },
           {
             "name": "variant",
-            "type": "\"list\" | \"cards\"",
+            "type": "\"list\" | \"buttons\" | \"cards\" | \"segmented\"",
             "default": "list",
-            "description": "`list` (a dot and its words, default) or `cards` (a whole card is the radio: an amount, a plan, an audience).",
+            "description": "`list` (a dot and its words, default), `cards` (a whole card is the radio: an amount, a plan, an audience),\n`buttons` (tactile keys that press in: a size, a tip; `description` is the key's second line) or `segmented`\n(two to four short choices on one line).",
             "required": false
           }
         ]
@@ -612,7 +612,7 @@
       },
       {
         "component": "Slider",
-        "description": "A number (or a range) of the form, chosen by feel: a share, a volume, a price range.",
+        "description": "A number (or a range) of the form, chosen by feel: a share, a volume, a price range — the value floats while it is touched.",
         "props": [
           {
             "name": "label",
@@ -656,6 +656,13 @@
             "description": "A help text under the control, read with it; the error takes its place when there is one.",
             "required": false
           },
+          {
+            "name": "marks",
+            "type": "readonly SliderMark[]",
+            "default": null,
+            "description": "Words under the track at some values.",
+            "required": false
+          },
           {
             "name": "max",
             "type": "number",
@@ -683,6 +690,13 @@
             "default": null,
             "description": "For a range (`[number, number]`): each thumb's name, passed translated.",
             "required": false
+          },
+          {
+            "name": "ticks",
+            "type": "boolean | readonly number[]",
+            "default": null,
+            "description": "A graduation per step (`true`) or at the values given.",
+            "required": false
           }
         ]
       },
@@ -1148,11 +1162,11 @@
   },
   "native": {
     "entry": "@krizaka/ui/native/form",
-    "import": "import { createKrizakaForm, TextField, DateField, Money, Submit, FormError } from \"@krizaka/ui/native/form\";",
+    "import": "import { createKrizakaForm, TextField, DateField, Switch, RadioGroup, Select, Combobox, Slider, Money, Submit, FormError } from \"@krizaka/ui/native/form\";",
     "differences": [
       "Import `createKrizakaForm` from `@krizaka/ui/native/form`: the same definition (schema, defaults, i18n), the same `useForm`, `form.*` fields drawn with the native ones.",
       "`form.Form` is a View; `form.Submit` takes `label` and announces the first error of a refused submit (no focus to move).",
-      "`DateField` is always day · month · year; `RadioGroup` and `Select` are chips (a radio group); `Switch` is the system's; `Money` uses the decimal keypad.",
+      "`DateField` is three wheels by default (`entry=\"parts\"`: typed day · month · year); `RadioGroup` has the native looks (`variant` list · cards · buttons · segmented); `Select` and `Combobox` open a `Sheet`; `Switch` is a settings row drawn by the theme; `Slider` floats its value; `Money` uses the decimal keypad. Each control plays its haptic when the app passes `haptics` to the `ThemeProvider`.",
       "No `Combobox`, `TagInput`, `FileUpload` or `Slider` field yet: a screen of its own (a picker) sets the value, or `form.Field` draws it."
     ],
     "props": [
@@ -1391,7 +1405,7 @@
       },
       {
         "component": "Switch",
-        "description": "An on/off setting of the form (`boolean`): its label and hint beside the system's switch.",
+        "description": "An on/off setting of the form (`boolean`): a settings row — the label and its hint beside the switch, all pressable.",
         "props": [
           {
             "name": "label",
@@ -1432,7 +1446,7 @@
       },
       {
         "component": "RadioGroup",
-        "description": "One choice among a few, as chips (a radio group). On native, `Select` is the same control.",
+        "description": "One choice among a few, all visible: the native `RadioGroup` (a haptic on each choice).",
         "props": [
           {
             "name": "label",
@@ -1452,7 +1466,7 @@
             "name": "options",
             "type": "readonly FormOption[]",
             "default": null,
-            "description": "The choices, as chips (one chosen).",
+            "description": "The choices, all visible (two to five).",
             "required": true
           },
           {
@@ -1469,25 +1483,25 @@
             "description": "A help text under the control; the error takes its place when there is one.",
             "required": false
           },
-          {
-            "name": "scrollable",
-            "type": "boolean",
-            "default": null,
-            "description": "Scrolls the chips sideways instead of wrapping them (many choices).",
-            "required": false
-          },
           {
             "name": "style",
             "type": "StyleProp<ViewStyle>",
             "default": null,
             "description": "Styles merged last, on the field.",
             "required": false
+          },
+          {
+            "name": "variant",
+            "type": "\"list\" | \"cards\" | \"buttons\" | \"segmented\"",
+            "default": "list",
+            "description": "`list` (dots, default), `cards`, `buttons` (tactile keys) or `segmented` — the native `RadioGroup`'s looks.",
+            "required": false
           }
         ]
       },
       {
         "component": "Select",
-        "description": "One choice among several (the web's `<select>`): chips on native, scrolled sideways when they are many.",
+        "description": "One choice among many (the web's `<select>`): a field that opens a sheet of options.",
         "props": [
           {
             "name": "label",
@@ -1507,7 +1521,7 @@
             "name": "options",
             "type": "readonly FormOption[]",
             "default": null,
-            "description": "The choices, as chips (one chosen).",
+            "description": "The choices, in a sheet.",
             "required": true
           },
           {
@@ -1525,10 +1539,86 @@
             "required": false
           },
           {
-            "name": "scrollable",
+            "name": "placeholder",
+            "type": "string",
+            "default": null,
+            "description": "Shown while nothing is chosen (\"Choose a category\"), passed translated.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Combobox",
+        "description": "A choice among many, searched in a sheet: one value (`string`) or several (`string[]`).",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "disabled",
             "type": "boolean",
             "default": null,
-            "description": "Scrolls the chips sideways instead of wrapping them (many choices).",
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<ComboboxLabels>",
+            "default": null,
+            "description": "The words of the control, passed translated.",
+            "required": false
+          },
+          {
+            "name": "multiple",
+            "type": "boolean",
+            "default": null,
+            "description": "Several values (`string[]`); one (`string`) by default.",
+            "required": false
+          },
+          {
+            "name": "onSearch",
+            "type": "((query: string, signal: AbortSignal) => Promise<readonly FormOption[]>)",
+            "default": null,
+            "description": "Fetches the options for a query (debounced, aborted by a newer one).",
+            "required": false
+          },
+          {
+            "name": "options",
+            "type": "readonly FormOption[]",
+            "default": null,
+            "description": "The options, filtered as the person types.",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": null,
+            "description": "Shown while nothing is chosen, passed translated.",
             "required": false
           },
           {
@@ -1542,7 +1632,7 @@
       },
       {
         "component": "DateField",
-        "description": "A date of the form (`YYYY-MM-DD`): day, month and year typed in the locale's order — the schema checks it.",
+        "description": "A date of the form (`YYYY-MM-DD`): wheels in the locale's order (or day · month · year typed) — the schema checks it.",
         "props": [
           {
             "name": "label",
@@ -1562,7 +1652,7 @@
             "name": "autoComplete",
             "type": "\"off\" | \"bday\"",
             "default": null,
-            "description": "`bday` for a date of birth.",
+            "description": "`bday` for a date of birth: the wheels rest on 1 January 2000 until turned; typed boxes are autofilled.",
             "required": false
           },
           {
@@ -1572,6 +1662,13 @@
             "description": "Not available.",
             "required": false
           },
+          {
+            "name": "entry",
+            "type": "\"wheel\" | \"parts\"",
+            "default": "wheel",
+            "description": "`wheel` (default: day, month and year as wheels) or `parts` (typed on the numeric keypad).",
+            "required": false
+          },
           {
             "name": "hint",
             "type": "string",
@@ -1583,7 +1680,90 @@
             "name": "labels",
             "type": "Partial<DateFieldLabels>",
             "default": null,
-            "description": "The names of the boxes (`day`, `month`, `year`), passed translated.",
+            "description": "The names of the wheels or boxes (`day`, `month`, `year`), passed translated.",
+            "required": false
+          },
+          {
+            "name": "max",
+            "type": "string",
+            "default": null,
+            "description": "The latest date (ISO) of the wheels: `latestBirthDate(18)` for an age gate.",
+            "required": false
+          },
+          {
+            "name": "min",
+            "type": "string",
+            "default": null,
+            "description": "The earliest date (ISO) of the wheels.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Slider",
+        "description": "A number (or a range) of the form, chosen by feel: a share, a volume, a price range.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (also the accessible name).",
+            "required": true
+          },
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The field's name in the schema (typed by the form).",
+            "required": true
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "formatValue",
+            "type": "((value: number) => string)",
+            "default": null,
+            "description": "The value as words (\"15 %\", \"3 min\"), shown and read.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the control; the error takes its place when there is one.",
+            "required": false
+          },
+          {
+            "name": "max",
+            "type": "number",
+            "default": null,
+            "description": "The highest value. Default 100.",
+            "required": false
+          },
+          {
+            "name": "min",
+            "type": "number",
+            "default": null,
+            "description": "The lowest value. Default 0.",
+            "required": false
+          },
+          {
+            "name": "step",
+            "type": "number",
+            "default": null,
+            "description": "The step. Default 1.",
             "required": false
           },
           {
@@ -1592,6 +1772,20 @@
             "default": null,
             "description": "Styles merged last, on the field.",
             "required": false
+          },
+          {
+            "name": "thumbLabels",
+            "type": "[string, string]",
+            "default": null,
+            "description": "For a range (`[number, number]`): each thumb's name, passed translated.",
+            "required": false
+          },
+          {
+            "name": "ticks",
+            "type": "boolean | readonly number[]",
+            "default": null,
+            "description": "A graduation per step (`true`) or at the values given.",
+            "required": false
           }
         ]
       },
@@ -1875,7 +2069,7 @@
     },
     {
       "path": "form/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Form\",\n  summary:\n    \"A form = a schema (zod 4) + the package's fields, on TanStack Form v1: each error shows once the field is left and goes as soon as it is fixed, in the person's language (i18n keys, never the engine's English), a value can be checked on the server as it is typed, and the server's refusals land under their fields — web and React Native, the same schema.\",\n  status: \"beta\",\n  category: \"forms\",\n  platforms: \"both\",\n  whenToUse: [\n    \"Any form that sends something: sign-up, profile, upload details, an amount, an audience, a report, settings.\",\n    \"When the server must re-check the same rules: the schema is shared (a product keeps it in `packages/core`) and `@krizaka/ui/form/server` parses with it in a Server Action.\",\n    \"When a value depends on the server (a username's availability): `validateAsync` on the field, debounced and aborted.\",\n  ],\n  whenNotToUse: [\n    { when: \"For a single search box that filters as you type: no submit, no validation.\", use: \"search-field\" },\n    { when: \"For a filter bar over a list: its state is the address, not a form.\", use: \"filter-bar\" },\n    { when: \"For a setting that applies at once on its own (a theme switch): the control alone.\", use: \"switch\" },\n  ],\n  bestPractices: [\n    \"Define the form once (`createKrizakaForm({ schema, defaultValues })`) beside the API's contract; use it in components with `form.useForm({ onSubmit })`.\",\n    \"Name refusals with keys in the schema (`z.string().regex(re, \\\"signUp.username.format\\\")`) and give the words in `messages/*.json`; the generic ones are `form.errors.*` (required, tooShort {minimum}…).\",\n    \"Send with a mutation of @krizaka/query (`onSubmit: (v) => mutation.mutateAsync(v)`) or a Server Action (`useFormWithAction`): a thrown `KrizakaApiError` or `{ ok: false, problem }` puts its `fields` under their fields.\",\n    \"Never disable the submit button for an invalid form: a refused submit shows every error and focuses the first.\",\n    \"Pick the field for the value: `DateField entry=\\\"parts\\\"` for a memorable date (a birth date), the calendar for a date near today; `Money` stores cents; `RadioGroup` for two to five visible choices, `Select` beyond.\",\n    \"Need a control the package does not have? `form.Field` gives its value, setter, error and ids — never import @tanstack/* in a product.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Enter\", action: \"Sends the form from a text field (web); the keyboard's return key moves to the next field (native).\" },\n      { keys: \"Tab\", action: \"Leaves a field: from then on its error shows, and goes as soon as it is fixed.\" },\n    ],\n    notes: [\n      \"Every control is named by its visible label; its hint and its error are in `aria-describedby`, and an invalid control has `aria-invalid`.\",\n      \"Errors are announced (`role=\\\"alert\\\"`); a refused submit focuses the first invalid field on the web and announces the first error on native.\",\n      \"An availability check names its wait (`checkingLabel`) and says when the value is free (`availableHint`): never by colour alone.\",\n      \"A date of birth is three labelled boxes in the locale's order with numeric keypads and `bday` autofill, not a calendar to scroll through decades.\",\n    ],\n  },\n  related: [\"field\", \"checkbox\", \"switch\", \"radio-group\", \"combobox\", \"date-picker\", \"tag-input\", \"file-upload\", \"slider\"],\n  web: {\n    imports: [\"createKrizakaForm\", \"useFormWithAction\", \"latestBirthDate\", \"useKrizakaField\", \"formMessage\"],\n    examples: [\n      { name: \"sign-up\", title: \"Sign-up\", description: \"Orochia's sign-up: a username checked as it is typed with a free one offered, an 18+ date of birth typed as day · month · year, a server refusal on its field.\" },\n      { name: \"profile\", title: \"Profile\", description: \"Saved by a mutation of @krizaka/query: categories, tags, a list of links that grows (`form.FieldArray`).\" },\n      { name: \"upload\", title: \"Upload\", description: \"A video and what describes it — the file, a title, a description, tags, who can watch — sent together.\" },\n      { name: \"amount\", title: \"Amount\", description: \"A tip stored in cents (`Money`), typed the locale's way; presets set the field from outside.\" },\n      { name: \"audience\", title: \"Audience\", description: \"Cards to choose who watches, the price only for subscribers (`form.Watch`), a publication date.\" },\n      { name: \"settings\", title: \"Settings\", description: \"Sent by a Server Action (`useFormWithAction`): switches, a menu, a slider, a choice.\" },\n      { name: \"report\", title: \"Report\", description: \"One reason among a few, details, and blocking the account in the same step.\" },\n    ],\n  },\n  native: {\n    entry: \"@krizaka/ui/native/form\",\n    imports: [\"createKrizakaForm\", \"TextField\", \"DateField\", \"Money\", \"Submit\", \"FormError\"],\n    differences: [\n      \"Import `createKrizakaForm` from `@krizaka/ui/native/form`: the same definition (schema, defaults, i18n), the same `useForm`, `form.*` fields drawn with the native ones.\",\n      \"`form.Form` is a View; `form.Submit` takes `label` and announces the first error of a refused submit (no focus to move).\",\n      \"`DateField` is always day · month · year; `RadioGroup` and `Select` are chips (a radio group); `Switch` is the system's; `Money` uses the decimal keypad.\",\n      \"No `Combobox`, `TagInput`, `FileUpload` or `Slider` field yet: a screen of its own (a picker) sets the value, or `form.Field` draws it.\",\n    ],\n    examples: [\n      { name: \"sign-up\", title: \"Sign-up\", description: \"E-mail, a username checked as it is typed, the 18+ birth date as day · month · year, the terms.\" },\n      { name: \"profile\", title: \"Profile\", description: \"Saved by a mutation of @krizaka/query; a category as chips, the list of links grows.\" },\n      { name: \"upload\", title: \"Upload details\", description: \"Title, description and audience of a video picked from the library.\" },\n      { name: \"amount\", title: \"Amount\", description: \"A tip in cents on the decimal keypad, typed the French way; presets set the field.\" },\n      { name: \"audience\", title: \"Audience\", description: \"The price only when the video is for subscribers; comments on or off.\" },\n      { name: \"settings\", title: \"Settings\", description: \"The system's switches and chips for a choice, saved in one go.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Form\",\n  summary:\n    \"A form = a schema (zod 4) + the package's fields, on TanStack Form v1: each error shows once the field is left and goes as soon as it is fixed, in the person's language (i18n keys, never the engine's English), a value can be checked on the server as it is typed, and the server's refusals land under their fields — web and React Native, the same schema.\",\n  status: \"beta\",\n  category: \"forms\",\n  platforms: \"both\",\n  whenToUse: [\n    \"Any form that sends something: sign-up, profile, upload details, an amount, an audience, a report, settings.\",\n    \"When the server must re-check the same rules: the schema is shared (a product keeps it in `packages/core`) and `@krizaka/ui/form/server` parses with it in a Server Action.\",\n    \"When a value depends on the server (a username's availability): `validateAsync` on the field, debounced and aborted.\",\n  ],\n  whenNotToUse: [\n    { when: \"For a single search box that filters as you type: no submit, no validation.\", use: \"search-field\" },\n    { when: \"For a filter bar over a list: its state is the address, not a form.\", use: \"filter-bar\" },\n    { when: \"For a setting that applies at once on its own (a theme switch): the control alone.\", use: \"switch\" },\n  ],\n  bestPractices: [\n    \"Define the form once (`createKrizakaForm({ schema, defaultValues })`) beside the API's contract; use it in components with `form.useForm({ onSubmit })`.\",\n    \"Name refusals with keys in the schema (`z.string().regex(re, \\\"signUp.username.format\\\")`) and give the words in `messages/*.json`; the generic ones are `form.errors.*` (required, tooShort {minimum}…).\",\n    \"Send with a mutation of @krizaka/query (`onSubmit: (v) => mutation.mutateAsync(v)`) or a Server Action (`useFormWithAction`): a thrown `KrizakaApiError` or `{ ok: false, problem }` puts its `fields` under their fields.\",\n    \"Never disable the submit button for an invalid form: a refused submit shows every error and focuses the first.\",\n    \"Pick the field for the value: `DateField entry=\\\"parts\\\"` (typed) or `entry=\\\"wheel\\\"` for a memorable date (a birth date, bounded by `max`), the calendar for a date near today; `Money` stores cents; `RadioGroup` for two to five visible choices (`variant` list · cards · buttons · segmented), `Select` beyond.\",\n    \"Need a control the package does not have? `form.Field` gives its value, setter, error and ids — never import @tanstack/* in a product.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Enter\", action: \"Sends the form from a text field (web); the keyboard's return key moves to the next field (native).\" },\n      { keys: \"Tab\", action: \"Leaves a field: from then on its error shows, and goes as soon as it is fixed.\" },\n    ],\n    notes: [\n      \"Every control is named by its visible label; its hint and its error are in `aria-describedby`, and an invalid control has `aria-invalid`.\",\n      \"Errors are announced (`role=\\\"alert\\\"`); a refused submit focuses the first invalid field on the web and announces the first error on native.\",\n      \"An availability check names its wait (`checkingLabel`) and says when the value is free (`availableHint`): never by colour alone.\",\n      \"A date of birth is three labelled boxes in the locale's order with numeric keypads and `bday` autofill, not a calendar to scroll through decades.\",\n    ],\n  },\n  related: [\"field\", \"checkbox\", \"switch\", \"radio-group\", \"combobox\", \"date-picker\", \"tag-input\", \"file-upload\", \"slider\"],\n  web: {\n    imports: [\"createKrizakaForm\", \"useFormWithAction\", \"latestBirthDate\", \"useKrizakaField\", \"formMessage\"],\n    examples: [\n      { name: \"sign-up\", title: \"Sign-up\", description: \"Orochia's sign-up: a username checked as it is typed with a free one offered, an 18+ date of birth typed as day · month · year, a server refusal on its field.\" },\n      { name: \"profile\", title: \"Profile\", description: \"Saved by a mutation of @krizaka/query: categories, tags, a list of links that grows (`form.FieldArray`).\" },\n      { name: \"upload\", title: \"Upload\", description: \"A video and what describes it — the file, a title, a description, tags, who can watch — sent together.\" },\n      { name: \"amount\", title: \"Amount\", description: \"A tip stored in cents (`Money`), typed the locale's way; presets set the field from outside.\" },\n      { name: \"audience\", title: \"Audience\", description: \"Cards to choose who watches, the price only for subscribers (`form.Watch`), a publication date.\" },\n      { name: \"settings\", title: \"Settings\", description: \"Sent by a Server Action (`useFormWithAction`): switches, a menu, a slider, a choice.\" },\n      { name: \"report\", title: \"Report\", description: \"One reason among a few, details, and blocking the account in the same step.\" },\n    ],\n  },\n  native: {\n    entry: \"@krizaka/ui/native/form\",\n    imports: [\"createKrizakaForm\", \"TextField\", \"DateField\", \"Switch\", \"RadioGroup\", \"Select\", \"Combobox\", \"Slider\", \"Money\", \"Submit\", \"FormError\"],\n    differences: [\n      \"Import `createKrizakaForm` from `@krizaka/ui/native/form`: the same definition (schema, defaults, i18n), the same `useForm`, `form.*` fields drawn with the native ones.\",\n      \"`form.Form` is a View; `form.Submit` takes `label` and announces the first error of a refused submit (no focus to move).\",\n      \"`DateField` is three wheels by default (`entry=\\\"parts\\\"`: typed day · month · year); `RadioGroup` has the native looks (`variant` list · cards · buttons · segmented); `Select` and `Combobox` open a `Sheet`; `Switch` is a settings row drawn by the theme; `Slider` floats its value; `Money` uses the decimal keypad. Each control plays its haptic when the app passes `haptics` to the `ThemeProvider`.\",\n      \"No `Combobox`, `TagInput`, `FileUpload` or `Slider` field yet: a screen of its own (a picker) sets the value, or `form.Field` draws it.\",\n    ],\n    examples: [\n      { name: \"sign-up\", title: \"Sign-up\", description: \"E-mail, a username checked as it is typed, the 18+ birth date as day · month · year, the terms.\" },\n      { name: \"profile\", title: \"Profile\", description: \"Saved by a mutation of @krizaka/query; a category as chips, the list of links grows.\" },\n      { name: \"upload\", title: \"Upload details\", description: \"Title, description and audience of a video picked from the library.\" },\n      { name: \"amount\", title: \"Amount\", description: \"A tip in cents on the decimal keypad, typed the French way; presets set the field.\" },\n      { name: \"audience\", title: \"Audience\", description: \"The price only when the video is for subscribers; comments on or off.\" },\n      { name: \"settings\", title: \"Settings\", description: \"The system's switches and chips for a choice, saved in one go.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "form/money.ts",
@@ -1887,7 +2081,7 @@
     },
     {
       "path": "form/web.tsx",
-      "content": "// Client. The form's fields for the web: thin adapters from a form field (useKrizakaField) to the platform's current\n// primitives — Field + Input, Checkbox, Switch, RadioGroup, Combobox, DatePicker, TagInput, Dropzone, Slider. A new look\n// for a primitive (a new date picker, a new radio) changes an adapter here, never a form.\nimport { Alert } from \"@krizaka/ui/alert\";\nimport { Button, type ButtonProps } from \"@krizaka/ui/button\";\nimport { Checkbox as CheckboxControl } from \"@krizaka/ui/checkbox\";\nimport { Combobox as ComboboxControl, type ComboboxLabels, type ComboboxOption } from \"@krizaka/ui/combobox\";\nimport { DatePicker, type DatePickerLabels } from \"@krizaka/ui/date-picker\";\nimport { Field, Input, Select as SelectControl, Textarea } from \"@krizaka/ui/field\";\nimport { Dropzone, formatBytes } from \"@krizaka/ui/file-upload\";\nimport { RadioGroup as RadioGroupControl } from \"@krizaka/ui/radio-group\";\nimport { Slider as SliderControl, type SliderValue } from \"@krizaka/ui/slider\";\nimport { Spinner } from \"@krizaka/ui/spinner\";\nimport { Switch as SwitchControl } from \"@krizaka/ui/switch\";\nimport { TagInput as TagInputControl, type TagInputProps } from \"@krizaka/ui/tag-input\";\nimport * as React from \"react\";\n\nimport { composeDate, DATE_PART_LENGTH, type DatePart, datePartsOrder, splitDate } from \"../date-picker/parts\";\nimport {\n  type FieldCheck,\n  FormContext,\n  type FormContextValue,\n  type KrizakaField,\n  type KrizakaFieldArray,\n  makeCreateKrizakaForm,\n  useFormContext,\n  useFormStatus,\n  useFormValue,\n  useKrizakaField,\n  useKrizakaFieldArray,\n} from \"./core\";\nimport { formMessage } from \"./errors\";\nimport { currencySymbol, moneyInputText, parseMoney } from \"./money\";\n\ntype Base = {\n  /** The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form). */\n  name: string;\n  /** The visible label, passed translated (also the control's accessible name). */\n  label: string;\n  /** A help text under the control, read with it; the error takes its place when there is one. */\n  hint?: string;\n  /** Not available. */\n  disabled?: boolean;\n  /** Classes merged on the field's root. */\n  className?: string;\n};\n\nconst ids = (f: KrizakaField, hint?: string) => [hint && !f.error ? f.hintId : null, f.error ? f.errorId : null].filter(Boolean).join(\" \") || undefined;\n\nfunction Caption({ field, hint, ok }: { field: KrizakaField; hint?: string; ok?: string }) {\n  const suggestion = field.errorDetail?.suggestion;\n  if (field.error)\n    return (\n      <Field.Error id={field.errorId}>\n        <span>\n          {field.error}\n          {suggestion ? (\n            <>\n              {\" \"}\n              <button type=\"button\" className=\"font-semibold text-accent-text underline underline-offset-2\" onClick={() => field.setValue(suggestion.value)}>\n                {suggestion.label}\n              </button>\n            </>\n          ) : null}\n        </span>\n      </Field.Error>\n    );\n  const text = field.available && ok ? (hint ? `${ok} · ${hint}` : ok) : hint;\n  return text ? <Field.Hint id={field.hintId}>{text}</Field.Hint> : null;\n}\n\nconst Check = () => (\n  <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4 text-fg-success\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </svg>\n);\n\nexport type FormProps = Omit<React.ComponentProps<\"form\">, \"onSubmit\" | \"noValidate\"> & {\n  /** The fields, the error and the button. */\n  children?: React.ReactNode;\n};\n\n/** The `<form>` of a form (`form.Form`): `noValidate` (the schema validates), the first error focused after a refused submit. */\nfunction FormRoot({ value, className, children, ...props }: FormProps & { value: FormContextValue }) {\n  const ref = React.useRef<HTMLFormElement>(null);\n  return (\n    <FormContext.Provider value={value}>\n      <form\n        ref={ref}\n        noValidate\n        className={className ?? \"flex flex-col gap-4\"}\n        onSubmit={async (event) => {\n          event.preventDefault();\n          if (!(await value.submit())) requestAnimationFrame(() => ref.current?.querySelector<HTMLElement>('[aria-invalid=\"true\"], [data-invalid] input')?.focus());\n        }}\n        {...props}\n      >\n        {children}\n      </form>\n    </FormContext.Provider>\n  );\n}\n\nexport type SubmitProps = Omit<ButtonProps, \"type\" | \"loading\"> & {\n  /** The button's words, passed translated (\"Create my account\"). */\n  children: React.ReactNode;\n};\n\n/** The submit button: busy while the form is sent (not pressable twice), never disabled for an invalid form. */\nexport function Submit({ variant = \"primary\", children, ...props }: SubmitProps) {\n  const { submitting } = useFormStatus();\n  return (\n    <Button type=\"submit\" variant={variant} loading={submitting} {...props}>\n      {children}\n    </Button>\n  );\n}\n\nexport type FormErrorProps = {\n  /** A headline above the message (\"We could not create your account\"), passed translated. */\n  title?: string;\n  /** Classes merged on the alert. */\n  className?: string;\n};\n\n/** The whole form's error — a refusal of the server that belongs to no field (a conflict, too many tries, no network). */\nexport function FormError({ title, className }: FormErrorProps) {\n  const ctx = useFormContext();\n  if (!ctx.error) return null;\n  return (\n    <Alert tone=\"danger\" title={title} className={className}>\n      {formMessage(ctx.error, ctx.i18n)}\n    </Alert>\n  );\n}\n\nexport type TextFieldProps = Base & {\n  /** `text` (default), `email`, `password`, `url`, `tel`, `search`: the right keyboard on a phone. */\n  type?: \"text\" | \"email\" | \"password\" | \"url\" | \"tel\" | \"search\";\n  /** The browser's autofill (`email`, `username`, `new-password`, `name`). */\n  autoComplete?: string;\n  /** An example of a value, passed translated — never the label. */\n  placeholder?: string;\n  /** The keyboard on a phone (`numeric`, `decimal`). */\n  inputMode?: React.HTMLAttributes<HTMLInputElement>[\"inputMode\"];\n  /** The most characters. */\n  maxLength?: number;\n  /** Cleans what is typed before it is stored (`(v) => v.toLowerCase().replace(/\\s+/g, \"_\")`). */\n  transform?: (raw: string) => string;\n  /** Checks the value on the server as it is typed (availability): an error key, or nothing when it is fine. */\n  validateAsync?: FieldCheck<string>;\n  /** The wait, in ms, between the last key and `validateAsync`. Default 350. */\n  asyncDebounceMs?: number;\n  /** The words once `validateAsync` accepted the value (\"@eric is free\"), passed translated. */\n  availableHint?: string;\n  /** The name of the wait while it checks (\"Checking\"), passed translated. */\n  checkingLabel?: string;\n  /** Something before the text (an `@`, an icon). */\n  start?: React.ReactNode;\n};\n\n/** A text field of the form: label, input, hint or error, an optional check on the server. */\nexport function TextField({ name, label, hint, disabled, className, type = \"text\", transform, validateAsync, asyncDebounceMs, availableHint, checkingLabel = \"Checking\", start, ...input }: TextFieldProps) {\n  const f = useKrizakaField<string>(name, { validateAsync, asyncDebounceMs });\n  const end = f.validating ? <Spinner size=\"sm\" label={checkingLabel} /> : f.available ? <Check /> : null;\n  return (\n    <Field.Root className={className}>\n      <Field.Label htmlFor={f.id}>{label}</Field.Label>\n      <span className=\"relative flex items-center\">\n        {start ? <span className=\"pointer-events-none absolute left-3 text-fg-muted\">{start}</span> : null}\n        <Input\n          id={f.id}\n          name={name}\n          type={type}\n          value={f.value ?? \"\"}\n          disabled={disabled}\n          invalid={Boolean(f.error)}\n          aria-describedby={ids(f, hint ?? availableHint)}\n          onChange={(event) => f.setValue(transform ? transform(event.target.value) : event.target.value)}\n          onBlur={f.onBlur}\n          className={[start ? \"pl-9\" : \"\", end ? \"pr-10\" : \"\"].join(\" \").trim() || undefined}\n          {...input}\n        />\n        {end ? <span className=\"absolute right-3 flex\">{end}</span> : null}\n      </span>\n      <Caption field={f} hint={hint} ok={availableHint} />\n    </Field.Root>\n  );\n}\n\nexport type TextAreaProps = Base & {\n  /** An example of a value, passed translated. */\n  placeholder?: string;\n  /** The visible lines. Default 4. */\n  rows?: number;\n  /** The most characters. */\n  maxLength?: number;\n};\n\n/** A longer text of the form (a bio, a description, a report). */\nexport function TextArea({ name, label, hint, disabled, className, rows = 4, ...input }: TextAreaProps) {\n  const f = useKrizakaField<string>(name);\n  return (\n    <Field.Root className={className}>\n      <Field.Label htmlFor={f.id}>{label}</Field.Label>\n      <Textarea id={f.id} name={name} rows={rows} value={f.value ?? \"\"} disabled={disabled} invalid={Boolean(f.error)} aria-describedby={ids(f, hint)} onChange={(e) => f.setValue(e.target.value)} onBlur={f.onBlur} {...input} />\n      <Caption field={f} hint={hint} />\n    </Field.Root>\n  );\n}\n\nexport type CheckboxProps = Omit<Base, \"label\"> & {\n  /** The words next to the box, clickable with it — text, or a sentence with links (terms, privacy). */\n  label: React.ReactNode;\n};\n\n/** A box of the form (`boolean`): terms to accept, an option. */\nexport function Checkbox({ name, label, hint, disabled, className }: CheckboxProps) {\n  const f = useKrizakaField<boolean>(name);\n  return (\n    <div className={className ?? \"flex flex-col gap-1.5\"}>\n      <CheckboxControl id={f.id} name={name} checked={f.value === true} disabled={disabled} invalid={Boolean(f.error)} aria-describedby={ids(f, hint)} onCheckedChange={(c) => f.setValue(c === true)} onBlur={f.onBlur}>\n        {label}\n      </CheckboxControl>\n      <Caption field={f} hint={hint} />\n    </div>\n  );\n}\n\n/** An on/off setting of the form (`boolean`): the label and its hint beside the switch. */\nexport function Switch({ name, label, hint, disabled, className }: Base) {\n  const f = useKrizakaField<boolean>(name);\n  return (\n    <div className={className ?? \"flex items-start justify-between gap-4\"}>\n      <div className=\"flex min-w-0 flex-col gap-0.5\">\n        <Field.Label htmlFor={f.id} className=\"text-sm font-medium text-fg\">\n          {label}\n        </Field.Label>\n        <Caption field={f} hint={hint} />\n      </div>\n      <SwitchControl id={f.id} name={name} checked={f.value === true} disabled={disabled} invalid={Boolean(f.error)} aria-describedby={ids(f, hint)} onCheckedChange={(c) => f.setValue(c)} onBlur={f.onBlur} />\n    </div>\n  );\n}\n\n/** A choice of the form: the value stored, its words (passed translated), a line under them. */\nexport type FormOption = { value: string; label: string; description?: string; disabled?: boolean };\n\nexport type RadioGroupProps = Base & {\n  /** The choices, all visible (two to five). */\n  options: readonly FormOption[];\n  /** `list` (a dot and its words, default) or `cards` (a whole card is the radio: an amount, a plan, an audience). */\n  variant?: \"list\" | \"cards\";\n  /** `vertical` (default) or `horizontal`. */\n  orientation?: \"vertical\" | \"horizontal\";\n};\n\n/** One choice among a few, all visible. */\nexport function RadioGroup({ name, label, hint, disabled, className, options, variant = \"list\", orientation = \"vertical\" }: RadioGroupProps) {\n  const f = useKrizakaField<string>(name);\n  return (\n    <Field.Root className={className} role=\"group\" aria-labelledby={`${f.id}-label`}>\n      <span id={`${f.id}-label`} className=\"text-xs font-semibold text-fg-secondary\">\n        {label}\n      </span>\n      <RadioGroupControl.Root\n        aria-labelledby={`${f.id}-label`}\n        value={f.value ?? \"\"}\n        onValueChange={(v) => f.setValue(v)}\n        onBlur={f.onBlur}\n        orientation={orientation}\n        disabled={disabled}\n        invalid={Boolean(f.error)}\n        aria-describedby={ids(f, hint)}\n        name={name}\n        className={variant === \"cards\" ? \"grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-2\" : undefined}\n      >\n        {options.map((o) =>\n          variant === \"cards\" ? (\n            <RadioGroupControl.Card key={o.value} value={o.value} disabled={o.disabled}>\n              <span className=\"font-semibold\">{o.label}</span>\n              {o.description ? <span className=\"text-xs text-fg-secondary\">{o.description}</span> : null}\n            </RadioGroupControl.Card>\n          ) : (\n            <RadioGroupControl.Item key={o.value} value={o.value} disabled={o.disabled}>\n              {o.label}\n              {o.description ? <span className=\"block text-xs text-fg-secondary\">{o.description}</span> : null}\n            </RadioGroupControl.Item>\n          ),\n        )}\n      </RadioGroupControl.Root>\n      <Caption field={f} hint={hint} />\n    </Field.Root>\n  );\n}\n\nexport type SelectProps = Base & {\n  /** The choices, in the platform's own menu (a country, a category). */\n  options: readonly FormOption[];\n  /** The first line while nothing is chosen (\"Choose a category\"), passed translated. */\n  placeholder?: string;\n};\n\n/** One choice among many, in the platform's menu (`<select>`: accessible and right on phones). */\nexport function Select({ name, label, hint, disabled, className, options, placeholder }: SelectProps) {\n  const f = useKrizakaField<string>(name);\n  return (\n    <Field.Root className={className}>\n      <Field.Label htmlFor={f.id}>{label}</Field.Label>\n      <SelectControl id={f.id} name={name} value={f.value ?? \"\"} disabled={disabled} invalid={Boolean(f.error)} aria-describedby={ids(f, hint)} onChange={(e) => f.setValue(e.target.value)} onBlur={f.onBlur}>\n        {placeholder !== undefined ? (\n          <option value=\"\" disabled>\n            {placeholder}\n          </option>\n        ) : null}\n        {options.map((o) => (\n          <option key={o.value} value={o.value} disabled={o.disabled}>\n            {o.label}\n          </option>\n        ))}\n      </SelectControl>\n      <Caption field={f} hint={hint} />\n    </Field.Root>\n  );\n}\n\nexport type ComboboxProps = Base & {\n  /** The options, filtered as the person types. */\n  options?: readonly ComboboxOption[];\n  /** Fetches the options for a query (debounced, aborted by a newer one). */\n  onSearch?: (query: string, signal: AbortSignal) => Promise<readonly ComboboxOption[]>;\n  /** Several values (`string[]`), shown as chips; one (`string`) by default. */\n  multiple?: boolean;\n  /** Offers to create the query as a value. */\n  creatable?: boolean;\n  /** The input's placeholder, passed translated. */\n  placeholder?: string;\n  /** The words of the control, passed translated. */\n  labels?: Partial<ComboboxLabels>;\n};\n\n/** A choice among many, typed to filter or fetched: one value (`string`) or several (`string[]`). */\nexport function Combobox({ name, label, hint, disabled, className, options = [], onSearch, multiple, creatable, placeholder, labels }: ComboboxProps) {\n  const f = useKrizakaField<string | string[]>(name);\n  // The options chosen from a search, by value: their labels once the search has moved on.\n  const [seen, setSeen] = React.useState<Record<string, ComboboxOption>>({});\n  const option = (value: string) => options.find((o) => o.value === value) ?? seen[value] ?? { value, label: value };\n  const remember = (o: ComboboxOption) => setSeen((known) => (known[o.value] === o ? known : { ...known, [o.value]: o }));\n  const shared = { id: f.id, label, hint, error: f.error, disabled, placeholder, labels, options, onSearch, creatable, name };\n  return (\n    <div className={className} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n      {multiple ? (\n        <ComboboxControl\n          {...shared}\n          multiple\n          value={((f.value as string[] | undefined) ?? []).map(option)}\n          onValueChange={(next) => {\n            next.forEach(remember);\n            f.setValue(next.map((o) => o.value));\n          }}\n        />\n      ) : (\n        <ComboboxControl\n          {...shared}\n          value={f.value ? option(f.value as string) : null}\n          onValueChange={(next) => {\n            if (next) remember(next);\n            f.setValue(next?.value ?? \"\");\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport type DateFieldProps = Base & {\n  /** `calendar` (default: a date near today — a publication, an appointment) or `parts` (day · month · year typed: a\n   * memorable date, a birth date). */\n  entry?: \"calendar\" | \"parts\";\n  /** The earliest date (ISO), for the calendar. */\n  min?: string;\n  /** The latest date (ISO), for the calendar (`latestBirthDate(18)` for an age gate). */\n  max?: string;\n  /** The words of the calendar, or the names of the boxes (`day`, `month`, `year`), passed translated. */\n  labels?: Partial<DatePickerLabels> & Partial<Record<DatePart, string>>;\n  /** `bday` for a date of birth. */\n  autoComplete?: \"bday\" | \"off\";\n};\n\nconst PART_NAMES: Record<DatePart, string> = { day: \"Day\", month: \"Month\", year: \"Year\" };\n\n/** A date of the form (`YYYY-MM-DD`, `\"\"` for none): a calendar, or day · month · year typed in the locale's order. */\nexport function DateField({ name, label, hint, disabled, className, entry = \"calendar\", min, max, labels, autoComplete }: DateFieldProps) {\n  const f = useKrizakaField<string>(name);\n  if (entry === \"calendar\")\n    return (\n      <div className={className} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n        <DatePicker label={label} hint={hint} error={f.error} disabled={disabled} name={name} locale={f.locale} min={min} max={max} labels={labels} value={f.value || null} onValueChange={(v) => f.setValue(v ?? \"\")} />\n      </div>\n    );\n  return <DateParts field={f} label={label} hint={hint} disabled={disabled} className={className} names={{ ...PART_NAMES, ...labels }} autoComplete={autoComplete} />;\n}\n\nfunction DateParts({ field: f, label, hint, disabled, className, names, autoComplete }: { field: KrizakaField<string>; label: string; hint?: string; disabled?: boolean; className?: string; names: Record<DatePart, string>; autoComplete?: string }) {\n  const order = React.useMemo(() => datePartsOrder(f.locale), [f.locale]);\n  const [parts, setParts] = React.useState(() => splitDate(f.value));\n  if ((f.value ?? \"\") !== composeDate(parts) && composeDate(splitDate(f.value)) === (f.value ?? \"\")) setParts(splitDate(f.value));\n  const refs = { day: React.useRef<HTMLInputElement>(null), month: React.useRef<HTMLInputElement>(null), year: React.useRef<HTMLInputElement>(null) };\n  return (\n    <fieldset className={className ?? \"flex flex-col gap-1.5\"} aria-describedby={ids(f, hint)} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n      <legend className=\"mb-1.5 text-xs font-semibold text-fg-secondary\">{label}</legend>\n      <div className=\"flex gap-2\">\n        {order.map((part) => (\n          <label key={part} className=\"flex flex-col gap-1 text-xs text-fg-secondary\">\n            {names[part]}\n            <Input\n              ref={refs[part]}\n              inputMode=\"numeric\"\n              autoComplete={autoComplete === \"bday\" ? `bday-${part}` : \"off\"}\n              maxLength={DATE_PART_LENGTH[part]}\n              value={parts[part]}\n              disabled={disabled}\n              invalid={Boolean(f.error)}\n              className={part === \"year\" ? \"w-20 text-center tabular-nums\" : \"w-14 text-center tabular-nums\"}\n              onChange={(e) => {\n                const digits = e.target.value.replace(/\\D/g, \"\").slice(0, DATE_PART_LENGTH[part]);\n                const next = { ...parts, [part]: digits };\n                setParts(next);\n                f.setValue(composeDate(next));\n                const following = order[order.indexOf(part) + 1];\n                if (digits.length === DATE_PART_LENGTH[part] && following) refs[following].current?.focus();\n              }}\n            />\n          </label>\n        ))}\n      </div>\n      <Caption field={f} hint={hint} />\n    </fieldset>\n  );\n}\n\nexport type TagsProps = Base & Pick<TagInputProps, \"suggestions\" | \"normalize\" | \"max\" | \"separators\" | \"placeholder\" | \"labels\">;\n\n/** Free words of the form as chips (`string[]`): tags, keywords. */\nexport function TagInput({ name, label, hint, disabled, className, ...props }: TagsProps) {\n  const f = useKrizakaField<string[]>(name);\n  return (\n    <div className={className} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n      <TagInputControl label={label} hint={hint} error={f.error} disabled={disabled} name={name} value={f.value ?? []} onValueChange={(tags) => f.setValue(tags)} {...props} />\n    </div>\n  );\n}\n\nexport type FileUploadProps = Omit<Base, \"hint\"> & {\n  /** The title in the zone (\"Drop your video here\"), passed translated. */\n  title: string;\n  /** The button that opens the file picker, passed translated. */\n  browseLabel: string;\n  /** What is accepted, in words (\"MP4 or MOV, up to 4 GB\"). */\n  hint?: string;\n  /** The types accepted (`video/*`, `image/png,.pdf`). */\n  accept?: string;\n  /** The largest file, in bytes. */\n  maxSize?: number;\n  /** Several files (`File[]`, up to `maxFiles`); one by default (still a `File[]` of one). */\n  multiple?: boolean;\n  /** The most files. */\n  maxFiles?: number;\n  /** The name of a file's remove button (`(name) => \"Remove \" + name`), passed translated. */\n  removeLabel: (fileName: string) => string;\n  /** The words of a refused file (`(r) => r.file.name + \" is too large\"`). */\n  refusalLabel?: React.ComponentProps<typeof Dropzone>[\"refusalLabel\"];\n};\n\n/** Files of the form (`File[]`): a drop zone, then the chosen files, each removable. */\nexport function FileUpload({ name, label, hint, disabled, className, title, browseLabel, accept, maxSize, multiple, maxFiles, removeLabel, refusalLabel }: FileUploadProps) {\n  const f = useKrizakaField<File[]>(name);\n  const files = f.value ?? [];\n  return (\n    <div className={className ?? \"flex flex-col gap-2\"} role=\"group\" aria-label={label} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n      <span className=\"text-xs font-semibold text-fg-secondary\">{label}</span>\n      <Dropzone\n        title={title}\n        browseLabel={browseLabel}\n        hint={hint}\n        accept={accept}\n        maxSize={maxSize}\n        multiple={multiple}\n        maxFiles={maxFiles}\n        disabled={disabled}\n        refusalLabel={refusalLabel}\n        onFiles={(chosen) => f.setValue(multiple ? [...files, ...chosen].slice(0, maxFiles ?? Infinity) : chosen.slice(0, 1))}\n      />\n      {files.length > 0 ? (\n        <ul className=\"flex flex-col gap-1.5\">\n          {files.map((file, i) => (\n            <li key={`${file.name}-${i}`} className=\"flex items-center justify-between gap-3 rounded-lg border border-border-default bg-surface-1 px-3 py-2 text-sm\">\n              <span className=\"min-w-0 truncate text-fg\">{file.name}</span>\n              <span className=\"flex shrink-0 items-center gap-2\">\n                <span className=\"font-mono text-xs text-fg-secondary\">{formatBytes(file.size, f.locale)}</span>\n                <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => f.setValue(files.filter((_, j) => j !== i))}>\n                  {removeLabel(file.name)}\n                </Button>\n              </span>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n      {f.error ? <Field.Error id={f.errorId}>{f.error}</Field.Error> : null}\n    </div>\n  );\n}\n\nexport type MoneyProps = Base & {\n  /** The currency (ISO 4217: `USD`, `EUR`, `JPY`): its sign before the amount, its decimals. */\n  currency: string;\n  /** An example of an amount, passed translated. */\n  placeholder?: string;\n};\n\n/** An amount of the form, stored as integer minor units (cents: `1250` = 12.50), typed the locale's way. */\nexport function Money({ name, label, hint, disabled, className, currency, placeholder }: MoneyProps) {\n  const f = useKrizakaField<number | null>(name);\n  const [text, setText] = React.useState(() => moneyInputText(f.value, currency, f.locale));\n  const [editing, setEditing] = React.useState(false);\n  const shown = editing ? text : moneyInputText(f.value, currency, f.locale);\n  return (\n    <Field.Root className={className}>\n      <Field.Label htmlFor={f.id}>{label}</Field.Label>\n      <span className=\"relative flex items-center\">\n        <span className=\"pointer-events-none absolute left-3 text-sm text-fg-secondary\" aria-hidden>\n          {currencySymbol(currency, f.locale)}\n        </span>\n        <Input\n          id={f.id}\n          name={name}\n          inputMode=\"decimal\"\n          value={shown}\n          placeholder={placeholder}\n          disabled={disabled}\n          invalid={Boolean(f.error)}\n          aria-describedby={ids(f, hint)}\n          className=\"pl-9 tabular-nums\"\n          onFocus={() => {\n            setText(moneyInputText(f.value, currency, f.locale));\n            setEditing(true);\n          }}\n          onChange={(e) => {\n            setText(e.target.value);\n            const units = parseMoney(e.target.value, currency, f.locale);\n            f.setValue(units === undefined ? null : units === null ? Number.NaN : units);\n          }}\n          onBlur={() => {\n            setEditing(false);\n            f.onBlur();\n          }}\n        />\n      </span>\n      <Caption field={f} hint={hint} />\n    </Field.Root>\n  );\n}\n\nexport type SliderProps = Base & {\n  /** The lowest value. Default 0. */\n  min?: number;\n  /** The highest value. Default 100. */\n  max?: number;\n  /** The step. Default 1. */\n  step?: number;\n  /** The value as words (\"15 %\", \"3 min\"), shown and read. */\n  formatValue?: (value: number) => string;\n  /** For a range (`[number, number]`): each thumb's name, passed translated. */\n  thumbLabels?: [string, string];\n};\n\n/** A number (or a range) of the form, chosen by feel: a share, a volume, a price range. */\nexport function Slider({ name, label, hint, disabled, className, min, max, step, formatValue, thumbLabels }: SliderProps) {\n  const f = useKrizakaField<SliderValue>(name);\n  return (\n    <div className={className ?? \"flex flex-col gap-1.5\"}>\n      <SliderControl label={label} showLabel value={f.value} min={min} max={max} step={step} disabled={disabled} formatValue={formatValue} thumbLabels={thumbLabels} aria-describedby={ids(f, hint)} onValueChange={(v) => f.setValue(v)} onValueCommit={() => f.onBlur()} />\n      <Caption field={f} hint={hint} />\n    </div>\n  );\n}\n\nexport type FormFieldProps<T = unknown> = {\n  /** The field's name in the schema (typed by the form). */\n  name: string;\n  /** Checks the value on the server as it changes. */\n  validateAsync?: FieldCheck<T>;\n  /** The wait, in ms, before `validateAsync`. */\n  asyncDebounceMs?: number;\n  /** Draws the field: its value, setter, error and ids (`useKrizakaField`). */\n  children: (field: KrizakaField<T>) => React.ReactNode;\n};\n\n/** A field drawn by the app (a control the package does not have): the form's value, errors and ids, any markup. */\nexport function FormField({ name, validateAsync, asyncDebounceMs, children }: FormFieldProps) {\n  return <>{children(useKrizakaField(name, { validateAsync, asyncDebounceMs }))}</>;\n}\n\nexport type FieldArrayProps<T = unknown> = {\n  /** The array's name in the schema (typed by the form). */\n  name: string;\n  /** Draws the items: `items`, `push`, `remove`, `move`, `fieldName(i, \"url\")` for the fields of an item. */\n  children: (array: KrizakaFieldArray<T>) => React.ReactNode;\n};\n\n/** A list of fields that grows and shrinks (links, tiers, guests): each item's fields named `links[0].url`. */\nexport function FieldArray({ name, children }: FieldArrayProps) {\n  return <>{children(useKrizakaFieldArray(name))}</>;\n}\n\nexport type WatchProps<T = unknown> = {\n  /** The field to follow (typed by the form). */\n  name: string;\n  /** Draws from its current value: show a part of the form only when a box is ticked. */\n  children: (value: T) => React.ReactNode;\n};\n\n/** Renders from a field's current value (a part shown only when a box is ticked, a total). */\nexport function Watch({ name, children }: WatchProps) {\n  return <>{children(useFormValue(name))}</>;\n}\n\nconst fields = { TextField, TextArea, Checkbox, Switch, RadioGroup, Select, Combobox, DateField, TagInput, FileUpload, Money, Slider, Field: FormField, FieldArray, Watch, Submit, FormError };\n\n/**\n * A form, defined once: its schema (zod 4) and default values — the same schema the server parses with. In a component,\n * `signUp.useForm({ onSubmit })` gives the form and its fields, typed by the schema: `<form.Form>`, `<form.TextField\n * name=\"email\" …/>`, `<form.Submit>`. Errors are i18n keys (`form.errors.tooShort`), never the engine's English.\n */\nexport const createKrizakaForm = makeCreateKrizakaForm(fields, FormRoot);\n\n/** The form sent by a Server Action: `useFormWithAction(signUp, createAccount)` — `signUp.useFormWithAction(createAccount)`. */\nexport function useFormWithAction<F extends { useFormWithAction: (...args: never[]) => unknown }>(form: F, ...args: Parameters<F[\"useFormWithAction\"]>): ReturnType<F[\"useFormWithAction\"]> {\n  return form.useFormWithAction(...args) as ReturnType<F[\"useFormWithAction\"]>;\n}\n"
+      "content": "// Client. The form's fields for the web: thin adapters from a form field (useKrizakaField) to the platform's current\n// primitives — Field + Input, Checkbox, Switch, RadioGroup (dots, cards, tactile keys, segments), Combobox, the date\n// pickers (calendar, typed, wheels), TagInput, Dropzone, Slider. A new look for a primitive changes an adapter here,\n// never a form.\nimport { Alert } from \"@krizaka/ui/alert\";\nimport { Button, type ButtonProps } from \"@krizaka/ui/button\";\nimport { Checkbox as CheckboxControl } from \"@krizaka/ui/checkbox\";\nimport { Combobox as ComboboxControl, type ComboboxLabels, type ComboboxOption } from \"@krizaka/ui/combobox\";\nimport { DateField as DatePartsControl, DatePicker, type DatePickerLabels, DateWheel } from \"@krizaka/ui/date-picker\";\nimport { Field, Input, Select as SelectControl, Textarea } from \"@krizaka/ui/field\";\nimport { Dropzone, formatBytes } from \"@krizaka/ui/file-upload\";\nimport { RadioGroup as RadioGroupControl } from \"@krizaka/ui/radio-group\";\nimport { Slider as SliderControl, type SliderMark, type SliderValue } from \"@krizaka/ui/slider\";\nimport { Spinner } from \"@krizaka/ui/spinner\";\nimport { Switch as SwitchControl } from \"@krizaka/ui/switch\";\nimport { TagInput as TagInputControl, type TagInputProps } from \"@krizaka/ui/tag-input\";\nimport * as React from \"react\";\n\nimport type { DatePart } from \"../date-picker/parts\";\nimport {\n  type FieldCheck,\n  FormContext,\n  type FormContextValue,\n  type KrizakaField,\n  type KrizakaFieldArray,\n  makeCreateKrizakaForm,\n  useFormContext,\n  useFormStatus,\n  useFormValue,\n  useKrizakaField,\n  useKrizakaFieldArray,\n} from \"./core\";\nimport { formMessage } from \"./errors\";\nimport { currencySymbol, moneyInputText, parseMoney } from \"./money\";\n\ntype Base = {\n  /** The field's name in the schema: `email`, `address.city`, `links[0].url` (typed by the form). */\n  name: string;\n  /** The visible label, passed translated (also the control's accessible name). */\n  label: string;\n  /** A help text under the control, read with it; the error takes its place when there is one. */\n  hint?: string;\n  /** Not available. */\n  disabled?: boolean;\n  /** Classes merged on the field's root. */\n  className?: string;\n};\n\nconst ids = (f: KrizakaField, hint?: string) => [hint && !f.error ? f.hintId : null, f.error ? f.errorId : null].filter(Boolean).join(\" \") || undefined;\n\nfunction Caption({ field, hint, ok }: { field: KrizakaField; hint?: string; ok?: string }) {\n  const suggestion = field.errorDetail?.suggestion;\n  if (field.error)\n    return (\n      <Field.Error id={field.errorId}>\n        <span>\n          {field.error}\n          {suggestion ? (\n            <>\n              {\" \"}\n              <button type=\"button\" className=\"font-semibold text-accent-text underline underline-offset-2\" onClick={() => field.setValue(suggestion.value)}>\n                {suggestion.label}\n              </button>\n            </>\n          ) : null}\n        </span>\n      </Field.Error>\n    );\n  const text = field.available && ok ? (hint ? `${ok} · ${hint}` : ok) : hint;\n  return text ? <Field.Hint id={field.hintId}>{text}</Field.Hint> : null;\n}\n\nconst Check = () => (\n  <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4 text-fg-success\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </svg>\n);\n\nexport type FormProps = Omit<React.ComponentProps<\"form\">, \"onSubmit\" | \"noValidate\"> & {\n  /** The fields, the error and the button. */\n  children?: React.ReactNode;\n};\n\n/** The `<form>` of a form (`form.Form`): `noValidate` (the schema validates), the first error focused after a refused submit. */\nfunction FormRoot({ value, className, children, ...props }: FormProps & { value: FormContextValue }) {\n  const ref = React.useRef<HTMLFormElement>(null);\n  return (\n    <FormContext.Provider value={value}>\n      <form\n        ref={ref}\n        noValidate\n        className={className ?? \"flex flex-col gap-4\"}\n        onSubmit={async (event) => {\n          event.preventDefault();\n          if (!(await value.submit())) requestAnimationFrame(() => ref.current?.querySelector<HTMLElement>('[aria-invalid=\"true\"], [data-invalid] input')?.focus());\n        }}\n        {...props}\n      >\n        {children}\n      </form>\n    </FormContext.Provider>\n  );\n}\n\nexport type SubmitProps = Omit<ButtonProps, \"type\" | \"loading\"> & {\n  /** The button's words, passed translated (\"Create my account\"). */\n  children: React.ReactNode;\n};\n\n/** The submit button: busy while the form is sent (not pressable twice), never disabled for an invalid form. */\nexport function Submit({ variant = \"primary\", children, ...props }: SubmitProps) {\n  const { submitting } = useFormStatus();\n  return (\n    <Button type=\"submit\" variant={variant} loading={submitting} {...props}>\n      {children}\n    </Button>\n  );\n}\n\nexport type FormErrorProps = {\n  /** A headline above the message (\"We could not create your account\"), passed translated. */\n  title?: string;\n  /** Classes merged on the alert. */\n  className?: string;\n};\n\n/** The whole form's error — a refusal of the server that belongs to no field (a conflict, too many tries, no network). */\nexport function FormError({ title, className }: FormErrorProps) {\n  const ctx = useFormContext();\n  if (!ctx.error) return null;\n  return (\n    <Alert tone=\"danger\" title={title} className={className}>\n      {formMessage(ctx.error, ctx.i18n)}\n    </Alert>\n  );\n}\n\nexport type TextFieldProps = Base & {\n  /** `text` (default), `email`, `password`, `url`, `tel`, `search`: the right keyboard on a phone. */\n  type?: \"text\" | \"email\" | \"password\" | \"url\" | \"tel\" | \"search\";\n  /** The browser's autofill (`email`, `username`, `new-password`, `name`). */\n  autoComplete?: string;\n  /** An example of a value, passed translated — never the label. */\n  placeholder?: string;\n  /** The keyboard on a phone (`numeric`, `decimal`). */\n  inputMode?: React.HTMLAttributes<HTMLInputElement>[\"inputMode\"];\n  /** The most characters. */\n  maxLength?: number;\n  /** Cleans what is typed before it is stored (`(v) => v.toLowerCase().replace(/\\s+/g, \"_\")`). */\n  transform?: (raw: string) => string;\n  /** Checks the value on the server as it is typed (availability): an error key, or nothing when it is fine. */\n  validateAsync?: FieldCheck<string>;\n  /** The wait, in ms, between the last key and `validateAsync`. Default 350. */\n  asyncDebounceMs?: number;\n  /** The words once `validateAsync` accepted the value (\"@eric is free\"), passed translated. */\n  availableHint?: string;\n  /** The name of the wait while it checks (\"Checking\"), passed translated. */\n  checkingLabel?: string;\n  /** Something before the text (an `@`, an icon). */\n  start?: React.ReactNode;\n};\n\n/** A text field of the form: label, input, hint or error, an optional check on the server. */\nexport function TextField({ name, label, hint, disabled, className, type = \"text\", transform, validateAsync, asyncDebounceMs, availableHint, checkingLabel = \"Checking\", start, ...input }: TextFieldProps) {\n  const f = useKrizakaField<string>(name, { validateAsync, asyncDebounceMs });\n  const end = f.validating ? <Spinner size=\"sm\" label={checkingLabel} /> : f.available ? <Check /> : null;\n  return (\n    <Field.Root className={className}>\n      <Field.Label htmlFor={f.id}>{label}</Field.Label>\n      <span className=\"relative flex items-center\">\n        {start ? <span className=\"pointer-events-none absolute left-3 text-fg-muted\">{start}</span> : null}\n        <Input\n          id={f.id}\n          name={name}\n          type={type}\n          value={f.value ?? \"\"}\n          disabled={disabled}\n          invalid={Boolean(f.error)}\n          aria-describedby={ids(f, hint ?? availableHint)}\n          onChange={(event) => f.setValue(transform ? transform(event.target.value) : event.target.value)}\n          onBlur={f.onBlur}\n          className={[start ? \"pl-9\" : \"\", end ? \"pr-10\" : \"\"].join(\" \").trim() || undefined}\n          {...input}\n        />\n        {end ? <span className=\"absolute right-3 flex\">{end}</span> : null}\n      </span>\n      <Caption field={f} hint={hint} ok={availableHint} />\n    </Field.Root>\n  );\n}\n\nexport type TextAreaProps = Base & {\n  /** An example of a value, passed translated. */\n  placeholder?: string;\n  /** The visible lines. Default 4. */\n  rows?: number;\n  /** The most characters. */\n  maxLength?: number;\n};\n\n/** A longer text of the form (a bio, a description, a report). */\nexport function TextArea({ name, label, hint, disabled, className, rows = 4, ...input }: TextAreaProps) {\n  const f = useKrizakaField<string>(name);\n  return (\n    <Field.Root className={className}>\n      <Field.Label htmlFor={f.id}>{label}</Field.Label>\n      <Textarea id={f.id} name={name} rows={rows} value={f.value ?? \"\"} disabled={disabled} invalid={Boolean(f.error)} aria-describedby={ids(f, hint)} onChange={(e) => f.setValue(e.target.value)} onBlur={f.onBlur} {...input} />\n      <Caption field={f} hint={hint} />\n    </Field.Root>\n  );\n}\n\nexport type CheckboxProps = Omit<Base, \"label\"> & {\n  /** The words next to the box, clickable with it — text, or a sentence with links (terms, privacy). */\n  label: React.ReactNode;\n};\n\n/** A box of the form (`boolean`): terms to accept, an option. */\nexport function Checkbox({ name, label, hint, disabled, className }: CheckboxProps) {\n  const f = useKrizakaField<boolean>(name);\n  return (\n    <div className={className ?? \"flex flex-col gap-1.5\"}>\n      <CheckboxControl id={f.id} name={name} checked={f.value === true} disabled={disabled} invalid={Boolean(f.error)} aria-describedby={ids(f, hint)} onCheckedChange={(c) => f.setValue(c === true)} onBlur={f.onBlur}>\n        {label}\n      </CheckboxControl>\n      <Caption field={f} hint={hint} />\n    </div>\n  );\n}\n\n/** An on/off setting of the form (`boolean`): the label and its hint beside the switch. */\nexport function Switch({ name, label, hint, disabled, className }: Base) {\n  const f = useKrizakaField<boolean>(name);\n  return (\n    <div className={className ?? \"flex items-start justify-between gap-4\"}>\n      <div className=\"flex min-w-0 flex-col gap-0.5\">\n        <Field.Label htmlFor={f.id} className=\"text-sm font-medium text-fg\">\n          {label}\n        </Field.Label>\n        <Caption field={f} hint={hint} />\n      </div>\n      <SwitchControl id={f.id} name={name} checked={f.value === true} disabled={disabled} invalid={Boolean(f.error)} aria-describedby={ids(f, hint)} onCheckedChange={(c) => f.setValue(c)} onBlur={f.onBlur} />\n    </div>\n  );\n}\n\n/** A choice of the form: the value stored, its words (passed translated), a line under them. */\nexport type FormOption = { value: string; label: string; description?: string; disabled?: boolean };\n\nexport type RadioGroupProps = Base & {\n  /** The choices, all visible (two to five). */\n  options: readonly FormOption[];\n  /**\n   * `list` (a dot and its words, default), `cards` (a whole card is the radio: an amount, a plan, an audience),\n   * `buttons` (tactile keys that press in: a size, a tip; `description` is the key's second line) or `segmented`\n   * (two to four short choices on one line).\n   */\n  variant?: \"list\" | \"cards\" | \"buttons\" | \"segmented\";\n  /** `vertical` (default) or `horizontal`. */\n  orientation?: \"vertical\" | \"horizontal\";\n};\n\n/** One choice among a few, all visible. */\nexport function RadioGroup({ name, label, hint, disabled, className, options, variant = \"list\", orientation = \"vertical\" }: RadioGroupProps) {\n  const f = useKrizakaField<string>(name);\n  return (\n    <Field.Root className={className} role=\"group\" aria-labelledby={`${f.id}-label`}>\n      <span id={`${f.id}-label`} className=\"text-xs font-semibold text-fg-secondary\">\n        {label}\n      </span>\n      <RadioGroupControl.Root\n        aria-labelledby={`${f.id}-label`}\n        value={f.value ?? \"\"}\n        onValueChange={(v) => f.setValue(v)}\n        onBlur={f.onBlur}\n        orientation={orientation}\n        disabled={disabled}\n        invalid={Boolean(f.error)}\n        aria-describedby={ids(f, hint)}\n        name={name}\n        variant={variant}\n        className={variant === \"segmented\" ? \"self-start\" : undefined}\n      >\n        {options.map((o) =>\n          variant === \"cards\" ? (\n            <RadioGroupControl.Card key={o.value} value={o.value} disabled={o.disabled}>\n              <span className=\"font-semibold\">{o.label}</span>\n              {o.description ? <span className=\"text-xs text-fg-secondary\">{o.description}</span> : null}\n            </RadioGroupControl.Card>\n          ) : variant === \"buttons\" ? (\n            <RadioGroupControl.Button key={o.value} value={o.value} disabled={o.disabled} hint={o.description}>\n              {o.label}\n            </RadioGroupControl.Button>\n          ) : variant === \"segmented\" ? (\n            <RadioGroupControl.Segment key={o.value} value={o.value} disabled={o.disabled}>\n              {o.label}\n            </RadioGroupControl.Segment>\n          ) : (\n            <RadioGroupControl.Item key={o.value} value={o.value} disabled={o.disabled}>\n              {o.label}\n              {o.description ? <span className=\"block text-xs text-fg-secondary\">{o.description}</span> : null}\n            </RadioGroupControl.Item>\n          ),\n        )}\n      </RadioGroupControl.Root>\n      <Caption field={f} hint={hint} />\n    </Field.Root>\n  );\n}\n\nexport type SelectProps = Base & {\n  /** The choices, in the platform's own menu (a country, a category). */\n  options: readonly FormOption[];\n  /** The first line while nothing is chosen (\"Choose a category\"), passed translated. */\n  placeholder?: string;\n};\n\n/** One choice among many, in the platform's menu (`<select>`: accessible and right on phones). */\nexport function Select({ name, label, hint, disabled, className, options, placeholder }: SelectProps) {\n  const f = useKrizakaField<string>(name);\n  return (\n    <Field.Root className={className}>\n      <Field.Label htmlFor={f.id}>{label}</Field.Label>\n      <SelectControl id={f.id} name={name} value={f.value ?? \"\"} disabled={disabled} invalid={Boolean(f.error)} aria-describedby={ids(f, hint)} onChange={(e) => f.setValue(e.target.value)} onBlur={f.onBlur}>\n        {placeholder !== undefined ? (\n          <option value=\"\" disabled>\n            {placeholder}\n          </option>\n        ) : null}\n        {options.map((o) => (\n          <option key={o.value} value={o.value} disabled={o.disabled}>\n            {o.label}\n          </option>\n        ))}\n      </SelectControl>\n      <Caption field={f} hint={hint} />\n    </Field.Root>\n  );\n}\n\nexport type ComboboxProps = Base & {\n  /** The options, filtered as the person types. */\n  options?: readonly ComboboxOption[];\n  /** Fetches the options for a query (debounced, aborted by a newer one). */\n  onSearch?: (query: string, signal: AbortSignal) => Promise<readonly ComboboxOption[]>;\n  /** Several values (`string[]`), shown as chips; one (`string`) by default. */\n  multiple?: boolean;\n  /** Offers to create the query as a value. */\n  creatable?: boolean;\n  /** The input's placeholder, passed translated. */\n  placeholder?: string;\n  /** The words of the control, passed translated. */\n  labels?: Partial<ComboboxLabels>;\n};\n\n/** A choice among many, typed to filter or fetched: one value (`string`) or several (`string[]`). */\nexport function Combobox({ name, label, hint, disabled, className, options = [], onSearch, multiple, creatable, placeholder, labels }: ComboboxProps) {\n  const f = useKrizakaField<string | string[]>(name);\n  // The options chosen from a search, by value: their labels once the search has moved on.\n  const [seen, setSeen] = React.useState<Record<string, ComboboxOption>>({});\n  const option = (value: string) => options.find((o) => o.value === value) ?? seen[value] ?? { value, label: value };\n  const remember = (o: ComboboxOption) => setSeen((known) => (known[o.value] === o ? known : { ...known, [o.value]: o }));\n  const shared = { id: f.id, label, hint, error: f.error, disabled, placeholder, labels, options, onSearch, creatable, name };\n  return (\n    <div className={className} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n      {multiple ? (\n        <ComboboxControl\n          {...shared}\n          multiple\n          value={((f.value as string[] | undefined) ?? []).map(option)}\n          onValueChange={(next) => {\n            next.forEach(remember);\n            f.setValue(next.map((o) => o.value));\n          }}\n        />\n      ) : (\n        <ComboboxControl\n          {...shared}\n          value={f.value ? option(f.value as string) : null}\n          onValueChange={(next) => {\n            if (next) remember(next);\n            f.setValue(next?.value ?? \"\");\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport type DateFieldProps = Base & {\n  /**\n   * `calendar` (default: a date near today — a publication, an appointment), `parts` (day · month · year typed: a\n   * memorable date, a birth date) or `wheel` (three wheels bounded by `min` / `max`: a birth date on a phone).\n   */\n  entry?: \"calendar\" | \"parts\" | \"wheel\";\n  /** The earliest date (ISO), for the calendar and the wheels. */\n  min?: string;\n  /** The latest date (ISO), for the calendar and the wheels (`latestBirthDate(18)` for an age gate). */\n  max?: string;\n  /** The words of the calendar, or the names of the parts (`day`, `month`, `year`), passed translated. */\n  labels?: Partial<DatePickerLabels> & Partial<Record<DatePart, string>>;\n  /** `bday` for a date of birth: typed boxes are autofilled; the wheels rest on 1 January 2000 until turned. */\n  autoComplete?: \"bday\" | \"off\";\n};\n\n/** A date of the form (`YYYY-MM-DD`, `\"\"` for none): a calendar, day · month · year typed, or wheels. */\nexport function DateField({ name, label, hint, disabled, className, entry = \"calendar\", min, max, labels, autoComplete }: DateFieldProps) {\n  const f = useKrizakaField<string>(name);\n  const onBlur = (e: React.FocusEvent<HTMLElement>) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur();\n  if (entry === \"calendar\")\n    return (\n      <div className={className} onBlur={onBlur}>\n        <DatePicker label={label} hint={hint} error={f.error} disabled={disabled} name={name} locale={f.locale} min={min} max={max} labels={labels} value={f.value || null} onValueChange={(v) => f.setValue(v ?? \"\")} />\n      </div>\n    );\n  if (entry === \"wheel\")\n    return (\n      <div className={className} onBlur={onBlur}>\n        <DateWheel label={label} hint={hint} error={f.error} disabled={disabled} name={name} locale={f.locale} min={min} max={max} labels={labels} defaultView={autoComplete === \"bday\" ? \"2000-01-01\" : undefined} value={f.value || null} onValueChange={(v) => f.setValue(v)} />\n      </div>\n    );\n  return <DatePartsControl label={label} hint={hint} error={f.error} disabled={disabled} name={name} locale={f.locale} labels={labels} autoComplete={autoComplete} className={className} value={f.value ?? \"\"} onValueChange={(v) => f.setValue(v)} onBlur={f.onBlur} />;\n}\n\nexport type TagsProps = Base & Pick<TagInputProps, \"suggestions\" | \"normalize\" | \"max\" | \"separators\" | \"placeholder\" | \"labels\">;\n\n/** Free words of the form as chips (`string[]`): tags, keywords. */\nexport function TagInput({ name, label, hint, disabled, className, ...props }: TagsProps) {\n  const f = useKrizakaField<string[]>(name);\n  return (\n    <div className={className} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n      <TagInputControl label={label} hint={hint} error={f.error} disabled={disabled} name={name} value={f.value ?? []} onValueChange={(tags) => f.setValue(tags)} {...props} />\n    </div>\n  );\n}\n\nexport type FileUploadProps = Omit<Base, \"hint\"> & {\n  /** The title in the zone (\"Drop your video here\"), passed translated. */\n  title: string;\n  /** The button that opens the file picker, passed translated. */\n  browseLabel: string;\n  /** What is accepted, in words (\"MP4 or MOV, up to 4 GB\"). */\n  hint?: string;\n  /** The types accepted (`video/*`, `image/png,.pdf`). */\n  accept?: string;\n  /** The largest file, in bytes. */\n  maxSize?: number;\n  /** Several files (`File[]`, up to `maxFiles`); one by default (still a `File[]` of one). */\n  multiple?: boolean;\n  /** The most files. */\n  maxFiles?: number;\n  /** The name of a file's remove button (`(name) => \"Remove \" + name`), passed translated. */\n  removeLabel: (fileName: string) => string;\n  /** The words of a refused file (`(r) => r.file.name + \" is too large\"`). */\n  refusalLabel?: React.ComponentProps<typeof Dropzone>[\"refusalLabel\"];\n};\n\n/** Files of the form (`File[]`): a drop zone, then the chosen files, each removable. */\nexport function FileUpload({ name, label, hint, disabled, className, title, browseLabel, accept, maxSize, multiple, maxFiles, removeLabel, refusalLabel }: FileUploadProps) {\n  const f = useKrizakaField<File[]>(name);\n  const files = f.value ?? [];\n  return (\n    <div className={className ?? \"flex flex-col gap-2\"} role=\"group\" aria-label={label} onBlur={(e) => !e.currentTarget.contains(e.relatedTarget as Node | null) && f.onBlur()}>\n      <span className=\"text-xs font-semibold text-fg-secondary\">{label}</span>\n      <Dropzone\n        title={title}\n        browseLabel={browseLabel}\n        hint={hint}\n        accept={accept}\n        maxSize={maxSize}\n        multiple={multiple}\n        maxFiles={maxFiles}\n        disabled={disabled}\n        refusalLabel={refusalLabel}\n        onFiles={(chosen) => f.setValue(multiple ? [...files, ...chosen].slice(0, maxFiles ?? Infinity) : chosen.slice(0, 1))}\n      />\n      {files.length > 0 ? (\n        <ul className=\"flex flex-col gap-1.5\">\n          {files.map((file, i) => (\n            <li key={`${file.name}-${i}`} className=\"flex items-center justify-between gap-3 rounded-lg border border-border-default bg-surface-1 px-3 py-2 text-sm\">\n              <span className=\"min-w-0 truncate text-fg\">{file.name}</span>\n              <span className=\"flex shrink-0 items-center gap-2\">\n                <span className=\"font-mono text-xs text-fg-secondary\">{formatBytes(file.size, f.locale)}</span>\n                <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => f.setValue(files.filter((_, j) => j !== i))}>\n                  {removeLabel(file.name)}\n                </Button>\n              </span>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n      {f.error ? <Field.Error id={f.errorId}>{f.error}</Field.Error> : null}\n    </div>\n  );\n}\n\nexport type MoneyProps = Base & {\n  /** The currency (ISO 4217: `USD`, `EUR`, `JPY`): its sign before the amount, its decimals. */\n  currency: string;\n  /** An example of an amount, passed translated. */\n  placeholder?: string;\n};\n\n/** An amount of the form, stored as integer minor units (cents: `1250` = 12.50), typed the locale's way. */\nexport function Money({ name, label, hint, disabled, className, currency, placeholder }: MoneyProps) {\n  const f = useKrizakaField<number | null>(name);\n  const [text, setText] = React.useState(() => moneyInputText(f.value, currency, f.locale));\n  const [editing, setEditing] = React.useState(false);\n  const shown = editing ? text : moneyInputText(f.value, currency, f.locale);\n  return (\n    <Field.Root className={className}>\n      <Field.Label htmlFor={f.id}>{label}</Field.Label>\n      <span className=\"relative flex items-center\">\n        <span className=\"pointer-events-none absolute left-3 text-sm text-fg-secondary\" aria-hidden>\n          {currencySymbol(currency, f.locale)}\n        </span>\n        <Input\n          id={f.id}\n          name={name}\n          inputMode=\"decimal\"\n          value={shown}\n          placeholder={placeholder}\n          disabled={disabled}\n          invalid={Boolean(f.error)}\n          aria-describedby={ids(f, hint)}\n          className=\"pl-9 tabular-nums\"\n          onFocus={() => {\n            setText(moneyInputText(f.value, currency, f.locale));\n            setEditing(true);\n          }}\n          onChange={(e) => {\n            setText(e.target.value);\n            const units = parseMoney(e.target.value, currency, f.locale);\n            f.setValue(units === undefined ? null : units === null ? Number.NaN : units);\n          }}\n          onBlur={() => {\n            setEditing(false);\n            f.onBlur();\n          }}\n        />\n      </span>\n      <Caption field={f} hint={hint} />\n    </Field.Root>\n  );\n}\n\nexport type SliderProps = Base & {\n  /** The lowest value. Default 0. */\n  min?: number;\n  /** The highest value. Default 100. */\n  max?: number;\n  /** The step. Default 1. */\n  step?: number;\n  /** The value as words (\"15 %\", \"3 min\"), shown and read. */\n  formatValue?: (value: number) => string;\n  /** For a range (`[number, number]`): each thumb's name, passed translated. */\n  thumbLabels?: [string, string];\n  /** A graduation per step (`true`) or at the values given. */\n  ticks?: boolean | readonly number[];\n  /** Words under the track at some values. */\n  marks?: readonly SliderMark[];\n};\n\n/** A number (or a range) of the form, chosen by feel: a share, a volume, a price range — the value floats while it is touched. */\nexport function Slider({ name, label, hint, disabled, className, min, max, step, formatValue, thumbLabels, ticks, marks }: SliderProps) {\n  const f = useKrizakaField<SliderValue>(name);\n  return (\n    <div className={className ?? \"flex flex-col gap-1.5\"}>\n      <SliderControl label={label} showLabel floatingValue value={f.value} min={min} max={max} step={step} ticks={ticks} marks={marks} disabled={disabled} formatValue={formatValue} thumbLabels={thumbLabels} aria-describedby={ids(f, hint)} onValueChange={(v) => f.setValue(v)} onValueCommit={() => f.onBlur()} />\n      <Caption field={f} hint={hint} />\n    </div>\n  );\n}\n\nexport type FormFieldProps<T = unknown> = {\n  /** The field's name in the schema (typed by the form). */\n  name: string;\n  /** Checks the value on the server as it changes. */\n  validateAsync?: FieldCheck<T>;\n  /** The wait, in ms, before `validateAsync`. */\n  asyncDebounceMs?: number;\n  /** Draws the field: its value, setter, error and ids (`useKrizakaField`). */\n  children: (field: KrizakaField<T>) => React.ReactNode;\n};\n\n/** A field drawn by the app (a control the package does not have): the form's value, errors and ids, any markup. */\nexport function FormField({ name, validateAsync, asyncDebounceMs, children }: FormFieldProps) {\n  return <>{children(useKrizakaField(name, { validateAsync, asyncDebounceMs }))}</>;\n}\n\nexport type FieldArrayProps<T = unknown> = {\n  /** The array's name in the schema (typed by the form). */\n  name: string;\n  /** Draws the items: `items`, `push`, `remove`, `move`, `fieldName(i, \"url\")` for the fields of an item. */\n  children: (array: KrizakaFieldArray<T>) => React.ReactNode;\n};\n\n/** A list of fields that grows and shrinks (links, tiers, guests): each item's fields named `links[0].url`. */\nexport function FieldArray({ name, children }: FieldArrayProps) {\n  return <>{children(useKrizakaFieldArray(name))}</>;\n}\n\nexport type WatchProps<T = unknown> = {\n  /** The field to follow (typed by the form). */\n  name: string;\n  /** Draws from its current value: show a part of the form only when a box is ticked. */\n  children: (value: T) => React.ReactNode;\n};\n\n/** Renders from a field's current value (a part shown only when a box is ticked, a total). */\nexport function Watch({ name, children }: WatchProps) {\n  return <>{children(useFormValue(name))}</>;\n}\n\nconst fields = { TextField, TextArea, Checkbox, Switch, RadioGroup, Select, Combobox, DateField, TagInput, FileUpload, Money, Slider, Field: FormField, FieldArray, Watch, Submit, FormError };\n\n/**\n * A form, defined once: its schema (zod 4) and default values — the same schema the server parses with. In a component,\n * `signUp.useForm({ onSubmit })` gives the form and its fields, typed by the schema: `<form.Form>`, `<form.TextField\n * name=\"email\" …/>`, `<form.Submit>`. Errors are i18n keys (`form.errors.tooShort`), never the engine's English.\n */\nexport const createKrizakaForm = makeCreateKrizakaForm(fields, FormRoot);\n\n/** The form sent by a Server Action: `useFormWithAction(signUp, createAccount)` — `signUp.useFormWithAction(createAccount)`. */\nexport function useFormWithAction<F extends { useFormWithAction: (...args: never[]) => unknown }>(form: F, ...args: Parameters<F[\"useFormWithAction\"]>): ReturnType<F[\"useFormWithAction\"]> {\n  return form.useFormWithAction(...args) as ReturnType<F[\"useFormWithAction\"]>;\n}\n"
     },
     {
       "path": "meta.ts",
@@ -2043,7 +2237,7 @@
     },
     {
       "component": "DateField",
-      "description": "A date of the form (`YYYY-MM-DD`, `\"\"` for none): a calendar, or day · month · year typed in the locale's order.",
+      "description": "A date of the form (`YYYY-MM-DD`, `\"\"` for none): a calendar, day · month · year typed, or wheels.",
       "props": [
         {
           "name": "label",
@@ -2063,7 +2257,7 @@
           "name": "autoComplete",
           "type": "\"off\" | \"bday\"",
           "default": null,
-          "description": "`bday` for a date of birth.",
+          "description": "`bday` for a date of birth: typed boxes are autofilled; the wheels rest on 1 January 2000 until turned.",
           "required": false
         },
         {
@@ -2082,9 +2276,9 @@
         },
         {
           "name": "entry",
-          "type": "\"calendar\" | \"parts\"",
+          "type": "\"wheel\" | \"calendar\" | \"parts\"",
           "default": "calendar",
-          "description": "`calendar` (default: a date near today — a publication, an appointment) or `parts` (day · month · year typed: a\nmemorable date, a birth date).",
+          "description": "`calendar` (default: a date near today — a publication, an appointment), `parts` (day · month · year typed: a\nmemorable date, a birth date) or `wheel` (three wheels bounded by `min` / `max`: a birth date on a phone).",
           "required": false
         },
         {
@@ -2098,21 +2292,21 @@
           "name": "labels",
           "type": "(Partial<DatePickerLabels> & Partial<Record<DatePart, string>>)",
           "default": null,
-          "description": "The words of the calendar, or the names of the boxes (`day`, `month`, `year`), passed translated.",
+          "description": "The words of the calendar, or the names of the parts (`day`, `month`, `year`), passed translated.",
           "required": false
         },
         {
           "name": "max",
           "type": "string",
           "default": null,
-          "description": "The latest date (ISO), for the calendar (`latestBirthDate(18)` for an age gate).",
+          "description": "The latest date (ISO), for the calendar and the wheels (`latestBirthDate(18)` for an age gate).",
           "required": false
         },
         {
           "name": "min",
           "type": "string",
           "default": null,
-          "description": "The earliest date (ISO), for the calendar.",
+          "description": "The earliest date (ISO), for the calendar and the wheels.",
           "required": false
         }
       ]
@@ -2398,9 +2592,9 @@
         },
         {
           "name": "variant",
-          "type": "\"list\" | \"cards\"",
+          "type": "\"list\" | \"buttons\" | \"cards\" | \"segmented\"",
           "default": "list",
-          "description": "`list` (a dot and its words, default) or `cards` (a whole card is the radio: an amount, a plan, an audience).",
+          "description": "`list` (a dot and its words, default), `cards` (a whole card is the radio: an amount, a plan, an audience),\n`buttons` (tactile keys that press in: a size, a tip; `description` is the key's second line) or `segmented`\n(two to four short choices on one line).",
           "required": false
         }
       ]
@@ -2462,7 +2656,7 @@
     },
     {
       "component": "Slider",
-      "description": "A number (or a range) of the form, chosen by feel: a share, a volume, a price range.",
+      "description": "A number (or a range) of the form, chosen by feel: a share, a volume, a price range — the value floats while it is touched.",
       "props": [
         {
           "name": "label",
@@ -2506,6 +2700,13 @@
           "description": "A help text under the control, read with it; the error takes its place when there is one.",
           "required": false
         },
+        {
+          "name": "marks",
+          "type": "readonly SliderMark[]",
+          "default": null,
+          "description": "Words under the track at some values.",
+          "required": false
+        },
         {
           "name": "max",
           "type": "number",
@@ -2533,6 +2734,13 @@
           "default": null,
           "description": "For a range (`[number, number]`): each thumb's name, passed translated.",
           "required": false
+        },
+        {
+          "name": "ticks",
+          "type": "boolean | readonly number[]",
+          "default": null,
+          "description": "A graduation per step (`true`) or at the values given.",
+          "required": false
         }
       ]
     },