@pajohns/flowbite-svelte 0.1.0

package/dist/utils/responsive.svelte

@@ -0,0 +1,111 @@
+<script module lang="ts">
+  /**
+   * A Svelte 5 rune-based media query hook
+   * @param query - CSS media query string (e.g., '(min-width: 768px)')
+   * @returns A function that returns the current match state
+   */
+  export function useMediaQuery(query: string): () => boolean {
+    let matches = $state<boolean>(false);
+
+    $effect(() => {
+      if (typeof window === "undefined") return;
+
+      const mediaQuery: MediaQueryList = window.matchMedia(query);
+      matches = mediaQuery.matches;
+
+      const handler = (e: MediaQueryListEvent): void => {
+        matches = e.matches;
+      };
+
+      mediaQuery.addEventListener("change", handler);
+
+      return (): void => {
+        mediaQuery.removeEventListener("change", handler);
+      };
+    });
+
+    return (): boolean => matches;
+  }
+
+  /**
+   * Hook for common Tailwind CSS breakpoints
+   * @returns Object with boolean values for each breakpoint
+   */
+  export function useBreakpoints() {
+    const sm = useMediaQuery("(min-width: 640px)");
+    const md = useMediaQuery("(min-width: 768px)");
+    const lg = useMediaQuery("(min-width: 1024px)");
+    const xl = useMediaQuery("(min-width: 1280px)");
+    const xxl = useMediaQuery("(min-width: 1536px)");
+
+    return {
+      get sm() {
+        return sm();
+      },
+      get md() {
+        return md();
+      },
+      get lg() {
+        return lg();
+      },
+      get xl() {
+        return xl();
+      },
+      get "2xl"() {
+        return xxl();
+      },
+      get isMobile() {
+        return !sm();
+      },
+      get isTablet() {
+        return sm() && !lg();
+      },
+      get isDesktop() {
+        return lg();
+      }
+    };
+  }
+
+  /**
+   * Get current breakpoint name
+   * @returns Current breakpoint as string
+   */
+  export function useCurrentBreakpoint(): () => "xs" | "sm" | "md" | "lg" | "xl" | "2xl" {
+    let currentBreakpoint = $state<"xs" | "sm" | "md" | "lg" | "xl" | "2xl">("xs");
+
+    $effect(() => {
+      if (typeof window === "undefined") return;
+
+      const updateBreakpoint = (): void => {
+        const width = window.innerWidth;
+        if (width >= 1536) currentBreakpoint = "2xl";
+        else if (width >= 1280) currentBreakpoint = "xl";
+        else if (width >= 1024) currentBreakpoint = "lg";
+        else if (width >= 768) currentBreakpoint = "md";
+        else if (width >= 640) currentBreakpoint = "sm";
+        else currentBreakpoint = "xs";
+      };
+
+      updateBreakpoint();
+      window.addEventListener("resize", updateBreakpoint);
+
+      return (): void => {
+        window.removeEventListener("resize", updateBreakpoint);
+      };
+    });
+
+    return (): "xs" | "sm" | "md" | "lg" | "xl" | "2xl" => currentBreakpoint;
+  }
+
+  // Type definitions for common breakpoint values
+  export type BreakpointKey = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+  export const BREAKPOINTS: Record<BreakpointKey, number> = {
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  } as const;
+</script>

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

@@ -0,0 +1,45 @@
+/**
+ * A Svelte 5 rune-based media query hook
+ * @param query - CSS media query string (e.g., '(min-width: 768px)')
+ * @returns A function that returns the current match state
+ */
+export declare function useMediaQuery(query: string): () => boolean;
+/**
+ * Hook for common Tailwind CSS breakpoints
+ * @returns Object with boolean values for each breakpoint
+ */
+export declare function useBreakpoints(): {
+    readonly sm: boolean;
+    readonly md: boolean;
+    readonly lg: boolean;
+    readonly xl: boolean;
+    readonly "2xl": boolean;
+    readonly isMobile: boolean;
+    readonly isTablet: boolean;
+    readonly isDesktop: boolean;
+};
+/**
+ * Get current breakpoint name
+ * @returns Current breakpoint as string
+ */
+export declare function useCurrentBreakpoint(): () => "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type BreakpointKey = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export declare const BREAKPOINTS: Record<BreakpointKey, number>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Responsive: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Responsive = InstanceType<typeof Responsive>;
+export default Responsive;

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

