mtxuilib 0.0.317 → 0.0.319

package/dist/esm/form/EditFormToolbar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react/experimental" />
+import React from "react";
+import { AnyZodForm } from "./ZodForm";
+export declare const EditFormToolbar: React.ForwardRefExoticComponent<{
+    onCancel?: (() => void) | undefined;
+    zodForm?: AnyZodForm | undefined;
+    submitText?: string | undefined;
+    enableCancelConform?: boolean | undefined;
+    enableDeleteButton?: boolean | undefined;
+    onDelete?: (() => void) | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/form/EditFormToolbar.js

@@ -0,0 +1,106 @@
+"use client";
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { cn } from "../lib/utils";
+import { Button } from "../ui/button";
+import { ConformDeleteBtn } from "./deleteConform";
+const EditFormToolbar = React.forwardRef(
+  (props, forwardedRef) => {
+    const { submitText, onCancel, children, zodForm, enableCancelConform, enableDeleteButton, onDelete } = props;
+    const form = useFormContext();
+    const isDirty = form.formState.isDirty;
+    const formState = form.formState;
+    const [openConform, setOpenConform] = useState(false);
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full  flex-col  p-1", children: [
+      !openConform && /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            className: " min-w-24",
+            onClick: (e) => {
+              e.preventDefault();
+              if (enableCancelConform && isDirty) {
+                setOpenConform(true);
+              } else {
+                onCancel && onCancel();
+              }
+            },
+            children: "cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            form: zodForm == null ? void 0 : zodForm.id,
+            type: "submit",
+            disabled: formState.isSubmitting,
+            className: " min-w-24",
+            children: submitText || "submit"
+          }
+        ),
+        enableDeleteButton && /* @__PURE__ */ jsx(
+          ConformDeleteBtn,
+          {
+            callback: () => __async(void 0, null, function* () {
+              onDelete && onDelete();
+            }),
+            disabled: form.formState.isSubmitting,
+            variant: "destructive",
+            children: "delete"
+          }
+        )
+      ] }),
+      openConform && /* @__PURE__ */ jsx(
+        ComformCancel,
+        {
+          onBack: () => {
+            setOpenConform(false);
+          },
+          onContinue: () => {
+            onCancel && onCancel();
+          }
+        }
+      )
+    ] });
+  }
+);
+EditFormToolbar.displayName = "EditFormToolbar";
+const ComformCancel = (props) => {
+  const { onContinue, onBack } = props;
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+    "\u672A\u4FDD\u5B58\u66F4\u6539\uFF0C\u786E\u5B9A\u7EE7\u7EED\u5417\uFF1F",
+    /* @__PURE__ */ jsx(Button, { onClick: (e) => {
+      e.preventDefault();
+      onBack();
+    }, children: "\u7EE7\u7EED\u7F16\u8F91" }),
+    /* @__PURE__ */ jsx(Button, { variant: "destructive", className: cn(""), onClick: (e) => {
+      e.preventDefault();
+      onContinue();
+    }, children: "\u5173\u95ED" })
+  ] });
+};
+export {
+  EditFormToolbar
+};

package/dist/esm/form/MtFormPopupHolder.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { PlainMessage } from "@bufbuild/protobuf";
+import { FormSchema } from "../lib/mtmclient/mtm/sppb/mtm_pb";
+import { Renderable } from "../lib/render";
+import { MaybePromise } from "../types/common";
+type submitHandler = (values: any) => MaybePromise<void>;
+export declare const usePopupForm: () => {
+    openSchemaForm: (schema: PlainMessage<FormSchema>, values: any, onSutmit: submitHandler) => void;
+    setOpen: (args_0: boolean | ((prev: boolean) => boolean)) => void;
+    openComponent: (rand: Renderable<any>) => void;
+};
+export declare function MtFormPopupHolder(): import("react").JSX.Element | undefined;
+export {};

package/dist/esm/form/MtFormPopupHolder.js

