@oneplatformdev/ui 0.0.1-beta.4 → 0.0.1-beta.40

package/Dropzone/Dropzone.mjs

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

package/Dropzone/Dropzone.types.d.ts

@@ -0,0 +1,36 @@
+import { FileRejection } from 'react-dropzone';
+
+export type DropzoneValueItem = File | string;
+export interface FilePreviewProps {
+    item: DropzoneValueItem;
+    styles?: Pick<DropzoneStyles, 'previewWraper' | 'previewImage' | 'previewFile'>;
+}
+export interface DropzoneTranslations {
+    labelDropzonePrompt?: string;
+    labelOrClickToSelect?: string;
+    labelSelectedFiles?: string;
+    labelUploadErrors?: string;
+    labelFileTooLarge?: string;
+    labelInvalidFileType?: string;
+}
+export interface DropzoneProps extends DropzoneTranslations, React.HTMLAttributes<HTMLDivElement> {
+    acceptTypes?: string[];
+    maxSizeMB: number;
+    maxFiles?: number;
+    onErrors?: (errors: FileRejection[]) => void;
+    hideErrors?: boolean;
+    disabled?: boolean;
+    classNames?: DropzoneStyles;
+    value?: DropzoneValueItem[];
+    onChangeValue?: (items: DropzoneValueItem[]) => void;
+}
+export interface DropzoneStyles {
+    idleWrapper?: string;
+    previewWrapper?: string;
+    errorWrapper?: string;
+    previewWraper?: string;
+    previewImage?: string;
+    previewFile?: string;
+}
+export declare const DEFAULT_FILE_TYPES: string[];
+export declare const DEFAULT_IMAGES_TYPES: string[];

package/Dropzone/DropzoneFilePreview.d.ts

@@ -0,0 +1,4 @@
+import { FilePreviewProps } from './Dropzone.types';
+import { FC } from 'react';
+
+export declare const FilePreview: FC<FilePreviewProps>;

package/Dropzone/DropzoneFilePreview.mjs

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

package/Dropzone/DropzoneUtils.d.ts

@@ -0,0 +1,4 @@
+import { DropzoneValueItem } from './Dropzone.types';
+
+export declare function isFile(item: DropzoneValueItem): item is File;
+export declare function extractName(url: string): string;

package/Dropzone/DropzoneUtils.mjs

@@ -0,0 +1,15 @@
+function e(t) {
+  return t instanceof File;
+}
+function i(t) {
+  try {
+    const n = t.split("?")[0].split("#")[0].split("/");
+    return n[n.length - 1] || t;
+  } catch {
+    return t;
+  }
+}
+export {
+  i as extractName,
+  e as isFile
+};

package/Dropzone/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dropzone';
+export * from './Dropzone.types';

package/Dropzone/index.mjs

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

package/Dropzone/package.json

