flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/button-group/ButtonGroup.svelte

@@ -1,18 +0,0 @@
-<script>import { setContext } from "svelte";
-import { twMerge } from "tailwind-merge";
-export let size = "md";
-export let divClass = "inline-flex rounded-lg shadow-sm";
-setContext("group", { size });
-</script>
-
-<div {...$$restProps} class={twMerge(divClass, $$props.class)} role="group">
-  <slot />
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let size: $$Props['size'] = 'md';
-@prop export let divClass: $$Props['divClass'] = 'inline-flex rounded-lg shadow-sm';
--->

package/dist/button-group/ButtonGroup.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-import type { SizeType } from '../types';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        size?: SizeType;
-        divClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ButtonGroupProps = typeof __propDef.props;
-export type ButtonGroupEvents = typeof __propDef.events;
-export type ButtonGroupSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let size: $$Props['size'] = 'md';
- * @prop export let divClass: $$Props['divClass'] = 'inline-flex rounded-lg shadow-sm';
- */
-export default class ButtonGroup extends SvelteComponentTyped<ButtonGroupProps, ButtonGroupEvents, ButtonGroupSlots> {
-}
-export {};

package/dist/carousel/Carousel.svelte

@@ -1,155 +0,0 @@
-<script context="module"></script>
-
-<script>import { createEventDispatcher, onMount, setContext } from "svelte";
-import { writable } from "svelte/store";
-import { twMerge } from "tailwind-merge";
-import Controls from "./Controls.svelte";
-import Indicators from "./Indicators.svelte";
-import Slide from "./Slide.svelte";
-import { canChangeSlide } from "./CarouselSlide";
-const SLIDE_DURATION_RATIO = 0.25;
-export let images;
-export let index = 0;
-export let slideDuration = 1e3;
-export let transition = null;
-export let duration = 0;
-export let ariaLabel = "Draggable Carousel";
-export let disableSwipe = false;
-let divClass = "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96";
-export let imgClass = "";
-const dispatch = createEventDispatcher();
-const { set, subscribe, update } = writable({ images, index, forward: true, slideDuration, lastSlideChange: /* @__PURE__ */ new Date() });
-const state = { set: (_state) => set({ index: _state.index, images: _state.images, lastSlideChange: /* @__PURE__ */ new Date(), slideDuration, forward }), subscribe, update };
-let forward = true;
-setContext("state", state);
-subscribe((_state) => {
-  index = _state.index;
-  forward = _state.forward;
-  dispatch("change", images[index]);
-});
-onMount(() => {
-  dispatch("change", images[index]);
-});
-const nextSlide = () => {
-  update((_state) => {
-    if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
-    _state.index = _state.index >= images.length - 1 ? 0 : _state.index + 1;
-    _state.lastSlideChange = /* @__PURE__ */ new Date();
-    return { ..._state };
-  });
-};
-const prevSlide = () => {
-  update((_state) => {
-    if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
-    _state.index = _state.index <= 0 ? images.length - 1 : _state.index - 1;
-    _state.lastSlideChange = /* @__PURE__ */ new Date();
-    return { ..._state };
-  });
-};
-const loop = (node, duration2) => {
-  carouselDiv = node;
-  let intervalId;
-  if (duration2 > 0) intervalId = setInterval(nextSlide, duration2);
-  return {
-    update: (duration3) => {
-      clearInterval(intervalId);
-      if (duration3 > 0) intervalId = setInterval(nextSlide, duration3);
-    },
-    destroy: () => clearInterval(intervalId)
-  };
-};
-let activeDragGesture;
-let carouselDiv;
-let percentOffset = 0;
-let touchEvent = null;
-const getPositionFromEvent = (evt) => {
-  const mousePos = evt?.clientX;
-  if (mousePos) return mousePos;
-  let touchEvt = evt;
-  if (/^touch/.test(touchEvt?.type)) {
-    return touchEvt.touches[0].clientX;
-  }
-};
-const onDragStart = (evt) => {
-  if (disableSwipe) return;
-  touchEvent = evt;
-  evt.cancelable && evt.preventDefault();
-  const start = getPositionFromEvent(evt);
-  const width = carouselDiv.getBoundingClientRect().width;
-  if (start === void 0 || width === void 0) return;
-  activeDragGesture = {
-    start,
-    position: start,
-    width,
-    timestamp: Date.now()
-  };
-};
-$: onDragMove = activeDragGesture === void 0 ? void 0 : (evt) => {
-  const position = getPositionFromEvent(evt);
-  if (!activeDragGesture || position === void 0) return;
-  const { start, width } = activeDragGesture;
-  percentOffset = Math.min(100, Math.max(-100, (position - start) / width * 100));
-  activeDragGesture.position = position;
-};
-$: onDragStop = activeDragGesture === void 0 ? void 0 : (evt) => {
-  const SWIPE_MAX_DURATION = 250;
-  const SWIPE_MIN_DISTANCE = 30;
-  const DRAG_MIN_PERCENT = 50;
-  if (activeDragGesture) {
-    const { timestamp, position, start } = activeDragGesture;
-    const duration2 = Date.now() - timestamp;
-    const distance = position - start;
-    if (Math.abs(distance) >= SWIPE_MIN_DISTANCE && duration2 <= SWIPE_MAX_DURATION && duration2 > 0) {
-      if (distance > 0) prevSlide();
-      else nextSlide();
-    } else if (percentOffset > DRAG_MIN_PERCENT) prevSlide();
-    else if (percentOffset < -DRAG_MIN_PERCENT) nextSlide();
-    else {
-      if (touchEvent?.constructor.name === "TouchEvent") {
-        touchEvent?.target?.dispatchEvent(
-          new Event("click", {
-            bubbles: true
-          })
-        );
-      }
-    }
-  }
-  percentOffset = 0;
-  activeDragGesture = void 0;
-  touchEvent = null;
-};
-</script>
-
-<!-- Preload all Carousel images for improved responsivity -->
-<svelte:head>
-  {#if images.length > 0}
-    {#each images as image}
-      <link rel="preload" href={image.src} as="image" />
-    {/each}
-  {/if}
-</svelte:head>
-
-<!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
-<svelte:document on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} />
-<div bind:this={carouselDiv} class="relative" on:mousedown|nonpassive={onDragStart} on:touchstart|nonpassive={onDragStart} on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0">
-  <div {...$$restProps} class={twMerge(divClass, activeDragGesture === undefined ? 'transition-transform' : '', $$props.class)} use:loop={duration}>
-    <slot name="slide" {Slide} {index}>
-      <Slide image={images[index]} class={imgClass} {transition} />
-    </slot>
-  </div>
-  <slot {index} {Controls} {Indicators} />
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let images: HTMLImgAttributes[];
-@prop export let index: number = 0;
-@prop export let slideDuration: number = 1000;
-@prop export let transition: TransitionFunc | null = null;
-@prop export let duration: number = 0;
-@prop export let ariaLabel: string = 'Draggable Carousel';
-@prop export let disableSwipe: boolean = false;
-@prop export let imgClass: string = '';
--->

package/dist/carousel/Carousel.svelte.d.ts

@@ -1,60 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-export type State = {
-    images: HTMLImgAttributes[];
-    index: number;
-    lastSlideChange: Date;
-    slideDuration: number;
-    forward: boolean;
-};
-import type { HTMLImgAttributes } from 'svelte/elements';
-import type { TransitionConfig } from 'svelte/transition';
-import Controls from './Controls.svelte';
-import Indicators from './Indicators.svelte';
-import Slide from './Slide.svelte';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        images: HTMLImgAttributes[];
-        index?: number | undefined;
-        slideDuration?: number | undefined;
-        transition?: (((node: HTMLElement, params: any) => TransitionConfig) | null) | undefined;
-        duration?: number | undefined;
-        ariaLabel?: string | undefined;
-        disableSwipe?: boolean | undefined;
-        imgClass?: string | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        slide: {
-            Slide: typeof Slide;
-            index: number;
-        };
-        default: {
-            index: number;
-            Controls: typeof Controls;
-            Indicators: typeof Indicators;
-        };
-    };
-};
-export type CarouselProps = typeof __propDef.props;
-export type CarouselEvents = typeof __propDef.events;
-export type CarouselSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let images: HTMLImgAttributes[];
- * @prop export let index: number = 0;
- * @prop export let slideDuration: number = 1000;
- * @prop export let transition: TransitionFunc | null = null;
- * @prop export let duration: number = 0;
- * @prop export let ariaLabel: string = 'Draggable Carousel';
- * @prop export let disableSwipe: boolean = false;
- * @prop export let imgClass: string = '';
- */
-export default class Carousel extends SvelteComponentTyped<CarouselProps, CarouselEvents, CarouselSlots> {
-}
-export {};

