@jirawatpyk/aura-react 4.11.0 → 4.12.0

package/README.md

@@ -65,7 +65,7 @@ export default function Root() {
 
 ## Components (49)
 
-Actions: Button, IconButton, Menu, DropdownMenu, Tag · Forms: TextField, Textarea, NumberField, Select, RadioGroup, Checkbox, Switch, SegmentedControl, Combobox (one value, or `multiple`), FileUpload (+ `formatBytes`) · Dates & times: DatePicker, DateRangePicker, Calendar, TimePicker (+ `formatDate`, `parseDate`, `parseTime`) · Feedback: Alert, Toaster/`toast()`, Tooltip, StatusPill, Badge, Progress, Skeleton, EmptyState · Overlays: Dialog, Drawer, Popover · Data: DataTable, Stat · Layout: AppShell, Container, Stack, Grid, Accordion, Pagination, Card, Tabs, Stepper, SideNav, Breadcrumb, Avatar, Surface, Icon · Theme: ColorSchemeToggle, ColorSchemeScript, `useColorScheme`, ThemeStyle/`createTheme` · Hooks: `useBreakpoint`, `useResponsive`, `breakpoints`, `useAuraLocale`.
+Actions: Button, IconButton, Menu, DropdownMenu, Tag · Forms: TextField, Textarea, NumberField, Select, RadioGroup, Checkbox, Switch, SegmentedControl, Combobox (one value, or `multiple`), FileUpload (+ `formatBytes`) · Dates & times: DatePicker, DateRangePicker, Calendar, TimePicker (+ `useFormatDate`, `formatDate`, `parseDate`, `parseTime`) · Feedback: Alert, Toaster/`toast()`, Tooltip, StatusPill, Badge, Progress, Skeleton, EmptyState · Overlays: Dialog, Drawer, Popover · Data: DataTable, Stat · Layout: AppShell, Container, Stack, Grid, Accordion, Pagination, Card, Tabs, Stepper, SideNav, Breadcrumb, Avatar, Surface, Icon · Theme: ColorSchemeToggle, ColorSchemeScript, `useColorScheme`, ThemeStyle/`createTheme` · Hooks: `useBreakpoint`, `useResponsive`, `breakpoints`, `useAuraLocale`.
 
 ## Router links, Swedish, motion
 
@@ -74,7 +74,7 @@ import Link from 'next/link';
 <AuraProvider locale="sv" linkComponent={Link}>   {/* th | en | sv */}
 ```
 
-`linkComponent` is used by Button `href`, Breadcrumb, Pagination `getHref`, Stat `href`, SideNav and DataTable row/pager links. 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">`. `formatDate()` has no provider to read, so it stays Thai unless you pass `locale`. Values are always Gregorian ISO dates.
+`linkComponent` is used by Button `href`, Breadcrumb, Pagination `getHref`, Stat `href`, SideNav and DataTable row/pager links. 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 and stays Thai unless you pass `locale`. Values are always Gregorian ISO dates.
 
 Motion: skeleton pulses and indeterminate bars honour `prefers-reduced-motion: reduce` — skeletons stop (a static bar), spinners and progress bars slow to a third.
 
@@ -110,7 +110,7 @@ Every component forwards `ref` to its real element — fields to the `<input>`/`
 
 ## Thai dates
 
-Values are ISO strings (`2026-09-18`); with `locale="th"` display is Thai with Buddhist-era years (`18 ก.ย. 2569`). People can type `18/09/2569`, `18/09/2026`, `2026-09-18` or `18 ก.ย. 2569`. Store ISO, never พ.ศ. `formatDate(iso, { format: 'long' })` → `18 กันยายน 2569`.
+Values are ISO strings (`2026-09-18`); with `locale="th"` display is Thai with Buddhist-era years (`18 ก.ย. 2569`). People can type `18/09/2569`, `18/09/2026`, `2026-09-18` or `18 ก.ย. 2569`. Store ISO, never พ.ศ. In components, `useFormatDate()(iso, { format: 'long' })` → `18 กันยายน 2569` under `locale="th"`, `18 September 2026` under `en`. `parseDate(text)` reads any of these forms in every locale.
 
 ## Server rendering
 

package/dist/aura.bundle.js

@@ -119,6 +119,7 @@ window.Aura = (() => {
     useAuraLocale: () => useAuraLocale,
     useBreakpoint: () => useBreakpoint,
     useColorScheme: () => useColorScheme,
+    useFormatDate: () => useFormatDate,
     useResponsive: () => useResponsive
   });
 
@@ -1582,6 +1583,22 @@ window.Aura = (() => {
     const loc = o.locale || "th";
     return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
   }
+  function useFormatDate() {
+    const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
+    return React17.useCallback(
+      function(iso, opts) {
+        const o = opts || {}, loc = o.locale || locale;
+        return formatDate(
+          iso,
+          Object.assign({}, o, {
+            locale: loc,
+            calendar: o.calendar || (o.locale ? void 0 : calendar) || defaultCalendar(loc)
+          })
+        );
+      },
+      [locale, calendar]
+    );
+  }
   var MONTHS = null;
   function monthIndex(word) {
     if (!MONTHS) {

package/dist/cjs/index.cjs

@@ -100,6 +100,7 @@ __export(index_exports, {
   useAuraLocale: () => useAuraLocale,
   useBreakpoint: () => useBreakpoint,
   useColorScheme: () => useColorScheme,
+  useFormatDate: () => useFormatDate,
   useResponsive: () => useResponsive
 });
 module.exports = __toCommonJS(index_exports);
@@ -1564,6 +1565,22 @@ function formatDate(iso, opts) {
   const loc = o.locale || "th";
   return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
 }
+function useFormatDate() {
+  const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
+  return React17.useCallback(
+    function(iso, opts) {
+      const o = opts || {}, loc = o.locale || locale;
+      return formatDate(
+        iso,
+        Object.assign({}, o, {
+          locale: loc,
+          calendar: o.calendar || (o.locale ? void 0 : calendar) || defaultCalendar(loc)
+        })
+      );
+    },
+    [locale, calendar]
+  );
+}
 var MONTHS = null;
 function monthIndex(word) {
   if (!MONTHS) {

package/dist/esm/DatePicker.js

@@ -111,6 +111,22 @@ function formatDate(iso, opts) {
   const loc = o.locale || "th";
   return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
 }
+function useFormatDate() {
+  const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
+  return React.useCallback(
+    function(iso, opts) {
+      const o = opts || {}, loc = o.locale || locale;
+      return formatDate(
+        iso,
+        Object.assign({}, o, {
+          locale: loc,
+          calendar: o.calendar || (o.locale ? void 0 : calendar) || defaultCalendar(loc)
+        })
+      );
+    },
+    [locale, calendar]
+  );
+}
 let MONTHS = null;
 function monthIndex(word) {
   if (!MONTHS) {
@@ -708,5 +724,6 @@ export {
   formatDate,
   fromISO,
   parseDate,
-  toISO
+  toISO,
+  useFormatDate
 };

package/dist/esm/index.js

@@ -13,7 +13,7 @@ import { Select } from "./Select.js";
 import { RadioGroup } from "./RadioGroup.js";
 import { Switch } from "./Switch.js";
 import { Combobox, defaultFilter } from "./Combobox.js";
-import { DatePicker, DateRangePicker, Calendar, formatDate, parseDate } from "./DatePicker.js";
+import { DatePicker, DateRangePicker, Calendar, formatDate, parseDate, useFormatDate } from "./DatePicker.js";
 import { Alert } from "./Alert.js";
 import { Toaster, toast } from "./Toaster.js";
 import { Tooltip } from "./Tooltip.js";
@@ -118,5 +118,6 @@ export {
   useAuraLocale,
   useBreakpoint,
   useColorScheme,
+  useFormatDate,
   useResponsive
 };

package/dist/index.d.ts

@@ -966,6 +966,9 @@ export type FormatDateOptions = DateDisplayOptions & {
 };
 /** Format an ISO date for display, e.g. "18 ก.ย. 2569" (th, Buddhist) or "18 Sept 2026" (en, Gregorian). */
 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;
 /** 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;
 export declare const Calendar: React$1.ForwardRefExoticComponent<CalendarProps & React$1.RefAttributes<HTMLDivElement>>;

package/package.json

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