@pajohns/flowbite-svelte 0.1.0

package/dist/scroll-spy/ScrollSpy.svelte

@@ -0,0 +1,276 @@
+<script lang="ts">
+  import { scrollspy } from "./theme";
+  import type { ScrollSpyProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+
+  let {
+    items,
+    position = "top",
+    offset = 0,
+    sticky = true,
+    activeClass = "",
+    inactiveClass = "",
+    class: className = "",
+    smoothScroll = true,
+    scrollContainer,
+    onActiveChange,
+    onNavigate,
+    classes,
+    ...restProps
+  }: ScrollSpyProps = $props();
+
+  const browser = typeof window !== "undefined";
+  const styles = $derived(getTheme("scrollspy"));
+  const INTERSECTION_RATIO_EPSILON = 0.01;
+  // Bottom margin determines how far up the viewport a section must scroll before becoming inactive
+  const ROOT_MARGIN_BOTTOM = "-40%";
+
+  let activeId = $state<string>("");
+  $effect(() => {
+    activeId = items.length > 0 ? items[0].id : "";
+  });
+  let isSticky = $state(false);
+  let navElement: HTMLElement | null = $state(null);
+  let scrollElement: Window | HTMLElement | null = $state(browser ? window : null);
+
+  // Track intersecting sections and their IntersectionObserverEntries
+  let intersectingSections = $state<Map<string, IntersectionObserverEntry>>(new Map());
+
+  const theme = $derived.by(() => {
+    const { base, container, list, li } = scrollspy({
+      position,
+      sticky,
+      isSticky
+    });
+
+    const { link: activeLink } = scrollspy({ active: true });
+    const { link: inactiveLink } = scrollspy({ active: false });
+
+    return {
+      base: base({ class: clsx(styles?.base, className) }),
+      container: container({ class: clsx(styles?.container, classes?.container) }),
+      list: list({ class: clsx(styles?.list, classes?.list) }),
+      activeLink: activeLink({ class: clsx(styles?.link, classes?.link) }),
+      inactiveLink: inactiveLink({ class: clsx(styles?.link, classes?.link) }),
+      li: li({ class: clsx(styles?.li, classes?.li) })
+    };
+  });
+
+  function getItemClass(itemId: string): string {
+    const isActive = activeId === itemId;
+    const link = isActive ? theme.activeLink : theme.inactiveLink;
+
+    const customClass = isActive ? activeClass : inactiveClass;
+
+    return clsx(link, customClass);
+  }
+
+  function scrollToSection(itemId: string, event?: MouseEvent) {
+    if (!browser) return;
+
+    if (event) event.preventDefault();
+
+    const element = document.getElementById(itemId);
+    if (!element) {
+      console.warn(`ScrollSpy: Element with id "${itemId}" not found`);
+      return;
+    }
+
+    const container = !scrollElement || scrollElement === window ? window : scrollElement;
+    const isWindow = container === window;
+
+    const elementRect = element.getBoundingClientRect();
+    let targetPosition: number;
+
+    if (isWindow) {
+      const currentScrollY = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
+      targetPosition = elementRect.top + currentScrollY - offset;
+    } else {
+      const currentScrollTop = (container as HTMLElement).scrollTop; // Type assertion
+      const containerRect = (container as HTMLElement).getBoundingClientRect(); // Type assertion
+      targetPosition = elementRect.top - containerRect.top + currentScrollTop - offset;
+    }
+
+    try {
+      if (isWindow) {
+        window.scrollTo({
+          top: targetPosition,
+          behavior: smoothScroll ? "smooth" : "auto"
+        });
+      } else {
+        (container as HTMLElement).scrollTo({
+          // Type assertion
+          top: targetPosition,
+          behavior: smoothScroll ? "smooth" : "auto"
+        });
+      }
+    } catch (error) {
+      console.error("Scroll error:", error);
+    }
+
+    activeId = itemId;
+    onNavigate?.(itemId);
+  }
+
+  function handleKeydown(event: KeyboardEvent, itemId: string) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      scrollToSection(itemId);
+    }
+  }
+
+  function updateActiveSection() {
+    if (intersectingSections.size === 0) {
+      // No sections visible — highlight first item
+      if (activeId !== items[0]?.id) {
+        activeId = items[0]?.id || "";
+        onActiveChange?.(activeId);
+      }
+      return;
+    }
+
+    // Sort by intersection ratio descending, then by items order ascending
+    const itemIndexMap = new Map(items.map((item, index) => [item.id, index]));
+    const sorted = Array.from(intersectingSections.entries()).sort((a, b) => {
+      const ratioA = a[1].intersectionRatio;
+      const ratioB = b[1].intersectionRatio;
+
+      if (Math.abs(ratioA - ratioB) > INTERSECTION_RATIO_EPSILON) {
+        return ratioB - ratioA;
+      }
+
+      const indexA = itemIndexMap.get(a[0]) ?? -1;
+      const indexB = itemIndexMap.get(b[0]) ?? -1;
+      return indexA - indexB;
+    });
+
+    const [newActiveId] = sorted[0];
+
+    if (activeId !== newActiveId) {
+      activeId = newActiveId;
+      onActiveChange?.(newActiveId);
+    }
+  }
+
+  function setupIntersectionObserver() {
+    if (!browser) return { disconnect: () => {} };
+
+    const root = scrollContainer ? document.querySelector(scrollContainer) : null;
+    if (scrollContainer && !root) {
+      console.warn("ScrollSpy: Scroll container not found:", scrollContainer);
+    }
+
+    const rootMargin = `-${offset}px 0px ${ROOT_MARGIN_BOTTOM} 0px`;
+    // Use threshold range 0.0 → 1.0 in 0.1 steps for smooth updates with better performance
+    const thresholds = Array.from({ length: 11 }, (_, i) => i / 10);
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const id = entry.target.id;
+          if (entry.isIntersecting) {
+            intersectingSections.set(id, entry);
+          } else {
+            intersectingSections.delete(id);
+          }
+        });
+        updateActiveSection();
+      },
+      {
+        root,
+        rootMargin,
+        threshold: thresholds
+      }
+    );
+
+    items.forEach((item) => {
+      const element = document.getElementById(item.id);
+      if (element) observer.observe(element);
+      else console.warn(`ScrollSpy: Section with id "${item.id}" not found in DOM`);
+    });
+
+    return observer;
+  }
+
+  function handleScroll() {
+    if (!browser || !navElement || !sticky || !scrollElement) return;
+
+    const container = scrollElement instanceof Window ? window : scrollElement;
+    const isWindow = container === window;
+
+    const scrollPosition = isWindow ? window.scrollY : (container as HTMLElement).scrollTop; // Type assertion here
+
+    isSticky = scrollPosition > 0;
+    updateActiveSection();
+  }
+
+  $effect(() => {
+    if (!browser) return;
+
+    if (scrollContainer) {
+      const container = document.querySelector(scrollContainer);
+      if (container instanceof HTMLElement) scrollElement = container;
+      else {
+        console.warn("ScrollSpy: Scroll container not found:", scrollContainer);
+        scrollElement = window;
+      }
+    } else {
+      scrollElement = window;
+    }
+
+    const observer = setupIntersectionObserver();
+
+    const container = scrollElement instanceof Window ? window : scrollElement;
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+
+    return () => {
+      observer.disconnect();
+      container.removeEventListener("scroll", handleScroll);
+    };
+  });
+</script>
+
+<nav {...restProps} bind:this={navElement} class={theme.base} aria-label="Scroll spy navigation">
+  <div class={theme.container}>
+    <ul class={theme.list} role="list">
+      {#each items as item (item.id)}
+        <li class={theme.li}>
+          <a
+            href={item.href || `#${item.id}`}
+            class={getItemClass(item.id)}
+            aria-current={activeId === item.id ? "location" : undefined}
+            onclick={(e) => {
+              scrollToSection(item.id, e);
+            }}
+            onkeydown={(e) => handleKeydown(e, item.id)}
+          >
+            {item.label}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</nav>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2328)
+## Props
+@prop items
+@prop position = "top"
+@prop offset = 0
+@prop sticky = true
+@prop activeClass = ""
+@prop inactiveClass = ""
+@prop class: className = ""
+@prop smoothScroll = true
+@prop scrollContainer
+@prop onActiveChange
+@prop onNavigate
+@prop classes
+@prop ...restProps
+-->

