@krizaka/ui 3.0.0 → 3.2.0

package/dist/form.js

@@ -0,0 +1,760 @@
+"use client";
+
+// src/date-picker/parts.ts
+var DATE_PART_LENGTH = { day: 2, month: 2, year: 4 };
+function datePartsOrder(locale) {
+  try {
+    const parts = new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", year: "numeric" }).formatToParts(new Date(2001, 10, 22));
+    const order = parts.map((p) => p.type).filter((t) => t === "day" || t === "month" || t === "year");
+    if (order.length === 3) return order;
+  } catch {
+  }
+  return ["day", "month", "year"];
+}
+function composeDate(parts) {
+  if (!parts.day && !parts.month && !parts.year) return "";
+  const pad = (v) => v.length === 1 ? `0${v}` : v;
+  return `${parts.year}-${pad(parts.month)}-${pad(parts.day)}`;
+}
+function splitDate(value) {
+  const m = /^(\d*)-(\d*)-(\d*)$/.exec(value ?? "");
+  return m ? { year: m[1], month: m[2], day: m[3] } : { day: "", month: "", year: "" };
+}
+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/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 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/form/web.tsx
+import { Alert } from "@krizaka/ui/alert";
+import { Button } from "@krizaka/ui/button";
+import { Checkbox as CheckboxControl } from "@krizaka/ui/checkbox";
+import { Combobox as ComboboxControl } from "@krizaka/ui/combobox";
+import { DatePicker } from "@krizaka/ui/date-picker";
+import { Field, Input, Select as SelectControl, Textarea } from "@krizaka/ui/field";
+import { Dropzone, formatBytes } from "@krizaka/ui/file-upload";
+import { RadioGroup as RadioGroupControl } from "@krizaka/ui/radio-group";
+import { Slider as SliderControl } from "@krizaka/ui/slider";
+import { Spinner } from "@krizaka/ui/spinner";
+import { Switch as SwitchControl } from "@krizaka/ui/switch";
+import { TagInput as TagInputControl } from "@krizaka/ui/tag-input";
+import * as React2 from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ids = (f, hint) => [hint && !f.error ? f.hintId : null, f.error ? f.errorId : null].filter(Boolean).join(" ") || void 0;
+function Caption({ field, hint, ok }) {
+  const suggestion = field.errorDetail?.suggestion;
+  if (field.error)
+    return /* @__PURE__ */ jsx2(Field.Error, { id: field.errorId, children: /* @__PURE__ */ jsxs("span", { children: [
+      field.error,
+      suggestion ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "font-semibold text-accent-text underline underline-offset-2", onClick: () => field.setValue(suggestion.value), children: suggestion.label })
+      ] }) : null
+    ] }) });
+  const text = field.available && ok ? hint ? `${ok} \xB7 ${hint}` : ok : hint;
+  return text ? /* @__PURE__ */ jsx2(Field.Hint, { id: field.hintId, children: text }) : null;
+}
+var Check = () => /* @__PURE__ */ jsx2("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": true, children: /* @__PURE__ */ jsx2("path", { d: "M20 6 9 17l-5-5" }) });
+function FormRoot({ value, className, children, ...props }) {
+  const ref = React2.useRef(null);
+  return /* @__PURE__ */ jsx2(FormContext.Provider, { value, children: /* @__PURE__ */ jsx2(
+    "form",
+    {
+      ref,
+      noValidate: true,
+      className: className ?? "flex flex-col gap-4",
+      onSubmit: async (event) => {
+        event.preventDefault();
+        if (!await value.submit()) requestAnimationFrame(() => ref.current?.querySelector('[aria-invalid="true"], [data-invalid] input')?.focus());
+      },
+      ...props,
+      children
+    }
+  ) });
+}
+function Submit({ variant = "primary", children, ...props }) {
+  const { submitting } = useFormStatus();
+  return /* @__PURE__ */ jsx2(Button, { type: "submit", variant, loading: submitting, ...props, children });
+}
+function FormError({ title, className }) {
+  const ctx = useFormContext();
+  if (!ctx.error) return null;
+  return /* @__PURE__ */ jsx2(Alert, { tone: "danger", title, className, children: formMessage(ctx.error, ctx.i18n) });
+}
+function TextField({ name, label, hint, disabled, className, type = "text", transform, validateAsync, asyncDebounceMs, availableHint, checkingLabel = "Checking", start, ...input }) {
+  const f = useKrizakaField(name, { validateAsync, asyncDebounceMs });
+  const end = f.validating ? /* @__PURE__ */ jsx2(Spinner, { size: "sm", label: checkingLabel }) : f.available ? /* @__PURE__ */ jsx2(Check, {}) : null;
+  return /* @__PURE__ */ jsxs(Field.Root, { className, children: [
+    /* @__PURE__ */ jsx2(Field.Label, { htmlFor: f.id, children: label }),
+    /* @__PURE__ */ jsxs("span", { className: "relative flex items-center", children: [
+      start ? /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute left-3 text-fg-muted", children: start }) : null,
+      /* @__PURE__ */ jsx2(
+        Input,
+        {
+          id: f.id,
+          name,
+          type,
+          value: f.value ?? "",
+          disabled,
+          invalid: Boolean(f.error),
+          "aria-describedby": ids(f, hint ?? availableHint),
+          onChange: (event) => f.setValue(transform ? transform(event.target.value) : event.target.value),
+          onBlur: f.onBlur,
+          className: [start ? "pl-9" : "", end ? "pr-10" : ""].join(" ").trim() || void 0,
+          ...input
+        }
+      ),
+      end ? /* @__PURE__ */ jsx2("span", { className: "absolute right-3 flex", children: end }) : null
+    ] }),
+    /* @__PURE__ */ jsx2(Caption, { field: f, hint, ok: availableHint })
+  ] });
+}
+function TextArea({ name, label, hint, disabled, className, rows = 4, ...input }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsxs(Field.Root, { className, children: [
+    /* @__PURE__ */ jsx2(Field.Label, { htmlFor: f.id, children: label }),
+    /* @__PURE__ */ jsx2(Textarea, { id: f.id, name, rows, value: f.value ?? "", disabled, invalid: Boolean(f.error), "aria-describedby": ids(f, hint), onChange: (e) => f.setValue(e.target.value), onBlur: f.onBlur, ...input }),
+    /* @__PURE__ */ jsx2(Caption, { field: f, hint })
+  ] });
+}
+function Checkbox({ name, label, hint, disabled, className }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsxs("div", { className: className ?? "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx2(CheckboxControl, { id: f.id, name, checked: f.value === true, disabled, invalid: Boolean(f.error), "aria-describedby": ids(f, hint), onCheckedChange: (c) => f.setValue(c === true), onBlur: f.onBlur, children: label }),
+    /* @__PURE__ */ jsx2(Caption, { field: f, hint })
+  ] });
+}
+function Switch({ name, label, hint, disabled, className }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsxs("div", { className: className ?? "flex items-start justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx2(Field.Label, { htmlFor: f.id, className: "text-sm font-medium text-fg", children: label }),
+      /* @__PURE__ */ jsx2(Caption, { field: f, hint })
+    ] }),
+    /* @__PURE__ */ jsx2(SwitchControl, { id: f.id, name, checked: f.value === true, disabled, invalid: Boolean(f.error), "aria-describedby": ids(f, hint), onCheckedChange: (c) => f.setValue(c), onBlur: f.onBlur })
+  ] });
+}
+function RadioGroup({ name, label, hint, disabled, className, options, variant = "list", orientation = "vertical" }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsxs(Field.Root, { className, role: "group", "aria-labelledby": `${f.id}-label`, children: [
+    /* @__PURE__ */ jsx2("span", { id: `${f.id}-label`, className: "text-xs font-semibold text-fg-secondary", children: label }),
+    /* @__PURE__ */ jsx2(
+      RadioGroupControl.Root,
+      {
+        "aria-labelledby": `${f.id}-label`,
+        value: f.value ?? "",
+        onValueChange: (v) => f.setValue(v),
+        onBlur: f.onBlur,
+        orientation,
+        disabled,
+        invalid: Boolean(f.error),
+        "aria-describedby": ids(f, hint),
+        name,
+        className: variant === "cards" ? "grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-2" : void 0,
+        children: options.map(
+          (o) => variant === "cards" ? /* @__PURE__ */ jsxs(RadioGroupControl.Card, { value: o.value, disabled: o.disabled, children: [
+            /* @__PURE__ */ jsx2("span", { className: "font-semibold", children: o.label }),
+            o.description ? /* @__PURE__ */ jsx2("span", { className: "text-xs text-fg-secondary", children: o.description }) : null
+          ] }, o.value) : /* @__PURE__ */ jsxs(RadioGroupControl.Item, { value: o.value, disabled: o.disabled, children: [
+            o.label,
+            o.description ? /* @__PURE__ */ jsx2("span", { className: "block text-xs text-fg-secondary", children: o.description }) : null
+          ] }, o.value)
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx2(Caption, { field: f, hint })
+  ] });
+}
+function Select({ name, label, hint, disabled, className, options, placeholder }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsxs(Field.Root, { className, children: [
+    /* @__PURE__ */ jsx2(Field.Label, { htmlFor: f.id, children: label }),
+    /* @__PURE__ */ jsxs(SelectControl, { id: f.id, name, value: f.value ?? "", disabled, invalid: Boolean(f.error), "aria-describedby": ids(f, hint), onChange: (e) => f.setValue(e.target.value), onBlur: f.onBlur, children: [
+      placeholder !== void 0 ? /* @__PURE__ */ jsx2("option", { value: "", disabled: true, children: placeholder }) : null,
+      options.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+    ] }),
+    /* @__PURE__ */ jsx2(Caption, { field: f, hint })
+  ] });
+}
+function Combobox({ name, label, hint, disabled, className, options = [], onSearch, multiple, creatable, placeholder, labels }) {
+  const f = useKrizakaField(name);
+  const [seen, setSeen] = React2.useState({});
+  const option = (value) => options.find((o) => o.value === value) ?? seen[value] ?? { value, label: value };
+  const remember = (o) => setSeen((known) => known[o.value] === o ? known : { ...known, [o.value]: o });
+  const shared = { id: f.id, label, hint, error: f.error, disabled, placeholder, labels, options, onSearch, creatable, name };
+  return /* @__PURE__ */ jsx2("div", { className, onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && f.onBlur(), children: multiple ? /* @__PURE__ */ jsx2(
+    ComboboxControl,
+    {
+      ...shared,
+      multiple: true,
+      value: (f.value ?? []).map(option),
+      onValueChange: (next) => {
+        next.forEach(remember);
+        f.setValue(next.map((o) => o.value));
+      }
+    }
+  ) : /* @__PURE__ */ jsx2(
+    ComboboxControl,
+    {
+      ...shared,
+      value: f.value ? option(f.value) : null,
+      onValueChange: (next) => {
+        if (next) remember(next);
+        f.setValue(next?.value ?? "");
+      }
+    }
+  ) });
+}
+var PART_NAMES = { day: "Day", month: "Month", year: "Year" };
+function DateField({ name, label, hint, disabled, className, entry = "calendar", min, max, labels, autoComplete }) {
+  const f = useKrizakaField(name);
+  if (entry === "calendar")
+    return /* @__PURE__ */ jsx2("div", { className, onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && f.onBlur(), children: /* @__PURE__ */ jsx2(DatePicker, { label, hint, error: f.error, disabled, name, locale: f.locale, min, max, labels, value: f.value || null, onValueChange: (v) => f.setValue(v ?? "") }) });
+  return /* @__PURE__ */ jsx2(DateParts, { field: f, label, hint, disabled, className, names: { ...PART_NAMES, ...labels }, autoComplete });
+}
+function DateParts({ field: f, label, hint, disabled, className, names, autoComplete }) {
+  const order = React2.useMemo(() => datePartsOrder(f.locale), [f.locale]);
+  const [parts, setParts] = React2.useState(() => splitDate(f.value));
+  if ((f.value ?? "") !== composeDate(parts) && composeDate(splitDate(f.value)) === (f.value ?? "")) setParts(splitDate(f.value));
+  const refs = { day: React2.useRef(null), month: React2.useRef(null), year: React2.useRef(null) };
+  return /* @__PURE__ */ jsxs("fieldset", { className: className ?? "flex flex-col gap-1.5", "aria-describedby": ids(f, hint), onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && f.onBlur(), children: [
+    /* @__PURE__ */ jsx2("legend", { className: "mb-1.5 text-xs font-semibold text-fg-secondary", children: label }),
+    /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: order.map((part) => /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-fg-secondary", children: [
+      names[part],
+      /* @__PURE__ */ jsx2(
+        Input,
+        {
+          ref: refs[part],
+          inputMode: "numeric",
+          autoComplete: autoComplete === "bday" ? `bday-${part}` : "off",
+          maxLength: DATE_PART_LENGTH[part],
+          value: parts[part],
+          disabled,
+          invalid: Boolean(f.error),
+          className: part === "year" ? "w-20 text-center tabular-nums" : "w-14 text-center tabular-nums",
+          onChange: (e) => {
+            const digits = e.target.value.replace(/\D/g, "").slice(0, DATE_PART_LENGTH[part]);
+            const next = { ...parts, [part]: digits };
+            setParts(next);
+            f.setValue(composeDate(next));
+            const following = order[order.indexOf(part) + 1];
+            if (digits.length === DATE_PART_LENGTH[part] && following) refs[following].current?.focus();
+          }
+        }
+      )
+    ] }, part)) }),
+    /* @__PURE__ */ jsx2(Caption, { field: f, hint })
+  ] });
+}
+function TagInput({ name, label, hint, disabled, className, ...props }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsx2("div", { className, onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && f.onBlur(), children: /* @__PURE__ */ jsx2(TagInputControl, { label, hint, error: f.error, disabled, name, value: f.value ?? [], onValueChange: (tags) => f.setValue(tags), ...props }) });
+}
+function FileUpload({ name, label, hint, disabled, className, title, browseLabel, accept, maxSize, multiple, maxFiles, removeLabel, refusalLabel }) {
+  const f = useKrizakaField(name);
+  const files = f.value ?? [];
+  return /* @__PURE__ */ jsxs("div", { className: className ?? "flex flex-col gap-2", role: "group", "aria-label": label, onBlur: (e) => !e.currentTarget.contains(e.relatedTarget) && f.onBlur(), children: [
+    /* @__PURE__ */ jsx2("span", { className: "text-xs font-semibold text-fg-secondary", children: label }),
+    /* @__PURE__ */ jsx2(
+      Dropzone,
+      {
+        title,
+        browseLabel,
+        hint,
+        accept,
+        maxSize,
+        multiple,
+        maxFiles,
+        disabled,
+        refusalLabel,
+        onFiles: (chosen) => f.setValue(multiple ? [...files, ...chosen].slice(0, maxFiles ?? Infinity) : chosen.slice(0, 1))
+      }
+    ),
+    files.length > 0 ? /* @__PURE__ */ jsx2("ul", { className: "flex flex-col gap-1.5", children: files.map((file, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-3 rounded-lg border border-border-default bg-surface-1 px-3 py-2 text-sm", children: [
+      /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate text-fg", children: file.name }),
+      /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsx2("span", { className: "font-mono text-xs text-fg-secondary", children: formatBytes(file.size, f.locale) }),
+        /* @__PURE__ */ jsx2(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => f.setValue(files.filter((_, j) => j !== i)), children: removeLabel(file.name) })
+      ] })
+    ] }, `${file.name}-${i}`)) }) : null,
+    f.error ? /* @__PURE__ */ jsx2(Field.Error, { id: f.errorId, children: f.error }) : null
+  ] });
+}
+function Money({ name, label, hint, disabled, className, currency, placeholder }) {
+  const f = useKrizakaField(name);
+  const [text, setText] = React2.useState(() => moneyInputText(f.value, currency, f.locale));
+  const [editing, setEditing] = React2.useState(false);
+  const shown = editing ? text : moneyInputText(f.value, currency, f.locale);
+  return /* @__PURE__ */ jsxs(Field.Root, { className, children: [
+    /* @__PURE__ */ jsx2(Field.Label, { htmlFor: f.id, children: label }),
+    /* @__PURE__ */ jsxs("span", { className: "relative flex items-center", children: [
+      /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute left-3 text-sm text-fg-secondary", "aria-hidden": true, children: currencySymbol(currency, f.locale) }),
+      /* @__PURE__ */ jsx2(
+        Input,
+        {
+          id: f.id,
+          name,
+          inputMode: "decimal",
+          value: shown,
+          placeholder,
+          disabled,
+          invalid: Boolean(f.error),
+          "aria-describedby": ids(f, hint),
+          className: "pl-9 tabular-nums",
+          onFocus: () => {
+            setText(moneyInputText(f.value, currency, f.locale));
+            setEditing(true);
+          },
+          onChange: (e) => {
+            setText(e.target.value);
+            const units = parseMoney(e.target.value, currency, f.locale);
+            f.setValue(units === void 0 ? null : units === null ? Number.NaN : units);
+          },
+          onBlur: () => {
+            setEditing(false);
+            f.onBlur();
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2(Caption, { field: f, hint })
+  ] });
+}
+function Slider({ name, label, hint, disabled, className, min, max, step, formatValue, thumbLabels }) {
+  const f = useKrizakaField(name);
+  return /* @__PURE__ */ jsxs("div", { className: className ?? "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx2(SliderControl, { label, showLabel: true, value: f.value, min, max, step, disabled, formatValue, thumbLabels, "aria-describedby": ids(f, hint), onValueChange: (v) => f.setValue(v), onValueCommit: () => f.onBlur() }),
+    /* @__PURE__ */ jsx2(Caption, { field: f, hint })
+  ] });
+}
+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, Combobox, DateField, TagInput, FileUpload, Money, Slider, Field: FormField, FieldArray, Watch, Submit, FormError };
+var createKrizakaForm = makeCreateKrizakaForm(fields, FormRoot);
+function useFormWithAction(form, ...args) {
+  return form.useFormWithAction(...args);
+}
+export {
+  Checkbox,
+  Combobox,
+  DateField,
+  FieldArray,
+  FileUpload,
+  FormError,
+  FormField,
+  Money,
+  RadioGroup,
+  Select,
+  Slider,
+  Submit,
+  Switch,
+  TagInput,
+  TextArea,
+  TextField,
+  Watch,
+  composeDate,
+  createKrizakaForm,
+  currencySymbol,
+  datePartsOrder,
+  formMessage,
+  formMessages,
+  isRealDate,
+  issueError,
+  issuesToFields,
+  latestBirthDate,
+  moneyInputText,
+  parseMoney,
+  problemToErrors,
+  useFormContext,
+  useFormStatus,
+  useFormValue,
+  useFormWithAction,
+  useKrizakaField,
+  useKrizakaFieldArray
+};
+//# sourceMappingURL=form.js.map