@jirawatpyk/aura-react 4.8.0 → 4.9.0

package/dist/esm/NumberField.js

@@ -0,0 +1,175 @@
+'use client';
+import * as React from "react";
+import { Field, describedBy } from "./Field.js";
+import { Icon } from "./Icon.js";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+import { useStrings } from "./locale.js";
+function decimalsOf(n) {
+  const s = String(n);
+  const i = s.indexOf(".");
+  return i < 0 ? 0 : s.length - i - 1;
+}
+function parse(text) {
+  const s = text.replace(/[,\s ]/g, "");
+  if (!/^-?(\d+\.?\d*|\.\d+)$/.test(s)) return NaN;
+  return Number(s);
+}
+const NumberField = React.forwardRef(function NumberField2(props, ref) {
+  const t = useStrings();
+  const auto = uid(), id = props.id || auto;
+  const step = props.step || 1;
+  const decimals = props.decimals != null ? props.decimals : decimalsOf(step);
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue == null ? null : props.defaultValue,
+    props.onChange
+  );
+  const value = st[0], setValue = st[1];
+  const draftState = React.useState(null), draft = draftState[0], setDraft = draftState[1];
+  function fmt(n) {
+    if (n == null || isNaN(n)) return "";
+    return n.toLocaleString("en", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+  }
+  function fit(n) {
+    let v = n;
+    if (props.min != null && v < props.min) v = props.min;
+    if (props.max != null && v > props.max) v = props.max;
+    const f = Math.pow(10, decimals);
+    return Math.round(v * f) / f;
+  }
+  function nudge(by) {
+    if (props.disabled || props.readOnly) return;
+    const base = value == null ? props.min != null && props.min > 0 ? props.min - by : 0 : value;
+    const next = fit(base + by);
+    setValue(next);
+    setDraft(null);
+  }
+  function onKeyDown(e) {
+    const k = e.key;
+    let by = 0;
+    if (k === "ArrowUp") by = step;
+    else if (k === "ArrowDown") by = -step;
+    else if (k === "PageUp") by = step * 10;
+    else if (k === "PageDown") by = -step * 10;
+    else if (k === "Home" && props.min != null) {
+      e.preventDefault();
+      setValue(props.min);
+      setDraft(null);
+      return;
+    } else if (k === "End" && props.max != null) {
+      e.preventDefault();
+      setValue(props.max);
+      setDraft(null);
+      return;
+    }
+    if (by) {
+      e.preventDefault();
+      nudge(by);
+    }
+  }
+  const atMin = value != null && props.min != null && value <= props.min;
+  const atMax = value != null && props.max != null && value >= props.max;
+  const affixText = function(x) {
+    return typeof x === "string" || typeof x === "number" ? String(x) : "";
+  };
+  const valueText = value == null ? void 0 : [affixText(props.prefix), fmt(value), affixText(props.suffix)].join(" ").trim();
+  const stepper = props.stepper !== false && !props.readOnly;
+  return /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-number", stepper && "has-stepper") }, props.prefix != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.prefix) : null, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ref,
+        id,
+        type: "text",
+        role: "spinbutton",
+        inputMode: decimals > 0 || props.min != null && props.min < 0 ? "decimal" : "numeric",
+        autoComplete: "off",
+        className: "aura-input__control",
+        name: props.name,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        required: props.required,
+        "aria-valuenow": value == null ? void 0 : value,
+        "aria-valuemin": props.min,
+        "aria-valuemax": props.max,
+        "aria-valuetext": valueText,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props),
+        value: draft != null ? draft : fmt(value),
+        onFocus: function() {
+          setDraft(fmt(value));
+        },
+        onChange: function(e) {
+          const text = e.target.value;
+          setDraft(text);
+          if (!text.trim()) setValue(null);
+          else {
+            const n = parse(text);
+            if (!isNaN(n)) setValue(n);
+          }
+        },
+        onBlur: function(e) {
+          const n = draft == null ? value : !draft.trim() ? null : parse(draft);
+          if (n == null) {
+            if (value != null) setValue(null);
+          } else if (!isNaN(n)) {
+            const f = fit(n);
+            if (f !== value) setValue(f);
+          }
+          setDraft(null);
+          if (props.onBlur) props.onBlur(e);
+        },
+        onKeyDown
+      }
+    ), props.suffix != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-number__affix", "aria-hidden": true }, props.suffix) : null, stepper ? /* @__PURE__ */ React.createElement("span", { className: "aura-number__steps" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: "aura-number__step",
+        "aria-label": t.decrease,
+        "aria-controls": id,
+        disabled: props.disabled || atMin,
+        onPointerDown: function(e) {
+          e.preventDefault();
+        },
+        onClick: function() {
+          nudge(-step);
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "minus" })
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: "aura-number__step",
+        "aria-label": t.increase,
+        "aria-controls": id,
+        disabled: props.disabled || atMax,
+        onPointerDown: function(e) {
+          e.preventDefault();
+        },
+        onClick: function() {
+          nudge(step);
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "plus" })
+    )) : null)
+  );
+});
+export {
+  NumberField
+};

package/dist/esm/SegmentedControl.js

