@vritti/quantum-ui 0.1.23 → 0.2.1

package/dist/Form.d.ts

@@ -1,19 +1,19 @@
 import { Controller } from 'react-hook-form';
-import { default as default_2 } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { JSX } from 'react/jsx-runtime';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as React_2 from 'react';
 import { UseFormReturn } from 'react-hook-form';
+import { UseMutationResult } from '@tanstack/react-query';
 import { VariantProps } from 'class-variance-authority';
 
 export { Controller }
 
 export declare function Field({
     className,
-    orientation = "vertical",
+    orientation = 'vertical',
     ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
     return (
     <div
     role="group"
@@ -22,35 +22,32 @@ export declare function Field({
     className={cn(fieldVariants({ orientation }), className)}
         {...props}
     />
-    )
+    );
 }
 
-export declare function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+export declare function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
     return (
     <div
     data-slot="field-content"
-    className={cn(
-        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className
-        )}
+    className={cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className)}
         {...props}
     />
-    )
+    );
 }
 
-export declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+export declare function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
     return (
     <p
     data-slot="field-description"
     className={cn(
-        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
-        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
         )}
         {...props}
     />
-    )
+    );
 }
 
 export declare function FieldError({
@@ -58,97 +55,86 @@ export declare function FieldError({
     children,
     errors,
     ...props
-}: React.ComponentProps<"div"> & {
-    errors?: Array<{ message?: string } | undefined>
+}: React.ComponentProps<'div'> & {
+    errors?: Array<{ message?: string } | undefined>;
 }) {
     const content = useMemo(() => {
         if (children) {
-            return children
+            return children;
         }
 
         if (!errors?.length) {
-            return null
+            return null;
         }
 
-        if (errors?.length == 1) {
-            return errors[0]?.message
+        if (errors?.length === 1) {
+            return errors[0]?.message;
         }
 
         return (
         <ul className="ml-4 flex list-disc flex-col gap-1">
-            {errors.map(
-            (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
-            )}
+            {errors.map((error) => error?.message && <li key={error.message}>{error.message}</li>)}
         </ul>
-        )
-    }, [children, errors])
+        );
+    }, [children, errors]);
 
     if (!content) {
-        return null
+        return null;
     }
 
     return (
     <div
     role="alert"
     data-slot="field-error"
-    className={cn("text-destructive text-sm font-normal", className)}
+    className={cn('text-destructive text-sm font-normal', className)}
         {...props}
     >
         {content}
     </div>
-    )
+    );
 }
 
-export declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+export declare function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
     return (
     <div
     data-slot="field-group"
     className={cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-2 data-[slot=checkbox-group]:gap-1 [&>[data-slot=field-group]]:gap-2",
-        className
+        'group/field-group @container/field-group flex w-full flex-col gap-2 data-[slot=checkbox-group]:gap-1 [&>[data-slot=field-group]]:gap-2',
+        className,
         )}
         {...props}
     />
-    )
+    );
 }
 
-export declare function FieldLabel({
-    className,
-    ...props
-}: React.ComponentProps<typeof Label>) {
+export declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
     return (
     <Label
     data-slot="field-label"
     className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
-        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
-        className
+        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+        className,
         )}
         {...props}
     />
-    )
+    );
 }
 
 export declare function FieldLegend({
     className,
-    variant = "legend",
+    variant = 'legend',
     ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
     return (
     <legend
     data-slot="field-legend"
     data-variant={variant}
-    className={cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
-        className
-        )}
+    className={cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', className)}
         {...props}
     />
-    )
+    );
 }
 
 declare interface FieldMapping {
@@ -159,17 +145,14 @@ export declare function FieldSeparator({
     children,
     className,
     ...props
-}: React.ComponentProps<"div"> & {
-    children?: React.ReactNode
+}: React.ComponentProps<'div'> & {
+    children?: React.ReactNode;
 }) {
     return (
     <div
     data-slot="field-separator"
     data-content={!!children}
-    className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
-        )}
+    className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}
         {...props}
     >
     <Separator className="absolute inset-0 top-1/2" />
