@webority/ui-react 0.80.3 → 0.80.5

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

@@ -1,32 +1,18 @@
 import "@webority/ui-elements/elements/sortable";
-/**
- * A list whose items the person reorders: drag with a mouse or a finger (the list scrolls when
- * the pointer nears its edge), or with the keyboard (focus an item's handle, Space to lift,
- * arrow keys to move, Space to drop, Escape to cancel). Every move is announced to screen readers.
- * Thin wrapper over the shared `<wui-sortable>` element; the list is controlled, so `items`
- * is the truth and `onReorder` reports the new order.
- *
- * Lists that share a `group` accept each other's items by pointer drag. Each list then reports
- * its own new order, so the parent moves the item from one `items` array to the other.
- *
- * @param {object} props
- * @param {{ id: string, label: string, content?: import('react').ReactNode, disabled?: boolean }[]} props.items
- *   `id` is what `onReorder` reports. `label` names the item to assistive tech (handle label and
- *   announcements) and is the visible text unless `content` is given. A `disabled` item cannot
- *   be picked up; other items can still move past it.
- * @param {(ids: string[], detail: object) => void} [props.onReorder] Called with this list's new
- *   id order after a drop. `detail` is the element's event detail: `{ id, fromIndex, toIndex, from, to }`.
- * @param {string} props.ariaLabel Names the list for assistive tech; also used in announcements
- *   when an item moves between lists.
- * @param {boolean} [props.handle=false] Drag only from the handle. Without it an item can also be
- *   dragged from its body (links, buttons and inputs inside it keep working).
- * @param {string} [props.group] Name shared by lists that accept each other's items.
- * @param {string} [props.name] Form field name; posts the order as one hidden input per item.
- * @param {boolean} [props.disabled] No item can be picked up.
- * @param {'vertical'|'horizontal'} [props.orientation='vertical'] Direction the items run;
- *   horizontal also covers a wrapping row.
- * @param {string} [props.className]
- * @param {import('react').Ref<HTMLElement>} [ref]
- */
-declare const AppSortableList: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+declare const AppSortableList: import("react").ForwardRefExoticComponent<{
+    items: {
+        id: string;
+        label: string;
+        content?: import('react').ReactNode;
+        disabled?: boolean;
+    }[];
+    onReorder?: (ids: string[], detail: object) => void;
+    ariaLabel: string;
+    handle?: boolean;
+    group?: string;
+    name?: string;
+    disabled?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    className?: string;
+} & import("react").RefAttributes<HTMLElement>>;
 export default AppSortableList;

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

