@jirawatpyk/aura-react 4.15.0 → 4.16.0

package/dist/index.d.ts

@@ -1,39 +1,45 @@
 import * as React$1 from 'react';
 
 /** Button look. */
-export type ButtonVariant = "primary" | "secondary" | "creative" | "danger" | "danger-secondary";
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "creative" | "danger" | "danger-secondary";
+/** `md` 44px (default) · `sm` 32px for toolbars, table rows and card footers (still a 44px hit area on touch screens). */
+export type ButtonSize = "sm" | "md";
 /** 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`. `danger` (filled) and `danger-secondary` (outline) are for irreversible or destructive actions only — typically the confirm button of a `Dialog role="alertdialog"`. */
-	variant?: ButtonVariant;
+	/** Visual variant. Default `primary`. `ghost` has no fill or edge until hover (toolbars, rows, secondary actions beside a 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 | undefined;
 	/** Label text — short, Title Case English or Thai. */
 	children: React$1.ReactNode;
 	/** Leading icon name (see `IconName`). Hidden while loading. */
-	icon?: IconInput;
+	icon?: IconInput | undefined;
 	/** Trailing icon name, e.g. `arrow-right` for forward actions. */
-	iconRight?: IconInput;
+	iconRight?: IconInput | undefined;
 	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
-	loading?: boolean;
+	loading?: boolean | undefined;
 	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels. */
