@jirawatpyk/aura-react 5.13.0 → 5.15.0

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,
@@ -325,6 +327,10 @@ var th = {
   pageN: function(p) {
     return "\u0E2B\u0E19\u0E49\u0E32 " + p;
   },
+  progressReserved: function(v, r, max) {
+    return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
+  },
+  breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }
@@ -451,6 +457,10 @@ var sv = {
   pageN: function(p) {
     return "Sida " + p;
   },
+  progressReserved: function(v, r, max) {
+    return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
+  },
+  breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }
@@ -578,6 +588,10 @@ var STRINGS = {
     pageN: function(p) {
       return "Page " + p;
     },
+    progressReserved: function(v, r, max) {
+      return n2(v) + " of " + n2(max) + " used, " + n2(r) + " reserved";
+    },
+    breadcrumbMore: "Show the full path",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }
@@ -1015,6 +1029,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 +1072,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;
@@ -1095,8 +1118,11 @@ function cardElement(props, ref) {
     "interactive",
     "as",
     "className",
-    "titleId"
+    "titleId",
+    "header",
+    "flushBelow"
   ]);
+  const head = props.header !== void 0 && props.header !== null && props.header !== false;
   return h2(
     props.as || "section",
     Object.assign({}, rest, {
@@ -1105,12 +1131,13 @@ function cardElement(props, ref) {
         "aura-card",
         creative && "aura-card--creative",
         props.interactive && "is-interactive",
+        props.flushBelow && "aura-card--flush-below-" + props.flushBelow,
         props.className
       ),
       /* A titled card is labelled by its title; otherwise the caller's aria-labelledby stays (5.8). */
-      "aria-labelledby": props.title && props.titleId ? props.titleId : props["aria-labelledby"]
+      "aria-labelledby": !head && props.title && props.titleId ? props.titleId : props["aria-labelledby"]
     }),
-    props.title || props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React3.createElement("div", { className: "aura-card__heading" }, props.title ? h2("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React3.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
+    head || props.title || props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React3.createElement("div", { className: "aura-card__heading" }, head ? props.header : null, !head && props.title ? h2("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, !head && props.description ? /* @__PURE__ */ React3.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
     props.children ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__body" }, props.children) : null,
     props.footer ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__foot" }, props.footer) : null
   );
@@ -1147,7 +1174,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,12 +1206,73 @@ 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",
     "aura-btn--" + (opts.variant || "primary"),
     opts.size === "sm" && "aura-btn--sm",
     opts.fullWidth && "aura-btn--full",
+    opts.touchHeight && "aura-btn--touch",
     opts.loading && "is-loading",
     opts.className
   );
@@ -1204,3 +1292,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

@@ -20,6 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
+	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
+	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	touchHeight?: boolean | undefined;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
 export type IconInput = IconName | React$1.ReactElement;
@@ -80,6 +83,21 @@ export interface CardProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "ti
 	className?: string | undefined;
 	/** id for the title element; the card is then labelled by it (aria-labelledby). */
 	titleId?: string | undefined;
+	/** Free head content in place of `title` and `description` (5.15, Chamber-OS 87): skeleton bars while the card
+	 * loads, a status pill above a title you mark up yourself. No heading is added; `actions` still sit top-right. */
+	header?: React$1.ReactNode | undefined;
+	/** Below this width (the viewport's) the card drops its border, surface and shadow — a list whose rows become
+	 * cards of their own on a phone, so there are no cards in a card (5.15, Chamber-OS 93). Padding is kept. */
+	flushBelow?: "sm" | "md" | "lg" | 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;
@@ -89,6 +107,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 +154,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 {
@@ -241,6 +290,10 @@ export interface AuraStrings {
 	pagination: string;
 	pageN: (p: number) => string;
 	accepts: (list?: string, max?: number | string) => string;
+	/** Progress with a reserved segment (5.15): "2 of 6 used, 1 reserved". */
+	progressReserved: (value: number, reserved: number, max: number) => string;
+	/** The collapsed middle of a Breadcrumb (5.15). */
+	breadcrumbMore: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */
@@ -298,6 +351,7 @@ export declare function buttonClass(opts?: {
 	size?: ButtonProps["size"];
 	fullWidth?: boolean | undefined;
 	loading?: boolean | undefined;
+	touchHeight?: boolean | undefined;
 	className?: string | undefined;
 }): string;
 declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;
@@ -305,6 +359,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 +374,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,

package/dist/server/index.d.ts

@@ -20,6 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
+	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
+	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	touchHeight?: boolean | undefined;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
 export type IconInput = IconName | React$1.ReactElement;
@@ -80,6 +83,21 @@ export interface CardProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "ti
 	className?: string | undefined;
 	/** id for the title element; the card is then labelled by it (aria-labelledby). */
 	titleId?: string | undefined;
+	/** Free head content in place of `title` and `description` (5.15, Chamber-OS 87): skeleton bars while the card
+	 * loads, a status pill above a title you mark up yourself. No heading is added; `actions` still sit top-right. */
+	header?: React$1.ReactNode | undefined;
+	/** Below this width (the viewport's) the card drops its border, surface and shadow — a list whose rows become
+	 * cards of their own on a phone, so there are no cards in a card (5.15, Chamber-OS 93). Padding is kept. */
+	flushBelow?: "sm" | "md" | "lg" | 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;
@@ -89,6 +107,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 +154,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 {
@@ -241,6 +290,10 @@ export interface AuraStrings {
 	pagination: string;
 	pageN: (p: number) => string;
 	accepts: (list?: string, max?: number | string) => string;
+	/** Progress with a reserved segment (5.15): "2 of 6 used, 1 reserved". */
+	progressReserved: (value: number, reserved: number, max: number) => string;
+	/** The collapsed middle of a Breadcrumb (5.15). */
+	breadcrumbMore: string;
 }
 /** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
  * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */
@@ -298,6 +351,7 @@ export declare function buttonClass(opts?: {
 	size?: ButtonProps["size"];
 	fullWidth?: boolean | undefined;
 	loading?: boolean | undefined;
+	touchHeight?: boolean | undefined;
 	className?: string | undefined;
 }): string;
 declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;
@@ -305,6 +359,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 +374,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,

package/dist/server/index.js

@@ -268,6 +268,10 @@ var th = {
   pageN: function(p) {
     return "\u0E2B\u0E19\u0E49\u0E32 " + p;
   },
+  progressReserved: function(v, r, max) {
+    return "\u0E43\u0E0A\u0E49\u0E41\u0E25\u0E49\u0E27 " + n(v) + " \u0E08\u0E32\u0E01 " + n(max) + " \u0E08\u0E2D\u0E07\u0E44\u0E27\u0E49 " + n(r);
+  },
+  breadcrumbMore: "\u0E41\u0E2A\u0E14\u0E07\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
   accepts: function(list, max) {
     return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
   }
@@ -394,6 +398,10 @@ var sv = {
   pageN: function(p) {
     return "Sida " + p;
   },
+  progressReserved: function(v, r, max) {
+    return nsv(v) + " av " + nsv(max) + " anv\xE4nda, " + nsv(r) + " reserverade";
+  },
+  breadcrumbMore: "Visa hela s\xF6kv\xE4gen",
   accepts: function(list, max) {
     return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
   }
@@ -521,6 +529,10 @@ var STRINGS = {
     pageN: function(p) {
       return "Page " + p;
     },
+    progressReserved: function(v, r, max) {
+      return n2(v) + " of " + n2(max) + " used, " + n2(r) + " reserved";
+    },
+    breadcrumbMore: "Show the full path",
     accepts: function(list, max) {
       return [list, max && "up to " + max + " each"].filter(Boolean).join(", ");
     }
@@ -958,6 +970,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" }],
@@ -1000,6 +1013,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;
@@ -1038,8 +1059,11 @@ function cardElement(props, ref) {
     "interactive",
     "as",
     "className",
-    "titleId"
+    "titleId",
+    "header",
+    "flushBelow"
   ]);
+  const head = props.header !== void 0 && props.header !== null && props.header !== false;
   return h2(
     props.as || "section",
     Object.assign({}, rest, {
@@ -1048,12 +1072,13 @@ function cardElement(props, ref) {
         "aura-card",
         creative && "aura-card--creative",
         props.interactive && "is-interactive",
+        props.flushBelow && "aura-card--flush-below-" + props.flushBelow,
         props.className
       ),
       /* A titled card is labelled by its title; otherwise the caller's aria-labelledby stays (5.8). */
-      "aria-labelledby": props.title && props.titleId ? props.titleId : props["aria-labelledby"]
+      "aria-labelledby": !head && props.title && props.titleId ? props.titleId : props["aria-labelledby"]
     }),
-    props.title || props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React3.createElement("div", { className: "aura-card__heading" }, props.title ? h2("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React3.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
+    head || props.title || props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React3.createElement("div", { className: "aura-card__heading" }, head ? props.header : null, !head && props.title ? h2("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, !head && props.description ? /* @__PURE__ */ React3.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
     props.children ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__body" }, props.children) : null,
     props.footer ? /* @__PURE__ */ React3.createElement("div", { className: "aura-card__foot" }, props.footer) : null
   );
@@ -1090,7 +1115,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",
@@ -1122,12 +1147,73 @@ 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",
     "aura-btn--" + (opts.variant || "primary"),
     opts.size === "sm" && "aura-btn--sm",
     opts.fullWidth && "aura-btn--full",
+    opts.touchHeight && "aura-btn--touch",
     opts.loading && "is-loading",
     opts.className
   );
@@ -1147,13 +1233,21 @@ 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 {
   ServerAlert as Alert,
+  ServerAvatar as Avatar,
   ServerBadge as Badge,
   ServerCard as Card,
   ServerEmptyState as EmptyState,
   Icon,
   STRINGS,
+  ServerStat as Stat,
   ServerStatusPill as StatusPill,
   scale as brandScale,
   breakpoints,