@@ -1,22 +1,10 @@
-/**
- * Shared toggle switch — `.form-check .form-switch`, matching the Razor
- * <app-switch> exactly.
- *
- * `label` renders a real, associated <label>. It used to be passed as
- * `aria-label` only, so the switch had no visible text at all and the two
- * surfaces looked nothing alike.
- *
- * @param {object} props
- * @param {import('react').ReactNode} [props.label]
- * @param {string} [props.id]
- * @param {string} [props.name]
- * @param {string} [props.error] Error message, rendered below the control. Replaces the hint.
- * @param {string} [props.hint] Helper text below the control. Hidden while an error is shown.
- * @param {'round'|'pill'|'circle'} [props.shape] Track shape: `round` (default) is the sliding
- *   pill with truly circular ends; `pill` is the same sliding pill with squircle ends;
- *   `circle` is a compact round on/off button.
- * @param {string} [props.className]
- * @param {import('react').Ref<HTMLInputElement>} [ref]
- */
-declare const AppSwitch: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+declare const AppSwitch: import("react").ForwardRefExoticComponent<{
+    label?: import('react').ReactNode;
+    id?: string;
+    name?: string;
+    error?: string;
+    hint?: string;
+    shape?: 'round' | 'pill' | 'circle';
+    className?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export default AppSwitch;

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

@@ -2,14 +2,15 @@
  * Empty ledger body for AppDataTable.
  *
  * @param {object} props
- * @param {string|import('react').ReactNode} props.icon Icon name, or a custom node.
+ * @param {string|import('react').ReactNode} [props.icon] Icon name, or a custom node. Needed unless
+ *   `illustration` is set, which replaces the icon.
  * @param {string|import('react').ReactNode} [props.illustration] A named drawing ("no-results" | "no-data" | "empty-inbox" | "no-notifications" | "no-files" | "no-access" | "offline" | "error"), or your own decorative SVG node drawn unboxed at up to 120 px. Replaces the icon bubble when set.
  * @param {import('react').ReactNode} props.title
  * @param {import('react').ReactNode} [props.text]
  * @param {import('react').ReactNode} [props.action]
  */
 export default function AppTableEmptyState({ icon, illustration, title, text, action, ...rest }: {
-    icon: string | import('react').ReactNode;
+    icon?: string | import('react').ReactNode;
     illustration?: string | import('react').ReactNode;
     title: import('react').ReactNode;
     text?: import('react').ReactNode;

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

@@ -1,28 +1,22 @@
 import "@webority/ui-elements/elements/taginput";
-/**
- * Free-text token entry field (emails, tags, keywords) over the shared `<wui-taginput>`
- * custom element. Type text and press Enter/comma to add a chip; Backspace removes the last.
- *
- * @param {object} props
- * @param {string[]} [props.values] Current tag values.
- * @param {(values: string[]) => void} [props.onChange]
- * @param {string} [props.placeholder] Placeholder for the input field.
- * @param {string} [props.name]
- * @param {import('react').ReactNode} [props.label]
- * @param {string} [props.error]
- * @param {string} [props.hint]
- * @param {boolean} [props.required]
- * @param {'sm'|'lg'} [props.size] Control size around the default.
- * @param {number} [props.maxTags] Maximum number of tags allowed.
- * @param {boolean} [props.allowDuplicates=false] Allow case-sensitive duplicate values.
- * @param {boolean} [props.disabled]
- * @param {string} [props.id]
- * @param {string} [props.ariaLabel] Accessible name for the input.
- * @param {string} [props.className] Class to apply to the control element.
- * @param {string} [props.fieldClassName] Class to apply to the wrapper field div.
- * @param {import('react').ReactNode} [props.help] Help content shown in an info tip beside the label.
- * @param {string} [props.helpLabel="More information"] Accessible name for that info tip.
- * @param {import('react').Ref<HTMLElement>} [ref]
- */
-declare const AppTagInput: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+declare const AppTagInput: import("react").ForwardRefExoticComponent<{
+    values?: string[];
+    onChange?: (values: string[]) => void;
+    placeholder?: string;
+    name?: string;
+    label?: import('react').ReactNode;
+    error?: string;
+    hint?: string;
+    required?: boolean;
+    size?: 'sm' | 'lg';
+    maxTags?: number;
+    allowDuplicates?: boolean;
+    disabled?: boolean;
+    id?: string;
+    ariaLabel?: string;
+    className?: string;
+    fieldClassName?: string;
+    help?: import('react').ReactNode;
+    helpLabel?: string;
+} & import("react").RefAttributes<HTMLElement>>;
 export default AppTagInput;

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

@@ -1,25 +1,18 @@
-/**
- * The shared multi-line field — the textarea counterpart to AppInput. Wraps react-bootstrap
- * Form.Group / Form.Label / Form.Control (as="textarea"), keeping the `.field`/`.label`/
- * `.textarea` classes so the look is unchanged. Forwards `ref` for react-hook-form and
- * controlled use alike.
- *
- * @param {object} props
- * @param {import('react').ReactNode} [props.label]
- * @param {boolean} [props.required=false]
- * @param {string} [props.error]
- * @param {string} [props.hint]
- * @param {import('react').ReactNode} [props.help] Info-tip content node (decoupled from any glossary).
- * @param {string} [props.helpLabel="More information"] aria-label for the info-tip button.
- * @param {string} [props.id]
- * @param {string} [props.name]
- * @param {number} [props.rows=4]
- * @param {boolean} [props.autoGrow=false] Grow the height to fit the content as the user types.
- * @param {boolean} [props.showCount=false] Show a live `count / maxLength` under the field.
- * @param {number} [props.maxLength] Character cap; the count turns red as it is approached.
- * @param {string} [props.className]
- * @param {string} [props.fieldClassName]
- * @param {import('react').Ref<HTMLTextAreaElement>} [ref]
- */
-declare const AppTextarea: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+declare const AppTextarea: import("react").ForwardRefExoticComponent<{
+    label?: import('react').ReactNode;
+    required?: boolean;
+    error?: string;
+    hint?: string;
+    placeholder?: string;
+    help?: import('react').ReactNode;
+    helpLabel?: string;
+    id?: string;
+    name?: string;
+    rows?: number;
+    autoGrow?: boolean;
+    showCount?: boolean;
+    maxLength?: number;
+    className?: string;
+    fieldClassName?: string;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default AppTextarea;

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

@@ -1,36 +1,24 @@
 import "@webority/ui-elements/elements/timepicker";
-/**
- * Thin React wrapper over the shared `<wui-timepicker>` element (single
- * implementation, so React and Razor render the same control).
- *
- * Wraps it in the standard `.field` shell — label / required mark / hint /
- * error — the same as `AppDatePicker` and every other field primitive.
- * Without that a caller had to hand-roll the label, which is exactly the
- * per-screen divergence this library exists to prevent. The shell is omitted
- * entirely when there is nothing to render around the control.
- *
- * @param {object} props
- * @param {string} [props.value]              Time string in "HH:mm" format (24-hour, wire format)
- * @param {(value: string) => void} [props.onChange]
- * @param {string} [props.label]
- * @param {boolean} [props.required]
- * @param {string} [props.hint]
- * @param {string} [props.error]
- * @param {import('react').ReactNode} [props.help] Content for the label info-tip.
- * @param {string} [props.helpLabel="More information"] aria-label for the info-tip button.
- * @param {string} [props.name]
- * @param {string} [props.min]               Time in "HH:mm" format
- * @param {string} [props.max]               Time in "HH:mm" format
- * @param {number} [props.step=30]           Step granularity in minutes
- * @param {'12'|'24'} [props.format='24']    Display format — 12 or 24 hour (wire stays 24h)
- * @param {string} [props.placeholder="Select time"]
- * @param {boolean} [props.disabled]
- * @param {'sm'|'md'|'lg'} [props.size]      Control height tier, matching AppInput
- * @param {string} [props.id]
- * @param {string} [props.ariaLabel]
- * @param {string} [props.className] Class to apply to the control element.
- * @param {string} [props.fieldClassName] Class to apply to the wrapper field div.
- * @param {import('react').Ref<HTMLElement>} [ref]
- */
-declare const AppTimePicker: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+declare const AppTimePicker: import("react").ForwardRefExoticComponent<{
+    value?: string;
+    onChange?: (value: string) => void;
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: string;
+    help?: import('react').ReactNode;
+    helpLabel?: string;
+    name?: string;
+    min?: string;
+    max?: string;
+    step?: number;
+    format?: '12' | '24';
+    placeholder?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    id?: string;
+    ariaLabel?: string;
+    className?: string;
+    fieldClassName?: string;
+} & import("react").RefAttributes<HTMLElement>>;
 export default AppTimePicker;

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

@@ -1,57 +1,42 @@
 import "@webority/ui-elements/elements/tour";
-/**
- * A step-by-step product tour over the shared `<wui-tour>` element: the page is dimmed except
- * around the step's target, and a card holds the step text with Back, Next and Skip. Steps are
- * data, anchored to elements by CSS selector. A step whose target is missing or hidden is
- * dropped.
- *
- * Accessibility: focus moves into the card on open, stays there while the tour runs, and returns
- * to where it was on close; each step is announced; Escape skips the tour; the arrow keys move
- * between steps, except while focus is in a field. On a phone the card sits on the side of the
- * target with room and never covers it. After the last step a closing dialog says the tour is
- * done (`endDialog={false}` leaves it out); Escape there closes the tour as `finished`.
- *
- * Set `open` to run the tour and set it back to false from `onClose`. Pass a `seenStore` to
- * remember that a person has seen it: it is asked before showing and written when the tour
- * finishes or is skipped, with that outcome. `createLocalSeenStore()` (from
- * `@webority/ui-elements`) keeps that in the browser; a product that keeps it on its server
- * passes its own `{ isSeen, markSeen }`.
- *
- * The element also raises bubbling events a product can listen for on the ref:
- * `wui-tour:start` { total }, `wui-tour:step` { step, index, position, total } and
- * `wui-tour:close` { reason, index, position, total, via }, where `via` is `button` or `escape`
- * on a skip.
- *
- * @param {object} props
- * @param {boolean} props.open Runs the tour. Set it back to false from `onClose`.
- * @param {(reason: 'finished'|'skipped'|'alreadySeen'|'noTargets', details: { index: number|null, position: number|null, total: number|null }) => void} props.onClose
- *   Called when the tour ends. `finished`: the person stepped past the last step; `skipped`: Skip
- *   or Escape (both marked seen); `alreadySeen`: the store says it was seen, so nothing showed;
- *   `noTargets`: no step had a visible target, so nothing showed (not marked seen). `details`
- *   names the step the tour ended on: its `index` in `steps`, and its `position` (from 1) out of
- *   `total`, counting only the steps that showed; all null for `alreadySeen` and `noTargets`.
- * @param {string} props.tourId Names the tour in the seen store.
- * @param {{ target: string, title?: string, description: string, media?: string, mediaAlt?: string, mediaPoster?: string, mediaType?: 'image'|'video', advanceOn?: 'click', actionLabel?: string }[]} props.steps
- *   `target` is a CSS selector. `media` is the URL of an image or short loop shown above the
- *   title, `mediaAlt` its text alternative, `mediaPoster` the still a loop shows under reduced
- *   motion. `advanceOn: 'click'` moves the tour on when the person clicks the target, and the
- *   card says what to click; `actionLabel` names the control in that sentence, in place of the
- *   target's accessible name, which it falls back to.
- * @param {{ isSeen: (tourId: string) => Promise<boolean>, markSeen: (tourId: string, outcome: 'finished'|'skipped') => Promise<void> }} [props.seenStore]
- *   Read through a ref, so an inline object does not restart a running tour.
- * @param {(step: object, index: number) => void | Promise<void>} [props.onBeforeStep] Runs before each step's target is looked up, awaited. Use it to open a menu or switch a tab so the target is visible.
- * @param {{ back?: string, next?: string, skip?: string, done?: string, progress?: string, advance?: string, mediaPause?: string, mediaPlay?: string, endTitle?: string, endMessage?: string, endButton?: string }} [props.labels]
- *   Button text, defaults Back, Next, Skip, Done. `done` is the last step's button only with
- *   `endDialog={false}`; while the closing dialog is on, the last step reads `next`, because the
- *   dialog follows. `progress` is the step count template, default "Step {current} of {total}".
- *   `advance` is a click-to-advance step's sentence, default "Click {actionName} to continue.",
- *   where `{actionName}` is the step's `actionLabel` or else its target's accessible name.
- *   `mediaPause` and `mediaPlay` name a step loop's pause button while it plays and while it is
- *   paused, defaults "Pause animation" and "Play animation".
- *   `endTitle`, `endMessage` and `endButton` are the closing dialog's text, defaults "You're all
- *   set", a short friendly line, and "Done".
- * @param {boolean} [props.endDialog=true] Show the closing dialog after the last step.
- * @param {string} [props.className]
- */
-declare const AppTour: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+declare const AppTour: import("react").ForwardRefExoticComponent<{
+    open: boolean;
+    onClose: (reason: 'finished' | 'skipped' | 'alreadySeen' | 'noTargets', details: {
+        index: number | null;
+        position: number | null;
+        total: number | null;
+    }) => void;
+    tourId: string;
+    steps: {
+        target: string;
+        title?: string;
+        description: string;
+        media?: string;
+        mediaAlt?: string;
+        mediaPoster?: string;
+        mediaType?: 'image' | 'video';
+        advanceOn?: 'click';
+        actionLabel?: string;
+    }[];
+    seenStore?: {
+        isSeen: (tourId: string) => Promise<boolean>;
+        markSeen: (tourId: string, outcome: 'finished' | 'skipped') => Promise<void>;
+    };
+    onBeforeStep?: (step: object, index: number) => void | Promise<void>;
+    labels?: {
+        back?: string;
+        next?: string;
+        skip?: string;
+        done?: string;
+        progress?: string;
+        advance?: string;
+        mediaPause?: string;
+        mediaPlay?: string;
+        endTitle?: string;
+        endMessage?: string;
+        endButton?: string;
+    };
+    endDialog?: boolean;
+    className?: string;
+} & import("react").RefAttributes<any>>;
 export default AppTour;

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

@@ -1,44 +1,33 @@
 import "@webority/ui-elements/elements/tree";
-/**
- * Thin React wrapper over the shared `<wui-tree>` element: a hierarchy in the WAI-ARIA tree
- * pattern (arrow keys, Home/End, typeahead, Enter), with icons and badges, lazy children and an
- * optional single or checkbox selection. The Razor `<app-tree-view>` renders the same element.
- *
- * `nodes` is `{ id, label, icon?, badge?, badgeTone?, children?, hasChildren?, expanded?,
- * checked?, disabled? }[]`. `icon` is a library icon name and `badgeTone` an AppBadge tone. Ids are
- * strings, unique across the whole tree. `children: []` is a leaf; `hasChildren: true` with no
- * `children` is a node whose children are fetched the first time it opens, through `loadChildren`
- * (or `loadUrl`). Labels are plain text. The tree keeps what the user opened and what it
- * fetched when `nodes` is replaced with the same ids.
- *
- * Selection: `single` marks one row selected; `multiple` shows a tri-state checkbox per node (a
- * parent is checked, unchecked or mixed from its children, and checking it checks every loaded
- * child). `checked` is controlled by the ids it lists, parents included.
- *
- * @param {object} props
- * @param {{ id: string, label: string, icon?: string, badge?: string,
- *   badgeTone?: 'neutral'|'primary'|'success'|'warning'|'danger'|'info', children?: object[],
- *   hasChildren?: boolean, expanded?: boolean, checked?: boolean, disabled?: boolean }[]} props.nodes
- * @param {'none'|'single'|'multiple'} [props.selection='none']
- * @param {string|null} [props.selected] Selected id (single mode, controlled: the tree shows this id
- *   whatever the user clicks until you change it; `null` selects nothing, and dropping the prop clears it).
- * @param {(id: string, node: object) => void} [props.onSelect] A row was activated: clicked, or
- *   Enter / Space on it. `node` is the object you passed in.
- * @param {string[]} [props.checked] Checked ids (multiple mode, controlled).
- * @param {(ids: string[], detail: { id: string, checked: boolean }) => void} [props.onCheck] A
- *   check was toggled; `ids` is every checked id.
- * @param {(node: object) => Promise<object[]>} [props.loadChildren] Fetches a lazy node's children.
- * @param {string} [props.loadUrl] Children endpoint used when `loadChildren` is not set: a GET with
- *   `parentId=<id>` added, answering a JSON array of nodes.
- * @param {(id: string, message: string) => void} [props.onLoadError] Children could not be loaded.
- * @param {string} [props.name] Form field name: `multiple` posts one value per checked id, `single`
- *   the selected id.
- * @param {string} [props.loadingText='Loading'] Announced while children load.
- * @param {string} [props.errorText='Could not load. Try again.'] Announced when they fail.
- * @param {string} [props.ariaLabel] Accessible name of the tree.
- * @param {string} [props.id]
- * @param {string} [props.className]
- * @param {import('react').Ref<HTMLElement>} [ref]
- */
-declare const AppTreeView: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+declare const AppTreeView: import("react").ForwardRefExoticComponent<{
+    nodes: {
+        id: string;
+        label: string;
+        icon?: string;
+        badge?: string;
+        badgeTone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+        children?: object[];
+        hasChildren?: boolean;
+        expanded?: boolean;
+        checked?: boolean;
+        disabled?: boolean;
+    }[];
+    selection?: 'none' | 'single' | 'multiple';
+    selected?: string | null;
+    onSelect?: (id: string, node: object) => void;
+    checked?: string[];
+    onCheck?: (ids: string[], detail: {
+        id: string;
+        checked: boolean;
+    }) => void;
+    loadChildren?: (node: object) => Promise<object[]>;
+    loadUrl?: string;
+    onLoadError?: (id: string, message: string) => void;
+    name?: string;
+    loadingText?: string;
+    errorText?: string;
+    ariaLabel?: string;
+    id?: string;
+    className?: string;
+} & import("react").RefAttributes<HTMLElement>>;
 export default AppTreeView;

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

@@ -1,48 +1,50 @@
 import "@webority/ui-elements/elements/wizard";
-/**
- * A multi-step flow over the shared `<wui-wizard>` element — a stepper progress
- * header, one visible step panel at a time, and a sticky Back / Skip / Next / Finish
- * footer. Give it `steps` metadata and one panel per step as children (in order).
- *
- * Uncontrolled by default (it owns the current step); pass `active` + `onStepChange`
- * to drive it. `beforeNext` gates advancing and finishing: return `false` (or a rejecting
- * promise) to block Next, or Finish on the last step, e.g. until a form validates. An
- * `optional` step shows the Skip button.
- *
- * @param {object} props
- * @param {{ key?: string, label: string, description?: string, optional?: boolean, icon?: string, status?: 'done'|'active'|'pending'|'error' }[]} props.steps
- * @param {import('react').ReactNode} props.children One panel per step, in step order.
- * @param {number} [props.active] Controlled current-step index (with `onStepChange`).
- * @param {number} [props.defaultActive=0] Initial step when uncontrolled.
- * @param {(index: number, detail: { previous: number, reason: 'next'|'back'|'skip'|'step'|'set' }) => void} [props.onStepChange]
- * @param {(detail: { index: number }) => void} [props.onFinish] Fired when Finish is pressed on the last step.
- * @param {(index: number) => void} [props.onSkip] Fired when an optional step is skipped.
- * @param {(index: number) => boolean | Promise<boolean>} [props.beforeNext] Validation gate run before advancing on Next and before Finish on the last step. Return false (or a rejecting promise) to block; the blocked step turns red.
- * @param {(index: number) => void} [props.onInvalid] Fired when advancing is blocked by beforeNext (the step is marked invalid).
- * @param {'steps'|'journey'|'icons'|'tiles'} [props.variant='steps'] Stepper header style — compact circles, the wide journey bar, large connected icon badges with a "STEP n" eyebrow, or a row of tiles (icon square, label and a Done / Current / To do line).
- * @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 {'center'|'start'} [props.align='center'] Where each step's badge, label and description sit in its column on a horizontal stepper: centred, or at the start with the line running from badge to badge. Applies to the steps and icons variants; journey, tiles and vertical steps are start-aligned already.
- * @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.
- * @param {boolean} [props.hideConnectors=false] Drop the line joining the steps, on every variant and orientation. Lines show by default.
- * @param {boolean} [props.disabled=false] Disable all navigation.
- * @param {string} [props.label='Progress'] Accessible name for the stepper.
- * @param {string} [props.backLabel='Back']
- * @param {string} [props.nextLabel='Next']
- * @param {string} [props.skipLabel='Skip']
- * @param {string} [props.finishLabel='Finish']
- * @param {boolean} [props.topBar=false] Show a 56px bar above the stepper with `barTitle`, "Step N of M" and a close button.
- * @param {string} [props.barTitle] The title at the start of the top bar.
- * @param {string} [props.closeLabel='Close'] Accessible name of the top bar's close button.
- * @param {(detail: { index: number }) => void} [props.onClose] Fired when the top bar's close button is pressed. The wizard does not close itself.
- * @param {string} [props.className]
- */
-declare const AppWizard: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+declare const AppWizard: import("react").ForwardRefExoticComponent<{
+    steps: {
+        key?: string;
+        label: string;
+        description?: string;
+        optional?: boolean;
+        icon?: string;
+        status?: 'done' | 'active' | 'pending' | 'error';
+    }[];
+    children: import('react').ReactNode;
+    active?: number;
+    defaultActive?: number;
+    onStepChange?: (index: number, detail: {
+        previous: number;
+        reason: 'next' | 'back' | 'skip' | 'step' | 'set';
+    }) => void;
+    onFinish?: (detail: {
+        index: number;
+    }) => void;
+    onSkip?: (index: number) => void;
+    beforeNext?: (index: number) => boolean | Promise<boolean>;
+    onInvalid?: (index: number) => void;
+    variant?: 'steps' | 'journey' | 'icons' | 'tiles';
+    tone?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    doneTone?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    orientation?: 'horizontal' | 'vertical';
+    align?: 'center' | 'start';
+    iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
+    size?: 'sm' | 'md' | 'lg';
+    iconSize?: number;
+    skippable?: boolean;
+    nonLinear?: boolean;
+    hideStepper?: boolean;
+    hideConnectors?: boolean;
+    disabled?: boolean;
+    label?: string;
+    backLabel?: string;
+    nextLabel?: string;
+    skipLabel?: string;
+    finishLabel?: string;
+    topBar?: boolean;
+    barTitle?: string;
+    closeLabel?: string;
+    onClose?: (detail: {
+        index: number;
+    }) => void;
+    className?: string;
+} & import("react").RefAttributes<any>>;
 export default AppWizard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.80.3",
+  "version": "0.80.5",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -27,8 +27,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.80.3",
-    "@webority/ui-elements": "0.80.3"
+    "@webority/theme": "0.80.5",
+    "@webority/ui-elements": "0.80.5"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.25.0",