@jirawatpyk/aura-react 4.9.0 → 4.11.0

package/dist/esm/locale.js

@@ -3,6 +3,9 @@ import * as React from "react";
 const n = function(x) {
   return Number(x).toLocaleString("en");
 };
+const nsv = function(x) {
+  return Number(x).toLocaleString("sv-SE");
+};
 const STRINGS = {
   en: {
     close: "Close",
@@ -199,6 +202,104 @@ const STRINGS = {
     accepts: function(list, max) {
       return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
     }
+  },
+  sv: {
+    close: "St\xE4ng",
+    dismiss: "St\xE4ng",
+    dismissToast: "St\xE4ng aviseringen",
+    notifications: "Aviseringar",
+    mainNav: "Huvudmeny",
+    breadcrumb: "Br\xF6dsmulor",
+    navigation: "Navigering",
+    openNav: "\xD6ppna menyn",
+    searching: "S\xF6ker\u2026",
+    noMatches: "Inga tr\xE4ffar",
+    clear: function(what) {
+      return "Rensa " + (what || "urvalet");
+    },
+    keepTyping: function(total) {
+      return "Skriv mer f\xF6r att begr\xE4nsa " + nsv(total) + " alternativ";
+    },
+    sortAsc: "Sortera stigande",
+    sortDesc: "Sortera fallande",
+    pin: "F\xE4st till v\xE4nster",
+    unpin: "Lossa kolumnen",
+    moveLeft: "Flytta v\xE4nster",
+    moveRight: "Flytta h\xF6ger",
+    hideColumn: "D\xF6lj kolumnen",
+    resetColumns: "\xC5terst\xE4ll kolumner",
+    selectRows: "V\xE4lj rader",
+    selectAllRows: "V\xE4lj alla rader",
+    deselectAllRows: "Avmarkera alla rader",
+    selectAll: "V\xE4lj alla",
+    selectRow: function(k) {
+      return "V\xE4lj " + k;
+    },
+    selectedCount: function(c) {
+      return nsv(c) + " valda";
+    },
+    pinned: "F\xE4st",
+    columnOptions: function(label) {
+      return "Alternativ f\xF6r kolumnen " + label;
+    },
+    column: function(label) {
+      return label ? "Kolumnen " + label : "Kolumn";
+    },
+    columns: "Kolumner",
+    showHideColumns: "Visa eller d\xF6lj kolumner",
+    empty: "Inget h\xE4r \xE4nnu",
+    loading: "Laddar\u2026",
+    loadingRows: "Laddar rader",
+    range: function(a, b, total) {
+      return a + "\u2013" + b + " av " + nsv(total);
+    },
+    page: function(p, total) {
+      return "Sida " + p + " av " + total;
+    },
+    prevPage: "F\xF6reg\xE5ende sida",
+    nextPage: "N\xE4sta sida",
+    rowCount: function(c) {
+      return nsv(c) + " rader";
+    },
+    actions: "\xC5tg\xE4rder",
+    optional: "valfritt",
+    timePlaceholder: "tt:mm",
+    timeInvalid: "Skriv en tid som 09:30",
+    timeOutOfRange: function(a, b) {
+      return "V\xE4lj en tid mellan " + a + " och " + b;
+    },
+    dropFiles: "Dra filer hit eller",
+    browse: "V\xE4lj filer",
+    browseOne: "V\xE4lj en fil",
+    remove: function(n2) {
+      return "Ta bort " + n2;
+    },
+    fileTooBig: function(max) {
+      return "St\xF6rre \xE4n " + max;
+    },
+    fileWrongType: "Den h\xE4r filtypen godtas inte",
+    tooManyFiles: function(n2) {
+      return "H\xF6gst " + n2 + " filer";
+    },
+    colorScheme: "F\xE4rgl\xE4ge",
+    increase: "\xD6ka",
+    decrease: "Minska",
+    stepDone: "klart",
+    stepOf: function(i, total) {
+      return "Steg " + i + " av " + total;
+    },
+    schemeLight: "Ljust",
+    schemeDark: "M\xF6rkt",
+    schemeSystem: "System",
+    uploading: "Laddar upp\u2026",
+    images: "Bilder",
+    pagination: "Sidnumrering",
+    pageN: function(p) {
+      return "Sida " + p;
+    },
+    accepts: function(list, max) {
+      return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
+    }
   }
 };
 const LocaleContext = React.createContext(null);
@@ -209,16 +310,21 @@ function AuraProvider(props) {
       return {
         locale: props.locale || "en",
         calendar: props.calendar || null,
-        strings: props.strings ? Object.assign({}, base, props.strings) : base
+        strings: props.strings ? Object.assign({}, base, props.strings) : base,
+        linkComponent: props.linkComponent || null
       };
     },
-    [props.locale, props.calendar, props.strings]
+    [props.locale, props.calendar, props.strings, props.linkComponent]
   );
   return /* @__PURE__ */ React.createElement(LocaleContext.Provider, { value }, props.children);
 }
 function useAuraLocale() {
   return React.useContext(LocaleContext) || { locale: null, calendar: null, strings: STRINGS.en };
 }
