flowbite-svelte 0.44.8 → 0.44.10

package/src/lib/breadcrumbs/BreadcrumbItem.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let home: boolean = false;
+  export let href: string | undefined = undefined;
+  export let linkClass: string = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
+  export let spanClass: string = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
+  export let homeClass: string = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+</script>
+
+<li class={twMerge('inline-flex items-center', $$props.class)} {...$$restProps}>
+  {#if home}
+    <a class={twMerge(homeClass, $$props.classHome)} {href}>
+      {#if $$slots.icon}
+        <slot name="icon" />
+      {:else}
+        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+        </svg>
+      {/if}
+      <slot />
+    </a>
+  {:else}
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {:else}
+      <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+      </svg>
+    {/if}
+    {#if href}
+      <a class={twMerge(linkClass, $$props.classLink)} {href}>
+        <slot />
+      </a>
+    {:else}
+      <span class={twMerge(spanClass, $$props.classSpan)}>
+        <slot />
+      </span>
+    {/if}
+  {/if}
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let home: boolean = false;
+@prop export let href: string | undefined = undefined;
+@prop export let linkClass: string = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
+@prop export let spanClass: string = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
+@prop export let homeClass: string = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+-->

package/src/lib/buttongroups/ButtonGroup.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import type { SizeType } from '$lib/types';
+
+  export let size: SizeType = 'md';
+  export let divClass: string = 'inline-flex rounded-lg shadow-sm';
+
+  setContext('group', { size });
+</script>
+
+<div {...$$restProps} class={twMerge(divClass, $$props.class)} role="group">
+  <slot />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let size: SizeType = 'md';
+@prop export let divClass: string = 'inline-flex rounded-lg shadow-sm';
+-->

package/src/lib/buttons/Button.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+  import type { ButtonType } from '../types';
+  import type { SizeType } from '$lib/types';
+
+  type ButtonColor = keyof typeof colorClasses;
+
+  const group: SizeType = getContext('group');
+
+  export let pill: boolean = false;
+  export let outline: boolean = false;
+  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
+  export let href: string | undefined = undefined;
+  export let type: ButtonType = 'button';
+  export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
+  export let shadow: boolean = false;
+
+  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',
+    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',
+    light: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600',
+    primary: 'text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700',
+    purple: 'text-white bg-purple-700 hover:bg-purple-800 dark:bg-purple-600 dark:hover:bg-purple-700',
+    red: 'text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700',
+    yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 ',
+    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',
+    none: ''
+  };
+
+  const coloredShadowClasses = {
+    alternative: 'shadow-gray-500/50 dark:shadow-gray-800/80',
+    blue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
+    dark: 'shadow-gray-500/50 dark:shadow-gray-800/80',
+    green: 'shadow-green-500/50 dark:shadow-green-800/80',
+    light: 'shadow-gray-500/50 dark:shadow-gray-800/80',
+    primary: 'shadow-primary-500/50 dark:shadow-primary-800/80',
+    purple: 'shadow-purple-500/50 dark:shadow-purple-800/80',
+    red: 'shadow-red-500/50 dark:shadow-red-800/80 ',
+    yellow: 'shadow-yellow-500/50 dark:shadow-yellow-800/80 ',
+    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',
+    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',
+    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',
+    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500',
+    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600',
+    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400',
+    none: ''
+  };
+
+  const sizeClasses = {
+    xs: 'px-3 py-2 text-xs',
+    sm: 'px-4 py-2 text-sm',
+    md: 'px-5 py-2.5 text-sm',
+    lg: 'px-5 py-3 text-base',
+    xl: 'px-6 py-3.5 text-base'
+  };
+
+  const hasBorder = () => outline || color === 'alternative' || color === 'light';
+
+  let buttonClass: string;
+  $: 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);
+</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 on:touchend on:touchcancel on:mouseenter on:mouseleave>
+  <slot />
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let pill: boolean = false;
+@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 color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
+@prop export let shadow: boolean = false;
+-->

package/src/lib/buttons/GradientButton.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import Button from './Button.svelte';
+  import { getContext } from 'svelte';
+
+  const group = getContext('group');
+
+  export let color: keyof typeof gradientClasses = 'blue';
+  export let shadow: boolean = false;
+
+  const gradientClasses = {
+    blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-blue-300 dark:focus:ring-blue-800 ',
+    green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-green-300 dark:focus:ring-green-800',
+    cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800',
+    teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-teal-300 dark:focus:ring-teal-800',
+    lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-lime-300 dark:focus:ring-lime-800',
+    red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-red-300 dark:focus:ring-red-800',
+    pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-pink-300 dark:focus:ring-pink-800',
+    purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-purple-300 dark:focus:ring-purple-800',
+    purpleToBlue: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-blue-300 dark:focus:ring-blue-800',
+    cyanToBlue: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800',
+    greenToBlue: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-green-200 dark:focus:ring-green-800',
+    purpleToPink: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-purple-200 dark:focus:ring-purple-800',
+    pinkToOrange: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-pink-200 dark:focus:ring-pink-800',
+    tealToLime: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l focus:ring-lime-200 dark:focus:ring-teal-700',
+    redToYellow: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-red-100 dark:focus:ring-red-400'
+  };
+
+  const coloredShadowClasses = {
+    blue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
+    green: 'shadow-green-500/50 dark:shadow-green-800/80',
+    cyan: 'shadow-cyan-500/50 dark:shadow-cyan-800/80',
+    teal: 'shadow-teal-500/50 dark:shadow-teal-800/80 ',
+    lime: 'shadow-lime-500/50 dark:shadow-lime-800/80',
+    red: 'shadow-red-500/50 dark:shadow-red-800/80 ',
+    pink: 'shadow-pink-500/50 dark:shadow-pink-800/80',
+    purple: 'shadow-purple-500/50 dark:shadow-purple-800/80',
+    purpleToBlue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
+    cyanToBlue: 'shadow-cyan-500/50 dark:shadow-cyan-800/80',
+    greenToBlue: 'shadow-green-500/50 dark:shadow-green-800/80',
+    purpleToPink: 'shadow-purple-500/50 dark:shadow-purple-800/80',
+    pinkToOrange: 'shadow-pink-500/50 dark:shadow-pink-800/80',
+    tealToLime: 'shadow-lime-500/50 dark:shadow-teal-800/80',
+    redToYellow: 'shadow-red-500/50 dark:shadow-red-800/80'
+  };
+
+  let gradientOutlineClass: string;
+  $: gradientOutlineClass = twMerge(
+    'inline-flex items-center justify-center w-full  !border-0',
+    $$props.pill || '!rounded-md',
+    'bg-white !text-gray-900 dark:bg-gray-900 dark:!text-white', // this is limitation - no transparency
+    'hover:bg-transparent hover:!text-inherit',
+    'transition-all duration-75 ease-in group-hover:!bg-opacity-0 group-hover:!text-inherit'
+  );
+
+  let divClass: string;
+  $: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow && 'shadow-lg', shadow && coloredShadowClasses[color], group ? ($$props.pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : ($$props.pill && 'rounded-full') || 'rounded-lg', $$props.class);
+</script>
+
+{#if $$props.outline}
+  <div class={divClass}>
+    <!-- Trick to prentend outline without using border
+	    This has a limitation of no supporting transparency as
+	    is set to bg-white dark:bg-gray-900 -->
+    <Button {...$$restProps} color="none" class={gradientOutlineClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave><slot /></Button>
+  </div>
+{:else}
+  <Button {...$$restProps} color="none" class={divClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave>
+    <slot />
+  </Button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: keyof typeof gradientClasses = 'blue';
+@prop export let shadow: boolean = false;
+-->

package/src/lib/cards/Card.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { SizeType } from '$lib/types';
+  import { twMerge } from 'tailwind-merge';
+  import type { ComponentProps } from 'svelte';
+  import Frame from '../utils/Frame.svelte';
+
+  export let href: string | null | undefined = undefined;
+  export let horizontal: boolean = false;
+  export let reverse: boolean = false;
+  export let img: string | undefined = undefined;
+  export let padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
+  export let size: SizeType = 'sm';
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Frame> {
+    horizontal?: boolean;
+    reverse?: boolean;
+    img?: string;
+    padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: SizeType;
+  }
+
+  const paddings = {
+    none: 'p-0',
+    sm: 'p-4 sm:p-6 md:p-8',
+    md: 'p-4 sm:p-5',
+    lg: 'p-4 sm:p-6',
+    xl: 'p-4 sm:p-8'
+  };
+
+  const sizes = {
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-screen-xl'
+  };
+
+  let inneraPdding: string;
+  $: innerPadding = paddings[padding];
+
+  let cardClass: string;
+  $: cardClass = twMerge('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPadding, $$props.class);
+
+  let imgClass: string;
+  $: imgClass = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
+</script>
+
+<Frame tag={href ? 'a' : 'div'} rounded shadow border on:click on:focusin on:focusout on:mouseenter on:mouseleave {href} {...$$restProps} class={cardClass}>
+  {#if img}
+    <img class={imgClass} src={img} alt="" />
+    <div class={innerPadding}>
+      <slot />
+    </div>
+  {:else}
+    <slot />
+  {/if}
+</Frame>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let href: string | null | undefined = undefined;
+@prop export let horizontal: boolean = false;
+@prop export let reverse: boolean = false;
+@prop export let img: string | undefined = undefined;
+@prop export let padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
+@prop export let size: SizeType = 'sm';
+-->

package/src/lib/carousels/Carousel.svelte

@@ -0,0 +1,166 @@
+<script lang="ts" context="module">
+  export type State = {
+    images: HTMLImgAttributes[];
+    index: number;
+  };
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher, onMount, setContext } from 'svelte';
+  import { quintOut } from 'svelte/easing';
+  import type { HTMLImgAttributes } from 'svelte/elements';
+  import { writable } from 'svelte/store';
+  import { fade, type TransitionConfig } from 'svelte/transition';
+  import { twMerge } from 'tailwind-merge';
+  import Controls from './Controls.svelte';
+  import Indicators from './Indicators.svelte';
+
+  type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
+
+  export let images: HTMLImgAttributes[];
+  export let index: number = 0;
+  export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
+  export let duration: number = 0;
+
+  // Carousel
+  let divClass: string = 'overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96';
+
+  const dispatch = createEventDispatcher();
+
+  const { set, subscribe, update } = writable<State>({ images, index });
+
+  const state = { set: (s: State) => 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: HTMLElement, duration: number) => {
+    carouselDiv = node; // used by DragStart
+
+    // loop timer
+    let intervalId: any;
+
+    if (duration > 0) intervalId = setInterval(nextSlide, duration);
+
+    return {
+      update: (duration: number) => {
+        clearInterval(intervalId);
+        if (duration > 0) intervalId = setInterval(nextSlide, duration);
+      },
+      destroy: () => clearInterval(intervalId)
+    };
+  };
+
+  type ActiveDragGesture = {
+    start: number;
+    position: number;
+    width: number;
+    timestamp: number;
+  };
+
+  let activeDragGesture: ActiveDragGesture | undefined;
+
+  let carouselDiv: HTMLElement;
+  let percentOffset: number = 0;
+  let touchEvent: MouseEvent | TouchEvent | null = null;
+
+  const getPositionFromEvent = (evt: MouseEvent | TouchEvent) => {
+    const mousePos = (evt as MouseEvent)?.clientX;
+    if (mousePos) return mousePos;
+
+    let touchEvt = evt as TouchEvent;
+    if (/^touch/.test(touchEvt?.type)) {
+      return touchEvt.touches[0].clientX;
+    }
+  };
+
+  const onDragStart = (evt: MouseEvent | TouchEvent) => {
+    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: MouseEvent | TouchEvent) => {
+          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: MouseEvent | TouchEvent) => {
+          // 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>
+
+<!-- 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={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>
+  <slot {index} {Controls} {Indicators} />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## 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 duration: number = 0;
+-->

package/src/lib/carousels/ControlButton.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let forward: boolean;
+  export let name: string;
+
+  let buttonCls: string;
+  $: 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/src/lib/carousels/Controls.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
+  import type { State } from './Carousel.svelte';
+  import ControlButton from './ControlButton.svelte';
+  import { twJoin } from 'tailwind-merge';
+
+  const state = getContext<Writable<State>>('state');
+
+  function changeSlide(forward: boolean) {
+    return function (ev: Event) {
+      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/src/lib/carousels/Indicators.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import Indicator from '$lib/indicators/Indicator.svelte';
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
+  import { twMerge } from 'tailwind-merge';
+  import type { State } from './Carousel.svelte';
+
+  export let activeClass = 'opacity-100';
+  export let inactiveClass = 'opacity-60';
+
+  const state = getContext<Writable<State>>('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/src/lib/carousels/Thumbnail.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { HTMLImgAttributes } from 'svelte/elements';
+  import { twMerge } from 'tailwind-merge';
+
+  export let selected: boolean = false;
+
+  export let activeClass = 'opacity-100';
+  export let inactiveClass = 'opacity-60';
+</script>
+
+<img alt="..." {...$$restProps} class={twMerge(selected ? activeClass : inactiveClass, $$props.class)} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let selected: boolean = false;
+@prop export let activeClass = 'opacity-100';
+@prop export let inactiveClass = 'opacity-60';
+-->

package/src/lib/carousels/Thumbnails.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { HTMLImgAttributes } from 'svelte/elements';
+  import { twMerge } from 'tailwind-merge';
+  import Thumbnail from './Thumbnail.svelte';
+
+  export let images: HTMLImgAttributes[] = [];
+  export let index: number = 0;
+
+  $: index = (index + images.length) % images.length;
+</script>
+
+<div class={twMerge('flex flex-row justify-center bg-gray-100 w-full', $$props.class)}>
+  {#each images as image, idx}
+    {@const selected = index === idx}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <button on:click={() => (index = idx)} aria-label="Click to view image">
+      <slot {Thumbnail} {image} {selected}>
+        <Thumbnail {...image} {selected} />
+      </slot>
+    </button>
+  {/each}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let images: HTMLImgAttributes[] = [];
+@prop export let index: number = 0;
+-->