@jirawatpyk/aura-react 5.0.0 → 5.1.0

package/dist/esm/dates.js

@@ -144,12 +144,16 @@ function parseDate(text) {
 function todayIn(timeZone) {
   const now = /* @__PURE__ */ new Date();
   if (!timeZone) return toISO(now);
-  return new Intl.DateTimeFormat("en-CA", {
-    timeZone,
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit"
-  }).format(now);
+  try {
+    return new Intl.DateTimeFormat("en-CA", {
+      timeZone,
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    }).format(now);
+  } catch (e) {
+    return toISO(now);
+  }
 }
 export {
   DATE_TEXT,

package/dist/esm/internal.js

@@ -83,11 +83,25 @@ const TONES = ["neutral", "accent", "success", "warning", "danger"];
 function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
 }
+const warned = {};
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  let dev = false;
+  try {
+    dev = true;
+  } catch (e) {
+    dev = false;
+  }
+  if (!dev) return;
+  warned[key] = true;
+  console.warn("[AURA] " + message);
+}
 export {
   FOCUSABLE,
   collator,
   compare,
   cx,
+  devWarnOnce,
   omit,
   tone,
   trapTab,

package/dist/esm/status.js

@@ -2,6 +2,7 @@
 const TONE_WORDS = {
   ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
   progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
+  warning: ["warning", "problem", "degraded", "at risk"],
   blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
 };
 function toneFor(status) {
@@ -9,7 +10,7 @@ function toneFor(status) {
   for (const t in TONE_WORDS) if (TONE_WORDS[t].indexOf(s) >= 0) return t;
   return "neutral";
 }
-const TONE_ORDER = { neutral: 0, progress: 1, ready: 2, blocked: 3 };
+const TONE_ORDER = { neutral: 0, progress: 1, ready: 2, warning: 3, blocked: 4 };
 export {
   TONE_ORDER,
   toneFor as statusTone,

package/dist/esm/useModal.js

@@ -12,7 +12,17 @@ function useModal(open, ref, opts) {
       const body = document.body, overflow = body.style.overflow;
       body.style.overflow = "hidden";
       const el = ref.current;
-      const target = el && (el.querySelector("[data-autofocus]") || el.querySelector(o.bodySelector + " " + FOCUSABLE) || el.querySelector(o.footSelector + " " + FOCUSABLE) || el);
+      const firstIn = function(scope) {
+        if (!scope || !el) return null;
+        const sel = FOCUSABLE.split(",").map(function(s) {
+          return scope + " " + s;
+        }).join(",");
+        const list = el.querySelectorAll(sel);
+        for (let i = 0; i < list.length; i++)
+          if (list[i].tabIndex >= 0 && list[i].getClientRects().length > 0) return list[i];
+        return null;
+      };
+      const target = el && (el.querySelector("[data-autofocus]") || firstIn(o.bodySelector) || firstIn(o.footSelector) || el);
       if (target && o.autoFocus !== false) target.focus();
       return function() {
         body.style.overflow = overflow;

package/dist/index.d.ts

@@ -171,13 +171,13 @@ export interface DataTableProps {
 	onPinnedColumnsChange?: ((keys: string[]) => void) | undefined;
 	/** `compact` = 40px rows (48px on touch screens). Default: the surrounding density. */
 	density?: "comfortable" | "compact" | undefined;
-	/** Table width in px below which rows render as stacked cards (phones). Try 640. It follows the table's own width, not the window. Since 4.20 the cards are the same markup as the grid, laid out by a container query, so any width is right before hydration and each row is in the HTML once. */
+	/** Table width in px below which rows render as stacked cards (phones). Try 640. It follows the table's own width, not the window. Since 4.20 the cards are the same markup as the grid, laid out by a container query, so any width is right before hydration and each row is in the HTML once. With `height` (virtual rows) the server can only send the first screenful; the rest of the cards arrive on hydration. */
 	stackBelow?: number | undefined;
 	className?: string | 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";
+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). */
@@ -214,12 +214,13 @@ export interface AuraProviderProps {
 	linkComponent?: React$1.ElementType | undefined;
 	children?: React$1.ReactNode | undefined;
 }
-export type StatusTone = "neutral" | "progress" | "ready" | "blocked";
+/** `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 {
 	/** The status word shown, e.g. "In Progress". */
 	children: React$1.ReactNode;
-	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Blocked/Failed → blocked, anything else → neutral). */
+	/** 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;
 }
@@ -229,9 +230,12 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 	checked?: boolean | undefined;
 	defaultChecked?: boolean | undefined;
 	indeterminate?: boolean | undefined;
-	/** Accessible name for a bare box (tables). Not needed when children give a visible label. */
+	/** Accessible name. In 5.x it is shown only when given as children; **6.0 shows `label` beside the box** like
+	 * Switch and TextField. Without children and without `hideLabel` it warns once in development. */
 	label?: string | undefined;
-	/** Visible label beside the box (form use). */
+	/** A bare box named by `label`, e.g. in a table row: keeps it hidden in 6.0 and silences the 5.1 notice. */
+	hideLabel?: boolean | undefined;
+	/** The visible label beside the box. */
 	children?: React$1.ReactNode | undefined;
 	/** Second line under the visible label (needs an id to be linked). */
 	description?: React$1.ReactNode | undefined;
@@ -590,6 +594,9 @@ export interface SideNavProps {
 	onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
 	/** Adds a collapse / expand button at the bottom. AppShell hides it in its phone drawer. */
 	collapsible?: boolean | undefined;
+	/** The 1px right edge that divides the nav from the page. Default true; `false` when your layout draws its own
+	 * divider. (5.1) */
+	bordered?: boolean | undefined;
 	className?: string | undefined;
 }
 export interface BreadcrumbProps {

package/dist/server/index.cjs

@@ -116,12 +116,16 @@ function parseDate(text) {
 function todayIn(timeZone) {
   const now = /* @__PURE__ */ new Date();
   if (!timeZone) return toISO(now);
-  return new Intl.DateTimeFormat("en-CA", {
-    timeZone,
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit"
-  }).format(now);
+  try {
+    return new Intl.DateTimeFormat("en-CA", {
+      timeZone,
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    }).format(now);
+  } catch (e) {
+    return toISO(now);
+  }
 }
 
 // src/text.ts
@@ -155,6 +159,7 @@ function parseTime(text) {
 var TONE_WORDS = {
   ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
   progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
+  warning: ["warning", "problem", "degraded", "at risk"],
   blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
 };
 function toneFor(status) {

package/dist/server/index.d.ts

@@ -1,6 +1,7 @@
 import * as React$1 from 'react';
 
-export type StatusTone = "neutral" | "progress" | "ready" | "blocked";
+/** `warning` (5.1): needs attention but still works — Warning, Problem, Degraded, At risk. */
+export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked";
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {

package/dist/server/index.js

@@ -77,12 +77,16 @@ function parseDate(text) {
 function todayIn(timeZone) {
   const now = /* @__PURE__ */ new Date();
   if (!timeZone) return toISO(now);
-  return new Intl.DateTimeFormat("en-CA", {
-    timeZone,
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit"
-  }).format(now);
+  try {
+    return new Intl.DateTimeFormat("en-CA", {
+      timeZone,
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    }).format(now);
+  } catch (e) {
+    return toISO(now);
+  }
 }
 
 // src/text.ts
@@ -116,6 +120,7 @@ function parseTime(text) {
 var TONE_WORDS = {
   ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
   progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
+  warning: ["warning", "problem", "degraded", "at risk"],
   blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
 };
 function toneFor(status) {

package/dist/styles.css

@@ -334,6 +334,7 @@ a.aura-icon-btn { text-decoration: none; }
 }
 .aura-pill--progress { background: var(--aura-status-progress-bg); color: var(--aura-status-progress-fg); }
 .aura-pill--ready { background: var(--aura-status-ready-bg); color: var(--aura-status-ready-fg); }
+.aura-pill--warning { background: var(--aura-status-warning-bg); color: var(--aura-status-warning-fg); }
 .aura-pill--blocked { background: var(--aura-status-blocked-bg); color: var(--aura-status-blocked-fg); }
 
 /* Icon — Lucide, 24-grid, stroke in currentColor */
@@ -596,6 +597,9 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); }
 .aura-nav__scroll { flex: 1; overflow-y: auto; padding: 0 var(--aura-space-3); }
+/* No header: keep the first item off the top edge (5.0.2). */
+.aura-nav > .aura-nav__scroll:first-child { padding-top: var(--aura-space-3); }
+.aura-nav--borderless { border-right: 0; }
 .aura-nav__section + .aura-nav__section { margin-top: var(--aura-space-5); }
 .aura-nav__title { margin: 0 0 var(--aura-space-1); padding: 0 var(--aura-space-3); font-family: var(--font-mono); font-size: 11px; line-height: 20px; color: var(--aura-fg-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
 .aura-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
@@ -1365,6 +1369,8 @@ 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)); } }
 
 /* ---------- 4.19: ActionBar ---------- */
@@ -1459,7 +1465,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     margin-bottom: var(--aura-space-1);
     padding: 0; line-height: normal;
   }
-  .aura-table__td[data-hide] { display: block; }
+  .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
+  .aura-table__spacer { display: none; }
   .aura-table__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start;

package/dist/styles.layer.css

@@ -336,6 +336,7 @@ a.aura-icon-btn { text-decoration: none; }
 }
 .aura-pill--progress { background: var(--aura-status-progress-bg); color: var(--aura-status-progress-fg); }
 .aura-pill--ready { background: var(--aura-status-ready-bg); color: var(--aura-status-ready-fg); }
+.aura-pill--warning { background: var(--aura-status-warning-bg); color: var(--aura-status-warning-fg); }
 .aura-pill--blocked { background: var(--aura-status-blocked-bg); color: var(--aura-status-blocked-fg); }
 
 /* Icon — Lucide, 24-grid, stroke in currentColor */
@@ -598,6 +599,9 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); }
 .aura-nav__scroll { flex: 1; overflow-y: auto; padding: 0 var(--aura-space-3); }
+/* No header: keep the first item off the top edge (5.0.2). */
+.aura-nav > .aura-nav__scroll:first-child { padding-top: var(--aura-space-3); }
+.aura-nav--borderless { border-right: 0; }
 .aura-nav__section + .aura-nav__section { margin-top: var(--aura-space-5); }
 .aura-nav__title { margin: 0 0 var(--aura-space-1); padding: 0 var(--aura-space-3); font-family: var(--font-mono); font-size: 11px; line-height: 20px; color: var(--aura-fg-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
 .aura-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
@@ -1367,6 +1371,8 @@ 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)); } }
 
 /* ---------- 4.19: ActionBar ---------- */
@@ -1461,7 +1467,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     margin-bottom: var(--aura-space-1);
     padding: 0; line-height: normal;
   }
-  .aura-table__td[data-hide] { display: block; }
+  .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
+  .aura-table__spacer { display: none; }
   .aura-table__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';
     display: block; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start;

package/package.json

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