@jirawatpyk/aura-react 5.13.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/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/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,7 +104,7 @@ 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",
@@ -133,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",
@@ -158,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
 };

package/dist/index.d.cts

@@ -660,6 +660,9 @@ export interface TabsProps {
 	variant?: "underline" | "segmented" | undefined;
 	/** With `variant="segmented"`: stretch the track to the full width, tabs sharing it equally. (5.10) */
 	fullWidth?: boolean | undefined;
+	/** Link tabs: what the current link is (5.14). `page` (default) for routes; `location` for links to sections of
+	 * this page (`#contacts`). */
+	current?: "page" | "location" | undefined;
 }
 export interface NavItem {
 	id: string;
@@ -996,6 +999,8 @@ export interface AppShellProps {
 	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
 	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
 	bottomNav?: React$1.ReactElement | undefined;
+	/** `false` (5.14): `<main>` has no padding, for pages whose containers own the page padding and column. */
+	contentPadding?: boolean | undefined;
 	className?: string | undefined;
 }
 export interface SeparatorProps {
@@ -1122,6 +1127,9 @@ export interface StatProps {
 	/** Makes the whole card a link or a button (drill-down). */
 	href?: string | undefined;
 	onClick?: (() => void) | undefined;
+	/** The label as a heading of this level (5.14), when the tile titles its section. Not with `onClick` (a heading
+	 * can't sit in a button); a link is fine. Default: a plain label. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
 	className?: string | undefined;
 }
 export interface TimePickerProps extends FieldProps {
@@ -1232,7 +1240,9 @@ export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElem
 	/** `danger` (5.13) for a failure — the data couldn't load: the danger tint, a danger-coloured icon, and a solid
 	 * danger frame with `bordered`. It stays quiet; pass `role="alert"` if it must interrupt. Default `neutral`. */
 	tone?: "neutral" | "danger" | undefined;
-	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** The title's heading level (default 3); `false` (5.14) makes it a paragraph, for a card or list whose outline
+	 * mustn't change. EmptyState has no live-region role unless you pass `role`. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | false | undefined;
 	className?: string | undefined;
 }
 export interface PaginationProps {

package/dist/index.d.ts

@@ -660,6 +660,9 @@ export interface TabsProps {
 	variant?: "underline" | "segmented" | undefined;
 	/** With `variant="segmented"`: stretch the track to the full width, tabs sharing it equally. (5.10) */
 	fullWidth?: boolean | undefined;
+	/** Link tabs: what the current link is (5.14). `page` (default) for routes; `location` for links to sections of
+	 * this page (`#contacts`). */
+	current?: "page" | "location" | undefined;
 }
 export interface NavItem {
 	id: string;
@@ -996,6 +999,8 @@ export interface AppShellProps {
 	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
 	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
 	bottomNav?: React$1.ReactElement | undefined;
+	/** `false` (5.14): `<main>` has no padding, for pages whose containers own the page padding and column. */
+	contentPadding?: boolean | undefined;
 	className?: string | undefined;
 }
 export interface SeparatorProps {
@@ -1122,6 +1127,9 @@ export interface StatProps {
 	/** Makes the whole card a link or a button (drill-down). */
 	href?: string | undefined;
 	onClick?: (() => void) | undefined;
+	/** The label as a heading of this level (5.14), when the tile titles its section. Not with `onClick` (a heading
+	 * can't sit in a button); a link is fine. Default: a plain label. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
 	className?: string | undefined;
 }
 export interface TimePickerProps extends FieldProps {
@@ -1232,7 +1240,9 @@ export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElem
 	/** `danger` (5.13) for a failure — the data couldn't load: the danger tint, a danger-coloured icon, and a solid
 	 * danger frame with `bordered`. It stays quiet; pass `role="alert"` if it must interrupt. Default `neutral`. */
 	tone?: "neutral" | "danger" | undefined;
-	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** The title's heading level (default 3); `false` (5.14) makes it a paragraph, for a card or list whose outline
+	 * mustn't change. EmptyState has no live-region role unless you pass `role`. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | false | undefined;
 	className?: string | undefined;
 }
 export interface PaginationProps {

package/dist/server/index.cjs

@@ -31,11 +31,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var server_exports = {};
 __export(server_exports, {
   Alert: () => ServerAlert,
+  Avatar: () => ServerAvatar,
   Badge: () => ServerBadge,
   Card: () => ServerCard,
   EmptyState: () => ServerEmptyState,
   Icon: () => Icon,
   STRINGS: () => STRINGS,
+  Stat: () => ServerStat,
   StatusPill: () => ServerStatusPill,
   brandScale: () => scale,
   breakpoints: () => breakpoints,
@@ -1015,6 +1017,7 @@ var Icon = React2.forwardRef(function Icon2(props, ref) {
 var iconNames = Object.keys(map);
 
 // src/icons.ts
+var IconMinus = /* @__PURE__ */ defineIcon("minus", [["path", { d: "M5 12h14" }]]);
 var IconCircleAlert = /* @__PURE__ */ defineIcon("circle-alert", [
   ["circle", { cx: "12", cy: "12", r: "10" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12" }],
@@ -1057,6 +1060,14 @@ var IconInbox = /* @__PURE__ */ defineIcon("inbox", [
     { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" }
   ]
 ]);
+var IconTrendingUp = /* @__PURE__ */ defineIcon("trending-up", [
+  ["path", { d: "M16 7h6v6" }],
+  ["path", { d: "m22 7-8.5 8.5-5-5L2 17" }]
+]);
+var IconTrendingDown = /* @__PURE__ */ defineIcon("trending-down", [
+  ["path", { d: "M16 17h6v-6" }],
+  ["path", { d: "m22 17-8.5-8.5-5 5L2 7" }]
+]);
 
 // src/display.tsx
 var h2 = React3.createElement;
@@ -1147,7 +1158,7 @@ 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",
@@ -1179,6 +1190,66 @@ function emptyStateElement(props, ref) {
     props.action ? /* @__PURE__ */ React3.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 tone2 = 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__ */ React3.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__ */ React3.createElement(HeadTag, { className: "aura-stat__head" }, /* @__PURE__ */ React3.createElement(LabelTag, { className: "aura-stat__label" }, props.label), props.icon ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__icon" }, /* @__PURE__ */ React3.createElement(Icon, { name: props.icon })) : null),
+    props.loading ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__value" }, /* @__PURE__ */ React3.createElement("span", { className: "aura-skel aura-stat__skel" })) : /* @__PURE__ */ React3.createElement("span", { className: cx("aura-stat__value", numeric && "is-numeric") }, props.value, props.unit ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__unit" }, props.unit) : null),
+    ch && !props.loading || props.caption ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__foot" }, ch && !props.loading ? /* @__PURE__ */ React3.createElement("span", { className: cx("aura-stat__change", "is-" + tone2) }, /* @__PURE__ */ React3.createElement(
+      Icon,
+      {
+        name: dir === "up" ? /* @__PURE__ */ React3.createElement(IconTrendingUp, null) : dir === "down" ? /* @__PURE__ */ React3.createElement(IconTrendingDown, null) : /* @__PURE__ */ React3.createElement(IconMinus, null),
+        size: 14
+      }
+    ), /* @__PURE__ */ React3.createElement("span", null, ch.value)) : null, ch && ch.label && !props.loading ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__caption" }, ch.label) : null, props.caption ? /* @__PURE__ */ React3.createElement("span", { className: "aura-stat__caption" }, props.caption) : null) : null
+  );
+}
+var 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 tone2 = AVATAR_TONES[hash % AVATAR_TONES.length];
+  return /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      ref,
+      className: cx("aura-avatar", "aura-avatar--" + size, "aura-avatar--" + tone2, props.className),
+      role: "img",
+      "aria-label": props.name + (props.status ? ", " + props.status : "")
+    },
+    props.src && broken !== props.src ? /* @__PURE__ */ React3.createElement("img", { key: props.src, src: props.src, alt: "", onError }) : /* @__PURE__ */ React3.createElement("span", { "aria-hidden": true }, initials(props.name)),
+    props.status === "online" ? /* @__PURE__ */ React3.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
+  );
+}
 function buttonClass(opts = {}) {
   return cx(
     "aura-btn",
@@ -1204,3 +1275,9 @@ 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);
+}

package/dist/server/index.d.cts

@@ -81,6 +81,15 @@ export interface CardProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "ti
 	/** id for the title element; the card is then labelled by it (aria-labelledby). */
 	titleId?: string | undefined;
 }
+export interface AvatarProps {
+	/** Accessible name; also gives the initials and a stable colour. */
+	name: string;
+	src?: string | undefined;
+	/** `sm` 24 · `md` 32 (default) · `lg` 40. */
+	size?: "sm" | "md" | "lg" | undefined;
+	status?: "online" | undefined;
+	className?: string | undefined;
+}
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
@@ -89,6 +98,35 @@ export interface DateDisplayOptions {
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory" | undefined;
 }
+export interface StatChange {
+	/** Shown as written, e.g. "+12%" or "−3". */
+	value: React$1.ReactNode;
+	direction?: "up" | "down" | "flat" | undefined;
+	/** Default: up = positive, down = negative. Set it when a rise is bad (cancellations, wait time). */
+	tone?: "positive" | "negative" | "neutral" | undefined;
+	/** e.g. "vs last month". */
+	label?: React$1.ReactNode | undefined;
+}
+export interface StatProps {
+	/** Your router's link (e.g. `Link` from `next/link`) for this component; defaults to AuraProvider's `linkComponent`, then `<a>`. */
+	linkComponent?: React$1.ElementType | undefined;
+	label: React$1.ReactNode;
+	value?: React$1.ReactNode | undefined;
+	/** Small unit after the value ("งาน", "คน", "%"). */
+	unit?: React$1.ReactNode | undefined;
+	change?: StatChange | undefined;
+	caption?: React$1.ReactNode | undefined;
+	icon?: IconInput | undefined;
+	/** Skeleton in place of the value. */
+	loading?: boolean | undefined;
+	/** Makes the whole card a link or a button (drill-down). */
+	href?: string | undefined;
+	onClick?: (() => void) | undefined;
+	/** The label as a heading of this level (5.14), when the tile titles its section. Not with `onClick` (a heading
+	 * can't sit in a button); a link is fine. Default: a plain label. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	className?: string | undefined;
+}
 export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
 export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	tone?: Tone | undefined;
@@ -107,7 +145,9 @@ export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElem
 	/** `danger` (5.13) for a failure — the data couldn't load: the danger tint, a danger-coloured icon, and a solid
 	 * danger frame with `bordered`. It stays quiet; pass `role="alert"` if it must interrupt. Default `neutral`. */
 	tone?: "neutral" | "danger" | undefined;
-	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** The title's heading level (default 3); `false` (5.14) makes it a paragraph, for a card or list whose outline
+	 * mustn't change. EmptyState has no live-region role unless you pass `role`. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | false | undefined;
 	className?: string | undefined;
 }
 export interface ThemeOptions {
@@ -305,6 +345,11 @@ declare function ServerCard(props: CardProps): React$1.ReactElement;
 declare function ServerStatusPill(props: StatusPillProps): React$1.ReactElement;
 declare function ServerBadge(props: BadgeProps): React$1.ReactElement;
 declare function ServerEmptyState(props: EmptyStateProps): React$1.ReactElement;
+/** Stat for Server Components (5.14): no `onClick` (a button needs the client); `href` renders `linkComponent`, else `<a>`. */
+declare function ServerStat(props: Omit<StatProps, "onClick">): React$1.ReactElement;
+/** Avatar for Server Components (5.14): initials and colour. Falling back to the initials when an image fails needs the
+ * client, so give a server avatar a `src` you know loads, or none. */
+declare function ServerAvatar(props: AvatarProps): React$1.ReactElement;
 /** Makes icon names as strings work: `registerIcons(allIcons)` once at startup, with `allIcons` from
  * `@jirawatpyk/aura-react/icons`, or only the icons you use (`registerIcons([IconUsers, IconPlus])`). In 5.x every
  * name already works and this only says you are ready for 6.0 (it silences the notice); in 6.0 it is required. Call it in the module
@@ -315,9 +360,11 @@ export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1
 
 export {
 	ServerAlert as Alert,
+	ServerAvatar as Avatar,
 	ServerBadge as Badge,
 	ServerCard as Card,
 	ServerEmptyState as EmptyState,
+	ServerStat as Stat,
 	ServerStatusPill as StatusPill,
 	scale as brandScale,
 	toneFor as statusTone,