@@ -0,0 +1,163 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { atom, useAtom, useSetAtom } from "jotai";
+import { useCallback } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { useIsDesktop } from "../hooks/use-media-query";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } from "../ui/drawer";
+import { MtButton } from "../ui/ui-mt/Button";
+import { EditFormToolbar } from "./EditFormToolbar";
+import { SchemaFormFieldsRender } from "./SchemaFormViewV2";
+const isOpenAtom = atom(false);
+const defaultValuesAtom = atom({});
+const formSchemaAtom = atom(null);
+const formSubmitAtom = atom(null);
+const popupInnerComponentAtom = atom(null);
+const usePopupForm = () => {
+  const setDefaultValues = useSetAtom(defaultValuesAtom);
+  const setFormSchema = useSetAtom(formSchemaAtom);
+  const setOnSubmit = useSetAtom(formSubmitAtom);
+  const setOpen = useSetAtom(isOpenAtom);
+  const setPopupInnerComponent = useSetAtom(popupInnerComponentAtom);
+  const openSchemaForm = useCallback((schema, values, onSutmit) => {
+    console.log("openPopform", schema, values);
+    setOnSubmit(() => onSutmit);
+    setDefaultValues(values);
+    setFormSchema(schema);
+    setOpen(true);
+  }, [setDefaultValues, setFormSchema, setOnSubmit, setOpen]);
+  const openComponent = useCallback((rand) => {
+    setPopupInnerComponent(() => rand);
+    setOpen(true);
+  }, [setOpen, setPopupInnerComponent]);
+  return { openSchemaForm, setOpen, openComponent };
+};
+function MtFormPopupHolder() {
+  const [isOpen, setOpen] = useAtom(isOpenAtom);
+  if (isOpen) {
+    return /* @__PURE__ */ jsx(MtFormPopupHolderInner, {});
+  }
+}
+function MtFormPopupHolderInner() {
+  const isDesktop = useIsDesktop();
+  const [defaultvalues] = useAtom(defaultValuesAtom);
+  const [formSchema] = useAtom(formSchemaAtom);
+  const [onSubmit] = useAtom(formSubmitAtom);
+  const [isOpen, setOpen] = useAtom(isOpenAtom);
+  const [popupInnerComponent, setPopupInnerComponent] = useAtom(popupInnerComponentAtom);
+  const form = useForm({
+    defaultValues: defaultvalues
+  });
+  const handleSubmit = (values) => {
+    onSubmit && onSubmit(values);
+  };
+  if (isOpen && popupInnerComponent) {
+    return /* @__PURE__ */ jsx(MtFormPopupHolderForComponent, {});
+  }
+  if (isDesktop) {
+    return /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: setOpen,
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: formSchema == null ? void 0 : formSchema.title }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: formSchema == null ? void 0 : formSchema.description })
+          ] }),
+          /* @__PURE__ */ jsx(FormProvider, __spreadProps(__spreadValues({}, form), { children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), children: [
+            /* @__PURE__ */ jsx(SchemaFormFieldsRender, { schema: formSchema }),
+            /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(EditFormToolbar, { onCancel: () => setOpen(false) }) })
+          ] }) }))
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      open: isOpen,
+      onOpenChange: setOpen,
+      children: /* @__PURE__ */ jsx(DrawerContent, { children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-sm", children: [
+        /* @__PURE__ */ jsxs(DrawerHeader, { children: [
+          /* @__PURE__ */ jsx(DrawerTitle, { children: formSchema == null ? void 0 : formSchema.title }),
+          /* @__PURE__ */ jsx(DrawerDescription, { children: formSchema == null ? void 0 : formSchema.description })
+        ] }),
+        /* @__PURE__ */ jsx(FormProvider, __spreadProps(__spreadValues({}, form), { children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), children: [
+          /* @__PURE__ */ jsx(SchemaFormFieldsRender, { schema: formSchema }),
+          /* @__PURE__ */ jsxs(DrawerFooter, { children: [
+            /* @__PURE__ */ jsx(MtButton, { type: "submit", children: "Submit" }),
+            /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(MtButton, { variant: "outline", children: "Cancel" }) })
+          ] })
+        ] }) }))
+      ] }) })
+    }
+  );
+}
+function MtFormPopupHolderForComponent() {
+  const isDesktop = useIsDesktop();
+  const [defaultvalues] = useAtom(defaultValuesAtom);
+  const [formSchema] = useAtom(formSchemaAtom);
+  const [onSubmit] = useAtom(formSubmitAtom);
+  const [isOpen, setOpen] = useAtom(isOpenAtom);
+  const form = useForm({
+    defaultValues: defaultvalues
+  });
+  const handleSubmit = (values) => {
+    onSubmit && onSubmit(values);
+  };
+  if (isDesktop) {
+    return /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: isOpen,
+        onOpenChange: setOpen,
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: formSchema == null ? void 0 : formSchema.title }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: formSchema == null ? void 0 : formSchema.description })
+          ] }),
+          /* @__PURE__ */ jsx(FormProvider, __spreadProps(__spreadValues({}, form), { children: /* @__PURE__ */ jsx("form", { onSubmit: form.handleSubmit(handleSubmit), children: "component todo" }) }))
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      open: isOpen,
+      onOpenChange: setOpen,
+      children: /* @__PURE__ */ jsx(DrawerContent, { children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-sm", children: [
+        /* @__PURE__ */ jsxs(DrawerHeader, { children: [
+          /* @__PURE__ */ jsx(DrawerTitle, { children: formSchema == null ? void 0 : formSchema.title }),
+          /* @__PURE__ */ jsx(DrawerDescription, { children: formSchema == null ? void 0 : formSchema.description })
+        ] }),
+        /* @__PURE__ */ jsx(FormProvider, __spreadProps(__spreadValues({}, form), { children: /* @__PURE__ */ jsx("form", { onSubmit: form.handleSubmit(handleSubmit), children: "component todo" }) }))
+      ] }) })
+    }
+  );
+}
+export {
+  MtFormPopupHolder,
+  usePopupForm
+};

