@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/fields/lazy-fields.js

@@ -0,0 +1,34 @@
+import { lazyComponent } from "../../lib/lazy.js";
+import { useField } from "../form/form-context.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/fields/lazy-fields.tsx
+/** What the server renders and hydration shows for a field whose code loads on first use. */
+function FieldPlaceholder({ component, height }) {
+	const { id, error } = useField(component);
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			"aria-busy": "true",
+			"data-slot": "field-placeholder",
+			className: height
+		})
+	});
+}
+/** `ModalTableSelect`; its code (the picker's table) loads the first time one is shown. */
+const ModalTableSelectField = lazyComponent(() => import("./modal-table-select.js").then((module) => module.ModalTableSelectField), ({ component }) => /* @__PURE__ */ jsx(FieldPlaceholder, {
+	component,
+	height: "h-9"
+}));
+/** The query builder filter's rules; its code loads the first time one is shown. */
+const QueryBuilderRulesField = lazyComponent(() => import("./query-builder-rules.js").then((module) => module.QueryBuilderRulesField), ({ component }) => /* @__PURE__ */ jsx(FieldPlaceholder, {
+	component,
+	height: "h-24"
+}));
+//#endregion
+export { ModalTableSelectField, QueryBuilderRulesField };
+
+//# sourceMappingURL=lazy-fields.js.map

package/dist/components/fields/lazy-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-fields.js","names":[],"sources":["../../../src/components/fields/lazy-fields.tsx"],"sourcesContent":["import type { FieldSchema, ModalTableSelectSchema, QueryBuilderRulesSchema } from '@alfakit/core'\nimport { lazyComponent } from '../../lib/lazy'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Skeleton } from '../ui/skeleton'\n\n/** What the server renders and hydration shows for a field whose code loads on first use. */\nfunction FieldPlaceholder({ component, height }: { component: FieldSchema; height: string }) {\n  const { id, error } = useField<unknown>(component)\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <Skeleton aria-busy=\"true\" data-slot=\"field-placeholder\" className={height} />\n    </FieldWrapper>\n  )\n}\n\n/** `ModalTableSelect`; its code (the picker's table) loads the first time one is shown. */\nexport const ModalTableSelectField = lazyComponent<{ component: ModalTableSelectSchema }>(\n  () => import('./modal-table-select').then((module) => module.ModalTableSelectField),\n  ({ component }) => <FieldPlaceholder component={component} height=\"h-9\" />,\n)\n\n/** The query builder filter's rules; its code loads the first time one is shown. */\nexport const QueryBuilderRulesField = lazyComponent<{ component: QueryBuilderRulesSchema }>(\n  () => import('./query-builder-rules').then((module) => module.QueryBuilderRulesField),\n  ({ component }) => (\n    <FieldPlaceholder component={component as unknown as FieldSchema} height=\"h-24\" />\n  ),\n)\n"],"mappings":";;;;;;;AAOA,SAAS,iBAAiB,EAAE,WAAW,UAAsD;CAC3F,MAAM,EAAE,IAAI,UAAU,SAAkB,SAAS;CAEjD,OACE,oBAAC,cAAD;EAAc,OAAO;EAAW,SAAS;EAAW;EAClD,UAAA,oBAAC,UAAD;GAAU,aAAU;GAAO,aAAU;GAAoB,WAAW;EAAS,CAAA;CACjE,CAAA;AAElB;;AAGA,MAAa,wBAAwB,oBAC7B,OAAO,0BAAuB,CAAC,MAAM,WAAW,OAAO,qBAAqB,IACjF,EAAE,gBAAgB,oBAAC,kBAAD;CAA6B;CAAW,QAAO;AAAO,CAAA,CAC3E;;AAGA,MAAa,yBAAyB,oBAC9B,OAAO,2BAAwB,CAAC,MAAM,WAAW,OAAO,sBAAsB,IACnF,EAAE,gBACD,oBAAC,kBAAD;CAA6B;CAAqC,QAAO;AAAQ,CAAA,CAErF"}

package/dist/components/fields/modal-table-select.js