@@ -182,83 +165,82 @@ export declare function FieldSeparator({
         </span>
         )}
     </div>
-    )
+    );
 }
 
-export declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+export declare function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
     return (
     <fieldset
     data-slot="field-set"
     className={cn(
-        "flex flex-col gap-4",
-        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
+        'flex flex-col gap-4',
+        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        className,
         )}
         {...props}
     />
-    )
+    );
 }
 
-export declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+export declare function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
     return (
     <div
     data-slot="field-label"
     className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
-        className
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+        className,
         )}
         {...props}
     />
-    )
+    );
 }
 
-declare const fieldVariants = cva(
-"group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
-    {
+declare const fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-destructive', {
     variants: {
         orientation: {
-            vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+            vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
             horizontal: [
-            "flex-row items-center",
-            "[&>[data-slot=field-label]]:flex-auto",
-            "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            'flex-row items-center',
+            '[&>[data-slot=field-label]]:flex-auto',
+            'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
             ],
             responsive: [
-            "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
-            "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-            "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+            '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+            '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
             ],
         },
     },
     defaultVariants: {
-        orientation: "vertical",
+        orientation: 'vertical',
     },
-}
-);
+});
 
-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 function Form<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = TFieldValues, TMutationData = unknown, TMutationError = Error, TMutationVariables = any>({ form, onSubmit, children, showRootError, rootErrorPosition, rootErrorClassName, fieldMapping, mutation, transformSubmit, ...props }: FormProps<TFieldValues, TContext, TTransformedValues, TMutationData, TMutationError, TMutationVariables>): JSX.Element;
 
 export declare namespace Form {
     var displayName: string;
 }
 
-export declare interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = TFieldValues> extends Omit<default_2.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+export declare interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = TFieldValues, TMutationData = unknown, TMutationError = Error, TMutationVariables = any> extends Omit<React_2.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
     form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
-    onSubmit: Parameters<UseFormReturn<TFieldValues, TContext, TTransformedValues>['handleSubmit']>[0];
-    children: default_2.ReactNode;
+    onSubmit?: Parameters<UseFormReturn<TFieldValues, TContext, TTransformedValues>['handleSubmit']>[0];
+    children: React_2.ReactNode;
     showRootError?: boolean;
     rootErrorPosition?: 'top' | 'bottom';
     rootErrorClassName?: string;
     fieldMapping?: FieldMapping;
+    mutation?: UseMutationResult<TMutationData, TMutationError, TMutationVariables, unknown>;
+    transformSubmit?: (data: TTransformedValues extends undefined ? TFieldValues : TTransformedValues) => TMutationVariables;
 }
 
 declare function Label({ className, ...props }: React_2.ComponentProps<typeof LabelPrimitive.Root>) {
     return (
     <LabelPrimitive.Root
-    data-slot='label'
+    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
+        className,
         )}
         {...props}
     />

package/dist/Form.js

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
 import React__default from 'react';
 import { c as FieldError } from './field.js';
 import { c as cn } from './utils.js';
+import { B as Button } from './Button.js';
 import { C as Checkbox } from './Checkbox.js';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
