@jirawatpyk/aura-tokens 4.13.0 → 4.14.0

package/aura-tailwind.css

@@ -1,4 +1,4 @@
-/* AURA v4.13.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
+/* AURA v4.14.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
  *   @import "tailwindcss";
  *   @import "@jirawatpyk/aura-tokens/tailwind.css";
  * Gives bg-bg-surface, text-fg-primary, border-border-strong, p-aura-6, rounded-aura-xl, shadow-aura-overlay,

package/aura.css

@@ -1,4 +1,4 @@
-/* AURA v4.13.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
+/* AURA v4.14.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
 /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
 
 :root, [data-theme="light"] {
@@ -320,6 +320,7 @@
   --aura-popover-max-height: 320px;
   --aura-input-font-size: 14px;
   --aura-touch-target: 44px;
+  --aura-table-row-height: 48px;
   --aura-bp-sm: 640px;
   --aura-bp-md: 768px;
   --aura-bp-lg: 1024px;

package/components/aura.bundle.js

@@ -123,6 +123,7 @@ window.Aura = (() => {
     useAuraLocale: () => useAuraLocale,
     useBreakpoint: () => useBreakpoint,
     useColorScheme: () => useColorScheme,
+    useDensity: () => useDensity,
     useFormatDate: () => useFormatDate,
     useResponsive: () => useResponsive
   });
@@ -609,6 +610,8 @@ window.Aura = (() => {
   };
   var LocaleContext = React3.createContext(null);
   function AuraProvider(props) {
+    const outer = React3.useContext(LocaleContext);
+    const density = props.density || outer && outer.density || null;
     const value = React3.useMemo(
       function() {
         const base = props.locale && STRINGS[props.locale] || STRINGS.en;
@@ -616,12 +619,13 @@ window.Aura = (() => {
           locale: props.locale || "en",
           calendar: props.calendar || null,
           strings: props.strings ? Object.assign({}, base, props.strings) : base,
-          linkComponent: props.linkComponent || null
+          linkComponent: props.linkComponent || null,
+          density
         };
       },
-      [props.locale, props.calendar, props.strings, props.linkComponent]
+      [props.locale, props.calendar, props.strings, props.linkComponent, density]
     );
-    return /* @__PURE__ */ React3.createElement(LocaleContext.Provider, { value }, props.children);
+    return /* @__PURE__ */ React3.createElement(LocaleContext.Provider, { value }, props.density ? /* @__PURE__ */ React3.createElement("div", { className: "aura-density", "data-density": props.density }, props.children) : props.children);
   }
   function useAuraLocale() {
     return React3.useContext(LocaleContext) || { locale: null, calendar: null, strings: STRINGS.en };
@@ -630,6 +634,10 @@ window.Aura = (() => {
     const ctx = React3.useContext(LocaleContext);
     return own || ctx && ctx.linkComponent || "a";
   }
+  function useDensity() {
+    const ctx = React3.useContext(LocaleContext);
+    return ctx && ctx.density || void 0;
+  }
   function useStrings() {
     return useAuraLocale().strings;
   }
@@ -2722,6 +2730,7 @@ window.Aura = (() => {
   }
   function Command(props) {
     const t = useStrings();
+    const density = useDensity();
     const id = uid(), listId = id + "-list";
     const box = React25.useRef(null);
     const input = React25.useRef(null);
@@ -2833,6 +2842,7 @@ window.Aura = (() => {
         "div",
         {
           className: "aura-dialog-layer aura-command-layer",
+          "data-density": density,
           onKeyDown: function(e) {
             modal.onKeyDown(e);
             e.stopPropagation();
@@ -3002,6 +3012,7 @@ window.Aura = (() => {
   var import_react_dom7 = __toESM(require_react_dom(), 1);
   var Dialog = React27.forwardRef(function Dialog2(props, ref) {
     const t = useStrings();
+    const density = useDensity();
     const own = React27.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
     function close() {
       if (props.dismissible !== false && props.onClose) props.onClose();
@@ -3014,7 +3025,7 @@ window.Aura = (() => {
     });
     if (!modal.ready) return null;
     return (0, import_react_dom7.createPortal)(
-      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer", onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React27.createElement(
+      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React27.createElement(
         "div",
         {
           ref: merged,
@@ -3035,6 +3046,7 @@ window.Aura = (() => {
   });
   var Drawer = React27.forwardRef(function Drawer2(props, ref) {
     const t = useStrings();
+    const density = useDensity();
     const own = React27.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();
     function close() {
       if (props.dismissible !== false && props.onClose) props.onClose();
@@ -3048,7 +3060,7 @@ window.Aura = (() => {
     if (!modal.ready) return null;
     const side = props.side === "left" ? "left" : "right";
     return (0, import_react_dom7.createPortal)(
-      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React27.createElement(
+      /* @__PURE__ */ React27.createElement("div", { className: "aura-dialog-layer aura-drawer-layer", "data-density": density, onKeyDown: modal.onKeyDown }, /* @__PURE__ */ React27.createElement("div", { className: "aura-scrim", onClick: close, "aria-hidden": true }), /* @__PURE__ */ React27.createElement(
         "div",
         {
           ref: merged,
@@ -3079,7 +3091,7 @@ window.Aura = (() => {
     { key: "owner", label: "OWNER" }
   ];
   var SKELETON_WIDTHS = ["72%", "56%", "84%", "44%", "64%"];
-  var ROW_H = 48;
+  var ROW_H_DEFAULT = 48;
   var OVERSCAN = 8;
   var FLEX_MIN = 160;
   var DataTable = React28.forwardRef(function DataTable2(props, ref) {
@@ -3165,6 +3177,14 @@ window.Aura = (() => {
       return px != null && boxWidth[0] < px;
     }
     const scrollRef = React28.useRef(null);
+    const rowH = React28.useState(ROW_H_DEFAULT);
+    const ROW_H = rowH[0];
+    useIsoLayoutEffect(function() {
+      const el = wrapRef.current;
+      if (!el || typeof getComputedStyle === "undefined") return;
+      const v = parseFloat(getComputedStyle(el).getPropertyValue("--aura-table-row-height"));
+      if (v > 0 && v !== rowH[0]) rowH[1](v);
+    });
     const pending = React28.useRef(null);
     const resizing = React28.useRef(false);
     useIsoLayoutEffect(function() {
@@ -4027,6 +4047,7 @@ window.Aura = (() => {
         "div",
         {
           ref: wrapMerged,
+          "data-density": props.density,
           className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
           role: "region",
           "aria-label": props.label,
@@ -4055,6 +4076,7 @@ window.Aura = (() => {
       "div",
       {
         ref: wrapMerged,
+        "data-density": props.density,
         className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
       },
       refreshing ? /* @__PURE__ */ React28.createElement("span", { className: "aura-table__busy-bar", "aria-hidden": true }) : null,
@@ -5759,6 +5781,7 @@ window.Aura = (() => {
   }
   var Popover = React51.forwardRef(function Popover2(props, ref) {
     const t = useStrings();
+    const density = useDensity();
     const auto = uid(), id = props.id || auto;
     const st = useMaybeControlled(props.open, !!props.defaultOpen, props.onOpenChange);
     const open = !!st[0];
@@ -5816,6 +5839,7 @@ window.Aura = (() => {
         {
           ref: popMerged,
           id,
+          "data-density": density,
           role: "dialog",
           "aria-modal": false,
           "aria-label": props.title ? void 0 : props.label,

package/components/aura.components.css

@@ -7,7 +7,7 @@
   box-sizing: border-box;
   height: var(--aura-button-height);
   white-space: nowrap; flex-shrink: 0;   /* a pill never wraps its label */
-  padding: 0 var(--aura-space-6);
+  padding: 0 var(--aura-button-padding-x, var(--aura-space-6));
   border-radius: var(--aura-button-radius);
   border: 0;
   background: transparent;
@@ -74,14 +74,14 @@ a.aura-btn { text-decoration: none; }
 }
 .aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; }
 .aura-table__head {
-  position: sticky; top: 0; z-index: 3;
-  display: flex; height: var(--aura-space-12);
+  position: sticky; top: 0; z-index: 3; box-sizing: border-box;   /* the hairline is inside the row height */
+  display: flex; height: var(--aura-table-row-height);
   background: var(--aura-bg-canvas);
   border-bottom: 1px solid var(--aura-border-default);
   font-family: var(--font-mono); font-size: 12px; color: var(--aura-fg-secondary);
 }
 .aura-table__row {
-  display: flex; height: var(--aura-space-12);
+  box-sizing: border-box; display: flex; height: var(--aura-table-row-height);   /* exactly the virtual row height */
   background: var(--aura-bg-surface);
   border-bottom: 1px solid var(--aura-border-default);
   font-size: 13px;
@@ -105,7 +105,7 @@ a.aura-btn { text-decoration: none; }
 /* Server mode refresh: the previous page stays, inactive, under a progress bar until the next one arrives */
 .aura-table.is-refreshing .aura-table__row, .aura-table.is-refreshing .aura-table__card { opacity: 0.6; pointer-events: none; }
 .aura-table__busy-bar {
-  position: absolute; z-index: 6; top: calc(var(--aura-space-12) - 2px); left: 0; right: 0; height: 2px; overflow: hidden;
+  position: absolute; z-index: 6; top: calc(var(--aura-table-row-height) - 2px); left: 0; right: 0; height: 2px; overflow: hidden;
   border-radius: var(--aura-radius-full); pointer-events: none;
 }
 .aura-table--stacked .aura-table__busy-bar { top: 0; }
@@ -117,7 +117,7 @@ a.aura-btn { text-decoration: none; }
 
 /* Cells: text cells stay block so long values end in an ellipsis */
 .aura-table__td {
-  box-sizing: border-box; height: 100%; line-height: calc(var(--aura-space-12) - 1px);
+  box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
 .aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn { vertical-align: middle; }
@@ -130,7 +130,7 @@ a.aura-btn { text-decoration: none; }
 .aura-table__gutter { flex: none; width: var(--aura-space-6); position: sticky; left: 0; z-index: 2; background: inherit; }
 .aura-table__gutter--end { position: static; }
 .aura-table__picker {
-  position: absolute; top: 0; right: 0; z-index: 5; width: var(--aura-space-12); height: calc(var(--aura-space-12) - 1px);
+  position: absolute; top: 0; right: 0; z-index: 5; width: var(--aura-space-12); height: calc(var(--aura-table-row-height) - 1px);
   display: flex; align-items: center; justify-content: center; background: var(--aura-bg-canvas); border-top-right-radius: calc(var(--aura-card-radius) - 1px);
 }
 .aura-table__gutter--end.has-picker {
@@ -228,7 +228,7 @@ a.aura-btn { text-decoration: none; }
 
 /* Footer + pager */
 .aura-table__foot {
-  height: var(--aura-space-12); display: flex; align-items: center; justify-content: space-between;
+  height: var(--aura-table-row-height); display: flex; align-items: center; justify-content: space-between;
   padding: 0 var(--aura-space-3) 0 var(--aura-space-6);
   border-top: 1px solid var(--aura-border-default); background: var(--aura-bg-surface);
   font-size: 13px; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums;
@@ -1241,3 +1241,19 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 @media (prefers-reduced-motion: reduce) { .aura-command { animation: none; } }
 
+/* Density. data-density="compact" on <html> or any container (AuraProvider density="compact" and DataTable
+ * density do it for you): 36px fields and buttons, 40px table rows, less button padding — for dense admin screens.
+ * Touch screens keep 44px targets whatever the density. "comfortable" inside compact switches back. */
+[data-density='compact'] {
+  --aura-input-height: 36px; --aura-button-height: 36px; --aura-table-row-height: 40px;
+  --aura-button-padding-x: var(--aura-space-4);
+}
+[data-density='comfortable'] {
+  --aura-input-height: 44px; --aura-button-height: 44px; --aura-table-row-height: 48px;
+  --aura-button-padding-x: var(--aura-space-6);
+}
+@media (pointer: coarse) {
+  [data-density='compact'] { --aura-input-height: 44px; --aura-button-height: 44px; --aura-table-row-height: 48px; --aura-button-padding-x: var(--aura-space-6); }
+}
+.aura-density { display: contents; }
+

package/components/index.d.ts

@@ -149,6 +149,8 @@ export interface DataTableProps {
 	/** Controlled pinned columns (keys); pair with onPinnedColumnsChange. */
 	pinnedColumns?: string[];
 	onPinnedColumnsChange?: (keys: string[]) => void;
+	/** `compact` = 40px rows (48px on touch screens). Default: the surrounding density. */
+	density?: "comfortable" | "compact";
 	/** 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. */
 	stackBelow?: number;
 	className?: string;
@@ -184,6 +186,8 @@ export interface AuraProviderProps {
 	calendar?: "buddhist" | "gregory";
 	/** Override individual strings. */
 	strings?: Partial<Record<string, string | ((...args: any[]) => string)>>;
+	/** `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";
 	/** 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. */
 	linkComponent?: React$1.ElementType;
 	children?: React$1.ReactNode;
@@ -1216,11 +1220,15 @@ export interface AuraLocaleValue {
 	strings: AuraStrings;
 	/** The router link set on AuraProvider, if any. */
 	linkComponent?: React$1.ElementType | null;
+	/** 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;
 }
 /** Sets the language of built-in labels (and the default date locale) for everything inside. */
 export declare function AuraProvider(props: AuraProviderProps): React$1.ReactElement;
 /** { locale, calendar, strings } from the nearest AuraProvider (English strings when there is none). */
 export declare function useAuraLocale(): AuraLocaleValue;
+/** The provider's density, for portals that render outside its wrapper. */
+export declare function useDensity(): "comfortable" | "compact" | undefined;
 export declare const Stat: React$1.ForwardRefExoticComponent<StatProps & React$1.RefAttributes<HTMLElement>>;
 /** Parse typed time: 9 · 09 · 930 · 0930 · 9:30 · 9.30 · 09.30 น. · 9:30 pm → "HH:mm" (24-hour) or null. */
 export declare function parseTime(text: string | null | undefined): string | null;

package/figma-variables.csv

@@ -249,3 +249,4 @@ size/cal-cell,number,light,36,Calendar day cell (DatePicker). 40px on touch scre
 size/popover-max-height,number,light,320,Max height of Combobox listbox and DatePicker popover lists. ADDED 4.2.,GAP
 size/input-font-size,number,light,14,"Text size in inputs, textareas, selects and pickers. Phones (<640px) use at least 16px so iOS Safari does not zoom on focus. ADDED 4.11.",GAP
 size/touch-target,number,light,44,"Minimum hit area on touch screens (pointer: coarse): IconButton, and Radio / Checkbox / Switch rows (WCAG 2.5.5). ADDED 4.11.",GAP
+size/table-row-height,number,light,48,DataTable row and header height. 40px in compact density on fine pointers; 48px on touch. ADDED 4.14.,GAP

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-tokens",
-  "version": "4.13.0",
+  "version": "4.14.0",
   "description": "AURA Design System — tokens (CSS variables, Tailwind preset, Figma variables), theme contrast checks and token lint.",
   "main": "tailwind.tokens.cjs",
   "types": "components/index.d.ts",

package/tokens.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.13.0",
+  "version": "4.14.0",
   "meta": {
     "name": "AURA Design System",
     "tier": "3-tier",
@@ -288,7 +288,8 @@
     "cal-cell": "36px",
     "popover-max-height": "320px",
     "input-font-size": "14px",
-    "touch-target": "44px"
+    "touch-target": "44px",
+    "table-row-height": "48px"
   },
   "breakpoint": {
     "bp-sm": "640px",
@@ -539,6 +540,7 @@
     "progress-track": "Empty part of Progress and FileUpload bars (fill). Its edge carries the 3:1. ADDED 4.11.",
     "progress-track-edge": "1px inset edge of Progress / upload tracks: ≥3:1 on bg-surface and bg-canvas in both themes (WCAG 1.4.11), so the track reads without the fill. ADDED 4.11.",
     "input-font-size": "Text size in inputs, textareas, selects and pickers. Phones (<640px) use at least 16px so iOS Safari does not zoom on focus. ADDED 4.11.",
-    "touch-target": "Minimum hit area on touch screens (pointer: coarse): IconButton, and Radio / Checkbox / Switch rows (WCAG 2.5.5). ADDED 4.11."
+    "touch-target": "Minimum hit area on touch screens (pointer: coarse): IconButton, and Radio / Checkbox / Switch rows (WCAG 2.5.5). ADDED 4.11.",
+    "table-row-height": "DataTable row and header height. 40px in compact density on fine pointers; 48px on touch. ADDED 4.14."
   }
 }