package/dist/esm/form/MtFormV3.d.ts

@@ -0,0 +1,24 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Dispatch, PropsWithChildren, SetStateAction } from "react";
+export declare const MtFormV3Trigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface MtFormV3Props {
+    onSubmit: (values: any) => Promise<void>;
+    container?: "modal" | "card" | "none";
+    defaultValues?: any;
+    title?: string;
+    description?: string;
+    open?: boolean;
+    onOpenChange?: Dispatch<SetStateAction<boolean>>;
+}
+export declare function MtFormV3(props: MtFormV3Props & PropsWithChildren): import("react").JSX.Element;
+export declare const MtFormV3Content: (props: PropsWithChildren) => import("react").JSX.Element;
+export declare function useMtformV3(): {
+    onSubmit: (values: any) => Promise<void>;
+    container?: "card" | "none" | "modal" | undefined;
+    defaultValues?: any;
+    title?: string | undefined;
+    description?: string | undefined;
+    open?: boolean | undefined;
+    onOpenChange?: Dispatch<SetStateAction<boolean>> | undefined;
+};
+export {};

package/dist/esm/form/MtFormV3.js

@@ -0,0 +1,90 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { createContext, useContext, useMemo, useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader } from "../ui/dialog";
+import { EditFormToolbar } from "./EditFormToolbar";
+const MtFormV3Trigger = DialogPrimitive.Trigger;
+const mtformV3Context = createContext(void 0);
+function MtFormV3(props) {
+  const { container, defaultValues, children, open, onOpenChange, onSubmit } = props;
+  const [innerOpen, setInnerOpen] = useState(false);
+  const [mode, setMode] = useState(container || "none");
+  const form = useForm({
+    defaultValues
+  });
+  const __setOpen = useMemo(() => {
+    if (onOpenChange) {
+      return onOpenChange;
+    }
+    return setInnerOpen;
+  }, [onOpenChange]);
+  const __open = useMemo(() => {
+    if (open !== void 0) {
+      return open;
+    }
+    return innerOpen;
+  }, [innerOpen, open]);
+  return /* @__PURE__ */ jsx(mtformV3Context.Provider, { value: {
+    onSubmit,
+    defaultValues
+  }, children: /* @__PURE__ */ jsx(Dialog, { open: __open, onOpenChange: __setOpen, children: /* @__PURE__ */ jsx(FormProvider, __spreadProps(__spreadValues({}, form), { children })) }) });
+}
+const MtFormV3Content = (props) => {
+  const { children } = props;
+  const mtformv3 = useMtformV3();
+  return /* @__PURE__ */ jsx(DialogContent, { className: "sm:max-w-[425px]", children: /* @__PURE__ */ jsxs(
+    FormMtFormV3,
+    {
+      defaultValues: mtformv3.defaultValues,
+      onSubmit: mtformv3.onSubmit,
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogDescription, {}) }),
+        children,
+        /* @__PURE__ */ jsx(DialogFooter, { className: "flex justify-end gap-2", children: /* @__PURE__ */ jsx(EditFormToolbar, { submitText: "ok" }) })
+      ]
+    }
+  ) });
+};
+const FormMtFormV3 = (props) => {
+  const { defaultValues, children, onSubmit } = props;
+  const form = useForm(
+    {
+      defaultValues
+    }
+  );
+  return /* @__PURE__ */ jsx(FormProvider, __spreadProps(__spreadValues({}, form), { children: /* @__PURE__ */ jsx("form", { onSubmit: form.handleSubmit(onSubmit), children }) }));
+};
+function useMtformV3() {
+  const context = useContext(mtformV3Context);
+  if (context === void 0) {
+    throw new Error("useMtformV3 must be used within a MtFormV3");
+  }
+  return __spreadValues({}, context);
+}
+export {
+  MtFormV3,
+  MtFormV3Content,
+  MtFormV3Trigger,
+  useMtformV3
+};

