@jirawatpyk/aura-react 5.7.2 → 5.8.0

package/dist/server/index.d.ts

@@ -1,7 +1,86 @@
 import * as React$1 from 'react';
 
+/** Button look. */
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "creative" | "danger" | "danger-secondary";
+/** `md` 44px (default) · `sm` 32px for toolbars, table rows and card footers (still a 44px hit area on touch screens). */
+export type ButtonSize = "sm" | "md";
+/** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only. */
+export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+	/** Visual variant. Default `primary`. `ghost` has no fill or edge until hover (toolbars, rows, secondary actions beside a primary). `danger` (filled) and `danger-secondary` (outline) are for irreversible or destructive actions only — typically the confirm button of a `Dialog role="alertdialog"`. */
+	variant?: ButtonVariant | undefined;
+	/** Label text — short, Title Case English or Thai. */
+	children: React$1.ReactNode;
+	/** Leading icon name (see `IconName`). Hidden while loading. */
+	icon?: IconInput | undefined;
+	/** Trailing icon name, e.g. `arrow-right` for forward actions. */
+	iconRight?: IconInput | undefined;
+	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
+	loading?: boolean | undefined;
+	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels. */
+	fullWidth?: boolean | undefined;
+	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
+	size?: ButtonSize | 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;
+export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file" | "sun" | "moon" | "monitor" | "panel-left-close" | "panel-left-open" | "server" | "globe" | "activity" | "shield-alert" | "phone" | "wrench";
+/** Lucide stroke icon drawn inline in currentColor. */
+export interface IconProps {
+	/** A name from the set, or an icon element of your own (sized and styled the same way). */
+	name: IconInput;
+	/** `sm` 16 (default) · `md` 20 · `lg` 24, or a px number. */
+	size?: "sm" | "md" | "lg" | number | undefined;
+	/** Accessible name. Omit for decorative icons next to a text label (then aria-hidden). */
+	label?: string | undefined;
+	/** Default 2 (Lucide's). */
+	strokeWidth?: number | undefined;
+	className?: string | undefined;
+}
 /** `warning` (5.1): needs attention but still works — Warning, Problem, Degraded, At risk. */
 export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked";
+/** Status pill: tone fill + icon + the status word. Tone comes from the word unless given. */
+export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
+	/** The status word shown, e.g. "In Progress". Other attributes (`id`, `data-*`, `aria-*`) go on the pill (5.8). */
+	children: React$1.ReactNode;
+	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
+	tone?: StatusTone | undefined;
+	className?: string | undefined;
+}
+export type FeedbackTone = "info" | "success" | "warning" | "danger";
+export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "role"> {
+	tone?: FeedbackTone | undefined;
+	/** Default: `alert` for warning and danger, `status` otherwise (5.8). Pass `status` for a standing notice in a
+	 * warning or danger tone that shouldn't interrupt; `note` or `none` for one that isn't a live region. */
+	role?: "alert" | "status" | "note" | "none" | undefined;
+	/** Replaces the tone's icon (5.8): a name or your own element; always hidden from screen readers. */
+	icon?: IconInput | undefined;
+	title?: React$1.ReactNode | undefined;
+	children?: React$1.ReactNode | undefined;
+	/** Usually a secondary Button. */
+	action?: React$1.ReactNode | undefined;
+	/** Adds a close button. */
+	onDismiss?: (() => void) | undefined;
+	className?: string | undefined;
+}
+/** Other attributes (`id`, `data-*`, `aria-*`) go on the card's root (5.8). */
+export interface CardProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "title"> {
+	title?: React$1.ReactNode | undefined;
+	description?: React$1.ReactNode | undefined;
+	/** Top-right, usually an IconButton. */
+	actions?: React$1.ReactNode | undefined;
+	footer?: React$1.ReactNode | undefined;
+	children?: React$1.ReactNode | undefined;
+	/** Default `enterprise`. `creative` is for marketing and onboarding only. */
+	variant?: "enterprise" | "creative" | undefined;
+	/** Heading level of the title. Default 3 — use 2 when cards sit directly under the page h1. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** Hover edge for clickable cards. */
+	interactive?: boolean | undefined;
+	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	className?: string | undefined;
+	/** id for the title element; the card is then labelled by it (aria-labelledby). */
+	titleId?: string | undefined;
+}
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
@@ -10,6 +89,24 @@ export interface DateDisplayOptions {
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory" | undefined;
 }
