flowbite-svelte 1.5.5 → 1.6.0

package/dist/speed-dial/SpeedDialButton.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1464)
+[SpeedDialButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1473)
 ## Props
 @prop children
 @prop name = ""

package/dist/speed-dial/SpeedDialButton.svelte.d.ts

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

package/dist/speed-dial/SpeedDialTrigger.svelte

@@ -44,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1448)
+[SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1457)
 ## Props
 @prop children
 @prop name = "Open actions menu"

package/dist/speed-dial/SpeedDialTrigger.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SpeedDialTriggerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1448)
+ * [SpeedDialTriggerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1457)
  * ## Props
  * @prop children
  * @prop name = "Open actions menu"

package/dist/stepper/BreadcrumbStepper.svelte

@@ -0,0 +1,60 @@
+<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";
+
+  let { children, steps = [], classes, ...restProps }: BreadcrumbStepperProps = $props();
+
+  setContext("stepperType", "breadcrumb");
+
+  const base = breadcrumbstepper();
+</script>
+
+<ol class={base} {...restProps}>
+  {#if children}
+    {@render children()}
+  {:else if steps}
+    {#each steps as step, index}
+      <li
+        class={breadcrumbstepperitem({
+          status: step.status,
+          hasChevron: index < steps.length - 1
+        })}
+      >
+        <span class={breadcrumbstepperindicator({ status: step.status })}>
+          {#if step.status === "completed" && 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}
+
+        {#if index < steps.length - 1}
+          <svg class="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">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 9 4-4-4-4M1 9l4-4-4-4" />
+          </svg>
+        {/if}
+      </li>
+    {/each}
+  {/if}
+</ol>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1569)
+## Props
+@prop children
+@prop steps = []
+@prop classes
+@prop ...restProps
+-->

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

@@ -0,0 +1,14 @@
+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#L1569)
+ * ## Props
+ * @prop children
+ * @prop steps = []
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const BreadcrumbStepper: import("svelte").Component<BreadcrumbStepperProps, {}, "">;
+type BreadcrumbStepper = ReturnType<typeof BreadcrumbStepper>;
+export default BreadcrumbStepper;

package/dist/stepper/DetailedStepper.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { detailedstepper, detailedstepperitem, detailedstepperindicator } from ".";
+  import { type DetailedStepperProps } from "..";
+  import { twMerge } from "tailwind-merge";
+  import clsx from "clsx";
+
+  let { children, steps = [], contentClass, classes, ...restrorps }: DetailedStepperProps = $props();
+
+  setContext("stepperType", "detailed");
+
+  const base = detailedstepper();
+</script>
+
+<ol class={twMerge(base, clsx(classes?.detailedstepper))} {...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))}>
+          {#if step.status === "completed" && step.icon}
+            <step.icon class={clsx(step.iconClass)} />
+          {:else}
+            {step.id}
+          {/if}
+        </span>
+        <span class={clsx(contentClass)}>
+          <h3 class="leading-tight font-medium">{step.label}</h3>
+          {#if step.description}
+            <p class="text-sm">{step.description}</p>
+          {/if}
+        </span>
+      </li>
+    {/each}
+  {/if}
+</ol>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1538)
+## Props
+@prop children
+@prop steps = []
+@prop contentClass
+@prop classes
+@prop ...restrorps
+-->

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

@@ -0,0 +1,15 @@
+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#L1538)
+ * ## Props
+ * @prop children
+ * @prop steps = []
+ * @prop contentClass
+ * @prop classes
+ * @prop ...restrorps
+ */
+declare const DetailedStepper: import("svelte").Component<DetailedStepperProps, {}, "">;
+type DetailedStepper = ReturnType<typeof DetailedStepper>;
+export default DetailedStepper;

package/dist/stepper/ProgressStepper.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { progressstepper, progressstepperitem, progresssteppercircle } from ".";
+  import { type ProgressStepperProps } from "..";
+  import { twMerge } from "tailwind-merge";
+  import clsx from "clsx";
+
+  let { children, steps = [], classes, ...restrorps }: ProgressStepperProps = $props();
+
+  setContext("stepperType", "progress");
+
+  const base = progressstepper();
+</script>
+
+<ol class={twMerge(base, clsx(classes?.progressstepper))} {...restrorps}>
+  {#if children}
+    {@render children()}
+  {:else if steps}
+    {#each steps as step, index}
+      <li
+        class={twMerge(
+          progressstepperitem({
+            status: step.status,
+            isLast: index === steps.length - 1
+          }),
+          clsx(classes?.progressstepperitem)
+        )}
+      >
+        <span class={twMerge(progresssteppercircle({ status: step.status }), clsx(classes?.progresssteppercircle))}>
+          {#if step.status === "completed"}
+            {#if step.icon}
+              <step.icon class={clsx(step.iconClass) || "h-5 w-5 lg:h-6 lg:w-6"} />
+            {:else}
+              <svg class="h-3.5 w-3.5 text-blue-600 lg:h-4 lg:w-4 dark:text-blue-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" />
+              </svg>
+            {/if}
+          {:else if step.icon}
+            <step.icon class={clsx(step.iconClass) || "h-5 w-5 lg:h-6 lg:w-6"} />
+          {:else}
+            <svg class="h-4 w-4 text-gray-500 lg:h-5 lg:w-5 dark:text-gray-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
+              <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>
+          {/if}
+        </span>
+      </li>
+    {/each}
+  {/if}
+</ol>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1523)
+## Props
+@prop children
+@prop steps = []
+@prop classes
+@prop ...restrorps
+-->

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

@@ -0,0 +1,14 @@
+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#L1523)
+ * ## Props
+ * @prop children
+ * @prop steps = []
+ * @prop classes
+ * @prop ...restrorps
+ */
+declare const ProgressStepper: import("svelte").Component<ProgressStepperProps, {}, "">;
+type ProgressStepper = ReturnType<typeof ProgressStepper>;
+export default ProgressStepper;

package/dist/stepper/Stepper.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { stepper, stepperitem, steppercontent } from ".";
+  import { type StepperProps } from "..";
+  import { twMerge } from "tailwind-merge";
+  import clsx from "clsx";
+
+  let { children, steps = [], classes, ...restProps }: StepperProps = $props();
+
+  setContext("stepperType", "stepper");
+
+  const base = stepper();
+</script>
+
+<ol {...restProps} class={twMerge(stepper(), clsx(classes?.stepper))}>
+  {#if children}
+    {@render children()}
+  {:else if steps}
+    {#each steps as step, index}
+      <li
+        class={twMerge(
+          stepperitem({
+            status: step.status,
+            isLast: index === steps.length - 1
+          }),
+          clsx(classes?.stepperitem)
+        )}
+      >
+        <span
+          class={twMerge(
+            steppercontent({
+              status: step.status,
+              isLast: index === steps.length - 1
+            }),
+            clsx(classes?.steppercontent)
+          )}
+        >
+          {#if step.status === "completed"}
+            {#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}
+              <svg class="me-2.5 h-3.5 w-3.5 sm:h-4 sm:w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                <path d="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" />
+              </svg>
+            {/if}
+          {: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}
+        </span>
+      </li>
+    {/each}
+  {/if}
+</ol>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1511)
+## Props
+@prop children
+@prop steps = []
+@prop classes
+@prop ...restProps
+-->

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

@@ -0,0 +1,14 @@
+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#L1511)
+ * ## Props
+ * @prop children
+ * @prop steps = []
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const Stepper: import("svelte").Component<StepperProps, {}, "">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;

package/dist/stepper/TimelineStepper.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { timelinestepper, timelinestepperitem, timelinesteppercircle } from ".";
+  import { type TimelineStepperProps } from "..";
+  import { twMerge } from "tailwind-merge";
+  import clsx from "clsx";
+
+  let { children, steps = [], classes, contentClass, ...restProps }: TimelineStepperProps = $props();
+
+  setContext("stepperType", "timeline");
+
+  const base = timelinestepper();
+</script>
+
+<ol class={twMerge(base, clsx(classes?.timelinestepper))} {...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))}>
+          {#if step.status === "completed"}
+            {#if step.icon}
+              <step.icon class={clsx(step.iconClass) || "h-3.5 w-3.5"} />
+            {:else}
+              <svg class="h-3.5 w-3.5 text-green-500 dark:text-green-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" />
+              </svg>
+            {/if}
+          {:else if step.icon}
+            <step.icon class={clsx(step.iconClass) || "h-3.5 w-3.5"} />
+          {:else}
+            <svg class="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">
+              <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>
+          {/if}
+        </span>
+        <div class={clsx(contentClass)}>
+          <h3 class="leading-tight font-medium">{step.label}</h3>
+          {#if step.description}
+            <p class="text-sm">{step.description}</p>
+          {/if}
+        </div>
+      </li>
+    {/each}
+  {/if}
+</ol>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1583)
+## Props
+@prop children
+@prop steps = []
+@prop classes
+@prop contentClass
+@prop ...restProps
+-->

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

@@ -0,0 +1,15 @@
+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#L1583)
+ * ## Props
+ * @prop children
+ * @prop steps = []
+ * @prop classes
+ * @prop contentClass
+ * @prop ...restProps
+ */
+declare const TimelineStepper: import("svelte").Component<TimelineStepperProps, {}, "">;
+type TimelineStepper = ReturnType<typeof TimelineStepper>;
+export default TimelineStepper;

package/dist/stepper/VerticalStepper.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { verticalstepper, verticalsteppercard, verticalsteppercontent } from ".";
+  import { type VerticalStepperProps } from "..";
+  import { twMerge } from "tailwind-merge";
+  import clsx from "clsx";
+
+  let { children, steps = [], liClass, classes, ...restProps }: VerticalStepperProps = $props();
+
+  setContext("stepperType", "vertical");
+
+  const base = verticalstepper();
+</script>
+
+<ol class={twMerge(base, clsx(verticalstepper))} {...restProps}>
+  {#if children}
+    {@render children()}
+  {:else if steps}
+    {#each steps as step, index}
+      <li class={clsx(liClass)}>
+        <div class={twMerge(verticalsteppercard({ status: step.status }), clsx(classes?.verticalsteppercard))} role="alert">
+          <div class={twMerge(verticalsteppercontent(), clsx(classes?.verticalsteppercontent))}>
+            <span class="sr-only">{step.label}</span>
+            <h3 class="font-medium">{step.id}. {step.label}</h3>
+
+            {#if step.status === "completed"}
+              {#if step.icon}
+                <step.icon class={step.iconClass || "h-4 w-4"} />
+              {:else}
+                <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5" />
+                </svg>
+              {/if}
+            {:else if step.status === "current"}
+              {#if step.icon}
+                <step.icon class={step.iconClass || "h-4 w-4"} />
+              {:else}
+                <svg class="h-4 w-4 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
+                </svg>
+              {/if}
+            {/if}
+          </div>
+        </div>
+      </li>
+    {/each}
+  {/if}
+</ol>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1553)
+## Props
+@prop children
+@prop steps = []
+@prop liClass
+@prop classes
+@prop ...restProps
+-->

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

@@ -0,0 +1,15 @@
+import { type VerticalStepperProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1553)
+ * ## Props
+ * @prop children
+ * @prop steps = []
+ * @prop liClass
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const VerticalStepper: import("svelte").Component<VerticalStepperProps, {}, "">;
+type VerticalStepper = ReturnType<typeof VerticalStepper>;
+export default VerticalStepper;

package/dist/stepper/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Stepper } from "./Stepper.svelte";
+export { default as ProgressStepper } from "./ProgressStepper.svelte";
+export { default as DetailedStepper } from "./DetailedStepper.svelte";
+export { default as VerticalStepper } from "./VerticalStepper.svelte";
+export { default as BreadcrumbStepper } from "./BreadcrumbStepper.svelte";
+export { default as TimelineStepper } from "./TimelineStepper.svelte";
+export { stepper, stepperitem, steppercontent, progressstepper, progressstepperitem, progresssteppercircle, detailedstepper, detailedstepperitem, detailedstepperindicator, verticalstepper, verticalsteppercard, verticalsteppercontent, breadcrumbstepper, breadcrumbstepperitem, breadcrumbstepperindicator, timelinestepper, timelinestepperitem, timelinesteppercircle } from "./theme";

package/dist/stepper/index.js

@@ -0,0 +1,7 @@
+export { default as Stepper } from "./Stepper.svelte";
+export { default as ProgressStepper } from "./ProgressStepper.svelte";
+export { default as DetailedStepper } from "./DetailedStepper.svelte";
+export { default as VerticalStepper } from "./VerticalStepper.svelte";
+export { default as BreadcrumbStepper } from "./BreadcrumbStepper.svelte";
+export { default as TimelineStepper } from "./TimelineStepper.svelte";
+export { stepper, stepperitem, steppercontent, progressstepper, progressstepperitem, progresssteppercircle, detailedstepper, detailedstepperitem, detailedstepperindicator, verticalstepper, verticalsteppercard, verticalsteppercontent, breadcrumbstepper, breadcrumbstepperitem, breadcrumbstepperindicator, timelinestepper, timelinestepperitem, timelinesteppercircle } from "./theme";