flowbite-svelte 0.44.8 → 0.44.9

package/CONTRIBUTING.md

@@ -0,0 +1,66 @@
+# How to Contribute
+
+Here are some guidelines we'd like you to follow before submitting a PR.
+
+## Frontend pages
+
+<p><a href="https://tailwindcss.com/docs/content-configuration#dynamic-class-names">Tailwind warns</a> that you don't construct class names dynamically. Instead of this:</p>
+
+```html
+<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
+```
+
+### Always use complete class names:
+
+```html
+<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
+```
+
+## Types and Props
+
+Please add a type to `export`ed variables. When we generate props files, it will automatically pick up types from your file. If you don't add a type, it will break.
+
+Please run the following to update prop files.
+
+```sh
+npm run gen:props
+```
+
+This script will update/generate files in `src/routes/props`.
+
+Again avoid type inference for `export`ed variables.
+
+Please put all export variables before functions to avoid breaking props tables.
+
+## One or two at a time
+
+Please don't send a large amount of changes at once. It takes time to go through all changes. It is easier to check and update the repo asap.
+
+## Conventional commit
+
+<p>When making a commit, we recommend using <a href="https://www.conventionalcommits.org/en/v1.0.0/">the Conventional commits</a>.</p>
+
+Some examples are:
+
+```sh
+feat: add rating component
+fix: add if statement to Button component
+chore: clean up About page
+docs: add timeline page
+style: update home page
+test: add modal test
+```
+
+When you have a breaking change:
+
+```
+git commit -a "feat: change btnClass name to bClass" -m "BREAKING CHANGE: change the Button component attributes"
+```
+
+## Testing
+
+<p>Before submitting a PR, please run a test:</p>
+
+```sh
+npm run test
+```

package/dist/bottom-nav/BottomNavItem.svelte

@@ -4,6 +4,7 @@ export let btnName = '';
 export let appBtnPosition = 'middle';
 export let activeClass = undefined;
 export let href = '';
+export let exact = true;
 const navType = getContext('navType');
 const context = getContext('bottomNavType') ?? {};
 const activeUrlStore = getContext('activeUrl');
@@ -11,7 +12,7 @@ let navUrl = '';
 activeUrlStore.subscribe((value) => {
     navUrl = value;
 });
