@webority/ui-react 0.37.0 → 0.39.0

package/dist/lib/useListQuery.js

@@ -1,120 +1 @@
-import { buildListQuery as e, isFacetActive as t, listQueryParamNames as n, parseListQuery as r } from "./listQuery.js";
-import { useCallback as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
-//#region src/lib/useListQuery.js
-function l(t, r) {
-	let i = new URL(window.location.href);
-	for (let e of n(r)) i.searchParams.delete(e);
-	for (let [n, r] of e(t)) i.searchParams.append(n, r);
-	window.history.replaceState(window.history.state, "", `${i.pathname}${i.search}${i.hash}`);
-}
-function u({ fetchPage: n, facets: u = [], defaults: d, debounceMs: f = 250 }) {
-	let [p, m] = c(() => r(window.location.search, {
-		facets: u,
-		defaults: d
-	})), [h, g] = c(null), [_, v] = c(!0), [y, b] = c(null), x = s(p), S = s(n), C = s(u), w = s(d), T = s(!1);
-	a(() => {
-		S.current = n, C.current = u, w.current = d;
-	});
-	let E = i((e, t = !1) => {
-		T.current = t, x.current = e, m(e), l(e, C.current);
-	}, []);
-	a(() => {
-		let e = () => {
-			let e = r(window.location.search, {
-				facets: C.current,
-				defaults: w.current
-			});
-			T.current = !1, x.current = e, m(e);
-		};
-		return window.addEventListener("popstate", e), () => window.removeEventListener("popstate", e);
-	}, []), a(() => {
-		let e = new AbortController(), t = T.current ? f : 0;
-		v(!0), b(null);
-		let n = setTimeout(async () => {
-			try {
-				let t = await S.current(x.current, { signal: e.signal });
-				if (e.signal.aborted) return;
-				g(t), v(!1);
-			} catch (t) {
-				if (e.signal.aborted) return;
-				b(t), v(!1);
-			}
-		}, t);
-		return () => {
-			clearTimeout(n), e.abort();
-		};
-	}, [o(() => e(p).toString(), [p]), f]);
-	let D = i((e, t) => {
-		let n = C.current.find((t) => t.key === e);
-		if (!n) throw Error(`useListQuery: no facet named "${e}".`);
-		let r = x.current;
-		E({
-			...r,
-			page: 1,
-			filters: {
-				...r.filters,
-				[e]: t
-			}
-		}, n.type === "text");
-	}, [E]), O = i((e, t) => {
-		let n = x.current, r = t ?? (n.sortBy === e && n.sortOrder === "asc" ? "desc" : "asc");
-		E({
-			...n,
-			page: 1,
-			sortBy: e,
-			sortOrder: r
-		});
-	}, [E]), k = i((e) => E({
-		...x.current,
-		page: Math.max(1, Math.trunc(e))
-	}), [E]), A = i((e) => E({
-		...x.current,
-		page: 1,
-		pageSize: e
-	}), [E]), j = i(() => E(r("", {
-		facets: C.current,
-		defaults: w.current
-	})), [E]), M = h?.totalCount ?? 0, N = h?.totalPages ?? 0;
-	a(() => {
-		!_ && N > 0 && p.page > N && k(N);
-	}, [
-		_,
-		N,
-		p.page,
-		k
-	]);
-	let P = u.some((e) => t(e, p.filters[e.key])), F = {
-		rows: h?.items ?? [],
-		sort: p.sortBy ? {
-			key: p.sortBy,
-			dir: p.sortOrder
-		} : void 0,
-		onSort: O,
-		loading: _,
-		emptyFiltered: P ? "No records match the current filters." : void 0,
-		sourceCount: +!!P
-	}, I = {
-		page: p.page,
-		totalPages: Math.max(1, N),
-		pageSize: p.pageSize,
-		onPageChange: k,
-		onPageSizeChange: A
-	};
-	return {
-		query: p,
-		rows: F.rows,
-		loading: _,
-		error: y,
-		totalCount: M,
-		totalPages: N,
-		setFilter: D,
-		setSort: O,
-		setPage: k,
-		setPageSize: A,
-		reset: j,
-		tableProps: F,
-		paginationProps: I
-	};
-}
-//#endregion
-export { u as useListQuery };
+import{buildListQuery as e,isFacetActive as t,listQueryParamNames as n,parseListQuery as r}from"./listQuery.js";import{useCallback as i,useEffect as a,useMemo as o,useRef as s,useState as c}from"react";function l(t,r){let i=new URL(window.location.href);for(let e of n(r))i.searchParams.delete(e);for(let[n,r]of e(t))i.searchParams.append(n,r);window.history.replaceState(window.history.state,``,`${i.pathname}${i.search}${i.hash}`)}function u({fetchPage:n,facets:u=[],defaults:d,debounceMs:f=250}){let[p,m]=c(()=>r(window.location.search,{facets:u,defaults:d})),[h,g]=c(null),[_,v]=c(!0),[y,b]=c(null),x=s(p),S=s(n),C=s(u),w=s(d),T=s(!1);a(()=>{S.current=n,C.current=u,w.current=d});let E=i((e,t=!1)=>{T.current=t,x.current=e,m(e),l(e,C.current)},[]);a(()=>{let e=()=>{let e=r(window.location.search,{facets:C.current,defaults:w.current});T.current=!1,x.current=e,m(e)};return window.addEventListener(`popstate`,e),()=>window.removeEventListener(`popstate`,e)},[]),a(()=>{let e=new AbortController,t=T.current?f:0;v(!0),b(null);let n=setTimeout(async()=>{try{let t=await S.current(x.current,{signal:e.signal});if(e.signal.aborted)return;g(t),v(!1)}catch(t){if(e.signal.aborted)return;b(t),v(!1)}},t);return()=>{clearTimeout(n),e.abort()}},[o(()=>e(p).toString(),[p]),f]);let D=i((e,t)=>{let n=C.current.find(t=>t.key===e);if(!n)throw Error(`useListQuery: no facet named "${e}".`);let r=x.current;E({...r,page:1,filters:{...r.filters,[e]:t}},n.type===`text`)},[E]),O=i((e,t)=>{let n=x.current,r=t??(n.sortBy===e&&n.sortOrder===`asc`?`desc`:`asc`);E({...n,page:1,sortBy:e,sortOrder:r})},[E]),k=i(e=>E({...x.current,page:Math.max(1,Math.trunc(e))}),[E]),A=i(e=>E({...x.current,page:1,pageSize:e}),[E]),j=i(()=>E(r(``,{facets:C.current,defaults:w.current})),[E]),M=h?.totalCount??0,N=h?.totalPages??0;a(()=>{!_&&N>0&&p.page>N&&k(N)},[_,N,p.page,k]);let P=u.some(e=>t(e,p.filters[e.key])),F={rows:h?.items??[],sort:p.sortBy?{key:p.sortBy,dir:p.sortOrder}:void 0,onSort:O,loading:_,emptyFiltered:P?`No records match the current filters.`:void 0,sourceCount:+!!P},I={page:p.page,totalPages:Math.max(1,N),pageSize:p.pageSize,onPageChange:k,onPageSizeChange:A};return{query:p,rows:F.rows,loading:_,error:y,totalCount:M,totalPages:N,setFilter:D,setSort:O,setPage:k,setPageSize:A,reset:j,tableProps:F,paginationProps:I}}export{u as useListQuery};

package/dist/lib/usePagination.js

@@ -1,29 +1 @@
-import { useEffect as e, useMemo as t, useState as n } from "react";
-//#region src/lib/usePagination.js
-function r(r, i = 10) {
-	let [a, o] = n(1), [s, c] = n(i), l = r.length, u = Math.max(1, Math.ceil(l / s));
-	e(() => {
-		a > u && o(u);
-	}, [a, u]);
-	let d = (a - 1) * s, f = t(() => r.slice(d, d + s), [
-		r,
-		d,
-		s
-	]);
-	function p(e) {
-		c(e), o(1);
-	}
-	return {
-		page: a,
-		setPage: o,
-		pageSize: s,
-		setPageSize: p,
-		totalPages: u,
-		pageRows: f,
-		total: l,
-		firstRow: l === 0 ? 0 : d + 1,
-		lastRow: Math.min(l, d + s)
-	};
-}
-//#endregion
-export { r as usePagination };
+import{useEffect as e,useMemo as t,useState as n}from"react";function r(r,i=10){let[a,o]=n(1),[s,c]=n(i),l=r.length,u=Math.max(1,Math.ceil(l/s));e(()=>{a>u&&o(u)},[a,u]);let d=(a-1)*s,f=t(()=>r.slice(d,d+s),[r,d,s]);function p(e){c(e),o(1)}return{page:a,setPage:o,pageSize:s,setPageSize:p,totalPages:u,pageRows:f,total:l,firstRow:l===0?0:d+1,lastRow:Math.min(l,d+s)}}export{r as usePagination};

package/dist/lib/useTableView.js

@@ -1,42 +1 @@
-import { useCallback as e, useEffect as t, useState as n } from "react";
-//#region src/lib/useTableView.js
-var r = (e) => `wui-view:${e}`;
-function i(e, t) {
-	try {
-		let n = window.localStorage.getItem(r(e));
-		if (!n) return t;
-		let i = JSON.parse(n);
-		return {
-			hidden: Array.isArray(i.hidden) ? i.hidden : t.hidden,
-			sort: i.sort && typeof i.sort.key == "string" ? i.sort : t.sort
-		};
-	} catch {
-		return t;
-	}
-}
-function a(a, { sort: o } = {}) {
-	let [s, c] = n(() => i(a, {
-		hidden: [],
-		sort: o
-	}));
-	t(() => {
-		try {
-			window.localStorage.setItem(r(a), JSON.stringify(s));
-		} catch {}
-	}, [a, s]);
-	let l = e((e) => c((t) => ({
-		...t,
-		hidden: t.hidden.includes(e) ? t.hidden.filter((t) => t !== e) : [...t.hidden, e]
-	})), []), u = e((e) => c((t) => ({
-		...t,
-		sort: typeof e == "function" ? e(t.sort) : e
-	})), []);
-	return {
-		hiddenColumns: s.hidden,
-		toggleColumn: l,
-		sort: s.sort,
-		setSort: u
-	};
-}
-//#endregion
-export { a as useTableView };
+import{useCallback as e,useEffect as t,useState as n}from"react";var r=e=>`wui-view:${e}`;function i(e,t){try{let n=window.localStorage.getItem(r(e));if(!n)return t;let i=JSON.parse(n);return{hidden:Array.isArray(i.hidden)?i.hidden:t.hidden,sort:i.sort&&typeof i.sort.key==`string`?i.sort:t.sort}}catch{return t}}function a(a,{sort:o}={}){let[s,c]=n(()=>i(a,{hidden:[],sort:o}));t(()=>{try{window.localStorage.setItem(r(a),JSON.stringify(s))}catch{}},[a,s]);let l=e(e=>c(t=>({...t,hidden:t.hidden.includes(e)?t.hidden.filter(t=>t!==e):[...t.hidden,e]})),[]),u=e(e=>c(t=>({...t,sort:typeof e==`function`?e(t.sort):e})),[]);return{hiddenColumns:s.hidden,toggleColumn:l,sort:s.sort,setSort:u}}export{a as useTableView};

package/dist/types/components/AppAlert.d.ts

@@ -15,6 +15,9 @@
  * @param {import('react').ReactNode} props.children The alert body.
  * @param {import('react').ReactNode} [props.title] A bold heading line above the body (`.alert-heading`).
  * @param {string|import('react').ReactNode} [props.icon] A leading glyph — a semantic icon name or a node. Defaults to the variant's badge glyph; pass `null` for none.
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant='linear'] The iconsax style of a
+ *   named icon (the default badge glyph or an `icon` name). It does not touch an `icon` node or an `image`.
+ * @param {number} [props.iconSize] The badge glyph's width and height in px. Unset, it follows `size`.
  * @param {string} [props.image] A custom image URL shown in the badge instead of the icon glyph (fills the circle).
  * @param {string} [props.imageAlt] Alt text for the custom image.
  * @param {number} [props.imageSize] Width and height of the image badge in px. Unset, it follows `size`.
