@destyler/tour 0.0.7-beta.7 → 0.0.7-beta.9

package/dist/index.d.ts

@@ -1,378 +1,383 @@
-import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { DirectionProperty, CommonProperties, Required, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
-import * as _zag_js_core from '@zag-js/core';
-import { StateMachine, Machine } from '@zag-js/core';
-import { InteractOutsideHandlers } from '@zag-js/dismissable';
-export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/dismissable';
-import { Placement, AnchorRect } from '@zag-js/popper';
-
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"content" | "actionTrigger" | "closeTrigger" | "progressText" | "title" | "description" | "positioner" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
+import * as _destyler_anatomy0 from "@destyler/anatomy";
+import { AnchorRect, Placement } from "@destyler/popper";
+import * as _destyler_xstate0 from "@destyler/xstate";
+import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
+import { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from "@destyler/dismissable";
+import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, Required, RequiredBy } from "@destyler/types";
 
+//#region src/anatomy.d.ts
+declare const anatomy: _destyler_anatomy0.AnatomyInstance<"content" | "actionTrigger" | "closeTrigger" | "progressText" | "title" | "description" | "positioner" | "arrow" | "arrowTip" | "backdrop" | "spotlight">;
+//#endregion
+//#region src/utils/rect.d.ts
 interface Point {
-    x: number;
-    y: number;
+  x: number;
+  y: number;
 }
-
+//#endregion
+//#region src/types.d.ts
 interface StepEffectArgs {
-    next: () => void;
-    goto: (id: string) => void;
-    dismiss: () => void;
-    show: () => void;
-    update: (data: Partial<StepBaseDetails>) => void;
-    target?: (() => HTMLElement | null) | undefined;
+  next: () => void;
+  goto: (id: string) => void;
+  dismiss: () => void;
+  show: () => void;
+  update: (data: Partial<StepBaseDetails>) => void;
+  target?: (() => HTMLElement | null) | undefined;
 }
 type StepType = 'tooltip' | 'dialog' | 'wait' | 'floating';
 type StepActionType = 'next' | 'prev' | 'dismiss';
 type StepActionFn = (actionMap: StepActionMap) => void;
 type StepPlacement = Placement | 'center';
 interface StepAction {
-    /**
-     * The label of the action
-     */
-    label: string;
-    /**
-     * The action to perform
-     */
-    action?: StepActionType | StepActionFn | undefined;
-    /**
-     * The attributes to apply to the action trigger
-     */
-    attrs?: Record<string, any> | undefined;
+  /**
+   * The label of the action
+   */
+  label: string;
+  /**
+   * The action to perform
+   */
+  action?: StepActionType | StepActionFn | undefined;
+  /**
+   * The attributes to apply to the action trigger
+   */
+  attrs?: Record<string, any> | undefined;
 }
 interface StepBaseDetails {
-    /**
-     * The type of the step. If no target is provided,
-     * the step will be treated as a modal step.
-     */
-    type?: StepType | undefined;
-    /**
-     * Function to return the target element to highlight
-     */
-    target?: () => HTMLElement | null;
-    /**
-     * The title of the step
-     */
-    title: any;
-    /**
-     * The description of the step
-     */
-    description: any;
-    /**
-     * The placement of the step
-     */
-    placement?: StepPlacement | undefined;
-    /**
-     * The offset between the content and the target
-     */
-    offset?: {
-        mainAxis?: number;
-        crossAxis?: number;
-    } | undefined;
-    /**
-     * Additional metadata of the step
-     */
-    meta?: Record<string, any> | undefined;
-    /**
-     * Whether to show a backdrop behind the step
-     */
-    backdrop?: boolean | undefined;
-    /**
-     * Whether to show an arrow tip on the step
-     */
-    arrow?: boolean | undefined;
-    /**
-     * The actions to perform when the step is completed
-     */
-    actions?: StepAction[] | undefined;
+  /**
+   * The type of the step. If no target is provided,
+   * the step will be treated as a modal step.
+   */
+  type?: StepType | undefined;
+  /**
+   * Function to return the target element to highlight
+   */
+  target?: () => HTMLElement | null;
+  /**
+   * The title of the step
+   */
+  title: any;
+  /**
+   * The description of the step
+   */
+  description: any;
+  /**
+   * The placement of the step
+   */
+  placement?: StepPlacement | undefined;
+  /**
+   * The offset between the content and the target
+   */
+  offset?: {
+    mainAxis?: number;
+    crossAxis?: number;
+  } | undefined;
+  /**
+   * Additional metadata of the step
+   */
+  meta?: Record<string, any> | undefined;
+  /**
+   * Whether to show a backdrop behind the step
+   */
+  backdrop?: boolean | undefined;
+  /**
+   * Whether to show an arrow tip on the step
+   */
+  arrow?: boolean | undefined;
+  /**
+   * The actions to perform when the step is completed
+   */
+  actions?: StepAction[] | undefined;
 }
 interface StepDetails extends StepBaseDetails {
-    /**
-     * The unique identifier of the step
-     */
-    id: string;
-    /**
-     * The effect to run before the step is shown
-     */
-    effect?: (args: StepEffectArgs) => VoidFunction;
+  /**
+   * The unique identifier of the step
+   */
+  id: string;
+  /**
+   * The effect to run before the step is shown
+   */
+  effect?: (args: StepEffectArgs) => VoidFunction;
 }
 interface StepChangeDetails {
-    stepId: string | null;
-    stepIndex: number;
-    totalSteps: number;
-    complete: boolean;
-    progress: number;
+  stepId: string | null;
+  stepIndex: number;
+  totalSteps: number;
+  complete: boolean;
+  progress: number;
 }
 type StepStatus = 'idle' | 'started' | 'skipped' | 'completed' | 'dismissed' | 'not-found';
 interface StepActionMap {
-    next: () => void;
-    prev: () => void;
-    dismiss: () => void;
-    goto: (id: string) => void;
+  next: () => void;
+  prev: () => void;
+  dismiss: () => void;
+  goto: (id: string) => void;
 }
 interface StatusChangeDetails {
-    status: StepStatus;
-    stepId: string | null;
-    stepIndex: number;
+  status: StepStatus;
+  stepId: string | null;
+  stepIndex: number;
 }
 interface ProgressTextDetails {
-    current: number;
-    total: number;
+  current: number;
+  total: number;
 }
 interface IntlTranslations {
-    progressText?: (details: ProgressTextDetails) => string;
-    nextStep?: string | undefined;
-    prevStep?: string | undefined;
-    close?: string | undefined;
-    skip?: string | undefined;
+  progressText?: (details: ProgressTextDetails) => string;
+  nextStep?: string | undefined;
+  prevStep?: string | undefined;
+  close?: string | undefined;
+  skip?: string | undefined;
 }
 type ElementIds = Partial<{
-    content: string;
-    title: string;
-    description: string;
-    positioner: string;
-    backdrop: string;
-    arrow: string;
+  content: string;
+  title: string;
+  description: string;
+  positioner: string;
+  backdrop: string;
+  arrow: string;
 }>;
 interface PublicContext extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
-    /**
-     * The ids of the elements in the tour. Useful for composition.
-     */
-    ids?: ElementIds | undefined;
-    /**
-     * The steps of the tour
-     */
-    steps: StepDetails[];
-    /**
-     * The id of the currently highlighted step
-     */
-    stepId: string | null;
-    /**
-     * Callback when the highlighted step changes
-     */
-    onStepChange?: (details: StepChangeDetails) => void;
-    /**
-     * Callback when the tour is opened or closed
-     */
-    onStatusChange?: (details: StatusChangeDetails) => void;
-    /**
-     * Whether to close the tour when the user clicks outside the tour
-     * @default true
-     */
-    closeOnInteractOutside: boolean;
-    /**
-     * Whether to close the tour when the user presses the escape key
-     * @default true
-     */
-    closeOnEscape: boolean;
-    /**
-     * Whether to allow keyboard navigation (right/left arrow keys to navigate between steps)
-     * @default true
-     */
-    keyboardNavigation: boolean;
-    /**
-     * Prevents interaction with the rest of the page while the tour is open
-     * @default false
-     */
-    preventInteraction: boolean;
-    /**
-     * The offsets to apply to the spotlight
-     * @default "{ x: 10, y: 10 }"
-     */
-    spotlightOffset: Point;
-    /**
-     * The radius of the spotlight clip path
-     * @default 4
-     */
-    spotlightRadius: number;
-    /**
-     * The translations for the tour
-     */
-    translations: IntlTranslations;
+  /**
+   * The ids of the elements in the tour. Useful for composition.
+   */
+  ids?: ElementIds | undefined;
+  /**
+   * The steps of the tour
+   */
+  steps: StepDetails[];
+  /**
+   * The id of the currently highlighted step
+   */
+  stepId: string | null;
+  /**
+   * Callback when the highlighted step changes
+   */
+  onStepChange?: (details: StepChangeDetails) => void;
+  /**
+   * Callback when the tour is opened or closed
+   */
+  onStatusChange?: (details: StatusChangeDetails) => void;
+  /**
+   * Whether to close the tour when the user clicks outside the tour
+   * @default true
+   */
+  closeOnInteractOutside: boolean;
+  /**
+   * Whether to close the tour when the user presses the escape key
+   * @default true
+   */
+  closeOnEscape: boolean;
+  /**
+   * Whether to allow keyboard navigation (right/left arrow keys to navigate between steps)
+   * @default true
+   */
+  keyboardNavigation: boolean;
+  /**
+   * Prevents interaction with the rest of the page while the tour is open
+   * @default false
+   */
+  preventInteraction: boolean;
+  /**
+   * The offsets to apply to the spotlight
+   * @default "{ x: 10, y: 10 }"
+   */
+  spotlightOffset: Point;
+  /**
+   * The radius of the spotlight clip path
+   * @default 4
+   */
+  spotlightRadius: number;
+  /**
+   * The translations for the tour
+   */
+  translations: IntlTranslations;
 }
 interface PrivateContext {
-    /**
-     * @internal
-     * The rect of the current step's target element
-     */
-    targetRect: Required<AnchorRect>;
-    /**
-     * @internal
-     * The current placement of the menu
-     */
-    currentPlacement?: StepPlacement | undefined;
-    /**
-     * @internal
-     * The size of the boundary element (default to the window size)
-     */
-    boundarySize: {
-        width: number;
-        height: number;
-    };
-    /**
-     * @internal
-     * The function to cleanup the target attributes
-     */
-    _targetCleanup?: VoidFunction | undefined;
-    /**
-     * @internal
-     * The function to cleanup the step effects
-     */
-    _effectCleanup?: VoidFunction | undefined;
-    /**
-     * @internal
-     * The resolved target element
-     */
-    resolvedTarget: {
-        value: HTMLElement | null;
-    };
+  /**
+   * @internal
+   * The rect of the current step's target element
+   */
+  targetRect: Required<AnchorRect>;
+  /**
+   * @internal
+   * The current placement of the menu
+   */
+  currentPlacement?: StepPlacement | undefined;
+  /**
+   * @internal
+   * The size of the boundary element (default to the window size)
+   */
+  boundarySize: {
+    width: number;
+    height: number;
+  };
+  /**
+   * @internal
+   * The function to cleanup the target attributes
+   */
+  _targetCleanup?: VoidFunction | undefined;
+  /**
+   * @internal
+   * The function to cleanup the step effects
+   */
+  _effectCleanup?: VoidFunction | undefined;
+  /**
+   * @internal
+   * The resolved target element
+   */
+  resolvedTarget: {
+    value: HTMLElement | null;
+  };
 }
 type ComputedContext = Readonly<{
-    /**
-     * The current step details
-     */
-    step: StepDetails | null;
-    /**
-     * The index of the current step
-     */
-    stepIndex: number;
-    /**
-     * Whether there is a next step
-     */
-    hasNextStep: boolean;
-    /**
-     * Whether there is a previous step
-     */
-    hasPrevStep: boolean;
-    /**
-     * Whether the current step is the first step
-     */
-    isFirstStep: boolean;
-    /**
-     * Whether the current step is the last step
-     */
-    isLastStep: boolean;
+  /**
+   * The current step details
+   */
+  step: StepDetails | null;
+  /**
+   * The index of the current step
+   */
+  stepIndex: number;
+  /**
+   * Whether there is a next step
+   */
+  hasNextStep: boolean;
+  /**
+   * Whether there is a previous step
+   */
+  hasPrevStep: boolean;
+  /**
+   * Whether the current step is the first step
+   */
+  isFirstStep: boolean;
+  /**
+   * Whether the current step is the last step
+   */
+  isLastStep: boolean;
 }>;
 type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
