@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/fields/one-time-code-input.js

@@ -0,0 +1,53 @@
+import { cn } from "../../lib/utils.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 { OneTimeCodeSubmitter, oneTimeCodeDigits } from "@alfakit/core";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/fields/one-time-code-input.tsx
+/**
+* `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.
+*/
+function OneTimeCodeInputField({ component }) {
+	const { value, setValue, blur, error, id, disabled, aria } = useField(component);
+	const [submitter] = useState(() => new OneTimeCodeSubmitter());
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsx(Input, {
+			id,
+			name: component.name,
+			type: "text",
+			dir: "ltr",
+			inputMode: "numeric",
+			autoComplete: "one-time-code",
+			pattern: "[0-9]*",
+			maxLength: component.length,
+			value: value ?? "",
+			onChange: (event) => {
+				const code = oneTimeCodeDigits(event.target.value, component.length);
+				const form = event.currentTarget.form;
+				setValue(code === "" ? null : code);
+				if (component.submitOnCompletion) queueMicrotask(() => submitter.update(code, component.length, form));
+			},
+			onBlur: blur,
+			placeholder: component.placeholder,
+			disabled,
+			readOnly: component.readOnly,
+			required: component.required,
+			autoFocus: component.autofocus,
+			"data-slot": "one-time-code-input",
+			...aria,
+			...extraProps(component.extraInputAttributes, cn("max-w-56 text-center font-mono text-lg tracking-[0.5em] tabular-nums"))
+		})
+	});
+}
+//#endregion
+export { OneTimeCodeInputField };
+
+//# sourceMappingURL=one-time-code-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"one-time-code-input.js","names":[],"sources":["../../../src/components/fields/one-time-code-input.tsx"],"sourcesContent":["import { OneTimeCodeSubmitter, oneTimeCodeDigits, type OneTimeCodeInputSchema } from '@alfakit/core'\nimport { useState } from 'react'\nimport { extraProps } from '../../lib/attributes'\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 * `OneTimeCodeInput`: one numeric input with `autocomplete=\"one-time-code\"` (browsers and\n * password managers fill it from an SMS or email), digits only, left to right in every\n * language. `submitOnCompletion()` submits the form once the last digit is in.\n */\nexport function OneTimeCodeInputField({ component }: { component: OneTimeCodeInputSchema }) {\n  const { value, setValue, blur, error, id, disabled, aria } = useField<string | null>(component)\n  const [submitter] = useState(() => new OneTimeCodeSubmitter())\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <Input\n        id={id}\n        name={component.name}\n        type=\"text\"\n        dir=\"ltr\"\n        inputMode=\"numeric\"\n        autoComplete=\"one-time-code\"\n        pattern=\"[0-9]*\"\n        maxLength={component.length}\n        value={value ?? ''}\n        onChange={(event) => {\n          const code = oneTimeCodeDigits(event.target.value, component.length)\n          const form = event.currentTarget.form\n\n          setValue(code === '' ? null : code)\n\n          // After the state reached the form store, so the submitted values include it.\n          if (component.submitOnCompletion) {\n            queueMicrotask(() => submitter.update(code, component.length, form))\n          }\n        }}\n        onBlur={blur}\n        placeholder={component.placeholder}\n        disabled={disabled}\n        readOnly={component.readOnly}\n        required={component.required}\n        autoFocus={component.autofocus}\n        data-slot=\"one-time-code-input\"\n        {...aria}\n        {...extraProps(\n          component.extraInputAttributes,\n          cn('max-w-56 text-center font-mono text-lg tracking-[0.5em] tabular-nums'),\n        )}\n      />\n    </FieldWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,SAAgB,sBAAsB,EAAE,aAAoD;CAC1F,MAAM,EAAE,OAAO,UAAU,MAAM,OAAO,IAAI,UAAU,SAAS,SAAwB,SAAS;CAC9F,MAAM,CAAC,aAAa,eAAe,IAAI,qBAAqB,CAAC;CAE7D,OACE,oBAAC,cAAD;EAAc,OAAO;EAAW,SAAS;EAAW;EAClD,UAAA,oBAAC,OAAD;GACM;GACJ,MAAM,UAAU;GAChB,MAAK;GACL,KAAI;GACJ,WAAU;GACV,cAAa;GACb,SAAQ;GACR,WAAW,UAAU;GACrB,OAAO,SAAS;GAChB,WAAW,UAAU;IACnB,MAAM,OAAO,kBAAkB,MAAM,OAAO,OAAO,UAAU,MAAM;IACnE,MAAM,OAAO,MAAM,cAAc;IAEjC,SAAS,SAAS,KAAK,OAAO,IAAI;IAGlC,IAAI,UAAU,oBACZ,qBAAqB,UAAU,OAAO,MAAM,UAAU,QAAQ,IAAI,CAAC;GAEvE;GACA,QAAQ;GACR,aAAa,UAAU;GACb;GACV,UAAU,UAAU;GACpB,UAAU,UAAU;GACpB,WAAW,UAAU;GACrB,aAAU;GACV,GAAI;GACJ,GAAI,WACF,UAAU,sBACV,GAAG,sEAAsE,CAC3E;EACD,CAAA;CACW,CAAA;AAElB"}

package/dist/components/fields/query-builder-rules.js

