@oneplatformdev/ui 0.0.1-beta.13 → 0.0.1-beta.17

package/Dropzone/Dropzone.d.ts

@@ -12,7 +12,7 @@ import { DropzoneProps } from './Dropzone.types';
  * @param {(errors: FileRejection[]) => void} [props.onErrors] - Callback triggered when file errors occur.
  * @param {boolean} [props.hideErrors=false] - Whether to hide error messages.
  * @param {boolean} [props.disabled=false] - Whether the dropzone is disabled.
- * @param {DropzoneStyles} [props.styles] - Custom styles for different dropzone states.
+ * @param {DropzoneStyles} [props.classNames] - Custom classNames for different dropzone states.
  * @param {DropzoneValueItem[]} [props.value=[]] - Current selected files or URLs.
  * @param {(items: DropzoneValueItem[]) => void} [props.onChangeValue] - Callback triggered when file selection changes.
  * @param {string} [props.className] - Additional class names for styling.

package/Dropzone/Dropzone.mjs

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

package/Dropzone/Dropzone.types.d.ts

@@ -6,22 +6,21 @@ export interface FilePreviewProps {
     styles?: Pick<DropzoneStyles, 'previewWraper' | 'previewImage' | 'previewFile'>;
 }
 export interface DropzoneTranslations {
-    dropFileHere: string;
-    orClickToSelect: string;
-    selectedFiles: string;
-    uploadErrors: string;
-    fileTooLarge: string;
-    invalidFileType: string;
+    labelDropzonePrompt?: string;
+    labelOrClickToSelect?: string;
+    labelSelectedFiles?: string;
+    labelUploadErrors?: string;
+    labelFileTooLarge?: string;
+    labelInvalidFileType?: string;
 }
-export interface DropzoneProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface DropzoneProps extends DropzoneTranslations, React.HTMLAttributes<HTMLDivElement> {
     acceptTypes?: string[];
     maxSizeMB: number;
-    translations: DropzoneTranslations;
     maxFiles?: number;
     onErrors?: (errors: FileRejection[]) => void;
     hideErrors?: boolean;
     disabled?: boolean;
-    styles?: DropzoneStyles;
+    classNames?: DropzoneStyles;
     value?: DropzoneValueItem[];
     onChangeValue?: (items: DropzoneValueItem[]) => void;
 }

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/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/FormDropzone/FormDropzone.d.ts

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

package/FormDropzone/FormDropzone.mjs

@@ -0,0 +1,26 @@
+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,7 @@
+import { FormRenderControlExtendProps } from '../Form';
+import { DropzoneProps } from '../Dropzone';
+import { UseFormReturn } from 'react-hook-form';
+import { FieldValues } from 'react-hook-form/dist/types/fields';
+
+export interface FormDropzoneProps<Data extends FieldValues, Form extends UseFormReturn<Data>> extends FormRenderControlExtendProps<Data, Form>, 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/FormSelect/FormSelect.types.d.ts

@@ -3,5 +3,5 @@ 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, Form extends UseFormReturn<Data>, ExtendOptionData> extends FormRenderControlExtendProps<Data, Form>, Omit<SelectProps<ExtendOptionData>, 'onChange'> {
 }

package/index.d.ts

@@ -64,3 +64,4 @@ export * from './Toggle';
 export * from './ToggleGroup';
 export * from './Tooltip';
 export * from './Dropzone';
+export * from './FormDropzone';

package/index.mjs

@@ -78,7 +78,8 @@ import { ToggleGroup as cn, ToggleGroupItem as Mn } from "./ToggleGroup/ToggleGr
 import { TooltipContent as An, TooltipProvider as In, TooltipRoot as wn, TooltipTrigger as hn } from "./Tooltip/TooltipRoot.mjs";
 import { Tooltip as Fn } from "./Tooltip/Tooltip.mjs";
 import { Dropzone as Bn } from "./Dropzone/Dropzone.mjs";
-import { D as Rn, a as kn } from "./FilePreview-Dhtv8F4u.js";
+import { D as Rn, a as kn } from "./DropzoneFilePreview-Dhtv8F4u.js";
+import { FormDropzone as Nn } from "./FormDropzone/FormDropzone.mjs";
 export {
   e as Accordion,
   t as AccordionContent,
@@ -195,6 +196,7 @@ export {
   Rr as FormControl,
   Jr as FormDatePicker,
   kr as FormDescription,
+  Nn as FormDropzone,
   Hr as FormField,
   Qr as FormInput,
   Nr as FormItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.0.1-beta.13",
+  "version": "0.0.1-beta.17",
   "description": "UI React Components.",
   "author": "One Platform Development Team",
   "keywords": [