@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/chunk-XIMFP6RB.mjs

@@ -0,0 +1,161 @@
+import {
+  DisplayFile_default,
+  PreviewableFile,
+  displayFileSize
+} from "./chunk-AAH2O24U.mjs";
+import {
+  Button
+} from "./chunk-JIU5GVM7.mjs";
+import {
+  default89 as default5,
+  default90 as default6
+} from "./chunk-ZVFYOXDE.mjs";
+import {
+  default as default4
+} from "./chunk-4RPFRNXG.mjs";
+import {
+  default as default2,
+  default2 as default3,
+  mergeSx
+} from "./chunk-S6EZVRZC.mjs";
+
+// src/components/compound/FileUploader/src/ReactDropzone.tsx
+import { useCallback, useEffect, useRef } from "react";
+import { useDropzone } from "react-dropzone";
+
+// src/components/compound/FileUploader/src/theme.ts
+var fileUploaderRootSx = {
+  "--dropzone-bg": "var(--mui-palette-background-paper)",
+  "--dropzone-text-color": "var(--mui-palette-text-secondary)",
+  "--dropzone-border-hover": "var(--mui-palette-primary-main)",
+  "--dropzone-bg-hover": "var(--mui-palette-action-hover)"
+};
+
+// src/components/compound/FileUploader/src/DropZoneBox.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropZoneBox = ({ getRootProps, getInputProps, error }) => {
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      ...getRootProps(),
+      sx: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        p: 3,
+        border: "2px dashed",
+        borderColor: error ? "error.main" : "divider",
+        borderRadius: 1,
+        backgroundColor: "var(--dropzone-bg)",
+        outline: "none",
+        transition: "border .24s ease-in-out",
+        color: "var(--dropzone-text-color)",
+        cursor: "pointer",
+        "&:hover": {
+          borderColor: "var(--dropzone-border-hover)",
+          backgroundColor: "var(--dropzone-bg-hover)"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+        /* @__PURE__ */ jsx(default5, { sx: { fontSize: "2.5rem", mb: 1 } }),
+        /* @__PURE__ */ jsx(default4, { variant: "caption", align: "center", children: 'Drag "n" drop some files here, or click to select files' })
+      ]
+    }
+  );
+};
+var DropZoneBox_default = DropZoneBox;
+
+// src/components/compound/FileUploader/src/DropZoneButton.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DropZoneButton = ({
+  getRootProps,
+  getInputProps,
+  label = "Upload file",
+  error = false
+}) => {
+  return /* @__PURE__ */ jsxs2(
+    Button,
+    {
+      variant: "outlined",
+      startIcon: /* @__PURE__ */ jsx2(default6, {}),
+      color: error ? "error" : "primary",
+      ...getRootProps(),
+      children: [
+        label,
+        /* @__PURE__ */ jsx2("input", { ...getInputProps() })
+      ]
+    }
+  );
+};
+var DropZoneButton_default = DropZoneButton;
+
+// src/components/compound/FileUploader/src/ReactDropzone.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ReactDropzone = ({
+  filesProps,
+  accept,
+  maxFiles = 0,
+  // 0 means unlimited
+  error = false,
+  dropzoneType = "box",
+  label = "Upload File"
+}) => {
+  const [files, setFiles] = filesProps;
+  const blobRegistryRef = useRef(/* @__PURE__ */ new Set());
+  const onDrop = useCallback((acceptedFiles) => {
+    const newFiles = acceptedFiles.map((file) => {
+      const blobUrl = URL.createObjectURL(file);
+      blobRegistryRef.current.add(blobUrl);
+      return new PreviewableFile({
+        path: file.path,
+        blobUrl,
+        filename: file.name,
+        mimeType: file.type,
+        size: file.size,
+        displaySize: displayFileSize(file.size),
+        fileType: file.type.startsWith("image/") ? "image" : file.type.startsWith("application/json") ? "json" : "other"
+      });
+    });
+    setFiles((prev) => [...prev, ...newFiles]);
+  }, [setFiles]);
+  const isLimitReached = maxFiles > 0 && files.length >= maxFiles;
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    accept,
+    maxFiles: maxFiles > 0 ? maxFiles - files.length : void 0,
+    disabled: isLimitReached
+  });
+  const handleDelete = (fileToDelete) => {
+    setFiles((prev) => prev.filter((f) => f !== fileToDelete));
+    if (fileToDelete.blobUrl) {
+      URL.revokeObjectURL(fileToDelete.blobUrl);
+      blobRegistryRef.current.delete(fileToDelete.blobUrl);
+    }
+  };
+  useEffect(() => {
+    const blobRegistry = blobRegistryRef.current;
+    return () => {
+      blobRegistry.forEach((url) => URL.revokeObjectURL(url));
+      blobRegistry.clear();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs3(default2, { sx: mergeSx({ maxWidth: "100%" }, fileUploaderRootSx), children: [
+    !isLimitReached && /* @__PURE__ */ jsx3(default2, { component: "section", children: dropzoneType === "box" ? /* @__PURE__ */ jsx3(DropZoneBox_default, { getRootProps, getInputProps, error }) : /* @__PURE__ */ jsx3(DropZoneButton_default, { getRootProps, getInputProps, label, error }) }),
+    files.length > 0 && /* @__PURE__ */ jsx3(default3, { spacing: 1, sx: { mt: 0 }, children: files.map((file) => /* @__PURE__ */ jsx3(
+      DisplayFile_default,
+      {
+        file,
+        onDelete: handleDelete
+      },
+      file.blobUrl || file.filename || file.path
+    )) })
+  ] });
+};
+var ReactDropzone_default = ReactDropzone;
+
+export {
+  ReactDropzone_default
+};
+//# sourceMappingURL=chunk-XIMFP6RB.mjs.map

package/dist/chunk-XIMFP6RB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/compound/FileUploader/src/ReactDropzone.tsx","../src/components/compound/FileUploader/src/theme.ts","../src/components/compound/FileUploader/src/DropZoneBox.tsx","../src/components/compound/FileUploader/src/DropZoneButton.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\nimport { useDropzone, FileWithPath, DropzoneOptions } from 'react-dropzone';\nimport { Box, Stack } from '@/ele/Box';\nimport { fileUploaderRootSx } from './theme';\nimport { mergeSx } from '@/_utils/_func';\nimport PreviewableFile, { displayFileSize } from '@/_utils/classes/PreviewableFile';\nimport DisplayFile from '@/compound/DisplayFile';\nimport DropZoneBox from './DropZoneBox';\nimport DropZoneButton from './DropZoneButton';\n\nexport type DropzoneType = \"box\" | \"button\";\n\nexport interface ReactDropzoneProps {\n    filesProps: [PreviewableFile[], React.Dispatch<React.SetStateAction<PreviewableFile[]>>];\n    accept?: DropzoneOptions['accept'];\n    maxFiles?: number;\n    error?: boolean;\n    dropzoneType?: DropzoneType;\n    label?: string;\n}\n\nconst ReactDropzone: React.FC<ReactDropzoneProps> = ({\n    filesProps,\n    accept,\n    maxFiles = 0, // 0 means unlimited\n    error = false,\n    dropzoneType = 'box',\n    label = 'Upload File'\n}) => {\n    const [files, setFiles] = filesProps;\n\n    // Track all active blob URLs so the unmount cleanup can revoke them\n    // even if the user never called handleDelete.\n    const blobRegistryRef = useRef<Set<string>>(new Set());\n\n    const onDrop = useCallback((acceptedFiles: FileWithPath[]) => {\n        const newFiles = acceptedFiles.map(file => {\n            const blobUrl = URL.createObjectURL(file);\n            blobRegistryRef.current.add(blobUrl);\n            return new PreviewableFile({\n                path: file.path,\n                blobUrl,\n                filename: file.name,\n                mimeType: file.type,\n                size: file.size,\n                displaySize: displayFileSize(file.size),\n                fileType: file.type.startsWith('image/') ? 'image'\n                          : file.type.startsWith('application/json') ? 'json' : 'other'\n            });\n        });\n\n        setFiles(prev => [...prev, ...newFiles]);\n    }, [setFiles]);\n\n    // hide dropzone UI when reached limit (already handled) — add explicit guard in render\n    const isLimitReached = maxFiles > 0 && files.length >= maxFiles;\n\n    const { getRootProps, getInputProps } = useDropzone({\n        onDrop,\n        accept,\n        maxFiles: maxFiles > 0 ? (maxFiles - files.length) : undefined,\n        disabled: isLimitReached,\n    });\n\n    const handleDelete = (fileToDelete: PreviewableFile) => {\n        setFiles(prev => prev.filter(f => f !== fileToDelete));\n        if (fileToDelete.blobUrl) {\n            URL.revokeObjectURL(fileToDelete.blobUrl);\n            blobRegistryRef.current.delete(fileToDelete.blobUrl);\n        }\n    };\n\n    useEffect(() => {\n        const blobRegistry = blobRegistryRef.current;\n        return () => {\n            blobRegistry.forEach(url => URL.revokeObjectURL(url));\n            blobRegistry.clear();\n        };\n    }, []); // Cleanup remaining blob URLs on unmount\n\n    return (\n        <Box sx={mergeSx({ maxWidth: '100%' }, fileUploaderRootSx)}>\n            {!isLimitReached && (\n                <Box component=\"section\">\n                    {dropzoneType === 'box' ? (\n                        <DropZoneBox getRootProps={getRootProps} getInputProps={getInputProps} error={error}/>\n                    ) : (\n                        <DropZoneButton getRootProps={getRootProps} getInputProps={getInputProps} label={label} error={error}/>\n                    )}\n                </Box>\n            )}\n\n            {files.length > 0 && (\n                <Stack spacing={1} sx={{ mt: 0 }}>\n                    {files.map((file) => (\n                        <DisplayFile \n                            key={file.blobUrl || file.filename || file.path} \n                            file={file} \n                            onDelete={handleDelete}\n                        />\n                    ))}\n                </Stack>\n            )}\n        </Box>\n    );\n};\n\nexport default ReactDropzone;\n","import type { SxProps, Theme } from '@mui/material/styles';\n\n/**\n * Root-level CSS variable aliases for the FileUploader compound component.\n * Declared once on the root element — child components consume via `var(--*)`.\n */\nexport const fileUploaderRootSx: SxProps<Theme> = {\n  '--dropzone-bg': 'var(--mui-palette-background-paper)',\n  '--dropzone-text-color': 'var(--mui-palette-text-secondary)',\n  '--dropzone-border-hover': 'var(--mui-palette-primary-main)',\n  '--dropzone-bg-hover': 'var(--mui-palette-action-hover)',\n};\n","import React from 'react';\nimport { DropzoneState } from 'react-dropzone';\nimport { Box } from '@/ele/Box';\nimport { Typography } from '@/ele/Typography';\nimport { NoteAddIcon } from '@/icons/MuiIcon';\n\nconst DropZoneBox: React.FC<{\n    getRootProps: DropzoneState[\"getRootProps\"];\n    getInputProps: DropzoneState[\"getInputProps\"];\n    error?: boolean;\n}> = ({ getRootProps, getInputProps, error }) => {\n    return (\n        <Box \n            {...getRootProps()} \n            sx={{\n                flex: 1,\n                display: \"flex\",\n                flexDirection: \"column\",\n                alignItems: \"center\",\n                p: 3,\n                border: \"2px dashed\",\n                borderColor: error ? 'error.main' : 'divider',\n                borderRadius: 1,\n                backgroundColor: 'var(--dropzone-bg)',\n                outline: \"none\",\n                transition: \"border .24s ease-in-out\",\n                color: 'var(--dropzone-text-color)',\n                cursor: 'pointer',\n                '&:hover': {\n                    borderColor: 'var(--dropzone-border-hover)',\n                    backgroundColor: 'var(--dropzone-bg-hover)'\n                }\n            }}\n        >\n            <input {...getInputProps()} />\n            \n            <NoteAddIcon sx={{ fontSize: \"2.5rem\", mb: 1 }} />\n            <Typography variant=\"caption\" align=\"center\">\n                Drag &quot;n&quot; drop some files here, or click to select files\n            </Typography>\n        </Box>\n    )\n}\n\nexport default DropZoneBox;\n","import React from 'react';\nimport { DropzoneState } from 'react-dropzone';\nimport { CloudUploadIcon } from '@/icons/MuiIcon';\nimport { Button } from '@/ele/Button'; \n\nconst DropZoneButton: React.FC<{\n    getRootProps: DropzoneState[\"getRootProps\"];\n    getInputProps: DropzoneState[\"getInputProps\"];\n    label?: string;\n    error?: boolean;\n}> = ({\n    getRootProps, getInputProps, \n    label=\"Upload file\",\n    error=false\n}) => {\n    return (\n        <Button \n            variant=\"outlined\"\n            startIcon={<CloudUploadIcon/>} \n            color={error ? \"error\" : \"primary\"}\n            {...getRootProps()}\n        >\n            {label}\n            <input {...getInputProps()}/>\n        </Button>\n    )\n}\n\nexport default DropZoneButton;\n"],"mappings":"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","names":["default","jsx","jsxs","default","jsx","jsxs","default"]}