package/dist/carousel/CarouselSlide.d.ts

@@ -1,5 +0,0 @@
-export declare const canChangeSlide: ({ lastSlideChange, slideDuration, slideDurationRatio }: {
-    lastSlideChange: Date;
-    slideDuration: number;
-    slideDurationRatio?: number;
-}) => boolean;

package/dist/carousel/CarouselSlide.js

@@ -1,7 +0,0 @@
-export const canChangeSlide = ({ lastSlideChange, slideDuration, slideDurationRatio = 1 }) => {
-    if (lastSlideChange && new Date().getTime() - lastSlideChange.getTime() < slideDuration * slideDurationRatio) {
-        console.warn("Can't change slide yet, too soon");
-        return false;
-    }
-    return true;
-};

package/dist/carousel/ControlButton.svelte

@@ -1,31 +0,0 @@
-<script>import { twMerge } from "tailwind-merge";
-export let forward;
-export let name;
-let buttonCls;
-$: buttonCls = twMerge("flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-none text-white dark:text-gray-300", forward ? "end-0" : "start-0", $$props.class);
-</script>
-
-<button on:click type="button" class={buttonCls}>
-  <slot>
-    <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
-      {#if forward}
-        <svg aria-hidden="true" class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-        </svg>
-      {:else}
-        <svg aria-hidden="true" class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-        </svg>
-      {/if}
-      <span class="sr-only">{name}</span>
-    </span>
-  </slot>
-</button>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let forward: boolean;
-@prop export let name: string;
--->

package/dist/carousel/ControlButton.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        forward: boolean;
-        name: string;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ControlButtonProps = typeof __propDef.props;
-export type ControlButtonEvents = typeof __propDef.events;
-export type ControlButtonSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let forward: boolean;
- * @prop export let name: string;
- */
-export default class ControlButton extends SvelteComponentTyped<ControlButtonProps, ControlButtonEvents, ControlButtonSlots> {
-}
-export {};

package/dist/carousel/Controls.svelte

@@ -1,37 +0,0 @@
-<script>import { getContext } from "svelte";
-import ControlButton from "./ControlButton.svelte";
-import { twMerge } from "tailwind-merge";
-import { canChangeSlide } from "./CarouselSlide";
-const state = getContext("state");
-const { update } = state;
-function changeSlide(forward) {
-  if (!canChangeSlide({
-    lastSlideChange: $state.lastSlideChange,
-    slideDuration: $state.slideDuration,
-    slideDurationRatio: 0.75
-  })) {
-    return;
-  }
-  if (forward) {
-    update((_state) => {
-      _state.forward = true;
-      _state.index = _state.index >= _state.images.length - 1 ? 0 : _state.index + 1;
-      _state.lastSlideChange = /* @__PURE__ */ new Date();
-      return { ..._state };
-    });
-  } else {
-    update((_state) => {
-      _state.forward = false;
-      _state.index = _state.index <= 0 ? _state.images.length - 1 : _state.index - 1;
-      _state.lastSlideChange = /* @__PURE__ */ new Date();
-      return { ..._state };
-    });
-  }
-}
-</script>
-
-<!-- Slider controls -->
-<slot {ControlButton} {changeSlide}>
-  <ControlButton name="Previous" forward={false} on:click={() => changeSlide(false)} class={twMerge($$props.class)} />
-  <ControlButton name="Next" forward={true} on:click={() => changeSlide(true)} class={twMerge($$props.class)} />
-</slot>

package/dist/carousel/Controls.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import ControlButton from './ControlButton.svelte';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            ControlButton: typeof ControlButton;
-            changeSlide: (forward: boolean) => void;
-        };
-    };
-};
-export type ControlsProps = typeof __propDef.props;
-export type ControlsEvents = typeof __propDef.events;
-export type ControlsSlots = typeof __propDef.slots;
-export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
-}
-export {};