package/dist/esm/form/SchemaFormViewV2.d.ts

@@ -0,0 +1,27 @@
+import { PlainMessage } from "@bufbuild/protobuf";
+import { Dispatch, PropsWithChildren } from "react";
+import { FormSchema } from "../lib/mtmclient/mtm/sppb/mtm_pb";
+import { MaybePromise } from "../types/common";
+type SchemaFormViewVaranit = "auto" | "modal" | "card";
+interface SchemaFormViewProps {
+    formSchema: PlainMessage<FormSchema>;
+    defaultValues?: any;
+    onSubmit: (values: any) => MaybePromise<void>;
+    onCancel?: () => void;
+    isLoading?: boolean;
+    variants?: SchemaFormViewVaranit;
+}
+export declare const SchemaFormViewV2: (props: SchemaFormViewProps & PropsWithChildren) => import("react").JSX.Element;
+export declare function useSchemaFormViewV2(): {
+    formSchema: PlainMessage<FormSchema>;
+    defaultValues?: any;
+    onSubmit: (values: any) => MaybePromise<void>;
+    onCancel?: (() => void) | undefined;
+    isLoading?: boolean | undefined;
+    variants?: SchemaFormViewVaranit | undefined;
+    setDefaultValues: Dispatch<any>;
+};
+export declare const SchemaFormFieldsRender: (props: {
+    schema: PlainMessage<FormSchema>;
+}) => import("react").JSX.Element;
+export {};

package/dist/esm/form/SchemaFormViewV2.js