-}
+interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
 interface MachineState {
-    tags: 'closed' | 'open';
-    value: 'tour.inactive' | 'tour.active' | 'step.waiting' | 'target.resolving' | 'target.scrolling';
+  tags: 'closed' | 'open';
+  value: 'tour.inactive' | 'tour.active' | 'step.waiting' | 'target.resolving' | 'target.scrolling';
 }
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+type State = XState<MachineContext, MachineState>;
+type Send = XSend<AnyEventObject>;
+type Service = Machine<MachineContext, MachineState, AnyEventObject>;
 interface StepActionTriggerProps {
-    action: StepAction;
+  action: StepAction;
 }
 interface MachineApi<T extends PropTypes = PropTypes> {
-    /**
-     * Whether the tour is open
-     */
-    open: boolean;
-    /**
-     * The total number of steps
-     */
-    totalSteps: number;
-    /**
-     * The index of the current step
-     */
-    stepIndex: number;
-    /**
-     * The current step details
-     */
-    step: StepDetails | null;
-    /**
-     * Whether there is a next step
-     */
-    hasNextStep: boolean;
-    /**
-     * Whether there is a previous step
-     */
-    hasPrevStep: boolean;
-    /**
-     * Whether the current step is the first step
-     */
-    firstStep: boolean;
-    /**
-     * Whether the current step is the last step
-     */
-    lastStep: boolean;
-    /**
-     * Add a new step to the tour
-     */
-    addStep: (step: StepDetails) => void;
-    /**
-     * Remove a step from the tour
-     */
-    removeStep: (id: string) => void;
-    /**
-     * Update a step in the tour with partial details
-     */
-    updateStep: (id: string, stepOverrides: Partial<StepDetails>) => void;
-    /**
-     * Set the steps of the tour
-     */
-    setSteps: (steps: StepDetails[]) => void;
-    /**
-     * Set the current step of the tour
-     */
-    setStep: (id: string) => void;
-    /**
-     * Start the tour at a specific step (or the first step if not provided)
-     */
-    start: (id?: string) => void;
-    /**
-     * Check if a step is valid
-     */
-    isValidStep: (id: string) => boolean;
-    /**
-     * Check if a step is visible
-     */
-    isCurrentStep: (id: string) => boolean;
-    /**
-     * Move to the next step
-     */
-    next: () => void;
-    /**
-     * Move to the previous step
-     */
-    prev: () => void;
-    /**
-     * Returns the progress text
-     */
-    getProgressText: () => string;
-    /**
-     * Returns the progress percent
-     */
-    getProgressPercent: () => number;
-    getBackdropProps: () => T['element'];
-    getSpotlightProps: () => T['element'];
-    getProgressTextProps: () => T['element'];
-    getPositionerProps: () => T['element'];
-    getArrowProps: () => T['element'];
-    getArrowTipProps: () => T['element'];
-    getContentProps: () => T['element'];
-    getTitleProps: () => T['element'];
-    getDescriptionProps: () => T['element'];
-    getCloseTriggerProps: () => T['button'];
-    getActionTriggerProps: (props: StepActionTriggerProps) => T['button'];
+  /**
+   * Whether the tour is open
+   */
+  open: boolean;
+  /**
+   * The total number of steps
+   */
+  totalSteps: number;
+  /**
+   * The index of the current step
+   */
+  stepIndex: number;
+  /**
+   * The current step details
+   */
+  step: StepDetails | null;
+  /**
+   * Whether there is a next step
+   */
+  hasNextStep: boolean;
+  /**
+   * Whether there is a previous step
+   */
+  hasPrevStep: boolean;
+  /**
+   * Whether the current step is the first step
+   */
+  firstStep: boolean;
+  /**
+   * Whether the current step is the last step
+   */
+  lastStep: boolean;
+  /**
+   * Add a new step to the tour
+   */
+  addStep: (step: StepDetails) => void;
+  /**
+   * Remove a step from the tour
+   */
+  removeStep: (id: string) => void;
+  /**
+   * Update a step in the tour with partial details
+   */
+  updateStep: (id: string, stepOverrides: Partial<StepDetails>) => void;
+  /**
+   * Set the steps of the tour
+   */
+  setSteps: (steps: StepDetails[]) => void;
+  /**
+   * Set the current step of the tour
+   */
+  setStep: (id: string) => void;
+  /**
+   * Start the tour at a specific step (or the first step if not provided)
+   */
+  start: (id?: string) => void;
+  /**
+   * Check if a step is valid
+   */
+  isValidStep: (id: string) => boolean;
+  /**
+   * Check if a step is visible
+   */
+  isCurrentStep: (id: string) => boolean;
+  /**
+   * Move to the next step
+   */
+  next: () => void;
+  /**
+   * Move to the previous step
+   */
+  prev: () => void;
+  /**
+   * Returns the progress text
+   */
+  getProgressText: () => string;
+  /**
+   * Returns the progress percent
+   */
+  getProgressPercent: () => number;
+  getBackdropProps: () => T['element'];
+  getSpotlightProps: () => T['element'];
+  getProgressTextProps: () => T['element'];
+  getPositionerProps: () => T['element'];
+  getArrowProps: () => T['element'];
+  getArrowTipProps: () => T['element'];
+  getContentProps: () => T['element'];
+  getTitleProps: () => T['element'];
+  getDescriptionProps: () => T['element'];
+  getCloseTriggerProps: () => T['button'];
+  getActionTriggerProps: (props: StepActionTriggerProps) => T['button'];
 }
