@jirawatpyk/aura-react 5.23.0 → 5.25.0

package/README.md

@@ -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.
 
+## 5.25 — Chamber-OS addendum 27
+
+- **Toggle `Tag` takes `touchHeight`** (item 124): a selectable Tag (`selected` / `onClick`) with `touchHeight` is at least 44px tall below 640px and wherever the primary pointer is coarse, the same rule as Button's (5.24) — filter chips tapped with a finger. The pill grows rather than keeping 32px with a larger invisible hit area, so it lines up with 44px buttons on the same row and a tap lands where it looks. With a mouse from 640px up it stays 32px. A plain or removable Tag ignores the prop, and the remove button is unchanged; the prop is never written to the DOM. In a flex row with the default `align-items: stretch`, other items stretch to the chips' 44px; put them in their own row or set `align-items: center` if they should keep their size.
+
+## 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/aura.bundle.js

@@ -4242,7 +4242,16 @@ window.Aura = (() => {
   var Tag = React25.forwardRef(function Tag2(props, ref) {
     const t = useStrings();
     const selectable = props.onClick != null || props.selected != null;
-    const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
+    const rest = omit(props, [
+      "onRemove",
+      "selected",
+      "icon",
+      "className",
+      "children",
+      "disabled",
+      "removeLabel",
+      "touchHeight"
+    ]);
     const inner = [
       props.icon ? /* @__PURE__ */ React25.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
       /* @__PURE__ */ React25.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
@@ -4256,7 +4265,12 @@ window.Aura = (() => {
           type: "button",
           "aria-pressed": !!props.selected,
           disabled: props.disabled,
-          className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
+          className: cx(
+            "aura-tag is-selectable",
+            props.selected && "is-selected",
+            props.touchHeight && "aura-tag--touch",
+            props.className
+          )
         },
         props.selected ? /* @__PURE__ */ React25.createElement(Icon, { name: /* @__PURE__ */ React25.createElement(IconCheck, null), size: 14 }) : inner[0],
         inner[1]

package/dist/cjs/index.cjs

@@ -4224,7 +4224,16 @@ function textOf2(node) {
 var Tag = React25.forwardRef(function Tag2(props, ref) {
   const t = useStrings();
   const selectable = props.onClick != null || props.selected != null;
-  const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
+  const rest = omit(props, [
+    "onRemove",
+    "selected",
+    "icon",
+    "className",
+    "children",
+    "disabled",
+    "removeLabel",
+    "touchHeight"
+  ]);
   const inner = [
     props.icon ? /* @__PURE__ */ React25.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
     /* @__PURE__ */ React25.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
@@ -4238,7 +4247,12 @@ var Tag = React25.forwardRef(function Tag2(props, ref) {
         type: "button",
         "aria-pressed": !!props.selected,
         disabled: props.disabled,
-        className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
+        className: cx(
+          "aura-tag is-selectable",
+          props.selected && "is-selected",
+          props.touchHeight && "aura-tag--touch",
+          props.className
+        )
       },
       props.selected ? /* @__PURE__ */ React25.createElement(Icon, { name: /* @__PURE__ */ React25.createElement(IconCheck, null), size: 14 }) : inner[0],
       inner[1]

package/dist/esm/Tag.js

@@ -17,7 +17,16 @@ function textOf(node) {
 const Tag = React.forwardRef(function Tag2(props, ref) {
   const t = useStrings();
   const selectable = props.onClick != null || props.selected != null;
-  const rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
+  const rest = omit(props, [
+    "onRemove",
+    "selected",
+    "icon",
+    "className",
+    "children",
+    "disabled",
+    "removeLabel",
+    "touchHeight"
+  ]);
   const inner = [
     props.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: props.icon, size: 14 }) : null,
     /* @__PURE__ */ React.createElement("span", { key: "t", className: "aura-tag__text" }, props.children)
@@ -31,7 +40,12 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
         type: "button",
         "aria-pressed": !!props.selected,
         disabled: props.disabled,
-        className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
+        className: cx(
+          "aura-tag is-selectable",
+          props.selected && "is-selected",
+          props.touchHeight && "aura-tag--touch",
+          props.className
+        )
       },
       props.selected ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 14 }) : inner[0],
       inner[1]

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;
@@ -1348,6 +1350,10 @@ export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onC
 	selected?: boolean | undefined;
 	onClick?: ((e: React$1.MouseEvent<HTMLButtonElement>) => void) | undefined;
 	disabled?: boolean | undefined;
+	/** A toggle chip (`selected` / `onClick`) at least 44px tall below 640px or wherever the primary pointer is coarse
+	 * — filter chips tapped with a finger (5.25, Chamber-OS 124); with a mouse from 640px up it keeps 32px, as Button's
+	 * `touchHeight`. A plain or removable Tag ignores it. */
+	touchHeight?: boolean | undefined;
 }
 export interface ProgressProps {
 	/** Omit for indeterminate. */

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;
@@ -1348,6 +1350,10 @@ export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onC
 	selected?: boolean | undefined;
 	onClick?: ((e: React$1.MouseEvent<HTMLButtonElement>) => void) | undefined;
 	disabled?: boolean | undefined;
+	/** A toggle chip (`selected` / `onClick`) at least 44px tall below 640px or wherever the primary pointer is coarse
+	 * — filter chips tapped with a finger (5.25, Chamber-OS 124); with a mouse from 640px up it keeps 32px, as Button's
+	 * `touchHeight`. A plain or removable Tag ignores it. */
+	touchHeight?: boolean | undefined;
 }
 export interface ProgressProps {
 	/** Omit for indeterminate. */

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,11 +312,14 @@ 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. 5.25 (Chamber-OS 124): toggle Tags too. */
+@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); }
+  .aura-tag.aura-tag--touch { min-height: var(--aura-touch-target); }
 }
 /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
 @media (pointer: coarse) {

package/dist/styles.layer.css

@@ -314,11 +314,14 @@ 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. 5.25 (Chamber-OS 124): toggle Tags too. */
+@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); }
+  .aura-tag.aura-tag--touch { min-height: var(--aura-touch-target); }
 }
 /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
 @media (pointer: coarse) {

package/package.json

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