@pajohns/flowbite-svelte 0.1.0

package/dist/step-indicator/StepIndicator.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { StepIndicatorProps } from "../types";
+/**
+ * [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
+ */
+declare const StepIndicator: import("svelte").Component<StepIndicatorProps, {}, "color" | "size" | "currentStep">;
+type StepIndicator = ReturnType<typeof StepIndicator>;
+export default StepIndicator;

package/dist/step-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StepIndicator } from "./StepIndicator.svelte";
+export { type StepIndicatorVariants, stepIndicator, getStepStateClasses, type StepIndicatorTheme } from "./theme";

package/dist/step-indicator/index.js

@@ -0,0 +1,2 @@
+export { default as StepIndicator } from "./StepIndicator.svelte";
+export { stepIndicator, getStepStateClasses } from "./theme";

package/dist/step-indicator/theme.d.ts

@@ -0,0 +1,248 @@
+import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
+import type { Classes } from "../theme/themeUtils";
+export type StepIndicatorVariants = VariantProps<typeof stepIndicator> & Classes<typeof stepIndicator>;
+export type StepIndicatorSlots = keyof typeof stepIndicator.slots;
+export type StepIndicatorTheme = Partial<Record<StepIndicatorSlots, ClassValue>>;
+export declare const stepIndicator: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            container: string;
+        };
+        sm: {
+            container: string;
+        };
+        md: {
+            container: string;
+        };
+        lg: {
+            container: string;
+        };
+        xl: {
+            container: string;
+        };
+    };
+    color: {
+        primary: {
+            step: string;
+            glow: string;
+        };
+        secondary: {
+            step: string;
+            glow: string;
+        };
+        gray: {
+            step: string;
+            glow: string;
+        };
+        red: {
+            step: string;
+            glow: string;
+        };
+        yellow: {
+            step: string;
+            glow: string;
+        };
+        green: {
+            step: string;
+            glow: string;
+        };
+        indigo: {
+            step: string;
+            glow: string;
+        };
+        purple: {
+            step: string;
+            glow: string;
+        };
+        pink: {
+            step: string;
+            glow: string;
+        };
+        blue: {
+            step: string;
+            glow: string;
+        };
+        custom: {
+            step: string;
+            glow: string;
+        };
+    };
+    glow: {
+        true: {};
+        false: {};
+    };
+    hideLabel: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    label: string;
+    container: string;
+    wrapper: string;
+    step: string;
+    glow: string;
+    incomplete: string;
+}, undefined, {
+    size: {
+        xs: {
+            container: string;
+        };
+        sm: {
+            container: string;
+        };
+        md: {
+            container: string;
+        };
+        lg: {
+            container: string;
+        };
+        xl: {
+            container: string;
+        };
+    };
+    color: {
+        primary: {
+            step: string;
+            glow: string;
+        };
+        secondary: {
+            step: string;
+            glow: string;
+        };
+        gray: {
+            step: string;
+            glow: string;
+        };
+        red: {
+            step: string;
+            glow: string;
+        };
+        yellow: {
+            step: string;
+            glow: string;
+        };
+        green: {
+            step: string;
+            glow: string;
+        };
+        indigo: {
+            step: string;
+            glow: string;
+        };
+        purple: {
+            step: string;
+            glow: string;
+        };
+        pink: {
+            step: string;
+            glow: string;
+        };
+        blue: {
+            step: string;
+            glow: string;
+        };
+        custom: {
+            step: string;
+            glow: string;
+        };
+    };
+    glow: {
+        true: {};
+        false: {};
+    };
+    hideLabel: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    label: string;
+    container: string;
+    wrapper: string;
+    step: string;
+    glow: string;
+    incomplete: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            container: string;
+        };
+        sm: {
+            container: string;
+        };
+        md: {
+            container: string;
+        };
+        lg: {
+            container: string;
+        };
+        xl: {
+            container: string;
+        };
+    };
+    color: {
+        primary: {
+            step: string;
+            glow: string;
+        };
+        secondary: {
+            step: string;
+            glow: string;
+        };
+        gray: {
+            step: string;
+            glow: string;
+        };
+        red: {
+            step: string;
+            glow: string;
+        };
+        yellow: {
+            step: string;
+            glow: string;
+        };
+        green: {
+            step: string;
+            glow: string;
+        };
+        indigo: {
+            step: string;
+            glow: string;
+        };
+        purple: {
+            step: string;
+            glow: string;
+        };
+        pink: {
+            step: string;
+            glow: string;
+        };
+        blue: {
+            step: string;
+            glow: string;
+        };
+        custom: {
+            step: string;
+            glow: string;
+        };
+    };
+    glow: {
+        true: {};
+        false: {};
+    };
+    hideLabel: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    label: string;
+    container: string;
+    wrapper: string;
+    step: string;
+    glow: string;
+    incomplete: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const getStepStateClasses: (stepIndex: number, currentStep: number) => "data-[state=current]" | "data-[state=completed]" | "data-[state=incomplete]";