package/dist/carousel/Indicators.svelte

@@ -1,26 +0,0 @@
-<script>import Indicator from "../indicators/Indicator.svelte";
-import { getContext } from "svelte";
-import { twMerge } from "tailwind-merge";
-export let activeClass = "opacity-100";
-export let inactiveClass = "opacity-60";
-const state = getContext("state");
-</script>
-
-<div class={twMerge('flex absolute bottom-5 start-1/2 z-30 space-x-3 rtl:space-x-reverse -translate-x-1/2 rtl:translate-x-1/2', $$props.class)}>
-  {#each $state.images as _, idx}
-    {@const selected = $state.index === idx}
-    <button on:click={() => ($state.index = idx)}>
-      <slot {Indicator} {selected} index={idx}>
-        <Indicator class={twMerge('bg-gray-100 hover:bg-gray-300', selected ? activeClass : inactiveClass)} />
-      </slot>
-    </button>
-  {/each}
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let activeClass = 'opacity-100';
-@prop export let inactiveClass = 'opacity-60';
--->

package/dist/carousel/Indicators.svelte.d.ts

@@ -1,31 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import Indicator from '../indicators/Indicator.svelte';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        activeClass?: string | undefined;
-        inactiveClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            Indicator: typeof Indicator;
-            selected: any;
-            index: any;
-        };
-    };
-};
-export type IndicatorsProps = typeof __propDef.props;
-export type IndicatorsEvents = typeof __propDef.events;
-export type IndicatorsSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let activeClass = 'opacity-100';
- * @prop export let inactiveClass = 'opacity-60';
- */
-export default class Indicators extends SvelteComponentTyped<IndicatorsProps, IndicatorsEvents, IndicatorsSlots> {
-}
-export {};

