@vritti/quantum-ui 0.1.19 → 0.1.21

package/dist/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
-import { F as Field, h as FieldContent, a as FieldLabel, b as FieldDescription, c as FieldError } from './field.js';
+import { F as Field, a as FieldContent, e as FieldLabel, b as FieldDescription, c as FieldError } from './field.js';
 import { u as useComposedRefs } from './index2.js';
 import { c as createContextScope } from './index4.js';
 import { P as Primitive } from './index5.js';

package/dist/Form.d.ts

@@ -151,6 +151,10 @@ export declare function FieldLegend({
     )
 }
 
+declare interface FieldMapping {
+    [apiField: string]: string;
+}
+
 export declare function FieldSeparator({
     children,
     className,
@@ -232,7 +236,7 @@ declare const fieldVariants = cva(
 }
 );
 
-export declare function Form<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = TFieldValues>({ form, onSubmit, children, showRootError, rootErrorPosition, rootErrorClassName, csrfEndpoint, ...props }: FormProps<TFieldValues, TContext, TTransformedValues>): JSX.Element;
+export declare function Form<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = TFieldValues>({ form, onSubmit, children, showRootError, rootErrorPosition, rootErrorClassName, fieldMapping, ...props }: FormProps<TFieldValues, TContext, TTransformedValues>): JSX.Element;
 
 export declare namespace Form {
     var displayName: string;
@@ -245,7 +249,7 @@ export declare interface FormProps<TFieldValues extends FieldValues = FieldValue
     showRootError?: boolean;
     rootErrorPosition?: 'top' | 'bottom';
     rootErrorClassName?: string;
-    csrfEndpoint?: string;
+    fieldMapping?: FieldMapping;
 }
 
 declare function Label({ className, ...props }: React_2.ComponentProps<typeof LabelPrimitive.Root>) {

package/dist/Form.js

@@ -1,9 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
-import { C as Checkbox } from './Checkbox.js';
 import { c as FieldError } from './field.js';
 import { c as cn } from './utils.js';
-import { axios, setCsrfToken, clearCsrfToken } from './utils/axios.js';
+import { C as Checkbox } from './Checkbox.js';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -603,6 +602,49 @@ function useController(props) {
  */
 const Controller = (props) => props.render(useController(props));
 
+function mapApiErrorsToForm(error, form, options = {}) {
+  const {
+    fieldMapping = {},
+    setRootError = true
+  } = options;
+  if (!error || typeof error !== "object") {
+    if (setRootError) {
+      form.setError("root", {
+        type: "manual",
+        message: "An error occurred"
+      });
+    }
+    return;
+  }
+  const errorData = error?.response?.data || error;
+  const apiError = errorData;
+  const generalMessage = apiError.message || apiError.error;
+  let hasFieldErrors = false;
+  if (apiError.errors && Array.isArray(apiError.errors)) {
+    for (const errorItem of apiError.errors) {
+      if (errorItem.field) {
+        const formField = fieldMapping[errorItem.field] || errorItem.field;
+        form.setError(formField, {
+          type: "manual",
+          message: errorItem.message
+        });
+        hasFieldErrors = true;
+      } else if (errorItem.message && setRootError) {
+        form.setError("root", {
+          type: "manual",
+          message: errorItem.message
+        });
+      }
+    }
+  }
+  if (!hasFieldErrors && generalMessage && setRootError) {
+    form.setError("root", {
+      type: "manual",
+      message: generalMessage
+    });
+  }
+}
+
 function processChildren(children, control) {
   return React__default.Children.map(children, (child) => {
     if (!React__default.isValidElement(child)) {
@@ -656,29 +698,24 @@ function Form({
   showRootError = true,
   rootErrorPosition = "bottom",
   rootErrorClassName,
-  csrfEndpoint,
+  fieldMapping,
   ...props
 }) {
-  const handleSubmit = form.handleSubmit(onSubmit);
-  React__default.useEffect(() => {
-    if (csrfEndpoint) {
-      axios.get(csrfEndpoint).then((response) => {
-        const token = response.data?.csrfToken;
-        if (token) {
-          setCsrfToken(token);
-        } else {
-          console.warn("[Form] CSRF endpoint did not return a csrfToken field");
-        }
-      }).catch((error) => {
-        console.error("[Form] Failed to fetch CSRF token:", error);
-      });
-    }
-    return () => {
-      if (csrfEndpoint) {
-        clearCsrfToken();
+  const wrappedOnSubmit = React__default.useCallback(
+    async (data) => {
+      try {
+        await onSubmit(data);
+      } catch (error) {
+        mapApiErrorsToForm(error, form, {
+          fieldMapping,
+          setRootError: showRootError
+        });
+        console.error("[Form Submission Error]", error);
       }
-    };
-  }, [csrfEndpoint]);
+    },
+    [onSubmit, fieldMapping, form, showRootError]
+  );
+  const handleSubmit = form.handleSubmit(wrappedOnSubmit);
   const processedChildren = processChildren(children, form.control);
   return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, ...props, children: [
     showRootError && rootErrorPosition === "top" && form.formState.errors.root && /* @__PURE__ */ jsx(