@oprt/react 0.0.0-stage → 0.2.0

package/dist/Tooltip/Tooltip.js

@@ -0,0 +1,123 @@
+"use client";
+
+// src/Tooltip/Tooltip.tsx
+import {
+  TooltipTrigger,
+  Tooltip as AriaTooltip,
+  OverlayArrow,
+  Focusable
+} from "react-aria-components";
+import {
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import clsx from "clsx";
+import { TooltipManifest } from "./Tooltip.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { definedOnly } from "../_internal/aria.js";
+import { isSingleElement, SCREEN_MARGIN, toPlacement, TOOLTIP_WIDTH } from "../_internal/overlay.js";
+import { FocusableWhenUnavailableProvider } from "../_internal/unavailable.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PLAIN_TRIGGER = "inline-flex min-h-3u items-center border-0 bg-transparent p-0 [color:inherit] [font:inherit] [letter-spacing:inherit] underline decoration-dotted underline-offset-2 cursor-help outline-hidden focus-visible:shadow-oprt-focus";
+var CLOSE_DELAY = 150;
+var Tooltip = forwardRef(
+  ({
+    content,
+    children,
+    side = "top",
+    align = "center",
+    delayDuration = 200,
+    open,
+    defaultOpen,
+    onOpenChange,
+    className,
+    ...contentProps
+  }, ref) => {
+    const [localOpen, setLocalOpen] = useState(defaultOpen ?? false);
+    const isOpen = open ?? localOpen;
+    const tapped = useRef(null);
+    const [tapOpen, setTapOpen] = useState(false);
+    const setOpen = useCallback(
+      (next) => {
+        if (!next) setTapOpen(false);
+        if (open === void 0) setLocalOpen(next);
+        onOpenChange?.(next);
+      },
+      [open, onOpenChange]
+    );
+    useEffect(() => {
+      if (!tapOpen || !isOpen) return;
+      const dismiss = (event) => {
+        if (!tapped.current?.contains(event.target)) setOpen(false);
+      };
+      document.addEventListener("pointerdown", dismiss, true);
+      return () => document.removeEventListener("pointerdown", dismiss, true);
+    }, [tapOpen, isOpen, setOpen]);
+    if (process.env.NODE_ENV !== "production") {
+      devValidate("Tooltip", TooltipManifest.Tooltip.props, { ...contentProps, side, align });
+    }
+    if (children === null || children === void 0 || typeof children === "boolean") return null;
+    const element = isSingleElement(children) ? children : null;
+    const unavailable = element !== null && (element.props.disabled === true || element.props.isDisabled === true);
+    const trigger = !element ? /* @__PURE__ */ jsx("button", { type: "button", className: PLAIN_TRIGGER, children }) : unavailable ? cloneElement(element, {
+      onPointerUp: (event) => {
+        element.props.onPointerUp?.(event);
+        if (event.pointerType === "mouse") return;
+        tapped.current = event.currentTarget;
+        setTapOpen(true);
+        setOpen(true);
+      }
+    }) : element;
+    const focusable = /* @__PURE__ */ jsx(Focusable, { children: trigger });
+    return /* @__PURE__ */ jsxs(
+      TooltipTrigger,
+      {
+        isOpen,
+        onOpenChange: setOpen,
+        delay: delayDuration,
+        closeDelay: CLOSE_DELAY,
+        shouldCloseOnPress: !unavailable,
+        children: [
+          unavailable ? /* @__PURE__ */ jsx(FocusableWhenUnavailableProvider, { value: true, children: focusable }) : focusable,
+          /* @__PURE__ */ jsxs(
+            AriaTooltip,
+            {
+              ref,
+              placement: toPlacement(side, align),
+              offset: 4,
+              containerPadding: SCREEN_MARGIN,
+              className: clsx(
+                "z-50 bg-oprt-surface-2 border border-oprt-border px-2u py-1u text-oprt-base normal-case text-oprt-text font-sans oprt-wrap-anywhere",
+                TOOLTIP_WIDTH,
+                className
+              ),
+              ...definedOnly(contentProps),
+              children: [
+                content,
+                /* @__PURE__ */ jsx(OverlayArrow, { className: "group", children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    width: 10,
+                    height: 5,
+                    viewBox: "0 0 10 5",
+                    "aria-hidden": "true",
+                    className: "fill-oprt-border group-data-[placement=bottom]:rotate-180 group-data-[placement=left]:-rotate-90 group-data-[placement=right]:rotate-90",
+                    children: /* @__PURE__ */ jsx("path", { d: "M0 0 L5 5 L10 0 Z" })
+                  }
+                ) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Tooltip.displayName = "Tooltip";
+export {
+  Tooltip
+};

package/dist/Tooltip/Tooltip.manifest.js

@@ -0,0 +1,27 @@
+// src/Tooltip/Tooltip.manifest.ts
+var TooltipManifest = {
+  Tooltip: {
+    description: "Supplementary text on hover or keyboard focus of a trigger, wrapping at about 20rem. The pointer can move onto the tooltip without closing it; it closes 150 ms after the pointer has left both. A disabled Button trigger stays focusable and announced unavailable, so focus or a tap shows the explanation. Built on React Aria Components (TooltipTrigger + Tooltip), portal'd, with a bordered surface.",
+    props: {
+      side: { type: "enum", values: ["top", "right", "bottom", "left"], default: "top" },
+      align: { type: "enum", values: ["start", "center", "end"], default: "center" },
+      delayDuration: { type: "number", default: 200 },
+      open: { type: "boolean" },
+      defaultOpen: { type: "boolean" },
+      onOpenChange: { type: "function" }
+    },
+    slots: {
+      content: { type: "text | node", required: true },
+      children: {
+        type: "focusable trigger element | text (text renders a text button)",
+        required: true
+      }
+    },
+    composable_with: ["Button", "Badge", "Toolbar"],
+    never_inside: ["Tooltip"],
+    example: '<Tooltip content="GRID 38S MC"><Button>COORD</Button></Tooltip>'
+  }
+};
+export {
+  TooltipManifest
+};

package/dist/Tooltip/index.js

@@ -0,0 +1,7 @@
+// src/Tooltip/index.ts
+import { Tooltip } from "./Tooltip.js";
+import { TooltipManifest } from "./Tooltip.manifest.js";
+export {
+  Tooltip,
+  TooltipManifest
+};

package/dist/TreeView/TreeView.js

@@ -0,0 +1,129 @@
+"use client";
+
+// src/TreeView/TreeView.tsx
+import { forwardRef, useEffect, useRef, useState } from "react";
+import {
+  Tree,
+  TreeItem,
+  TreeItemContent,
+  Button as AriaButton
+} from "react-aria-components";
+import { ChevronDown, ChevronRight } from "@oprt/icons";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var forcedFocus = "forced-colors:outline-0 forced-colors:data-[focus-visible]:outline-solid forced-colors:data-[focus-visible]:outline-2 forced-colors:data-[focus-visible]:-outline-offset-2 forced-colors:data-[focus-visible]:outline-[CanvasText]";
+var treeStyles = cva(
+  `grid min-w-0 grid-cols-[minmax(min-content,1fr)] overflow-x-auto p-px border border-transparent font-sans text-oprt-base font-medium normal-case text-oprt-text outline-hidden data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus ${forcedFocus}`
+);
+var itemStyles = cva(
+  `min-h-3u border border-transparent outline-hidden data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus data-[selected]:bg-oprt-surface-selected data-[selected]:border-oprt-accent forced-colors:data-[selected]:border-[Highlight] data-[disabled]:opacity-50 ${forcedFocus}`
+);
+function aimAtLabel(tree, row) {
+  const label = row.querySelector("[data-oprt-tree-label]");
+  if (!label) return;
+  const start = (label.previousElementSibling ?? label).getBoundingClientRect();
+  const text = label.getBoundingClientRect();
+  const box = row.getBoundingClientRect();
+  let left = Math.min(start.left, text.left);
+  let right = Math.max(start.right, text.right);
+  const room = tree.clientWidth;
+  if (room > 0 && right - left > room) {
+    if (getComputedStyle(row).direction === "rtl") left = right - room;
+    else right = left + room;
+  }
+  row.style.scrollMarginLeft = `${Math.min(0, box.left - left)}px`;
+  row.style.scrollMarginRight = `${Math.min(0, right - box.right)}px`;
+}
+var TreeView = forwardRef(
+  ({
+    items,
+    label = "Navigation",
+    selectedId,
+    onSelectionChange,
+    expandedIds,
+    defaultExpandedIds = [],
+    onExpandedChange,
+    disabled = false,
+    emptyMessage = "No items.",
+    className,
+    ...attributes
+  }, ref) => {
+    const [localSelection, setLocalSelection] = useState(null);
+    const [localExpanded, setLocalExpanded] = useState(defaultExpandedIds);
+    const selection = selectedId === void 0 ? localSelection : selectedId;
+    const treeRef = useRef(null);
+    const setRef = useMergedRefs(treeRef, ref);
+    useEffect(() => {
+      const tree = treeRef.current;
+      if (!tree) return;
+      const aim = (event) => {
+        const row = event.target?.closest?.('[role="row"]');
+        if (row instanceof HTMLElement && tree.contains(row)) aimAtLabel(tree, row);
+      };
+      tree.addEventListener("focusin", aim);
+      return () => tree.removeEventListener("focusin", aim);
+    }, []);
+    const renderItems = (nodes, depth = 0) => nodes.map((item) => /* @__PURE__ */ jsxs(
+      TreeItem,
+      {
+        id: item.id,
+        textValue: item.label,
+        isDisabled: disabled || item.disabled === true,
+        className: itemStyles(),
+        children: [
+          /* @__PURE__ */ jsx(TreeItemContent, { children: ({ isExpanded, hasChildItems }) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-3u items-center gap-1u p-1u", children: [
+            Array.from({ length: depth }, (_, index) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "w-1u shrink-0" }, index)),
+            hasChildItems ? /* @__PURE__ */ jsx(
+              AriaButton,
+              {
+                slot: "chevron",
+                "aria-label": isExpanded ? "Collapse" : "Expand",
+                isDisabled: disabled || item.disabled === true,
+                className: `flex h-oprt-sm w-3u shrink-0 items-center justify-center border border-transparent text-oprt-base font-medium outline-hidden data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus ${forcedFocus}`,
+                children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 16, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { size: 16, "aria-hidden": "true" })
+              }
+            ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "w-3u shrink-0" }),
+            /* @__PURE__ */ jsx("span", { "data-oprt-tree-label": "", className: "min-w-8u oprt-wrap-anywhere", children: item.label })
+          ] }) }),
+          item.children && renderItems(item.children, depth + 1)
+        ]
+      },
+      item.id
+    ));
+    return /* @__PURE__ */ jsx(
+      Tree,
+      {
+        ...attributes,
+        ref: setRef,
+        "aria-label": label,
+        selectionMode: "single",
+        disallowEmptySelection: true,
+        selectionBehavior: "replace",
+        selectedKeys: selection ? [selection] : [],
+        expandedKeys: expandedIds ?? localExpanded,
+        className: clsx(treeStyles(), className),
+        onSelectionChange: (keys) => {
+          if (disabled || keys === "all") return;
+          const next = [...keys][0];
+          const id = next === void 0 ? null : String(next);
+          if (selectedId === void 0) setLocalSelection(id);
+          onSelectionChange?.(id);
+        },
+        onExpandedChange: (keys) => {
+          if (disabled) return;
+          const next = [...keys].map(String);
+          if (expandedIds === void 0) setLocalExpanded(next);
+          onExpandedChange?.(next);
+        },
+        renderEmptyState: () => /* @__PURE__ */ jsx("p", { className: "m-0 p-2u text-oprt-text-dim", children: emptyMessage }),
+        children: renderItems(items)
+      }
+    );
+  }
+);
+TreeView.displayName = "TreeView";
+export {
+  TreeView
+};

package/dist/TreeView/TreeView.manifest.js

@@ -0,0 +1,56 @@
+// src/TreeView/TreeView.manifest.ts
+var TreeViewManifest = {
+  TreeView: {
+    description: "React Aria hierarchical treegrid with stable string IDs, single selection, expansion, arrow-key navigation, and typeahead. Labels wrap and keep a readable width; a hierarchy deeper than the tree is wide scrolls sideways inside the tree, and keyboard focus brings the focused row's label into view. Accepts id, style, aria-labelledby, aria-describedby and data attributes.",
+    props: {
+      items: {
+        type: "array",
+        required: true,
+        items: {
+          id: "unique string",
+          label: "string",
+          children: "optional recursive TreeViewItem[]",
+          disabled: "optional boolean"
+        }
+      },
+      label: {
+        type: "string",
+        default: "Navigation"
+      },
+      selectedId: {
+        type: "string",
+        description: "Controlled selected string ID; null clears the selection."
+      },
+      onSelectionChange: {
+        type: "function",
+        description: "(id: string | null) => void. Navigation may select as focus moves."
+      },
+      expandedIds: {
+        type: "array",
+        description: "Controlled expanded string IDs."
+      },
+      defaultExpandedIds: {
+        type: "array",
+        description: "Initial expanded IDs for local state."
+      },
+      onExpandedChange: {
+        type: "function",
+        description: "(ids: string[]) => void."
+      },
+      disabled: {
+        type: "boolean",
+        default: false
+      },
+      emptyMessage: {
+        type: "string",
+        default: "No items."
+      }
+    },
+    composable_with: ["AppShell", "Inspector"],
+    never_inside: ["Button"],
+    example: '<TreeView label="Assets" items={groups} selectedId={selectedId} onSelectionChange={setSelectedId} />'
+  }
+};
+export {
+  TreeViewManifest
+};

package/dist/TreeView/index.js

@@ -0,0 +1,7 @@
+// src/TreeView/index.ts
+import { TreeView } from "./TreeView.js";
+import { TreeViewManifest } from "./TreeView.manifest.js";
+export {
+  TreeView,
+  TreeViewManifest
+};

package/dist/UploadQueue/UploadQueue.js

@@ -0,0 +1,296 @@
+"use client";
+
+// src/UploadQueue/UploadQueue.tsx
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { Badge } from "../Badge/Badge.js";
+import { Button } from "../Button/Button.js";
+import { Progress } from "../Progress/Progress.js";
+import { ByteCountLabel, NUMBER_UNIT_SPACE } from "../_internal/bytes.js";
+import { joinIds, usePartIds } from "../_internal/fieldIds.js";
+import { useRestoreFocusOnRemoval } from "../_internal/useRestoreFocusOnRemoval.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var queueStyles = cva(
+  "flex min-w-0 flex-col gap-2u font-sans text-oprt-base normal-case text-oprt-text outline-hidden focus-visible:shadow-oprt-focus"
+);
+var labels = {
+  ready: "Ready locally",
+  queued: "Queued",
+  uploading: "Uploading",
+  "cancel-requested": "Cancel requested",
+  uploaded: "Uploaded",
+  failed: "Failed",
+  canceled: "Canceled"
+};
+var variants = {
+  ready: "neutral",
+  queued: "neutral",
+  uploading: "info",
+  "cancel-requested": "warning",
+  uploaded: "success",
+  failed: "error",
+  canceled: "neutral"
+};
+var KNOWN_STATES = Object.keys(labels);
+var isKnownState = (state) => typeof state === "string" && Object.prototype.hasOwnProperty.call(labels, state);
+var UNKNOWN_STATE = "Unknown state";
+var stateLabel = (state) => isKnownState(state) ? labels[state] : UNKNOWN_STATE;
+var count = (value) => Number.isSafeInteger(value) && value >= 0;
+var reportedStates = /* @__PURE__ */ new Set();
+function reportUnknownState(state) {
+  const received = String(state);
+  if (process.env.NODE_ENV === "production" || reportedStates.has(received)) return;
+  reportedStates.add(received);
+  console.error(
+    JSON.stringify(
+      {
+        component: "UploadQueue",
+        error: "INVALID_PROP_VALUE",
+        prop: "items[].state",
+        received,
+        valid_values: KNOWN_STATES,
+        suggestion: `Valid values for \`items[].state\`: ${KNOWN_STATES.join(", ")}. The row shows "${UNKNOWN_STATE}" until the state is one of them.`
+      },
+      null,
+      2
+    )
+  );
+}
+function hasInvalidIdentity(items) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    if (!item.id.trim() || seen.has(item.id)) return true;
+    seen.add(item.id);
+  }
+  return false;
+}
+var rowsOf = (items) => items.map((item) => [item.id, item.name, String(item.state), item.message ?? ""]);
+var NAMED_CHANGES = 3;
+function describeChanges(before, after) {
+  const previous = new Map(before.map((row) => [row[0], row]));
+  const current = new Set(after.map((row) => row[0]));
+  const changes = [];
+  for (const [id, name, state, message] of after) {
+    const was = previous.get(id);
+    if (was && was[1] === name && was[2] === state && was[3] === message) continue;
+    const label = stateLabel(state);
+    changes.push({ label, sentence: `${name}: ${label}.${message ? ` ${message}` : ""}` });
+  }
+  for (const [id, name] of before)
+    if (!current.has(id)) changes.push({ label: "Removed", sentence: `${name}: Removed.` });
+  const parts = changes.length <= NAMED_CHANGES ? changes.map((change) => change.sentence) : Array.from(
+    changes.reduce(
+      (counts, { label }) => counts.set(label, (counts.get(label) ?? 0) + 1),
+      /* @__PURE__ */ new Map()
+    ),
+    ([label, total]) => `${label}: ${total} ${total === 1 ? "file" : "files"}.`
+  );
+  if (after.length === 0 && before.length > 0) parts.push("No files selected.");
+  return parts.join(" ");
+}
+var UploadQueue = forwardRef(
+  ({
+    label,
+    items,
+    onCancel,
+    onRetry,
+    onRemove,
+    disabled = false,
+    className,
+    onFocusCapture,
+    onBlurCapture,
+    "aria-labelledby": labelledBy,
+    ...props
+  }, ref) => {
+    const root = useRef(null);
+    const ids = usePartIds(["label"], {
+      id: props.id,
+      readRendered: () => root.current?.getAttribute("data-oprt-ids")
+    });
+    const rows = useRef(/* @__PURE__ */ new Map());
+    useImperativeHandle(ref, () => root.current, []);
+    const invalidIdentity = hasInvalidIdentity(items);
+    const restoreFocus = useRestoreFocusOnRemoval(root, {
+      track: (element) => {
+        const index = items.findIndex((item) => rows.current.get(item.id)?.contains(element));
+        return index >= 0 ? { index } : null;
+      },
+      // The next row's first enabled action, else the row itself, else the queue.
+      findTarget: ({ index }) => {
+        const next = items[Math.min(index, items.length - 1)];
+        const row = next ? rows.current.get(next.id) : null;
+        return row?.querySelector("button:not(:disabled)") ?? row ?? root.current;
+      }
+    });
+    const signature = JSON.stringify(rowsOf(items));
+    const announced = useRef(null);
+    const [announcement, setAnnouncement] = useState("");
+    const lastAnnouncement = useRef("");
+    const repeatFrame = useRef(null);
+    useEffect(
+      () => () => {
+        if (repeatFrame.current !== null) cancelAnimationFrame(repeatFrame.current);
+      },
+      []
+    );
+    useEffect(() => {
+      const after = JSON.parse(signature);
+      const before = announced.current;
+      announced.current = after;
+      if (before === null) return;
+      const text = describeChanges(before, after);
+      if (!text) return;
+      if (repeatFrame.current !== null) {
+        cancelAnimationFrame(repeatFrame.current);
+        repeatFrame.current = null;
+      }
+      if (text !== lastAnnouncement.current) {
+        lastAnnouncement.current = text;
+        setAnnouncement(text);
+        return;
+      }
+      setAnnouncement("");
+      repeatFrame.current = requestAnimationFrame(() => {
+        repeatFrame.current = null;
+        setAnnouncement(text);
+      });
+    }, [signature]);
+    const unknownStates = items.filter((item) => !isKnownState(item.state)).map((item) => item.state);
+    const unknownKey = JSON.stringify(unknownStates);
+    useEffect(() => {
+      if (process.env.NODE_ENV === "production") return;
+      for (const state of JSON.parse(unknownKey)) reportUnknownState(state);
+    }, [unknownKey]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref: root,
+        role: "region",
+        tabIndex: -1,
+        "data-oprt-ids": ids.base,
+        "aria-labelledby": joinIds(ids.label, labelledBy),
+        className: clsx(queueStyles(), className),
+        onFocusCapture: (event) => {
+          onFocusCapture?.(event);
+          restoreFocus.onFocusCapture(event);
+        },
+        onBlurCapture: (event) => {
+          onBlurCapture?.(event);
+          restoreFocus.onBlurCapture(event);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              id: ids.label,
+              className: "m-0 oprt-wrap-anywhere font-medium uppercase tracking-oprt-sm",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { role: "status", "aria-atomic": "true", className: "sr-only", children: announcement }),
+          invalidIdentity && /* @__PURE__ */ jsx("p", { role: "alert", className: "m-0 text-oprt-error", children: "Queue item IDs must be unique and nonempty. Actions are unavailable." }),
+          !items.length ? /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim", children: "No files selected." }) : /* @__PURE__ */ jsx("ul", { className: "m-0 flex min-w-0 list-none flex-col gap-2u p-0", children: items.map((item, index) => {
+            const transferring = item.state === "uploading" || item.state === "cancel-requested";
+            const invalidProgress = item.loadedBytes !== void 0 && !count(item.loadedBytes) || item.totalBytes !== void 0 && !count(item.totalBytes) || item.loadedBytes !== void 0 && item.totalBytes !== void 0 && item.loadedBytes > item.totalBytes;
+            const validLoaded = item.loadedBytes !== void 0 && count(item.loadedBytes);
+            const blocked = disabled || invalidIdentity;
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                ref: (node) => {
+                  if (node) rows.current.set(item.id, node);
+                  else rows.current.delete(item.id);
+                },
+                tabIndex: -1,
+                className: "flex min-w-0 flex-col gap-1u border border-oprt-border p-2u outline-hidden focus-visible:shadow-oprt-focus",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-start justify-between gap-1u", children: [
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 oprt-wrap-anywhere", children: item.name }),
+                    /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        appearance: "text",
+                        variant: isKnownState(item.state) ? variants[item.state] : "neutral",
+                        children: stateLabel(item.state)
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim oprt-wrap-anywhere", children: /* @__PURE__ */ jsx(ByteCountLabel, { value: item.sizeBytes }) }),
+                  item.message && /* @__PURE__ */ jsx("p", { className: "m-0 oprt-wrap-anywhere", children: item.message }),
+                  transferring && (invalidProgress ? /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-error", children: "Invalid progress counts." }) : item.totalBytes === 0 ? /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim", children: `0${NUMBER_UNIT_SPACE}bytes total; no percentage available.` }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      Progress,
+                      {
+                        "aria-label": `Upload progress for ${item.name}`,
+                        ...item.totalBytes !== void 0 && validLoaded ? { value: item.loadedBytes, max: item.totalBytes } : {}
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("p", { className: "m-0 font-mono tabular-nums text-oprt-text-dim oprt-wrap-anywhere", children: [
+                      validLoaded ? `${item.loadedBytes}${NUMBER_UNIT_SPACE}bytes transferred` : "Transferred byte count unavailable",
+                      item.totalBytes !== void 0 ? ` of ${item.totalBytes}${NUMBER_UNIT_SPACE}bytes` : "; total unknown",
+                      "."
+                    ] })
+                  ] })),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1u", children: [
+                    item.cancelable && onCancel && (item.state === "queued" || item.state === "uploading") && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "tertiary",
+                        disabled: blocked,
+                        "aria-label": `Cancel ${item.name}`,
+                        onClick: () => {
+                          if (!blocked) onCancel(item.id);
+                        },
+                        children: "Cancel"
+                      }
+                    ),
+                    item.retryable && onRetry && item.state === "failed" && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "secondary",
+                        disabled: blocked,
+                        "aria-label": `Retry ${item.name}`,
+                        onClick: () => {
+                          if (!blocked) onRetry(item.id);
+                        },
+                        children: "Retry"
+                      }
+                    ),
+                    item.removable && onRemove && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "tertiary",
+                        disabled: blocked,
+                        "aria-label": `Remove ${item.name}`,
+                        onClick: () => {
+                          if (!blocked) onRemove(item.id);
+                        },
+                        children: "Remove"
+                      }
+                    )
+                  ] })
+                ]
+              },
+              invalidIdentity ? index : item.id
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+UploadQueue.displayName = "UploadQueue";
+export {
+  UploadQueue
+};