flowbite-svelte 0.27.15 → 0.27.16

package/buttons/Button.svelte

@@ -0,0 +1,111 @@
+<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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,40 @@
+<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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,138 @@
+<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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,157 @@
+<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 = 'fade';
+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);
+        default:
+            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

@@ -0,0 +1,32 @@
+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 | undefined;
+        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

@@ -0,0 +1,11 @@
+<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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,9 @@
+<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

@@ -0,0 +1,19 @@
+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 {};