- Name
index- Kind
- property
- Type
number- Requirement
- required
DocsAPI referenceUI machinescarousel
carousel machine
The public state machine contract for @grassroot/ui-machines/carousel. The machine owns behaviour; the matching headless layer owns composition.
@grassroot/ui-machines/carousel
Package
Service example
carousel.tsts
import { createService } from "@grassroot/statechart";import { carouselMachine } from "@grassroot/ui-machines/carousel"; const service = createService(carouselMachine, { input: {} });service.start();service.send({ type: "…" });service.stop();13 of 13
Exports
CarouselChangeReason
typeCarouselChangeReasonts
type CarouselChangeReason = "pointer" | "keyboard" | "programmatic";CarouselCommand
typeCarouselCommandts
type CarouselCommand = CommandObject & { readonly type: "INDEX_CHANGE_REQUEST"; readonly index: number; readonly reason: CarouselChangeReason;};Name
Kind
Type
Requirement
indexproperty
numberrequired
reasonproperty
CarouselChangeReasonrequired
typeproperty
stringrequired
- Name
reason- Kind
- property
- Type
CarouselChangeReason- Requirement
- required
- Name
type- Kind
- property
- Type
string- Requirement
- required
CarouselContext
typeCarouselContextts
type CarouselContext = { readonly mode: "controlled" | "uncontrolled"; readonly index: number;};Name
Kind
Type
Requirement
indexproperty
numberrequired
modeproperty
"controlled" | "uncontrolled"required
- Name
index- Kind
- property
- Type
number- Requirement
- required
- Name
mode- Kind
- property
- Type
"controlled" | "uncontrolled"- Requirement
- required
CarouselDiagnosticCodes
valueCarouselDiagnosticCodests
export declare const CarouselDiagnosticCodes: readonly DiagnosticCatalogueEntry[];CarouselEvent
typeCarouselEventts
type CarouselEvent = { readonly type: "NEXT"; readonly reason: CarouselChangeReason;} | { readonly type: "PREV"; readonly reason: CarouselChangeReason;} | { readonly type: "GO"; readonly index: number; readonly reason: CarouselChangeReason;} | { readonly type: "RESET";};CarouselInput
typeCarouselInputts
type CarouselInput = { /** Controlled committed index. Defining it fixes controlled mode. */ readonly index?: number; /** Uncontrolled initial index. @default 0 */ readonly defaultIndex?: number; /** Slide count from the host. Empty count resolves to index 0. @default 0 */ readonly slideCount?: number; /** Wrap past the ends instead of clamping. @default false */ readonly loop?: boolean; /** Accessible name. Presentation-only; the machine ignores it. @default "Carousel" */ readonly label?: string;};Name
Kind
Type
Requirement
Description
defaultIndexproperty
numberoptional
Uncontrolled initial index.
indexproperty
numberoptional
Controlled committed index. Defining it fixes controlled mode.
labelproperty
stringoptional
Accessible name. Presentation-only; the machine ignores it.
loopproperty
booleanoptional
Wrap past the ends instead of clamping.
slideCountproperty
numberoptional
Slide count from the host. Empty count resolves to index 0.
- Name
defaultIndex- Kind
- property
- Type
number- Requirement
- optional
- Description
- Uncontrolled initial index.
- Name
index- Kind
- property
- Type
number- Requirement
- optional
- Description
- Controlled committed index. Defining it fixes controlled mode.
- Name
label- Kind
- property
- Type
string- Requirement
- optional
- Description
- Accessible name. Presentation-only; the machine ignores it.
- Name
loop- Kind
- property
- Type
boolean- Requirement
- optional
- Description
- Wrap past the ends instead of clamping.
- Name
slideCount- Kind
- property
- Type
number- Requirement
- optional
- Description
- Slide count from the host. Empty count resolves to index 0.
carouselMachine
valuecarouselMachinets
export declare const carouselMachine: CarouselMachine;CarouselMachine
typeCarouselMachinets
type CarouselMachine = Machine<CarouselInput, CarouselStateValue, CarouselContext, CarouselEvent, CarouselCommand>;carouselReplaySequence
valuecarouselReplaySequencets
export declare const carouselReplaySequence: readonly CarouselEvent[];carouselSelectors
valuecarouselSelectorsts
export declare const carouselSelectors: { index: (snapshot: CarouselSnapshot) => number; mode: (snapshot: CarouselSnapshot) => "controlled" | "uncontrolled";};Name
Kind
Type
Requirement
indexproperty
(snapshot: CarouselSnapshot) => numberrequired
modeproperty
(snapshot: CarouselSnapshot) => "controlled" | "uncontrolled"required
- Name
index- Kind
- property
- Type
(snapshot: CarouselSnapshot) => number- Requirement
- required
- Name
mode- Kind
- property
- Type
(snapshot: CarouselSnapshot) => "controlled" | "uncontrolled"- Requirement
- required
CarouselSnapshot
typeCarouselSnapshotts
type CarouselSnapshot = Snapshot<CarouselStateValue, CarouselContext>;CarouselStateValue
typeCarouselStateValuets
type CarouselStateValue = "active";clampCarouselIndex
functionDuplicate of the frozen ui-core clamp. Do not import `@grassroot/ui-core` from this module; tests prove equivalence against `resolveCarouselIndex`.
clampCarouselIndexts
declare function clampCarouselIndex(index: number, count: number, loop: boolean): number;Name
Kind
Type
Requirement
indexparameter
numberrequired
countparameter
numberrequired
loopparameter
booleanrequired
returnreturn value
numbern/a
- Name
index- Kind
- parameter
- Type
number- Requirement
- required
- Name
count- Kind
- parameter
- Type
number- Requirement
- required
- Name
loop- Kind
- parameter
- Type
boolean- Requirement
- required
- Name
return- Kind
- return value
- Type
number- Requirement
- n/a