flowbite-svelte 1.18.1 → 1.19.0

package/dist/typography/list/List.svelte.d.ts

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

package/dist/typography/mark/Mark.svelte

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

package/dist/typography/mark/Mark.svelte.d.ts

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

package/dist/typography/paragraph/P.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1985)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1986)
 ## Props
 @prop children
 @prop class: className = "text-gray-900 dark:text-white"

package/dist/typography/paragraph/P.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ParagraphProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1985)
+ * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1986)
  * ## Props
  * @prop children
  * @prop class: className = "text-gray-900 dark:text-white"

package/dist/typography/secondary/Secondary.svelte

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

package/dist/typography/secondary/Secondary.svelte.d.ts

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

package/dist/typography/span/Span.svelte

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

package/dist/typography/span/Span.svelte.d.ts

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

package/dist/utils/Arrow.svelte

@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2041)
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2042)
 ## Props
 @prop placement = "top"
 @prop cords

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

@@ -2,7 +2,7 @@ import type { ArrowProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2041)
+ * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2042)
  * ## Props
  * @prop placement = "top"
  * @prop cords

package/dist/utils/CloseButton.svelte

@@ -45,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L112)
+[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L113)
 ## Props
 @prop children
 @prop color = "gray"

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

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

package/dist/utils/Popper.svelte

@@ -217,7 +217,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2020)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2021)
 ## Props
 @prop triggeredBy
 @prop triggerDelay = 200

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

@@ -2,7 +2,7 @@ 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#L2020)
+ * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2021)
  * ## Props
  * @prop triggeredBy
  * @prop triggerDelay = 200

package/dist/video/Video.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2007)
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2008)
 ## Props
 @prop children
 @prop type = "video/mp4"

package/dist/video/Video.svelte.d.ts

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

