@roy-ui/ui 0.0.14 → 0.0.16

package/dist/chunk-E2VDIA6U.js

@@ -0,0 +1,621 @@
+"use client";
+import { TextMorph } from './chunk-MO7UPMW7.js';
+import { Button } from './chunk-B6LXWGX5.js';
+import { forwardRef, useRef, useState, useMemo, useEffect } from 'react';
+import './UploadFiles-QEAOV3R6.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_STATUS_WORDS = [
+  "Uploading\u2026",
+  "Transferring\u2026",
+  "Beaming bytes\u2026",
+  "Encrypting\u2026",
+  "Securing\u2026",
+  "Packing bits\u2026",
+  "Syncing\u2026",
+  "Crunching data\u2026",
+  "Pushing pixels\u2026",
+  "Almost there\u2026",
+  "Hang tight\u2026",
+  "Wrangling chunks\u2026",
+  "Verifying\u2026",
+  "Finalizing\u2026",
+  "Just a sec\u2026"
+];
+var EXT_META = {
+  pdf: { label: "PDF", color: "#f0524b" },
+  doc: { label: "DOC", color: "#3b82f6" },
+  docx: { label: "DOCX", color: "#3b82f6" },
+  fig: { label: "FIG", color: "#a259ff" },
+  png: { label: "PNG", color: "#10b981" },
+  jpg: { label: "JPG", color: "#10b981" },
+  jpeg: { label: "JPG", color: "#10b981" },
+  gif: { label: "GIF", color: "#10b981" },
+  svg: { label: "SVG", color: "#f59e0b" },
+  zip: { label: "ZIP", color: "#f59e0b" },
+  mp4: { label: "MP4", color: "#ec4899" },
+  csv: { label: "CSV", color: "#22c55e" },
+  json: { label: "JSON", color: "#eab308" },
+  default: { label: "FILE", color: "#8b8b94" }
+};
+function fileExt(name) {
+  return name.split(".").pop()?.toLowerCase() ?? "";
+}
+function extMeta(name) {
+  return EXT_META[fileExt(name)] ?? EXT_META.default;
+}
+function trimNum(n) {
+  return (Math.round(n * 10) / 10).toString();
+}
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "0 B";
+  if (bytes < 1024) return `${Math.round(bytes)} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${trimNum(kb)} KB`;
+  const mb = kb / 1024;
+  if (mb < 1024) return `${trimNum(mb)} MB`;
+  return `${trimNum(mb / 1024)} GB`;
+}
+function shuffle(input) {
+  const a = input.slice();
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+var cn = (...classes) => classes.filter(Boolean).join(" ");
+var UploadGlyph = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "22", height: "22", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 15V4m0 0L7.5 8.5M12 4l4.5 4.5",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M4 14v3.5A2.5 2.5 0 0 0 6.5 20h11a2.5 2.5 0 0 0 2.5-2.5V14",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round"
+    }
+  )
+] });
+var CloseGlyph = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M6 6l12 12M18 6L6 18",
+    stroke: "currentColor",
+    strokeWidth: "1.6",
+    strokeLinecap: "round"
+  }
+) });
+var TrashGlyph = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M4 7h16M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7m2 0v11.5A1.5 1.5 0 0 1 15.5 20h-7A1.5 1.5 0 0 1 7 18.5V7m3 3.5v6m4-6v6",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var CheckGlyph = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M4 12.5l5 5 11-12",
+    stroke: "currentColor",
+    strokeWidth: "2.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var CheckSmall = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M5 12.5l4.5 4.5L19 6",
+    stroke: "currentColor",
+    strokeWidth: "2.6",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+function DefaultPreview({ file }) {
+  const meta = extMeta(file.name);
+  const ext = fileExt(file.name);
+  const url = file.url;
+  if (url && /^(png|jpe?g|gif|webp|svg|avif|bmp)$/.test(ext)) {
+    return /* @__PURE__ */ jsx("img", { className: "royui-upload__preview-img", src: url, alt: file.name });
+  }
+  if (url && ext === "pdf") {
+    return /* @__PURE__ */ jsx("iframe", { className: "royui-upload__preview-frame", src: url, title: file.name });
+  }
+  if (url && /^(mp4|webm|mov|ogg)$/.test(ext)) {
+    return /* @__PURE__ */ jsx("video", { className: "royui-upload__preview-video", src: url, controls: true });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "royui-upload__preview-card", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "royui-upload__preview-badge",
+        style: { ["--royui-upload-badge"]: meta.color },
+        "aria-hidden": "true",
+        children: file.icon ?? /* @__PURE__ */ jsx("span", { className: "royui-upload__badge-label", children: meta.label })
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "royui-upload__preview-name", children: file.name }),
+    /* @__PURE__ */ jsxs("p", { className: "royui-upload__preview-sub", children: [
+      formatBytes(file.size),
+      " \xB7 ",
+      meta.label
+    ] }),
+    url ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: "royui-upload__preview-download",
+        href: url,
+        download: file.name,
+        target: "_blank",
+        rel: "noreferrer",
+        children: "Open file"
+      }
+    ) : /* @__PURE__ */ jsx("p", { className: "royui-upload__preview-empty", children: "No inline preview available." })
+  ] });
+}
+function PreviewModal({
+  file,
+  renderPreview,
+  onClose
+}) {
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "royui-upload__modal",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": `Preview of ${file.name}`,
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "royui-upload__modal-panel",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs("header", { className: "royui-upload__modal-head", children: [
+              /* @__PURE__ */ jsx("span", { className: "royui-upload__modal-title", title: file.name, children: file.name }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "royui-upload__close",
+                  "aria-label": "Close preview",
+                  onClick: onClose,
+                  children: /* @__PURE__ */ jsx(CloseGlyph, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "royui-upload__modal-body", children: renderPreview ? renderPreview(file) : /* @__PURE__ */ jsx(DefaultPreview, { file }) })
+          ]
+        }
+      )
+    }
+  );
+}
+function FileRow({
+  file,
+  word,
+  selectable,
+  selecting,
+  selected,
+  previewable,
+  onRemove,
+  onEnterSelect,
+  onToggleSelect,
+  onPreview
+}) {
+  const meta = extMeta(file.name);
+  const pct = file.progress != null ? Math.max(0, Math.min(100, Math.round(file.progress))) : file.size > 0 ? Math.max(0, Math.min(100, Math.round((file.uploaded ?? 0) / file.size * 100))) : 0;
+  const isUploading = file.status === "uploading";
+  const isError = file.status === "error";
+  const pressTimer = useRef(void 0);
+  const suppressClick = useRef(false);
+  const clearPress = () => {
+    if (pressTimer.current) {
+      clearTimeout(pressTimer.current);
+      pressTimer.current = void 0;
+    }
+  };
+  const onPointerDown = (e) => {
+    if (!selectable || selecting || e.pointerType === "mouse") return;
+    clearPress();
+    pressTimer.current = setTimeout(() => {
+      suppressClick.current = true;
+      onEnterSelect(file.id);
+    }, 450);
+  };
+  const onRowClick = () => {
+    if (suppressClick.current) {
+      suppressClick.current = false;
+      return;
+    }
+    if (selecting) onToggleSelect(file.id);
+  };
+  const nameClickable = previewable && !selecting;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "royui-upload__row",
+        selecting && "is-selecting",
+        selected && "is-selected"
+      ),
+      "data-status": file.status,
+      "data-selected": selected || void 0,
+      onPointerDown,
+      onPointerUp: clearPress,
+      onPointerLeave: clearPress,
+      onPointerMove: clearPress,
+      onContextMenu: (e) => {
+        if (selectable) e.preventDefault();
+      },
+      onClick: onRowClick,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "royui-upload__badge",
+            style: { ["--royui-upload-badge"]: file.icon ? "transparent" : meta.color },
+            "aria-hidden": "true",
+            children: file.icon ?? /* @__PURE__ */ jsx("span", { className: "royui-upload__badge-label", children: meta.label })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "royui-upload__row-main", children: [
+          nameClickable ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "royui-upload__name royui-upload__name--button",
+              title: `Preview ${file.name}`,
+              onClick: (e) => {
+                e.stopPropagation();
+                onPreview(file);
+              },
+              children: file.name
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "royui-upload__name", title: file.name, children: file.name }),
+          /* @__PURE__ */ jsxs("div", { className: "royui-upload__meta", children: [
+            file.status === "complete" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { children: formatBytes(file.size) }),
+              /* @__PURE__ */ jsx("span", { className: "royui-upload__meta-sep", children: "/" }),
+              /* @__PURE__ */ jsxs("span", { className: "royui-upload__complete", children: [
+                /* @__PURE__ */ jsx(CheckGlyph, {}),
+                "Complete"
+              ] })
+            ] }),
+            isUploading && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx(TextMorph, { value: formatBytes(file.uploaded ?? 0) }),
+                " of",
+                " ",
+                formatBytes(file.size)
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "royui-upload__meta-sep", children: "/" }),
+              /* @__PURE__ */ jsx(
+                TextMorph,
+                {
+                  className: "royui-upload__status",
+                  value: word,
+                  renderText: (t) => /* @__PURE__ */ jsx("span", { className: "royui-upload__shimmer", children: t })
+                }
+              )
+            ] }),
+            isError && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { children: formatBytes(file.size) }),
+              /* @__PURE__ */ jsx("span", { className: "royui-upload__meta-sep", children: "/" }),
+              /* @__PURE__ */ jsx("span", { className: "royui-upload__error", children: "Failed" })
+            ] })
+          ] }),
+          isUploading && /* @__PURE__ */ jsxs("div", { className: "royui-upload__progress", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "royui-upload__bar",
+                role: "progressbar",
+                "aria-valuenow": pct,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                children: /* @__PURE__ */ jsx("div", { className: "royui-upload__bar-fill", style: { width: `${pct}%` } })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "royui-upload__pct", children: [
+              pct,
+              "%"
+            ] })
+          ] })
+        ] }),
+        selecting ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("royui-upload__check", selected && "is-checked"),
+            "aria-hidden": "true",
+            children: selected && /* @__PURE__ */ jsx(CheckSmall, {})
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "royui-upload__row-action",
+            "aria-label": selectable ? `Select files to delete, starting with ${file.name}` : isUploading ? `Cancel ${file.name}` : `Remove ${file.name}`,
+            onClick: (e) => {
+              e.stopPropagation();
+              if (selectable) onEnterSelect(file.id);
+              else onRemove?.(file.id);
+            },
+            children: isUploading ? /* @__PURE__ */ jsx(CloseGlyph, {}) : /* @__PURE__ */ jsx(TrashGlyph, {})
+          }
+        )
+      ]
+    }
+  );
+}
+var UploadFiles = forwardRef(
+  function UploadFiles2({
+    files,
+    title = "Upload files",
+    maxSizeLabel = "MAX FILE SIZE: 20 MB",
+    accept,
+    multiple = true,
+    theme = "dark",
+    statusWords = DEFAULT_STATUS_WORDS,
+    actionLabel,
+    selectable = false,
+    previewable = true,
+    renderPreview,
+    onFilesSelected,
+    onRemove,
+    onRemoveSelected,
+    onRemoveAll,
+    onClose,
+    onAction,
+    onPreview,
+    className = "",
+    ...rest
+  }, ref) {
+    const inputRef = useRef(null);
+    const [isDragging, setDragging] = useState(false);
+    const [tick, setTick] = useState(0);
+    const [selecting, setSelecting] = useState(false);
+    const [selected, setSelected] = useState(() => /* @__PURE__ */ new Set());
+    const [preview, setPreview] = useState(null);
+    const anyUploading = files.some((f) => f.status === "uploading");
+    const words = useMemo(
+      () => statusWords.length ? shuffle(statusWords) : DEFAULT_STATUS_WORDS,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      []
+    );
+    useEffect(() => {
+      if (!anyUploading) return;
+      const id = setInterval(() => setTick((t) => t + 1), 1900);
+      return () => clearInterval(id);
+    }, [anyUploading]);
+    useEffect(() => {
+      if (files.length === 0 && selecting) {
+        setSelecting(false);
+        setSelected(/* @__PURE__ */ new Set());
+      }
+    }, [files.length, selecting]);
+    const emit = (list) => {
+      if (!list || list.length === 0) return;
+      onFilesSelected?.(Array.from(list));
+    };
+    const enterSelect = (id) => {
+      setSelecting(true);
+      setSelected(/* @__PURE__ */ new Set([id]));
+    };
+    const toggleSelect = (id) => {
+      setSelected((prev) => {
+        const next = new Set(prev);
+        next.has(id) ? next.delete(id) : next.add(id);
+        return next;
+      });
+    };
+    const cancelSelect = () => {
+      setSelecting(false);
+      setSelected(/* @__PURE__ */ new Set());
+    };
+    const confirmDelete = () => {
+      const ids = Array.from(selected);
+      if (ids.length === 0) return;
+      if (onRemoveSelected) onRemoveSelected(ids);
+      else ids.forEach((id) => onRemove?.(id));
+      cancelSelect();
+    };
+    const openPreview = (file) => {
+      setPreview(file);
+      onPreview?.(file);
+    };
+    const headingText = selecting ? `${selected.size} selected` : typeof title === "string" ? title : null;
+    const classes = cn(
+      "royui-upload",
+      theme === "dark" && "royui-upload--dark",
+      theme === "light" && "royui-upload--light",
+      theme === "auto" && "royui-upload--auto",
+      selecting && "royui-upload--selecting",
+      className
+    );
+    return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...rest, children: [
+      /* @__PURE__ */ jsxs("header", { className: "royui-upload__header", children: [
+        /* @__PURE__ */ jsx("h2", { className: "royui-upload__title", children: headingText !== null ? /* @__PURE__ */ jsx(TextMorph, { value: headingText }) : title }),
+        selecting ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "royui-upload__close",
+            "aria-label": "Exit selection",
+            onClick: cancelSelect,
+            children: /* @__PURE__ */ jsx(CloseGlyph, {})
+          }
+        ) : onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "royui-upload__close",
+            "aria-label": "Close",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsx(CloseGlyph, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("royui-upload__dropzone", isDragging && "is-dragging"),
+          onDragOver: (e) => {
+            e.preventDefault();
+            setDragging(true);
+          },
+          onDragLeave: (e) => {
+            e.preventDefault();
+            setDragging(false);
+          },
+          onDrop: (e) => {
+            e.preventDefault();
+            setDragging(false);
+            emit(e.dataTransfer.files);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "royui-upload__drop-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(UploadGlyph, {}) }),
+            /* @__PURE__ */ jsxs("p", { className: "royui-upload__drop-text", children: [
+              "Drag and drop or",
+              " ",
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "royui-upload__browse",
+                  onClick: () => inputRef.current?.click(),
+                  children: "browse files"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "royui-upload__drop-hint", children: maxSizeLabel }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "file",
+                accept,
+                multiple,
+                className: "royui-upload__input",
+                onChange: (e) => {
+                  emit(e.target.files);
+                  e.target.value = "";
+                }
+              }
+            )
+          ]
+        }
+      ),
+      files.length > 0 && /* @__PURE__ */ jsx("div", { className: "royui-upload__list", children: files.map((file, i) => /* @__PURE__ */ jsx(
+        FileRow,
+        {
+          file,
+          word: words[(tick + i) % words.length],
+          selectable,
+          selecting,
+          selected: selected.has(file.id),
+          previewable,
+          onRemove,
+          onEnterSelect: enterSelect,
+          onToggleSelect: toggleSelect,
+          onPreview: openPreview
+        },
+        file.id
+      )) }),
+      files.length > 0 && /* @__PURE__ */ jsx("footer", { className: "royui-upload__footer", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "royui-upload__footer-inner",
+          children: selecting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "royui-upload__textbtn",
+                onClick: cancelSelect,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "royui-upload__footer-spacer" }),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "sm",
+                className: "royui-upload__action royui-upload__action--danger",
+                color: "#e5484d",
+                disabled: selected.size === 0,
+                onClick: confirmDelete,
+                children: [
+                  "Delete",
+                  selected.size > 0 ? ` (${selected.size})` : ""
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "royui-upload__remove-all",
+                "aria-label": "Remove all files",
+                onClick: onRemoveAll,
+                children: [
+                  /* @__PURE__ */ jsx(TrashGlyph, {}),
+                  "All"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "royui-upload__footer-spacer" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "secondary",
+                className: "royui-upload__action",
+                disabled: anyUploading,
+                onClick: onAction,
+                children: actionLabel ?? (anyUploading ? /* @__PURE__ */ jsx(TextMorph, { value: "Uploading\u2026" }) : "Done")
+              }
+            )
+          ] })
+        },
+        selecting ? "select" : "browse"
+      ) }),
+      preview && /* @__PURE__ */ jsx(
+        PreviewModal,
+        {
+          file: preview,
+          renderPreview,
+          onClose: () => setPreview(null)
+        }
+      )
+    ] });
+  }
+);
+UploadFiles.displayName = "UploadFiles";
+
+export { UploadFiles };
+//# sourceMappingURL=chunk-E2VDIA6U.js.map
+//# sourceMappingURL=chunk-E2VDIA6U.js.map