package/dist/step-indicator/theme.js

@@ -0,0 +1,103 @@
+import { tv } from "tailwind-variants";
+export const stepIndicator = tv({
+    slots: {
+        base: "space-y-2 dark:text-white",
+        label: "text-base font-semibold",
+        container: "flex w-full justify-between gap-2",
+        wrapper: "relative h-full w-full",
+        step: "h-full w-full rounded-xs",
+        glow: "absolute -inset-1 rounded-xs opacity-30 blur-sm dark:opacity-25",
+        incomplete: "h-full w-full rounded-xs bg-gray-200 dark:bg-gray-700"
+    },
+    variants: {
+        size: {
+            xs: { container: "h-1.5" },
+            sm: { container: "h-2" },
+            md: { container: "h-2.5" },
+            lg: { container: "h-3" },
+            xl: { container: "h-4" }
+        },
+        color: {
+            primary: {
+                step: "data-[state=completed]:bg-primary-500 data-[state=completed]:dark:bg-primary-900 data-[state=current]:bg-primary-800 data-[state=current]:dark:bg-primary-400",
+                glow: "bg-primary-800 dark:bg-primary-400"
+            },
+            secondary: {
+                step: "data-[state=completed]:bg-secondary-500 data-[state=completed]:dark:bg-secondary-900 data-[state=current]:bg-secondary-800 data-[state=current]:dark:bg-secondary-400",
+                glow: "bg-secondary-800 dark:bg-secondary-400"
+            },
+            gray: {
+                step: "data-[state=completed]:bg-gray-400 data-[state=completed]:dark:bg-gray-500 data-[state=current]:bg-gray-700 data-[state=current]:dark:bg-gray-200",
+                glow: "bg-gray-700 dark:bg-gray-200"
+            },
+            red: {
+                step: "data-[state=completed]:bg-red-600 data-[state=completed]:dark:bg-red-900 data-[state=current]:bg-red-900 data-[state=current]:dark:bg-red-500",
+                glow: "bg-red-900 dark:bg-red-500"
+            },
+            yellow: {
+                step: "data-[state=completed]:bg-yellow-400 data-[state=completed]:dark:bg-yellow-600 data-[state=current]:bg-yellow-600 data-[state=current]:dark:bg-yellow-400",
+                glow: "bg-yellow-600 dark:bg-yellow-400"
+            },
+            green: {
+                step: "data-[state=completed]:bg-green-500 data-[state=completed]:dark:bg-green-900 data-[state=current]:bg-green-800 data-[state=current]:dark:bg-green-400",
+                glow: "bg-green-800 dark:bg-green-400"
+            },
+            indigo: {
+                step: "data-[state=completed]:bg-indigo-500 data-[state=completed]:dark:bg-indigo-900 data-[state=current]:bg-indigo-800 data-[state=current]:dark:bg-indigo-400",
+                glow: "bg-indigo-800 dark:bg-indigo-400"
+            },
+            purple: {
+                step: "data-[state=completed]:bg-purple-500 data-[state=completed]:dark:bg-purple-900 data-[state=current]:bg-purple-800 data-[state=current]:dark:bg-purple-400",
+                glow: "bg-purple-800 dark:bg-purple-400"
+            },
+            pink: {
+                step: "data-[state=completed]:bg-pink-500 data-[state=completed]:dark:bg-pink-900 data-[state=current]:bg-pink-800 data-[state=current]:dark:bg-pink-400",
+                glow: "bg-pink-800 dark:bg-pink-400"
+            },
+            blue: {
+                step: "data-[state=completed]:bg-blue-500 data-[state=completed]:dark:bg-blue-900 data-[state=current]:bg-blue-800 data-[state=current]:dark:bg-blue-400",
+                glow: "bg-blue-800 dark:bg-blue-400"
+            },
+            custom: {
+                step: "",
+                glow: ""
+            }
+        },
+        glow: {
+            true: {},
+            false: {}
+        },
+        hideLabel: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            glow: false,
+            class: {
+                glow: "hidden"
+            }
+        },
+        {
+            hideLabel: true,
+            class: {
+                label: "hidden"
+            }
+        }
+    ],
+    defaultVariants: {
+        size: "md",
+        color: "primary",
+        glow: false,
+        hideLabel: false
+    }
+});
+// Helper function to get step state classes
+export const getStepStateClasses = (stepIndex, currentStep) => {
+    if (stepIndex === currentStep - 1)
+        return "data-[state=current]";
+    if (stepIndex < currentStep - 1)
+        return "data-[state=completed]";
+    return "data-[state=incomplete]";
+};

