@ttoss/components 2.3.0 → 2.4.1

package/dist/esm/Accordion/index.js

@@ -1,4 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/Accordion/Accordion.tsx
 import * as React from "react";
@@ -6,8 +7,7 @@ import { AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItem
 import { Box, useTheme } from "@ttoss/ui";
 import { css as createClassName } from "@emotion/css";
 import { css as transformStyleObject } from "@theme-ui/css";
-import { jsx } from "react/jsx-runtime";
-var Accordion = ({
+var Accordion = /* @__PURE__ */__name(({
   children,
   allowMultipleExpanded,
   allowZeroExpanded,
@@ -35,19 +35,15 @@ var Accordion = ({
     })(theme);
     return createClassName(styles);
   }, [theme]);
-  return /* @__PURE__ */jsx(Box, {
+  return /* @__PURE__ */React.createElement(Box, {
     variant: "accordion",
     className,
-    ...boxProps,
-    children: /* @__PURE__ */jsx(ReactAccessibleAccordion, {
-      ...{
-        allowMultipleExpanded,
-        allowZeroExpanded,
-        preExpanded,
-        onChange
-      },
-      children
-    })
-  });
-};
+    ...boxProps
+  }, /* @__PURE__ */React.createElement(ReactAccessibleAccordion, {
+    allowMultipleExpanded,
+    allowZeroExpanded,
+    preExpanded,
+    onChange
+  }, children));
+}, "Accordion");
 export { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel };

package/dist/esm/Drawer/index.js

@@ -1,20 +1,21 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/Drawer/Drawer.tsx
 import { Box } from "@ttoss/ui";
+import * as React from "react";
 import DrawerUi from "react-modern-drawer";
-import { jsx } from "react/jsx-runtime";
-var Drawer = ({
+var Drawer = /* @__PURE__ */__name(({
   children,
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */jsx(Box, {
+  return /* @__PURE__ */React.createElement(Box, {
     "data-testid": "drawer-container",
     sx: {
       /**
-       * https://github.com/Farzin-Firoozi/react-modern-drawer/blob/master/src/styles.css
-       */
+      * https://github.com/Farzin-Firoozi/react-modern-drawer/blob/master/src/styles.css
+      */
       zIndex: "overlay",
       width: "100%",
       height: "100%",
@@ -47,17 +48,12 @@ var Drawer = ({
         overflowY: "auto"
       },
       ...sx
-    },
-    children: /* @__PURE__ */jsx(DrawerUi, {
-      ...props,
-      children: /* @__PURE__ */jsx(Box, {
-        sx: {
-          width: "100%",
-          height: "100%"
-        },
-        children
-      })
-    })
-  });
-};
+    }
+  }, /* @__PURE__ */React.createElement(DrawerUi, props, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      width: "100%",
+      height: "100%"
+    }
+  }, children)));
+}, "Drawer");
 export { Drawer };

package/dist/esm/FileUploader/index.js