@@ -0,0 +1,386 @@
+import { useChoice, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { FormProvider, useField, useFormStore } from "../form/form-context.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Input } from "../ui/input.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
+import { TableCellContent } from "../table/cells.js";
+import { FILTERS_MODAL_WIDTH_CLASSES, FormStore, debounce, fieldIds, filterFormComponents, modalTablePaging, modalTableSelected, pickerFilterFormOptions, toggleModalTableKey } from "@alfakit/core";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon, SearchIcon, XIcon } from "lucide-react";
+//#region src/components/fields/modal-table-select.tsx
+/**
+* Select records from a table in a modal. The table (columns, search, filters, sorting,
+* pagination) comes from the server's picker endpoint; the field keeps only keys, with
+* labels from the server.
+*/
+function ModalTableSelectField({ component }) {
+	const t = useT();
+	const { value, setValue, error, id, disabled, readOnly, aria } = useField(component);
+	const multiple = Boolean(component.multiple);
+	const selected = modalTableSelected(value, multiple);
+	const locked = disabled || readOnly;
+	const [open, setOpen] = useState(false);
+	const [picked, setPicked] = useState({});
+	const labels = {
+		...picked,
+		...component.selectedLabels
+	};
+	const store = (keys) => setValue(multiple ? keys : keys[0] ?? null);
+	return /* @__PURE__ */ jsxs(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: [/* @__PURE__ */ jsxs("div", {
+			id,
+			role: "group",
+			"data-slot": "modal-table-select",
+			className: "flex flex-wrap items-center gap-2",
+			"aria-labelledby": component.label ? fieldIds(id).label : void 0,
+			"aria-describedby": aria["aria-describedby"],
+			children: [selected.length === 0 ? /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-sm",
+				children: component.placeholder ?? t("table_select.none", {}, "Nothing selected")
+			}) : selected.map((key) => /* @__PURE__ */ jsxs(Badge, {
+				variant: "secondary",
+				className: "gap-1 pe-1",
+				children: [/* @__PURE__ */ jsx("span", { children: labels[key] ?? key }), !locked && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "hover:bg-foreground/10 rounded-sm",
+					"aria-label": t("table_select.remove", { label: labels[key] ?? key }, "Remove :label"),
+					onClick: () => store(selected.filter((candidate) => candidate !== key)),
+					children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+				})]
+			}, key)), !locked && /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				"aria-haspopup": "dialog",
+				onClick: () => setOpen(true),
+				children: [component.selectActionIcon && /* @__PURE__ */ jsx(Icon, { name: component.selectActionIcon }), selected.length > 0 && !multiple ? t("table_select.change", {}, "Change") : component.selectActionLabel]
+			})]
+		}), open && /* @__PURE__ */ jsx(ModalTablePicker, {
+			component,
+			initial: selected,
+			onClose: () => setOpen(false),
+			onConfirm: (keys, newLabels) => {
+				setPicked((state) => ({
+					...state,
+					...newLabels
+				}));
+				store(keys);
+				setOpen(false);
+			}
+		})]
+	});
+}
+function ModalTablePicker({ component, initial, onClose, onConfirm }) {
+	const t = useT();
+	const choice = useChoice();
+	const form = useFormStore();
+	const multiple = Boolean(component.multiple);
+	const [query, setQuery] = useState({});
+	const [response, setResponse] = useState(null);
+	const [failed, setFailed] = useState(false);
+	const [loadedQuery, setLoadedQuery] = useState(null);
+	const loading = loadedQuery !== query;
+	const [draft, setDraft] = useState(initial);
+	const [labels, setLabels] = useState({});
+	const [search, setSearch] = useState("");
+	useEffect(() => {
+		const controller = new AbortController();
+		form.modalTable(component.statePath, component.tableStateIdentifier, query, controller.signal).then((next) => {
+			if (next) {
+				setResponse(next);
+				setLabels((state) => ({
+					...state,
+					...next.labels
+				}));
+			}
+			setFailed(false);
+			setLoadedQuery(query);
+		}).catch((error) => {
+			if (error.name === "AbortError") return;
+			setFailed(true);
+			setLoadedQuery(query);
+		});
+		return () => controller.abort();
+	}, [
+		form,
+		component.statePath,
+		component.tableStateIdentifier,
+		query
+	]);
+	const table = response?.table;
+	const pushSearch = useMemo(() => debounce((next) => setQuery((state) => ({
+		...state,
+		search: next || null,
+		page: null
+	})), table?.searchDebounce ?? 400), [table?.searchDebounce]);
+	useEffect(() => () => pushSearch.cancel(), [pushSearch]);
+	const columns = table ? table.columns.filter((column) => table.visibleColumns.includes(column.name)) : [];
+	const records = table?.records ?? [];
+	const paging = modalTablePaging(table?.pagination);
+	const atMax = multiple && component.maxItems != null && draft.length >= component.maxItems;
+	const toggle = (key) => setDraft((state) => toggleModalTableKey(state, key, multiple, component.maxItems));
+	const sort = (column) => {
+		const direction = table?.sort?.column === column && table.sort.direction === "asc" ? "desc" : "asc";
+		setQuery((state) => ({
+			...state,
+			sort: column,
+			direction,
+			page: null
+		}));
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: true,
+		onOpenChange: (next) => !next && onClose(),
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: cn("flex max-h-[90vh] flex-col gap-4", FILTERS_MODAL_WIDTH_CLASSES[component.modalWidth ?? "3xl"] ?? "sm:max-w-3xl"),
+			"data-slot": "modal-table-select-dialog",
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [
+					/* @__PURE__ */ jsx(DialogTitle, { children: component.modalHeading }),
+					component.modalDescription && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-sm",
+						"data-slot": "modal-table-select-description",
+						dangerouslySetInnerHTML: { __html: component.modalDescription }
+					}),
+					/* @__PURE__ */ jsx(DialogDescription, {
+						"aria-live": "polite",
+						children: choice("table.selected", draft.length, { count: draft.length }, `${draft.length} selected`)
+					})
+				] }),
+				table && (table.searchable || (table.filters?.length ?? 0) > 0) && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3",
+					children: [table.searchable && /* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2" }), /* @__PURE__ */ jsx(Input, {
+							type: "search",
+							value: search,
+							"aria-label": table.searchPlaceholder,
+							placeholder: table.searchPlaceholder,
+							className: "ps-8",
+							onChange: (event) => {
+								setSearch(event.target.value);
+								pushSearch(event.target.value);
+							}
+						})]
+					}), (table.filters?.length ?? 0) > 0 && /* @__PURE__ */ jsx(PickerFilters, {
+						table,
+						owner: form,
+						path: component.statePath,
+						onChange: (filters) => setQuery((state) => ({
+							...state,
+							filters,
+							page: null
+						}))
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "min-h-0 flex-1 overflow-auto rounded-md border",
+					"aria-busy": loading,
+					children: failed ? /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-destructive p-6 text-center text-sm",
+						children: t("table_select.load_failed", {}, "Couldn't load the records.")
+					}) : !table ? /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2 p-4",
+						"aria-hidden": "true",
+						children: [
+							/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }),
+							/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }),
+							/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" })
+						]
+					}) : records.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground p-6 text-center text-sm",
+						children: table.emptyState.heading
+					}) : /* @__PURE__ */ jsxs(Table, {
+						className: cn(loading && "opacity-60"),
+						children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [/* @__PURE__ */ jsx(TableHead, {
+							className: "w-10",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: t("table.select_row", {}, "Select row")
+							})
+						}), columns.map((column) => /* @__PURE__ */ jsx(TableHead, {
+							"aria-sort": table.sort?.column === column.name ? table.sort.direction === "asc" ? "ascending" : "descending" : void 0,
+							children: column.sortable ? /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "inline-flex items-center gap-1",
+								onClick: () => sort(column.name),
+								children: [column.label, table.sort?.column === column.name ? table.sort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ArrowUpDownIcon, { className: "text-muted-foreground size-3.5" })]
+							}) : column.label
+						}, column.name))] }) }), /* @__PURE__ */ jsx(TableBody, { children: records.map((record) => {
+							const key = String(record.key);
+							const checked = draft.includes(key);
+							const selectable = record.selectable === true && (checked || !atMax);
+							const label = labels[key] ?? key;
+							return /* @__PURE__ */ jsxs(TableRow, {
+								"data-state": checked ? "selected" : void 0,
+								className: cn(selectable && "cursor-pointer"),
+								onClick: () => selectable && toggle(key),
+								children: [/* @__PURE__ */ jsx(TableCell, {
+									className: "w-10",
+									onClick: (event) => event.stopPropagation(),
+									children: multiple ? /* @__PURE__ */ jsx(Checkbox, {
+										checked,
+										disabled: !selectable,
+										"aria-label": t("table_select.select_record", { label }, `Select ${label}`),
+										onCheckedChange: () => toggle(key)
+									}) : /* @__PURE__ */ jsx("input", {
+										type: "radio",
+										name: `${component.statePath}-picker`,
+										className: "accent-primary size-4",
+										checked,
+										disabled: !selectable,
+										"aria-label": t("table_select.select_record", { label }, `Select ${label}`),
+										onChange: () => toggle(key)
+									})
+								}), columns.map((column) => /* @__PURE__ */ jsx(TableCell, { children: record.cells[column.name] && /* @__PURE__ */ jsx(TableCellContent, {
+									column,
+									cell: record.cells[column.name],
+									recordKey: record.key,
+									token: "",
+									component: `picker:${component.statePath}`
+								}) }, column.name))]
+							}, key);
+						}) })]
+					})
+				}),
+				atMax && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					role: "status",
+					children: choice("table_select.max_reached", component.maxItems ?? 0, { count: component.maxItems ?? 0 }, "You can select up to :count records.")
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, {
+					className: "items-center sm:justify-between",
+					children: [paging ? /* @__PURE__ */ jsxs("nav", {
+						className: "flex items-center gap-2",
+						"aria-label": t("pagination", {}, "Pagination"),
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "outline",
+								size: "icon-sm",
+								disabled: !paging.hasPrevious || loading,
+								"aria-label": t("table.previous", {}, "Previous"),
+								onClick: () => setQuery((state) => ({
+									...state,
+									page: paging.page - 1
+								})),
+								children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "rtl:rotate-180" })
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground text-sm",
+								children: paging.total !== void 0 ? t("table.showing", {
+									first: paging.from,
+									last: paging.to,
+									total: paging.total
+								}, `Showing ${paging.from}–${paging.to} of ${paging.total}`) : `${paging.from}–${paging.to}`
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "outline",
+								size: "icon-sm",
+								disabled: !paging.hasNext || loading,
+								"aria-label": t("table.next", {}, "Next"),
+								onClick: () => setQuery((state) => ({
+									...state,
+									page: paging.page + 1
+								})),
+								children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "rtl:rotate-180" })
+							})
+						]
+					}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2",
+						children: [
+							draft.length > 0 && /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								onClick: () => setDraft([]),
+								children: t("table_select.clear", {}, "Clear selection")
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "outline",
+								onClick: onClose,
+								children: t("cancel", {}, "Cancel")
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								onClick: () => onConfirm(draft, Object.fromEntries(draft.filter((key) => labels[key]).map((key) => [key, labels[key]]))),
+								children: component.modalSubmitActionLabel ?? t("table_select.confirm", {}, "Select")
+							})
+						]
+					})]
+				})
+			]
+		})
+	});
+}
+/**
+* The picker's filters: a small form whose state becomes the table's `filters`. Searchable
+* selects among them load options through the owning form's endpoint (`pickerFilters`).
+*/
+function PickerFilters({ table, owner, path, onChange }) {
+	const t = useT();
+	const components = useMemo(() => filterFormComponents(table.filters ?? []), [table.filters]);
+	const [store] = useState(() => new FormStore({
+		components,
+		state: table.filterState ?? {},
+		columns: table.filtersFormColumns ?? {
+			default: 1,
+			sm: 2
+		}
+	}, pickerFilterFormOptions(owner, path)));
+	const state = useStore(store.store);
+	const latest = useRef(onChange);
+	useEffect(() => {
+		latest.current = onChange;
+	});
+	useEffect(() => {
+		if (!state.dirty.size) return;
+		const timer = setTimeout(() => latest.current(state.values), 400);
+		return () => clearTimeout(timer);
+	}, [state.values, state.dirty]);
+	useEffect(() => () => store.destroy(), [store]);
+	return /* @__PURE__ */ jsx(FormProvider, {
+		store,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "bg-muted/30 flex flex-col gap-2 rounded-lg border p-3",
+			children: [/* @__PURE__ */ jsx(SchemaRenderer, {
+				components: state.components,
+				columns: state.columns,
+				className: "gap-3"
+			}), (table.filterIndicators?.length ?? 0) > 0 && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "link",
+				size: "sm",
+				className: "self-end",
+				onClick: () => {
+					store.fill({
+						components,
+						state: {},
+						columns: state.columns
+					});
+					onChange(null);
+				},
+				children: t("table.reset_filters", {}, "Reset")
+			})]
+		})
+	});
+}
+//#endregion
+export { ModalTableSelectField };
+
+//# sourceMappingURL=modal-table-select.js.map

