@pajohns/flowbite-svelte 0.1.0

package/dist/tooltip/theme.d.ts

@@ -0,0 +1,90 @@
+import { type VariantProps } from "tailwind-variants";
+export type TooltipVariants = VariantProps<typeof tooltip>;
+export declare const tooltip: import("tailwind-variants").TVReturnType<{
+    type: {
+        light: string;
+        auto: string;
+        dark: string;
+        custom: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, "px-3 py-2 rounded-lg text-sm z-50 pointer-events-none", {
+    type: {
+        light: string;
+        auto: string;
+        dark: string;
+        custom: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    type: {
+        light: string;
+        auto: string;
+        dark: string;
+        custom: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, "px-3 py-2 rounded-lg text-sm z-50 pointer-events-none", unknown, unknown, undefined>>;

package/dist/tooltip/theme.js

@@ -0,0 +1,45 @@
+import { tv } from "tailwind-variants";
+export const tooltip = tv({
+    base: "px-3 py-2 rounded-lg text-sm z-50 pointer-events-none",
+    variants: {
+        type: {
+            light: "bg-white text-gray-800 dark:bg-white dark:text-gray-800 border border-gray-200 dark:border-gray-200",
+            auto: "bg-white text-gray-800 dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700",
+            dark: "bg-gray-800 text-white dark:bg-gray-800 dark:text-white dark:border dark:border-gray-700",
+            custom: ""
+        },
+        color: {
+            // default: "bg-gray-800 dark:bg-gray-300 dark:text-gray-800",
+            primary: "bg-primary-600 dark:bg-primary-600",
+            secondary: "bg-secondary-600 dark:bg-secondary-600",
+            gray: "bg-gray-600 dark:bg-gray-600",
+            red: "bg-red-600 dark:bg-red-600",
+            orange: "bg-orange-600 dark:bg-orange-600",
+            amber: "bg-amber-600 dark:bg-amber-600",
+            yellow: "bg-yellow-400 dark:bg-yellow-400",
+            lime: "bg-lime-600 dark:bg-lime-600",
+            green: "bg-green-600 dark:bg-green-600",
+            emerald: "bg-emerald-600 dark:bg-emerald-600",
+            teal: "bg-teal-600 dark:bg-teal-600",
+            cyan: "bg-cyan-600 dark:bg-cyan-600",
+            sky: "bg-sky-600 dark:bg-sky-600",
+            blue: "bg-blue-600 dark:bg-blue-600",
+            indigo: "bg-indigo-600 dark:bg-indigo-600",
+            violet: "bg-violet-600 dark:bg-violet-600",
+            purple: "bg-purple-600 dark:bg-purple-600",
+            fuchsia: "bg-fuchsia-600 dark:bg-fuchsia-600",
+            pink: "bg-pink-600 dark:bg-pink-600",
+            rose: "bg-rose-800 dark:bg-rose-800"
+        }
+    },
+    compoundVariants: [
+        {
+            color: ["primary", "secondary", "gray", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"],
+            class: "border-0 dark:border-0"
+        }
+    ],
+    defaultVariants: {
+        type: "dark",
+        color: undefined
+    }
+});

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 = $derived(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>>;