@inspirecn/react 1.0.0

package/dist/components/file-uploader/FileUploader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../../../src/components/file-uploader/FileUploader.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAqB,iBAAiB,EAAgB,MAAM,SAAS,CAAC;AAS7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAwIlE,CAAC;AA4BF,YAAY,EACV,iBAAiB,EAAE,iBAAiB,EAAE,YAAY,EAClD,YAAY,EACb,MAAM,SAAS,CAAC"}

package/dist/components/file-uploader/FileUploader.js

@@ -0,0 +1,124 @@
+import { CloudUpload as P, BadgeX as U } from "lucide-react";
+import { cn as a } from "../../lib/utils.js";
+import { Button as x } from "../button/Button.js";
+import { Progress as j } from "../progress/Progress.js";
+import { useFileUploader as G } from "./useFileUploader.js";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+const M = {
+  maxFiles: 4,
+  maxSize: 1e6,
+  // 1MB
+  resourceType: "IMAGE"
+}, E = ({
+  config: s,
+  onUpload: p,
+  onFilesChange: h,
+  disabled: c = !1,
+  className: b
+}) => {
+  var d, u;
+  const o = {
+    ...M,
+    ...s
+  }, {
+    files: i,
+    onRemoveFile: v,
+    dropzone: r,
+    isUploading: l,
+    uploadProgress: y,
+    handleUpload: N,
+    isUploadComplete: w
+  } = G({
+    configuration: o,
+    onUpload: p,
+    onFilesChange: h
+  });
+  return /* @__PURE__ */ e("div", {
+    className: a("flex flex-col gap-4", b),
+    children: /* @__PURE__ */ n("div", {
+      className: a("relative flex h-full max-h-96 w-full flex-col items-center justify-center gap-y-2 rounded border-2 border-dashed p-5 shadow transition-colors", r.isDragActive && "border-primary bg-primary/5", c && "cursor-not-allowed opacity-50", i.length > 0 && "justify-start"),
+      ...r.getRootProps(),
+      children: [/* @__PURE__ */ e("input", {
+        ...r.getInputProps(),
+        disabled: c
+      }), !i.length && /* @__PURE__ */ n("div", {
+        className: "flex flex-col items-center justify-center",
+        children: [/* @__PURE__ */ e(P, {
+          size: 50,
+          className: "text-foreground cursor-pointer"
+        }), /* @__PURE__ */ e("p", {
+          className: "text-md",
+          children: r.isDragActive ? "Drop here." : "Drag and Drop"
+        }), /* @__PURE__ */ n("em", {
+          className: "text-muted-foreground text-center text-sm leading-6",
+          children: ["Max Size: ", o.maxSize / 1e6, "MB, Maximum upload:", " ", o.maxFiles, " ", /* @__PURE__ */ e("br", {}), "Supported formats:", " ", z(o.resourceType)]
+        })]
+      }), /* @__PURE__ */ e("div", {
+        className: "flex w-full flex-wrap justify-center gap-2",
+        children: i.length > 0 && i.map((t, m) => {
+          const f = y[m] || 0, g = l && f < 100;
+          return /* @__PURE__ */ n("div", {
+            className: "group relative h-16 w-16",
+            children: [o.resourceType === "IMAGE" ? /* @__PURE__ */ e("img", {
+              src: t.preview,
+              className: a("h-12 w-12 rounded object-cover", g && "opacity-50"),
+              alt: t.name
+            }) : /* @__PURE__ */ e("div", {
+              className: "bg-muted flex h-12 w-12 items-center justify-center rounded",
+              children: /* @__PURE__ */ e("span", {
+                className: "text-xs font-medium",
+                children: A(t.file.name).toUpperCase()
+              })
+            }), /* @__PURE__ */ e(j, {
+              value: f,
+              className: a("invisible absolute inset-0 mx-auto my-auto w-[60%]", g && "visible")
+            }), /* @__PURE__ */ e(x, {
+              className: a("bg-primary/10 text-primary-foreground invisible absolute inset-0 mx-auto my-auto h-10 w-10 rounded-full", !l && "group-hover:visible"),
+              size: "sm",
+              onClick: (F) => {
+                F.stopPropagation(), v(m);
+              },
+              disabled: l,
+              children: /* @__PURE__ */ e(U, {
+                size: 30
+              })
+            }), /* @__PURE__ */ e("p", {
+              className: "text-primary-foreground absolute -bottom-4 left-0 right-0 w-full truncate text-center text-[10px] font-semibold",
+              children: t.name
+            })]
+          }, `file-${m}`);
+        })
+      }), i.length > 0 && p && !w && /* @__PURE__ */ e(x, {
+        onClick: (t) => {
+          t.stopPropagation(), N();
+        },
+        size: "sm",
+        disabled: l || c,
+        className: "absolute bottom-2 right-2",
+        children: l ? "Uploading..." : "Upload"
+      }), (r == null ? void 0 : r.fileRejections.length) > 0 && /* @__PURE__ */ e("p", {
+        className: "text-destructive text-sm",
+        children: (u = (d = r.fileRejections[0]) == null ? void 0 : d.errors[0]) == null ? void 0 : u.message
+      })]
+    })
+  });
+};
+function z(s) {
+  switch (s) {
+    case "IMAGE":
+      return "PNG, JPEG, JPG, WebP";
+    case "PDF":
+      return "PDF";
+    case "VIDEO":
+      return "MP4, WebM, OGG";
+    default:
+      return "Various formats";
+  }
+}
+function A(s) {
+  return s.split(".").pop() || "";
+}
+E.displayName = "FileUploader";
+export {
+  E as FileUploader
+};

