@pajohns/flowbite-svelte 0.1.0

package/dist/carousel/Carousel.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+  import { type CarouselProps, type CarouselContextType } from "..";
+  import Slide from "./Slide.svelte";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { onMount } from "svelte";
+  import { setCarouselContext } from "../context";
+  import { canChangeSlide } from "./CarouselSlide";
+  import { carousel } from "./theme";
+  import { untrack } from "svelte";
+
+  const SLIDE_DURATION_RATIO = 0.25;
+
+  let {
+    children,
+    slide,
+    images,
+    index = $bindable(0),
+    slideDuration = 1000,
+    slideFit,
+    transition,
+    duration = 0,
+    "aria-label": ariaLabel = "Draggable Carousel",
+    disableSwipe = false,
+    imgClass = "",
+    class: className,
+    classes,
+    onchange,
+    isPreload = false,
+    ...restProps
+  }: CarouselProps = $props();
+
+  warnThemeDeprecation(
+    "Carousel",
+    untrack(() => ({ imgClass })),
+    { imgClass: "slide" }
+  );
+
+  const styling = $derived(classes ?? { slide: imgClass });
+
+  // Theme context
+  const theme = $derived(getTheme("carousel"));
+
+  let { base, slide: slideCls } = $derived(carousel());
+
+  const changeSlide = (n: number) => {
+    if (images.length === 0) return;
+
+    if (n % images.length === _state.index) return;
+
+    if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration: _state.slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return;
+
+    _state.forward = n >= _state.index;
+    _state.index = (images.length + n) % images.length;
+    _state.lastSlideChange = Date.now();
+
+    index = _state.index; // Update the bindable index
+    onchange?.(images[_state.index]);
+  };
+
+  const _state: CarouselContextType = $state({ images: [], index: 0, forward: true, slideDuration: 500, lastSlideChange: Date.now(), changeSlide });
+  $effect(() => {
+    _state.images = images;
+    _state.slideDuration = slideDuration;
+    changeSlide(index);
+  });
+
+  setCarouselContext(_state);
+
+  let initialized = false;
+
+  onMount(() => {
+    onchange?.(images[index]);
+    initialized = true;
+  });
+
+  const nextSlide = () => changeSlide(_state.index + 1);
+  const prevSlide = () => changeSlide(_state.index - 1);
+
+  const loop = () => {
+    // loop timer
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    let intervalId: any;
+
+    if (duration > 0) {
+      intervalId = setInterval(nextSlide, duration);
+      if (initialized) {
+        if (_state.forward) nextSlide();
+        else prevSlide();
+      }
+    }
+
+    return () => clearInterval(intervalId);
+  };
+
+  type ActiveDragGesture = {
+    start: number;
+    position: number;
+    width: number;
+    timestamp: number;
+  };
+
+  let activeDragGesture: ActiveDragGesture | undefined = $state();
+
+  let carouselDiv: HTMLElement | undefined = $state();
+  let percentOffset: number = $state(0);
+  let touchEvent: MouseEvent | TouchEvent | null = null;
+
+  const getPositionFromEvent = (evt: MouseEvent | TouchEvent) => {
+    const mousePos = (evt as MouseEvent)?.clientX;
+    if (mousePos !== undefined) return mousePos;
+
+    let touchEvt = evt as TouchEvent;
+    if (/^touch/.test(touchEvt?.type)) {
+      return touchEvt.touches[0].clientX;
+    }
+  };
+
+  const onDragStart = (evt: MouseEvent | TouchEvent) => {
+    if (disableSwipe) return;
+    /* eslint-disable  @typescript-eslint/no-unused-expressions */
+    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()
+    };
+  };
+
+  let onDragMove = $derived(
+    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;
+        }
+  );
+
+  let onDragStop = $derived(
+    activeDragGesture === undefined
+      ? undefined
+      : () => {
+          // 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>
+
+<svelte:head>
+  {#if isPreload && images.length > 0}
+    {#each images as image (image.src)}
+      <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 onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} />
+<div
+  bind:this={carouselDiv}
+  onmousedown={onDragStart}
+  ontouchstart={onDragStart}
+  onmousemove={onDragMove}
+  onmouseup={onDragStop}
+  ontouchmove={onDragMove}
+  ontouchend={onDragStop}
+  role="button"
+  aria-label={ariaLabel}
+  tabindex="0"
+  {...restProps}
+  class={base({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", theme?.base, className) })}
+  {@attach loop}
+>
+  {#if slide}
+    {@render slide({ index: _state.index, Slide })}
+  {:else}
+    <Slide image={images[_state.index]} fit={slideFit} class={slideCls({ class: clsx(theme?.slide, styling.slide) })} {transition} />
+  {/if}
+
+  {@render children?.(_state.index)}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L470)
+## Props
+@prop children
+@prop slide
+@prop images
+@prop index = $bindable(0)
+@prop slideDuration = 1000
+@prop slideFit
+@prop transition
+@prop duration = 0
+@prop "aria-label": ariaLabel = "Draggable Carousel"
+@prop disableSwipe = false
+@prop imgClass = ""
+@prop class: className
+@prop classes
+@prop onchange
+@prop isPreload = false
+@prop ...restProps
+-->

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

@@ -0,0 +1,26 @@
+import { type CarouselProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L470)
+ * ## Props
+ * @prop children
+ * @prop slide
+ * @prop images
+ * @prop index = $bindable(0)
+ * @prop slideDuration = 1000
+ * @prop slideFit
+ * @prop transition
+ * @prop duration = 0
+ * @prop "aria-label": ariaLabel = "Draggable Carousel"
+ * @prop disableSwipe = false
+ * @prop imgClass = ""
+ * @prop class: className
+ * @prop classes
+ * @prop onchange
+ * @prop isPreload = false
+ * @prop ...restProps
+ */
+declare const Carousel: import("svelte").Component<CarouselProps, {}, "index">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;

package/dist/carousel/CarouselIndicators.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { IndicatorsProps } from "..";
+  import Indicator from "../indicator/Indicator.svelte";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { getCarouselContext } from "../context";
+  import { carouselIndicators } from "./theme";
+
+  let { children, activeClass, inactiveClass, position = "bottom", class: className, ...restProps }: IndicatorsProps = $props();
+
+  const theme = $derived(getTheme("carouselIndicators"));
+
+  const _state = getCarouselContext();
+  const { base, indicator } = $derived(carouselIndicators({ position }));
+
+  function goToIndex(newIndex: number) {
+    _state?.changeSlide(newIndex);
+  }
+</script>
+
+{#if _state}
+  <div class={base({ class: clsx(theme?.base, className) })} {...restProps}>
+    {#each _state.images as _, idx (idx)}
+      {@const selected = _state.index === idx}
+      <button type="button" onclick={() => goToIndex(idx)} aria-current={selected ? "true" : undefined} aria-label={`Go to slide ${idx + 1}`}>
+        {#if children}
+          {@render children({ selected, index: idx })}
+        {:else}
+          <Indicator class={indicator({ selected, class: clsx(selected ? activeClass : inactiveClass, theme?.indicator) })} />
+        {/if}
+      </button>
+    {/each}
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L485)
+## Props
+@prop children
+@prop activeClass
+@prop inactiveClass
+@prop position = "bottom"
+@prop class: className
+@prop ...restProps
+-->

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

@@ -0,0 +1,16 @@
+import type { IndicatorsProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L485)
+ * ## Props
+ * @prop children
+ * @prop activeClass
+ * @prop inactiveClass
+ * @prop position = "bottom"
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const CarouselIndicators: import("svelte").Component<IndicatorsProps, {}, "">;
+type CarouselIndicators = ReturnType<typeof CarouselIndicators>;
+export default CarouselIndicators;

package/dist/carousel/CarouselSlide.d.ts

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

package/dist/carousel/CarouselSlide.js

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

package/dist/carousel/ControlButton.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { controlButton } from "./theme";
+  import clsx from "clsx";
+  import type { ControlButtonProps } from "..";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, forward, name, class: className, spanClass, ...restProps }: ControlButtonProps = $props();
+
+  const { base, span } = $derived(controlButton({ forward }));
+
+  const theme = $derived(getTheme("controlButton"));
+</script>
+
+<button type="button" class={base({ class: clsx(className, theme) })} {...restProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <span class={span({ class: clsx(spanClass) })}>
+      {#if forward}
+        <svg aria-hidden="true" class="h-5 w-5 sm:h-6 sm:w-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="h-5 w-5 sm:h-6 sm:w-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}
+      {#if name}
+        <span class="sr-only">{name}</span>
+      {/if}
+    </span>
+  {/if}
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L492)
+## Props
+@prop children
+@prop forward
+@prop name
+@prop class: className
+@prop spanClass
+@prop ...restProps
+-->

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

@@ -0,0 +1,16 @@
+import type { ControlButtonProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L492)
+ * ## Props
+ * @prop children
+ * @prop forward
+ * @prop name
+ * @prop class: className
+ * @prop spanClass
+ * @prop ...restProps
+ */
+declare const ControlButton: import("svelte").Component<ControlButtonProps, {}, "">;
+type ControlButton = ReturnType<typeof ControlButton>;
+export default ControlButton;

package/dist/carousel/Controls.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { ControlsProps } from "..";
+  import ControlButton from "./ControlButton.svelte";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { getCarouselContext } from "../context";
+
+  let { children, class: className, ...restProps }: ControlsProps = $props();
+
+  const theme = $derived(getTheme("controlButton"));
+
+  const _state = getCarouselContext();
+
+  function changeSlide(forward: boolean) {
+    if (!_state) return;
+    _state.changeSlide(forward ? _state.index + 1 : _state.index - 1);
+  }
+</script>
+
+<!-- Slider controls -->
+{#if children}
+  {@render children(changeSlide)}
+{:else}
+  <ControlButton name="Previous" forward={false} onclick={() => changeSlide(false)} class={clsx(theme, className)} {...restProps} />
+  <ControlButton name="Next" forward={true} onclick={() => changeSlide(true)} class={clsx(theme, className)} {...restProps} />
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L498)
+## Props
+@prop children
+@prop class: className
+@prop ...restProps
+-->

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

@@ -0,0 +1,13 @@
+import type { ControlsProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L498)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const Controls: import("svelte").Component<ControlsProps, {}, "">;
+type Controls = ReturnType<typeof Controls>;
+export default Controls;

package/dist/carousel/Slide.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { SlideProps } from "..";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { getCarouselContext } from "../context";
+  import { fly } from "svelte/transition";
+  import { slide } from "./theme";
+
+  const _state = getCarouselContext();
+
+  let { image, transition, fit, class: className, ...restProps }: SlideProps = $props();
+
+  const theme = $derived(getTheme("slide"));
+
+  let transitionSlideIn = $derived({
+    x: _state?.forward ? "100%" : "-100%",
+    opacity: 1,
+    width: "100%",
+    height: "100%",
+    duration: _state?.slideDuration ?? 1000
+  });
+
+  let transitionSlideOut = $derived({
+    x: _state?.forward ? "-100%" : "100%",
+    opacity: 0.9,
+    width: "100%",
+    height: "100%",
+    duration: _state?.slideDuration ?? 1000
+  });
+
+  let imgClass = $derived(slide({ fit, class: clsx(theme, className) }));
+</script>
+
+{#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/)
+## Type
+[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L515)
+## Props
+@prop image
+@prop transition
+@prop fit
+@prop class: className
+@prop ...restProps
+-->

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

@@ -0,0 +1,15 @@
+import type { SlideProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L515)
+ * ## Props
+ * @prop image
+ * @prop transition
+ * @prop fit
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const Slide: import("svelte").Component<SlideProps, {}, "">;
+type Slide = ReturnType<typeof Slide>;
+export default Slide;

package/dist/carousel/Thumbnail.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { thumbnail } from "./theme";
+  import type { ThumbnailProps } from "..";
+  import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { selected, class: className, ...restProps }: ThumbnailProps = $props();
+
+  const theme = $derived(getTheme("thumbnail"));
+</script>
+
+<img {...restProps} class={thumbnail({ selected, class: clsx(theme, className) })} />
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L502)
+## Props
+@prop selected
+@prop class: className
+@prop ...restProps
+-->

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

@@ -0,0 +1,13 @@
+import type { ThumbnailProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L502)
+ * ## Props
+ * @prop selected
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const Thumbnail: import("svelte").Component<ThumbnailProps, {}, "">;
+type Thumbnail = ReturnType<typeof Thumbnail>;
+export default Thumbnail;

package/dist/carousel/Thumbnails.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { ThumbnailsProps } from "..";
+  import Thumbnail from "./Thumbnail.svelte";
+  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { thumbnails } from "./theme";
+
+  let { children, images = [], index = $bindable(), ariaLabel = "Click to view image", imgClass, throttleDelay = 650, class: className }: ThumbnailsProps = $props();
+
+  const theme = $derived(getTheme("thumbnails"));
+
+  // Initialize so the first click is never throttled
+  let lastClickedAt = -Infinity;
+
+  const btnClick = (newIndex: number) => {
+    const now = Date.now();
+    if (now - lastClickedAt < throttleDelay) {
+      console.warn("Thumbnail action throttled");
+      return;
+    }
+
+    lastClickedAt = now;
+    index = newIndex;
+  };
+
+  $effect(() => {
+    if (images.length > 0) {
+      index = (index + images.length) % images.length;
+    }
+  });
+</script>
+
+<div class={thumbnails({ class: clsx(theme, className) })}>
+  {#each images as image, idx (image.src || idx)}
+    {@const selected = index === idx}
+    <button onclick={() => btnClick(idx)} aria-label={ariaLabel} aria-current={selected ? "true" : undefined}>
+      {#if children}
+        {@render children({ image, selected, imgClass: clsx(imgClass), Thumbnail })}
+      {:else}
+        <Thumbnail {...image} {selected} class={clsx(imgClass)} />
+      {/if}
+    </button>
+  {/each}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L506)
+## Props
+@prop children
+@prop images = []
+@prop index = $bindable()
+@prop ariaLabel = "Click to view image"
+@prop imgClass
+@prop throttleDelay = 650
+@prop class: className
+-->

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

@@ -0,0 +1,17 @@
+import type { ThumbnailsProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L506)
+ * ## Props
+ * @prop children
+ * @prop images = []
+ * @prop index = $bindable()
+ * @prop ariaLabel = "Click to view image"
+ * @prop imgClass
+ * @prop throttleDelay = 650
+ * @prop class: className
+ */
+declare const Thumbnails: import("svelte").Component<ThumbnailsProps, {}, "index">;
+type Thumbnails = ReturnType<typeof Thumbnails>;
+export default Thumbnails;

package/dist/carousel/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Carousel } from "./Carousel.svelte";
+export { default as ControlButton } from "./ControlButton.svelte";
+export { default as Controls } from "./Controls.svelte";
+export { default as CarouselIndicators } from "./CarouselIndicators.svelte";
+export { carousel, carouselIndicators, controlButton, thumbnails, thumbnail, slide } from "./theme";
+export { default as Thumbnails } from "./Thumbnails.svelte";
+export { default as Slide } from "./Slide.svelte";
+export { default as Thumbnail } from "./Thumbnail.svelte";

package/dist/carousel/index.js

@@ -0,0 +1,8 @@
+export { default as Carousel } from "./Carousel.svelte";
+export { default as ControlButton } from "./ControlButton.svelte";
+export { default as Controls } from "./Controls.svelte";
+export { default as CarouselIndicators } from "./CarouselIndicators.svelte";
+export { carousel, carouselIndicators, controlButton, thumbnails, thumbnail, slide } from "./theme";
+export { default as Thumbnails } from "./Thumbnails.svelte";
+export { default as Slide } from "./Slide.svelte";
+export { default as Thumbnail } from "./Thumbnail.svelte";