@jirawatpyk/aura-tokens 4.20.0 → 5.0.1

package/aura-tailwind.css

@@ -1,4 +1,4 @@
-/* AURA v4.20.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
+/* AURA v5.0.1 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js 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 v4.20.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.js. Do not edit by hand.
+/* AURA v5.0.1 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.js. 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 v4.20.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
+/* AURA v5.0.1 — GENERATED by scripts/build-tokens.js 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

@@ -124,7 +124,7 @@ window.Aura = (() => {
     contrast: () => contrast,
     createTheme: () => createTheme,
     formatBytes: () => formatBytes,
-    formatDate: () => formatDate2,
+    formatDate: () => formatDate,
     iconNames: () => iconNames,
     parseDate: () => parseDate,
     parseTime: () => parseTime,
@@ -1714,7 +1714,7 @@ window.Aura = (() => {
     const o = opts || {}, d = fromISO(iso);
     if (!d) return "";
     const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
-    const loc = o.locale || "th";
+    const loc = o.locale || "en";
     return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
   }
   var MONTHS = null;
@@ -1757,32 +1757,19 @@ window.Aura = (() => {
   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);
-  }
-
-  // src/DatePicker.tsx
-  var warnedNoLocale = false;
-  function isDev() {
     try {
-      return true;
+      return new Intl.DateTimeFormat("en-CA", {
+        timeZone,
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit"
+      }).format(now);
     } catch (e) {
-      return false;
-    }
-  }
-  function formatDate2(iso, opts) {
-    if (!warnedNoLocale && !(opts && opts.locale) && isDev()) {
-      warnedNoLocale = true;
-      console.warn(
-        "[AURA] formatDate() was called without a locale. It shows Thai with Buddhist-era years today; in 5.0 it will show English with Gregorian years, like '@jirawatpyk/aura-react/server'. Pass { locale: 'th' } to keep Thai, or use useFormatDate() in components."
-      );
+      return toISO(now);
     }
-    return formatDate(iso, opts);
   }
+
+  // src/DatePicker.tsx
   function useFormatDate() {
     const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
     return React17.useCallback(
@@ -1802,7 +1789,7 @@ window.Aura = (() => {
   var Calendar = React17.forwardRef(function Calendar2(props, ref) {
     const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
     const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
-    const todayISO = props.today || todayIn(props.timeZone || ctx.timeZone);
+    const todayISO = (props.today && fromISO(props.today) ? props.today : null) || todayIn(props.timeZone || ctx.timeZone);
     const today = fromISO(todayISO);
     const min = fromISO(props.min === "today" ? todayISO : props.min), max = fromISO(props.max === "today" ? todayISO : props.max);
     const start = fromISO(props.start), end = fromISO(props.end);
@@ -3123,7 +3110,7 @@ window.Aura = (() => {
         };
         let top, left;
         if (side === "top" || side === "bottom") {
-          top = side === "top" ? r.top - t.height - gap : r.bottom + gap;
+          top = clampY(side === "top" ? r.top - t.height - gap : r.bottom + gap);
           left = clampX(r.left + r.width / 2 - t.width / 2);
         } else {
           left = side === "left" ? r.left - t.width - gap : r.right + gap;
@@ -3350,6 +3337,12 @@ window.Aura = (() => {
     const measure = !!props.stackBelow || columns.some(function(c) {
       return c.hideBelow != null;
     });
+    const levelShape = (props.stackBelow ? "s" : "") + Math.min(
+      MAX_HIDE_LEVELS,
+      columns.map(hidePx).filter(function(px, i, a) {
+        return px != null && a.indexOf(px) === i;
+      }).length
+    );
     React28.useEffect(
       function() {
         if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
@@ -3362,14 +3355,14 @@ window.Aura = (() => {
           ro.disconnect();
         };
       },
-      [measure]
+      [measure, levelShape]
     );
     const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
     useIsoLayoutEffect(
       function() {
-        if (measure && boxWidth[0] == null && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
+        if (measure && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
       },
-      [measure]
+      [measure, levelShape]
     );
     const hideLevels = [];
     columns.forEach(function(c) {
@@ -3630,6 +3623,7 @@ window.Aura = (() => {
     function focusCell(r, c) {
       r = Math.max(0, Math.min(r, nRows));
       c = Math.max(0, Math.min(c, nCols - 1));
+      if (stacked && r === 0 && nRows > 0 && !(selectable && c === 0)) r = 1;
       activeState[1]({ r, c });
       pending.current = { r, c };
       if (virtual && r > 0) {
@@ -4189,7 +4183,9 @@ window.Aura = (() => {
     } else {
       const bodyRows = body = [];
       if (virtual && start > 0)
-        bodyRows.push(/* @__PURE__ */ React28.createElement("div", { key: "__top", style: { height: start * ROW_H + "px" }, "aria-hidden": true }));
+        bodyRows.push(
+          /* @__PURE__ */ React28.createElement("div", { key: "__top", className: "aura-table__spacer", style: { height: start * ROW_H + "px" }, "aria-hidden": true })
+        );
       for (let ri = start; ri < end; ri++) {
         (function(r, i) {
           const k = r[rowKey], isSel = !!selSet[k];
@@ -4220,7 +4216,17 @@ window.Aura = (() => {
         })(pageRows[ri], ri);
       }
       if (virtual && end < pageRows.length)
-        bodyRows.push(/* @__PURE__ */ React28.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
+        bodyRows.push(
+          /* @__PURE__ */ React28.createElement(
+            "div",
+            {
+              key: "__bot",
+              className: "aura-table__spacer",
+              style: { height: (pageRows.length - end) * ROW_H + "px" },
+              "aria-hidden": true
+            }
+          )
+        );
     }
     let foot = null;
     function pagerButton(dir) {
@@ -4455,7 +4461,7 @@ window.Aura = (() => {
           className: cx("aura-tabs aura-tabs--links", props.className)
         },
         /* @__PURE__ */ React30.createElement("div", { className: "aura-tabs__list" }, items2.map(function(t) {
-          const on = current2 && t.id === current2.id;
+          const on = t.id === st[0];
           const inner = [
             t.icon ? /* @__PURE__ */ React30.createElement(Icon, { key: "i", name: t.icon }) : null,
             t.label,
@@ -4468,7 +4474,8 @@ window.Aura = (() => {
               href: t.href,
               className: cx("aura-tab", on && "is-active"),
               "aria-current": on ? "page" : void 0,
-              onClick: function() {
+              onClick: function(e) {
+                if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
                 st[1](t.id);
               }
             },

package/components/aura.components.css

@@ -1365,6 +1365,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 +1461,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/components/index.d.ts

@@ -171,7 +171,7 @@ 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;
 }
@@ -745,7 +745,7 @@ export interface SegmentedControlProps {
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
-	/** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `th` unless given. */
+	/** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `en` unless given (5.0; `th` before). */
 	locale?: "th" | "en" | "sv" | undefined;
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory" | undefined;
@@ -1227,14 +1227,14 @@ export declare const Combobox: ComboboxComponent;
 export type FormatDateOptions = DateDisplayOptions & {
 	format?: "short" | "long" | "numeric" | Intl.DateTimeFormatOptions | undefined;
 };
+/** Format an ISO date for display: "18 Sept 2026" by default (English, Gregorian — 5.0); `{ locale: 'th' }` gives
+ * "18 ก.ย. 2569" (Buddhist era), `{ locale: 'sv' }` "18 sep. 2026". The same function from the package root and from
+ * `/server`. In components, `useFormatDate()` follows the AuraProvider's locale instead. */
+export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
 /** Parse typed text: dd/mm/yyyy (Buddhist years ≥ 2400 are converted), d-m-yyyy, d.m.yyyy, yyyy-mm-dd or '18 ก.ย. 2569' / '18 Sep 2026'. */
 export declare function parseDate(text: string | null | undefined): ISODate | null;
 /** Today as an ISO date in an IANA time zone (e.g. `Asia/Bangkok`), or in the runtime's own zone without one. (4.19) */
 export declare function todayIn(timeZone?: string | null): ISODate;
-/** Format an ISO date for display. Without a `locale` it is Thai with Buddhist-era years **until 5.0, which makes it
- * English and Gregorian** like `@jirawatpyk/aura-react/server` and `useFormatDate()`. Pass `{ locale }` (or use
- * `useFormatDate()` in components) so the switch changes nothing for you; a call without one warns once in development. */
-export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
 /** formatDate bound to the nearest AuraProvider: its locale and calendar (English, Gregorian without one).
  * Options you pass still win. Use it in components; plain formatDate() stays for code outside React. */
 export declare function useFormatDate(): (iso: ISODate | null | undefined, opts?: FormatDateOptions) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-tokens",
-  "version": "4.20.0",
+  "version": "5.0.1",
   "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": "4.20.0",
+  "version": "5.0.1",
   "meta": {
     "name": "AURA Design System",
     "tier": "3-tier",