@jirawatpyk/aura-react 5.25.0 → 5.27.0

package/dist/index.d.cts

@@ -236,6 +236,18 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	density?: "comfortable" | "compact" | undefined;
 	/** Table width in px below which rows render as stacked cards (phones). Try 640. It follows the table's own width, not the window. Since 4.20 the cards are the same markup as the grid, laid out by a container query, so any width is right before hydration and each row is in the HTML once. With `height` (virtual rows) the server can only send the first screenful; the rest of the cards arrive on hydration. */
 	stackBelow?: number | undefined;
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): anywhere in a Card's content — also inside your own wrappers,
+	 * as long as they add no padding or frame and don't clip or scroll (5.27, 130) — the table spans the card's full inner width, no side borders
+	 * or radius, keeping its header band and top rule. As a direct child that is the card's last content (no footer,
+	 * nothing after it), or with `bleedEnd`, it drops its bottom rule and the card's radius closes it. Below the Card's
+	 * `flushBelow` width, and outside a Card, it does nothing. */
+	bleed?: boolean | undefined;
+	/** With `bleed`: the table ends the card even though it sits inside your wrappers — no bottom rule, the card's radius
+	 * closes it. Only when nothing follows it in the card and the Card has no `footer` (5.27). */
+	bleedEnd?: boolean | undefined;
+	/** `false` drops the frame — border and radius — keeping the header band and the 24px gutter, for a table that sits
+	 * in a section without bleeding (5.26). Default `true`. */
+	bordered?: boolean | undefined;
 	className?: string | undefined;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
@@ -300,7 +312,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 	hideLabel?: boolean | undefined;
 	/** The visible label beside the box. */
 	children?: React$1.ReactNode | undefined;
-	/** Second line under the visible label, linked by `aria-describedby` after any id you pass there (5.11). */
+	/** Second line under the visible label, linked by `aria-describedby` after any id you pass there (5.11). Since 5.26
+	 * it is not part of the name: the box is named by the visible label alone, or by your `aria-label` /
+	 * `aria-labelledby` (Chamber-OS 125). */
 	description?: React$1.ReactNode | undefined;
 	onChange?: ((checked: boolean) => void) | undefined;
 	disabled?: boolean | undefined;
@@ -468,6 +482,7 @@ export interface CommandItem {
 	/** Items with the same group are listed together under its heading, in first-seen order. */
 	group?: string | undefined;
 	icon?: IconInput | undefined;
+	/** A second line; read after the item's name (label and shortcut), not as part of it (5.26). */
 	description?: string | undefined;
 	/** Extra words that find it ("invoice" → Billing). */
 	keywords?: string[] | undefined;
@@ -542,6 +557,8 @@ export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTM
 	 * readers keep the option's own text. */
 	allLabel?: string | undefined;
 }