@@ -0,0 +1,346 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/FileUploader/FileUploader.tsx
+import { useI18n } from "@ttoss/react-i18n";
+import { Box, Button, Flex, Stack, Text } from "@ttoss/ui";
+import * as React from "react";
+var FileUploader = /* @__PURE__ */__name(({
+  onUpload,
+  onUploadStart,
+  onUploadProgress,
+  onUploadComplete,
+  onUploadError,
+  onFilesChange,
+  onRemoveFile,
+  accept,
+  multiple = true,
+  maxSize = 10 * 1024 * 1024,
+  maxFiles = 5,
+  disabled = false,
+  autoUpload = true,
+  retryAttempts = 2,
+  placeholder,
+  error,
+  children,
+  showFileList = true,
+  FileListComponent
+}) => {
+  const {
+    intl
+  } = useI18n();
+  const [files, setFiles] = React.useState([]);
+  const [isDragOver, setIsDragOver] = React.useState(false);
+  const fileInputRef = React.useRef(null);
+  const formatFileSize = /* @__PURE__ */__name(bytes => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  }, "formatFileSize");
+  const validateFiles = /* @__PURE__ */__name(newFiles => {
+    const fileArray = Array.from(newFiles);
+    const validFiles = [];
+    const currentFileCount = files.length;
+    for (const file of fileArray) {
+      if (maxSize && file.size > maxSize) {
+        continue;
+      }
+      if (validFiles.length + currentFileCount >= maxFiles) {
+        break;
+      }
+      validFiles.push(file);
+    }
+    return validFiles;
+  }, "validateFiles");
+  const updateFileState = React.useCallback((file, updates) => {
+    setFiles(prevFiles => {
+      const newFiles = prevFiles.map(f => {
+        return f.file === file ? {
+          ...f,
+          ...updates
+        } : f;
+      });
+      onFilesChange?.(newFiles);
+      return newFiles;
+    });
+  }, [onFilesChange]);
+  const uploadFile = React.useCallback(async (fileState, attempts = 0) => {
+    try {
+      onUploadStart?.(fileState.file);
+      updateFileState(fileState.file, {
+        status: "uploading",
+        progress: 0
+      });
+      const result = await onUpload(fileState.file, progress => {
+        updateFileState(fileState.file, {
+          progress
+        });
+        onUploadProgress?.(fileState.file, progress);
+      });
+      updateFileState(fileState.file, {
+        status: "completed",
+        progress: 100,
+        result
+      });
+      onUploadComplete?.(fileState.file, result);
+    } catch (error_) {
+      const error2 = error_;
+      if (attempts < retryAttempts) {
+        setTimeout(() => {
+          return uploadFile(fileState, attempts + 1);
+        }, 1e3 * (attempts + 1));
+      } else {
+        updateFileState(fileState.file, {
+          status: "error",
+          error: error2
+        });
+        onUploadError?.(fileState.file, error2);
+      }
+    }
+  }, [onUpload, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, retryAttempts, updateFileState]);
+  const addFiles = /* @__PURE__ */__name(newFiles => {
+    const newFileStates = newFiles.map(file => {
+      return {
+        file,
+        status: "pending"
+      };
+    });
+    setFiles(prevFiles => {
+      const updatedFiles = [...prevFiles, ...newFileStates];
+      onFilesChange?.(updatedFiles);
+      return updatedFiles;
+    });
+    if (autoUpload) {
+      for (const fileState of newFileStates) {
+        uploadFile(fileState);
+      }
+    }
+  }, "addFiles");
+  const handleFileChange = /* @__PURE__ */__name(event => {
+    if (event.target.files) {
+      const validFiles = validateFiles(event.target.files);
+      addFiles(validFiles);
+    }
+  }, "handleFileChange");
+  const handleDrop = /* @__PURE__ */__name(event => {
+    event.preventDefault();
+    setIsDragOver(false);
+    if (disabled) return;
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles) {
+      const validFiles = validateFiles(droppedFiles);
+      addFiles(validFiles);
+    }
+  }, "handleDrop");
+  const handleDragOver = /* @__PURE__ */__name(event => {
+    event.preventDefault();
+    if (!disabled) {
+      setIsDragOver(true);
+    }
+  }, "handleDragOver");
+  const handleDragLeave = /* @__PURE__ */__name(event => {
+    event.preventDefault();
+    setIsDragOver(false);
+  }, "handleDragLeave");
+  const handleClick = /* @__PURE__ */__name(() => {
+    if (!disabled && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, "handleClick");
+  const handleRemoveFile = React.useCallback(index => {
+    const fileToRemove = files[index];
+    setFiles(prevFiles => {
+      const newFiles = prevFiles.filter((_, i) => {
+        return i !== index;
+      });
+      onFilesChange?.(newFiles);
+      return newFiles;
+    });
+    onRemoveFile?.(fileToRemove, index);
+  }, [files, onFilesChange, onRemoveFile]);
+  const retryUpload = React.useCallback(index => {
+    const fileState = files[index];
+    if (fileState.status === "error") {
+      uploadFile(fileState);
+    }
+  }, [files, uploadFile]);
+  const isUploading = files.some(f => {
+    return f.status === "uploading";
+  });
+  const fileListNode = React.useMemo(() => {
+    if (!showFileList || files.length === 0) {
+      return null;
+    }
+    if (FileListComponent) {
+      return /* @__PURE__ */React.createElement(FileListComponent, {
+        files,
+        onRemoveFile: handleRemoveFile
+      });
+    }
+    return /* @__PURE__ */React.createElement(Stack, {
+      sx: {
+        gap: 1
+      }
+    }, files.map((fileState, index) => {
+      return /* @__PURE__ */React.createElement(Flex, {
+        key: index,
+        sx: {
+          alignItems: "center",
+          justifyContent: "space-between",
+          p: 2,
+          backgroundColor: "display.background.secondary.default",
+          borderRadius: "md",
+          gap: 2
+        }
+      }, /* @__PURE__ */React.createElement(Flex, {
+        sx: {
+          alignItems: "center",
+          gap: 2,
+          flex: 1
+        }
+      }, /* @__PURE__ */React.createElement(Text, {
+        sx: {
+          fontSize: "lg"
+        }
+      }, fileState.status === "completed" ? "\u2713" : fileState.status === "error" ? "\u2717" : fileState.status === "uploading" ? "\u21BB" : "\u{1F4C4}"), /* @__PURE__ */React.createElement(Box, {
+        sx: {
+          flex: 1
+        }
+      }, /* @__PURE__ */React.createElement(Text, {
+        variant: "body",
+        sx: {
+          fontWeight: "medium"
+        }
+      }, fileState.file.name), fileState.status === "uploading" && fileState.progress && /* @__PURE__ */React.createElement(Text, {
+        variant: "caption",
+        sx: {
+          color: "primary.default"
+        }
+      }, fileState.progress.toFixed(0), "%"), fileState.status === "error" && /* @__PURE__ */React.createElement(Text, {
+        variant: "caption",
+        sx: {
+          color: "error.default"
+        }
+      }, "Failed")), /* @__PURE__ */React.createElement(Text, {
+        variant: "caption",
+        sx: {
+          color: "text.muted"
+        }
+      }, formatFileSize(fileState.file.size))), /* @__PURE__ */React.createElement(Flex, {
+        sx: {
+          gap: 1
+        }
+      }, fileState.status === "error" && /* @__PURE__ */React.createElement(Button, {
+        variant: "destructive",
+        onClick: /* @__PURE__ */__name(() => {
+          return retryUpload(index);
+        }, "onClick"),
+        sx: {
+          fontSize: "xs"
+        }
+      }, "Retry"), /* @__PURE__ */React.createElement(Button, {
+        variant: "destructive",
+        onClick: /* @__PURE__ */__name(() => {
+          return handleRemoveFile(index);
+        }, "onClick"),
+        sx: {
+          fontSize: "sm",
+          color: "text.muted",
+          "&:hover": {
+            color: "error.default"
+          }
+        }
+      }, "Remove")));
+    }));
+  }, [FileListComponent, files, handleRemoveFile, retryUpload, showFileList]);
+  return /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      gap: 3
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    onDrop: handleDrop,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onClick: handleClick,
+    sx: {
+      border: "2px dashed",
+      borderColor: error ? "error.default" : isDragOver ? "primary.default" : "display.border.muted.default",
+      borderRadius: "xl",
+      padding: 6,
+      textAlign: "center",
+      cursor: disabled || isUploading ? "not-allowed" : "pointer",
+      backgroundColor: isDragOver ? "primary.muted" : "display.background.secondary.default",
+      transition: "all 0.2s ease",
+      opacity: disabled ? 0.6 : 1,
+      "&:hover": {
+        borderColor: !disabled && !isUploading && !error ? "primary.default" : void 0,
+        backgroundColor: !disabled && !isUploading ? "primary.muted" : void 0
+      }
+    }
+  }, /* @__PURE__ */React.createElement("input", {
+    ref: fileInputRef,
+    type: "file",
+    accept,
+    multiple,
+    onChange: handleFileChange,
+    disabled: disabled || isUploading,
+    style: {
+      display: "none"
+    }
+  }), children || /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      flexDirection: "column",
+      alignItems: "center",
+      gap: 3,
+      justifyContent: "center"
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      fontSize: "3xl"
+    }
+  }, "\u{1F4C1}"), /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      textAlign: "center"
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    variant: "body",
+    sx: {
+      color: "text.default",
+      mb: 1
+    }
+  }, isUploading ? intl.formatMessage({
+    id: "JEsxDw",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Uploading..."
+    }]
+  }) : placeholder || intl.formatMessage({
+    id: "gy0Ynb",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Click or drag files here"
+    }]
+  })), /* @__PURE__ */React.createElement(Text, {
+    variant: "caption",
+    sx: {
+      color: "text.muted"
+    }
+  }, [accept && accept, maxSize && `Max ${formatFileSize(maxSize)}`, multiple && maxFiles && `Up to ${maxFiles} files`].filter(Boolean).join(" \u2022 "))), !isUploading && /* @__PURE__ */React.createElement(Button, {
+    variant: "secondary",
+    disabled
+  }, intl.formatMessage({
+    id: "fDCMA6",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Select Files"
+    }]
+  })))), error && /* @__PURE__ */React.createElement(Text, {
+    variant: "caption",
+    sx: {
+      color: "error.default"
+    }
+  }, error), fileListNode);
+}, "FileUploader");
+export { FileUploader };

