@apple-pie/slice 0.0.6 → 0.0.7

package/dist/esm/chunks/UploadArea-B9685Z06.mjs

@@ -0,0 +1,133 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import React, { useState, useRef, useCallback, useMemo } from "react";
+
+import { s as setStyle, a as accessibleKeyDown } from "./utils-BQ1v7VE4.mjs";
+
+import { F as FileList } from "./FileList-DUzgHfE-.mjs";
+
+import { I as Icon } from "./_types-KZDzhaiK.mjs";
+
+import { P as ProgressIndicator } from "./ProgressIndicator-CNOBQ_Fv.mjs";
+
+import { s as styleInject } from "./style-inject.es-D0BjEaN8.mjs";
+
+var css = {
+    wrapper: "UploadArea-module_wrapper__CRGxX flexBox-module_column__MP2Xd",
+    icon: "UploadArea-module_icon__BorsB flexBox-module_row__PWxbe",
+    title: "UploadArea-module_title__cHPKW type-module_body-l-bold__I8Q1v",
+    message: "UploadArea-module_message__cnoa7 flexBox-module_row__PWxbe",
+    files: "UploadArea-module_files__hIz4K flexBox-module_column__MP2Xd",
+    xs: "UploadArea-module_xs__MTB7z type-module_body-xs-regular__QWEzl",
+    s: "UploadArea-module_s__w0unZ type-module_body-s-regular__8-FO-",
+    m: "UploadArea-module_m__N4PzX type-module_body-m-regular__Qtp5G",
+    l: "UploadArea-module_l__2GkSv type-module_body-l-regular__Ar4d3"
+};
+
+styleInject(".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__zDf-z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__R5GpK {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__SI-hC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__tdBSi {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__-7Uyu {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__8hGYF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Cryjg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__PUi44 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__1B6fk {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.UploadArea-module_wrapper__CRGxX {\n\tpadding: var(--ua-padding) !important;\n\tborder: var(--ua-border) var(--ua-border-style) var(--ua-border-color);\n\tborder-radius: var(--ua-radius);\n\tbackground: var(--ua-bg-color);\n\tgap: 8px;\n\tcursor: var(--ua-cursor);\n\twidth: var(--ua-width);\n\theight: var(--ua-height);\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.UploadArea-module_icon__BorsB {\n\tmin-height: var(--ua-icon-size);\n\theight: var(--ua-icon-size);\n\tmin-width: var(--ua-icon-size);\n\twidth: var(--ua-icon-size);\n\tpointer-events: none;\n}\n\n.UploadArea-module_title__cHPKW {\n\tpointer-events: none;\n}\n\n.UploadArea-module_message__cnoa7 {\n\tcolor: var(--core-text-tertiary);\n\tpointer-events: none;\n\tgap: 8px;\n}\n\n.UploadArea-module_files__hIz4K {\n\tmargin-top: 16px !important;\n\twidth: 100%;\n}\n\n.UploadArea-module_xs__MTB7z {\n}\n\n.UploadArea-module_s__w0unZ {\n}\n\n.UploadArea-module_m__N4PzX {\n}\n\n.UploadArea-module_l__2GkSv {\n}\n");
+
+const imageTypes = [ "png", "jpg", "jpeg", "gif", "svg", "heic", "heif" ], videoTypes = [ "mp4", "avi", "mov", "wmv", "flv" ], documentTypes = [ "pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx" ], audioTypes = [ "mp3", "wav", "ogg", "aac", "flac" ], textTypes = [ "txt", "rtf", "md", "csv", "json", "xml" ], allTypes = [ ...imageTypes, ...videoTypes, ...documentTypes, ...audioTypes, ...textTypes ];
+
+var FileTypes;
+
+!function(FileTypes) {
+    FileTypes.images = "images", FileTypes.videos = "videos", FileTypes.documents = "documents", 
+    FileTypes.audio = "audio", FileTypes.text = "text", FileTypes.all = "all", FileTypes.custom = "custom";
+}(FileTypes || (FileTypes = {}));
+
+const UploadAreaBase = React.forwardRef((props, ref) => {
+    const {icon: icon = "upload", iconColor: iconColor = "var(--core-text-primary)", iconColorHover: iconColorHover = "var(--core-text-special)", title: title = "Upload Files", width: width = "100%", height: height = "auto", message: message = "Drag and drop files here or click to upload", busyMessage: busyMessage = "Uploading in progress", iconSize: iconSize = 24, textSize: textSize = "m", border: border = 1, borderStyle: borderStyle = "dashed", borderColor: borderColor = "var(--core-outline-primary)", borderColorHover: borderColorHover = "var(--core-outline-special)", radius: radius = 8, padding: padding = 32, bgColor: bgColor = "var(--core-surface-secondary)", bgColorHover: bgColorHover = "var(--core-surface-special)", acceptedTypes: acceptedTypes = allTypes, multiple: multiple = !0, busy: busy = !1, canRemove: canRemove = !0, showProgress: showProgress = !0, files: files = [], onUpload: onUpload} = props, [hovered, setHovered] = useState(!1), inputRef = useRef(null), dragDepth = useRef(0), handleClickUpload = useCallback(() => {
+        var _a;
+        busy || files.length > 0 || (null == inputRef ? void 0 : inputRef.current) && (inputRef.current.value = "", 
+        null === (_a = inputRef.current) || void 0 === _a || _a.click());
+    }, [ busy, files.length ]), handleFileInputChange = useCallback(e => {
+        busy || e.target.files && (null == onUpload || onUpload(Array.from(e.target.files)));
+    }, [ busy, onUpload ]), hasFilesInDrag = useCallback(e => {
+        var _a, _b;
+        return Array.from(null !== (_b = null === (_a = e.dataTransfer) || void 0 === _a ? void 0 : _a.types) && void 0 !== _b ? _b : []).includes("Files");
+    }, []), handleDragEnter = useCallback(e => {
+        e.preventDefault(), !busy && hasFilesInDrag(e) && (dragDepth.current += 1, 1 === dragDepth.current && setHovered(!0));
+    }, [ busy, hasFilesInDrag ]), handleDragLeave = useCallback(e => {
+        e.preventDefault(), busy || (dragDepth.current = Math.max(0, dragDepth.current - 1), 
+        0 === dragDepth.current && setHovered(!1));
+    }, [ busy ]), handleDrop = useCallback(e => {
+        var _a;
+        if (e.preventDefault(), busy) return;
+        dragDepth.current = 0, setHovered(!1);
+        const files = Array.from(null !== (_a = e.dataTransfer.files) && void 0 !== _a ? _a : []);
+        null == onUpload || onUpload(files);
+    }, [ busy, onUpload ]), iconStrokeColor = useMemo(() => hovered ? iconColorHover : iconColor, [ hovered, iconColor, iconColorHover ]), cssVars = useMemo(() => ({
+        "--ua-border": `${border}px`,
+        "--ua-border-style": borderStyle,
+        "--ua-border-color": hovered || busy ? borderColorHover : borderColor,
+        "--ua-radius": `${radius}px`,
+        "--ua-padding": setStyle(padding),
+        "--ua-bg-color": hovered ? bgColorHover : bgColor,
+        "--ua-icon-size": `${iconSize}px`,
+        "--ua-cursor": busy || files.length > 0 ? "default" : "pointer",
+        "--ua-width": setStyle(width),
+        "--ua-height": setStyle(height)
+    }), [ border, borderStyle, borderColor, borderColorHover, radius, padding, bgColor, bgColorHover, iconSize, busy, hovered, height, files.length, width ]);
+    return jsxs("div", {
+        className: css.wrapper,
+        style: cssVars,
+        ref: ref,
+        role: "button",
+        "aria-label": "Click to upload files",
+        tabIndex: 0,
+        onClick: handleClickUpload,
+        onKeyDown: e => accessibleKeyDown(e, () => handleClickUpload()),
+        onDragEnter: handleDragEnter,
+        onDragOver: e => {
+            e.preventDefault();
+        },
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        children: [ jsx("div", {
+            className: css.icon,
+            children: jsx(Icon, {
+                size: iconSize,
+                name: icon,
+                strokeColor: iconStrokeColor,
+                pointer: !1
+            })
+        }), jsx("div", {
+            className: css.title,
+            children: title
+        }), jsxs("div", {
+            className: `${css.message} ${css[textSize]}`,
+            children: [ busy && showProgress && jsx(ProgressIndicator, {
+                show: !0,
+                size: 20,
+                inline: !0,
+                color: iconStrokeColor
+            }), busy ? busyMessage : message ]
+        }), files.length > 0 && jsx("div", {
+            className: css.files,
+            children: jsx(FileList, {
+                files: files,
+                bgColor: "var(--core-surface-primary)",
+                size: "m",
+                direction: "column",
+                gap: 8,
+                iconSize: 24,
+                padding: "10px",
+                canRemove: canRemove
+            })
+        }), jsx("input", {
+            ref: inputRef,
+            type: "file",
+            hidden: !0,
+            disabled: busy,
+            multiple: multiple,
+            accept: acceptedTypes ? acceptedTypes.join(", ") : void 0,
+            onChange: handleFileInputChange
+        }) ]
+    });
+});
+
+UploadAreaBase.displayName = "UploadArea";
+
+const UploadArea = React.memo(UploadAreaBase);
+
+export { UploadArea as U, allTypes as a, audioTypes as b, documentTypes as d, imageTypes as i, textTypes as t, videoTypes as v };