flowbite-svelte 0.27.13 → 0.27.15

package/buttons/Button.svelte

@@ -1,111 +0,0 @@
-<script>import classNames from 'classnames';
-import { getContext } from 'svelte';
-const group = getContext('group');
-export let pill = false;
-export let outline = false;
-export let gradient = false;
-export let size = group ? 'sm' : 'md';
-export let href = undefined;
-export let btnClass = undefined;
-export let type = 'button';
-export let color = group ? (outline ? 'dark' : 'alternative') : 'blue';
-export let shadow = null;
-const colorClasses = {
-    blue: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
-    dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
-    alternative: 'text-gray-900 bg-white border border-gray-200 dark:border-gray-600 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 hover:text-blue-700 focus:text-blue-700 dark:focus:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700',
-    light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700',
-    green: 'text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
-    red: 'text-white bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
-    yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:focus:ring-yellow-900',
-    primary: 'text-white bg-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800',
-    purple: 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900'
-};
-const gradientClasses = {
-    blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-blue-300 dark:focus:ring-blue-800 ',
-    green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-green-300 dark:focus:ring-green-800',
-    cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800',
-    teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-teal-300 dark:focus:ring-teal-800',
-    lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-lime-300 dark:focus:ring-lime-800',
-    red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-red-300 dark:focus:ring-red-800',
-    pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-pink-300 dark:focus:ring-pink-800',
-    purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-purple-300 dark:focus:ring-purple-800',
-    purpleToBlue: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-blue-300 dark:focus:ring-blue-800',
-    cyanToBlue: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800',
-    greenToBlue: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-green-200 dark:focus:ring-green-800',
-    purpleToPink: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-purple-200 dark:focus:ring-purple-800',
-    pinkToOrange: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-pink-200 dark:focus:ring-pink-800',
-    tealToLime: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l focus:ring-lime-200 dark:focus:ring-teal-700',
-    redToYellow: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-red-100 dark:focus:ring-red-400'
-};
-const coloredShadowClasses = {
-    blue: 'shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80',
-    green: 'shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80',
-    cyan: 'shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80',
-    teal: 'shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80 ',
-    lime: 'shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80',
-    red: 'shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 ',
-    pink: 'shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80',
-    purple: 'shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80'
-};
-const outlineClasses = {
-    blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
-    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:bg-gray-900 focus:text-white focus:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800',
-    green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
-    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
-    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
-    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900'
-};
-const sizeClasses = {
-    xs: 'px-3 py-2 text-xs',
-    sm: 'px-4 py-2 text-sm',
-    md: 'px-5 py-2.5 text-sm',
-    lg: 'px-5 py-3 text-base',
-    xl: 'px-6 py-3.5 text-base'
-};
-function rounded(gradientOutline = false) {
-    if (group) {
-        return pill
-            ? 'first:rounded-l-full last:rounded-r-full'
-            : gradientOutline
-                ? 'first:rounded-l-md last:rounded-r-md'
-                : 'first:rounded-l-lg last:rounded-r-lg';
-    }
-    return pill ? 'rounded-full' : gradientOutline ? 'rounded-md' : 'rounded-lg';
-}
-const hasBorder = () => outline || color === 'alternative' || color === 'light';
-let buttonClass;
-$: buttonClass = btnClass
-    ? btnClass
-    : classNames('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', !group || color === 'alternative' || (outline && color === 'dark') || 'focus:outline-none', outline && gradient ? 'p-0.5' : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
-        (group
-            ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600'
-            : 'dark:bg-transparent dark:border-gray-800 dark:hover:border-gray-700'), outline &&
-        color === 'dark' &&
-        (group ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'), hasBorder() && group && 'border-l-0 first:border-l', rounded(false), shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
-let gradientOutlineClass;
-$: gradientOutlineClass = classNames('inline-flex items-center justify-center', sizeClasses[size], rounded(true), 'bg-white text-gray-900 dark:bg-gray-900 dark:text-white', // this is limitation - no transparency
-'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit');
-</script>
-
-<svelte:element
-  this={href ? 'a' : 'button'}
-  type={href ? undefined : type}
-  {href}
-  {...$$restProps}
-  class={buttonClass}
-  on:click
-  on:change
-  on:keydown
-  on:keyup
-  on:mouseenter
-  on:mouseleave>
-  {#if outline && gradient}
-    <!-- Trick to prentend outline without using border
-		This has a limitation of no supporting transparency as
-		background is set to bg-white dark:bg-gray-900 -->
-    <span class={gradientOutlineClass}><slot /></span>
-  {:else}
-    <slot />
-  {/if}
-</svelte:element>

package/buttons/Button.svelte.d.ts

@@ -1,35 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ButtonType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        pill?: boolean | undefined;
-        outline?: boolean | undefined;
-        gradient?: boolean | undefined;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-        href?: string | undefined;
-        btnClass?: string | undefined;
-        type?: ButtonType | undefined;
-        color?: "red" | "yellow" | "green" | "purple" | "pink" | "blue" | "light" | "dark" | "cyan" | "teal" | "lime" | "alternative" | "primary" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined;
-        shadow?: "red" | "green" | "purple" | "pink" | "blue" | "cyan" | "teal" | "lime" | null | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        change: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type ButtonProps = typeof __propDef.props;
-export declare type ButtonEvents = typeof __propDef.events;
-export declare type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
-}
-export {};

package/cards/Card.svelte

@@ -1,40 +0,0 @@
-<script>import classNames from 'classnames';
-import Frame from '../utils/Frame.svelte';
-export let href = undefined;
-export let horizontal = false;
-export let reverse = false;
-export let img = undefined;
-export let padding = 'lg';
-export let size = 'sm';
-const paddings = {
-    none: 'p-0',
-    sm: 'p-4 sm:p-6 md:p-8',
-    md: 'p-4 sm:p-5',
-    lg: 'p-4 sm:p-6',
-    xl: 'p-4 sm:p-8'
-};
-const sizes = {
-    xs: 'max-w-xs',
-    sm: 'max-w-sm',
-    md: 'max-w-lg',
-    lg: 'max-w-2xl',
-    xl: 'max-w-screen-xl'
-};
-let innerPdding;
-$: innerPdding = paddings[padding];
-let cardClass;
-$: cardClass = classNames('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPdding, $$props.class);
-let imgClass;
-$: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
-</script>
-
-<Frame tag={href ? 'a' : 'div'} rounded shadow border {href} {...$$restProps} class={cardClass}>
-  {#if img}
-    <img class={imgClass} src={img} alt="" />
-    <div class={innerPdding}>
-      <slot />
-    </div>
-  {:else}
-    <slot />
-  {/if}
-</Frame>

package/cards/Card.svelte.d.ts

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { SizeType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        href?: string | undefined;
-        horizontal?: boolean | undefined;
-        reverse?: boolean | undefined;
-        img?: string | undefined;
-        padding?: "none" | "sm" | "md" | "lg" | "xl" | undefined;
-        size?: SizeType | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type CardProps = typeof __propDef.props;
-export declare type CardEvents = typeof __propDef.events;
-export declare type CardSlots = typeof __propDef.slots;
-export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
-}
-export {};

package/carousels/Caption.svelte

@@ -1,7 +0,0 @@
-<script>export let caption = '';
-export let captionClass = '';
-</script>
-
-<div class={captionClass}>
-  <p id="caption" class="text-gray-900 dark:text-white">{caption}</p>
-</div>

package/carousels/Caption.svelte.d.ts

@@ -1,17 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        caption?: string | undefined;
-        captionClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type CaptionProps = typeof __propDef.props;
-export declare type CaptionEvents = typeof __propDef.events;
-export declare type CaptionSlots = typeof __propDef.slots;
-export default class Caption extends SvelteComponentTyped<CaptionProps, CaptionEvents, CaptionSlots> {
-}
-export {};

package/carousels/Carousel.svelte

@@ -1,138 +0,0 @@
-<script>import Slide from './Slide.svelte';
-import Thumbnail from './Thumbnail.svelte';
-import Caption from './Caption.svelte';
-import Indicator from './Indicator.svelte';
-export let showIndicators = true;
-export let showCaptions = true;
-export let showThumbs = true;
-export let images;
-export let slideControls = true;
-export let loop = false;
-export let duration = 2000;
-// Carousel
-export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
-export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
-// Caption
-export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
-// Indicator
-export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
-// Slide
-export let slideClass = '';
-let imageShowingIndex = 0;
-$: image = images[imageShowingIndex];
-const nextSlide = () => {
-    if (imageShowingIndex === images.length - 1) {
-        imageShowingIndex = 0;
-    }
-    else {
-        imageShowingIndex += 1;
-    }
-};
-const prevSlide = () => {
-    if (imageShowingIndex === 0) {
-        imageShowingIndex = images.length - 1;
-    }
-    else {
-        imageShowingIndex -= 1;
-    }
-};
-const goToSlide = (number) => (imageShowingIndex = number);
-let thumbWidth = 100 / images.length;
-if (loop) {
-    setInterval(() => {
-        nextSlide();
-    }, duration);
-}
-</script>
-
-<div id="default-carousel" class="relative">
-	<div class={divClass}>
-		<Slide image={image.imgurl} altTag={image.name} attr={image.attribution} {slideClass} />
-	</div>
-	{#if showIndicators}
-		<!-- Slider indicators -->
-		<div class={indicatorDivClass}>
-			{#each images as { id, imgurl, name, attribution }}
-				<Indicator
-					{name}
-					selected={imageShowingIndex === id}
-					on:click={() => goToSlide(id)}
-					{indicatorClass} />
-			{/each}
-		</div>
-	{/if}
-	{#if slideControls}
-		<!-- Slider controls -->
-		<button
-			on:click={prevSlide}
-			type="button"
-			class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-prev>
-			<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 $$slots.previous}
-					<slot name="previous" />
-				{:else}
-					<svg
-						aria-hidden="true"
-						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
-						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="hidden">Previous</span>
-			</span>
-		</button>
-		<button
-			on:click={nextSlide}
-			type="button"
-			class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-next>
-			<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 $$slots.next}
-					<slot name="next" />
-				{:else}
-					<svg
-						aria-hidden="true"
-						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
-						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>
-				{/if}
-				<span class="hidden">Next</span>
-			</span>
-		</button>
-	{/if}
-</div>
-
-{#if showCaptions}
-	<Caption caption={images[imageShowingIndex].name} {captionClass} />
-{/if}
-
-{#if showThumbs}
-	<div class="flex flex-row justify-center bg-gray-100">
-		{#each images as { id, imgurl, name, attribution }}
-			<Thumbnail
-				{thumbWidth}
-				thumbImg={imgurl}
-				altTag={name}
-				titleLink={attribution}
-				{id}
-				selected={imageShowingIndex === id}
-				on:click={() => goToSlide(id)} />
-		{/each}
-	</div>
-{/if}

package/carousels/Carousel.svelte.d.ts

@@ -1,30 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        showIndicators?: boolean | undefined;
-        showCaptions?: boolean | undefined;
-        showThumbs?: boolean | undefined;
-        images: any[];
-        slideControls?: boolean | undefined;
-        loop?: boolean | undefined;
-        duration?: number | undefined;
-        divClass?: string | undefined;
-        indicatorDivClass?: string | undefined;
-        captionClass?: string | undefined;
-        indicatorClass?: string | undefined;
-        slideClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        previous: {};
-        next: {};
-    };
-};
-export declare type CarouselProps = typeof __propDef.props;
-export declare type CarouselEvents = typeof __propDef.events;
-export declare type CarouselSlots = typeof __propDef.slots;
-export default class Carousel extends SvelteComponentTyped<CarouselProps, CarouselEvents, CarouselSlots> {
-}
-export {};

package/carousels/CarouselTransition.svelte

@@ -1,161 +0,0 @@
-<script>import { fade, blur, fly, slide } from 'svelte/transition';
-import Slide from './Slide.svelte';
-import Thumbnail from './Thumbnail.svelte';
-import Caption from './Caption.svelte';
-import Indicator from './Indicator.svelte';
-export let showIndicators = true;
-export let showCaptions = true;
-export let showThumbs = true;
-export let images;
-export let slideControls = true;
-export let transitionType;
-export let transitionParams = {};
-export let loop = false;
-export let duration = 2000;
-// Carousel
-export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
-export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
-// Caption
-export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
-// Indicator
-export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
-// have a custom transition function that returns the desired transition
-const multiple = (node, params) => {
-    switch (transitionType) {
-        case 'slide':
-            return slide(node, params);
-        case 'blur':
-            return blur(node, params);
-        case 'fly':
-            return fly(node, params);
-        case 'fade':
-            return fade(node, params);
-    }
-};
-// Slide
-// export let slideClass: string = 'hidden';
-let imageShowingIndex = 0;
-// $: image = images[imageShowingIndex];
-const nextSlide = () => {
-    if (imageShowingIndex === images.length - 1) {
-        imageShowingIndex = 0;
-    }
-    else {
-        imageShowingIndex += 1;
-    }
-};
-const prevSlide = () => {
-    if (imageShowingIndex === 0) {
-        imageShowingIndex = images.length - 1;
-    }
-    else {
-        imageShowingIndex -= 1;
-    }
-};
-const goToSlide = (number) => (imageShowingIndex = number);
-let thumbWidth = 100 / images.length;
-if (loop) {
-    setInterval(() => {
-        nextSlide();
-    }, duration);
-}
-</script>
-
-<div id="default-carousel" class="relative">
-	<div class={divClass}>
-		{#each images as { id, imgurl, name, attribution }}
-			{#if imageShowingIndex === id}
-				<div transition:multiple={transitionParams}>
-					<Slide image={imgurl} altTag={name} attr={attribution} />
-				</div>
-			{/if}
-		{/each}
-	</div>
-
-	{#if showIndicators}
-		<!-- Slider indicators -->
-		<div class={indicatorDivClass}>
-			{#each images as { id, imgurl, name, attribution }}
-				<Indicator
-					{name}
-					selected={imageShowingIndex === id}
-					on:click={() => goToSlide(id)}
-					{indicatorClass} />
-			{/each}
-		</div>
-	{/if}
-	{#if slideControls}
-		<!-- Slider controls -->
-		<button
-			on:click={prevSlide}
-			type="button"
-			class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-prev>
-			<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 $$slots.previous}
-					<slot name="previous" />
-				{:else}
-					<svg
-						aria-hidden="true"
-						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
-						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="hidden">Previous</span>
-			</span>
-		</button>
-		<button
-			on:click={nextSlide}
-			type="button"
-			class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
-			data-carousel-next>
-			<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 $$slots.next}
-					<slot name="next" />
-				{:else}
-					<svg
-						aria-hidden="true"
-						class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
-						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>
-				{/if}
-				<span class="hidden">Next</span>
-			</span>
-		</button>
-	{/if}
-</div>
-
-{#if showCaptions}
-	<Caption caption={images[imageShowingIndex].name} {captionClass} />
-{/if}
-
-{#if showThumbs}
-	<div class="flex flex-row justify-center bg-gray-100">
-		{#each images as { id, imgurl, name, attribution }}
-			<Thumbnail
-				{thumbWidth}
-				thumbImg={imgurl}
-				altTag={name}
-				titleLink={attribution}
-				{id}
-				selected={imageShowingIndex === id}
-				on:click={() => goToSlide(id)} />
-		{/each}
-	</div>
-{/if}

package/carousels/CarouselTransition.svelte.d.ts

@@ -1,32 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TransitionTypes, TransitionParamTypes } from '../types';
-declare const __propDef: {
-    props: {
-        showIndicators?: boolean | undefined;
-        showCaptions?: boolean | undefined;
-        showThumbs?: boolean | undefined;
-        images: any[];
-        slideControls?: boolean | undefined;
-        transitionType: TransitionTypes;
-        transitionParams?: TransitionParamTypes | undefined;
-        loop?: boolean | undefined;
-        duration?: number | undefined;
-        divClass?: string | undefined;
-        indicatorDivClass?: string | undefined;
-        captionClass?: string | undefined;
-        indicatorClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        previous: {};
-        next: {};
-    };
-};
-export declare type CarouselTransitionProps = typeof __propDef.props;
-export declare type CarouselTransitionEvents = typeof __propDef.events;
-export declare type CarouselTransitionSlots = typeof __propDef.slots;
-export default class CarouselTransition extends SvelteComponentTyped<CarouselTransitionProps, CarouselTransitionEvents, CarouselTransitionSlots> {
-}
-export {};

package/carousels/Indicator.svelte

@@ -1,11 +0,0 @@
-<script>export let name = '';
-export let selected = false;
-export let indicatorClass = '';
-</script>
-
-<button type="button" class={indicatorClass} class:active={selected} aria-label={name} on:click />
-
-<style>
-  .active {
-    opacity: 1;
-  }</style>

package/carousels/Indicator.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        name?: string | undefined;
-        selected?: boolean | undefined;
-        indicatorClass?: string | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type IndicatorProps = typeof __propDef.props;
-export declare type IndicatorEvents = typeof __propDef.events;
-export declare type IndicatorSlots = typeof __propDef.slots;
-export default class Indicator extends SvelteComponentTyped<IndicatorProps, IndicatorEvents, IndicatorSlots> {
-}
-export {};

package/carousels/Slide.svelte

@@ -1,9 +0,0 @@
-<script>export let image = '';
-export let altTag = '';
-export let attr = '';
-export let slideClass = '';
-</script>
-
-<div class={slideClass}>
-  <img src={image} alt={altTag} title={attr} />
-</div>

package/carousels/Slide.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        image?: string | undefined;
-        altTag?: string | undefined;
-        attr?: string | undefined;
-        slideClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type SlideProps = typeof __propDef.props;
-export declare type SlideEvents = typeof __propDef.events;
-export declare type SlideSlots = typeof __propDef.slots;
-export default class Slide extends SvelteComponentTyped<SlideProps, SlideEvents, SlideSlots> {
-}
-export {};