@@ -0,0 +1,295 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Input } from "../ui/input.js";
+import { addGroup, addRule, canNestGroup, constraintPickerClasses, constraintPickerSections, createRule, filterQueryBuilderOptions, findConstraint, findOperator, normalizeRuleTree, queryBuilderInputType, queryBuilderOptions, removeRule, setCombinator, updateRule } from "@alfakit/core";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlusIcon, XIcon } from "lucide-react";
+//#region src/components/fields/query-builder-rules.tsx
+const SELECT_CLASS = "border-input dark:bg-input/30 focus-visible:ring-ring/50 h-8 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px] disabled:opacity-50";
+/**
+* The query builder's rule editor: rules (constraint, operator, value) combined with
+* AND / OR, in nested groups. The tree is the field's state; the server validates it.
+*/
+function QueryBuilderRulesField({ component }) {
+	const { value, setValue, id, disabled, readOnly } = useField(component);
+	const tree = useMemo(() => normalizeRuleTree(value), [value]);
+	const context = {
+		constraints: component.constraints,
+		picker: constraintPickerClasses(component),
+		maxDepth: component.maxDepth,
+		locked: Boolean(disabled || readOnly),
+		tree,
+		change: (next) => setValue(next)
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		hideLabel: true,
+		children: /* @__PURE__ */ jsx("div", {
+			id,
+			role: "group",
+			"aria-label": component.label ?? void 0,
+			children: /* @__PURE__ */ jsx(RuleGroup, {
+				group: tree,
+				path: [],
+				context
+			})
+		})
+	});
+}
+function RuleGroup({ group, path, context }) {
+	const t = useT();
+	const { constraints, locked, tree, change } = context;
+	const sections = constraintPickerSections(constraints);
+	const grouped = sections.some((section) => section.label);
+	const pickerItems = (list) => list.map((constraint) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		onSelect: () => change(addRule(tree, path, createRule(constraint))),
+		children: [constraint.icon && /* @__PURE__ */ jsx(Icon, { name: constraint.icon }), constraint.label]
+	}, constraint.name));
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "query-builder-group",
+		className: "flex flex-col gap-2",
+		children: [
+			group.rules.length > 1 && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-xs",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: t("query_builder.combinator", {}, "Combine rules with")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "inline-flex rounded-md border p-0.5",
+					children: ["and", "or"].map((combinator) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: locked,
+						"aria-pressed": group.combinator === combinator,
+						className: cn("rounded-sm px-2 py-0.5 font-medium uppercase", group.combinator === combinator ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"),
+						onClick: () => change(setCombinator(tree, path, combinator)),
+						children: t(`query_builder.${combinator}`, {}, combinator)
+					}, combinator))
+				})]
+			}),
+			group.rules.length === 0 && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: t("query_builder.empty", {}, "No rules yet.")
+			}),
+			group.rules.map((rule, index) => {
+				const rulePath = [...path, index];
+				if (rule.type === "group") return /* @__PURE__ */ jsxs("div", {
+					className: "bg-muted/30 flex items-start gap-2 rounded-md border border-s-2 p-2",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "min-w-0 flex-1",
+						children: /* @__PURE__ */ jsx(RuleGroup, {
+							group: rule,
+							path: rulePath,
+							context
+						})
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-xs",
+						disabled: locked,
+						"aria-label": t("query_builder.remove_group", {}, "Remove group"),
+						onClick: () => change(removeRule(tree, rulePath)),
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})]
+				}, index);
+				return /* @__PURE__ */ jsx(RuleRow, {
+					rule,
+					path: rulePath,
+					context
+				}, index);
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						disabled: locked || constraints.length === 0,
+						children: [
+							/* @__PURE__ */ jsx(PlusIcon, {}),
+							" ",
+							t("query_builder.add_rule", {}, "Add rule")
+						]
+					})
+				}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					align: "start",
+					className: context.picker.width,
+					children: /* @__PURE__ */ jsx("div", {
+						"data-slot": "query-builder-constraint-picker",
+						className: grouped ? void 0 : context.picker.grid,
+						children: grouped ? sections.map((section) => section.label ? /* @__PURE__ */ jsxs(DropdownMenuGroup, {
+							"aria-label": section.label,
+							"data-slot": "query-builder-constraint-group",
+							children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
+								className: "text-muted-foreground text-xs",
+								children: section.label
+							}), /* @__PURE__ */ jsx("div", {
+								className: context.picker.grid,
+								children: pickerItems(section.constraints)
+							})]
+						}, section.label) : /* @__PURE__ */ jsx("div", {
+							className: context.picker.grid,
+							children: pickerItems(section.constraints)
+						}, "")) : pickerItems(constraints)
+					})
+				})] }), canNestGroup(path, context.maxDepth) && constraints[0] && /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					disabled: locked,
+					onClick: () => change(addGroup(tree, path, createRule(constraints[0]))),
+					children: [
+						/* @__PURE__ */ jsx(PlusIcon, {}),
+						" ",
+						t("query_builder.add_group", {}, "Add group")
+					]
+				})]
+			})
+		]
+	});
+}
+function RuleRow({ rule, path, context }) {
+	const t = useT();
+	const { constraints, locked, tree, change } = context;
+	const constraint = findConstraint(constraints, rule.constraint);
+	const operator = findOperator(constraint, rule.operator);
+	const update = (changes) => change(updateRule(tree, path, changes, constraints));
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "query-builder-rule",
+		className: "flex flex-wrap items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsxs("select", {
+				className: SELECT_CLASS,
+				value: rule.constraint,
+				disabled: locked,
+				"aria-label": t("query_builder.constraint", {}, "Field"),
+				onChange: (event) => update({ constraint: event.target.value }),
+				children: [!constraint && /* @__PURE__ */ jsx("option", {
+					value: rule.constraint,
+					children: rule.constraint
+				}), constraintPickerSections(constraints).map((section) => {
+					const options = section.constraints.map((item) => /* @__PURE__ */ jsx("option", {
+						value: item.name,
+						children: item.label
+					}, item.name));
+					return section.label ? /* @__PURE__ */ jsx("optgroup", {
+						label: section.label,
+						children: options
+					}, section.label) : options;
+				})]
+			}),
+			constraint && /* @__PURE__ */ jsx("select", {
+				className: SELECT_CLASS,
+				value: rule.operator,
+				disabled: locked,
+				"aria-label": t("query_builder.operator", {}, "Operator"),
+				onChange: (event) => update({ operator: event.target.value }),
+				children: constraint.operators.map((item) => /* @__PURE__ */ jsx("option", {
+					value: item.name,
+					children: item.label
+				}, item.name))
+			}),
+			constraint && operator && operator.input !== "none" && /* @__PURE__ */ jsx(RuleValue, {
+				constraint,
+				options: queryBuilderOptions(constraint, operator),
+				multiple: Boolean(constraint.multiple && !operator.options),
+				input: operator.input,
+				value: rule.value,
+				locked,
+				onChange: (value) => update({ value })
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-xs",
+				className: "ms-auto",
+				disabled: locked,
+				"aria-label": t("query_builder.remove_rule", {}, "Remove rule"),
+				onClick: () => change(removeRule(tree, path)),
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})
+		]
+	});
+}
+function RuleValue({ constraint, options: allOptions, multiple, input, value, locked, onChange }) {
+	const t = useT();
+	const [search, setSearch] = useState("");
+	const label = t("query_builder.value", {}, "Value");
+	if (input === "select") {
+		const options = constraint.searchable ? filterQueryBuilderOptions(allOptions, search) : allOptions;
+		const searchBox = constraint.searchable ? /* @__PURE__ */ jsx(Input, {
+			type: "search",
+			"data-slot": "query-builder-search",
+			className: "h-8 w-40",
+			value: search,
+			disabled: locked,
+			placeholder: t("form.search_placeholder", {}, "Type to search…"),
+			"aria-label": t("query_builder.search_options", {}, "Search options"),
+			onChange: (event) => setSearch(event.target.value)
+		}) : null;
+		const selectedValues = Array.isArray(value) ? value.map(String) : value !== void 0 && value !== null && value !== "" ? [String(value)] : [];
+		const shown = [...allOptions.filter((option) => selectedValues.includes(String(option.value)) && !options.some((item) => item.value === option.value)), ...options];
+		if (multiple) {
+			const selected = selectedValues;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [searchBox, /* @__PURE__ */ jsx("div", {
+					role: "group",
+					"aria-label": label,
+					className: "flex flex-wrap items-center gap-x-3 gap-y-1",
+					children: shown.map((option) => /* @__PURE__ */ jsxs("label", {
+						className: "flex items-center gap-1.5 text-sm",
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "checkbox",
+							className: "accent-primary size-4",
+							disabled: locked,
+							checked: selected.includes(String(option.value)),
+							onChange: (event) => onChange(event.target.checked ? [...selected, String(option.value)] : selected.filter((item) => item !== String(option.value)))
+						}), option.label]
+					}, option.value))
+				})]
+			});
+		}
+		const select = /* @__PURE__ */ jsxs("select", {
+			className: SELECT_CLASS,
+			value: value === void 0 || value === null ? "" : String(Array.isArray(value) ? value[0] : value),
+			disabled: locked,
+			"aria-label": label,
+			onChange: (event) => onChange(event.target.value === "" ? null : event.target.value),
+			children: [/* @__PURE__ */ jsx("option", {
+				value: "",
+				children: t("query_builder.select_placeholder", {}, "Select…")
+			}), shown.map((option) => /* @__PURE__ */ jsx("option", {
+				value: String(option.value),
+				children: option.label
+			}, option.value))]
+		});
+		return searchBox ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [searchBox, select]
+		}) : select;
+	}
+	return /* @__PURE__ */ jsx(Input, {
+		type: queryBuilderInputType(input),
+		step: input === "number" ? constraint.step ?? "any" : input === "year" ? 1 : void 0,
+		min: input === "year" ? 1 : void 0,
+		max: input === "year" ? 9999 : void 0,
+		className: "h-8 w-auto min-w-32 flex-1",
+		value: value === void 0 || value === null ? "" : String(value),
+		disabled: locked,
+		"aria-label": label,
+		onChange: (event) => onChange(event.target.value)
+	});
+}
+//#endregion
+export { QueryBuilderRulesField };
+
+//# sourceMappingURL=query-builder-rules.js.map