+/** A RadioGroup option. `description` is a second line under the label; since 5.26 the radio is named by `label`
+ * alone and the description is read after it (`aria-describedby`), also when the option is disabled (Chamber-OS 125). */
 export type ChoiceOption = string | {
 	value: string;
 	label: string;
@@ -841,7 +858,7 @@ export interface DropdownMenuProps {
 export interface ComboboxOption {
 	value: string;
 	label: string;
-	/** Second line in the list; also searched. */
+	/** Second line in the list; also searched. Read after the option's name, not as part of it (5.26). */
 	description?: string | undefined;
 	/** Extra search terms (English name, phone, code…). */
 	keywords?: string[] | undefined;
@@ -1035,6 +1052,39 @@ export interface DateRange {
 	start: ISODate | null;
 	end: ISODate | null;
 }
+/** A FilterDateRange preset: a name and the range it sets (5.26). */
+export interface DateRangePreset {
+	label: string;
+	range: DateRange;
+}
+/** A compact date-range filter for FilterBar (5.26, Chamber-OS 128): "Submitted Any time ▾", one click to the range
+ * calendar. Dates as DateRangePicker: `locale` / `calendar` from the provider (Thai shows Buddhist-era years), `min`,
+ * `max`, `timeZone`, `weekStartsOn`. */
+export interface FilterDateRangeProps extends DateDisplayOptions, Pick<React$1.HTMLAttributes<HTMLButtonElement>, "style">, React$1.AriaAttributes, DataAttributes {
+	/** The filter's name: first on the face ("Submitted"), the popover's name, and the start of the face's accessible
+	 * name ("Submitted: Any time"). */
+	label: string;
+	value?: DateRange | undefined;
+	defaultValue?: DateRange | undefined;
+	/** Runs once a range is complete, a preset is picked, or "Any time" clears it — never on a lone start day, and
+	 * not when the same range is picked again. There is no form field: write the range to the URL or state here. */
+	onChange?: ((value: DateRange) => void) | undefined;
+	/** Choices beside the calendar (Last 7 days, This month…), each setting a whole range; one that reaches past
+	 * `min` / `max` or onto an `isDateDisabled` day is shown disabled. */
+	presets?: DateRangePreset[] | undefined;
+	/** The empty value and the choice that clears it. Default "Any time" in the date locale. */
+	anyLabel?: string | undefined;
+	min?: ISODate | "today" | undefined;
+	max?: ISODate | "today" | undefined;
+	isDateDisabled?: ((iso: ISODate) => boolean) | undefined;
+	weekStartsOn?: 0 | 1 | undefined;
+	timeZone?: string | undefined;
+	/** Today, given outright (ISO); wins over `timeZone`. */
+	today?: ISODate | undefined;
+	disabled?: boolean | undefined;
+	id?: string | undefined;
+	className?: string | undefined;
+}
 export interface DateRangePickerProps extends DateFieldProps {
 	value?: DateRange | undefined;
 	defaultValue?: DateRange | undefined;
@@ -1149,6 +1199,26 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	/** `false` (5.13) drops the frame — border, radius, background — and the outer cells' side padding, so the table
 	 * lines up with the content around it, e.g. flush inside a Card under its heading. Default `true`. */
 	bordered?: boolean | undefined;
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): anywhere in a Card's content — also inside your own wrappers,
+	 * as long as they add no padding or frame and don't clip or scroll (5.27, 130) — the table spans the card's full inner width, no side borders
+	 * or radius, keeping its header band and top rule, and its 24px outer cells keep the text level with the card's
+	 * content. As a direct child that is the card's last content, or with `bleedEnd`, it drops its bottom rule and the
+	 * card's radius closes it. Below the Card's `flushBelow` width, and outside a Card, it does nothing. With
+	 * `bordered={false}` too, the outer cells take the card's padding while it bleeds. */
+	bleed?: boolean | undefined;
+	/** With `bleed`: the table ends the card even though it sits inside your wrappers — only when nothing follows it in
+	 * the card and the Card has no `footer` (5.27). */
+	bleedEnd?: boolean | undefined;
+	/** Keep the header row in view while the rows scroll (5.26, Chamber-OS 129), with its band, its bottom rule and
+	 * above the body. Without `maxHeight` it pins to the page's scroll, under an AppShell's top bar
+	 * (`--aura-shell-bar-height`; set `--aura-table-sticky-top` for another offset). A table wider than its box
+	 * scrolls sideways instead and its header can't pin to the page then: give it `maxHeight`. Inside your own scroll
+	 * container within an AppShell set `--aura-table-sticky-top: 0px` or use `maxHeight`. With `maxHeight` the box
+	 * scrolls both ways and the header pins to its top. One header row. Stacked rows (`stackBelow`) have no visible header, so it
+	 * does nothing there. Default off. */
+	stickyHeader?: boolean | undefined;
+	/** Caps the table's box (px, or any CSS length such as `60vh`); the rows scroll inside it. (5.26) */
+	maxHeight?: number | string | undefined;
 	/** How stacked rows look (5.15, Chamber-OS 85): `list` (default) — one frame, rows divided by rules; `cards` —
 	 * each row its own framed card, spaced like DataTable's cards, with no frame around them. From the `stackBelow`
 	 * width up the table is unchanged. The table then sits in one more `div` (`.aura-tbl-cards`). */
@@ -1421,6 +1491,7 @@ export interface PaginationProps {
 export interface AccordionItem {
 	id: string;
 	title: React$1.ReactNode;
+	/** A second line under the title; read as the header button's description, not its name (5.26). */
 	description?: React$1.ReactNode | undefined;
 	content: React$1.ReactNode;
 	icon?: IconInput | undefined;
@@ -1548,6 +1619,10 @@ export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & Rea
 /** A compact filter for FilterBar (5.12): a small button reading "Status All ▾" that opens Select's list. The name
  * is the accessible name, the chosen option its value; forms, refs and the keyboard work as in Select. */
 export declare const FilterSelect: React$1.ForwardRefExoticComponent<FilterSelectProps & React$1.RefAttributes<HTMLSelectElement>>;
+/** A compact date-range filter for FilterBar (5.26, Chamber-OS 128): a face like FilterSelect's — "Submitted Any
+ * time ▾" — that opens the range calendar, with optional presets, in one click. `onChange` runs once a range is
+ * complete, a preset is picked or the range is cleared; never on a lone start day. */
+export declare const FilterDateRange: React$1.ForwardRefExoticComponent<FilterDateRangeProps & React$1.RefAttributes<HTMLButtonElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** One value, or with `multiple` any number (chips). Two call signatures so value/onChange are typed for each. */
@@ -1644,11 +1719,18 @@ export declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & Rea
 export declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLElement>>;
 /** Grid — equal columns. columns may be responsive ({ base: 1, md: 2, lg: 3 }), or use minItemWidth to fit as many as fit. */
 export declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLElement>>;
-/** Centred page column. */
-export interface ContainerProps {
+/** Centred page column. To name it (`aria-label`), render a landmark with `as="section"` (or `main`, `nav`): a
+ * plain `div` may not carry a name. */
+export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
 	/** `narrow` caps it at aura-container-narrow (720px). Default `default` (1280px). */
 	size?: "default" | "narrow" | undefined;
+	/** `start` puts the column at the start edge (left; right in RTL) instead of centring it — a form board beside
+	 * the page's start (5.26, Chamber-OS 126). Default `center`. */
+	align?: "center" | "start" | undefined;
 	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	/** Utilities that set `max-width`, `margin` or `padding` (e.g. `max-w-[672px] mx-0`, your own gutter) are supported
+	 * with `styles.layer.css`, where a utility beats `.aura-container` (5.26; padding 5.27). Also exported from
+	 * `/server` for Server Components (5.27). */
 	className?: string | undefined;
 	style?: React$1.CSSProperties | undefined;
 	children?: React$1.ReactNode | undefined;

package/dist/index.d.ts

@@ -236,6 +236,18 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	density?: "comfortable" | "compact" | undefined;
 	/** Table width in px below which rows render as stacked cards (phones). Try 640. It follows the table's own width, not the window. Since 4.20 the cards are the same markup as the grid, laid out by a container query, so any width is right before hydration and each row is in the HTML once. With `height` (virtual rows) the server can only send the first screenful; the rest of the cards arrive on hydration. */
 	stackBelow?: number | undefined;
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): anywhere in a Card's content — also inside your own wrappers,
+	 * as long as they add no padding or frame and don't clip or scroll (5.27, 130) — the table spans the card's full inner width, no side borders
+	 * or radius, keeping its header band and top rule. As a direct child that is the card's last content (no footer,
+	 * nothing after it), or with `bleedEnd`, it drops its bottom rule and the card's radius closes it. Below the Card's
+	 * `flushBelow` width, and outside a Card, it does nothing. */
+	bleed?: boolean | undefined;
+	/** With `bleed`: the table ends the card even though it sits inside your wrappers — no bottom rule, the card's radius
+	 * closes it. Only when nothing follows it in the card and the Card has no `footer` (5.27). */
+	bleedEnd?: boolean | undefined;
+	/** `false` drops the frame — border and radius — keeping the header band and the 24px gutter, for a table that sits
+	 * in a section without bleeding (5.26). Default `true`. */
+	bordered?: boolean | undefined;
 	className?: string | undefined;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
@@ -300,7 +312,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 	hideLabel?: boolean | undefined;
 	/** The visible label beside the box. */
 	children?: React$1.ReactNode | undefined;
-	/** Second line under the visible label, linked by `aria-describedby` after any id you pass there (5.11). */
+	/** Second line under the visible label, linked by `aria-describedby` after any id you pass there (5.11). Since 5.26
+	 * it is not part of the name: the box is named by the visible label alone, or by your `aria-label` /
+	 * `aria-labelledby` (Chamber-OS 125). */
 	description?: React$1.ReactNode | undefined;
 	onChange?: ((checked: boolean) => void) | undefined;
 	disabled?: boolean | undefined;
@@ -468,6 +482,7 @@ export interface CommandItem {
 	/** Items with the same group are listed together under its heading, in first-seen order. */
 	group?: string | undefined;
 	icon?: IconInput | undefined;
+	/** A second line; read after the item's name (label and shortcut), not as part of it (5.26). */
 	description?: string | undefined;
 	/** Extra words that find it ("invoice" → Billing). */
 	keywords?: string[] | undefined;
@@ -542,6 +557,8 @@ export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTM
 	 * readers keep the option's own text. */
 	allLabel?: string | undefined;
 }
+/** A RadioGroup option. `description` is a second line under the label; since 5.26 the radio is named by `label`
+ * alone and the description is read after it (`aria-describedby`), also when the option is disabled (Chamber-OS 125). */
 export type ChoiceOption = string | {
 	value: string;
 	label: string;
@@ -841,7 +858,7 @@ export interface DropdownMenuProps {
 export interface ComboboxOption {
 	value: string;
 	label: string;
-	/** Second line in the list; also searched. */
+	/** Second line in the list; also searched. Read after the option's name, not as part of it (5.26). */
 	description?: string | undefined;
 	/** Extra search terms (English name, phone, code…). */
 	keywords?: string[] | undefined;
@@ -1035,6 +1052,39 @@ export interface DateRange {
 	start: ISODate | null;
 	end: ISODate | null;
 }
+/** A FilterDateRange preset: a name and the range it sets (5.26). */
+export interface DateRangePreset {
+	label: string;
+	range: DateRange;
+}
+/** A compact date-range filter for FilterBar (5.26, Chamber-OS 128): "Submitted Any time ▾", one click to the range
+ * calendar. Dates as DateRangePicker: `locale` / `calendar` from the provider (Thai shows Buddhist-era years), `min`,
+ * `max`, `timeZone`, `weekStartsOn`. */
+export interface FilterDateRangeProps extends DateDisplayOptions, Pick<React$1.HTMLAttributes<HTMLButtonElement>, "style">, React$1.AriaAttributes, DataAttributes {
+	/** The filter's name: first on the face ("Submitted"), the popover's name, and the start of the face's accessible
+	 * name ("Submitted: Any time"). */
+	label: string;
+	value?: DateRange | undefined;
+	defaultValue?: DateRange | undefined;
+	/** Runs once a range is complete, a preset is picked, or "Any time" clears it — never on a lone start day, and
+	 * not when the same range is picked again. There is no form field: write the range to the URL or state here. */
+	onChange?: ((value: DateRange) => void) | undefined;
+	/** Choices beside the calendar (Last 7 days, This month…), each setting a whole range; one that reaches past
+	 * `min` / `max` or onto an `isDateDisabled` day is shown disabled. */
+	presets?: DateRangePreset[] | undefined;
+	/** The empty value and the choice that clears it. Default "Any time" in the date locale. */
+	anyLabel?: string | undefined;
+	min?: ISODate | "today" | undefined;
+	max?: ISODate | "today" | undefined;
+	isDateDisabled?: ((iso: ISODate) => boolean) | undefined;
+	weekStartsOn?: 0 | 1 | undefined;
+	timeZone?: string | undefined;
+	/** Today, given outright (ISO); wins over `timeZone`. */
+	today?: ISODate | undefined;
+	disabled?: boolean | undefined;
+	id?: string | undefined;
+	className?: string | undefined;
+}
 export interface DateRangePickerProps extends DateFieldProps {
 	value?: DateRange | undefined;
 	defaultValue?: DateRange | undefined;
@@ -1149,6 +1199,26 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	/** `false` (5.13) drops the frame — border, radius, background — and the outer cells' side padding, so the table
 	 * lines up with the content around it, e.g. flush inside a Card under its heading. Default `true`. */
 	bordered?: boolean | undefined;
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): anywhere in a Card's content — also inside your own wrappers,
+	 * as long as they add no padding or frame and don't clip or scroll (5.27, 130) — the table spans the card's full inner width, no side borders
+	 * or radius, keeping its header band and top rule, and its 24px outer cells keep the text level with the card's
+	 * content. As a direct child that is the card's last content, or with `bleedEnd`, it drops its bottom rule and the
+	 * card's radius closes it. Below the Card's `flushBelow` width, and outside a Card, it does nothing. With
+	 * `bordered={false}` too, the outer cells take the card's padding while it bleeds. */
+	bleed?: boolean | undefined;
+	/** With `bleed`: the table ends the card even though it sits inside your wrappers — only when nothing follows it in
+	 * the card and the Card has no `footer` (5.27). */
+	bleedEnd?: boolean | undefined;
+	/** Keep the header row in view while the rows scroll (5.26, Chamber-OS 129), with its band, its bottom rule and
+	 * above the body. Without `maxHeight` it pins to the page's scroll, under an AppShell's top bar
+	 * (`--aura-shell-bar-height`; set `--aura-table-sticky-top` for another offset). A table wider than its box
+	 * scrolls sideways instead and its header can't pin to the page then: give it `maxHeight`. Inside your own scroll
+	 * container within an AppShell set `--aura-table-sticky-top: 0px` or use `maxHeight`. With `maxHeight` the box
+	 * scrolls both ways and the header pins to its top. One header row. Stacked rows (`stackBelow`) have no visible header, so it
+	 * does nothing there. Default off. */
+	stickyHeader?: boolean | undefined;
+	/** Caps the table's box (px, or any CSS length such as `60vh`); the rows scroll inside it. (5.26) */
+	maxHeight?: number | string | undefined;
 	/** How stacked rows look (5.15, Chamber-OS 85): `list` (default) — one frame, rows divided by rules; `cards` —
 	 * each row its own framed card, spaced like DataTable's cards, with no frame around them. From the `stackBelow`
 	 * width up the table is unchanged. The table then sits in one more `div` (`.aura-tbl-cards`). */
@@ -1421,6 +1491,7 @@ export interface PaginationProps {
 export interface AccordionItem {
 	id: string;
 	title: React$1.ReactNode;
+	/** A second line under the title; read as the header button's description, not its name (5.26). */
 	description?: React$1.ReactNode | undefined;
 	content: React$1.ReactNode;
 	icon?: IconInput | undefined;
@@ -1548,6 +1619,10 @@ export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & Rea
 /** A compact filter for FilterBar (5.12): a small button reading "Status All ▾" that opens Select's list. The name
  * is the accessible name, the chosen option its value; forms, refs and the keyboard work as in Select. */
 export declare const FilterSelect: React$1.ForwardRefExoticComponent<FilterSelectProps & React$1.RefAttributes<HTMLSelectElement>>;
+/** A compact date-range filter for FilterBar (5.26, Chamber-OS 128): a face like FilterSelect's — "Submitted Any
+ * time ▾" — that opens the range calendar, with optional presets, in one click. `onChange` runs once a range is
+ * complete, a preset is picked or the range is cleared; never on a lone start day. */
+export declare const FilterDateRange: React$1.ForwardRefExoticComponent<FilterDateRangeProps & React$1.RefAttributes<HTMLButtonElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** One value, or with `multiple` any number (chips). Two call signatures so value/onChange are typed for each. */
@@ -1644,11 +1719,18 @@ export declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & Rea
 export declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLElement>>;
 /** Grid — equal columns. columns may be responsive ({ base: 1, md: 2, lg: 3 }), or use minItemWidth to fit as many as fit. */
 export declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLElement>>;
-/** Centred page column. */
-export interface ContainerProps {
+/** Centred page column. To name it (`aria-label`), render a landmark with `as="section"` (or `main`, `nav`): a
+ * plain `div` may not carry a name. */
+export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
 	/** `narrow` caps it at aura-container-narrow (720px). Default `default` (1280px). */
 	size?: "default" | "narrow" | undefined;
+	/** `start` puts the column at the start edge (left; right in RTL) instead of centring it — a form board beside
+	 * the page's start (5.26, Chamber-OS 126). Default `center`. */
+	align?: "center" | "start" | undefined;
 	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	/** Utilities that set `max-width`, `margin` or `padding` (e.g. `max-w-[672px] mx-0`, your own gutter) are supported
+	 * with `styles.layer.css`, where a utility beats `.aura-container` (5.26; padding 5.27). Also exported from
+	 * `/server` for Server Components (5.27). */
 	className?: string | undefined;
 	style?: React$1.CSSProperties | undefined;
 	children?: React$1.ReactNode | undefined;

package/dist/server/index.cjs

@@ -34,6 +34,7 @@ __export(server_exports, {
   Avatar: () => ServerAvatar,
   Badge: () => ServerBadge,
   Card: () => ServerCard,
+  Container: () => Container,
   EmptyState: () => ServerEmptyState,
   Icon: () => Icon,
   STRINGS: () => STRINGS,
@@ -605,14 +606,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h3 = String(hex).trim().replace("#", "");
-  if (h3.length === 3)
-    h3 = h3.split("").map(function(c) {
+  let h4 = String(hex).trim().replace("#", "");
+  if (h4.length === 3)
+    h4 = h4.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h3)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h4)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h3.slice(i, i + 2), 16) / 255;
+    return parseInt(h4.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1318,3 +1319,28 @@ function ServerStat(props) {
 function ServerAvatar(props) {
   return avatarElement(props, void 0, null, void 0);
 }
+
+// src/Container.tsx
+var React4 = __toESM(require("react"), 1);
+var h3 = React4.createElement;
+var Container = React4.forwardRef(function Container2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
+  return h3(
+    props.as || "div",
+    Object.assign(attrs, {
+      ref,
+      className: cx(
+        "aura-container",
+        props.size === "narrow" && "is-narrow",
+        props.align === "start" && "is-start",
+        props.className
+      ),
+      style: props.style
+    }),
+    props.children
+  );
+});

package/dist/server/index.d.cts

@@ -386,6 +386,24 @@ declare function ServerAvatar(props: AvatarProps): React$1.ReactElement;
  * render names with `/server`'s Icon (the two entries keep separate registries). */
 export declare function registerIcons(icons: readonly AuraIcon[]): void;
 export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
+/** Centred page column. To name it (`aria-label`), render a landmark with `as="section"` (or `main`, `nav`): a
+ * plain `div` may not carry a name. */
+export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
+	/** `narrow` caps it at aura-container-narrow (720px). Default `default` (1280px). */
+	size?: "default" | "narrow" | undefined;
+	/** `start` puts the column at the start edge (left; right in RTL) instead of centring it — a form board beside
+	 * the page's start (5.26, Chamber-OS 126). Default `center`. */
+	align?: "center" | "start" | undefined;
+	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	/** Utilities that set `max-width`, `margin` or `padding` (e.g. `max-w-[672px] mx-0`, your own gutter) are supported
+	 * with `styles.layer.css`, where a utility beats `.aura-container` (5.26; padding 5.27). Also exported from
+	 * `/server` for Server Components (5.27). */
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+	children?: React$1.ReactNode | undefined;
+}
+/** 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>>;
 
 export {
 	ServerAlert as Alert,

package/dist/server/index.d.ts

@@ -386,6 +386,24 @@ declare function ServerAvatar(props: AvatarProps): React$1.ReactElement;
  * render names with `/server`'s Icon (the two entries keep separate registries). */
 export declare function registerIcons(icons: readonly AuraIcon[]): void;
 export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
+/** Centred page column. To name it (`aria-label`), render a landmark with `as="section"` (or `main`, `nav`): a
+ * plain `div` may not carry a name. */
+export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
+	/** `narrow` caps it at aura-container-narrow (720px). Default `default` (1280px). */
+	size?: "default" | "narrow" | undefined;
+	/** `start` puts the column at the start edge (left; right in RTL) instead of centring it — a form board beside
+	 * the page's start (5.26, Chamber-OS 126). Default `center`. */
+	align?: "center" | "start" | undefined;
+	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	/** Utilities that set `max-width`, `margin` or `padding` (e.g. `max-w-[672px] mx-0`, your own gutter) are supported
+	 * with `styles.layer.css`, where a utility beats `.aura-container` (5.26; padding 5.27). Also exported from
+	 * `/server` for Server Components (5.27). */
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+	children?: React$1.ReactNode | undefined;
+}
+/** 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>>;
 
 export {
 	ServerAlert as Alert,

package/dist/server/index.js

@@ -546,14 +546,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h3 = String(hex).trim().replace("#", "");
-  if (h3.length === 3)
-    h3 = h3.split("").map(function(c) {
+  let h4 = String(hex).trim().replace("#", "");
+  if (h4.length === 3)
+    h4 = h4.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h3)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h4)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h3.slice(i, i + 2), 16) / 255;
+    return parseInt(h4.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1259,11 +1259,37 @@ function ServerStat(props) {
 function ServerAvatar(props) {
   return avatarElement(props, void 0, null, void 0);
 }
+
+// src/Container.tsx
+import * as React4 from "react";
+var h3 = React4.createElement;
+var Container = React4.forwardRef(function Container2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
+  return h3(
+    props.as || "div",
+    Object.assign(attrs, {
+      ref,
+      className: cx(
+        "aura-container",
+        props.size === "narrow" && "is-narrow",
+        props.align === "start" && "is-start",
+        props.className
+      ),
+      style: props.style
+    }),
+    props.children
+  );
+});
 export {
   ServerAlert as Alert,
   ServerAvatar as Avatar,
   ServerBadge as Badge,
   ServerCard as Card,
+  Container,
   ServerEmptyState as EmptyState,
   Icon,
   STRINGS,