@jirawatpyk/aura-react 5.12.0 → 5.14.0

package/dist/index.d.cts

@@ -89,6 +89,13 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	hideBelow?: number | "sm" | "md" | "lg" | "xl" | undefined;
 	/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
 	actions?: boolean | undefined;
+	/** Its place in a stacked card (5.13): `'hide'` leaves it out of the card (the grid keeps it), `'title'` / `'pill'`
+	 * make it the card's title or the pill beside it (instead of the first column / first pill column), `'field'` a
+	 * label/value field. Default: today's rule. */
+	card?: "hide" | "field" | "title" | "pill" | undefined;
+	/** The order of fields in a stacked card (5.13), lowest first; the grid's column order is unchanged. Fields
+	 * without one sort by their column index (0-based). Screen readers and arrow keys follow the grid's order. */
+	cardOrder?: number | undefined;
 	/** `end` right-aligns header and cells (amounts, counts) and uses tabular figures. Default `start`. */
 	align?: "start" | "end" | undefined;
 }
@@ -178,6 +185,9 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
+	/** Stacked cards (`stackBelow`) without the row checkboxes and the select-all box (5.13). The grid keeps them and
+	 * the selection is kept; Space doesn't change it while the cards show. */
+	hideSelectionInCards?: boolean | undefined;
 	/** `'auto'` (5.11): rows grow to fit content that wraps (two badges, a long name); cells stay vertically centred and
 	 * rows keep at least the density's row height. Needs every row in the DOM, so it is ignored with `height`
 	 * (virtualized rows are one fixed height). Default: one fixed-height line per row, long text ends in an ellipsis. */
