@privyid/persona 0.9.0 → 0.11.0

package/dist/components/toggle/Toggle.vue

@@ -105,7 +105,7 @@ export default defineComponent({
     event: "update:modelValue"
   },
   emits: ["update:modelValue", "change"],
-  setup(props) {
+  setup(props, { slots }) {
     const model = useVModel(props);
     const classNames = computed(() => {
       const result = [];
@@ -117,6 +117,8 @@ export default defineComponent({
         result.push("toggle--disabled");
       if (props.readonly)
         result.push("toggle--readonly");
+      if (slots.default)
+        result.push("toggle--labeled");
       return result;
     });
     function toggle() {
@@ -134,14 +136,17 @@ export default defineComponent({
 
 <style lang="postcss">
 .toggle {
-  @apply inline-flex cursor-pointer relative items-center select-none;
+  @apply inline-flex cursor-pointer relative items-center select-none text-default;
+  @apply dark:text-dark-default;
 
   &__switch {
-    @apply flex items-center justify-center relative bg-inactive border-subtle mr-4;
+    @apply flex items-center justify-center relative bg-subtle border-default;
+    @apply dark:bg-dark-subtle dark:border-dark-default;
   }
 
   &__pointer {
     @apply block absolute appearance-none cursor-pointer will-change-transform transition-transform -translate-x-1/2 bg-default;
+    @apply dark:bg-dark-layer-2;
   }
 
   &--disabled {
@@ -150,7 +155,8 @@ export default defineComponent({
 
   &&--pill {
     .toggle__switch {
-      @apply w-9 h-5 rounded-full text-[0.5rem] text-on-emphasis border;
+      @apply w-9 h-5 rounded-full text-[0.5rem] text-state-emphasis border;
+      @apply dark:text-dark-state-emphasis;
     }
 
     .toggle__label {
@@ -163,7 +169,8 @@ export default defineComponent({
 
     &.toggle--checked {
       .toggle__switch {
-        @apply bg-accent-emphasis border-accent-emphasis;
+        @apply bg-info-emphasis border-info-emphasis;
+        @apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis;
       }
 
       .toggle__pointer {
@@ -174,7 +181,7 @@ export default defineComponent({
 
   &&--flat {
     .toggle__switch {
-      @apply flex-row-reverse border-2 rounded-xs min-h-[1.5rem] min-w-[2.5rem];
+      @apply flex-row-reverse border-2 rounded-sm min-h-[1.5rem] min-w-[2.5rem];
     }
 
     .toggle__label {
@@ -183,19 +190,22 @@ export default defineComponent({
 
     .toggle__checked-label {
       @apply text-muted;
+      @apply dark:text-dark-muted;
     }
 
     .toggle__pointer {
-      @apply w-1/2 h-full rounded-sm z-[1];
+      @apply w-1/2 h-full rounded-xs z-[1];
     }
 
     &.toggle--checked {
       .toggle__checked-label {
         @apply text-default;
+        @apply dark:text-dark-default;
       }
 
       .toggle__unchecked-label {
         @apply text-muted;
+        @apply dark:text-dark-muted;
       }
 
       .toggle__pointer {
@@ -206,10 +216,18 @@ export default defineComponent({
 
   .dropdown__menu & {
     @apply px-3 py-2 cursor-pointer text-default w-full select-none text-left flex justify-between items-center flex-row-reverse;
+    @apply dark:text-dark-default;
 
     &:hover,
     &:focus-visible {
-      @apply bg-inactive;
+      @apply bg-subtle;
+      @apply dark:bg-dark-subtle;
+    }
+  }
+
+  &&--labeled {
+    .toggle__switch {
+      @apply mr-4;
     }
   }
 }

package/dist/components/toggle/Toggle.vue.d.ts

@@ -1,20 +1,20 @@
 import { PropType } from 'vue-demi';
-declare type StyleVariant = 'pill' | 'flat';
+type StyleVariant = 'pill' | 'flat';
 declare const _default: import("vue-demi").DefineComponent<{
     variant: {
         type: PropType<StyleVariant>;
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -51,15 +51,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (NumberConstructor | ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -87,15 +87,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    value: string | number | boolean | unknown[] | Record<string, any> | Date;
+    value: string | number | boolean | unknown[] | Date | Record<string, any>;
     variant: StyleVariant;
+    modelValue: string | number | boolean | unknown[] | Date | Record<string, any>;
     disabled: boolean;
-    modelValue: string | number | boolean | unknown[] | Record<string, any> | Date;
     readonly: boolean;
-    uncheckedValue: string | number | boolean | unknown[] | Record<string, any> | Date;
+    uncheckedValue: string | number | boolean | unknown[] | Date | Record<string, any>;
     checked: boolean;
     checkedLabel: string;
     uncheckedLabel: string;

package/dist/components/tooltip/Tooltip.vue

@@ -137,18 +137,22 @@ export default defineComponent({
   }
 
   &--black {
-    @apply bg-base-black text-on-emphasis;
+    @apply bg-inverse text-on-emphasis;
+    @apply dark:bg-dark-inverse dark:text-dark-on-emphasis;
 
     .tooltip__arrow {
-      @apply after:bg-base-black;
+      @apply after:bg-inverse;
+      @apply dark:after:bg-dark-inverse;
     }
   }
 
   &--white {
     @apply bg-default text-subtle;
+    @apply dark:bg-dark-default dark:text-dark-subtle;
 
     .tooltip__arrow {
       @apply after:bg-default;
+      @apply dark:after:bg-dark-default;
     }
   }
 }

package/dist/components/tooltip/Tooltip.vue.d.ts

@@ -12,7 +12,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     target: {
         type: PropType<HTMLElement>;
-        default: any;
+        default: undefined;
     };
     placement: {
         type: PropType<Placement>;
@@ -21,7 +21,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     isShow: import("vue-demi").Ref<boolean>;
     classNames: import("vue-demi").ComputedRef<string[]>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "show" | "hide")[], "show" | "update:modelValue" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("show" | "update:modelValue" | "hide")[], "show" | "update:modelValue" | "hide", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -32,20 +32,20 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     target: {
         type: PropType<HTMLElement>;
-        default: any;
+        default: undefined;
     };
     placement: {
         type: PropType<Placement>;
         default: string;
     };
 }>> & {
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    onShow?: (...args: any[]) => any;
-    onHide?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
+    onHide?: ((...args: any[]) => any) | undefined;
 }, {
-    target: HTMLElement;
     color: ColorVariant;
     modelValue: boolean;
+    target: HTMLElement;
     placement: Placement;
 }>;
 export default _default;

package/dist/components/tooltip/index.d.ts

@@ -1,6 +1,6 @@
 import type { Placement } from '@floating-ui/dom';
 import { Directive } from 'vue-demi';
-export declare type ColorVariant = 'black' | 'white';
+export type ColorVariant = 'black' | 'white';
 export interface TooltipOptions {
     text: string;
     color: ColorVariant;

package/dist/components/tooltip/index.mjs

@@ -5,7 +5,7 @@ import {
   parseAction,
   parseText,
   parseColor
-} from "./utils/parse-bindings";
+} from "./utils/parse-bindings.mjs";
 const handleClick = createHandler("click", "toggle", true);
 const handleMouseEnter = createHandler("hover", "show");
 const handleMouseLeave = createHandler("hover", "hide");

package/dist/components/tooltip/utils/create-handler.d.ts

@@ -1,4 +1,4 @@
-declare type EventAction = 'toggle' | 'show' | 'hide';
+type EventAction = 'toggle' | 'show' | 'hide';
 /**
  *
  * @param eventName Event name, only run when attr data-tooltip-action match this name

package/dist/components/tour/Tour.vue.d.ts

@@ -1,11 +1,11 @@
 import TourDialog from './TourDialog.vue';
-declare type TourDialogProps = Partial<InstanceType<typeof TourDialog>['$props']>;
+type TourDialogProps = Partial<InstanceType<typeof TourDialog>['$props']>;
 declare const _default: import("vue-demi").DefineComponent<{}, {
     isShow: import("vue-demi").Ref<boolean>;
     dialog: import("vue-demi").ShallowRef<any>;
-    target: import("vue-demi").ShallowRef<HTMLElement>;
+    target: import("vue-demi").ShallowRef<HTMLElement | undefined>;
     show: (targetEl: HTMLElement, options: TourDialogProps) => void;
     hide: () => void;
-    config: import("vue-demi").ShallowRef<Partial<any>>;
+    config: import("vue-demi").ShallowRef<Partial<any> | undefined>;
 }, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/components/tour/TourDialog.vue

@@ -158,11 +158,13 @@ export default defineComponent({
 <style lang="postcss">
 .tour {
   &__dialog {
-    @apply rounded bg-emphasis w-full max-w-xs z-[100] overflow-hidden relative shadow-sm;
+    @apply rounded bg-inverse w-full max-w-xs z-[100] overflow-hidden relative shadow-sm;
+    @apply dark:bg-dark-inverse;
   }
 
   &__image {
     @apply max-w-full h-auto object-cover bg-default;
+    @apply dark:bg-dark-default;
   }
 
   &__body {
@@ -170,6 +172,7 @@ export default defineComponent({
 
     > * {
       @apply text-on-emphasis;
+      @apply dark:text-dark-on-emphasis;
     }
   }
 
@@ -179,6 +182,7 @@ export default defineComponent({
 
   &__meta {
     @apply text-xs text-muted flex-shrink-0;
+    @apply dark:text-dark-muted;
   }
 
   &__controls {
@@ -186,18 +190,22 @@ export default defineComponent({
 
     > .btn--variant-link.btn--default {
       @apply text-on-emphasis hover:text-on-emphasis focus:text-on-emphasis;
+      @apply dark:text-dark-on-emphasis hover:dark:text-dark-on-emphasis focus:dark:text-dark-on-emphasis;
     }
 
     > .tour__divider {
       @apply text-on-emphasis;
+      @apply dark:text-dark-on-emphasis;
     }
   }
 
   &__dismiss {
     @apply absolute top-3 right-3 hover:cursor-pointer text-on-emphasis/30 hover:text-on-emphasis/50;
+    @apply dark:text-dark-on-emphasis/30 hover:dark:text-dark-on-emphasis/50;
 
     .tour--image & {
       @apply text-default/30 hover:text-default/50;
+      @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
     }
   }
 }

package/dist/components/tour/TourDialog.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("vue-demi").DefineComponent<{
     title: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     text: {
         type: StringConstructor;
@@ -9,7 +9,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     image: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     highlight: {
         type: BooleanConstructor;
@@ -46,7 +46,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("next" | "prev" | "dismiss")[], "next" | "prev" | "dismiss", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     title: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     text: {
         type: StringConstructor;
@@ -54,7 +54,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     image: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     highlight: {
         type: BooleanConstructor;
@@ -89,14 +89,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
 }>> & {
-    onNext?: (...args: any[]) => any;
-    onPrev?: (...args: any[]) => any;
-    onDismiss?: (...args: any[]) => any;
+    onNext?: ((...args: any[]) => any) | undefined;
+    onDismiss?: ((...args: any[]) => any) | undefined;
+    onPrev?: ((...args: any[]) => any) | undefined;
 }, {
     image: string;
     dismissable: boolean;
-    title: string;
     text: string;
+    title: string;
     step: number;
     highlight: boolean;
     totalStep: number;

package/dist/components/tour/TourHighlight.vue.d.ts

@@ -2,12 +2,12 @@ import { PropType } from 'vue-demi';
 declare const _default: import("vue-demi").DefineComponent<{
     target: {
         type: PropType<HTMLElement>;
-        default: any;
+        default: undefined;
     };
 }, {}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     target: {
         type: PropType<HTMLElement>;
-        default: any;
+        default: undefined;
     };
 }>>, {
     target: HTMLElement;

package/dist/components/tour/core/base.d.ts

@@ -1,5 +1,5 @@
 import { Hook } from '../../steps/utils/hook';
-export declare type TourActionHook = (to: AbstractTour, from: AbstractTour) => boolean | Promise<boolean>;
+export type TourActionHook = (to: AbstractTour, from: AbstractTour) => boolean | Promise<boolean>;
 export declare enum TourDirection {
     FORWARD = 1,
     BACKWARD = -1

package/dist/components/tour/core/base.mjs

@@ -23,18 +23,33 @@ export class AbstractTour {
     this.parent = parent;
     return this;
   }
+  /**
+   * Get options with parent options as fallback
+   */
   getOptions() {
     return defu(this.options, this.parent?.getOptions());
   }
+  /**
+   * Set tour direction
+   * @param direction 1 for forward (next) and -1 for backward (prev)
+   */
   setDirection(direction) {
     this.direction = direction;
     return this;
   }
+  /**
+   * Attach to parent
+   * @param parent Parent Instance
+   */
   attach(parent) {
     parent.onPrevHooks.add(this.runOnPrevHooks);
     parent.onNextHooks.add(this.runOnNextHooks);
     return this;
   }
+  /**
+   * Deattach from parent
+   * @param parent Parent Instance
+   */
   detach(parent) {
     parent.onPrevHooks.remove(this.runOnPrevHooks);
     parent.onNextHooks.remove(this.runOnNextHooks);

package/dist/components/tour/core/step/action.d.ts

@@ -1,9 +1,9 @@
 import type UE from '@testing-library/user-event';
 import { AbstractStep } from '../step';
-declare type UserEvent = ReturnType<typeof UE['setup']>;
-declare type ExtractParams<F> = F extends (T: Element, ...args: infer P) => Promise<void> ? P : unknown[];
-export declare type EventType = 'click' | 'dblClick' | 'tripleClick' | 'type' | 'hover' | 'unhover' | 'clear';
-export declare type ParamsOf<E extends EventType> = ExtractParams<UserEvent[E]>;
+type UserEvent = ReturnType<typeof UE['setup']>;
+type ExtractParams<F> = F extends (T: Element, ...args: infer P) => Promise<void> ? P : unknown[];
+export type EventType = 'click' | 'dblClick' | 'tripleClick' | 'type' | 'hover' | 'unhover' | 'clear';
+export type ParamsOf<E extends EventType> = ExtractParams<UserEvent[E]>;
 export interface ActionOptions<E extends EventType> {
     target: string;
     action: E;

package/dist/components/tour/core/step.d.ts

@@ -1,8 +1,8 @@
 import { AbstractTour } from './base';
 import type { Tour, TourOptions } from './tour';
-declare type Merge<A, B> = Omit<A, keyof B> & B;
-declare type BaseOptions = Partial<Omit<TourOptions, 'onFinished'>>;
-export declare type OnCleanup = (cleanupFn: () => unknown) => unknown;
+type Merge<A, B> = Omit<A, keyof B> & B;
+type BaseOptions = Partial<Omit<TourOptions, 'onFinished'>>;
+export type OnCleanup = (cleanupFn: () => unknown) => unknown;
 export declare abstract class AbstractStep<Option> extends AbstractTour<Merge<BaseOptions, Option>> {
     protected parent?: Tour;
     protected cleanFns: Array<() => unknown>;

package/dist/components/tour/core/step.mjs

@@ -7,23 +7,42 @@ export class AbstractStep extends AbstractTour {
   async dispose() {
     return await Promise.allSettled(this.cleanFns.map((clean) => clean()));
   }
+  /**
+   * Run function before unmounted
+   * @param cleanFn clean function
+   */
   onCleanup(cleanFn) {
     this.cleanFns.push(cleanFn);
   }
+  /**
+   * Start this step
+   */
   async start() {
     this.attach(this.parent);
     await this.run();
   }
+  /**
+   * Stop this step
+   */
   async stop() {
     await this.dispose();
     this.detach(this.parent);
   }
+  /**
+   * Trigger next to parent
+   */
   async next() {
     await this.parent.next();
   }
+  /**
+   * Trigger prev to parent
+   */
   async prev() {
     await this.parent.prev();
   }
+  /**
+   * Trigger next or prev following the direction
+   */
   async ahead() {
     return await (this.direction === TourDirection.BACKWARD ? this.prev() : this.next());
   }

package/dist/components/tour/core/story.d.ts

@@ -2,7 +2,7 @@ import { Tour } from './tour';
 import type { ConditionalOptions } from './step/conditional';
 import type { DialogOptions } from './step/dialog';
 import type { ActionOptions, EventType, ParamsOf } from './step/action';
-declare type TourBuilderCallback = (tour: TourStory) => unknown;
+type TourBuilderCallback = (tour: TourStory) => unknown;
 /**
  * Tour with additional function to build a tour stories
  */

package/dist/components/tour/core/story.mjs

@@ -14,6 +14,10 @@ export class TourStory extends Tour {
       image
     })) : this.add(new StepDialog(targetOrOption));
   }
+  /**
+   * Delay or Wait, setTimout equivalent
+   * @param duration duration in milliseconds
+   */
   delay(duration) {
     return this.add(new StepDelay({ duration }));
   }
@@ -24,33 +28,81 @@ export class TourStory extends Tour {
       params
     })) : this.add(new StepAction(targetOrOption));
   }
+  /**
+   * Trigger click to target element
+   * @param target Target querySelector
+   */
   click(target) {
     return this.action(target, "click");
   }
+  /**
+   * Trigger double click to target element
+   * @param target Target querySelector
+   */
   dblClick(target) {
     return this.action(target, "dblClick");
   }
+  /**
+   * Trigger triple click to target element
+   * @param target Target querySelector
+   */
   tripleClick(target) {
     return this.action(target, "tripleClick");
   }
+  /**
+   * Trigger hover to target element
+   * @param target Target querySelector
+   */
   hover(target) {
     return this.action(target, "hover");
   }
+  /**
+   * Trigger unhover (blur) to target element
+   * @param target Target querySelector
+   */
   unhover(target) {
     return this.action(target, "unhover");
   }
+  /**
+   * Trigger blur (unhover) to target element
+   * @param target Target querySelector
+   */
   blur(target) {
     return this.unhover(target);
   }
+  /**
+   * Remotely typing target input
+   * @param target Target querySelector
+   */
   type(target, text) {
     return this.action(target, "type", text);
   }
+  /**
+   * Clear input text
+   * @param target Target querySelector
+   */
   clear(target) {
     return this.action(target, "clear");
   }
+  /**
+   * Redirect to url
+   * @param url target url
+   * @param backUrl target url when back button clicked
+   */
   visit(url, backUrl) {
     return this.add(new StepVisit({ url, backUrl }));
   }
+  /**
+   * Run steps only when condition meet, skip if not
+   * @param condition Ref or Function to check
+   * @param buildTour
+   * @example
+   * tour.runIf(() => window.matchMedia("(max-width: 700px)").matches, (tour) => {
+   *    return tour
+   *      .click('#mobile-only')
+   *      .dialog('#mobile-only', 'Hello World')
+   * })
+   */
   runIf(condition, buildTour) {
     const tour = new TourStory();
     return this.add(new StepCondition({
@@ -58,6 +110,21 @@ export class TourStory extends Tour {
       tour: buildTour(tour) ?? tour
     }));
   }
+  /**
+   * Run else if, this must be used after runIf.
+   * @param condition
+   * @param buildTour
+   * @example
+   * tour.runIf(() => window.matchMedia("(max-width: 700px)").matches, (tour) => {
+   *    return tour
+   *      .click('#mobile-only')
+   *      .dialog('#mobile-only', 'Hello World')
+   * }).runElseIf(() => window.matchMedia("(max-width: 1000px), (tour) => {
+   *    return tour
+   *      .click('#tablet-only')
+   *      .dialog('#tablet-only', 'Hello World')*
+   * })
+   */
   runElseIf(condition, buildTour) {
     const step = this.steps.at(-1);
     if (!(step instanceof StepCondition) || !step.canChain())
@@ -70,6 +137,20 @@ export class TourStory extends Tour {
     });
     return this;
   }
+  /**
+   * Run else condition, this must be used after runElse
+   * @param buildTour
+   * @example
+   * tour.runIf(() => window.matchMedia("(max-width: 700px)").matches, (tour) => {
+   *    return tour
+   *      .click('#mobile-only')
+   *      .dialog('#mobile-only', 'Hello World')
+   * }).runElse((tour) => {
+   *    return tour
+   *      .click('#not-mobile')
+   *      .dialog('#not-mobile', 'Hello World')*
+   * })
+   */
   runElse(buildTour) {
     const step = this.steps.at(-1);
     if (!(step instanceof StepCondition) || !step.canChain())