@jirawatpyk/aura-react 5.81.0 → 5.82.0

package/README.md

@@ -248,6 +248,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.82 — DxT Monitor 25 (Badge xs)
+
+- **Badge `size="xs"`**: 16px high (a larger default font grows it), weight 500, 6px inset — a mark under a cell's main value that keeps a `rowHeight="density"` row at 48px (a 12px line with line-height 12px, 4px gap, the badge; a 12px text at its normal line-height is about 18px and the row grows). Thai text stays 11px at this size — the one exception to the 5.30 rule that Thai labels are at least 12px, so stacked tone marks stay off the 16px outline. Every tone and variant; no icon at this size (a dev warning says so). Also from `@jirawatpyk/aura-react/server`. `<Badge size="xs" variant="outline">Confirm</Badge>`.
+
 ## 5.81 — DxT Monitor 24 (the tab bar hides after a tap)
 
 - **BottomNav `hideOnScroll` and AppShell `headerHideOnScroll` after a tap**: with client-side navigation the bar stays mounted, and on Chrome / Android a tap leaves focus on the tapped tab — the bar then never hid on the next page. Focus in the bar now holds it only when it came from the keyboard: focus that enters right after a pointer press doesn't count, and focus moved with the keyboard does (Tab into or within the bar brings it back and keeps it; keys that only scroll the page, such as Space or PageDown, don't). A text field in the bar holds it however it was focused. No new prop; drop any wrapper that blurs the tab on click.

package/dist/aura.bundle.js

@@ -923,7 +923,10 @@ window.Aura = (() => {
     );
   }
   function badgeElement(props, ref) {
-    const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+    const rest = omit(props, ["tone", "variant", "icon", "className", "children", "size"]);
+    const xs = props.size === "xs";
+    if (xs && props.icon)
+      devWarnOnce("badge-xs-icon", 'Badge size="xs" has no icon (16px leaves no room for one); the icon is not shown.');
     return /* @__PURE__ */ React4.createElement(
       "span",
       {
@@ -934,10 +937,11 @@ window.Aura = (() => {
           "aura-badge--" + tone(props.tone),
           props.variant === "solid" && "is-solid",
           props.variant === "outline" && "is-outline",
+          xs && "aura-badge--xs",
           props.className
         )
       },
-      props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon, size: 12 }) : null,
+      props.icon && !xs ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon, size: 12 }) : null,
       props.children
     );
   }

package/dist/cjs/index.cjs

@@ -905,7 +905,10 @@ function spinnerElement(props, ref) {
   );
 }
 function badgeElement(props, ref) {
-  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+  const rest = omit(props, ["tone", "variant", "icon", "className", "children", "size"]);
+  const xs = props.size === "xs";
+  if (xs && props.icon)
+    devWarnOnce("badge-xs-icon", 'Badge size="xs" has no icon (16px leaves no room for one); the icon is not shown.');
   return /* @__PURE__ */ React4.createElement(
     "span",
     {
@@ -916,10 +919,11 @@ function badgeElement(props, ref) {
         "aura-badge--" + tone(props.tone),
         props.variant === "solid" && "is-solid",
         props.variant === "outline" && "is-outline",
+        xs && "aura-badge--xs",
         props.className
       )
     },
-    props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon, size: 12 }) : null,
+    props.icon && !xs ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon, size: 12 }) : null,
     props.children
   );
 }

package/dist/esm/display.js

@@ -137,7 +137,10 @@ function spinnerElement(props, ref) {
   );
 }
 function badgeElement(props, ref) {
-  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+  const rest = omit(props, ["tone", "variant", "icon", "className", "children", "size"]);
+  const xs = props.size === "xs";
+  if (xs && props.icon)
+    devWarnOnce("badge-xs-icon", 'Badge size="xs" has no icon (16px leaves no room for one); the icon is not shown.');
   return /* @__PURE__ */ React.createElement(
     "span",
     {
@@ -148,10 +151,11 @@ function badgeElement(props, ref) {
         "aura-badge--" + badgeTone(props.tone),
         props.variant === "solid" && "is-solid",
         props.variant === "outline" && "is-outline",
+        xs && "aura-badge--xs",
         props.className
       )
     },
-    props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, size: 12 }) : null,
+    props.icon && !xs ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, size: 12 }) : null,
     props.children
   );
 }

package/dist/index.d.cts

@@ -1719,6 +1719,9 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	/** soft (default) · solid · outline */
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
+	/** 5.82 (DxT Monitor 25): `xs` — 16px high, weight 500, 6px inset: a mark under a value inside a `rowHeight="density"`
+	 * row. No icon at this size (a dev warning says so). Default `sm` (20px). */
+	size?: "xs" | "sm" | undefined;
 }
 export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
 	children: React$1.ReactNode;

package/dist/index.d.ts

@@ -1719,6 +1719,9 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	/** soft (default) · solid · outline */
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
+	/** 5.82 (DxT Monitor 25): `xs` — 16px high, weight 500, 6px inset: a mark under a value inside a `rowHeight="density"`
+	 * row. No icon at this size (a dev warning says so). Default `sm` (20px). */
+	size?: "xs" | "sm" | undefined;
 }
 export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
 	children: React$1.ReactNode;