@@ -387,6 +397,7 @@ export interface FilterBarProps {
 	onSearchChange?: ((value: string) => void) | undefined;
 	/** ms to wait after the last keystroke. Default 300. */
 	searchDelay?: number | undefined;
+	/** The search field's name. Default "Search". */
 	searchLabel?: string | undefined;
 	searchPlaceholder?: string | undefined;
 	/** Filter controls beside the search: Select, SegmentedControl, a Popover of options… */
@@ -649,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;
@@ -985,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 {
@@ -996,7 +1012,7 @@ export interface SeparatorProps {
 	spacing?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
 	className?: string | undefined;
 }
-export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className"> {
+export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className" | "align"> {
 	/** The table's name (a `<caption>`). Give every table one; `captionHidden` keeps it for screen readers only. */
 	caption?: React$1.ReactNode | undefined;
 	captionHidden?: boolean | undefined;
@@ -1006,6 +1022,11 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * cell shows its column's header as a label: a `Td`'s `label`, else the text of the matching `Th` in `THead`.
 	 * Done in CSS (a container query), so the server's HTML is already right; table semantics are kept. */
 	stackBelow?: "sm" | "md" | undefined;
+	/** `middle` centres every body and footer cell on its row (5.13); default `top`, so wrapped text starts level. */
+	align?: "top" | "middle" | undefined;
+	/** `false` (5.13) drops the frame — border, radius, background — and the outer cells' side padding, so the table
+	 * lines up with the content around it, e.g. flush inside a Card under its heading. Default `true`. */
+	bordered?: boolean | undefined;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }
@@ -1026,6 +1047,10 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	scope?: "col" | "row" | "colgroup" | "rowgroup" | undefined;
 	/** The label this cell shows when its table is stacked (`stackBelow`, 5.8). Default: the matching header's text. */
 	label?: string | undefined;
+	/** Its place in a stacked row (5.13), on a Td or a row header (`Th scope="row"`). `title` takes the first line,
+	 * without a label; `action` sits at the end of that line at its natural size; `field` (default) is a labelled field,
+	 * two to a line under them. */
+	card?: "title" | "action" | "field" | undefined;
 	className?: string | undefined;
 }
 export interface ActionBarProps {
@@ -1102,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 {
@@ -1201,7 +1229,7 @@ export interface SkeletonProps {
 	size?: number | undefined;
 	className?: string | undefined;
 }
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	icon?: IconInput | undefined;
@@ -1209,7 +1237,12 @@ export interface EmptyStateProps {
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;
 	bordered?: boolean | undefined;
-	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** `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;
+	/** 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

@@ -89,6 +89,13 @@ export interface DataTableColumn<Row extends Record<string, any> = Record<string
 	hideBelow?: number | "sm" | "md" | "lg" | "xl" | undefined;
 	/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
 	actions?: boolean | undefined;
+	/** Its place in a stacked card (5.13): `'hide'` leaves it out of the card (the grid keeps it), `'title'` / `'pill'`
+	 * make it the card's title or the pill beside it (instead of the first column / first pill column), `'field'` a
+	 * label/value field. Default: today's rule. */
+	card?: "hide" | "field" | "title" | "pill" | undefined;
+	/** The order of fields in a stacked card (5.13), lowest first; the grid's column order is unchanged. Fields
+	 * without one sort by their column index (0-based). Screen readers and arrow keys follow the grid's order. */
+	cardOrder?: number | undefined;
 	/** `end` right-aligns header and cells (amounts, counts) and uses tabular figures. Default `start`. */
 	align?: "start" | "end" | undefined;
 }
@@ -178,6 +185,9 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
+	/** Stacked cards (`stackBelow`) without the row checkboxes and the select-all box (5.13). The grid keeps them and
+	 * the selection is kept; Space doesn't change it while the cards show. */
+	hideSelectionInCards?: boolean | undefined;
 	/** `'auto'` (5.11): rows grow to fit content that wraps (two badges, a long name); cells stay vertically centred and
 	 * rows keep at least the density's row height. Needs every row in the DOM, so it is ignored with `height`
 	 * (virtualized rows are one fixed height). Default: one fixed-height line per row, long text ends in an ellipsis. */
@@ -387,6 +397,7 @@ export interface FilterBarProps {
 	onSearchChange?: ((value: string) => void) | undefined;
 	/** ms to wait after the last keystroke. Default 300. */
 	searchDelay?: number | undefined;
+	/** The search field's name. Default "Search". */
 	searchLabel?: string | undefined;
 	searchPlaceholder?: string | undefined;
 	/** Filter controls beside the search: Select, SegmentedControl, a Popover of options… */
@@ -649,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;
@@ -985,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 {
@@ -996,7 +1012,7 @@ export interface SeparatorProps {
 	spacing?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
 	className?: string | undefined;
 }
-export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className"> {
+export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className" | "align"> {
 	/** The table's name (a `<caption>`). Give every table one; `captionHidden` keeps it for screen readers only. */
 	caption?: React$1.ReactNode | undefined;
 	captionHidden?: boolean | undefined;
@@ -1006,6 +1022,11 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * cell shows its column's header as a label: a `Td`'s `label`, else the text of the matching `Th` in `THead`.
 	 * Done in CSS (a container query), so the server's HTML is already right; table semantics are kept. */
 	stackBelow?: "sm" | "md" | undefined;
+	/** `middle` centres every body and footer cell on its row (5.13); default `top`, so wrapped text starts level. */
+	align?: "top" | "middle" | undefined;
+	/** `false` (5.13) drops the frame — border, radius, background — and the outer cells' side padding, so the table
+	 * lines up with the content around it, e.g. flush inside a Card under its heading. Default `true`. */
+	bordered?: boolean | undefined;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }
@@ -1026,6 +1047,10 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	scope?: "col" | "row" | "colgroup" | "rowgroup" | undefined;
 	/** The label this cell shows when its table is stacked (`stackBelow`, 5.8). Default: the matching header's text. */
 	label?: string | undefined;
+	/** Its place in a stacked row (5.13), on a Td or a row header (`Th scope="row"`). `title` takes the first line,
+	 * without a label; `action` sits at the end of that line at its natural size; `field` (default) is a labelled field,
+	 * two to a line under them. */
+	card?: "title" | "action" | "field" | undefined;
 	className?: string | undefined;
 }
 export interface ActionBarProps {
@@ -1102,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 {
@@ -1201,7 +1229,7 @@ export interface SkeletonProps {
 	size?: number | undefined;
 	className?: string | undefined;
 }
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	icon?: IconInput | undefined;
@@ -1209,7 +1237,12 @@ export interface EmptyStateProps {
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;
 	bordered?: boolean | undefined;
-	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** `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;
+	/** 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,12 +1158,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__ */ React3.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__ */ React3.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React3.createElement(Icon, { name: props.icon || /* @__PURE__ */ React3.createElement(IconInbox, null), size: props.size === "sm" ? "md" : "lg" })),
     /* @__PURE__ */ React3.createElement(HT, { className: "aura-empty__title" }, props.title),
@@ -1160,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",
@@ -1185,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;
@@ -96,7 +134,7 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
 }
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	icon?: IconInput | undefined;
@@ -104,7 +142,12 @@ export interface EmptyStateProps {
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;
 	bordered?: boolean | undefined;
-	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** `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;
+	/** 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 {
@@ -302,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
@@ -312,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,

package/dist/server/index.d.ts

@@ -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;
@@ -96,7 +134,7 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
 }
-export interface EmptyStateProps {
+export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode | undefined;
 	icon?: IconInput | undefined;
@@ -104,7 +142,12 @@ export interface EmptyStateProps {
 	action?: React$1.ReactNode | undefined;
 	size?: "sm" | "md" | undefined;
 	bordered?: boolean | undefined;
-	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** `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;
+	/** 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 {
@@ -302,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
@@ -312,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,