@gntik-ai/ui 0.7.0 → 0.10.0

package/dist/forms.d.ts

@@ -1,6 +1,7 @@
 
-import { FormHTMLAttributes, ReactNode } from "react";
-import { Control, ControllerFieldState, ControllerRenderProps, FieldErrors, FieldPath, FieldValues, RegisterOptions, Resolver, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
+import { t as ComponentDoc } from "./doc-C6r06QOg.js";
+import { FormHTMLAttributes, ReactNode, RefCallback } from "react";
+import { Control, ControllerFieldState, ControllerRenderProps, FieldArray as FieldArray$1, FieldArrayPath, FieldErrors, FieldPath, FieldPathValue, FieldValues, Path, RegisterOptions, Resolver, SubmitErrorHandler, SubmitHandler, UseFieldArrayProps, UseFormReturn } from "react-hook-form";
 //#region src/forms/useFieldProps.d.ts
 interface UseFieldPropsOptions<TValues extends FieldValues, TName extends FieldPath<TValues>> {
   /** The form's `control`. Defaults to the nearest `<FormProvider>` / `<Form>`. */
@@ -37,34 +38,83 @@ interface UseFieldPropsResult<TValues extends FieldValues, TName extends FieldPa
  */
 export declare function useFieldProps<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>>(name: TName, { control, rules, disabled }?: UseFieldPropsOptions<TValues, TName>): UseFieldPropsResult<TValues, TName>;
 //#endregion
+//#region src/forms/bindings.d.ts
+/** The public control props returned by useFieldProps. */
+interface BindingControlProps<TValue> {
+  name: string;
+  value: TValue;
+  onChange: ControllerRenderProps['onChange'];
+  onBlur: () => void;
+  ref: ControllerRenderProps['ref'];
+  disabled?: boolean;
+  readOnly?: boolean;
+  'aria-invalid'?: true;
+}
+interface ValueBindingProps<TValue> {
+  name: string;
+  value: NonNullable<TValue> | null;
+  onValueChange: (value: TValue | null) => void;
+  ref: RefCallback<HTMLElement>;
+  disabled?: boolean;
+  readOnly?: boolean;
+  'aria-invalid'?: true;
+}
+interface CheckedBindingProps extends Omit<ValueBindingProps<boolean>, 'value' | 'onValueChange'> {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}
+/** Maps value/onChange controls to the kit's value/onValueChange API. Changes also touch the field. */
+export declare function toValueProps<TValue>({ value, onChange, onBlur, ...props }: BindingControlProps<TValue>): ValueBindingProps<TValue>;
+/** Maps value/onChange controls to the kit's checked/onCheckedChange API. */
+export declare function toCheckedProps<TValue>({ value, onChange, onBlur, ...props }: BindingControlProps<TValue>): CheckedBindingProps;
+//#endregion
 //#region src/forms/FormField.d.ts
-interface FormFieldProps<TValues extends FieldValues, TName extends FieldPath<TValues>> extends UseFieldPropsOptions<TValues, TName> {
+interface EnhancedFieldProps {
+  disabled?: boolean;
+  readOnly?: boolean;
+}
+type EnhanceFieldProps = (field: {
+  name: string;
+}) => EnhancedFieldProps | undefined;
+type FormFieldWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type FormFieldBinding = 'input' | 'value' | 'checked';
+type BoundProps<TValues extends FieldValues, TName extends FieldPath<TValues>, TBind extends FormFieldBinding> = TBind extends 'value' ? ValueBindingProps<FieldPathValue<TValues, TName>> : TBind extends 'checked' ? CheckedBindingProps : UseFieldPropsResult<TValues, TName>['controlProps'];
+type FormFieldProps<TValues extends FieldValues, TName extends FieldPath<TValues>, TBind extends FormFieldBinding = 'input'> = UseFieldPropsOptions<TValues, TName> & {
   name: TName;
   label?: ReactNode;
-  /** Shows the required marker on the label (validation itself comes from `rules` or the schema). */
+  /** Shows the required marker (validation comes from rules or the schema). */
   required?: boolean;
   description?: ReactNode;
   className?: string;
-  /** Renders the control: `{(field) => <Input {...field} />}`. Gets the field's state as the second argument. */
-  children: (control: UseFieldPropsResult<TValues, TName>['controlProps'], state: UseFieldPropsResult<TValues, TName>) => ReactNode;
-}
+  /** Optional maximum width; unset fills the available width. */
+  width?: FormFieldWidth;
+  children: (control: BoundProps<TValues, TName, TBind>, state: UseFieldPropsResult<TValues, TName>) => ReactNode;
+} & (TBind extends 'input' ? {
+  bind?: 'input';
+} : {
+  bind: TBind;
+});
 /**
  * A kit `Field` bound to a react-hook-form field: label, control, description and the field's
  * error message, with `aria-invalid` and `aria-describedby` wired by Base UI's Field.
  */
-export declare function FormField<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>>({ name, label, required, description, className, children, ...options }: FormFieldProps<TValues, TName>): import("react").JSX.Element;
+export declare function FormField<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>>(props: FormFieldProps<TValues, TName, 'value'>): ReactNode;
+export declare function FormField<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>>(props: FormFieldProps<TValues, TName, 'checked'>): ReactNode;
+export declare function FormField<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>>(props: FormFieldProps<TValues, TName>): ReactNode;
 interface FormProps<TValues extends FieldValues, TTransformed = TValues> extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'onInvalid'> {
   /** The object returned by `useForm()`. */
   form: UseFormReturn<TValues, unknown, TTransformed>;
   onSubmit: SubmitHandler<TTransformed>;
   onInvalid?: SubmitErrorHandler<TValues>;
+  /** Adds form-wide disabled/readOnly props to fields by name. Undefined leaves props unchanged. */
+  enhanceFieldProps?: EnhanceFieldProps;
   children?: ReactNode;
 }
 /**
  * `<form noValidate>` + `FormProvider`: submits through `handleSubmit`, so a failed submit shows
  * every message and focuses the first invalid field (react-hook-form's `shouldFocusError`).
  */
-export declare function Form<TValues extends FieldValues, TTransformed = TValues>({ form, onSubmit, onInvalid, children, ...props }: FormProps<TValues, TTransformed>): import("react").JSX.Element;
+export declare function Form<TValues extends FieldValues, TTransformed = TValues>({ form, onSubmit, onInvalid, enhanceFieldProps, children, ...props }: FormProps<TValues, TTransformed>): import("react").JSX.Element;
 //#endregion
 //#region src/forms/schemaResolver.d.ts
 /** One validation issue, as zod (v3 and v4) and other Standard-Schema-style libraries report it. */
@@ -98,5 +148,94 @@ export declare function issuesToErrors<TValues extends FieldValues>(issues: read
  */
 export declare function schemaResolver<TValues extends FieldValues, TOutput = TValues>(schema: ParseableSchema<TOutput>): Resolver<TValues, unknown, TOutput>;
 //#endregion
-export type { FormFieldProps, FormFieldStateProps, FormProps, ParseableSchema, SchemaIssue, UseFieldPropsOptions, UseFieldPropsResult };
+//#region src/forms/FieldArray.d.ts
+interface FieldArrayRow<TValues extends FieldValues, TName extends FieldArrayPath<TValues>> {
+  index: number;
+  remove(): void;
+  move(delta: number): void;
+  duplicate(): void;
+  name<TField extends Path<FieldArray$1<TValues, TName>>>(field: TField): `${TName}.${number}.${TField}` & FieldPath<TValues>;
+}
+interface FieldArrayProps<TValues extends FieldValues, TName extends FieldArrayPath<TValues> = FieldArrayPath<TValues>> {
+  name: TName;
+  control?: Control<TValues>;
+  defaultItem: FieldArray$1<TValues, TName> | (() => FieldArray$1<TValues, TName>);
+  label?: ReactNode;
+  description?: ReactNode;
+  rules?: UseFieldArrayProps<TValues, TName>['rules'];
+  max?: number;
+  min?: number;
+  emptyState?: ReactNode;
+  reorderable?: boolean;
+  duplicable?: boolean;
+  layout?: 'inline' | 'card';
+  itemLabel?: (n: number) => string;
+  addLabel?: ReactNode;
+  className?: string;
+  children: (row: FieldArrayRow<TValues, TName>) => ReactNode;
+}
+/** Repeatable object fields in the optional react-hook-form adapter. */
+export declare function FieldArray<TValues extends FieldValues, TName extends FieldArrayPath<TValues> = FieldArrayPath<TValues>>(props: FieldArrayProps<TValues, TName>): import("react").JSX.Element;
+//#endregion
+//#region src/forms/field-array.variants.d.ts
+export declare const fieldArrayVariants: import("tailwind-variants").TVReturnType<{
+  layout: {
+    inline: {
+      row: string;
+    };
+    card: {
+      row: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  row: string;
+  fields: string;
+  actions: string;
+  footer: string;
+  hint: string;
+  error: string;
+}, undefined, {
+  layout: {
+    inline: {
+      row: string;
+    };
+    card: {
+      row: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  row: string;
+  fields: string;
+  actions: string;
+  footer: string;
+  hint: string;
+  error: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  layout: {
+    inline: {
+      row: string;
+    };
+    card: {
+      row: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  row: string;
+  fields: string;
+  actions: string;
+  footer: string;
+  hint: string;
+  error: string;
+}>>;
+//#endregion
+//#region src/forms/FieldArray.doc.d.ts
+declare const doc: ComponentDoc;
+//#endregion
+export { type BindingControlProps, type CheckedBindingProps, type EnhanceFieldProps, type EnhancedFieldProps, type FieldArrayProps, type FieldArrayRow, type FormFieldBinding, type FormFieldProps, type FormFieldStateProps, type FormFieldWidth, type FormProps, type ParseableSchema, type SchemaIssue, type UseFieldPropsOptions, type UseFieldPropsResult, type ValueBindingProps, doc as fieldArrayDoc };
 //# sourceMappingURL=forms.d.ts.map

package/dist/forms.js

@@ -1,7 +1,9 @@
 'use client';
-import { a as FieldLabel, n as FieldDescription, r as FieldError, t as Field } from "./Field-neBukiNh.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FormProvider, useController, useFormContext } from "react-hook-form";
+import { F as cn, P as tv, a as FieldLabel, c as FieldsetLegend, d as useAnnounce, f as useHasLiveAnnouncer, h as IconButton, m as Button, n as FieldDescription, o as Fieldset, r as FieldError, s as FieldsetDescription, t as Field, u as LiveAnnouncer, w as useI18n } from "./Field-knzMlyzO.js";
+import { createContext, useContext, useId, useLayoutEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, Copy, Plus, Trash2 } from "lucide-react";
+import { FormProvider, get, useController, useFieldArray, useFormContext, useFormState, useWatch } from "react-hook-form";
 //#region src/forms/useFieldProps.ts
 /**
 * Wires one react-hook-form field (through `useController`) into the kit's Field parts.
@@ -39,23 +41,74 @@ function errorMessage(error) {
 	return typeof root?.message === "string" ? root.message : void 0;
 }
 //#endregion
+//#region src/forms/bindings.ts
+/** Maps value/onChange controls to the kit's value/onValueChange API. Changes also touch the field. */
+function toValueProps({ value, onChange, onBlur, ...props }) {
+	return {
+		...props,
+		ref: focusTargetRef(props.ref),
+		value: value ?? null,
+		onValueChange: (next) => {
+			onChange(next);
+			onBlur();
+		}
+	};
+}
+/** Maps value/onChange controls to the kit's checked/onCheckedChange API. */
+function toCheckedProps({ value, onChange, onBlur, ...props }) {
+	return {
+		...props,
+		ref: focusTargetRef(props.ref),
+		checked: !!value,
+		onCheckedChange: (next) => {
+			onChange(next);
+			onBlur();
+		}
+	};
+}
+/** Resolve at focus time: composite controls can mount or change their tabbable child later. */
+function resolveFocusTarget(element) {
+	const enabled = ":not(:disabled):not([aria-disabled=\"true\"])";
+	if (element.matches(`input:not([type="hidden"])${enabled}, button${enabled}, textarea${enabled}, select${enabled}, a[href], [tabindex]${enabled}`)) return element;
+	return element.querySelector(`[tabindex="0"]${enabled}`) ?? element.querySelector(`input:not([type="hidden"])${enabled}, button${enabled}`);
+}
+function focusTargetRef(ref) {
+	return (element) => ref(element ? { focus: () => resolveFocusTarget(element)?.focus() } : null);
+}
+//#endregion
 //#region src/forms/FormField.tsx
-/**
-* A kit `Field` bound to a react-hook-form field: label, control, description and the field's
-* error message, with `aria-invalid` and `aria-describedby` wired by Base UI's Field.
-*/
-function FormField({ name, label, required, description, className, children, ...options }) {
-	const state = useFieldProps(name, options);
+const FieldEnhancerContext = createContext(void 0);
+const widths = {
+	xs: "max-w-[6.5rem]",
+	sm: "max-w-[13.5rem]",
+	md: "max-w-[20.5rem]",
+	lg: "max-w-[27.5rem]",
+	xl: "max-w-[34.5rem]"
+};
+function FormField(props) {
+	const { name, label, required, description, className, width, control, rules, disabled } = props;
+	const enhanced = useContext(FieldEnhancerContext)?.({ name });
+	const fieldDisabled = enhanced?.disabled ?? disabled;
+	const state = useFieldProps(name, {
+		control,
+		rules,
+		disabled: fieldDisabled
+	});
+	const controlProps = enhanced ? {
+		...state.controlProps,
+		...enhanced
+	} : state.controlProps;
+	const child = props.bind === "value" ? props.children(toValueProps(controlProps), state) : props.bind === "checked" ? props.children(toCheckedProps(controlProps), state) : props.children(controlProps, state);
 	return /* @__PURE__ */ jsxs(Field, {
 		...state.fieldProps,
-		disabled: options.disabled,
-		className,
+		disabled: fieldDisabled,
+		className: width ? cn("w-full", widths[width], className) : className,
 		children: [
 			label && /* @__PURE__ */ jsx(FieldLabel, {
 				required,
 				children: label
 			}),
-			children(state.controlProps, state),
+			child,
 			description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
 			/* @__PURE__ */ jsx(FieldError, {
 				match: !!state.error,
@@ -68,14 +121,17 @@ function FormField({ name, label, required, description, className, children, ..
 * `<form noValidate>` + `FormProvider`: submits through `handleSubmit`, so a failed submit shows
 * every message and focuses the first invalid field (react-hook-form's `shouldFocusError`).
 */
-function Form({ form, onSubmit, onInvalid, children, ...props }) {
+function Form({ form, onSubmit, onInvalid, enhanceFieldProps, children, ...props }) {
 	return /* @__PURE__ */ jsx(FormProvider, {
 		...form,
-		children: /* @__PURE__ */ jsx("form", {
-			noValidate: true,
-			...props,
-			onSubmit: form.handleSubmit(onSubmit, onInvalid),
-			children
+		children: /* @__PURE__ */ jsx(FieldEnhancerContext.Provider, {
+			value: enhanceFieldProps,
+			children: /* @__PURE__ */ jsx("form", {
+				noValidate: true,
+				...props,
+				onSubmit: form.handleSubmit(onSubmit, onInvalid),
+				children
+			})
 		})
 	});
 }
@@ -125,6 +181,253 @@ function schemaResolver(schema) {
 	};
 }
 //#endregion
-export { Form, FormField, issuesToErrors, schemaResolver, useFieldProps };
+//#region src/forms/field-array.variants.ts
+const fieldArrayVariants = tv({
+	slots: {
+		root: "min-w-0",
+		list: "flex flex-col gap-3",
+		row: "flex min-w-0 gap-3",
+		fields: "flex min-w-0 flex-1 flex-col gap-3",
+		actions: "flex shrink-0 flex-wrap items-start gap-1",
+		footer: "flex flex-wrap items-center gap-3",
+		hint: "text-sm text-muted-foreground",
+		error: "text-sm text-destructive-text"
+	},
+	variants: { layout: {
+		inline: { row: "flex-col sm:flex-row" },
+		card: { row: "flex-col rounded-lg border border-border bg-card p-4" }
+	} },
+	defaultVariants: { layout: "inline" }
+});
+//#endregion
+//#region src/forms/FieldArray.tsx
+/** Repeatable object fields in the optional react-hook-form adapter. */
+function FieldArray(props) {
+	return useHasLiveAnnouncer() ? /* @__PURE__ */ jsx(FieldArrayContent, { ...props }) : /* @__PURE__ */ jsx(LiveAnnouncer, { children: /* @__PURE__ */ jsx(FieldArrayContent, { ...props }) });
+}
+const focusable = "input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])";
+function RowFields({ children, row }) {
+	return children(row);
+}
+function FieldArrayContent({ name, control: controlProp, label, description, rules, children, defaultItem, max, min = 0, emptyState, reorderable = false, duplicable = false, layout = "inline", itemLabel, addLabel, className }) {
+	const context = useFormContext();
+	const control = controlProp ?? context?.control;
+	const minimum = typeof rules?.minLength === "object" ? rules.minLength.value : rules?.minLength;
+	const arrayRules = minimum && minimum > 0 ? {
+		...rules,
+		required: rules?.required ?? {
+			value: true,
+			message: typeof rules?.minLength === "object" ? rules.minLength.message : ""
+		}
+	} : rules;
+	const { fields, append, insert, remove: removeItem, move: moveItem } = useFieldArray({
+		name,
+		control,
+		rules: arrayRules
+	});
+	const path = name;
+	const values = useWatch({
+		control,
+		name: path
+	});
+	const { errors } = useFormState({
+		control,
+		name: path
+	});
+	const arrayError = get(errors, name);
+	const message = arrayError?.root?.message ?? arrayError?.message;
+	const error = typeof message === "string" ? message : void 0;
+	const uid = useId();
+	const descriptionId = `${uid}-description`;
+	const errorId = `${uid}-error`;
+	const { t } = useI18n();
+	const labelFor = (n) => itemLabel?.(n) ?? t("fieldArray.item", { n });
+	const s = fieldArrayVariants({ layout });
+	const announce = useAnnounce();
+	const rows = useRef(/* @__PURE__ */ new Map());
+	const addButton = useRef(null);
+	const pendingFocus = useRef(null);
+	const full = max !== void 0 && fields.length >= max;
+	const announceInsertion = (message) => {
+		const limit = max !== void 0 && fields.length + 1 >= max ? t("fieldArray.limit", { max }) : "";
+		announce([message, limit].filter(Boolean).join(" "));
+	};
+	useLayoutEffect(() => {
+		const pending = pendingFocus.current;
+		if (!pending) return;
+		pendingFocus.current = null;
+		if ("add" in pending) {
+			addButton.current?.focus();
+			return;
+		}
+		const id = "previousIds" in pending ? fields.find((field) => !pending.previousIds.has(field.id))?.id : pending.id;
+		const element = "element" in pending ? pending.element : void 0;
+		(element?.isConnected ? element : id ? rows.current.get(id)?.querySelector(focusable) : null)?.focus();
+	});
+	const add = () => {
+		if (full) {
+			announce(t("fieldArray.limit", { max: max ?? 0 }));
+			return;
+		}
+		pendingFocus.current = { previousIds: new Set(fields.map((field) => field.id)) };
+		append(structuredClone(typeof defaultItem === "function" ? defaultItem() : defaultItem), { shouldFocus: false });
+		announceInsertion(t("fieldArray.added", { item: labelFor(fields.length + 1) }));
+	};
+	const remove = (index) => {
+		if (fields.length <= min) return;
+		const neighbour = fields[index + 1] ?? fields[index - 1];
+		pendingFocus.current = neighbour ? { id: neighbour.id } : { add: true };
+		removeItem(index);
+		announce(t("fieldArray.removed", { item: labelFor(index + 1) }));
+	};
+	const move = (index, delta) => {
+		const destination = index + delta;
+		const field = fields[index];
+		if (!reorderable || !field || !Number.isInteger(delta) || destination < 0 || destination >= fields.length || delta === 0) return;
+		const active = document.activeElement;
+		pendingFocus.current = {
+			id: field.id,
+			element: active instanceof HTMLElement && rows.current.get(field.id)?.contains(active) ? active : void 0
+		};
+		moveItem(index, destination);
+		announce(t("fieldArray.moved", {
+			n: destination + 1,
+			total: fields.length
+		}));
+	};
+	const duplicate = (index) => {
+		if (!duplicable || full) return;
+		const value = values?.[index];
+		if (!value) return;
+		pendingFocus.current = { previousIds: new Set(fields.map((field) => field.id)) };
+		insert(index + 1, structuredClone(value), { shouldFocus: false });
+		announceInsertion(t("fieldArray.duplicated", { item: labelFor(index + 1) }));
+	};
+	return /* @__PURE__ */ jsxs(Fieldset, {
+		"data-field-array": "",
+		className: s.root({ className }),
+		"aria-describedby": [description ? descriptionId : "", error ? errorId : ""].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": !!error || void 0,
+		children: [
+			label && /* @__PURE__ */ jsx(FieldsetLegend, { children: label }),
+			description && /* @__PURE__ */ jsx(FieldsetDescription, {
+				id: descriptionId,
+				children: description
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: s.list(),
+				children: fields.map((field, index) => /* @__PURE__ */ jsxs("div", {
+					className: s.row(),
+					ref: (element) => {
+						if (element) rows.current.set(field.id, element);
+						else rows.current.delete(field.id);
+					},
+					role: "group",
+					"aria-label": labelFor(index + 1),
+					onKeyDown: (event) => {
+						if (event.target instanceof Element && event.target.closest("[data-field-array]") !== event.currentTarget.closest("[data-field-array]")) return;
+						if (reorderable && event.altKey && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+							event.preventDefault();
+							event.stopPropagation();
+							move(index, event.key === "ArrowUp" ? -1 : 1);
+						}
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						className: s.fields(),
+						children: /* @__PURE__ */ jsx(RowFields, {
+							row: {
+								index,
+								remove: () => remove(index),
+								move: (delta) => move(index, delta),
+								duplicate: () => duplicate(index),
+								name: (part) => `${name}.${index}.${part}`
+							},
+							children
+						})
+					}), /* @__PURE__ */ jsxs("div", {
+						className: s.actions(),
+						children: [
+							reorderable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
+								icon: ArrowUp,
+								label: t("fieldArray.moveUp", { item: labelFor(index + 1) }),
+								disabled: index === 0,
+								onClick: () => move(index, -1)
+							}), /* @__PURE__ */ jsx(IconButton, {
+								icon: ArrowDown,
+								label: t("fieldArray.moveDown", { item: labelFor(index + 1) }),
+								disabled: index === fields.length - 1,
+								onClick: () => move(index, 1)
+							})] }),
+							duplicable && /* @__PURE__ */ jsx(IconButton, {
+								icon: Copy,
+								label: t("fieldArray.duplicate", { item: labelFor(index + 1) }),
+								disabled: full,
+								onClick: () => duplicate(index)
+							}),
+							/* @__PURE__ */ jsx(IconButton, {
+								icon: Trash2,
+								label: t("fieldArray.remove", { item: labelFor(index + 1) }),
+								disabled: fields.length <= min,
+								onClick: () => remove(index)
+							})
+						]
+					})]
+				}, field.id))
+			}),
+			!fields.length && (emptyState ?? /* @__PURE__ */ jsx("p", {
+				className: s.hint(),
+				children: t("fieldArray.empty")
+			})),
+			/* @__PURE__ */ jsxs("div", {
+				className: s.footer(),
+				children: [/* @__PURE__ */ jsx(Button, {
+					ref: addButton,
+					icon: Plus,
+					variant: "secondary",
+					disabled: full,
+					onClick: add,
+					children: addLabel ?? t("fieldArray.add")
+				}), full && /* @__PURE__ */ jsx("p", {
+					className: s.hint(),
+					children: t("fieldArray.limit", { max: max ?? 0 })
+				})]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				className: s.error(),
+				children: error
+			})
+		]
+	});
+}
+//#endregion
+//#region src/forms/FieldArray.doc.ts
+const doc = {
+	name: "FieldArray",
+	group: "Forms",
+	status: "beta",
+	description: "Repeatable arbitrary fields bound to react-hook-form arrays. Import from @gntik-ai/ui/forms only; use within Form or pass control explicitly. Rows expose index, name(field), remove(), duplicate() and move(delta). Add accepts a default object or factory. Optional reorder and duplicate actions preserve row identity, and min/max gate removals and additions. Inline and card layouts support nested arrays, list-level validation, focus restoration and localized announcements. Use ListInput for standalone key/value pairs without a form library; use FieldArray for arbitrary object fields managed by react-hook-form.",
+	primitive: "@base-ui/react/fieldset, @base-ui/react/field, @base-ui/react/button",
+	pattern: "fieldset with named row groups",
+	keyboard: [
+		["Tab / Shift+Tab", "Moves through row fields, row actions and Add in document order"],
+		["Enter / Space on Add", "Appends the default item and focuses its first control"],
+		["Enter / Space on Remove", "Removes the row and focuses the next row, previous row or Add"],
+		["Alt+ArrowUp / Alt+ArrowDown", "With reorderable, moves the row and keeps focus on the same control; stops at either end"],
+		["Enter / Space on Move up / Move down", "Moves the row by one position and preserves focus"],
+		["Enter / Space on Duplicate", "With duplicable, inserts an independent deep copy below and focuses it"]
+	],
+	tokens: [
+		"border",
+		"card",
+		"foreground",
+		"muted-foreground",
+		"destructive-text",
+		"secondary",
+		"focus-ring"
+	]
+};
+//#endregion
+export { FieldArray, Form, FormField, doc as fieldArrayDoc, fieldArrayVariants, issuesToErrors, schemaResolver, toCheckedProps, toValueProps, useFieldProps };
 
 //# sourceMappingURL=forms.js.map