grassroot
Install

DocsAPI referenceHeadlesswizard

wizard headless API

The core connector and vanilla mount are always visible. Use the framework choice to inspect native composition, props, outputs, context and hooks for the selected adapter.

Machine API

@grassroot/ui-headless-core/wizard

Core connector and vanilla API

12 exports
View source packages/ui-headless/core/src/wizard/index.ts

connectWizard

function
DeclarationView source
connectWizardts
declare function connectWizard(service: WizardService, scope: PartScope, options?: WizardConnectOptions): WizardApi;
Name
Kind
Type
Requirement
service
parameter
WizardService
required
scope
parameter
PartScope
required
options
parameter
WizardConnectOptions
optional
return
return value
WizardApi
n/a
Name
service
Kind
parameter
Type
WizardService
Requirement
required
Name
scope
Kind
parameter
Type
PartScope
Requirement
required
Name
options
Kind
parameter
Type
WizardConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
WizardApi
Requirement
n/a

mountWizard

function
DeclarationView source
mountWizardts
declare function mountWizard(container: HTMLElement, options: MountWizardOptions): WizardMount;
Name
Kind
Type
Requirement
container
parameter
HTMLElement
required
options
parameter
MountWizardOptions
required
return
return value
WizardMount
n/a
Name
container
Kind
parameter
Type
HTMLElement
Requirement
required
Name
options
Kind
parameter
Type
MountWizardOptions
Requirement
required
Name
return
Kind
return value
Type
WizardMount
Requirement
n/a

MountWizardOptions

interface
DeclarationView source
MountWizardOptionsts
interface MountWizardOptions extends WizardInput, WizardConnectOptions {}

runWizardCommand

function
DeclarationView source
runWizardCommandts
declare function runWizardCommand(command: WizardCommand, options?: WizardConnectOptions): void;
Name
Kind
Type
Requirement
command
parameter
WizardCommand
required
options
parameter
WizardConnectOptions
optional
return
return value
void
n/a
Name
command
Kind
parameter
Type
WizardCommand
Requirement
required
Name
options
Kind
parameter
Type
WizardConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
void
Requirement
n/a

wizardAnatomy

value
DeclarationView source
wizardAnatomyts
export declare const wizardAnatomy: {
  readonly scope: "wizard";
  readonly parts: readonly ["root", "rail", "tab", "panel", "back", "next"];
};
Name
Kind
Type
Requirement
parts
property
readonly ["root", "rail", "tab", "panel", "back", "next"]
required
scope
property
"wizard"
required
Name
parts
Kind
property
Type
readonly ["root", "rail", "tab", "panel", "back", "next"]
Requirement
required
Name
scope
Kind
property
Type
"wizard"
Requirement
required

WizardApi

interface
DeclarationView source
WizardApits
interface WizardApi {
  rootProps(): PartProps;
  railProps(): PartProps;
  tabProps(index: number): PartProps;
  panelProps(): PartProps;
  backProps(): PartProps;
  nextProps(): PartProps;
  readonly current: number;
  destroy(): void;
}
Name
Kind
Type
Requirement
backProps
method
() => PartProps
required
current
property
number
required
destroy
method
() => void
required
nextProps
method
() => PartProps
required
panelProps
method
() => PartProps
required
railProps
method
() => PartProps
required
rootProps
method
() => PartProps
required
tabProps
method
(index: number) => PartProps
required
Name
backProps
Kind
method
Type
() => PartProps
Requirement
required
Name
current
Kind
property
Type
number
Requirement
required
Name
destroy
Kind
method
Type
() => void
Requirement
required
Name
nextProps
Kind
method
Type
() => PartProps
Requirement
required
Name
panelProps
Kind
method
Type
() => PartProps
Requirement
required
Name
railProps
Kind
method
Type
() => PartProps
Requirement
required
Name
rootProps
Kind
method
Type
() => PartProps
Requirement
required
Name
tabProps
Kind
method
Type
(index: number) => PartProps
Requirement
required

WizardConnectOptions

interface
DeclarationView source
WizardConnectOptionsts
interface WizardConnectOptions {
  readonly onStepChange?: (index: number) => void;
  readonly onFinish?: () => void;
  readonly messages?: Partial<WizardMessages>;
}
Name
Kind
Type
Requirement
messages
property
Partial<WizardMessages>
optional
onFinish
property
() => void
optional
onStepChange
property
(index: number) => void
optional
Name
messages
Kind
property
Type
Partial<WizardMessages>
Requirement
optional
Name
onFinish
Kind
property
Type
() => void
Requirement
optional
Name
onStepChange
Kind
property
Type
(index: number) => void
Requirement
optional

