@jirawatpyk/aura-react 4.7.2 → 4.9.0

package/dist/esm/index.js

@@ -6,14 +6,29 @@ import { Menu } from "./Menu.js";
 import { DropdownMenu } from "./DropdownMenu.js";
 import { Checkbox } from "./Checkbox.js";
 import { StatusPill, statusTone } from "./StatusPill.js";
-import { Field, TextField, Textarea, Select, RadioGroup, Switch } from "./forms.js";
+import { Field } from "./Field.js";
+import { TextField } from "./TextField.js";
+import { Textarea } from "./Textarea.js";
+import { Select } from "./Select.js";
+import { RadioGroup } from "./RadioGroup.js";
+import { Switch } from "./Switch.js";
 import { Combobox, defaultFilter } from "./Combobox.js";
 import { DatePicker, DateRangePicker, Calendar, formatDate, parseDate } from "./DatePicker.js";
-import { Alert, Toaster, toast, Tooltip } from "./feedback.js";
+import { Alert } from "./Alert.js";
+import { Toaster, toast } from "./Toaster.js";
+import { Tooltip } from "./Tooltip.js";
 import { Dialog, Drawer } from "./Dialog.js";
 import { DataTable } from "./DataTable.js";
-import { Card, Tabs, SideNav, Breadcrumb, Avatar } from "./layout.js";
-import { Stack, Grid, Container, AppShell, useBreakpoint, useResponsive, breakpoints } from "./layout2.js";
+import { Card } from "./Card.js";
+import { Tabs } from "./Tabs.js";
+import { SideNav } from "./SideNav.js";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { Avatar } from "./Avatar.js";
+import { Stack } from "./Stack.js";
+import { Grid } from "./Grid.js";
+import { Container } from "./Container.js";
+import { AppShell } from "./AppShell.js";
+import { useBreakpoint, useResponsive, breakpoints } from "./responsive.js";
 import { Surface } from "./Surface.js";
 import { AuraProvider, useAuraLocale, STRINGS } from "./locale.js";
 import { Stat } from "./Stat.js";
@@ -22,7 +37,17 @@ import { FileUpload, formatBytes } from "./FileUpload.js";
 import { createTheme, contrast, scale } from "./theme.js";
 import { ThemeStyle } from "./ThemeStyle.js";
 import { ColorSchemeScript, ColorSchemeToggle, colorSchemeScript, useColorScheme } from "./colorScheme.js";
