@gntik-ai/ui 0.0.0-stage → 0.7.0

package/dist/Field-neBukiNh.js

@@ -0,0 +1,149 @@
+'use client';
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+import { createTV } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleAlert } from "lucide-react";
+import { Field } from "@base-ui/react/field";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/utils/density-merge.ts
+/**
+* Teaches tailwind-merge the density utilities from @gntik-ai/tokens (density.css), so
+* `cn('h-control', 'h-10')` and `px-control … px-0` resolve like any other Tailwind conflict.
+* Shared by `cn()` and the `tv()` instance.
+*/
+const densityMergeConfig = { extend: { classGroups: {
+	h: [{ h: [
+		"control-sm",
+		"control",
+		"control-lg",
+		"item",
+		"tab",
+		"chip",
+		"token",
+		"row"
+	] }],
+	w: [{ w: [
+		"control-sm",
+		"control",
+		"control-lg"
+	] }],
+	size: [{ size: [
+		"control-sm",
+		"control",
+		"control-lg"
+	] }],
+	px: [{ px: [
+		"control-sm",
+		"control",
+		"control-lg",
+		"field"
+	] }],
+	ps: [{ ps: ["field"] }],
+	py: [{ py: ["cell", "bar"] }],
+	gap: [{ gap: ["tight"] }]
+} } };
+//#endregion
+//#region src/utils/cn.ts
+const twMerge = extendTailwindMerge(densityMergeConfig);
+/** Joins class names and resolves Tailwind conflicts (last one wins), density utilities included. */
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+//#region src/utils/tv.ts
+/** `tv()` with tailwind-merge aware of the density utilities (h-control, px-control…). */
+const tv = createTV({ twMergeConfig: densityMergeConfig });
+//#endregion
+//#region src/components/Field/field.variants.ts
+const fieldVariants = tv({ slots: {
+	root: "flex min-w-0 flex-col gap-2 data-disabled:opacity-70",
+	label: "inline-flex items-center gap-0.5 text-[13px] font-medium text-foreground data-disabled:cursor-not-allowed",
+	required: "text-destructive-text",
+	description: "text-[12px] leading-5 text-muted-foreground text-pretty",
+	error: "flex items-start gap-1.5 text-[12px] leading-5 text-destructive-text",
+	item: "flex",
+	fieldset: "m-0 flex min-w-0 flex-col gap-3 border-0 p-0 data-disabled:opacity-70",
+	legend: "p-0 text-[13px] font-semibold text-foreground",
+	legendDescription: "-mt-2 text-[13px] leading-6 text-muted-foreground text-pretty"
+} });
+//#endregion
+//#region src/components/Field/Field.tsx
+const s = fieldVariants();
+/**
+* Groups a label, a control, a description and an error. Base UI wires the ids: the label
+* targets the control, and the description and error are linked with aria-describedby.
+* Pass `invalid` to drive the error from outside (e.g. a form library).
+*/
+function Field$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Root, {
+		className: cn(s.root(), className),
+		...props
+	});
+}
+/** Visible label; clicking it focuses the field's control. */
+function FieldLabel({ className, required, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Field.Label, {
+		className: cn(s.label(), className),
+		...props,
+		children: [children, required && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: s.required(),
+			children: "*"
+		})]
+	});
+}
+/** Helper text under the control, announced as part of its description. */
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Description, {
+		className: cn(s.description(), className),
+		...props
+	});
+}
+/**
+* Validation message. Rendered only while the field is invalid (or when `match` says so)
+* and linked to the control through aria-describedby.
+*/
+function FieldError({ className, hideIcon, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Field.Error, {
+		className: cn(s.error(), className),
+		...props,
+		children: [!hideIcon && /* @__PURE__ */ jsx(CircleAlert, {
+			size: 13,
+			"aria-hidden": true,
+			className: "mt-[3px] shrink-0"
+		}), /* @__PURE__ */ jsx("span", { children })]
+	});
+}
+/** Wraps one checkbox or radio inside a group that lives in a Field. */
+function FieldItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Item, {
+		className: cn(s.item(), className),
+		...props
+	});
+}
+/** Groups related fields (or a checkbox/radio group) under a shared legend. */
+function Fieldset$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset.Root, {
+		className: cn(s.fieldset(), className),
+		...props
+	});
+}
+/** The fieldset's accessible name. */
+function FieldsetLegend({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset.Legend, {
+		className: cn(s.legend(), className),
+		...props
+	});
+}
+/** Supporting text under a legend. */
+function FieldsetDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn(s.legendDescription(), className),
+		...props
+	});
+}
+//#endregion
+export { FieldLabel as a, FieldsetLegend as c, cn as d, FieldItem as i, fieldVariants as l, FieldDescription as n, Fieldset$1 as o, FieldError as r, FieldsetDescription as s, Field$1 as t, tv as u };
+
+//# sourceMappingURL=Field-neBukiNh.js.map

