flowbite-svelte 1.24.1 → 1.26.0

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

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

package/dist/typography/list/List.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2000)
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
 ## Props
 @prop children
 @prop tag = "ul"

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#L2000)
+ * [ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
  * ## 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#L2014)
+[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2015)
 ## 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#L2014)
+ * [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2015)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/paragraph/P.svelte

@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2019)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2020)
 ## 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#L2019)
+ * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2020)
  * ## 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#L2027)
+[SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2028)
 ## 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#L2027)
+ * [SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2028)
  * ## 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#L2032)
+[SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2033)
 ## 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#L2032)
+ * [SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2033)
  * ## 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#L2076)
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2077)
 ## 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#L2076)
+ * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2077)
  * ## Props
  * @prop placement = "top"
  * @prop cords

package/dist/utils/Popper.svelte

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

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

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);
+        }
+    };
+}

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#L2041)
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2042)
 ## 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#L2041)
+ * [VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2042)
  * ## Props
  * @prop children
  * @prop type = "video/mp4"

package/dist/virtual-masonry/VirtualMasonry.svelte

@@ -0,0 +1,185 @@
+<script lang="ts" generics="T">
+  import type { VirtualMasonryProps } from "../types";
+  import { virtualMasonry } from "./theme";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+
+  let {
+    items = [],
+    columns = 3,
+    gap = 16,
+    height = 600,
+    overscan = 200,
+    getItemHeight,
+    scrollToIndex,
+    children,
+    ariaLabel = "Virtual masonry grid",
+    class: className,
+    classes,
+    contained = false
+  }: VirtualMasonryProps<T> = $props();
+
+  const theme = getTheme("virtualMasonry");
+
+  let container: HTMLDivElement | undefined;
+  let containerWidth = $state(0);
+  let scrollTop = $state(0);
+  let rafId: number | undefined;
+
+  const styles = virtualMasonry({ contained });
+
+  const containStyle = $derived.by(() => {
+    if (!contained) return "";
+    const itemClasses = clsx(classes?.item);
+    const hasCustomContain = /\[contain:[^\]]+\]/.test(itemClasses);
+    return hasCustomContain ? "" : "contain: layout style paint;";
+  });
+
+  // Calculate column width based on container width
+  const columnWidth = $derived.by(() => {
+    if (containerWidth === 0) return 0;
+    return (containerWidth - gap * (columns - 1)) / columns;
+  });
+
+  // Position items in columns
+  interface PositionedItem {
+    item: T;
+    index: number;
+    x: number;
+    y: number;
+    height: number;
+    column: number;
+  }
+
+  const positionedItems = $derived.by((): PositionedItem[] => {
+    if (columnWidth === 0) return [];
+
+    const columnHeights = new Array(columns).fill(0);
+    const positioned: PositionedItem[] = [];
+
+    for (let i = 0; i < items.length; i++) {
+      // Find shortest column
+      const shortestColumn = columnHeights.indexOf(Math.min(...columnHeights));
+      const itemHeight = getItemHeight ? getItemHeight(items[i], i) : 200;
+
+      positioned.push({
+        item: items[i],
+        index: i,
+        x: shortestColumn * (columnWidth + gap),
+        y: columnHeights[shortestColumn],
+        height: itemHeight,
+        column: shortestColumn
+      });
+
+      columnHeights[shortestColumn] += itemHeight + gap;
+    }
+
+    return positioned;
+  });
+
+  // Total height is the tallest column
+  const totalHeight = $derived.by(() => {
+    if (positionedItems.length === 0) return 0;
+    return Math.max(...positionedItems.map((item) => item.y + item.height));
+  });
+
+  // Visible items based on scroll position with overscan
+  const visibleItems = $derived.by(() => {
+    const viewportTop = scrollTop - overscan;
+    const viewportBottom = scrollTop + height + overscan;
+
+    return positionedItems.filter((item) => {
+      const itemTop = item.y;
+      const itemBottom = item.y + item.height;
+      return itemBottom >= viewportTop && itemTop <= viewportBottom;
+    });
+  });
+
+  // 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;
+    const item = positionedItems[index];
+    if (item) {
+      container.scrollTop = item.y;
+    }
+  }
+
+  // Bind scrollToIndex function to parent component
+  $effect(() => {
+    if (scrollToIndex) {
+      scrollToIndex(scrollToIndexImpl);
+    }
+  });
+
+  // Measure container width on mount and resize
+  $effect(() => {
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        containerWidth = entry.contentRect.width;
+      }
+    });
+
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  });
+</script>
+
+<div
+  bind:this={container}
+  onscroll={handleScroll}
+  role="list"
+  aria-label={ariaLabel}
+  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) })}>
+      {#each visibleItems as { item, index, x, y, height: itemHeight } (index)}
+        <div
+          role="listitem"
+          aria-setsize={items.length}
+          aria-posinset={index + 1}
+          class={styles.item({ class: clsx(theme?.item, classes?.item) })}
+          style={`position:absolute; left:${x}px; top:${y}px; width:${columnWidth}px; height:${itemHeight}px; ${containStyle}`}
+        >
+          {@render children?.(item, index)}
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<!--
+@component
+VirtualMasonry - Virtualized masonry/pinterest layout for efficient rendering of large image grids
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[VirtualMasonryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts)
+## Props
+@prop items = []
+@prop columns = 3
+@prop gap = 16
+@prop height = 600
+@prop overscan = 200
+@prop getItemHeight
+@prop scrollToIndex
+@prop children
+@prop ariaLabel = "Virtual masonry grid"
+@prop contained = false
+@prop class: className
+@prop classes
+-->

package/dist/virtual-masonry/VirtualMasonry.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { VirtualMasonryProps } from "../types";
+declare function $$render<T>(): {
+    props: VirtualMasonryProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * VirtualMasonry - Virtualized masonry/pinterest layout for efficient rendering of large image grids
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [VirtualMasonryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts)
+ * ## Props
+ * @prop items = []
+ * @prop columns = 3
+ * @prop gap = 16
+ * @prop height = 600
+ * @prop overscan = 200
+ * @prop getItemHeight
+ * @prop scrollToIndex
+ * @prop children
+ * @prop ariaLabel = "Virtual masonry grid"
+ * @prop contained = false
+ * @prop class: className
+ * @prop classes
+ */
+declare const VirtualMasonry: $$IsomorphicComponent;
+type VirtualMasonry<T> = InstanceType<typeof VirtualMasonry<T>>;
+export default VirtualMasonry;

package/dist/virtual-masonry/index.d.ts

@@ -0,0 +1,3 @@
+export { default as VirtualMasonry } from "./VirtualMasonry.svelte";
+export type { VirtualMasonryVariants } from "./theme";
+export { virtualMasonry } from "./theme";

package/dist/virtual-masonry/index.js

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

package/dist/virtual-masonry/theme.d.ts

@@ -0,0 +1,40 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export declare const virtualMasonry: import("tailwind-variants").TVReturnType<{
+    contained: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+}, {
+    container: string;
+    spacer: string;
+    content: string;
+    item: string;
+}, undefined, {
+    contained: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+}, {
+    container: string;
+    spacer: string;
+    content: string;
+    item: string;
+}, import("tailwind-variants").TVReturnType<{
+    contained: {
+        true: {
+            item: string;
+        };
+        false: {};
+    };
+}, {
+    container: string;
+    spacer: string;
+    content: string;
+    item: string;
+}, undefined, unknown, unknown, undefined>>;
+export type VirtualMasonryVariants = VariantProps<typeof virtualMasonry> & Classes<typeof virtualMasonry>;

package/dist/virtual-masonry/theme.js

@@ -0,0 +1,18 @@
+import { tv } from "tailwind-variants";
+export const virtualMasonry = tv({
+    slots: {
+        container: "overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent",
+        spacer: "relative",
+        content: "relative w-full",
+        item: ""
+    },
+    variants: {
+        contained: {
+            true: { item: "[contain:layout_style_paint]" },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        contained: false
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.24.1",
+  "version": "1.26.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -861,6 +861,10 @@
       "types": "./dist/video/Video.svelte.d.ts",
       "svelte": "./dist/video/Video.svelte"
     },
+    "./VirtualMasonry.svelte": {
+      "types": "./dist/virtual-masonry/VirtualMasonry.svelte.d.ts",
+      "svelte": "./dist/virtual-masonry/VirtualMasonry.svelte"
+    },
     "./VirtualList.svelte": {
       "types": "./dist/virtuallist/VirtualList.svelte.d.ts",
       "svelte": "./dist/virtuallist/VirtualList.svelte"