odj-svelte-ui 0.1.0

package/dist/elements/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-neutral-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-neutral-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-neutral-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-neutral-900 dark:bg-neutral-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-neutral-900 -->
+    <Button {...$$restProps} color="none" class={gradientOutlineClass} on:click on:change on:keydown on:keyup 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/dist/elements/buttons/GradientButton.svelte.d.ts

@@ -0,0 +1,47 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let color: keyof typeof gradientClasses = 'blue';
+ * @prop export let shadow: boolean = false;
+ */
+declare const GradientButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    color?: ("red" | "lime" | "green" | "teal" | "cyan" | "blue" | "purple" | "pink" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow") | undefined;
+    shadow?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+    change: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    touchstart: TouchEvent;
+    touchend: TouchEvent;
+    touchcancel: TouchEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type GradientButton = InstanceType<typeof GradientButton>;
+export default GradientButton;

package/dist/elements/cards/Card.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { SizeType } from '../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-neutral-100 dark:hover:bg-neutral-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/dist/elements/cards/Card.svelte.d.ts

@@ -0,0 +1,65 @@
+import type { SizeType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [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';
+ */
+declare const Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<import("svelte/elements").HTMLAnchorAttributes & {
+    tag?: string;
+    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: import("svelte/action").Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+} & {
+    children?: any;
+} & {
+    horizontal?: boolean;
+    reverse?: boolean;
+    img?: string;
+    padding?: "none" | "sm" | "md" | "lg" | "xl";
+    size?: SizeType;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+    focusin: FocusEvent;
+    focusout: FocusEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Card = InstanceType<typeof Card>;
+export default Card;

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

@@ -0,0 +1,5 @@
+export declare const canChangeSlide: ({ lastSlideChange, slideDuration, slideDurationRatio }: {
+    lastSlideChange: Date;
+    slideDuration: number;
+    slideDurationRatio?: number;
+}) => boolean;

package/dist/elements/carousel/Carousel.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/elements/carousel/Carousel.svelte

@@ -0,0 +1,220 @@
+<script lang="ts" context="module">
+  export type State = {
+    images: HTMLImgAttributes[];
+    index: number;
+    lastSlideChange: Date;
+    slideDuration: number; // ms
+    forward: boolean;
+  };
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher, onMount, setContext } from 'svelte';
+  import type { HTMLImgAttributes } from 'svelte/elements';
+  import { writable } from 'svelte/store';
+  import type { TransitionConfig } 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 './Carousel';
+
+  type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
+  const SLIDE_DURATION_RATIO = 0.25; // TODO: Expose one day?
+
+  export let images: HTMLImgAttributes[];
+  export let index: number = 0;
+  export let slideDuration: number = 1000;
+  export let transition: TransitionFunc | null;
+  export let duration: number = 0;
+  export let ariaLabel: string = 'Draggable Carousel';
+
+  // Carousel
+  let divClass: string = 'grid overflow-hidden relative rounded-lg';
+  export let imgClass: string = '';
+
+  const dispatch = createEventDispatcher();
+
+  const { set, subscribe, update } = writable<State>({ images, index, forward: true, slideDuration, lastSlideChange: new Date() });
+
+  const state = { set: (_state: State) => set({ index: _state.index, images: _state.images, lastSlideChange: new Date(), slideDuration, forward }), subscribe, update };
+
+  let forward = true;
+
+  setContext('state', state);
+
+  subscribe((_state) => {
+    index = _state.index;
+    forward = _state.forward;
+    dispatch('change', images[index]);
+  });
+
+  onMount(() => {
+    dispatch('change', images[index]);
+  });
+
+  let prevIndex: number = 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: 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.cancelable && 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 {
+              // 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;
+          activeDragGesture = undefined;
+          touchEvent = null;
+        };
+</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|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]} class={imgClass} {transition} />
+    </slot>
+  </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 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/elements/carousel/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-neutral-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-neutral-800/30 group-hover:bg-white/50 dark:group-hover:bg-neutral-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-neutral-800/70 group-focus:outline-none">
+      {#if forward}
+        <svg aria-hidden="true" class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+      {:else}
+        <svg aria-hidden="true" class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      {/if}
+      <span class="sr-only">{name}</span>
+    </span>
+  </slot>
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let forward: boolean;
+@prop export let name: string;
+-->

package/dist/elements/carousel/ControlButton.svelte.d.ts

@@ -0,0 +1,39 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let forward: boolean;
+ * @prop export let name: string;
+ */
+declare const ControlButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    forward: boolean;
+    name: string;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type ControlButton = InstanceType<typeof ControlButton>;
+export default ControlButton;

package/dist/elements/carousel/Controls.svelte

@@ -0,0 +1,45 @@
+<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 { twMerge } from 'tailwind-merge';
+  import { canChangeSlide } from './Carousel';
+
+  const state = getContext<Writable<State>>('state');
+  const { update } = state;
+
+  function changeSlide(forward: boolean) {
+    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={twMerge($$props.class)} />
+  <ControlButton name="Next" forward={true} on:click={() => changeSlide(true)} class={twMerge($$props.class)} />
+</slot>

package/dist/elements/carousel/Indicators.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import Indicator from '../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-neutral-100 hover:bg-neutral-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';
+-->