@@ -29,11 +32,13 @@
  * @param {"alert"|"status"|"none"} [props.role="alert"] "status" for non-assertive notices; "none" for
  *   explanatory page content, which must not interrupt a screen reader.
  */
-export default function AppAlert({ variant, children, title, icon, image, imageAlt, imageSize, className, onClose, dismissible, bordered, accent, size, action, role, ...rest }: {
+export default function AppAlert({ variant, children, title, icon, iconVariant, iconSize, image, imageAlt, imageSize, className, onClose, dismissible, bordered, accent, size, action, role, ...rest }: {
     variant?: "info" | "success" | "warning" | "danger";
     children: import('react').ReactNode;
     title?: import('react').ReactNode;
     icon?: string | import('react').ReactNode;
+    iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    iconSize?: number;
     image?: string;
     imageAlt?: string;
     imageSize?: number;

package/dist/types/components/AppCalendar.d.ts

@@ -1,8 +1,8 @@
 /**
  * Shows events on a month, week, day or list view, in India Standard Time, with weeks starting on
- * Monday. The calendar is the shared `<wui-calendar>` element, the same one the Razor
- * `<app-calendar>` uses, with its calendar engine loaded the first time a calendar mounts: a page
- * without a calendar never downloads it.
+ * `firstDay` (Monday unless the theme or the prop says otherwise). The calendar is the shared
+ * `<wui-calendar>` element, the same one the Razor `<app-calendar>` uses, with its calendar engine
+ * loaded the first time a calendar mounts: a page without a calendar never downloads it.
  *
  * Give it events as data (`events`), or an address (`eventsUrl`) it calls whenever the visible
  * period changes, with `start` and `end` query parameters: IST `YYYY-MM-DD` days, `end` being the
@@ -13,9 +13,9 @@
  * (neutral, primary, success, warning, danger, info); `url` makes it a link.
  *
  * Every day can be reached by keyboard: one tab stop among the days, the arrow keys move between
- * them, Home and End go to Monday and Sunday, Page Up and Page Down to the previous and next month,
- * Enter opens the day. A calendar given no `view` opens as a list when it is narrower than a
- * phone.
+ * them, Home and End go to the first and last day of the week, Page Up and Page Down to the
+ * previous and next month, Enter opens the day. A calendar given no `view` opens as a list when it
+ * is narrower than a phone.
  *
  * ```jsx
  * <AppCalendar
@@ -33,6 +33,8 @@
  * @param {'month'|'week'|'day'|'list'} [props.view] The view to show. Without it a calendar opens on the month, or on the list when it is narrower than a phone.
  * @param {string} [props.date] The IST day (`YYYY-MM-DD`) to show; today when omitted. Changing it moves the calendar.
  * @param {string} [props.emptyText] What a list with no events says.
+ * @param {0|1|2|3|4|5|6} [props.firstDay] First weekday of the calendar, 0 Sunday to 6 Saturday. Unset, it
+ *   follows the theme's `--wui-first-day` token, which is 1 (Monday) unless the product sets it.
  * @param {string} [props.errorText] What is said when `eventsUrl` could not be loaded, and when the calendar's code could not.
  * @param {(event: object) => (void|false)} [props.onEventClick] An event was clicked, or Enter was pressed on it. Gets the event as it was given. Return `false` to stop an event's own link.
  * @param {(detail: { date: string, time: string|null, allDay: boolean }) => void} [props.onDateClick] A day was clicked, or Enter was pressed on it; `time` is set for a click on a time slot.

package/dist/types/components/AppDatePicker.d.ts

@@ -22,7 +22,10 @@ import "@webority/ui-elements/elements/datepicker";
  * @param {string} [props.placeholder="Enter Date"]
  * @param {boolean} [props.disabled]
  * @param {'sm'|'md'|'lg'} [props.size] Control height tier, matching AppInput.
- * @param {0|1|2|3|4|5|6} [props.firstDay=0] First weekday of the calendar — 0 Sun (default), 1 Mon…
+ * @param {0|1|2|3|4|5|6} [props.firstDay] First weekday of the calendar, 0 Sunday to 6 Saturday. Unset, it
+ *   follows the theme's `--wui-first-day` token, which is 1 (Monday) unless the product sets it.
+ * @param {string} [props.displayFormat="dd-MMM-yyyy"] How the chosen date reads in the field, from the tokens
+ *   yyyy, MMMM, MMM, MM, dd and d (for example `dd/MM/yyyy`). The `onChange` value stays ISO.
  * @param {string} [props.id]
  * @param {string} [props.ariaLabel]
  * @param {string} [props.className] Classes for the `<wui-datepicker>` control itself.

package/dist/types/components/AppDateRangePicker.d.ts

@@ -23,7 +23,8 @@ import "@webority/ui-elements/elements/date-range";
  * @param {string} [props.placeholder="Start to End"]
  * @param {boolean} [props.disabled]
  * @param {'sm'|'md'|'lg'} [props.size] Control height tier, matching AppInput.
- * @param {0|1|2|3|4|5|6} [props.firstDay=0] First weekday of the calendar — 0 Sun (default), 1 Mon…
+ * @param {0|1|2|3|4|5|6} [props.firstDay] First weekday of the calendar, 0 Sunday to 6 Saturday. Unset, it
+ *   follows the theme's `--wui-first-day` token, which is 1 (Monday) unless the product sets it.
  * @param {string} [props.id]
  * @param {string} [props.ariaLabel]
  * @param {string} [props.className] Class to apply to the control element.

package/dist/types/components/AppDropdown.d.ts

@@ -31,8 +31,14 @@
  *   "Sort by ▾" labeled button). Wins over `icon`. The button still owns react-bootstrap's
  *   ref/onClick/`aria-expanded` and keyboard behavior, so a11y is unchanged. Razor counterpart:
  *   the `<app-dropdown-toggle>` child slot.
+ * @param {boolean} [props.show] Controlled open state. Leave it unset and the menu manages its own;
+ *   set it and the caller owns it, updating it from `onToggle`.
+ * @param {(nextShow: boolean, meta: { source?: string, originalEvent?: Event }) => void} [props.onToggle]
+ *   Called whenever the menu asks to open or close: a toggle click, an outside click, Escape, an item
+ *   pick (react-bootstrap's `source`), and the close on a scroll that moves the toggle or a window
+ *   resize (`source` "scroll" or "resize"). Fires in both modes.
  */
-export default function AppDropdown({ icon, iconSize, toggleClassName, label, ariaLabel, align, items, menuClassName, linkComponent, children, trigger, ...rest }: {
+export default function AppDropdown({ icon, iconSize, toggleClassName, label, ariaLabel, align, items, menuClassName, linkComponent, children, trigger, show, onToggle, ...rest }: {
     icon: string;
     iconSize?: number;
     toggleClassName?: string;
@@ -53,4 +59,9 @@ export default function AppDropdown({ icon, iconSize, toggleClassName, label, ar
     linkComponent?: import('react').ElementType;
     children?: import('react').ReactNode;
     trigger?: import('react').ReactNode;
+    show?: boolean;
+    onToggle?: (nextShow: boolean, meta: {
+        source?: string;
+        originalEvent?: Event;
+    }) => void;
 }): import("react").JSX.Element;

package/dist/types/components/AppRouteError.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The screen for a page that failed to load: a router `errorElement`, and the fallback of the
+ * app's root error boundary, so both paths show the same screen. It knows nothing of the router:
+ * the app reads the caught error (`useRouteErrorReport` in `@webority/web-core`) and passes its
+ * `kind`. It never shows the error itself, which is for the logs, not the person.
+ *
+ * - `error`: something broke. Offers "Try again" and the home page.
+ * - `stale-build`: the app was updated while the page was open and a code file of the old build
+ *   is gone. Offers "Reload".
+ * - `not-found`: no page at this address. Offers the home page.
+ *
+ * The home link is a plain link (a full page load), so the screen also works where no router
+ * is mounted, above it in the root error boundary.
+ *
+ * @param {object} props
+ * @param {'error'|'stale-build'|'not-found'} [props.kind='error'] What went wrong.
+ * @param {string} [props.homeHref='/'] Where "Go to the home page" leads.
+ * @param {() => void} [props.onRetry] What "Try again" and "Reload" do. Default: reload the page.
+ * @param {import('react').ReactNode} [props.brand] Shown above the result, usually the product's logo.
+ * @param {boolean} [props.fullPage=true] Fill the viewport and centre the result. Pass `false` for an error inside a page layout.
+ * @param {import('react').ReactNode} [props.children] Extra content below the actions, such as a support link.
+ * @param {string} [props.className] Extra classes on the outer container.
+ */
+export default function AppRouteError({ kind, homeHref, onRetry, brand, fullPage, children, className, ...rest }: {
+    kind?: 'error' | 'stale-build' | 'not-found';
+    homeHref?: string;
+    onRetry?: () => void;
+    brand?: import('react').ReactNode;
+    fullPage?: boolean;
+    children?: import('react').ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppStepper.d.ts

@@ -23,6 +23,10 @@
  * @param {{ key?: string, label: string, description?: string, status?: 'done'|'active'|'pending'|'error', href?: string, icon?: string }[]} props.steps
  * @param {'steps'|'journey'} [props.variant='steps']
  * @param {'horizontal'|'vertical'} [props.orientation='horizontal']
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant='linear'] The iconsax style of
+ *   every step glyph: the done tick, the error alert and each step's own `icon`.
+ * @param {'sm'|'md'|'lg'} [props.size='md'] Scales the badge, its number, the labels and the glyphs together.
+ * @param {number} [props.iconSize] Every step glyph's width and height in px. Unset, it follows `size` (12, 14 or 18).
  * @param {number} [props.activeStep] When set, statuses are DERIVED from the index —
  *   steps before it are `done`, the one at it is `active`, the rest `pending`. A step's
  *   own explicit `status` still wins, so a failed step can be marked `error`.
@@ -33,7 +37,7 @@
  *   step; it receives `to` instead of `href`.
  * @param {string} [props.className]
  */
-export default function AppStepper({ steps, variant, orientation, activeStep, onStepClick, label, linkComponent: Link, className, ...rest }: {
+export default function AppStepper({ steps, variant, orientation, iconVariant, size, iconSize, activeStep, onStepClick, label, linkComponent: Link, className, ...rest }: {
     steps: {
         key?: string;
         label: string;
@@ -44,6 +48,9 @@ export default function AppStepper({ steps, variant, orientation, activeStep, on
     }[];
     variant?: 'steps' | 'journey';
     orientation?: 'horizontal' | 'vertical';
+    iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    size?: 'sm' | 'md' | 'lg';
+    iconSize?: number;
     activeStep?: number;
     onStepClick?: (step: object, index: number) => void;
     label?: string;

package/dist/types/components/AppUpdateBar.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The "new version" bar: a non-blocking strip saying a newer build of the app is live, with a
+ * Reload button. Show it when the app's version check reports a new build; the person keeps
+ * working and reloads when ready. It never interrupts: no dialog, no forced reload. (An app that
+ * also reloads on the next route change does that in its router, not here.)
+ *
+ * Built on `AppBanner`, so it reads as a status message to assistive technology.
+ *
+ * @param {object} props
+ * @param {() => void} [props.onReload] What "Reload" does. Default: reload the page.
+ * @param {boolean} [props.dismissible=false] Show a close button. The bar then stays closed until it remounts.
+ * @param {() => void} [props.onDismiss] Called after the bar is closed.
+ * @param {string} [props.className] Extra classes, such as `sticky-top`.
+ */
+export default function AppUpdateBar({ onReload, dismissible, onDismiss, className, ...rest }: {
+    onReload?: () => void;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppWizard.d.ts

@@ -23,6 +23,10 @@ import "@webority/ui-elements/elements/wizard";
  * @param {'primary'|'success'|'warning'|'danger'|'info'} [props.tone] Recolour the whole stepper accent (active fill, done rail, ring, done tint) to a semantic ramp. Unset keeps the variant's default (primary for steps/journey, success/green for icons). For any other colour, override the `--wui-step-accent` / `--wui-step-soft` CSS variables via `style` or a `className` instead.
  * @param {'primary'|'success'|'warning'|'danger'|'info'} [props.doneTone] Recolour completed steps only (their badge, "STEP n" eyebrow and the filled line after them) to a semantic ramp; the current step keeps the `tone` accent. Unset, completed steps follow `tone`. For any other colour, override the `--wui-step-done-accent` / `--wui-step-done-soft` CSS variables via `style` or a `className` instead.
  * @param {'horizontal'|'vertical'} [props.orientation='horizontal']
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant='linear'] The iconsax style of
+ *   every header glyph: the done tick, the error alert, the skipped dash and each step's own `icon`.
+ * @param {'sm'|'md'|'lg'} [props.size='md'] Scales the stepper header: the badge, its number, the labels and the glyphs.
+ * @param {number} [props.iconSize] Every header glyph's width and height in px. Unset, it follows `size` (14, 16 or 20).
  * @param {boolean} [props.skippable=false] Show a Skip button on every step (bar the last), without needing per-step `optional`. A per-step `optional` still works on its own.
  * @param {boolean} [props.nonLinear=false] Allow jumping to any step, not only completed ones.
  * @param {boolean} [props.hideStepper=false] Hide the progress header.

package/dist/types/components/iconCatalogFull/bold/a.g.d.ts

@@ -1,5 +1,8 @@
 export declare const FULL_VARIANT_GLYPHS: {
     aave: string;
+    activity: string;
+    add: string;
+    "add-circle": string;
     "add-square": string;
     additem: string;
     airdrop: string;
@@ -7,6 +10,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "airplane-square": string;
     airpod: string;
     airpods: string;
+    alarm: string;
     "align-bottom": string;
     "align-horizontally": string;
     "align-left": string;
@@ -39,11 +43,16 @@ export declare const FULL_VARIANT_GLYPHS: {
     "arrow-circle-right-2": string;
     "arrow-circle-up": string;
     "arrow-circle-up-2": string;
+    "arrow-down": string;
     "arrow-down-2": string;
     "arrow-down-3": string;
     "arrow-forward": string;
     "arrow-forward-square": string;
+    "arrow-left": string;
+    "arrow-left-2": string;
     "arrow-left-3": string;
+    "arrow-right": string;
+    "arrow-right-2": string;
     "arrow-right-3": string;
     "arrow-rotate-left": string;
     "arrow-rotate-right": string;
@@ -52,7 +61,9 @@ export declare const FULL_VARIANT_GLYPHS: {
     "arrow-square-left": string;
     "arrow-square-right": string;
     "arrow-square-up": string;
+    "arrow-swap-horizontal": string;
     "arrow-swap-vertical": string;
+    "arrow-up": string;
     "arrow-up-2": string;
     "arrow-up-3": string;
     "attach-circle": string;

package/dist/types/components/iconCatalogFull/bold/b.g.d.ts

@@ -38,6 +38,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "bluetooth-circle": string;
     "bluetooth-rectangle": string;
     blur: string;
+    book: string;
     "book-1": string;
     "book-saved": string;
     "book-square": string;
@@ -52,6 +53,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "box-search": string;
     "box-tick": string;
     "box-time": string;
+    briefcase: string;
     "brifecase-cross": string;
     "brifecase-tick": string;
     "brifecase-timer": string;
@@ -66,6 +68,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     bucket: string;
     "bucket-circle": string;
     "bucket-square": string;
+    building: string;
     "building-3": string;
     "building-4": string;
     buildings: string;

package/dist/types/components/iconCatalogFull/bold/c.g.d.ts

@@ -1,9 +1,15 @@
 export declare const FULL_VARIANT_GLYPHS: {
+    cake: string;
+    calculator: string;
+    calendar: string;
+    "calendar-1": string;
     "calendar-2": string;
+    "calendar-add": string;
     "calendar-circle": string;
     "calendar-edit": string;
     "calendar-remove": string;
     "calendar-search": string;
+    "calendar-tick": string;
     call: string;
     "call-add": string;
     "call-calling": string;
@@ -13,6 +19,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "call-received": string;
     "call-remove": string;
     "call-slash": string;
+    camera: string;
     "camera-slash": string;
     candle: string;
     "candle-2": string;
@@ -37,6 +44,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     celo: string;
     celsius: string;
     chainlink: string;
+    chart: string;
     "chart-1": string;
     "chart-2": string;
     "chart-21": string;
@@ -44,6 +52,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "chart-fail": string;
     "chart-square": string;
     "chart-success": string;
+    check: string;
     "chemical-glass": string;
     chrome: string;
     civic: string;
@@ -51,7 +60,12 @@ export declare const FULL_VARIANT_GLYPHS: {
     "clipboard-close": string;
     "clipboard-export": string;
     "clipboard-import": string;
+    "clipboard-text": string;
+    "clipboard-tick": string;
+    clock: string;
+    "close-circle": string;
     "close-square": string;
+    cloud: string;
     "cloud-add": string;
     "cloud-change": string;
     "cloud-connection": string;
@@ -65,7 +79,9 @@ export declare const FULL_VARIANT_GLYPHS: {
     "cloud-remove": string;
     "cloud-snow": string;
     "cloud-sunny": string;
+    code: string;
     "code-1": string;
+    "code-circle": string;
     coffee: string;
     coin: string;
     "coin-1": string;
@@ -81,9 +97,11 @@ export declare const FULL_VARIANT_GLYPHS: {
     "convert-card": string;
     convertshape: string;
     "convertshape-2": string;
+    copy: string;
     "copy-success": string;
     copyright: string;
     courthouse: string;
+    cpu: string;
     "cpu-charge": string;
     "cpu-setting": string;
     "creative-commons": string;

package/dist/types/components/iconCatalogFull/bold/d.g.d.ts

@@ -1,5 +1,6 @@
 export declare const FULL_VARIANT_GLYPHS: {
     dai: string;
+    danger: string;
     dash: string;
     data: string;
     "data-2": string;
@@ -27,16 +28,19 @@ export declare const FULL_VARIANT_GLYPHS: {
     "discount-shape": string;
     discover: string;
     dislike: string;
+    document: string;
     "document-cloud": string;
     "document-code": string;
     "document-code-2": string;
     "document-copy": string;
+    "document-download": string;
     "document-favorite": string;
     "document-filter": string;
     "document-forward": string;
     "document-like": string;
     "document-previous": string;
     "document-sketch": string;
+    "document-text": string;
     "document-text-1": string;
     "document-upload": string;
     "dollar-circle": string;

package/dist/types/components/iconCatalogFull/bold/e.g.d.ts

@@ -1,4 +1,6 @@
 export declare const FULL_VARIANT_GLYPHS: {
+    edit: string;
+    "edit-2": string;
     educare: string;
     electricity: string;
     element: string;
@@ -23,9 +25,11 @@ export declare const FULL_VARIANT_GLYPHS: {
     "eraser-square": string;
     ethereum: string;
     "ethereum-classic": string;
+    export: string;
     "export-circle": string;
     "export-curve": string;
     "export-square": string;
     "external-drive": string;
+    eye: string;
     "eye-slash": string;
 };

package/dist/types/components/iconCatalogFull/bold/f.g.d.ts

@@ -1,8 +1,10 @@
 export declare const FULL_VARIANT_GLYPHS: {
+    facebook: string;
     fatrows: string;
     "favorite-chart": string;
     figma: string;
     "figma-1": string;
+    filter: string;
     "filter-add": string;
     "filter-edit": string;
     "filter-remove": string;
@@ -12,16 +14,21 @@ export declare const FULL_VARIANT_GLYPHS: {
     "finger-cricle": string;
     "finger-scan": string;
     firstline: string;
+    flag: string;
     "flag-2": string;
+    flash: string;
     "flash-circle": string;
     "flash-slash": string;
     flashy: string;
+    folder: string;
+    "folder-2": string;
     "folder-add": string;
     "folder-cloud": string;
     "folder-connection": string;
     "folder-cross": string;
     "folder-favorite": string;
     "folder-minus": string;
+    "folder-open": string;
     forbidden: string;
     "forbidden-2": string;
     "format-circle": string;

package/dist/types/components/iconCatalogFull/bold/g.g.d.ts

@@ -14,11 +14,13 @@ export declare const FULL_VARIANT_GLYPHS: {
     gemini: string;
     "gemini-2": string;
     ghost: string;
+    gift: string;
     glass: string;
     global: string;
     "global-edit": string;
     "global-refresh": string;
     "global-search": string;
+    google: string;
     "google-drive": string;
     "google-play": string;
     gps: string;