flowbite-svelte 1.21.0 → 1.22.0

package/dist/tour/Tour.svelte

@@ -0,0 +1,268 @@
+<script lang="ts">
+  import { tick } from "svelte";
+  import { computePosition, flip, shift, offset, arrow, type Placement } from "@floating-ui/dom";
+  import { tour } from "./theme";
+  import type { TourProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+
+  let {
+    steps = [],
+    active = $bindable(false),
+    currentStep = $bindable(0),
+    oncomplete = () => {},
+    onskip = () => {},
+    showOverlay = true,
+    scrollBehavior = "smooth",
+    tooltipOffset = 12,
+    size = "md",
+    color = "primary",
+    highlightClass,
+    class: className,
+    classes,
+    ...restProps
+  }: TourProps = $props();
+
+  const theme = getTheme("tour");
+
+  let highlightStyle = $state<string>("");
+  let tooltipStyle = $state<string>("");
+  let tooltipElement: HTMLDivElement | null = $state(null);
+  let arrowElement: HTMLDivElement | null = $state(null);
+  let arrowStyle = $state<string>("");
+  let actualPlacement = $state<Placement>("bottom");
+  let clipPathStyle = $state<string>("");
+
+  const isLastStep = $derived(currentStep === steps.length - 1);
+  const isFirstStep = $derived(currentStep === 0);
+  const currentStepData = $derived(steps[currentStep]);
+
+  const styles = $derived(tour({ size, color }));
+
+  async function updatePositions(): Promise<void> {
+    if (!active || !currentStepData?.target || !tooltipElement) return;
+
+    await tick();
+
+    const target = document.querySelector(currentStepData.target) as HTMLElement;
+    if (!target) {
+      console.warn(`Tour: Target element "${currentStepData.target}" not found`);
+      return;
+    }
+
+    // Scroll target into view
+    target.scrollIntoView({ behavior: scrollBehavior, block: "center" });
+    await tick();
+
+    const rect = target.getBoundingClientRect();
+
+    // Calculate highlight position (no padding, exact match to element)
+    const highlightTop = rect.top;
+    const highlightLeft = rect.left;
+    const highlightWidth = rect.width;
+    const highlightHeight = rect.height;
+
+    highlightStyle = `
+      top: ${highlightTop}px;
+      left: ${highlightLeft}px;
+      width: ${highlightWidth}px;
+      height: ${highlightHeight}px;
+    `;
+
+    // Create clip-path for overlay to cut out the highlighted area
+    clipPathStyle = `clip-path: polygon(
+      0% 0%,
+      0% 100%,
+      ${highlightLeft}px 100%,
+      ${highlightLeft}px ${highlightTop}px,
+      ${highlightLeft + highlightWidth}px ${highlightTop}px,
+      ${highlightLeft + highlightWidth}px ${highlightTop + highlightHeight}px,
+      ${highlightLeft}px ${highlightTop + highlightHeight}px,
+      ${highlightLeft}px 100%,
+      100% 100%,
+      100% 0%
+    );`;
+
+    // Calculate tooltip position using Floating UI
+    const placement = currentStepData.placement || "bottom";
+
+    const {
+      x,
+      y,
+      placement: finalPlacement,
+      middlewareData
+    } = await computePosition(target, tooltipElement, {
+      placement,
+      middleware: [
+        offset(tooltipOffset),
+        flip({
+          fallbackPlacements: ["top", "bottom", "left", "right"]
+        }),
+        shift({ padding: 16 }),
+        ...(arrowElement ? [arrow({ element: arrowElement })] : [])
+      ]
+    });
+
+    tooltipStyle = `
+      left: ${x}px;
+      top: ${y}px;
+    `;
+
+    actualPlacement = finalPlacement;
+
+    // Update arrow position
+    if (middlewareData.arrow && arrowElement) {
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+
+      const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      }[finalPlacement.split("-")[0]]!;
+
+      arrowStyle = `
+        left: ${arrowX != null ? `${arrowX}px` : ""};
+        top: ${arrowY != null ? `${arrowY}px` : ""};
+        ${staticSide}: -4px;
+      `;
+    }
+  }
+
+  function next(): void {
+    if (isLastStep) {
+      complete();
+    } else {
+      currentStep++;
+      updatePositions();
+    }
+  }
+
+  function previous(): void {
+    if (!isFirstStep) {
+      currentStep--;
+      updatePositions();
+    }
+  }
+
+  function skip(): void {
+    active = false;
+    onskip();
+  }
+
+  function complete(): void {
+    active = false;
+    oncomplete();
+  }
+
+  function goToStep(index: number): void {
+    currentStep = index;
+    updatePositions();
+  }
+
+  // Position updates - depends on active
+  $effect(() => {
+    if (active) {
+      updatePositions();
+      window.addEventListener("resize", updatePositions);
+      window.addEventListener("scroll", updatePositions, true);
+
+      return () => {
+        window.removeEventListener("resize", updatePositions);
+        window.removeEventListener("scroll", updatePositions, true);
+      };
+    }
+  });
+
+  // Focus management - depends on active AND tooltipElement
+  $effect(() => {
+    if (active && tooltipElement) {
+      tooltipElement.focus();
+    }
+  });
+
+  // Keyboard events - depends on active
+  $effect(() => {
+    if (active) {
+      const handleKeydown = (e: KeyboardEvent) => {
+        switch (e.key) {
+          case "Escape":
+            skip();
+            break;
+          case "ArrowRight":
+          case "ArrowDown":
+            e.preventDefault();
+            next();
+            break;
+          case "ArrowLeft":
+          case "ArrowUp":
+            e.preventDefault();
+            if (!isFirstStep) previous();
+            break;
+        }
+      };
+
+      window.addEventListener("keydown", handleKeydown);
+      return () => window.removeEventListener("keydown", handleKeydown);
+    }
+  });
+</script>
+
+{#if active && currentStepData}
+  <!-- Overlay -->
+  {#if showOverlay}
+    <div
+      class="{styles.overlay({ class: clsx(theme?.overlay, classes?.overlay) })} z-[9998]"
+      style={clipPathStyle}
+      onclick={skip}
+      onkeydown={(e) => e.key === "Escape" && skip()}
+      role="button"
+      tabindex="0"
+      aria-label="Close tour"
+    ></div>
+  {/if}
+
+  <!-- Highlight -->
+  <div class="{highlightClass ? highlightClass : styles.highlight({ class: clsx(theme?.highlight, classes?.highlight) })} z-[9999]" style={highlightStyle}></div>
+
+  <!-- Tooltip -->
+  <div tabindex="-1" bind:this={tooltipElement} class={clsx(styles.tooltip({ class: clsx(theme?.tooltip, classes?.tooltip) }), "z-[10001]", className)} style={tooltipStyle}>
+    <!-- Arrow -->
+    <div bind:this={arrowElement} class={styles.arrow({ class: clsx(theme?.arrow, classes?.arrow) })} style={arrowStyle} data-placement={actualPlacement}></div>
+
+    <div {...restProps} class={styles.content({ class: clsx(theme?.content, classes?.content) })}>
+      {#if currentStepData.title}
+        <h3 class={styles.title({ class: clsx(theme?.title, classes?.title) })}>{currentStepData.title}</h3>
+      {/if}
+
+      <p class={styles.description({ class: clsx(theme?.description, classes?.description) })}>{currentStepData.description}</p>
+
+      {#if steps.length > 1}
+        <div class={styles.progressContainer({ class: clsx(theme?.progressContainer, classes?.progressContainer) })}>
+          {#each steps as _, index (index)}
+            <button
+              class="{styles.progressDot({ class: clsx(theme?.progressDot, classes?.progressDot) })} {index === currentStep ? styles.progressDotActive() : ''}"
+              onclick={() => goToStep(index)}
+              aria-label="Go to step {index + 1}"
+              aria-current={index === currentStep ? "step" : undefined}
+            ></button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+
+    <div class={styles.actions({ class: clsx(theme?.actions, classes?.actions) })}>
+      <button class="{styles.button({ class: clsx(theme?.button, classes?.button) })} {styles.buttonSecondary()}" onclick={skip}>Skip</button>
+
+      <div class={styles.navigation({ class: clsx(theme?.navigation, classes?.navigation) })}>
+        {#if !isFirstStep}
+          <button class="{styles.button({ class: clsx(theme?.button, classes?.button) })} {styles.buttonSecondary()}" onclick={previous}>Previous</button>
+        {/if}
+
+        <button class="{styles.button({ class: clsx(theme?.button, classes?.button) })} {styles.buttonPrimary()}" onclick={next}>
+          {isLastStep ? "Finish" : "Next"}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/tour/Tour.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TourProps } from "../types";
+declare const Tour: import("svelte").Component<TourProps, {}, "active" | "currentStep">;
+type Tour = ReturnType<typeof Tour>;
+export default Tour;

package/dist/tour/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tour } from "./Tour.svelte";
+export { tour } from "./theme";

package/dist/tour/index.js

@@ -0,0 +1,2 @@
+export { default as Tour } from "./Tour.svelte";
+export { tour } from "./theme";

package/dist/tour/theme.d.ts

@@ -0,0 +1,214 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type TourVariants = VariantProps<typeof tour> & Classes<typeof tour>;
+export declare const tour: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            tooltip: string;
+            content: string;
+            actions: string;
+            title: string;
+            description: string;
+            button: string;
+        };
+        md: {
+            tooltip: string;
+            content: string;
+            actions: string;
+            title: string;
+            description: string;
+            button: string;
+        };
+        lg: {
+            tooltip: string;
+            content: string;
+            actions: string;
+            title: string;
+            description: string;
+            button: string;
+        };
+    };
+    color: {
+        primary: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+        blue: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+        purple: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+        green: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+        red: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+    };
+}, {
+    overlay: string;
+    highlight: string[];
+    tooltip: string[];
+    arrow: string;
+    content: string;
+    title: string;
+    description: string;
+    progressContainer: string;
+    progressDot: string[];
+    progressDotActive: string;
+    actions: string[];
+    navigation: string;
+    button: string[];
+    buttonPrimary: string[];
+    buttonSecondary: string[];
+}, undefined, {
+    size: {
+        sm: {
+            tooltip: string;
+            content: string;
+            actions: string;
+            title: string;
+            description: string;
+            button: string;
+        };
+        md: {
+            tooltip: string;
+            content: string;
+            actions: string;
+            title: string;
+            description: string;
+            button: string;
+        };
+        lg: {
+            tooltip: string;
+            content: string;
+            actions: string;
+            title: string;
+            description: string;
+            button: string;
+        };
+    };
+    color: {
+        primary: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+        blue: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+        purple: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+        green: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+        red: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+    };
+}, {
+    overlay: string;
+    highlight: string[];
+    tooltip: string[];
+    arrow: string;
+    content: string;
+    title: string;
+    description: string;
+    progressContainer: string;
+    progressDot: string[];
+    progressDotActive: string;
+    actions: string[];
+    navigation: string;
+    button: string[];
+    buttonPrimary: string[];
+    buttonSecondary: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            tooltip: string;
+            content: string;
+            actions: string;
+            title: string;
+            description: string;
+            button: string;
+        };
+        md: {
+            tooltip: string;
+            content: string;
+            actions: string;
+            title: string;
+            description: string;
+            button: string;
+        };
+        lg: {
+            tooltip: string;
+            content: string;
+            actions: string;
+            title: string;
+            description: string;
+            button: string;
+        };
+    };
+    color: {
+        primary: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+        blue: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+        purple: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+        green: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+        red: {
+            highlight: string;
+            progressDotActive: string;
+            buttonPrimary: string;
+        };
+    };
+}, {
+    overlay: string;
+    highlight: string[];
+    tooltip: string[];
+    arrow: string;
+    content: string;
+    title: string;
+    description: string;
+    progressContainer: string;
+    progressDot: string[];
+    progressDotActive: string;
+    actions: string[];
+    navigation: string;
+    button: string[];
+    buttonPrimary: string[];
+    buttonSecondary: string[];
+}, undefined, unknown, unknown, undefined>>;

