@page-speed/forms 0.5.0 → 0.5.2

package/README.md

@@ -100,6 +100,35 @@ export function ContactForm() {
 }
 ```
 
+### Grouped Form Configuration
+
+`Form` supports both classic props and grouped config objects for cleaner callsites.
+
+```tsx
+import * as React from "react";
+import { Form } from "@page-speed/forms";
+
+<Form
+  form={form}
+  notificationConfig={{
+    successMessage: "Thanks, submission received.",
+    submissionError,
+  }}
+  styleConfig={{
+    formClassName: "space-y-6",
+    successMessageClassName: "bg-emerald-600 text-white",
+    errorMessageClassName: "bg-red-600 text-white",
+  }}
+  formConfig={{
+    endpoint: "/api/contact",
+    method: "post",
+    submissionConfig: {
+      behavior: "showConfirmation",
+    },
+  }}
+/>;
+```
+
 ## Package Entry Points
 
 ### Main
@@ -123,7 +152,6 @@ Exports:
 - `DatePicker`
 - `DateRangePicker`
 - `TimePicker`
-- `RichTextEditor`
 - `FileInput`
 
 ### Validation
@@ -154,7 +182,7 @@ Exports:
 - Close on outside click
 - Search support
 - Option groups
-- Selected options inside the menu use muted highlight styles
+- Selected options inside the menu use accent highlight styles
 
 ## Styling (Tailwind 4 + Semantic Tokens)
 

package/dist/core.cjs

@@ -1,10 +1,12 @@
 'use strict';
 
-var React3 = require('react');
+var React4 = require('react');
 var react = require('@legendapp/state/react');
 var useMap = require('@opensite/hooks/useMap');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var radixUi = require('radix-ui');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -24,7 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 
 // src/core/useForm.ts
 function useForm(options) {
@@ -47,9 +49,9 @@ function useForm(options) {
     // Create a copy to prevent reference sharing
     hasValidated: {}
   });
-  const validationInProgress = React3.useRef(/* @__PURE__ */ new Set());
+  const validationInProgress = React4.useRef(/* @__PURE__ */ new Set());
   const [, fieldMetadataActions] = useMap.useMap();
-  const validateField = React3.useCallback(
+  const validateField = React4.useCallback(
     async (field) => {
       const validators = validationSchema?.[field];
       if (!validators) return void 0;
@@ -86,7 +88,7 @@ function useForm(options) {
     },
     [validationSchema, state$, fieldMetadataActions]
   );
-  const validateForm = React3.useCallback(async () => {
+  const validateForm = React4.useCallback(async () => {
     if (!validationSchema) return {};
     const fields = Object.keys(validationSchema);
     const errors2 = {};
@@ -101,7 +103,7 @@ function useForm(options) {
     state$.errors.set(errors2);
     return errors2;
   }, [validationSchema, validateField, state$]);
-  const setFieldValue = React3.useCallback(
+  const setFieldValue = React4.useCallback(
     (field, value) => {
       state$.values[field].set(value);
       const shouldRevalidate = revalidateOn === "onChange" && state$.hasValidated[String(field)].get();
@@ -114,7 +116,7 @@ function useForm(options) {
     },
     [state$, revalidateOn, validationSchema, validateField, debug]
   );
-  const setFieldTouched = React3.useCallback(
+  const setFieldTouched = React4.useCallback(
     (field, touched2) => {
       state$.touched[field].set(touched2);
       if (touched2 && validateOn === "onBlur" && validationSchema?.[field]) {
@@ -127,7 +129,7 @@ function useForm(options) {
     },
     [state$, validateOn, validationSchema, validateField, debug]
   );
-  const resetForm = React3.useCallback(() => {
+  const resetForm = React4.useCallback(() => {
     state$.values.set(state$.initialValues.get());
     state$.errors.set({});
     state$.touched.set({});
@@ -139,7 +141,7 @@ function useForm(options) {
       console.log("[useForm] Form reset");
     }
   }, [state$, fieldMetadataActions, debug]);
-  const handleSubmit = React3.useCallback(
+  const handleSubmit = React4.useCallback(
     async (e) => {
       e?.preventDefault();
       if (debug) {
@@ -200,7 +202,7 @@ function useForm(options) {
       debug
     ]
   );
-  const getFieldProps = React3.useCallback(
+  const getFieldProps = React4.useCallback(
     (field) => {
       return {
         name: String(field),
@@ -211,7 +213,7 @@ function useForm(options) {
     },
     [state$, setFieldValue, setFieldTouched]
   );
-  const getFieldMeta = React3.useCallback(
+  const getFieldMeta = React4.useCallback(
     (field) => {
       const fieldKey = String(field);
       const metadata = fieldMetadataActions.get(fieldKey);
@@ -270,13 +272,13 @@ function useForm(options) {
     getFieldMeta
   };
 }
-var FormContext = React3__namespace.createContext(null);
+var FormContext = React4__namespace.createContext(null);
 FormContext.displayName = "FormContext";
 
 // src/core/useField.ts
 function useField(options) {
   const { name, validate, transform } = options;
-  const form = React3.useContext(FormContext);
+  const form = React4.useContext(FormContext);
   if (!form) {
     throw new Error(
       "useField must be used within a FormContext. Wrap your component with <Form> or use useForm's getFieldProps instead."
@@ -305,20 +307,20 @@ function useField(options) {
   };
   const meta = form.getFieldMeta(name);
   const helpers = {
-    setValue: React3.useCallback(
+    setValue: React4.useCallback(
       (value) => {
         const transformedValue = transform ? transform(value) : value;
         form.setFieldValue(name, transformedValue);
       },
       [name, transform, form]
     ),
-    setTouched: React3.useCallback(
+    setTouched: React4.useCallback(
       (touched) => {
         form.setFieldTouched(name, touched);
       },
       [name, form]
     ),
-    setError: React3.useCallback(
+    setError: React4.useCallback(
       (error) => {
         form.setFieldError(name, error);
       },
@@ -338,7 +340,7 @@ function cn(...inputs) {
 // src/core/form-feedback.tsx
 function renderMessage(message, fallbackClassName, className) {
   if (typeof message === "string") {
-    return /* @__PURE__ */ React3__namespace.createElement(
+    return /* @__PURE__ */ React4__namespace.createElement(
       "p",
       {
         className: cn(
@@ -349,7 +351,7 @@ function renderMessage(message, fallbackClassName, className) {
       message
     );
   }
-  return /* @__PURE__ */ React3__namespace.createElement("div", { className: cn(fallbackClassName, className) }, message);
+  return /* @__PURE__ */ React4__namespace.createElement("div", { className: cn(fallbackClassName, className) }, message);
 }
 function FormFeedback({
   successMessage,
@@ -360,7 +362,7 @@ function FormFeedback({
   if (!successMessage && !submissionError) {
     return null;
   }
-  return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, successMessage ? /* @__PURE__ */ React3__namespace.createElement(
+  return /* @__PURE__ */ React4__namespace.createElement(React4__namespace.Fragment, null, successMessage ? /* @__PURE__ */ React4__namespace.createElement(
     "div",
     {
       className: cn(
@@ -375,7 +377,7 @@ function FormFeedback({
       "text-primary-foreground",
       "text-primary-foreground"
     )
-  ) : null, submissionError ? /* @__PURE__ */ React3__namespace.createElement(
+  ) : null, submissionError ? /* @__PURE__ */ React4__namespace.createElement(
     "div",
     {
       className: cn(
@@ -393,6 +395,54 @@ function FormFeedback({
   ) : null);
 }
 FormFeedback.displayName = "FormFeedback";
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? radixUi.Slot.Root : "button";
+  return /* @__PURE__ */ React4__namespace.createElement(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
 
 // src/core/Form.tsx
 function Form({
@@ -400,7 +450,7 @@ function Form({
   children,
   className,
   action,
-  method = "post",
+  method,
   noValidate = true,
   submissionConfig,
   successMessage,
@@ -408,9 +458,12 @@ function Form({
   successMessageClassName,
   errorMessageClassName,
   onNewSubmission,
+  notificationConfig,
+  styleConfig,
+  formConfig,
   ...props
 }) {
-  const handleFormSubmit = React3__namespace.useCallback(
+  const handleFormSubmit = React4__namespace.useCallback(
     async (e) => {
       try {
         await form.handleSubmit(e);
@@ -419,71 +472,102 @@ function Form({
     },
     [form]
   );
-  const behavior = submissionConfig?.behavior || "showConfirmation";
-  const shouldManageSubmissionUi = submissionConfig !== void 0 || successMessage !== void 0 || successMessageClassName !== void 0 || errorMessageClassName !== void 0 || submissionError != null || onNewSubmission !== void 0;
-  const hasSubmissionError = Boolean(submissionError);
+  const resolvedClassName = className ?? styleConfig?.formClassName;
+  const resolvedAction = action ?? formConfig?.endpoint;
+  const resolvedMethod = method ?? formConfig?.method ?? "post";
+  const resolvedSubmissionConfig = submissionConfig ?? formConfig?.submissionConfig;
+  const resolvedSuccessMessage = successMessage ?? notificationConfig?.successMessage;
+  const resolvedSubmissionError = submissionError ?? notificationConfig?.submissionError;
+  const resolvedSuccessMessageClassName = successMessageClassName ?? styleConfig?.successMessageClassName;
+  const resolvedErrorMessageClassName = errorMessageClassName ?? styleConfig?.errorMessageClassName;
+  const behavior = resolvedSubmissionConfig?.behavior || "showConfirmation";
+  const shouldManageSubmissionUi = resolvedSubmissionConfig !== void 0 || resolvedSuccessMessage !== void 0 || resolvedSuccessMessageClassName !== void 0 || resolvedErrorMessageClassName !== void 0 || resolvedSubmissionError != null || onNewSubmission !== void 0;
+  const hasSubmissionError = Boolean(resolvedSubmissionError);
   const isSubmissionSuccessful = shouldManageSubmissionUi && form.status === "success" && !hasSubmissionError;
   const defaultSuccessMessage = behavior === "redirect" ? "Form submitted successfully. Redirecting..." : "Thank you. Your form has been submitted successfully.";
-  const resolvedSuccessMessage = successMessage ?? defaultSuccessMessage;
-  const shouldRenderCustomComponent = isSubmissionSuccessful && behavior === "renderCustomComponent" && Boolean(submissionConfig?.customComponent);
-  const newSubmissionAction = submissionConfig?.newFormSubmissionAction;
+  const finalSuccessMessage = resolvedSuccessMessage ?? defaultSuccessMessage;
+  const shouldRenderCustomComponent = isSubmissionSuccessful && behavior === "renderCustomComponent" && Boolean(resolvedSubmissionConfig?.customComponent);
+  const newSubmissionAction = resolvedSubmissionConfig?.newFormSubmissionAction;
   const showNewSubmissionAction = isSubmissionSuccessful && (typeof newSubmissionAction?.enable === "boolean" ? newSubmissionAction.enable : Boolean(newSubmissionAction?.label));
   const newSubmissionLabel = newSubmissionAction?.label ?? "Submit another response";
-  const handleNewSubmission = React3__namespace.useCallback(() => {
+  const handleNewSubmission = React4__namespace.useCallback(() => {
     form.resetForm();
     onNewSubmission?.();
   }, [form, onNewSubmission]);
-  return /* @__PURE__ */ React3__namespace.createElement(FormContext.Provider, { value: form }, /* @__PURE__ */ React3__namespace.createElement(
+  return /* @__PURE__ */ React4__namespace.createElement(FormContext.Provider, { value: form }, /* @__PURE__ */ React4__namespace.createElement(
     "form",
     {
       onSubmit: handleFormSubmit,
-      action,
-      method,
+      action: resolvedAction,
+      method: resolvedMethod,
       noValidate,
-      className,
+      className: resolvedClassName,
       ...props
     },
-    isSubmissionSuccessful ? /* @__PURE__ */ React3__namespace.createElement("div", { className: "space-y-4" }, shouldRenderCustomComponent ? submissionConfig?.customComponent : /* @__PURE__ */ React3__namespace.createElement(
+    isSubmissionSuccessful ? /* @__PURE__ */ React4__namespace.createElement("div", { className: "space-y-4" }, shouldRenderCustomComponent ? resolvedSubmissionConfig?.customComponent : /* @__PURE__ */ React4__namespace.createElement(
       FormFeedback,
       {
-        successMessage: resolvedSuccessMessage,
-        successMessageClassName
+        successMessage: finalSuccessMessage,
+        successMessageClassName: resolvedSuccessMessageClassName
       }
-    ), showNewSubmissionAction ? /* @__PURE__ */ React3__namespace.createElement(
-      "button",
+    ), showNewSubmissionAction ? /* @__PURE__ */ React4__namespace.createElement(
+      Button,
       {
         type: "button",
-        onClick: handleNewSubmission,
-        className: cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-md border border-input bg-transparent px-4 py-2 text-sm font-medium shadow-sm transition-colors",
-          "hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-        )
+        variant: "outline",
+        onClick: handleNewSubmission
       },
       newSubmissionLabel
-    ) : null) : /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, children, submissionError ? /* @__PURE__ */ React3__namespace.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React3__namespace.createElement(
+    ) : null) : /* @__PURE__ */ React4__namespace.createElement(React4__namespace.Fragment, null, children, resolvedSubmissionError ? /* @__PURE__ */ React4__namespace.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React4__namespace.createElement(
       FormFeedback,
       {
-        submissionError,
-        errorMessageClassName
+        submissionError: resolvedSubmissionError,
+        errorMessageClassName: resolvedErrorMessageClassName
       }
     )) : null)
   ));
 }
 Form.displayName = "Form";
-var Field = React3__namespace.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React3__namespace.createElement(
-    "div",
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React4__namespace.createElement(
+    radixUi.Label.Root,
     {
-      ref,
-      "data-slot": "field",
-      className: cn("flex flex-col gap-1.5", className),
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
       ...props
     }
   );
-});
+}
+
+// src/components/ui/field.tsx
+var Field = React4__namespace.forwardRef(
+  ({ className, orientation = "vertical", invalid = false, ...props }, ref) => {
+    return /* @__PURE__ */ React4__namespace.createElement(
+      "div",
+      {
+        ref,
+        "data-slot": "field",
+        "data-orientation": orientation,
+        "data-invalid": invalid || void 0,
+        className: cn(
+          "flex",
+          orientation === "horizontal" ? "items-center gap-2" : "flex-col gap-1.5",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
 Field.displayName = "Field";
-var FieldGroup = React3__namespace.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React3__namespace.createElement(
+var FieldGroup = React4__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React4__namespace.createElement(
     "div",
     {
       ref,
@@ -494,9 +578,9 @@ var FieldGroup = React3__namespace.forwardRef(({ className, ...props }, ref) =>
   );
 });
 FieldGroup.displayName = "FieldGroup";
-var FieldLabel = React3__namespace.forwardRef(({ className, required, children, ...props }, ref) => {
-  return /* @__PURE__ */ React3__namespace.createElement(
-    "label",
+var FieldLabel = React4__namespace.forwardRef(({ className, required, children, ...props }, ref) => {
+  return /* @__PURE__ */ React4__namespace.createElement(
+    Label,
     {
       ref,
       "data-slot": "field-label",
@@ -508,12 +592,12 @@ var FieldLabel = React3__namespace.forwardRef(({ className, required, children,
       ...props
     },
     children,
-    required && /* @__PURE__ */ React3__namespace.createElement("span", { className: "text-destructive ml-1" }, "*")
+    required && /* @__PURE__ */ React4__namespace.createElement("span", { className: "text-destructive ml-1" }, "*")
   );
 });
 FieldLabel.displayName = "FieldLabel";
-var FieldDescription = React3__namespace.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React3__namespace.createElement(
+var FieldDescription = React4__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React4__namespace.createElement(
     "p",
     {
       ref,
@@ -524,8 +608,8 @@ var FieldDescription = React3__namespace.forwardRef(({ className, ...props }, re
   );
 });
 FieldDescription.displayName = "FieldDescription";
-var FieldError = React3__namespace.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ React3__namespace.createElement(
+var FieldError = React4__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React4__namespace.createElement(
     "p",
     {
       ref,
@@ -548,7 +632,7 @@ var FieldFeedback = ({
 }) => {
   const errorText = Array.isArray(error) ? error.join(", ") : error;
   if (!errorText || !shouldRenderError) return null;
-  return /* @__PURE__ */ React3__namespace.createElement(FieldError, { id: errorId, className: errorClassName }, errorText);
+  return /* @__PURE__ */ React4__namespace.createElement(FieldError, { id: errorId, className: errorClassName }, errorText);
 };
 var LabelGroup = ({
   labelHtmlFor,
@@ -565,40 +649,38 @@ var LabelGroup = ({
     variant === "legend" ? "mb-1.5" : "mb-1 block",
     primaryClassName
   );
-  const requiredIndicator = required ? /* @__PURE__ */ React3__namespace.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
+  const requiredIndicator = required && variant !== "label" ? /* @__PURE__ */ React4__namespace.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
   let primaryElement = null;
   if (primary) {
     if (variant === "label") {
-      primaryElement = /* @__PURE__ */ React3__namespace.createElement(
-        "label",
+      primaryElement = /* @__PURE__ */ React4__namespace.createElement(
+        FieldLabel,
         {
           htmlFor: labelHtmlFor,
-          "data-slot": "field-label",
+          required,
           className: primaryClasses
         },
-        primary,
-        requiredIndicator
+        primary
       );
     } else if (variant === "legend") {
-      primaryElement = /* @__PURE__ */ React3__namespace.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
+      primaryElement = /* @__PURE__ */ React4__namespace.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
     } else {
-      primaryElement = /* @__PURE__ */ React3__namespace.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
+      primaryElement = /* @__PURE__ */ React4__namespace.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
     }
   }
-  const secondaryElement = secondary ? /* @__PURE__ */ React3__namespace.createElement(
-    "p",
+  const secondaryElement = secondary ? /* @__PURE__ */ React4__namespace.createElement(
+    FieldDescription,
     {
-      "data-slot": "field-description",
       id: secondaryId,
-      className: cn("text-sm leading-normal font-normal", secondaryClassName)
+      className: cn("leading-normal font-normal", secondaryClassName)
     },
     secondary
   ) : null;
   if (!primaryElement && !secondaryElement) return null;
   if (variant === "legend") {
-    return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, primaryElement, secondaryElement);
+    return /* @__PURE__ */ React4__namespace.createElement(React4__namespace.Fragment, null, primaryElement, secondaryElement);
   }
-  return /* @__PURE__ */ React3__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, primaryElement, secondaryElement);
+  return /* @__PURE__ */ React4__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, primaryElement, secondaryElement);
 };
 
 // src/core/Field.tsx
@@ -615,30 +697,40 @@ function Field2({
 }) {
   const fieldState = useField({ name, validate });
   const { meta } = fieldState;
-  const hasError = React3__namespace.useMemo(() => {
+  const hasError = React4__namespace.useMemo(() => {
     return showError && meta.touched && meta.error ? true : false;
   }, [meta?.touched, meta?.error, showError]);
   const errorId = `${name}-error`;
   const descriptionId = `${name}-description`;
-  return /* @__PURE__ */ React3__namespace.createElement("div", { className, "data-field": name }, /* @__PURE__ */ React3__namespace.createElement(
-    LabelGroup,
+  return /* @__PURE__ */ React4__namespace.createElement(
+    Field,
     {
-      labelHtmlFor: name,
-      required,
-      variant: "label",
-      secondaryId: descriptionId,
-      secondary: description,
-      primary: label
-    }
-  ), /* @__PURE__ */ React3__namespace.createElement("div", null, typeof children === "function" ? children(fieldState) : children), /* @__PURE__ */ React3__namespace.createElement(
-    FieldFeedback,
-    {
-      errorId,
-      errorClassName,
-      shouldRenderError: hasError,
-      error: meta.error
-    }
-  ));
+      className,
+      "data-field": name,
+      invalid: hasError
+    },
+    /* @__PURE__ */ React4__namespace.createElement(
+      LabelGroup,
+      {
+        labelHtmlFor: name,
+        required,
+        variant: "label",
+        secondaryId: descriptionId,
+        secondary: description,
+        primary: label
+      }
+    ),
+    /* @__PURE__ */ React4__namespace.createElement("div", { "data-slot": "field-control" }, typeof children === "function" ? children(fieldState) : children),
+    /* @__PURE__ */ React4__namespace.createElement(
+      FieldFeedback,
+      {
+        errorId,
+        errorClassName,
+        shouldRenderError: hasError,
+        error: meta.error
+      }
+    )
+  );
 }
 Field2.displayName = "Field";