+function useLinkComponent(own) {
+  const ctx = React.useContext(LocaleContext);
+  return own || ctx && ctx.linkComponent || "a";
+}
 function useStrings() {
   return useAuraLocale().strings;
 }
@@ -226,5 +332,6 @@ export {
   AuraProvider,
   STRINGS,
   useAuraLocale,
+  useLinkComponent,
   useStrings
 };

package/dist/esm/theme.js

@@ -105,6 +105,20 @@ function fit(hex, grounds, target, dir) {
   }
   return c;
 }
+function atLuminance(hex, Y) {
+  const o = rgbToOklch(hexToRgb(hex)), C = Math.max(o[1], 0.02);
+  let lo = 0, hi = 1, c = hex;
+  for (let i = 0; i < 30; i++) {
+    const mid = (lo + hi) / 2;
+    c = oklchToHex(mid, C, o[2]);
+    if (luminance(c) < Y) lo = mid;
+    else hi = mid;
+  }
+  return c;
+}
+const CHART_Y = { light: 0.075, dark: 0.46 };
+const SEQ_Y = { light: [0.26, 0.165, 0.1, 0.055, 0.028], dark: [0.14, 0.22, 0.34, 0.5, 0.7] };
+const CHART_2 = "#0a8b7a";
 const ZINC = { 0: "#ffffff", 50: "#fafafa", 100: "#f4f4f5", 800: "#27272a", 900: "#18181b", 950: "#09090b" };
 const INK = "#18181b";
 function createTheme(opts) {
@@ -123,6 +137,14 @@ function createTheme(opts) {
   L["alert-info-fg"] = fit(b[800], [b[50]], 4.5, -1);
   L["alert-info-border"] = b[200];
   L["mesh-from"] = b[400];
+  L["chart-1"] = atLuminance(o.brand, CHART_Y.light);
+  D["chart-1"] = atLuminance(o.brand, CHART_Y.dark);
+  SEQ_Y.light.forEach(function(y, i) {
+    L["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
+  });
+  SEQ_Y.dark.forEach(function(y, i) {
+    D["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
+  });
   D["fg-accent"] = fit(b[300], darkGrounds, 4.5, 1);
   D["accent-violet"] = fit(b[400], darkGrounds, 3, 1);
   D["focus-ring"] = fit(b[400], darkGrounds, 3, 1);
@@ -130,8 +152,8 @@ function createTheme(opts) {
   D["alert-info-bg"] = D["bg-selected"];
   D["alert-info-fg"] = fit(b[300], [D["alert-info-bg"]], 4.5, 1);
   D["alert-info-border"] = mix(ZINC[900], b[400], 0.4);
-  D["status-progress-bg"] = b[100];
-  D["status-progress-fg"] = L["status-progress-fg"];
+  D["status-progress-bg"] = mix(ZINC[900], b[500], 0.2);
+  D["status-progress-fg"] = fit(b[300], [D["status-progress-bg"]], 4.5, 1);
   if (s) {
     L["accent-dot"] = s[200];
     L["accent-lime"] = s[200];
@@ -182,9 +204,23 @@ function createTheme(opts) {
     check("dark", "fg-accent", g[0], 4.5, D["fg-accent"], g[1]);
     check("dark", "focus-ring", g[0], 3, D["focus-ring"], g[1]);
   });
+  [
+    ["light", ZINC[0], L],
+    ["light", ZINC[50], L],
+    ["dark", ZINC[900], D],
+    ["dark", ZINC[950], D]
+  ].forEach(function(g) {
+    const t = g[0], ground = g[1], m = g[2], name = ground === ZINC[0] || ground === ZINC[900] ? "bg-surface" : "bg-canvas";
+    ["chart-1", "chart-seq-1", "chart-seq-5"].forEach(function(k) {
+      check(t, k, name, 3, m[k], ground);
+    });
+  });
+  check("light", "chart-1", "chart-2 (lightness step)", 1.8, L["chart-1"], CHART_2);
+  check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
   check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
   check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
   check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
+  check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
   check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);
   check("dark", "alert-info-fg", "alert-info-bg", 4.5, D["alert-info-fg"], D["alert-info-bg"]);
   if (o.primary === "brand") {

package/dist/index.d.ts

@@ -1,31 +1,37 @@
 import * as React$1 from 'react';
 
+/** Button look. */
+export type ButtonVariant = "primary" | "secondary" | "creative" | "danger" | "danger-secondary";
 /** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only. */
 export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
-	/** Visual variant. Default `primary`. */
-	variant?: "primary" | "secondary" | "creative";
+	/** Visual variant. Default `primary`. `danger` (filled) and `danger-secondary` (outline) are for irreversible or destructive actions only — typically the confirm button of a `Dialog role="alertdialog"`. */
+	variant?: ButtonVariant;
 	/** Label text — short, Title Case English or Thai. */
 	children: React$1.ReactNode;
 	/** Leading icon name (see `IconName`). Hidden while loading. */
-	icon?: IconName;
+	icon?: IconInput;
 	/** Trailing icon name, e.g. `arrow-right` for forward actions. */
-	iconRight?: IconName;
+	iconRight?: IconInput;
 	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
 	loading?: boolean;
+	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels. */
+	fullWidth?: boolean;
 }
 /** 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`. */
-	variant?: "primary" | "secondary" | "creative";
+	/** Visual variant. Default `primary`. `danger` (filled) and `danger-secondary` (outline) are for irreversible or destructive actions only — typically the confirm button of a `Dialog role="alertdialog"`. */
+	variant?: ButtonVariant;
 	/** Label text — say where it goes ("View Orders"), not "Click here". */
 	children: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Trailing icon, e.g. `arrow-right`, or `external-link` with `target="_blank"`. */
-	iconRight?: IconName;
+	iconRight?: IconInput;
 	/** Looks unavailable and can't be followed: no href, `aria-disabled`, out of the Tab order. */
 	disabled?: boolean;
+	/** Fills its container and lets a long label wrap (at least 44px tall). */
+	fullWidth?: boolean;
 	/** A router's link to render instead of `<a>`, e.g. `Link` from `next/link` (client-side navigation). It gets `href`, `className`, the children and the ref. */
 	linkComponent?: React$1.ElementType;
 }
@@ -61,6 +67,8 @@ export interface DataTableColumn {
 	hideBelow?: number | "sm" | "md" | "lg" | "xl";
 	/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
 	actions?: boolean;
+	/** `end` right-aligns header and cells (amounts, counts) and uses tabular figures. Default `start`. */
+	align?: "start" | "end";
 }
 export interface DataTableSort {
 	key: string;
@@ -68,7 +76,7 @@ export interface DataTableSort {
 }
 export interface DataTableEmpty {
 	/** Default `inbox`; use `search` for "no matches". */
-	icon?: IconName;
+	icon?: IconInput;
 	/** Default "Nothing here yet". */
 	title?: string;
 	description?: string;
@@ -108,8 +116,20 @@ export interface DataTableProps {
 	/** Adds drag/keyboard resize handles to every column that has a width. */
 	resizable?: boolean;
 	onColumnResize?: (key: string, width: number) => void;
-	/** Shows skeleton rows and disables sorting, select-all and paging. */
+	/** Shows skeleton rows and disables sorting, select-all and paging. With `manual` and rows already shown, the rows stay (dimmed, with a progress bar) while the next page loads. */
 	loading?: boolean;
+	/** Server mode: `rows` is already the current page, sorted by the server. The table doesn't sort or slice; it reports
+	 * sort and page through onSortChange / onPageChange (or getPageHref links). Pair with `totalRows` and `pageSize`. */
+	manual?: boolean;
+	/** manual: rows across all pages (drives the page count, "1–25 of 312" and aria-rowcount). */
+	totalRows?: number;
+	/** Makes each row a link: the first column's content renders as the provider's linkComponent (or `<a>`), and a click
+	 * or Enter anywhere on the row follows it. Ctrl/⌘-click opens a new tab as usual. */
+	getRowHref?: (row: Record<string, any>) => string;
+	/** Pager arrows become links to these URLs (search-param paging). Without onPageChange the link navigates. */
+	getPageHref?: (page: number) => string;
+	/** Router link for getRowHref / getPageHref. Default: AuraProvider's linkComponent, else `<a>`. */
+	linkComponent?: React$1.ElementType;
 	/** Skeleton row count when there is no pageSize. Default 5. */
 	skeletonRows?: number;
 	/** Called on row click or Enter. */
@@ -133,10 +153,13 @@ export interface DataTableProps {
 	stackBelow?: number;
 	className?: string;
 }
+/** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
+export type IconInput = IconName | React$1.ReactElement;
 export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file" | "sun" | "moon" | "monitor";
 /** Lucide stroke icon drawn inline in currentColor. */
 export interface IconProps {
-	name: IconName;
+	/** A name from the set, or an icon element of your own (sized and styled the same way). */
+	name: IconInput;
 	/** `sm` 16 (default) · `md` 20 · `lg` 24, or a px number. */
 	size?: "sm" | "md" | "lg" | number;
 	/** Accessible name. Omit for decorative icons next to a text label (then aria-hidden). */
@@ -155,12 +178,14 @@ export interface SurfaceProps extends React$1.HTMLAttributes<HTMLElement> {
 }
 /** Sets the language of built-in labels (pagination, close buttons, empty states…) and the default date display for everything inside. */
 export interface AuraProviderProps {
-	/** Default `en` strings when there is no provider (dates still default to Thai / พ.ศ.). */
-	locale?: "th" | "en";
-	/** Default calendar for DatePicker / DateRangePicker / Calendar / formatDate callers that read it. */
+	/** Built-in labels and date display. `sv` = Swedish labels, `sv-SE` dates, Monday weeks and the Gregorian calendar. Without a provider everything is English: labels, `en-GB` dates, Gregorian years. */
+	locale?: "th" | "en" | "sv";
+	/** Default calendar for DatePicker / DateRangePicker / Calendar / formatDate callers that read it. Unset: `buddhist` (พ.ศ.) for `th`, `gregory` for `en` and `sv`. */
 	calendar?: "buddhist" | "gregory";
 	/** Override individual strings. */
 	strings?: Partial<Record<string, string | ((...args: any[]) => string)>>;
+	/** Your router's link (e.g. `Link` from `next/link`), used by every AURA component that renders a link: Button with `href`, SideNav, Breadcrumb, Stat, Pagination, DataTable row links. It gets `href`, `className`, `aria-current`, the children and the ref. A component's own `linkComponent` wins. */
+	linkComponent?: React$1.ElementType;
 	children?: React$1.ReactNode;
 }
 export type StatusTone = "neutral" | "progress" | "ready" | "blocked";
@@ -191,7 +216,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 }
 /** 32px round button holding one icon. */
 export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
-	icon: IconName;
+	icon: IconInput;
+	/** `danger` colours the icon and hover for a destructive action (Delete, Revoke). */
+	tone?: "neutral" | "danger";
 	/** Accessible name and tooltip (required). */
 	label: string;
 	/** Icon size. Default `sm` (16). */
@@ -199,7 +226,7 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 }
 export interface MenuItem {
 	label?: string;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Present = a checkable item (menuitemcheckbox). */
 	checked?: boolean;
 	disabled?: boolean;
@@ -237,7 +264,7 @@ export interface FieldProps {
 }
 export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "required"> {
 	/** Leading icon inside the field. */
-	icon?: IconName;
+	icon?: IconInput;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode;
 }
@@ -252,7 +279,7 @@ export interface SelectProps extends FieldProps, Omit<React$1.SelectHTMLAttribut
 	options: SelectOption[];
 	/** A disabled first option shown in fg-tertiary until something is chosen. */
 	placeholder?: string;
-	icon?: IconName;
+	icon?: IconInput;
 }
 export type ChoiceOption = string | {
 	value: string;
@@ -364,7 +391,7 @@ export interface CardProps {
 export interface TabItem {
 	id: string;
 	label: string;
-	icon?: IconName;
+	icon?: IconInput;
 	count?: number;
 	disabled?: boolean;
 	content?: React$1.ReactNode;
@@ -381,9 +408,15 @@ export interface TabsProps {
 export interface NavItem {
 	id: string;
 	label: string;
-	icon?: IconName;
+	icon?: IconInput;
 	count?: number;
+	/** Anything beside the label, e.g. a status dot or a `Badge`. */
+	badge?: React$1.ReactNode;
 	href?: string;
+	/** Makes this item a collapsible group of links. The group header is a button, never a link. */
+	children?: NavItem[];
+	/** Start open. A group also opens by itself when one of its items is the current one. */
+	defaultOpen?: boolean;
 }
 export interface SideNavProps {
 	sections?: Array<{
@@ -398,6 +431,8 @@ export interface SideNavProps {
 	footer?: React$1.ReactNode;
 	/** Default "Main". */
 	label?: string;
+	/** Router link for items with `href`; defaults to the AuraProvider's `linkComponent`, then `<a>`. */
+	linkComponent?: React$1.ElementType;
 	className?: string;
 }
 export interface BreadcrumbProps {
@@ -435,7 +470,7 @@ export interface ComboboxOption {
 	keywords?: string[];
 	disabled?: boolean;
 	/** Leading icon in the list. */
-	icon?: IconName;
+	icon?: IconInput;
 }
 /** Combobox with `multiple`: pick any number; the picks show as removable chips in the field. */
 export interface ComboboxMultipleProps extends Omit<ComboboxProps, "value" | "defaultValue" | "onChange" | "clearable"> {
@@ -461,7 +496,7 @@ export interface ComboboxProps extends FieldProps {
 	disabled?: boolean;
 	readOnly?: boolean;
 	/** Leading icon. Default `search`. */
-	icon?: IconName;
+	icon?: IconInput;
 	/** Clear button while a value is selected (Escape clears too). Default true. */
 	clearable?: boolean;
 	/** Server-side search: called with the typed text; the component stops filtering and shows `options` as given. */
@@ -525,7 +560,7 @@ export interface StepperProps {
 export interface SegmentedOption {
 	value: string;
 	label: string;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Show only the icon; `label` becomes its accessible name and tooltip. */
 	iconOnly?: boolean;
 	disabled?: boolean;
@@ -549,9 +584,9 @@ export interface SegmentedControlProps {
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
-	/** `th` (default) or `en`. */
-	locale?: "th" | "en";
-	/** `buddhist` (default, พ.ศ.) or `gregory` (ค.ศ.). */
+	/** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `th` unless given. */
+	locale?: "th" | "en" | "sv";
+	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory";
 }
 export interface CalendarProps extends DateDisplayOptions {
@@ -673,7 +708,7 @@ export interface StatProps {
 	unit?: React$1.ReactNode;
 	change?: StatChange;
 	caption?: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Skeleton in place of the value. */
 	loading?: boolean;
 	/** Makes the whole card a link or a button (drill-down). */
@@ -740,11 +775,11 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	tone?: Tone;
 	/** soft (default) · solid · outline */
 	variant?: "soft" | "solid" | "outline";
-	icon?: IconName;
+	icon?: IconInput;
 }
 export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
 	children: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Adds a remove button (applied filters, chosen people). */
 	onRemove?: () => void;
 	removeLabel?: string;
@@ -781,7 +816,7 @@ export interface SkeletonProps {
 export interface EmptyStateProps {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	/** One or two buttons. */
 	action?: React$1.ReactNode;
 	size?: "sm" | "md";
@@ -807,7 +842,7 @@ export interface AccordionItem {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode;
 	content: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	disabled?: boolean;
 }
 export interface AccordionProps {
@@ -934,7 +969,7 @@ export declare function formatDate(iso: ISODate | null | undefined, opts?: Forma
 /** Parse typed text: dd/mm/yyyy (Buddhist years ≥ 2400 are converted), d-m-yyyy, d.m.yyyy, yyyy-mm-dd or '18 ก.ย. 2569' / '18 Sep 2026'. */
 export declare function parseDate(text: string | null | undefined): ISODate | null;
 export declare const Calendar: React$1.ForwardRefExoticComponent<CalendarProps & React$1.RefAttributes<HTMLDivElement>>;
-/** Typed date field + calendar popover. Shows Buddhist-era dates (18 ก.ย. 2569); accepts dd/mm/yyyy in พ.ศ. or ค.ศ. and yyyy-mm-dd. */
+/** Typed date field + calendar popover. English / Gregorian unless a locale is set; `th` shows Buddhist-era dates (18 ก.ย. 2569) and accepts พ.ศ. or ค.ศ. years. The value is always a Gregorian ISO date. */
 export declare const DatePicker: React$1.ForwardRefExoticComponent<DatePickerProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const DateRangePicker: React$1.ForwardRefExoticComponent<DateRangePickerProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const Alert: React$1.ForwardRefExoticComponent<AlertProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -956,6 +991,7 @@ export declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & Rea
 export declare const DataTable: React$1.ForwardRefExoticComponent<DataTableProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Tabs: React$1.ForwardRefExoticComponent<TabsProps & React$1.RefAttributes<HTMLDivElement>>;
+/** Side navigation: sections of links or buttons, collapsible groups, counts and badges. Arrow keys move between items. */
 export declare const SideNav: React$1.ForwardRefExoticComponent<SideNavProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Breadcrumb: React$1.ForwardRefExoticComponent<BreadcrumbProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
@@ -1058,12 +1094,15 @@ export interface AuraStrings {
 export declare const STRINGS: {
 	en: AuraStrings;
 	th: AuraStrings;
+	sv: AuraStrings;
 };
 /** What useAuraLocale returns. `locale` and `calendar` are null outside an AuraProvider. */
 export interface AuraLocaleValue {
-	locale: "th" | "en" | null;
+	locale: "th" | "en" | "sv" | null;
 	calendar: "buddhist" | "gregory" | null;
 	strings: AuraStrings;
+	/** The router link set on AuraProvider, if any. */
+	linkComponent?: React$1.ElementType | null;
 }
 /** Sets the language of built-in labels (and the default date locale) for everything inside. */
 export declare function AuraProvider(props: AuraProviderProps): React$1.ReactElement;
@@ -1101,7 +1140,10 @@ export interface ColorSchemeOptions {
 /** The script ColorSchemeScript renders, as a string — for frameworks that want it in a raw <head> template. */
 export declare function colorSchemeScript(options?: ColorSchemeOptions): string;
 /** Put in <head>: applies the saved colour scheme before the page paints. Server-rendering safe. */
-export declare function ColorSchemeScript(props: ColorSchemeOptions): React$1.ReactElement;
+export declare function ColorSchemeScript(props: ColorSchemeOptions & {
+	/** Nonce for a nonce-based Content-Security-Policy (script-src 'nonce-…'). */
+	nonce?: string;
+}): React$1.ReactElement;
 /** Current colour scheme and a setter. `resolved` is what is on screen (system resolved to light or dark). */
 export interface ColorSchemeState {
 	scheme: ColorScheme;