@jirawatpyk/aura-react 4.18.0 → 4.20.0

package/dist/index.d.ts

@@ -74,7 +74,7 @@ export interface DataTableColumn {
 	pinned?: boolean | undefined;
 	/** Start hidden (show it from the columns button). */
 	hidden?: boolean | undefined;
-	/** Hide this column when the table is narrower than this (px, or a breakpoint name). For tablets: keep ID, name, date and status; drop the rest below `lg`. Not applied to stacked cards. */
+	/** Hide this column when the table is narrower than this (px, or a breakpoint name). For tablets: keep ID, name, date and status; drop the rest below `lg`. Not applied to stacked cards. Decided in CSS from the first paint (4.20) for up to three distinct widths per table; more than that apply once JavaScript runs. */
 	hideBelow?: number | "sm" | "md" | "lg" | "xl" | undefined;
 	/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
 	actions?: boolean | undefined;
@@ -117,6 +117,11 @@ export interface DataTableProps {
 	onSelectionChange?: ((keys: Array<string | number>) => void) | undefined;
 	/** Shown when rows is empty. */
 	empty?: DataTableEmpty | undefined;
+	/** A totals row under the body (4.19): content per column key, e.g. `{ id: 'Total', vat: '7,000.00', total: '107,000.00' }`.
+	 * Cells share the body's widths and alignment, so right-aligned money lines up. Stacked cards get a Totals card. */
+	footer?: Record<string, React$1.ReactNode> | undefined;
+	/** Keep the totals row visible while a `height` table scrolls. (4.19) */
+	stickyFooter?: boolean | undefined;
 	/** Rows per page; omit for no pagination. */
 	pageSize?: number | undefined;
 	/** Controlled page (1-based); pair with onPageChange. */
@@ -166,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;
-	/** Container width in px below which rows render as stacked cards (phones). Try 640. Measured with ResizeObserver, so it follows the container, not the window. */
+	/** 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. */
 	stackBelow?: number | undefined;
 	className?: string | undefined;
 }
@@ -201,6 +206,8 @@ export interface AuraProviderProps {
 	calendar?: "buddhist" | "gregory" | undefined;
 	/** Override individual strings. */
 	strings?: Partial<Record<string, string | ((...args: any[]) => string)>> | undefined;
+	/** IANA time zone for "today" in DatePicker, DateRangePicker and Calendar, e.g. `Asia/Bangkok` (4.19). Default: the browser's. */
+	timeZone?: string | undefined;
 	/** `compact`: 36px fields and buttons, 40px table rows — dense admin screens. Touch screens keep 44px. Default: comfortable (or an ancestor's `data-density`). */
 	density?: "comfortable" | "compact" | undefined;
 	/** Your router's link (e.g. `Link` from `next/link`), used by every AURA component that renders a link: Button with `href`, SideNav, Breadcrumb, Stat, Pagination, DataTable row links. It gets `href`, `className`, `aria-current`, the children and the ref. A component's own `linkComponent` wins. */
@@ -256,6 +263,16 @@ export interface MenuItem {
 	/** A divider instead of an item. */
 	separator?: boolean | undefined;
 	onSelect?: (() => void) | undefined;
+	/** A link item (4.19): rendered through your router's link (`linkComponent`), e.g. a download or "Open in new tab". */
+	href?: string | undefined;
+	/** Link target, e.g. `_blank`, with `href`. */
+	target?: string | undefined;
+	/** `danger` for destructive items (Void, Delete): danger colour, put them last after a separator. (4.19) */
+	tone?: "danger" | undefined;
+	/** `radio` makes a single-choice item (menuitemradio); `checked` marks the chosen one. (4.19) */
+	type?: "radio" | undefined;
+	/** Radio items with the same `group` form one labelled group (the name is read out). (4.19) */
+	group?: string | undefined;
 }
 /** Popover list anchored to an element, rendered in a portal. */
 export interface MenuProps {
@@ -268,6 +285,8 @@ export interface MenuProps {
 	onClose: (restoreFocus: boolean) => void;
 	/** Focus the first item on open. Default true; turn off only for static demos. */
 	autoFocus?: boolean | undefined;
+	/** Router link for items with `href`; defaults to AuraProvider's `linkComponent`, then `<a>`. (4.19) */
+	linkComponent?: React$1.ElementType | undefined;
 }
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
@@ -460,7 +479,9 @@ export interface TooltipProps {
 	content: React$1.ReactNode;
 	/** One focusable element. */
 	children: React$1.ReactElement;
-	side?: "top" | "bottom" | undefined;
+	/** Preferred side. Default `top`. `left` / `right` (4.20) for icon buttons at the right edge of a table or in a
+	 * collapsed rail. Flips to the opposite side when clipped, and always stays inside the viewport. */
+	side?: "top" | "bottom" | "left" | "right" | undefined;
 	/** Hover delay in ms. Default 400. */
 	delay?: number | undefined;
 	/** Force open (demos, tests). */
@@ -516,14 +537,20 @@ export interface TabItem {
 	count?: number | undefined;
 	disabled?: boolean | undefined;
 	content?: React$1.ReactNode | undefined;
+	/** A route (4.19). When every tab has one, Tabs renders a `nav` of links (section tabs that are pages), with
+	 * `aria-current="page"` on the current one and no panels. */
+	href?: string | undefined;
 }
 export interface TabsProps {
 	tabs: TabItem[];
-	/** Accessible name for the tab list. */
+	/** Accessible name for the tab list (or the nav, for link tabs). */
 	label: string;
+	/** The current tab's id. For link tabs, the current route's tab. */
 	value?: string | undefined;
 	defaultValue?: string | undefined;
 	onChange?: ((id: string) => void) | undefined;
+	/** Router link for tabs with `href`; defaults to AuraProvider's `linkComponent`, then `<a>`. (4.19) */
+	linkComponent?: React$1.ElementType | undefined;
 	className?: string | undefined;
 }
 export interface NavItem {
@@ -592,6 +619,8 @@ export interface DropdownMenuProps {
 	items: MenuItem[];
 	/** Accessible name for the menu. */
 	label?: string | undefined;
+	/** Router link for items with `href`. (4.19) */
+	linkComponent?: React$1.ElementType | undefined;
 }
 export interface ComboboxOption {
 	value: string;
@@ -726,11 +755,17 @@ export interface CalendarProps extends DateDisplayOptions {
 	end?: ISODate | null | undefined;
 	focus?: ISODate | null | undefined;
 	range?: boolean | undefined;
-	min?: ISODate | undefined;
-	max?: ISODate | undefined;
+	/** Earliest / latest day; `'today'` means today in `timeZone` (4.19). */
+	min?: ISODate | "today" | undefined;
+	max?: ISODate | "today" | undefined;
 	isDateDisabled?: ((iso: ISODate) => boolean) | undefined;
 	/** 0 = Sunday (Thai default), 1 = Monday. */
 	weekStartsOn?: 0 | 1 | undefined;
+	/** IANA time zone that decides which day is "today" (the marker, `min`/`max="today"`, the Today button), e.g.
+	 * `Asia/Bangkok`. Default: the provider's `timeZone`, else the browser's. (4.19) */
+	timeZone?: string | undefined;
+	/** Today, given outright (ISO). Wins over `timeZone`; handy in tests and server-rendered pages. (4.19) */
+	today?: ISODate | undefined;
 	onSelect?: ((iso: ISODate | null) => void) | undefined;
 	/** Adds a Clear link to the footer. */
 	onClear?: (() => void) | undefined;
@@ -746,10 +781,16 @@ export interface DateFieldProps extends FieldProps, DateDisplayOptions {
 	disabled?: boolean | undefined;
 	/** Clear button while there is a value. Default true. */
 	clearable?: boolean | undefined;
-	min?: ISODate | undefined;
-	max?: ISODate | undefined;
+	/** Earliest / latest day; `'today'` means today in `timeZone` (4.19). */
+	min?: ISODate | "today" | undefined;
+	max?: ISODate | "today" | undefined;
 	isDateDisabled?: ((iso: ISODate) => boolean) | undefined;
 	weekStartsOn?: 0 | 1 | undefined;
+	/** IANA time zone that decides which day is "today" (the marker, `min`/`max="today"`, the Today button), e.g.
+	 * `Asia/Bangkok`. Default: the provider's `timeZone`, else the browser's. (4.19) */
+	timeZone?: string | undefined;
+	/** Today, given outright (ISO). Wins over `timeZone`; handy in tests and server-rendered pages. (4.19) */
+	today?: ISODate | undefined;
 	className?: string | undefined;
 }
 export interface DatePickerProps extends DateFieldProps {
@@ -822,6 +863,91 @@ export interface AppShellProps {
 	menuLabel?: string | undefined;
 	/** id of `<main>`, for a skip link. Default `main`. */
 	mainId?: string | undefined;
+	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
+	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
+	bottomNav?: React$1.ReactElement | undefined;
+	className?: string | undefined;
+}
+export interface SeparatorProps {
+	/** Default `horizontal` (full width). `vertical` fills the height of a flex row, e.g. between toolbar groups. */
+	orientation?: "horizontal" | "vertical" | undefined;
+	/** Default true: hidden from screen readers. `false` renders `role="separator"`, announced as a boundary. */
+	decorative?: boolean | undefined;
+	/** Space on both sides, as an `aura-space-*` step (e.g. 4 = 16px). Default 0. */
+	spacing?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
+	className?: string | undefined;
+}
+export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className"> {
+	/** The table's name (a `<caption>`). Give every table one; `captionHidden` keeps it for screen readers only. */
+	caption?: React$1.ReactNode | undefined;
+	captionHidden?: boolean | undefined;
+	/** `compact` tightens the cell padding. Default follows the page. */
+	density?: "comfortable" | "compact" | undefined;
+	className?: string | undefined;
+	children?: React$1.ReactNode | undefined;
+}
+export interface TableSectionProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
+	className?: string | undefined;
+}
+export interface TableRowProps extends React$1.HTMLAttributes<HTMLTableRowElement> {
+	className?: string | undefined;
+}
+export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableCellElement>, "align" | "scope"> {
+	/** Text alignment. `numeric` implies `end`. */
+	align?: "start" | "center" | "end" | undefined;
+	/** Money and counts: right-aligned, tabular figures. */
+	numeric?: boolean | undefined;
+	/** IDs and codes in the mono face. */
+	mono?: boolean | undefined;
+	/** Th only. Default `col`. */
+	scope?: "col" | "row" | "colgroup" | "rowgroup" | undefined;
+	className?: string | undefined;
+}
+export interface ActionBarProps {
+	/** Buttons, right-aligned (the primary one last). */
+	children?: React$1.ReactNode | undefined;
+	/** A short line such as "Total 107,000.00 THB · due Oct 22, 2026" or "Unsaved changes". It sits in a polite live
+	 * region that is always in the page, so a change is announced. */
+	status?: React$1.ReactNode | undefined;
+	/** `viewport` (default): sticks to the bottom of the screen, padded for the home indicator, above a BottomNav.
+	 * `container`: sticks to the bottom of the scrolling card or panel it's in. Both stay in the flow at the end of their
+	 * parent, so they never cover the last field. Make it the last child of the form or card it belongs to: like any
+	 * `position: sticky` element it sticks only while that parent is on screen. */
+	position?: "viewport" | "container" | undefined;
+	/** Bulk actions: the number of selected rows. Shows "N selected" in the status; at 0 the bar hides (its live region
+	 * stays, so the next selection is announced) and its actions leave the tab order. */
+	selected?: number | undefined;
+	/** Adds a "Clear" button next to the count. */
+	onClearSelection?: (() => void) | undefined;
+	/** Name of the region. Default "Actions". */
+	label?: string | undefined;
+	className?: string | undefined;
+}
+export interface BottomNavItem {
+	id: string;
+	/** Short: five items share 320px. */
+	label: string;
+	icon: IconInput;
+	href?: string | undefined;
+	/** A number on the icon (99+ above 99); 0 hides it. Part of the item's accessible name. */
+	count?: number | undefined;
+	/** A dot on the icon, e.g. "new". Give it words with `badgeLabel`. */
+	badge?: boolean | undefined;
+	/** Read after the label when `badge` is set, e.g. "new". */
+	badgeLabel?: string | undefined;
+}
+export interface BottomNavProps {
+	/** 2–5 items. */
+	items: BottomNavItem[];
+	value?: string | undefined;
+	defaultValue?: string | undefined;
+	onChange?: ((id: string) => void) | undefined;
+	/** Default "Main". */
+	label?: string | undefined;
+	/** Router link for items with `href`; defaults to the AuraProvider's `linkComponent`, then `<a>`. */
+	linkComponent?: React$1.ElementType | undefined;
+	/** Hidden from this breakpoint up, in CSS (so the server's HTML is right). Default `lg` (1024px); `false` never hides. */
+	hideFrom?: "md" | "lg" | "xl" | false | undefined;
 	className?: string | undefined;
 }
 export interface StatChange {
@@ -1101,10 +1227,14 @@ export declare const Combobox: ComboboxComponent;
 export type FormatDateOptions = DateDisplayOptions & {
 	format?: "short" | "long" | "numeric" | Intl.DateTimeFormatOptions | undefined;
 };
-/** 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;
 /** 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;
@@ -1163,6 +1293,26 @@ export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps
  * Which one shows is decided in CSS (4.16), so the server's HTML is already right on a phone and nothing shifts on
  * hydration; JavaScript only opens and closes the drawer. */
 export declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
+/** ActionBar — a bar stuck to the bottom of the screen or of a card: a status line and the form's or selection's
+ * actions. It is `position: sticky`, so it stays in the flow at the end of its parent and never covers the last field. */
+export declare const ActionBar: React$1.ForwardRefExoticComponent<ActionBarProps & React$1.RefAttributes<HTMLDivElement>>;
+/** Separator — a 1px `aura-border-default` rule between groups of content (4.20). Decorative by default (hidden from
+ * screen readers); `decorative={false}` makes it a `role="separator"` that is announced. */
+export declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+/** A static table. Scrolls sideways inside its own box when it is wider than its container. */
+export declare const Table: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<HTMLTableElement>>;
+export declare const THead: React$1.ForwardRefExoticComponent<TableSectionProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+export declare const TBody: React$1.ForwardRefExoticComponent<TableSectionProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+export declare const TFoot: React$1.ForwardRefExoticComponent<TableSectionProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+export declare const Tr: React$1.ForwardRefExoticComponent<TableRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
+/** Header cell. `scope` defaults to `col`; pass `scope="row"` for a row header in the body. */
+export declare const Th: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
+/** Data cell. `numeric` right-aligns with tabular figures (money, counts). */
+export declare const Td: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
+/** BottomNav — a phone tab bar: icon over a short label, a count or dot, the current page marked. Fixed to the bottom,
+ * padded for the home indicator, with a spacer of the same height in the flow so nothing sits under it. Which
+ * breakpoints show it is decided in CSS, so the server's HTML is already right and nothing shifts on hydration. */
+export declare const BottomNav: React$1.ForwardRefExoticComponent<BottomNavProps & React$1.RefAttributes<HTMLElement>>;
 /** Min-width breakpoints in px, mirroring the aura-bp-* tokens. */
 export declare const breakpoints: {
 	sm: 640;
@@ -1227,6 +1377,7 @@ export interface AuraStrings {
 	prevPage: string;
 	nextPage: string;
 	rowCount: (c: number) => string;
+	totals: string;
 	actions: string;
 	optional: string;
 	timePlaceholder: string;
@@ -1267,6 +1418,8 @@ export interface AuraLocaleValue {
 	linkComponent?: React$1.ElementType | null | undefined;
 	/** The density set on the nearest AuraProvider that sets one (null: none, i.e. comfortable unless an ancestor's data-density says otherwise). */
 	density?: "comfortable" | "compact" | null | undefined;
+	/** The time zone set on the nearest AuraProvider that sets one (4.19). */
+	timeZone?: string | null | undefined;
 }
 /** Sets the language of built-in labels (and the default date locale) for everything inside. */
 export declare function AuraProvider(props: AuraProviderProps): React$1.ReactElement;

package/dist/server/index.cjs

@@ -32,7 +32,8 @@ __export(server_exports, {
   parseDate: () => parseDate,
   parseTime: () => parseTime,
   statusTone: () => toneFor,
-  toISO: () => toISO
+  toISO: () => toISO,
+  todayIn: () => todayIn
 });
 module.exports = __toCommonJS(server_exports);
 
@@ -112,6 +113,16 @@ function parseDate(text) {
   const dt = new Date(y, mo - 1, d);
   return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
 }
+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/text.ts
 function formatBytes(n2) {
@@ -230,6 +241,7 @@ var STRINGS = {
     },
     prevPage: "Previous page",
     nextPage: "Next page",
+    totals: "Totals",
     rowCount: function(c) {
       return n(c) + " rows";
     },
@@ -343,6 +355,7 @@ var STRINGS = {
     },
     prevPage: "\u0E2B\u0E19\u0E49\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
     nextPage: "\u0E2B\u0E19\u0E49\u0E32\u0E16\u0E31\u0E14\u0E44\u0E1B",
+    totals: "\u0E23\u0E27\u0E21",
     rowCount: function(c) {
       return n(c) + " \u0E41\u0E16\u0E27";
     },
@@ -456,6 +469,7 @@ var STRINGS = {
     },
     prevPage: "F\xF6reg\xE5ende sida",
     nextPage: "N\xE4sta sida",
+    totals: "Summa",
     rowCount: function(c) {
       return nsv(c) + " rader";
     },

package/dist/server/index.d.ts

@@ -44,6 +44,8 @@ export declare function toISO(d: Date | null | undefined): ISODate | null;
 export declare function fromISO(s: ISODate | null | undefined): Date | null;
 /** 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;
 /** 1536 → "1.5 KB". */
 export declare function formatBytes(n: number | null | undefined): string;
 /** Parse typed time: 9 · 09 · 930 · 0930 · 9:30 · 9.30 · 09.30 น. · 9:30 pm → "HH:mm" (24-hour) or null. */
@@ -102,6 +104,7 @@ export interface AuraStrings {
 	prevPage: string;
 	nextPage: string;
 	rowCount: (c: number) => string;
+	totals: string;
 	actions: string;
 	optional: string;
 	timePlaceholder: string;

package/dist/server/index.js

@@ -74,6 +74,16 @@ function parseDate(text) {
   const dt = new Date(y, mo - 1, d);
   return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
 }
+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/text.ts
 function formatBytes(n2) {
@@ -192,6 +202,7 @@ var STRINGS = {
     },
     prevPage: "Previous page",
     nextPage: "Next page",
+    totals: "Totals",
     rowCount: function(c) {
       return n(c) + " rows";
     },
@@ -305,6 +316,7 @@ var STRINGS = {
     },
     prevPage: "\u0E2B\u0E19\u0E49\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
     nextPage: "\u0E2B\u0E19\u0E49\u0E32\u0E16\u0E31\u0E14\u0E44\u0E1B",
+    totals: "\u0E23\u0E27\u0E21",
     rowCount: function(c) {
       return n(c) + " \u0E41\u0E16\u0E27";
     },
@@ -418,6 +430,7 @@ var STRINGS = {
     },
     prevPage: "F\xF6reg\xE5ende sida",
     nextPage: "N\xE4sta sida",
+    totals: "Summa",
     rowCount: function(c) {
       return nsv(c) + " rader";
     },
@@ -764,5 +777,6 @@ export {
   parseDate,
   parseTime,
   toneFor as statusTone,
-  toISO
+  toISO,
+  todayIn
 };