@ttoss/components 2.10.0 → 2.10.2

package/dist/esm/FileUploader/index.js

@@ -1,401 +0,0 @@
-/** 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,
-  onRemove,
-  accept,
-  multiple = true,
-  maxSize = 10 * 1024 * 1024,
-  maxFiles = 5,
-  disabled = false,
-  autoUpload = true,
-  retryAttempts = 2,
-  placeholder,
-  error,
-  children,
-  showFileList = true,
-  FileListComponent,
-  files: uploadedFiles = []
-}) => {
-  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;
-    if (currentFileCount >= maxFiles) {
-      return [];
-    }
-    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 || files.length >= maxFiles) return;
-    const droppedFiles = event.dataTransfer.files;
-    if (droppedFiles) {
-      const validFiles = validateFiles(droppedFiles);
-      addFiles(validFiles);
-    }
-  }, "handleDrop");
-  const handleDragOver = /* @__PURE__ */__name(event => {
-    event.preventDefault();
-    if (!disabled && files.length < maxFiles) {
-      setIsDragOver(true);
-    }
-  }, "handleDragOver");
-  const handleDragLeave = /* @__PURE__ */__name(event => {
-    event.preventDefault();
-    setIsDragOver(false);
-  }, "handleDragLeave");
-  const handleClick = /* @__PURE__ */__name(() => {
-    if (!disabled && files.length < maxFiles && fileInputRef.current) {
-      fileInputRef.current.click();
-    }
-  }, "handleClick");
-  const handleRemoveFile = React.useCallback(index => {
-    const fileToRemove = uploadedFiles[index];
-    onRemove?.(fileToRemove, index);
-  }, [uploadedFiles, onRemove]);
-  const isUploading = files.some(f => {
-    return f.status === "uploading";
-  });
-  const isMaxFilesReached = files.length >= maxFiles;
-  const fileListNode = React.useMemo(() => {
-    if (!showFileList || files.length === 0 && uploadedFiles.length === 0) {
-      return null;
-    }
-    if (FileListComponent) {
-      return /* @__PURE__ */React.createElement(FileListComponent, {
-        files: uploadedFiles,
-        onRemove: handleRemoveFile
-      });
-    }
-    return /* @__PURE__ */React.createElement(Stack, {
-      sx: {
-        gap: 1,
-        width: "100%"
-      }
-    }, uploadedFiles.map((file, index) => {
-      return /* @__PURE__ */React.createElement(Flex, {
-        key: file.id,
-        sx: {
-          width: "full",
-          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
-        }
-      }, file.imageUrl && /* @__PURE__ */React.createElement(Box, {
-        sx: {
-          width: 32,
-          height: 32
-        }
-      }, /* @__PURE__ */React.createElement("img", {
-        src: file.imageUrl,
-        alt: file.name,
-        style: {
-          width: "100%",
-          height: "100%",
-          objectFit: "cover",
-          borderRadius: 4
-        }
-      })), /* @__PURE__ */React.createElement(Box, {
-        sx: {
-          flex: 1
-        }
-      }, /* @__PURE__ */React.createElement("a", {
-        href: file.url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        style: {
-          textDecoration: "none",
-          color: "inherit"
-        }
-      }, /* @__PURE__ */React.createElement(Text, {
-        variant: "body",
-        sx: {
-          fontWeight: "medium",
-          "&:hover": {
-            textDecoration: "underline",
-            color: "primary.default"
-          }
-        }
-      }, file.name)))), /* @__PURE__ */React.createElement(Button, {
-        variant: "destructive",
-        onClick: /* @__PURE__ */__name(() => {
-          return handleRemoveFile(index);
-        }, "onClick"),
-        sx: {
-          fontSize: "sm",
-          color: "text.muted",
-          "&:hover": {
-            color: "error.default"
-          }
-        }
-      }, intl.formatMessage({
-        id: "G/yZLu",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Remove"
-        }]
-      })));
-    }));
-  }, [files.length, uploadedFiles, handleRemoveFile, intl, showFileList, FileListComponent]);
-  const placeholderTexts = React.useMemo(() => {
-    const texts = [];
-    if (isUploading) {
-      texts.push(intl.formatMessage({
-        id: "JEsxDw",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Uploading..."
-        }]
-      }));
-    } else if (isMaxFilesReached) {
-      texts.push(intl.formatMessage({
-        id: "eRShvB",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Maximum files reached"
-        }]
-      }));
-    } else {
-      texts.push(placeholder || intl.formatMessage({
-        id: "gy0Ynb",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Click or drag files here"
-        }]
-      }));
-    }
-    if (!isUploading && !isMaxFilesReached) {
-      if (accept) texts.push(accept);
-      if (maxSize) texts.push(`Max ${formatFileSize(maxSize)}`);
-      if (multiple && maxFiles) texts.push(intl.formatMessage({
-        id: "fOOwej",
-        defaultMessage: [{
-          "type": 6,
-          "value": "max_files",
-          "options": {
-            "one": {
-              "value": [{
-                "type": 0,
-                "value": "Up to "
-              }, {
-                "type": 7
-              }, {
-                "type": 0,
-                "value": " file"
-              }]
-            },
-            "other": {
-              "value": [{
-                "type": 0,
-                "value": "Up to "
-              }, {
-                "type": 7
-              }, {
-                "type": 0,
-                "value": " files"
-              }]
-            }
-          },
-          "offset": 0,
-          "pluralType": "cardinal"
-        }]
-      }, {
-        max_files: maxFiles
-      }));
-    }
-    return texts.filter(Boolean).join(" \u2022 ");
-  }, [isUploading, isMaxFilesReached, intl, placeholder, accept, maxSize, multiple, maxFiles]);
-  return /* @__PURE__ */React.createElement(Stack, {
-    sx: {
-      gap: 3,
-      justifyContent: "stretch",
-      width: "100%"
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    onDrop: handleDrop,
-    onDragOver: handleDragOver,
-    onDragLeave: handleDragLeave,
-    onClick: handleClick,
-    sx: {
-      width: "100%",
-      border: "2px dashed",
-      borderColor: error ? "error.default" : isDragOver ? "primary.default" : "display.border.muted.default",
-      borderRadius: "xl",
-      padding: 6,
-      textAlign: "center",
-      cursor: disabled || isUploading || isMaxFilesReached ? "not-allowed" : "pointer",
-      backgroundColor: isDragOver ? "primary.muted" : "display.background.secondary.default",
-      transition: "all 0.2s ease",
-      opacity: disabled || isMaxFilesReached ? 0.6 : 1,
-      "&:hover": {
-        borderColor: !disabled && !isUploading && !error && !isMaxFilesReached ? "primary.default" : void 0,
-        backgroundColor: !disabled && !isUploading && !isMaxFilesReached ? "primary.muted" : void 0
-      }
-    }
-  }, /* @__PURE__ */React.createElement("input", {
-    ref: fileInputRef,
-    type: "file",
-    accept,
-    multiple,
-    onChange: handleFileChange,
-    disabled: disabled || isUploading || isMaxFilesReached,
-    style: {
-      display: "none"
-    }
-  }), children || /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      flexDirection: "column",
-      alignItems: "center",
-      gap: 3,
-      justifyContent: "center"
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "2xl"
-    }
-  }, intl.formatMessage({
-    id: "XKyo5X",
-    defaultMessage: [{
-      "type": 0,
-      "value": "File Upload"
-    }]
-  })), /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      textAlign: "center"
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    variant: "body",
-    sx: {
-      color: "text.default",
-      mb: 1
-    }
-  }, placeholderTexts)), !isUploading && !isMaxFilesReached && /* @__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,61 +0,0 @@
-/** 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";
-var InstallPwaUi = /* @__PURE__ */__name(({
-  onInstall
-}) => {
-  return /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      position: "absolute",
-      bottom: 4,
-      width: "100%",
-      justifyContent: "center"
-    }
-  }, /* @__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 = /* @__PURE__ */__name(e => {
-      e.preventDefault();
-      setSupportsPwa(true);
-      setPromptInstall(e);
-    }, "handler");
-    window.addEventListener("beforeinstallprompt", handler);
-    return () => {
-      return window.removeEventListener("transitionend", handler);
-    };
-  }, []);
-  const onInstall = /* @__PURE__ */__name(e => {
-    e.preventDefault();
-    if (!promptInstall) {
-      return;
-    }
-    promptInstall.prompt();
-  }, "onInstall");
-  if (!supportsPwa) {
-    return null;
-  }
-  return /* @__PURE__ */React.createElement(InstallPwaUi, {
-    onInstall
-  });
-}, "InstallPwa");
-export { InstallPwa, InstallPwaUi };