package/dist/components/fields/modal-table-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-table-select.js","names":[],"sources":["../../../src/components/fields/modal-table-select.tsx"],"sourcesContent":["import type { ModalTableSelectResponse, ModalTableSelectSchema, TableQuery } from '@alfakit/core'\nimport {\n  FILTERS_MODAL_WIDTH_CLASSES,\n  FormStore,\n  debounce,\n  fieldIds,\n  filterFormComponents,\n  modalTablePaging,\n  modalTableSelected,\n  pickerFilterFormOptions,\n  toggleModalTableKey,\n} from '@alfakit/core'\nimport {\n  ArrowDownIcon,\n  ArrowUpDownIcon,\n  ArrowUpIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  SearchIcon,\n  XIcon,\n} from 'lucide-react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { useChoice, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { FormProvider, useField, useFormStore } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { TableCellContent } from '../table/cells'\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Checkbox } from '../ui/checkbox'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../ui/dialog'\nimport { Input } from '../ui/input'\nimport { Skeleton } from '../ui/skeleton'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table'\n\n/**\n * Select records from a table in a modal. The table (columns, search, filters, sorting,\n * pagination) comes from the server's picker endpoint; the field keeps only keys, with\n * labels from the server.\n */\nexport function ModalTableSelectField({ component }: { component: ModalTableSelectSchema }) {\n  const t = useT()\n  const { value, setValue, error, id, disabled, readOnly, aria } = useField<unknown>(component)\n  const multiple = Boolean(component.multiple)\n  const selected = modalTableSelected(value, multiple)\n  const locked = disabled || readOnly\n  const [open, setOpen] = useState(false)\n  const [picked, setPicked] = useState<Record<string, string>>({})\n  const labels = { ...picked, ...component.selectedLabels }\n\n  const store = (keys: string[]) => setValue(multiple ? keys : (keys[0] ?? null))\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <div\n        id={id}\n        role=\"group\"\n        data-slot=\"modal-table-select\"\n        className=\"flex flex-wrap items-center gap-2\"\n        aria-labelledby={component.label ? fieldIds(id).label : undefined}\n        aria-describedby={aria['aria-describedby']}\n      >\n        {selected.length === 0 ? (\n          <span className=\"text-muted-foreground text-sm\">\n            {component.placeholder ?? t('table_select.none', {}, 'Nothing selected')}\n          </span>\n        ) : (\n          selected.map((key) => (\n            <Badge key={key} variant=\"secondary\" className=\"gap-1 pe-1\">\n              <span>{labels[key] ?? key}</span>\n              {!locked && (\n                <button\n                  type=\"button\"\n                  className=\"hover:bg-foreground/10 rounded-sm\"\n                  aria-label={t(\n                    'table_select.remove',\n                    { label: labels[key] ?? key },\n                    'Remove :label',\n                  )}\n                  onClick={() => store(selected.filter((candidate) => candidate !== key))}\n                >\n                  <XIcon className=\"size-3\" />\n                </button>\n              )}\n            </Badge>\n          ))\n        )}\n        {!locked && (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            aria-haspopup=\"dialog\"\n            onClick={() => setOpen(true)}\n          >\n            {component.selectActionIcon && <Icon name={component.selectActionIcon} />}\n            {selected.length > 0 && !multiple\n              ? t('table_select.change', {}, 'Change')\n              : component.selectActionLabel}\n          </Button>\n        )}\n      </div>\n      {open && (\n        <ModalTablePicker\n          component={component}\n          initial={selected}\n          onClose={() => setOpen(false)}\n          onConfirm={(keys, newLabels) => {\n            setPicked((state) => ({ ...state, ...newLabels }))\n            store(keys)\n            setOpen(false)\n          }}\n        />\n      )}\n    </FieldWrapper>\n  )\n}\n\ninterface PickerProps {\n  component: ModalTableSelectSchema\n  initial: string[]\n  onClose: () => void\n  onConfirm: (keys: string[], labels: Record<string, string>) => void\n}\n\nfunction ModalTablePicker({ component, initial, onClose, onConfirm }: PickerProps) {\n  const t = useT()\n  const choice = useChoice()\n  const form = useFormStore()\n  const multiple = Boolean(component.multiple)\n  const [query, setQuery] = useState<TableQuery>({})\n  const [response, setResponse] = useState<ModalTableSelectResponse | null>(null)\n  const [failed, setFailed] = useState(false)\n  // The query the shown records answer; anything else means a request is in flight.\n  const [loadedQuery, setLoadedQuery] = useState<TableQuery | null>(null)\n  const loading = loadedQuery !== query\n  const [draft, setDraft] = useState<string[]>(initial)\n  const [labels, setLabels] = useState<Record<string, string>>({})\n  const [search, setSearch] = useState('')\n\n  useEffect(() => {\n    const controller = new AbortController()\n\n    form\n      .modalTable(component.statePath, component.tableStateIdentifier, query, controller.signal)\n      .then((next) => {\n        if (next) {\n          setResponse(next)\n          setLabels((state) => ({ ...state, ...next.labels }))\n        }\n        setFailed(false)\n        setLoadedQuery(query)\n      })\n      .catch((error: unknown) => {\n        if ((error as { name?: string }).name === 'AbortError') return\n        setFailed(true)\n        setLoadedQuery(query)\n      })\n\n    return () => controller.abort()\n  }, [form, component.statePath, component.tableStateIdentifier, query])\n\n  const table = response?.table\n  const pushSearch = useMemo(\n    () =>\n      debounce(\n        (next: string) => setQuery((state) => ({ ...state, search: next || null, page: null })),\n        table?.searchDebounce ?? 400,\n      ),\n    [table?.searchDebounce],\n  )\n  useEffect(() => () => pushSearch.cancel(), [pushSearch])\n\n  const columns = table\n    ? table.columns.filter((column) => table.visibleColumns.includes(column.name))\n    : []\n  const records = table?.records ?? []\n  const paging = modalTablePaging(table?.pagination)\n  const atMax = multiple && component.maxItems != null && draft.length >= component.maxItems\n\n  const toggle = (key: string) =>\n    setDraft((state) => toggleModalTableKey(state, key, multiple, component.maxItems))\n\n  const sort = (column: string) => {\n    const direction =\n      table?.sort?.column === column && table.sort.direction === 'asc' ? 'desc' : 'asc'\n    setQuery((state) => ({ ...state, sort: column, direction, page: null }))\n  }\n\n  return (\n    <Dialog open onOpenChange={(next) => !next && onClose()}>\n      <DialogContent\n        className={cn(\n          'flex max-h-[90vh] flex-col gap-4',\n          FILTERS_MODAL_WIDTH_CLASSES[component.modalWidth ?? '3xl'] ?? 'sm:max-w-3xl',\n        )}\n        data-slot=\"modal-table-select-dialog\"\n      >\n        <DialogHeader>\n          <DialogTitle>{component.modalHeading}</DialogTitle>\n          {component.modalDescription && (\n            // Escaped on the server (`Html::from()`), like action modal descriptions.\n            <p\n              className=\"text-muted-foreground text-sm\"\n              data-slot=\"modal-table-select-description\"\n              dangerouslySetInnerHTML={{ __html: component.modalDescription }}\n            />\n          )}\n          <DialogDescription aria-live=\"polite\">\n            {choice(\n              'table.selected',\n              draft.length,\n              { count: draft.length },\n              `${draft.length} selected`,\n            )}\n          </DialogDescription>\n        </DialogHeader>\n        {table && (table.searchable || (table.filters?.length ?? 0) > 0) && (\n          <div className=\"flex flex-col gap-3\">\n            {table.searchable && (\n              <div className=\"relative\">\n                <SearchIcon className=\"text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2\" />\n                <Input\n                  type=\"search\"\n                  value={search}\n                  aria-label={table.searchPlaceholder}\n                  placeholder={table.searchPlaceholder}\n                  className=\"ps-8\"\n                  onChange={(event) => {\n                    setSearch(event.target.value)\n                    pushSearch(event.target.value)\n                  }}\n                />\n              </div>\n            )}\n            {(table.filters?.length ?? 0) > 0 && (\n              <PickerFilters\n                table={table}\n                owner={form}\n                path={component.statePath}\n                onChange={(filters) => setQuery((state) => ({ ...state, filters, page: null }))}\n              />\n            )}\n          </div>\n        )}\n        <div className=\"min-h-0 flex-1 overflow-auto rounded-md border\" aria-busy={loading}>\n          {failed ? (\n            <p role=\"alert\" className=\"text-destructive p-6 text-center text-sm\">\n              {t('table_select.load_failed', {}, \"Couldn't load the records.\")}\n            </p>\n          ) : !table ? (\n            <div className=\"flex flex-col gap-2 p-4\" aria-hidden=\"true\">\n              <Skeleton className=\"h-8 w-full\" />\n              <Skeleton className=\"h-8 w-full\" />\n              <Skeleton className=\"h-8 w-full\" />\n            </div>\n          ) : records.length === 0 ? (\n            <p className=\"text-muted-foreground p-6 text-center text-sm\">\n              {table.emptyState.heading}\n            </p>\n          ) : (\n            <Table className={cn(loading && 'opacity-60')}>\n              <TableHeader>\n                <TableRow>\n                  <TableHead className=\"w-10\">\n                    <span className=\"sr-only\">{t('table.select_row', {}, 'Select row')}</span>\n                  </TableHead>\n                  {columns.map((column) => (\n                    <TableHead\n                      key={column.name}\n                      aria-sort={\n                        table.sort?.column === column.name\n                          ? table.sort.direction === 'asc'\n                            ? 'ascending'\n                            : 'descending'\n                          : undefined\n                      }\n                    >\n                      {column.sortable ? (\n                        <button\n                          type=\"button\"\n                          className=\"inline-flex items-center gap-1\"\n                          onClick={() => sort(column.name)}\n                        >\n                          {column.label}\n                          {table.sort?.column === column.name ? (\n                            table.sort.direction === 'asc' ? (\n                              <ArrowUpIcon className=\"size-3.5\" />\n                            ) : (\n                              <ArrowDownIcon className=\"size-3.5\" />\n                            )\n                          ) : (\n                            <ArrowUpDownIcon className=\"text-muted-foreground size-3.5\" />\n                          )}\n                        </button>\n                      ) : (\n                        column.label\n                      )}\n                    </TableHead>\n                  ))}\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {records.map((record) => {\n                  const key = String(record.key)\n                  const checked = draft.includes(key)\n                  const selectable = record.selectable === true && (checked || !atMax)\n                  const label = labels[key] ?? key\n\n                  return (\n                    <TableRow\n                      key={key}\n                      data-state={checked ? 'selected' : undefined}\n                      className={cn(selectable && 'cursor-pointer')}\n                      onClick={() => selectable && toggle(key)}\n                    >\n                      <TableCell className=\"w-10\" onClick={(event) => event.stopPropagation()}>\n                        {multiple ? (\n                          <Checkbox\n                            checked={checked}\n                            disabled={!selectable}\n                            aria-label={t(\n                              'table_select.select_record',\n                              { label },\n                              `Select ${label}`,\n                            )}\n                            onCheckedChange={() => toggle(key)}\n                          />\n                        ) : (\n                          <input\n                            type=\"radio\"\n                            name={`${component.statePath}-picker`}\n                            className=\"accent-primary size-4\"\n                            checked={checked}\n                            disabled={!selectable}\n                            aria-label={t(\n                              'table_select.select_record',\n                              { label },\n                              `Select ${label}`,\n                            )}\n                            onChange={() => toggle(key)}\n                          />\n                        )}\n                      </TableCell>\n                      {columns.map((column) => (\n                        <TableCell key={column.name}>\n                          {record.cells[column.name] && (\n                            <TableCellContent\n                              column={column}\n                              cell={record.cells[column.name]!}\n                              recordKey={record.key}\n                              token=\"\"\n                              component={`picker:${component.statePath}`}\n                            />\n                          )}\n                        </TableCell>\n                      ))}\n                    </TableRow>\n                  )\n                })}\n              </TableBody>\n            </Table>\n          )}\n        </div>\n        {atMax && (\n          <p className=\"text-muted-foreground text-sm\" role=\"status\">\n            {choice(\n              'table_select.max_reached',\n              component.maxItems ?? 0,\n              { count: component.maxItems ?? 0 },\n              'You can select up to :count records.',\n            )}\n          </p>\n        )}\n        <DialogFooter className=\"items-center sm:justify-between\">\n          {paging ? (\n            <nav className=\"flex items-center gap-2\" aria-label={t('pagination', {}, 'Pagination')}>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"icon-sm\"\n                disabled={!paging.hasPrevious || loading}\n                aria-label={t('table.previous', {}, 'Previous')}\n                onClick={() => setQuery((state) => ({ ...state, page: paging.page - 1 }))}\n              >\n                <ChevronLeftIcon className=\"rtl:rotate-180\" />\n              </Button>\n              <span className=\"text-muted-foreground text-sm\">\n                {paging.total !== undefined\n                  ? t(\n                      'table.showing',\n                      { first: paging.from, last: paging.to, total: paging.total },\n                      `Showing ${paging.from}–${paging.to} of ${paging.total}`,\n                    )\n                  : `${paging.from}–${paging.to}`}\n              </span>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"icon-sm\"\n                disabled={!paging.hasNext || loading}\n                aria-label={t('table.next', {}, 'Next')}\n                onClick={() => setQuery((state) => ({ ...state, page: paging.page + 1 }))}\n              >\n                <ChevronRightIcon className=\"rtl:rotate-180\" />\n              </Button>\n            </nav>\n          ) : (\n            <span />\n          )}\n          <div className=\"flex gap-2\">\n            {draft.length > 0 && (\n              <Button type=\"button\" variant=\"ghost\" onClick={() => setDraft([])}>\n                {t('table_select.clear', {}, 'Clear selection')}\n              </Button>\n            )}\n            <Button type=\"button\" variant=\"outline\" onClick={onClose}>\n              {t('cancel', {}, 'Cancel')}\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() =>\n                onConfirm(\n                  draft,\n                  Object.fromEntries(\n                    draft.filter((key) => labels[key]).map((key) => [key, labels[key]!]),\n                  ),\n                )\n              }\n            >\n              {component.modalSubmitActionLabel ?? t('table_select.confirm', {}, 'Select')}\n            </Button>\n          </div>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\n/**\n * The picker's filters: a small form whose state becomes the table's `filters`. Searchable\n * selects among them load options through the owning form's endpoint (`pickerFilters`).\n */\nfunction PickerFilters({\n  table,\n  owner,\n  path,\n  onChange,\n}: {\n  table: NonNullable<ModalTableSelectResponse['table']>\n  owner: FormStore\n  path: string\n  onChange: (filters: Record<string, Record<string, unknown>> | null) => void\n}) {\n  const t = useT()\n  const components = useMemo(() => filterFormComponents(table.filters ?? []), [table.filters])\n  const [store] = useState(\n    () =>\n      new FormStore(\n        {\n          components,\n          state: table.filterState ?? {},\n          columns: table.filtersFormColumns ?? { default: 1, sm: 2 },\n        },\n        pickerFilterFormOptions(owner, path),\n      ),\n  )\n  const state = useStore(store.store)\n  const latest = useRef(onChange)\n\n  useEffect(() => {\n    latest.current = onChange\n  })\n\n  useEffect(() => {\n    if (!state.dirty.size) return\n\n    const timer = setTimeout(\n      () => latest.current(state.values as Record<string, Record<string, unknown>>),\n      400,\n    )\n\n    return () => clearTimeout(timer)\n  }, [state.values, state.dirty])\n\n  useEffect(() => () => store.destroy(), [store])\n\n  return (\n    <FormProvider store={store}>\n      <div className=\"bg-muted/30 flex flex-col gap-2 rounded-lg border p-3\">\n        <SchemaRenderer components={state.components} columns={state.columns} className=\"gap-3\" />\n        {(table.filterIndicators?.length ?? 0) > 0 && (\n          <Button\n            type=\"button\"\n            variant=\"link\"\n            size=\"sm\"\n            className=\"self-end\"\n            onClick={() => {\n              store.fill({ components, state: {}, columns: state.columns })\n              onChange(null)\n            }}\n          >\n            {t('table.reset_filters', {}, 'Reset')}\n          </Button>\n        )}\n      </div>\n    </FormProvider>\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/money-input.d.ts

@@ -0,0 +1,7 @@
+import { MoneyInputSchema } from "@alfakit/core";
+//#region src/components/fields/money-input.d.ts
+export declare function MoneyInputField({ component }: {
+  component: MoneyInputSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=money-input.d.ts.map

package/dist/components/fields/money-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"money-input.d.ts","names":[],"sources":["../../../src/components/fields/money-input.tsx"],"mappings":";;wBAsBgB,kBAAkB;EAAe,WAAW;oBAAkB,IAAA"}

package/dist/components/fields/money-input.js

@@ -0,0 +1,91 @@
+import { useFormatter } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { extraProps } from "../../lib/attributes.js";
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Input } from "../ui/input.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fields/money-input.tsx
+/**
+* Amount input for any ISO 4217 currency. Shows the symbol where the user's locale puts
+* it, accepts the locale's separators and digits ("1.234,50", "١٢٫٥"), and rounds to
+* the currency's precision on blur. The form value is a plain decimal string ("1234.50").
+*/
+function clampAmount(amount, min, max) {
+	return Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, amount));
+}
+function MoneyInputField({ component }) {
+	const { value, setValue, blur, error, id, disabled, aria } = useField(component);
+	const format = useFormatter();
+	const [draft, setDraft] = useState(null);
+	const { prefix, suffix } = format.currencyAffixes(component.currency);
+	const amount = value === null || value === void 0 || value === "" ? null : Number(value);
+	const display = amount === null || Number.isNaN(amount) ? String(value ?? "") : format.number(amount, {
+		minimumFractionDigits: component.decimals,
+		maximumFractionDigits: component.decimals
+	});
+	const commit = (text) => {
+		if (text.trim() === "") {
+			setValue(null);
+			return;
+		}
+		const parsed = format.parseNumber(text);
+		setValue(parsed === null ? text : clampAmount(parsed, component.min, component.max).toFixed(component.decimals));
+	};
+	const affix = (text, icon, side) => text || icon ? /* @__PURE__ */ jsxs("span", {
+		className: cn("text-muted-foreground bg-muted/50 flex items-center gap-1 px-3 text-sm whitespace-nowrap", side === "start" ? "border-e" : "border-s"),
+		children: [
+			side === "start" && /* @__PURE__ */ jsx(Icon, { name: icon }),
+			text,
+			side === "end" && /* @__PURE__ */ jsx(Icon, { name: icon })
+		]
+	}) : null;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "input-group",
+			className: cn("border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-9 w-full items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]", error && "border-destructive", disabled && "opacity-50"),
+			children: [
+				affix([component.prefix, prefix].filter(Boolean).join(" "), component.prefixIcon, "start"),
+				/* @__PURE__ */ jsx(Input, {
+					id,
+					name: component.name,
+					type: "text",
+					inputMode: component.decimals > 0 ? "decimal" : "numeric",
+					dir: "ltr",
+					value: draft ?? display,
+					onFocus: () => setDraft(amount === null || Number.isNaN(amount) ? String(value ?? "") : format.number(amount, {
+						useGrouping: false,
+						maximumFractionDigits: component.decimals
+					})),
+					onChange: (event) => {
+						setDraft(event.target.value);
+						const parsed = format.parseNumber(event.target.value);
+						setValue(event.target.value.trim() === "" ? null : parsed === null ? event.target.value : String(parsed));
+					},
+					onBlur: (event) => {
+						commit(event.target.value);
+						setDraft(null);
+						blur();
+					},
+					placeholder: component.placeholder,
+					disabled,
+					readOnly: component.readOnly,
+					required: component.required,
+					autoFocus: component.autofocus,
+					...aria,
+					...extraProps(component.extraInputAttributes, "h-full border-0 bg-transparent text-end tabular-nums shadow-none focus-visible:ring-0 dark:bg-transparent")
+				}),
+				affix([suffix, component.suffix].filter(Boolean).join(" "), component.suffixIcon, "end")
+			]
+		})
+	});
+}
+//#endregion
+export { MoneyInputField, clampAmount };
+
+//# sourceMappingURL=money-input.js.map

