@pajohns/flowbite-svelte 0.1.0

package/dist/utils/Popper.svelte

@@ -0,0 +1,289 @@
+<script lang="ts">
+  import type { ParamsType, PopperProps, TriggeredToggleEvent } from "../types";
+  import type { Coords, Middleware, Placement } from "@floating-ui/dom";
+  import * as dom from "@floating-ui/dom";
+  import clsx from "clsx";
+  import { sineIn } from "svelte/easing";
+  import { fade } from "svelte/transition";
+  import Arrow from "./Arrow.svelte";
+  import { createMutualDebounce } from "./debounce";
+
+  const DEFAULT_TRIGGER_DELAY = 200;
+  const DEFAULT_OFFSET = 8;
+
+  let {
+    triggeredBy,
+    triggerDelay = DEFAULT_TRIGGER_DELAY,
+    trigger = "click",
+    placement = "top",
+    offset = DEFAULT_OFFSET,
+    arrow = false,
+    yOnly = false,
+    strategy = "absolute",
+    role = "tooltip",
+    reference,
+    middlewares = [dom.flip(), dom.shift()],
+    class: className = "",
+    arrowClass = "",
+    isOpen = $bindable(false),
+    transitionParams,
+    transition = fade,
+    onbeforetoggle,
+    ontoggle,
+    onclose,
+    children,
+    ...restProps
+  }: PopperProps = $props();
+
+  let focusable: boolean = true;
+  let clickable: boolean = $derived(trigger === "click");
+  let hoverable: boolean = $derived(trigger === "hover");
+
+  let popover: HTMLElement | null = $state(null);
+  let invoker: HTMLElement | null = null;
+  let referenceElement: HTMLElement | null = null;
+  let triggerEls: HTMLElement[] = [];
+  let arrowParams = $state<{ placement: Placement; cords: Partial<Coords> }>({ placement: "top", cords: { x: 0, y: 0 } });
+  $effect(() => {
+    arrowParams = {
+      placement,
+      cords: { x: 0, y: 0 }
+    };
+  });
+
+  $effect(() => {
+    if (reference && popover) {
+      referenceElement = popover.ownerDocument.querySelector<HTMLElement>(reference);
+    }
+  });
+
+  let arrowEl: HTMLElement | null = $state(null);
+  $effect(() => {
+    if (popover) {
+      arrowEl = popover.querySelector<HTMLElement>(".popover-arrow");
+    }
+  });
+
+  let middleware: Middleware[] = $derived.by(() => {
+    const base = [...middlewares, dom.offset(offset)];
+    if (arrowEl) base.push(dom.arrow({ element: arrowEl }));
+    return base;
+  });
+
+  const paramsDefault = { duration: 100, easing: sineIn };
+  const paramsOptions = $derived(transitionParams ?? paramsDefault);
+
+  const px = (n: number | undefined) => (n ? `${n}px` : "");
+
+  function updatePopoverPosition() {
+    if (!invoker || !popover) {
+      return;
+    }
+
+    return dom.computePosition(referenceElement ?? invoker, popover, { placement, middleware, strategy }).then(({ x, y, middlewareData: { arrow }, placement: pl, strategy }) => {
+      if (popover) {
+        Object.assign(popover.style, { position: strategy, left: yOnly ? "0" : px(x), right: "auto", top: px(y) });
+        if (arrow && arrowEl) {
+          arrowParams = { placement: pl, cords: { x: arrow.x, y: arrow.y } };
+        }
+      }
+    });
+  }
+
+  async function _open_popover(ev: Event) {
+    ev.preventDefault();
+
+    if (ev.target !== invoker && triggerEls.includes(ev.target as HTMLElement)) {
+      invoker = ev.target as HTMLElement;
+      if (isOpen) {
+        // invoker changed but the popover is open and stays open; pretend as if it toggles
+        popover?.dispatchEvent(new ToggleEvent("beforetoggle", { newState: "open", oldState: "open" }));
+        await updatePopoverPosition();
+        popover?.dispatchEvent(new ToggleEvent("toggle", { newState: "open", oldState: "open" }));
+      }
+    }
+
+    if (ev.type === "mousedown") {
+      isOpen = !isOpen;
+    } else {
+      isOpen = true;
+    }
+  }
+
+  async function _close_popover(ev: Event) {
+    // For click triggers, don't close on focusout events from inside the popover
+    if (trigger === "click" && ev.type === "focusout") {
+      const relatedTarget = (ev as FocusEvent).relatedTarget as HTMLElement;
+
+      // If focus is moving to somewhere inside the popover, don't close
+      if (popover && relatedTarget && popover.contains(relatedTarget)) {
+        return;
+      }
+
+      // If focus is moving to nowhere (like when clicking), don't close for click triggers
+      if (!relatedTarget) {
+        return;
+      }
+    }
+
+    // if popover has focus don't close when leaving the invoker
+    if (ev?.type === "mouseleave" && popover?.contains(popover.ownerDocument.activeElement)) {
+      return;
+    }
+    if (ev?.type === "focusout" && popover?.contains(popover.ownerDocument.activeElement)) {
+      return;
+    }
+
+    isOpen = false;
+  }
+
+  const [open_popover, close_popover] = createMutualDebounce(_open_popover, _close_popover, () => triggerDelay);
+
+  function on_before_toggle(ev: ToggleEvent) {
+    if (!invoker || !popover) return;
+    const evWithTrigger: TriggeredToggleEvent = Object.assign(ev, { trigger: invoker });
+    onbeforetoggle?.(evWithTrigger);
+  }
+
+  $effect(() => {
+    // Floating UI instance when it's closed we need to keep a autoUpdate destroy function
+    let autoUpdateDestroy: (() => void) | null = null;
+
+    if (isOpen && popover && invoker) {
+      autoUpdateDestroy = dom.autoUpdate(referenceElement ?? invoker, popover, updatePopoverPosition);
+      popover.ownerDocument.addEventListener("click", closeOnClickOutside);
+      popover.ownerDocument.addEventListener("keydown", closeOnEscape);
+    }
+
+    return () => {
+      autoUpdateDestroy?.();
+      autoUpdateDestroy = null;
+      popover?.ownerDocument.removeEventListener("click", closeOnClickOutside);
+      popover?.ownerDocument.removeEventListener("keydown", closeOnEscape);
+    };
+  });
+
+  function on_toggle(ev: ToggleEvent) {
+    if (!invoker) return;
+
+    // Update isOpen value when popover state changes through other means
+    isOpen = ev.newState === "open";
+
+    const evWithTrigger: TriggeredToggleEvent = Object.assign(ev, { trigger: invoker });
+    ontoggle?.(evWithTrigger);
+
+    if (ev.newState === "closed") {
+      onclose?.(evWithTrigger);
+    }
+  }
+
+  function set_triggers(node: HTMLElement) {
+    const events: [string, (ev: Event) => void, boolean][] = [
+      ["focusin", open_popover, focusable],
+      ["focusout", close_popover, focusable],
+      ["mousedown", open_popover, clickable],
+      ["mouseenter", open_popover, hoverable],
+      ["mouseleave", close_popover, hoverable]
+    ];
+
+    if (triggeredBy) triggerEls = [...node.ownerDocument.querySelectorAll<HTMLElement>(triggeredBy)];
+    else if (node.previousElementSibling) triggerEls = [node.previousElementSibling as HTMLElement];
+    else if (node.parentElement) triggerEls = [node.parentElement];
+
+    if (!triggerEls.length) {
+      console.error("No triggers found.", triggeredBy);
+      return;
+    }
+
+    invoker = triggerEls[0];
+
+    triggerEls.forEach((element: HTMLElement) => {
+      if (element.tabIndex < 0) element.tabIndex = 0; // trigger must be focusable
+      for (const [name, handler, cond] of events) if (cond) element.addEventListener(name, handler);
+    });
+
+    return () => {
+      triggerEls.forEach((element: HTMLElement) => {
+        for (const [name, handler, cond] of events) if (cond) element.removeEventListener(name, handler);
+      });
+    };
+  }
+
+  function closeOnEscape(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      isOpen = false;
+    }
+  }
+
+  function closeOnClickOutside(event: MouseEvent) {
+    if (!popover) {
+      return;
+    }
+
+    const clickPath = event.composedPath();
+
+    const isClickInsidePopover = clickPath.includes(popover);
+    const isClickOnTrigger = triggerEls.some((el) => clickPath.includes(el));
+
+    // Only close if click is outside both popover and trigger elements
+    if (!isClickInsidePopover && !isClickOnTrigger) {
+      close_popover(event);
+      isOpen = false;
+    }
+  }
+</script>
+
+<div {@attach set_triggers} hidden></div>
+
+{#if isOpen}
+  <div
+    popover="manual"
+    {role}
+    bind:this={popover}
+    class:overflow-visible={true}
+    onfocusout={close_popover}
+    onmouseleave={hoverable ? close_popover : undefined}
+    onmouseenter={hoverable ? open_popover : undefined}
+    class={clsx(className)}
+    transition:transition={paramsOptions as ParamsType}
+    onintrostart={() => popover?.showPopover()}
+    onbeforetoggle={on_before_toggle}
+    ontoggle={on_toggle}
+    onoutroend={() => popover?.hidePopover()}
+    {...restProps}
+  >
+    {@render children()}
+    {#if arrow}
+      <Arrow {...arrowParams} class={arrowClass} />
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2164)
+## Props
+@prop triggeredBy
+@prop triggerDelay = DEFAULT_TRIGGER_DELAY
+@prop trigger = "click"
+@prop placement = "top"
+@prop offset = DEFAULT_OFFSET
+@prop arrow = false
+@prop yOnly = false
+@prop strategy = "absolute"
+@prop role = "tooltip"
+@prop reference
+@prop middlewares = [dom.flip(), dom.shift()]
+@prop class: className = ""
+@prop arrowClass = ""
+@prop isOpen = $bindable(false)
+@prop transitionParams
+@prop transition = fade
+@prop onbeforetoggle
+@prop ontoggle
+@prop onclose
+@prop children
+@prop ...restProps
+-->

package/dist/utils/Popper.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { PopperProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2164)
+ * ## Props
+ * @prop triggeredBy
+ * @prop triggerDelay = DEFAULT_TRIGGER_DELAY
+ * @prop trigger = "click"
+ * @prop placement = "top"
+ * @prop offset = DEFAULT_OFFSET
+ * @prop arrow = false
+ * @prop yOnly = false
+ * @prop strategy = "absolute"
+ * @prop role = "tooltip"
+ * @prop reference
+ * @prop middlewares = [dom.flip(), dom.shift()]
+ * @prop class: className = ""
+ * @prop arrowClass = ""
+ * @prop isOpen = $bindable(false)
+ * @prop transitionParams
+ * @prop transition = fade
+ * @prop onbeforetoggle
+ * @prop ontoggle
+ * @prop onclose
+ * @prop children
+ * @prop ...restProps
+ */
+declare const Popper: import("svelte").Component<PopperProps, {}, "isOpen">;
+type Popper = ReturnType<typeof Popper>;
+export default Popper;

package/dist/utils/actions.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Svelte action that traps focus within a DOM node and handles Escape key
+ * @param node - The DOM node to trap focus within
+ * @param options - Optional configuration object
+ * @returns An action object with destroy method
+ */
+export declare function trapFocus(node: HTMLElement, options?: {
+    onEscape?: () => void;
+    isClosing?: boolean;
+} | null): {
+    update(newOptions?: {
+        onEscape?: () => void;
+        isClosing?: boolean;
+    } | null): void;
+    destroy(): void;
+};

package/dist/utils/actions.js

@@ -0,0 +1,107 @@
+/**
+ * Svelte action that traps focus within a DOM node and handles Escape key
+ * @param node - The DOM node to trap focus within
+ * @param options - Optional configuration object
+ * @returns An action object with destroy method
+ */
+export function trapFocus(node, options = {}) {
+    // If options is null, don't trap focus at all
+    if (options === null) {
+        return {
+            update(newOptions = {}) {
+                options = newOptions;
+            },
+            destroy() { }
+        };
+    }
+    const previous = document.activeElement;
+    // Track if we're currently closing via outside click
+    let isClosingViaOutsideClick = false;
+    // Create a flag to prevent re-focusing when focus is moved outside
+    let isFocusMovedOutside = false;
+    function focusable() {
+        return Array.from(node.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+    }
+    function handleKeydown(event) {
+        if (event.key === "Tab" && options !== null) {
+            const current = document.activeElement;
+            const elements = focusable();
+            const first = elements.at(0);
+            const last = elements.at(-1);
+            if (event.shiftKey && current === first) {
+                last?.focus();
+                event.preventDefault();
+            }
+            if (!event.shiftKey && current === last) {
+                first?.focus();
+                event.preventDefault();
+            }
+        }
+        else if (event.key === "Escape" && options !== null && options.onEscape) {
+            event.preventDefault();
+            // Mark as closing via escape to prevent focus restoration
+            isClosingViaOutsideClick = true;
+            options.onEscape();
+        }
+    }
+    // Handler for when focus moves outside the trapped area
+    function handleFocusOut(event) {
+        // If focus is moving outside our node and not to one of our triggers
+        if (!node.contains(event.relatedTarget) && event.relatedTarget !== previous) {
+            isFocusMovedOutside = true;
+        }
+    }
+    // Initialize the action
+    function initialize() {
+        // Only add event listeners if options is not null
+        if (options !== null) {
+            // Check if we're currently in a closing state
+            isClosingViaOutsideClick = !!options.isClosing;
+            // Only auto-focus if not closing from outside click
+            if (!isClosingViaOutsideClick && !isFocusMovedOutside) {
+                const elements = focusable();
+                if (elements.length > 0) {
+                    elements[0].focus();
+                }
+            }
+            node.addEventListener("keydown", handleKeydown);
+            node.addEventListener("focusout", handleFocusOut);
+        }
+    }
+    // Cleanup function
+    function cleanup() {
+        if (options !== null) {
+            node.removeEventListener("keydown", handleKeydown);
+            node.removeEventListener("focusout", handleFocusOut);
+            // Only restore focus if not closing via outside click and focus hasn't moved outside
+            if (!isClosingViaOutsideClick && !isFocusMovedOutside && previous) {
+                setTimeout(() => {
+                    previous.focus({ preventScroll: true });
+                }, 0);
+            }
+        }
+    }
+    // Initialize on mount
+    initialize();
+    // Return the action object with update and destroy methods
+    return {
+        update(newOptions = {}) {
+            // Clean up existing listeners first
+            node.removeEventListener("keydown", handleKeydown);
+            node.removeEventListener("focusout", handleFocusOut);
+            // Update the closing state
+            if (newOptions && newOptions.isClosing !== undefined) {
+                isClosingViaOutsideClick = newOptions.isClosing;
+            }
+            options = newOptions;
+            // Reinitialize with new options
+            if (options !== null) {
+                node.addEventListener("keydown", handleKeydown);
+                node.addEventListener("focusout", handleFocusOut);
+            }
+        },
+        destroy() {
+            cleanup();
+        }
+    };
+}

package/dist/utils/countdown.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare function createCountdown(initialSeconds?: number): {
+    readonly timeLeft: number;
+    readonly isRunning: boolean;
+    start: () => void;
+    stop: () => void;
+    reset: (seconds: number) => void;
+    destroy: () => void;
+};

package/dist/utils/countdown.svelte.js

@@ -0,0 +1,64 @@
+export function createCountdown(initialSeconds = 60) {
+    let timeLeft = $state(initialSeconds);
+    let isRunning = $state(false);
+    let animationId = null;
+    let lastTimestamp = null;
+    function tick(timestamp) {
+        if (!lastTimestamp) {
+            lastTimestamp = timestamp;
+        }
+        const elapsed = timestamp - lastTimestamp;
+        if (elapsed >= 1000) {
+            timeLeft--;
+            lastTimestamp = timestamp;
+            if (timeLeft <= 0) {
+                stop();
+                timeLeft = 0;
+                return;
+            }
+        }
+        if (isRunning) {
+            animationId = requestAnimationFrame(tick);
+        }
+    }
+    function start() {
+        if (timeLeft > 0 && !isRunning) {
+            isRunning = true;
+            lastTimestamp = null;
+            animationId = requestAnimationFrame(tick);
+        }
+    }
+    function stop() {
+        isRunning = false;
+        lastTimestamp = null;
+        if (animationId) {
+            cancelAnimationFrame(animationId);
+            animationId = null;
+        }
+    }
+    function reset(seconds) {
+        stop();
+        timeLeft = seconds;
+    }
+    function destroy() {
+        if (animationId) {
+            cancelAnimationFrame(animationId);
+        }
+    }
+    // ensures cleanup happens automatically when the component using createCountdown unmounts
+    $effect(() => {
+        return () => destroy();
+    });
+    return {
+        get timeLeft() {
+            return timeLeft;
+        },
+        get isRunning() {
+            return isRunning;
+        },
+        start,
+        stop,
+        reset,
+        destroy
+    };
+}

package/dist/utils/debounce.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Create a mutual debounce for two opposing actions.
+ * Calling one action cancels any pending execution of the other.
+ *
+ * @param actionA - First action (e.g., openDialog)
+ * @param actionB - Second action (e.g., closeDialog)
+ * @param delayFunc - Function returning delay in milliseconds (default: 300ms)
+ * @returns Object with mutual debounce control methods
+ *
+ * @example
+ * const [openDialogDeb, closeDialogDeb] = createMutualDebounce(openDialog, closeDialog, () => 300);
+ * openDialogDeb(); // Schedule open
+ * closeDialogDeb(); // Cancel open, schedule close
+ */
+type Func = (...args: any[]) => unknown;
+export declare function createMutualDebounce<A extends Func, B extends Func>(actionA: A, actionB: B, delayFunc: () => number): [(...args: Parameters<A>) => void, (...args: Parameters<B>) => void];
+export {};

package/dist/utils/debounce.js

@@ -0,0 +1,41 @@
+/**
+ * Create a mutual debounce for two opposing actions.
+ * Calling one action cancels any pending execution of the other.
+ *
+ * @param actionA - First action (e.g., openDialog)
+ * @param actionB - Second action (e.g., closeDialog)
+ * @param delayFunc - Function returning delay in milliseconds (default: 300ms)
+ * @returns Object with mutual debounce control methods
+ *
+ * @example
+ * const [openDialogDeb, closeDialogDeb] = createMutualDebounce(openDialog, closeDialog, () => 300);
+ * openDialogDeb(); // Schedule open
+ * closeDialogDeb(); // Cancel open, schedule close
+ */
+export function createMutualDebounce(actionA, actionB, delayFunc) {
+    let rafId = null;
+    function scheduleExecution(func, args, startTime) {
+        rafId = requestAnimationFrame((currentTime) => {
+            const elapsed = currentTime - (startTime || 0);
+            if (elapsed < delayFunc())
+                return scheduleExecution(func, args, startTime);
+            rafId = null;
+            func(...args);
+        });
+    }
+    function cancel() {
+        if (rafId !== null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+    }
+    const debouncedA = (...args) => {
+        cancel();
+        scheduleExecution(actionA, args, performance.now());
+    };
+    const debouncedB = (...args) => {
+        cancel();
+        scheduleExecution(actionB, args, performance.now());
+    };
+    return [debouncedA, debouncedB];
+}

package/dist/utils/dismissable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * DismissableContext provides a way to dismiss a component or modal.
+ * It should be used within a component that needs to provide dismiss functionality.
+ */
+export type DismissableContext = {
+    dismiss: (event: MouseEvent) => void;
+};
+export declare function createDismissableContext(onDismiss: (event: MouseEvent) => void): DismissableContext;
+export declare function useDismiss(): DismissableContext;

package/dist/utils/dismissable.js

@@ -0,0 +1,16 @@
+import { getContext, setContext } from "svelte";
+const DISMISSABLE_KEY = Symbol("dismissable");
+export function createDismissableContext(onDismiss) {
+    const context = {
+        dismiss: onDismiss
+    };
+    return setContext(DISMISSABLE_KEY, context);
+}
+export function useDismiss() {
+    const context = getContext(DISMISSABLE_KEY);
+    if (!context) {
+        // uncomment below line if you want to trace usage without the context
+        // console.warn('useDismiss must be used within a Dismissable component'); // For development purposes
+    }
+    return context;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,8 @@
+import { type ClassValue } from "clsx";
+export { default as CloseButton } from "./CloseButton.svelte";
+export { closeButton } from "./theme";
+export { trapFocus } from "./actions";
+export { default as Popper } from "./Popper.svelte";
+export * from "./responsive.svelte";
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function idGenerator(): string;

package/dist/utils/index.js

@@ -0,0 +1,14 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export { default as CloseButton } from "./CloseButton.svelte";
+export { closeButton } from "./theme";
+export { trapFocus } from "./actions";
+export { default as Popper } from "./Popper.svelte";
+export * from "./responsive.svelte";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+let n = Date.now();
+export function idGenerator() {
+    return (++n).toString(36);
+}

package/dist/utils/nonPassiveTouch.d.ts

@@ -0,0 +1,3 @@
+export declare function nonPassiveTouch(node: HTMLElement, handler: (event: TouchEvent) => void): {
+    destroy(): void;
+};

package/dist/utils/nonPassiveTouch.js

@@ -0,0 +1,8 @@
+export function nonPassiveTouch(node, handler) {
+    node.addEventListener("touchstart", handler, { passive: false });
+    return {
+        destroy() {
+            node.removeEventListener("touchstart", handler);
+        }
+    };
+}