-
+//#endregion
+//#region src/connect.d.ts
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
-
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-
+//#endregion
+//#region src/machine.d.ts
+declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+//#endregion
+//#region src/props.d.ts
 declare const props: ("ids" | "steps" | "stepId" | "onStepChange" | "onStatusChange" | "closeOnInteractOutside" | "closeOnEscape" | "keyboardNavigation" | "preventInteraction" | "spotlightOffset" | "spotlightRadius" | "translations" | "dir" | "id" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside")[];
 declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "ids" | "steps" | "stepId" | "onStepChange" | "onStatusChange" | "closeOnInteractOutside" | "closeOnEscape" | "keyboardNavigation" | "preventInteraction" | "spotlightOffset" | "spotlightRadius" | "translations" | "dir" | "id" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
-
+//#endregion
+//#region src/utils/wait.d.ts
 interface WaitOptions {
-    timeout: number;
-    rootNode?: Document | ShadowRoot | undefined;
+  timeout: number;
+  rootNode?: Document | ShadowRoot | undefined;
 }
 type WaitForPromiseReturn<T> = [Promise<T>, () => void];
 declare function waitForElement(target: () => HTMLElement, options: WaitOptions): WaitForPromiseReturn<HTMLElement>;
 type EditableElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 declare function waitForElementValue(target: () => EditableElement | null, value: string, options: WaitOptions): WaitForPromiseReturn<void>;
-
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type IntlTranslations, type Point, type ProgressTextDetails, type Service, type StatusChangeDetails, type StepAction, type StepActionMap, type StepActionTriggerProps, type StepBaseDetails, type StepChangeDetails, type StepDetails, type StepEffectArgs, type StepPlacement, type StepStatus, type StepType, type WaitOptions, anatomy, connect, machine, props, splitProps, waitForElement, waitForElementValue };
+//#endregion
+export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type IntlTranslations, type Point, type PointerDownOutsideEvent, type ProgressTextDetails, type Service, type StatusChangeDetails, type StepAction, type StepActionMap, type StepActionTriggerProps, type StepBaseDetails, type StepChangeDetails, type StepDetails, type StepEffectArgs, type StepPlacement, type StepStatus, type StepType, WaitOptions, anatomy, connect, machine, props, splitProps, waitForElement, waitForElementValue };