@jirawatpyk/aura-react 5.23.0 → 5.24.0

package/README.md

@@ -186,6 +186,10 @@ 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.
 
+## 5.24 — Chamber-OS addendum 26
+
+- **`touchHeight` follows the pointer, not only the width** (item 123): Button, IconButton and the ActionBar Clear are 44px wherever the primary pointer is coarse — a tablet in portrait (768px) or landscape (1024–1366px) — as well as below 640px. With a mouse (`pointer: fine`) from 640px up nothing changes. Visible on tablets for every control that already passes `touchHeight`. A touch laptop reports its trackpad as the primary pointer (`pointer: fine`), so it keeps the compact size, as AURA's other touch rules do.
+
 ## 5.23 — Chamber-OS addenda 23–25
 
 - **DataTable `card: 'wide'`** (item 120): in a stacked card the column is a field on a line of its own at the card's full inner width, after the half-width fields (and before a `footer`), its label above and its text wrapping — a reason with its evidence line. The grid is unchanged (an ordinary column at its `width`).

package/dist/index.d.cts

@@ -20,8 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
-	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
-	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
+	 * `size` — a small button that touch screens get at full touch height (5.15, Chamber-OS 100). With a mouse from
+	 * 640px up it keeps its size. */
 	touchHeight?: boolean | undefined;
 }
 /** A link that looks like a Button: give `Button` an `href` and it renders an `<a>` (navigation, not actions). */
@@ -41,8 +42,9 @@ export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLA
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding. Default `md` (44px). */
 	size?: ButtonSize | undefined;
-	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
-	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
+	 * `size` — a small button that touch screens get at full touch height (5.15, Chamber-OS 100). With a mouse from
+	 * 640px up it keeps its size. */
 	touchHeight?: boolean | undefined;
 	/** A router's link to render instead of `<a>`, e.g. `Link` from `next/link` (client-side navigation). It gets `href`, `className`, the children and the ref. */
 	linkComponent?: React$1.ElementType | undefined;