@@ -603,10 +605,7 @@ function useController(props) {
 const Controller = (props) => props.render(useController(props));
 
 function mapApiErrorsToForm(error, form, options = {}) {
-  const {
-    fieldMapping = {},
-    setRootError = true
-  } = options;
+  const { fieldMapping = {}, setRootError = true } = options;
   if (!error || typeof error !== "object") {
     if (setRootError) {
       form.setError("root", {
@@ -645,13 +644,13 @@ function mapApiErrorsToForm(error, form, options = {}) {
   }
 }
 
-function processChildren(children, control) {
-  return React__default.Children.map(children, (child) => {
-    if (!React__default.isValidElement(child)) {
+function processChildren(children, control, isSubmitting) {
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
       return child;
     }
     const childProps = child.props;
-    const isFragment = child.type === React__default.Fragment;
+    const isFragment = child.type === React.Fragment;
     if (!isFragment && childProps.name && typeof childProps.name === "string") {
       const name = childProps.name;
       return /* @__PURE__ */ jsx(
@@ -667,7 +666,7 @@ function processChildren(children, control) {
               onBlur: field.onBlur,
               ref: field.ref
             } : field;
-            return React__default.cloneElement(child, {
+            return React.cloneElement(child, {
               ...childProps,
               ...fieldProps,
               error: fieldState.error?.message || (fieldState.error ? "Invalid" : void 0),
@@ -679,13 +678,22 @@ function processChildren(children, control) {
         name
       );
     }
+    if (childProps.type === "submit") {
+      const isButtonElement = child.type === Button || typeof child.type === "function" && child.type.displayName === "Button";
+      if (isButtonElement) {
+        return React.cloneElement(child, {
+          ...childProps,
+          isLoading: isSubmitting
+        });
+      }
+    }
     if (isFragment) {
-      return processChildren(childProps.children, control);
+      return processChildren(childProps.children, control, isSubmitting);
     }
     if (childProps.children != null) {
-      return React__default.cloneElement(child, {
+      return React.cloneElement(child, {
         ...childProps,
-        children: processChildren(childProps.children, control)
+        children: processChildren(childProps.children, control, isSubmitting)
       });
     }
     return child;
@@ -699,12 +707,20 @@ function Form({
   rootErrorPosition = "bottom",
   rootErrorClassName,
   fieldMapping,
+  mutation,
+  transformSubmit,
   ...props
 }) {
-  const wrappedOnSubmit = React__default.useCallback(
+  const isSubmitting = form.formState.isSubmitting || (mutation?.isPending ?? false);
+  const wrappedOnSubmit = React.useCallback(
     async (data) => {
       try {
-        await onSubmit(data);
+        if (mutation) {
+          const variables = transformSubmit ? transformSubmit(data) : data;
+          await mutation.mutateAsync(variables);
+        } else if (onSubmit) {
+          await onSubmit(data);
+        }
       } catch (error) {
         mapApiErrorsToForm(error, form, {
           fieldMapping,
@@ -713,26 +729,14 @@ function Form({
         console.error("[Form Submission Error]", error);
       }
     },
-    [onSubmit, fieldMapping, form, showRootError]
+    [onSubmit, mutation, transformSubmit, fieldMapping, form, showRootError]
   );
   const handleSubmit = form.handleSubmit(wrappedOnSubmit);
-  const processedChildren = processChildren(children, form.control);
+  const processedChildren = processChildren(children, form.control, isSubmitting);
   return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, ...props, children: [
-    showRootError && rootErrorPosition === "top" && form.formState.errors.root && /* @__PURE__ */ jsx(
-      FieldError,
-      {
-        errors: [form.formState.errors.root],
-        className: cn("text-center", rootErrorClassName)
-      }
-    ),
+    showRootError && rootErrorPosition === "top" && form.formState.errors.root && /* @__PURE__ */ jsx(FieldError, { errors: [form.formState.errors.root], className: cn("text-center", rootErrorClassName) }),
     processedChildren,
-    showRootError && rootErrorPosition === "bottom" && form.formState.errors.root && /* @__PURE__ */ jsx(
-      FieldError,
-      {
-        errors: [form.formState.errors.root],
-        className: cn("text-center", rootErrorClassName)
-      }
-    )
+    showRootError && rootErrorPosition === "bottom" && form.formState.errors.root && /* @__PURE__ */ jsx(FieldError, { errors: [form.formState.errors.root], className: cn("text-center", rootErrorClassName) })
   ] }) });
 }
 Form.displayName = "Form";