package/dist/components/fields/query-builder-rules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-builder-rules.js","names":[],"sources":["../../../src/components/fields/query-builder-rules.tsx"],"sourcesContent":["import type {\n  FieldSchema,\n  Option,\n  QueryBuilderConstraintRule,\n  QueryBuilderConstraintSchema,\n  QueryBuilderGroup,\n  QueryBuilderRulesSchema,\n  RulePath,\n} from '@alfakit/core'\nimport {\n  addGroup,\n  addRule,\n  canNestGroup,\n  constraintPickerClasses,\n  constraintPickerSections,\n  createRule,\n  filterQueryBuilderOptions,\n  findConstraint,\n  findOperator,\n  normalizeRuleTree,\n  queryBuilderInputType,\n  queryBuilderOptions,\n  removeRule,\n  setCombinator,\n  updateRule,\n} from '@alfakit/core'\nimport { PlusIcon, XIcon } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Button } from '../ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport { Input } from '../ui/input'\n\nconst SELECT_CLASS =\n  'border-input dark:bg-input/30 focus-visible:ring-ring/50 h-8 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px] disabled:opacity-50'\n\ninterface EditorContext {\n  constraints: QueryBuilderConstraintSchema[]\n  picker: ReturnType<typeof constraintPickerClasses>\n  maxDepth: number\n  locked: boolean\n  tree: QueryBuilderGroup\n  change: (tree: QueryBuilderGroup) => void\n}\n\n/**\n * The query builder's rule editor: rules (constraint, operator, value) combined with\n * AND / OR, in nested groups. The tree is the field's state; the server validates it.\n */\nexport function QueryBuilderRulesField({ component }: { component: QueryBuilderRulesSchema }) {\n  const { value, setValue, id, disabled, readOnly } = useField<unknown>(\n    component as unknown as FieldSchema,\n  )\n  const tree = useMemo(() => normalizeRuleTree(value), [value])\n\n  const context: EditorContext = {\n    constraints: component.constraints,\n    picker: constraintPickerClasses(component),\n    maxDepth: component.maxDepth,\n    locked: Boolean(disabled || readOnly),\n    tree,\n    change: (next) => setValue(next),\n  }\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} hideLabel>\n      <div id={id} role=\"group\" aria-label={component.label ?? undefined}>\n        <RuleGroup group={tree} path={[]} context={context} />\n      </div>\n    </FieldWrapper>\n  )\n}\n\nfunction RuleGroup({\n  group,\n  path,\n  context,\n}: {\n  group: QueryBuilderGroup\n  path: RulePath\n  context: EditorContext\n}) {\n  const t = useT()\n  const { constraints, locked, tree, change } = context\n  const sections = constraintPickerSections(constraints)\n  const grouped = sections.some((section) => section.label)\n  const pickerItems = (list: QueryBuilderConstraintSchema[]) =>\n    list.map((constraint) => (\n      <DropdownMenuItem\n        key={constraint.name}\n        onSelect={() => change(addRule(tree, path, createRule(constraint)))}\n      >\n        {constraint.icon && <Icon name={constraint.icon} />}\n        {constraint.label}\n      </DropdownMenuItem>\n    ))\n\n  return (\n    <div data-slot=\"query-builder-group\" className=\"flex flex-col gap-2\">\n      {group.rules.length > 1 && (\n        <div className=\"flex items-center gap-2 text-xs\">\n          <span className=\"text-muted-foreground\">\n            {t('query_builder.combinator', {}, 'Combine rules with')}\n          </span>\n          <div className=\"inline-flex rounded-md border p-0.5\">\n            {(['and', 'or'] as const).map((combinator) => (\n              <button\n                key={combinator}\n                type=\"button\"\n                disabled={locked}\n                aria-pressed={group.combinator === combinator}\n                className={cn(\n                  'rounded-sm px-2 py-0.5 font-medium uppercase',\n                  group.combinator === combinator\n                    ? 'bg-primary text-primary-foreground'\n                    : 'text-muted-foreground hover:text-foreground',\n                )}\n                onClick={() => change(setCombinator(tree, path, combinator))}\n              >\n                {t(`query_builder.${combinator}`, {}, combinator)}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n      {group.rules.length === 0 && (\n        <p className=\"text-muted-foreground text-sm\">\n          {t('query_builder.empty', {}, 'No rules yet.')}\n        </p>\n      )}\n      {group.rules.map((rule, index) => {\n        const rulePath = [...path, index]\n\n        if (rule.type === 'group') {\n          return (\n            <div\n              key={index}\n              className=\"bg-muted/30 flex items-start gap-2 rounded-md border border-s-2 p-2\"\n            >\n              <div className=\"min-w-0 flex-1\">\n                <RuleGroup group={rule} path={rulePath} context={context} />\n              </div>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-xs\"\n                disabled={locked}\n                aria-label={t('query_builder.remove_group', {}, 'Remove group')}\n                onClick={() => change(removeRule(tree, rulePath))}\n              >\n                <XIcon />\n              </Button>\n            </div>\n          )\n        }\n\n        return <RuleRow key={index} rule={rule} path={rulePath} context={context} />\n      })}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              disabled={locked || constraints.length === 0}\n            >\n              <PlusIcon /> {t('query_builder.add_rule', {}, 'Add rule')}\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\" className={context.picker.width}>\n            <div\n              data-slot=\"query-builder-constraint-picker\"\n              className={grouped ? undefined : context.picker.grid}\n            >\n              {/* `constraints(['Group' => [...]])`: a labelled section per group. */}\n              {grouped\n                ? sections.map((section) =>\n                    section.label ? (\n                      <DropdownMenuGroup\n                        key={section.label}\n                        aria-label={section.label}\n                        data-slot=\"query-builder-constraint-group\"\n                      >\n                        <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                          {section.label}\n                        </DropdownMenuLabel>\n                        <div className={context.picker.grid}>\n                          {pickerItems(section.constraints)}\n                        </div>\n                      </DropdownMenuGroup>\n                    ) : (\n                      <div key=\"\" className={context.picker.grid}>\n                        {pickerItems(section.constraints)}\n                      </div>\n                    ),\n                  )\n                : pickerItems(constraints)}\n            </div>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        {canNestGroup(path, context.maxDepth) && constraints[0] && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            disabled={locked}\n            onClick={() => change(addGroup(tree, path, createRule(constraints[0]!)))}\n          >\n            <PlusIcon /> {t('query_builder.add_group', {}, 'Add group')}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction RuleRow({\n  rule,\n  path,\n  context,\n}: {\n  rule: QueryBuilderConstraintRule\n  path: RulePath\n  context: EditorContext\n}) {\n  const t = useT()\n  const { constraints, locked, tree, change } = context\n  const constraint = findConstraint(constraints, rule.constraint)\n  const operator = findOperator(constraint, rule.operator)\n  const update = (changes: Partial<Omit<QueryBuilderConstraintRule, 'type'>>) =>\n    change(updateRule(tree, path, changes, constraints))\n\n  return (\n    <div data-slot=\"query-builder-rule\" className=\"flex flex-wrap items-center gap-2\">\n      <select\n        className={SELECT_CLASS}\n        value={rule.constraint}\n        disabled={locked}\n        aria-label={t('query_builder.constraint', {}, 'Field')}\n        onChange={(event) => update({ constraint: event.target.value })}\n      >\n        {!constraint && <option value={rule.constraint}>{rule.constraint}</option>}\n        {constraintPickerSections(constraints).map((section) => {\n          const options = section.constraints.map((item) => (\n            <option key={item.name} value={item.name}>\n              {item.label}\n            </option>\n          ))\n\n          return section.label ? (\n            <optgroup key={section.label} label={section.label}>\n              {options}\n            </optgroup>\n          ) : (\n            options\n          )\n        })}\n      </select>\n      {constraint && (\n        <select\n          className={SELECT_CLASS}\n          value={rule.operator}\n          disabled={locked}\n          aria-label={t('query_builder.operator', {}, 'Operator')}\n          onChange={(event) => update({ operator: event.target.value })}\n        >\n          {constraint.operators.map((item) => (\n            <option key={item.name} value={item.name}>\n              {item.label}\n            </option>\n          ))}\n        </select>\n      )}\n      {constraint && operator && operator.input !== 'none' && (\n        <RuleValue\n          constraint={constraint}\n          options={queryBuilderOptions(constraint, operator)}\n          // A custom operator's own options take one value.\n          multiple={Boolean(constraint.multiple && !operator.options)}\n          input={operator.input}\n          value={rule.value}\n          locked={locked}\n          onChange={(value) => update({ value })}\n        />\n      )}\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-xs\"\n        className=\"ms-auto\"\n        disabled={locked}\n        aria-label={t('query_builder.remove_rule', {}, 'Remove rule')}\n        onClick={() => change(removeRule(tree, path))}\n      >\n        <XIcon />\n      </Button>\n    </div>\n  )\n}\n\nfunction RuleValue({\n  constraint,\n  options: allOptions,\n  multiple,\n  input,\n  value,\n  locked,\n  onChange,\n}: {\n  constraint: QueryBuilderConstraintSchema\n  options: Option[]\n  multiple: boolean\n  input: string\n  value: unknown\n  locked: boolean\n  onChange: (value: unknown) => void\n}) {\n  const t = useT()\n  const [search, setSearch] = useState('')\n  const label = t('query_builder.value', {}, 'Value')\n\n  if (input === 'select') {\n    // `searchable()`: a search box narrows the options.\n    const options = constraint.searchable\n      ? filterQueryBuilderOptions(allOptions, search)\n      : allOptions\n    const searchBox = constraint.searchable ? (\n      <Input\n        type=\"search\"\n        data-slot=\"query-builder-search\"\n        className=\"h-8 w-40\"\n        value={search}\n        disabled={locked}\n        placeholder={t('form.search_placeholder', {}, 'Type to search…')}\n        aria-label={t('query_builder.search_options', {}, 'Search options')}\n        onChange={(event) => setSearch(event.target.value)}\n      />\n    ) : null\n    // A selected option stays listed while the search hides it.\n    const selectedValues = Array.isArray(value)\n      ? value.map(String)\n      : value !== undefined && value !== null && value !== ''\n        ? [String(value)]\n        : []\n    const shown = [\n      ...allOptions.filter(\n        (option) =>\n          selectedValues.includes(String(option.value)) &&\n          !options.some((item) => item.value === option.value),\n      ),\n      ...options,\n    ]\n\n    if (multiple) {\n      const selected = selectedValues\n\n      return (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {searchBox}\n          <div\n            role=\"group\"\n            aria-label={label}\n            className=\"flex flex-wrap items-center gap-x-3 gap-y-1\"\n          >\n            {shown.map((option) => (\n              <label key={option.value} className=\"flex items-center gap-1.5 text-sm\">\n                <input\n                  type=\"checkbox\"\n                  className=\"accent-primary size-4\"\n                  disabled={locked}\n                  checked={selected.includes(String(option.value))}\n                  onChange={(event) =>\n                    onChange(\n                      event.target.checked\n                        ? [...selected, String(option.value)]\n                        : selected.filter((item) => item !== String(option.value)),\n                    )\n                  }\n                />\n                {option.label}\n              </label>\n            ))}\n          </div>\n        </div>\n      )\n    }\n\n    const select = (\n      <select\n        className={SELECT_CLASS}\n        value={\n          value === undefined || value === null\n            ? ''\n            : String(Array.isArray(value) ? value[0] : value)\n        }\n        disabled={locked}\n        aria-label={label}\n        onChange={(event) => onChange(event.target.value === '' ? null : event.target.value)}\n      >\n        <option value=\"\">{t('query_builder.select_placeholder', {}, 'Select…')}</option>\n        {shown.map((option) => (\n          <option key={option.value} value={String(option.value)}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    )\n\n    return searchBox ? (\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {searchBox}\n        {select}\n      </div>\n    ) : (\n      select\n    )\n  }\n\n  return (\n    <Input\n      type={queryBuilderInputType(input)}\n      step={input === 'number' ? (constraint.step ?? 'any') : input === 'year' ? 1 : undefined}\n      min={input === 'year' ? 1 : undefined}\n      max={input === 'year' ? 9999 : undefined}\n      className=\"h-8 w-auto min-w-32 flex-1\"\n      value={value === undefined || value === null ? '' : String(value)}\n      disabled={locked}\n      aria-label={label}\n      onChange={(event) => onChange(event.target.value)}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/radio.d.ts

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