-	fullWidth?: boolean;
+	fullWidth?: boolean | undefined;
+	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
+	size?: ButtonSize | undefined;
 }
 /** A link that looks like a Button: give `Button` an `href` and it renders an `<a>` (navigation, not actions). */
 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`. `danger` (filled) and `danger-secondary` (outline) are for irreversible or destructive actions only — typically the confirm button of a `Dialog role="alertdialog"`. */
-	variant?: ButtonVariant;
+	/** Visual variant. Default `primary`. `ghost` has no fill or edge until hover (toolbars, rows, secondary actions beside a 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 | undefined;
 	/** Label text — say where it goes ("View Orders"), not "Click here". */
 	children: React$1.ReactNode;
-	icon?: IconInput;
+	icon?: IconInput | undefined;
 	/** Trailing icon, e.g. `arrow-right`, or `external-link` with `target="_blank"`. */
-	iconRight?: IconInput;
+	iconRight?: IconInput | undefined;
 	/** Looks unavailable and can't be followed: no href, `aria-disabled`, out of the Tab order. */
-	disabled?: boolean;
+	disabled?: boolean | undefined;
 	/** Fills its container and lets a long label wrap (at least 44px tall). */
-	fullWidth?: boolean;
+	fullWidth?: boolean | undefined;
+	/** `sm` is 32px with tighter padding. Default `md` (44px). */
+	size?: ButtonSize | undefined;
 	/** 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. */
-	linkComponent?: React$1.ElementType;
+	linkComponent?: React$1.ElementType | undefined;
 }
 export interface DataTableColumn {
 	/** Key into each row object. */
@@ -41,34 +47,34 @@ export interface DataTableColumn {
 	/** Header label (source style: UPPERCASE). */
 	label: string;
 	/** Fixed width in px; the last column usually takes the rest. */
-	width?: number;
+	width?: number | undefined;
 	/** Render the cell in the mono face (IDs). */
-	mono?: boolean;
+	mono?: boolean | undefined;
 	/** Render the value as a StatusPill (tone picked from the word). */
-	pill?: boolean;
+	pill?: boolean | undefined;
 	/** Override the tone for specific values, e.g. `{ 'QA': 'progress' }`. */
-	tones?: Record<string, StatusTone>;
+	tones?: Record<string, StatusTone> | undefined;
 	/** Header becomes a button cycling asc → desc → unsorted. */
-	sortable?: boolean;
+	sortable?: boolean | undefined;
 	/** Value to sort by, when not the cell value (dates, amounts). */
-	sortValue?: (row: Record<string, any>) => string | number | null;
+	sortValue?: ((row: Record<string, any>) => string | number | null) | undefined;
 	/** Custom cell content. */
-	render?: (row: Record<string, any>) => React$1.ReactNode;
+	render?: ((row: Record<string, any>) => React$1.ReactNode) | undefined;
 	/** Set false to keep a sized column fixed when the table is `resizable`. */
-	resizable?: boolean;
+	resizable?: boolean | undefined;
 	/** Resize limits in px. Defaults 64 / 480. For the flexible column, minWidth defaults to 160. */
-	minWidth?: number;
-	maxWidth?: number;
+	minWidth?: number | undefined;
+	maxWidth?: number | undefined;
 	/** Start pinned to the left (needs a width). */
-	pinned?: boolean;
+	pinned?: boolean | undefined;
 	/** Start hidden (show it from the columns button). */
-	hidden?: boolean;
+	hidden?: boolean | undefined;
 	/** Hide this column when the table is narrower than this (px, or a breakpoint name). For tablets: keep ID, name, date and status; drop the rest below `lg`. Not applied to stacked cards. */
-	hideBelow?: number | "sm" | "md" | "lg" | "xl";
+	hideBelow?: number | "sm" | "md" | "lg" | "xl" | undefined;
 	/** 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;
+	actions?: boolean | undefined;
 	/** `end` right-aligns header and cells (amounts, counts) and uses tabular figures. Default `start`. */
-	align?: "start" | "end";
+	align?: "start" | "end" | undefined;
 }
 export interface DataTableSort {
 	key: string;
@@ -76,84 +82,84 @@ export interface DataTableSort {
 }
 export interface DataTableEmpty {
 	/** Default `inbox`; use `search` for "no matches". */
-	icon?: IconInput;
+	icon?: IconInput | undefined;
 	/** Default "Nothing here yet". */
-	title?: string;
-	description?: string;
+	title?: string | undefined;
+	description?: string | undefined;
 	/** One action, usually a secondary Button. */
-	action?: React$1.ReactNode;
+	action?: React$1.ReactNode | undefined;
 }
 /** Enterprise data table: 48px rows, hairline dividers, mono header band. */
 export interface DataTableProps {
 	/** Defaults to ID · NAME · STATUS · OWNER (96 / 160 / 112 / auto px). */
-	columns?: DataTableColumn[];
+	columns?: DataTableColumn[] | undefined;
 	rows: Array<Record<string, React$1.ReactNode>>;
 	/** Column key giving each row a unique React key. Default: the first column's key. */
-	rowKey?: string;
+	rowKey?: string | undefined;
 	/** Accessible name for the table. */
-	label?: string;
+	label?: string | undefined;
 	/** Controlled sort; pair with onSortChange. */
-	sort?: DataTableSort | null;
+	sort?: DataTableSort | null | undefined;
 	/** Initial sort when uncontrolled. */
-	defaultSort?: DataTableSort | null;
-	onSortChange?: (sort: DataTableSort | null) => void;
+	defaultSort?: DataTableSort | null | undefined;
+	onSortChange?: ((sort: DataTableSort | null) => void) | undefined;
 	/** Adds a checkbox column. */
-	selectable?: boolean;
+	selectable?: boolean | undefined;
 	/** Controlled selection (row keys); pair with onSelectionChange. */
-	selected?: Array<string | number>;
+	selected?: Array<string | number> | undefined;
 	/** Initial selection when uncontrolled. */
-	defaultSelected?: Array<string | number>;
-	onSelectionChange?: (keys: Array<string | number>) => void;
+	defaultSelected?: Array<string | number> | undefined;
+	onSelectionChange?: ((keys: Array<string | number>) => void) | undefined;
 	/** Shown when rows is empty. */
-	empty?: DataTableEmpty;
+	empty?: DataTableEmpty | undefined;
 	/** Rows per page; omit for no pagination. */
-	pageSize?: number;
+	pageSize?: number | undefined;
 	/** Controlled page (1-based); pair with onPageChange. */
-	page?: number;
+	page?: number | undefined;
 	/** Initial page when uncontrolled. Default 1. */
-	defaultPage?: number;
-	onPageChange?: (page: number) => void;
+	defaultPage?: number | undefined;
+	onPageChange?: ((page: number) => void) | undefined;
 	/** Adds drag/keyboard resize handles to every column that has a width. */
-	resizable?: boolean;
-	onColumnResize?: (key: string, width: number) => void;
+	resizable?: boolean | undefined;
+	onColumnResize?: ((key: string, width: number) => void) | undefined;
 	/** 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;
+	loading?: boolean | undefined;
 	/** 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?: boolean | undefined;
 	/** manual: rows across all pages (drives the page count, "1–25 of 312" and aria-rowcount). */
-	totalRows?: number;
+	totalRows?: number | undefined;
 	/** 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;
+	getRowHref?: ((row: Record<string, any>) => string) | undefined;
 	/** Pager arrows become links to these URLs (search-param paging). Without onPageChange the link navigates. */
-	getPageHref?: (page: number) => string;
+	getPageHref?: ((page: number) => string) | undefined;
 	/** Router link for getRowHref / getPageHref. Default: AuraProvider's linkComponent, else `<a>`. */
-	linkComponent?: React$1.ElementType;
+	linkComponent?: React$1.ElementType | undefined;
 	/** Skeleton row count when there is no pageSize. Default 5. */
-	skeletonRows?: number;
+	skeletonRows?: number | undefined;
 	/** Called on row click or Enter. */
-	onRowActivate?: (row: Record<string, any>) => void;
+	onRowActivate?: ((row: Record<string, any>) => void) | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
-	height?: number;
+	height?: number | undefined;
 	/** Column menu on every header, drag-to-reorder, and the show/hide columns button. */
-	columnControls?: boolean;
+	columnControls?: boolean | undefined;
 	/** Set false to keep column controls but turn off reordering. */
-	reorderable?: boolean;
+	reorderable?: boolean | undefined;
 	/** Controlled column order (keys); pair with onColumnOrderChange. */
-	columnOrder?: string[];
-	onColumnOrderChange?: (keys: string[]) => void;
+	columnOrder?: string[] | undefined;
+	onColumnOrderChange?: ((keys: string[]) => void) | undefined;
 	/** Controlled hidden columns (keys); pair with onHiddenColumnsChange. */
-	hiddenColumns?: string[];
-	onHiddenColumnsChange?: (keys: string[]) => void;
+	hiddenColumns?: string[] | undefined;
+	onHiddenColumnsChange?: ((keys: string[]) => void) | undefined;
 	/** Controlled pinned columns (keys); pair with onPinnedColumnsChange. */
-	pinnedColumns?: string[];
-	onPinnedColumnsChange?: (keys: string[]) => void;
+	pinnedColumns?: string[] | undefined;
+	onPinnedColumnsChange?: ((keys: string[]) => void) | undefined;
 	/** `compact` = 40px rows (48px on touch screens). Default: the surrounding density. */
-	density?: "comfortable" | "compact";
+	density?: "comfortable" | "compact" | undefined;
 	/** Container width in px below which rows render as stacked cards (phones). Try 640. Measured with ResizeObserver, so it follows the container, not the window. */
-	stackBelow?: number;
-	className?: string;
+	stackBelow?: number | 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. */
 export type IconInput = IconName | React$1.ReactElement;
@@ -163,34 +169,34 @@ export interface IconProps {
 	/** 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;
+	size?: "sm" | "md" | "lg" | number | undefined;
 	/** Accessible name. Omit for decorative icons next to a text label (then aria-hidden). */
-	label?: string;
+	label?: string | undefined;
 	/** Default 2 (Lucide's). */
-	strokeWidth?: number;
-	className?: string;
+	strokeWidth?: number | undefined;
+	className?: string | undefined;
 }
 /** Creative surface with the AURA mesh and/or grain texture. Light in every theme; content in aura-on-texture. */
 export interface SurfaceProps extends React$1.HTMLAttributes<HTMLElement> {
 	/** Default `mesh`. */
-	texture?: "mesh" | "grain" | "mesh-grain";
+	texture?: "mesh" | "grain" | "mesh-grain" | undefined;
 	/** Element to render. Default `div`. */
-	as?: keyof React$1.JSX.IntrinsicElements;
-	children?: React$1.ReactNode;
+	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	children?: React$1.ReactNode | undefined;
 }
 /** Sets the language of built-in labels (pagination, close buttons, empty states…) and the default date display for everything inside. */
 export interface AuraProviderProps {
 	/** Built-in labels and date display. `sv` = Swedish labels, `sv-SE` dates, Monday weeks and the Gregorian calendar. Without a provider everything is English: labels, `en-GB` dates, Gregorian years. */
-	locale?: "th" | "en" | "sv";
+	locale?: "th" | "en" | "sv" | undefined;
 	/** Default calendar for DatePicker / DateRangePicker / Calendar / formatDate callers that read it. Unset: `buddhist` (พ.ศ.) for `th`, `gregory` for `en` and `sv`. */
-	calendar?: "buddhist" | "gregory";
+	calendar?: "buddhist" | "gregory" | undefined;
 	/** Override individual strings. */
-	strings?: Partial<Record<string, string | ((...args: any[]) => string)>>;
+	strings?: Partial<Record<string, string | ((...args: any[]) => string)>> | undefined;
 	/** `compact`: 36px fields and buttons, 40px table rows — dense admin screens. Touch screens keep 44px. Default: comfortable (or an ancestor's `data-density`). */
-	density?: "comfortable" | "compact";
+	density?: "comfortable" | "compact" | undefined;
 	/** 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;
+	linkComponent?: React$1.ElementType | undefined;
+	children?: React$1.ReactNode | undefined;
 }
 export type StatusTone = "neutral" | "progress" | "ready" | "blocked";
 /** Status pill: tone fill + icon + the status word. Tone comes from the word unless given. */
@@ -198,49 +204,49 @@ export interface StatusPillProps {
 	/** The status word shown, e.g. "In Progress". */
 	children: React$1.ReactNode;
 	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Blocked/Failed → blocked, anything else → neutral). */
-	tone?: StatusTone;
-	className?: string;
+	tone?: StatusTone | undefined;
+	className?: string | undefined;
 }
 /** 16px checkbox with 4px corners; ink when checked, a dash when indeterminate. */
 export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "checked" | "defaultChecked"> {
 	/** Controlled state; pair with onChange. Or use defaultChecked. */
-	checked?: boolean;
-	defaultChecked?: boolean;
-	indeterminate?: boolean;
+	checked?: boolean | undefined;
+	defaultChecked?: boolean | undefined;
+	indeterminate?: boolean | undefined;
 	/** Accessible name for a bare box (tables). Not needed when children give a visible label. */
-	label?: string;
+	label?: string | undefined;
 	/** Visible label beside the box (form use). */
-	children?: React$1.ReactNode;
+	children?: React$1.ReactNode | undefined;
 	/** Second line under the visible label (needs an id to be linked). */
-	description?: React$1.ReactNode;
-	onChange?: (checked: boolean) => void;
-	disabled?: boolean;
-	tabIndex?: number;
-	className?: string;
+	description?: React$1.ReactNode | undefined;
+	onChange?: ((checked: boolean) => void) | undefined;
+	disabled?: boolean | undefined;
+	tabIndex?: number | undefined;
+	className?: string | undefined;
 }
 /** 32px round button holding one icon. */
 export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
 	icon: IconInput;
 	/** `danger` colours the icon and hover for a destructive action (Delete, Revoke). */
-	tone?: "neutral" | "danger";
+	tone?: "neutral" | "danger" | undefined;
 	/** Accessible name and tooltip (required). */
 	label: string;
 	/** Icon size. Default `sm` (16). */
-	size?: "sm" | "md";
+	size?: "sm" | "md" | undefined;
 }
 export interface MenuItem {
-	label?: string;
-	icon?: IconInput;
+	label?: string | undefined;
+	icon?: IconInput | undefined;
 	/** Present = a checkable item (menuitemcheckbox). */
-	checked?: boolean;
-	disabled?: boolean;
+	checked?: boolean | undefined;
+	disabled?: boolean | undefined;
 	/** Keep the menu open after choosing (checkbox lists). */
-	keepOpen?: boolean;
+	keepOpen?: boolean | undefined;
 	/** Short right-aligned hint, e.g. a shortcut. */
-	hint?: string;
+	hint?: string | undefined;
 	/** A divider instead of an item. */
-	separator?: boolean;
-	onSelect?: () => void;
+	separator?: boolean | undefined;
+	onSelect?: (() => void) | undefined;
 }
 /** Popover list anchored to an element, rendered in a portal. */
 export interface MenuProps {
@@ -252,30 +258,30 @@ export interface MenuProps {
 	/** Called on choose, Escape, Tab or outside click. `restoreFocus` is true for keyboard closes. */
 	onClose: (restoreFocus: boolean) => void;
 	/** Focus the first item on open. Default true; turn off only for static demos. */
-	autoFocus?: boolean;
+	autoFocus?: boolean | undefined;
 }
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
 	label: string;
 	/** Helper line under the field (caption, fg-secondary). */
-	hint?: React$1.ReactNode;
+	hint?: React$1.ReactNode | undefined;
 	/** Replaces the hint, turns the edge fg-danger and sets aria-invalid. Write it as the fix. */
-	error?: React$1.ReactNode;
+	error?: React$1.ReactNode | undefined;
 	/** Adds a red asterisk and the native required attribute. */
-	required?: boolean;
+	required?: boolean | undefined;
 	/** Adds "(optional)" after the label. */
-	optional?: boolean;
+	optional?: boolean | undefined;
 }
 export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "required"> {
 	/** Leading icon inside the field. */
-	icon?: IconInput;
+	icon?: IconInput | undefined;
 	/** Trailing unit, e.g. "THB". */
-	suffix?: React$1.ReactNode;
+	suffix?: React$1.ReactNode | undefined;
 }
 /** A password input with a show/hide button. All TextField props; `ref` reaches the input (react-hook-form `register`). */
 export interface PasswordFieldProps extends Omit<TextFieldProps, "type" | "suffix"> {
 	/** Set false to hide the show/hide button. Default true. */
-	toggle?: boolean;
+	toggle?: boolean | undefined;
 }
 /** One entry of a FormErrorSummary: the field's `id` (or `name`) and what to fix. */
 export interface FormErrorItem {
@@ -286,16 +292,16 @@ export interface FormErrorItem {
 export interface FormErrorSummaryProps {
 	/** A list, or react-hook-form's `formState.errors` as is (`{ name: { message } }`). Empty → renders nothing. */
 	errors: FormErrorItem[] | Record<string, {
-		message?: React$1.ReactNode;
+		message?: React$1.ReactNode | undefined;
 	} | undefined>;
 	/** Default "Fix N fields to continue" in the provider's language. */
-	title?: React$1.ReactNode;
+	title?: React$1.ReactNode | undefined;
 	/** Called with the field when a link is followed, e.g. react-hook-form's `setFocus`. Default: focus the element whose id (or name) is the field. */
-	onSelect?: (field: string) => void;
+	onSelect?: ((field: string) => void) | undefined;
 	/** Change it on every submit (e.g. `formState.submitCount`) to move focus to the summary again. It also takes focus when errors first appear. */
 	focusKey?: unknown;
-	className?: string;
-	id?: string;
+	className?: string | undefined;
+	id?: string | undefined;
 }
 /** An applied filter, shown as a removable chip. */
 export interface ActiveFilter {
@@ -306,26 +312,26 @@ export interface ActiveFilter {
 /** The row above a table: search, filter controls, applied-filter chips, result count and actions. Wraps below md. */
 export interface FilterBarProps {
 	/** Search text (controlled). Omit `onSearchChange` to hide the search field. */
-	search?: string;
+	search?: string | undefined;
 	/** Called after typing pauses (`searchDelay`), and at once on Enter or clear — ready to write to the URL. */
-	onSearchChange?: (value: string) => void;
+	onSearchChange?: ((value: string) => void) | undefined;
 	/** ms to wait after the last keystroke. Default 300. */
-	searchDelay?: number;
-	searchLabel?: string;
-	searchPlaceholder?: string;
+	searchDelay?: number | undefined;
+	searchLabel?: string | undefined;
+	searchPlaceholder?: string | undefined;
 	/** Filter controls beside the search: Select, SegmentedControl, a Popover of options… */
-	children?: React$1.ReactNode;
+	children?: React$1.ReactNode | undefined;
 	/** Applied filters as chips, each with its own remove button. */
-	filters?: ActiveFilter[];
+	filters?: ActiveFilter[] | undefined;
 	/** Adds "Clear all" while any filter or search is set. */
-	onClearAll?: () => void;
+	onClearAll?: (() => void) | undefined;
 	/** A number ("312 results", announced politely) or your own node. */
-	resultCount?: number | React$1.ReactNode;
+	resultCount?: number | React$1.ReactNode | undefined;
 	/** Trailing slot: export, a New button… */
-	actions?: React$1.ReactNode;
+	actions?: React$1.ReactNode | undefined;
 	/** Accessible name of the region. Default "Filters". */
-	label?: string;
-	className?: string;
+	label?: string | undefined;
+	className?: string | undefined;
 }
 /** One command in the palette. */
 export interface CommandItem {
@@ -333,16 +339,16 @@ export interface CommandItem {
 	/** Text shown and searched. */
 	label: string;
 	/** Items with the same group are listed together under its heading, in first-seen order. */
-	group?: string;
-	icon?: IconInput;
-	description?: string;
+	group?: string | undefined;
+	icon?: IconInput | undefined;
+	description?: string | undefined;
 	/** Extra words that find it ("invoice" → Billing). */
-	keywords?: string[];
+	keywords?: string[] | undefined;
 	/** A shortcut shown at the right, e.g. "G I". Display only. */
-	shortcut?: string;
-	disabled?: boolean;
+	shortcut?: string | undefined;
+	disabled?: boolean | undefined;
 	/** Runs when chosen (Enter or click); the palette then closes. */
-	onSelect?: () => void;
+	onSelect?: (() => void) | undefined;
 }
 /** A command palette: a modal search over commands and pages, grouped, fully keyboard-driven. */
 export interface CommandProps {
@@ -350,84 +356,84 @@ export interface CommandProps {
 	onOpenChange: (open: boolean) => void;
 	items: CommandItem[];
 	/** Also called with the chosen item (after its own onSelect). */
-	onSelect?: (item: CommandItem) => void;
+	onSelect?: ((item: CommandItem) => void) | undefined;
 	/** Accessible name. Default "Command menu". */
-	label?: string;
-	placeholder?: string;
+	label?: string | undefined;
+	placeholder?: string | undefined;
 	/** Default "No matches". */
-	emptyText?: string;
+	emptyText?: string | undefined;
 	/** ⌘K / Ctrl+K toggles the palette from anywhere on the page. Default true. */
-	hotkey?: boolean;
+	hotkey?: boolean | undefined;
 	/** Replace the Thai-aware default filter. */
-	filter?: (item: CommandItem, query: string) => boolean;
-	className?: string;
+	filter?: ((item: CommandItem, query: string) => boolean) | undefined;
+	className?: string | undefined;
 }
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
 }
 export type SelectOption = string | {
 	value: string;
 	label: string;
-	disabled?: boolean;
+	disabled?: boolean | undefined;
 };
 export interface SelectProps extends FieldProps, Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "required"> {
 	options: SelectOption[];
 	/** A disabled first option shown in fg-tertiary until something is chosen. */
-	placeholder?: string;
-	icon?: IconInput;
+	placeholder?: string | undefined;
+	icon?: IconInput | undefined;
 }
 export type ChoiceOption = string | {
 	value: string;
 	label: string;
-	description?: string;
-	disabled?: boolean;
+	description?: string | undefined;
+	disabled?: boolean | undefined;
 };
 export interface RadioGroupProps extends FieldProps {
 	options: ChoiceOption[];
-	value?: string;
-	defaultValue?: string;
-	onChange?: (value: string) => void;
-	name?: string;
+	value?: string | undefined;
+	defaultValue?: string | undefined;
+	onChange?: ((value: string) => void) | undefined;
+	name?: string | undefined;
 	/** Default `vertical`. */
-	orientation?: "vertical" | "horizontal";
-	disabled?: boolean;
-	id?: string;
-	className?: string;
+	orientation?: "vertical" | "horizontal" | undefined;
+	disabled?: boolean | undefined;
+	id?: string | undefined;
+	className?: string | undefined;
 }
 export interface SwitchProps {
-	label?: string;
-	description?: string;
-	checked?: boolean;
-	defaultChecked?: boolean;
-	onChange?: (checked: boolean) => void;
-	disabled?: boolean;
+	label?: string | undefined;
+	description?: string | undefined;
+	checked?: boolean | undefined;
+	defaultChecked?: boolean | undefined;
+	onChange?: ((checked: boolean) => void) | undefined;
+	disabled?: boolean | undefined;
 	/** Required when there is no visible label. */
-	"aria-label"?: string;
-	id?: string;
-	className?: string;
+	"aria-label"?: string | undefined;
+	id?: string | undefined;
+	className?: string | undefined;
 }
 export type FeedbackTone = "info" | "success" | "warning" | "danger";
 export interface AlertProps {
-	tone?: FeedbackTone;
-	title?: React$1.ReactNode;
-	children?: React$1.ReactNode;
+	tone?: FeedbackTone | undefined;
+	title?: React$1.ReactNode | undefined;
+	children?: React$1.ReactNode | undefined;
 	/** Usually a secondary Button. */
-	action?: React$1.ReactNode;
+	action?: React$1.ReactNode | undefined;
 	/** Adds a close button. */
-	onDismiss?: () => void;
-	className?: string;
+	onDismiss?: (() => void) | undefined;
+	className?: string | undefined;
 }
 export interface ToastOptions {
 	title: string;
-	description?: string;
-	tone?: FeedbackTone;
+	description?: string | undefined;
+	tone?: FeedbackTone | undefined;
 	action?: {
 		label: string;
-		onClick?: () => void;
-	};
+		onClick?: (() => void) | undefined;
+	} | undefined;
 	/** ms before it closes itself. Default 5000; Infinity keeps it until dismissed. */
-	duration?: number;
+	duration?: number | undefined;
 	/** Reuse an id to replace a toast in place (same position, timer restarts) — never a second toast. */
-	id?: string;
+	id?: string | undefined;
 }
 /** Options for the shorthands (`toast.success(title, opts)` …): everything but the title and tone. */
 export type ToastShorthandOptions = Omit<ToastOptions, "title" | "tone">;
@@ -435,219 +441,219 @@ export interface TooltipProps {
 	content: React$1.ReactNode;
 	/** One focusable element. */
 	children: React$1.ReactElement;
-	side?: "top" | "bottom";
+	side?: "top" | "bottom" | undefined;
 	/** Hover delay in ms. Default 400. */
-	delay?: number;
+	delay?: number | undefined;
 	/** Force open (demos, tests). */
-	open?: boolean;
+	open?: boolean | undefined;
 }
 export interface FieldPropsPublic {
 	label: string;
-	hint?: React$1.ReactNode;
-	error?: React$1.ReactNode;
-	required?: boolean;
-	optional?: boolean;
+	hint?: React$1.ReactNode | undefined;
+	error?: React$1.ReactNode | undefined;
+	required?: boolean | undefined;
+	optional?: boolean | undefined;
 }
 export interface DialogProps {
 	open: boolean;
 	onClose: () => void;
 	title: React$1.ReactNode;
-	description?: React$1.ReactNode;
-	children?: React$1.ReactNode;
+	description?: React$1.ReactNode | undefined;
+	children?: React$1.ReactNode | undefined;
 	/** Buttons, right-aligned: secondary Cancel, then the primary action. */
-	footer?: React$1.ReactNode;
+	footer?: React$1.ReactNode | undefined;
 	/** `sm` 400 · `md` 560 (default) · `lg` 720. */
-	size?: "sm" | "md" | "lg";
+	size?: "sm" | "md" | "lg" | undefined;
 	/** Default true. False hides the close button and ignores Escape and scrim clicks. */
-	dismissible?: boolean;
+	dismissible?: boolean | undefined;
 	/** Use `alertdialog` for destructive confirmations. */
-	role?: "dialog" | "alertdialog";
+	role?: "dialog" | "alertdialog" | undefined;
 	/** Default true. Turn off only for static demos. */
-	autoFocus?: boolean;
-	className?: string;
+	autoFocus?: boolean | undefined;
+	className?: string | undefined;
 }
 export interface CardProps {
-	title?: React$1.ReactNode;
-	description?: React$1.ReactNode;
+	title?: React$1.ReactNode | undefined;
+	description?: React$1.ReactNode | undefined;
 	/** Top-right, usually an IconButton. */
-	actions?: React$1.ReactNode;
-	footer?: React$1.ReactNode;
-	children?: React$1.ReactNode;
+	actions?: React$1.ReactNode | undefined;
+	footer?: React$1.ReactNode | undefined;
+	children?: React$1.ReactNode | undefined;
 	/** Default `enterprise`. `creative` is for marketing and onboarding only. */
-	variant?: "enterprise" | "creative";
+	variant?: "enterprise" | "creative" | undefined;
 	/** Heading level of the title. Default 3 — use 2 when cards sit directly under the page h1. */
-	headingLevel?: 2 | 3 | 4 | 5 | 6;
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
 	/** Hover edge for clickable cards. */
-	interactive?: boolean;
-	as?: keyof React$1.JSX.IntrinsicElements;
-	className?: string;
+	interactive?: boolean | undefined;
+	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	className?: string | undefined;
 	/** id for the title element; the card is then labelled by it (aria-labelledby). */
-	titleId?: string;
+	titleId?: string | undefined;
 }
 export interface TabItem {
 	id: string;
 	label: string;
-	icon?: IconInput;
-	count?: number;
-	disabled?: boolean;
-	content?: React$1.ReactNode;
+	icon?: IconInput | undefined;
+	count?: number | undefined;
+	disabled?: boolean | undefined;
+	content?: React$1.ReactNode | undefined;
 }
 export interface TabsProps {
 	tabs: TabItem[];
 	/** Accessible name for the tab list. */
 	label: string;
-	value?: string;
-	defaultValue?: string;
-	onChange?: (id: string) => void;
-	className?: string;
+	value?: string | undefined;
+	defaultValue?: string | undefined;
+	onChange?: ((id: string) => void) | undefined;
+	className?: string | undefined;
 }
 export interface NavItem {
 	id: string;
 	label: string;
-	icon?: IconInput;
-	count?: number;
+	icon?: IconInput | undefined;
+	count?: number | undefined;
 	/** Anything beside the label, e.g. a status dot or a `Badge`. */
-	badge?: React$1.ReactNode;
-	href?: string;
+	badge?: React$1.ReactNode | undefined;
+	href?: string | undefined;
 	/** Makes this item a collapsible group of links. The group header is a button, never a link. */
-	children?: NavItem[];
+	children?: NavItem[] | undefined;
 	/** Start open. A group also opens by itself when one of its items is the current one. */
-	defaultOpen?: boolean;
+	defaultOpen?: boolean | undefined;
 }
 export interface SideNavProps {
 	sections?: Array<{
-		title?: string;
+		title?: string | undefined;
 		items: NavItem[];
-	}>;
-	items?: NavItem[];
-	value?: string;
-	defaultValue?: string;
-	onChange?: (id: string) => void;
-	header?: React$1.ReactNode;
-	footer?: React$1.ReactNode;
+	}> | undefined;
+	items?: NavItem[] | undefined;
+	value?: string | undefined;
+	defaultValue?: string | undefined;
+	onChange?: ((id: string) => void) | undefined;
+	header?: React$1.ReactNode | undefined;
+	footer?: React$1.ReactNode | undefined;
 	/** Default "Main". */
-	label?: string;
+	label?: string | undefined;
 	/** Router link for items with `href`; defaults to the AuraProvider's `linkComponent`, then `<a>`. */
-	linkComponent?: React$1.ElementType;
+	linkComponent?: React$1.ElementType | undefined;
 	/** Icon-only rail (`aura-sidenav-rail-width`, 64px). Labels show as tooltips and stay the accessible names; a group
 	 * expands the rail when clicked. Controlled; pair with `onCollapsedChange`. */
-	collapsed?: boolean;
+	collapsed?: boolean | undefined;
 	/** Starting state when `collapsed` isn't controlled. Default false. */
-	defaultCollapsed?: boolean;
+	defaultCollapsed?: boolean | undefined;
 	/** Called by the toggle button, and by a group clicked in the rail (with `false`). Save it to keep the choice. */
-	onCollapsedChange?: (collapsed: boolean) => void;
+	onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
 	/** Adds a collapse / expand button at the bottom. AppShell hides it in its phone drawer. */
-	collapsible?: boolean;
-	className?: string;
+	collapsible?: boolean | undefined;
+	className?: string | undefined;
 }
 export interface BreadcrumbProps {
 	/** Root first; the last item is the current page. */
 	items: Array<{
 		label: string;
-		href?: string;
-		onClick?: () => void;
+		href?: string | undefined;
+		onClick?: (() => void) | undefined;
 	}>;
-	label?: string;
-	className?: string;
+	label?: string | undefined;
+	className?: string | undefined;
 }
 export interface AvatarProps {
 	/** Accessible name; also gives the initials and a stable colour. */
 	name: string;
-	src?: string;
+	src?: string | undefined;
 	/** `sm` 24 · `md` 32 (default) · `lg` 40. */
-	size?: "sm" | "md" | "lg";
-	status?: "online";
-	className?: string;
+	size?: "sm" | "md" | "lg" | undefined;
+	status?: "online" | undefined;
+	className?: string | undefined;
 }
 export interface DropdownMenuProps {
 	/** One element — usually a Button or IconButton. It gets aria-haspopup, aria-expanded and the click handler. */
 	trigger: React$1.ReactElement;
 	items: MenuItem[];
 	/** Accessible name for the menu. */
-	label?: string;
+	label?: string | undefined;
 }
 export interface ComboboxOption {
 	value: string;
 	label: string;
 	/** Second line in the list; also searched. */
-	description?: string;
+	description?: string | undefined;
 	/** Extra search terms (English name, phone, code…). */
-	keywords?: string[];
-	disabled?: boolean;
+	keywords?: string[] | undefined;
+	disabled?: boolean | undefined;
 	/** Leading icon in the list. */
-	icon?: IconInput;
+	icon?: IconInput | undefined;
 }
 /** 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;
+	value?: string[] | undefined;
+	defaultValue?: string[] | undefined;
+	onChange?: ((value: string[]) => void) | undefined;
 	/** Clear-all button while anything is selected. Default true. */
-	clearable?: boolean;
+	clearable?: boolean | undefined;
 	/** Most picks allowed; further options are disabled. */
-	max?: number;
+	max?: number | undefined;
 }
 export interface ComboboxProps extends FieldProps {
 	options: Array<ComboboxOption | string>;
 	/** Selected option value (controlled). */
-	value?: string | null;
-	defaultValue?: string | null;
-	onChange?: (value: string | null) => void;
-	id?: string;
-	name?: string;
-	placeholder?: string;
-	disabled?: boolean;
-	readOnly?: boolean;
+	value?: string | null | undefined;
+	defaultValue?: string | null | undefined;
+	onChange?: ((value: string | null) => void) | undefined;
+	id?: string | undefined;
+	name?: string | undefined;
+	placeholder?: string | undefined;
+	disabled?: boolean | undefined;
+	readOnly?: boolean | undefined;
 	/** Leading icon. Default `search`. */
-	icon?: IconInput;
+	icon?: IconInput | undefined;
 	/** Clear button while a value is selected (Escape clears too). Default true. */
-	clearable?: boolean;
+	clearable?: boolean | undefined;
 	/** Server-side search: called with the typed text; the component stops filtering and shows `options` as given. */
-	onSearch?: (query: string) => void;
-	loading?: boolean;
-	loadingText?: string;
-	emptyText?: string;
+	onSearch?: ((query: string) => void) | undefined;
+	loading?: boolean | undefined;
+	loadingText?: string | undefined;
+	emptyText?: string | undefined;
 	/** Max options rendered. Default 200 — narrow with typing beyond that. */
-	limit?: number;
+	limit?: number | undefined;
 	/** Replace the Thai-aware default filter (label, description, keywords). */
-	filter?: (option: ComboboxOption, query: string) => boolean;
-	className?: string;
+	filter?: ((option: ComboboxOption, query: string) => boolean) | undefined;
+	className?: string | undefined;
 }
 /** 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;
+	value?: number | null | undefined;
+	defaultValue?: number | null | undefined;
 	/** 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;
+	onChange?: ((value: number | null) => void) | undefined;
+	min?: number | undefined;
+	max?: number | undefined;
 	/** Arrow keys and buttons move by this. Default 1. PageUp/PageDown move 10×. */
-	step?: number;
+	step?: number | undefined;
 	/** Decimal places shown and kept. Default: 0 when step is whole, else step's decimals. */
-	decimals?: number;
+	decimals?: number | undefined;
 	/** Text before the number, e.g. `฿`. */
-	prefix?: React$1.ReactNode;
+	prefix?: React$1.ReactNode | undefined;
 	/** Text after the number, e.g. `%` or `ชิ้น`. */
-	suffix?: React$1.ReactNode;
+	suffix?: React$1.ReactNode | undefined;
 	/** +/− 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>;
+	stepper?: boolean | undefined;
+	id?: string | undefined;
+	name?: string | undefined;
+	placeholder?: string | undefined;
+	disabled?: boolean | undefined;
+	readOnly?: boolean | undefined;
+	className?: string | undefined;
+	onBlur?: React$1.FocusEventHandler<HTMLInputElement> | undefined;
 }
 /** 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;
+	description?: React$1.ReactNode | undefined;
 }
 /** Progress through a multi-step flow (wizard, checkout, booking). */
 export interface StepperProps {
@@ -655,313 +661,313 @@ export interface StepperProps {
 	/** 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;
+	label?: string | undefined;
 	/** Makes completed steps buttons that go back to them. Upcoming steps never are. */
-	onStepClick?: (id: string) => void;
+	onStepClick?: ((id: string) => void) | undefined;
 	/** Default `horizontal`. Below `sm` a horizontal stepper shows only the current step ("Step 2 of 4"). */
-	orientation?: "horizontal" | "vertical";
-	className?: string;
+	orientation?: "horizontal" | "vertical" | undefined;
+	className?: string | undefined;
 }
 export interface SegmentedOption {
 	value: string;
 	label: string;
-	icon?: IconInput;
+	icon?: IconInput | undefined;
 	/** Show only the icon; `label` becomes its accessible name and tooltip. */
-	iconOnly?: boolean;
-	disabled?: boolean;
+	iconOnly?: boolean | undefined;
+	disabled?: boolean | undefined;
 }
 /** 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;
+	value?: string | undefined;
+	defaultValue?: string | undefined;
+	onChange?: ((value: string) => void) | undefined;
 	/** `md` (default, 36px) or `sm` (28px) for toolbars. */
-	size?: "sm" | "md";
+	size?: "sm" | "md" | undefined;
 	/** Stretch across the container, segments equal width. */
-	fullWidth?: boolean;
-	disabled?: boolean;
-	id?: string;
-	className?: string;
+	fullWidth?: boolean | undefined;
+	disabled?: boolean | undefined;
+	id?: string | undefined;
+	className?: string | undefined;
 }
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
 	/** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `th` unless given. */
-	locale?: "th" | "en" | "sv";
+	locale?: "th" | "en" | "sv" | undefined;
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
-	calendar?: "buddhist" | "gregory";
+	calendar?: "buddhist" | "gregory" | undefined;
 }
 export interface CalendarProps extends DateDisplayOptions {
-	start?: ISODate | null;
-	end?: ISODate | null;
-	focus?: ISODate | null;
-	range?: boolean;
-	min?: ISODate;
-	max?: ISODate;
-	isDateDisabled?: (iso: ISODate) => boolean;
+	start?: ISODate | null | undefined;
+	end?: ISODate | null | undefined;
+	focus?: ISODate | null | undefined;
+	range?: boolean | undefined;
+	min?: ISODate | undefined;
+	max?: ISODate | undefined;
+	isDateDisabled?: ((iso: ISODate) => boolean) | undefined;
 	/** 0 = Sunday (Thai default), 1 = Monday. */
-	weekStartsOn?: 0 | 1;
-	onSelect?: (iso: ISODate | null) => void;
+	weekStartsOn?: 0 | 1 | undefined;
+	onSelect?: ((iso: ISODate | null) => void) | undefined;
 	/** Adds a Clear link to the footer. */
-	onClear?: () => void;
+	onClear?: (() => void) | undefined;
 	/** false hides the Today / Clear footer. */
-	footer?: boolean;
+	footer?: boolean | undefined;
 	/** Default true: focuses the selected (or today's) day on mount. */
-	autoFocus?: boolean;
+	autoFocus?: boolean | undefined;
 }
 export interface DateFieldProps extends FieldProps, DateDisplayOptions {
-	id?: string;
-	name?: string;
-	placeholder?: string;
-	disabled?: boolean;
+	id?: string | undefined;
+	name?: string | undefined;
+	placeholder?: string | undefined;
+	disabled?: boolean | undefined;
 	/** Clear button while there is a value. Default true. */
-	clearable?: boolean;
-	min?: ISODate;
-	max?: ISODate;
-	isDateDisabled?: (iso: ISODate) => boolean;
-	weekStartsOn?: 0 | 1;
-	className?: string;
+	clearable?: boolean | undefined;
+	min?: ISODate | undefined;
+	max?: ISODate | undefined;
+	isDateDisabled?: ((iso: ISODate) => boolean) | undefined;
+	weekStartsOn?: 0 | 1 | undefined;
+	className?: string | undefined;
 }
 export interface DatePickerProps extends DateFieldProps {
-	value?: ISODate | null;
-	defaultValue?: ISODate | null;
-	onChange?: (value: ISODate | null) => void;
+	value?: ISODate | null | undefined;
+	defaultValue?: ISODate | null | undefined;
+	onChange?: ((value: ISODate | null) => void) | undefined;
 }
 export interface DateRange {
 	start: ISODate | null;
 	end: ISODate | null;
 }
 export interface DateRangePickerProps extends DateFieldProps {
-	value?: DateRange;
-	defaultValue?: DateRange;
-	onChange?: (value: DateRange) => void;
+	value?: DateRange | undefined;
+	defaultValue?: DateRange | undefined;
+	onChange?: ((value: DateRange) => void) | undefined;
 }
 export interface DrawerProps {
 	open: boolean;
 	onClose: () => void;
 	/** Default `right`. */
-	side?: "right" | "left";
+	side?: "right" | "left" | undefined;
 	/** sm 360 · md 480 (default) · lg 640 · nav = SideNav width. Full width below 640px. */
-	size?: "sm" | "md" | "lg" | "nav";
-	title?: string;
-	description?: React$1.ReactNode;
-	children?: React$1.ReactNode;
+	size?: "sm" | "md" | "lg" | "nav" | undefined;
+	title?: string | undefined;
+	description?: React$1.ReactNode | undefined;
+	children?: React$1.ReactNode | undefined;
 	/** Buttons, right-aligned; stacked on phones. */
-	footer?: React$1.ReactNode;
+	footer?: React$1.ReactNode | undefined;
 	/** Scrim click and Escape close it. Default true. */
-	dismissible?: boolean;
+	dismissible?: boolean | undefined;
 	/** Default true: focus moves to the element with `data-autofocus`, else the first control in the body. False only for static demos. */
-	autoFocus?: boolean;
+	autoFocus?: boolean | undefined;
 	/** Needed when there is no title. */
-	"aria-label"?: string;
-	className?: string;
+	"aria-label"?: string | undefined;
+	className?: string | undefined;
 }
 export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";
 export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
 /** Spacing step (aura-space-N) or any CSS length. */
 export type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | string;
 export interface StackProps {
-	direction?: Responsive<"row" | "column">;
-	gap?: Responsive<Space>;
+	direction?: Responsive<"row" | "column"> | undefined;
+	gap?: Responsive<Space> | undefined;
 	/** Cross-axis alignment; responsive like direction ({ base: 'stretch', sm: 'flex-end' }). */
-	align?: Responsive<React$1.CSSProperties["alignItems"]>;
-	justify?: React$1.CSSProperties["justifyContent"];
-	wrap?: boolean;
-	as?: keyof React$1.JSX.IntrinsicElements;
-	className?: string;
-	style?: React$1.CSSProperties;
-	children?: React$1.ReactNode;
+	align?: Responsive<React$1.CSSProperties["alignItems"]> | undefined;
+	justify?: React$1.CSSProperties["justifyContent"] | undefined;
+	wrap?: boolean | undefined;
+	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+	children?: React$1.ReactNode | undefined;
 }
 export interface GridProps {
-	columns?: Responsive<number>;
+	columns?: Responsive<number> | undefined;
 	/** Fit as many columns as there is room for, each at least this wide (px). Overrides columns. */
-	minItemWidth?: number;
-	gap?: Responsive<Space>;
-	as?: keyof React$1.JSX.IntrinsicElements;
-	className?: string;
-	style?: React$1.CSSProperties;
-	children?: React$1.ReactNode;
+	minItemWidth?: number | undefined;
+	gap?: Responsive<Space> | undefined;
+	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+	children?: React$1.ReactNode | undefined;
 }
 export interface AppShellProps {
 	/** Usually a SideNav. Fixed from 1024px up; in a Drawer behind a menu button below. */
-	nav?: React$1.ReactElement;
+	nav?: React$1.ReactElement | undefined;
 	/** Top bar content (title, search, account menu). */
-	header?: React$1.ReactNode;
-	children?: React$1.ReactNode;
-	navLabel?: string;
-	menuLabel?: string;
+	header?: React$1.ReactNode | undefined;
+	children?: React$1.ReactNode | undefined;
+	navLabel?: string | undefined;
+	menuLabel?: string | undefined;
 	/** id of `<main>`, for a skip link. Default `main`. */
-	mainId?: string;
-	className?: string;
+	mainId?: string | undefined;
+	className?: string | undefined;
 }
 export interface StatChange {
 	/** Shown as written, e.g. "+12%" or "−3". */
 	value: React$1.ReactNode;
-	direction?: "up" | "down" | "flat";
+	direction?: "up" | "down" | "flat" | undefined;
 	/** Default: up = positive, down = negative. Set it when a rise is bad (cancellations, wait time). */
-	tone?: "positive" | "negative" | "neutral";
+	tone?: "positive" | "negative" | "neutral" | undefined;
 	/** e.g. "vs last month". */
-	label?: React$1.ReactNode;
+	label?: React$1.ReactNode | undefined;
 }
 export interface StatProps {
 	label: React$1.ReactNode;
-	value?: React$1.ReactNode;
+	value?: React$1.ReactNode | undefined;
 	/** Small unit after the value ("งาน", "คน", "%"). */
-	unit?: React$1.ReactNode;
-	change?: StatChange;
-	caption?: React$1.ReactNode;
-	icon?: IconInput;
+	unit?: React$1.ReactNode | undefined;
+	change?: StatChange | undefined;
+	caption?: React$1.ReactNode | undefined;
+	icon?: IconInput | undefined;
 	/** Skeleton in place of the value. */
-	loading?: boolean;
+	loading?: boolean | undefined;
 	/** Makes the whole card a link or a button (drill-down). */
-	href?: string;
-	onClick?: () => void;
-	className?: string;
+	href?: string | undefined;
+	onClick?: (() => void) | undefined;
+	className?: string | undefined;
 }
 export interface TimePickerProps extends FieldProps {
 	/** "HH:mm", 24-hour. */
-	value?: string | null;
-	defaultValue?: string | null;
-	onChange?: (value: string | null) => void;
+	value?: string | null | undefined;
+	defaultValue?: string | null | undefined;
+	onChange?: ((value: string | null) => void) | undefined;
 	/** Minutes between listed slots. Default 30. */
-	step?: number;
+	step?: number | undefined;
 	/** Earliest and latest allowed times, "HH:mm". Typed times outside them are refused with a message. */
-	min?: string;
-	max?: string;
-	isTimeDisabled?: (time: string) => boolean;
+	min?: string | undefined;
+	max?: string | undefined;
+	isTimeDisabled?: ((time: string) => boolean) | undefined;
 	/** Slot to scroll to when empty (e.g. "09:00"). Default: min. */
-	suggest?: string;
+	suggest?: string | undefined;
 	/** Clear button while there is a value. Default true. */
-	clearable?: boolean;
-	id?: string;
-	name?: string;
-	placeholder?: string;
-	disabled?: boolean;
-	readOnly?: boolean;
-	className?: string;
+	clearable?: boolean | undefined;
+	id?: string | undefined;
+	name?: string | undefined;
+	placeholder?: string | undefined;
+	disabled?: boolean | undefined;
+	readOnly?: boolean | undefined;
+	className?: string | undefined;
 }
 export interface UploadItem {
 	id: string;
 	/** The browser File (absent for files already on the server). */
-	file?: File;
+	file?: File | undefined;
 	name: string;
-	size?: number;
-	type?: string;
+	size?: number | undefined;
+	type?: string | undefined;
 	/** ready = picked, not sent yet. Set uploading/done yourself while sending. */
 	status: "ready" | "uploading" | "done" | "error";
 	/** 0–100 while uploading. */
-	progress?: number;
-	error?: string;
+	progress?: number | undefined;
+	error?: string | undefined;
 	/** For files already stored (edit forms). */
-	url?: string;
+	url?: string | undefined;
 }
 export interface FileUploadProps extends FieldProps {
-	value?: UploadItem[];
-	defaultValue?: UploadItem[];
-	onChange?: (items: UploadItem[]) => void;
-	onRemove?: (item: UploadItem) => void;
+	value?: UploadItem[] | undefined;
+	defaultValue?: UploadItem[] | undefined;
+	onChange?: ((items: UploadItem[]) => void) | undefined;
+	onRemove?: ((item: UploadItem) => void) | undefined;
 	/** Same syntax as `<input accept>`: "image/*,.pdf". Checked on drop too. */
-	accept?: string;
-	multiple?: boolean;
+	accept?: string | undefined;
+	multiple?: boolean | undefined;
 	/** Bytes per file. */
-	maxSize?: number;
+	maxSize?: number | undefined;
 	/** With multiple. */
-	maxFiles?: number;
-	id?: string;
-	name?: string;
-	disabled?: boolean;
-	className?: string;
+	maxFiles?: number | undefined;
+	id?: string | undefined;
+	name?: string | undefined;
+	disabled?: boolean | undefined;
+	className?: string | undefined;
 }
 export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
 export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
-	tone?: Tone;
+	tone?: Tone | undefined;
 	/** soft (default) · solid · outline */
-	variant?: "soft" | "solid" | "outline";
-	icon?: IconInput;
+	variant?: "soft" | "solid" | "outline" | undefined;
+	icon?: IconInput | undefined;
 }
 export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
 	children: React$1.ReactNode;
-	icon?: IconInput;
+	icon?: IconInput | undefined;
 	/** Adds a remove button (applied filters, chosen people). */
-	onRemove?: () => void;
-	removeLabel?: string;
+	onRemove?: (() => void) | undefined;
+	removeLabel?: string | undefined;
 	/** Makes it a toggle chip (filter chips): renders a button with aria-pressed. */
-	selected?: boolean;
-	onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
-	disabled?: boolean;
+	selected?: boolean | undefined;
+	onClick?: ((e: React$1.MouseEvent<HTMLButtonElement>) => void) | undefined;
+	disabled?: boolean | undefined;
 }
 export interface ProgressProps {
 	/** Omit for indeterminate. */
-	value?: number;
-	max?: number;
-	label?: React$1.ReactNode;
-	"aria-label"?: string;
-	showValue?: boolean;
+	value?: number | undefined;
+	max?: number | undefined;
+	label?: React$1.ReactNode | undefined;
+	"aria-label"?: string | undefined;
+	showValue?: boolean | undefined;
 	/** Replaces the % text, e.g. "3 of 5 files". Also read out as aria-valuetext. */
-	valueLabel?: React$1.ReactNode;
-	hint?: React$1.ReactNode;
-	tone?: Tone;
-	size?: "sm" | "md";
-	id?: string;
-	className?: string;
+	valueLabel?: React$1.ReactNode | undefined;
+	hint?: React$1.ReactNode | undefined;
+	tone?: Tone | undefined;
+	size?: "sm" | "md" | undefined;
+	id?: string | undefined;
+	className?: string | undefined;
 }
 export interface SkeletonProps {
-	variant?: "text" | "rect" | "circle";
+	variant?: "text" | "rect" | "circle" | undefined;
 	/** text only: number of lines (the last is shorter). */
-	lines?: number;
-	width?: number | string;
-	height?: number | string;
+	lines?: number | undefined;
+	width?: number | string | undefined;
+	height?: number | string | undefined;
 	/** circle diameter. */
-	size?: number;
-	className?: string;
+	size?: number | undefined;
+	className?: string | undefined;
 }
 export interface EmptyStateProps {
 	title: React$1.ReactNode;
-	description?: React$1.ReactNode;
-	icon?: IconInput;
+	description?: React$1.ReactNode | undefined;
+	icon?: IconInput | undefined;
 	/** One or two buttons. */
-	action?: React$1.ReactNode;
-	size?: "sm" | "md";
-	bordered?: boolean;
-	headingLevel?: 2 | 3 | 4 | 5 | 6;
-	className?: string;
+	action?: React$1.ReactNode | undefined;
+	size?: "sm" | "md" | undefined;
+	bordered?: boolean | undefined;
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	className?: string | undefined;
 }
 export interface PaginationProps {
 	pageCount: number;
 	/** 1-based, controlled; pair with onChange. Or defaultPage. */
-	page?: number;
-	defaultPage?: number;
-	onChange?: (page: number) => void;
+	page?: number | undefined;
+	defaultPage?: number | undefined;
+	onChange?: ((page: number) => void) | undefined;
 	/** Pages shown each side of the current one. Default 1. */
-	siblingCount?: number;
+	siblingCount?: number | undefined;
 	/** Render real links (SEO, open in new tab); onChange still runs for client routing. */
-	getHref?: (page: number) => string;
-	label?: string;
-	className?: string;
+	getHref?: ((page: number) => string) | undefined;
+	label?: string | undefined;
+	className?: string | undefined;
 }
 export interface AccordionItem {
 	id: string;
 	title: React$1.ReactNode;
-	description?: React$1.ReactNode;
+	description?: React$1.ReactNode | undefined;
 	content: React$1.ReactNode;
-	icon?: IconInput;
-	disabled?: boolean;
+	icon?: IconInput | undefined;
+	disabled?: boolean | undefined;
 }
 export interface AccordionProps {
 	items: AccordionItem[];
 	/** single (default): one open at a time. multiple: any number. */
-	type?: "single" | "multiple";
-	value?: string | null | string[];
-	defaultValue?: string | null | string[];
-	onChange?: (value: any) => void;
+	type?: "single" | "multiple" | undefined;
+	value?: string | null | string[] | undefined;
+	defaultValue?: string | null | string[] | undefined;
+	onChange?: ((value: any) => void) | undefined;
 	/** single only: false keeps one section always open. Default true. */
-	collapsible?: boolean;
-	headingLevel?: 2 | 3 | 4 | 5 | 6;
-	id?: string;
-	className?: string;
+	collapsible?: boolean | undefined;
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	id?: string | undefined;
+	className?: string | undefined;
 }
 export interface PopoverProps {
 	/** One element; it gets aria-haspopup, aria-expanded and the click toggle. */
@@ -969,27 +975,27 @@ export interface PopoverProps {
 	children: React$1.ReactNode | ((api: {
 		close: () => void;
 	}) => React$1.ReactNode);
-	title?: React$1.ReactNode;
+	title?: React$1.ReactNode | undefined;
 	/** Accessible name when there is no title. */
-	label?: string;
-	open?: boolean;
-	defaultOpen?: boolean;
-	onOpenChange?: (open: boolean) => void;
-	placement?: "bottom-start" | "bottom-end" | "bottom-center" | "top-start" | "top-end" | "top-center";
-	width?: number | string;
+	label?: string | undefined;
+	open?: boolean | undefined;
+	defaultOpen?: boolean | undefined;
+	onOpenChange?: ((open: boolean) => void) | undefined;
+	placement?: "bottom-start" | "bottom-end" | "bottom-center" | "top-start" | "top-end" | "top-center" | undefined;
+	width?: number | string | undefined;
 	/** Default true: focus moves to [data-autofocus] or the first control inside. */
-	autoFocus?: boolean;
-	id?: string;
-	className?: string;
+	autoFocus?: boolean | undefined;
+	id?: string | undefined;
+	className?: string | undefined;
 }
 export interface ThemeOptions {
 	/** The project's brand colour, #rgb or #rrggbb. Replaces AURA violet (links, focus ring, selection, info, progress, creative shadow in dark, mesh). */
 	brand: string;
 	/** Optional signal colour; replaces AURA lime in the accent dot and mesh only (success/ready stay green). */
-	signal?: string;
+	signal?: string | undefined;
 	/** ink (default): primary buttons stay zinc ink. brand: primary buttons use the brand colour. */
-	primary?: "ink" | "brand";
-	name?: string;
+	primary?: "ink" | "brand" | undefined;
+	name?: string | undefined;
 }
 export interface ThemeCheck {
 	theme: "light" | "dark";
@@ -1022,7 +1028,7 @@ export declare const iconNames: IconName[];
 export interface ButtonComponent {
 	(props: ButtonLinkProps & React$1.RefAttributes<HTMLAnchorElement>): React$1.ReactElement | null;
 	(props: ButtonProps & React$1.RefAttributes<HTMLButtonElement>): React$1.ReactElement | null;
-	displayName?: string;
+	displayName?: string | undefined;
 }
 /** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only.
  * With `href` it renders a link that looks the same (`<a>`, or your router's link via `linkComponent`). */
@@ -1039,15 +1045,15 @@ export declare const StatusPill: React$1.ForwardRefExoticComponent<StatusPillPro
 /** Field: label, required/optional marks, the control, then the hint or error line. Wrap a custom control in it. */
 export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 	/** Visible label. Omit only when the control is labelled another way. */
-	label?: React$1.ReactNode;
+	label?: React$1.ReactNode | undefined;
 	/** The control's id: the label points at it, and the hint/error ids derive from it. */
-	id?: string;
-	children?: React$1.ReactNode;
+	id?: string | undefined;
+	children?: React$1.ReactNode | undefined;
 	/** Render the label as another element (e.g. `span` for a group of controls) with this id. */
-	labelAs?: string;
-	labelId?: string;
-	disabled?: boolean;
-	className?: string;
+	labelAs?: string | undefined;
+	labelId?: string | undefined;
+	disabled?: boolean | undefined;
+	className?: string | undefined;
 }
 export declare const Field: React$1.ForwardRefExoticComponent<FieldComponentProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps & React$1.RefAttributes<HTMLInputElement>>;
@@ -1059,7 +1065,7 @@ export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & Rea
 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;
+	displayName?: string | undefined;
 }
 /** The Thai-aware default filter: label, description and keywords contain the query. */
 declare function defaultFilter(option: ComboboxOption, query: string): boolean;
@@ -1067,7 +1073,7 @@ declare function defaultFilter(option: ComboboxOption, query: string): boolean;
 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;
+	format?: "short" | "long" | "numeric" | Intl.DateTimeFormatOptions | undefined;
 };
 /** Format an ISO date for display, e.g. "18 ก.ย. 2569" (th, Buddhist) or "18 Sept 2026" (en, Gregorian). */
 export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
@@ -1093,7 +1099,7 @@ export declare namespace toast {
 }
 export interface ToasterProps {
 	/** Default `bottom`. */
-	position?: "bottom" | "top";
+	position?: "bottom" | "top" | undefined;
 }
 export declare function Toaster(props: ToasterProps): React$1.ReactElement | null;
 export declare const PasswordField: React$1.ForwardRefExoticComponent<PasswordFieldProps & React$1.RefAttributes<HTMLInputElement>>;
@@ -1119,15 +1125,17 @@ export declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1
 /** Centred page column. */
 export interface ContainerProps {
 	/** `narrow` caps it at aura-container-narrow (720px). Default `default` (1280px). */
-	size?: "default" | "narrow";
-	as?: keyof React$1.JSX.IntrinsicElements;
-	className?: string;
-	style?: React$1.CSSProperties;
-	children?: React$1.ReactNode;
+	size?: "default" | "narrow" | undefined;
+	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	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>>;
-/** AppShell — side navigation + top bar + content. The nav is fixed from lg (1024px) up and a Drawer below it. */
+/** 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. */
 export declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Min-width breakpoints in px, mirroring the aura-bp-* tokens. */
 export declare const breakpoints: {
@@ -1230,9 +1238,9 @@ export interface AuraLocaleValue {
 	calendar: "buddhist" | "gregory" | null;
 	strings: AuraStrings;
 	/** The router link set on AuraProvider, if any. */
-	linkComponent?: React$1.ElementType | null;
+	linkComponent?: React$1.ElementType | null | undefined;
 	/** The density set on the nearest AuraProvider that sets one (null: none, i.e. comfortable unless an ancestor's data-density says otherwise). */
-	density?: "comfortable" | "compact" | null;
+	density?: "comfortable" | "compact" | null | undefined;
 }
 /** Sets the language of built-in labels (and the default date locale) for everything inside. */
 export declare function AuraProvider(props: AuraProviderProps): React$1.ReactElement;
@@ -1258,23 +1266,23 @@ declare function scale(hex: string): Theme["brand"];
 export declare function createTheme(opts: ThemeOptions): Theme;
 export interface ThemeStyleProps extends ThemeOptions {
 	/** Scope the theme to this selector instead of the whole page (multi-tenant). */
-	selector?: string;
+	selector?: string | undefined;
 }
 export declare function ThemeStyle(props: ThemeStyleProps): React$1.ReactElement;
 /** `system` follows the operating system and changes with it. */
 export type ColorScheme = "light" | "dark" | "system";
 export interface ColorSchemeOptions {
 	/** localStorage key for the choice. Default `aura-color-scheme`. */
-	storageKey?: string;
+	storageKey?: string | undefined;
 	/** Used when nothing is saved. Default `system`. */
-	defaultScheme?: ColorScheme;
+	defaultScheme?: ColorScheme | undefined;
 }
 /** 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 & {
 	/** Nonce for a nonce-based Content-Security-Policy (script-src 'nonce-…'). */
-	nonce?: string;
+	nonce?: string | undefined;
 }): React$1.ReactElement;
 /** Current colour scheme and a setter. `resolved` is what is on screen (system resolved to light or dark). */
 export interface ColorSchemeState {
@@ -1286,7 +1294,7 @@ export interface ColorSchemeState {
 export declare function useColorScheme(options?: ColorSchemeOptions): ColorSchemeState;
 export interface ColorSchemeToggleProps extends ColorSchemeOptions {
 	/** Accessible name of the button. Default: the built-in "Colour scheme" label. */
-	label?: string;
+	label?: string | undefined;
 }
 /** Icon button with a menu: Light, Dark, System. Shows a sun or a moon for what is on screen. */
 export declare function ColorSchemeToggle(props: ColorSchemeToggleProps): React$1.ReactElement;