flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/pagination/theme.d.ts

@@ -0,0 +1,184 @@
+export declare const paginationItem: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex items-center font-medium", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, {
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}>, {
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex items-center font-medium", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}, {
+    size: {
+        default: string;
+        large: string;
+    };
+    active: {
+        true: string;
+        false: string;
+    };
+    group: {
+        true: string;
+        false: string;
+    };
+    table: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const pagination: import("tailwind-variants").TVReturnType<{
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, undefined, "inline-flex -space-x-px rtl:space-x-reverse items-center", import("tailwind-variants/dist/config").TVConfig<{
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, {
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}>, {
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, undefined, "inline-flex -space-x-px rtl:space-x-reverse items-center", import("tailwind-variants/dist/config").TVConfig<{
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}, {
+    table: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        large: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/pagination/theme.js

@@ -0,0 +1,52 @@
+import { tv } from "tailwind-variants";
+export const paginationItem = tv({
+    base: "flex items-center font-medium",
+    variants: {
+        size: {
+            default: "h-8 px-3 text-sm",
+            large: "h-10 px-4 text-base"
+        },
+        active: {
+            true: "text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white",
+            false: "text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        },
+        group: {
+            true: "",
+            false: "rounded-lg"
+        },
+        table: {
+            true: "rounded",
+            false: "border"
+        }
+    },
+    compoundVariants: [
+        {
+            group: false,
+            table: false,
+            class: "rounded-lg"
+        }
+    ],
+    defaultVariants: {
+        size: "default",
+        active: false,
+        group: false,
+        table: false
+    }
+});
+export const pagination = tv({
+    base: "inline-flex -space-x-px rtl:space-x-reverse items-center",
+    variants: {
+        table: {
+            true: "divide-x rtl:divide-x-reverse dark divide-gray-700 dark:divide-gray-700",
+            false: ""
+        },
+        size: {
+            default: "",
+            large: ""
+        }
+    },
+    defaultVariants: {
+        table: false,
+        size: "default"
+    }
+});

package/dist/pagination/type.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLLiAttributes } from "svelte/elements";
+type PaginationItemType = {
+    size?: "default" | "large";
+    active?: boolean | null;
+    group?: boolean | null;
+    table?: boolean | null;
+};
+interface PaginationItemSpecificProps {
+    children?: Snippet;
+    name?: string;
+    href?: string;
+    active?: boolean;
+    rel?: string;
+    size?: "default" | "large" | undefined;
+}
+type HTMLAttributesWithoutAbort = Omit<HTMLButtonAttributes, "on:abort"> & Omit<HTMLAnchorAttributes, "on:abort">;
+interface PaginationItemProps extends HTMLAttributesWithoutAbort {
+    children?: Snippet;
+    name?: string;
+    href?: string;
+    active?: boolean;
+    rel?: string;
+    size?: "default" | "large" | undefined;
+}
+interface PaginationProps extends HTMLLiAttributes {
+    prevContent?: Snippet;
+    nextContent?: Snippet;
+    pages?: PaginationItemProps[];
+    previous?: () => void;
+    next?: () => void;
+    table?: boolean;
+    size?: PaginationItemType["size"];
+    ariaLabel?: string;
+}
+export { type PaginationItemProps, type PaginationProps, type PaginationItemSpecificProps };

package/dist/pagination/type.js

@@ -0,0 +1 @@
+export {};

package/dist/popover/Popover.svelte

@@ -1,25 +1,247 @@
-<script>import Popper from "../utils/Popper.svelte";
-export let title = "";
-export let defaultClass = "py-2 px-3";
+<script lang="ts">
+  import { type PopoverProps as Props, popover } from ".";
+  import { onDestroy } from "svelte";
+  import { type ParamsType } from "../types";
+  import { fade } from "svelte/transition";
+  import { linear } from "svelte/easing";
+
+  let { children, titleSlot, color = "default", arrow = true, offset = 0, triggeredBy, position = "top", class: className, reference, transition = fade, params, ...restProps }: Props = $props();
+
+  let { base, title, h3, arrowBase } = $derived(popover({ color, arrow, position }));
+
+  const defaultParams: ParamsType = { duration: 100, easing: linear };
+
+  let tooltipElement: HTMLElement | null = $state(null);
+  let triggerElement: HTMLElement | null = null;
+  let referenceElement: HTMLElement | null = null;
+  let arrowEl: HTMLElement | null = $state(null);
+  let visible = $state(false);
+  let positioned = $state(false);
+
+  // Change the type to accommodate both browser and Node.js environments
+  let hideTimeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  const showTooltip = () => {
+    visible = true;
+    setTimeout(() => {
+      positionTooltip();
+      positioned = true;
+    }, 0);
+  };
+
+  const hideTooltip = () => {
+    visible = false;
+    positioned = false;
+  };
+
+  const onPopoverEnter = () => {
+    if (hideTimeoutId !== undefined) {
+      clearTimeout(hideTimeoutId);
+      hideTimeoutId = undefined;
+    }
+  };
+
+  // Handle mouse leave on popover
+  const onPopoverLeave = () => {
+    hideTooltip();
+  };
+
+  const onTriggerLeave = () => {
+    // Set a timeout to hide the tooltip, allowing time to move to the popover
+    hideTimeoutId = setTimeout(hideTooltip, 100);
+  };
+
+  const positionTooltip = () => {
+    if (!tooltipElement || !triggerElement) return;
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const referenceRect = reference && referenceElement ? referenceElement.getBoundingClientRect() : triggerRect;
+    const tooltipRect = tooltipElement.getBoundingClientRect();
+    const arrowRect = arrow && arrowEl ? arrowEl.getBoundingClientRect() : null;
+
+    const scrollX = window.scrollX || document.documentElement.scrollLeft;
+    const scrollY = window.scrollY || document.documentElement.scrollTop;
+
+    let top, left, arrowTop, arrowLeft;
+
+    switch (position) {
+      case "top":
+        top = referenceRect.top + scrollY - tooltipRect.height - 10 - offset;
+        left = referenceRect.left + scrollX + referenceRect.width / 2 - tooltipRect.width / 2;
+        if (arrowRect && offset === 0) {
+          arrowTop = tooltipRect.height - 5;
+          arrowLeft = tooltipRect.width / 2 - arrowRect.width / 2;
+        }
+        break;
+      case "top-start":
+        top = referenceRect.top + scrollY - tooltipRect.height - 10 - offset;
+        left = referenceRect.left + scrollX;
+        if (arrowRect && offset === 0) {
+          arrowTop = tooltipRect.height - 5;
+          arrowLeft = referenceRect.width / 2 - arrowRect.width / 2;
+        }
+        break;
+      case "top-end":
+        top = referenceRect.top + scrollY - tooltipRect.height - 10 - offset;
+        left = referenceRect.right + scrollX - tooltipRect.width;
+        if (arrowRect && offset === 0) {
+          arrowTop = tooltipRect.height - 5;
+          arrowLeft = tooltipRect.width - referenceRect.width / 2 - arrowRect.width / 2;
+        }
+        break;
+      case "bottom":
+        top = referenceRect.bottom + scrollY + 10 + offset;
+        left = referenceRect.left + scrollX + referenceRect.width / 2 - tooltipRect.width / 2;
+        if (arrowRect && offset === 0) {
+          arrowTop = -arrowRect.height + 9;
+          arrowLeft = tooltipRect.width / 2 - arrowRect.width / 2;
+        }
+        break;
+      case "bottom-start":
+        top = referenceRect.bottom + scrollY + 10 + offset;
+        left = referenceRect.left + scrollX;
+        if (arrowRect && offset === 0) {
+          arrowTop = -arrowRect.height + 9;
+          arrowLeft = referenceRect.width / 2 - arrowRect.width / 2;
+        }
+        break;
+      case "bottom-end":
+        top = referenceRect.bottom + scrollY + 10 + offset;
+        left = referenceRect.right + scrollX - tooltipRect.width;
+        if (arrowRect && offset === 0) {
+          arrowTop = -arrowRect.height + 9;
+          arrowLeft = tooltipRect.width - referenceRect.width / 2 - arrowRect.width / 2;
+        }
+        break;
+      case "left":
+        top = referenceRect.top + scrollY + referenceRect.height / 2 - tooltipRect.height / 2;
+        left = referenceRect.left + scrollX - tooltipRect.width - 10 - offset;
+        if (arrowRect && offset === 0) {
+          arrowTop = tooltipRect.height / 2 - arrowRect.height / 2;
+          arrowLeft = tooltipRect.width - 5;
+        }
+        break;
+      case "left-start":
+        top = referenceRect.top + scrollY;
+        left = referenceRect.left + scrollX - tooltipRect.width - 10 - offset;
+        if (arrowRect && offset === 0) {
+          arrowTop = arrowRect.height;
+          arrowLeft = tooltipRect.width - 5;
+        }
+        break;
+      case "left-end":
+        top = referenceRect.bottom + scrollY - tooltipRect.height;
+        left = referenceRect.left + scrollX - tooltipRect.width - 10 - offset;
+        if (arrowRect && offset === 0) {
+          arrowTop = tooltipRect.height - arrowRect.height * 2;
+          arrowLeft = tooltipRect.width - 5;
+        }
+        break;
+      case "right":
+        top = referenceRect.top + scrollY + referenceRect.height / 2 - tooltipRect.height / 2;
+        left = referenceRect.right + scrollX + 10 + offset;
+        if (arrowRect && offset === 0) {
+          arrowTop = tooltipRect.height / 2 - arrowRect.height / 2;
+          arrowLeft = -arrowRect.width / 2 + 2;
+        }
+        break;
+      case "right-start":
+        top = referenceRect.top + scrollY;
+        left = referenceRect.right + scrollX + 10 + offset;
+        if (arrowRect && offset === 0) {
+          arrowTop = arrowRect.height;
+          arrowLeft = -arrowRect.width / 2 + 2;
+        }
+        break;
+      case "right-end":
+        top = referenceRect.bottom + scrollY - tooltipRect.height;
+        left = referenceRect.right + scrollX + 10 + offset;
+        if (arrowRect && offset === 0) {
+          arrowTop = tooltipRect.height - arrowRect.height * 2;
+          arrowLeft = -arrowRect.width / 2 + 2;
+        }
+        break;
+    }
+
+    tooltipElement.style.top = `${top}px`;
+    tooltipElement.style.left = `${left}px`;
+
+    if (arrowEl && arrowRect) {
+      arrowEl.style.top = `${arrowTop}px`;
+      arrowEl.style.left = `${arrowLeft}px`;
+    }
+  };
+
+  $effect(() => {
+    triggerElement = document.querySelector(triggeredBy);
+    referenceElement = reference ? document.querySelector(reference) : triggerElement;
+
+    if (triggerElement) {
+      triggerElement.addEventListener("mouseenter", showTooltip);
+      triggerElement.addEventListener("mouseleave", onTriggerLeave);
+    }
+
+    const handlePositionUpdate = () => {
+      if (visible) {
+        positionTooltip();
+      }
+    };
+
+    window.addEventListener("resize", handlePositionUpdate);
+    window.addEventListener("scroll", handlePositionUpdate, true);
+
+    onDestroy(() => {
+      if (triggerElement) {
+        triggerElement.removeEventListener("mouseenter", showTooltip);
+        triggerElement.removeEventListener("mouseleave", onTriggerLeave);
+      }
+      window.removeEventListener("resize", handlePositionUpdate);
+      window.removeEventListener("scroll", handlePositionUpdate, true);
+      if (hideTimeoutId !== undefined) {
+        clearTimeout(hideTimeoutId);
+      }
+    });
+  });
 </script>
 
-<Popper activeContent border shadow rounded {...$$restProps} class="dark:!border-gray-600 {$$props.class}" on:show>
-  {#if $$slots.title || title}
-    <div class="py-2 px-3 bg-gray-100 rounded-t-md border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">
-      <slot name="title">
-        <h3 class="font-semibold text-gray-900 dark:text-white">{title}</h3>
-      </slot>
-    </div>
-  {/if}
-  <div class={defaultClass}>
-    <slot />
+{#if transition && visible}
+  <div transition:transition={params || defaultParams} role="tooltip" bind:this={tooltipElement} {...restProps} class={`${base({ className })} ${positioned ? "visible opacity-100" : "invisible opacity-0"} transition-opacity duration-200`} onmouseenter={onPopoverEnter} onmouseleave={onPopoverLeave}>
+    {#if typeof titleSlot === "string"}
+      <div class={title()}>
+        <h3 class={h3()}>{titleSlot}</h3>
+      </div>
+    {:else if titleSlot}
+      {@render titleSlot()}
+    {/if}
+    {@render children()}
+    {#if arrow}<div bind:this={arrowEl} class={arrowBase({ arrow, position })}></div>{/if}
+  </div>
+{:else if visible}
+  <div role="tooltip" bind:this={tooltipElement} {...restProps} class={`${base({ className })} ${positioned ? "visible opacity-100" : "invisible opacity-0"} transition-opacity duration-200`} onmouseenter={onPopoverEnter} onmouseleave={onPopoverLeave}>
+    {#if typeof titleSlot === "string"}
+      <div class={title()}>
+        <h3 class={h3()}>{titleSlot}</h3>
+      </div>
+    {:else if titleSlot}
+      {@render titleSlot()}
+    {/if}
+    {@render children()}
+    {#if arrow}<div bind:this={arrowEl} class={arrowBase({ arrow, position })}></div>{/if}
   </div>
-</Popper>
+{/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let title: string = '';
-@prop export let defaultClass: string = 'py-2 px-3';
+@props: children: any;
+@props:titleSlot: any;
+@props:color: any = "default";
+@props:arrow: any = true;
+@props:offset: any = 0;
+@props:triggeredBy: any;
+@props:position: any = "top";
+@props:class: string;
+@props:reference: any;
+@props:transition: any = fade;
+@props:params: any;
 -->

package/dist/popover/Popover.svelte.d.ts

@@ -1,53 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
-        tag?: string;
-        color?: import("../utils/Frame.svelte").FrameColor;
-        rounded?: boolean;
-        border?: boolean;
-        shadow?: boolean;
-        node?: HTMLElement | undefined;
-        use?: import("svelte/action").Action<HTMLElement, any>;
-        options?: object;
-        class?: string;
-        role?: string;
-        open?: boolean;
-        transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
-        params?: any;
-    } & {
-        activeContent?: boolean;
-        arrow?: boolean;
-        offset?: number;
-        placement?: import("@floating-ui/dom").Placement;
-        trigger?: "hover" | "click" | "focus";
-        triggeredBy?: string;
-        reference?: string;
-        strategy?: "absolute" | "fixed";
-        open?: boolean;
-        yOnly?: boolean;
-    } & {
-        title?: string;
-        defaultClass?: string;
-    };
-    events: {
-        show: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        title: {};
-        default: {};
-    };
-};
-export type PopoverProps = typeof __propDef.props;
-export type PopoverEvents = typeof __propDef.events;
-export type PopoverSlots = typeof __propDef.slots;
+import { type PopoverProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let title: string = '';
- * @prop export let defaultClass: string = 'py-2 px-3';
+ * @props: children: any;
+ * @props:titleSlot: any;
+ * @props:color: any = "default";
+ * @props:arrow: any = true;
+ * @props:offset: any = 0;
+ * @props:triggeredBy: any;
+ * @props:position: any = "top";
+ * @props:class: string;
+ * @props:reference: any;
+ * @props:transition: any = fade;
+ * @props:params: any;
  */
-export default class Popover extends SvelteComponentTyped<PopoverProps, PopoverEvents, PopoverSlots> {
-}
-export {};
+declare const Popover: import("svelte").Component<Props, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/popover/index.d.ts

@@ -0,0 +1,10 @@
+import type { PopoverProps, TooltipPositionOptions, PositionResult, Position } from "./type";
+import Popover from "./Popover.svelte";
+import { popover } from "./theme";
+/**
+ * Calculates the position for a tooltip relative to a reference element.
+ * @param options - The options for positioning
+ * @returns The calculated position for the tooltip and arrow
+ */
+declare function calculateTooltipPosition({ tooltipRect, referenceRect, position, offset, arrowRect }: TooltipPositionOptions): PositionResult;
+export { Popover, popover, type PopoverProps, type Position, calculateTooltipPosition };