package/dist/carousel/Slide.svelte

@@ -1,40 +0,0 @@
-<script>import { fly } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-const state = getContext("state");
-export let image;
-export let transition = null;
-$: transitionSlideIn = {
-  x: $state.forward ? "100%" : "-100%",
-  opacity: 1,
-  width: "100%",
-  height: "100%",
-  duration: $state.slideDuration
-};
-$: transitionSlideOut = {
-  x: $state.forward ? "-100%" : "100%",
-  opacity: 0.9,
-  width: "100%",
-  height: "100%",
-  duration: $state.slideDuration
-};
-$: imgClass = twMerge("absolute block !w-full h-full object-cover", $$props.class);
-</script>
-
-{#if transition}
-  {#key image}
-    <img alt="..." {...image} transition:transition={{}} {...$$restProps} class={imgClass} />
-  {/key}
-{:else}
-  {#key image}
-    <img alt="..." {...image} {...$$restProps} out:fly={transitionSlideOut} in:fly={transitionSlideIn} class={imgClass} />
-  {/key}
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let image: HTMLImgAttributes;
-@prop export let transition: TransitionFunc | null = null;
--->

package/dist/carousel/Slide.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLImgAttributes } from 'svelte/elements';
-import { type TransitionConfig } from 'svelte/transition';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        image: HTMLImgAttributes;
-        transition?: (((node: HTMLElement, params: any) => TransitionConfig) | null) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SlideProps = typeof __propDef.props;
-export type SlideEvents = typeof __propDef.events;
-export type SlideSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let image: HTMLImgAttributes;
- * @prop export let transition: TransitionFunc | null = null;
- */
-export default class Slide extends SvelteComponentTyped<SlideProps, SlideEvents, SlideSlots> {
-}
-export {};

package/dist/carousel/Thumbnail.svelte

@@ -1,18 +0,0 @@
-<script>import { twMerge } from "tailwind-merge";
-export let selected = false;
-export let alt = "";
-export let activeClass = "opacity-100";
-export let inactiveClass = "opacity-60";
-</script>
-
-<img {...$$restProps} {alt} class={twMerge(selected ? activeClass : inactiveClass, $$props.class)} />
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let selected: boolean = false;
-@prop export let alt: string | undefined | null = '';
-@prop export let activeClass: string = 'opacity-100';
-@prop export let inactiveClass: string = 'opacity-60';
--->

package/dist/carousel/Thumbnail.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLImgAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLImgAttributes & {
-        selected?: boolean;
-        alt?: string | undefined | null;
-        activeClass?: string;
-        inactiveClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ThumbnailProps = typeof __propDef.props;
-export type ThumbnailEvents = typeof __propDef.events;
-export type ThumbnailSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let selected: boolean = false;
- * @prop export let alt: string | undefined | null = '';
- * @prop export let activeClass: string = 'opacity-100';
- * @prop export let inactiveClass: string = 'opacity-60';
- */
-export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
-}
-export {};

package/dist/carousel/Thumbnails.svelte

@@ -1,44 +0,0 @@
-<script>import { twMerge } from "tailwind-merge";
-import Thumbnail from "./Thumbnail.svelte";
-export let images = [];
-export let index = 0;
-export let ariaLabel = "Click to view image";
-export let imgClass = "";
-export let throttleDelay = 650;
-let lastClickedAt = /* @__PURE__ */ new Date();
-const btnClick = (idx) => {
-  if ((/* @__PURE__ */ new Date()).getTime() - lastClickedAt.getTime() < throttleDelay) {
-    console.warn("Thumbnail action throttled");
-    return;
-  }
-  if (idx === index) {
-    return;
-  }
-  index = idx;
-  lastClickedAt = /* @__PURE__ */ new Date();
-};
-$: index = (index + images.length) % images.length;
-</script>
-
-<div class={twMerge('flex flex-row justify-center bg-gray-100 w-full', $$props.class)}>
-  {#each images as image, idx}
-    {@const selected = index === idx}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <button on:click={() => btnClick(idx)} aria-label={ariaLabel}>
-      <slot {Thumbnail} {image} {selected} {imgClass}>
-        <Thumbnail {...image} {selected} class={imgClass} />
-      </slot>
-    </button>
-  {/each}
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let images: HTMLImgAttributes[] = [];
-@prop export let index: number = 0;
-@prop export let ariaLabel: string = 'Click to view image';
-@prop export let imgClass: string = '';
-@prop export let throttleDelay: number = 650;
--->

package/dist/carousel/Thumbnails.svelte.d.ts

@@ -1,39 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLImgAttributes } from 'svelte/elements';
-import Thumbnail from './Thumbnail.svelte';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        images?: HTMLImgAttributes[] | undefined;
-        index?: number | undefined;
-        ariaLabel?: string | undefined;
-        imgClass?: string | undefined;
-        throttleDelay?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            Thumbnail: typeof Thumbnail;
-            image: HTMLImgAttributes;
-            selected: any;
-            imgClass: string;
-        };
-    };
-};
-export type ThumbnailsProps = typeof __propDef.props;
-export type ThumbnailsEvents = typeof __propDef.events;
-export type ThumbnailsSlots = typeof __propDef.slots;
-/**
- * [Go to docs](https://flowbite-svelte.com/)
- * ## Props
- * @prop export let images: HTMLImgAttributes[] = [];
- * @prop export let index: number = 0;
- * @prop export let ariaLabel: string = 'Click to view image';
- * @prop export let imgClass: string = '';
- * @prop export let throttleDelay: number = 650;
- */
-export default class Thumbnails extends SvelteComponentTyped<ThumbnailsProps, ThumbnailsEvents, ThumbnailsSlots> {
-}
-export {};