package/dist/stepper/BreadcrumbStepper.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import CheckmarkIcon from "./CheckmarkIcon.svelte";
+  import DoubleArrowIcon from "./DoubleArrowIcon.svelte";
+  import { breadcrumbStepper } from "./theme";
+  import clsx from "clsx";
+  import type { BreadcrumbStepperProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { steps = [], class: className, classes, current = $bindable(1), clickable = true, showCheckmarkForCompleted = true, onStepClick, ...restProps }: BreadcrumbStepperProps = $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("breadcrumbStepper"));
+
+  const { base, item, indicator } = $derived(breadcrumbStepper());
+
+  // 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
+  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,
+        hasChevron: index < steps.length - 1,
+        class: clsx(theme?.item, classes?.item)
+      })}
+    >
+      {#if clickable}
+        <button
+          type="button"
+          class="flex cursor-pointer items-center transition-opacity hover:opacity-75"
+          onclick={() => handleStepClick(index)}
+          aria-current={status === "current" ? "step" : undefined}
+        >
+          <span class={indicator({ status, class: clsx(theme?.indicator, classes?.indicator) })}>
+            {#if status === "completed" && showCheckmarkForCompleted}
+              {#if step.icon}
+                <step.icon class={step.iconClass || "h-3 w-3"} />
+              {:else}
+                <CheckmarkIcon variant="simple" class="h-3 w-3" />
+              {/if}
+            {:else if step.icon}
+              <step.icon class={step.iconClass || "h-3 w-3"} />
+            {:else}
+              {step.id}
+            {/if}
+          </span>
+
+          {step.label}
+
+          {#if step.shortLabel}
+            <span class="hidden sm:ms-2 sm:inline-flex">{step.shortLabel}</span>
+          {/if}
+        </button>
+      {:else}
+        <span aria-current={status === "current" ? "step" : undefined} class="flex items-center">
+          <span class={indicator({ status, class: clsx(theme?.indicator, classes?.indicator) })}>
+            {#if status === "completed" && showCheckmarkForCompleted}
+              {#if step.icon}
+                <step.icon class={step.iconClass || "h-3 w-3"} />
+              {:else}
+                <CheckmarkIcon variant="simple" class="h-3 w-3" />
+              {/if}
+            {:else if step.icon}
+              <step.icon class={step.iconClass || "h-3 w-3"} />
+            {:else}
+              {step.id}
+            {/if}
+          </span>
+
+          {step.label}
+
+          {#if step.shortLabel}
+            <span class="hidden sm:ms-2 sm:inline-flex">{step.shortLabel}</span>
+          {/if}
+        </span>
+      {/if}
+
+      {#if index < steps.length - 1}
+        <DoubleArrowIcon />
+      {/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
+[BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1729)
+## 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/BreadcrumbStepper.svelte.d.ts

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

package/dist/stepper/CheckmarkIcon.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
+
+  type IconVariant = "default" | "simple" | "tick";
+
+  interface IconPropsType {
+    viewBox: string;
+    fill: string | "none";
+    pathData?: string;
+    pointsData?: string;
+    stroke?: string;
+    "stroke-width"?: string;
+    "stroke-linecap"?: "round" | "butt" | "square" | "inherit";
+    "stroke-linejoin"?: "round" | "bevel" | "miter" | "inherit";
+  }
+
+  interface Props extends SVGAttributes<SVGSVGElement> {
+    class?: string;
+    variant?: IconVariant;
+  }
+
+  let { class: className, variant = "default", ...restProps }: Props = $props();
+
+  // 1. 'default' (Check inside a circle) - FILL ICON
+  const defaultIconProps: IconPropsType = {
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    pathData: "M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z",
+    stroke: undefined,
+    "stroke-linecap": undefined,
+    "stroke-linejoin": undefined,
+    "stroke-width": undefined
+  };
+
+  // 2. 'simple' (Basic check stroke path) - STROKE ICON
+  const simpleIconProps: IconPropsType = {
+    viewBox: "0 0 16 12",
+    fill: "none",
+    pathData: "M1 5.917 5.724 10.5 15 1.5",
+    stroke: "currentColor",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": "2"
+  };
+
+  // 3. 'tick' (New V-shaped check stroke) - STROKE ICON
+  const polylineIconProps: IconPropsType = {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    pointsData: "20 6 9 17 4 12",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  };
+
+  // Select the appropriate props based on the variant
+  const iconProps = $derived(variant === "simple" ? simpleIconProps : variant === "tick" ? polylineIconProps : defaultIconProps);
+
+  // Determine the base class for the SVG
+  const baseClass = $derived(className || (variant !== "default" ? "h-4 w-4" : "me-2.5 h-3.5 w-3.5 sm:h-4 sm:w-4"));
+</script>
+
+<svg
+  class={baseClass}
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox={iconProps.viewBox}
+  fill={iconProps.fill}
+  stroke={iconProps.stroke}
+  stroke-width={iconProps["stroke-width"]}
+  stroke-linecap={iconProps["stroke-linecap"]}
+  stroke-linejoin={iconProps["stroke-linejoin"]}
+  {...restProps}
+>
+  {#if iconProps.pointsData}
+    <polyline points={iconProps.pointsData} />
+  {:else}
+    <path d={iconProps.pathData} />
+  {/if}
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+Props
+## Props
+@prop class: className
+@prop variant = "default"
+@prop ...restProps
+-->

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

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