package/dist/virtuallist/VirtualList.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import type { VirtualListProps } from "../types";
+  import { virtualList } from "./theme";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+
+  // Destructure props with defaults
+  let {
+    items = [],
+    minItemHeight = 50,
+    height = 400,
+    overscan = 5,
+    getItemHeight,
+    scrollToIndex, // Bind function to parent
+    children,
+    class: className,
+    classes
+  }: VirtualListProps = $props();
+
+  const theme = getTheme("virtualList");
+
+  let container: HTMLDivElement | undefined;
+  let scrollTop = $state(0);
+  let rafId: number | undefined;
+
+  const styles = virtualList();
+
+  // Total height of all items
+  const totalHeight = $derived.by(() => items.reduce((sum: number, item, i) => sum + (getItemHeight ? getItemHeight(item, i) : (minItemHeight ?? 50)), 0));
+
+  // Find the first visible index
+  const startIndex = $derived.by(() => {
+    let y = 0;
+    for (let i = 0; i < items.length; i++) {
+      const h = getItemHeight ? getItemHeight(items[i], i) : (minItemHeight ?? 50);
+      if (y + h > scrollTop) return Math.max(0, i - overscan);
+      y += h;
+    }
+    return 0;
+  });
+
+  // Find the last visible index
+  const endIndex = $derived.by(() => {
+    let y = 0;
+    for (let i = 0; i < items.length; i++) {
+      const h = getItemHeight ? getItemHeight(items[i], i) : (minItemHeight ?? 50);
+      y += h;
+      if (y >= scrollTop + height) return Math.min(items.length, i + overscan + 1);
+    }
+    return items.length;
+  });
+
+  // Items currently rendered
+  const visibleItems = $derived.by(() => items.slice(startIndex, endIndex));
+
+  // Offset of the first visible item
+  const offsetY = $derived.by(() => items.slice(0, startIndex).reduce((sum: number, item, i) => sum + (getItemHeight ? getItemHeight(item, i) : (minItemHeight ?? 50)), 0));
+
+  // Performance optimized scroll handler using RAF
+  function handleScroll() {
+    if (rafId) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(() => {
+      if (container) scrollTop = container.scrollTop;
+    });
+  }
+
+  // Scroll to specific index
+  function scrollToIndexImpl(index: number) {
+    if (!container || index < 0 || index >= items.length) return;
+
+    let y = 0;
+    for (let i = 0; i < index; i++) {
+      y += getItemHeight ? getItemHeight(items[i], i) : (minItemHeight ?? 50);
+    }
+    container.scrollTop = y;
+  }
+
+  // Bind scrollToIndex function to parent component
+  $effect(() => {
+    if (scrollToIndex) {
+      scrollToIndex(scrollToIndexImpl);
+    }
+  });
+
+  // Cleanup RAF on unmount
+  $effect(() => {
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  });
+</script>
+
+<div bind:this={container} onscroll={handleScroll} role="list" aria-label="Virtual scrolling list" class={styles.container({ class: clsx(theme?.container, className) })} style={`height:${height}px; position:relative;`}>
+  <div class={styles.spacer({ class: clsx(theme?.spacer, classes?.spacer) })} style={`height:${totalHeight}px;`}>
+    <div class={styles.content({ class: clsx(theme?.content, classes?.content) })} style={`transform:translateY(${offsetY}px); will-change:transform;`}>
+      {#each visibleItems as item, i (startIndex + i)}
+        {@render children?.(item, startIndex + i)}
+      {/each}
+    </div>
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[VirtualListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2049)
+## Props
+@prop items = []
+@prop minItemHeight = 50
+@prop height = 400
+@prop overscan = 5
+@prop getItemHeight
+@prop scrollToIndex
+@prop children
+@prop class: className
+@prop classes
+-->

package/dist/virtuallist/VirtualList.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { VirtualListProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [VirtualListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2049)
+ * ## Props
+ * @prop items = []
+ * @prop minItemHeight = 50
+ * @prop height = 400
+ * @prop overscan = 5
+ * @prop getItemHeight
+ * @prop scrollToIndex
+ * @prop children
+ * @prop class: className
+ * @prop classes
+ */
+declare const VirtualList: import("svelte").Component<VirtualListProps<unknown>, {}, "">;
+type VirtualList = ReturnType<typeof VirtualList>;
+export default VirtualList;

package/dist/virtuallist/index.d.ts

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

package/dist/virtuallist/index.js

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

package/dist/virtuallist/theme.d.ts

@@ -0,0 +1,40 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type VirtualListVariants = VariantProps<typeof virtualList> & Classes<typeof virtualList>;
+export declare const virtualList: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            container?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            spacer?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            container?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            spacer?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string;
+    spacer: string;
+    content: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            container?: import("tailwind-merge").ClassNameValue;
+            content?: import("tailwind-merge").ClassNameValue;
+            spacer?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string;
+    spacer: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    container: string;
+    spacer: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/virtuallist/theme.js

@@ -0,0 +1,8 @@
+import { tv } from "tailwind-variants";
+export const virtualList = tv({
+    slots: {
+        container: "overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent",
+        spacer: "relative",
+        content: "absolute top-0 left-0 right-0"
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.18.1",
+  "version": "1.19.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -16,28 +16,28 @@
     "@docsearch/css": "^4.2.0",
     "@docsearch/js": "^4.2.0",
     "@eslint/compat": "^1.4.0",
-    "@eslint/js": "^9.37.0",
+    "@eslint/js": "^9.38.0",
     "@flowbite-svelte-plugins/chart": "^0.2.4",
     "@flowbite-svelte-plugins/datatable": "^0.4.1",
-    "@flowbite-svelte-plugins/texteditor": "^0.25.5",
+    "@flowbite-svelte-plugins/texteditor": "^0.25.6",
     "@playwright/test": "^1.56.1",
     "@resvg/resvg-js": "^2.6.2",
     "@sveltejs/adapter-vercel": "^6.0.0",
     "@sveltejs/enhanced-img": "0.8.3",
-    "@sveltejs/kit": "^2.47.1",
+    "@sveltejs/kit": "^2.47.3",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@tailwindcss/vite": "^4.1.14",
+    "@tailwindcss/vite": "^4.1.16",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
-    "@tiptap/core": "3.4.4",
+    "@tiptap/core": "3.7.2",
     "dayjs": "^1.11.18",
     "deepmerge": "^4.3.1",
-    "eslint": "^9.37.0",
+    "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.12.4",
+    "eslint-plugin-svelte": "^3.12.5",
     "flowbite-svelte-admin-dashboard": "^2.0.0",
     "flowbite-svelte-blocks": "^2.1.0",
     "flowbite-svelte-icons": "^3.0.0",
@@ -45,32 +45,32 @@
     "flowbite-typography": "^1.0.5",
     "globals": "^16.4.0",
     "highlight.js": "^11.11.1",
-    "jsdom": "^27.0.0",
+    "jsdom": "^27.0.1",
     "katex": "^0.16.25",
     "lowlight": "^3.3.0",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.7.0",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "prism-themes": "^1.9.0",
-    "publint": "^0.3.14",
+    "publint": "^0.3.15",
     "runatics": "^0.1.4",
     "runes-meta-tags": "^0.4.5",
     "satori": "^0.18.3",
     "satori-html": "^0.3.2",
     "super-sitemap": "^1.0.5",
-    "svelte": "^5.40.2",
+    "svelte": "^5.41.3",
     "svelte-check": "^4.3.3",
     "svelte-doc-llm": "^0.4.1",
     "svelte-lib-helpers": "^0.4.31",
-    "svelte-meta-tags": "^4.4.1",
+    "svelte-meta-tags": "^4.5.0",
     "svelte-rune-highlight": "^0.7.1",
-    "tailwindcss": "^4.1.14",
+    "tailwindcss": "^4.1.16",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.1",
-    "vite": "^7.1.10",
+    "typescript-eslint": "^8.46.2",
+    "vite": "^7.1.12",
     "vite-plugin-devtools-json": "^1.0.0",
     "vitest": "^3.2.4"
   },
@@ -825,6 +825,10 @@
       "types": "./dist/video/Video.svelte.d.ts",
       "svelte": "./dist/video/Video.svelte"
     },
+    "./VirtualList.svelte": {
+      "types": "./dist/virtuallist/VirtualList.svelte.d.ts",
+      "svelte": "./dist/virtuallist/VirtualList.svelte"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {