@krizaka/ui 3.0.0 → 3.1.0

package/dist/native/form.js

@@ -0,0 +1,650 @@
+// src/native/form.tsx
+import { Button, Checkbox as CheckboxControl, Chip, DateField as DateFieldControl, ProductMark, Spinner, TextField as TextFieldControl, Txt, useTheme } from "@krizaka/ui/native";
+import * as React2 from "react";
+import { AccessibilityInfo, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Switch as SwitchControl, View } from "react-native";
+
+// src/form/core.tsx
+import { useField, useForm, useStore } from "@tanstack/react-form";
+import * as React from "react";
+
+// src/form/errors.ts
+var formMessages = {
+  required: "This field is required.",
+  tooShort: "Use at least {minimum} characters.",
+  tooLong: "Use at most {maximum} characters.",
+  tooSmall: "Enter {minimum} or more.",
+  tooBig: "Enter {maximum} or less.",
+  tooFew: "Choose at least {minimum}.",
+  tooMany: "Choose at most {maximum}.",
+  invalidEmail: "Enter an e-mail address, like name@example.com.",
+  invalidUrl: "Enter a web address, like https://example.com.",
+  invalidDate: "Enter a real date.",
+  invalidNumber: "Enter a number.",
+  invalidFormat: "Check the format of this field.",
+  invalidChoice: "Choose one of the options.",
+  invalid: "Check this field.",
+  // The whole form (a server's answer without fields): the codes of @krizaka/query's KrizakaApiError.
+  network: "No connection. Check your network and try again.",
+  "rate-limited": "Too many tries. Wait a moment and try again.",
+  unauthorized: "Your session has ended. Sign in again.",
+  forbidden: "You are not allowed to do this.",
+  conflict: "This was changed meanwhile. Reload and try again.",
+  "validation-failed": "Some fields need your attention.",
+  unavailable: "The service is unavailable for a moment. Try again shortly.",
+  server: "Something went wrong on our side. Try again."
+};
+var KEY = /^[\w-]+(\.[\w-]+)+$/;
+var fill = (text, values) => values ? text.replace(/\{(\w+)\}/g, (all, name) => values[name] === void 0 ? all : String(values[name])) : text;
+function formMessage(error, i18n = {}) {
+  const e = typeof error === "string" ? { key: error } : error;
+  const translated = i18n.t?.(e.key, e.values);
+  if (translated && translated !== e.key) return translated;
+  const code = e.key.slice(e.key.lastIndexOf(".") + 1);
+  const fallback = formMessages[code];
+  if (e.message && (code === "invalid" || !fallback)) return e.message;
+  if (fallback && (e.key.startsWith(`${i18n.prefix ?? "form.errors"}.`) || e.key.startsWith(`${i18n.apiPrefix ?? "apiErrors"}.`))) return fill(fallback, e.values);
+  return e.message ?? (KEY.test(e.key) ? fill(fallback ?? formMessages.invalid, e.values) : e.key);
+}
+function pathName(path) {
+  let name = "";
+  for (const part of path ?? []) {
+    const key = typeof part === "object" && part !== null ? part.key : part;
+    if (typeof key === "number") name += `[${key}]`;
+    else name += name ? `.${String(key)}` : String(key);
+  }
+  return name;
+}
+var num = (value) => value === void 0 ? void 0 : Number(value);
+function issueError(issue, prefix = "form.errors") {
+  if (KEY.test(issue.message)) return { key: issue.message };
+  const key = (code, values) => ({ key: `${prefix}.${code}`, ...values ? { values } : {} });
+  const collection = issue.origin === "array" || issue.origin === "set";
+  switch (issue.code) {
+    case "invalid_type":
+      return issue.input === void 0 || issue.input === null || issue.input === "" ? key("required") : issue.expected === "number" ? key("invalidNumber") : issue.expected === "date" ? key("invalidDate") : key("invalid");
+    case "too_small": {
+      const minimum = num(issue.minimum);
+      if (issue.origin === "string") return minimum <= 1 ? key("required") : key("tooShort", { minimum });
+      if (collection) return minimum <= 1 ? key("required") : key("tooFew", { minimum });
+      return key("tooSmall", { minimum });
+    }
+    case "too_big": {
+      const maximum = num(issue.maximum);
+      return issue.origin === "string" ? key("tooLong", { maximum }) : collection ? key("tooMany", { maximum }) : key("tooBig", { maximum });
+    }
+    case "invalid_format":
+      if (issue.format === "email") return key("invalidEmail");
+      if (issue.format === "url") return key("invalidUrl");
+      if (issue.format === "date" || issue.format === "datetime") return key("invalidDate");
+      return key("invalidFormat");
+    case "invalid_value":
+      return issue.input === false || issue.input === void 0 ? key("required") : key("invalidChoice");
+    case "invalid_union":
+    case "invalid_key":
+    case "invalid_element":
+      return key("invalidChoice");
+    default:
+      return key("invalid");
+  }
+}
+function issuesToFields(issues, prefix) {
+  const fields2 = {};
+  for (const issue of issues) {
+    const name = pathName(issue.path);
+    if (!(name in fields2)) fields2[name] = { ...issueError(issue, prefix), source: "schema" };
+  }
+  return fields2;
+}
+function isFormProblem(value) {
+  return typeof value === "object" && value !== null && ("fields" in value || "code" in value || "status" in value);
+}
+function problemToErrors(problem, i18n = {}, known, codeFields = {}) {
+  const prefix = i18n.prefix ?? "form.errors";
+  const fields2 = {};
+  let unplaced = false;
+  const owner = problem.code ? codeFields[problem.code] : void 0;
+  if (owner && (!known || known(owner)) && !problem.fields?.[owner]) {
+    fields2[owner] = { key: `${prefix}.${problem.code}`, ...problem.detail ? { message: problem.detail } : {}, source: "server" };
+    if (!problem.fields || Object.keys(problem.fields).length === 0) return { fields: fields2, form: null };
+  }
+  for (const [name, refusal] of Object.entries(problem.fields ?? {})) {
+    if (known && !known(name)) {
+      unplaced = true;
+      continue;
+    }
+    const error = typeof refusal === "string" ? { key: refusal } : "key" in refusal ? refusal : { key: refusal.code ? KEY.test(refusal.code) ? refusal.code : `${prefix}.${refusal.code}` : `${prefix}.invalid`, message: refusal.message };
+    fields2[name] = { ...error, source: "server" };
+  }
+  const placed = Object.keys(fields2).length > 0;
+  if (placed && !unplaced) return { fields: fields2, form: null };
+  const code = problem.code ?? (problem.status === 0 ? "network" : problem.status && problem.status >= 500 ? "server" : "invalid");
+  const retryIn = problem.retryAt ? Math.max(1, Math.ceil((problem.retryAt - Date.now()) / 1e3)) : void 0;
+  return {
+    fields: fields2,
+    form: { key: KEY.test(code) ? code : `${i18n.apiPrefix ?? "apiErrors"}.${code}`, ...problem.detail ? { message: problem.detail } : {}, ...retryIn ? { values: { seconds: retryIn } } : {}, source: "server" }
+  };
+}
+
+// src/form/core.tsx
+import { jsx } from "react/jsx-runtime";
+var FormContext = React.createContext(null);
+function useFormContext() {
+  const ctx = React.useContext(FormContext);
+  if (!ctx) throw new Error("A Krizaka form field must be inside its form's `form.Form`.");
+  return ctx;
+}
+var run = (schema, value) => schema["~standard"].validate(value);
+function useKrizakaFormCore(definition, options = {}) {
+  const i18n = { ...definition.i18n, ...options.i18n };
+  const latest = React.useRef({ options, i18n });
+  React.useLayoutEffect(() => {
+    latest.current = { options, i18n };
+  });
+  const [error, setError] = React.useState(null);
+  const refused = React.useRef(false);
+  const api = useForm({
+    defaultValues: options.defaultValues ?? definition.defaultValues,
+    validators: {
+      // Every change: the schema, synchronously (an async refinement waits for the submit). Errors are computed for
+      // every field; each field shows its own once the person left it or tried to send.
+      onChange: ({ value }) => {
+        const result = run(definition.schema, value);
+        if (result instanceof Promise || !result.issues?.length) return void 0;
+        const fields2 = issuesToFields(result.issues, latest.current.i18n.prefix);
+        delete fields2[""];
+        return { fields: fields2 };
+      }
+    },
+    onSubmit: async ({ value }) => {
+      const parsed = await run(definition.schema, value);
+      if (parsed.issues?.length) {
+        apply({ fields: issuesToFields(parsed.issues, latest.current.i18n.prefix) });
+        return;
+      }
+      let result;
+      try {
+        result = await latest.current.options.onSubmit?.(parsed.value);
+      } catch (thrown) {
+        apply(isFormProblem(thrown) ? thrown : { code: "server" });
+        return;
+      }
+      if (result && typeof result === "object" && "ok" in result && result.ok === false) {
+        apply(result.problem);
+        return;
+      }
+      const data = result && typeof result === "object" && "ok" in result ? result.data : result;
+      latest.current.options.onSuccess?.(data);
+    }
+  });
+  const known = (name) => name in api.fieldInfo;
+  function apply(problem) {
+    refused.current = true;
+    const { fields: fields2, form } = problemToErrors(problem, latest.current.i18n, known, latest.current.options.codeFields);
+    for (const [name, fieldError] of Object.entries(fields2)) {
+      api.setFieldMeta(name, (meta) => ({ ...meta, isBlurred: true, errorMap: { ...meta.errorMap, onServer: fieldError } }));
+    }
+    setError(form);
+  }
+  const submit = React.useCallback(async () => {
+    setError(null);
+    refused.current = false;
+    for (const name of Object.keys(api.fieldInfo)) {
+      if (api.getFieldMeta(name)?.errorMap?.onServer) api.setFieldMeta(name, (meta) => ({ ...meta, errorMap: { ...meta.errorMap, onServer: void 0 } }));
+    }
+    await api.handleSubmit();
+    const state = api.state;
+    return !refused.current && state.isSubmitSuccessful && state.isValid && !Object.values(state.fieldMeta).some((meta) => meta?.errorMap?.onServer);
+  }, [api]);
+  return React.useMemo(() => ({ api, i18n, error, submit }), [api, error, submit, i18n.t, i18n.prefix, i18n.apiPrefix, i18n.locale]);
+}
+var UNCHECKED = /* @__PURE__ */ Symbol("unchecked");
+function useKrizakaField(name, options = {}) {
+  const ctx = useFormContext();
+  const id = React.useId();
+  const [checked, setChecked] = React.useState(UNCHECKED);
+  const check = options.validateAsync;
+  const field = useField({
+    form: ctx.api,
+    name,
+    ...check ? {
+      asyncDebounceMs: options.asyncDebounceMs ?? 350,
+      validators: {
+        onChangeAsyncDebounceMs: options.asyncDebounceMs ?? 350,
+        onChangeAsync: async ({ value: value2, signal }) => {
+          const answer = await check(value2, signal);
+          if (signal.aborted) return void 0;
+          if (!answer) {
+            setChecked(value2);
+            return void 0;
+          }
+          setChecked(UNCHECKED);
+          const error = typeof answer === "string" ? { key: answer } : answer;
+          return { ...error, immediate: true, source: "check" };
+        }
+      }
+    } : {}
+  });
+  const attempts = useStore(ctx.api.store, (state) => state.submissionAttempts);
+  const meta = field.state.meta;
+  const map = meta.errorMap;
+  const all = [map.onServer, map.onChange, map.onBlur, map.onSubmit, map.onMount].filter(Boolean);
+  const first = all[0];
+  const detail = typeof first === "string" ? { key: first } : first;
+  const visible = detail && (detail.immediate || detail.source === "server" || meta.isBlurred || attempts > 0) ? detail : void 0;
+  const value = field.state.value;
+  return {
+    id,
+    name,
+    value,
+    setValue: (next) => {
+      if (map.onServer) ctx.api.setFieldMeta(name, (m) => ({ ...m, errorMap: { ...m.errorMap, onServer: void 0 } }));
+      field.handleChange(next);
+    },
+    onBlur: () => field.handleBlur(),
+    error: visible ? formMessage(visible, ctx.i18n) : void 0,
+    errorDetail: visible,
+    validating: Boolean(meta.isValidating),
+    available: Boolean(check) && checked !== UNCHECKED && Object.is(checked, value) && !meta.isValidating && all.length === 0,
+    hintId: `${id}-hint`,
+    errorId: `${id}-error`,
+    locale: ctx.i18n.locale ?? "en",
+    api: field
+  };
+}
+function useKrizakaFieldArray(name) {
+  const ctx = useFormContext();
+  const field = useField({ form: ctx.api, name, mode: "array" });
+  const attempts = useStore(ctx.api.store, (state) => state.submissionAttempts);
+  const map = field.state.meta.errorMap;
+  const first = map.onServer ?? map.onChange ?? map.onSubmit;
+  return {
+    name,
+    items: field.state.value ?? [],
+    push: (item) => field.pushValue(item),
+    remove: (index) => void field.removeValue(index),
+    move: (from, to) => field.moveValue(from, to),
+    fieldName: (index, key) => `${name}[${index}]${key ? `.${key}` : ""}`,
+    error: first && (attempts > 0 || first.source === "server" || field.state.meta.isDirty) ? formMessage(first, ctx.i18n) : void 0
+  };
+}
+function useFormValue(name) {
+  const ctx = useFormContext();
+  return useStore(ctx.api.store, (state) => getPath(state.values, name));
+}
+function useFormStatus() {
+  const ctx = useFormContext();
+  const submitting = useStore(ctx.api.store, (s) => s.isSubmitting);
+  const succeeded = useStore(ctx.api.store, (s) => s.isSubmitSuccessful);
+  const attempts = useStore(ctx.api.store, (s) => s.submissionAttempts);
+  return { submitting, succeeded: succeeded && !ctx.error, attempts };
+}
+function getPath(source, path) {
+  let current = source;
+  for (const part of path.replace(/\[(\d+)\]/g, ".$1").split(".")) {
+    if (current === null || typeof current !== "object") return void 0;
+    current = current[part];
+  }
+  return current;
+}
+function firstVisibleError(ctx) {
+  if (ctx.error) return formMessage(ctx.error, ctx.i18n);
+  for (const meta of Object.values(ctx.api.state.fieldMeta)) {
+    const error = meta?.errorMap && Object.values(meta.errorMap).find(Boolean);
+    if (error) return formMessage(error, ctx.i18n);
+  }
+  return void 0;
+}
+function makeCreateKrizakaForm(components, Root) {
+  return function createKrizakaForm2(definition) {
+    function useForm2(options) {
+      const ctx = useKrizakaFormCore(definition, options);
+      const [store] = React.useState(() => createStore(ctx));
+      React.useLayoutEffect(() => store.set(ctx), [store, ctx]);
+      const Form = React.useCallback((props) => /* @__PURE__ */ jsx(Bound, { store, Root, props }), [store]);
+      return React.useMemo(
+        () => ({
+          ...components,
+          Form,
+          submit: ctx.submit,
+          reset: (values) => ctx.api.reset(values),
+          setValue: (name, value) => ctx.api.setFieldValue(name, value),
+          getValues: () => ctx.api.state.values,
+          error: ctx.error,
+          api: ctx.api
+        }),
+        [ctx, Form]
+      );
+    }
+    return {
+      schema: definition.schema,
+      defaultValues: definition.defaultValues,
+      useForm: useForm2,
+      useFormWithAction: (action, options) => useForm2({ ...options, onSubmit: action })
+    };
+  };
+}
+function createStore(initial) {
+  let value = initial;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => value,
+    set: (next) => {
+      if (Object.is(next, value)) return;
+      value = next;
+      listeners.forEach((listener) => listener());
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+function Bound({ store, Root, props }) {
+  const value = React.useSyncExternalStore(store.subscribe, store.get, store.get);
+  return /* @__PURE__ */ jsx(Root, { ...props, value });
+}
+
+// src/form/money.ts
+import { currencyDigits } from "@krizaka/intl";
+function decimalSeparator(locale) {
+  return new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === "decimal")?.value ?? ".";
+}
+function currencySymbol(currency, locale) {
+  return new Intl.NumberFormat(locale, { style: "currency", currency }).formatToParts(0).find((p) => p.type === "currency")?.value ?? currency;
+}
+function parseMoney(text, currency, locale = "en") {
+  const digits = currencyDigits(currency);
+  const t = text.replace(/[\s\u00a0\u202f']/g, "");
+  if (!t) return void 0;
+  const negative = t.startsWith("-");
+  const body = negative ? t.slice(1) : t;
+  if (!/^[\d.,]+$/.test(body)) return null;
+  let int = body;
+  let frac = "";
+  const last = Math.max(body.lastIndexOf("."), body.lastIndexOf(","));
+  if (last >= 0) {
+    const tail = body.slice(last + 1);
+    if (body[last] === decimalSeparator(locale) || tail.length !== 3) {
+      if (tail.length > digits || !/^\d*$/.test(tail)) return null;
+      int = body.slice(0, last);
+      frac = tail;
+    }
+  }
+  if (!/^(\d*|\d{1,3}([.,]\d{3})+)$/.test(int)) return null;
+  int = int.replace(/[.,]/g, "");
+  if (!int && !frac) return null;
+  const units = BigInt(int || "0") * 10n ** BigInt(digits) + BigInt((frac || "").padEnd(digits, "0") || "0");
+  const value = Number(negative ? -units : units);
+  return Number.isSafeInteger(value) ? value : null;
+}
+function moneyInputText(minorUnits, currency, locale = "en") {
+  if (minorUnits === null || minorUnits === void 0 || !Number.isFinite(minorUnits)) return "";
+  const digits = currencyDigits(currency);
+  const sign = minorUnits < 0 ? "-" : "";
+  const abs = String(Math.abs(Math.trunc(minorUnits))).padStart(digits + 1, "0");
+  return digits === 0 ? sign + abs : `${sign}${abs.slice(0, -digits)}${decimalSeparator(locale)}${abs.slice(-digits)}`;
+}
+
+// src/date-picker/parts.ts
+function isRealDate(value) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return false;
+  const date = /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
+  return !Number.isNaN(date.getTime()) && date.toISOString().slice(0, 10) === value;
+}
+function latestBirthDate(age, today = /* @__PURE__ */ new Date()) {
+  return new Date(Date.UTC(today.getFullYear() - age, today.getMonth(), today.getDate())).toISOString().slice(0, 10);
+}
+
+// src/native/form.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ChainContext = React2.createContext(null);
+function useChain(ctx) {
+  const entries = React2.useRef([]);
+  return React2.useMemo(() => {
+    const mark = () => entries.current.forEach((e, i) => e.setLast(i === entries.current.length - 1));
+    return {
+      register: (entry) => {
+        entries.current = [...entries.current.filter((e) => e.key !== entry.key), entry];
+        mark();
+        return () => {
+          entries.current = entries.current.filter((e) => e.key !== entry.key);
+          mark();
+        };
+      },
+      next: (key) => {
+        const i = entries.current.findIndex((e) => e.key === key);
+        const following = entries.current[i + 1];
+        if (following) following.focus();
+        else void submitAndAnnounce(ctx);
+      }
+    };
+  }, [ctx]);
+}
+function useChained(override) {
+  const chain = React2.useContext(ChainContext);
+  const key = React2.useId();
+  const ref = React2.useRef(null);
+  const [last, setLast] = React2.useState(false);
+  React2.useLayoutEffect(() => chain?.register({ key, focus: () => ref.current?.focus(), setLast }), [chain, key]);
+  if (!chain || override.returnKeyType !== void 0 || override.onSubmitEditing !== void 0) return { inputRef: ref };
+  return {
+    inputRef: ref,
+    returnKeyType: last ? "go" : "next",
+    submitBehavior: last ? "blurAndSubmit" : "submit",
+    onSubmitEditing: () => chain.next(key)
+  };
+}
+async function submitAndAnnounce(ctx) {
+  if (await ctx.submit()) return;
+  const message = firstVisibleError(ctx);
+  if (message) AccessibilityInfo.announceForAccessibility(message);
+}
+function FormRoot({ value, children, style, scroll, "aria-label": label }) {
+  const chain = useChain(value);
+  const body = scroll ? /* @__PURE__ */ jsx2(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : void 0, style: styles.screen, children: /* @__PURE__ */ jsx2(ScrollView, { role: "form", "aria-label": label, keyboardShouldPersistTaps: "handled", automaticallyAdjustKeyboardInsets: true, keyboardDismissMode: "interactive", contentContainerStyle: [styles.form, style], children }) }) : /* @__PURE__ */ jsx2(View, { role: "form", "aria-label": label, style: [styles.form, style], children });
+  return /* @__PURE__ */ jsx2(FormContext.Provider, { value, children: /* @__PURE__ */ jsx2(ChainContext.Provider, { value: chain, children: body }) });
+}
+function Suggestion({ field }) {
+  const suggestion = field.errorDetail?.suggestion;
+  if (!field.error || !suggestion) return null;
+  return /* @__PURE__ */ jsx2(Pressable, { role: "button", onPress: () => field.setValue(suggestion.value), hitSlop: 8, style: styles.suggestion, children: /* @__PURE__ */ jsx2(Txt, { variant: "label", tone: "accent", children: suggestion.label }) });
+}
+function Submit({ label, variant = "primary", brand, style }) {
+  const ctx = useFormContext();
+  const { submitting } = useFormStatus();
+  const mark = submitting && brand ? /* @__PURE__ */ jsx2(ProductMark, { id: brand, size: 18, animated: true }) : void 0;
+  return /* @__PURE__ */ jsx2(Button, { label, variant, loading: submitting && !brand, disabled: submitting, "aria-busy": submitting, icon: mark, style, onPress: () => void submitAndAnnounce(ctx) });
+}
+function FormError({ title, style }) {
+  const ctx = useFormContext();
+  const { theme, radius } = useTheme();
+  if (!ctx.error) return null;
+  return /* @__PURE__ */ jsxs(View, { role: "alert", "aria-live": "assertive", style: [styles.alert, { borderRadius: radius.lg, borderColor: theme.danger, backgroundColor: theme.dangerSoft }, style], children: [
+    title ? /* @__PURE__ */ jsx2(Txt, { variant: "label", children: title }) : null,
+    /* @__PURE__ */ jsx2(Txt, { tone: "secondary", children: formMessage(ctx.error, ctx.i18n) })
+  ] });
+}
+function TextField({ name, label, hint, disabled, style, transform, validateAsync, asyncDebounceMs, availableHint, checkingLabel = "Checking", ...input }) {
+  const f = useKrizakaField(name, { validateAsync, asyncDebounceMs });
+  const chained = useChained(input);
+  const { theme } = useTheme();
+  const end = f.validating ? /* @__PURE__ */ jsx2(Spinner, { size: "sm", label: checkingLabel }) : f.available ? /* @__PURE__ */ jsx2(Txt, { "aria-hidden": true, style: { color: theme.successText }, children: "\u2713" }) : null;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.field, style], children: [
+    /* @__PURE__ */ jsx2(
+      TextFieldControl,
+      {
+        label,
+        hint: f.available && availableHint ? hint ? `${availableHint} \xB7 ${hint}` : availableHint : hint,
+        error: f.error,
+        disabled,
+        value: f.value ?? "",
+        onValueChange: (text) => f.setValue(transform ? transform(text) : text),
+        onBlur: f.onBlur,
+        end,
+        ...chained,
+        ...input
+      }
+    ),
+    /* @__PURE__ */ jsx2(Suggestion, { field: f })
+  ] });
+}
+function TextArea({ name, label, hint, disabled, style, ...input }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsx2(TextFieldControl, { multiline: true, label, hint, error: f.error, disabled, value: f.value ?? "", onValueChange: (t) => f.setValue(t), onBlur: f.onBlur, style, ...input });
+}
+function Checkbox({ name, label, accessibleLabel, disabled, style }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsx2(
+    CheckboxControl,
+    {
+      label: accessibleLabel,
+      checked: f.value === true,
+      onCheckedChange: (c) => {
+        f.setValue(c);
+        f.onBlur();
+      },
+      error: f.error,
+      disabled,
+      style,
+      children: label
+    }
+  );
+}
+function Switch({ name, label, hint, disabled, style }) {
+  const f = useKrizakaField(name);
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsxs(View, { style: [styles.switchRow, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.switchText, children: [
+      /* @__PURE__ */ jsx2(Txt, { variant: "label", children: label }),
+      f.error ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "danger", role: "alert", children: f.error }) : hint ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "secondary", children: hint }) : null
+    ] }),
+    /* @__PURE__ */ jsx2(
+      SwitchControl,
+      {
+        "aria-label": label,
+        accessibilityHint: f.error ?? hint,
+        value: f.value === true,
+        disabled,
+        onValueChange: (on) => {
+          f.setValue(on);
+          f.onBlur();
+        },
+        trackColor: { false: theme.surface3, true: theme.accent },
+        thumbColor: theme.textOnMedia,
+        ...{ activeThumbColor: theme.textOnMedia },
+        ios_backgroundColor: theme.surface3
+      }
+    )
+  ] });
+}
+function RadioGroup({ name, label, hint, disabled, style, options, scrollable }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.field, style], children: [
+    /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "secondary", style: styles.groupLabel, children: label }),
+    /* @__PURE__ */ jsx2(
+      Chip.Group,
+      {
+        type: "single",
+        "aria-label": label,
+        value: f.value ?? "",
+        disabled,
+        scrollable,
+        onValueChange: (v) => {
+          f.setValue(v);
+          f.onBlur();
+        },
+        children: options.map((o) => /* @__PURE__ */ jsx2(Chip, { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+      }
+    ),
+    f.error ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "danger", role: "alert", children: f.error }) : hint ? /* @__PURE__ */ jsx2(Txt, { variant: "caption", tone: "secondary", children: hint }) : null
+  ] });
+}
+function Select(props) {
+  return /* @__PURE__ */ jsx2(RadioGroup, { scrollable: props.options.length > 4, ...props });
+}
+function DateField({ name, label, hint, disabled, style, labels, autoComplete }) {
+  const f = useKrizakaField(name);
+  const chained = useChained({});
+  return /* @__PURE__ */ jsx2(DateFieldControl, { ...chained, returnKeyType: chained.returnKeyType, label, hint, error: f.error, disabled, style, labels, autoComplete, locale: f.locale, value: f.value ?? "", onValueChange: (v) => f.setValue(v), onBlur: f.onBlur });
+}
+function Money({ name, label, hint, disabled, style, currency, placeholder }) {
+  const f = useKrizakaField(name);
+  const [text, setText] = React2.useState(() => moneyInputText(f.value, currency, f.locale));
+  const [editing, setEditing] = React2.useState(false);
+  const chained = useChained({});
+  return /* @__PURE__ */ jsx2(
+    TextFieldControl,
+    {
+      ...chained,
+      label,
+      hint,
+      error: f.error,
+      disabled,
+      style,
+      placeholder,
+      keyboardType: "decimal-pad",
+      value: editing ? text : moneyInputText(f.value, currency, f.locale),
+      end: /* @__PURE__ */ jsx2(Txt, { tone: "secondary", children: currencySymbol(currency, f.locale) }),
+      onFocus: () => {
+        setText(moneyInputText(f.value, currency, f.locale));
+        setEditing(true);
+      },
+      onValueChange: (next) => {
+        setText(next);
+        const units = parseMoney(next, currency, f.locale);
+        f.setValue(units === void 0 ? null : units === null ? Number.NaN : units);
+      },
+      onBlur: () => {
+        setEditing(false);
+        f.onBlur();
+      }
+    }
+  );
+}
+function FormField({ name, validateAsync, asyncDebounceMs, children }) {
+  return /* @__PURE__ */ jsx2(Fragment, { children: children(useKrizakaField(name, { validateAsync, asyncDebounceMs })) });
+}
+function FieldArray({ name, children }) {
+  return /* @__PURE__ */ jsx2(Fragment, { children: children(useKrizakaFieldArray(name)) });
+}
+function Watch({ name, children }) {
+  return /* @__PURE__ */ jsx2(Fragment, { children: children(useFormValue(name)) });
+}
+var fields = { TextField, TextArea, Checkbox, Switch, RadioGroup, Select, DateField, Money, Field: FormField, FieldArray, Watch, Submit, FormError };
+var createKrizakaForm = makeCreateKrizakaForm(fields, FormRoot);
+var styles = StyleSheet.create({
+  form: { gap: 16, alignSelf: "stretch" },
+  screen: { flex: 1, alignSelf: "stretch" },
+  field: { gap: 6, alignSelf: "stretch" },
+  suggestion: { alignSelf: "flex-start", minHeight: 32, justifyContent: "center" },
+  alert: { borderWidth: 1, padding: 12, gap: 4 },
+  switchRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 16, minHeight: 44 },
+  switchText: { flex: 1, gap: 2 },
+  groupLabel: { fontWeight: "600" }
+});
+export {
+  Checkbox,
+  DateField,
+  FieldArray,
+  FormError,
+  FormField,
+  Money,
+  RadioGroup,
+  Select,
+  Submit,
+  Switch,
+  TextArea,
+  TextField,
+  Watch,
+  createKrizakaForm,
+  formMessage,
+  formMessages,
+  isRealDate,
+  latestBirthDate,
+  useFormContext,
+  useFormStatus,
+  useFormValue,
+  useKrizakaField,
+  useKrizakaFieldArray
+};
+//# sourceMappingURL=form.js.map