package/dist/tour/theme.js

@@ -0,0 +1,79 @@
+import { tv } from "tailwind-variants";
+export const tour = tv({
+    slots: {
+        overlay: "fixed inset-0 bg-black/50 backdrop-blur-sm",
+        highlight: ["fixed border-2 pointer-events-none transition-all duration-300", "border-blue-500", "shadow-[0_0_0_4px_rgba(59,130,246,0.2)]"],
+        tooltip: ["fixed bg-white rounded-xl shadow-2xl", "w-80 max-w-[calc(100vw-2rem)]"],
+        arrow: "absolute w-2 h-2 rotate-45 bg-white",
+        content: "p-5 relative z-10 bg-white rounded-xl",
+        title: "text-lg font-semibold text-gray-900 mb-3",
+        description: "text-sm leading-relaxed text-gray-600 mb-4",
+        progressContainer: "flex gap-2 justify-center",
+        progressDot: ["w-2 h-2 rounded-full bg-gray-300", "hover:bg-gray-400 transition-all duration-200 hover:scale-110"],
+        progressDotActive: "!bg-blue-500 !w-6 rounded",
+        actions: ["flex justify-between items-center px-5 py-4", "border-t border-gray-200 relative z-10 bg-white rounded-b-xl"],
+        navigation: "flex gap-2",
+        button: ["px-4 py-2 rounded-md text-sm font-medium", "transition-all duration-200"],
+        buttonPrimary: ["text-white bg-blue-500 hover:bg-blue-600"],
+        buttonSecondary: ["text-gray-600 border border-gray-300", "hover:bg-gray-50 hover:border-gray-400"]
+    },
+    variants: {
+        size: {
+            sm: {
+                tooltip: "w-64",
+                content: "p-4",
+                actions: "px-4 py-3",
+                title: "text-base",
+                description: "text-xs",
+                button: "px-3 py-1.5 text-xs"
+            },
+            md: {
+                tooltip: "w-80",
+                content: "p-5",
+                actions: "px-5 py-4",
+                title: "text-lg",
+                description: "text-sm",
+                button: "px-4 py-2 text-sm"
+            },
+            lg: {
+                tooltip: "w-96",
+                content: "p-6",
+                actions: "px-6 py-5",
+                title: "text-xl",
+                description: "text-base",
+                button: "px-5 py-2.5 text-base"
+            }
+        },
+        color: {
+            primary: {
+                highlight: "border-primary-500 shadow-[0_0_0_4px_rgba(59,130,246,0.2)]",
+                progressDotActive: "!bg-primary-500",
+                buttonPrimary: "bg-primary-500 hover:bg-primary-600"
+            },
+            blue: {
+                highlight: "border-blue-500 shadow-[0_0_0_4px_rgba(59,130,246,0.2)]",
+                progressDotActive: "!bg-blue-500",
+                buttonPrimary: "bg-blue-500 hover:bg-blue-600"
+            },
+            purple: {
+                highlight: "border-purple-500 shadow-[0_0_0_4px_rgba(168,85,247,0.2)]",
+                progressDotActive: "!bg-purple-500",
+                buttonPrimary: "bg-purple-500 hover:bg-purple-600"
+            },
+            green: {
+                highlight: "border-green-500 shadow-[0_0_0_4px_rgba(34,197,94,0.2)]",
+                progressDotActive: "!bg-green-500",
+                buttonPrimary: "bg-green-500 hover:bg-green-600"
+            },
+            red: {
+                highlight: "border-red-500 shadow-[0_0_0_4px_rgba(239,68,68,0.2)]",
+                progressDotActive: "!bg-red-500",
+                buttonPrimary: "bg-red-500 hover:bg-red-600"
+            }
+        }
+    },
+    defaultVariants: {
+        size: "md",
+        color: "blue"
+    }
+});

