@pajohns/flowbite-svelte 0.1.0

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/dist/virtuallist/VirtualList.svelte

@@ -0,0 +1,145 @@
+<script lang="ts" generics="T">
+  import type { VirtualListProps } from "../types";
+  import { virtualList } from "./theme";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+
+  let {
+    items = [],
+    minItemHeight = 50,
+    height = 400,
+    overscan = 5,
+    getItemHeight,
+    scrollToIndex,
+    children,
+    ariaLabel = "Virtual scrolling list",
+    class: className,
+    classes,
+    contained = false
+  }: VirtualListProps<T> = $props();
+
+  const theme = $derived(getTheme("virtualList"));
+
+  let container: HTMLDivElement | undefined;
+  let scrollTop = $state(0);
+  let rafId: number | undefined;
+
+  /**
+   * Whether to apply CSS containment for performance optimization.
+   * Defaults to false. This prop value takes precedence over any theme defaults.
+   * @default false
+   */
+  const styles = $derived(virtualList({ contained }));
+
+  const containStyle = $derived.by(() => {
+    if (!contained) return "";
+    // Flatten potential string | string[] | Record<string, boolean> via clsx
+    const itemClasses = clsx(classes?.item);
+    const hasCustomContain = /\[contain:[^\]]+\]/.test(itemClasses);
+    return hasCustomContain ? "" : "contain: layout style paint;";
+  });
+
+  // Total height of all items
+  const totalHeight = $derived.by(() => items.reduce((sum: number, item, i) => sum + (getItemHeight ? getItemHeight(item, i) : (minItemHeight ?? 50)), 0));
+
+  // Sanitize and use the safe value in index calculations.
+  const overscanSafe = $derived(Math.max(0, Math.floor(overscan ?? 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 - overscanSafe);
+      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 + overscanSafe + 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={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) })} style={`transform:translateY(${offsetY}px); will-change:transform;`}>
+      {#each visibleItems as item, i (startIndex + i)}
+        <div role="listitem" aria-setsize={items.length} aria-posinset={startIndex + i + 1} class={styles.item({ class: clsx(theme?.item, classes?.item) })} style={containStyle}>
+          {@render children?.(item, startIndex + i)}
+        </div>
+      {/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 ariaLabel = "Virtual scrolling list"
+@prop contained = false
+@prop class: className
+@prop classes
+-->

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

@@ -0,0 +1,42 @@
+import type { VirtualListProps } from "../types";
+declare function $$render<T>(): {
+    props: VirtualListProps<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']>;
+}
+/**
+ * [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 ariaLabel = "Virtual scrolling list"
+ * @prop contained = false
+ * @prop class: className
+ * @prop classes
+ */
+declare const VirtualList: $$IsomorphicComponent;
+type VirtualList<T> = InstanceType<typeof VirtualList<T>>;
+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<{
+    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>>;

package/dist/virtuallist/theme.js

@@ -0,0 +1,18 @@
+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",
+        item: ""
+    },
+    variants: {
+        contained: {
+            true: { item: "[contain:layout_style_paint]" },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        contained: false
+    }
+});