+export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
+export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+	tone?: Tone | undefined;
+	/** soft (default) · solid · outline */
+	variant?: "soft" | "solid" | "outline" | undefined;
+	icon?: IconInput | undefined;
+}
+export interface EmptyStateProps {
+	title: React$1.ReactNode;
+	description?: React$1.ReactNode | undefined;
+	icon?: IconInput | undefined;
+	/** One or two buttons. */
+	action?: React$1.ReactNode | undefined;
+	size?: "sm" | "md" | undefined;
+	bordered?: boolean | undefined;
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	className?: string | undefined;
+}
 export interface ThemeOptions {
 	/** The project's brand colour, #rgb or #rrggbb. Replaces AURA violet (links, focus ring, selection, info, progress, creative shadow in dark, mesh). */
 	brand: string;
@@ -173,8 +270,28 @@ export declare const breakpoints: {
 	lg: 1024;
 	xl: 1280;
 };
+/** The class list of a Button (5.8): put it on your own link or `<Link>` to make it look like one, e.g. in a Server
+ * Component — `<Link href="/renew" className={buttonClass({ variant: 'secondary' })}>Renew</Link>`. */
+export declare function buttonClass(opts?: {
+	variant?: ButtonProps["variant"];
+	size?: ButtonProps["size"];
+	fullWidth?: boolean | undefined;
+	loading?: boolean | undefined;
+	className?: string | undefined;
+}): string;
+declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;
+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;
+export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
 
 export {
+	ServerAlert as Alert,
+	ServerBadge as Badge,
+	ServerCard as Card,
+	ServerEmptyState as EmptyState,
+	ServerStatusPill as StatusPill,
 	scale as brandScale,
 	toneFor as statusTone,
 };

package/dist/server/index.js

@@ -522,14 +522,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h = String(hex).trim().replace("#", "");
-  if (h.length === 3)
-    h = h.split("").map(function(c) {
+  let h3 = String(hex).trim().replace("#", "");
+  if (h3.length === 3)
+    h3 = h3.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h3)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h.slice(i, i + 2), 16) / 255;
+    return parseInt(h3.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -803,10 +803,212 @@ function colorSchemeScript(options) {
 
 // src/breakpoints.ts
 var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+
+// src/display.tsx
+import * as React2 from "react";
+
+// src/Icon.tsx
+import * as React from "react";
+
+// src/classes.ts
+function cx() {
+  return Array.prototype.filter.call(arguments, Boolean).join(" ");
+}
+function omit(src, keys) {
+  const out = {};
+  for (const k in src)
+    if (Object.prototype.hasOwnProperty.call(src, k) && keys.indexOf(k) < 0)
+      out[k] = src[k];
+  return out;
+}
+var TONES = ["neutral", "accent", "success", "warning", "danger"];
+function tone(t) {
+  return TONES.indexOf(t) >= 0 ? t : "neutral";
+}
+
+// src/Icon.tsx
+var h = React.createElement;
+var ICONS = { "check": [["path", { "d": "M20 6 9 17l-5-5" }]], "x": [["path", { "d": "M18 6 6 18" }], ["path", { "d": "m6 6 12 12" }]], "plus": [["path", { "d": "M5 12h14" }], ["path", { "d": "M12 5v14" }]], "minus": [["path", { "d": "M5 12h14" }]], "search": [["path", { "d": "m21 21-4.34-4.34" }], ["circle", { "cx": "11", "cy": "11", "r": "8" }]], "chevron-down": [["path", { "d": "m6 9 6 6 6-6" }]], "chevron-up": [["path", { "d": "m18 15-6-6-6 6" }]], "chevron-left": [["path", { "d": "m15 18-6-6 6-6" }]], "chevron-right": [["path", { "d": "m9 18 6-6-6-6" }]], "arrow-right": [["path", { "d": "M5 12h14" }], ["path", { "d": "m12 5 7 7-7 7" }]], "arrow-up-right": [["path", { "d": "M7 7h10v10" }], ["path", { "d": "M7 17 17 7" }]], "arrow-up-down": [["path", { "d": "m21 16-4 4-4-4" }], ["path", { "d": "M17 20V4" }], ["path", { "d": "m3 8 4-4 4 4" }], ["path", { "d": "M7 4v16" }]], "loader-circle": [["path", { "d": "M21 12a9 9 0 1 1-6.219-8.56" }]], "circle-alert": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["line", { "x1": "12", "x2": "12", "y1": "8", "y2": "12" }], ["line", { "x1": "12", "x2": "12.01", "y1": "16", "y2": "16" }]], "circle-check": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "m16 9-5.5 5.5L8 12" }]], "info": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 16v-4" }], ["path", { "d": "M12 8h.01" }]], "triangle-alert": [["path", { "d": "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }], ["path", { "d": "M12 9v4" }], ["path", { "d": "M12 17h.01" }]], "settings": [["path", { "d": "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "user": [["path", { "d": "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }], ["circle", { "cx": "12", "cy": "7", "r": "4" }]], "users": [["path", { "d": "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }], ["path", { "d": "M16 3.128a4 4 0 0 1 0 7.744" }], ["path", { "d": "M22 21v-2a4 4 0 0 0-3-3.87" }], ["circle", { "cx": "9", "cy": "7", "r": "4" }]], "filter": [["path", { "d": "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" }]], "ellipsis": [["circle", { "cx": "12", "cy": "12", "r": "1" }], ["circle", { "cx": "19", "cy": "12", "r": "1" }], ["circle", { "cx": "5", "cy": "12", "r": "1" }]], "external-link": [["path", { "d": "M15 3h6v6" }], ["path", { "d": "M10 14 21 3" }], ["path", { "d": "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }]], "copy": [["rect", { "width": "14", "height": "14", "x": "8", "y": "8", "rx": "2", "ry": "2" }], ["path", { "d": "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }]], "trash-2": [["path", { "d": "M10 11v6" }], ["path", { "d": "M14 11v6" }], ["path", { "d": "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }], ["path", { "d": "M3 6h18" }], ["path", { "d": "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }]], "pencil": [["path", { "d": "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }], ["path", { "d": "m15 5 4 4" }]], "download": [["path", { "d": "M12 15V3" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }], ["path", { "d": "m7 10 5 5 5-5" }]], "upload": [["path", { "d": "M12 3v12" }], ["path", { "d": "m17 8-5-5-5 5" }], ["path", { "d": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }]], "calendar": [["path", { "d": "M8 2v3" }], ["path", { "d": "M16 2v3" }], ["rect", { "x": "3", "y": "3", "width": "18", "height": "18", "rx": "2" }], ["path", { "d": "M3 9h18" }]], "bell": [["path", { "d": "M10.268 21a2 2 0 0 0 3.464 0" }], ["path", { "d": "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" }]], "menu": [["path", { "d": "M4 5h16" }], ["path", { "d": "M4 12h16" }], ["path", { "d": "M4 19h16" }]], "eye": [["path", { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }], ["circle", { "cx": "12", "cy": "12", "r": "3" }]], "log-out": [["path", { "d": "m16 17 5-5-5-5" }], ["path", { "d": "M21 12H9" }], ["path", { "d": "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }]], "circle": [["circle", { "cx": "12", "cy": "12", "r": "10" }]], "circle-dot-dashed": [["path", { "d": "M10.1 2.18a9.93 9.93 0 0 1 3.8 0" }], ["path", { "d": "M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7" }], ["path", { "d": "M21.82 10.1a9.93 9.93 0 0 1 0 3.8" }], ["path", { "d": "M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69" }], ["path", { "d": "M13.9 21.82a9.94 9.94 0 0 1-3.8 0" }], ["path", { "d": "M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7" }], ["path", { "d": "M2.18 13.9a9.93 9.93 0 0 1 0-3.8" }], ["path", { "d": "M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69" }], ["circle", { "cx": "12", "cy": "12", "r": "1" }]], "ban": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M4.929 4.929 19.07 19.071" }]], "arrow-up": [["path", { "d": "m5 12 7-7 7 7" }], ["path", { "d": "M12 19V5" }]], "arrow-down": [["path", { "d": "M12 5v14" }], ["path", { "d": "m19 12-7 7-7-7" }]], "inbox": [["polyline", { "points": "22 12 16 12 14 15 10 15 8 12 2 12" }], ["path", { "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" }]], "pin": [["path", { "d": "M12 17v5" }], ["path", { "d": "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" }]], "pin-off": [["path", { "d": "M12 17v5" }], ["path", { "d": "M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" }], ["path", { "d": "m2 2 20 20" }], ["path", { "d": "M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" }]], "eye-off": [["path", { "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }], ["path", { "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242" }], ["path", { "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }], ["path", { "d": "m2 2 20 20" }]], "columns-3": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }], ["path", { "d": "M9 3v18" }], ["path", { "d": "M15 3v18" }]], "arrow-left": [["path", { "d": "m12 19-7-7 7-7" }], ["path", { "d": "M19 12H5" }]], "rotate-ccw": [["path", { "d": "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }], ["path", { "d": "M3 3v5h5" }]], "house": [["path", { "d": "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" }], ["path", { "d": "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }]], "layout-dashboard": [["rect", { "width": "7", "height": "9", "x": "3", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "14", "y": "3", "rx": "1" }], ["rect", { "width": "7", "height": "9", "x": "14", "y": "12", "rx": "1" }], ["rect", { "width": "7", "height": "5", "x": "3", "y": "16", "rx": "1" }]], "folder": [["path", { "d": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }]], "chart-column": [["path", { "d": "M3 3v16a2 2 0 0 0 2 2h16" }], ["path", { "d": "M18 17V9" }], ["path", { "d": "M13 17V5" }], ["path", { "d": "M8 17v-3" }]], "file-text": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }], ["path", { "d": "M10 9H8" }], ["path", { "d": "M16 13H8" }], ["path", { "d": "M16 17H8" }]], "mail": [["path", { "d": "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" }], ["rect", { "x": "2", "y": "4", "width": "20", "height": "16", "rx": "2" }]], "lock": [["rect", { "width": "18", "height": "11", "x": "3", "y": "11", "rx": "2", "ry": "2" }], ["path", { "d": "M7 11V7a5 5 0 0 1 10 0v4" }]], "clock": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 6v6l4 2" }]], "trending-up": [["path", { "d": "M16 7h6v6" }], ["path", { "d": "m22 7-8.5 8.5-5-5L2 17" }]], "trending-down": [["path", { "d": "M16 17h6v-6" }], ["path", { "d": "m22 17-8.5-8.5-5 5L2 7" }]], "image": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2", "ry": "2" }], ["circle", { "cx": "9", "cy": "9", "r": "2" }], ["path", { "d": "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }]], "paperclip": [["path", { "d": "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }]], "cloud-upload": [["path", { "d": "M12 13v8" }], ["path", { "d": "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }], ["path", { "d": "m8 17 4-4 4 4" }]], "file": [["path", { "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }], ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }]], "sun": [["circle", { "cx": "12", "cy": "12", "r": "4" }], ["path", { "d": "M12 2v2" }], ["path", { "d": "M12 20v2" }], ["path", { "d": "m4.93 4.93 1.41 1.41" }], ["path", { "d": "m17.66 17.66 1.41 1.41" }], ["path", { "d": "M2 12h2" }], ["path", { "d": "M20 12h2" }], ["path", { "d": "m6.34 17.66-1.41 1.41" }], ["path", { "d": "m19.07 4.93-1.41 1.41" }]], "moon": [["path", { "d": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" }]], "monitor": [["rect", { "width": "20", "height": "14", "x": "2", "y": "3", "rx": "2" }], ["line", { "x1": "8", "x2": "16", "y1": "21", "y2": "21" }], ["line", { "x1": "12", "x2": "12", "y1": "17", "y2": "21" }]], "panel-left-close": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }], ["path", { "d": "M9 3v18" }], ["path", { "d": "m16 15-3-3 3-3" }]], "panel-left-open": [["rect", { "width": "18", "height": "18", "x": "3", "y": "3", "rx": "2" }], ["path", { "d": "M9 3v18" }], ["path", { "d": "m14 9 3 3-3 3" }]], "server": [["rect", { "width": "20", "height": "8", "x": "2", "y": "2", "rx": "2", "ry": "2" }], ["rect", { "width": "20", "height": "8", "x": "2", "y": "14", "rx": "2", "ry": "2" }], ["line", { "x1": "6", "x2": "6.01", "y1": "6", "y2": "6" }], ["line", { "x1": "6", "x2": "6.01", "y1": "18", "y2": "18" }]], "globe": [["circle", { "cx": "12", "cy": "12", "r": "10" }], ["path", { "d": "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }], ["path", { "d": "M2 12h20" }]], "activity": [["path", { "d": "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" }]], "shield-alert": [["path", { "d": "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }], ["path", { "d": "M12 8v4" }], ["path", { "d": "M12 16h.01" }]], "phone": [["path", { "d": "M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" }]], "wrench": [["path", { "d": "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z" }]] };
+var SIZES = { sm: 16, md: 20, lg: 24 };
+var Icon = React.forwardRef(function Icon2(props, ref) {
+  const size = SIZES[props.size] || props.size || 16;
+  if (React.isValidElement(props.name)) {
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: cx("aura-icon", "aura-icon--custom", props.className),
+        style: { width: size, height: size, ["--aura-icon-stroke"]: props.strokeWidth || 2 },
+        ...props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true }
+      },
+      props.name
+    );
+  }
+  const shapes = ICONS[props.name];
+  if (!shapes) return null;
+  const a11y = props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true, focusable: "false" };
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: props.strokeWidth || 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cx("aura-icon", props.className),
+      ...a11y
+    },
+    shapes.map(function(s, i) {
+      const attrs = { key: i };
+      for (const k in s[1]) attrs[k === "stroke-width" ? "strokeWidth" : k] = s[1][k];
+      return h(s[0], attrs);
+    })
+  );
+});
+var iconNames = Object.keys(ICONS);
+
+// src/display.tsx
+var h2 = React2.createElement;
+var ALERT_ICON = {
+  info: "info",
+  success: "circle-check",
+  warning: "triangle-alert",
+  danger: "circle-alert"
+};
+function alertElement(props, ref, close) {
+  const tone2 = props.tone || "info";
+  const rest = omit(props, ["tone", "title", "children", "action", "onDismiss", "className", "role", "icon"]);
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: cx("aura-alert", "aura-alert--" + tone2, props.className),
+      role: props.role || (tone2 === "danger" || tone2 === "warning" ? "alert" : "status")
+    },
+    /* @__PURE__ */ React2.createElement(Icon, { name: props.icon || ALERT_ICON[tone2], className: "aura-alert__icon" }),
+    /* @__PURE__ */ React2.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React2.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React2.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React2.createElement("div", { className: "aura-alert__action" }, props.action) : null),
+    close
+  );
+}
+function cardElement(props, ref) {
+  const creative = props.variant === "creative";
+  const rest = omit(props, [
+    "title",
+    "description",
+    "actions",
+    "footer",
+    "children",
+    "variant",
+    "headingLevel",
+    "interactive",
+    "as",
+    "className",
+    "titleId"
+  ]);
+  return h2(
+    props.as || "section",
+    Object.assign({}, rest, {
+      ref,
+      className: cx(
+        "aura-card",
+        creative && "aura-card--creative",
+        props.interactive && "is-interactive",
+        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"]
+    }),
+    props.title || props.actions ? /* @__PURE__ */ React2.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React2.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__ */ React2.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React2.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
+    props.children ? /* @__PURE__ */ React2.createElement("div", { className: "aura-card__body" }, props.children) : null,
+    props.footer ? /* @__PURE__ */ React2.createElement("div", { className: "aura-card__foot" }, props.footer) : null
+  );
+}
+var PILL_ICON = {
+  neutral: "circle",
+  progress: "circle-dot-dashed",
+  ready: "circle-check",
+  warning: "triangle-alert",
+  blocked: "ban"
+};
+function statusPillElement(props, ref) {
+  const tone2 = props.tone || toneFor(props.children);
+  const rest = omit(props, ["tone", "className", "children"]);
+  return /* @__PURE__ */ React2.createElement("span", { ...rest, ref, className: cx("aura-pill", "aura-pill--" + tone2, props.className) }, /* @__PURE__ */ React2.createElement(Icon, { name: PILL_ICON[tone2] || "circle", size: 12 }), props.children);
+}
+function badgeElement(props, ref) {
+  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+  return /* @__PURE__ */ React2.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx(
+        "aura-badge",
+        "aura-badge--" + tone(props.tone),
+        props.variant === "solid" && "is-solid",
+        props.variant === "outline" && "is-outline",
+        props.className
+      )
+    },
+    props.icon ? /* @__PURE__ */ React2.createElement(Icon, { name: props.icon, size: 12 }) : null,
+    props.children
+  );
+}
+function emptyStateElement(props, ref) {
+  const HT = "h" + (props.headingLevel || 3);
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      ref,
+      className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
+    },
+    /* @__PURE__ */ React2.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React2.createElement(Icon, { name: props.icon || "inbox", size: props.size === "sm" ? "md" : "lg" })),
+    /* @__PURE__ */ React2.createElement(HT, { className: "aura-empty__title" }, props.title),
+    props.description ? /* @__PURE__ */ React2.createElement("p", { className: "aura-empty__text" }, props.description) : null,
+    props.action ? /* @__PURE__ */ React2.createElement("div", { className: "aura-empty__action" }, props.action) : 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.loading && "is-loading",
+    opts.className
+  );
+}
+function ServerAlert(props) {
+  return alertElement(props, void 0, null);
+}
+function ServerCard(props) {
+  return cardElement(props, void 0);
+}
+function ServerStatusPill(props) {
+  return statusPillElement(props, void 0);
+}
+function ServerBadge(props) {
+  return badgeElement(props, void 0);
+}
+function ServerEmptyState(props) {
+  return emptyStateElement(props, void 0);
+}
 export {
+  ServerAlert as Alert,
+  ServerBadge as Badge,
+  ServerCard as Card,
+  ServerEmptyState as EmptyState,
+  Icon,
   STRINGS,
+  ServerStatusPill as StatusPill,
   scale as brandScale,
   breakpoints,
+  buttonClass,
   colorSchemeScript,
   contrast,
   createTheme,

package/dist/styles.css

@@ -1476,6 +1476,40 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl .is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
 .aura-tbl-wrap[data-density='compact'] .aura-tbl__th, .aura-tbl-wrap[data-density='compact'] .aura-tbl__td { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
 .aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
+/* Stacked rows (5.8, Chamber-OS 67): below `stackBelow` (the table's own box: sm 640px, md 768px) each body row is a
+ * card and each cell shows its column label. The column headers stay for screen readers (visually hidden) and the
+ * table keeps explicit roles. The box is a size container, so it needs a width of its own. */
+.aura-tbl-wrap.is-stackable { container: aura-tbl / inline-size; width: 100%; }
+@container aura-tbl (width < 768px) {
+  .aura-tbl--stack-md, .aura-tbl--stack-md > .aura-tbl__body, .aura-tbl--stack-md > .aura-tbl__foot, .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { display: block; }
+  .aura-tbl--stack-md > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-tbl--stack-md > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-space-3) var(--aura-space-4); }
+  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--stack-md > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
+  .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
+  .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
+    content: attr(data-label); content: attr(data-label) / '';
+    display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
+  }
+}
+@container aura-tbl (width < 640px) {
+  .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
+  .aura-tbl--stack-sm > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-tbl--stack-sm > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-space-3) var(--aura-space-4); }
+  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--stack-sm > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
+  .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
+  .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
+    content: attr(data-label); content: attr(data-label) / '';
+    display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
+  }
+}
 
 /* ---------- 4.20: DataTable width queries and cards, one markup ---------- */
 /* Each .aura-table-q is the table's width × 10000 / its threshold (DataTable.tsx, Q), so `(width < 9999.5px)` is true

package/dist/styles.layer.css

@@ -1478,6 +1478,40 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl .is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
 .aura-tbl-wrap[data-density='compact'] .aura-tbl__th, .aura-tbl-wrap[data-density='compact'] .aura-tbl__td { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
 .aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
+/* Stacked rows (5.8, Chamber-OS 67): below `stackBelow` (the table's own box: sm 640px, md 768px) each body row is a
+ * card and each cell shows its column label. The column headers stay for screen readers (visually hidden) and the
+ * table keeps explicit roles. The box is a size container, so it needs a width of its own. */
+.aura-tbl-wrap.is-stackable { container: aura-tbl / inline-size; width: 100%; }
+@container aura-tbl (width < 768px) {
+  .aura-tbl--stack-md, .aura-tbl--stack-md > .aura-tbl__body, .aura-tbl--stack-md > .aura-tbl__foot, .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { display: block; }
+  .aura-tbl--stack-md > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-tbl--stack-md > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-space-3) var(--aura-space-4); }
+  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--stack-md > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
+  .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
+  .aura-tbl--stack-md > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
+    content: attr(data-label); content: attr(data-label) / '';
+    display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
+  }
+}
+@container aura-tbl (width < 640px) {
+  .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
+  .aura-tbl--stack-sm > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .aura-tbl--stack-sm > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { padding: var(--aura-space-3) var(--aura-space-4); }
+  .aura-tbl-wrap[data-density='compact'] > .aura-tbl--stack-sm > * > .aura-tbl__row { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
+  .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
+  .aura-tbl--stack-sm > * > .aura-tbl__row > * + * { margin-top: var(--aura-space-2); }
+  .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row > .aura-tbl__th { font-size: 14px; font-weight: 600; }
+  .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td[data-label]::before {
+    content: attr(data-label); content: attr(data-label) / '';
+    display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
+  }
+}
 
 /* ---------- 4.20: DataTable width queries and cards, one markup ---------- */
 /* Each .aura-table-q is the table's width × 10000 / its threshold (DataTable.tsx, Q), so `(width < 9999.5px)` is true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.7.2",
+  "version": "5.8.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",