@tecsinapse/cortex-react 1.15.0-beta.0 → 1.15.0-beta.2

package/dist/cjs/components/Uploader/Manager.js

@@ -1,21 +1,15 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var tailwindVariants = require('tailwind-variants');
 var reactDom = require('react-dom');
 var Upload = require('./Upload.js');
 var Button = require('../Button.js');
 var io = require('react-icons/io');
+var React = require('react');
+var clsx = require('clsx');
+var io5 = require('react-icons/io5');
+var cortexCore = require('@tecsinapse/cortex-core');
 
-const foldermodal = tailwindVariants.tv({
-  base: "fixed rounded-micro p-kilo bg-white shadow-xl flex transition z-modal",
-  variants: {
-    open: {
-      true: "scale-100 visible",
-      false: "invisible"
-    }
-  }
-});
 const Manager = ({
   open,
   files,
@@ -23,36 +17,54 @@ const Manager = ({
   uploadProgressText = "Upload(s) in progress",
   onClose
 }) => {
+  const [min, setMin] = React.useState(false);
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: foldermodal({
-          className: "h-[350px] w-[400px] bg-white bottom-deca right-deca overflow-hidden",
+        className: cortexCore.manager({
+          className: "h-auto max-h-[350px] w-[450px] overflow-hidden pt-deca",
           open
         }),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full h-full gap-mili items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ml-mega", "data-testid": "upload-progress", children: uploadProgressText }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Button.Button,
               {
-                variants: { variant: "outline", size: "circle" },
+                variants: { variant: "outline", size: "square" },
+                onClick: () => setMin((min2) => !min2),
+                children: min ? /* @__PURE__ */ jsxRuntime.jsx(io5.IoArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(io5.IoArrowDown, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { "data-testid": "upload-progress", children: uploadProgressText }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button.Button,
+              {
+                variants: { variant: "filled", size: "square" },
                 onClick: onClose,
                 children: /* @__PURE__ */ jsxRuntime.jsx(io.IoMdClose, {})
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col w-full overflow-scroll", children: files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            Upload.File,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              file,
-              index,
-              onDelete
-            },
-            file.uid
-          )) })
+              className: clsx.clsx(
+                "w-full overflow-scroll h-auto max-h-[300px] px-deca",
+                { hidden: min, "flex flex-col": !min, "pb-deca": files.length > 3 }
+              ),
+              children: files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                Upload.File,
+                {
+                  file,
+                  index,
+                  onDelete,
+                  showDelete: false
+                },
+                file.uid
+              ))
+            }
+          )
         ] })
       }
     ),

package/dist/cjs/components/Uploader/Upload.js

@@ -6,7 +6,12 @@ var fa6 = require('react-icons/fa6');
 var md = require('react-icons/md');
 var ProgressBar = require('../ProgressBar/ProgressBar.js');
 
-const File = ({ file, index, onDelete }) => {
+const File = ({
+  file,
+  index,
+  onDelete,
+  showDelete = true
+}) => {
   function statusIntent(status) {
     switch (status) {
       case "success":
@@ -36,7 +41,7 @@ const File = ({ file, index, onDelete }) => {
           ] })
         ] })
       ] }),
-      file.status === "success" && /* @__PURE__ */ jsxRuntime.jsx(
+      file.status === "success" && showDelete ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: () => onDelete(index),
@@ -47,7 +52,7 @@ const File = ({ file, index, onDelete }) => {
           }),
           children: /* @__PURE__ */ jsxRuntime.jsx(md.MdClose, { size: 15 })
         }
-      )
+      ) : null
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       ProgressBar.ProgressBar,

package/dist/cjs/components/Uploader/index.js

@@ -2,6 +2,7 @@
 
 var Dropzone = require('./Dropzone.js');
 var Files = require('./Files.js');
+var Manager = require('./Manager.js');
 var Modal = require('./Modal.js');
 var Root = require('./Root.js');
 
@@ -9,7 +10,8 @@ const Uploader = {
   Dropzone: Dropzone.Dropzone,
   Files: Files.Files,
   Modal: Modal.Modal,
-  Root: Root.Root
+  Root: Root.Root,
+  Manager: Manager.Manager
 };
 
 exports.Root = Root.Root;

package/dist/cjs/hooks/useFileUpload.js