@@ -321,8 +323,8 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
-	/** 44×44 below 640px (the viewport's) instead of 32×32 — a phone sheet's close button, a card's ⋯ trigger
-	 * (5.15, Chamber-OS 100). */
+	/** 44×44 instead of 32×32 below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24) —
+	 * a phone sheet's close button, a card's ⋯ trigger (5.15, Chamber-OS 100). */
 	touchHeight?: boolean | undefined;
 }
 export interface MenuItem {
@@ -1074,7 +1076,7 @@ export interface DrawerProps extends Pick<React$1.HTMLAttributes<HTMLDivElement>
 	 * built-in "Close" in the provider's language. (5.9) */
 	closeLabel?: string | undefined;
 	/** Attributes for the close button, e.g. `{ 'data-testid': 'pay-sheet-close' }` (5.9), or `touchHeight: true` for a
-	 * 44px close button on phones (5.15). */
+	 * 44px close button on phones and tablets (5.15, 5.24). */
 	closeProps?: (ButtonAttributes & {
 		touchHeight?: boolean | undefined;
 	}) | undefined;
@@ -1203,8 +1205,8 @@ export interface ActionBarProps {
 	selected?: number | undefined;
 	/** Adds a "Clear" button next to the count. */
 	onClearSelection?: (() => void) | undefined;
-	/** 5.23 (Chamber-OS 122): the bar's own Clear button takes Button's `touchHeight` — 44px below 640px — to match
-	 * action buttons that use it. */
+	/** 5.23 (Chamber-OS 122): the bar's own Clear button takes Button's `touchHeight` — 44px below 640px or on a
+	 * coarse pointer — to match action buttons that use it. */
 	touchHeight?: boolean | undefined;
 	/** Name of the region. Default "Actions". */
 	label?: string | undefined;

package/dist/index.d.ts

@@ -20,8 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
-	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
-	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
+	 * `size` — a small button that touch screens get at full touch height (5.15, Chamber-OS 100). With a mouse from
+	 * 640px up it keeps its size. */
 	touchHeight?: boolean | undefined;
 }
 /** A link that looks like a Button: give `Button` an `href` and it renders an `<a>` (navigation, not actions). */
@@ -41,8 +42,9 @@ export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLA
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding. Default `md` (44px). */
 	size?: ButtonSize | undefined;
-	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
-	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
+	 * `size` — a small button that touch screens get at full touch height (5.15, Chamber-OS 100). With a mouse from
+	 * 640px up it keeps its size. */
 	touchHeight?: boolean | undefined;
 	/** A router's link to render instead of `<a>`, e.g. `Link` from `next/link` (client-side navigation). It gets `href`, `className`, the children and the ref. */
 	linkComponent?: React$1.ElementType | undefined;
@@ -321,8 +323,8 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
-	/** 44×44 below 640px (the viewport's) instead of 32×32 — a phone sheet's close button, a card's ⋯ trigger
-	 * (5.15, Chamber-OS 100). */
+	/** 44×44 instead of 32×32 below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24) —
+	 * a phone sheet's close button, a card's ⋯ trigger (5.15, Chamber-OS 100). */
 	touchHeight?: boolean | undefined;
 }
 export interface MenuItem {
@@ -1074,7 +1076,7 @@ export interface DrawerProps extends Pick<React$1.HTMLAttributes<HTMLDivElement>
 	 * built-in "Close" in the provider's language. (5.9) */
 	closeLabel?: string | undefined;
 	/** Attributes for the close button, e.g. `{ 'data-testid': 'pay-sheet-close' }` (5.9), or `touchHeight: true` for a
-	 * 44px close button on phones (5.15). */
+	 * 44px close button on phones and tablets (5.15, 5.24). */
 	closeProps?: (ButtonAttributes & {
 		touchHeight?: boolean | undefined;
 	}) | undefined;
@@ -1203,8 +1205,8 @@ export interface ActionBarProps {
 	selected?: number | undefined;
 	/** Adds a "Clear" button next to the count. */
 	onClearSelection?: (() => void) | undefined;
-	/** 5.23 (Chamber-OS 122): the bar's own Clear button takes Button's `touchHeight` — 44px below 640px — to match
-	 * action buttons that use it. */
+	/** 5.23 (Chamber-OS 122): the bar's own Clear button takes Button's `touchHeight` — 44px below 640px or on a
+	 * coarse pointer — to match action buttons that use it. */
 	touchHeight?: boolean | undefined;
 	/** Name of the region. Default "Actions". */
 	label?: string | undefined;

package/dist/server/index.d.cts

@@ -20,8 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
-	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
-	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
+	 * `size` — a small button that touch screens get at full touch height (5.15, Chamber-OS 100). With a mouse from
+	 * 640px up it keeps its size. */
 	touchHeight?: boolean | undefined;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */

package/dist/server/index.d.ts

@@ -20,8 +20,9 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	fullWidth?: boolean | undefined;
 	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
 	size?: ButtonSize | undefined;
-	/** 44px tall below 640px (the viewport's), whatever `size` — a small button that phones get at full touch height
-	 * (5.15, Chamber-OS 100). From 640px up it keeps its size. */
+	/** 44px tall below 640px (the viewport's) or wherever the primary pointer is coarse (a tablet, 5.24), whatever
+	 * `size` — a small button that touch screens get at full touch height (5.15, Chamber-OS 100). With a mouse from
+	 * 640px up it keeps its size. */
 	touchHeight?: boolean | undefined;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */

package/dist/styles.css

@@ -312,8 +312,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
 .aura-icon-btn:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
-/* 5.15 (Chamber-OS 100): touchHeight — visibly 44px on phones, for buttons and icon buttons a phone design wants full size. */
-@media (max-width: 639.98px) {
+/* 5.15 (Chamber-OS 100): touchHeight — visibly 44px on phones, for buttons and icon buttons a phone design wants full size.
+ * 5.24 (Chamber-OS 123): also wherever the primary pointer is coarse — a tablet at 768–1366px is a finger, not a mouse.
+ * A mouse on a wide screen (pointer: fine) keeps the compact size. */
+@media (max-width: 639.98px), (pointer: coarse) {
   .aura-btn.aura-btn--touch { height: var(--aura-touch-target); }
   .aura-btn.aura-btn--touch.aura-btn--full { height: auto; min-height: var(--aura-touch-target); }
   .aura-icon-btn.aura-icon-btn--touch { width: var(--aura-touch-target); height: var(--aura-touch-target); }

package/dist/styles.layer.css

@@ -314,8 +314,10 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
 .aura-icon-btn:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
-/* 5.15 (Chamber-OS 100): touchHeight — visibly 44px on phones, for buttons and icon buttons a phone design wants full size. */
-@media (max-width: 639.98px) {
+/* 5.15 (Chamber-OS 100): touchHeight — visibly 44px on phones, for buttons and icon buttons a phone design wants full size.
+ * 5.24 (Chamber-OS 123): also wherever the primary pointer is coarse — a tablet at 768–1366px is a finger, not a mouse.
+ * A mouse on a wide screen (pointer: fine) keeps the compact size. */
+@media (max-width: 639.98px), (pointer: coarse) {
   .aura-btn.aura-btn--touch { height: var(--aura-touch-target); }
   .aura-btn.aura-btn--touch.aura-btn--full { height: auto; min-height: var(--aura-touch-target); }
   .aura-icon-btn.aura-icon-btn--touch { width: var(--aura-touch-target); height: var(--aura-touch-target); }

package/package.json

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