@ttoss/components 2.4.0 → 2.4.2

package/README.md

@@ -57,7 +57,7 @@ Drag-and-drop file upload with progress tracking. [📖 Docs](https://storybook.
 import { FileUploader } from '@ttoss/components/FileUploader';
 
 <FileUploader
-  uploadFn={async (file) => ({ url: 'file-url', id: 'file-id' })}
+  onUpload={async (file) => ({ url: 'file-url', id: 'file-id' })}
   onUploadComplete={(file, result) => console.log('Uploaded:', result)}
 />;
 ```

package/dist/FileUploader/index.d.ts

@@ -12,14 +12,21 @@ type FileUploadState = {
     result?: UploadResult;
     error?: Error;
 };
+type OnUpload = (file: File, onProgress?: (progress: number) => void) => Promise<UploadResult>;
+type OnUploadStart = (file: File) => void;
+type OnUploadProgress = (file: File, progress: number) => void;
+type OnUploadComplete = (file: File, result: UploadResult) => void;
+type OnUploadError = (file: File, error: Error) => void;
+type OnFilesChange = (files: FileUploadState[]) => void;
+type OnRemoveFile = (file: FileUploadState, index: number) => void;
 type FileUploaderProps = {
-    uploadFn: (file: File, onProgress?: (progress: number) => void) => Promise<UploadResult>;
-    onUploadStart?: (file: File) => void;
-    onUploadProgress?: (file: File, progress: number) => void;
-    onUploadComplete?: (file: File, result: UploadResult) => void;
-    onUploadError?: (file: File, error: Error) => void;
-    onFilesChange?: (files: FileUploadState[]) => void;
-    onRemoveFile?: (file: FileUploadState, index: number) => void;
+    onUpload: OnUpload;
+    onUploadStart?: OnUploadStart;
+    onUploadProgress?: OnUploadProgress;
+    onUploadComplete?: OnUploadComplete;
+    onUploadError?: OnUploadError;
+    onFilesChange?: OnFilesChange;
+    onRemoveFile?: OnRemoveFile;
     accept?: string;
     multiple?: boolean;
     maxSize?: number;
@@ -36,6 +43,6 @@ type FileUploaderProps = {
         onRemoveFile: (index: number) => void;
     }) => React.ReactNode;
 };
-declare const FileUploader: ({ uploadFn, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, onFilesChange, onRemoveFile, accept, multiple, maxSize, maxFiles, disabled, autoUpload, retryAttempts, placeholder, error, children, showFileList, FileListComponent, }: FileUploaderProps) => react_jsx_runtime.JSX.Element;
+declare const FileUploader: ({ onUpload, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, onFilesChange, onRemoveFile, accept, multiple, maxSize, maxFiles, disabled, autoUpload, retryAttempts, placeholder, error, children, showFileList, FileListComponent, }: FileUploaderProps) => react_jsx_runtime.JSX.Element;
 
-export { type FileUploadState, FileUploader, type FileUploaderProps, type UploadResult };
+export { type FileUploadState, FileUploader, type FileUploaderProps, type OnFilesChange, type OnRemoveFile, type OnUpload, type OnUploadComplete, type OnUploadError, type OnUploadProgress, type OnUploadStart, type UploadResult };

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

@@ -1,12 +1,12 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
 
 // src/components/FileUploader/FileUploader.tsx
-import { FormattedMessage } from "@ttoss/react-i18n";
+import { useI18n } from "@ttoss/react-i18n";
 import { Box, Button, Flex, Stack, Text } from "@ttoss/ui";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var FileUploader = ({
-  uploadFn,
+var FileUploader = /* @__PURE__ */__name(({
+  onUpload,
   onUploadStart,
   onUploadProgress,
   onUploadComplete,
@@ -16,7 +16,6 @@ var FileUploader = ({
   accept,
   multiple = true,
   maxSize = 10 * 1024 * 1024,
-  // 10MB
   maxFiles = 5,
   disabled = false,
   autoUpload = true,
@@ -27,17 +26,20 @@ var FileUploader = ({
   showFileList = true,
   FileListComponent
 }) => {
+  const {
+    intl
+  } = useI18n();
   const [files, setFiles] = React.useState([]);
   const [isDragOver, setIsDragOver] = React.useState(false);
   const fileInputRef = React.useRef(null);
-  const formatFileSize = bytes => {
+  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];
-  };
-  const validateFiles = newFiles => {
+  }, "formatFileSize");
+  const validateFiles = /* @__PURE__ */__name(newFiles => {
     const fileArray = Array.from(newFiles);
     const validFiles = [];
     const currentFileCount = files.length;
@@ -51,7 +53,7 @@ var FileUploader = ({
       validFiles.push(file);
     }
     return validFiles;
-  };
+  }, "validateFiles");
   const updateFileState = React.useCallback((file, updates) => {
     setFiles(prevFiles => {
       const newFiles = prevFiles.map(f => {
@@ -71,7 +73,7 @@ var FileUploader = ({
         status: "uploading",
         progress: 0
       });
-      const result = await uploadFn(fileState.file, progress => {
+      const result = await onUpload(fileState.file, progress => {
         updateFileState(fileState.file, {
           progress
         });
@@ -97,8 +99,8 @@ var FileUploader = ({
         onUploadError?.(fileState.file, error2);
       }
     }
-  }, [uploadFn, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, retryAttempts, updateFileState]);
-  const addFiles = newFiles => {
+  }, [onUpload, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, retryAttempts, updateFileState]);
+  const addFiles = /* @__PURE__ */__name(newFiles => {
     const newFileStates = newFiles.map(file => {
       return {
         file,
@@ -115,14 +117,14 @@ var FileUploader = ({
         uploadFile(fileState);
       }
     }
-  };
-  const handleFileChange = event => {
+  }, "addFiles");
+  const handleFileChange = /* @__PURE__ */__name(event => {
     if (event.target.files) {
       const validFiles = validateFiles(event.target.files);
       addFiles(validFiles);
     }
-  };
-  const handleDrop = event => {
+  }, "handleFileChange");
+  const handleDrop = /* @__PURE__ */__name(event => {
     event.preventDefault();
     setIsDragOver(false);
     if (disabled) return;
@@ -131,22 +133,22 @@ var FileUploader = ({
       const validFiles = validateFiles(droppedFiles);
       addFiles(validFiles);
     }
-  };
-  const handleDragOver = event => {
+  }, "handleDrop");
+  const handleDragOver = /* @__PURE__ */__name(event => {
     event.preventDefault();
     if (!disabled) {
       setIsDragOver(true);
     }
-  };
-  const handleDragLeave = event => {
+  }, "handleDragOver");
+  const handleDragLeave = /* @__PURE__ */__name(event => {
     event.preventDefault();
     setIsDragOver(false);
-  };
-  const handleClick = () => {
+  }, "handleDragLeave");
+  const handleClick = /* @__PURE__ */__name(() => {
     if (!disabled && fileInputRef.current) {
       fileInputRef.current.click();
     }
-  };
+  }, "handleClick");
   const handleRemoveFile = React.useCallback(index => {
     const fileToRemove = files[index];
     setFiles(prevFiles => {
@@ -172,181 +174,173 @@ var FileUploader = ({
       return null;
     }
     if (FileListComponent) {
-      return /* @__PURE__ */jsx(FileListComponent, {
+      return /* @__PURE__ */React.createElement(FileListComponent, {
         files,
         onRemoveFile: handleRemoveFile
       });
     }
-    return /* @__PURE__ */jsx(Stack, {
+    return /* @__PURE__ */React.createElement(Stack, {
       sx: {
         gap: 1
-      },
-      children: files.map((fileState, index) => {
-        return /* @__PURE__ */jsxs(Flex, {
-          sx: {
-            alignItems: "center",
-            justifyContent: "space-between",
-            p: 2,
-            backgroundColor: "display.background.secondary.default",
-            borderRadius: "md",
-            gap: 2
-          },
-          children: [/* @__PURE__ */jsxs(Flex, {
-            sx: {
-              alignItems: "center",
-              gap: 2,
-              flex: 1
-            },
-            children: [/* @__PURE__ */jsx(Text, {
-              sx: {
-                fontSize: "lg"
-              },
-              children: fileState.status === "completed" ? "\u2713" : fileState.status === "error" ? "\u2717" : fileState.status === "uploading" ? "\u21BB" : "\u{1F4C4}"
-            }), /* @__PURE__ */jsxs(Box, {
-              sx: {
-                flex: 1
-              },
-              children: [/* @__PURE__ */jsx(Text, {
-                variant: "body",
-                sx: {
-                  fontWeight: "medium"
-                },
-                children: fileState.file.name
-              }), fileState.status === "uploading" && fileState.progress && /* @__PURE__ */jsxs(Text, {
-                variant: "caption",
-                sx: {
-                  color: "primary.default"
-                },
-                children: [fileState.progress.toFixed(0), "%"]
-              }), fileState.status === "error" && /* @__PURE__ */jsx(Text, {
-                variant: "caption",
-                sx: {
-                  color: "error.default"
-                },
-                children: "Failed"
-              })]
-            }), /* @__PURE__ */jsx(Text, {
-              variant: "caption",
-              sx: {
-                color: "text.muted"
-              },
-              children: formatFileSize(fileState.file.size)
-            })]
-          }), /* @__PURE__ */jsxs(Flex, {
-            sx: {
-              gap: 1
-            },
-            children: [fileState.status === "error" && /* @__PURE__ */jsx(Button, {
-              variant: "destructive",
-              onClick: () => {
-                return retryUpload(index);
-              },
-              sx: {
-                fontSize: "xs"
-              },
-              children: "Retry"
-            }), /* @__PURE__ */jsx(Button, {
-              variant: "destructive",
-              onClick: () => {
-                return handleRemoveFile(index);
-              },
-              sx: {
-                fontSize: "sm",
-                color: "text.muted",
-                "&:hover": {
-                  color: "error.default"
-                }
-              },
-              children: "Remove"
-            })]
-          })]
-        }, index);
-      })
-    });
-  }, [FileListComponent, files, handleRemoveFile, retryUpload, showFileList]);
-  return /* @__PURE__ */jsxs(Stack, {
-    sx: {
-      gap: 3
-    },
-    children: [/* @__PURE__ */jsxs(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
-        }
-      },
-      children: [/* @__PURE__ */jsx("input", {
-        ref: fileInputRef,
-        type: "file",
-        accept,
-        multiple,
-        onChange: handleFileChange,
-        disabled: disabled || isUploading,
-        style: {
-          display: "none"
+      }
+    }, 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
         }
-      }), children || /* @__PURE__ */jsxs(Flex, {
+      }, /* @__PURE__ */React.createElement(Flex, {
         sx: {
-          flexDirection: "column",
           alignItems: "center",
-          gap: 3,
-          justifyContent: "center"
-        },
-        children: [/* @__PURE__ */jsx(Text, {
-          sx: {
-            fontSize: "3xl"
-          },
-          children: "\u{1F4C1}"
-        }), /* @__PURE__ */jsxs(Box, {
-          sx: {
-            textAlign: "center"
-          },
-          children: [/* @__PURE__ */jsx(Text, {
-            variant: "body",
-            sx: {
-              color: "text.default",
-              mb: 1
-            },
-            children: isUploading ? /* @__PURE__ */jsx(FormattedMessage, {
-              defaultMessage: "Uploading..."
-            }) : placeholder || /* @__PURE__ */jsx(FormattedMessage, {
-              defaultMessage: "Click or drag files here"
-            })
-          }), /* @__PURE__ */jsx(Text, {
-            variant: "caption",
-            sx: {
-              color: "text.muted"
-            },
-            children: [accept && accept, maxSize && `Max ${formatFileSize(maxSize)}`, multiple && maxFiles && `Up to ${maxFiles} files`].filter(Boolean).join(" \u2022 ")
-          })]
-        }), !isUploading && /* @__PURE__ */jsx(Button, {
-          variant: "secondary",
-          disabled,
-          children: /* @__PURE__ */jsx(FormattedMessage, {
-            defaultMessage: "Select Files"
-          })
-        })]
-      })]
-    }), error && /* @__PURE__ */jsx(Text, {
-      variant: "caption",
-      sx: {
-        color: "error.default"
-      },
-      children: error
-    }), fileListNode]
-  });
-};
+          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 };