@@ -0,0 +1,15 @@
+/**
+ * @template T
+ * @param {boolean} [nonReactive=false] - use a non-reactive placeholder to allow multiple selection and keep context shallow
+ * @returns {SingleSelectionContext<T>}
+ */
+export function createSingleSelectionContext<T>(nonReactive?: boolean): SingleSelectionContext<T>;
+/**
+ * @template T
+ * @param {(value: T|null) => void} callback
+ * @returns {(open: boolean, v?: T) => SingleSelectionContext<T>}
+ */
+export function useSingleSelection<T>(callback: (value: T | null) => void): (open: boolean, v?: T) => SingleSelectionContext<T>;
+export type SingleSelectionContext<T> = {
+    value?: (T | null) | undefined;
+};

package/dist/utils/singleselection.svelte.js

@@ -0,0 +1,52 @@
+import { getContext, setContext, untrack } from "svelte";
+
+/**
+ * @template T
+ * @typedef {Object} SingleSelectionContext
+ * @property {T|null=} value
+ */
+
+/** @type {symbol} */
+const SINGLE_SELECTION_KEY = Symbol("singleton");
+
+/**
+ * @template T
+ * @param {boolean} [nonReactive=false] - use a non-reactive placeholder to allow multiple selection and keep context shallow
+ * @returns {SingleSelectionContext<T>}
+ */
+export function createSingleSelectionContext(nonReactive = false) {
+  if (nonReactive) return setContext(SINGLE_SELECTION_KEY, {});
+  const context = $state({ value: null });
+  return setContext(SINGLE_SELECTION_KEY, context);
+}
+
+/**
+ * @template T
+ * @param {SingleSelectionContext<T>} context
+ * @param {boolean} open
+ * @param {T=} value
+ * @returns {SingleSelectionContext<T>}
+ */
+function setSelected(context, open, value) {
+  if (open) context.value = value ?? null;
+  else if (context.value === value) context.value = null;
+
+  return context;
+}
+
+/**
+ * @template T
+ * @param {(value: T|null) => void} callback
+ * @returns {(open: boolean, v?: T) => SingleSelectionContext<T>}
+ */
+export function useSingleSelection(callback) {
+  const context = getContext(SINGLE_SELECTION_KEY) ?? createSingleSelectionContext(false);
+
+  if (!context.hasOwnProperty?.("value")) return () => context;
+
+  $effect(() => {
+    if (context.value !== null) callback(context.value);
+  });
+
+  return (open, v) => untrack(() => setSelected(context, open, v));
+}

package/dist/utils/theme.d.ts