package/dist/server/index.cjs

@@ -1308,7 +1308,10 @@ function spinnerElement(props, ref) {
   );
 }
 function badgeElement(props, ref) {
-  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+  const rest = omit(props, ["tone", "variant", "icon", "className", "children", "size"]);
+  const xs = props.size === "xs";
+  if (xs && props.icon)
+    devWarnOnce("badge-xs-icon", 'Badge size="xs" has no icon (16px leaves no room for one); the icon is not shown.');
   return /* @__PURE__ */ React3.createElement(
     "span",
     {
@@ -1319,10 +1322,11 @@ function badgeElement(props, ref) {
         "aura-badge--" + tone(props.tone),
         props.variant === "solid" && "is-solid",
         props.variant === "outline" && "is-outline",
+        xs && "aura-badge--xs",
         props.className
       )
     },
-    props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon, size: 12 }) : null,
+    props.icon && !xs ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon, size: 12 }) : null,
     props.children
   );
 }

package/dist/server/index.d.cts

@@ -222,6 +222,9 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	/** soft (default) · solid · outline */
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
+	/** 5.82 (DxT Monitor 25): `xs` — 16px high, weight 500, 6px inset: a mark under a value inside a `rowHeight="density"`
+	 * row. No icon at this size (a dev warning says so). Default `sm` (20px). */
+	size?: "xs" | "sm" | undefined;
 }
 export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;

package/dist/server/index.d.ts

@@ -222,6 +222,9 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	/** soft (default) · solid · outline */
 	variant?: "soft" | "solid" | "outline" | undefined;
 	icon?: IconInput | undefined;
+	/** 5.82 (DxT Monitor 25): `xs` — 16px high, weight 500, 6px inset: a mark under a value inside a `rowHeight="density"`
+	 * row. No icon at this size (a dev warning says so). Default `sm` (20px). */
+	size?: "xs" | "sm" | undefined;
 }
 export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "children"> {
 	title: React$1.ReactNode;

package/dist/server/index.js

@@ -1241,7 +1241,10 @@ function spinnerElement(props, ref) {
   );
 }
 function badgeElement(props, ref) {
-  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+  const rest = omit(props, ["tone", "variant", "icon", "className", "children", "size"]);
+  const xs = props.size === "xs";
+  if (xs && props.icon)
+    devWarnOnce("badge-xs-icon", 'Badge size="xs" has no icon (16px leaves no room for one); the icon is not shown.');
   return /* @__PURE__ */ React3.createElement(
     "span",
     {
@@ -1252,10 +1255,11 @@ function badgeElement(props, ref) {
         "aura-badge--" + tone(props.tone),
         props.variant === "solid" && "is-solid",
         props.variant === "outline" && "is-outline",
+        xs && "aura-badge--xs",
         props.className
       )
     },
-    props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon, size: 12 }) : null,
+    props.icon && !xs ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon, size: 12 }) : null,
     props.children
   );
 }

package/dist/styles.css

@@ -1671,6 +1671,12 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-badge--neutral.is-outline { border-color: var(--aura-border-control); }
 .aura-badge.is-solid { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
 .aura-badge--danger.is-solid { background: var(--aura-status-blocked-solid-bg); color: var(--aura-status-blocked-solid-fg); }
+/* 5.82 (DxT Monitor 25): xs — a mark under a cell's value in a density row (48px: a 12px line, 4px, this). 16px at the
+ * default font (min-, so a larger default font grows it), weight 500, 6px inset. Same tones and variants. */
+.aura-badge--xs { min-height: 16px; padding: 0 6px; font-weight: 500; }
+/* Thai keeps 11px at xs — the one exception to the 5.30 Thai 12px floor: at 12px with line-height 1 the stacked tone
+ * marks (ซ้ำ) touch the outline; 11px keeps them off the border. */
+.aura-badge.aura-badge--xs:lang(th) { font-size: max(11px, .6875rem); }
 
 /* ---------- Tag ---------- */
 .aura-tag {

package/dist/styles.layer.css

@@ -1673,6 +1673,12 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-badge--neutral.is-outline { border-color: var(--aura-border-control); }
 .aura-badge.is-solid { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
 .aura-badge--danger.is-solid { background: var(--aura-status-blocked-solid-bg); color: var(--aura-status-blocked-solid-fg); }
+/* 5.82 (DxT Monitor 25): xs — a mark under a cell's value in a density row (48px: a 12px line, 4px, this). 16px at the
+ * default font (min-, so a larger default font grows it), weight 500, 6px inset. Same tones and variants. */
+.aura-badge--xs { min-height: 16px; padding: 0 6px; font-weight: 500; }
+/* Thai keeps 11px at xs — the one exception to the 5.30 Thai 12px floor: at 12px with line-height 1 the stacked tone
+ * marks (ซ้ำ) touch the outline; 11px keeps them off the border. */
+.aura-badge.aura-badge--xs:lang(th) { font-size: max(11px, .6875rem); }
 
 /* ---------- Tag ---------- */
 .aura-tag {

package/package.json

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