npm - @jirawatpyk/aura-react - Versions diffs - 4.20.0 → 5.0.0 - Mend

@jirawatpyk/aura-react 4.20.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md CHANGED Viewed

@@ -9,11 +9,11 @@ AURA Design System components as a real React package — ES modules, TypeScript
 One HTML file, no install — the packages are on npmjs, so jsDelivr serves them:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-tokens@4/aura.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-react@4/dist/styles.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-tokens@5/aura.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-react@5/dist/styles.css" />
 <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-react@4/dist/aura.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-react@5/dist/aura.bundle.js"></script>
 <div id="root"></div>
 <script>
@@ -100,7 +100,7 @@ export function Providers({ children, locale }: { children: React.ReactNode; loc
 // app/layout.tsx (a Server Component): <body><Providers locale="th">{children}</Providers></body>
 ```
-`linkComponent` is used by Button `href`, Breadcrumb, Tabs and Menu items with `href`, BottomNav, Pagination `getHref` (page numbers and, since 4.17, the previous / next arrows), Stat `href`, SideNav and DataTable row/pager links. Each of them also takes its own `linkComponent`, which wins over the provider's. Pass `getHref` from a client component (it's a function too). The Next.js starter does all of this, and CI clicks every AURA link in it to check none triggers a full page load. Only `th` shows Buddhist-era years; `en` and `sv` are Gregorian (`sv` weeks start Monday). **Without a provider, components are English with Gregorian dates** — wrap Thai apps in `<AuraProvider locale="th">`. For dates in your own components use `useFormatDate()` — it follows the provider (`const fmt = useFormatDate(); fmt(iso, { format: 'long' })`). Plain `formatDate()` from the package root has no provider to read and stays Thai unless you pass `locale` (until 5.0); the one in `@jirawatpyk/aura-react/server` defaults to English and Gregorian. Values are always Gregorian ISO dates.
+`linkComponent` is used by Button `href`, Breadcrumb, Tabs and Menu items with `href`, BottomNav, Pagination `getHref` (page numbers and, since 4.17, the previous / next arrows), Stat `href`, SideNav and DataTable row/pager links. Each of them also takes its own `linkComponent`, which wins over the provider's. Pass `getHref` from a client component (it's a function too). The Next.js starter does all of this, and CI clicks every AURA link in it to check none triggers a full page load. Only `th` shows Buddhist-era years; `en` and `sv` are Gregorian (`sv` weeks start Monday). **Without a provider, components are English with Gregorian dates** — wrap Thai apps in `<AuraProvider locale="th">`. For dates in your own components use `useFormatDate()` — it follows the provider (`const fmt = useFormatDate(); fmt(iso, { format: 'long' })`). Plain `formatDate()` has no provider to read: since 5.0 it is English and Gregorian unless you pass `locale`, the same function from the package root and from `@jirawatpyk/aura-react/server`. Values are always Gregorian ISO dates.
 ## Compact density
@@ -186,6 +186,14 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
+## Upgrading to 5.0
+One breaking change: **`formatDate()` from the package root defaults to English and the Gregorian calendar** (`'2026-09-24'` → `24 Sept 2026`), like `@jirawatpyk/aura-react/server` and `useFormatDate()` without a provider — it is now the same function. Before 5.0 it defaulted to Thai with Buddhist-era years (`24 ก.ย. 2569`), and 4.20 warned in development for every call without a `locale`.
+- Thai output: pass the locale, `formatDate(iso, { locale: 'th' })`, or in components use `useFormatDate()`, which follows `<AuraProvider locale="th">`.
+- Find the calls to change: search for `formatDate(` without `locale` (`git grep -n "formatDate(" | grep -v locale`), or run 4.20 first and read the warning.
+- Components, pickers and `/server` are unchanged. The CDN path is `@5`.
 ## Static tables, separators, tooltips, phone tables before hydration (4.20)
 ```tsx
@@ -201,7 +209,6 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Table** is plain `<table>` markup with DataTable's look: mono header band, hairlines, wrapping text, `numeric` cells right-aligned in tabular figures, a `TFoot` for totals. No sorting, paging or virtual rows — use DataTable for data. If it has to scroll sideways on a phone, its box becomes a focusable region named by the caption.
 - **Tooltip** `side` also takes `left` and `right`; every side flips when clipped and stays inside the window.
 - **DataTable on phones before hydration**: `stackBelow` cards and `hideBelow` columns are decided in CSS from the first paint, at any width (up to three distinct `hideBelow` widths per table), and each row is in the HTML once — the cards are the grid's own rows, laid out by a container query. The table sits in a few wrapper `div`s for this; `className` and `ref` go on the outermost. The `.aura-table__card*` classes are gone.
-- **`formatDate()` from the package root** warns once in development when called without a `locale`: in 5.0 it becomes English and Gregorian like `/server`. Pass `{ locale: 'th' }` or use `useFormatDate()`.
 ## Phones and touch

package/dist/aura.bundle.js CHANGED Viewed

@@ -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;
@@ -1766,23 +1766,6 @@ window.Aura = (() => {
   }
   // src/DatePicker.tsx
-  var warnedNoLocale = false;
-  function isDev() {
-    try {
-      return true;
-    } 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 formatDate(iso, opts);
-  }
   function useFormatDate() {
     const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
     return React17.useCallback(

package/dist/cjs/index.cjs CHANGED Viewed

@@ -105,7 +105,7 @@ __export(index_exports, {
   contrast: () => contrast,
   createTheme: () => createTheme,
   formatBytes: () => formatBytes,
-  formatDate: () => formatDate2,
+  formatDate: () => formatDate,
   iconNames: () => iconNames,
   parseDate: () => parseDate,
   parseTime: () => parseTime,
@@ -1696,7 +1696,7 @@ function formatDate(iso, opts) {
   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;
@@ -1748,23 +1748,6 @@ function todayIn(timeZone) {
 }
 // src/DatePicker.tsx
-var warnedNoLocale = false;
-function isDev() {
-  try {
-    return process.env.NODE_ENV !== "production";
-  } 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 formatDate(iso, opts);
-}
 function useFormatDate() {
   const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
   return React17.useCallback(

package/dist/esm/DatePicker.js CHANGED Viewed

@@ -21,24 +21,7 @@ import {
   toISO,
   todayIn
 } from "./dates.js";
-import { parseDate as parseDate2 } from "./dates.js";
-let warnedNoLocale = false;
-function isDev() {
-  try {
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-function formatDate(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 formatDateBase(iso, opts);
-}
+import { formatDate, parseDate as parseDate2 } from "./dates.js";
 function useFormatDate() {
   const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
   return React.useCallback(

package/dist/esm/dates.js CHANGED Viewed

@@ -101,7 +101,7 @@ function formatDate(iso, opts) {
   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, "");
 }
 let MONTHS = null;

package/dist/index.d.ts CHANGED Viewed

@@ -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/dist/server/index.cjs CHANGED Viewed

@@ -27,7 +27,7 @@ __export(server_exports, {
   contrast: () => contrast,
   createTheme: () => createTheme,
   formatBytes: () => formatBytes,
-  formatDate: () => formatDate2,
+  formatDate: () => formatDate,
   fromISO: () => fromISO,
   parseDate: () => parseDate,
   parseTime: () => parseTime,
@@ -73,7 +73,7 @@ function formatDate(iso, opts) {
   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;
@@ -796,10 +796,3 @@ function colorSchemeScript(options) {
 // src/breakpoints.ts
 var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
-// src/server.ts
-function formatDate2(iso, opts) {
-  const o = Object.assign({}, opts);
-  if (!o.locale) o.locale = "en";
-  return formatDate(iso, o);
-}

package/dist/server/index.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export type StatusTone = "neutral" | "progress" | "ready" | "blocked";
 /** 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;
@@ -42,6 +42,10 @@ export type FormatDateOptions = DateDisplayOptions & {
 };
 export declare function toISO(d: Date | null | undefined): ISODate | null;
 export declare function fromISO(s: ISODate | null | undefined): Date | null;
+/** 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) */
@@ -162,9 +166,6 @@ export declare const breakpoints: {
 	lg: 1024;
 	xl: 1280;
 };
-/** Format an ISO date for display: "24 Sept 2026" by default (English, Gregorian); `{ locale: 'th' }` gives
- * "24 ก.ย. 2569", `{ locale: 'sv' }` "24 sep. 2026". Options as in the package root's formatDate. */
-export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
 export {
 	scale as brandScale,

package/dist/server/index.js CHANGED Viewed

@@ -34,7 +34,7 @@ function formatDate(iso, opts) {
   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;
@@ -757,13 +757,6 @@ function colorSchemeScript(options) {
 // src/breakpoints.ts
 var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
-// src/server.ts
-function formatDate2(iso, opts) {
-  const o = Object.assign({}, opts);
-  if (!o.locale) o.locale = "en";
-  return formatDate(iso, o);
-}
 export {
   STRINGS,
   scale as brandScale,
@@ -772,7 +765,7 @@ export {
   contrast,
   createTheme,
   formatBytes,
-  formatDate2 as formatDate,
+  formatDate,
   fromISO,
   parseDate,
   parseTime,

package/package.json CHANGED Viewed

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