siam-ui-utils 3.0.31 → 3.1.0

package/dist/custom-input/constant.js

@@ -0,0 +1,5 @@
+const MENSAJE = { LABEL_FILE: "Elija el archivo..." };
+export {
+  MENSAJE
+};
+//# sourceMappingURL=constant.js.map

package/dist/custom-input/constant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constant.js","sources":["../../src/custom-input/constant.js"],"sourcesContent":["export const MENSAJE = { LABEL_FILE: 'Elija el archivo...' };\r\n"],"names":[],"mappings":"AAAY,MAAC,UAAU,EAAE,YAAY,sBAAqB;"}

package/dist/custom-input/index.css

@@ -0,0 +1,167 @@
+/* Estilos para los checkbox personalizados */
+.custom-checkbox input[type='checkbox'] {
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+}
+
+.custom-checkbox input[type='checkbox'] + label {
+  position: relative;
+  padding-left: 2rem;
+  cursor: pointer;
+  line-height: 0px !important;
+}
+
+.custom-checkbox input[type='checkbox'] + label::before {
+  content: '';
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+  background-color: white;
+  position: absolute;
+  left: 0;
+  top: -11px;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.custom-checkbox input[type='checkbox']:checked + label::before {
+  background-color: #900604;
+  border-color: #900604;
+}
+
+.custom-checkbox input[type='checkbox']:checked + label::after {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: 0.3rem;
+  width: 0.5rem;
+  height: 0.6rem;
+  border: solid white;
+  border-width: 0 0.2rem 0.2rem 0;
+  transform: rotate(45deg);
+}
+
+/* Estilos específicos para CheckMultiSelect */
+.check-multi-select
+  .custom-checkbox
+  input[type='checkbox']:not(:checked)
+  + label::before {
+  background-color: #900604; /* Fondo rojo en CheckMultiSelect para desmarcados */
+  border-color: #900604;
+}
+
+.check-multi-select
+  .custom-checkbox
+  input[type='checkbox']:not(:checked)
+  + label::after {
+  content: '';
+  position: absolute;
+  top: -0.29rem; /* Ajusta la posición del tilde */
+  left: 0.25rem;
+  width: 0.5rem;
+  height: 0.1rem;
+  background-color: white;
+}
+
+/* Estilos para checkboxes deshabilitados */
+.custom-checkbox input[type='checkbox']:disabled + label {
+  cursor: not-allowed; /* Cambia el cursor */
+  color: #6c757d;
+  line-height: 0px !important;
+}
+
+.custom-checkbox input[type='checkbox']:disabled + label::before {
+  background-color: #e9ecef;
+  border-color: #ced4da;
+}
+
+.custom-checkbox input[type='checkbox']:disabled:checked + label::before {
+  background-color: #adb5bd;
+  border-color: #adb5bd;
+}
+
+/* Estilos para los radio buttons personalizados */
+.custom-radio input[type='radio'] {
+  position: absolute;
+  opacity: 0;
+}
+
+.custom-radio label {
+  display: inline-flex;
+  align-items: center;
+  justify-items: center;
+  cursor: pointer;
+}
+
+.custom-radio label::before {
+  position: absolute;
+  content: '';
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #ced4da;
+  background-color: white;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.custom-radio input[type='radio']:checked + label::before {
+  position: absolute;
+  background-color: #900604;
+  border-color: #900604;
+}
+
+.custom-radio input[type='radio']:checked + label::after {
+  content: '';
+  position: absolute;
+  width: 0.5rem;
+  height: 0.45rem;
+  background-color: white !important;
+  transition: translateY(-50%);
+  border-radius: 50%;
+  display: inline-block;
+}
+
+/* Estilos específicos para radio buttons deshabilitados */
+.custom-radio input[type='radio']:disabled + label {
+  cursor: not-allowed; /* Cambia el cursor */
+  color: #6c757d; /* Color gris */
+}
+
+.custom-radio input[type='radio']:disabled + label::before {
+  background-color: #e9ecef; /* Fondo gris claro */
+  border-color: #ced4da; /* Borde gris claro */
+}
+
+.custom-radio input[type='radio']:disabled:checked + label::before {
+  background-color: #adb5bd; /* Fondo gris más oscuro para el estado checked */
+  border-color: #adb5bd; /* Borde gris más oscuro */
+}
+
+/* Estilos para el custom file */
+.custom-file {
+  height: calc(2.5rem + 2px);
+}
+
+.custom-file-label:focus,
+.custom-file-input:focus {
+  border-color: #900604;
+}
+
+.custom-file-label::after {
+  height: calc(2.5rem + 2px - 2px);
+  padding: 0.75rem 0.75rem 0.5rem 0.75rem;
+  background: #900604;
+  color: white; /* Ajustado para contraste */
+  border-color: #900604;
+}
+
+.custom-file-input:focus ~ .custom-file-label {
+  border-color: rgba(144, 6, 4, 0.6);
+}
+
+.custom-file-input {
+  box-shadow: initial !important;
+}

package/dist/custom-input/index.js

@@ -0,0 +1,12 @@
+import "./index.css";
+import { CustomInputCheckbox } from "./CustomInputCheckbox.js";
+import { CustomInputRadio } from "./CustomInputRadio.js";
+import { CustomInputFile } from "./CustomInputFile.js";
+import { CustomInputCurrency } from "./CustomInputCurrency.js";
+export {
+  CustomInputCheckbox,
+  CustomInputCurrency,
+  CustomInputFile,
+  CustomInputRadio
+};
+//# sourceMappingURL=index.js.map

package/dist/custom-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/drag-and-dropzone/DropzoneComponent.js

@@ -0,0 +1,83 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useEffect } from "react";
+function DropzoneComponent({
+  config = {},
+  djsConfig = {},
+  eventHandlers = {},
+  className = "",
+  action,
+  children
+}) {
+  const dropzoneRef = useRef(null);
+  const dropzoneInstance = useRef(null);
+  const [files, setFiles] = useState([]);
+  const options = useMemo(() => {
+    return {
+      ...config.postUrl ? { url: config.postUrl } : {},
+      ...djsConfig
+    };
+  }, [config.postUrl, djsConfig]);
+  const setupEvents = (dz) => {
+    if (!eventHandlers) return;
+    Object.entries(eventHandlers).forEach(([event, handler]) => {
+      if (!handler) return;
+      const handlers = Array.isArray(handler) ? handler : [handler];
+      handlers.forEach((fn) => {
+        if (event === "init") {
+          fn(dz);
+        } else {
+          dz.on(event, fn);
+        }
+      });
+    });
+    dz.on("addedfile", (file) => {
+      if (!file) return;
+      setFiles((prev) => [...prev, file]);
+    });
+    dz.on("removedfile", (file) => {
+      if (!file) return;
+      setFiles(
+        (prev) => prev.filter((f) => !(f.name === file.name && f.size === file.size))
+      );
+    });
+  };
+  useEffect(() => {
+    let mounted = true;
+    const initDropzone = async () => {
+      const { default: Dropzone } = await import("../node_modules/dropzone/dist/dropzone.js");
+      if (!mounted) return;
+      Dropzone.autoDiscover = false;
+      const node = config.dropzoneSelector || dropzoneRef.current;
+      if (!node) return;
+      const dz = new Dropzone(node, options);
+      dropzoneInstance.current = dz;
+      setupEvents(dz);
+    };
+    initDropzone();
+    return () => {
+      mounted = false;
+      const dz = dropzoneInstance.current;
+      if (!dz) return;
+      dz.off();
+      dz.destroy();
+    };
+  }, []);
+  useEffect(() => {
+    const dz = dropzoneInstance.current;
+    if (!dz) return;
+    dz.options = {
+      ...dz.options,
+      ...djsConfig,
+      ...config.postUrl ? { url: config.postUrl } : {}
+    };
+  }, [config.postUrl, djsConfig]);
+  const dropzoneClass = className ? `filepicker dropzone ${className}` : "filepicker dropzone";
+  if (!config.postUrl && action) {
+    return /* @__PURE__ */ jsx("form", { ref: dropzoneRef, action, className: dropzoneClass, children });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: dropzoneRef, className: dropzoneClass, children });
+}
+export {
+  DropzoneComponent as default
+};
+//# sourceMappingURL=DropzoneComponent.js.map

