@jirawatpyk/aura-react 5.12.0 → 5.14.0

package/dist/esm/AppShell.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { Drawer } from "./Dialog.js";
 import { IconButton } from "./IconButton.js";
-import { cx } from "./internal.js";
+import { cx, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { useBreakpoint } from "./responsive.js";
 import { IconMenu } from "./icons.js";
@@ -24,6 +24,27 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
     if (shared) navState[1](id);
     if (navEl && navEl.props.onChange) navEl.props.onChange(id);
   }
+  const rootRef = React.useRef(null);
+  const barRef = React.useRef(null);
+  const mergedRef = useMergedRef(ref, rootRef);
+  const hasBar = !!(props.header || props.nav);
+  useIsoLayoutEffect(
+    function() {
+      const root = rootRef.current, bar = barRef.current;
+      if (!root || !bar) return;
+      function sync() {
+        root.style.setProperty("--aura-shell-bar-height", bar.getBoundingClientRect().height + "px");
+      }
+      sync();
+      const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
+      if (ro) ro.observe(bar);
+      return function() {
+        if (ro) ro.disconnect();
+        root.style.removeProperty("--aura-shell-bar-height");
+      };
+    },
+    [hasBar]
+  );
   const deskNav = navEl && shared ? React.cloneElement(navEl, { value: navState[0], onChange: onNav }) : props.nav;
   const drawerNav = navEl ? React.cloneElement(navEl, {
     value: shared ? navState[0] : navEl.props.value,
@@ -35,32 +56,56 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
     collapsed: false,
     collapsible: false
   }) : props.nav;
-  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-shell", props.bottomNav && "aura-shell--bottomnav", props.className) }, props.nav ? /* @__PURE__ */ React.createElement("div", { className: "aura-shell__nav" }, deskNav) : null, props.nav ? /* @__PURE__ */ React.createElement(
-    Drawer,
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      open,
-      onClose: function() {
-        setOpen(false);
-      },
-      side: "left",
-      size: "nav",
-      "aria-label": props.navLabel || t.navigation,
-      dismissible: true
+      ref: mergedRef,
+      className: cx(
+        "aura-shell",
+        props.bottomNav && "aura-shell--bottomnav",
+        /* 5.14: no top bar at all, or one that only holds the menu button (gone from lg up): the bar-height token is 0. */
+        !props.header && !props.nav && "aura-shell--no-bar",
+        !props.header && props.nav && "aura-shell--menu-bar",
+        props.className
+      )
     },