package/dist/components/fields/money-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"money-input.js","names":[],"sources":["../../../src/components/fields/money-input.tsx"],"sourcesContent":["import type { MoneyInputSchema } from '@alfakit/core'\nimport { useState } from 'react'\nimport { useFormatter } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Input } from '../ui/input'\n\n/**\n * Amount input for any ISO 4217 currency. Shows the symbol where the user's locale puts\n * it, accepts the locale's separators and digits (\"1.234,50\", \"١٢٫٥\"), and rounds to\n * the currency's precision on blur. The form value is a plain decimal string (\"1234.50\").\n */\nexport function clampAmount(amount: number, min?: number | null, max?: number | null): number {\n  const lower = min ?? Number.NEGATIVE_INFINITY\n  const upper = max ?? Number.POSITIVE_INFINITY\n\n  return Math.min(upper, Math.max(lower, amount))\n}\n\nexport function MoneyInputField({ component }: { component: MoneyInputSchema }) {\n  const { value, setValue, blur, error, id, disabled, aria } = useField<string | number | null>(\n    component,\n  )\n  const format = useFormatter()\n  const [draft, setDraft] = useState<string | null>(null)\n\n  const { prefix, suffix } = format.currencyAffixes(component.currency)\n  const amount = value === null || value === undefined || value === '' ? null : Number(value)\n  const display =\n    amount === null || Number.isNaN(amount)\n      ? String(value ?? '')\n      : format.number(amount, {\n          minimumFractionDigits: component.decimals,\n          maximumFractionDigits: component.decimals,\n        })\n\n  const commit = (text: string) => {\n    if (text.trim() === '') {\n      setValue(null)\n\n      return\n    }\n\n    const parsed = format.parseNumber(text)\n\n    // Unparseable input is kept as typed so server validation can explain the problem;\n    // amounts are brought inside `minValue()` / `maxValue()`.\n    setValue(\n      parsed === null\n        ? text\n        : clampAmount(parsed, component.min, component.max).toFixed(component.decimals),\n    )\n  }\n\n  const affix = (text: string, icon: string | undefined, side: 'start' | 'end') =>\n    text || icon ? (\n      <span\n        className={cn(\n          'text-muted-foreground bg-muted/50 flex items-center gap-1 px-3 text-sm whitespace-nowrap',\n          side === 'start' ? 'border-e' : 'border-s',\n        )}\n      >\n        {side === 'start' && <Icon name={icon} />}\n        {text}\n        {side === 'end' && <Icon name={icon} />}\n      </span>\n    ) : null\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <div\n        data-slot=\"input-group\"\n        className={cn(\n          'border-input dark:bg-input/30 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-ring/50 flex h-9 w-full items-stretch overflow-hidden rounded-md border shadow-xs has-[input:focus-visible]:ring-[3px]',\n          error && 'border-destructive',\n          disabled && 'opacity-50',\n        )}\n      >\n        {affix([component.prefix, prefix].filter(Boolean).join(' '), component.prefixIcon, 'start')}\n        <Input\n          id={id}\n          name={component.name}\n          type=\"text\"\n          inputMode={component.decimals > 0 ? 'decimal' : 'numeric'}\n          dir=\"ltr\"\n          value={draft ?? display}\n          onFocus={() =>\n            setDraft(\n              amount === null || Number.isNaN(amount)\n                ? String(value ?? '')\n                : format.number(amount, {\n                    useGrouping: false,\n                    maximumFractionDigits: component.decimals,\n                  }),\n            )\n          }\n          onChange={(event) => {\n            setDraft(event.target.value)\n            const parsed = format.parseNumber(event.target.value)\n            setValue(\n              event.target.value.trim() === ''\n                ? null\n                : parsed === null\n                  ? event.target.value\n                  : String(parsed),\n            )\n          }}\n          onBlur={(event) => {\n            commit(event.target.value)\n            setDraft(null)\n            blur()\n          }}\n          placeholder={component.placeholder}\n          disabled={disabled}\n          readOnly={component.readOnly}\n          required={component.required}\n          autoFocus={component.autofocus}\n          {...aria}\n\n          {...extraProps(\n            component.extraInputAttributes,\n            'h-full border-0 bg-transparent text-end tabular-nums shadow-none focus-visible:ring-0 dark:bg-transparent',\n          )}\n        />\n        {affix([suffix, component.suffix].filter(Boolean).join(' '), component.suffixIcon, 'end')}\n      </div>\n    </FieldWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,SAAgB,YAAY,QAAgB,KAAqB,KAA6B;CAI5F,OAAO,KAAK,IAFE,OAAO,OAAO,mBAEL,KAAK,IAHd,OAAO,OAAO,mBAGW,MAAM,CAAC;AAChD;AAEA,SAAgB,gBAAgB,EAAE,aAA8C;CAC9E,MAAM,EAAE,OAAO,UAAU,MAAM,OAAO,IAAI,UAAU,SAAS,SAC3D,SACF;CACA,MAAM,SAAS,aAAa;CAC5B,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CAEtD,MAAM,EAAE,QAAQ,WAAW,OAAO,gBAAgB,UAAU,QAAQ;CACpE,MAAM,SAAS,UAAU,QAAQ,UAAU,KAAA,KAAa,UAAU,KAAK,OAAO,OAAO,KAAK;CAC1F,MAAM,UACJ,WAAW,QAAQ,OAAO,MAAM,MAAM,IAClC,OAAO,SAAS,EAAE,IAClB,OAAO,OAAO,QAAQ;EACpB,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC,CAAC;CAEP,MAAM,UAAU,SAAiB;EAC/B,IAAI,KAAK,KAAK,MAAM,IAAI;GACtB,SAAS,IAAI;GAEb;EACF;EAEA,MAAM,SAAS,OAAO,YAAY,IAAI;EAItC,SACE,WAAW,OACP,OACA,YAAY,QAAQ,UAAU,KAAK,UAAU,GAAG,CAAC,CAAC,QAAQ,UAAU,QAAQ,CAClF;CACF;CAEA,MAAM,SAAS,MAAc,MAA0B,SACrD,QAAQ,OACN,qBAAC,QAAD;EACE,WAAW,GACT,4FACA,SAAS,UAAU,aAAa,UAClC;EAJF,UAAA;GAMG,SAAS,WAAW,oBAAC,MAAD,EAAM,MAAM,KAAO,CAAA;GACvC;GACA,SAAS,SAAS,oBAAC,MAAD,EAAM,MAAM,KAAO,CAAA;EAClC;CACJ,CAAA,IAAA;CAEN,OACE,oBAAC,cAAD;EAAc,OAAO;EAAW,SAAS;EAAW;EAClD,UAAA,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,6NACA,SAAS,sBACT,YAAY,YACd;GANF,UAAA;IAQG,MAAM,CAAC,UAAU,QAAQ,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GAAG,UAAU,YAAY,OAAO;IAC1F,oBAAC,OAAD;KACM;KACJ,MAAM,UAAU;KAChB,MAAK;KACL,WAAW,UAAU,WAAW,IAAI,YAAY;KAChD,KAAI;KACJ,OAAO,SAAS;KAChB,eACE,SACE,WAAW,QAAQ,OAAO,MAAM,MAAM,IAClC,OAAO,SAAS,EAAE,IAClB,OAAO,OAAO,QAAQ;MACpB,aAAa;MACb,uBAAuB,UAAU;KACnC,CAAC,CACP;KAEF,WAAW,UAAU;MACnB,SAAS,MAAM,OAAO,KAAK;MAC3B,MAAM,SAAS,OAAO,YAAY,MAAM,OAAO,KAAK;MACpD,SACE,MAAM,OAAO,MAAM,KAAK,MAAM,KAC1B,OACA,WAAW,OACT,MAAM,OAAO,QACb,OAAO,MAAM,CACrB;KACF;KACA,SAAS,UAAU;MACjB,OAAO,MAAM,OAAO,KAAK;MACzB,SAAS,IAAI;MACb,KAAK;KACP;KACA,aAAa,UAAU;KACb;KACV,UAAU,UAAU;KACpB,UAAU,UAAU;KACpB,WAAW,UAAU;KACrB,GAAI;KAEJ,GAAI,WACF,UAAU,sBACV,2GACF;IACD,CAAA;IACA,MAAM,CAAC,QAAQ,UAAU,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GAAG,UAAU,YAAY,KAAK;GACrF;;CACO,CAAA;AAElB"}

package/dist/components/fields/one-time-code-input.d.ts

@@ -0,0 +1,12 @@
+import { OneTimeCodeInputSchema } from "@alfakit/core";
+//#region src/components/fields/one-time-code-input.d.ts
+/**
+ * `OneTimeCodeInput`: one numeric input with `autocomplete="one-time-code"` (browsers and
+ * password managers fill it from an SMS or email), digits only, left to right in every
+ * language. `submitOnCompletion()` submits the form once the last digit is in.
+ */
+export declare function OneTimeCodeInputField({ component }: {
+  component: OneTimeCodeInputSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=one-time-code-input.d.ts.map

package/dist/components/fields/one-time-code-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"one-time-code-input.d.ts","names":[],"sources":["../../../src/components/fields/one-time-code-input.tsx"],"mappings":";;;;;;;wBAagB,wBAAwB;EAAe,WAAW;oBAAwB,IAAA"}