flowbite-svelte 0.44.2 → 0.44.5

package/dist/carousels/Carousel.svelte

@@ -1,4 +1,4 @@
-<script>import { twMerge } from 'tailwind-merge';
+<script>import { twJoin, twMerge } from 'tailwind-merge';
 import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
@@ -62,11 +62,106 @@ if (loop) {
         nextSlide();
     }, duration);
 }
+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) => {
+    touchEvent = evt;
+    evt.preventDefault();
+    const start = getPositionFromEvent(evt);
+    const width = carouselDiv.getBoundingClientRect().width;
+    if (start === undefined || width === undefined)
+        return;
+    activeDragGesture = {
+        start,
+        position: start,
+        width,
+        timestamp: Date.now()
+    };
+};
+$: onDragMove =
+    activeDragGesture === undefined
+        ? undefined
+        : (evt) => {
+            const position = getPositionFromEvent(evt);
+            if (!activeDragGesture || position === undefined)
+                return;
+            const { start, width } = activeDragGesture;
+            percentOffset = Math.min(100, Math.max(-100, ((position - start) / width) * 100));
+            activeDragGesture.position = position;
+        };
+$: onDragStop =
+    activeDragGesture === undefined
+        ? undefined
+        : (evt) => {
+            // These might be exposed one day, keep them safely tucked away as constants.
+            const SWIPE_MAX_DURATION = 250;
+            const SWIPE_MIN_DISTANCE = 30;
+            const DRAG_MIN_PERCENT = 50;
+            if (activeDragGesture) {
+                const { timestamp, position, start } = activeDragGesture;
+                const duration = Date.now() - timestamp;
+                const distance = position - start;
+                if (Math.abs(distance) >= SWIPE_MIN_DISTANCE && duration <= SWIPE_MAX_DURATION && duration > 0) {
+                    if (distance > 0)
+                        prevSlide();
+                    else
+                        nextSlide();
+                }
+                else if (percentOffset > DRAG_MIN_PERCENT)
+                    prevSlide();
+                else if (percentOffset < -DRAG_MIN_PERCENT)
+                    nextSlide();
+                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,
+                    }));
+                }
+            }
+            percentOffset = 0;
+            activeDragGesture = undefined;
+            touchEvent = null;
+        };
 </script>
 
