@jirawatpyk/aura-react 4.8.0 → 4.10.0

package/dist/index.d.ts

@@ -1,15 +1,17 @@
 import * as React$1 from 'react';
 
+/** Button look. */
+export type ButtonVariant = "primary" | "secondary" | "creative" | "danger" | "danger-secondary";
 /** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only. */
 export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
-	/** Visual variant. Default `primary`. */
-	variant?: "primary" | "secondary" | "creative";
+	/** Visual variant. Default `primary`. `danger` (filled) and `danger-secondary` (outline) are for irreversible or destructive actions only — typically the confirm button of a `Dialog role="alertdialog"`. */
+	variant?: ButtonVariant;
 	/** Label text — short, Title Case English or Thai. */
 	children: React$1.ReactNode;
 	/** Leading icon name (see `IconName`). Hidden while loading. */
-	icon?: IconName;
+	icon?: IconInput;
 	/** Trailing icon name, e.g. `arrow-right` for forward actions. */
-	iconRight?: IconName;
+	iconRight?: IconInput;
 	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
 	loading?: boolean;
 }
@@ -17,13 +19,13 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
 	/** Where the link goes. With `href`, Button renders an `<a>` and its ref is the `<a>`. */
 	href: string;
-	/** Visual variant. Default `primary`. */
-	variant?: "primary" | "secondary" | "creative";
+	/** Visual variant. Default `primary`. `danger` (filled) and `danger-secondary` (outline) are for irreversible or destructive actions only — typically the confirm button of a `Dialog role="alertdialog"`. */
+	variant?: ButtonVariant;
 	/** Label text — say where it goes ("View Orders"), not "Click here". */
 	children: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Trailing icon, e.g. `arrow-right`, or `external-link` with `target="_blank"`. */
-	iconRight?: IconName;
+	iconRight?: IconInput;
 	/** Looks unavailable and can't be followed: no href, `aria-disabled`, out of the Tab order. */
 	disabled?: boolean;
 	/** 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. */