@@ -0,0 +1,100 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type CloseButtonVariants = VariantProps<typeof closeButton> & Classes<typeof closeButton>;
+export declare const closeButton: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, "focus:outline-hidden whitespace-normal disabled:cursor-not-allowed disabled:opacity-50", {
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, "focus:outline-hidden whitespace-normal disabled:cursor-not-allowed disabled:opacity-50", unknown, unknown, undefined>>;

package/dist/utils/theme.js

@@ -0,0 +1,69 @@
+import { tv } from "tailwind-variants";
+export const closeButton = tv({
+    base: "focus:outline-hidden whitespace-normal disabled:cursor-not-allowed disabled:opacity-50",
+    variants: {
+        // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+        color: {
+            primary: "text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300",
+            secondary: "text-secondary-500 focus:ring-secondary-400 hover:bg-secondary-200 dark:hover:bg-secondary-800 dark:hover:text-secondary-300",
+            gray: "text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300",
+            red: "text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300",
+            orange: "text-orange-500 focus:ring-orange-400 hover:bg-orange-200 dark:hover:bg-orange-800 dark:hover:text-orange-300",
+            amber: "text-amber-500 focus:ring-amber-400 hover:bg-amber-200 dark:hover:bg-amber-800 dark:hover:text-amber-300",
+            yellow: "text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300",
+            lime: "text-lime-500 focus:ring-lime-400 hover:bg-lime-200 dark:hover:bg-lime-800 dark:hover:text-lime-300",
+            green: "text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300",
+            emerald: "text-emerald-500 focus:ring-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-800 dark:hover:text-emerald-300",
+            teal: "text-teal-500 focus:ring-teal-400 hover:bg-teal-200 dark:hover:bg-teal-800 dark:hover:text-teal-300",
+            cyan: "text-cyan-500 focus:ring-cyan-400 hover:bg-cyan-200 dark:hover:bg-cyan-800 dark:hover:text-cyan-300",
+            sky: "text-sky-500 focus:ring-sky-400 hover:bg-sky-200 dark:hover:bg-sky-800 dark:hover:text-sky-300",
+            blue: "text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300",
+            indigo: "text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300",
+            violet: "text-violet-500 focus:ring-violet-400 hover:bg-violet-200 dark:hover:bg-violet-800 dark:hover:text-violet-300",
+            purple: "text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300",
+            fuchsia: "text-fuchsia-500 focus:ring-fuchsia-400 hover:bg-fuchsia-200 dark:hover:bg-fuchsia-800 dark:hover:text-fuchsia-300",
+            pink: "text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300",
+            rose: "text-rose-500 focus:ring-rose-400 hover:bg-rose-200 dark:hover:bg-rose-800 dark:hover:text-rose-300",
+            none: ""
+        },
+        size: {
+            xs: "m-0.5 rounded-xs focus:ring-1 p-0.5",
+            sm: "m-0.5 rounded-sm focus:ring-1 p-0.5",
+            md: "m-0.5 rounded-lg focus:ring-2 p-1.5",
+            lg: "m-0.5 rounded-lg focus:ring-2 p-2.5"
+        }
+    },
+    defaultVariants: {
+        color: "gray",
+        size: "md",
+        href: null
+    },
+    slots: {
+        svg: ""
+    },
+    compoundVariants: [
+        {
+            size: "xs",
+            class: {
+                svg: "w-3 h-3"
+            }
+        },
+        {
+            size: "sm",
+            class: {
+                svg: "w-3.5 h-3.5"
+            }
+        },
+        {
+            size: ["md", "lg"],
+            class: {
+                svg: "w-5 h-5"
+            }
+        },
+        {
+            size: ["xs", "sm", "md", "lg"],
+            color: "none",
+            class: "focus:ring-0 rounded-none m-0"
+        }
+    ]
+});

package/dist/video/Video.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { VideoProps } from "../types";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, type = "video/mp4", trackSrc, src, srclang = "en", label = "english_captions", class: classname, ...restProps }: VideoProps = $props();
+
+  const theme = $derived(getTheme("span"));
+</script>
+
+<video {...restProps} class={clsx(theme, classname)}>
+  <source {src} {type} />
+  {#if children}
+    {@render children()}
+  {/if}
+  <track src={trackSrc} kind="captions" {srclang} {label} />
+  Your browser does not support the video tag.
+</video>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2151)
+## Props
+@prop children
+@prop type = "video/mp4"
+@prop trackSrc
+@prop src
+@prop srclang = "en"
+@prop label = "english_captions"
+@prop class: classname
+@prop ...restProps
+-->

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

@@ -0,0 +1,18 @@
+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#L2151)
+ * ## Props
+ * @prop children
+ * @prop type = "video/mp4"
+ * @prop trackSrc
+ * @prop src
+ * @prop srclang = "en"
+ * @prop label = "english_captions"
+ * @prop class: classname
+ * @prop ...restProps
+ */
+declare const Video: import("svelte").Component<VideoProps, {}, "">;
+type Video = ReturnType<typeof Video>;
+export default Video;

package/dist/video/index.d.ts

@@ -0,0 +1 @@
+export { default as Video } from "./Video.svelte";

package/dist/video/index.js

@@ -0,0 +1 @@
+export { default as Video } from "./Video.svelte";

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 = $derived(getTheme("virtualMasonry"));
+
+  let container: HTMLDivElement | undefined;
+  let containerWidth = $state(0);
+  let scrollTop = $state(0);
+  let rafId: number | undefined;
+
+  const styles = $derived(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";