package/dist/esm/InstallPwa/index.js

@@ -1,66 +1,61 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/InstallPwa/InstallPwa.tsx
 import * as React from "react";
 import { Button, Flex, Text } from "@ttoss/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-var InstallPwaUi = ({
+var InstallPwaUi = /* @__PURE__ */__name(({
   onInstall
 }) => {
-  return /* @__PURE__ */jsx(Flex, {
+  return /* @__PURE__ */React.createElement(Flex, {
     sx: {
       position: "absolute",
       bottom: 4,
       width: "100%",
       justifyContent: "center"
-    },
-    children: /* @__PURE__ */jsxs(Flex, {
-      sx: {
-        backgroundColor: "background",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: 3,
-        width: "auto",
-        border: "1px solid",
-        borderColor: "muted",
-        borderRadius: 1,
-        padding: 4
-      },
-      children: [/* @__PURE__ */jsx(Text, {
-        children: "Deseja instalar o nosso aplicativo?"
-      }), /* @__PURE__ */jsx(Button, {
-        onClick: onInstall,
-        children: "Instalar"
-      })]
-    })
-  });
-};
-var InstallPwa = () => {
+    }
+  }, /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      backgroundColor: "background",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: 3,
+      width: "auto",
+      border: "1px solid",
+      borderColor: "muted",
+      borderRadius: 1,
+      padding: 4
+    }
+  }, /* @__PURE__ */React.createElement(Text, null, "Deseja instalar o nosso aplicativo?"), /* @__PURE__ */React.createElement(Button, {
+    onClick: onInstall
+  }, "Instalar")));
+}, "InstallPwaUi");
+var InstallPwa = /* @__PURE__ */__name(() => {
   const [supportsPwa, setSupportsPwa] = React.useState(false);
   const [promptInstall, setPromptInstall] = React.useState(null);
   React.useEffect(() => {
-    const handler = e => {
+    const handler = /* @__PURE__ */__name(e => {
       e.preventDefault();
       setSupportsPwa(true);
       setPromptInstall(e);
-    };
+    }, "handler");
     window.addEventListener("beforeinstallprompt", handler);
     return () => {
       return window.removeEventListener("transitionend", handler);
     };
   }, []);
-  const onInstall = e => {
+  const onInstall = /* @__PURE__ */__name(e => {
     e.preventDefault();
     if (!promptInstall) {
       return;
     }
     promptInstall.prompt();
-  };
+  }, "onInstall");
   if (!supportsPwa) {
     return null;
   }
-  return /* @__PURE__ */jsx(InstallPwaUi, {
+  return /* @__PURE__ */React.createElement(InstallPwaUi, {
     onInstall
   });
-};
+}, "InstallPwa");
 export { InstallPwa, InstallPwaUi };

package/dist/esm/JsonEditor/index.js

@@ -1,4 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import "../chunk-V4MHYKRI.js";
 
 // src/components/JsonEditor/index.ts
 import { JsonEditor } from "json-edit-react";

package/dist/esm/JsonView/index.js

@@ -1,4 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import "../chunk-V4MHYKRI.js";
 
 // src/components/JsonView/index.ts
 import { JsonView } from "react-json-view-lite";

package/dist/esm/List/index.js

@@ -1,33 +1,30 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import "../chunk-V4MHYKRI.js";
 
 // src/components/List/List.tsx
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-var List = React.forwardRef(({
+var List = /* @__PURE__ */React.forwardRef(({
   children,
   ...props
 }, ref) => {
-  return /* @__PURE__ */jsx("ul", {
+  return /* @__PURE__ */React.createElement("ul", {
     ...props,
-    ref,
-    children
-  });
+    ref
+  }, children);
 });
 List.displayName = "List";
 
 // src/components/List/ListItem.tsx
 import * as React2 from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ListItem = React2.forwardRef((props, ref) => {
+var ListItem = /* @__PURE__ */React2.forwardRef((props, ref) => {
   const {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */jsx2("li", {
+  return /* @__PURE__ */React2.createElement("li", {
     ...rest,
-    ref,
-    children
-  });
+    ref
+  }, children);
 });
 ListItem.displayName = "ListItem";
 export { List, ListItem };

package/dist/esm/Markdown/index.js

@@ -1,24 +1,22 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/Markdown/Markdown.tsx
 import { BaseStyles } from "@ttoss/ui";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
-import { jsx } from "react/jsx-runtime";
-var Markdown = ({
+var Markdown = /* @__PURE__ */__name(({
   children,
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */jsx(BaseStyles, {
-    sx,
-    children: /* @__PURE__ */jsx(ReactMarkdown, {
-      rehypePlugins: [rehypeRaw],
-      remarkPlugins: [remarkGfm],
-      ...props,
-      children
-    })
-  });
-};
+  return /* @__PURE__ */React.createElement(BaseStyles, {
+    sx
+  }, /* @__PURE__ */React.createElement(ReactMarkdown, {
+    rehypePlugins: [rehypeRaw],
+    remarkPlugins: [remarkGfm],
+    ...props
+  }, children));
+}, "Markdown");
 export { Markdown };