package/dist/drag-and-dropzone/DropzoneComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropzoneComponent.js","sources":["../../src/drag-and-dropzone/DropzoneComponent.jsx"],"sourcesContent":["import { useEffect, useRef, useState, useMemo } from 'react';\r\n\r\nexport default function DropzoneComponent({\r\n  config = {},\r\n  djsConfig = {},\r\n  eventHandlers = {},\r\n  className = '',\r\n  action,\r\n  children,\r\n}) {\r\n  const dropzoneRef = useRef(null);\r\n  const dropzoneInstance = useRef(null);\r\n\r\n  const [files, setFiles] = useState([]);\r\n\r\n  const options = useMemo(() => {\r\n    return {\r\n      ...(config.postUrl ? { url: config.postUrl } : {}),\r\n      ...djsConfig,\r\n    };\r\n  }, [config.postUrl, djsConfig]);\r\n\r\n  const setupEvents = (dz) => {\r\n    if (!eventHandlers) return;\r\n\r\n    Object.entries(eventHandlers).forEach(([event, handler]) => {\r\n      if (!handler) return;\r\n\r\n      const handlers = Array.isArray(handler) ? handler : [handler];\r\n\r\n      handlers.forEach((fn) => {\r\n        if (event === 'init') {\r\n          fn(dz);\r\n        } else {\r\n          dz.on(event, fn);\r\n        }\r\n      });\r\n    });\r\n\r\n    dz.on('addedfile', (file) => {\r\n      if (!file) return;\r\n      setFiles((prev) => [...prev, file]);\r\n    });\r\n\r\n    dz.on('removedfile', (file) => {\r\n      if (!file) return;\r\n\r\n      setFiles((prev) =>\r\n        prev.filter((f) => !(f.name === file.name && f.size === file.size))\r\n      );\r\n    });\r\n  };\r\n\r\n  useEffect(() => {\r\n    let mounted = true;\r\n\r\n    const initDropzone = async () => {\r\n      const { default: Dropzone } = await import('dropzone');\r\n\r\n      if (!mounted) return;\r\n\r\n      Dropzone.autoDiscover = false;\r\n\r\n      const node = config.dropzoneSelector || dropzoneRef.current;\r\n      if (!node) return;\r\n\r\n      const dz = new Dropzone(node, options);\r\n\r\n      dropzoneInstance.current = dz;\r\n\r\n      setupEvents(dz);\r\n    };\r\n\r\n    initDropzone();\r\n\r\n    return () => {\r\n      mounted = false;\r\n\r\n      const dz = dropzoneInstance.current;\r\n\r\n      if (!dz) return;\r\n\r\n      dz.off();\r\n      dz.destroy();\r\n    };\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    const dz = dropzoneInstance.current;\r\n\r\n    if (!dz) return;\r\n\r\n    dz.options = {\r\n      ...dz.options,\r\n      ...djsConfig,\r\n      ...(config.postUrl ? { url: config.postUrl } : {}),\r\n    };\r\n  }, [config.postUrl, djsConfig]);\r\n\r\n  const dropzoneClass = className\r\n    ? `filepicker dropzone ${className}`\r\n    : 'filepicker dropzone';\r\n\r\n  if (!config.postUrl && action) {\r\n    return (\r\n      <form ref={dropzoneRef} action={action} className={dropzoneClass}>\r\n        {children}\r\n      </form>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div ref={dropzoneRef} className={dropzoneClass}>\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"],"names":[],"mappings":";;AAEA,SAAwB,kBAAkB;AAAA,EACxC,SAAS,CAAA;AAAA,EACT,YAAY,CAAA;AAAA,EACZ,gBAAgB,CAAA;AAAA,EAChB,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAG;AACD,QAAM,cAAc,OAAO,IAAI;AAC/B,QAAM,mBAAmB,OAAO,IAAI;AAEpC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAA,CAAE;AAErC,QAAM,UAAU,QAAQ,MAAM;AAC5B,WAAO;AAAA,MACL,GAAI,OAAO,UAAU,EAAE,KAAK,OAAO,QAAA,IAAY,CAAA;AAAA,MAC/C,GAAG;AAAA,IAAA;AAAA,EAEP,GAAG,CAAC,OAAO,SAAS,SAAS,CAAC;AAE9B,QAAM,cAAc,CAAC,OAAO;AAC1B,QAAI,CAAC,cAAe;AAEpB,WAAO,QAAQ,aAAa,EAAE,QAAQ,CAAC,CAAC,OAAO,OAAO,MAAM;AAC1D,UAAI,CAAC,QAAS;AAEd,YAAM,WAAW,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO;AAE5D,eAAS,QAAQ,CAAC,OAAO;AACvB,YAAI,UAAU,QAAQ;AACpB,aAAG,EAAE;AAAA,QACP,OAAO;AACL,aAAG,GAAG,OAAO,EAAE;AAAA,QACjB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,OAAG,GAAG,aAAa,CAAC,SAAS;AAC3B,UAAI,CAAC,KAAM;AACX,eAAS,CAAC,SAAS,CAAC,GAAG,MAAM,IAAI,CAAC;AAAA,IACpC,CAAC;AAED,OAAG,GAAG,eAAe,CAAC,SAAS;AAC7B,UAAI,CAAC,KAAM;AAEX;AAAA,QAAS,CAAC,SACR,KAAK,OAAO,CAAC,MAAM,EAAE,EAAE,SAAS,KAAK,QAAQ,EAAE,SAAS,KAAK,KAAK;AAAA,MAAA;AAAA,IAEtE,CAAC;AAAA,EACH;AAEA,YAAU,MAAM;AACd,QAAI,UAAU;AAEd,UAAM,eAAe,YAAY;AAC/B,YAAM,EAAE,SAAS,aAAa,MAAM,OAAO,2CAAU;AAErD,UAAI,CAAC,QAAS;AAEd,eAAS,eAAe;AAExB,YAAM,OAAO,OAAO,oBAAoB,YAAY;AACpD,UAAI,CAAC,KAAM;AAEX,YAAM,KAAK,IAAI,SAAS,MAAM,OAAO;AAErC,uBAAiB,UAAU;AAE3B,kBAAY,EAAE;AAAA,IAChB;AAEA,iBAAA;AAEA,WAAO,MAAM;AACX,gBAAU;AAEV,YAAM,KAAK,iBAAiB;AAE5B,UAAI,CAAC,GAAI;AAET,SAAG,IAAA;AACH,SAAG,QAAA;AAAA,IACL;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACd,UAAM,KAAK,iBAAiB;AAE5B,QAAI,CAAC,GAAI;AAET,OAAG,UAAU;AAAA,MACX,GAAG,GAAG;AAAA,MACN,GAAG;AAAA,MACH,GAAI,OAAO,UAAU,EAAE,KAAK,OAAO,QAAA,IAAY,CAAA;AAAA,IAAC;AAAA,EAEpD,GAAG,CAAC,OAAO,SAAS,SAAS,CAAC;AAE9B,QAAM,gBAAgB,YAClB,uBAAuB,SAAS,KAChC;AAEJ,MAAI,CAAC,OAAO,WAAW,QAAQ;AAC7B,+BACG,QAAA,EAAK,KAAK,aAAa,QAAgB,WAAW,eAChD,UACH;AAAA,EAEJ;AAEA,6BACG,OAAA,EAAI,KAAK,aAAa,WAAW,eAC/B,UACH;AAEJ;"}

package/dist/drag-and-dropzone/config.js

@@ -0,0 +1,59 @@
+const dropzoneComponentConfig = {
+  postUrl: "no-url"
+};
+const dropzoneConfig = {
+  thumbnailHeight: 160,
+  acceptedFiles: "image/*,application/pdf,",
+  maxFilesize: 10,
+  maxFiles: 20,
+  dictDefaultMessage: "Presione para agregar imagenes",
+  previewTemplate: `
+      <div class="dz-preview dz-file-preview mb-0">
+        <div class="d-flex flex-row">
+          <div class="p-0 w-30 position-relative">
+            <div class="dz-error-mark">
+              <span>
+                <i></i>
+              </span>
+            </div>
+            <div class="dz-success-mark">
+              <span>
+                <i></i>
+              </span>
+            </div>
+            <div class="preview-container">
+              <img
+                data-dz-thumbnail
+                class="img-thumbnail border-0"
+                alt="preview_image"
+              />
+              <i class="simple-icon-doc preview-icon"></i>
+            </div>
+          </div>
+  
+          <div class="pl-3 pt-2 pr-2 pb-1 w-70 dz-details position-relative">
+            <div>
+              <span data-dz-name></span>
+            </div>
+            <div class="text-primary text-extra-small" data-dz-size></div>
+            <div class="dz-progress">
+              <span class="dz-upload" data-dz-uploadprogress></span>
+            </div>
+            <div class="dz-error-message">
+              <span data-dz-errormessage></span>
+            </div>
+          </div>
+        </div>
+  
+        <a href="#/" class="remove dz-remove" data-dz-remove>
+          <i class="glyph-icon simple-icon-trash"></i>
+        </a>
+      </div>
+    `,
+  autoProcessQueue: false
+};
+export {
+  dropzoneComponentConfig,
+  dropzoneConfig
+};
+//# sourceMappingURL=config.js.map

package/dist/drag-and-dropzone/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../src/drag-and-dropzone/config.jsx"],"sourcesContent":["export const dropzoneComponentConfig = {\r\n  postUrl: 'no-url',\r\n};\r\n\r\nexport const dropzoneConfig = {\r\n  thumbnailHeight: 160,\r\n  acceptedFiles: 'image/*,application/pdf,',\r\n  maxFilesize: 10,\r\n  maxFiles: 20,\r\n  dictDefaultMessage: 'Presione para agregar imagenes',\r\n  previewTemplate: `\r\n      <div class=\"dz-preview dz-file-preview mb-0\">\r\n        <div class=\"d-flex flex-row\">\r\n          <div class=\"p-0 w-30 position-relative\">\r\n            <div class=\"dz-error-mark\">\r\n              <span>\r\n                <i></i>\r\n              </span>\r\n            </div>\r\n            <div class=\"dz-success-mark\">\r\n              <span>\r\n                <i></i>\r\n              </span>\r\n            </div>\r\n            <div class=\"preview-container\">\r\n              <img\r\n                data-dz-thumbnail\r\n                class=\"img-thumbnail border-0\"\r\n                alt=\"preview_image\"\r\n              />\r\n              <i class=\"simple-icon-doc preview-icon\"></i>\r\n            </div>\r\n          </div>\r\n  \r\n          <div class=\"pl-3 pt-2 pr-2 pb-1 w-70 dz-details position-relative\">\r\n            <div>\r\n              <span data-dz-name></span>\r\n            </div>\r\n            <div class=\"text-primary text-extra-small\" data-dz-size></div>\r\n            <div class=\"dz-progress\">\r\n              <span class=\"dz-upload\" data-dz-uploadprogress></span>\r\n            </div>\r\n            <div class=\"dz-error-message\">\r\n              <span data-dz-errormessage></span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n  \r\n        <a href=\"#/\" class=\"remove dz-remove\" data-dz-remove>\r\n          <i class=\"glyph-icon simple-icon-trash\"></i>\r\n        </a>\r\n      </div>\r\n    `,\r\n  autoProcessQueue: false,\r\n};\r\n"],"names":[],"mappings":"AAAO,MAAM,0BAA0B;AAAA,EACrC,SAAS;AACX;AAEO,MAAM,iBAAiB;AAAA,EAC5B,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,aAAa;AAAA,EACb,UAAU;AAAA,EACV,oBAAoB;AAAA,EACpB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2CjB,kBAAkB;AACpB;"}

package/dist/drag-and-dropzone/index.css

@@ -0,0 +1,276 @@
+@keyframes passing-through {
+  0% {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  30%,
+  70% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+}
+@keyframes slide-in {
+  0% {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  10% {
+    transform: scale(1.1);
+  }
+  20% {
+    transform: scale(1);
+  }
+}
+.dropzone,
+.dropzone * {
+  box-sizing: border-box;
+}
+.dropzone {
+  min-height: 150px;
+  border: 1px solid rgba(0, 0, 0, 0.8);
+  border-radius: 5px;
+  padding: 20px 20px;
+}
+.dropzone.dz-clickable {
+  cursor: pointer;
+}
+.dropzone.dz-clickable * {
+  cursor: default;
+}
+.dropzone.dz-clickable .dz-message,
+.dropzone.dz-clickable .dz-message * {
+  cursor: pointer;
+}
+.dropzone.dz-started .dz-message {
+  display: none;
+}
+.dropzone.dz-drag-hover {
+  border-style: solid;
+}
+.dropzone.dz-drag-hover .dz-message {
+  opacity: 0.5;
+}
+.dropzone .dz-message {
+  text-align: center;
+  margin: 3em 0;
+}
+.dropzone .dz-message .dz-button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}
+.dropzone .dz-preview {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  margin: 16px;
+  min-height: 100px;
+}
+.dropzone .dz-preview:hover {
+  z-index: 1000;
+}
+.dropzone .dz-preview:hover .dz-details {
+  opacity: 1;
+}
+.dropzone .dz-preview.dz-file-preview .dz-image {
+  border-radius: 20px;
+  background: #999;
+  background: linear-gradient(to bottom, #eee, #ddd);
+}
+.dropzone .dz-preview.dz-file-preview .dz-details {
+  opacity: 1;
+}
+.dropzone .dz-preview.dz-image-preview {
+  background: #fff;
+}
+.dropzone .dz-preview.dz-image-preview .dz-details {
+  transition: opacity 0.2s linear;
+}
+.dropzone .dz-preview .dz-remove {
+  font-size: 14px;
+  text-align: center;
+  display: block;
+  cursor: pointer;
+  border: none;
+}
+
+.dropzone .dz-preview:hover .dz-details {
+  opacity: 1;
+}
+.dropzone .dz-preview .dz-details {
+  z-index: 20;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  font-size: 13px;
+  min-width: 100%;
+  max-width: 100%;
+  padding: 2em 1em;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 150%;
+}
+.dropzone .dz-preview .dz-details .dz-size {
+  margin-bottom: 1em;
+  font-size: 16px;
+}
+.dropzone .dz-preview .dz-details .dz-filename {
+  white-space: nowrap;
+}
+.dropzone .dz-preview .dz-details .dz-filename:hover span {
+  border: 1px solid rgba(200, 200, 200, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
+  border: 1px solid transparent;
+}
+.dropzone .dz-preview .dz-details .dz-filename span,
+.dropzone .dz-preview .dz-details .dz-size span {
+  background-color: rgba(255, 255, 255, 0.4);
+  padding: 0 0.4em;
+  border-radius: 3px;
+}
+.dropzone .dz-preview:hover .dz-image img {
+  transform: scale(1.05, 1.05);
+  filter: blur(8px);
+}
+.dropzone .dz-preview .dz-image {
+  border-radius: 20px;
+  overflow: hidden;
+  width: 120px;
+  height: 120px;
+  position: relative;
+  display: block;
+  z-index: 10;
+}
+.dropzone .dz-preview .dz-image img {
+  display: block;
+}
+.dropzone .dz-preview.dz-success .dz-success-mark {
+  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+}
+.dropzone .dz-preview.dz-error .dz-error-mark {
+  opacity: 1;
+  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+}
+.dropzone .dz-preview .dz-success-mark,
+.dropzone .dz-preview .dz-error-mark {
+  pointer-events: none;
+  opacity: 0;
+  z-index: 500;
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  margin-left: -27px;
+  margin-top: -27px;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 50%;
+}
+.dropzone .dz-preview .dz-success-mark svg,
+.dropzone .dz-preview .dz-error-mark svg {
+  display: block;
+  width: 54px;
+  height: 54px;
+  fill: #fff;
+}
+.dropzone .dz-preview.dz-processing .dz-progress {
+  opacity: 1;
+  transition: all 0.2s linear;
+}
+.dropzone .dz-preview.dz-complete .dz-progress {
+  opacity: 0;
+  transition: opacity 0.4s ease-in;
+}
+.dropzone .dz-preview:not(.dz-processing) .dz-progress {
+  animation: pulse 6s ease infinite;
+}
+.dropzone .dz-preview .dz-progress {
+  opacity: 1;
+  z-index: 1000;
+  pointer-events: none;
+  position: absolute;
+  height: 20px;
+  top: 50%;
+  margin-top: -10px;
+  left: 15%;
+  right: 15%;
+  border: 3px solid rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.dropzone .dz-preview .dz-progress .dz-upload {
+  background: #fff;
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 0;
+  transition: width 300ms ease-in-out;
+  border-radius: 17px;
+}
+.dropzone .dz-preview.dz-error .dz-error-message {
+  display: block;
+}
+.dropzone .dz-preview.dz-error:hover .dz-error-message {
+  opacity: 1;
+  pointer-events: auto;
+}
+.dropzone .dz-preview .dz-error-message {
+  pointer-events: none;
+  z-index: 1000;
+  position: absolute;
+  display: block;
+  display: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  border-radius: 8px;
+  font-size: 13px;
+  top: 130px;
+  left: -10px;
+  width: 140px;
+  background: #b10606;
+  padding: 0.5em 1em;
+  color: #fff;
+}
+.dropzone .dz-preview .dz-error-message:after {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: 64px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #b10606;
+}
+
+.dz-progress {
+  display: none;
+}
+
+.dropzone .dz-preview {
+  margin: 0;
+}

package/dist/drag-and-dropzone/index.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import DropzoneComponent from "./DropzoneComponent.js";
+import { dropzoneConfig, dropzoneComponentConfig } from "./config.js";
+import "./index.css";
+const DragAndDropZone = ({
+  files = [],
+  keyDc = null,
+  disableUpload = false,
+  onDeleteFile = () => {
+  },
+  onInsertFile = () => {
+  },
+  className = ""
+}) => {
+  const _className = className + disableUpload === true ? "dz-disable" : "dz-eneable";
+  return /* @__PURE__ */ jsx(
+    DropzoneComponent,
+    {
+      config: dropzoneComponentConfig,
+      initialFiles: [files],
+      className: _className,
+      djsConfig: dropzoneConfig,
+      eventHandlers: {
+        removedfile: (file) => {
+          onDeleteFile(file);
+        },
+        addedfile: (file) => {
+          onInsertFile(file);
+        }
+      }
+    },
+    keyDc
+  );
+};
+export {
+  DragAndDropZone,
+  DragAndDropZone as default
+};
+//# sourceMappingURL=index.js.map

package/dist/drag-and-dropzone/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/drag-and-dropzone/index.jsx"],"sourcesContent":["import DropzoneComponent from './DropzoneComponent';\r\nimport { dropzoneComponentConfig, dropzoneConfig } from './config';\r\nimport './index.css';\r\n\r\nexport const DragAndDropZone = ({\r\n  files = [],\r\n  keyDc = null,\r\n  disableUpload = false,\r\n  onDeleteFile = () => {},\r\n  onInsertFile = () => {},\r\n  className = '',\r\n}) => {\r\n  const _className =\r\n    className + disableUpload === true ? 'dz-disable' : 'dz-eneable';\r\n  return (\r\n    <DropzoneComponent\r\n      key={keyDc}\r\n      config={dropzoneComponentConfig}\r\n      initialFiles={[files]}\r\n      className={_className}\r\n      djsConfig={dropzoneConfig}\r\n      eventHandlers={{\r\n        removedfile: (file) => {\r\n          onDeleteFile(file);\r\n        },\r\n        addedfile: (file) => {\r\n          onInsertFile(file);\r\n        },\r\n      }}\r\n    />\r\n  );\r\n};\r\n\r\nexport default DragAndDropZone;\r\n"],"names":[],"mappings":";;;;AAIO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAQ,CAAA;AAAA,EACR,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,YAAY;AACd,MAAM;AACJ,QAAM,aACJ,YAAY,kBAAkB,OAAO,eAAe;AACtD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,QAAQ;AAAA,MACR,cAAc,CAAC,KAAK;AAAA,MACpB,WAAW;AAAA,MACX,WAAW;AAAA,MACX,eAAe;AAAA,QACb,aAAa,CAAC,SAAS;AACrB,uBAAa,IAAI;AAAA,QACnB;AAAA,QACA,WAAW,CAAC,SAAS;AACnB,uBAAa,IAAI;AAAA,QACnB;AAAA,MAAA;AAAA,IACF;AAAA,IAZK;AAAA,EAAA;AAeX;"}