@pajohns/flowbite-svelte 0.1.0

package/dist/split-pane/SplitPane.svelte

@@ -0,0 +1,401 @@
+<script lang="ts">
+  import type { SplitPaneProps } from "../types";
+  import { setSplitPaneContext } from "../context";
+  import { splitpane } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+
+  let {
+    direction = "horizontal",
+    minSize = 100,
+    responsive = true,
+    breakpoint = 768,
+    transition: transitionProp = true,
+    transitionDuration = 150,
+    keyboardStep = 2,
+    initialSizes,
+    onResize,
+    children,
+    class: className = ""
+  }: SplitPaneProps = $props();
+
+  const TOLERANCE = 0.5; // For pixel comparisons (minSize - TOLERANCE)
+  const MIN_CHANGE_THRESHOLD = 0.01; // For percentage changes (size deltas)
+  const MIN_DELTA = 1; // For mouse movement (Math.abs(delta) < MIN_DELTA)
+
+  // Validate numeric props
+  $effect(() => {
+    if (minSize <= 0) {
+      console.warn(`minSize must be positive, got ${minSize}.`);
+    }
+    if (keyboardStep <= 0) {
+      console.warn(`keyboardStep must be positive, got ${keyboardStep}.`);
+    }
+  });
+
+  let transition = $derived(transitionProp);
+  $effect(() => {
+    // syncing local transition state with prop changes
+    if (!isDragging) {
+      transition = transitionProp;
+    }
+  });
+  const theme = $derived(getTheme("splitpane"));
+
+  let isDragging = $state(false);
+  let startPos = $state(0);
+  let sizes = $state<number[]>([]);
+  let container: HTMLDivElement;
+  let currentDirection = $derived(direction);
+  let registeredPanes = $state(0);
+
+  // Register panes as they mount
+  function registerPane(): number {
+    const index = registeredPanes;
+    registeredPanes++;
+    return index;
+  }
+
+  function getPaneStyle(index: number): string {
+    if (sizes[index] === undefined) return "";
+
+    const size = `${sizes[index]}%`;
+    const transitionStyle = transition ? `${currentDirection === "horizontal" ? "width" : "height"} ${transitionDuration}ms ease` : "none";
+
+    if (currentDirection === "horizontal") {
+      return `width: ${size}; height: 100%; transition: ${transitionStyle};`;
+    } else {
+      return `height: ${size}; width: 100%; transition: ${transitionStyle};`;
+    }
+  }
+
+  function shouldRenderDivider(paneIndex: number): boolean {
+    return paneIndex < registeredPanes - 1;
+  }
+
+  // Set context for child Pane components
+  setSplitPaneContext({
+    registerPane,
+    getPaneStyle,
+    getPaneSize: (index: number) => sizes[index] ?? (registeredPanes > 0 ? 100 / registeredPanes : 0),
+    shouldRenderDivider,
+    getDirection: () => currentDirection,
+    getIsDragging: () => isDragging,
+    onMouseDown: startResize,
+    onTouchStart: startTouchResize,
+    onKeyDown: handleKeyResize
+  });
+
+  let containerSize = $state(0);
+
+  // Track container size changes
+  $effect(() => {
+    if (!container) return;
+
+    const updateSize = () => {
+      containerSize = currentDirection === "horizontal" ? container.offsetWidth : container.offsetHeight;
+    };
+
+    updateSize();
+
+    const resizeObserver = new ResizeObserver(updateSize);
+    resizeObserver.observe(container);
+
+    return () => resizeObserver.disconnect();
+  });
+
+  // Initialize and maintain sizes
+  $effect(() => {
+    if (registeredPanes === 0) {
+      sizes = [];
+      return;
+    }
+
+    // If container not ready yet, use equal distribution
+    if (containerSize < 1) {
+      if (sizes.length !== registeredPanes) {
+        const equal = 100 / registeredPanes;
+        sizes = Array.from({ length: registeredPanes }, () => equal);
+      }
+      return;
+    }
+
+    const minPercent = (minSize / containerSize) * 100;
+
+    // Check if minSize is achievable for all panes
+    const totalMinRequired = minPercent * registeredPanes;
+    if (totalMinRequired > 100) {
+      console.error(
+        `Cannot satisfy minSize=${minSize}px for ${registeredPanes} panes in ${containerSize}px container. ` + `Required: ${(minSize * registeredPanes).toFixed(0)}px. Using equal distribution.`
+      );
+      const equal = 100 / registeredPanes;
+      sizes = Array.from({ length: registeredPanes }, () => equal);
+      return;
+    }
+
+    // Check if current sizes violate minSize constraints
+    const currentPixelSizes = sizes.map((s) => (s / 100) * containerSize);
+    const violatesMinSize = currentPixelSizes.some((pixelSize) => pixelSize < minSize - TOLERANCE); // small tolerance
+
+    if (violatesMinSize) {
+      // Recalculate sizes to respect minSize
+      let newSizes = sizes.map((s) => Math.max((s / 100) * containerSize, minSize));
+      const totalPixels = newSizes.reduce((a, b) => a + b, 0);
+
+      // Convert back to percentages
+      if (totalPixels > containerSize) {
+        // If we can't fit all panes at minSize, distribute proportionally
+        newSizes = newSizes.map((s) => (s / totalPixels) * containerSize);
+      }
+
+      sizes = newSizes.map((pixelSize) => (pixelSize / containerSize) * 100);
+    }
+
+    // Handle initialSizes (only on first initialization)
+    if (initialSizes && initialSizes.length === registeredPanes && sizes.length !== registeredPanes) {
+      const hasInvalidValues = initialSizes.some((s) => s < 0 || !isFinite(s));
+
+      if (hasInvalidValues) {
+        console.warn("initialSizes contains invalid values. Using equal distribution.");
+        const equal = Math.max(100 / registeredPanes, minPercent);
+        sizes = Array.from({ length: registeredPanes }, () => equal);
+        return;
+      }
+
+      const sum = initialSizes.reduce((a, b) => a + b, 0);
+
+      if (sum <= 0 || sum < 0.01) {
+        console.warn("initialSizes sum to zero. Using equal distribution.");
+        const equal = Math.max(100 / registeredPanes, minPercent);
+        sizes = Array.from({ length: registeredPanes }, () => equal);
+        return;
+      }
+
+      let normalizedSizes = initialSizes.map((s) => (s / sum) * 100);
+
+      const violatesConstraints = normalizedSizes.some((size) => size < minPercent);
+
+      if (violatesConstraints) {
+        console.warn(
+          `initialSizes [${normalizedSizes.map((s) => s.toFixed(1)).join("%, ")}%] ` +
+            `violate minSize constraint (${minSize}px = ${minPercent.toFixed(1)}%). ` +
+            `Adjusting to respect minimum constraints.`
+        );
+
+        normalizedSizes = normalizedSizes.map((size) => Math.max(size, minPercent));
+        const newSum = normalizedSizes.reduce((a, b) => a + b, 0);
+        normalizedSizes = normalizedSizes.map((size) => (size / newSum) * 100);
+      }
+
+      sizes = normalizedSizes;
+      return;
+    }
+
+    // Default: equal distribution respecting minSize
+    if (sizes.length !== registeredPanes) {
+      const equal = Math.max(100 / registeredPanes, minPercent);
+      sizes = Array.from({ length: registeredPanes }, () => equal);
+    }
+  });
+
+  // Responsive direction handling
+  $effect(() => {
+    if (!responsive) {
+      currentDirection = direction;
+      return;
+    }
+
+    if (typeof window === "undefined") {
+      currentDirection = direction;
+      return;
+    }
+
+    const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
+
+    const handleResize = () => {
+      // deferring the direction switch until the drag completes
+      if (!isDragging) {
+        currentDirection = mq.matches ? "vertical" : "horizontal";
+      }
+    };
+
+    handleResize();
+    mq.addEventListener("change", handleResize);
+
+    return () => mq.removeEventListener("change", handleResize);
+  });
+
+  // Notify parent of size changes
+  $effect(() => {
+    if (sizes.length > 0 && onResize) {
+      onResize(sizes);
+    }
+  });
+
+  function startResize(e: MouseEvent, index: number) {
+    e.preventDefault();
+    isDragging = true;
+    transition = false;
+    startPos = currentDirection === "horizontal" ? e.clientX : e.clientY;
+
+    const moveHandler = (ev: MouseEvent) => resize(ev, index);
+    const upHandler = () => stopResize(moveHandler, upHandler);
+
+    window.addEventListener("mousemove", moveHandler);
+    window.addEventListener("mouseup", upHandler);
+
+    document.body.style.cursor = currentDirection === "horizontal" ? "col-resize" : "row-resize";
+    document.body.style.userSelect = "none";
+  }
+
+  function stopResize(moveHandler: (e: MouseEvent) => void, upHandler: () => void) {
+    isDragging = false;
+    transition = transitionProp;
+    window.removeEventListener("mousemove", moveHandler);
+    window.removeEventListener("mouseup", upHandler);
+
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }
+
+  function startTouchResize(e: TouchEvent, index: number) {
+    e.preventDefault();
+    isDragging = true;
+    transition = false;
+
+    const touch = e.touches[0];
+    startPos = currentDirection === "horizontal" ? touch.clientX : touch.clientY;
+
+    const moveHandler = (ev: TouchEvent) => resizeTouch(ev, index);
+    const endHandler = () => stopTouchResize(moveHandler, endHandler);
+
+    window.addEventListener("touchmove", moveHandler, { passive: false });
+    window.addEventListener("touchend", endHandler);
+    window.addEventListener("touchcancel", endHandler);
+
+    document.body.style.userSelect = "none";
+  }
+
+  function stopTouchResize(moveHandler: (e: TouchEvent) => void, endHandler: () => void) {
+    isDragging = false;
+    transition = transitionProp;
+    window.removeEventListener("touchmove", moveHandler);
+    window.removeEventListener("touchend", endHandler);
+    window.removeEventListener("touchcancel", endHandler);
+
+    document.body.style.userSelect = "";
+  }
+
+  function clampPaneSizes(index: number, targetSize: number, minPercent: number, total: number): boolean {
+    if (index < 0 || index + 1 >= sizes.length) return false;
+
+    let newSize1 = Math.min(total - minPercent, Math.max(minPercent, targetSize));
+    let newSize2 = total - newSize1;
+
+    if (newSize2 < minPercent) {
+      newSize2 = minPercent;
+      newSize1 = total - newSize2;
+    }
+
+    if (Math.abs(newSize1 - sizes[index]) > MIN_CHANGE_THRESHOLD) {
+      sizes[index] = newSize1;
+      sizes[index + 1] = newSize2;
+      return true;
+    }
+
+    return false;
+  }
+
+  function applyResize(currentPos: number, index: number) {
+    if (!isDragging || !container) return;
+    if (index < 0 || index + 1 >= sizes.length) return;
+
+    const delta = currentPos - startPos;
+    if (Math.abs(delta) < MIN_DELTA) return;
+
+    const currentContainerSize = currentDirection === "horizontal" ? container.offsetWidth : container.offsetHeight;
+    if (currentContainerSize < 1) return;
+
+    const deltaPercent = (delta / currentContainerSize) * 100;
+    const minPercent = (minSize / currentContainerSize) * 100;
+
+    const oldSize1 = sizes[index];
+    const oldSize2 = sizes[index + 1];
+    const totalSize = oldSize1 + oldSize2;
+
+    const targetSize = oldSize1 + deltaPercent;
+
+    if (clampPaneSizes(index, targetSize, minPercent, totalSize)) {
+      startPos = currentPos;
+    }
+  }
+
+  function handleKeyResize(e: KeyboardEvent, index: number) {
+    if (!container) return;
+    if (index < 0 || index + 1 >= sizes.length) return;
+
+    const isHorizontal = currentDirection === "horizontal";
+    const increaseKeys = isHorizontal ? ["ArrowRight"] : ["ArrowDown"];
+    const decreaseKeys = isHorizontal ? ["ArrowLeft"] : ["ArrowUp"];
+
+    const containerSize = isHorizontal ? container.offsetWidth : container.offsetHeight;
+    if (containerSize < 1) return;
+
+    const minPercent = (minSize / containerSize) * 100;
+    const total = sizes[index] + sizes[index + 1];
+
+    let handled = false;
+
+    if (increaseKeys.includes(e.key)) {
+      const targetSize = sizes[index] + keyboardStep;
+      handled = clampPaneSizes(index, targetSize, minPercent, total);
+    } else if (decreaseKeys.includes(e.key)) {
+      const targetSize = sizes[index] - keyboardStep;
+      handled = clampPaneSizes(index, targetSize, minPercent, total);
+    } else if (e.key === "Enter" || e.key === " ") {
+      // Reset to equal sizes
+      const equal = 100 / registeredPanes;
+      sizes = sizes.map(() => equal);
+      handled = true;
+    }
+
+    if (handled) {
+      e.preventDefault();
+    }
+  }
+
+  function resize(e: MouseEvent, index: number) {
+    const currentPos = currentDirection === "horizontal" ? e.clientX : e.clientY;
+    applyResize(currentPos, index);
+  }
+
+  function resizeTouch(e: TouchEvent, index: number) {
+    e.preventDefault(); // Prevent scrolling while dragging
+    const touch = e.touches[0];
+    const currentPos = currentDirection === "horizontal" ? touch.clientX : touch.clientY;
+    applyResize(currentPos, index);
+  }
+</script>
+
+<div bind:this={container} class={splitpane({ direction: currentDirection, class: clsx(theme, className) })}>
+  {@render children()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2239)
+## Props
+@prop direction = "horizontal"
+@prop minSize = 100
+@prop responsive = true
+@prop breakpoint = 768
+@prop transition: transitionProp = true
+@prop transitionDuration = 150
+@prop keyboardStep = 2
+@prop initialSizes
+@prop onResize
+@prop children
+@prop class: className = ""
+-->

