flowbite-svelte 0.44.17 → 0.44.19

package/dist/alert/Alert.svelte

@@ -37,7 +37,7 @@ $: {
 
     {#if dismissable}
       <slot name="close-button" {close}>
-        <CloseButton class="-mx-1.5 -my-1.5 dark:hover:bg-gray-700" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
+        <CloseButton class="ml-auto -mr-1.5 -my-1.5 dark:hover:bg-gray-700" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
       </slot>
     {/if}
   </Frame>

package/dist/buttons/Button.svelte

@@ -8,8 +8,10 @@ export let href = undefined;
 export let type = 'button';
 export let color = group ? (outline ? 'dark' : 'alternative') : 'primary';
 export let shadow = false;
+export let tag = 'button';
+export let checked = undefined;
 const colorClasses = {
-    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus:text-primary-700 dark:focus:text-white dark:hover:text-white',
+    alternative: 'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white',
     blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700',
     dark: 'text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700',
     green: 'text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700',
@@ -20,16 +22,28 @@ const colorClasses = {
     yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 ',
     none: ''
 };
+const colorCheckedClasses = {
+    alternative: 'text-primary-700 border dark:text-primary-500 bg-gray-100 dark:bg-gray-700 border-gray-300 shadow-gray-300 dark:shadow-gray-800 shadow-inner',
+    blue: 'text-blue-900 bg-blue-400 dark:bg-blue-500 shadow-blue-700 dark:shadow-blue-800 shadow-inner',
+    dark: 'text-white bg-gray-500 dark:bg-gray-600 shadow-gray-800 dark:shadow-gray-900 shadow-inner',
+    green: 'text-green-900 bg-green-400 dark:bg-green-500 shadow-green-700 dark:shadow-green-800 shadow-inner',
+    light: 'text-gray-900 bg-gray-100 border border-gray-300 dark:bg-gray-500 dark:text-gray-900 dark:border-gray-700 shadow-gray-300 dark:shadow-gray-700 shadow-inner',
+    primary: 'text-primary-900 bg-primary-400 dark:bg-primary-500 shadow-primary-700 dark:shadow-primary-800 shadow-inner',
+    purple: 'text-purple-900 bg-purple-400 dark:bg-purple-500 shadow-purple-700 dark:shadow-purple-800 shadow-inner',
+    red: 'text-red-900 bg-red-400 dark:bg-red-500 shadow-red-700 dark:shadow-red-800 shadow-inner',
+    yellow: 'text-yellow-900 bg-yellow-300 dark:bg-yellow-400 shadow-yellow-500 dark:shadow-yellow-700 shadow-inner',
+    none: ''
+};
 const coloredFocusClasses = {
-    alternative: 'focus:ring-gray-200 dark:focus:ring-gray-700',
-    blue: 'focus:ring-blue-300 dark:focus:ring-blue-800',
-    dark: 'focus:ring-gray-300 dark:focus:ring-gray-700',
-    green: 'focus:ring-green-300 dark:focus:ring-green-800',
-    light: 'focus:ring-gray-200 dark:focus:ring-gray-700',
-    primary: 'focus:ring-primary-300 dark:focus:ring-primary-800',
-    purple: 'focus:ring-purple-300 dark:focus:ring-purple-900',
-    red: 'focus:ring-red-300 dark:focus:ring-red-900',
-    yellow: 'focus:ring-yellow-300 dark:focus:ring-yellow-900',
+    alternative: 'focus-within:ring-gray-200 dark:focus-within:ring-gray-700',
+    blue: 'focus-within:ring-blue-300 dark:focus-within:ring-blue-800',
+    dark: 'focus-within:ring-gray-300 dark:focus-within:ring-gray-700',
+    green: 'focus-within:ring-green-300 dark:focus-within:ring-green-800',
+    light: 'focus-within:ring-gray-200 dark:focus-within:ring-gray-700',
+    primary: 'focus-within:ring-primary-300 dark:focus-within:ring-primary-800',
+    purple: 'focus-within:ring-purple-300 dark:focus-within:ring-purple-900',
+    red: 'focus-within:ring-red-300 dark:focus-within:ring-red-900',
+    yellow: 'focus-within:ring-yellow-300 dark:focus-within:ring-yellow-900',
     none: ''
 };
 const coloredShadowClasses = {
@@ -45,9 +59,9 @@ const coloredShadowClasses = {
     none: ''
 };
 const outlineClasses = {
-    alternative: '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',
+    alternative: 'text-gray-900 dark:text-gray-400 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white focus-within:ring-gray-300 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600 dark:focus-within:ring-gray-800',
     blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600',
-    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:bg-gray-900 focus:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600',
+    dark: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus-within:bg-gray-900 focus-within:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-600',
     green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600',
     light: 'text-gray-500 hover:text-gray-900 bg-white border border-gray-200 dark:border-gray-600 dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600',
     primary: 'text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-700 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600',
@@ -65,12 +79,58 @@ const sizeClasses = {
 };
 const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
-$: buttonClass = twMerge('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', group || 'focus:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], 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-600 dark:hover:border-gray-700'), outline && color === 'dark' && (group ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+$: buttonClass = twMerge('text-center font-medium', group ? 'focus-within:ring-2' : 'focus-within:ring-4', group && 'focus-within:z-10', group || 'focus-within:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline && checked && 'border dark:border-gray-900', outline && checked && colorCheckedClasses[color], outline && !checked && outlineClasses[color], !outline && checked && colorCheckedClasses[color], !outline && !checked && colorClasses[color], color === 'alternative' &&
+    (group && !checked
+        ? '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-600 dark:hover:border-gray-700'), outline &&
+    color === 'dark' &&
+    (group
+        ? checked
+            ? 'bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600'
+            : 'dark:text-white border-gray-800 dark:border-white'
+        : 'dark:text-gray-400 dark:border-gray-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group
+    ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg'
+    : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 </script>
 
-<svelte:element this={href ? 'a' : 'button'} type={href ? undefined : type} {href} role={href ? 'link' : 'button'} {...$$restProps} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
-  <slot />
-</svelte:element>
+{#if href}
+  <a
+    {href}
+    {...$$restProps}
+    class={buttonClass}
+    role="button"
+    on:click
+    on:change
+    on:keydown
+    on:keyup
+    on:touchstart|passive
+    on:touchend
+    on:touchcancel
+    on:mouseenter
+    on:mouseleave>
+    <slot />
+  </a>
+{:else if tag === 'button'}
+  <button
+    {type}
+    {...$$restProps}
+    class={buttonClass}
+    on:click
+    on:change
+    on:keydown
+    on:keyup
+    on:touchstart|passive
+    on:touchend
+    on:touchcancel
+    on:mouseenter
+    on:mouseleave>
+    <slot />
+  </button>
+{:else}
+  <svelte:element this={tag} {...$$restProps} class={buttonClass}>
+    <slot />
+  </svelte:element>
+{/if}
 
 <!--
 @component
@@ -80,7 +140,9 @@ $: buttonClass = twMerge('text-center font-medium', group ? 'focus:ring-2' : 'fo
 @prop export let outline: boolean = false;
 @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
 @prop export let href: string | undefined = undefined;
-@prop export let type: ButtonType = 'button';
+@prop export let type: HTMLButtonAttributes['type'] = 'button';
 @prop export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
 @prop export let shadow: boolean = false;
+@prop export let tag: string = 'button';
+@prop export let checked: boolean | undefined = undefined;
 -->

package/dist/buttons/Button.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ButtonType } from '../types';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,9 +7,11 @@ declare const __propDef: {
         outline?: boolean | undefined;
         size?: "xs" | "sm" | "lg" | "xl" | "md" | undefined;
         href?: string | undefined;
-        type?: ButtonType | undefined;
+        type?: HTMLButtonAttributes['type'];
         color?: "red" | "yellow" | "green" | "purple" | "blue" | "light" | "dark" | "primary" | "none" | "alternative" | undefined;
         shadow?: boolean | undefined;
+        tag?: string | undefined;
+        checked?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
@@ -38,9 +40,11 @@ export type ButtonSlots = typeof __propDef.slots;
  * @prop export let outline: boolean = false;
  * @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
  * @prop export let href: string | undefined = undefined;
- * @prop export let type: ButtonType = 'button';
+ * @prop export let type: HTMLButtonAttributes['type'] = 'button';
  * @prop export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
  * @prop export let shadow: boolean = false;
+ * @prop export let tag: string = 'button';
+ * @prop export let checked: boolean | undefined = undefined;
  */
 export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
 }

package/dist/buttons/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA+F3C,QAAA,MAAM,SAAS;;;;;;eAD+L,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CAClJ,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAgK5D,QAAA,MAAM,SAAS;;;;;;eAD6N,MAAM,GAAG,SAAS;eAAS,oBAAoB,CAAC,MAAM,CAAC;;;;kBAAiE,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;CACzS,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,eAAe,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC1F"}

package/dist/carousel/Carousel.svelte

@@ -2,32 +2,63 @@
 </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';
 import Slide from './Slide.svelte';
+import { canChangeSlide } from './CarouselSlide';
+const SLIDE_DURATION_RATIO = 0.25; // TODO: Expose one day?
 export let images;
 export let index = 0;
-export let transition = (x) => fade(x, { duration: 700, easing: quintOut });
+export let slideDuration = 1000;
+export let transition;
 export let duration = 0;
 export let ariaLabel = 'Draggable Carousel';
 // Carousel
-let divClass = 'overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96';
+let divClass = 'grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96';
+export let imgClass = '';
 const dispatch = createEventDispatcher();
-const { set, subscribe, update } = writable({ images, index });
-const state = { set: (s) => set({ index: ((s.index % images.length) + images.length) % images.length, images: s.images }), subscribe, update };
+const { set, subscribe, update } = writable({ images, index, forward: true, slideDuration, lastSlideChange: new Date() });
+const state = { set: (_state) => set({ index: _state.index, images: _state.images, lastSlideChange: new Date(), slideDuration, forward }), subscribe, update };
+let forward = true;
 setContext('state', state);
-subscribe((s) => {
-    index = s.index;
+subscribe((_state) => {
+    index = _state.index;
+    forward = _state.forward;
     dispatch('change', images[index]);
 });
-onMount(() => dispatch('change', images[index]));
-$: state.set({ images, index });
-const nextSlide = () => (index += 1);
-const prevSlide = () => (index -= 1);
+onMount(() => {
+    dispatch('change', images[index]);
+});
+let prevIndex = index;
+$: {
+    if (!prevIndex || prevIndex < index) {
+        update((_state) => ({ ..._state, forward: true, index }));
+    }
+    else {
+        update((_state) => ({ ..._state, forward: false, index }));
+    }
+    prevIndex = index;
+}
+const nextSlide = () => {
+    update((_state) => {
+        if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO }))
+            return _state;
+        _state.index = _state.index >= images.length - 1 ? 0 : _state.index + 1;
+        _state.lastSlideChange = new Date();
+        return { ..._state };
+    });
+};
+const prevSlide = () => {
+    update((_state) => {
+        if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO }))
+            return _state;
+        _state.index = _state.index <= 0 ? images.length - 1 : _state.index - 1;
+        _state.lastSlideChange = new Date();
+        return { ..._state };
+    });
+};
 const loop = (node, duration) => {
     carouselDiv = node; // used by DragStart
     // loop timer
@@ -58,7 +89,7 @@ const getPositionFromEvent = (evt) => {
 };
 const onDragStart = (evt) => {
     touchEvent = evt;
-    evt.preventDefault();
+    evt.cancelable && evt.preventDefault();
     const start = getPositionFromEvent(evt);
     const width = carouselDiv.getBoundingClientRect().width;
     if (start === undefined || width === undefined)
@@ -104,10 +135,13 @@ $: onDragStop =
                 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
-                    }));
+                    // Only issue click event for touches
+                    if (touchEvent?.constructor.name === 'TouchEvent') {
+                        // 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;
@@ -116,12 +150,21 @@ $: onDragStop =
         };
 </script>
 
+<!-- Preload all Carousel images for improved responsivity -->
+<svelte:head>
+  {#if images.length > 0}
+    {#each images as image}
+      <link rel="preload" href={image.src} as="image" />
+    {/each}
+  {/if}
+</svelte:head>
+
 <!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
 <svelte:document on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} />
-<div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart|passive={onDragStart} role="button" aria-label={ariaLabel} tabindex="0">
+<div bind:this={carouselDiv} class="relative" on:mousedown|nonpassive={onDragStart} on:touchstart|nonpassive={onDragStart} on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0">
   <div {...$$restProps} class={twMerge(divClass, activeDragGesture === undefined ? 'transition-transform' : '', $$props.class)} use:loop={duration}>
     <slot name="slide" {Slide} {index}>
-      <Slide image={images[index]} {transition} />
+      <Slide image={images[index]} class={imgClass} {transition} />
     </slot>
   </div>
   <slot {index} {Controls} {Indicators} />
@@ -133,7 +176,9 @@ $: onDragStop =
 ## Props
 @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 slideDuration: number = 1000;
+@prop export let transition: TransitionFunc | null;
 @prop export let duration: number = 0;
 @prop export let ariaLabel: string = 'Draggable Carousel';
+@prop export let imgClass: string = '';
 -->

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

@@ -2,9 +2,12 @@ import { SvelteComponent } from "svelte";
 export type State = {
     images: HTMLImgAttributes[];
     index: number;
+    lastSlideChange: Date;
+    slideDuration: number;
+    forward: boolean;
 };
 import type { HTMLImgAttributes } from 'svelte/elements';
-import { type TransitionConfig } from 'svelte/transition';
+import type { TransitionConfig } from 'svelte/transition';
 import Controls from './Controls.svelte';
 import Indicators from './Indicators.svelte';
 import Slide from './Slide.svelte';
@@ -13,9 +16,11 @@ declare const __propDef: {
         [x: string]: any;
         images: HTMLImgAttributes[];
         index?: number | undefined;
-        transition?: ((node: HTMLElement, params: any) => TransitionConfig) | undefined;
+        slideDuration?: number | undefined;
+        transition: ((node: HTMLElement, params: any) => TransitionConfig) | null;
         duration?: number | undefined;
         ariaLabel?: string | undefined;
+        imgClass?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -42,9 +47,11 @@ export type CarouselSlots = typeof __propDef.slots;
  * ## Props
  * @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 slideDuration: number = 1000;
+ * @prop export let transition: TransitionFunc | null;
  * @prop export let duration: number = 0;
  * @prop export let ariaLabel: string = 'Draggable Carousel';
+ * @prop export let imgClass: string = '';
  */
 export default class Carousel extends SvelteComponent<CarouselProps, CarouselEvents, CarouselSlots> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousel/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;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;AAC7C,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAgKnC,QAAA,MAAM,SAAS;;;gBADkH,iBAAiB,EAAE;;6BAlJrH,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;;;;;;;;;;;;;;;CAmJE,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;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousel/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,IAAI,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAIJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,MAAM,gBAAgB,CAAC;AA+MnC,QAAA,MAAM,SAAS;;;gBADsK,iBAAiB,EAAE;;;4BAhMzK,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;;;;;;;;;;;;;;;;CAiME,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;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

package/dist/carousel/CarouselSlide.d.ts

@@ -0,0 +1,6 @@
+export declare const canChangeSlide: ({ lastSlideChange, slideDuration, slideDurationRatio }: {
+    lastSlideChange: Date;
+    slideDuration: number;
+    slideDurationRatio?: number | undefined;
+}) => boolean;
+//# sourceMappingURL=CarouselSlide.d.ts.map

package/dist/carousel/CarouselSlide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlide.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousel/CarouselSlide.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;qBAKR,IAAI;mBACN,MAAM;;aAStB,CAAC"}

package/dist/carousel/CarouselSlide.js

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

package/dist/carousel/Controls.svelte

@@ -1,17 +1,38 @@
 <script>import { getContext } from 'svelte';
 import ControlButton from './ControlButton.svelte';
-import { twJoin } from 'tailwind-merge';
+import { twMerge } from 'tailwind-merge';
+import { canChangeSlide } from './CarouselSlide';
 const state = getContext('state');
+const { update } = state;
 function changeSlide(forward) {
-    return function (ev) {
-        if (ev.isTrusted)
-            $state.index = forward ? $state.index + 1 : $state.index - 1;
-    };
+    if (!canChangeSlide({
+        lastSlideChange: $state.lastSlideChange,
+        slideDuration: $state.slideDuration,
+        slideDurationRatio: 0.75
+    })) {
+        return;
+    }
+    if (forward) {
+        update((_state) => {
+            _state.forward = true;
+            _state.index = _state.index >= _state.images.length - 1 ? 0 : _state.index + 1;
+            _state.lastSlideChange = new Date();
+            return { ..._state };
+        });
+    }
+    else {
+        update((_state) => {
+            _state.forward = false;
+            _state.index = _state.index <= 0 ? _state.images.length - 1 : _state.index - 1;
+            _state.lastSlideChange = new Date();
+            return { ..._state };
+        });
+    }
 }
 </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)} />
+  <ControlButton name="Previous" forward={false} on:click={() => changeSlide(false)} class={twMerge($$props.class)} />
+  <ControlButton name="Next" forward={true} on:click={() => changeSlide(true)} class={twMerge($$props.class)} />
 </slot>

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

@@ -10,7 +10,7 @@ declare const __propDef: {
     slots: {
         default: {
             ControlButton: typeof ControlButton;
-            changeSlide: (forward: boolean) => (ev: Event) => void;
+            changeSlide: (forward: boolean) => void;
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Controls.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousel/Controls.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;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,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
+{"version":3,"file":"Controls.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousel/Controls.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAID,OAAO,aAAa,MAAM,wBAAwB,CAAC;AAoDnD,QAAA,MAAM,SAAS;;;;;;;;;;mCArCiB,OAAO;;;CAqCuC,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,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}

package/dist/carousel/Slide.svelte

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

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

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         image: HTMLImgAttributes;
-        transition?: ((node: HTMLElement, params: any) => TransitionConfig) | undefined;
+        transition?: ((node: HTMLElement, params: any) => TransitionConfig) | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,7 +19,7 @@ export type SlideSlots = typeof __propDef.slots;
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let image: HTMLImgAttributes;
- * @prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
+ * @prop export let transition: TransitionFunc | null = null;
  */
 export default class Slide extends SvelteComponent<SlideProps, SlideEvents, SlideSlots> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Slide.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousel/Slide.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AA0BhE,QAAA,MAAM,SAAS;;;eADoD,iBAAiB;6BAhBrD,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;CAiBE,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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
+{"version":3,"file":"Slide.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousel/Slide.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAO,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAsD/D,QAAA,MAAM,SAAS;;;eADoD,iBAAiB;6BArCrD,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;CAsCE,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;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}

package/dist/carousel/Thumbnails.svelte

@@ -3,6 +3,20 @@ import Thumbnail from './Thumbnail.svelte';
 export let images = [];
 export let index = 0;
 export let ariaLabel = 'Click to view image';
+export let imgClass = '';
+export let throttleDelay = 650; // ms
+let lastClickedAt = new Date();
+const btnClick = (idx) => {
+    if (new Date().getTime() - lastClickedAt.getTime() < throttleDelay) {
+        console.warn('Thumbnail action throttled');
+        return;
+    }
+    if (idx === index) {
+        return;
+    }
+    index = idx;
+    lastClickedAt = new Date();
+};
 $: index = (index + images.length) % images.length;
 </script>
 
@@ -10,9 +24,9 @@ $: index = (index + images.length) % images.length;
   {#each images as image, idx}
     {@const selected = index === idx}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <button on:click={() => (index = idx)} aria-label={ariaLabel}>
-      <slot {Thumbnail} {image} {selected}>
-        <Thumbnail {...image} {selected} />
+    <button on:click={() => btnClick(idx)} aria-label={ariaLabel}>
+      <slot {Thumbnail} {image} {selected} {imgClass}>
+        <Thumbnail {...image} {selected} class={imgClass} />
       </slot>
     </button>
   {/each}
@@ -25,4 +39,6 @@ $: index = (index + images.length) % images.length;
 @prop export let images: HTMLImgAttributes[] = [];
 @prop export let index: number = 0;
 @prop export let ariaLabel: string = 'Click to view image';
+@prop export let imgClass: string = '';
+@prop export let throttleDelay: number = 650;
 -->

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

@@ -7,6 +7,8 @@ declare const __propDef: {
         images?: HTMLImgAttributes[] | undefined;
         index?: number | undefined;
         ariaLabel?: string | undefined;
+        imgClass?: string | undefined;
+        throttleDelay?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,6 +18,7 @@ declare const __propDef: {
             Thumbnail: typeof Thumbnail;
             image: HTMLImgAttributes;
             selected: any;
+            imgClass: string;
         };
     };
 };
@@ -28,6 +31,8 @@ export type ThumbnailsSlots = typeof __propDef.slots;
  * @prop export let images: HTMLImgAttributes[] = [];
  * @prop export let index: number = 0;
  * @prop export let ariaLabel: string = 'Click to view image';
+ * @prop export let imgClass: string = '';
+ * @prop export let throttleDelay: number = 650;
  */
 export default class Thumbnails extends SvelteComponent<ThumbnailsProps, ThumbnailsEvents, ThumbnailsSlots> {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Thumbnails.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousel/Thumbnails.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,SAAS,MAAM,oBAAoB,CAAC;AA8B3C,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
+{"version":3,"file":"Thumbnails.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousel/Thumbnails.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,SAAS,MAAM,oBAAoB,CAAC;AA+C3C,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;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}

package/dist/datepicker/Datepicker.svelte

@@ -1,3 +1,6 @@
+<script context="module">"use strict";
+</script>
+
 <script>import Calendar from './Calender.svelte';
 export let range = false;
 // autoHide not working

package/dist/datepicker/Datepicker.svelte.d.ts

@@ -1,4 +1,15 @@
 import { SvelteComponent } from "svelte";
+declare module 'svelte/elements' {
+    interface HTMLAttributes<T> {
+        [x: `data-${string}`]: any;
+        'date-rangepicker'?: boolean;
+        datepicker?: boolean;
+        'datepicker-buttons'?: boolean;
+        'datepicker-format'?: string;
+        'datepicker-orientation'?: string;
+        'datepicker-title'?: string;
+    }
+}
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/datepicker/Datepicker.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AA8DD,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;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
+{"version":3,"file":"Datepicker.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/datepicker/Datepicker.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,OAAO,QAAQ,iBAAiB,CAAC;IAC/B,UAAU,cAAc,CAAC,CAAC;QACxB,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,GAAG,CAAC;QAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;QAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,wBAAwB,CAAC,EAAE,MAAM,CAAC;QAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;CACF;AAkEH,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;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}