@jirawatpyk/aura-tokens 5.4.0 → 5.6.0

package/aura-tailwind.css

@@ -1,4 +1,4 @@
-/* AURA v5.4.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand.
+/* AURA v5.6.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand.
  *   @import "tailwindcss";
  *   @import "@jirawatpyk/aura-tokens/tailwind.css";
  * Gives bg-bg-surface, text-fg-primary, border-border-strong, p-aura-6, rounded-aura-xl, shadow-aura-overlay,

package/aura-tailwind.prefixed.css

@@ -1,4 +1,4 @@
-/* AURA v5.4.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.mts. Do not edit by hand.
+/* AURA v5.6.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.mts. Do not edit by hand.
  * For apps that already have a Tailwind theme (shadcn): nothing here redefines an existing name.
  *   @layer aura-tokens, theme, base, aura, components, utilities;
  *   @import "tailwindcss";

package/aura.css

@@ -1,4 +1,4 @@
-/* AURA v5.4.0 — GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand. */
+/* AURA v5.6.0 — GENERATED by scripts/build-tokens.mts from tokens.json. Do not edit by hand. */
 /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
 
 :root, [data-theme="light"] {

package/components/aura.bundle.js

@@ -68,7 +68,7 @@ window.Aura = (() => {
     Combobox: () => Combobox,
     Command: () => Command,
     Container: () => Container,
-    DataTable: () => DataTable,
+    DataTable: () => DataTable2,
     DatePicker: () => DatePicker,
     DateRangePicker: () => DateRangePicker,
     Dialog: () => Dialog,
@@ -3079,10 +3079,35 @@ window.Aura = (() => {
     promote();
     emitToasts();
   };
+  var hotkeyOrigin = /* @__PURE__ */ new WeakMap();
+  function outsideToaster(el) {
+    return el && el !== document.body && !el.closest(".aura-toaster") ? el : null;
+  }
   function ToastItem(props) {
     const str = useStrings();
+    const Link = useLinkComponent();
+    const node = React19.useRef(null);
+    const origin = React19.useRef(null);
+    useIsoLayoutEffect(function() {
+      origin.current = outsideToaster(document.activeElement);
+      const el = node.current;
+      return function() {
+        if (!el || !el.contains(document.activeElement)) return;
+        const back = [hotkeyOrigin.get(el), origin.current].filter(function(b) {
+          return !!b && b.isConnected;
+        })[0];
+        hotkeyOrigin.delete(el);
+        setTimeout(function() {
+          if (back && back.isConnected && (!document.activeElement || document.activeElement === document.body))
+            back.focus();
+        }, 0);
+      };
+    }, []);
     const t = props.toast, timer = React19.useRef(null), left = React19.useRef(t.duration || 5e3), since = React19.useRef(0);
-    const hover = React19.useRef(false);
+    const hover = React19.useRef(false), focused = React19.useRef(false);
+    function syncFocus() {
+      if (focused.current && !(node.current && node.current.contains(document.activeElement))) focused.current = false;
+    }
     function start() {
       if (left.current === Infinity || timer.current) return;
       since.current = Date.now();
@@ -3091,11 +3116,10 @@ window.Aura = (() => {
       }, left.current);
     }
     function resume() {
-      hover.current = false;
-      start();
+      syncFocus();
+      if (!hover.current && !focused.current) start();
     }
     function pause() {
-      hover.current = true;
       if (timer.current) {
         clearTimeout(timer.current);
         timer.current = null;
@@ -3107,23 +3131,56 @@ window.Aura = (() => {
         if (timer.current) clearTimeout(timer.current);
         timer.current = null;
         left.current = t.duration || 5e3;
-        if (!hover.current) start();
+        syncFocus();
+        if (!hover.current && !focused.current) start();
         return function() {
           if (timer.current) clearTimeout(timer.current);
         };
       },
       [t.rev]
     );
+    const rich = t.description != null && typeof t.description !== "boolean" && t.description !== "";
+    const actions = (t.actions && t.actions.length ? t.actions : t.action ? [t.action] : []).slice(0, 2);
+    function run(a) {
+      if (a.onClick) a.onClick();
+      if (a.dismiss !== false) toast.dismiss(t.id);
+    }
     return /* @__PURE__ */ React19.createElement(
       "div",
       {
-        className: cx("aura-toast", "aura-toast--" + t.tone, t.loading && "is-loading"),
+        ref: node,
+        onKeyDown: function(e) {
+          if (e.key === "Escape") {
+            e.stopPropagation();
+            toast.dismiss(t.id);
+          }
+        },
+        className: cx(
+          "aura-toast",
+          "aura-toast--" + t.tone,
+          t.loading && "is-loading",
+          /* Two actions, or one beside a description, go on their own row under the text so it keeps its width. */
+          (actions.length > 1 || actions.length && rich) && "has-action-row"
+        ),
         role: t.tone === "danger" ? "alert" : "status",
         "aria-busy": t.loading || void 0,
-        onMouseEnter: pause,
-        onMouseLeave: resume,
-        onFocus: pause,
-        onBlur: resume
+        onMouseEnter: function() {
+          hover.current = true;
+          pause();
+        },
+        onMouseLeave: function() {
+          hover.current = false;
+          resume();
+        },
+        onFocus: function() {
+          focused.current = true;
+          pause();
+        },
+        onBlur: function(e) {
+          if (node.current && e.relatedTarget && node.current.contains(e.relatedTarget)) return;
+          focused.current = false;
+          resume();
+        }
       },
       /* @__PURE__ */ React19.createElement(
         Icon,
@@ -3132,19 +3189,33 @@ window.Aura = (() => {
           className: cx("aura-toast__icon", t.loading && "aura-spin")
         }
       ),
-      /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__text" }, t.description) : null),
-      t.action ? /* @__PURE__ */ React19.createElement(
-        "button",
-        {
-          type: "button",
-          className: "aura-toast__action",
-          onClick: function() {
-            t.action.onClick && t.action.onClick();
-            toast.dismiss(t.id);
-          }
-        },
-        t.action.label
-      ) : null,
+      /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React19.createElement("p", { className: "aura-toast__title" }, t.title), rich ? /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__text" }, t.description) : null),
+      actions.length ? /* @__PURE__ */ React19.createElement("div", { className: "aura-toast__actions" }, actions.map(function(a, i) {
+        return a.href ? /* @__PURE__ */ React19.createElement(
+          Link,
+          {
+            key: i,
+            href: a.href,
+            className: "aura-toast__action",
+            onClick: function(e) {
+              if (plainClick(e)) run(a);
+              else if (a.onClick) a.onClick();
+            }
+          },
+          a.label
+        ) : /* @__PURE__ */ React19.createElement(
+          "button",
+          {
+            key: i,
+            type: "button",
+            className: "aura-toast__action",
+            onClick: function() {
+              run(a);
+            }
+          },
+          a.label
+        );
+      })) : null,
       /* @__PURE__ */ React19.createElement(
         IconButton,
         {
@@ -3158,7 +3229,22 @@ window.Aura = (() => {
       )
     );
   }
-  function Toaster(props) {
+  function hotkeyMatcher(spec) {
+    const parts = spec.split("+").map(function(p) {
+      return p.trim().toLowerCase();
+    });
+    const key = parts[parts.length - 1] || "";
+    const code = /^[a-z]$/.test(key) ? "Key" + key.toUpperCase() : /^[0-9]$/.test(key) ? "Digit" + key : null;
+    const want = function(m) {
+      return parts.indexOf(m) >= 0 && parts.indexOf(m) < parts.length - 1;
+    };
+    return function(e) {
+      if (e.altKey !== want("alt") || e.ctrlKey !== want("ctrl") || e.shiftKey !== want("shift") || e.metaKey !== (want("meta") || want("cmd")))
+        return false;
+      return code ? e.code === code : e.key.toLowerCase() === key;
+    };
+  }
+  function Toaster(props = {}) {
     const t = useStrings();
     const mounted = useMounted();
     const s = React19.useState(toastState.list);
@@ -3171,15 +3257,49 @@ window.Aura = (() => {
         });
       };
     }, []);
+    const region = React19.useRef(null);
+    const hotkey = props.hotkey === void 0 ? "Alt+T" : props.hotkey;
+    React19.useEffect(
+      function() {
+        if (!hotkey) return;
+        const match = hotkeyMatcher(hotkey);
+        function onKey(e) {
+          if (!e.key || e.repeat || e.isComposing || !match(e) || !region.current) return;
+          const el = e.target;
+          const editable = !!el && (el.isContentEditable || /^(INPUT|TEXTAREA)$/.test(el.tagName || ""));
+          const mac = /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || "");
+          if (editable && mac && e.altKey && !e.ctrlKey && !e.metaKey && e.key.length === 1) return;
+          const items2 = region.current.querySelectorAll(".aura-toast");
+          const last = items2[items2.length - 1];
+          if (!last) return;
+          const target = last.querySelector(".aura-toast__action") || last.querySelector("button");
+          if (!target) return;
+          e.preventDefault();
+          const from = outsideToaster(document.activeElement);
+          if (from) hotkeyOrigin.set(last, from);
+          target.focus();
+        }
+        document.addEventListener("keydown", onKey);
+        return function() {
+          document.removeEventListener("keydown", onKey);
+        };
+      },
+      [hotkey]
+    );
     if (!mounted) return null;
+    const pos = props.position || "bottom";
+    const offset = props.offset;
     return (0, import_react_dom5.createPortal)(
       /* @__PURE__ */ React19.createElement(
         "div",
         {
-          className: cx("aura-toaster", props && props.position === "top" && "is-top"),
+          ref: region,
+          className: cx("aura-toaster", pos.indexOf("top") === 0 && "is-top", /center$/.test(pos) && "is-center"),
+          style: offset != null ? { "--aura-toaster-offset": typeof offset === "number" ? offset + "px" : offset } : void 0,
           role: "region",
           "aria-live": "polite",
-          "aria-label": t.notifications
+          "aria-label": hotkey ? t.notifications + " (" + hotkey + ")" : t.notifications,
+          "aria-keyshortcuts": hotkey || void 0
         },
         s[0].map(function(t2) {
           return /* @__PURE__ */ React19.createElement(ToastItem, { key: t2.id, toast: t2 });
@@ -3982,7 +4102,7 @@ window.Aura = (() => {
   var ROW_H_DEFAULT = 48;
   var OVERSCAN = 8;
   var FLEX_MIN = 160;
-  var DataTable = React28.forwardRef(function DataTable2(props, ref) {
+  var DataTableImpl = React28.forwardRef(function DataTable(props, ref) {
     const t = useStrings();
     const columns = props.columns || DEFAULT_COLUMNS;
     const byKey = {};
@@ -4007,7 +4127,27 @@ window.Aura = (() => {
     );
     const sort = sortState[0], setSort = sortState[1];
     const selState = useMaybeControlled(props.selected, props.defaultSelected || [], props.onSelectionChange);
-    const selected = selState[0], setSelected = selState[1];
+    const canSelect = function(r) {
+      return !!r && (!props.isRowSelectable || !!props.isRowSelectable(r));
+    };
+    const rejected = {};
+    if (props.isRowSelectable)
+      rows.forEach(function(r) {
+        if (!canSelect(r)) rejected[String(r[rowKey])] = true;
+      });
+    const selected = selState[0].filter(function(k) {
+      return !rejected[String(k)];
+    }), setSelected = selState[1];
+    const droppedSig = selState[0].length === selected.length ? "" : "#" + selState[0].filter(function(k) {
+      return rejected[String(k)];
+    }).join("\0") + "#" + selected.join("\0");
+    React28.useEffect(
+      function() {
+        if (droppedSig !== "") setSelected(selected);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [droppedSig]
+    );
     const pageState = useMaybeControlled(
       props.page,
       props.defaultPage || 1,
@@ -4418,7 +4558,7 @@ window.Aura = (() => {
         el.focus();
       }
     }
-    const pageKeys = pageRows.map(function(r) {
+    const pageKeys = pageRows.filter(canSelect).map(function(r) {
       return r[rowKey];
     });
     const selSet = {};
@@ -4682,10 +4822,12 @@ window.Aura = (() => {
         if (inner) inner.focus();
         else handled = false;
       } else if (k === " " || k === "Enter") {
-        if (r === 0 && !col && selectable && nRows) toggleAll();
-        else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
-        else if (r > 0 && k === " " && selectable) toggle(row[rowKey], !selSet[row[rowKey]]);
-        else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
+        if (r === 0 && !col && selectable && nRows) {
+          if (pageKeys.length) toggleAll();
+        } else if (r === 0 && col && col.sortable && canSortAny) sortBy(col.key);
+        else if (r > 0 && k === " " && selectable) {
+          if (canSelect(row)) toggle(row[rowKey], !selSet[row[rowKey]]);
+        } else if (r > 0 && k === "Enter" && rowHref && !target.querySelector("button, a[href]:not(.aura-table__row-link), input, select, textarea"))
           followRow(target.closest('[role="row"]'), e);
         else if (r > 0 && k === "Enter" && target.querySelector("button, a[href], input, select, textarea"))
           target.querySelector("button, a[href], input, select, textarea").focus();
@@ -4714,7 +4856,7 @@ window.Aura = (() => {
               activeState[1]({ r: 0, c: 0 });
             }
           },
-          nRows ? /* @__PURE__ */ React28.createElement(
+          pageKeys.length ? /* @__PURE__ */ React28.createElement(
             Checkbox,
             {
               hideLabel: true,
@@ -4725,7 +4867,7 @@ window.Aura = (() => {
               onChange: toggleAll
             }
           ) : null,
-          nRows ? /* @__PURE__ */ React28.createElement("span", { className: "aura-table__sel-text" }, nSel ? t.selectedCount(nSel) : t.selectAll) : /* @__PURE__ */ React28.createElement("span", { className: "aura-sr-only" }, t.selectRows)
+          pageKeys.length ? /* @__PURE__ */ React28.createElement("span", { className: "aura-table__sel-text" }, nSel ? t.selectedCount(nSel) : t.selectAll) : /* @__PURE__ */ React28.createElement("span", { className: "aura-sr-only" }, t.selectRows)
         )
       );
     vis.forEach(function(c, i) {
@@ -4863,12 +5005,12 @@ window.Aura = (() => {
               className: cx("aura-table__sel", nPinned && "is-pinned"),
               tabIndex: tabFor(ri, 0),
               "data-rc": ri + ":0",
-              "aria-label": t.selectRow(k),
+              "aria-label": canSelect(r) ? t.selectRow(k) : props.rowSelectDisabledLabel ? props.rowSelectDisabledLabel(r) : void 0,
               onFocus: function(e) {
                 if (e.target === e.currentTarget) activeState[1]({ r: ri, c: 0 });
               }
             },
-            /* @__PURE__ */ React28.createElement(
+            canSelect(r) ? /* @__PURE__ */ React28.createElement(
               Checkbox,
               {
                 hideLabel: true,
@@ -4879,7 +5021,7 @@ window.Aura = (() => {
                   toggle(k, on);
                 }
               }
-            )
+            ) : null
           )
         );
       vis.forEach(function(c, j) {
@@ -4982,7 +5124,7 @@ window.Aura = (() => {
                 key: k,
                 role: "row",
                 "aria-rowindex": first + i + 2,
-                "aria-selected": selectable ? isSel : void 0,
+                "aria-selected": selectable && canSelect(r) ? isSel : void 0,
                 className: cx(
                   "aura-table__row",
                   isSel && "is-selected",
@@ -5217,6 +5359,7 @@ window.Aura = (() => {
     }
     return /* @__PURE__ */ React28.createElement("div", { ref, className: cx("aura-table-box", props.className) }, out);
   });
+  var DataTable2 = DataTableImpl;
 
   // src/Card.tsx
   var React29 = __toESM(require_react(), 1);

package/components/aura.components.css

@@ -496,7 +496,9 @@ a.aura-icon-btn { text-decoration: none; }
   display: flex; flex-direction: column; gap: var(--aura-space-2); width: min(380px, calc(100vw - 2 * var(--aura-space-4)));
   font-family: var(--font-sans);
 }
-.aura-toaster.is-top { bottom: auto; top: var(--aura-space-6); }
+.aura-toaster.is-top { bottom: auto; top: calc(var(--aura-toaster-offset, var(--aura-space-6)) + env(safe-area-inset-top, 0px)); }
+/* 5.6: top-center / bottom-center; `offset` (or --aura-toaster-offset) clears an app's top bar. */
+.aura-toaster.is-center { right: auto; left: 50%; transform: translateX(-50%); }
 .aura-toast {
   display: flex; align-items: flex-start; gap: var(--aura-space-3); padding: var(--aura-space-3) var(--aura-space-2) var(--aura-space-3) var(--aura-space-4);
   background: var(--aura-bg-surface); color: var(--aura-fg-primary);
@@ -511,10 +513,27 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-toast__body { flex: 1; min-width: 0; padding-top: 1px; }
 .aura-toast__title { margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; }
 .aura-toast__text { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); }
+.aura-toast__text > * { margin: 0; }
+.aura-toast__text a { color: var(--aura-fg-accent); text-underline-offset: 2px; }
+.aura-toast__text a:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-radius: var(--aura-radius-xs); }
+.aura-toast__actions { flex: none; align-self: center; display: flex; gap: var(--aura-space-1); }
+/* Two actions, or one under a description (5.6): the actions take a row of their own below the text, lined up with it
+ * (the action's own padding sits left of the text column), so the text keeps the toast's width. */
+.aura-toast.has-action-row { flex-wrap: wrap; row-gap: var(--aura-space-1); }
+.aura-toast.has-action-row .aura-toast__body { flex-basis: 0; }
+.aura-toast.has-action-row .aura-toast__actions { order: 3; flex-basis: 100%; flex-wrap: wrap; margin-left: calc(16px + var(--aura-space-3) - var(--aura-space-2)); margin-bottom: calc(-1 * var(--aura-space-1)); }
 .aura-toast__action {
   flex: none; align-self: center; height: var(--aura-control-sm); padding: 0 var(--aura-space-2);
   border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-accent);
   font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
+  display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap;
+}
+/* Touch (5.6): the 32px action gets a 44px hit area, as IconButton does. Links in the text only get a little padding —
+ * lines sit 20px apart, so a 44px box would overlap the next line's link. */
+@media (pointer: coarse) {
+  .aura-toast__action { position: relative; }
+  .aura-toast__action::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--aura-touch-target)); height: max(100%, var(--aura-touch-target)); transform: translate(-50%, -50%); }
+  .aura-toast__text a { padding-block: 2px; }
 }
 .aura-toast__action:hover { background: var(--aura-bg-surface-hover); }
 .aura-toast__action:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
@@ -1203,6 +1222,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-dialog__foot > * { width: 100%; }
   .aura-drawer:not(.aura-drawer--nav) { max-width: none; }
   .aura-toaster { left: var(--aura-space-4); right: var(--aura-space-4); bottom: var(--aura-space-4); width: auto; }
+  .aura-toaster.is-center { left: var(--aura-space-4); right: var(--aura-space-4); transform: none; }
+  .aura-toaster.is-top { top: calc(var(--aura-toaster-offset, var(--aura-space-4)) + env(safe-area-inset-top, 0px)); }
   .aura-card { padding: var(--aura-space-4); }
   .aura-stat { padding: var(--aura-space-4); }
   .aura-stat__value { font-size: 24px; }
@@ -1385,9 +1406,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @media (max-width: 767.98px) { :root:has(.aura-bottomnav--below-md) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
 @media (max-width: 1023.98px) { :root:has(.aura-bottomnav--below-lg) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
 @media (max-width: 1279.98px) { :root:has(.aura-bottomnav--below-xl) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
-/* Toasts clear a BottomNav wherever it shows (phones and tablets). */
-.aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-6) + var(--aura-bottomnav-offset, 0px)); }
-@media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-4) + var(--aura-bottomnav-offset, 0px)); } }
+/* Toasts clear a BottomNav wherever it shows (phones and tablets), else the bottom safe-area inset (5.6). */
+.aura-toaster:not(.is-top) { bottom: calc(var(--aura-toaster-offset, var(--aura-space-6)) + var(--aura-bottomnav-offset, env(safe-area-inset-bottom, 0px))); }
+@media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-toaster-offset, var(--aura-space-4)) + var(--aura-bottomnav-offset, env(safe-area-inset-bottom, 0px))); } }
 
 /* ---------- 4.19: ActionBar ---------- */
 /* Sticky, not fixed: it keeps its place at the end of its parent, so it never covers the last field. */

package/components/index.d.ts

@@ -46,12 +46,18 @@ export interface DataTableState {
 	sort: DataTableSort | null;
 	page: number;
 }
-/** A callback that gets one row. Written with your own row type (`(r: Order) => …`) it still fits (5.4):
- * the row is checked the way method parameters are, so no cast from `Record<string, any>` is needed. */
-export type RowCallback<R> = {
-	bivarianceHack(row: Record<string, any>): R;
+/** Internal helper (exported only because the declarations reference it): `T` as written, but never inferred from
+ * this position (works before TypeScript 5.4's own `NoInfer`), so a table's row type comes from its `rows`. */
+export type NoInferRow<T> = [
+	T
+][T extends any ? 0 : never];
+/** A callback that gets one row of type `Row` and returns `T`. Checked the way method parameters are, so a callback
+ * written for a narrower or wider row type still fits; one written for an unrelated type is an error (5.5). */
+export type RowCallback<T, Row = Record<string, any>> = {
+	bivarianceHack(row: NoInferRow<Row>): T;
 }["bivarianceHack"];
-export interface DataTableColumn {
+/** One column. `Row` is the table's row type (5.5): `DataTableColumn<Order>` types `render` and `sortValue`. */
+export interface DataTableColumn<Row extends Record<string, any> = Record<string, any>> {
 	/** Key into each row object. */
 	key: string;
 	/** Header label (source style: UPPERCASE). */
@@ -67,9 +73,9 @@ export interface DataTableColumn {
 	/** Header becomes a button cycling asc → desc → unsorted. */
 	sortable?: boolean | undefined;
 	/** Value to sort by, when not the cell value (dates, amounts). */
-	sortValue?: RowCallback<string | number | null> | undefined;
+	sortValue?: RowCallback<string | number | null, Row> | undefined;
 	/** Custom cell content. */
-	render?: RowCallback<React$1.ReactNode> | undefined;
+	render?: RowCallback<React$1.ReactNode, Row> | undefined;
 	/** Set false to keep a sized column fixed when the table is `resizable`. */
 	resizable?: boolean | undefined;
 	/** Resize limits in px. Defaults 64 / 480. For the flexible column, minWidth defaults to 160. */
@@ -99,13 +105,14 @@ export interface DataTableEmpty {
 	/** One action, usually a secondary Button. */
 	action?: React$1.ReactNode | undefined;
 }
-/** Enterprise data table: 48px rows, hairline dividers, mono header band. */
-export interface DataTableProps {
+/** Enterprise data table: 48px rows, hairline dividers, mono header band. Generic over the row type (5.5): with
+ * `rows={orders}` every `render`, `sortValue`, `getRowHref` and `onRowActivate` gets an `Order`. */
+export interface DataTableProps<Row extends Record<string, any> = Record<string, any>> {
 	/** Defaults to ID · NAME · STATUS · OWNER (96 / 160 / 112 / auto px). */
-	columns?: DataTableColumn[] | undefined;
-	/** Row objects. Any typed interface works (5.4: before, `interface Order {…}` rows needed a cast); cells show
-	 * the value at each column's key unless the column has `render`. */
-	rows: ReadonlyArray<Record<string, any>>;
+	columns?: DataTableColumn<Row>[] | undefined;
+	/** Row objects, of any interface; their type is the table's row type. Cells show the value at each column's key
+	 * unless the column has `render`. */
+	rows: ReadonlyArray<Row>;
 	/** Column key giving each row a unique React key. Default: the first column's key. */
 	rowKey?: string | undefined;
 	/** Accessible name for the table. */
@@ -117,6 +124,11 @@ export interface DataTableProps {
 	onSortChange?: ((sort: DataTableSort | null) => void) | undefined;
 	/** Adds a checkbox column. */
 	selectable?: boolean | undefined;
+	/** Which rows can be selected (5.6). A row it rejects shows no checkbox (the cell stays, so columns line up), is
+	 * skipped by select-all, Space and the count, and never appears in `onSelectionChange` — even if passed in. */
+	isRowSelectable?: RowCallback<boolean, Row> | undefined;
+	/** Accessible name for a rejected row's empty cell, e.g. `(r) => 'Not awaiting review'` (5.6). */
+	rowSelectDisabledLabel?: RowCallback<string, Row> | undefined;
 	/** Controlled selection (row keys); pair with onSelectionChange. */
 	selected?: Array<string | number> | undefined;
 	/** Initial selection when uncontrolled. */
@@ -152,7 +164,7 @@ export interface DataTableProps {
 	totalRows?: number | undefined;
 	/** Makes each row a link: the first column's content renders as the provider's linkComponent (or `<a>`), and a click
 	 * or Enter anywhere on the row follows it. Ctrl/⌘-click opens a new tab as usual. */
-	getRowHref?: RowCallback<string> | undefined;
+	getRowHref?: RowCallback<string, Row> | undefined;
 	/** Pager arrows become links to these URLs (search-param paging). Without onPageChange the link navigates. */
 	getPageHref?: ((page: number) => string) | undefined;
 	/** Router link for getRowHref / getPageHref. Default: AuraProvider's linkComponent, else `<a>`. */
@@ -160,7 +172,7 @@ export interface DataTableProps {
 	/** Skeleton row count when there is no pageSize. Default 5. */
 	skeletonRows?: number | undefined;
 	/** Called on row click or Enter. */
-	onRowActivate?: RowCallback<void> | undefined;
+	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
 	/** Column menu on every header, drag-to-reorder, and the show/hide columns button. */
@@ -480,14 +492,23 @@ export interface AlertProps {
 	onDismiss?: (() => void) | undefined;
 	className?: string | undefined;
 }
+/** A button (or, with `href`, a link through AuraProvider's `linkComponent`) on a toast (5.6: `href`, `dismiss`). */
+export interface ToastAction {
+	label: string;
+	onClick?: (() => void) | undefined;
+	/** Makes the action a link (routes through `linkComponent`, so `next/link` navigates client-side). */
+	href?: string | undefined;
+	/** Default true: the toast closes when the action runs. `false` keeps it (a list of items to work through). */
+	dismiss?: boolean | undefined;
+}
 export interface ToastOptions {
 	title: string;
-	description?: string | undefined;
+	/** Text, or (5.6) rich content — lines with their own links, read once inside the toast's live region. */
+	description?: React$1.ReactNode | undefined;
 	tone?: FeedbackTone | undefined;
-	action?: {
-		label: string;
-		onClick?: (() => void) | undefined;
-	} | undefined;
+	action?: ToastAction | undefined;
+	/** Up to two actions in a row (5.6); used instead of `action` when given. */
+	actions?: ToastAction[] | undefined;
 	/** ms before it closes itself. Default 5000; Infinity keeps it until dismissed. */
 	duration?: number | undefined;
 	/** Reuse an id to replace a toast in place (same position, timer restarts) — never a second toast. */
@@ -1278,10 +1299,18 @@ export declare namespace toast {
 	var dismiss: (id: string) => void;
 }
 export interface ToasterProps {
-	/** Default `bottom`. */
-	position?: "bottom" | "top" | undefined;
-}
-export declare function Toaster(props: ToasterProps): React$1.ReactElement | null;
+	/** Default `bottom` (bottom right). `top` is top right; `top-center` / `bottom-center` centre the stack (5.6).
+	 * Below 640px toasts span the width either way. */
+	position?: "bottom" | "bottom-right" | "bottom-center" | "top" | "top-right" | "top-center" | undefined;
+	/** Distance from the top or bottom edge (5.6), e.g. `64` to clear a 56px top bar; px or any CSS length. Sets
+	 * `--aura-toaster-offset`; the safe-area inset is added on top. Default 24px (16px below 640px). */
+	offset?: number | string | undefined;
+	/** Keyboard shortcut to the newest toast (5.6): focuses its action, else its close button, and pauses its timer;
+	 * Escape closes it and returns focus. Default `"Alt+T"` (matched on the physical key, so macOS Option+T works);
+	 * `false` turns it off. */
+	hotkey?: string | false | undefined;
+}
+export declare function Toaster(props?: ToasterProps): React$1.ReactElement | null;
 export declare const PasswordField: React$1.ForwardRefExoticComponent<PasswordFieldProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const FormErrorSummary: React$1.ForwardRefExoticComponent<FormErrorSummaryProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const FilterBar: React$1.ForwardRefExoticComponent<FilterBarProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -1290,8 +1319,15 @@ export declare const Tooltip: React$1.ForwardRefExoticComponent<TooltipProps & R
 export declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Side panel over the page: record detail, filters, mobile navigation. Modal (focus trap, scroll lock, focus restore). */
 export declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & React$1.RefAttributes<HTMLDivElement>>;
-/** Enterprise data table: 48px rows, hairline dividers, mono header band. */
-export declare const DataTable: React$1.ForwardRefExoticComponent<DataTableProps & React$1.RefAttributes<HTMLDivElement>>;
+/** Enterprise data table: 48px rows, hairline dividers, mono header band. Generic over the row type (5.5): the
+ * type of `rows` types every `render`, `sortValue`, `getRowHref` and `onRowActivate`. */
+export declare const DataTable: {
+	(props: DataTableProps & {
+		rows: readonly never[];
+	} & React$1.RefAttributes<HTMLDivElement>): React$1.ReactElement | null;
+	<Row extends Record<string, any> = Record<string, any>>(props: DataTableProps<Row> & React$1.RefAttributes<HTMLDivElement>): React$1.ReactElement | null;
+	displayName?: string | undefined;
+};
 export declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Tabs: React$1.ForwardRefExoticComponent<TabsProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Side navigation: sections of links or buttons, collapsible groups, counts and badges. Arrow keys move between items. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-tokens",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "description": "AURA Design System — tokens (CSS variables, Tailwind preset, Figma variables), theme contrast checks and token lint.",
   "main": "tailwind.tokens.cjs",
   "types": "components/index.d.ts",

package/tokens.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.4.0",
+  "version": "5.6.0",
   "meta": {
     "name": "AURA Design System",
     "tier": "3-tier",