-$: active = navUrl ? href === navUrl : false;
+$: active = navUrl && exact ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
 const btnClasses = {
     default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
     border: 'inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600',
@@ -57,4 +58,5 @@ $: spanClass = twMerge(spanClasses[navType], active && (activeClass ?? context.a
 @prop export let appBtnPosition: 'left' | 'middle' | 'right' = 'middle';
 @prop export let activeClass: string | undefined = undefined;
 @prop export let href: string = '';
+@prop export let exact: boolean = true;
 -->

package/dist/bottom-nav/BottomNavItem.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         appBtnPosition?: "left" | "middle" | "right" | undefined;
         activeClass?: string | undefined;
         href?: string | undefined;
+        exact?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
@@ -33,6 +34,7 @@ export type BottomNavItemSlots = typeof __propDef.slots;
  * @prop export let appBtnPosition: 'left' | 'middle' | 'right' = 'middle';
  * @prop export let activeClass: string | undefined = undefined;
  * @prop export let href: string = '';
+ * @prop export let exact: boolean = true;
  */
 export default class BottomNavItem extends SvelteComponentTyped<BottomNavItemProps, BottomNavItemEvents, BottomNavItemSlots> {
 }

package/dist/bottom-nav/BottomNavItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2ED,QAAA,MAAM,SAAS;;;;;sBAD+K,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;CAClI,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"BottomNavItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/bottom-nav/BottomNavItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4ED,QAAA,MAAM,SAAS;;;;;sBAD8L,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CACjJ,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/carousels/Carousel.svelte

@@ -1,67 +1,46 @@
-<script>import { twJoin, twMerge } from 'tailwind-merge';
-import Slide from './Slide.svelte';
-import Thumbnail from './Thumbnail.svelte';
-import Caption from './Caption.svelte';
-import Indicator from './Indicator.svelte';
-export let id = 'default-carousel';
-export let showIndicators = true;
-export let showCaptions = true;
-export let showThumbs = true;
+<script context="module">export {};
+</script>
+
+<script>import { createEventDispatcher, onMount, setContext } from 'svelte';
+import { quintOut } from 'svelte/easing';
+import { writable } from 'svelte/store';
+import { fade } from 'svelte/transition';
+import { twMerge } from 'tailwind-merge';
+import Controls from './Controls.svelte';
+import Indicators from './Indicators.svelte';
 export let images;
-export let slideControls = true;
-export let loop = false;
-export let duration = 2000;
+export let index = 0;
+export let transition = (x) => fade(x, { duration: 700, easing: quintOut });
+export let duration = 0;
 // Carousel
-export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
-let divCls = twMerge(divClass, $$props.classDiv);
-export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
-let indicatorDivCls = twMerge(indicatorDivClass, $$props.classIndicatorDiv);
-// Caption
-export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
-let captionCls = twMerge(captionClass, $$props.classCaption);
-// Indicator
-export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
-let indicatorCls = twMerge(indicatorClass, $$props.classIndicator);
-// Slide
-export let slideClass = 'flex items-center justify-center h-full w-full';
-let slideCls = twMerge(slideClass, $$props.classSlide);
-// Img
-export let imgFit = 'cover';
-export let imgClass = `object-${imgFit} ${imgFit === 'cover' && 'w-full'} h-full`;
-let imgCls = twMerge(imgClass, $$props.classImg);
-// Thumbnail
-export let thumbClass = 'opacity-40';
-let thumbCls = twMerge(thumbClass, $$props.classThumb);
-// Thumbnail Container
-export let thumbDivClass = 'flex flex-row justify-center bg-gray-100 w-full';
-let thumbDivCls = twMerge(thumbDivClass, $$props.classThumbDiv);
-// Thumbnail Img Btn Div
-export let thumbBtnClass = '';
-let thumbBtnCls = twMerge(thumbBtnClass, $$props.classBtnThumb);
-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;
-    }
+let divClass = 'overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96';
+const dispatch = createEventDispatcher();
+const { set, subscribe, update } = writable({ images, index });
+const state = { set: (s) => set({ index: ((s.index % images.length) + images.length) % images.length, images: s.images }), subscribe, update };
+setContext('state', state);
+subscribe((s) => {
+    index = s.index;
+    dispatch('change', images[index]);
+});
+onMount(() => dispatch('change', images[index]));
+$: state.set({ images, index });
+const nextSlide = () => (index += 1);
+const prevSlide = () => (index -= 1);
+const loop = (node, duration) => {
+    carouselDiv = node; // used by DragStart
+    // loop timer
+    let intervalId;
+    if (duration > 0)
+        intervalId = setInterval(nextSlide, duration);
+    return {
+        update: (duration) => {
+            clearInterval(intervalId);
+            if (duration > 0)
+                intervalId = setInterval(nextSlide, duration);
+        },
+        destroy: () => clearInterval(intervalId)
+    };
 };
-const goToSlide = (number) => (imageShowingIndex = number);
-if (loop) {
-    setInterval(() => {
-        nextSlide();
-    }, duration);
-}
 let activeDragGesture;
 let carouselDiv;
 let percentOffset = 0;
@@ -125,7 +104,7 @@ $: onDragStop =
                 else {
                     // The gesture is a tap not drag, so manually issue a click event to trigger tap click gestures lost via preventDefault
                     touchEvent?.target?.dispatchEvent(new Event('click', {
-                        bubbles: true,
+                        bubbles: true
                     }));
                 }
             }
@@ -136,102 +115,22 @@ $: onDragStop =
 </script>
 
 <!-- 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}
