@oneplatformdev/ui 0.0.1-beta.14 → 0.0.1-beta.141

package/Dropzone/Dropzone.mjs

@@ -1,140 +1,154 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { forwardRef as L, useState as y, useEffect as M } from "react";
-import { useDropzone as U } from "react-dropzone";
-import { Card as j } from "../Card/Card.mjs";
-import { File as O, X } from "lucide-react";
-import { cn as f } from "@oneplatformdev/utils";
-import { F as Y, D as q } from "../FilePreview-Dhtv8F4u.js";
-import { isFile as v, extractName as G } from "./DropzoneUtils.mjs";
-const H = L(
+import { jsxs as r, jsx as i, Fragment as H } from "react/jsx-runtime";
+import { X as O } from "lucide-react";
+import { forwardRef as X, useState as w, useImperativeHandle as Y } from "react";
+import { useDropzone as q } from "react-dropzone";
+import { cn as p } from "@oneplatformdev/utils";
+import { Card as G } from "../Card/Card.mjs";
+import { F as J, D as K } from "../DropzoneFilePreview-Dhtv8F4u.js";
+import { DropzoneSinglePickPreview as Q } from "./DropzoneSinglePickPreview.mjs";
+import { DefaultFileIcon as R, isFile as g, extractName as Z } from "./DropzoneUtils.mjs";
+const $ = X(
   ({
-    acceptTypes: w = q,
-    maxSizeMB: b,
-    maxFiles: h = 1,
-    onErrors: g,
-    hideErrors: F = !1,
-    disabled: p = !1,
-    classNames: l,
-    value: m = [],
+    acceptTypes: y = K,
+    maxSizeMB: F,
+    maxFiles: v = 1,
+    onErrors: a,
+    hideErrors: D = !1,
+    disabled: d = !1,
+    classNames: o,
+    value: z = [],
     onChangeValue: s,
-    className: u,
-    labelDropzonePrompt: z = "Drop files here or click to select",
-    labelOrClickToSelect: J = "Click to select files",
-    labelSelectedFiles: D = "Selected Files",
-    labelUploadErrors: I = "Upload Errors",
-    labelFileTooLarge: k = "File is too large",
-    labelInvalidFileType: E = "Invalid file type",
-    ...S
-  }, P) => {
-    const [c, a] = y(m), [d, N] = y([]);
-    M(() => {
-      a(m);
-    }, [m]);
-    const W = (e, i) => {
-      N(i), g && g(i);
-      const t = [...c, ...e].slice(0, h);
-      a(t), s == null || s(t);
-    }, T = (e, i) => {
-      if (p) return;
+    className: I,
+    labelDropzonePrompt: E = "Drop files here or click to select",
+    labelDropzoneSubPrompt: b = "",
+    labelOrClickToSelect: C = "Click to select files",
+    labelSelectedFiles: S = "Selected Files",
+    labelUploadErrors: N = "Upload Errors",
+    labelFileTooLarge: W = "File is too large",
+    labelInvalidFileType: k = "Invalid file type",
+    singlePick: c = !1,
+    labelDropzoneClassname: B,
+    labelDropzoneSubClassname: T,
+    ..._
+  }, A) => {
+    const [n, x] = w(z), [f, L] = w([]), M = (e, l) => {
+      L(l), a == null || a(l);
+      const t = c ? e.slice(0, 1) : [...n, ...e].slice(0, v);
+      x(t), s == null || s(t);
+    }, u = (e, l) => {
+      if (d) return;
       e.stopPropagation();
-      const t = c.filter((n, x) => x !== i);
-      a(t), s == null || s(t);
-    }, { getRootProps: _, getInputProps: A, isDragActive: B } = U({
-      onDrop: W,
-      accept: w.reduce((e, i) => (e[i] = [], e), {}),
-      maxSize: b * 1024 * 1024,
-      maxFiles: h,
-      disabled: p
+      const t = n.filter((m, h) => h !== l);
+      x(t), s == null || s(t);
+    }, { getRootProps: P, getInputProps: U, isDragActive: j } = q({
+      onDrop: M,
+      accept: y.reduce((e, l) => (e[l] = [], e), {}),
+      maxSize: F * 1024 * 1024,
+      maxFiles: c ? 1 : v,
+      disabled: d
     });
-    return /* @__PURE__ */ r(
-      j,
+    return Y(A, () => ({
+      setItems: x
+    }), []), /* @__PURE__ */ r(
+      G,
       {
-        ..._(),
-        ...S,
-        className: f(
-          "border-dashed border-2 p-6 text-center flex flex-col items-center justify-center",
-          p && "bg-gray-300 pointer-events-none",
-          d.length > 0 ? "border-red-500" : "border-gray-300",
-          B && "bg-gray-100",
-          u
+        ...P(),
+        ..._,
+        className: p(
+          "border-dashed p-2 text-center flex flex-col items-center justify-center cursor-pointer",
+          d && "border-[#E4E4E7] pointer-events-none",
+          f.length > 0 ? "border-red-500" : "!border-[#E4E4E7]",
+          j && "bg-gray-100",
+          c && "!shadow-none",
+          c && n.length > 0 && "!p-0 !shadow-none",
+          I
         ),
-        ref: P,
         children: [
-          /* @__PURE__ */ o("input", { ...A() }),
-          c.length === 0 && d.length === 0 && /* @__PURE__ */ r(
+          /* @__PURE__ */ i("input", { ...U() }),
+          n.length === 0 && f.length === 0 && /* @__PURE__ */ r(
             "div",
             {
-              className: f(
+              className: p(
                 "flex flex-col items-center gap-1",
-                l == null ? void 0 : l.idleWrapper
+                o == null ? void 0 : o.idleWrapper
               ),
               children: [
-                /* @__PURE__ */ o(O, { className: "w-8 h-8 text-gray-500" }),
-                !p && /* @__PURE__ */ o("span", { className: "font-semibold text-gray-600", children: z })
+                /* @__PURE__ */ i(R, {}),
+                !d && /* @__PURE__ */ r(H, { children: [
+                  /* @__PURE__ */ i("span", { className: p("font-medium text-md text-foreground max-w-[200px]", B), children: E }),
+                  /* @__PURE__ */ i("span", { className: p("font-normal text-xs text-foreground max-w-[250px]", T), children: b })
+                ] })
               ]
             }
           ),
-          c.length > 0 && /* @__PURE__ */ r("div", { className: f("w-full mt-2", l == null ? void 0 : l.previewWrapper), children: [
-            /* @__PURE__ */ r("span", { className: "font-semibold text-gray-600", children: [
-              D,
+          f.length > 0 && /* @__PURE__ */ r("div", { className: p("w-full mt-4", o == null ? void 0 : o.errorWrapper), children: [
+            /* @__PURE__ */ r("span", { className: "font-semibold text-red-500", children: [
+              N,
               ":"
             ] }),
-            /* @__PURE__ */ o("ul", { className: "mt-2 text-sm text-gray-500 flex flex-wrap gap-4 items-start justify-center", children: c.map((e, i) => {
-              const t = v(e) ? e.name : G(e), n = v(e) ? (e.size / (1024 * 1024)).toFixed(2) + " MB" : "";
+            /* @__PURE__ */ i("ul", { className: "mt-2 text-sm text-red-500 list-disc list-inside", children: f.map((e, l) => /* @__PURE__ */ r("li", { children: [
+              e.file.name,
+              " (",
+              (e.file.size / (1024 * 1024)).toFixed(2),
+              " MB)",
+              !D && /* @__PURE__ */ i("ul", { className: "ml-4 list-disc list-inside", children: e.errors.map((t, m) => /* @__PURE__ */ r("li", { children: [
+                t.code === "file-too-large" && W,
+                t.code === "file-invalid-type" && k,
+                t.code !== "file-too-large" && t.code !== "file-invalid-type" && t.message
+              ] }, m)) })
+            ] }, l)) })
+          ] }),
+          !!(c && n.length) && /* @__PURE__ */ i(
+            Q,
+            {
+              item: n[0],
+              onRemoveClick: (e) => u(e, 0),
+              disabled: d
+            }
+          ),
+          !c && n.length > 0 && /* @__PURE__ */ r("div", { className: p("w-full mt-2", o == null ? void 0 : o.previewWrapper), children: [
+            /* @__PURE__ */ r("pre", { className: "font-semibold text-gray-600", children: [
+              S,
+              ":"
+            ] }),
+            /* @__PURE__ */ i("ul", { className: "mt-2 text-sm text-gray-500 flex flex-wrap gap-4 items-start justify-center", children: n.map((e, l) => {
+              const t = g(e) ? e.name : Z(e), m = g(e) ? (e.size / (1024 * 1024)).toFixed(2) + " MB" : "";
               return /* @__PURE__ */ r(
                 "li",
                 {
                   className: "flex flex-col items-center gap-2 relative",
                   children: [
                     /* @__PURE__ */ r("div", { className: "relative", children: [
-                      /* @__PURE__ */ o(Y, { item: e, styles: l }),
-                      /* @__PURE__ */ o("div", { className: "absolute top-0 right-0 cursor-pointer bg-gray-300 rounded-sm", children: /* @__PURE__ */ o(
-                        X,
+                      /* @__PURE__ */ i(J, { item: e, styles: o }),
+                      /* @__PURE__ */ i(
+                        "div",
                         {
-                          size: 16,
-                          strokeWidth: 1,
-                          color: "black",
-                          onClick: (x) => T(x, i)
+                          className: "absolute top-0 right-0 cursor-pointer bg-gray-300 rounded-sm",
+                          onClick: (h) => u(h, l),
+                          children: /* @__PURE__ */ i(O, { size: 16, strokeWidth: 1, color: "black" })
                         }
-                      ) })
+                      )
                     ] }),
                     /* @__PURE__ */ r("span", { className: "inline-flex flex-col items-center", children: [
-                      /* @__PURE__ */ o("span", { className: "max-w-[80px] text-ellipsis overflow-hidden whitespace-nowrap", children: t }),
-                      n && /* @__PURE__ */ r("span", { children: [
+                      /* @__PURE__ */ i("span", { className: "max-w-[80px] text-ellipsis overflow-hidden whitespace-nowrap", children: t }),
+                      m && /* @__PURE__ */ r("span", { children: [
                         "(",
-                        n,
+                        m,
                         ")"
                       ] })
                     ] })
                   ]
                 },
-                i
+                l
               );
             }) })
-          ] }),
-          d.length > 0 && /* @__PURE__ */ r("div", { className: f("w-full mt-4", l == null ? void 0 : l.errorWrapper), children: [
-            /* @__PURE__ */ r("span", { className: "font-semibold text-red-500", children: [
-              I,
-              ":"
-            ] }),
-            /* @__PURE__ */ o("ul", { className: "mt-2 text-sm text-red-500 list-disc list-inside", children: d.map((e, i) => /* @__PURE__ */ r("li", { children: [
-              e.file.name,
-              " (",
-              (e.file.size / (1024 * 1024)).toFixed(2),
-              " MB)",
-              !F && /* @__PURE__ */ o("ul", { className: "ml-4 list-disc list-inside", children: e.errors.map((t, n) => /* @__PURE__ */ r("li", { children: [
-                t.code === "file-too-large" && k,
-                t.code === "file-invalid-type" && E,
-                t.code !== "file-too-large" && t.code !== "file-invalid-type" && t.message
-              ] }, n)) })
-            ] }, i)) })
           ] })
         ]
       }
     );
   }
 );
-H.displayName = "Dropzone";
+$.displayName = "Dropzone";
 export {
-  H as Dropzone
+  $ as Dropzone
 };

package/Dropzone/Dropzone.types.d.ts

@@ -1,3 +1,4 @@
+import { Dispatch, SetStateAction } from 'react';
 import { FileRejection } from 'react-dropzone';
 
 export type DropzoneValueItem = File | string;
@@ -7,6 +8,7 @@ export interface FilePreviewProps {
 }
 export interface DropzoneTranslations {
     labelDropzonePrompt?: string;
+    labelDropzoneSubPrompt?: string;
     labelOrClickToSelect?: string;
     labelSelectedFiles?: string;
     labelUploadErrors?: string;
@@ -23,6 +25,9 @@ export interface DropzoneProps extends DropzoneTranslations, React.HTMLAttribute
     classNames?: DropzoneStyles;
     value?: DropzoneValueItem[];
     onChangeValue?: (items: DropzoneValueItem[]) => void;
+    singlePick?: boolean;
+    labelDropzoneClassname?: string;
+    labelDropzoneSubClassname?: string;
 }
 export interface DropzoneStyles {
     idleWrapper?: string;
@@ -34,3 +39,6 @@ export interface DropzoneStyles {
 }
 export declare const DEFAULT_FILE_TYPES: string[];
 export declare const DEFAULT_IMAGES_TYPES: string[];
+export interface DropzoneControl {
+    setItems: Dispatch<SetStateAction<DropzoneValueItem[]>>;
+}

package/Dropzone/{FilePreview.mjs → DropzoneFilePreview.mjs}

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "lucide-react";
-import { F } from "../FilePreview-Dhtv8F4u.js";
+import { F } from "../DropzoneFilePreview-Dhtv8F4u.js";
 import "./DropzoneUtils.mjs";
 import "@oneplatformdev/utils";
 export {

package/Dropzone/DropzoneSinglePickPreview.d.ts

@@ -0,0 +1,10 @@
+import { DropzoneValueItem } from './Dropzone.types';
+
+export declare const transformImageToSrc: (preview?: string | File | null) => string;
+interface SinglePickPreviewProps {
+    item: DropzoneValueItem;
+    disabled?: boolean;
+    onRemoveClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare const DropzoneSinglePickPreview: ({ item, disabled, onRemoveClick, }: SinglePickPreviewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/Dropzone/DropzoneSinglePickPreview.mjs

@@ -0,0 +1,44 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import { isFile as d } from "./DropzoneUtils.mjs";
+import { X as f, FileIcon as h } from "lucide-react";
+const g = (t) => {
+  if (!t) return "";
+  switch (!0) {
+    case (typeof t == "string" && !!t.trim() && t !== "null"):
+      return t;
+    case t instanceof File:
+      return URL.createObjectURL(t);
+    case t instanceof FileList:
+      return t[0] ? URL.createObjectURL(t[0]) : "";
+    default:
+      return "";
+  }
+}, j = ({
+  item: t,
+  disabled: i,
+  onRemoveClick: u
+}) => {
+  const r = d(t), e = r ? t.name : t, s = a(() => {
+    var l;
+    return r && ((l = t == null ? void 0 : t.type) == null ? void 0 : l.includes("image")) || typeof t == "string";
+  }, [t, r]), n = a(() => s ? g(t) : "", [t, s]);
+  return /* @__PURE__ */ c("div", { className: "relative w-full h-64 sm:h-80 md:h-96 overflow-hidden  outline-[#E4E4E7] outline-[2px] outline-dashed outline-offset-[-1px] rounded-lg", children: [
+    !i && /* @__PURE__ */ o("div", { className: "absolute top-2 right-2 cursor-pointer bg-white/70 rounded-[4px] p-1 shadow", onClick: u, children: /* @__PURE__ */ o(f, { size: 16, strokeWidth: 2, color: "black" }) }),
+    n ? /* @__PURE__ */ o(
+      "img",
+      {
+        src: n,
+        alt: e == null ? void 0 : e.toString(),
+        className: "w-full h-full object-cover rounded-lg "
+      }
+    ) : /* @__PURE__ */ c("div", { className: "w-full h-full flex flex-col items-center justify-center text-gray-600", children: [
+      /* @__PURE__ */ o(h, { size: 28 }),
+      /* @__PURE__ */ o("span", { className: "text-sm mt-2 break-all px-2 text-center", children: e == null ? void 0 : e.toString() })
+    ] })
+  ] });
+};
+export {
+  j as DropzoneSinglePickPreview,
+  g as transformImageToSrc
+};

package/Dropzone/DropzoneUtils.d.ts

@@ -2,3 +2,4 @@ import { DropzoneValueItem } from './Dropzone.types';
 
 export declare function isFile(item: DropzoneValueItem): item is File;
 export declare function extractName(url: string): string;
+export declare const DefaultFileIcon: () => import("react/jsx-runtime").JSX.Element;

package/Dropzone/DropzoneUtils.mjs

@@ -1,15 +1,24 @@
-function e(t) {
-  return t instanceof File;
+import { jsxs as t, jsx as l } from "react/jsx-runtime";
+function d(e) {
+  return e instanceof File;
 }
-function i(t) {
+function r(e) {
   try {
-    const n = t.split("?")[0].split("#")[0].split("/");
-    return n[n.length - 1] || t;
+    const i = e.split("?")[0].split("#")[0].split("/");
+    return i[i.length - 1] || e;
   } catch {
-    return t;
+    return e;
   }
 }
+const o = () => /* @__PURE__ */ t("svg", { width: "55", height: "55", viewBox: "0 0 55 55", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ l("mask", { id: "mask0_2430_114601", maskUnits: "userSpaceOnUse", x: "7", y: "4", width: "39", height: "46", children: /* @__PURE__ */ l("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.25 4.68359H45.6174V49.354H7.25V4.68359Z", fill: "white" }) }),
+  /* @__PURE__ */ l("g", { mask: "url(#mask0_2430_114601)", children: /* @__PURE__ */ l("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17.5386 8.05859C13.8103 8.05859 10.7143 11.0781 10.6266 14.8018V38.9196C10.5456 42.7468 13.5606 45.8968 17.3518 45.9801H35.5386C39.2938 45.8451 42.2661 42.7468 42.2413 38.9308V18.9216L31.8148 8.05859H17.5656H17.5386ZM17.5664 49.3551H17.2829C11.6309 49.2336 7.1309 44.5356 7.2524 38.8836V14.7613C7.38515 9.17909 11.9932 4.68359 17.5327 4.68359H17.5732H32.5334C32.9924 4.68359 33.4312 4.87034 33.7507 5.20109L45.1492 17.0743C45.4484 17.3871 45.6172 17.8078 45.6172 18.2421V38.9196C45.6532 44.5648 41.2522 49.1526 35.5979 49.3551H17.5664Z", fill: "#0D0E2B", "fill-opacity": "0.7" }) }),
+  /* @__PURE__ */ l("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M43.9198 20.3703H37.7233C33.6036 20.359 30.2578 17.002 30.2578 12.889V6.34375C30.2578 5.41225 31.0138 4.65625 31.9453 4.65625C32.8768 4.65625 33.6328 5.41225 33.6328 6.34375V12.889C33.6328 15.148 35.4688 16.9885 37.7278 16.9953H43.9198C44.8513 16.9953 45.6073 17.7513 45.6073 18.6828C45.6073 19.6143 44.8513 20.3703 43.9198 20.3703Z", fill: "#0D0E2B", "fill-opacity": "0.7" }),
+  /* @__PURE__ */ l("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M25.5708 37.729C24.6393 37.729 23.8833 36.973 23.8833 36.0415V22.4492C23.8833 21.5177 24.6393 20.7617 25.5708 20.7617C26.5023 20.7617 27.2583 21.5177 27.2583 22.4492V36.0415C27.2583 36.973 26.5023 37.729 25.5708 37.729Z", fill: "#0D0E2B", "fill-opacity": "0.7" }),
+  /* @__PURE__ */ l("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M25.5678 37.7279C25.1201 37.7279 24.6881 37.5501 24.3731 37.2306L19.0968 31.9341C18.4398 31.2726 18.4421 30.2039 19.1013 29.5469C19.7628 28.8899 20.8316 28.8899 21.4886 29.5514L25.5678 33.6509L29.6471 29.5514C30.3041 28.8899 31.3728 28.8899 32.0343 29.5469C32.6936 30.2039 32.6958 31.2726 32.0388 31.9341L26.7626 37.2306C26.4476 37.5501 26.0156 37.7279 25.5678 37.7279Z", fill: "#0D0E2B", "fill-opacity": "0.7" })
+] });
 export {
-  i as extractName,
-  e as isFile
+  o as DefaultFileIcon,
+  r as extractName,
+  d as isFile
 };

package/Dropzone/index.mjs

@@ -1,5 +1,5 @@
 import { Dropzone as r } from "./Dropzone.mjs";
-import { D as T, a as _ } from "../FilePreview-Dhtv8F4u.js";
+import { D as T, a as _ } from "../DropzoneFilePreview-Dhtv8F4u.js";
 export {
   T as DEFAULT_FILE_TYPES,
   _ as DEFAULT_IMAGES_TYPES,

package/Form/Form.d.ts

@@ -1,6 +1,6 @@
 import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(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: () => {

package/Form/Form.mjs

@@ -1,95 +1,98 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import * as s from "react";
 import { Slot as F } from "@radix-ui/react-slot";
 import { FormProvider as u, Controller as p, useFormContext as x } from "react-hook-form";
 import { cn as a } from "@oneplatformdev/utils";
 import { Label as I } from "../Label/Label.mjs";
 import "../Label/labelVariants.mjs";
-const M = u, f = s.createContext(
+const M = u, l = s.createContext(
   {}
 ), S = ({
   ...e
-}) => /* @__PURE__ */ i(f.Provider, { value: { name: e.name }, children: /* @__PURE__ */ i(p, { ...e }) }), d = () => {
-  const e = s.useContext(f), o = s.useContext(l), { getFieldState: r, formState: t } = x(), m = r(e.name, t);
+}) => /* @__PURE__ */ n(l.Provider, { value: { name: e.name }, children: /* @__PURE__ */ n(p, { ...e }) }), c = () => {
+  const e = s.useContext(l), t = s.useContext(f), { getFieldState: o, formState: r } = x(), m = o(e.name, r);
   if (!e)
     throw new Error("useFormField should be used within <FormField>");
-  const { id: n } = o;
+  const { id: i } = t;
   return {
-    id: n,
+    id: i,
     name: e.name,
-    formItemId: `${n}-form-item`,
-    formDescriptionId: `${n}-form-item-description`,
-    formMessageId: `${n}-form-item-message`,
+    formItemId: `${i}-form-item`,
+    formDescriptionId: `${i}-form-item-description`,
+    formMessageId: `${i}-form-item-message`,
     ...m
   };
-}, l = s.createContext(
+}, f = s.createContext(
   {}
-), C = s.forwardRef(({ className: e, ...o }, r) => {
-  const t = s.useId();
-  return /* @__PURE__ */ i(l.Provider, { value: { id: t }, children: /* @__PURE__ */ i("div", { ref: r, className: a("space-y-2", e), ...o }) });
+), v = s.forwardRef(({ className: e, ...t }, o) => {
+  const r = s.useId();
+  return /* @__PURE__ */ n(f.Provider, { value: { id: r }, children: /* @__PURE__ */ n("div", { ref: o, className: a("space-y-1", e), ...t }) });
 });
-C.displayName = "FormItem";
-const g = s.forwardRef(({ className: e, ...o }, r) => {
-  const { error: t, formItemId: m } = d();
-  return /* @__PURE__ */ i(
+v.displayName = "FormItem";
+const C = s.forwardRef(({ className: e, ...t }, o) => {
+  const { error: r, formItemId: m } = c();
+  return /* @__PURE__ */ n(
     I,
     {
-      ref: r,
-      className: a(t && "text-destructive", e),
+      ref: o,
+      "data-state": r ? "invalid" : "valid",
+      className: a(r && "text-destructive", e),
       htmlFor: m,
-      ...o
+      ...t
     }
   );
 });
-g.displayName = "FormLabel";
-const v = s.forwardRef(({ ...e }, o) => {
-  const { error: r, formItemId: t, formDescriptionId: m, formMessageId: n } = d();
-  return /* @__PURE__ */ i(
+C.displayName = "FormLabel";
+const g = s.forwardRef(({ className: e, ...t }, o) => {
+  const { error: r, formItemId: m, formDescriptionId: i, formMessageId: d } = c();
+  return /* @__PURE__ */ n(
     F,
     {
       ref: o,
-      id: t,
-      "aria-describedby": r ? `${m} ${n}` : `${m}`,
+      id: m,
+      "data-state": r ? "invalid" : "valid",
+      "aria-describedby": r ? `${i} ${d}` : `${i}`,
       "aria-invalid": !!r,
-      ...e
+      className: a("group/form-control", e),
+      ...t
     }
   );
 });
-v.displayName = "FormControl";
-const N = s.forwardRef(({ className: e, ...o }, r) => {
-  const { formDescriptionId: t } = d();
-  return /* @__PURE__ */ i(
+g.displayName = "FormControl";
+const N = s.forwardRef(({ className: e, ...t }, o) => {
+  const { formDescriptionId: r } = c();
+  return /* @__PURE__ */ n(
     "p",
     {
-      ref: r,
-      id: t,
+      ref: o,
+      id: r,
       className: a("text-[0.8rem] text-muted-foreground", e),
-      ...o
+      ...t
     }
   );
 });
 N.displayName = "FormDescription";
-const w = s.forwardRef(({ className: e, children: o, ...r }, t) => {
-  const { error: m, formMessageId: n } = d(), c = m ? String(m == null ? void 0 : m.message) : o;
-  return c ? /* @__PURE__ */ i(
+const w = s.forwardRef(({ className: e, children: t, ...o }, r) => {
+  const { error: m, formMessageId: i } = c(), d = m ? String(m == null ? void 0 : m.message) : t;
+  return d ? /* @__PURE__ */ n(
     "p",
     {
-      ref: t,
-      id: n,
+      ref: r,
+      id: i,
       className: a("text-[0.8rem] font-medium text-destructive", e),
-      ...r,
-      children: c
+      ...o,
+      children: d
     }
   ) : null;
 });
 w.displayName = "FormMessage";
 export {
   M as Form,
-  v as FormControl,
+  g as FormControl,
   N as FormDescription,
   S as FormField,
-  C as FormItem,
-  g as FormLabel,
+  v as FormItem,
+  C as FormLabel,
   w as FormMessage,
-  d as useFormField
+  c as useFormField
 };

package/Form/FormRenderControl.d.ts

@@ -1,5 +1,4 @@
-import { FieldValues } from 'react-hook-form/dist/types/fields';
-import { UseFormReturn } from 'react-hook-form';
+import { FieldValues } from 'react-hook-form';
 import { FormRenderControlProps } from './FormRenderControl.types';
 
-export declare const FormRenderControl: <Data extends FieldValues, Form extends UseFormReturn<Data>>(props: FormRenderControlProps<Data, Form>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormRenderControl: <Data extends FieldValues>(props: FormRenderControlProps<Data>) => import("react/jsx-runtime").JSX.Element;

package/Form/FormRenderControl.mjs

@@ -1,21 +1,21 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { FormField as d, FormItem as F, FormLabel as a, FormMessage as i } from "./Form.mjs";
-const x = (e) => {
-  const { form: n, name: m, label: o, render: t, ...l } = e;
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { FormField as d, FormItem as i, FormLabel as F, FormMessage as p } from "./Form.mjs";
+const b = (e) => {
+  const { form: n, name: m, label: o, render: t, containerProps: l = {}, ...s } = e;
   return /* @__PURE__ */ r(
     d,
     {
       control: n.control,
       name: m,
-      render: (s) => /* @__PURE__ */ c(F, { children: [
-        !!o && /* @__PURE__ */ r(a, { children: o }),
-        t(s),
-        /* @__PURE__ */ r(i, {})
+      render: (c) => /* @__PURE__ */ a(i, { ...l, children: [
+        !!o && /* @__PURE__ */ r(F, { children: o }),
+        t(c),
+        /* @__PURE__ */ r(p, {})
       ] }),
-      ...l
+      ...s
     }
   );
 };
 export {
-  x as FormRenderControl
+  b as FormRenderControl
 };

package/Form/FormRenderControl.types.d.ts

@@ -1,7 +1,4 @@
-import { ControllerFieldState, ControllerRenderProps } from 'react-hook-form/dist/types/controller';
-import { FieldPath, UseFormStateReturn } from 'react-hook-form/dist/types';
-import { FieldValues } from 'react-hook-form/dist/types/fields';
-import { UseFormReturn } from 'react-hook-form';
+import { ControllerFieldState, ControllerRenderProps, FieldPath, FieldValues, UseFormReturn, UseFormStateReturn } from 'react-hook-form';
 import { default as React } from 'react';
 
 export type FormRenderProps<Data extends FieldValues> = ({ field, fieldState, formState, }: {
@@ -9,10 +6,11 @@ export type FormRenderProps<Data extends FieldValues> = ({ field, fieldState, fo
     fieldState: ControllerFieldState;
     formState: UseFormStateReturn<Data>;
 }) => React.ReactElement;
-export interface FormRenderControlProps<Data extends FieldValues, Form extends UseFormReturn<Data>> {
-    form: Form;
+export interface FormRenderControlProps<Data extends FieldValues> {
+    form: UseFormReturn<Data>;
     name: FieldPath<Data>;
     label?: string;
     render: FormRenderProps<Data>;
+    containerProps?: React.HTMLAttributes<HTMLDivElement>;
 }
-export type FormRenderControlExtendProps<Data extends FieldValues, Form extends UseFormReturn<Data>> = Pick<FormRenderControlProps<Data, Form>, 'form' | 'name' | 'label'>;
+export type FormRenderControlExtendProps<Data extends FieldValues> = Omit<FormRenderControlProps<Data>, 'render'>;

package/FormCheckbox/FormCheckbox.d.ts

@@ -1,5 +1,4 @@
-import { UseFormReturn } from 'react-hook-form';
-import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FormCheckboxProps } from './FormCheckbox.types';
+import { FieldValues } from 'react-hook-form';
 
-export declare const FormCheckbox: <Data extends FieldValues, Form extends UseFormReturn<Data>>(props: FormCheckboxProps<Data, Form>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormCheckbox: <Data extends FieldValues>(props: FormCheckboxProps<Data>) => import("react/jsx-runtime").JSX.Element;