wizardMessages

value
DeclarationView source
wizardMessagests
export declare const wizardMessages: WizardMessages;

WizardMessages

type
DeclarationView source
WizardMessagests
type WizardMessages = Pick<MessageTable, "progress">;

WizardMount

interface
DeclarationView source
WizardMountts
interface WizardMount {
  readonly service: WizardService;
  readonly connector: WizardApi;
  readonly root: HTMLElement;
  destroy(): void;
}
Name
Kind
Type
Requirement
connector
property
WizardApi
required
destroy
method
() => void
required
root
property
HTMLElement
required
service
property
WizardService
required
Name
connector
Kind
property
Type
WizardApi
Requirement
required
Name
destroy
Kind
method
Type
() => void
Requirement
required
Name
root
Kind
property
Type
HTMLElement
Requirement
required
Name
service
Kind
property
Type
WizardService
Requirement
required

WizardPart

type
DeclarationView source
WizardPartts
type WizardPart = (typeof wizardAnatomy.parts)[number];

WizardService

type
DeclarationView source
WizardServicets
type WizardService = Service<WizardInput, "ready", WizardContext, WizardEvent, WizardCommand>;

Framework adapters

Each panel keeps its adapter's public vocabulary. React compound exports, Vue composables, standalone Angular declarations, Svelte components, and Solid hooks stay native to their framework.

React example follows below.

React imports

@grassroot/ui-headless-react/wizardts
import { Root } from "@grassroot/ui-headless-react/wizard";

Vue imports

@grassroot/ui-headless-vue/wizardts
<script setup lang="ts">
import { Root } from "@grassroot/ui-headless-vue/wizard";
</script>

Angular imports

@grassroot/ui-headless-angular/wizardts
import { GrWizardRoot } from "@grassroot/ui-headless-angular/wizard";

Svelte imports

@grassroot/ui-headless-svelte/wizardts
<script lang="ts">
  import { Root } from "@grassroot/ui-headless-svelte/wizard";
</script>

Solid imports

@grassroot/ui-headless-solid/wizardts
import { Root } from "@grassroot/ui-headless-solid/wizard";

@grassroot/ui-headless-react/wizard

React adapter

3 exports
View source packages/ui-headless/react/src/wizard/index.ts

Root

value
DeclarationView source
Rootts
export declare const Root: import("react").ForwardRefExoticComponent<WizardRootProps & import("react").RefAttributes<HTMLDivElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

useWizard

function
DeclarationView source
useWizardts
declare function useWizard(input: WizardInput, options?: WizardOptions): {
  service: WizardService;
  connector: WizardApi;
  snapshot: WizardSnapshot;
};
Name
Kind
Type
Requirement
input
parameter
WizardInput
required
options
parameter
WizardOptions
optional
return
return value
{ service: WizardService; connector: WizardApi; snapshot: WizardSnapshot; }
n/a
Name
input
Kind
parameter
Type
WizardInput
Requirement
required
Name
options
Kind
parameter
Type
WizardOptions
Requirement
optional
Name
return
Kind
return value
Type
{ service: WizardService; connector: WizardApi; snapshot: WizardSnapshot; }
Requirement
n/a

WizardRootProps

interface
DeclarationView source
WizardRootPropsts
interface WizardRootProps extends HTMLAttributes<HTMLDivElement>, WizardInput {
  readonly labels?: readonly string[];
  readonly onStepChange?: (index: number) => void;
  readonly onFinish?: () => void;
  readonly children?: ReactNode;
}
Name
Kind
Type
Requirement
children
property
ReactNode
optional
labels
property
readonly string[]
optional
onFinish
property
() => void
optional
onStepChange
property
(index: number) => void
optional
Name
children
Kind
property
Type
ReactNode
Requirement
optional
Name
labels
Kind
property
Type
readonly string[]
Requirement
optional
Name
onFinish
Kind
property
Type
() => void
Requirement
optional
Name
onStepChange
Kind
property
Type
(index: number) => void
Requirement
optional

@grassroot/ui-headless-vue/wizard

Vue adapter

1 exports
View source packages/ui-headless/vue/src/wizard/index.ts

Root