package/dist/esm/JsonEditor/index.js

@@ -1,6 +0,0 @@
-/** 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";
-export { JsonEditor };

package/dist/esm/JsonView/index.js

@@ -1,6 +0,0 @@
-/** 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";
-export { JsonView };

package/dist/esm/List/index.js

@@ -1,30 +0,0 @@
-/** 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";
-var List = /* @__PURE__ */React.forwardRef(({
-  children,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */React.createElement("ul", {
-    ...props,
-    ref
-  }, children);
-});
-List.displayName = "List";
-
-// src/components/List/ListItem.tsx
-import * as React2 from "react";
-var ListItem = /* @__PURE__ */React2.forwardRef((props, ref) => {
-  const {
-    children,
-    ...rest
-  } = props;
-  return /* @__PURE__ */React2.createElement("li", {
-    ...rest,
-    ref
-  }, children);
-});
-ListItem.displayName = "ListItem";
-export { List, ListItem };

package/dist/esm/Markdown/index.js

@@ -1,23 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from 'react';
-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";
-var Markdown = /* @__PURE__ */__name(({
-  children,
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */React.createElement(BaseStyles, {
-    sx
-  }, /* @__PURE__ */React.createElement(ReactMarkdown, {
-    rehypePlugins: [rehypeRaw],
-    remarkPlugins: [remarkGfm],
-    ...props
-  }, children));
-}, "Markdown");
-export { Markdown };

package/dist/esm/Menu/index.js

@@ -1,131 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Icon } from "../chunk-2R7AUPJL.js";
-import { __name } from "../chunk-V4MHYKRI.js";
-
-// src/components/Menu/Menu.tsx
-import { Box, Flex } from "@ttoss/ui";
-import * as React from "react";
-var Menu = /* @__PURE__ */__name(({
-  children,
-  sx,
-  menuIcon = "menu-open"
-}) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [stylePos, setStylePos] = React.useState({});
-  const triggerRef = React.useRef(null);
-  const panelRef = React.useRef(null);
-  const toggle = /* @__PURE__ */__name(() => {
-    return setIsOpen(v => {
-      return !v;
-    });
-  }, "toggle");
-  React.useEffect(() => {
-    if (!isOpen) return;
-    const onDocClick = /* @__PURE__ */__name(e => {
-      const t = e.target;
-      if (panelRef.current && !panelRef.current.contains(t) && triggerRef.current && !triggerRef.current.contains(t)) {
-        setIsOpen(false);
-      }
-    }, "onDocClick");
-    document.addEventListener("mousedown", onDocClick);
-    return () => {
-      return document.removeEventListener("mousedown", onDocClick);
-    };
-  }, [isOpen]);
-  React.useLayoutEffect(() => {
-    if (!isOpen) return;
-    let rafId = 0;
-    const getWidth = /* @__PURE__ */__name(() => {
-      const w = sx?.width ?? sx?.maxWidth ?? sx?.minWidth;
-      return Array.isArray(w) ? w[w.length - 1] : w;
-    }, "getWidth");
-    const compute = /* @__PURE__ */__name(() => {
-      const trigger = triggerRef.current;
-      const panel2 = panelRef.current;
-      if (!trigger || !panel2) return;
-      const width = getWidth();
-      if (width) panel2.style.width = typeof width === "number" ? `${width}px` : String(width);
-      const tr = trigger.getBoundingClientRect();
-      const pr = panel2.getBoundingClientRect();
-      const vw = window.innerWidth,
-        vh = window.innerHeight,
-        m = 8;
-      if (pr.width === 0) {
-        rafId = requestAnimationFrame(compute);
-        return;
-      }
-      const left = Math.max(m, Math.min(tr.left + tr.width / 2 - pr.width / 2, vw - pr.width - m));
-      const top = vh - tr.bottom < pr.height + m ? Math.max(m, tr.top - pr.height - m) : tr.bottom + m;
-      setStylePos({
-        position: "fixed",
-        left: `${left}px`,
-        top: `${top}px`,
-        zIndex: 9999,
-        ...(width && {
-          width: typeof width === "number" ? `${width}px` : String(width)
-        })
-      });
-    }, "compute");
-    rafId = requestAnimationFrame(compute);
-    const onResizeScroll = /* @__PURE__ */__name(() => {
-      return rafId = requestAnimationFrame(compute);
-    }, "onResizeScroll");
-    window.addEventListener("resize", onResizeScroll);
-    window.addEventListener("scroll", onResizeScroll, true);
-    return () => {
-      cancelAnimationFrame(rafId);
-      window.removeEventListener("resize", onResizeScroll);
-      window.removeEventListener("scroll", onResizeScroll, true);
-    };
-  }, [isOpen, sx]);
-  const panel = isOpen ? /* @__PURE__ */React.createElement(Flex, {
-    ref: panelRef,
-    sx: {
-      width: ["280px", "320px"],
-      maxHeight: "400px",
-      flexDirection: "column",
-      gap: "3",
-      padding: "3",
-      backgroundColor: "input.background.muted.default",
-      borderRadius: "xl",
-      boxShadow: "xl",
-      overflowY: "auto",
-      border: "md",
-      borderColor: "display.border.muted.default",
-      ...sx
-    },
-    style: {
-      pointerEvents: "auto",
-      ...stylePos
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    as: "nav"
-  }, children)) : null;
-  return /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      position: "relative",
-      display: "inline-block"
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      position: "relative"
-    }
-  }, /* @__PURE__ */React.createElement("button", {
-    ref: triggerRef,
-    onClick: toggle,
-    "aria-haspopup": "true",
-    "aria-expanded": isOpen,
-    style: {
-      background: "transparent",
-      border: 0,
-      padding: 4,
-      cursor: "pointer",
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  }, /* @__PURE__ */React.createElement(Icon, {
-    icon: menuIcon
-  })), isOpen && panel));
-}, "Menu");
-export { Menu };