jaci-ui 0.3.0 → 0.4.0

package/dist/components/date-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+import { DateRange, DateRangePicker, DateRangePickerCalendar, DateRangePickerCalendarProps, DateRangePickerClear, DateRangePickerClearProps, DateRangePickerClose, DateRangePickerCloseProps, DateRangePickerControl, DateRangePickerControlProps, DateRangePickerDay, DateRangePickerDayProps, DateRangePickerEndInput, DateRangePickerHeader, DateRangePickerHeaderProps, DateRangePickerInputProps, DateRangePickerLabel, DateRangePickerLabelProps, DateRangePickerMonthSelect, DateRangePickerMonthSelectProps, DateRangePickerNavigationProps, DateRangePickerNext, DateRangePickerPopup, DateRangePickerPopupProps, DateRangePickerPortal, DateRangePickerPortalProps, DateRangePickerPositioner, DateRangePickerPositionerProps, DateRangePickerPreview, DateRangePickerPreviewProps, DateRangePickerPrevious, DateRangePickerRoot, DateRangePickerRootProps, DateRangePickerStartInput, DateRangePickerTrigger, DateRangePickerTriggerProps, DateRangePickerValue, DateRangePickerValueProps, DateRangePickerYearRange, DateRangePickerYearSelect, DateRangePickerYearSelectProps } from "./date-range-picker.js";
+export { type DateRange, DateRangePicker, DateRangePickerCalendar, type DateRangePickerCalendarProps, DateRangePickerClear, type DateRangePickerClearProps, DateRangePickerClose, type DateRangePickerCloseProps, DateRangePickerControl, type DateRangePickerControlProps, DateRangePickerDay, type DateRangePickerDayProps, DateRangePickerEndInput, DateRangePickerHeader, type DateRangePickerHeaderProps, type DateRangePickerInputProps, DateRangePickerLabel, type DateRangePickerLabelProps, DateRangePickerMonthSelect, type DateRangePickerMonthSelectProps, type DateRangePickerNavigationProps, DateRangePickerNext, DateRangePickerPopup, type DateRangePickerPopupProps, DateRangePickerPortal, type DateRangePickerPortalProps, DateRangePickerPositioner, type DateRangePickerPositionerProps, DateRangePickerPreview, type DateRangePickerPreviewProps, DateRangePickerPrevious, DateRangePickerRoot, type DateRangePickerRootProps, DateRangePickerStartInput, DateRangePickerTrigger, type DateRangePickerTriggerProps, DateRangePickerValue, type DateRangePickerValueProps, type DateRangePickerYearRange, DateRangePickerYearSelect, type DateRangePickerYearSelectProps };

package/dist/components/field/field.cjs

@@ -7,10 +7,18 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_field = require("@base-ui/react/field");
 //#region src/components/field/field.tsx
 const FieldContext = (0, react.createContext)({
+	controlId: void 0,
+	descriptionId: void 0,
+	dirty: false,
+	errorId: void 0,
 	errors: [],
 	insideField: false,
 	invalid: false,
-	name: void 0
+	labelId: void 0,
+	name: void 0,
+	pending: false,
+	touched: false,
+	valid: null
 });
 function normalizeErrors(errors) {
 	if (errors === void 0 || errors === null || errors === false) return [];
@@ -20,51 +28,127 @@ function renderErrors(errors) {
 	if (errors.length <= 1) return errors[0];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: errors.map((error, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: error }, typeof error === "string" ? error : index)) });
 }