package/dist/scroll-spy/ScrollSpy.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ScrollSpyProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ScrollSpyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2328)
+ * ## Props
+ * @prop items
+ * @prop position = "top"
+ * @prop offset = 0
+ * @prop sticky = true
+ * @prop activeClass = ""
+ * @prop inactiveClass = ""
+ * @prop class: className = ""
+ * @prop smoothScroll = true
+ * @prop scrollContainer
+ * @prop onActiveChange
+ * @prop onNavigate
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const ScrollSpy: import("svelte").Component<ScrollSpyProps, {}, "">;
+type ScrollSpy = ReturnType<typeof ScrollSpy>;
+export default ScrollSpy;

package/dist/scroll-spy/index.d.ts

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

package/dist/scroll-spy/index.js

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

package/dist/scroll-spy/theme.d.ts

@@ -0,0 +1,148 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type ScrollSpyVariants = VariantProps<typeof scrollspy> & Classes<typeof scrollspy>;
+export declare const scrollspy: import("tailwind-variants").TVReturnType<{
+    position: {
+        top: {
+            base: string;
+            container: string;
+            list: string;
+        };
+        left: {
+            base: string;
+            container: string;
+            list: string;
+        };
+        right: {
+            base: string;
+            container: string;
+            list: string;
+        };
+    };
+    sticky: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isSticky: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    active: {
+        true: {
+            link: string;
+        };
+        false: {
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    list: string;
+    link: string;
+    li: string;
+}, undefined, {
+    position: {
+        top: {
+            base: string;
+            container: string;
+            list: string;
+        };
+        left: {
+            base: string;
+            container: string;
+            list: string;
+        };
+        right: {
+            base: string;
+            container: string;
+            list: string;
+        };
+    };
+    sticky: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isSticky: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    active: {
+        true: {
+            link: string;
+        };
+        false: {
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    list: string;
+    link: string;
+    li: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        top: {
+            base: string;
+            container: string;
+            list: string;
+        };
+        left: {
+            base: string;
+            container: string;
+            list: string;
+        };
+        right: {
+            base: string;
+            container: string;
+            list: string;
+        };
+    };
+    sticky: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    isSticky: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    active: {
+        true: {
+            link: string;
+        };
+        false: {
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    list: string;
+    link: string;
+    li: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/scroll-spy/theme.js

@@ -0,0 +1,66 @@
+import { tv } from "tailwind-variants";
+export const scrollspy = tv({
+    slots: {
+        base: "bg-white dark:bg-gray-900 p-2 transition-all duration-300 z-40 border-b border-gray-200 dark:border-gray-700",
+        container: "",
+        list: "",
+        link: "px-4 py-2.5 transition-all duration-200 cursor-pointer rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900",
+        li: "p-2 m-1"
+    },
+    variants: {
+        position: {
+            top: {
+                base: "top-0 left-0 right-0 w-full",
+                container: "container mx-auto px-4",
+                list: "flex space-x-1 overflow-x-auto scrollbar-none"
+            },
+            left: {
+                base: "fixed left-0 top-0 bottom-0 h-full w-64 overflow-y-auto",
+                container: "px-4 py-4",
+                list: "flex flex-col space-y-1"
+            },
+            right: {
+                base: "fixed right-0 top-0 bottom-0 h-full w-64 overflow-y-auto",
+                container: "px-4 py-4",
+                list: "flex flex-col space-y-1"
+            }
+        },
+        sticky: {
+            true: {
+                base: ""
+            },
+            false: {
+                base: ""
+            }
+        },
+        isSticky: {
+            true: {
+                base: "shadow-lg"
+            },
+            false: {
+                base: ""
+            }
+        },
+        active: {
+            true: {
+                link: "text-primary-700 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/30 font-semibold focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900"
+            },
+            false: {
+                link: "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
+            }
+        }
+    },
+    defaultVariants: {
+        position: "top",
+        sticky: true,
+        isSticky: false,
+        active: false
+    },
+    compoundVariants: [
+        {
+            position: "top",
+            sticky: true,
+            class: { base: "sticky" }
+        }
+    ]
+});

package/dist/sidebar/Sidebar.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import type { SidebarContextType, SidebarProps } from "../types";
+  import { trapFocus } from "../utils/actions";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { setSidebarContext, setActiveUrlContext } from "../context";
+  import { sineIn } from "svelte/easing";
+  import { writable } from "svelte/store";
+  import { fly } from "svelte/transition";
+  import { sidebar } from "./theme";
+  import { untrack } from "svelte";
+
+  let {
+    children,
+    isOpen = false,
+    closeSidebar,
+    isSingle = true,
+    breakpoint = "md",
+    alwaysOpen = false,
+    position = "fixed",
+    activateClickOutside = true,
+    backdrop = true,
+    backdropClass,
+    transition = fly,
+    params,
+    divClass,
+    ariaLabel,
+    nonActiveClass,
+    activeClass,
+    activeUrl = "",
+    class: className,
+    classes,
+    disableBreakpoints = false,
+    ...restProps
+  }: SidebarProps = $props();
+
+  warnThemeDeprecation(
+    "Sidebar",
+    untrack(() => ({ backdropClass, divClass, nonActiveClass, activeClass })),
+    { backdropClass: "backdrop", divClass: "div", nonActiveClass: "nonactive", activeClass: "active" }
+  );
+
+  const styling = $derived(
+    classes ?? {
+      backdrop: backdropClass,
+      div: divClass,
+      nonactive: nonActiveClass,
+      active: activeClass
+    }
+  );
+
+  const theme = $derived(getTheme("sidebar"));
+
+  const breakpointValues = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  };
+
+  let innerWidth: number = $state(-1);
+  let isLargeScreen = $derived(disableBreakpoints ? false : alwaysOpen || innerWidth >= breakpointValues[breakpoint]);
+
+  // Create reactive context for activeUrl using getter
+  const activeUrlContext = {
+    get value() {
+      return activeUrl;
+    }
+  };
+  setActiveUrlContext(activeUrlContext);
+
+  $effect(() => {
+    if (disableBreakpoints) isOpen = true;
+  });
+  const { base, active, nonactive, div, backdrop: backdropCls } = $derived(sidebar({ isOpen, breakpoint, position, backdrop, alwaysOpen: alwaysOpen && !disableBreakpoints }));
+
+  const selectedStore = $derived(isSingle ? writable<object | null>(null) : undefined);
+  let sidebarCtx: SidebarContextType = {
+    get closeSidebar() {
+      return closeSidebar;
+    },
+    get activeClass() {
+      return active({ class: clsx(theme?.active, styling.active) });
+    },
+    get nonActiveClass() {
+      return nonactive({ class: clsx(theme?.nonactive, styling.nonactive) });
+    },
+    get isSingle() {
+      return isSingle;
+    },
+    get selected() {
+      return selectedStore;
+    }
+  };
+
+  let transitionParams = $derived(params ? params : { x: -320, duration: 200, easing: sineIn });
+
+  setSidebarContext(sidebarCtx);
+
+  // Handler for Escape key
+  const handleEscape = () => {
+    closeSidebar?.();
+  };
+</script>
+
+<svelte:window bind:innerWidth />
+
+{#if !disableBreakpoints}
+  {#if isOpen || isLargeScreen}
+    {#if isOpen && !alwaysOpen}
+      {#if backdrop && activateClickOutside}
+        <div role="presentation" class={backdropCls({ class: clsx(theme?.backdrop, styling.backdrop) })} onclick={closeSidebar}></div>
+      {:else if backdrop && !activateClickOutside}
+        <div role="presentation" class={backdropCls({ class: clsx(theme?.backdrop, styling.backdrop) })}></div>
+      {:else if !backdrop && activateClickOutside}
+        <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full" onclick={closeSidebar}></div>
+      {:else if !backdrop && !activateClickOutside}
+        <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full"></div>
+      {/if}
+    {/if}
+    <aside
+      use:trapFocus={!isLargeScreen && isOpen && !alwaysOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null}
+      transition:transition={!alwaysOpen ? transitionParams : undefined}
+      {...restProps}
+      class={base({ class: clsx(theme?.base, className) })}
+      aria-label={ariaLabel}
+    >
+      <div class={div({ class: clsx(theme?.base, styling.div) })}>
+        {@render children()}
+      </div>
+    </aside>
+  {/if}
+{:else}
+  <aside use:trapFocus={isOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} {...restProps} class={base({ class: clsx(theme?.base, className) })} aria-label={ariaLabel}>
+    <div class={div({ class: clsx(theme?.base, styling.div) })}>
+      {@render children()}
+    </div>
+  </aside>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1453)
+## Props
+@prop children
+@prop isOpen = false
+@prop closeSidebar
+@prop isSingle = true
+@prop breakpoint = "md"
+@prop alwaysOpen = false
+@prop position = "fixed"
+@prop activateClickOutside = true
+@prop backdrop = true
+@prop backdropClass
+@prop transition = fly
+@prop params
+@prop divClass
+@prop ariaLabel
+@prop nonActiveClass
+@prop activeClass
+@prop activeUrl = ""
+@prop class: className
+@prop classes
+@prop disableBreakpoints = false
+@prop ...restProps
+-->