-    drawerNav
-  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React.createElement("header", { className: cx("aura-shell__bar", !props.header && "aura-shell__bar--menu-only") }, props.nav ? /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      className: "aura-shell__menu",
-      icon: /* @__PURE__ */ React.createElement(IconMenu, null),
-      label: props.menuLabel || t.openNav,
-      size: "md",
-      onClick: function() {
-        setOpen(true);
+    props.nav ? /* @__PURE__ */ React.createElement("div", { className: "aura-shell__nav" }, deskNav) : null,
+    props.nav ? /* @__PURE__ */ React.createElement(
+      Drawer,
+      {
+        open,
+        onClose: function() {
+          setOpen(false);
+        },
+        side: "left",
+        size: "nav",
+        "aria-label": props.navLabel || t.navigation,
+        dismissible: true
+      },
+      drawerNav
+    ) : null,
+    /* @__PURE__ */ React.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React.createElement("header", { ref: barRef, className: cx("aura-shell__bar", !props.header && "aura-shell__bar--menu-only") }, props.nav ? /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        className: "aura-shell__menu",
+        icon: /* @__PURE__ */ React.createElement(IconMenu, null),
+        label: props.menuLabel || t.openNav,
+        size: "md",
+        onClick: function() {
+          setOpen(true);
+        },
+        "aria-expanded": open
+      }
+    ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement(
+      "main",
+      {
+        className: cx("aura-shell__content", props.contentPadding === false && "is-flush"),
+        id: props.mainId || "main",
+        tabIndex: -1
       },
-      "aria-expanded": open
-    }
-  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement("main", { className: "aura-shell__content", id: props.mainId || "main", tabIndex: -1 }, props.children), props.bottomNav || null));
+      props.children
+    ), props.bottomNav || null)
+  );
 });
 export {
   AppShell

package/dist/esm/Avatar.js

@@ -1,39 +1,11 @@
 'use client';
 import * as React from "react";
-import { cx } from "./internal.js";
-const AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
-function initials(name) {
-  const parts = String(name || "?").trim().split(/\s+/);
-  return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
-}
+import { avatarElement } from "./display.js";
 const Avatar = React.forwardRef(function Avatar2(props, ref) {
-  const size = props.size || "md", errState = React.useState(null);
-  let hash = 0;
-  String(props.name || "").split("").forEach(function(ch) {
-    hash = hash * 31 + ch.charCodeAt(0) >>> 0;
+  const errState = React.useState(null);
+  return avatarElement(props, ref, errState[0], function() {
+    errState[1](props.src || null);
   });
-  const tone = AVATAR_TONES[hash % AVATAR_TONES.length];
-  return /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      ref,
-      className: cx("aura-avatar", "aura-avatar--" + size, "aura-avatar--" + tone, props.className),
-      role: "img",
-      "aria-label": props.name + (props.status ? ", " + props.status : "")
-    },
-    props.src && errState[0] !== props.src ? /* @__PURE__ */ React.createElement(
-      "img",
-      {
-        key: props.src,
-        src: props.src,
-        alt: "",
-        onError: function() {
-          errState[1](props.src || null);
-        }
-      }
-    ) : /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, initials(props.name)),
-    props.status === "online" ? /* @__PURE__ */ React.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
-  );
 });
 export {
   Avatar

package/dist/esm/Button.js

@@ -52,6 +52,8 @@ const Button = React.forwardRef(
     const props = all;
     const variant = props.variant || "primary";
     const loading = !!props.loading;
+    const ad = props["aria-disabled"];
+    const blocked = loading || ad === true || ad === "true";
     const rest = omit(props, [
       "variant",
       "className",
@@ -78,8 +80,8 @@ const Button = React.forwardRef(
           className: props.className
         }),
         "aria-busy": loading || void 0,
-        "aria-disabled": loading || void 0,
-        onClick: loading ? function(e) {
+        "aria-disabled": blocked || void 0,
+        onClick: blocked ? function(e) {
           e.preventDefault();
         } : props.onClick
       },

package/dist/esm/DataTable.js

@@ -156,6 +156,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     [measure, levelShape]
   );
   const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
+  const noCardSel = !!props.hideSelectionInCards && selectable;
   useIsoLayoutEffect(
     function() {
       if (measure && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
@@ -256,9 +257,38 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   const pillKey = (vis.filter(function(c, i) {
     return i > 0 && c.pill;
   })[0] || { key: "" }).key;
+  const ownTitle = vis.some(function(c) {
+    return c.card === "title";
+  }), ownPill = vis.some(function(c) {
+    return c.card === "pill";
+  });
+  let autoTitle = -1;
+  if (!ownTitle) {
+    for (let i = 0; i < vis.length; i++)
+      if (!vis[i].card && (i === 0 || !vis[i].actions)) {
+        autoTitle = i;
+        break;
+      }
+  }
   function cardPart(c, i) {
-    return i === 0 ? "title" : c.key === pillKey ? "pill" : c.actions ? "actions" : "field";
+    if (c.card) return c.card;
+    if (i === autoTitle) return "title";
+    if (c.key === pillKey && !ownPill) return "pill";
+    return c.actions ? "actions" : "field";
   }
+  const cardRank = {};
+  if (vis.some(function(c) {
+    return c.cardOrder != null;
+  }))
+    vis.map(function(c, i) {
+      return { c, i, o: c.cardOrder != null ? c.cardOrder : i };
+    }).filter(function(x) {
+      return cardPart(x.c, x.i) === "field";
+    }).sort(function(a, b) {
+      return a.o - b.o || a.i - b.i;
+    }).forEach(function(x, n) {
+      cardRank[x.c.key] = n;
+    });
   function cardAttrs(c, i) {
     const part = cardPart(c, i), lv = hideLevel(c);
     return {
@@ -300,6 +330,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       s["--aura-cell-w"] = w + "px";
     }
     if (isPinned(c)) s["--aura-cell-left"] = "calc(var(--aura-space-6)" + selW + " + " + pinOffsets[c.key] + ")";
+    if (cardRank[c.key] != null) s["--aura-card-order"] = String(5 + cardRank[c.key]);
     return s;
   }
   const sortCol = sort && sort.key ? byKey[sort.key] : void 0;
@@ -440,9 +471,37 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   function colAt(ci) {
     return selectable ? ci === 0 ? null : vis[ci - 1] : vis[ci];
   }
+  const cardHidden = [];
+  for (let ci = 0; ci < nCols; ci++) {
+    const col = colAt(ci);
+    cardHidden.push(stacked && (col ? cardPart(col, vis.indexOf(col)) === "hide" : noCardSel));
+  }
+  function nearestShown(c, dir, ok) {
+    if (ok(c)) return c;
+    for (let d = 1; d < nCols; d++) {
+      const a = c + d * dir, b = c - d * dir;
+      if (a >= 0 && a < nCols && ok(a)) return a;
+      if (b >= 0 && b < nCols && ok(b)) return b;
+    }
+    return c;
+  }
+  const acShown = nearestShown(ac, 1, function(cc) {
+    return !cardHidden[cc];
+  });
+  const lastFocus = React.useRef(null);
+  React.useEffect(
+    function() {
+      const was = lastFocus.current, g = gridRef.current;
+      if (!stacked || !was || !g || !g.contains(was) || was.getClientRects().length > 0) return;
+      if (document.activeElement && document.activeElement !== document.body && document.activeElement !== was) return;
+      const el = g.querySelector('[data-rc="' + Math.max(1, ar) + ":" + acShown + '"]');
+      if (el && el.getClientRects().length > 0) el.focus();
+    },
+    [stacked]
+  );
   function tabFor(r, c) {
     if (!activeRendered) return r === 0 && c === ac ? 0 : -1;
-    return r === ar && c === ac ? 0 : -1;
+    return r === ar && c === acShown ? 0 : -1;
   }
   React.useEffect(function() {
     const p = pending.current;
@@ -466,26 +525,17 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       el.focus();
     }
   });
-  function focusCell(r, c) {
+  function focusCell(r, c, dir) {
     r = Math.max(0, Math.min(r, lastR));
     c = Math.max(0, Math.min(c, nCols - 1));
-    if (stacked && r === 0 && nRows > 0 && !(selectable && c === 0)) r = 1;
-    if (gridRef.current && r === T && hasTotal) {
+    if (stacked && r === 0 && nRows > 0 && (!(selectable && c === 0) || noCardSel)) r = 1;
+    if (gridRef.current && (r === T && hasTotal || stacked)) {
       const shown2 = function(cc) {
+        if (cardHidden[cc]) return false;
         const e = gridRef.current.querySelector('[data-rc="' + r + ":" + cc + '"]');
         return !!e && e.getClientRects().length > 0;
       };
-      if (!shown2(c))
-        for (let d = 1; d < nCols; d++) {
-          if (c + d < nCols && shown2(c + d)) {
-            c = c + d;
-            break;
-          }
-          if (c - d >= 0 && shown2(c - d)) {
-            c = c - d;
-            break;
-          }
-        }
+      c = nearestShown(c, dir || 1, shown2);
     }
     activeState[1]({ r, c });
     pending.current = { r, c };
@@ -745,7 +795,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
     } else if (r === 0 && col && (e.altKey && k === "ArrowDown" || k === "ContextMenu" || e.shiftKey && k === "F10") && controls)
       openMenu("col", col.key, target, { r: 0, c });
     else if (k === "ArrowRight") focusCell(r, c + 1);
-    else if (k === "ArrowLeft") focusCell(r, c - 1);
+    else if (k === "ArrowLeft") focusCell(r, c - 1, -1);
     else if (k === "ArrowDown") {
       if (r < lastR) focusCell(r + 1, c);
       else if (pageSize && page < pageCount && goPage(page + 1, { r: 1, c })) activeState[1]({ r: 1, c });
@@ -753,7 +803,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       if (r > 1 || r === 1 && !(pageSize && page > 1)) focusCell(r - 1, c);
       else if (r === 1 && goPage(page - 1, { r: pageSize, c })) activeState[1]({ r: pageSize, c });
     } else if (k === "Home") focusCell(e.ctrlKey ? 1 : r, 0);
-    else if (k === "End") focusCell(e.ctrlKey ? lastR : r, nCols - 1);
+    else if (k === "End") focusCell(e.ctrlKey ? lastR : r, nCols - 1, -1);
     else if (k === "PageDown") {
       if (pageSize) {
         if (goPage(page + 1, { r: 1, c })) activeState[1]({ r: 1, c });
@@ -773,7 +823,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         if (pageKeys.length) toggleAll();
       } else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
       else if (r > 0 && k === " " && selectable) {
-        if (canSelect(row)) toggle(row[rowKey], !selSet[row[rowKey]]);
+        if (canSelect(row) && !(stacked && noCardSel)) toggle(row[rowKey], !selSet[row[rowKey]]);
       } else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
         followRow(target.closest('[role="row"]'), e);
       else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
@@ -833,6 +883,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           "aria-colindex": ci + 1,
           style: cellStyle(c, i),
           "data-hide": hideLevel(c) ? String(hideLevel(c)) : void 0,
+          "data-card": cardPart(c, i) === "hide" ? "hide" : void 0,
           tabIndex: tabFor(0, ci),
           "data-rc": "0:" + ci,
           className: cx(
@@ -1198,7 +1249,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
           ),
           style: cellStyle(c, j),
           ...cardAttrs(c, j),
-          "data-label": j === 0 ? void 0 : c.label || t.totals
+          "data-label": cardPart(c, j) === "title" ? void 0 : c.label || t.totals
         },
         props.footer[c.key]
       );
@@ -1226,6 +1277,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       className: cx(
         "aura-table",
         stacked && "aura-table--stacked",
+        noCardSel && "aura-table--cards-nosel",
         scrolledX[0] && "is-scrolled-x",
         refreshing && "is-refreshing",
         !levels.length && props.className
@@ -1243,8 +1295,16 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         className: "aura-table__scroll",
         onMouseOver: showFull,
         onMouseLeave: hideFull,
-        onFocus: showFull,
-        onBlur: hideFull,
+        onFocus: function(e) {
+          lastFocus.current = e.target;
+          showFull(e);
+        },
+        onBlur: function(e) {
+          const to = e.relatedTarget;
+          if ((!to || !e.currentTarget.contains(to)) && e.target.getClientRects().length > 0)
+            lastFocus.current = null;
+          hideFull();
+        },
         style: scrollStyle,
         role: "grid",
         "aria-label": props.label,

package/dist/esm/Stat.js

@@ -1,38 +1,10 @@
 'use client';
 import * as React from "react";
-import { cx } from "./internal.js";
-import { Icon } from "./Icon.js";
 import { useLinkComponent } from "./locale.js";
-import { IconMinus, IconTrendingDown, IconTrendingUp } from "./icons.js";
+import { statElement } from "./display.js";
 const Stat = React.forwardRef(function Stat2(props, ref) {
-  const ch = props.change;
-  const dir = ch && (ch.direction || "flat");
-  const tone = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
   const Link = useLinkComponent(props.linkComponent);
-  const v = props.value;
-  const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
-  const Tag = props.href ? Link : props.onClick ? "button" : "div";
-  const interactive = !!(props.href || props.onClick);
-  return /* @__PURE__ */ React.createElement(
-    Tag,
-    {
-      ref,
-      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
-      href: props.href,
-      onClick: props.onClick,
-      type: Tag === "button" ? "button" : void 0,
-      "aria-busy": props.loading || void 0
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "aura-stat__head" }, /* @__PURE__ */ React.createElement("span", { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon })) : null),
-    props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
-    ch && !props.loading || props.caption ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__change", "is-" + tone) }, /* @__PURE__ */ React.createElement(
-      Icon,
-      {
-        name: dir === "up" ? /* @__PURE__ */ React.createElement(IconTrendingUp, null) : dir === "down" ? /* @__PURE__ */ React.createElement(IconTrendingDown, null) : /* @__PURE__ */ React.createElement(IconMinus, null),
-        size: 14
-      }
-    ), /* @__PURE__ */ React.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
-  );
+  return statElement(props, ref, Link);
 });
 export {
   Stat

package/dist/esm/Table.js

@@ -47,7 +47,7 @@ function headerLabels(children) {
   return out;
 }
 const Table = React.forwardRef(function Table2(props, ref) {
-  const { caption, captionHidden, density, stackBelow, className, children, ...rest } = props;
+  const { caption, captionHidden, density, stackBelow, align, bordered, className, children, ...rest } = props;
   const labels = stackBelow ? headerLabels(children) : null;
   if (labels && !labels.length)
     devWarnOnce(
@@ -75,7 +75,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
     "div",
     {
       ref: wrap,
-      className: cx("aura-tbl-wrap", stackBelow && "is-stackable"),
+      className: cx("aura-tbl-wrap", stackBelow && "is-stackable", bordered === false && "is-flush"),
       "data-density": density,
       tabIndex: scrolls ? 0 : void 0,
       role: scrolls && (caption != null || rest["aria-label"]) ? "region" : void 0,
@@ -86,7 +86,12 @@ const Table = React.forwardRef(function Table2(props, ref) {
       "table",
       {
         ref,
-        className: cx("aura-tbl", stackBelow && "aura-tbl--stack-" + stackBelow, className),
+        className: cx(
+          "aura-tbl",
+          stackBelow && "aura-tbl--stack-" + stackBelow,
+          align === "middle" && "aura-tbl--middle",
+          className
+        ),
         role: stackBelow ? "table" : void 0,
         ...rest
       },
@@ -134,7 +139,7 @@ function cellClass(base, p) {
   );
 }
 const Th = React.forwardRef(function Th2(props, ref) {
-  const { align, numeric, mono, className, scope, label, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, ...rest } = props;
   const stacked = React.useContext(StackLabels) != null;
   return /* @__PURE__ */ React.createElement(
     "th",
@@ -143,14 +148,16 @@ const Th = React.forwardRef(function Th2(props, ref) {
       scope: scope || "col",
       className: cellClass("aura-tbl__th", props),
       role: stacked ? scope === "row" ? "rowheader" : "columnheader" : void 0,
+      "data-card": stacked && (card === "title" || card === "action") ? card : void 0,
       ...rest
     }
   );
 });
 const Td = React.forwardRef(function Td2(props, ref) {
-  const { align, numeric, mono, className, scope, label, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, ...rest } = props;
   const labels = React.useContext(StackLabels), col = React.useContext(ColumnIndex);
-  const shown = labels ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;
+  const slot = labels && (card === "title" || card === "action") ? card : void 0;
+  const shown = labels && !slot ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;
   return /* @__PURE__ */ React.createElement(
     "td",
     {
@@ -158,6 +165,7 @@ const Td = React.forwardRef(function Td2(props, ref) {
       className: cellClass("aura-tbl__td", props),
       role: labels ? "cell" : void 0,
       "data-label": shown || void 0,
+      "data-card": slot,
       ...rest
     }
   );

package/dist/esm/Tabs.js

@@ -81,7 +81,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
             key: t.id,
             href: t.href,
             className: tabCls(on, own.className),
-            "aria-current": on ? "page" : void 0,
+            "aria-current": on ? props.current || "page" : void 0,
             onClick: function(e) {
               if (own.onClick) own.onClick(e);
               if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;

package/dist/esm/display.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, omit, tone as badgeTone } from "./classes.js";
+import { cx, devWarnOnce, omit, tone as badgeTone } from "./classes.js";
 import { toneFor } from "./status.js";
 import {
   IconBan,
@@ -11,6 +11,9 @@ import {
   IconCircleDotDashed,
   IconInbox,
   IconInfo,
+  IconMinus,
+  IconTrendingDown,
+  IconTrendingUp,
   IconTriangleAlert
 } from "./icons.js";
 const h = React.createElement;
@@ -101,12 +104,31 @@ function badgeElement(props, ref) {
   );
 }
 function emptyStateElement(props, ref) {
-  const HT = "h" + (props.headingLevel || 3);
+  const HT = props.headingLevel === false ? "p" : "h" + (props.headingLevel || 3);
+  const rest = omit(props, [
+    "title",
+    "description",
+    "icon",
+    "action",
+    "size",
+    "bordered",
+    "headingLevel",
+    "tone",
+    "className",
+    "children"
+  ]);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      ...rest,
       ref,
-      className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
+      className: cx(
+        "aura-empty",
+        props.size === "sm" && "is-sm",
+        props.bordered && "is-bordered",
+        props.tone === "danger" && "is-danger",
+        props.className
+      )
     },
     /* @__PURE__ */ React.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon || /* @__PURE__ */ React.createElement(IconInbox, null), size: props.size === "sm" ? "md" : "lg" })),
     /* @__PURE__ */ React.createElement(HT, { className: "aura-empty__title" }, props.title),
@@ -114,6 +136,66 @@ function emptyStateElement(props, ref) {
     props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-empty__action" }, props.action) : null
   );
 }
+function statElement(props, ref, Link) {
+  const ch = props.change;
+  const dir = ch && (ch.direction || "flat");
+  const tone = ch && (ch.tone || (dir === "up" ? "positive" : dir === "down" ? "negative" : "neutral"));
+  const v = props.value;
+  const numeric = typeof v === "number" || typeof v === "string" && /\d/.test(v) && /^[\s\d.,:+\-\u2212%()\u0E3F$\u20AC\u00A3\u00A5kKmMbB]+$/.test(v.replace(/\b[A-Z]{3}\b/g, ""));
+  const Tag = props.href ? Link : props.onClick ? "button" : "div";
+  const interactive = !!(props.href || props.onClick);
+  if (props.headingLevel && Tag === "button")
+    devWarnOnce(
+      "stat-heading-button",
+      "Stat `headingLevel` is ignored with `onClick`: a heading can\u2019t sit in a button. Use `href`, or put the heading outside."
+    );
+  const LabelTag = props.headingLevel && Tag !== "button" ? "h" + props.headingLevel : "span";
+  const HeadTag = LabelTag === "span" ? "span" : "div";
+  return /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      ref,
+      className: cx("aura-stat", interactive && "is-interactive", props.loading && "is-loading", props.className),
+      href: props.href,
+      onClick: props.onClick,
+      type: Tag === "button" ? "button" : void 0,
+      "aria-busy": props.loading || void 0
+    },
+    /* @__PURE__ */ React.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React.createElement(LabelTag, { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon })) : null),
+    props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+    ch && !props.loading || props.caption ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-stat__change", "is-" + tone) }, /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        name: dir === "up" ? /* @__PURE__ */ React.createElement(IconTrendingUp, null) : dir === "down" ? /* @__PURE__ */ React.createElement(IconTrendingDown, null) : /* @__PURE__ */ React.createElement(IconMinus, null),
+        size: 14
+      }
+    ), /* @__PURE__ */ React.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
+  );
+}
+const AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
+function initials(name) {
+  const parts = String(name || "?").trim().split(/\s+/);
+  return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
+}
+function avatarElement(props, ref, broken, onError) {
+  const size = props.size || "md";
+  let hash = 0;
+  String(props.name || "").split("").forEach(function(ch) {
+    hash = hash * 31 + ch.charCodeAt(0) >>> 0;
+  });
+  const tone = AVATAR_TONES[hash % AVATAR_TONES.length];
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ref,
+      className: cx("aura-avatar", "aura-avatar--" + size, "aura-avatar--" + tone, props.className),
+      role: "img",
+      "aria-label": props.name + (props.status ? ", " + props.status : "")
+    },
+    props.src && broken !== props.src ? /* @__PURE__ */ React.createElement("img", { key: props.src, src: props.src, alt: "", onError }) : /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, initials(props.name)),
+    props.status === "online" ? /* @__PURE__ */ React.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
+  );
+}
 function buttonClass(opts = {}) {
   return cx(
     "aura-btn",
@@ -139,17 +221,27 @@ function ServerBadge(props) {
 function ServerEmptyState(props) {
   return emptyStateElement(props, void 0);
 }
+function ServerStat(props) {
+  return statElement(omit(props, ["onClick"]), void 0, props.linkComponent || "a");
+}
+function ServerAvatar(props) {
+  return avatarElement(props, void 0, null, void 0);
+}
 export {
   ALERT_ICON,
   ServerAlert,
+  ServerAvatar,
   ServerBadge,
   ServerCard,
   ServerEmptyState,
+  ServerStat,
   ServerStatusPill,
   alertElement,
+  avatarElement,
   badgeElement,
   buttonClass,
   cardElement,
   emptyStateElement,
+  statElement,
   statusPillElement
 };