-const Field = (0, react.forwardRef)(function Field({ actionsRef, children, className, dirty, disabled = false, errors: directErrors, invalid: invalidProp = false, name, touched, validate, validationDebounceTime, validationMode, ...props }, ref) {
+const FieldRoot = (0, react.forwardRef)(function Field({ actionsRef, children, className, dirty, disabled = false, errors: directErrors, invalid: invalidProp = false, name, pending: pendingProp = false, touched, validate, validationDebounceTime, validationMode, ...props }, ref) {
+	const generatedId = (0, react.useId)();
+	const controlId = `${generatedId}-control`;
+	const labelId = `${generatedId}-label`;
+	const descriptionId = `${generatedId}-description`;
+	const errorId = `${generatedId}-error`;
+	const [pendingValidation, setPendingValidation] = (0, react.useState)(false);
+	const [validationErrors, setValidationErrors] = (0, react.useState)([]);
+	const [validationValid, setValidationValid] = (0, react.useState)(null);
+	const validationSequence = (0, react.useRef)(0);
 	const { errors: formErrors } = (0, react.useContext)(require_form.JaciFormContext);
 	const formError = name ? formErrors[name] : void 0;
-	const errors = directErrors === void 0 ? normalizeErrors(formError) : normalizeErrors(directErrors);
+	const externalErrors = directErrors === void 0 ? normalizeErrors(formError) : normalizeErrors(directErrors);
+	const errors = directErrors !== void 0 || formError !== void 0 ? externalErrors : validationErrors;
 	const invalid = invalidProp || errors.length > 0;
+	const pending = pendingProp || pendingValidation;
+	const wrappedValidate = (0, react.useCallback)((value, formValues) => {
+		const sequence = ++validationSequence.current;
+		if (!validate) return null;
+		const result = validate(value, formValues);
+		if (!result || typeof result !== "object" || !("then" in result)) {
+			const resultErrors = normalizeErrors(result);
+			setValidationErrors(resultErrors);
+			setValidationValid(resultErrors.length === 0);
+			setPendingValidation(false);
+			return result;
+		}
+		setValidationErrors([]);
+		setValidationValid(null);
+		setPendingValidation(true);
+		return Promise.resolve(result).then((validationResult) => {
+			if (sequence !== validationSequence.current) return null;
+			const resultErrors = normalizeErrors(validationResult);
+			setValidationErrors(resultErrors);
+			setValidationValid(resultErrors.length === 0);
+			return validationResult;
+		}).finally(() => {
+			if (sequence === validationSequence.current) setPendingValidation(false);
+		});
+	}, [validate]);
 	const styles = require_field.field({ invalid });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldContext.Provider, {
 		value: {
+			controlId,
+			descriptionId,
+			dirty: dirty ?? false,
+			errorId,
 			errors,
 			insideField: true,
 			invalid,
-			name
+			labelId,
+			name,
+			pending,
+			touched: touched ?? false,
+			valid: invalid ? false : validationValid
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Root, {
 			...props,
 			ref,
 			actionsRef,
 			className: require_cx.cx(styles.root, className),
+			"aria-busy": pending || void 0,
+			"data-dirty": dirty || void 0,
 			"data-invalid": invalid || void 0,
 			"data-jaci-component": "field",
+			"data-pending": pending || void 0,
 			"data-slot": "field",
+			"data-touched": touched || void 0,
 			disabled,
 			dirty,
 			invalid,
 			name,
 			touched,
-			validate,
+			...validate ? { validate: wrappedValidate } : {},
 			validationDebounceTime,
 			validationMode,
 			children
 		})
 	});
 });
+const FieldControl = (0, react.forwardRef)(function FieldControl({ "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, className, id, ...props }, ref) {
+	const { controlId, descriptionId, errorId, invalid, labelId, pending, insideField } = (0, react.useContext)(FieldContext);
+	const describedBy = [
+		ariaDescribedBy,
+		descriptionId,
+		invalid ? errorId : void 0
+	].filter(Boolean).join(" ") || void 0;
+	const labelledBy = [ariaLabelledBy, labelId].filter(Boolean).join(" ") || void 0;
+	const controlProps = {
+		...props,
+		"aria-busy": pending || void 0,
+		"aria-describedby": describedBy,
+		"aria-errormessage": ariaErrorMessage ?? (invalid ? errorId : void 0),
+		"aria-invalid": ariaInvalid ?? (invalid || void 0),
+		"aria-labelledby": labelledBy,
+		className,
+		"data-pending": pending || void 0,
+		id: id ?? controlId
+	};
+	if (!insideField) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Control, {
+		...controlProps,
+		ref
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Control, {
+		...controlProps,
+		ref
+	});
+});
 const FieldLabel = (0, react.forwardRef)(function FieldLabel({ children, className, htmlFor, ...props }, ref) {
-	const { insideField, invalid } = (0, react.useContext)(FieldContext);
+	const { controlId, insideField, invalid, labelId } = (0, react.useContext)(FieldContext);
 	const labelProps = {
 		...props,
 		className: require_cx.cx(require_field.field({ invalid }).label, className),
 		"data-slot": "field-label",
-		htmlFor
+		htmlFor: htmlFor ?? controlId,
+		id: props.id ?? labelId
 	};
 	if (!insideField) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 		...labelProps,
 		ref,
-		htmlFor,
+		htmlFor: htmlFor ?? controlId,
 		children
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Label, {
@@ -74,11 +158,12 @@ const FieldLabel = (0, react.forwardRef)(function FieldLabel({ children, classNa
 	});
 });
 const FieldDescription = (0, react.forwardRef)(function FieldDescription({ className, ...props }, ref) {
-	const { insideField, invalid } = (0, react.useContext)(FieldContext);
+	const { descriptionId, insideField, invalid } = (0, react.useContext)(FieldContext);
 	const descriptionProps = {
 		...props,
 		className: require_cx.cx(require_field.field({ invalid }).description, className),
-		"data-slot": "field-description"
+		"data-slot": "field-description",
+		id: props.id ?? descriptionId
 	};
 	if (!insideField) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 		...descriptionProps,
@@ -90,7 +175,7 @@ const FieldDescription = (0, react.forwardRef)(function FieldDescription({ class
 	});
 });
 const FieldError = (0, react.forwardRef)(function FieldError({ children, className, match, ...props }, ref) {
-	const { errors, insideField, invalid } = (0, react.useContext)(FieldContext);
+	const { errorId, errors, insideField, invalid } = (0, react.useContext)(FieldContext);
 	const content = children ?? renderErrors(errors);
 	if (!insideField) {
 		if (content === void 0 || content === null || content === false) return null;
@@ -99,6 +184,7 @@ const FieldError = (0, react.forwardRef)(function FieldError({ children, classNa
 			ref,
 			className: require_cx.cx(require_field.field({ invalid }).error, className),
 			"data-slot": "field-error",
+			id: props.id ?? errorId,
 			role: "alert",
 			children: content
 		});
@@ -108,6 +194,7 @@ const FieldError = (0, react.forwardRef)(function FieldError({ children, classNa
 		ref,
 		className: require_cx.cx(require_field.field({ invalid }).error, className),
 		"data-slot": "field-error",
+		id: props.id ?? errorId,
 		match: match ?? (invalid ? true : void 0),
 		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {}),
 		role: "alert",
@@ -117,8 +204,16 @@ const FieldError = (0, react.forwardRef)(function FieldError({ children, classNa
 function useFieldState() {
 	return (0, react.useContext)(FieldContext);
 }
+const Field = Object.assign(FieldRoot, {
+	Root: FieldRoot,
+	Control: FieldControl,
+	Label: FieldLabel,
+	Description: FieldDescription,
+	Error: FieldError
+});
 //#endregion
 exports.Field = Field;
+exports.FieldControl = FieldControl;
 exports.FieldDescription = FieldDescription;
 exports.FieldError = FieldError;
 exports.FieldLabel = FieldLabel;

package/dist/components/field/field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"field.cjs","names":["JaciFormContext","field","BaseField","cx"],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\";\n\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport type { FieldRoot as BaseFieldRoot } from \"@base-ui/react/field\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { field } from \"../../styled-system/recipes\";\nimport { JaciFormContext } from \"../form\";\n\nexport type FieldValidationMode = \"onSubmit\" | \"onBlur\" | \"onChange\";\n\ninterface FieldContextValue {\n  errors: ReactNode[];\n  insideField: boolean;\n  invalid: boolean;\n  name: string | undefined;\n}\n\nconst FieldContext = createContext<FieldContextValue>({\n  errors: [],\n  insideField: false,\n  invalid: false,\n  name: undefined,\n});\n\nfunction normalizeErrors(errors: ReactNode | ReactNode[] | undefined): ReactNode[] {\n  if (errors === undefined || errors === null || errors === false) {\n    return [];\n  }\n\n  return Array.isArray(errors) ? errors : [errors];\n}\n\nfunction renderErrors(errors: ReactNode[]) {\n  if (errors.length <= 1) {\n    return errors[0];\n  }\n\n  return (\n    <ul>\n      {errors.map((error, index) => (\n        <li key={typeof error === \"string\" ? error : index}>{error}</li>\n      ))}\n    </ul>\n  );\n}\n\nexport interface FieldProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Marks the field invalid when an external validator owns its state. */\n  invalid?: boolean;\n  /** Field name used to resolve errors supplied to the parent Form. */\n  name?: string;\n  /** Direct error content, useful outside a Form or with custom validation. */\n  errors?: ReactNode | ReactNode[];\n  /** Disables the field and its Base UI validation state. */\n  disabled?: boolean;\n  /** Native/Base UI validation callback. */\n  validate?: BaseFieldRoot.Props[\"validate\"];\n  /** Validation timing used by the parent Form. */\n  validationMode?: FieldValidationMode;\n  /** Debounce duration for `validationMode=\"onChange\"`. */\n  validationDebounceTime?: number;\n  /** Controlled dirty/touched state for integrations with external form state. */\n  dirty?: boolean;\n  touched?: boolean;\n  /** Imperative field validation actions. */\n  actionsRef?: BaseFieldRoot.Props[\"actionsRef\"];\n  children?: ReactNode;\n}\n\nexport interface FieldLabelProps extends ComponentPropsWithoutRef<\"label\"> {\n  htmlFor: string;\n}\n\nexport const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(\n  {\n    actionsRef,\n    children,\n    className,\n    dirty,\n    disabled = false,\n    errors: directErrors,\n    invalid: invalidProp = false,\n    name,\n    touched,\n    validate,\n    validationDebounceTime,\n    validationMode,\n    ...props\n  },\n  ref,\n) {\n  const { errors: formErrors } = useContext(JaciFormContext);\n  const formError = name ? formErrors[name] : undefined;\n  const errors =\n    directErrors === undefined ? normalizeErrors(formError) : normalizeErrors(directErrors);\n  const invalid = invalidProp || errors.length > 0;\n  const styles = field({ invalid });\n\n  return (\n    <FieldContext.Provider value={{ errors, insideField: true, invalid, name }}>\n      <BaseField.Root\n        {...props}\n        ref={ref}\n        actionsRef={actionsRef}\n        className={cx(styles.root, className)}\n        data-invalid={invalid || undefined}\n        data-jaci-component=\"field\"\n        data-slot=\"field\"\n        disabled={disabled}\n        dirty={dirty}\n        invalid={invalid}\n        name={name}\n        touched={touched}\n        validate={validate}\n        validationDebounceTime={validationDebounceTime}\n        validationMode={validationMode}\n      >\n        {children}\n      </BaseField.Root>\n    </FieldContext.Provider>\n  );\n});\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(function FieldLabel(\n  { children, className, htmlFor, ...props },\n  ref,\n) {\n  const { insideField, invalid } = useContext(FieldContext);\n\n  const labelProps = {\n    ...props,\n    className: cx(field({ invalid }).label, className),\n    \"data-slot\": \"field-label\",\n    htmlFor,\n  };\n\n  if (!insideField) {\n    return (\n      <label {...labelProps} ref={ref} htmlFor={htmlFor}>\n        {children}\n      </label>\n    );\n  }\n\n  return (\n    <BaseField.Label {...labelProps} ref={ref as Ref<HTMLElement>}>\n      {children}\n    </BaseField.Label>\n  );\n});\n\nexport const FieldDescription = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<\"p\">>(\n  function FieldDescription({ className, ...props }, ref) {\n    const { insideField, invalid } = useContext(FieldContext);\n    const descriptionProps = {\n      ...props,\n      className: cx(field({ invalid }).description, className),\n      \"data-slot\": \"field-description\",\n    };\n\n    if (!insideField) {\n      return <p {...descriptionProps} ref={ref} />;\n    }\n\n    return <BaseField.Description {...descriptionProps} ref={ref} />;\n  },\n);\n\nexport interface FieldErrorProps extends Omit<ComponentPropsWithoutRef<\"p\">, \"children\"> {\n  children?: ReactNode;\n  match?: boolean | keyof ValidityState;\n}\n\nexport const FieldError = forwardRef<HTMLParagraphElement, FieldErrorProps>(function FieldError(\n  { children, className, match, ...props },\n  ref,\n) {\n  const { errors, insideField, invalid } = useContext(FieldContext);\n  const content = children ?? renderErrors(errors);\n\n  if (!insideField) {\n    if (content === undefined || content === null || content === false) {\n      return null;\n    }\n\n    return (\n      <p\n        {...props}\n        ref={ref}\n        className={cx(field({ invalid }).error, className)}\n        data-slot=\"field-error\"\n        role=\"alert\"\n      >\n        {content}\n      </p>\n    );\n  }\n\n  return (\n    <BaseField.Error\n      {...props}\n      ref={ref as Ref<HTMLDivElement>}\n      className={cx(field({ invalid }).error, className)}\n      data-slot=\"field-error\"\n      match={match ?? (invalid ? true : undefined)}\n      render={<p />}\n      role=\"alert\"\n    >\n      {content}\n    </BaseField.Error>\n  );\n});\n\nexport function useFieldState() {\n  return useContext(FieldContext);\n}\n"],"mappings":"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"}
+{"version":3,"file":"field.cjs","names":["JaciFormContext","field","BaseField","cx"],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\";\n\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { createContext, forwardRef, useCallback, useContext, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport type { FieldRoot as BaseFieldRoot } from \"@base-ui/react/field\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { field } from \"../../styled-system/recipes\";\nimport { JaciFormContext } from \"../form\";\n\nexport type FieldValidationMode = \"onSubmit\" | \"onBlur\" | \"onChange\";\n\ninterface FieldContextValue {\n  controlId: string | undefined;\n  descriptionId: string | undefined;\n  dirty: boolean;\n  errorId: string | undefined;\n  errors: ReactNode[];\n  insideField: boolean;\n  invalid: boolean;\n  labelId: string | undefined;\n  name: string | undefined;\n  pending: boolean;\n  touched: boolean;\n  valid: boolean | null;\n}\n\nconst FieldContext = createContext<FieldContextValue>({\n  controlId: undefined,\n  descriptionId: undefined,\n  dirty: false,\n  errorId: undefined,\n  errors: [],\n  insideField: false,\n  invalid: false,\n  labelId: undefined,\n  name: undefined,\n  pending: false,\n  touched: false,\n  valid: null,\n});\n\nfunction normalizeErrors(errors: ReactNode | ReactNode[] | undefined): ReactNode[] {\n  if (errors === undefined || errors === null || errors === false) {\n    return [];\n  }\n\n  return Array.isArray(errors) ? errors : [errors];\n}\n\nfunction renderErrors(errors: ReactNode[]) {\n  if (errors.length <= 1) {\n    return errors[0];\n  }\n\n  return (\n    <ul>\n      {errors.map((error, index) => (\n        <li key={typeof error === \"string\" ? error : index}>{error}</li>\n      ))}\n    </ul>\n  );\n}\n\nexport interface FieldProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Marks the field invalid when an external validator owns its state. */\n  invalid?: boolean;\n  /** Field name used to resolve errors supplied to the parent Form. */\n  name?: string;\n  /** Direct error content, useful outside a Form or with custom validation. */\n  errors?: ReactNode | ReactNode[];\n  /** Disables the field and its Base UI validation state. */\n  disabled?: boolean;\n  /** Native/Base UI validation callback. */\n  validate?: BaseFieldRoot.Props[\"validate\"];\n  /** Validation timing used by the parent Form. */\n  validationMode?: FieldValidationMode;\n  /** Debounce duration for `validationMode=\"onChange\"`. */\n  validationDebounceTime?: number;\n  /** Controlled dirty/touched state for integrations with external form state. */\n  dirty?: boolean;\n  touched?: boolean;\n  /** Marks the field as awaiting asynchronous validation. */\n  pending?: boolean;\n  /** Imperative field validation actions. */\n  actionsRef?: BaseFieldRoot.Props[\"actionsRef\"];\n  children?: ReactNode;\n}\n\nexport interface FieldLabelProps extends ComponentPropsWithoutRef<\"label\"> {\n  htmlFor?: string;\n}\n\nconst FieldRoot = forwardRef<HTMLDivElement, FieldProps>(function Field(\n  {\n    actionsRef,\n    children,\n    className,\n    dirty,\n    disabled = false,\n    errors: directErrors,\n    invalid: invalidProp = false,\n    name,\n    pending: pendingProp = false,\n    touched,\n    validate,\n    validationDebounceTime,\n    validationMode,\n    ...props\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const controlId = `${generatedId}-control`;\n  const labelId = `${generatedId}-label`;\n  const descriptionId = `${generatedId}-description`;\n  const errorId = `${generatedId}-error`;\n  const [pendingValidation, setPendingValidation] = useState(false);\n  const [validationErrors, setValidationErrors] = useState<ReactNode[]>([]);\n  const [validationValid, setValidationValid] = useState<boolean | null>(null);\n  const validationSequence = useRef(0);\n  const { errors: formErrors } = useContext(JaciFormContext);\n  const formError = name ? formErrors[name] : undefined;\n  const externalErrors =\n    directErrors === undefined ? normalizeErrors(formError) : normalizeErrors(directErrors);\n  const errors =\n    directErrors !== undefined || formError !== undefined ? externalErrors : validationErrors;\n  const invalid = invalidProp || errors.length > 0;\n  const pending = pendingProp || pendingValidation;\n  const wrappedValidate = useCallback<NonNullable<BaseFieldRoot.Props[\"validate\"]>>(\n    (value, formValues) => {\n      const sequence = ++validationSequence.current;\n      if (!validate) return null;\n      const result = validate(value, formValues);\n      if (!result || typeof result !== \"object\" || !(\"then\" in result)) {\n        const resultErrors = normalizeErrors(result);\n        setValidationErrors(resultErrors);\n        setValidationValid(resultErrors.length === 0);\n        setPendingValidation(false);\n        return result;\n      }\n      setValidationErrors([]);\n      setValidationValid(null);\n      setPendingValidation(true);\n      return Promise.resolve(result)\n        .then((validationResult) => {\n          if (sequence !== validationSequence.current) return null;\n          const resultErrors = normalizeErrors(validationResult);\n          setValidationErrors(resultErrors);\n          setValidationValid(resultErrors.length === 0);\n          return validationResult;\n        })\n        .finally(() => {\n          if (sequence === validationSequence.current) setPendingValidation(false);\n        });\n    },\n    [validate],\n  );\n  const styles = field({ invalid });\n\n  return (\n    <FieldContext.Provider\n      value={{\n        controlId,\n        descriptionId,\n        dirty: dirty ?? false,\n        errorId,\n        errors,\n        insideField: true,\n        invalid,\n        labelId,\n        name,\n        pending,\n        touched: touched ?? false,\n        valid: invalid ? false : validationValid,\n      }}\n    >\n      <BaseField.Root\n        {...props}\n        ref={ref}\n        actionsRef={actionsRef}\n        className={cx(styles.root, className)}\n        aria-busy={pending || undefined}\n        data-dirty={dirty || undefined}\n        data-invalid={invalid || undefined}\n        data-jaci-component=\"field\"\n        data-pending={pending || undefined}\n        data-slot=\"field\"\n        data-touched={touched || undefined}\n        disabled={disabled}\n        dirty={dirty}\n        invalid={invalid}\n        name={name}\n        touched={touched}\n        {...(validate ? { validate: wrappedValidate } : {})}\n        validationDebounceTime={validationDebounceTime}\n        validationMode={validationMode}\n      >\n        {children}\n      </BaseField.Root>\n    </FieldContext.Provider>\n  );\n});\n\nexport interface FieldControlProps extends ComponentPropsWithoutRef<typeof BaseField.Control> {}\n\nexport const FieldControl = forwardRef<HTMLElement, FieldControlProps>(function FieldControl(\n  {\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-labelledby\": ariaLabelledBy,\n    className,\n    id,\n    ...props\n  },\n  ref,\n) {\n  const { controlId, descriptionId, errorId, invalid, labelId, pending, insideField } =\n    useContext(FieldContext);\n  const describedBy =\n    [ariaDescribedBy, descriptionId, invalid ? errorId : undefined].filter(Boolean).join(\" \") ||\n    undefined;\n  const labelledBy = [ariaLabelledBy, labelId].filter(Boolean).join(\" \") || undefined;\n  const controlProps = {\n    ...props,\n    \"aria-busy\": pending || undefined,\n    \"aria-describedby\": describedBy,\n    \"aria-errormessage\": ariaErrorMessage ?? (invalid ? errorId : undefined),\n    \"aria-invalid\": ariaInvalid ?? (invalid || undefined),\n    \"aria-labelledby\": labelledBy,\n    className,\n    \"data-pending\": pending || undefined,\n    id: id ?? controlId,\n  };\n  if (!insideField) return <BaseField.Control {...controlProps} ref={ref} />;\n  return <BaseField.Control {...controlProps} ref={ref} />;\n});\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(function FieldLabel(\n  { children, className, htmlFor, ...props },\n  ref,\n) {\n  const { controlId, insideField, invalid, labelId } = useContext(FieldContext);\n\n  const labelProps = {\n    ...props,\n    className: cx(field({ invalid }).label, className),\n    \"data-slot\": \"field-label\",\n    htmlFor: htmlFor ?? controlId,\n    id: props.id ?? labelId,\n  };\n\n  if (!insideField) {\n    return (\n      <label {...labelProps} ref={ref} htmlFor={htmlFor ?? controlId}>\n        {children}\n      </label>\n    );\n  }\n\n  return (\n    <BaseField.Label {...labelProps} ref={ref as Ref<HTMLElement>}>\n      {children}\n    </BaseField.Label>\n  );\n});\n\nexport const FieldDescription = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<\"p\">>(\n  function FieldDescription({ className, ...props }, ref) {\n    const { descriptionId, insideField, invalid } = useContext(FieldContext);\n    const descriptionProps = {\n      ...props,\n      className: cx(field({ invalid }).description, className),\n      \"data-slot\": \"field-description\",\n      id: props.id ?? descriptionId,\n    };\n\n    if (!insideField) {\n      return <p {...descriptionProps} ref={ref} />;\n    }\n\n    return <BaseField.Description {...descriptionProps} ref={ref} />;\n  },\n);\n\nexport interface FieldErrorProps extends Omit<ComponentPropsWithoutRef<\"p\">, \"children\"> {\n  children?: ReactNode;\n  match?: boolean | keyof ValidityState;\n}\n\nexport const FieldError = forwardRef<HTMLParagraphElement, FieldErrorProps>(function FieldError(\n  { children, className, match, ...props },\n  ref,\n) {\n  const { errorId, errors, insideField, invalid } = useContext(FieldContext);\n  const content = children ?? renderErrors(errors);\n\n  if (!insideField) {\n    if (content === undefined || content === null || content === false) {\n      return null;\n    }\n\n    return (\n      <p\n        {...props}\n        ref={ref}\n        className={cx(field({ invalid }).error, className)}\n        data-slot=\"field-error\"\n        id={props.id ?? errorId}\n        role=\"alert\"\n      >\n        {content}\n      </p>\n    );\n  }\n\n  return (\n    <BaseField.Error\n      {...props}\n      ref={ref as Ref<HTMLDivElement>}\n      className={cx(field({ invalid }).error, className)}\n      data-slot=\"field-error\"\n      id={props.id ?? errorId}\n      match={match ?? (invalid ? true : undefined)}\n      render={<p />}\n      role=\"alert\"\n    >\n      {content}\n    </BaseField.Error>\n  );\n});\n\nexport function useFieldState() {\n  return useContext(FieldContext);\n}\n\nexport const Field = Object.assign(FieldRoot, {\n  Root: FieldRoot,\n  Control: FieldControl,\n  Label: FieldLabel,\n  Description: FieldDescription,\n  Error: FieldError,\n});\n"],"mappings":"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"}

package/dist/components/field/field.d.cts

@@ -1,12 +1,20 @@
 import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { FieldRoot } from "@base-ui/react/field";
+import { Field, FieldRoot } from "@base-ui/react/field";
 //#region src/components/field/field.d.ts
 type FieldValidationMode = "onSubmit" | "onBlur" | "onChange";
 interface FieldContextValue {
+  controlId: string | undefined;
+  descriptionId: string | undefined;
+  dirty: boolean;
+  errorId: string | undefined;
   errors: ReactNode[];
   insideField: boolean;
   invalid: boolean;
+  labelId: string | undefined;
   name: string | undefined;
+  pending: boolean;
+  touched: boolean;
+  valid: boolean | null;
 }
 interface FieldProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
   /** Marks the field invalid when an external validator owns its state. */
@@ -26,14 +34,17 @@ interface FieldProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
   /** Controlled dirty/touched state for integrations with external form state. */
   dirty?: boolean;
   touched?: boolean;
+  /** Marks the field as awaiting asynchronous validation. */
+  pending?: boolean;
   /** Imperative field validation actions. */
   actionsRef?: FieldRoot.Props["actionsRef"];
   children?: ReactNode;
 }
 interface FieldLabelProps extends ComponentPropsWithoutRef<"label"> {
-  htmlFor: string;
+  htmlFor?: string;
 }
-declare const Field$1: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;
+interface FieldControlProps extends ComponentPropsWithoutRef<typeof Field.Control> {}
+declare const FieldControl: import("react").ForwardRefExoticComponent<FieldControlProps & import("react").RefAttributes<HTMLElement>>;
 declare const FieldLabel: import("react").ForwardRefExoticComponent<FieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
 declare const FieldDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
 interface FieldErrorProps extends Omit<ComponentPropsWithoutRef<"p">, "children"> {
@@ -42,6 +53,13 @@ interface FieldErrorProps extends Omit<ComponentPropsWithoutRef<"p">, "children"
 }
 declare const FieldError: import("react").ForwardRefExoticComponent<FieldErrorProps & import("react").RefAttributes<HTMLParagraphElement>>;
 declare function useFieldState(): FieldContextValue;
+declare const Field$1: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;
+  Control: import("react").ForwardRefExoticComponent<FieldControlProps & import("react").RefAttributes<HTMLElement>>;
+  Label: import("react").ForwardRefExoticComponent<FieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  Error: import("react").ForwardRefExoticComponent<FieldErrorProps & import("react").RefAttributes<HTMLParagraphElement>>;
+};
 //#endregion
-export { Field$1 as Field, FieldDescription, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, useFieldState };
+export { Field$1 as Field, FieldControl, FieldControlProps, FieldDescription, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, useFieldState };
 //# sourceMappingURL=field.d.cts.map

package/dist/components/field/field.d.ts

@@ -1,12 +1,20 @@
 import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { FieldRoot } from "@base-ui/react/field";
+import { Field, FieldRoot } from "@base-ui/react/field";
 //#region src/components/field/field.d.ts
 type FieldValidationMode = "onSubmit" | "onBlur" | "onChange";
 interface FieldContextValue {
+  controlId: string | undefined;
+  descriptionId: string | undefined;
+  dirty: boolean;
+  errorId: string | undefined;
   errors: ReactNode[];
   insideField: boolean;
   invalid: boolean;
+  labelId: string | undefined;
   name: string | undefined;
+  pending: boolean;
+  touched: boolean;
+  valid: boolean | null;
 }
 interface FieldProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
   /** Marks the field invalid when an external validator owns its state. */
@@ -26,14 +34,17 @@ interface FieldProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
   /** Controlled dirty/touched state for integrations with external form state. */
   dirty?: boolean;
   touched?: boolean;
+  /** Marks the field as awaiting asynchronous validation. */
+  pending?: boolean;
   /** Imperative field validation actions. */
   actionsRef?: FieldRoot.Props["actionsRef"];
   children?: ReactNode;
 }
 interface FieldLabelProps extends ComponentPropsWithoutRef<"label"> {
-  htmlFor: string;
+  htmlFor?: string;
 }
-declare const Field$1: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;
+interface FieldControlProps extends ComponentPropsWithoutRef<typeof Field.Control> {}
+declare const FieldControl: import("react").ForwardRefExoticComponent<FieldControlProps & import("react").RefAttributes<HTMLElement>>;
 declare const FieldLabel: import("react").ForwardRefExoticComponent<FieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
 declare const FieldDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
 interface FieldErrorProps extends Omit<ComponentPropsWithoutRef<"p">, "children"> {
@@ -42,6 +53,13 @@ interface FieldErrorProps extends Omit<ComponentPropsWithoutRef<"p">, "children"
 }
 declare const FieldError: import("react").ForwardRefExoticComponent<FieldErrorProps & import("react").RefAttributes<HTMLParagraphElement>>;
 declare function useFieldState(): FieldContextValue;
+declare const Field$1: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<HTMLDivElement>>;
+  Control: import("react").ForwardRefExoticComponent<FieldControlProps & import("react").RefAttributes<HTMLElement>>;
+  Label: import("react").ForwardRefExoticComponent<FieldLabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  Error: import("react").ForwardRefExoticComponent<FieldErrorProps & import("react").RefAttributes<HTMLParagraphElement>>;
+};
 //#endregion
-export { Field$1 as Field, FieldDescription, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, useFieldState };
+export { Field$1 as Field, FieldControl, FieldControlProps, FieldDescription, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, useFieldState };
 //# sourceMappingURL=field.d.ts.map

package/dist/components/field/field.js

@@ -2,15 +2,23 @@
 import { cx } from "../../styled-system/css/cx.js";
 import { field } from "../../styled-system/recipes/field.js";
 import { JaciFormContext } from "../form/form.js";
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useCallback, useContext, useId, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 //#region src/components/field/field.tsx
 const FieldContext = createContext({
+	controlId: void 0,
+	descriptionId: void 0,
+	dirty: false,
+	errorId: void 0,
 	errors: [],
 	insideField: false,
 	invalid: false,
-	name: void 0
+	labelId: void 0,
+	name: void 0,
+	pending: false,
+	touched: false,
+	valid: null
 });
 function normalizeErrors(errors) {
 	if (errors === void 0 || errors === null || errors === false) return [];
@@ -20,51 +28,127 @@ function renderErrors(errors) {
 	if (errors.length <= 1) return errors[0];
 	return /* @__PURE__ */ jsx("ul", { children: errors.map((error, index) => /* @__PURE__ */ jsx("li", { children: error }, typeof error === "string" ? error : index)) });
 }
-const Field$1 = forwardRef(function Field$2({ actionsRef, children, className, dirty, disabled = false, errors: directErrors, invalid: invalidProp = false, name, touched, validate, validationDebounceTime, validationMode, ...props }, ref) {
+const FieldRoot$1 = forwardRef(function Field$2({ actionsRef, children, className, dirty, disabled = false, errors: directErrors, invalid: invalidProp = false, name, pending: pendingProp = false, touched, validate, validationDebounceTime, validationMode, ...props }, ref) {
+	const generatedId = useId();
+	const controlId = `${generatedId}-control`;
+	const labelId = `${generatedId}-label`;
+	const descriptionId = `${generatedId}-description`;
+	const errorId = `${generatedId}-error`;
+	const [pendingValidation, setPendingValidation] = useState(false);
+	const [validationErrors, setValidationErrors] = useState([]);
+	const [validationValid, setValidationValid] = useState(null);
+	const validationSequence = useRef(0);
 	const { errors: formErrors } = useContext(JaciFormContext);
 	const formError = name ? formErrors[name] : void 0;
-	const errors = directErrors === void 0 ? normalizeErrors(formError) : normalizeErrors(directErrors);
+	const externalErrors = directErrors === void 0 ? normalizeErrors(formError) : normalizeErrors(directErrors);
+	const errors = directErrors !== void 0 || formError !== void 0 ? externalErrors : validationErrors;
 	const invalid = invalidProp || errors.length > 0;
+	const pending = pendingProp || pendingValidation;
+	const wrappedValidate = useCallback((value, formValues) => {
+		const sequence = ++validationSequence.current;
+		if (!validate) return null;
+		const result = validate(value, formValues);
+		if (!result || typeof result !== "object" || !("then" in result)) {
+			const resultErrors = normalizeErrors(result);
+			setValidationErrors(resultErrors);
+			setValidationValid(resultErrors.length === 0);
+			setPendingValidation(false);
+			return result;
+		}
+		setValidationErrors([]);
+		setValidationValid(null);
+		setPendingValidation(true);
+		return Promise.resolve(result).then((validationResult) => {
+			if (sequence !== validationSequence.current) return null;
+			const resultErrors = normalizeErrors(validationResult);
+			setValidationErrors(resultErrors);
+			setValidationValid(resultErrors.length === 0);
+			return validationResult;
+		}).finally(() => {
+			if (sequence === validationSequence.current) setPendingValidation(false);
+		});
+	}, [validate]);
 	const styles = field({ invalid });
 	return /* @__PURE__ */ jsx(FieldContext.Provider, {
 		value: {
+			controlId,
+			descriptionId,
+			dirty: dirty ?? false,
+			errorId,
 			errors,
 			insideField: true,
 			invalid,
-			name
+			labelId,
+			name,
+			pending,
+			touched: touched ?? false,
+			valid: invalid ? false : validationValid
 		},
 		children: /* @__PURE__ */ jsx(Field.Root, {
 			...props,
 			ref,
 			actionsRef,
 			className: cx(styles.root, className),
+			"aria-busy": pending || void 0,
+			"data-dirty": dirty || void 0,
 			"data-invalid": invalid || void 0,
 			"data-jaci-component": "field",
+			"data-pending": pending || void 0,
 			"data-slot": "field",
+			"data-touched": touched || void 0,
 			disabled,
 			dirty,
 			invalid,
 			name,
 			touched,
-			validate,
+			...validate ? { validate: wrappedValidate } : {},
 			validationDebounceTime,
 			validationMode,
 			children
 		})
 	});
 });
+const FieldControl = forwardRef(function FieldControl({ "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, className, id, ...props }, ref) {
+	const { controlId, descriptionId, errorId, invalid, labelId, pending, insideField } = useContext(FieldContext);
+	const describedBy = [
+		ariaDescribedBy,
+		descriptionId,
+		invalid ? errorId : void 0
+	].filter(Boolean).join(" ") || void 0;
+	const labelledBy = [ariaLabelledBy, labelId].filter(Boolean).join(" ") || void 0;
+	const controlProps = {
+		...props,
+		"aria-busy": pending || void 0,
+		"aria-describedby": describedBy,
+		"aria-errormessage": ariaErrorMessage ?? (invalid ? errorId : void 0),
+		"aria-invalid": ariaInvalid ?? (invalid || void 0),
+		"aria-labelledby": labelledBy,
+		className,
+		"data-pending": pending || void 0,
+		id: id ?? controlId
+	};
+	if (!insideField) return /* @__PURE__ */ jsx(Field.Control, {
+		...controlProps,
+		ref
+	});
+	return /* @__PURE__ */ jsx(Field.Control, {
+		...controlProps,
+		ref
+	});
+});
 const FieldLabel = forwardRef(function FieldLabel({ children, className, htmlFor, ...props }, ref) {
-	const { insideField, invalid } = useContext(FieldContext);
+	const { controlId, insideField, invalid, labelId } = useContext(FieldContext);
 	const labelProps = {
 		...props,
 		className: cx(field({ invalid }).label, className),
 		"data-slot": "field-label",
-		htmlFor
+		htmlFor: htmlFor ?? controlId,
+		id: props.id ?? labelId
 	};
 	if (!insideField) return /* @__PURE__ */ jsx("label", {
 		...labelProps,
 		ref,
-		htmlFor,
+		htmlFor: htmlFor ?? controlId,
 		children
 	});
 	return /* @__PURE__ */ jsx(Field.Label, {
@@ -74,11 +158,12 @@ const FieldLabel = forwardRef(function FieldLabel({ children, className, htmlFor
 	});
 });
 const FieldDescription = forwardRef(function FieldDescription({ className, ...props }, ref) {
-	const { insideField, invalid } = useContext(FieldContext);
+	const { descriptionId, insideField, invalid } = useContext(FieldContext);
 	const descriptionProps = {
 		...props,
 		className: cx(field({ invalid }).description, className),
-		"data-slot": "field-description"
+		"data-slot": "field-description",
+		id: props.id ?? descriptionId
 	};
 	if (!insideField) return /* @__PURE__ */ jsx("p", {
 		...descriptionProps,
@@ -90,7 +175,7 @@ const FieldDescription = forwardRef(function FieldDescription({ className, ...pr
 	});
 });
 const FieldError = forwardRef(function FieldError({ children, className, match, ...props }, ref) {
-	const { errors, insideField, invalid } = useContext(FieldContext);
+	const { errorId, errors, insideField, invalid } = useContext(FieldContext);
 	const content = children ?? renderErrors(errors);
 	if (!insideField) {
 		if (content === void 0 || content === null || content === false) return null;
@@ -99,6 +184,7 @@ const FieldError = forwardRef(function FieldError({ children, className, match,
 			ref,
 			className: cx(field({ invalid }).error, className),
 			"data-slot": "field-error",
+			id: props.id ?? errorId,
 			role: "alert",
 			children: content
 		});
@@ -108,6 +194,7 @@ const FieldError = forwardRef(function FieldError({ children, className, match,
 		ref,
 		className: cx(field({ invalid }).error, className),
 		"data-slot": "field-error",
+		id: props.id ?? errorId,
 		match: match ?? (invalid ? true : void 0),
 		render: /* @__PURE__ */ jsx("p", {}),
 		role: "alert",
@@ -117,7 +204,14 @@ const FieldError = forwardRef(function FieldError({ children, className, match,
 function useFieldState() {
 	return useContext(FieldContext);
 }
+const Field$1 = Object.assign(FieldRoot$1, {
+	Root: FieldRoot$1,
+	Control: FieldControl,
+	Label: FieldLabel,
+	Description: FieldDescription,
+	Error: FieldError
+});
 //#endregion
-export { Field$1 as Field, FieldDescription, FieldError, FieldLabel, useFieldState };
+export { Field$1 as Field, FieldControl, FieldDescription, FieldError, FieldLabel, useFieldState };
 
 //# sourceMappingURL=field.js.map