package/dist/Field-neBukiNh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field-neBukiNh.js","names":["Field","BaseField","Fieldset","BaseFieldset"],"sources":["../src/utils/density-merge.ts","../src/utils/cn.ts","../src/utils/tv.ts","../src/components/Field/field.variants.ts","../src/components/Field/Field.tsx"],"sourcesContent":["/**\n * Teaches tailwind-merge the density utilities from @gntik-ai/tokens (density.css), so\n * `cn('h-control', 'h-10')` and `px-control … px-0` resolve like any other Tailwind conflict.\n * Shared by `cn()` and the `tv()` instance.\n */\nexport const densityMergeConfig = {\n  extend: {\n    classGroups: {\n      h: [{ h: ['control-sm', 'control', 'control-lg', 'item', 'tab', 'chip', 'token', 'row'] }],\n      w: [{ w: ['control-sm', 'control', 'control-lg'] }],\n      size: [{ size: ['control-sm', 'control', 'control-lg'] }],\n      px: [{ px: ['control-sm', 'control', 'control-lg', 'field'] }],\n      ps: [{ ps: ['field'] }],\n      py: [{ py: ['cell', 'bar'] }],\n      gap: [{ gap: ['tight'] }],\n    },\n  },\n};\n","import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\nimport { densityMergeConfig } from './density-merge';\n\nconst twMerge = extendTailwindMerge(densityMergeConfig);\n\n/** Joins class names and resolves Tailwind conflicts (last one wins), density utilities included. */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { createTV } from 'tailwind-variants';\nimport { densityMergeConfig } from './density-merge';\n\nexport { type VariantProps } from 'tailwind-variants';\n\n/** `tv()` with tailwind-merge aware of the density utilities (h-control, px-control…). */\nexport const tv = createTV({ twMergeConfig: densityMergeConfig });\n","import { tv, type VariantProps } from '../../utils/tv';\n\nexport const fieldVariants = tv({\n  slots: {\n    root: 'flex min-w-0 flex-col gap-2 data-disabled:opacity-70',\n    label: 'inline-flex items-center gap-0.5 text-[13px] font-medium text-foreground data-disabled:cursor-not-allowed',\n    required: 'text-destructive-text',\n    description: 'text-[12px] leading-5 text-muted-foreground text-pretty',\n    error: 'flex items-start gap-1.5 text-[12px] leading-5 text-destructive-text',\n    item: 'flex',\n    fieldset: 'm-0 flex min-w-0 flex-col gap-3 border-0 p-0 data-disabled:opacity-70',\n    legend: 'p-0 text-[13px] font-semibold text-foreground',\n    legendDescription: '-mt-2 text-[13px] leading-6 text-muted-foreground text-pretty',\n  },\n});\n\nexport type FieldVariantProps = VariantProps<typeof fieldVariants>;\n","import { Field as BaseField } from '@base-ui/react/field';\nimport { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport { CircleAlert } from 'lucide-react';\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport { fieldVariants } from './field.variants';\n\nconst s = fieldVariants();\n\nexport interface FieldProps extends Omit<BaseField.Root.Props, 'className'> {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Groups a label, a control, a description and an error. Base UI wires the ids: the label\n * targets the control, and the description and error are linked with aria-describedby.\n * Pass `invalid` to drive the error from outside (e.g. a form library).\n */\nexport function Field({ className, ...props }: FieldProps) {\n  return <BaseField.Root className={cn(s.root(), className)} {...props} />;\n}\n\nexport interface FieldLabelProps extends Omit<BaseField.Label.Props, 'className'> {\n  className?: string;\n  ref?: Ref<HTMLLabelElement>;\n  /** Shows a required marker after the label text (also set `required` on the control). */\n  required?: boolean;\n}\n\n/** Visible label; clicking it focuses the field's control. */\nexport function FieldLabel({ className, required, children, ...props }: FieldLabelProps) {\n  return (\n    <BaseField.Label className={cn(s.label(), className)} {...props}>\n      {children}\n      {required && (\n        <span aria-hidden className={s.required()}>\n          *\n        </span>\n      )}\n    </BaseField.Label>\n  );\n}\n\nexport interface FieldDescriptionProps extends Omit<BaseField.Description.Props, 'className'> {\n  className?: string;\n  ref?: Ref<HTMLParagraphElement>;\n}\n\n/** Helper text under the control, announced as part of its description. */\nexport function FieldDescription({ className, ...props }: FieldDescriptionProps) {\n  return <BaseField.Description className={cn(s.description(), className)} {...props} />;\n}\n\nexport interface FieldErrorProps extends Omit<BaseField.Error.Props, 'className'> {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n  /** Hide the leading alert icon. */\n  hideIcon?: boolean;\n}\n\n/**\n * Validation message. Rendered only while the field is invalid (or when `match` says so)\n * and linked to the control through aria-describedby.\n */\nexport function FieldError({ className, hideIcon, children, ...props }: FieldErrorProps) {\n  return (\n    <BaseField.Error className={cn(s.error(), className)} {...props}>\n      {!hideIcon && <CircleAlert size={13} aria-hidden className=\"mt-[3px] shrink-0\" />}\n      <span>{children}</span>\n    </BaseField.Error>\n  );\n}\n\nexport interface FieldItemProps extends Omit<BaseField.Item.Props, 'className'> {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** Wraps one checkbox or radio inside a group that lives in a Field. */\nexport function FieldItem({ className, ...props }: FieldItemProps) {\n  return <BaseField.Item className={cn(s.item(), className)} {...props} />;\n}\n\nexport interface FieldsetProps extends Omit<BaseFieldset.Root.Props, 'className'> {\n  className?: string;\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\n/** Groups related fields (or a checkbox/radio group) under a shared legend. */\nexport function Fieldset({ className, ...props }: FieldsetProps) {\n  return <BaseFieldset.Root className={cn(s.fieldset(), className)} {...props} />;\n}\n\nexport interface FieldsetLegendProps extends Omit<BaseFieldset.Legend.Props, 'className'> {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** The fieldset's accessible name. */\nexport function FieldsetLegend({ className, ...props }: FieldsetLegendProps) {\n  return <BaseFieldset.Legend className={cn(s.legend(), className)} {...props} />;\n}\n\n/** Supporting text under a legend. */\nexport function FieldsetDescription({\n  className,\n  ...props\n}: HTMLAttributes<HTMLParagraphElement> & { children?: ReactNode }) {\n  return <p className={cn(s.legendDescription(), className)} {...props} />;\n}\n"],"mappings":"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"}

package/dist/forms.d.ts

@@ -0,0 +1,102 @@
+
+import { FormHTMLAttributes, ReactNode } from "react";
+import { Control, ControllerFieldState, ControllerRenderProps, FieldErrors, FieldPath, FieldValues, RegisterOptions, Resolver, SubmitErrorHandler, SubmitHandler, 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>`. */
+  control?: Control<TValues>;
+  /** Field-level rules (`required`, `minLength`, `validate`…). Prefer a schema resolver for whole forms. */
+  rules?: Omit<RegisterOptions<TValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
+  /** Disables the control (and skips its validation). */
+  disabled?: boolean;
+}
+/** Props for the kit's `<Field>`: drive its invalid / touched / dirty state from react-hook-form. */
+interface FormFieldStateProps {
+  name: string;
+  invalid: boolean;
+  touched: boolean;
+  dirty: boolean;
+}
+interface UseFieldPropsResult<TValues extends FieldValues, TName extends FieldPath<TValues>> {
+  /** Spread on `<Field>`. Base UI then links the label, description and error to the control. */
+  fieldProps: FormFieldStateProps;
+  /**
+   * Spread on the control (`<Input {...controlProps} />`), or map it (`value` + `onValueChange={controlProps.onChange}`).
+   * `ref` must reach a focusable element so a failed submit can focus the first invalid field.
+   */
+  controlProps: ControllerRenderProps<TValues, TName> & {
+    'aria-invalid'?: true;
+  };
+  /** The current error message, for `<FieldError match={!!error}>{error}</FieldError>`. */
+  error: string | undefined;
+  fieldState: ControllerFieldState;
+}
+/**
+ * Wires one react-hook-form field (through `useController`) into the kit's Field parts.
+ * Works with uncontrolled-looking inputs too: `Input` gets `value` / `onChange` / `onBlur` / `ref`.
+ */
+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/FormField.d.ts
+interface FormFieldProps<TValues extends FieldValues, TName extends FieldPath<TValues>> extends UseFieldPropsOptions<TValues, TName> {
+  name: TName;
+  label?: ReactNode;
+  /** Shows the required marker on the label (validation itself 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;
+}
+/**
+ * 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;
+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>;
+  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;
+//#endregion
+//#region src/forms/schemaResolver.d.ts
+/** One validation issue, as zod (v3 and v4) and other Standard-Schema-style libraries report it. */
+interface SchemaIssue {
+  path: ReadonlyArray<PropertyKey | {
+    key: PropertyKey;
+  }>;
+  message: string;
+  code?: string;
+}
+type SafeParseResult<Out> = {
+  success: true;
+  data: Out;
+} | {
+  success: false;
+  error: {
+    issues: readonly SchemaIssue[];
+  };
+};
+/** Anything with zod's `safeParseAsync` / `safeParse` shape (a zod schema, or an adapter). */
+interface ParseableSchema<Out> {
+  safeParseAsync?: (values: unknown) => Promise<SafeParseResult<Out>>;
+  safeParse?: (values: unknown) => SafeParseResult<Out>;
+}
+/** Converts schema issues into react-hook-form's nested `errors` object. */
+export declare function issuesToErrors<TValues extends FieldValues>(issues: readonly SchemaIssue[]): FieldErrors<TValues>;
+/**
+ * A `zodResolver`-compatible resolver with no extra dependency: `useForm({ resolver: schemaResolver(schema) })`.
+ * Accepts a zod 3/4 schema (or any object with `safeParseAsync` / `safeParse`). On success the
+ * parsed (transformed) data reaches `onSubmit`. `@hookform/resolvers/zod` works the same way with `FormField`.
+ */
+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 };
+//# sourceMappingURL=forms.d.ts.map

package/dist/forms.js

@@ -0,0 +1,130 @@
+'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";
+//#region src/forms/useFieldProps.ts
+/**
+* Wires one react-hook-form field (through `useController`) into the kit's Field parts.
+* Works with uncontrolled-looking inputs too: `Input` gets `value` / `onChange` / `onBlur` / `ref`.
+*/
+function useFieldProps(name, { control, rules, disabled } = {}) {
+	const context = useFormContext();
+	const { field, fieldState } = useController({
+		name,
+		control: control ?? context?.control,
+		rules,
+		disabled
+	});
+	const invalid = !!fieldState.error;
+	return {
+		fieldProps: {
+			name,
+			invalid,
+			touched: fieldState.isTouched,
+			dirty: fieldState.isDirty
+		},
+		controlProps: {
+			...field,
+			"aria-invalid": invalid || void 0
+		},
+		error: errorMessage(fieldState.error),
+		fieldState
+	};
+}
+/** First message of a field error (also for array / object errors that carry `root`). */
+function errorMessage(error) {
+	if (!error) return void 0;
+	if (typeof error.message === "string" && error.message) return error.message;
+	const root = error.root;
+	return typeof root?.message === "string" ? root.message : void 0;
+}
+//#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);
+	return /* @__PURE__ */ jsxs(Field, {
+		...state.fieldProps,
+		disabled: options.disabled,
+		className,
+		children: [
+			label && /* @__PURE__ */ jsx(FieldLabel, {
+				required,
+				children: label
+			}),
+			children(state.controlProps, state),
+			description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+			/* @__PURE__ */ jsx(FieldError, {
+				match: !!state.error,
+				children: state.error
+			})
+		]
+	});
+}
+/**
+* `<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 }) {
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...form,
+		children: /* @__PURE__ */ jsx("form", {
+			noValidate: true,
+			...props,
+			onSubmit: form.handleSubmit(onSubmit, onInvalid),
+			children
+		})
+	});
+}
+//#endregion
+//#region src/forms/schemaResolver.ts
+function setPath(target, path, value) {
+	let node = target;
+	path.forEach((key, i) => {
+		if (i === path.length - 1) {
+			if (node[key] === void 0) node[key] = value;
+			return;
+		}
+		const next = node[key];
+		node[key] = next && typeof next === "object" ? next : {};
+		node = node[key];
+	});
+}
+/** Converts schema issues into react-hook-form's nested `errors` object. */
+function issuesToErrors(issues) {
+	const errors = {};
+	for (const issue of issues) {
+		const path = issue.path.map((p) => String(typeof p === "object" && p !== null ? p.key : p));
+		setPath(errors, path.length ? path : ["root"], {
+			type: issue.code ?? "validate",
+			message: issue.message
+		});
+	}
+	return errors;
+}
+/**
+* A `zodResolver`-compatible resolver with no extra dependency: `useForm({ resolver: schemaResolver(schema) })`.
+* Accepts a zod 3/4 schema (or any object with `safeParseAsync` / `safeParse`). On success the
+* parsed (transformed) data reaches `onSubmit`. `@hookform/resolvers/zod` works the same way with `FormField`.
+*/
+function schemaResolver(schema) {
+	return async (values) => {
+		const result = schema.safeParseAsync ? await schema.safeParseAsync(values) : schema.safeParse?.(values);
+		if (!result) throw new Error("schemaResolver: the schema has neither safeParseAsync nor safeParse");
+		if (result.success) return {
+			values: result.data,
+			errors: {}
+		};
+		return {
+			values: {},
+			errors: issuesToErrors(result.error.issues)
+		};
+	};
+}
+//#endregion
+export { Form, FormField, issuesToErrors, schemaResolver, useFieldProps };
+
+//# sourceMappingURL=forms.js.map