@@ -0,0 +1,104 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+function toOpt(o) {
+  return typeof o === "object" ? o : { value: o, label: o };
+}
+const SegmentedControl = React.forwardRef(
+  function SegmentedControl2(props, ref) {
+    const options = (props.options || []).map(toOpt);
+    const firstEnabled = options.filter(function(o) {
+      return !o.disabled;
+    })[0];
+    const st = useMaybeControlled(
+      props.value,
+      props.defaultValue != null ? props.defaultValue : firstEnabled ? firstEnabled.value : void 0,
+      props.onChange
+    );
+    const value = st[0], setValue = st[1];
+    const auto = uid(), id = props.id || auto;
+    const refs = React.useRef([]);
+    const selIdx = options.findIndex(function(o) {
+      return o.value === value;
+    });
+    const tabIdx = selIdx >= 0 && !options[selIdx].disabled ? selIdx : options.indexOf(firstEnabled);
+    function move(from, dir) {
+      const n = options.length;
+      for (let k = 1; k <= n; k++) {
+        const i = ((from + dir * k) % n + n) % n;
+        if (!options[i].disabled) {
+          setValue(options[i].value);
+          const el = refs.current[i];
+          if (el) el.focus();
+          return;
+        }
+      }
+    }
+    function onKeyDown(e, i) {
+      const k = e.key;
+      if (k === "ArrowRight" || k === "ArrowDown") {
+        e.preventDefault();
+        move(i, 1);
+      } else if (k === "ArrowLeft" || k === "ArrowUp") {
+        e.preventDefault();
+        move(i, -1);
+      } else if (k === "Home") {
+        e.preventDefault();
+        move(-1, 1);
+      } else if (k === "End") {
+        e.preventDefault();
+        move(options.length, -1);
+      }
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        id,
+        role: "radiogroup",
+        "aria-label": props.label,
+        "aria-disabled": props.disabled || void 0,
+        className: cx(
+          "aura-segmented",
+          props.size === "sm" && "aura-segmented--sm",
+          props.fullWidth && "is-full",
+          props.disabled && "is-disabled",
+          props.className
+        )
+      },
+      options.map(function(o, i) {
+        const on = o.value === value;
+        const off = props.disabled || o.disabled;
+        return /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            key: o.value,
+            ref: function(el) {
+              refs.current[i] = el;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": on,
+            "aria-label": o.iconOnly ? o.label : void 0,
+            title: o.iconOnly ? o.label : void 0,
+            tabIndex: i === tabIdx && !props.disabled ? 0 : -1,
+            disabled: off,
+            className: cx("aura-segmented__option", on && "is-selected", o.iconOnly && "is-icon"),
+            onClick: function() {
+              setValue(o.value);
+            },
+            onKeyDown: function(e) {
+              onKeyDown(e, i);
+            }
+          },
+          o.icon ? /* @__PURE__ */ React.createElement(Icon, { name: o.icon }) : null,
+          o.iconOnly ? null : /* @__PURE__ */ React.createElement("span", null, o.label)
+        );
+      })
+    );
+  }
+);
+export {
+  SegmentedControl
+};

package/dist/esm/Stepper.js

@@ -0,0 +1,54 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.js";
+const Stepper = React.forwardRef(function Stepper2(props, ref) {
+  const t = useStrings();
+  const steps = props.steps || [];
+  let at = -1;
+  steps.forEach(function(s, i) {
+    if (s.id === props.current) at = i;
+  });
+  if (at < 0) at = 0;
+  const vertical = props.orientation === "vertical";
+  const cur = steps[at];
+  return /* @__PURE__ */ React.createElement(
+    "nav",
+    {
+      ref,
+      "aria-label": props.label,
+      className: cx("aura-stepper", vertical ? "aura-stepper--vertical" : "aura-stepper--horizontal", props.className)
+    },
+    /* @__PURE__ */ React.createElement("ol", { className: "aura-stepper__list" }, steps.map(function(s, i) {
+      const state = i < at ? "done" : i === at ? "current" : "upcoming";
+      const marker = /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__marker", "aria-hidden": true }, state === "done" ? /* @__PURE__ */ React.createElement(Icon, { name: "check" }) : i + 1);
+      const text = /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__label" }, s.label, state === "done" ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, ", " + t.stepDone) : null), s.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__desc" }, s.description) : null);
+      const clickable = state === "done" && !!props.onStepClick;
+      return /* @__PURE__ */ React.createElement(
+        "li",
+        {
+          key: s.id,
+          className: cx("aura-stepper__item", "is-" + state),
+          "aria-current": state === "current" ? "step" : void 0
+        },
+        clickable ? /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            className: "aura-stepper__step aura-focusable",
+            onClick: function() {
+              props.onStepClick(s.id);
+            }
+          },
+          marker,
+          text
+        ) : /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__step" }, marker, text)
+      );
+    })),
+    !vertical && cur ? /* @__PURE__ */ React.createElement("p", { className: "aura-stepper__compact", "aria-hidden": true }, /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__count" }, t.stepOf(at + 1, steps.length)), /* @__PURE__ */ React.createElement("span", { className: "aura-stepper__compact-label" }, cur.label)) : null
+  );
+});
+export {
+  Stepper
+};

package/dist/esm/index.js

@@ -45,6 +45,9 @@ 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,
@@ -75,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/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/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;
@@ -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.8.0",
+  "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",