package/dist/components/fields/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","names":[],"sources":["../../../src/components/fields/radio.tsx"],"mappings":";;wBAUgB,aAAa;EAAe,WAAW;oBAAa,IAAA"}

package/dist/components/fields/radio.js

@@ -0,0 +1,57 @@
+import { cn } from "../../lib/utils.js";
+import { textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { useField } from "../form/form-context.js";
+import { Label } from "../ui/label.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { RadioGroup, RadioGroupItem } from "../ui/radio-group.js";
+import { fieldIds, isOptionGroup } from "@alfakit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fields/radio.tsx
+function RadioField({ component }) {
+	const { value, setValue, error, id, disabled, readOnly, aria } = useField(component);
+	const options = component.options.flatMap((option) => isOptionGroup(option) ? option.options : [option]);
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			value: value === null || value === void 0 ? "" : typeof value === "boolean" ? value ? "1" : "0" : String(value),
+			onValueChange: (next) => setValue(next),
+			disabled: disabled || readOnly,
+			"aria-readonly": readOnly || void 0,
+			className: cn(component.inline && "flex flex-wrap gap-4"),
+			"aria-labelledby": component.label ? fieldIds(id).label : void 0,
+			...aria,
+			children: options.map((option) => {
+				const optionId = `${id}-${option.value}`;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2",
+					children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+						id: optionId,
+						value: option.value,
+						disabled: option.disabled,
+						className: "mt-0.5"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "grid gap-0.5",
+						children: [/* @__PURE__ */ jsxs(Label, {
+							htmlFor: optionId,
+							className: cn("font-normal", option.color && textColorClasses[option.color]),
+							children: [option.icon && /* @__PURE__ */ jsx(Icon, {
+								name: option.icon,
+								className: "size-4"
+							}), option.label]
+						}), option.description && /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-xs",
+							children: option.description
+						})]
+					})]
+				}, option.value);
+			})
+		})
+	});
+}
+//#endregion
+export { RadioField };
+
+//# sourceMappingURL=radio.js.map