@@ -0,0 +1,140 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+import { FormProvider, useForm, useFormContext } from "react-hook-form";
+import { useCurdViewShow } from "../curd/curd-detail";
+import { useIsDesktop } from "../hooks/use-media-query";
+import { Card, CardContent } from "../ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } from "../ui/drawer";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { Input } from "../ui/input";
+import { MtButton } from "../ui/ui-mt/Button";
+import { EditFormToolbar } from "./EditFormToolbar";
+const CurdContext = createContext(void 0);
+const SchemaFormViewV2 = (props) => {
+  const { formSchema, children, onSubmit, onCancel, variants } = props;
+  const [defaultValues, setDefaultValues] = useState({});
+  const curdDetailView = useCurdViewShow();
+  const form = useForm({
+    defaultValues
+  });
+  return /* @__PURE__ */ jsxs(CurdContext.Provider, { value: {
+    formSchema,
+    setDefaultValues,
+    onSubmit,
+    variants
+  }, children: [
+    variants == "auto" && /* @__PURE__ */ jsx(FormProvider, __spreadProps(__spreadValues({}, form), { children: /* @__PURE__ */ jsx(Card, { className: "p-2", children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("form", { onSubmit, children: [
+      /* @__PURE__ */ jsx(SchemaFormFieldsRender, { schema: formSchema }),
+      /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(EditFormToolbar, { onCancel: () => onCancel && onCancel() }) })
+    ] }) }) }) })),
+    variants == "modal" && /* @__PURE__ */ jsx(
+      MtFormPopup,
+      {
+        open: curdDetailView.isOpenEdit,
+        onOpenChange: curdDetailView.setIsOpenEdit
+      }
+    )
+  ] });
+};
+function useSchemaFormViewV2() {
+  const context = useContext(CurdContext);
+  if (context === void 0) {
+    throw new Error("useSchemaFormViewV2 must be used within a SchemaFormViewV2");
+  }
+  return __spreadValues({}, context);
+}
+function MtFormPopup(props) {
+  const { open, onOpenChange } = props;
+  const isDesktop = useIsDesktop();
+  const formView = useSchemaFormViewV2();
+  const form = useForm({
+    defaultValues: formView.defaultValues
+  });
+  if (isDesktop) {
+    return /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open,
+        onOpenChange,
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: formView.formSchema.title }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: formView.formSchema.description })
+          ] }),
+          /* @__PURE__ */ jsx(FormProvider, __spreadProps(__spreadValues({}, form), { children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(formView.onSubmit), children: [
+            /* @__PURE__ */ jsx(SchemaFormFieldsRender, { schema: formView.formSchema }),
+            /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(EditFormToolbar, { onCancel: () => onOpenChange(false) }) })
+          ] }) }))
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      open,
+      onOpenChange,
+      children: /* @__PURE__ */ jsx(DrawerContent, { children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-sm", children: [
+        /* @__PURE__ */ jsxs(DrawerHeader, { children: [
+          /* @__PURE__ */ jsx(DrawerTitle, { children: formView.formSchema.title }),
+          /* @__PURE__ */ jsx(DrawerDescription, { children: formView.formSchema.description })
+        ] }),
+        /* @__PURE__ */ jsx(FormProvider, __spreadProps(__spreadValues({}, form), { children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(formView.onSubmit), children: [
+          /* @__PURE__ */ jsx(SchemaFormFieldsRender, { schema: formView.formSchema }),
+          /* @__PURE__ */ jsxs(DrawerFooter, { children: [
+            /* @__PURE__ */ jsx(MtButton, { type: "submit", children: "Submit" }),
+            /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(MtButton, { variant: "outline", children: "Cancel" }) })
+          ] })
+        ] }) }))
+      ] }) })
+    }
+  );
+}
+const SchemaFormFieldsRender = (props) => {
+  var _a;
+  const { schema } = props;
+  const form = useFormContext();
+  return /* @__PURE__ */ jsx(Fragment, { children: (_a = schema.fields) == null ? void 0 : _a.map((formField, i) => {
+    return /* @__PURE__ */ jsx(
+      FormField,
+      {
+        control: form.control,
+        name: formField.name,
+        defaultValue: formField.defaultValue || "",
+        render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+          formField.label && /* @__PURE__ */ jsx(FormLabel, { children: formField.label }),
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Input, __spreadValues({ placeholder: formField.placeholder }, field)) }) }),
+          formField.description && /* @__PURE__ */ jsx(FormDescription, { children: formField.description }),
+          /* @__PURE__ */ jsx(FormMessage, {})
+        ] })
+      },
+      i
+    );
+  }) });
+};
+export {
+  SchemaFormFieldsRender,
+  SchemaFormViewV2,
+  useSchemaFormViewV2
+};

package/dist/esm/form/ZodForm.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { FieldValues, SubmitHandler, UseFormProps, UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+export type UseZodForm<TInput extends FieldValues> = UseFormReturn<TInput> & {
+    id: string;
+};
+export declare function useZodForm<TSchema extends z.ZodType>(props: Omit<UseFormProps<TSchema['_input']>, 'resolver'> & {
+    schema?: TSchema;
+}): UseZodForm<TSchema["_input"]>;
+export type AnyZodForm = UseZodForm<any>;
+export declare function ZForm<TInput extends FieldValues>(props: Omit<React.ComponentProps<'form'>, 'onSubmit' | 'id'> & {
+    handleSubmit: SubmitHandler<TInput>;
+    form: UseZodForm<TInput>;
+}): import("react").JSX.Element;