@jirawatpyk/aura-react 5.51.0 → 5.52.0

package/dist/server/index.js

@@ -576,14 +576,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h6 = String(hex).trim().replace("#", "");
-  if (h6.length === 3)
-    h6 = h6.split("").map(function(c) {
+  let h7 = String(hex).trim().replace("#", "");
+  if (h7.length === 3)
+    h7 = h7.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h6)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h7)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h6.slice(i, i + 2), 16) / 255;
+    return parseInt(h7.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1375,10 +1375,171 @@ var Container = React4.forwardRef(function Container2(props, ref) {
   );
 });
 
-// src/PageHeader.tsx
+// src/TableSkeleton.tsx
 import * as React5 from "react";
 var h4 = React5.createElement;
-var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
+function inertProps() {
+  return { inert: parseInt(React5.version, 10) >= 19 ? true : "", "aria-hidden": true };
+}
+function widthOf(w) {
+  return w == null || w === "" ? void 0 : typeof w === "number" ? w + "px" : w;
+}
+function skeletonColgroup(cols) {
+  return h4(
+    "colgroup",
+    null,
+    cols.map(function(c, i) {
+      const w = widthOf(c.width);
+      return h4("col", { key: i, style: w ? { width: w } : void 0 });
+    })
+  );
+}
+function placeholder(c) {
+  const s = c.skeleton || {};
+  if (s.kind === "pill") return h4("span", { className: "aura-skel aura-skel--pill" });
+  if (s.kind === "action") return h4("span", { className: cx("aura-skel aura-skel--action", s.touch && "is-touch") });
+  if (s.lines === 2)
+    return h4(
+      "span",
+      { className: "aura-skel-lines" },
+      h4("span", { className: "aura-skel aura-skel--text", style: { width: "100%" } }),
+      h4("span", { className: "aura-skel aura-skel--text", style: { width: "60%" } })
+    );
+  return h4("span", { className: "aura-skel aura-skel--text", style: { width: "80%" } });
+}
+function cellCls(base, c) {
+  const align = c.align || (c.numeric ? "end" : void 0);
+  return cx(base, align === "end" && "is-end", align === "center" && "is-center", c.numeric && "is-numeric");
+}
+function skeletonBody(cols, n3, stacked) {
+  const rows = [];
+  for (let r2 = 0; r2 < n3; r2++)
+    rows.push(
+      h4(
+        "tr",
+        { key: r2, className: "aura-tbl__row aura-tbl__row--skeleton", role: stacked ? "row" : void 0 },
+        cols.map(function(c, i) {
+          const slot = stacked && (c.card === "title" || c.card === "action") ? c.card : void 0;
+          return h4(
+            "td",
+            {
+              key: i,
+              className: cellCls("aura-tbl__td", c),
+              role: stacked ? "cell" : void 0,
+              "data-label": stacked && !slot && c.label ? c.label : void 0,
+              "data-card": slot
+            },
+            placeholder(c)
+          );
+        })
+      )
+    );
+  return h4(
+    "tbody",
+    { key: "aura-skeleton", className: "aura-tbl__body", role: stacked ? "rowgroup" : void 0 },
+    rows
+  );
+}
+function tableWrapClass(p) {
+  return cx(
+    "aura-tbl-wrap",
+    p.stackBelow && "is-stackable",
+    p.bordered === false && "is-flush",
+    p.bleed && "aura-bleed-frame",
+    p.bleed && !p.cards && "aura-bleed",
+    p.bleed && p.bleedEnd && !p.cards && "aura-bleed-end"
+  );
+}
+function tableClass(p) {
+  return cx(
+    "aura-tbl",
+    p.stackBelow && "aura-tbl--stack-" + p.stackBelow,
+    (p.align === "middle" || p.rowHeight === "density" && p.align !== "top") && "aura-tbl--middle",
+    p.rowHeight === "density" && "aura-tbl--row-density",
+    p.cards && "aura-tbl--cards",
+    p.className
+  );
+}
+function cardsFrame(el, p) {
+  return p.cards ? h4(
+    "div",
+    {
+      className: cx(
+        "aura-tbl-cards aura-tbl-cards--" + p.stackBelow,
+        p.bleed && "aura-bleed",
+        p.bleed && p.bleedEnd && "aura-bleed-end"
+      )
+    },
+    el
+  ) : el;
+}
+function TableSkeleton(props) {
+  const cols = props.columns || [];
+  const n3 = props.rows != null ? Math.max(0, props.rows) : 5;
+  const stacked = !!props.stackBelow;
+  const cards = stacked && props.stackStyle === "cards";
+  const head = h4(
+    "thead",
+    { className: "aura-tbl__head", role: stacked ? "rowgroup" : void 0 },
+    h4(
+      "tr",
+      { className: "aura-tbl__row", role: stacked ? "row" : void 0 },
+      cols.map(function(c, i) {
+        return h4(
+          "th",
+          { key: i, scope: "col", className: cellCls("aura-tbl__th", c), role: stacked ? "columnheader" : void 0 },
+          c.label
+        );
+      })
+    )
+  );
+  const table = h4(
+    "div",
+    Object.assign(
+      {
+        className: tableWrapClass({
+          stackBelow: props.stackBelow,
+          bordered: props.bordered,
+          bleed: props.bleed,
+          bleedEnd: props.bleedEnd,
+          cards
+        }),
+        "data-density": props.density || "comfortable"
+      },
+      inertProps()
+    ),
+    h4(
+      "table",
+      {
+        className: cx(
+          tableClass({
+            stackBelow: props.stackBelow,
+            align: props.align,
+            rowHeight: props.rowHeight,
+            cards,
+            className: props.className
+          }),
+          "aura-tbl--skeleton"
+        ),
+        role: stacked ? "table" : void 0
+      },
+      skeletonColgroup(cols),
+      head,
+      skeletonBody(cols, n3, stacked)
+    )
+  );
+  return cardsFrame(table, {
+    stackBelow: props.stackBelow,
+    bleed: props.bleed,
+    bleedEnd: props.bleedEnd,
+    cards
+  });
+}
+
+// src/PageHeader.tsx
+import * as React6 from "react";
+var h5 = React6.createElement;
+var PageHeader = React6.forwardRef(function PageHeader2(props, ref) {
   const attrs2 = {};
   Object.keys(props).forEach(function(k) {
     if (k === "id" || k === "lang" || k === "dir" || k === "role" || /^(aria|data)-/.test(k))
@@ -1394,7 +1555,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
   const size = props.size === "compact" || props.size === "hero" || props.size === "hero-lg" ? props.size : null;
   const eyebrow = props.eyebrow;
   const plainEyebrow = typeof eyebrow === "string" || typeof eyebrow === "number";
-  const heading = h4(
+  const heading = h5(
     "h" + level,
     {
       className: "aura-page-header__title",
@@ -1406,7 +1567,7 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
   );
   const hasActions = props.actions != null && props.actions !== false;
   const bar = hasActions && (props.actionsBarBelow === "sm" || props.actionsBarBelow === "md") ? props.actionsBarBelow : null;
-  return h4(
+  return h5(
     "div",
     Object.assign(attrs2, {
       ref,
@@ -1423,32 +1584,32 @@ var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
       ),
       style: props.style
     }),
-    h4(
+    h5(
       "div",
       { className: "aura-page-header__text" },
-      props.breadcrumb != null && props.breadcrumb !== false ? h4("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
-      shown(eyebrow) ? plainEyebrow ? h4("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h4("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
-      shown(props.titleAddon) ? h4(
+      props.breadcrumb != null && props.breadcrumb !== false ? h5("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
+      shown(eyebrow) ? plainEyebrow ? h5("p", { className: "aura-page-header__eyebrow" }, eyebrow) : h5("div", { className: "aura-page-header__eyebrow aura-page-header__eyebrow--rich" }, eyebrow) : null,
+      shown(props.titleAddon) ? h5(
         "div",
         { className: "aura-page-header__title-row" },
         heading,
-        h4("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
+        h5("div", { className: "aura-page-header__title-addon" }, props.titleAddon)
       ) : heading,
-      shown(props.subtitle) ? h4("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
-      props.meta != null && props.meta !== false ? h4("div", { className: "aura-page-header__meta" }, props.meta) : null
+      shown(props.subtitle) ? h5("div", { className: "aura-page-header__subtitle" }, props.subtitle) : null,
+      props.meta != null && props.meta !== false ? h5("div", { className: "aura-page-header__meta" }, props.meta) : null
     ),
-    props.actions != null && props.actions !== false ? h4(
+    props.actions != null && props.actions !== false ? h5(
       "div",
       { className: "aura-page-header__actions" },
-      bar && props.actionsStatus != null && props.actionsStatus !== false ? h4("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
+      bar && props.actionsStatus != null && props.actionsStatus !== false ? h5("div", { className: "aura-page-header__status", role: "status" }, props.actionsStatus) : null,
       props.actions
     ) : null
   );
 });
 
 // src/tiles.tsx
-import * as React6 from "react";
-var h5 = React6.createElement;
+import * as React7 from "react";
+var h6 = React7.createElement;
 var STATUS_ICON = {
   down: IconCircleAlert,
   problem: IconTriangleAlert,
@@ -1481,7 +1642,7 @@ function attrs(props) {
   });
   return out;
 }
-var comma = h5("span", { className: "aura-status-tile__sep" }, ",");
+var comma = h6("span", { className: "aura-status-tile__sep" }, ",");
 function statusTileElement(props, ref, Link, t, titleRef) {
   const status = STATUS_ICON[props.status] ? props.status : "unknown";
   if (status !== props.status)
@@ -1497,43 +1658,43 @@ function statusTileElement(props, ref, Link, t, titleRef) {
   };
   const hasValue = has(props.value), hasMeta = has(props.meta);
   const Tag = props.href ? Link : "div";
-  return h5(
+  return h6(
     Tag,
     Object.assign(attrs(props), {
       ref,
       href: props.href,
       className: cx("aura-status-tile", "aura-status-tile--" + status, props.href && "is-interactive", props.className)
     }),
-    h5(
+    h6(
       "span",
       { className: "aura-status-tile__head" },
-      h5(Icon, { name: h5(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
-      h5("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
-      h5("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
-      hasValue ? h5(
+      h6(Icon, { name: h6(STATUS_ICON[status]), size: 16, className: "aura-status-tile__icon" }),
+      h6("span", { className: "aura-status-tile__title", ref: titleRef }, props.title, comma),
+      h6("span", { className: "aura-sr-only" }, word + (hasValue || hasMeta || markers.length ? "," : "")),
+      hasValue ? h6(
         "span",
         { className: cx("aura-status-tile__value", "is-" + valueTone) },
         props.value,
         hasMeta || markers.length ? comma : null
       ) : null
     ),
-    hasMeta || markers.length ? h5(
+    hasMeta || markers.length ? h6(
       "span",
       { className: "aura-status-tile__foot" },
-      hasMeta ? h5("span", { className: "aura-status-tile__meta" }, props.meta, markers.length ? comma : null) : null,
-      markers.length ? h5(
+      hasMeta ? h6("span", { className: "aura-status-tile__meta" }, props.meta, markers.length ? comma : null) : null,
+      markers.length ? h6(
         "span",
         { className: "aura-status-tile__markers" },
         markers.map(function(m, i) {
-          return h5(
+          return h6(
             "span",
             {
               key: i,
               className: cx("aura-status-tile__marker", "is-" + (m.tone || "neutral")),
               "data-aura-tip": m.label
             },
-            h5(Icon, { name: m.icon, size: 14 }),
-            h5("span", { className: "aura-sr-only" }, m.label + (i < markers.length - 1 ? "," : ""))
+            h6(Icon, { name: m.icon, size: 14 }),
+            h6("span", { className: "aura-sr-only" }, m.label + (i < markers.length - 1 ? "," : ""))
           );
         })
       ) : null
@@ -1543,13 +1704,13 @@ function statusTileElement(props, ref, Link, t, titleRef) {
 function ServerStatusTile(props) {
   return statusTileElement(props, void 0, props.linkComponent || "a", STRINGS.en);
 }
-var TileGrid = React6.forwardRef(function TileGrid2(props, ref) {
+var TileGrid = React7.forwardRef(function TileGrid2(props, ref) {
   const style = Object.assign(
     {},
     respVars("aura-grid-cols", props.columns == null ? { base: 2, md: 3 } : props.columns),
     props.style
   );
-  return h5(
+  return h6(
     "ul",
     Object.assign(attrs(props), {
       ref,
@@ -1559,16 +1720,16 @@ var TileGrid = React6.forwardRef(function TileGrid2(props, ref) {
     }),
     /* toArray drops null and booleans and keys each element; a Fragment's children are items too. */
     flat(props.children).map(function(c, i) {
-      return h5("li", { key: React6.isValidElement(c) && c.key != null ? c.key : i }, c);
+      return h6("li", { key: React7.isValidElement(c) && c.key != null ? c.key : i }, c);
     })
   );
 });
 function flat(children) {
   const out = [];
-  React6.Children.toArray(children).forEach(function(c) {
-    if (React6.isValidElement(c) && c.type === React6.Fragment)
+  React7.Children.toArray(children).forEach(function(c) {
+    if (React7.isValidElement(c) && c.type === React7.Fragment)
       flat(c.props.children).forEach(function(x) {
-        out.push(React6.isValidElement(x) ? React6.cloneElement(x, { key: String(c.key) + "/" + String(x.key) }) : x);
+        out.push(React7.isValidElement(x) ? React7.cloneElement(x, { key: String(c.key) + "/" + String(x.key) }) : x);
       });
     else if (c !== "") out.push(c);
   });
@@ -1582,7 +1743,7 @@ function r(n3) {
 function num(v) {
   return typeof v === "number" && isFinite(v) ? v : null;
 }
-var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
+var Sparkline = React7.forwardRef(function Sparkline2(props, ref) {
   const wh = SIZES2[props.size || "sm"] || SIZES2.sm;
   const W = wh[0], H = wh[1];
   const data = (props.data || []).map(num);
@@ -1612,7 +1773,7 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
   data.forEach(function(v, i) {
     if (v == null) return;
     const prev = i > 0 && data[i - 1] != null, next = i < n3 - 1 && data[i + 1] != null;
-    if (!prev && !next) dots.push(h5("circle", { key: "d" + i, cx: r(x(i)), cy: r(y(v)), r: 1.5 }));
+    if (!prev && !next) dots.push(h6("circle", { key: "d" + i, cx: r(x(i)), cy: r(y(v)), r: 1.5 }));
     else d += (prev ? "L" : "M") + r(x(i)) + " " + r(y(v));
   });
   const mode = props.failures || "none";
@@ -1622,10 +1783,10 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
       if (!props.failed[i]) return;
       if (mode === "band") {
         const w = Math.max(2, step || W), left = Math.max(0, x(i) - w / 2), right = Math.min(W, x(i) + w / 2);
-        fails.push(h5("rect", { key: "f" + i, x: r(left), y: 0, width: r(right - left), height: H }));
+        fails.push(h6("rect", { key: "f" + i, x: r(left), y: 0, width: r(right - left), height: H }));
       } else
         fails.push(
-          h5("rect", {
+          h6("rect", {
             key: "f" + i,
             x: r(Math.max(0, Math.min(W - 1.5, x(i) - 0.75))),
             y: H - 6,
@@ -1635,7 +1796,7 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
         );
     });
   const named = !!props.label;
-  return h5(
+  return h6(
     "svg",
     Object.assign(attrs(props), {
       ref,
@@ -1648,10 +1809,10 @@ var Sparkline = React6.forwardRef(function Sparkline2(props, ref) {
       "aria-hidden": named ? void 0 : true,
       focusable: "false"
     }),
-    fails.length && mode === "band" ? h5("g", { className: "aura-sparkline__band" }, fails) : null,
-    d ? h5("path", { className: "aura-sparkline__line", d }) : null,
-    dots.length ? h5("g", { className: "aura-sparkline__dots" }, dots) : null,
-    fails.length && mode === "ticks" ? h5("g", { className: "aura-sparkline__ticks" }, fails) : null
+    fails.length && mode === "band" ? h6("g", { className: "aura-sparkline__band" }, fails) : null,
+    d ? h6("path", { className: "aura-sparkline__line", d }) : null,
+    dots.length ? h6("g", { className: "aura-sparkline__dots" }, dots) : null,
+    fails.length && mode === "ticks" ? h6("g", { className: "aura-sparkline__ticks" }, fails) : null
   );
 });
 export {
@@ -1668,6 +1829,7 @@ export {
   ServerStat as Stat,
   ServerStatusPill as StatusPill,
   ServerStatusTile as StatusTile,
+  TableSkeleton,
   TileGrid,
   scale as brandScale,
   breakpoints,

package/dist/styles.css

@@ -2168,6 +2168,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     var(--aura-tbl-bg, var(--aura-bg-surface));
 }
 .aura-tbl { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: max(13px, .8125rem); line-height: max(20px, 1.25rem); }
+/* 5.52 (Chamber-OS 164): a loading Table has no content to size its columns from, so they take the head's widths
+ * (or even shares); each placeholder bar sits on the row's 20px line, so a skeleton row is as tall as a text row. */
+.aura-tbl--skeleton { table-layout: fixed; }
+.aura-tbl__row--skeleton .aura-skel--text { display: block; margin: 5px 0; margin: calc((1lh - 10px) / 2) 0; }
+.aura-tbl__row--skeleton .aura-tbl__td.is-end > .aura-skel--text { margin-inline-start: auto; }
+.aura-tbl__row--skeleton .aura-tbl__td.is-end > .aura-skel-lines { align-items: flex-end; }
 .aura-tbl__caption { caption-side: top; padding: var(--aura-space-4) var(--aura-space-6) var(--aura-space-3); text-align: left; font-size: max(14px, .875rem); font-weight: 600; }
 /* 5.30: from 640px a cell is at least 10ch wide, so the table never squeezes a column to one letter; a longer word (an
  * email, a URL) still breaks to fit instead of widening the table. Phones keep fitting the box: use stackBelow there. */

package/dist/styles.layer.css

@@ -2170,6 +2170,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     var(--aura-tbl-bg, var(--aura-bg-surface));
 }
 .aura-tbl { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: max(13px, .8125rem); line-height: max(20px, 1.25rem); }
+/* 5.52 (Chamber-OS 164): a loading Table has no content to size its columns from, so they take the head's widths
+ * (or even shares); each placeholder bar sits on the row's 20px line, so a skeleton row is as tall as a text row. */
+.aura-tbl--skeleton { table-layout: fixed; }
+.aura-tbl__row--skeleton .aura-skel--text { display: block; margin: 5px 0; margin: calc((1lh - 10px) / 2) 0; }
+.aura-tbl__row--skeleton .aura-tbl__td.is-end > .aura-skel--text { margin-inline-start: auto; }
+.aura-tbl__row--skeleton .aura-tbl__td.is-end > .aura-skel-lines { align-items: flex-end; }
 .aura-tbl__caption { caption-side: top; padding: var(--aura-space-4) var(--aura-space-6) var(--aura-space-3); text-align: left; font-size: max(14px, .875rem); font-weight: 600; }
 /* 5.30: from 640px a cell is at least 10ch wide, so the table never squeezes a column to one letter; a longer word (an
  * email, a URL) still breaks to fit instead of widening the table. Phones keep fitting the box: use stackBelow there. */

package/package.json

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