package/dist/split-pane/SplitPane.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { SplitPaneProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2239)
+ * ## Props
+ * @prop direction = "horizontal"
+ * @prop minSize = 100
+ * @prop responsive = true
+ * @prop breakpoint = 768
+ * @prop transition: transitionProp = true
+ * @prop transitionDuration = 150
+ * @prop keyboardStep = 2
+ * @prop initialSizes
+ * @prop onResize
+ * @prop children
+ * @prop class: className = ""
+ */
+declare const SplitPane: import("svelte").Component<SplitPaneProps, {}, "">;
+type SplitPane = ReturnType<typeof SplitPane>;
+export default SplitPane;

package/dist/split-pane/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SplitPane } from "./SplitPane.svelte";
+export { default as Pane } from "./Pane.svelte";
+export { default as Divider } from "./Divider.svelte";
+export { splitpane, pane, divider, dividerHitArea } from "./theme";

package/dist/split-pane/index.js

@@ -0,0 +1,4 @@
+export { default as SplitPane } from "./SplitPane.svelte";
+export { default as Pane } from "./Pane.svelte";
+export { default as Divider } from "./Divider.svelte";
+export { splitpane, pane, divider, dividerHitArea } from "./theme";

package/dist/split-pane/theme.d.ts

@@ -0,0 +1,65 @@
+import { type VariantProps } from "tailwind-variants";
+export type SplitPaneVariants = VariantProps<typeof splitpane>;
+export type PaneVariants = VariantProps<typeof pane>;
+export type DividerVariants = VariantProps<typeof divider>;
+export declare const splitpane: import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "relative flex h-full w-full overflow-hidden select-none", {
+    direction: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "relative flex h-full w-full overflow-hidden select-none", unknown, unknown, undefined>>;
+export declare const pane: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex flex-col relative overflow-hidden shrink-0 min-w-0 min-h-0", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex flex-col relative overflow-hidden shrink-0 min-w-0 min-h-0", unknown, unknown, undefined>>;
+export declare const divider: import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: string;
+        vertical: string;
+    };
+    isDragging: {
+        true: string;
+        false: string;
+    };
+}, undefined, "bg-gray-300 shrink-0 relative z-10 transition-colors duration-200 hover:bg-gray-400 focus:bg-gray-400 focus:outline focus:outline-2 focus:outline-blue-500 focus:-outline-offset-2", {
+    direction: {
+        horizontal: string;
+        vertical: string;
+    };
+    isDragging: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: string;
+        vertical: string;
+    };
+    isDragging: {
+        true: string;
+        false: string;
+    };
+}, undefined, "bg-gray-300 shrink-0 relative z-10 transition-colors duration-200 hover:bg-gray-400 focus:bg-gray-400 focus:outline focus:outline-2 focus:outline-blue-500 focus:-outline-offset-2", unknown, unknown, undefined>>;
+export declare const dividerHitArea: import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "absolute bg-transparent", {
+    direction: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    direction: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "absolute bg-transparent", unknown, unknown, undefined>>;

package/dist/split-pane/theme.js

@@ -0,0 +1,45 @@
+import { tv } from "tailwind-variants";
+export const splitpane = tv({
+    base: "relative flex h-full w-full overflow-hidden select-none",
+    variants: {
+        direction: {
+            horizontal: "",
+            vertical: "flex-col"
+        }
+    },
+    defaultVariants: {
+        direction: "horizontal"
+    }
+});
+export const pane = tv({
+    base: "flex flex-col relative overflow-hidden shrink-0 min-w-0 min-h-0"
+});
+export const divider = tv({
+    base: "bg-gray-300 shrink-0 relative z-10 transition-colors duration-200 hover:bg-gray-400 focus:bg-gray-400 focus:outline focus:outline-2 focus:outline-blue-500 focus:-outline-offset-2",
+    variants: {
+        direction: {
+            horizontal: "w-1 cursor-col-resize",
+            vertical: "h-1 cursor-row-resize"
+        },
+        isDragging: {
+            true: "bg-blue-500",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        direction: "horizontal",
+        isDragging: false
+    }
+});
+export const dividerHitArea = tv({
+    base: "absolute bg-transparent",
+    variants: {
+        direction: {
+            horizontal: "w-3 h-full -left-1 top-0",
+            vertical: "h-3 w-full -top-1 left-0"
+        }
+    },
+    defaultVariants: {
+        direction: "horizontal"
+    }
+});

package/dist/step-indicator/StepIndicator.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import type { StepIndicatorProps } from "../types";
+  import { stepIndicator, getStepStateClasses, type StepIndicatorTheme } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+
+  let {
+    steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"],
+    currentStep = $bindable(1),
+    size = $bindable("md"),
+    color = $bindable("primary"),
+    glow = false,
+    hideLabel = false,
+    clickable = true,
+    completedCustom = "",
+    currentCustom = "",
+    onStepClick,
+    class: className,
+    classes,
+    ...restProps
+  }: StepIndicatorProps = $props();
+
+  const theme = $derived(getTheme("stepIndicator"));
+
+  const { base, label, container, wrapper, step: stepCls, glow: stepGlow, incomplete } = $derived(stepIndicator({ size, color, glow, hideLabel }));
+
+  // Ensure currentStep is within bounds
+  let safeCurrentStep = $derived(Math.max(1, Math.min(currentStep, steps.length)));
+  let currentStepLabel = $derived(steps[safeCurrentStep - 1] ?? "Unknown Step");
+
+  // Handle step click
+  function handleStepClick(stepIndex: number) {
+    if (!clickable || stepIndex < 0 || stepIndex >= steps.length) return;
+
+    const next = stepIndex + 1;
+    if (next === currentStep) return;
+
+    const last = currentStep;
+    currentStep = next;
+
+    if (onStepClick) {
+      onStepClick({ current: currentStep, last });
+    }
+  }
+
+  // Handle custom colors if provided
+  const getCustomStepClass = (stepIndex: number) => {
+    if (color !== "custom") return "";
+
+    if (stepIndex === currentStep - 1) {
+      return currentCustom;
+    } else if (stepIndex < currentStep - 1) {
+      return completedCustom;
+    }
+    return "";
+  };
+</script>
+
+<div {...restProps} class={base({ class: clsx((theme as StepIndicatorTheme)?.base, className) })}>
+  {#if !hideLabel}
+    <h3 class={label({ class: clsx((theme as StepIndicatorTheme)?.label, classes?.label) })}>{currentStepLabel}</h3>
+  {/if}
+
+  <div class={container({ class: clsx((theme as StepIndicatorTheme)?.container, classes?.container) })}>
+    {#each steps as _step, i (i)}
+      {#if clickable}
+        {#if i === currentStep - 1}
+          <button
+            type="button"
+            class={wrapper({ class: clsx((theme as StepIndicatorTheme)?.wrapper, classes?.wrapper, "cursor-pointer transition-opacity hover:opacity-75") })}
+            onclick={() => handleStepClick(i)}
+            aria-current="step"
+            aria-label={`Current step: ${steps[i]}`}
+          >
+            <div class={stepCls({ class: clsx(getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step, classes?.step) })} data-state="current"></div>
+            {#if glow}
+              <div class={stepGlow({ class: clsx(getCustomStepClass(i), (theme as StepIndicatorTheme)?.glow, classes?.glow) })}></div>
+            {/if}
+          </button>
+        {:else if i < currentStep - 1}
+          <button
+            type="button"
+            aria-label={`Go to ${steps[i]} (completed)`}
+            class={stepCls({
+              class: clsx(getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step, classes?.step, "cursor-pointer transition-opacity hover:opacity-75")
+            })}
+            data-state="completed"
+            onclick={() => handleStepClick(i)}
+          ></button>
+        {:else}
+          <button
+            type="button"
+            aria-label={`Go to ${steps[i]}`}
+            class={incomplete({ class: clsx((theme as StepIndicatorTheme)?.incomplete, classes?.incomplete, "cursor-pointer transition-opacity hover:opacity-75") })}
+            data-state="incomplete"
+            onclick={() => handleStepClick(i)}
+          ></button>
+        {/if}
+      {:else if i === currentStep - 1}
+        <div class={wrapper({ class: clsx((theme as StepIndicatorTheme)?.wrapper, classes?.wrapper) })}>
+          <div class={stepCls({ class: clsx(getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step, classes?.step) })} data-state="current"></div>
+          {#if glow}
+            <div class={stepGlow({ class: clsx(getCustomStepClass(i), (theme as StepIndicatorTheme)?.glow, classes?.glow) })}></div>
+          {/if}
+        </div>
+      {:else if i < currentStep - 1}
+        <div class={stepCls({ class: clsx(getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step, classes?.step) })} data-state="completed"></div>
+      {:else}
+        <div class={incomplete({ class: clsx((theme as StepIndicatorTheme)?.incomplete, classes?.incomplete) })} data-state="incomplete"></div>
+      {/if}
+    {/each}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1632)
+## Props
+@prop steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"]
+@prop currentStep = $bindable(1)
+@prop size = $bindable("md")
+@prop color = $bindable("primary")
+@prop glow = false
+@prop hideLabel = false
+@prop clickable = true
+@prop completedCustom = ""
+@prop currentCustom = ""
+@prop onStepClick
+@prop class: className
+@prop classes
+@prop ...restProps
+-->