-import { Badge, Tag, Progress, Skeleton, EmptyState, Pagination, Accordion, Popover } from "./extra.js";
+import { Badge } from "./Badge.js";
+import { Tag } from "./Tag.js";
+import { Progress } from "./Progress.js";
+import { Skeleton } from "./Skeleton.js";
+import { EmptyState } from "./EmptyState.js";
+import { Pagination } from "./Pagination.js";
+import { Accordion } from "./Accordion.js";
+import { Popover } from "./Popover.js";
+import { NumberField } from "./NumberField.js";
+import { Stepper } from "./Stepper.js";
+import { SegmentedControl } from "./SegmentedControl.js";
 export {
   Accordion,
   Alert,
@@ -53,17 +78,20 @@ export {
   Icon,
   IconButton,
   Menu,
+  NumberField,
   Pagination,
   Popover,
   Progress,
   RadioGroup,
   STRINGS,
+  SegmentedControl,
   Select,
   SideNav,
   Skeleton,
   Stack,
   Stat,
   StatusPill,
+  Stepper,
   Surface,
   Switch,
   Tabs,

package/dist/esm/internal.js

@@ -79,12 +79,17 @@ function useMergedRef(a, b) {
     [a, b]
   );
 }
+const TONES = ["neutral", "accent", "success", "warning", "danger"];
+function tone(t) {
+  return TONES.indexOf(t) >= 0 ? t : "neutral";
+}
 export {
   FOCUSABLE,
   collator,
   compare,
   cx,
   omit,
+  tone,
   trapTab,
   uid,
   useIsoLayoutEffect,

package/dist/esm/locale.js

@@ -83,6 +83,12 @@ const STRINGS = {
       return "Up to " + n2 + " files";
     },
     colorScheme: "Colour scheme",
+    increase: "Increase",
+    decrease: "Decrease",
+    stepDone: "completed",
+    stepOf: function(i, total) {
+      return "Step " + i + " of " + total;
+    },
     schemeLight: "Light",
     schemeDark: "Dark",
     schemeSystem: "System",
@@ -175,6 +181,12 @@ const STRINGS = {
       return "\u0E41\u0E19\u0E1A\u0E44\u0E14\u0E49\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + n2 + " \u0E44\u0E1F\u0E25\u0E4C";
     },
     colorScheme: "\u0E42\u0E2B\u0E21\u0E14\u0E2A\u0E35",
+    increase: "\u0E40\u0E1E\u0E34\u0E48\u0E21",
+    decrease: "\u0E25\u0E14",
+    stepDone: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E41\u0E25\u0E49\u0E27",
+    stepOf: function(i, total) {
+      return "\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 " + i + " \u0E08\u0E32\u0E01 " + total;
+    },
     schemeLight: "\u0E2A\u0E27\u0E48\u0E32\u0E07",
     schemeDark: "\u0E21\u0E37\u0E14",
     schemeSystem: "\u0E15\u0E32\u0E21\u0E23\u0E30\u0E1A\u0E1A",

package/dist/esm/responsive.js

@@ -0,0 +1,50 @@
+'use client';
+import * as React from "react";
+const breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+const ORDER = ["base", "sm", "md", "lg", "xl"];
+function useBreakpoint() {
+  return React.useSyncExternalStore(subscribe, current, function() {
+    return "lg";
+  });
+}
+function current() {
+  let w = window.innerWidth, bp = "base";
+  ORDER.slice(1).forEach(function(k) {
+    if (w >= breakpoints[k]) bp = k;
+  });
+  return bp;
+}
+function subscribe(cb) {
+  window.addEventListener("resize", cb);
+  return function() {
+    window.removeEventListener("resize", cb);
+  };
+}
+function useResponsive(value) {
+  const bp = useBreakpoint();
+  if (value == null || typeof value !== "object") return value;
+  const map = value;
+  for (let i = ORDER.indexOf(bp); i >= 0; i--) if (map[ORDER[i]] !== void 0) return map[ORDER[i]];
+  return void 0;
+}
+function respVars(prefix, value, map) {
+  const style = {};
+  if (value == null) return style;
+  if (typeof value !== "object") value = { base: value };
+  let byBp = value, cur;
+  ORDER.forEach(function(k) {
+    if (byBp[k] !== void 0) cur = map ? map(byBp[k]) : byBp[k];
+    if (cur !== void 0) style["--" + prefix + "-" + k] = cur;
+  });
+  return style;
+}
+const space = function(v) {
+  return typeof v === "number" ? "var(--aura-space-" + v + ")" : v;
+};
+export {
+  breakpoints,
+  respVars,
+  space,
+  useBreakpoint,
+  useResponsive
+};

package/dist/index.d.ts

@@ -437,6 +437,18 @@ export interface ComboboxOption {
 	/** Leading icon in the list. */
 	icon?: IconName;
 }
+/** 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>;
 	/** Selected option value (controlled). */
@@ -463,6 +475,77 @@ 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?: IconName;
+	/** 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 {
@@ -832,10 +915,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;
@@ -870,6 +959,10 @@ export declare const Tabs: React$1.ForwardRefExoticComponent<TabsProps & React$1
 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>>;
+/** Stack — one direction, even gaps. direction and gap may be responsive: { base: 'column', md: 'row' }. */
+export declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLElement>>;
+/** Grid — equal columns. columns may be responsive ({ base: 1, md: 2, lg: 3 }), or use minItemWidth to fit as many as fit. */
+export declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLElement>>;
 /** Centred page column. */
 export interface ContainerProps {
 	/** `narrow` caps it at aura-container-narrow (720px). Default `default` (1280px). */
@@ -879,6 +972,10 @@ export interface ContainerProps {
 	style?: React$1.CSSProperties;
 	children?: React$1.ReactNode;
 }
+/** 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. */
+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: {
 	sm: 640;
@@ -890,14 +987,6 @@ export declare const breakpoints: {
 export declare function useBreakpoint(): Breakpoint;
 /** Pick a value for the current breakpoint from { base, sm, md, lg, xl } (falls back to the next smaller one). */
 export declare function useResponsive<T>(value: Responsive<T>): T | undefined;
-/** Stack — one direction, even gaps. direction and gap may be responsive: { base: 'column', md: 'row' }. */
-export declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLElement>>;
-/** Grid — equal columns. columns may be responsive ({ base: 1, md: 2, lg: 3 }), or use minItemWidth to fit as many as fit. */
-export declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLElement>>;
-/** 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. */
-export declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const Surface: React$1.ForwardRefExoticComponent<SurfaceProps & React$1.RefAttributes<HTMLElement>>;
 /** Every built-in label. Function entries build the text from their arguments. */
 export interface AuraStrings {
@@ -953,6 +1042,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;
@@ -1031,6 +1124,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

@@ -944,6 +944,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 +1052,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.7.2",
+  "version": "4.9.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",