package/dist/components/fields/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/fields/radio.tsx"],"sourcesContent":["import type { RadioSchema } from '@alfakit/core'\nimport { fieldIds, isOptionGroup } from '@alfakit/core'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Label } from '../ui/label'\nimport { RadioGroup, RadioGroupItem } from '../ui/radio-group'\n\nexport function RadioField({ component }: { component: RadioSchema }) {\n  const { value, setValue, error, id, disabled, readOnly, aria } = useField<\n    string | number | boolean | null\n  >(component)\n  const options = component.options.flatMap((option) =>\n    isOptionGroup(option) ? option.options : [option],\n  )\n  const current =\n    value === null || value === undefined\n      ? ''\n      : typeof value === 'boolean'\n        ? value\n          ? '1'\n          : '0'\n        : String(value)\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <RadioGroup\n        value={current}\n        onValueChange={(next) => setValue(next)}\n        disabled={disabled || readOnly}\n        aria-readonly={readOnly || undefined}\n        className={cn(component.inline && 'flex flex-wrap gap-4')}\n        aria-labelledby={component.label ? fieldIds(id).label : undefined}\n        {...aria}\n      >\n        {options.map((option) => {\n          const optionId = `${id}-${option.value}`\n\n          return (\n            <div key={option.value} className=\"flex items-start gap-2\">\n              <RadioGroupItem\n                id={optionId}\n                value={option.value}\n                disabled={option.disabled}\n                className=\"mt-0.5\"\n              />\n              <div className=\"grid gap-0.5\">\n                <Label\n                  htmlFor={optionId}\n                  className={cn('font-normal', option.color && textColorClasses[option.color])}\n                >\n                  {option.icon && <Icon name={option.icon} className=\"size-4\" />}\n                  {option.label}\n                </Label>\n                {option.description && (\n                  <p className=\"text-muted-foreground text-xs\">{option.description}</p>\n                )}\n              </div>\n            </div>\n          )\n        })}\n      </RadioGroup>\n    </FieldWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,WAAW,EAAE,aAAyC;CACpE,MAAM,EAAE,OAAO,UAAU,OAAO,IAAI,UAAU,UAAU,SAAS,SAE/D,SAAS;CACX,MAAM,UAAU,UAAU,QAAQ,SAAS,WACzC,cAAc,MAAM,IAAI,OAAO,UAAU,CAAC,MAAM,CAClD;CAUA,OACE,oBAAC,cAAD;EAAc,OAAO;EAAW,SAAS;EAAW;EAClD,UAAA,oBAAC,YAAD;GACE,OAXJ,UAAU,QAAQ,UAAU,KAAA,IACxB,KACA,OAAO,UAAU,YACf,QACE,MACA,MACF,OAAO,KAAK;GAMd,gBAAgB,SAAS,SAAS,IAAI;GACtC,UAAU,YAAY;GACtB,iBAAe,YAAY,KAAA;GAC3B,WAAW,GAAG,UAAU,UAAU,sBAAsB;GACxD,mBAAiB,UAAU,QAAQ,SAAS,EAAE,CAAC,CAAC,QAAQ,KAAA;GACxD,GAAI;GAEH,UAAA,QAAQ,KAAK,WAAW;IACvB,MAAM,WAAW,GAAG,GAAG,GAAG,OAAO;IAEjC,OACE,qBAAC,OAAD;KAAwB,WAAU;KAAlC,UAAA,CACE,oBAAC,gBAAD;MACE,IAAI;MACJ,OAAO,OAAO;MACd,UAAU,OAAO;MACjB,WAAU;KACX,CAAA,GACD,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,qBAAC,OAAD;OACE,SAAS;OACT,WAAW,GAAG,eAAe,OAAO,SAAS,iBAAiB,OAAO,MAAM;OAF7E,UAAA,CAIG,OAAO,QAAQ,oBAAC,MAAD;QAAM,MAAM,OAAO;QAAM,WAAU;OAAU,CAAA,GAC5D,OAAO,KACH;MACN,CAAA,GAAA,OAAO,eACN,oBAAC,KAAD;OAAG,WAAU;OAAiC,UAAA,OAAO;MAAe,CAAA,CAEnE;KACF,CAAA,CAAA;IAnBK,GAAA,OAAO,KAmBZ;GAET,CAAC;EACS,CAAA;CACA,CAAA;AAElB"}

package/dist/components/fields/repeater-table.js

@@ -0,0 +1,111 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { RenderComponent } from "../schema/schema-renderer.js";
+import { ItemHeaderActions, useItemActionFallbacks } from "./item-actions.js";
+import { VirtualSpacerRow } from "../schema/virtual-spacer.js";
+import { resolveItemAction, tableColumnAlignmentClass, tableColumnCells } from "@alfakit/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fields/repeater-table.tsx
+/** Header cells shared by the Repeater and RepeatableEntry tables. */
+function TableColumnHeaders({ columns }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: columns.map((column, index) => /* @__PURE__ */ jsxs("th", {
+		scope: "col",
+		style: column.width ? { width: column.width } : void 0,
+		className: cn("text-muted-foreground px-3 py-2 text-xs font-medium", tableColumnAlignmentClass(column), !column.wrapHeader && "whitespace-nowrap"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn(column.hiddenLabel && "sr-only"),
+			children: column.label
+		}), column.required && /* @__PURE__ */ jsx("span", {
+			className: "text-destructive ms-0.5",
+			"aria-hidden": "true",
+			children: "*"
+		})]
+	}, `${column.name ?? "column"}-${index}`)) });
+}
+/**
+* Repeater items as table rows (`->table([...])`): one cell per item field, labels kept
+* for screen readers only, and the row controls in the last column.
+*/
+function RepeaterTable({ id, columns, prefixFor, count, schemaFor, labelledBy, describedBy, reorderable, cloneable, deletable, compact = false, onMove, onClone, onRemove, virtual: { range, indexes, attach, item }, context = { token: "" }, resolve, extraActionsFor }) {
+	const t = useT();
+	const fallbacks = useItemActionFallbacks();
+	const resolveAction = (name, index) => resolve ? resolve(name, index) : resolveItemAction(name, {}, void 0, fallbacks[name]);
+	const hasExtraActions = Boolean(extraActionsFor && indexes.some((i) => extraActionsFor(i)?.length));
+	const hasControls = reorderable || cloneable || deletable || hasExtraActions;
+	const cellCount = columns.length + Number(hasControls);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "repeater-table",
+		"data-compact": compact || void 0,
+		className: "bg-card relative overflow-x-auto rounded-lg border shadow-xs",
+		children: /* @__PURE__ */ jsxs("table", {
+			id,
+			"aria-labelledby": labelledBy,
+			"aria-describedby": describedBy,
+			"aria-rowcount": range.active ? count + 1 : void 0,
+			className: "w-full border-collapse text-sm",
+			children: [/* @__PURE__ */ jsx("thead", {
+				className: "bg-muted/40",
+				children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx(TableColumnHeaders, { columns }), hasControls && /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					className: "w-px px-2 py-2",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: t("actions", {}, "Actions")
+					})
+				})] })
+			}), /* @__PURE__ */ jsxs("tbody", {
+				ref: attach,
+				children: [
+					/* @__PURE__ */ jsx(VirtualSpacerRow, {
+						height: range.before,
+						colSpan: cellCount
+					}),
+					indexes.map((index) => {
+						const cells = tableColumnCells(columns, schemaFor(index), prefixFor(index));
+						return /* @__PURE__ */ jsxs("tr", {
+							ref: item,
+							"data-index": index,
+							"aria-rowindex": range.active ? index + 2 : void 0,
+							"data-slot": "repeater-row",
+							className: "border-t align-top",
+							children: [cells.map((cell, cellIndex) => /* @__PURE__ */ jsx("td", {
+								className: cn(compact ? "px-1.5 py-1" : "px-3 py-2", "[&_[data-slot=label]]:sr-only", tableColumnAlignmentClass(columns[cellIndex] ?? {})),
+								children: cell && /* @__PURE__ */ jsx(RenderComponent, { component: cell })
+							}, cell?.key ?? `empty-${cellIndex}`)), hasControls && /* @__PURE__ */ jsx("td", {
+								className: compact ? "px-1 py-1" : "px-2 py-2",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "flex items-center justify-end",
+									children: /* @__PURE__ */ jsx(ItemHeaderActions, {
+										context,
+										itemKey: String(index),
+										index,
+										count,
+										resolve: (name) => resolveAction(name, index),
+										extraActions: extraActionsFor?.(index),
+										buttons: reorderable,
+										canClone: cloneable,
+										canDelete: deletable,
+										collapsible: false,
+										collapsed: false,
+										onMove,
+										onClone: () => onClone(index),
+										onDelete: () => onRemove(index),
+										onToggle: () => void 0
+									})
+								})
+							})]
+						}, index);
+					}),
+					/* @__PURE__ */ jsx(VirtualSpacerRow, {
+						height: range.after,
+						colSpan: cellCount
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { RepeaterTable, TableColumnHeaders };
+
+//# sourceMappingURL=repeater-table.js.map

package/dist/components/fields/repeater-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"repeater-table.js","names":[],"sources":["../../../src/components/fields/repeater-table.tsx"],"sourcesContent":["import type {\n  ActionContext,\n  ActionSchema,\n  ItemActionName,\n  ItemActionSchema,\n  SchemaComponent,\n  TableColumnSchema,\n} from '@alfakit/core'\nimport { resolveItemAction, tableColumnAlignmentClass, tableColumnCells } from '@alfakit/core'\nimport { useT } from '../../context'\nimport type { VirtualListBinding } from '../../hooks/use-virtual-list'\nimport { cn } from '../../lib/utils'\nimport { RenderComponent } from '../schema/schema-renderer'\nimport { VirtualSpacerRow } from '../schema/virtual-spacer'\nimport { ItemHeaderActions, useItemActionFallbacks } from './item-actions'\n\nexport interface RepeaterTableProps {\n  id: string\n  columns: TableColumnSchema[]\n  /** The item state path prefix for an index (`lines.0.`). */\n  prefixFor: (index: number) => string\n  count: number\n  schemaFor: (index: number) => SchemaComponent[]\n  labelledBy?: string\n  describedBy?: string\n  reorderable: boolean\n  cloneable: boolean\n  deletable: boolean\n  /** `compact()`: tighter cells. */\n  compact?: boolean\n  onMove: (from: number, to: number) => void\n  onClone: (index: number) => void\n  onRemove: (index: number) => void\n  /** Windowed rows for long lists (see `useVirtualList`). */\n  virtual: VirtualListBinding\n  /** The field action context item actions run in. */\n  context?: ActionContext\n  /** The built-in action `name` of the row at `index` (null when hidden). */\n  resolve?: (name: ItemActionName, index: number) => ItemActionSchema | null\n  /** `extraItemActions()` of the row at `index`. */\n  extraActionsFor?: (index: number) => ActionSchema[] | undefined\n}\n\n/** Header cells shared by the Repeater and RepeatableEntry tables. */\nexport function TableColumnHeaders({ columns }: { columns: TableColumnSchema[] }) {\n  return (\n    <>\n      {columns.map((column, index) => (\n        <th\n          key={`${column.name ?? 'column'}-${index}`}\n          scope=\"col\"\n          style={column.width ? { width: column.width } : undefined}\n          className={cn(\n            'text-muted-foreground px-3 py-2 text-xs font-medium',\n            tableColumnAlignmentClass(column),\n            !column.wrapHeader && 'whitespace-nowrap',\n          )}\n        >\n          <span className={cn(column.hiddenLabel && 'sr-only')}>{column.label}</span>\n          {column.required && (\n            <span className=\"text-destructive ms-0.5\" aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </th>\n      ))}\n    </>\n  )\n}\n\n/**\n * Repeater items as table rows (`->table([...])`): one cell per item field, labels kept\n * for screen readers only, and the row controls in the last column.\n */\nexport function RepeaterTable({\n  id,\n  columns,\n  prefixFor,\n  count,\n  schemaFor,\n  labelledBy,\n  describedBy,\n  reorderable,\n  cloneable,\n  deletable,\n  compact = false,\n  onMove,\n  onClone,\n  onRemove,\n  virtual: { range, indexes, attach, item },\n  context = { token: '' },\n  resolve,\n  extraActionsFor,\n}: RepeaterTableProps) {\n  const t = useT()\n  const fallbacks = useItemActionFallbacks()\n  const resolveAction = (name: ItemActionName, index: number) =>\n    resolve ? resolve(name, index) : resolveItemAction(name, {}, undefined, fallbacks[name])\n  const hasExtraActions = Boolean(\n    extraActionsFor && indexes.some((i) => extraActionsFor(i)?.length),\n  )\n  const hasControls = reorderable || cloneable || deletable || hasExtraActions\n  const cellCount = columns.length + Number(hasControls)\n\n  return (\n    <div\n      data-slot=\"repeater-table\"\n      data-compact={compact || undefined}\n      className=\"bg-card relative overflow-x-auto rounded-lg border shadow-xs\"\n    >\n      <table\n        id={id}\n        aria-labelledby={labelledBy}\n        aria-describedby={describedBy}\n        aria-rowcount={range.active ? count + 1 : undefined}\n        className=\"w-full border-collapse text-sm\"\n      >\n        <thead className=\"bg-muted/40\">\n          <tr>\n            <TableColumnHeaders columns={columns} />\n            {hasControls && (\n              <th scope=\"col\" className=\"w-px px-2 py-2\">\n                <span className=\"sr-only\">{t('actions', {}, 'Actions')}</span>\n              </th>\n            )}\n          </tr>\n        </thead>\n        <tbody ref={attach}>\n          <VirtualSpacerRow height={range.before} colSpan={cellCount} />\n          {indexes.map((index) => {\n            const cells = tableColumnCells(columns, schemaFor(index), prefixFor(index))\n\n            return (\n              <tr\n                key={index}\n                ref={item}\n                data-index={index}\n                aria-rowindex={range.active ? index + 2 : undefined}\n                data-slot=\"repeater-row\"\n                className=\"border-t align-top\"\n              >\n                {cells.map((cell, cellIndex) => (\n                  <td\n                    key={cell?.key ?? `empty-${cellIndex}`}\n                    className={cn(\n                      compact ? 'px-1.5 py-1' : 'px-3 py-2',\n                      '[&_[data-slot=label]]:sr-only',\n                      tableColumnAlignmentClass(columns[cellIndex] ?? {}),\n                    )}\n                  >\n                    {cell && <RenderComponent component={cell} />}\n                  </td>\n                ))}\n                {hasControls && (\n                  <td className={compact ? 'px-1 py-1' : 'px-2 py-2'}>\n                    <div className=\"flex items-center justify-end\">\n                      <ItemHeaderActions\n                        context={context}\n                        itemKey={String(index)}\n                        index={index}\n                        count={count}\n                        resolve={(name) => resolveAction(name, index)}\n                        extraActions={extraActionsFor?.(index)}\n                        buttons={reorderable}\n                        canClone={cloneable}\n                        canDelete={deletable}\n                        collapsible={false}\n                        collapsed={false}\n                        onMove={onMove}\n                        onClone={() => onClone(index)}\n                        onDelete={() => onRemove(index)}\n                        onToggle={() => undefined}\n                      />\n                    </div>\n                  </td>\n                )}\n              </tr>\n            )\n          })}\n          <VirtualSpacerRow height={range.after} colSpan={cellCount} />\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/repeater.d.ts

@@ -0,0 +1,15 @@
+import { RepeaterSchema, SchemaComponent } from "@alfakit/core";
+//#region src/components/fields/repeater.d.ts
+/**
+ * Items use the per-index schema from the server when available (so closures see item
+ * state) and fall back to the template for freshly added items.
+ */
+/**
+ * `deferLoading()`: a skeleton until the field scrolls into view, then the field with its
+ * items (loaded from the server).
+ */
+export declare function RepeaterField({ component }: {
+  component: RepeaterSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=repeater.d.ts.map

package/dist/components/fields/repeater.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"repeater.d.ts","names":[],"sources":["../../../src/components/fields/repeater.tsx"],"mappings":";;;;;;;;;;wBAiDgB,gBAAgB;EAAe,WAAW;oBAAgB,IAAA"}