package/dist/types.d.ts

@@ -74,6 +74,7 @@ import type { ButtonToggleVariants } from "./forms/button-toggle/theme";
 import type { TagsVariants } from "./forms/tags/theme";
 import type { VirtualListVariants } from "./virtuallist/theme";
 import type { KanbanBoardVariants, KanbanCardVariants } from "./kanban/theme";
+import type { TourVariants } from "./tour/theme";
 import type { CloseButtonVariants } from "./utils/theme";
 import type { DialogVariants } from "./dialog/theme";
 export declare const xs = "xs";
@@ -1817,3 +1818,20 @@ export interface DividerProps {
     class?: string;
     currentSize: number;
 }
+export type TourStep = {
+    target: string;
+    title?: string;
+    description: string;
+    placement?: Placement;
+};
+export interface TourProps extends TourVariants, Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+    steps: TourStep[];
+    active?: boolean;
+    currentStep?: number;
+    oncomplete?: () => void;
+    onskip?: () => void;
+    showOverlay?: boolean;
+    scrollBehavior?: ScrollBehavior;
+    tooltipOffset?: number;
+    highlightClass?: string;
+}

package/dist/typography/a/A.svelte

@@ -43,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1892)
+[AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1893)
 ## Props
 @prop children
 @prop color = "primary"

package/dist/typography/a/A.svelte.d.ts

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

package/dist/typography/blockquote/Blockquote.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1921)
+[BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1922)
 ## Props
 @prop children
 @prop class: className

package/dist/typography/blockquote/Blockquote.svelte.d.ts

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

package/dist/typography/descriptionlist/DescriptionList.svelte

@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1931)
+[DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1932)
 ## Props
 @prop children
 @prop tag

package/dist/typography/descriptionlist/DescriptionList.svelte.d.ts

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

package/dist/typography/heading/Heading.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1937)
+[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1938)
 ## Props
 @prop children
 @prop tag = "h1"

package/dist/typography/heading/Heading.svelte.d.ts

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