flowbite-svelte 1.9.0 → 1.10.0

package/dist/stepindicator/StepIndicator.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { StepIndicatorProps } from "..";
+import { type StepIndicatorProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1524)
+ * [StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1517)
  * ## Props
  * @prop steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"]
  * @prop currentStep = 1
- * @prop size = "h-2.5"
+ * @prop size = "md"
  * @prop color = "primary"
  * @prop glow = false
  * @prop hideLabel = false

package/dist/stepindicator/index.d.ts

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

package/dist/stepindicator/index.js

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

package/dist/stepindicator/theme.d.ts

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

package/dist/stepindicator/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",
+        stepWrapper: "relative h-full w-full",
+        step: "h-full w-full rounded-xs",
+        stepGlow: "absolute -inset-1 rounded-xs opacity-30 blur-sm dark:opacity-25",
+        incompleteStep: "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",
+                stepGlow: "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",
+                stepGlow: "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",
+                stepGlow: "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",
+                stepGlow: "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",
+                stepGlow: "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",
+                stepGlow: "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",
+                stepGlow: "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",
+                stepGlow: "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",
+                stepGlow: "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",
+                stepGlow: "bg-blue-800 dark:bg-blue-400"
+            },
+            custom: {
+                step: "",
+                stepGlow: ""
+            }
+        },
+        glow: {
+            true: {},
+            false: {}
+        },
+        hideLabel: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            glow: false,
+            class: {
+                stepGlow: "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

@@ -1,15 +1,16 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import { breadcrumbstepper, breadcrumbstepperitem, breadcrumbstepperindicator } from ".";
-  import { type BreadcrumbStepperProps } from "..";
-  import { twMerge } from "tailwind-merge";
-  import clsx from "clsx";
+  import { breadcrumbStepper, type BreadcrumbStepperTheme } from ".";
+  import { type BreadcrumbStepperProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, steps = [], classes, ...restProps }: BreadcrumbStepperProps = $props();
 
+  const theme = getTheme("breadcrumbStepper");
+
   setContext("stepperType", "breadcrumb");
 
-  const base = breadcrumbstepper();
+  const base = cn(breadcrumbStepper.stepper(), (theme as BreadcrumbStepperTheme)?.stepper);
 </script>
 
 <ol class={base} {...restProps}>
@@ -18,12 +19,15 @@
   {:else if steps}
     {#each steps as step, index}
       <li
-        class={breadcrumbstepperitem({
-          status: step.status,
-          hasChevron: index < steps.length - 1
-        })}
+        class={cn(
+          breadcrumbStepper.item({
+            status: step.status,
+            hasChevron: index < steps.length - 1
+          }),
+          (theme as BreadcrumbStepperTheme)?.item
+        )}
       >
-        <span class={breadcrumbstepperindicator({ status: step.status })}>
+        <span class={cn(breadcrumbStepper.indicator({ status: step.status }), (theme as BreadcrumbStepperTheme)?.indicator)}>
           {#if step.status === "completed" && step.icon}
             <step.icon class={step.iconClass || "h-3 w-3"} />
           {:else}
@@ -51,7 +55,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1603)
+[BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1597)
 ## Props
 @prop children
 @prop steps = []

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

@@ -2,7 +2,7 @@ import { type BreadcrumbStepperProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1603)
+ * [BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1597)
  * ## Props
  * @prop children
  * @prop steps = []

package/dist/stepper/DetailedStepper.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import { detailedstepper, detailedstepperitem, detailedstepperindicator } from ".";
-  import { type DetailedStepperProps } from "..";
-  import { twMerge } from "tailwind-merge";
+  import { detailedStepper, type DetailedStepperTheme } from ".";
+  import { type DetailedStepperProps, cn } from "..";
   import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, steps = [], contentClass, classes, ...restrorps }: DetailedStepperProps = $props();
 
-  setContext("stepperType", "detailed");
+  const theme = getTheme("detailedStepper");
 
-  const base = detailedstepper();
+  setContext("stepperType", "detailed");
 </script>
 
-<ol class={twMerge(base, clsx(classes?.detailedstepper))} {...restrorps}>
+<ol class={cn(detailedStepper.stepper(), clsx(classes?.detailedstepper), (theme as DetailedStepperTheme)?.stepper)} {...restrorps}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
-      <li class={twMerge(detailedstepperitem({ status: step.status }), clsx(classes?.detailedstepperitem))}>
-        <span class={twMerge(detailedstepperindicator({ status: step.status }), clsx(classes?.detailedstepperindicator))}>
+      <li class={cn(detailedStepper.item({ status: step.status }), clsx(classes?.detailedstepperitem), (theme as DetailedStepperTheme)?.item)}>
+        <span class={cn(detailedStepper.indicator({ status: step.status }), clsx(classes?.detailedstepperindicator), (theme as DetailedStepperTheme)?.indicator)}>
           {#if step.status === "completed" && step.icon}
             <step.icon class={clsx(step.iconClass)} />
           {:else}
@@ -40,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1572)
+[DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1566)
 ## Props
 @prop children
 @prop steps = []

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

@@ -2,7 +2,7 @@ import { type DetailedStepperProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1572)
+ * [DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1566)
  * ## Props
  * @prop children
  * @prop steps = []

package/dist/stepper/ProgressStepper.svelte

@@ -1,32 +1,34 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import { progressstepper, progressstepperitem, progresssteppercircle } from ".";
-  import { type ProgressStepperProps } from "..";
-  import { twMerge } from "tailwind-merge";
+  import { progressStepper } from ".";
+  import { type ProgressStepperProps, cn } from "..";
   import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+  import type { ProgressStepperTheme } from ".";
 
   let { children, steps = [], classes, ...restrorps }: ProgressStepperProps = $props();
 
-  setContext("stepperType", "progress");
+  const theme = getTheme("progressStepper");
 
-  const base = progressstepper();
+  setContext("stepperType", "progress");
 </script>
 
-<ol class={twMerge(base, clsx(classes?.progressstepper))} {...restrorps}>
+<ol class={cn(progressStepper.stepper(), clsx(classes?.progressstepper), (theme as ProgressStepperTheme)?.stepper)} {...restrorps}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
       <li
-        class={twMerge(
-          progressstepperitem({
+        class={cn(
+          progressStepper.item({
             status: step.status,
             isLast: index === steps.length - 1
           }),
-          clsx(classes?.progressstepperitem)
+          clsx(classes?.progressstepperitem),
+          (theme as ProgressStepperTheme)?.item
         )}
       >
-        <span class={twMerge(progresssteppercircle({ status: step.status }), clsx(classes?.progresssteppercircle))}>
+        <span class={cn(progressStepper.circle({ status: step.status }), clsx(classes?.progresssteppercircle), (theme as ProgressStepperTheme)?.circle)}>
           {#if step.status === "completed"}
             {#if step.icon}
               <step.icon class={clsx(step.iconClass) || "h-5 w-5 lg:h-6 lg:w-6"} />
@@ -52,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1557)
+[ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1551)
 ## Props
 @prop children
 @prop steps = []

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

@@ -2,7 +2,7 @@ import { type ProgressStepperProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1557)
+ * [ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1551)
  * ## Props
  * @prop children
  * @prop steps = []

package/dist/stepper/Stepper.svelte

@@ -1,38 +1,40 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import { stepper, stepperitem, steppercontent } from ".";
-  import { type StepperProps } from "..";
-  import { twMerge } from "tailwind-merge";
+  import { stepper, type StepperTheme } from ".";
+  import { type StepperProps, cn } from "..";
   import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, steps = [], classes, ...restProps }: StepperProps = $props();
 
-  setContext("stepperType", "stepper");
+  const theme = getTheme("stepper");
 
-  const base = stepper();
+  setContext("stepperType", "stepper");
 </script>
 
-<ol {...restProps} class={twMerge(stepper(), clsx(classes?.stepper))}>
+<ol {...restProps} class={cn(stepper.base(), clsx(classes?.stepper), (theme as StepperTheme)?.base)}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
       <li
-        class={twMerge(
-          stepperitem({
+        class={cn(
+          stepper.item({
             status: step.status,
             isLast: index === steps.length - 1
           }),
-          clsx(classes?.stepperitem)
+          clsx(classes?.stepperitem),
+          (theme as StepperTheme)?.item
         )}
       >
         <span
-          class={twMerge(
-            steppercontent({
+          class={cn(
+            stepper.content({
               status: step.status,
               isLast: index === steps.length - 1
             }),
-            clsx(classes?.steppercontent)
+            clsx(classes?.steppercontent),
+            (theme as StepperTheme)?.content
           )}
         >
           {#if step.status === "completed"}
@@ -60,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1545)
+[StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1539)
 ## Props
 @prop children
 @prop steps = []

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

@@ -2,7 +2,7 @@ import { type StepperProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1545)
+ * [StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1539)
  * ## Props
  * @prop children
  * @prop steps = []

package/dist/stepper/TimelineStepper.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import { timelinestepper, timelinestepperitem, timelinesteppercircle } from ".";
-  import { type TimelineStepperProps } from "..";
-  import { twMerge } from "tailwind-merge";
+  import { timelineStepper, type TimelineStepperTheme } from ".";
+  import { type TimelineStepperProps, cn } from "..";
   import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, steps = [], classes, contentClass, ...restProps }: TimelineStepperProps = $props();
 
-  setContext("stepperType", "timeline");
+  const theme = getTheme("timelineStepper");
 
-  const base = timelinestepper();
+  setContext("stepperType", "timeline");
 </script>
 
-<ol class={twMerge(base, clsx(classes?.timelinestepper))} {...restProps}>
+<ol class={cn(timelineStepper.base(), clsx(classes?.timelinestepper), (theme as TimelineStepperTheme)?.base)} {...restProps}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
-      <li class={twMerge(timelinestepperitem({ isLast: index === steps.length - 1 }), clsx(classes?.timelinestepperitem))}>
-        <span class={twMerge(timelinesteppercircle({ status: step.status }), clsx(classes?.timelinesteppercircle))}>
+      <li class={cn(timelineStepper.item({ isLast: index === steps.length - 1 }), clsx(classes?.timelinestepperitem), (theme as TimelineStepperTheme)?.item)}>
+        <span class={cn(timelineStepper.circle({ status: step.status }), clsx(classes?.timelinesteppercircle), (theme as TimelineStepperTheme)?.circle)}>
           {#if step.status === "completed"}
             {#if step.icon}
               <step.icon class={clsx(step.iconClass) || "h-3.5 w-3.5"} />
@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1617)
+[TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1611)
 ## Props
 @prop children
 @prop steps = []

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

@@ -2,7 +2,7 @@ import { type TimelineStepperProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1617)
+ * [TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1611)
  * ## Props
  * @prop children
  * @prop steps = []