package/dist/components/file-uploader/types.d.ts

@@ -0,0 +1,32 @@
+export type ResourceType = "IMAGE" | "PDF" | "VIDEO";
+export type UploadMode = "manual" | "on-change";
+export interface FileConfiguration {
+    maxFiles?: number;
+    maxSize?: number;
+    resourceType?: ResourceType;
+}
+export interface UploadedFile {
+    file: File;
+    preview: string;
+    name: string;
+}
+export interface UploadResult {
+    success: boolean;
+    url?: string;
+    error?: string;
+}
+export interface FileUploaderProps {
+    config?: FileConfiguration;
+    mode?: UploadMode;
+    onUpload?: (files: UploadedFile[]) => Promise<UploadResult[]> | UploadResult[] | Promise<void> | void;
+    onFilesChange?: (files: UploadedFile[]) => void;
+    disabled?: boolean;
+    className?: string;
+}
+export interface UseFileUploaderProps {
+    configuration: Required<FileConfiguration>;
+    mode?: UploadMode;
+    onUpload?: (files: UploadedFile[]) => Promise<UploadResult[]> | UploadResult[] | Promise<void> | void;
+    onFilesChange?: (files: UploadedFile[]) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/file-uploader/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/file-uploader/types.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEhD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,YAAY,EAAE,KAClB,OAAO,CAAC,YAAY,EAAE,CAAC,GAAG,YAAY,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,YAAY,EAAE,KAClB,OAAO,CAAC,YAAY,EAAE,CAAC,GAAG,YAAY,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACjD"}

package/dist/components/file-uploader/types.js

@@ -0,0 +1 @@
+

package/dist/components/file-uploader/useFileUploader.d.ts

@@ -0,0 +1,22 @@
+import { UploadedFile, UseFileUploaderProps } from "./types";
+/**
+ * Provider-agnostic file uploader hook
+ *
+ * @param configuration - File uploader configuration
+ * @param onUpload - Callback function that receives files to upload
+ * @param onFilesChange - Callback function that receives current files when they change
+ *
+ * @returns File uploader state and handlers
+ */
+export declare const useFileUploader: ({ configuration, onUpload, onFilesChange, }: UseFileUploaderProps) => {
+    files: UploadedFile[];
+    onRemoveFile: (index: number) => void;
+    dropzone: import("react-dropzone").DropzoneState;
+    isUploading: boolean;
+    uploadProgress: Record<number, number>;
+    handleUpload: () => Promise<void>;
+    updateProgress: (fileIndex: number, percentage: number) => void;
+    resetFiles: () => void;
+    isUploadComplete: boolean;
+};
+//# sourceMappingURL=useFileUploader.d.ts.map

package/dist/components/file-uploader/useFileUploader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileUploader.d.ts","sourceRoot":"","sources":["../../../src/components/file-uploader/useFileUploader.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAgB,YAAY,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAkC3E;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,GAAI,6CAI7B,oBAAoB;;0BA0BX,MAAM;;;;;gCAwDF,MAAM,cAAc,MAAM;;;CA8FzC,CAAC"}

package/dist/components/file-uploader/useFileUploader.js

@@ -0,0 +1,115 @@
+import { useState as m, useRef as D, useEffect as w, useCallback as a } from "react";
+import { useDropzone as L } from "react-dropzone";
+const M = (c) => {
+  switch (c) {
+    case "IMAGE":
+      return {
+        "image/png": [".png"],
+        "image/jpeg": [".jpg", ".jpeg"],
+        "image/webp": [".webp"]
+      };
+    case "PDF":
+      return {
+        "application/pdf": [".pdf"]
+      };
+    case "VIDEO":
+      return {
+        "video/mp4": [".mp4"],
+        "video/webm": [".webm"],
+        "video/ogg": [".ogg"]
+      };
+    default:
+      return console.error("Invalid resource type"), {};
+  }
+}, N = ({
+  configuration: c,
+  onUpload: d,
+  onFilesChange: r
+}) => {
+  const [t, i] = m([]), [f, b] = m(!1), [x, u] = m({}), [y, n] = m(!1), U = D(!0);
+  w(() => {
+    t.length === 0 && n(!1);
+  }, [t]);
+  const E = a(() => {
+    i([]), u({}), n(!1), r == null || r([]);
+  }, [r]), j = a((s) => {
+    f || (i((o) => {
+      const e = [...o];
+      e.splice(s, 1);
+      const l = e.slice(0, c.maxFiles);
+      return r == null || r(l), l;
+    }), u((o) => {
+      const e = {
+        ...o
+      };
+      return delete e[s], e;
+    }));
+  }, [c.maxFiles, r]), R = a(async () => {
+    if (!(!t.length || !d || f)) {
+      b(!0), u({});
+      try {
+        const s = await d(t);
+        if (s && Array.isArray(s) && (console.log("Upload results:", s), s.some((e) => typeof e == "object" && "success" in e && !e.success)))
+          throw console.error("Some uploads failed:", s.filter((e) => typeof e == "object" && "success" in e && !e.success)), new Error("Some files failed to upload");
+        n(!0);
+      } catch (s) {
+        console.error("Upload failed:", s);
+      } finally {
+        b(!1);
+      }
+    }
+  }, [d, t]), z = a((s, o) => {
+    u((e) => ({
+      ...e,
+      [s]: o
+    }));
+  }, []), I = a((s, o) => {
+    if (o.length > 0 || t.length >= c.maxFiles)
+      return;
+    const e = [];
+    s.forEach((l) => {
+      const p = l.name, v = p.split(".")[0];
+      if (!v || t.find((A) => A.file.name === p))
+        return;
+      const S = URL.createObjectURL(l);
+      e.push({
+        file: l,
+        preview: S,
+        name: v
+      });
+    }), e.length > 0 && i((l) => {
+      const p = [...l, ...e].slice(0, c.maxFiles);
+      return r == null || r(p), p;
+    });
+  }, [t, c.maxFiles, r]), P = L({
+    accept: M(c.resourceType),
+    maxFiles: c.maxFiles,
+    onDrop: I,
+    validator: (s) => s.size > c.maxSize ? {
+      code: "file-too-large",
+      message: `File size must be less than ${c.maxSize / 1e6}MB`
+    } : null
+  });
+  return w(() => {
+    if (U.current) {
+      U.current = !1;
+      return;
+    }
+    r == null || r(t);
+  }, [t, r]), w(() => () => {
+    t.forEach((s) => URL.revokeObjectURL(s.preview));
+  }, [t]), {
+    files: t,
+    onRemoveFile: j,
+    dropzone: P,
+    isUploading: f,
+    uploadProgress: x,
+    handleUpload: R,
+    updateProgress: z,
+    resetFiles: E,
+    isUploadComplete: y
+  };
+};
+export {
+  N as useFileUploader
+};

package/dist/components/form/FieldArray.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { ArrayPath, FieldValues, UseFieldArrayReturn } from 'react-hook-form';
+export type FieldArrayProps<T extends FieldValues> = {
+    children: (field: UseFieldArrayReturn<T, ArrayPath<T>>) => ReactNode;
+    name: ArrayPath<T>;
+};
+/**
+ * A field array component.
+ * @param children The children of the field array.
+ * @param name The name of the field array.
+ *
+ * @returns The field array component.
+ *
+ * @example
+ * ```tsx
+ * <FieldArray name="items">
+ * 	{({ fields }) =>
+ * 		fields.map((field, index) => (
+ * 			<TextField key={field.id} name={`items.${index}.name`} />
+ * 		))
+ * 	}
+ * </FieldArray>
+ * ```
+ */
+export declare const FieldArray: <T extends FieldValues>({ children, name, }: FieldArrayProps<T>) => ReactNode;
+//# sourceMappingURL=FieldArray.d.ts.map

package/dist/components/form/FieldArray.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldArray.d.ts","sourceRoot":"","sources":["../../../src/components/form/FieldArray.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EACL,SAAS,EACT,WAAW,EAEX,mBAAmB,EAEpB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACrE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,EAAE,qBAG/C,eAAe,CAAC,CAAC,CAAC,cAKpB,CAAC"}

package/dist/components/form/FieldArray.js

@@ -0,0 +1,16 @@
+import { useFormContext as n, useFieldArray as s } from "react-hook-form";
+const i = ({
+  children: r,
+  name: o
+}) => {
+  const {
+    control: t
+  } = n(), e = s({
+    control: t,
+    name: o
+  });
+  return r(e);
+};
+export {
+  i as FieldArray
+};

package/dist/components/form/Form.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import { type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element | null;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };
+//# sourceMappingURL=Form.d.ts.map

package/dist/components/form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/form/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,iBAAiB,CAAC;AAKzB,QAAA,MAAM,IAAI,4MAAe,CAAC;AAa1B,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,4CAMtC,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;;;;CAqBjB,CAAC;AAUF,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAYrE;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAYlD;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAiBnE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAW1E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,kDAkBtE;AAED,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,GACV,CAAC"}

package/dist/components/form/Form.js

@@ -0,0 +1,124 @@
+import * as s from "react";
+import { Slot as f } from "@radix-ui/react-slot";
+import { FormProvider as u, Controller as F, useFormContext as x, useFormState as I } from "react-hook-form";
+import { cn as a } from "@inspirecn/ui/lib/utils";
+import { Label as g } from "../label/Label.js";
+import { jsx as m } from "react/jsx-runtime";
+const S = u, c = s.createContext({}), $ = ({
+  ...e
+}) => /* @__PURE__ */ m(c.Provider, {
+  value: {
+    name: e.name
+  },
+  children: /* @__PURE__ */ m(F, {
+    ...e
+  })
+}), d = () => {
+  const e = s.useContext(c), o = s.useContext(l), {
+    getFieldState: t
+  } = x(), r = I({
+    name: e.name
+  }), n = t(e.name, r);
+  if (!e)
+    throw new Error("useFormField should be used within <FormField>");
+  const {
+    id: i
+  } = o;
+  return {
+    id: i,
+    name: e.name,
+    formItemId: `${i}-form-item`,
+    formDescriptionId: `${i}-form-item-description`,
+    formMessageId: `${i}-form-item-message`,
+    ...n
+  };
+}, l = s.createContext({});
+function D({
+  className: e,
+  ...o
+}) {
+  const t = s.useId();
+  return /* @__PURE__ */ m(l.Provider, {
+    value: {
+      id: t
+    },
+    children: /* @__PURE__ */ m("div", {
+      "data-slot": "form-item",
+      className: a("grid gap-2", e),
+      ...o
+    })
+  });
+}
+function M({
+  className: e,
+  ...o
+}) {
+  const {
+    error: t,
+    formItemId: r
+  } = d();
+  return /* @__PURE__ */ m(g, {
+    "data-slot": "form-label",
+    "data-error": !!t,
+    className: a("data-[error=true]:text-destructive", e),
+    htmlFor: r,
+    ...o
+  });
+}
+function N({
+  ...e
+}) {
+  const {
+    error: o,
+    formItemId: t,
+    formDescriptionId: r,
+    formMessageId: n
+  } = d();
+  return /* @__PURE__ */ m(f, {
+    "data-slot": "form-control",
+    id: t,
+    "aria-describedby": o ? `${r} ${n}` : `${r}`,
+    "aria-invalid": !!o,
+    ...e
+  });
+}
+function w({
+  className: e,
+  ...o
+}) {
+  const {
+    formDescriptionId: t
+  } = d();
+  return /* @__PURE__ */ m("p", {
+    "data-slot": "form-description",
+    id: t,
+    className: a("text-muted-foreground text-sm", e),
+    ...o
+  });
+}
+function P({
+  className: e,
+  ...o
+}) {
+  const {
+    error: t,
+    formMessageId: r
+  } = d(), n = t ? String((t == null ? void 0 : t.message) ?? "") : o.children;
+  return n ? /* @__PURE__ */ m("p", {
+    "data-slot": "form-message",
+    id: r,
+    className: a("text-delete text-sm", e),
+    ...o,
+    children: n
+  }) : null;
+}
+export {
+  S as Form,
+  N as FormControl,
+  w as FormDescription,
+  $ as FormField,
+  D as FormItem,
+  M as FormLabel,
+  P as FormMessage,
+  d as useFormField
+};

package/dist/components/form/GenericForm.d.ts

@@ -0,0 +1,42 @@
+import { PropsWithChildren, Ref } from 'react';
+import { Control, FieldValues, FormState, UseFormReset, UseFormReturn, UseFormSetValue } from 'react-hook-form';
+import * as z from 'zod/v4';
+export type GenericFormRef<T extends FieldValues> = {
+    form: UseFormReturn<T>;
+    control: Control<T>;
+    formState: FormState<T>;
+    getValues: () => T;
+    setValue: UseFormSetValue<T>;
+    watch: (name: keyof T) => T[keyof T];
+    reset: UseFormReset<T>;
+    handleSubmit: (onSubmit: (data: T) => void) => (e?: React.BaseSyntheticEvent) => Promise<void>;
+};
+export type FormProps<TSchema extends z.ZodType<any, any, any>> = PropsWithChildren<{
+    schema: TSchema;
+    initialValues?: z.infer<TSchema>;
+    ref?: Ref<GenericFormRef<z.infer<TSchema>>>;
+    mode?: 'onChange' | 'onBlur' | 'onSubmit' | 'all';
+    onSubmit: (data: z.infer<TSchema>, form: UseFormReturn<z.infer<TSchema>, any, undefined>) => void;
+}>;
+/**
+ * A generic form component.
+ * @param schema The schema of the form.
+ * @param initialValues The initial values of the form.
+ * @param onSubmit The submit handler of the form.
+ * @param children The children of the form.
+ * @param ref The reference of the form.
+ *
+ * @returns The generic form component.
+ *
+ * @example
+ * <GenericForm
+ *  schema={schema}
+ *  initialValues={initialValues}
+ *  onSubmit={onSubmit}
+ * >
+ *  <TextField name="name" label="Name" />
+ *  <SubmitButton />
+ * </GenericForm>
+ */
+export declare const GenericForm: <TSchema extends z.ZodType<any, any, any>>({ children, ...props }: FormProps<TSchema>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GenericForm.d.ts.map

package/dist/components/form/GenericForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericForm.d.ts","sourceRoot":"","sources":["../../../src/components/form/GenericForm.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAkC,MAAM,OAAO,CAAC;AAC/E,OAAO,EACL,OAAO,EACP,WAAW,EACX,SAAS,EAET,YAAY,EACZ,aAAa,EACb,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,CAAC,MAAM,QAAQ,CAAC;AAI5B,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI;IAClD,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC,CAAC;IACnB,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC7B,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IACrC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACvB,YAAY,EAAE,CACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,KACxB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,IAC5D,iBAAiB,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAC5C,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,CAAC;IAClD,QAAQ,EAAE,CACR,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EACtB,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,KAClD,IAAI,CAAC;CACX,CAAC,CAAC;AAkDL;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,eAAO,MAAM,WAAW,GAAI,OAAO,SAAS,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,wBAGnE,SAAS,CAAC,OAAO,CAAC,4CAiBpB,CAAC"}

package/dist/components/form/GenericForm.js

@@ -0,0 +1,55 @@
+import { useEffect as f, useImperativeHandle as a } from "react";
+import { useForm as i } from "react-hook-form";
+import { zodResolver as c } from "@hookform/resolvers/zod";
+import { Form as l } from "./Form.js";
+import { jsx as n } from "react/jsx-runtime";
+const S = ({
+  schema: m,
+  initialValues: t,
+  mode: r,
+  ref: s,
+  onSubmit: o
+}) => {
+  const e = i({
+    resolver: c(m),
+    defaultValues: t,
+    mode: r
+  });
+  return f(() => {
+    !e.formState.isDirty && JSON.stringify(e.getValues()) !== JSON.stringify(t) && e.reset(t);
+  }, [e, t]), a(s, () => ({
+    form: e,
+    control: e.control,
+    formState: e.formState,
+    getValues: e.getValues,
+    setValue: e.setValue,
+    watch: e.watch,
+    reset: e.reset,
+    handleSubmit: e.handleSubmit
+  }), [e]), {
+    form: e,
+    handleSubmit: (u) => {
+      o(u, e);
+    }
+  };
+}, v = ({
+  children: m,
+  ...t
+}) => {
+  const {
+    form: r,
+    handleSubmit: s
+  } = S({
+    ...t
+  });
+  return /* @__PURE__ */ n(l, {
+    ...r,
+    children: /* @__PURE__ */ n("form", {
+      onSubmit: (o) => (o.stopPropagation(), r.handleSubmit(s)(o)),
+      children: m
+    })
+  });
+};
+export {
+  v as GenericForm
+};

package/dist/components/form/fields/CheckboxField.d.ts

@@ -0,0 +1,33 @@
+import { FieldValues, Path } from 'react-hook-form';
+type Props<T extends FieldValues> = {
+    name: Path<T>;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    labelInfo?: string;
+    labelOptional?: boolean;
+};
+/**
+ * CheckboxField. A checkbox field component.
+ *
+ * @param name - The name of the field.
+ * @param label - The label of the field.
+ * @param required - The required flag of the field.
+ * @param disabled - The disabled flag of the field.
+ * @param className - The class name of the field.
+ * @param labelInfo - Additional information for the label (shown in tooltip).
+ * @param labelOptional - Mark the label as optional.
+ * @returns A checkbox field component.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxField name="isActive" label="Is Active" />
+ * ```
+ */
+export declare const CheckboxField: {
+    <T extends FieldValues>({ name, label, disabled, required, className, labelInfo, labelOptional, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=CheckboxField.d.ts.map

package/dist/components/form/fields/CheckboxField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.d.ts","sourceRoot":"","sources":["../../../../src/components/form/fields/CheckboxField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAkB,MAAM,iBAAiB,CAAC;AAOpE,KAAK,KAAK,CAAC,CAAC,SAAS,WAAW,IAAI;IAClC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,aAAa;KAAI,CAAC,SAAS,WAAW,6EAQhD,KAAK,CAAC,CAAC,CAAC;;CAoDV,CAAC"}