@@ -107,6 +107,7 @@ const useFileUpload = ({
       isFileLimitReached
     },
     open: isOpen,
+    openManager,
     closeManager,
     isManagerOpen,
     files,

package/dist/esm/components/Uploader/Manager.js

@@ -1,19 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { tv } from 'tailwind-variants';
 import { createPortal } from 'react-dom';
 import { File } from './Upload.js';
 import { Button } from '../Button.js';
 import { IoMdClose } from 'react-icons/io';
+import { useState } from 'react';
+import { clsx } from 'clsx';
+import { IoArrowUp, IoArrowDown } from 'react-icons/io5';
+import { manager } from '@tecsinapse/cortex-core';
 
-const foldermodal = tv({
-  base: "fixed rounded-micro p-kilo bg-white shadow-xl flex transition z-modal",
-  variants: {
-    open: {
-      true: "scale-100 visible",
-      false: "invisible"
-    }
-  }
-});
 const Manager = ({
   open,
   files,
@@ -21,36 +15,54 @@ const Manager = ({
   uploadProgressText = "Upload(s) in progress",
   onClose
 }) => {
+  const [min, setMin] = useState(false);
   return createPortal(
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: foldermodal({
-          className: "h-[350px] w-[400px] bg-white bottom-deca right-deca overflow-hidden",
+        className: manager({
+          className: "h-auto max-h-[350px] w-[450px] overflow-hidden pt-deca",
           open
         }),
         children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full h-full gap-mili items-center", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
-            /* @__PURE__ */ jsx("div", {}),
-            /* @__PURE__ */ jsx("h3", { className: "ml-mega", "data-testid": "upload-progress", children: uploadProgressText }),
             /* @__PURE__ */ jsx(
               Button,
               {
-                variants: { variant: "outline", size: "circle" },
+                variants: { variant: "outline", size: "square" },
+                onClick: () => setMin((min2) => !min2),
+                children: min ? /* @__PURE__ */ jsx(IoArrowUp, {}) : /* @__PURE__ */ jsx(IoArrowDown, {})
+              }
+            ),
+            /* @__PURE__ */ jsx("h3", { "data-testid": "upload-progress", children: uploadProgressText }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variants: { variant: "filled", size: "square" },
                 onClick: onClose,
                 children: /* @__PURE__ */ jsx(IoMdClose, {})
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col w-full overflow-scroll", children: files.map((file, index) => /* @__PURE__ */ jsx(
-            File,
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              file,
-              index,
-              onDelete
-            },
-            file.uid
-          )) })
+              className: clsx(
+                "w-full overflow-scroll h-auto max-h-[300px] px-deca",
+                { hidden: min, "flex flex-col": !min, "pb-deca": files.length > 3 }
+              ),
+              children: files.map((file, index) => /* @__PURE__ */ jsx(
+                File,
+                {
+                  file,
+                  index,
+                  onDelete,
+                  showDelete: false
+                },
+                file.uid
+              ))
+            }
+          )
         ] })
       }
     ),

package/dist/esm/components/Uploader/Upload.js

@@ -4,7 +4,12 @@ import { FaRegFileLines } from 'react-icons/fa6';
 import { MdClose } from 'react-icons/md';
 import { ProgressBar } from '../ProgressBar/ProgressBar.js';
 
-const File = ({ file, index, onDelete }) => {
+const File = ({
+  file,
+  index,
+  onDelete,
+  showDelete = true
+}) => {
   function statusIntent(status) {
     switch (status) {
       case "success":
@@ -34,7 +39,7 @@ const File = ({ file, index, onDelete }) => {
           ] })
         ] })
       ] }),