@@ -0,0 +1,7 @@
+{
+  "sideEffects": false,
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "default": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/DropzoneFilePreview-Dhtv8F4u.js

@@ -0,0 +1,67 @@
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import { useState as m, useEffect as f } from "react";
+import { File as s } from "lucide-react";
+import { isFile as o } from "./Dropzone/DropzoneUtils.mjs";
+import { cn as c } from "@oneplatformdev/utils";
+const h = [
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "text/csv",
+  "text/plain",
+  "application/pdf"
+], u = [
+  "image/png",
+  "image/jpeg",
+  "image/jpg",
+  "image/webp",
+  "image/gif"
+], j = ({ item: e, styles: r }) => {
+  const [t, a] = m(null), p = o(e) && u.includes(e.type);
+  return f(() => {
+    let n = null;
+    if (o(e) && p) {
+      const i = new FileReader();
+      return i.onloadend = () => a(i.result), i.readAsDataURL(e), () => a(null);
+    } else {
+      if (typeof e == "string")
+        return n = new Image(), n.src = e, n.onload = () => a(e), n.onerror = () => a(null), () => {
+          n.onload = null, n.onerror = null;
+        };
+      a(null);
+    }
+    return () => a(null);
+  }, [e, p]), /* @__PURE__ */ l(
+    "div",
+    {
+      className: c(
+        "w-32 h-32 border border-gray-300 rounded-md overflow-hidden flex items-center justify-center",
+        r == null ? void 0 : r.previewWraper
+      ),
+      children: t ? /* @__PURE__ */ l(
+        "img",
+        {
+          src: t,
+          alt: o(e) ? e.name : "external-image",
+          className: c("w-full h-full object-cover", r == null ? void 0 : r.previewImage)
+        }
+      ) : /* @__PURE__ */ d(
+        "div",
+        {
+          className: c(
+            "flex flex-col items-center justify-center text-gray-500 text-sm p-2 text-center",
+            r == null ? void 0 : r.previewFile
+          ),
+          children: [
+            /* @__PURE__ */ l(s, { className: "w-6 h-6" }),
+            o(e) ? /* @__PURE__ */ l("span", { className: "text-xs break-all", children: e.name }) : /* @__PURE__ */ l("span", { className: "text-xs break-all", children: e })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  h as D,
+  j as F,
+  u as a
+};

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 { 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

@@ -9,10 +9,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';
 
-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;

package/FormCheckbox/FormCheckbox.types.d.ts

@@ -1,7 +1,6 @@
-import { UseFormReturn } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FormRenderControlExtendProps } from '../Form';
 
-export interface FormCheckboxProps<Data extends FieldValues, Form extends UseFormReturn<Data>> extends FormRenderControlExtendProps<Data, Form> {
+export interface FormCheckboxProps<Data extends FieldValues> extends FormRenderControlExtendProps<Data> {
     disabled?: boolean;
 }

package/FormCombobox/FormCombobox.d.ts

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

package/FormCombobox/FormCombobox.types.d.ts

@@ -1,7 +1,6 @@
 import { FormRenderControlExtendProps } from '../Form';
 import { ComboboxProps } from '../Combobox';
-import { UseFormReturn } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 
-export interface FormComboboxProps<Data extends FieldValues, Form extends UseFormReturn<Data>> extends FormRenderControlExtendProps<Data, Form>, ComboboxProps {
+export interface FormComboboxProps<Data extends FieldValues> extends FormRenderControlExtendProps<Data>, Omit<ComboboxProps, 'value' | 'onChange'> {
 }

package/FormDatePicker/FormDatePicker.d.ts

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

package/FormDatePicker/FormDatePicker.types.d.ts

@@ -1,7 +1,6 @@
 import { DatePickerProps } from '../DatePicker';
 import { FormRenderControlExtendProps } from '../Form';
-import { UseFormReturn } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 
-export interface FormDatePickerProps<Data extends FieldValues, Form extends UseFormReturn<Data>> extends FormRenderControlExtendProps<Data, Form>, DatePickerProps {
+export interface FormDatePickerProps<Data extends FieldValues> extends FormRenderControlExtendProps<Data>, DatePickerProps {
 }

package/FormDropzone/FormDropzone.d.ts

@@ -0,0 +1,4 @@
+import { FormDropzoneProps } from './FormDropzone.types';
+import { FieldValues } from 'react-hook-form';
+
+export declare const FormDropzone: <Data extends FieldValues>(props: FormDropzoneProps<Data>) => import("react/jsx-runtime").JSX.Element;

package/FormDropzone/FormDropzone.mjs

@@ -0,0 +1,19 @@
+import { jsx as o } from "react/jsx-runtime";
+import { FormControl as a } from "../Form/Form.mjs";
+import { FormRenderControl as l } from "../Form/FormRenderControl.mjs";
+import { Dropzone as f } from "../Dropzone/Dropzone.mjs";
+const h = (n) => {
+  const { form: e, label: m, name: t, ...p } = n;
+  return /* @__PURE__ */ o(
+    l,
+    {
+      form: e,
+      label: m,
+      name: t,
+      render: ({ field: r }) => /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(f, { ...p, ...r, onChangeValue: r.onChange }) })
+    }
+  );
+};
+export {
+  h as FormDropzone
+};

package/FormDropzone/FormDropzone.types.d.ts

@@ -0,0 +1,6 @@
+import { FormRenderControlExtendProps } from '../Form';
+import { DropzoneProps } from '../Dropzone';
+import { FieldValues } from 'react-hook-form/dist/types/fields';
+
+export interface FormDropzoneProps<Data extends FieldValues> extends FormRenderControlExtendProps<Data>, DropzoneProps {
+}

package/FormDropzone/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FormDropzone';
+export * from './FormDropzone.types';

package/FormDropzone/index.mjs

@@ -0,0 +1,4 @@
+import { FormDropzone as e } from "./FormDropzone.mjs";
+export {
+  e as FormDropzone
+};

package/FormDropzone/package.json

@@ -0,0 +1,7 @@
+{
+  "sideEffects": false,
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "default": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/FormInput/FormInput.d.ts

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

package/FormInput/FormInput.mjs

@@ -1,18 +1,17 @@
 import { jsx as r } from "react/jsx-runtime";
 import { FormControl as l } from "../Form/Form.mjs";
-import { FormRenderControl as i } from "../Form/FormRenderControl.mjs";
-import { Input as u } from "../Input/Input.mjs";
-import "../Input/inputVariants.mjs";
-const d = (m) => {
+import { FormRenderControl as u } from "../Form/FormRenderControl.mjs";
+import { Input as a } from "../Input/Input.mjs";
+const F = (m) => {
   const { form: t, label: e, name: n, ...p } = m;
   return /* @__PURE__ */ r(
-    i,
+    u,
     {
       form: t,
       name: n,
       label: e,
       render: ({ field: o }) => /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
-        u,
+        a,
         {
           ...o,
           value: o.value || "",
@@ -23,5 +22,5 @@ const d = (m) => {
   );
 };
 export {
-  d as FormInput
+  F as FormInput
 };

package/FormInput/FormInput.types.d.ts

@@ -1,7 +1,6 @@
 import { InputProps } from '../Input';
 import { FormRenderControlExtendProps } from '../Form';
-import { UseFormReturn } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 
-export interface FormInputProps<Data extends FieldValues, Form extends UseFormReturn<Data>> extends FormRenderControlExtendProps<Data, Form>, Omit<InputProps, 'form' | 'name'> {
+export interface FormInputProps<Data extends FieldValues> extends FormRenderControlExtendProps<Data>, Omit<InputProps, 'form' | 'name'> {
 }

package/FormSelect/FormSelect.d.ts

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

package/FormSelect/FormSelect.mjs

@@ -1,38 +1,40 @@
 import { jsx as e } from "react/jsx-runtime";
-import { FormControl as a } from "../Form/Form.mjs";
-import { FormRenderControl as f } from "../Form/FormRenderControl.mjs";
+import { FormControl as f } from "../Form/Form.mjs";
+import { FormRenderControl as d } from "../Form/FormRenderControl.mjs";
 import "../Select/SelectRoot.mjs";
-import { Select as d } from "../Select/Select.mjs";
-const x = (m) => {
+import { Select as g } from "../Select/Select.mjs";
+const S = (n) => {
   const {
-    form: n,
+    form: m,
     label: i,
-    name: l,
-    options: p = [],
+    name: p,
+    options: l = [],
     onChange: r,
-    ...c
-  } = m;
+    containerProps: c,
+    ...s
+  } = n;
   return /* @__PURE__ */ e(
-    f,
+    d,
     {
-      form: n,
-      name: l,
+      form: m,
+      name: p,
       label: i,
+      containerProps: c,
       render: ({ field: t }) => /* @__PURE__ */ e(
-        d,
+        g,
         {
           value: t.value,
-          options: p,
+          options: l,
           onChange: (o) => {
             t.onChange(o), r == null || r(o);
           },
-          renderTrigger: (o, s) => /* @__PURE__ */ e(a, { children: s }),
-          ...c
+          renderTrigger: (o, a) => /* @__PURE__ */ e(f, { children: a }),
+          ...s
         }
       )
     }
   );
 };
 export {
-  x as FormSelect
+  S as FormSelect
 };

package/FormSelect/FormSelect.types.d.ts

@@ -1,7 +1,6 @@
 import { SelectProps } from '../Select';
 import { FormRenderControlExtendProps } from '../Form';
-import { UseFormReturn } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 
-export interface FormSelectProps<Data extends FieldValues, Form extends UseFormReturn<Data>, ExtendOptionData> extends FormRenderControlExtendProps<Data, Form>, SelectProps<ExtendOptionData> {
+export interface FormSelectProps<Data extends FieldValues, ExtendOptionData> extends FormRenderControlExtendProps<Data>, Omit<SelectProps<ExtendOptionData>, 'onChange'>, Partial<Pick<SelectProps<ExtendOptionData>, 'onChange'>> {
 }

package/FormTextarea/FormTextarea.d.ts

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

package/FormTextarea/FormTextarea.mjs

@@ -1,26 +1,27 @@
 import { jsx as r } from "react/jsx-runtime";
-import { FormControl as l } from "../Form/Form.mjs";
-import { FormRenderControl as p } from "../Form/FormRenderControl.mjs";
-import { Textarea as f } from "../Textarea/Textarea.mjs";
-const u = (e) => {
-  const { form: m, label: t, name: n, ...a } = e;
+import { FormControl as p } from "../Form/Form.mjs";
+import { FormRenderControl as i } from "../Form/FormRenderControl.mjs";
+import { Textarea as s } from "../Textarea/Textarea.mjs";
+const F = (e) => {
+  const { form: t, label: m, name: n, containerProps: a, ...l } = e;
   return /* @__PURE__ */ r(
-    p,
+    i,
     {
-      form: m,
+      form: t,
       name: n,
-      label: t,
-      render: ({ field: o }) => /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
-        f,
+      label: m,
+      containerProps: a,
+      render: ({ field: o }) => /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(
+        s,
         {
           ...o,
           value: o.value || "",
-          ...a
+          ...l
         }
       ) })
     }
   );
 };
 export {
-  u as FormTextarea
+  F as FormTextarea
 };