### Install Svelte Stepper with NPM

Source: https://github.com/efstajas/svelte-stepper/blob/main/README.md

Installs the Svelte Stepper library using the Node Package Manager (NPM). This is the standard way to add packages to a Svelte project.

```bash
npm install @efstajas/svelte-stepper
```

--------------------------------

### Install Svelte Stepper with Yarn

Source: https://github.com/efstajas/svelte-stepper/blob/main/README.md

Installs the Svelte Stepper library using the Yarn package manager. This is an alternative to NPM for managing project dependencies.

```bash
yarn add @efstajas/svelte-stepper
```

--------------------------------

### Initialize Stepper with Steps

Source: https://github.com/efstajas/svelte-stepper/blob/main/README.md

Shows how to initialize the main `Stepper` component in Svelte. It involves importing `Stepper` and `makeStep`, defining an array of steps with their respective components and optional props, and passing this array to the `Stepper` component.

```svelte
<script lang="ts">
  import { Stepper, makeStep } from '@efstajas/svelte-stepper';

  /* ... import your step components here ... */

  const exampleSteps = [
    makeStep({
      component: MyFirstStep,
      props: undefined
    }),
    makeStep({
      component: MySecondStepWithProps,
      props: {
        foo: 'bar',
      },
    }),
    makeStep({
      component: MyFinalStep,
      props: undefined
    })
  ];
</script>

<Stepper steps={exampleSteps} />
```

--------------------------------

### Create a Simple Step Component

Source: https://github.com/efstajas/svelte-stepper/blob/main/README.md

Demonstrates how to create a basic Svelte component that can interact with the Svelte Stepper. It utilizes the `createStepController` function to access stepper functionalities like advancing to the next step.

```svelte
<script lang="ts">
  import { createStepController } from '@efstajas/svelte-stepper';

  const stepController = createStepController();
</script>

<h1>My first step</h1>

<button on:click={stepController.nextStep}>Next</button>
```

--------------------------------

### Side-Steps for Temporary Flows

Source: https://github.com/efstajas/svelte-stepper/blob/main/README.md

Demonstrates how to initiate a temporary sub-flow (sidestep) using the `stepController.sidestep()` method. This allows navigating to a different set of steps and automatically returning to the original flow upon completion. It also covers how to cancel a sidestep using `stepController.cancelSidestep()`.

```typescript
<script lang="ts">
  import { createStepController, makeStep } from '@efstajas/svelte-stepper';
  import MyFirstSidestepStep from './MyFirstSidestepStep.svelte';

  const stepController = createStepController();
</script>

<h1>Launching a sidestep</h1>

<button on:click={() => stepController.sidestep([
  makeStep({
    component: MyFirstSidestepStep,
    props: undefined
  }),
])}>Start sidestep</button>
```

--------------------------------

### Custom Transitions with Parameters

Source: https://github.com/efstajas/svelte-stepper/blob/main/README.md

Demonstrates how to apply custom Svelte transitions (e.g., scale, fly) to stepper steps by providing transition functions and dynamic parameters. The parameters can be adjusted based on navigation direction (forward/backward).

```typescript
<script lang="ts">
  import { Stepper } from '@efstajas/svelte-stepper';
  import { scale, fly } from 'svelte/transition';

  const exampleSteps = [
    // ... your step definitions
  ];
</script>

<Stepper
  steps={exampleSteps}
  defaultTransitionDuration={600}
  stepOutroTransition={{
    transitionFn: scale,
    params: () => ({
      duration: 600,
      delay: 0,
      scale: 1,
    }),
  }}
  stepIntroTransition={{
    transitionFn: fly,
    params: (direction) => ({
      duration: 600,
      delay: 0,
      x: direction === 'forward' ? 100 : -100,
    }),
  }}
/>
```

--------------------------------

### Context API for Shared Data

Source: https://github.com/efstajas/svelte-stepper/blob/main/README.md

Illustrates how to use the Context API to share a Svelte writable store across all steps in the stepper. This is useful for managing and updating data incrementally throughout a multi-step process. It shows defining the context type, creating the context store, and accessing it within a step component.

```typescript
<script lang="ts" context="module">
  export interface MyExampleStepperContext {
    foo: string;
    bar: number;
  }
</script>

<script lang="ts">
  import { Stepper, makeStep } from '@efstajas/svelte-stepper';
  import { writable, Writable } from 'svelte/store';
  import MyFirstStep from './MyFirstStep.svelte';

  const exampleSteps = [
    makeStep({
      component: MyFirstStep,
      props: undefined
    }),
  ];

  const exampleContext: () => Writable<MyExampleStepperContext> = () => writable({
    foo: 'bar',
    bar: 42,
  });
</script>

<Stepper steps={exampleSteps} context={exampleContext} />
```

```typescript
<script lang="ts">
  import { Writable } from 'svelte/store';
  import { MyExampleStepperContext } from './my-stepper-page.svelte';
  import { createStepController } from '@efstajas/svelte-stepper';

  const stepController = createStepController();

  export let context: Writable<MyExampleStepperContext>;
</script>

<h1>My first step</h1>

<p>
  Foo is {$context.foo} and bar is {$context.bar}.
</p>

<button on:click={context.update((v) => ({ ...v, bar: v.bar + 1}))}>Increment bar</button>

<button on:click={stepController.nextStep}>Next</button>
```

--------------------------------

### Stepper Events: stepChange and conclusion

Source: https://github.com/efstajas/svelte-stepper/blob/main/README.md

Shows how to listen for and handle events emitted by the Stepper component. The `stepChange` event provides details about the transition between steps (new index, total steps, direction), while the `conclusion` event fires when the final step completes its action.

```typescript
<script lang="ts">
  import { Stepper } from '@efstajas/svelte-stepper';

  const exampleSteps = [
    // ... your step definitions
  ];
</script>

<Stepper
  steps={exampleSteps}
  on:conclusion={() => {
    alert('The last step in the flow has called stepController.nextStep()!');
  }}
  on:stepChange={(e) => {
    const { newIndex, of, direction } = e.detail;

    console.log(`Changed to step ${newIndex + 1} of ${of} going ${direction}`);
  }}
/>
```

--------------------------------

### Customize Stepper Transition Duration

Source: https://github.com/efstajas/svelte-stepper/blob/main/README.md

Illustrates how to customize the animation speed of the Svelte Stepper. The `defaultTransitionDuration` prop can be set to control the duration of both the stepper container height transition and the step entry/exit animations.

```svelte
<Stepper
  steps={exampleSteps}
  defaultTransitionDuration={1000}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.