value
DeclarationView source
Rootts
export declare const Root: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
  stepCount: {
    type: NumberConstructor;
    required: true;
  };
  step: NumberConstructor;
  defaultStep: NumberConstructor;
  labels: PropType<readonly string[]>;
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
  [key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
  stepChange: (_value: number) => true;
  finish: () => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
  stepCount: {
    type: NumberConstructor;
    required: true;
  };
  step: NumberConstructor;
  defaultStep: NumberConstructor;
  labels: PropType<readonly string[]>;
}>> & Readonly<{
  onFinish?: (() => any) | undefined;
  onStepChange?: ((_value: number) => any) | undefined;
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

@grassroot/ui-headless-angular/wizard

Angular adapter

1 exports
View source packages/ui-headless/angular/src/wizard/index.ts

GrWizardRoot

class
DeclarationView source
GrWizardRootts
export declare class GrWizardRoot implements OnDestroy {
    readonly stepCount: import("@angular/core").InputSignal<number>;
    readonly step: import("@angular/core").InputSignal<number | undefined>;
    readonly defaultStep: import("@angular/core").InputSignal<number | undefined>;
    readonly stepChange: import("@angular/core").OutputEmitterRef<number>;
    readonly finish: import("@angular/core").OutputEmitterRef<void>;
    private readonly host;
    private readonly parts;
    private last;
    private readonly store;
    constructor();
    private apply;
    private render;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<GrWizardRoot, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<GrWizardRoot, "gr-wizard-root", never, { "stepCount": { "alias": "stepCount"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "defaultStep": { "alias": "defaultStep"; "required": false; "isSignal": true; }; }, { "stepChange": "stepChange"; "finish": "finish"; }, never, never, true, never>;
}
Name
Kind
Type
Requirement
apply
property
any
required
defaultStep
property
import("@angular/core").InputSignal<number | undefined>
required
finish
property
import("@angular/core").OutputEmitterRef<void>
required
host
property
any
required
last
property
any
required
ngOnDestroy
method
() => void
required
ɵcmp
property
i0.ɵɵComponentDeclaration<GrWizardRoot, "gr-wizard-root", never, { "stepCount": { "alias": "stepCount"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "defaultStep": { "alias": "defaultStep"; "required": false; "isSignal": true; }; }, { "stepChange": "stepChange"; "finish": "finish"; }, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrWizardRoot, never>
required
parts
property
any
required
render
property
any
required
step
property
import("@angular/core").InputSignal<number | undefined>
required
stepChange
property
import("@angular/core").OutputEmitterRef<number>
required
stepCount
property
import("@angular/core").InputSignal<number>
required
store
property
any
required
Name
apply
Kind
property
Type
any
Requirement
required
Name
defaultStep
Kind
property
Type
import("@angular/core").InputSignal<number | undefined>
Requirement
required
Name
finish
Kind
property
Type
import("@angular/core").OutputEmitterRef<void>
Requirement
required
Name
host
Kind
property
Type
any
Requirement
required
Name
last
Kind
property
Type
any
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵcmp
Kind
property
Type
i0.ɵɵComponentDeclaration<GrWizardRoot, "gr-wizard-root", never, { "stepCount": { "alias": "stepCount"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "defaultStep": { "alias": "defaultStep"; "required": false; "isSignal": true; }; }, { "stepChange": "stepChange"; "finish": "finish"; }, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrWizardRoot, never>
Requirement
required
Name
parts
Kind
property
Type
any
Requirement
required
Name
render
Kind
property
Type
any
Requirement
required
Name
step
Kind
property
Type
import("@angular/core").InputSignal<number | undefined>
Requirement
required
Name
stepChange
Kind
property
Type
import("@angular/core").OutputEmitterRef<number>
Requirement
required
Name
stepCount
Kind
property
Type
import("@angular/core").InputSignal<number>
Requirement
required
Name
store
Kind
property
Type
any
Requirement
required

@grassroot/ui-headless-svelte/wizard

Svelte adapter

1 exports
View source packages/ui-headless/svelte/src/wizard/index.ts

Root

value
DeclarationView source
Rootts
export declare const Root: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a

@grassroot/ui-headless-solid/wizard

Solid adapter

1 exports
View source packages/ui-headless/solid/src/wizard/index.tsx

Root

function
DeclarationView source
Rootts
export declare function Root(props: WizardInput & {
    labels?: readonly string[];
    onStepChange?: (value: number) => void;
    onFinish?: () => void;
    children?: JSX.Element;
}): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
WizardInput & { labels?: readonly string[]; onStepChange?: (value: number) => void; onFinish?: () => void; children?: JSX.Element; }
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
WizardInput & { labels?: readonly string[]; onStepChange?: (value: number) => void; onFinish?: () => void; children?: JSX.Element; }
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a