package/dist/forms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms.js","names":["provider"],"sources":["../src/forms/useFieldProps.ts","../src/forms/FormField.tsx","../src/forms/schemaResolver.ts"],"sourcesContent":["import {\n  useController,\n  useFormContext,\n  type Control,\n  type ControllerFieldState,\n  type ControllerRenderProps,\n  type FieldPath,\n  type FieldValues,\n  type RegisterOptions,\n} from 'react-hook-form';\n\nexport interface UseFieldPropsOptions<TValues extends FieldValues, TName extends FieldPath<TValues>> {\n  /** The form's `control`. Defaults to the nearest `<FormProvider>` / `<Form>`. */\n  control?: Control<TValues>;\n  /** Field-level rules (`required`, `minLength`, `validate`…). Prefer a schema resolver for whole forms. */\n  rules?: Omit<RegisterOptions<TValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;\n  /** Disables the control (and skips its validation). */\n  disabled?: boolean;\n}\n\n/** Props for the kit's `<Field>`: drive its invalid / touched / dirty state from react-hook-form. */\nexport interface FormFieldStateProps {\n  name: string;\n  invalid: boolean;\n  touched: boolean;\n  dirty: boolean;\n}\n\nexport interface UseFieldPropsResult<TValues extends FieldValues, TName extends FieldPath<TValues>> {\n  /** Spread on `<Field>`. Base UI then links the label, description and error to the control. */\n  fieldProps: FormFieldStateProps;\n  /**\n   * Spread on the control (`<Input {...controlProps} />`), or map it (`value` + `onValueChange={controlProps.onChange}`).\n   * `ref` must reach a focusable element so a failed submit can focus the first invalid field.\n   */\n  controlProps: ControllerRenderProps<TValues, TName> & { 'aria-invalid'?: true };\n  /** The current error message, for `<FieldError match={!!error}>{error}</FieldError>`. */\n  error: string | undefined;\n  fieldState: ControllerFieldState;\n}\n\n/**\n * Wires one react-hook-form field (through `useController`) into the kit's Field parts.\n * Works with uncontrolled-looking inputs too: `Input` gets `value` / `onChange` / `onBlur` / `ref`.\n */\nexport function useFieldProps<\n  TValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TValues> = FieldPath<TValues>,\n>(\n  name: TName,\n  { control, rules, disabled }: UseFieldPropsOptions<TValues, TName> = {},\n): UseFieldPropsResult<TValues, TName> {\n  const context = useFormContext<TValues>();\n  const { field, fieldState } = useController<TValues, TName>({\n    name,\n    control: control ?? context?.control,\n    rules,\n    disabled,\n  });\n  const invalid = !!fieldState.error;\n  return {\n    fieldProps: { name, invalid, touched: fieldState.isTouched, dirty: fieldState.isDirty },\n    controlProps: { ...field, 'aria-invalid': invalid || undefined },\n    error: errorMessage(fieldState.error),\n    fieldState,\n  };\n}\n\n/** First message of a field error (also for array / object errors that carry `root`). */\nfunction errorMessage(error: ControllerFieldState['error']): string | undefined {\n  if (!error) return undefined;\n  if (typeof error.message === 'string' && error.message) return error.message;\n  const root = (error as { root?: { message?: unknown } }).root;\n  return typeof root?.message === 'string' ? root.message : undefined;\n}\n","import type { FormHTMLAttributes, ReactNode } from 'react';\nimport type {\n  FieldPath,\n  FieldValues,\n  FormProviderProps,\n  SubmitErrorHandler,\n  SubmitHandler,\n  UseFormReturn,\n} from 'react-hook-form';\nimport { FormProvider } from 'react-hook-form';\nimport { Field, FieldDescription, FieldError, FieldLabel } from '../components/Field';\nimport { useFieldProps, type UseFieldPropsOptions, type UseFieldPropsResult } from './useFieldProps';\n\nexport interface FormFieldProps<\n  TValues extends FieldValues,\n  TName extends FieldPath<TValues>,\n> extends UseFieldPropsOptions<TValues, TName> {\n  name: TName;\n  label?: ReactNode;\n  /** Shows the required marker on the label (validation itself comes from `rules` or the schema). */\n  required?: boolean;\n  description?: ReactNode;\n  className?: string;\n  /** Renders the control: `{(field) => <Input {...field} />}`. Gets the field's state as the second argument. */\n  children: (\n    control: UseFieldPropsResult<TValues, TName>['controlProps'],\n    state: UseFieldPropsResult<TValues, TName>,\n  ) => ReactNode;\n}\n\n/**\n * A kit `Field` bound to a react-hook-form field: label, control, description and the field's\n * error message, with `aria-invalid` and `aria-describedby` wired by Base UI's Field.\n */\nexport function FormField<\n  TValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TValues> = FieldPath<TValues>,\n>({ name, label, required, description, className, children, ...options }: FormFieldProps<TValues, TName>) {\n  const state = useFieldProps<TValues, TName>(name, options);\n  return (\n    <Field {...state.fieldProps} disabled={options.disabled} className={className}>\n      {label && <FieldLabel required={required}>{label}</FieldLabel>}\n      {children(state.controlProps, state)}\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldError match={!!state.error}>{state.error}</FieldError>\n    </Field>\n  );\n}\n\nexport interface FormProps<TValues extends FieldValues, TTransformed = TValues> extends Omit<\n  FormHTMLAttributes<HTMLFormElement>,\n  'onSubmit' | 'onInvalid'\n> {\n  /** The object returned by `useForm()`. */\n  form: UseFormReturn<TValues, unknown, TTransformed>;\n  onSubmit: SubmitHandler<TTransformed>;\n  onInvalid?: SubmitErrorHandler<TValues>;\n  children?: ReactNode;\n}\n\n/**\n * `<form noValidate>` + `FormProvider`: submits through `handleSubmit`, so a failed submit shows\n * every message and focuses the first invalid field (react-hook-form's `shouldFocusError`).\n */\nexport function Form<TValues extends FieldValues, TTransformed = TValues>({\n  form,\n  onSubmit,\n  onInvalid,\n  children,\n  ...props\n}: FormProps<TValues, TTransformed>) {\n  const provider = form as unknown as FormProviderProps<TValues, unknown, TTransformed>;\n  return (\n    <FormProvider {...provider}>\n      <form noValidate {...props} onSubmit={form.handleSubmit(onSubmit, onInvalid)}>\n        {children}\n      </form>\n    </FormProvider>\n  );\n}\n","import type { FieldErrors, FieldValues, Resolver } from 'react-hook-form';\n\n/** One validation issue, as zod (v3 and v4) and other Standard-Schema-style libraries report it. */\nexport interface SchemaIssue {\n  path: ReadonlyArray<PropertyKey | { key: PropertyKey }>;\n  message: string;\n  code?: string;\n}\n\ntype SafeParseResult<Out> =\n  { success: true; data: Out } | { success: false; error: { issues: readonly SchemaIssue[] } };\n\n/** Anything with zod's `safeParseAsync` / `safeParse` shape (a zod schema, or an adapter). */\nexport interface ParseableSchema<Out> {\n  safeParseAsync?: (values: unknown) => Promise<SafeParseResult<Out>>;\n  safeParse?: (values: unknown) => SafeParseResult<Out>;\n}\n\nfunction setPath(target: Record<string, unknown>, path: readonly string[], value: unknown) {\n  let node = target;\n  path.forEach((key, i) => {\n    if (i === path.length - 1) {\n      if (node[key] === undefined) node[key] = value; // first issue per field wins\n      return;\n    }\n    const next = node[key];\n    node[key] = next && typeof next === 'object' ? next : {};\n    node = node[key] as Record<string, unknown>;\n  });\n}\n\n/** Converts schema issues into react-hook-form's nested `errors` object. */\nexport function issuesToErrors<TValues extends FieldValues>(issues: readonly SchemaIssue[]): FieldErrors<TValues> {\n  const errors: Record<string, unknown> = {};\n  for (const issue of issues) {\n    const path = issue.path.map((p) => String(typeof p === 'object' && p !== null ? p.key : p));\n    setPath(errors, path.length ? path : ['root'], { type: issue.code ?? 'validate', message: issue.message });\n  }\n  return errors as FieldErrors<TValues>;\n}\n\n/**\n * A `zodResolver`-compatible resolver with no extra dependency: `useForm({ resolver: schemaResolver(schema) })`.\n * Accepts a zod 3/4 schema (or any object with `safeParseAsync` / `safeParse`). On success the\n * parsed (transformed) data reaches `onSubmit`. `@hookform/resolvers/zod` works the same way with `FormField`.\n */\nexport function schemaResolver<TValues extends FieldValues, TOutput = TValues>(\n  schema: ParseableSchema<TOutput>,\n): Resolver<TValues, unknown, TOutput> {\n  return async (values) => {\n    const result = schema.safeParseAsync ? await schema.safeParseAsync(values) : schema.safeParse?.(values);\n    if (!result) throw new Error('schemaResolver: the schema has neither safeParseAsync nor safeParse');\n    if (result.success) return { values: result.data, errors: {} };\n    return { values: {}, errors: issuesToErrors<TValues>(result.error.issues) };\n  };\n}\n"],"mappings":";;;;;;;;;AA6CA,SAAgB,cAId,MACA,EAAE,SAAS,OAAO,aAAmD,CAAC,GACjC;CACrC,MAAM,UAAU,eAAwB;CACxC,MAAM,EAAE,OAAO,eAAe,cAA8B;EAC1D;EACA,SAAS,WAAW,SAAS;EAC7B;EACA;CACF,CAAC;CACD,MAAM,UAAU,CAAC,CAAC,WAAW;CAC7B,OAAO;EACL,YAAY;GAAE;GAAM;GAAS,SAAS,WAAW;GAAW,OAAO,WAAW;EAAQ;EACtF,cAAc;GAAE,GAAG;GAAO,gBAAgB,WAAW,KAAA;EAAU;EAC/D,OAAO,aAAa,WAAW,KAAK;EACpC;CACF;AACF;;AAGA,SAAS,aAAa,OAA0D;CAC9E,IAAI,CAAC,OAAO,OAAO,KAAA;CACnB,IAAI,OAAO,MAAM,YAAY,YAAY,MAAM,SAAS,OAAO,MAAM;CACrE,MAAM,OAAQ,MAA2C;CACzD,OAAO,OAAO,MAAM,YAAY,WAAW,KAAK,UAAU,KAAA;AAC5D;;;;;;;ACxCA,SAAgB,UAGd,EAAE,MAAM,OAAO,UAAU,aAAa,WAAW,UAAU,GAAG,WAA2C;CACzG,MAAM,QAAQ,cAA8B,MAAM,OAAO;CACzD,OACE,qBAAC,OAAD;EAAO,GAAI,MAAM;EAAY,UAAU,QAAQ;EAAqB;EAApE,UAAA;GACG,SAAS,oBAAC,YAAD;IAAsB;IAAW,UAAA;GAAkB,CAAA;GAC5D,SAAS,MAAM,cAAc,KAAK;GAClC,eAAe,oBAAC,kBAAD,EAAA,UAAmB,YAA8B,CAAA;GACjE,oBAAC,YAAD;IAAY,OAAO,CAAC,CAAC,MAAM;IAAQ,UAAA,MAAM;GAAkB,CAAA;EACtD;;AAEX;;;;;AAiBA,SAAgB,KAA0D,EACxE,MACA,UACA,WACA,UACA,GAAG,SACgC;CAEnC,OACE,oBAAC,cAAD;EAAc,GAAIA;EAChB,UAAA,oBAAC,QAAD;GAAM,YAAA;GAAW,GAAI;GAAO,UAAU,KAAK,aAAa,UAAU,SAAS;GACxE;EACG,CAAA;CACM,CAAA;AAElB;;;AC7DA,SAAS,QAAQ,QAAiC,MAAyB,OAAgB;CACzF,IAAI,OAAO;CACX,KAAK,SAAS,KAAK,MAAM;EACvB,IAAI,MAAM,KAAK,SAAS,GAAG;GACzB,IAAI,KAAK,SAAS,KAAA,GAAW,KAAK,OAAO;GACzC;EACF;EACA,MAAM,OAAO,KAAK;EAClB,KAAK,OAAO,QAAQ,OAAO,SAAS,WAAW,OAAO,CAAC;EACvD,OAAO,KAAK;CACd,CAAC;AACH;;AAGA,SAAgB,eAA4C,QAAsD;CAChH,MAAM,SAAkC,CAAC;CACzC,KAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,OAAO,MAAM,KAAK,KAAK,MAAM,OAAO,OAAO,MAAM,YAAY,MAAM,OAAO,EAAE,MAAM,CAAC,CAAC;EAC1F,QAAQ,QAAQ,KAAK,SAAS,OAAO,CAAC,MAAM,GAAG;GAAE,MAAM,MAAM,QAAQ;GAAY,SAAS,MAAM;EAAQ,CAAC;CAC3G;CACA,OAAO;AACT;;;;;;AAOA,SAAgB,eACd,QACqC;CACrC,OAAO,OAAO,WAAW;EACvB,MAAM,SAAS,OAAO,iBAAiB,MAAM,OAAO,eAAe,MAAM,IAAI,OAAO,YAAY,MAAM;EACtG,IAAI,CAAC,QAAQ,MAAM,IAAI,MAAM,qEAAqE;EAClG,IAAI,OAAO,SAAS,OAAO;GAAE,QAAQ,OAAO;GAAM,QAAQ,CAAC;EAAE;EAC7D,OAAO;GAAE,QAAQ,CAAC;GAAG,QAAQ,eAAwB,OAAO,MAAM,MAAM;EAAE;CAC5E;AACF"}