-  {id}
-  class="relative"
-  on:mousedown={onDragStart}
-  on:touchstart={onDragStart}
-  role="button"
-  aria-label="Draggable Carousel"
-  tabindex="0">
-  <div
-    style={`transform: translateX(${percentOffset}%)`}
-    class={twJoin(
-      divClass,
-      { 'transition-transform': activeDragGesture === undefined })}>
-    <Slide
-      image={image.imgurl}
-      slideClass={slideCls}
-      imgClass={imgCls}
-      altTag={image.name}
-      attr={image.attribution} />
+<svelte:document on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} />
+<div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart={onDragStart} role="button" aria-label="Draggable Carousel" tabindex="0">
+  <div style={`transform: translateX(${percentOffset}%)`} {...$$restProps} class={twMerge(divClass, activeDragGesture === undefined ? 'transition-transform' : '', $$props.class)} use:loop={duration}>
+    {#key images[index]}
+      <img alt="..." {...images[index]} transition:transition={{}} class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" />
+    {/key}
   </div>
-  {#if showIndicators}
-    <!-- Slider indicators -->
-    <div class={indicatorDivCls}>
-      {#each images as { id, imgurl, name, attribution }}
-        <Indicator {name} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} indicatorClass={indicatorCls} />
-      {/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}
+  <slot {index} {Controls} {Indicators} />
 </div>
 
-{#if showCaptions}
-  <Caption caption={images[imageShowingIndex].name} captionClass={captionCls} />
-{/if}
-
-{#if showThumbs}
-  <div class={thumbDivCls}>
-    {#each images as { id, imgurl, name, attribution }}
-      <Thumbnail thumbClass={thumbCls} thumbBtnClass={thumbBtnCls} thumbImg={imgurl} altTag={name} titleLink={attribution} {id} selected={imageShowingIndex === id} on:click={() => goToSlide(id)} />
-    {/each}
-  </div>
-{/if}
-
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let id: string = 'default-carousel';
-@prop export let showIndicators: boolean = true;
-@prop export let showCaptions: boolean = true;
-@prop export let showThumbs: boolean = true;
-@prop export let images: any[];
-@prop export let slideControls: boolean = true;
-@prop export let loop: boolean = false;
-@prop export let duration: number = 2000;
-@prop export let divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
-@prop export let indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
-@prop export let captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
-@prop export let indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
-@prop export let slideClass: string = 'flex items-center justify-center h-full w-full';
-@prop export let imgFit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = 'cover';
-@prop export let imgClass: string = `object-${imgFit} ${imgFit === 'cover' && 'w-full'} h-full`;
-@prop export let thumbClass: string = 'opacity-40';
-@prop export let thumbDivClass: string = 'flex flex-row justify-center bg-gray-100 w-full';
-@prop export let thumbBtnClass: string = '';
+@prop export let images: HTMLImgAttributes[];
+@prop export let index: number = 0;
+@prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
+@prop export let duration: number = 0;
 -->

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

@@ -1,32 +1,31 @@
 import { SvelteComponentTyped } from "svelte";
+export type State = {
+    images: HTMLImgAttributes[];
+    index: number;
+};
+import type { HTMLImgAttributes } from 'svelte/elements';
+import { type TransitionConfig } from 'svelte/transition';
+import Controls from './Controls.svelte';
+import Indicators from './Indicators.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        id?: string | undefined;
-        showIndicators?: boolean | undefined;
-        showCaptions?: boolean | undefined;
-        showThumbs?: boolean | undefined;
-        images: any[];
-        slideControls?: boolean | undefined;
-        loop?: boolean | undefined;
+        images: HTMLImgAttributes[];
+        index?: number | undefined;
+        transition?: ((node: HTMLElement, params: any) => TransitionConfig) | undefined;
         duration?: number | undefined;
-        divClass?: string | undefined;
-        indicatorDivClass?: string | undefined;
-        captionClass?: string | undefined;
-        indicatorClass?: string | undefined;
-        slideClass?: string | undefined;
-        imgFit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
-        imgClass?: string | undefined;
-        thumbClass?: string | undefined;
-        thumbDivClass?: string | undefined;
-        thumbBtnClass?: string | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        previous: {};
-        next: {};
+        default: {
+            index: number;
+            Controls: typeof Controls;
+            Indicators: typeof Indicators;
+        };
     };
 };
 export type CarouselProps = typeof __propDef.props;
@@ -35,24 +34,10 @@ export type CarouselSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let id: string = 'default-carousel';
- * @prop export let showIndicators: boolean = true;
- * @prop export let showCaptions: boolean = true;
- * @prop export let showThumbs: boolean = true;
- * @prop export let images: any[];
- * @prop export let slideControls: boolean = true;
- * @prop export let loop: boolean = false;
- * @prop export let duration: number = 2000;
- * @prop export let divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
- * @prop export let indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
- * @prop export let captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
- * @prop export let indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
- * @prop export let slideClass: string = 'flex items-center justify-center h-full w-full';
- * @prop export let imgFit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = 'cover';
- * @prop export let imgClass: string = `object-${imgFit} ${imgFit === 'cover' && 'w-full'} h-full`;
- * @prop export let thumbClass: string = 'opacity-40';
- * @prop export let thumbDivClass: string = 'flex flex-row justify-center bg-gray-100 w-full';
- * @prop export let thumbBtnClass: string = '';
+ * @prop export let images: HTMLImgAttributes[];
+ * @prop export let index: number = 0;
+ * @prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
+ * @prop export let duration: number = 0;
  */
 export default class Carousel extends SvelteComponentTyped<CarouselProps, CarouselEvents, CarouselSlots> {
 }

package/dist/carousels/Carousel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmOD,QAAA,MAAM,SAAS;;;;;;;gBADoiB,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;CAC1e,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAKJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AA8J7C,QAAA,MAAM,SAAS;;;gBAD2F,iBAAiB,EAAE;;6BAjJ9F,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;;;;;;;;;;CAkJE,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/carousels/ControlButton.svelte

@@ -0,0 +1,31 @@
+<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 ? 'right-0' : 'left-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/carousels/ControlButton.svelte.d.ts

@@ -0,0 +1,29 @@
+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 {};
+//# sourceMappingURL=ControlButton.svelte.d.ts.map

package/dist/carousels/ControlButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/ControlButton.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkCD,QAAA,MAAM,SAAS;;;iBAD8C,OAAO;cAAQ,MAAM;;;;;;;;;;CACJ,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/carousels/Controls.svelte

@@ -0,0 +1,17 @@
+<script>import { getContext } from 'svelte';
+import ControlButton from './ControlButton.svelte';
+import { twJoin } from 'tailwind-merge';
+const state = getContext('state');
+function changeSlide(forward) {
+    return function (ev) {
+        if (ev.isTrusted)
+            $state.index = forward ? $state.index + 1 : $state.index - 1;
+    };
+}
+</script>
+
+<!-- Slider controls -->
+<slot {ControlButton} {changeSlide}>
+  <ControlButton name="Previous" forward={false} on:click={changeSlide(false)} class={twJoin($$props.class)} />
+  <ControlButton name="Next" forward={true} on:click={changeSlide(true)} class={twJoin($$props.class)} />
+</slot>

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

@@ -0,0 +1,23 @@
+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) => (ev: Event) => 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 {};
+//# sourceMappingURL=Controls.svelte.d.ts.map

package/dist/carousels/Controls.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Controls.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAID,OAAO,aAAa,MAAM,wBAAwB,CAAC;AA2BnD,QAAA,MAAM,SAAS;;;;;;;;;;mCAfiB,OAAO,UACd,KAAK;;;CAcgD,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/carousels/Indicators.svelte

@@ -0,0 +1,26 @@
+<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 left-1/2 z-30 space-x-3 -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/carousels/Indicators.svelte.d.ts

@@ -0,0 +1,32 @@
+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 {};
+//# sourceMappingURL=Indicators.svelte.d.ts.map

package/dist/carousels/Indicators.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicators.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Indicators.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AAkCzD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/carousels/Thumbnail.svelte

@@ -1,33 +1,16 @@
-<script>export let thumbImg = '';
-export let altTag = '';
-export let titleLink = '';
-export let id;
-export let thumbWidth = 100;
+<script>import { twMerge } from 'tailwind-merge';
 export let selected = false;
-export let thumbClass = '';
-export let thumbBtnClass = '';
+export let activeClass = 'opacity-100';
+export let inactiveClass = 'opacity-60';
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<button on:click aria-label="Click to view image" class={thumbBtnClass}>
-  <img class={thumbClass} class:active={selected} id={id.toString()} src={thumbImg} alt={altTag} title="Image from {titleLink}" width="{thumbWidth}%" />
-</button>
-
-<style>
-  .active {
-    opacity: 1;
-  }</style>
+<img alt="..." {...$$restProps} class={twMerge(selected ? activeClass : inactiveClass, $$props.class)} />
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let thumbImg: string = '';
-@prop export let altTag: string = '';
-@prop export let titleLink: string = '';
-@prop export let id: number;
-@prop export let thumbWidth: number = 100;
 @prop export let selected: boolean = false;
-@prop export let thumbClass: string = '';
-@prop export let thumbBtnClass: string = '';
+@prop export let activeClass = 'opacity-100';
+@prop export let inactiveClass = 'opacity-60';
 -->