-<div {id} class="relative">
-  <div class={divCls}>
-    <Slide image={image.imgurl} altTag={image.name} attr={image.attribution} slideClass={slideCls} imgClass={imgCls} />
+<!-- 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} />
   </div>
   {#if showIndicators}
     <!-- Slider indicators -->
@@ -118,25 +213,25 @@ if (loop) {
 {/if}
 
 <!--
-  @component
-  [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
-  ## Props
-  @prop showIndicators: boolean = true;
-  @prop showCaptions: boolean = true;
-  @prop showThumbs: boolean = true;
-  @prop images: any[];
-  @prop slideControls: boolean = true;
-  @prop loop: boolean = false;
-  @prop duration: number = 2000;
-  @prop thumbClass: string = 'opacity-40';
-  ### Carousel
-  @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
-  @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
-  ### Caption
-  @prop captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
-  ### Indicator
-  @prop indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
-  ### Slide
-  @prop slideClass: string = '';
- 
+@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 = '';
 -->

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

@@ -33,25 +33,26 @@ export type CarouselProps = typeof __propDef.props;
 export type CarouselEvents = typeof __propDef.events;
 export type CarouselSlots = typeof __propDef.slots;
 /**
- * [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop showIndicators: boolean = true;
- * @prop showCaptions: boolean = true;
- * @prop showThumbs: boolean = true;
- * @prop images: any[];
- * @prop slideControls: boolean = true;
- * @prop loop: boolean = false;
- * @prop duration: number = 2000;
- * @prop thumbClass: string = 'opacity-40';
- * ### Carousel
- * @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
- * @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
- * ### Caption
- * @prop captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
- * ### Indicator
- * @prop indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
- * ### Slide
- * @prop slideClass: string = '';
+ * @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 = '';
  */
 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;AA+ID,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;;;;;;;;;;;;;;;;;;;;GAoBG;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;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"}

package/dist/carousels/CarouselTransition.svelte

@@ -146,25 +146,29 @@ if (loop) {
 {/if}
 
 <!--
-  @component
-  [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
-  ## Props
-  @prop showIndicators: boolean = true;
-  @prop showCaptions: boolean = true;
-  @prop showThumbs: boolean = true;
-  @prop images: any[];
-  @prop slideControls: boolean = true;
-  @prop transitionType: TransitionTypes = 'fade';
-  @prop transitionParams: TransitionParamTypes = {};
-  @prop loop: boolean = false;
-  @prop duration: number = 2000;
-  @prop thumbClass: string = 'opacity-40';
-  ### Carousel
-  @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
-  @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
-  ### Caption
-  @prop captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
-  ### Indicator
-  @prop indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
-
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let id: string = 'default-transition-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 transitionType: TransitionTypes = 'fade';
+@prop export let transitionParams: TransitionParamTypes = {};
+@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 = '';
+@prop export let transitionDivClass: string = '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 slideClass: string = 'hidden';
 -->

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

@@ -37,25 +37,30 @@ export type CarouselTransitionProps = typeof __propDef.props;
 export type CarouselTransitionEvents = typeof __propDef.events;
 export type CarouselTransitionSlots = typeof __propDef.slots;
 /**
- * [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop showIndicators: boolean = true;
- * @prop showCaptions: boolean = true;
- * @prop showThumbs: boolean = true;
- * @prop images: any[];
- * @prop slideControls: boolean = true;
- * @prop transitionType: TransitionTypes = 'fade';
- * @prop transitionParams: TransitionParamTypes = {};
- * @prop loop: boolean = false;
- * @prop duration: number = 2000;
- * @prop thumbClass: string = 'opacity-40';
- * ### Carousel
- * @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
- * @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
- * ### Caption
- * @prop captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
- * ### Indicator
- * @prop indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+ * @prop export let id: string = 'default-transition-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 transitionType: TransitionTypes = 'fade';
+ * @prop export let transitionParams: TransitionParamTypes = {};
+ * @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 = '';
+ * @prop export let transitionDivClass: string = '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 slideClass: string = 'hidden';
  */
 export default class CarouselTransition extends SvelteComponentTyped<CarouselTransitionProps, CarouselTransitionEvents, CarouselTransitionSlots> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselTransition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/CarouselTransition.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA6KtE,QAAA,MAAM,SAAS;;;;;;;gBADmpB,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CACzlB,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}
+{"version":3,"file":"CarouselTransition.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/CarouselTransition.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA6KtE,QAAA,MAAM,SAAS;;;;;;;gBADmpB,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;CACzlB,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}

package/dist/carousels/Indicator.svelte

@@ -5,17 +5,16 @@ export let indicatorClass = '';
 
 <button type="button" class={indicatorClass} class:active={selected} aria-label={name} on:click />
 
-<!--
-  @component
-  [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
-  ## Props
-  @prop name: string = '';
-  @prop selected: boolean = false;
-  @prop indicatorClass: string = '';
-
--->
-
 <style>
   .active {
     opacity: 1;
   }</style>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let name: string = '';
+@prop export let selected: boolean = false;
+@prop export let indicatorClass: string = '';
+-->

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

@@ -16,11 +16,11 @@ export type IndicatorProps = typeof __propDef.props;
 export type IndicatorEvents = typeof __propDef.events;
 export type IndicatorSlots = typeof __propDef.slots;
 /**
- * [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop name: string = '';
- * @prop selected: boolean = false;
- * @prop indicatorClass: string = '';
+ * @prop export let name: string = '';
+ * @prop export let selected: boolean = false;
+ * @prop export let indicatorClass: string = '';
  */
 export default class Indicator extends SvelteComponentTyped<IndicatorProps, IndicatorEvents, IndicatorSlots> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Indicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Indicator.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Indicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Indicator.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/carousels/Slide.svelte

@@ -12,11 +12,12 @@ export let imgClass = '';
 </div>
 
 <!--
-  @component
-  [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
-  ## Props
-  @prop image: string = '';
-  @prop altTag: string = '';
-  @prop attr: string = '';
-  @prop slideClass: string = '';
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let image: string = '';
+@prop export let altTag: string = '';
+@prop export let attr: string = '';
+@prop export let slideClass: string = '';
+@prop export let imgClass: string = '';
 -->

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

@@ -16,12 +16,13 @@ export type SlideProps = typeof __propDef.props;
 export type SlideEvents = typeof __propDef.events;
 export type SlideSlots = typeof __propDef.slots;
 /**
- * [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop image: string = '';
- * @prop altTag: string = '';
- * @prop attr: string = '';
- * @prop slideClass: string = '';
+ * @prop export let image: string = '';
+ * @prop export let altTag: string = '';
+ * @prop export let attr: string = '';
+ * @prop export let slideClass: string = '';
+ * @prop export let imgClass: string = '';
  */
 export default class Slide extends SvelteComponentTyped<SlideProps, SlideEvents, SlideSlots> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Slide.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Slide.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Slide.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Slide.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/carousels/Thumbnail.svelte

@@ -13,20 +13,21 @@ export let thumbBtnClass = '';
   <img class={thumbClass} class:active={selected} id={id.toString()} src={thumbImg} alt={altTag} title="Image from {titleLink}" width="{thumbWidth}%" />
 </button>
 
-<!--
-  @component
-  [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
-  ## Props
-  @prop thumbImg: string = '';
-  @prop altTag: string = '';
-  @prop titleLink: string = '';
-  @prop id: number;
-  @prop thumbWidth: number;
-  @prop selected: boolean = false;
-
--->
-
 <style>
   .active {
     opacity: 1;
   }</style>
+
+<!--
+@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 = '';
+-->

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

@@ -21,14 +21,16 @@ export type ThumbnailProps = typeof __propDef.props;
 export type ThumbnailEvents = typeof __propDef.events;
 export type ThumbnailSlots = typeof __propDef.slots;
 /**
- * [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop thumbImg: string = '';
- * @prop altTag: string = '';
- * @prop titleLink: string = '';
- * @prop id: number;
- * @prop thumbWidth: number;
- * @prop selected: boolean = false;
+ * @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 = '';
  */
 export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Thumbnail.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,QAAA,MAAM,SAAS;;;;;YAD6O,MAAM;;;;;;;;;;;;CAC3M,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Thumbnail.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Thumbnail.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,QAAA,MAAM,SAAS;;;;;YAD6O,MAAM;;;;;;;;;;;;CAC3M,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/charts/Chart.svelte

@@ -1,25 +1,28 @@
-<script>import { onMount, onDestroy } from 'svelte';
-let chartNode, chart;
-export let options;
-onMount(async () => {
-    const ApexCharts = (await import('apexcharts')).default;
-    chart = new ApexCharts(chartNode, options);
-    chart.render();
-});
-$: if (chart && options)
-    chart.updateOptions(options);
-onDestroy(() => {
-    if (chart)
-        chart.destroy();
-});
+<script>export let options;
+function initChart(node, options) {
+    let chart;
+    async function asyncInitChart() {
+        const ApexCharts = (await import('apexcharts')).default;
+        chart = new ApexCharts(node, options);
+        chart.render();
+    }
+    asyncInitChart();
+    return {
+        update(options) {
+            chart && chart.updateOptions(options);
+        },
+        destroy() {
+            chart && chart.destroy();
+        }
+    };
+}
 </script>
 
-<div bind:this={chartNode} class={$$props.class} />
+<div use:initChart={options} class={$$props.class} />
 
 <!--
-  @component
-  [Go to Carousel](https://flowbite-svelte.com/docs/components/charts)
-  ## Props
-  @prop options: ApexOptions;
-
--->
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let options: ApexOptions;
+-->

package/dist/charts/Chart.svelte.d.ts

@@ -14,9 +14,9 @@ export type ChartProps = typeof __propDef.props;
 export type ChartEvents = typeof __propDef.events;
 export type ChartSlots = typeof __propDef.slots;
 /**
- * [Go to Carousel](https://flowbite-svelte.com/docs/components/charts)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop options: ApexOptions;
+ * @prop export let options: ApexOptions;
  */
 export default class Chart extends SvelteComponentTyped<ChartProps, ChartEvents, ChartSlots> {
 }

package/dist/charts/Chart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/charts/Chart.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AA2B9C,QAAA,MAAM,SAAS;;;iBADiC,WAAW;;;;;;CACmB,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Chart.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/charts/Chart.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAmC9C,QAAA,MAAM,SAAS;;;iBADiC,WAAW;;;;;;CACmB,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/darkmode/DarkMode.svelte

@@ -46,12 +46,9 @@ const toggleTheme = () => {
 </button>
 
 <!--
-  @component
-  [Go to Darkmode](https://flowbite-svelte.com/docs/components/darkmode)
-  ## Props
-  @prop initialTheme: string = 'light';
-  @prop btnClass: string =
-    'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
-  @prop size: 'sm' | 'md' | 'lg' = 'md';
-  
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
+@prop export let size: 'sm' | 'md' | 'lg' = 'md';
 -->

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -17,12 +17,10 @@ export type DarkModeProps = typeof __propDef.props;
 export type DarkModeEvents = typeof __propDef.events;
 export type DarkModeSlots = typeof __propDef.slots;
 /**
- * [Go to Darkmode](https://flowbite-svelte.com/docs/components/darkmode)
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop initialTheme: string = 'light';
- * @prop btnClass: string =
- *   'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
- * @prop size: 'sm' | 'md' | 'lg' = 'md';
+ * @prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
+ * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
  */
 export default class DarkMode extends SvelteComponentTyped<DarkModeProps, DarkModeEvents, DarkModeSlots> {
 }

package/dist/darkmode/DarkMode.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,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"}
+{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/datepicker/Calender.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calender.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/datepicker/Calender.svelte.js"],"names":[],"mappings":"AASA,uDAAuD;AACvD,yDAAyD;AACzD,uDAAuD;AAEvD;;;;;CACC;4BALa,OAAO,UAAU,KAAK;6BACtB,OAAO,UAAU,MAAM;4BACvB,OAAO,UAAU,KAAK;qCAXC,QAAQ;AAQ7C;;;;;;;;EAA8E"}
+{"version":3,"file":"Calender.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/datepicker/Calender.svelte.js"],"names":[],"mappings":"AASA,uDAAuD;AACvD,yDAAyD;AACzD,uDAAuD;AAEvD;;;;;CACC;4BALa,OAAO,UAAU,KAAK;6BACtB,OAAO,UAAU,MAAM;4BACvB,OAAO,UAAU,KAAK;qCAXC,QAAQ;AAQ7C;;;;;;;;EAA8E"}