@pajohns/flowbite-svelte 0.1.0

package/dist/stepper/DetailedStepper.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import CheckmarkIcon from "./CheckmarkIcon.svelte";
+  import { detailedStepper } from "./theme";
+  import type { DetailedStepperProps } from "../types";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { steps = [], contentClass, class: className, classes, current = $bindable(0), clickable = true, showCheckmarkForCompleted = true, onStepClick, ...restProps }: DetailedStepperProps = $props();
+
+  // Ensure current is within valid bounds
+  $effect(() => {
+    if (current < 0) current = 0;
+    if (current > steps.length && steps.length > 0) current = steps.length;
+  });
+
+  const theme = $derived(getTheme("detailedStepper"));
+
+  // Override the theme to make current step also highlighted
+  const stepperTheme = $derived(() => {
+    const baseTheme = detailedStepper();
+    return {
+      base: baseTheme.base,
+      item: (props: { status: "completed" | "current" | "pending"; class?: string }) => {
+        // Make current status use the same styling as completed
+        const status = props.status === "current" ? "completed" : props.status;
+        return baseTheme.item({ ...props, status });
+      },
+      indicator: (props: { status: "completed" | "current" | "pending"; class?: string }) => {
+        // Make current status use the same styling as completed
+        const status = props.status === "current" ? "completed" : props.status;
+        return baseTheme.indicator({ ...props, status });
+      }
+    };
+  });
+
+  const { base, item, indicator } = $derived(stepperTheme());
+
+  // Handle step click
+  function handleStepClick(stepIndex: number) {
+    if (clickable && stepIndex < steps.length) {
+      const last = current;
+      // Convert 0-based array index to 1-based current value
+      current = stepIndex + 1;
+
+      // Call custom onStepClick if provided
+      if (onStepClick) {
+        onStepClick({ current, last });
+      }
+    }
+  }
+
+  // Determine step status - reactive to current changes
+  // current = 0: no items highlighted (all pending)
+  // current = 1: first item is current
+  // current = 2: first is completed, second is current
+  function getStepStatus(stepIndex: number): "completed" | "current" | "pending" {
+    if (current === 0) {
+      return "pending";
+    }
+    if (stepIndex < current - 1) {
+      return "completed";
+    } else if (stepIndex === current - 1) {
+      return "current";
+    } else {
+      return "pending";
+    }
+  }
+</script>
+
+<ol class={base({ class: clsx(theme?.base, className) })} {...restProps}>
+  {#each steps as step, index (step.id)}
+    {@const status = step.status ?? getStepStatus(index)}
+    <li class={item({ status, class: clsx(theme?.item, classes?.item) })}>
+      {#if clickable}
+        <button
+          type="button"
+          class="flex w-full cursor-pointer items-center space-x-2.5 text-left transition-opacity hover:opacity-75 rtl:space-x-reverse"
+          onclick={() => handleStepClick(index)}
+          aria-current={status === "current" ? "step" : undefined}
+        >
+          <span class={indicator({ status, class: clsx(theme?.indicator, classes?.indicator) })}>
+            {#if status === "completed" && showCheckmarkForCompleted}
+              <!-- Checkmark for completed steps -->
+              <CheckmarkIcon variant="tick" />
+            {:else if step.icon}
+              <!-- Show icon if provided -->
+              <step.icon class={clsx(step.iconClass)} />
+            {:else}
+              <!-- Show number for steps without icon -->
+              {step.id}
+            {/if}
+          </span>
+          <span class={clsx(contentClass)}>
+            <h3 class="leading-tight font-medium">{step.label}</h3>
+            {#if step.description}
+              <p class={clsx("text-sm", step.descriptionClass)}>{step.description}</p>
+            {/if}
+          </span>
+        </button>
+      {:else}
+        <div class="flex items-center space-x-2.5 rtl:space-x-reverse" aria-current={status === "current" ? "step" : undefined}>
+          <span class={indicator({ status, class: clsx(theme?.indicator, classes?.indicator) })}>
+            {#if status === "completed" && showCheckmarkForCompleted}
+              <!-- Checkmark for completed steps -->
+              <CheckmarkIcon variant="tick" />
+            {:else if step.icon}
+              <!-- Show icon if provided -->
+              <step.icon class={clsx(step.iconClass)} />
+            {:else}
+              <!-- Show number for steps without icon -->
+              {step.id}
+            {/if}
+          </span>
+          <span class={clsx(contentClass)}>
+            <h3 class="leading-tight font-medium">{step.label}</h3>
+            {#if step.description}
+              <p class={clsx("text-sm", step.descriptionClass)}>{step.description}</p>
+            {/if}
+          </span>
+        </div>
+      {/if}
+    </li>
+  {/each}
+</ol>
+
+<!--
+## Features
+- **Clickable navigation**: Click or press Enter/Space on steps to navigate
+- **Auto status**: Automatically determines completed/current/pending status based on current index
+- **Custom icons**: Support for custom icons on completed steps
+- **Accessible**: Keyboard navigation with proper ARIA attributes
+
+## Note
+The `current` prop is 1-based:
+- current=0 means no step is active (all pending)
+- current=1 means first step is active
+- current=2 means first step is completed, second step is active
+- etc.
+-->
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1692)
+## Props
+@prop steps = []
+@prop contentClass
+@prop class: className
+@prop classes
+@prop current = $bindable(0)
+@prop clickable = true
+@prop showCheckmarkForCompleted = true
+@prop onStepClick
+@prop ...restProps
+-->

package/dist/stepper/DetailedStepper.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { DetailedStepperProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1692)
+ * ## Props
+ * @prop steps = []
+ * @prop contentClass
+ * @prop class: className
+ * @prop classes
+ * @prop current = $bindable(0)
+ * @prop clickable = true
+ * @prop showCheckmarkForCompleted = true
+ * @prop onStepClick
+ * @prop ...restProps
+ */
+declare const DetailedStepper: import("svelte").Component<DetailedStepperProps, {}, "current">;
+type DetailedStepper = ReturnType<typeof DetailedStepper>;
+export default DetailedStepper;

package/dist/stepper/DoubleArrowIcon.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
+
+  interface Props extends SVGAttributes<SVGSVGElement> {
+    class?: string;
+  }
+
+  let { class: className, ...restProps }: Props = $props();
+</script>
+
+<svg
+  class={className || "ms-2 h-3 w-3 sm:ms-4 rtl:rotate-180"}
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 12 10"
+  stroke="currentColor"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="2"
+  {...restProps}
+>
+  <path d="m7 9 4-4-4-4M1 9l4-4-4-4" />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+Props
+## Props
+@prop class: className
+@prop ...restProps
+-->

package/dist/stepper/DoubleArrowIcon.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SVGAttributes } from "svelte/elements";
+interface Props extends SVGAttributes<SVGSVGElement> {
+    class?: string;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * Props
+ * ## Props
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const DoubleArrowIcon: import("svelte").Component<Props, {}, "">;
+type DoubleArrowIcon = ReturnType<typeof DoubleArrowIcon>;
+export default DoubleArrowIcon;

package/dist/stepper/ProfileCardIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
+
+  interface Props extends SVGAttributes<SVGSVGElement> {
+    class?: string;
+  }
+
+  let { class: className, ...restProps }: Props = $props();
+</script>
+
+<svg class={className || "h-3.5 w-3.5 text-gray-500 dark:text-gray-400"} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16" {...restProps}>
+  <path
+    d="M18 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM6.5 3a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3.014 13.021l.157-.625A3.427 3.427 0 0 1 6.5 9.571a3.426 3.426 0 0 1 3.322 2.805l.159.622-6.967.023ZM16 12h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Z"
+  />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+Props
+## Props
+@prop class: className
+@prop ...restProps
+-->

package/dist/stepper/ProfileCardIcon.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SVGAttributes } from "svelte/elements";
+interface Props extends SVGAttributes<SVGSVGElement> {
+    class?: string;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * Props
+ * ## Props
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const ProfileCardIcon: import("svelte").Component<Props, {}, "">;
+type ProfileCardIcon = ReturnType<typeof ProfileCardIcon>;
+export default ProfileCardIcon;

package/dist/stepper/ProgressStepper.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  import CheckmarkIcon from "./CheckmarkIcon.svelte";
+  import { progressStepper } from "./theme";
+  import type { ProgressStepperProps } from "../types";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+  import { Tween } from "svelte/motion";
+  import { cubicOut } from "svelte/easing";
+
+  let { steps = [], class: className, classes, current = $bindable(0), clickable = true, showCheckmarkForCompleted = true, onStepClick, ...restProps }: ProgressStepperProps = $props();
+
+  // Ensure current is within valid bounds
+  $effect(() => {
+    if (current < 0) current = 0;
+    if (current > steps.length && steps.length > 0) current = steps.length;
+  });
+
+  // Animated progress with Tween
+  const animatedProgress = new Tween(0, {
+    duration: 100,
+    easing: cubicOut
+  });
+
+  // Update animated progress when current changes
+  $effect(() => {
+    if (steps.length <= 1 || current === 0) {
+      animatedProgress.target = 0;
+    } else {
+      const progressPercent = ((current - 1) / (steps.length - 1)) * 100;
+      animatedProgress.target = progressPercent;
+    }
+  });
+
+  const theme = $derived(getTheme("progressStepper"));
+
+  const { base, item, circle, line, progressLine } = $derived(progressStepper());
+
+  // Handle step click
+  function handleStepClick(stepIndex: number) {
+    if (clickable && stepIndex < steps.length) {
+      const last = current;
+      // Convert 0-based array index to 1-based current value
+      current = stepIndex + 1;
+
+      // Call custom onStepClick if provided
+      if (onStepClick) {
+        onStepClick({ current, last });
+      }
+    }
+  }
+
+  // Determine step status - reactive to current changes
+  // current = 0: no items highlighted (all pending)
+  // current = 1: first item is current
+  // current = 2: first is completed, second is current
+  function getStepStatus(stepIndex: number): "completed" | "current" | "pending" {
+    if (current === 0) {
+      return "pending";
+    }
+    if (stepIndex < current - 1) {
+      return "completed";
+    } else if (stepIndex === current - 1) {
+      return "current";
+    } else {
+      return "pending";
+    }
+  }
+
+  // Calculate line positions and progress
+  // Lines should start from center of first circle and end at center of last circle
+  const lineStart = $derived(steps.length <= 1 ? "0" : `${(1 / steps.length) * 50}%`);
+
+  const lineWidth = $derived(steps.length <= 1 ? "0" : `${100 - (1 / steps.length) * 100}%`);
+
+  // Calculate progress width using animated value
+  const progressWidth = $derived(steps.length <= 1 || lineWidth === "0" ? "0" : `${(animatedProgress.current / 100) * parseFloat(lineWidth)}%`);
+</script>
+
+<ol class={base({ class: clsx(theme?.base, className) })} {...restProps}>
+  <!-- Background line (gray) - from center of first to center of last circle -->
+  <div class={line({ class: clsx(theme?.line, classes?.line) })} style="left: {lineStart}; width: {lineWidth}" aria-hidden="true"></div>
+
+  <!-- Progress line (colored, overlays the background) -->
+  <div class={progressLine({ class: clsx(theme?.progressLine, classes?.progressLine) })} style="left: {lineStart}; width: {progressWidth}" aria-hidden="true"></div>
+
+  {#each steps as step, index (step.id)}
+    {@const status = step.status ?? getStepStatus(index)}
+    <li
+      class={item({
+        status,
+        class: clsx(theme?.item, classes?.item)
+      })}
+    >
+      {#if clickable}
+        <button
+          type="button"
+          class={circle({ status, class: clsx(theme?.circle, classes?.circle, "cursor-pointer transition-all hover:brightness-110") })}
+          onclick={() => handleStepClick(index)}
+          aria-current={status === "current" ? "step" : undefined}
+        >
+          {#if status === "completed" && showCheckmarkForCompleted}
+            <!-- Checkmark for completed steps -->
+            <CheckmarkIcon variant="tick" />
+          {:else if step.icon}
+            <!-- Show icon if provided -->
+            <step.icon class={clsx(step.iconClass) || "h-5 w-5 lg:h-6 lg:w-6"} />
+          {:else}
+            <!-- Show number for steps without icon -->
+            <span class="text-sm font-semibold">{step.id}</span>
+          {/if}
+        </button>
+      {:else}
+        <span class={circle({ status, class: clsx(theme?.circle, classes?.circle) })} aria-current={status === "current" ? "step" : undefined}>
+          {#if status === "completed" && showCheckmarkForCompleted}
+            <!-- Checkmark for completed steps -->
+            <CheckmarkIcon variant="tick" />
+          {:else if step.icon}
+            <!-- Show icon if provided -->
+            <step.icon class={clsx(step.iconClass) || "h-5 w-5 lg:h-6 lg:w-6"} />
+          {:else}
+            <!-- Show number for steps without icon -->
+            <span class="text-sm font-semibold">{step.id}</span>
+          {/if}
+        </span>
+      {/if}
+    </li>
+  {/each}
+</ol>
+
+<!--
+## Features
+- **Clickable navigation**: Click or press Enter/Space on steps to navigate
+- **Auto status**: Automatically determines completed/current/pending status based on current index
+- **Numbers by default**: Shows step numbers (from step.id) when no icon is provided
+- **Custom icons**: Icons replace numbers when provided
+- **Checkmarks**: Completed steps show checkmarks (can be disabled with showCheckmarkForCompleted={false})
+- **Progress line**: A colored overlay line shows progress up to the current step
+- **Accessible**: Keyboard navigation with proper ARIA attributes
+
+## Note
+The `current` prop is 1-based:
+- current=0 means no step is active (all pending)
+- current=1 means first step is active
+- current=2 means first step is completed, second step is active
+- etc.
+-->
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1674)
+## Props
+@prop steps = []
+@prop class: className
+@prop classes
+@prop current = $bindable(0)
+@prop clickable = true
+@prop showCheckmarkForCompleted = true
+@prop onStepClick
+@prop ...restProps
+-->

package/dist/stepper/ProgressStepper.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ProgressStepperProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1674)
+ * ## Props
+ * @prop steps = []
+ * @prop class: className
+ * @prop classes
+ * @prop current = $bindable(0)
+ * @prop clickable = true
+ * @prop showCheckmarkForCompleted = true
+ * @prop onStepClick
+ * @prop ...restProps
+ */
+declare const ProgressStepper: import("svelte").Component<ProgressStepperProps, {}, "current">;
+type ProgressStepper = ReturnType<typeof ProgressStepper>;
+export default ProgressStepper;

package/dist/stepper/Stepper.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import type { StepStatus, Step } from "../types";
+  import CheckmarkIcon from "./CheckmarkIcon.svelte";
+  import { stepper } from "./theme";
+  import type { StepperProps } from "../types";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { steps = [], class: className, classes, current = $bindable(1), clickable = true, showCheckmarkForCompleted = true, onStepClick, ...restProps }: StepperProps = $props();
+
+  // Ensure current is within valid bounds
+  $effect(() => {
+    if (current < 0) current = 0;
+    if (current > steps.length && steps.length > 0) current = steps.length;
+  });
+
+  const theme = $derived(getTheme("stepper"));
+
+  const { base, item, content } = $derived(stepper());
+
+  // Handle step click
+  function handleStepClick(stepIndex: number) {
+    if (clickable && stepIndex < steps.length) {
+      const last = current;
+      // Convert 0-based array index to 1-based current value
+      current = stepIndex + 1;
+
+      // Call custom onStepClick if provided
+      if (onStepClick) {
+        onStepClick({ current, last });
+      }
+    }
+  }
+
+  // Determine step status - reactive to current changes
+  // current = 0: no items highlighted (all pending)
+  // current = 1: first item is current
+  // current = 2: first is completed, second is current
+  function getStepStatus(stepIndex: number): "completed" | "current" | "pending" {
+    if (current === 0) {
+      return "pending";
+    }
+    if (stepIndex < current - 1) {
+      return "completed";
+    } else if (stepIndex === current - 1) {
+      return "current";
+    } else {
+      return "pending";
+    }
+  }
+</script>
+
+{#snippet stepContent(step: Step, status: StepStatus, index: number)}
+  {#if status === "completed" && showCheckmarkForCompleted}
+    <CheckmarkIcon />
+  {:else if step.icon}
+    <step.icon class={clsx(step.iconClass) || "me-2.5 h-3.5 w-3.5 sm:h-4 sm:w-4"} />
+  {:else}
+    <span class="me-2">{step.id || index + 1}</span>
+  {/if}
+  {step.label}
+  {#if step.description}
+    <span class={clsx(step.descriptionClass) || "hidden sm:ms-2 sm:inline-flex"}>{step.description}</span>
+  {/if}
+{/snippet}
+
+<ol {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  {#each steps as step, index (step.id ?? index)}
+    {@const status = step.status ?? getStepStatus(index)}
+    <li
+      class={item({
+        status,
+        isLast: index === steps.length - 1,
+        class: clsx(theme?.item, classes?.item)
+      })}
+    >
+      {#if clickable}
+        <button
+          type="button"
+          class={content({
+            status,
+            isLast: index === steps.length - 1,
+            class: clsx(theme?.content, classes?.content, "w-full cursor-pointer text-left transition-opacity hover:opacity-75")
+          })}
+          onclick={() => handleStepClick(index)}
+          aria-current={status === "current" ? "step" : undefined}
+        >
+          {@render stepContent(step, status, index)}
+        </button>
+      {:else}
+        <span
+          class={content({
+            status,
+            isLast: index === steps.length - 1,
+            class: clsx(theme?.content, classes?.content)
+          })}
+        >
+          {@render stepContent(step, status, index)}
+        </span>
+      {/if}
+    </li>
+  {/each}
+</ol>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1658)
+## Props
+@prop steps = []
+@prop class: className
+@prop classes
+@prop current = $bindable(1)
+@prop clickable = true
+@prop showCheckmarkForCompleted = true
+@prop onStepClick
+@prop ...restProps
+-->

package/dist/stepper/Stepper.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { StepperProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1658)
+ * ## Props
+ * @prop steps = []
+ * @prop class: className
+ * @prop classes
+ * @prop current = $bindable(1)
+ * @prop clickable = true
+ * @prop showCheckmarkForCompleted = true
+ * @prop onStepClick
+ * @prop ...restProps
+ */
+declare const Stepper: import("svelte").Component<StepperProps, {}, "current">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;