@@ -61,6 +63,8 @@ export interface DataTableColumn {
 	hideBelow?: number | "sm" | "md" | "lg" | "xl";
 	/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
 	actions?: boolean;
+	/** `end` right-aligns header and cells (amounts, counts) and uses tabular figures. Default `start`. */
+	align?: "start" | "end";
 }
 export interface DataTableSort {
 	key: string;
@@ -68,7 +72,7 @@ export interface DataTableSort {
 }
 export interface DataTableEmpty {
 	/** Default `inbox`; use `search` for "no matches". */
-	icon?: IconName;
+	icon?: IconInput;
 	/** Default "Nothing here yet". */
 	title?: string;
 	description?: string;
@@ -108,8 +112,20 @@ export interface DataTableProps {
 	/** Adds drag/keyboard resize handles to every column that has a width. */
 	resizable?: boolean;
 	onColumnResize?: (key: string, width: number) => void;
-	/** Shows skeleton rows and disables sorting, select-all and paging. */
+	/** Shows skeleton rows and disables sorting, select-all and paging. With `manual` and rows already shown, the rows stay (dimmed, with a progress bar) while the next page loads. */
 	loading?: boolean;
+	/** Server mode: `rows` is already the current page, sorted by the server. The table doesn't sort or slice; it reports
+	 * sort and page through onSortChange / onPageChange (or getPageHref links). Pair with `totalRows` and `pageSize`. */
+	manual?: boolean;
+	/** manual: rows across all pages (drives the page count, "1–25 of 312" and aria-rowcount). */
+	totalRows?: number;
+	/** Makes each row a link: the first column's content renders as the provider's linkComponent (or `<a>`), and a click
+	 * or Enter anywhere on the row follows it. Ctrl/⌘-click opens a new tab as usual. */
+	getRowHref?: (row: Record<string, any>) => string;
+	/** Pager arrows become links to these URLs (search-param paging). Without onPageChange the link navigates. */
+	getPageHref?: (page: number) => string;
+	/** Router link for getRowHref / getPageHref. Default: AuraProvider's linkComponent, else `<a>`. */
+	linkComponent?: React$1.ElementType;
 	/** Skeleton row count when there is no pageSize. Default 5. */
 	skeletonRows?: number;
 	/** Called on row click or Enter. */
@@ -133,10 +149,13 @@ export interface DataTableProps {
 	stackBelow?: number;
 	className?: string;
 }
+/** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
+export type IconInput = IconName | React$1.ReactElement;
 export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file" | "sun" | "moon" | "monitor";
 /** Lucide stroke icon drawn inline in currentColor. */
 export interface IconProps {
-	name: IconName;
+	/** A name from the set, or an icon element of your own (sized and styled the same way). */
+	name: IconInput;
 	/** `sm` 16 (default) · `md` 20 · `lg` 24, or a px number. */
 	size?: "sm" | "md" | "lg" | number;
 	/** Accessible name. Omit for decorative icons next to a text label (then aria-hidden). */
@@ -155,12 +174,14 @@ export interface SurfaceProps extends React$1.HTMLAttributes<HTMLElement> {
 }
 /** Sets the language of built-in labels (pagination, close buttons, empty states…) and the default date display for everything inside. */
 export interface AuraProviderProps {
-	/** Default `en` strings when there is no provider (dates still default to Thai / พ.ศ.). */
-	locale?: "th" | "en";
-	/** Default calendar for DatePicker / DateRangePicker / Calendar / formatDate callers that read it. */
+	/** Built-in labels and date display. `sv` = Swedish labels, `sv-SE` dates, Monday weeks and the Gregorian calendar. Default `en` strings when there is no provider (dates still default to Thai / พ.ศ.). */
+	locale?: "th" | "en" | "sv";
+	/** Default calendar for DatePicker / DateRangePicker / Calendar / formatDate callers that read it. Unset: `buddhist` for `th` and `en` (unchanged), `gregory` for `sv`. */
 	calendar?: "buddhist" | "gregory";
 	/** Override individual strings. */
 	strings?: Partial<Record<string, string | ((...args: any[]) => string)>>;
+	/** 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;
 }
 export type StatusTone = "neutral" | "progress" | "ready" | "blocked";
@@ -191,7 +212,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 }
 /** 32px round button holding one icon. */
 export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
-	icon: IconName;
+	icon: IconInput;
+	/** `danger` colours the icon and hover for a destructive action (Delete, Revoke). */
+	tone?: "neutral" | "danger";
 	/** Accessible name and tooltip (required). */
 	label: string;
 	/** Icon size. Default `sm` (16). */
@@ -199,7 +222,7 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 }
 export interface MenuItem {
 	label?: string;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Present = a checkable item (menuitemcheckbox). */
 	checked?: boolean;
 	disabled?: boolean;
@@ -237,7 +260,7 @@ export interface FieldProps {
 }
 export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "required"> {
 	/** Leading icon inside the field. */
-	icon?: IconName;
+	icon?: IconInput;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode;
 }
@@ -252,7 +275,7 @@ export interface SelectProps extends FieldProps, Omit<React$1.SelectHTMLAttribut
 	options: SelectOption[];
 	/** A disabled first option shown in fg-tertiary until something is chosen. */
 	placeholder?: string;
-	icon?: IconName;
+	icon?: IconInput;
 }
 export type ChoiceOption = string | {
 	value: string;
@@ -364,7 +387,7 @@ export interface CardProps {
 export interface TabItem {
 	id: string;
 	label: string;
-	icon?: IconName;
+	icon?: IconInput;
 	count?: number;
 	disabled?: boolean;
 	content?: React$1.ReactNode;
@@ -381,9 +404,15 @@ export interface TabsProps {
 export interface NavItem {
 	id: string;
 	label: string;
-	icon?: IconName;
+	icon?: IconInput;
 	count?: number;
+	/** Anything beside the label, e.g. a status dot or a `Badge`. */
+	badge?: React$1.ReactNode;
 	href?: string;
+	/** Makes this item a collapsible group of links. The group header is a button, never a link. */
+	children?: NavItem[];
+	/** Start open. A group also opens by itself when one of its items is the current one. */
+	defaultOpen?: boolean;
 }
 export interface SideNavProps {
 	sections?: Array<{
@@ -398,6 +427,8 @@ export interface SideNavProps {
 	footer?: React$1.ReactNode;
 	/** Default "Main". */
 	label?: string;
+	/** Router link for items with `href`; defaults to the AuraProvider's `linkComponent`, then `<a>`. */
+	linkComponent?: React$1.ElementType;
 	className?: string;
 }
 export interface BreadcrumbProps {
@@ -435,7 +466,19 @@ export interface ComboboxOption {
 	keywords?: string[];
 	disabled?: boolean;
 	/** Leading icon in the list. */
-	icon?: IconName;
+	icon?: IconInput;
+}
+/** Combobox with `multiple`: pick any number; the picks show as removable chips in the field. */
+export interface ComboboxMultipleProps extends Omit<ComboboxProps, "value" | "defaultValue" | "onChange" | "clearable"> {
+	multiple: true;
+	/** Selected option values, in the order they were picked (controlled). */
+	value?: string[];
+	defaultValue?: string[];
+	onChange?: (value: string[]) => void;
+	/** Clear-all button while anything is selected. Default true. */
+	clearable?: boolean;
+	/** Most picks allowed; further options are disabled. */
+	max?: number;
 }
 export interface ComboboxProps extends FieldProps {
 	options: Array<ComboboxOption | string>;
@@ -449,7 +492,7 @@ export interface ComboboxProps extends FieldProps {
 	disabled?: boolean;
 	readOnly?: boolean;
 	/** Leading icon. Default `search`. */
-	icon?: IconName;
+	icon?: IconInput;
 	/** Clear button while a value is selected (Escape clears too). Default true. */
 	clearable?: boolean;
 	/** Server-side search: called with the typed text; the component stops filtering and shows `options` as given. */
@@ -463,12 +506,83 @@ export interface ComboboxProps extends FieldProps {
 	filter?: (option: ComboboxOption, query: string) => boolean;
 	className?: string;
 }
+/** Number input: thousands separators, +/− buttons, arrow keys, min/max/step, prefix/suffix (฿, %). */
+export interface NumberFieldProps extends FieldProps {
+	/** The number (controlled). `null` = empty. */
+	value?: number | null;
+	defaultValue?: number | null;
+	/** Called with the parsed number (or null when emptied) as the person types, and with the clamped value on blur. */
+	onChange?: (value: number | null) => void;
+	min?: number;
+	max?: number;
+	/** Arrow keys and buttons move by this. Default 1. PageUp/PageDown move 10×. */
+	step?: number;
+	/** Decimal places shown and kept. Default: 0 when step is whole, else step's decimals. */
+	decimals?: number;
+	/** Text before the number, e.g. `฿`. */
+	prefix?: React$1.ReactNode;
+	/** Text after the number, e.g. `%` or `ชิ้น`. */
+	suffix?: React$1.ReactNode;
+	/** +/− buttons beside the number. Default true. */
+	stepper?: boolean;
+	id?: string;
+	name?: string;
+	placeholder?: string;
+	disabled?: boolean;
+	readOnly?: boolean;
+	className?: string;
+	onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
+}
+/** One step of a Stepper. */
+export interface StepItem {
+	id: string;
+	label: React$1.ReactNode;
+	/** Short line under the label, e.g. what the step asks for. */
+	description?: React$1.ReactNode;
+}
+/** Progress through a multi-step flow (wizard, checkout, booking). */
+export interface StepperProps {
+	steps: StepItem[];
+	/** id of the step the person is on. Steps before it are completed. */
+	current: string;
+	/** Accessible name of the list. Default: none (give one when the page has several). */
+	label?: string;
+	/** Makes completed steps buttons that go back to them. Upcoming steps never are. */
+	onStepClick?: (id: string) => void;
+	/** Default `horizontal`. Below `sm` a horizontal stepper shows only the current step ("Step 2 of 4"). */
+	orientation?: "horizontal" | "vertical";
+	className?: string;
+}
+export interface SegmentedOption {
+	value: string;
+	label: string;
+	icon?: IconInput;
+	/** Show only the icon; `label` becomes its accessible name and tooltip. */
+	iconOnly?: boolean;
+	disabled?: boolean;
+}
+/** A row of 2–5 mutually exclusive choices that apply at once (view, period, unit). A radio group underneath. */
+export interface SegmentedControlProps {
+	/** Accessible name of the group, e.g. "View". Required. */
+	label: string;
+	options: Array<SegmentedOption | string>;
+	value?: string;
+	defaultValue?: string;
+	onChange?: (value: string) => void;
+	/** `md` (default, 36px) or `sm` (28px) for toolbars. */
+	size?: "sm" | "md";
+	/** Stretch across the container, segments equal width. */
+	fullWidth?: boolean;
+	disabled?: boolean;
+	id?: string;
+	className?: string;
+}
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
-	/** `th` (default) or `en`. */
-	locale?: "th" | "en";
-	/** `buddhist` (default, พ.ศ.) or `gregory` (ค.ศ.). */
+	/** `th` (default), `en` or `sv`. */
+	locale?: "th" | "en" | "sv";
+	/** `buddhist` (พ.ศ.; default for th and en) or `gregory` (ค.ศ.; default for sv). */
 	calendar?: "buddhist" | "gregory";
 }
 export interface CalendarProps extends DateDisplayOptions {
@@ -590,7 +704,7 @@ export interface StatProps {
 	unit?: React$1.ReactNode;
 	change?: StatChange;
 	caption?: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Skeleton in place of the value. */
 	loading?: boolean;
 	/** Makes the whole card a link or a button (drill-down). */
@@ -657,11 +771,11 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	tone?: Tone;
 	/** soft (default) · solid · outline */
 	variant?: "soft" | "solid" | "outline";
-	icon?: IconName;
+	icon?: IconInput;
 }
 export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
 	children: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Adds a remove button (applied filters, chosen people). */
 	onRemove?: () => void;
 	removeLabel?: string;
@@ -698,7 +812,7 @@ export interface SkeletonProps {
 export interface EmptyStateProps {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	/** One or two buttons. */
 	action?: React$1.ReactNode;
 	size?: "sm" | "md";
@@ -724,7 +838,7 @@ export interface AccordionItem {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode;
 	content: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	disabled?: boolean;
 }
 export interface AccordionProps {
@@ -832,10 +946,16 @@ export declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps &
 export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLSelectElement>>;
 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. */
+export interface ComboboxComponent {
+	(props: ComboboxMultipleProps & React$1.RefAttributes<HTMLInputElement>): React$1.ReactElement | null;
+	(props: ComboboxProps & React$1.RefAttributes<HTMLInputElement>): React$1.ReactElement | null;
+	displayName?: string;
+}
 /** The Thai-aware default filter: label, description and keywords contain the query. */
 declare function defaultFilter(option: ComboboxOption, query: string): boolean;
-/** Text field that filters a list as you type (ARIA 1.2 combobox). One value. */
-export declare const Combobox: React$1.ForwardRefExoticComponent<ComboboxProps & React$1.RefAttributes<HTMLInputElement>>;
+/** Text field that filters a list as you type (ARIA 1.2 combobox). One value, or any number with `multiple`. */
+export declare const Combobox: ComboboxComponent;
 /** Options for formatDate: locale/calendar plus a preset or any Intl.DateTimeFormat options. */
 export type FormatDateOptions = DateDisplayOptions & {
 	format?: "short" | "long" | "numeric" | Intl.DateTimeFormatOptions;
@@ -867,6 +987,7 @@ export declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & Rea
 export declare const DataTable: React$1.ForwardRefExoticComponent<DataTableProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Tabs: React$1.ForwardRefExoticComponent<TabsProps & React$1.RefAttributes<HTMLDivElement>>;
+/** Side navigation: sections of links or buttons, collapsible groups, counts and badges. Arrow keys move between items. */
 export declare const SideNav: React$1.ForwardRefExoticComponent<SideNavProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Breadcrumb: React$1.ForwardRefExoticComponent<BreadcrumbProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
@@ -953,6 +1074,10 @@ export interface AuraStrings {
 	fileWrongType: string;
 	tooManyFiles: (n: number | string) => string;
 	colorScheme: string;
+	increase: string;
+	decrease: string;
+	stepDone: string;
+	stepOf: (i: number, total: number) => string;
 	schemeLight: string;
 	schemeDark: string;
 	schemeSystem: string;
@@ -965,12 +1090,15 @@ export interface AuraStrings {
 export declare const STRINGS: {
 	en: AuraStrings;
 	th: AuraStrings;
+	sv: AuraStrings;
 };
 /** What useAuraLocale returns. `locale` and `calendar` are null outside an AuraProvider. */
 export interface AuraLocaleValue {
-	locale: "th" | "en" | null;
+	locale: "th" | "en" | "sv" | null;
 	calendar: "buddhist" | "gregory" | null;
 	strings: AuraStrings;
+	/** The router link set on AuraProvider, if any. */
+	linkComponent?: React$1.ElementType | 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;
@@ -1008,7 +1136,10 @@ export interface ColorSchemeOptions {
 /** The script ColorSchemeScript renders, as a string — for frameworks that want it in a raw <head> template. */
 export declare function colorSchemeScript(options?: ColorSchemeOptions): string;
 /** Put in <head>: applies the saved colour scheme before the page paints. Server-rendering safe. */
-export declare function ColorSchemeScript(props: ColorSchemeOptions): React$1.ReactElement;
+export declare function ColorSchemeScript(props: ColorSchemeOptions & {
+	/** Nonce for a nonce-based Content-Security-Policy (script-src 'nonce-…'). */
+	nonce?: string;
+}): React$1.ReactElement;
 /** Current colour scheme and a setter. `resolved` is what is on screen (system resolved to light or dark). */
 export interface ColorSchemeState {
 	scheme: ColorScheme;
@@ -1031,6 +1162,12 @@ export declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStatePro
 export declare const Pagination: React$1.ForwardRefExoticComponent<PaginationProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Accordion: React$1.ForwardRefExoticComponent<AccordionProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const Popover: React$1.ForwardRefExoticComponent<PopoverProps & React$1.RefAttributes<HTMLDivElement>>;
+/** Number input with thousands separators, +/− buttons and arrow keys (ARIA spinbutton). */
+export declare const NumberField: React$1.ForwardRefExoticComponent<NumberFieldProps & React$1.RefAttributes<HTMLInputElement>>;
+/** Progress through a multi-step flow. Completed steps can link back; the current one has aria-current="step". */
+export declare const Stepper: React$1.ForwardRefExoticComponent<StepperProps & React$1.RefAttributes<HTMLElement>>;
+/** A row of mutually exclusive choices that apply at once. A radio group: one Tab stop, arrow keys move and select. */
+export declare const SegmentedControl: React$1.ForwardRefExoticComponent<SegmentedControlProps & React$1.RefAttributes<HTMLDivElement>>;
 
 export {
 	defaultFilter as comboboxFilter,

package/dist/styles.css

@@ -43,6 +43,11 @@ a.aura-btn { text-decoration: none; }
 
 .aura-btn--secondary { border: 1px solid var(--aura-button-secondary-border); color: var(--aura-fg-primary); }
 .aura-btn--secondary:hover { background: var(--aura-bg-surface-hover); }
+/* Destructive: filled for the confirm step, outline beside other actions. Loading keeps the colour (busy, not unavailable). */
+.aura-btn--danger { background: var(--aura-button-danger-bg); color: var(--aura-button-danger-fg); }
+.aura-btn--danger:hover { background: var(--aura-button-danger-bg-hover); }
+.aura-btn--danger-secondary { border: 1px solid var(--aura-border-danger); color: var(--aura-fg-danger); background: transparent; }
+.aura-btn--danger-secondary:hover { background: var(--aura-alert-danger-bg); }
 
 .aura-btn--creative {
   border: 2px solid var(--aura-button-creative-border);
@@ -82,6 +87,28 @@ a.aura-btn { text-decoration: none; }
 .aura-table__row--skeleton:hover { background: var(--aura-bg-surface); }
 .aura-table__row--skeleton .aura-table__td { display: flex; align-items: center; }
 .aura-table__row.is-selected { background: var(--aura-bg-selected); }
+/* Right-aligned (numeric) columns */
+.aura-table__th.is-end { padding-right: var(--aura-space-4); }
+.aura-table__th.is-end .aura-table__th-inner { justify-content: flex-end; }
+.aura-table__th.is-end .aura-table__sort { flex-direction: row-reverse; }
+.aura-table__td.is-end { text-align: end; font-variant-numeric: tabular-nums; }
+.aura-table__row--skeleton .aura-table__td.is-end { justify-content: flex-end; }
+/* Row links (getRowHref): the first cell's text is the link; the whole row is the click target */
+.aura-table__row-link { color: inherit; text-decoration: none; }
+.aura-table__row-link:hover, .aura-table__row:hover .aura-table__row-link, .aura-table__card:hover .aura-table__row-link { text-decoration: underline; text-underline-offset: 2px; }
+.aura-table__row-link:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
+/* 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;
+  border-radius: var(--aura-radius-full); pointer-events: none;
+}
+.aura-table--stacked .aura-table__busy-bar { top: 0; }
+.aura-table__busy-bar::after {
+  content: ''; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--aura-fg-accent);
+  animation: aura-progress-slide var(--aura-duration-pulse) var(--aura-ease) infinite;
+}
+@media (prefers-reduced-motion: reduce) { .aura-table__busy-bar::after { animation-duration: calc(var(--aura-duration-pulse) * 3); } }
 
 /* Cells: text cells stay block so long values end in an ellipsis */
 .aura-table__td {
@@ -212,11 +239,13 @@ a.aura-btn { text-decoration: none; }
   cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease);
 }
 .aura-icon-btn:hover { background: var(--aura-bg-surface-hover); }
+.aura-icon-btn--danger { color: var(--aura-fg-danger); }
+.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); }
 
 /* Skeleton */
-@keyframes aura-pulse { 50% { opacity: 0.45; } }
+@keyframes aura-pulse { 50% { opacity: 0.6; } }
 .aura-skel {
   display: block; height: 10px; width: 60%; border-radius: var(--aura-radius-full);
   background: var(--aura-bg-skeleton); animation: aura-pulse var(--aura-duration-pulse) var(--aura-ease) infinite;
@@ -275,6 +304,9 @@ a.aura-btn { text-decoration: none; }
 
 /* Icon — Lucide, 24-grid, stroke in currentColor */
 .aura-icon { flex: none; display: inline-block; vertical-align: middle; }
+/* A consumer's own icon element (e.g. lucide-react) fills the same box, strokes in currentColor at width 2. */
+.aura-icon--custom { display: inline-flex; align-items: center; justify-content: center; color: inherit; line-height: 0; }
+.aura-icon--custom > svg { width: 100%; height: 100%; stroke-width: var(--aura-icon-stroke, 2); }
 
 /* Loading spinner */
 @keyframes aura-spin { to { transform: rotate(360deg); } }
@@ -543,6 +575,14 @@ a.aura-btn { text-decoration: none; }
 .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
 .aura-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .aura-nav__count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--aura-fg-secondary); }
+.aura-nav__badge { display: inline-flex; align-items: center; flex: none; }
+/* Groups: a disclosure button, its items indented one step per level. */
+.aura-nav__item { padding-left: calc(var(--aura-space-3) + var(--aura-nav-depth, 0) * (var(--aura-icon-sm) + var(--aura-space-3))); }
+.aura-nav__item--group.has-active { color: var(--aura-fg-primary); }
+.aura-nav__chevron { color: var(--aura-fg-secondary); transition: transform var(--aura-duration-fast) var(--aura-ease); }
+.aura-nav__chevron.is-open { transform: rotate(180deg); }
+.aura-nav__sub { margin-top: 2px; }
+.aura-nav__sub[hidden] { display: none; }
 .aura-nav__footer { padding: var(--aura-space-3); border-top: 1px solid var(--aura-border-default); }
 
 /* ---------- Breadcrumb ---------- */
@@ -775,7 +815,8 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aura-space-2); }
 .aura-stat__label { font-size: 13px; font-weight: 500; color: var(--aura-fg-secondary); }
 .aura-stat__icon { display: inline-flex; color: var(--aura-fg-secondary); }
-.aura-stat__value { display: flex; align-items: baseline; gap: var(--aura-space-1); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; min-height: 34px; }
+.aura-stat__value { display: flex; align-items: baseline; gap: var(--aura-space-1); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; min-height: 34px; }
+.aura-stat__value.is-numeric { font-variant-numeric: tabular-nums; }
 .aura-stat__unit { font-size: 14px; font-weight: 500; color: var(--aura-fg-secondary); letter-spacing: 0; }
 .aura-stat__skel { width: 55%; height: 24px; align-self: center; }
 .aura-stat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-2); font-size: 12px; }
@@ -944,6 +985,107 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-popover__head + .aura-popover__body { padding-top: var(--aura-space-2); }
 @media (prefers-reduced-motion: reduce) { .aura-popover { animation: none; } }
 
+/* ---------- Combobox, multiple: picks as chips in the field ---------- */
+.aura-combo.is-multi { flex-wrap: wrap; align-items: center; gap: var(--aura-space-1); padding: 5px calc(var(--aura-space-2) + 2 * var(--aura-control-sm)) 5px calc(var(--aura-space-3) + var(--aura-icon-sm) + var(--aura-space-2)); }
+.aura-combo.is-multi .aura-input__icon { top: calc(var(--aura-input-height) / 2 - var(--aura-icon-sm) / 2 - 1px); }
+.aura-combo.is-multi .aura-input__control { flex: 1 0 4ch; height: 32px; padding: 0 var(--aura-space-1); }
+/* Wrapped chips grow the field: keep the icon and buttons on the first line. */
+.aura-combo.is-multi .aura-combo__clear, .aura-combo.is-multi .aura-combo__toggle { top: calc((var(--aura-input-height) - 2px - var(--aura-control-sm)) / 2); }
+.aura-combo__chips { display: contents; }
+.aura-combo__chip {
+  display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 28px; box-sizing: border-box;
+  padding: 0 2px 0 var(--aura-space-2); border-radius: var(--aura-radius-full);
+  background: var(--aura-bg-selected); color: var(--aura-fg-primary); font-size: 13px; font-weight: 500;
+}
+.aura-combo__chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
+.aura-combo__chip-remove {
+  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
+  border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
+}
+.aura-combo__chip-remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-combo__chip-remove .aura-icon { width: 14px; height: 14px; }
+
+/* ---------- NumberField ---------- */
+.aura-number .aura-input__control { font-variant-numeric: tabular-nums; }
+.aura-number__affix { padding-left: var(--aura-space-3); color: var(--aura-fg-secondary); font-size: 14px; white-space: nowrap; }
+.aura-number__affix + .aura-input__control { padding-left: var(--aura-space-2); }
+.aura-input__control + .aura-number__affix { padding: 0 var(--aura-space-2) 0 0; }
+.aura-number__steps { display: flex; align-self: stretch; border-left: 1px solid var(--aura-border-default); }
+.aura-number__step {
+  display: inline-flex; align-items: center; justify-content: center; width: 36px; padding: 0;
+  border: 0; background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
+  transition: background-color var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
+}
+.aura-number__step + .aura-number__step { border-left: 1px solid var(--aura-border-default); }
+.aura-number__step:last-child { border-radius: 0 calc(var(--aura-radius-md) - 1px) calc(var(--aura-radius-md) - 1px) 0; }
+.aura-number__step:hover:not(:disabled) { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
+.aura-number__step:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
+
+/* ---------- Stepper ---------- */
+.aura-stepper { font-family: var(--font-sans); }
+.aura-stepper__list { display: flex; list-style: none; margin: 0; padding: 0; }
+.aura-stepper--vertical .aura-stepper__list { flex-direction: column; }
+.aura-stepper__item { position: relative; flex: 1 1 0; min-width: 0; }
+.aura-stepper__step {
+  display: flex; align-items: flex-start; gap: var(--aura-space-3); width: 100%; box-sizing: border-box; padding: 0 var(--aura-space-3) 0 0;
+  border: 0; background: none; color: inherit; font: inherit; text-align: left; border-radius: var(--aura-radius-md);
+}
+button.aura-stepper__step { cursor: pointer; }
+button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underline; }
+.aura-stepper__marker {
+  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; box-sizing: border-box;
+  border-radius: var(--aura-radius-full); border: 1px solid var(--aura-border-control); background: var(--aura-bg-surface);
+  color: var(--aura-fg-secondary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
+}
+.aura-stepper__marker .aura-icon { width: 16px; height: 16px; }
+.aura-stepper__item.is-done .aura-stepper__marker { background: var(--aura-button-primary-bg); border-color: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
+.aura-stepper__item.is-current .aura-stepper__marker { border: 2px solid var(--aura-fg-accent); color: var(--aura-fg-accent); }
+.aura-stepper__text { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
+.aura-stepper__label { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--aura-fg-secondary); }
+.aura-stepper__item.is-current .aura-stepper__label, .aura-stepper__item.is-done .aura-stepper__label { color: var(--aura-fg-primary); }
+.aura-stepper__item.is-current .aura-stepper__label { font-weight: 600; }
+.aura-stepper__desc { font-size: 12px; line-height: 1.5; color: var(--aura-fg-secondary); }
+/* Connector: a line from each marker to the next (labels sit under the markers), or down the left when vertical. */
+.aura-stepper--horizontal .aura-stepper__item:not(:last-child)::after {
+  content: ""; position: absolute; top: 14px; left: 36px; right: var(--aura-space-2); height: 1px; background: var(--aura-border-control); pointer-events: none;
+}
+.aura-stepper--horizontal .aura-stepper__step { flex-direction: column; gap: var(--aura-space-2); }
+.aura-stepper--horizontal .aura-stepper__text { padding-top: 0; }
+.aura-stepper--horizontal .aura-stepper__item.is-done::after { background: var(--aura-button-primary-bg); }
+.aura-stepper--vertical .aura-stepper__item { flex: none; padding-bottom: var(--aura-space-5); }
+.aura-stepper--vertical .aura-stepper__item:not(:last-child)::after {
+  content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; width: 1px; background: var(--aura-border-control);
+}
+.aura-stepper--vertical .aura-stepper__item.is-done::after { background: var(--aura-button-primary-bg); }
+.aura-stepper__compact { display: none; margin: var(--aura-space-2) 0 0; font-size: 13px; }
+.aura-stepper__count { color: var(--aura-fg-secondary); margin-right: var(--aura-space-2); }
+.aura-stepper__compact-label { font-weight: 600; }
+
+/* ---------- SegmentedControl ---------- */
+.aura-segmented {
+  display: inline-flex; gap: 2px; padding: 2px; box-sizing: border-box; max-width: 100%;
+  border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-full); background: var(--aura-bg-surface-hover);
+  font-family: var(--font-sans);
+}
+.aura-segmented:not(.is-full) { width: fit-content; justify-self: start; align-self: flex-start; }
+.aura-segmented.is-full { display: flex; width: 100%; }
+.aura-segmented__option {
+  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 32px; padding: 0 var(--aura-space-4); box-sizing: border-box;
+  border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-secondary);
+  font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
+  transition: background-color var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease), box-shadow var(--aura-duration-fast) var(--aura-ease);
+}
+.aura-segmented.is-full .aura-segmented__option { flex: 1 1 0; min-width: 0; }
+.aura-segmented__option.is-icon { padding: 0; width: 36px; }
+.aura-segmented__option:hover:not(:disabled):not(.is-selected) { color: var(--aura-fg-primary); }
+.aura-segmented__option.is-selected { background: var(--aura-bg-surface); color: var(--aura-fg-primary); box-shadow: var(--aura-shadow-enterprise); }
+.aura-segmented__option:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; }
+.aura-segmented__option:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
+.aura-segmented--sm .aura-segmented__option { height: 24px; padding: 0 var(--aura-space-3); font-size: 12px; }
+.aura-segmented--sm .aura-segmented__option.is-icon { width: 28px; padding: 0; }
+.aura-segmented.is-disabled { opacity: var(--aura-disabled-opacity); }
+
 /* A field inside a row Stack takes the remaining width (a search box beside its button). */
 .aura-stack > .aura-field { flex: 1 1 auto; min-width: 0; }
 
@@ -951,10 +1093,16 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 @media (pointer: coarse) {
   .aura-cal { --aura-cal-cell: 40px; }
   .aura-combo__option { min-height: 44px; }
+  .aura-segmented__option, .aura-segmented--sm .aura-segmented__option { height: 40px; }
+  .aura-number__step { width: 44px; }
 }
 
 /* ---------- Small screens (< 640px) ---------- */
 @media (max-width: 639.98px) {
+  /* Horizontal stepper on phones: markers only (names kept for screen readers), the current step named underneath. */
+  .aura-stepper--horizontal .aura-stepper__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
+  .aura-stepper--horizontal .aura-stepper__item:not(:last-child)::after { right: 8px; }
+  .aura-stepper--horizontal .aura-stepper__compact { display: block; }
   .aura-dialog-layer:not(.aura-drawer-layer) { align-items: flex-end; padding: 0; }
   .aura-dialog { max-width: none !important; max-height: 92vh; border-radius: var(--aura-radius-2xl) var(--aura-radius-2xl) 0 0; border-bottom: 0;
     padding-bottom: calc(var(--aura-space-6) + env(safe-area-inset-bottom)); animation-name: aura-sheet-in; }

package/package.json

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