@jirawatpyk/aura-react 5.31.0 → 5.33.0

package/dist/index.d.cts

@@ -344,7 +344,8 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	icon: IconInput;
 	/** `danger` colours the icon and hover for a destructive action (Delete, Revoke). */
 	tone?: "neutral" | "danger" | undefined;
-	/** Accessible name and tooltip (required). */
+	/** Accessible name and tooltip (required). Since 5.32 the tooltip is AURA's own (hover and keyboard focus), not a
+	 * native `title`; pass `title` yourself to keep a native one instead. */
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
@@ -828,6 +829,10 @@ export interface SideNavProps {
 	defaultValue?: string | undefined;
 	onChange?: ((id: string) => void) | undefined;
 	header?: React$1.ReactNode | undefined;
+	/** 5.32 (DxT Monitor request 1): a full-width 1px aura-border-default line under `header`, with the board's metrics:
+	 * the header at least 72px tall with its content 20px from the top and start, the line at its foot, and 16px
+	 * before the first item. Default `false`. */
+	headerDivider?: boolean | undefined;
 	footer?: React$1.ReactNode | undefined;
 	/** Default "Main". */
 	label?: string | undefined;
@@ -1205,6 +1210,10 @@ export interface AppShellProps {
 	nav?: React$1.ReactElement | undefined;
 	/** Top bar content (title, search, account menu). */
 	header?: React$1.ReactNode | undefined;
+	/** 5.33 (DxT Monitor #6): `'lg'` shows the top bar, `header` and all, only below 1024px — where the menu button is —
+	 * as when there is no `header`: from lg up it is hidden and `--aura-shell-bar-height` is 0. For apps whose phone
+	 * pages have a top bar (brand, avatar) and whose desktop pages don't. Default: the bar shows at every width. */
+	headerHideFrom?: "lg" | undefined;
 	children?: React$1.ReactNode | undefined;
 	navLabel?: string | undefined;
 	menuLabel?: string | undefined;
@@ -1214,7 +1223,9 @@ export interface AppShellProps {
 	/** 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;
-	/** `false` (5.14): `<main>` has no padding, for pages whose containers own the page padding and column. */
+	/** The content padding is the page margin: 16px at the sides and 24px top and bottom on phones, 24px from 640px,
+	 * 32px from 1024px. Pages don't add their own (a PageHeader has none, 5.32). `false` (5.14): `<main>` has no
+	 * padding, for pages whose containers own the page padding and column. */
 	contentPadding?: boolean | undefined;
 	className?: string | undefined;
 }
@@ -1338,7 +1349,8 @@ export interface BottomNavItem {
 	/** Read after the label when `badge` is set, e.g. "new". */
 	badgeLabel?: string | undefined;
 	/** The full name for screen readers when `label` is shortened to fit (5.7), e.g. label "Konto", ariaLabel
-	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3). The count or badge is still appended. */
+	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3); a dev warning says when it doesn't (5.32). The count or badge is
+	 * still appended. */
 	ariaLabel?: string | undefined;
 }
 export interface BottomNavProps {
@@ -1490,7 +1502,10 @@ export interface ProgressProps {
 	className?: string | undefined;
 }
 export interface SkeletonProps {
-	variant?: "text" | "rect" | "circle" | undefined;
+	/** 5.32 (DxT Monitor request 4): `pill` is a StatusPill's size (20px tall, 22px under `lang="th"`, 72px wide) and
+	 * `badge` a Badge's (20px, 56px wide), both fully rounded, so the row doesn't move when the real one arrives.
+	 * `width` overrides the width. */
+	variant?: "text" | "rect" | "circle" | "pill" | "badge" | undefined;
 	/** text only: number of lines (the last is shorter). */
 	lines?: number | undefined;
 	width?: number | string | undefined;
@@ -1783,6 +1798,32 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
+ * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
+ * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from
+ * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
+ * `<section>`, or pass `role="region"` with it. */
+export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
+	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
+	eyebrow?: React$1.ReactNode | undefined;
+	/** 5.33 (DxT Monitor #7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` (a `nav`
+	 * can't sit in the eyebrow's `p`) and its own 13px sans. Detail pages show a breadcrumb or an eyebrow; with both,
+	 * the breadcrumb comes first. */
+	breadcrumb?: React$1.ReactNode | undefined;
+	/** The page's heading. */
+	title: React$1.ReactNode;
+	/** A line under the title — counts, last update, owner. */
+	meta?: React$1.ReactNode | undefined;
+	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
+	actions?: React$1.ReactNode | undefined;
+	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
+	headingLevel?: 1 | 2 | 3 | undefined;
+	/** The heading's id, for `aria-labelledby` on the page's region. */
+	titleId?: string | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+}
+export declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 /** AppShell — side navigation + top bar + content. The nav is fixed from lg (1024px) up and a Drawer below it.
  * 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. */

package/dist/index.d.ts

@@ -344,7 +344,8 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 	icon: IconInput;
 	/** `danger` colours the icon and hover for a destructive action (Delete, Revoke). */
 	tone?: "neutral" | "danger" | undefined;
-	/** Accessible name and tooltip (required). */
+	/** Accessible name and tooltip (required). Since 5.32 the tooltip is AURA's own (hover and keyboard focus), not a
+	 * native `title`; pass `title` yourself to keep a native one instead. */
 	label: string;
 	/** Icon size. Default `sm` (16). */
 	size?: "sm" | "md" | undefined;
@@ -828,6 +829,10 @@ export interface SideNavProps {
 	defaultValue?: string | undefined;
 	onChange?: ((id: string) => void) | undefined;
 	header?: React$1.ReactNode | undefined;
+	/** 5.32 (DxT Monitor request 1): a full-width 1px aura-border-default line under `header`, with the board's metrics:
+	 * the header at least 72px tall with its content 20px from the top and start, the line at its foot, and 16px
+	 * before the first item. Default `false`. */
+	headerDivider?: boolean | undefined;
 	footer?: React$1.ReactNode | undefined;
 	/** Default "Main". */
 	label?: string | undefined;
@@ -1205,6 +1210,10 @@ export interface AppShellProps {
 	nav?: React$1.ReactElement | undefined;
 	/** Top bar content (title, search, account menu). */
 	header?: React$1.ReactNode | undefined;
+	/** 5.33 (DxT Monitor #6): `'lg'` shows the top bar, `header` and all, only below 1024px — where the menu button is —
+	 * as when there is no `header`: from lg up it is hidden and `--aura-shell-bar-height` is 0. For apps whose phone
+	 * pages have a top bar (brand, avatar) and whose desktop pages don't. Default: the bar shows at every width. */
+	headerHideFrom?: "lg" | undefined;
 	children?: React$1.ReactNode | undefined;
 	navLabel?: string | undefined;
 	menuLabel?: string | undefined;
@@ -1214,7 +1223,9 @@ export interface AppShellProps {
 	/** 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;
-	/** `false` (5.14): `<main>` has no padding, for pages whose containers own the page padding and column. */
+	/** The content padding is the page margin: 16px at the sides and 24px top and bottom on phones, 24px from 640px,
+	 * 32px from 1024px. Pages don't add their own (a PageHeader has none, 5.32). `false` (5.14): `<main>` has no
+	 * padding, for pages whose containers own the page padding and column. */
 	contentPadding?: boolean | undefined;
 	className?: string | undefined;
 }
@@ -1338,7 +1349,8 @@ export interface BottomNavItem {
 	/** Read after the label when `badge` is set, e.g. "new". */
 	badgeLabel?: string | undefined;
 	/** The full name for screen readers when `label` is shortened to fit (5.7), e.g. label "Konto", ariaLabel
-	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3). The count or badge is still appended. */
+	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3); a dev warning says when it doesn't (5.32). The count or badge is
+	 * still appended. */
 	ariaLabel?: string | undefined;
 }
 export interface BottomNavProps {
@@ -1490,7 +1502,10 @@ export interface ProgressProps {
 	className?: string | undefined;
 }
 export interface SkeletonProps {
-	variant?: "text" | "rect" | "circle" | undefined;
+	/** 5.32 (DxT Monitor request 4): `pill` is a StatusPill's size (20px tall, 22px under `lang="th"`, 72px wide) and
+	 * `badge` a Badge's (20px, 56px wide), both fully rounded, so the row doesn't move when the real one arrives.
+	 * `width` overrides the width. */
+	variant?: "text" | "rect" | "circle" | "pill" | "badge" | undefined;
 	/** text only: number of lines (the last is shorter). */
 	lines?: number | undefined;
 	width?: number | string | undefined;
@@ -1783,6 +1798,32 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
+ * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
+ * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from
+ * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
+ * `<section>`, or pass `role="region"` with it. */
+export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
+	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
+	eyebrow?: React$1.ReactNode | undefined;
+	/** 5.33 (DxT Monitor #7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` (a `nav`
+	 * can't sit in the eyebrow's `p`) and its own 13px sans. Detail pages show a breadcrumb or an eyebrow; with both,
+	 * the breadcrumb comes first. */
+	breadcrumb?: React$1.ReactNode | undefined;
+	/** The page's heading. */
+	title: React$1.ReactNode;
+	/** A line under the title — counts, last update, owner. */
+	meta?: React$1.ReactNode | undefined;
+	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
+	actions?: React$1.ReactNode | undefined;
+	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
+	headingLevel?: 1 | 2 | 3 | undefined;
+	/** The heading's id, for `aria-labelledby` on the page's region. */
+	titleId?: string | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+}
+export declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 /** AppShell — side navigation + top bar + content. The nav is fixed from lg (1024px) up and a Drawer below it.
  * 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. */

package/dist/server/index.cjs

@@ -37,6 +37,7 @@ __export(server_exports, {
   Container: () => Container,
   EmptyState: () => ServerEmptyState,
   Icon: () => Icon,
+  PageHeader: () => PageHeader,
   STRINGS: () => STRINGS,
   Stat: () => ServerStat,
   StatusPill: () => ServerStatusPill,
@@ -606,14 +607,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h4 = String(hex).trim().replace("#", "");
-  if (h4.length === 3)
-    h4 = h4.split("").map(function(c) {
+  let h5 = String(hex).trim().replace("#", "");
+  if (h5.length === 3)
+    h5 = h5.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h4)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h5)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h4.slice(i, i + 2), 16) / 255;
+    return parseInt(h5.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1375,3 +1376,28 @@ var Container = React4.forwardRef(function Container2(props, ref) {
     props.children
   );
 });
+
+// src/PageHeader.tsx
+var React5 = __toESM(require("react"), 1);
+var h4 = React5.createElement;
+var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || k === "role" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
+  const level = props.headingLevel || 1;
+  return h4(
+    "div",
+    Object.assign(attrs, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    h4(
+      "div",
+      { className: "aura-page-header__text" },
+      props.breadcrumb != null && props.breadcrumb !== false ? h4("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
+      props.eyebrow != null && props.eyebrow !== false ? h4("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
+      h4("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
+      props.meta != null && props.meta !== false ? h4("div", { className: "aura-page-header__meta" }, props.meta) : null
+    ),
+    props.actions != null && props.actions !== false ? h4("div", { className: "aura-page-header__actions" }, props.actions) : null
+  );
+});

package/dist/server/index.d.cts

@@ -404,6 +404,32 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
+ * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
+ * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from
+ * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
+ * `<section>`, or pass `role="region"` with it. */
+export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
+	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
+	eyebrow?: React$1.ReactNode | undefined;
+	/** 5.33 (DxT Monitor #7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` (a `nav`
+	 * can't sit in the eyebrow's `p`) and its own 13px sans. Detail pages show a breadcrumb or an eyebrow; with both,
+	 * the breadcrumb comes first. */
+	breadcrumb?: React$1.ReactNode | undefined;
+	/** The page's heading. */
+	title: React$1.ReactNode;
+	/** A line under the title — counts, last update, owner. */
+	meta?: React$1.ReactNode | undefined;
+	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
+	actions?: React$1.ReactNode | undefined;
+	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
+	headingLevel?: 1 | 2 | 3 | undefined;
+	/** The heading's id, for `aria-labelledby` on the page's region. */
+	titleId?: string | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+}
+export declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 
 export {
 	ServerAlert as Alert,

package/dist/server/index.d.ts

@@ -404,6 +404,32 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 }
 /** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
 export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
+/** PageHeader (5.32, DxT Monitor request 3): the top of a page — an eyebrow, the page's heading, a meta line and the
+ * page's actions. It has no outer padding: inside AppShell, the content padding is the page margin (16px at the sides
+ * and 24px top and bottom on phones, 24px from 640px, 32px from 1024px). Stateless, so it is also exported from
+ * `/server`. It renders a plain `div`: to name a region by its title, put `aria-labelledby={titleId}` on your own
+ * `<section>`, or pass `role="region"` with it. */
+export interface PageHeaderProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir" | "role">, React$1.AriaAttributes, DataAttributes {
+	/** Small mono line above the title — a section or breadcrumb-like context ("Monitor / Sites"). */
+	eyebrow?: React$1.ReactNode | undefined;
+	/** 5.33 (DxT Monitor #7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` (a `nav`
+	 * can't sit in the eyebrow's `p`) and its own 13px sans. Detail pages show a breadcrumb or an eyebrow; with both,
+	 * the breadcrumb comes first. */
+	breadcrumb?: React$1.ReactNode | undefined;
+	/** The page's heading. */
+	title: React$1.ReactNode;
+	/** A line under the title — counts, last update, owner. */
+	meta?: React$1.ReactNode | undefined;
+	/** Buttons for the page, bottom-aligned at the end; they wrap below the text on a narrow screen. */
+	actions?: React$1.ReactNode | undefined;
+	/** Default 1. Use 2 when the page already has an h1 (e.g. in the AppShell bar). */
+	headingLevel?: 1 | 2 | 3 | undefined;
+	/** The heading's id, for `aria-labelledby` on the page's region. */
+	titleId?: string | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+}
+export declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 
 export {
 	ServerAlert as Alert,

package/dist/server/index.js

@@ -546,14 +546,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h4 = String(hex).trim().replace("#", "");
-  if (h4.length === 3)
-    h4 = h4.split("").map(function(c) {
+  let h5 = String(hex).trim().replace("#", "");
+  if (h5.length === 3)
+    h5 = h5.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h4)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h5)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h4.slice(i, i + 2), 16) / 255;
+    return parseInt(h5.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1315,6 +1315,31 @@ var Container = React4.forwardRef(function Container2(props, ref) {
     props.children
   );
 });
+
+// src/PageHeader.tsx
+import * as React5 from "react";
+var h4 = React5.createElement;
+var PageHeader = React5.forwardRef(function PageHeader2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || k === "role" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
+  const level = props.headingLevel || 1;
+  return h4(
+    "div",
+    Object.assign(attrs, { ref, className: cx("aura-page-header", props.className), style: props.style }),
+    h4(
+      "div",
+      { className: "aura-page-header__text" },
+      props.breadcrumb != null && props.breadcrumb !== false ? h4("div", { className: "aura-page-header__breadcrumb" }, props.breadcrumb) : null,
+      props.eyebrow != null && props.eyebrow !== false ? h4("p", { className: "aura-page-header__eyebrow" }, props.eyebrow) : null,
+      h4("h" + level, { className: "aura-page-header__title", id: props.titleId }, props.title),
+      props.meta != null && props.meta !== false ? h4("div", { className: "aura-page-header__meta" }, props.meta) : null
+    ),
+    props.actions != null && props.actions !== false ? h4("div", { className: "aura-page-header__actions" }, props.actions) : null
+  );
+});
 export {
   ServerAlert as Alert,
   ServerAvatar as Avatar,
@@ -1323,6 +1348,7 @@ export {
   Container,
   ServerEmptyState as EmptyState,
   Icon,
+  PageHeader,
   STRINGS,
   ServerStat as Stat,
   ServerStatusPill as StatusPill,