-      file.status === "success" && /* @__PURE__ */ jsx(
+      file.status === "success" && showDelete ? /* @__PURE__ */ jsx(
         "button",
         {
           onClick: () => onDelete(index),
@@ -45,7 +50,7 @@ const File = ({ file, index, onDelete }) => {
           }),
           children: /* @__PURE__ */ jsx(MdClose, { size: 15 })
         }
-      )
+      ) : null
     ] }),
     /* @__PURE__ */ jsx(
       ProgressBar,

package/dist/esm/components/Uploader/index.js

@@ -1,5 +1,6 @@
 import { Dropzone } from './Dropzone.js';
 import { Files } from './Files.js';
+import { Manager } from './Manager.js';
 import { Modal } from './Modal.js';
 import { Root } from './Root.js';
 
@@ -7,7 +8,8 @@ const Uploader = {
   Dropzone,
   Files,
   Modal,
-  Root
+  Root,
+  Manager
 };
 
 export { Root, Uploader };

package/dist/esm/hooks/useFileUpload.js

@@ -105,6 +105,7 @@ const useFileUpload = ({
       isFileLimitReached
     },
     open: isOpen,
+    openManager,
     closeManager,
     isManagerOpen,
     files,

package/dist/types/components/Uploader/Manager.d.ts

@@ -1,10 +1,2 @@
-import { FileUpload } from './types';
-interface ManagerProps<T> {
-    open: boolean;
-    files: FileUpload<T>[];
-    onDelete: (index: number) => void;
-    uploadProgressText?: string;
-    onClose: () => void;
-}
+import { ManagerProps } from './types';
 export declare const Manager: <T>({ open, files, onDelete, uploadProgressText, onClose, }: ManagerProps<T>) => any;
-export {};

package/dist/types/components/Uploader/Upload.d.ts

@@ -1,2 +1,2 @@
 import { FileProps } from './types';
-export declare const File: <T>({ file, index, onDelete }: FileProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const File: <T>({ file, index, onDelete, showDelete, }: FileProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Uploader/index.d.ts

@@ -5,4 +5,5 @@ export declare const Uploader: {
     Files: <T>({ files, onDelete, uploadProgressText, }: import("./types").FilesProps<T>) => import("react/jsx-runtime").JSX.Element;
     Modal: ({ open, onClose, children, title, }: import("./types").ModalProps) => any;
     Root: <T>({ open, onClose, files, onDelete, dropzoneProps, selectFileText, dropText, buttonText, uploadProgressText, titleModal, isManagerOpen, closeManager, }: import("./types").RootUploaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Manager: <T>({ open, files, onDelete, uploadProgressText, onClose, }: import("./types").ManagerProps<T>) => any;
 };

package/dist/types/components/Uploader/types.d.ts

@@ -7,6 +7,7 @@ export interface FileProps<T> {
     file: FileUpload<T>;
     index: number;
     onDelete: (index: number) => void;
+    showDelete?: boolean;
 }
 export interface FilesProps<T> {
     files: FileUpload<T>[];
@@ -57,6 +58,13 @@ export interface RootUploaderProps<T> {
     uploadProgressText?: string;
     titleModal?: string;
 }
+export interface ManagerProps<T> {
+    open: boolean;
+    files: FileUpload<T>[];
+    onDelete: (index: number) => void;
+    uploadProgressText?: string;
+    onClose: () => void;
+}
 export declare const AcceptSpecificMap: {
     readonly APPLICATION: readonly ["application/pdf", "application/zip", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-powerpoint", "application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/x-rar-compressed", "application/x-7z-compressed", "application/json", "application/xml", "application/rtf", "application/x-tar", "application/x-httpd-php", "application/octet-stream"];
     readonly IMAGE: readonly ["image/jpeg", "image/png", "image/gif", "image/bmp", "image/svg+xml", "image/tiff", "image/webp", "image/x-icon"];

package/dist/types/hooks/useFileUpload.d.ts

@@ -21,6 +21,7 @@ export declare const useFileUpload: <T>({ accept, onAccept, onFileRejected, maxS
     onDelete: (index: number) => void;
     dropzoneProps: UseDropzoneProps;
     open: boolean;
+    openManager: () => void;
     closeManager: () => void;
     isManagerOpen: boolean;
     files: FileUpload<T>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.15.0-beta.0",
+  "version": "1.15.0-beta.2",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "3.7.0",
-    "@tecsinapse/cortex-core": "1.1.3",
+    "@tecsinapse/cortex-core": "1.2.0-beta.0",
     "clsx": "2.1.1",
     "currency.js": "2.0.4",
     "embla-carousel-autoplay": "^8.0.0",
@@ -48,5 +48,5 @@
     "react-icons": ">=5.2.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "6d45cc9f4731040772e88399eee523d38457cd62"
+  "gitHead": "c0dc2570a0b407bd1d03a5b37665751666dfc184"
 }