flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/carousel/Indicators.svelte

@@ -1,18 +1,26 @@
-<script>import Indicator from "../indicators/Indicator.svelte";
-import { getContext } from "svelte";
-import { twMerge } from "tailwind-merge";
-export let activeClass = "opacity-100";
-export let inactiveClass = "opacity-60";
-const state = getContext("state");
+<script lang="ts">
+  import Indicator from "../indicator/Indicator.svelte";
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { indicators } from "./theme";
+  import type { IndicatorsProps as Props, State } from "./type";
+  import clsx from "clsx";
+
+  let { children, activeClass, inactiveClass, class: className, ...restProps }: Props = $props();
+
+  const state = getContext<Writable<State>>("state");
+  const { base, indicator } = indicators();
 </script>
 
-<div class={twMerge('flex absolute bottom-5 start-1/2 z-30 space-x-3 rtl:space-x-reverse -translate-x-1/2 rtl:translate-x-1/2', $$props.class)}>
+<div class={base({ class: clsx(className) })} {...restProps}>
   {#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 onclick={() => ($state.index = idx)}>
+      {#if children}
+        {@render children({ selected, index: idx })}
+      {:else}
+        <Indicator class={indicator({ selected, class: selected ? activeClass : inactiveClass })} />
+      {/if}
     </button>
   {/each}
 </div>
@@ -21,6 +29,8 @@ const state = getContext("state");
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let activeClass = 'opacity-100';
-@prop export let inactiveClass = 'opacity-60';
+@props: children: any;
+@props:activeClass: any;
+@props:inactiveClass: any;
+@props:class: string;
 -->

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

@@ -1,31 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
-import Indicator from '../indicators/Indicator.svelte';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        activeClass?: string | undefined;
-        inactiveClass?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {
-            Indicator: typeof Indicator;
-            selected: any;
-            index: any;
-        };
-    };
+    slots: {};
 };
-export type IndicatorsProps = typeof __propDef.props;
+type IndicatorsProps_ = typeof __propDef.props;
+export { IndicatorsProps_ as IndicatorsProps };
 export type IndicatorsEvents = typeof __propDef.events;
 export type IndicatorsSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let activeClass = 'opacity-100';
- * @prop export let inactiveClass = 'opacity-60';
+ * @props: children: any;
+ * @props:activeClass: any;
+ * @props:inactiveClass: any;
+ * @props:class: string;
  */
-export default class Indicators extends SvelteComponentTyped<IndicatorsProps, IndicatorsEvents, IndicatorsSlots> {
+export default class Indicators extends SvelteComponentTyped<IndicatorsProps_, IndicatorsEvents, IndicatorsSlots> {
 }
-export {};

package/dist/carousel/Slide.svelte

@@ -1,33 +1,41 @@
-<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 = null;
-$: 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 lang="ts">
+  import clsx from "clsx";
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { fly } from "svelte/transition";
+  import { slide } from "./theme";
+  import type { SlideProps as Props, State } from "./type";
+
+  const state = getContext<Writable<State>>("state");
+
+  let { image, transition, class: className, ...restProps }: Props = $props();
+
+  let transitionSlideIn = $derived({
+    x: $state.forward ? "100%" : "-100%",
+    opacity: 1,
+    width: "100%",
+    height: "100%",
+    duration: $state.slideDuration
+  });
+
+  let transitionSlideOut = $derived({
+    x: $state.forward ? "-100%" : "100%",
+    opacity: 0.9,
+    width: "100%",
+    height: "100%",
+    duration: $state.slideDuration
+  });
+
+  let imgClass = $derived(slide({ class: clsx(className) }));
 </script>
 
 {#if transition}
   {#key image}
-    <img alt="..." {...image} transition:transition={{}} {...$$restProps} class={imgClass} />
+    <img alt="..." {...image} transition:transition={{}} {...restProps} class={imgClass} />
   {/key}
 {:else}
   {#key image}
-    <img alt="..." {...image} {...$$restProps} out:fly={transitionSlideOut} in:fly={transitionSlideIn} class={imgClass} />
+    <img alt="..." {...image} {...restProps} out:fly={transitionSlideOut} in:fly={transitionSlideIn} class={imgClass} />
   {/key}
 {/if}
 
@@ -35,6 +43,7 @@ $: imgClass = twMerge("absolute block w-full! h-full object-cover", $$props.clas
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let image: HTMLImgAttributes;
-@prop export let transition: TransitionFunc | null = null;
+@props: image: any;
+@props:transition: any;
+@props:class: string;
 -->

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

@@ -1,27 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLImgAttributes } from 'svelte/elements';
-import { type TransitionConfig } from 'svelte/transition';
-import type { ParamsType } from '../types';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        image: HTMLImgAttributes;
-        transition?: (((node: HTMLElement, params: ParamsType) => TransitionConfig) | null) | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type SlideProps = typeof __propDef.props;
+type SlideProps_ = typeof __propDef.props;
+export { SlideProps_ as SlideProps };
 export type SlideEvents = typeof __propDef.events;
 export type SlideSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let image: HTMLImgAttributes;
- * @prop export let transition: TransitionFunc | null = null;
+ * @props: image: any;
+ * @props:transition: any;
+ * @props:class: string;
  */
-export default class Slide extends SvelteComponentTyped<SlideProps, SlideEvents, SlideSlots> {
+export default class Slide extends SvelteComponentTyped<SlideProps_, SlideEvents, SlideSlots> {
 }
-export {};

package/dist/carousel/Thumbnail.svelte

@@ -1,18 +1,17 @@
-<script>import { twMerge } from "tailwind-merge";
-export let selected = false;
-export let alt = "";
-export let activeClass = "opacity-100";
-export let inactiveClass = "opacity-60";
+<script lang="ts">
+  import clsx from "clsx";
+  import { thumbnail } from "./theme";
+  import type { ThumbnailProps as Props } from "./type";
+
+  let { selected, class: className, ...restProps }: Props = $props();
 </script>
 
-<img {...$$restProps} {alt} class={twMerge(selected ? activeClass : inactiveClass, $$props.class)} />
+<img {...restProps} class={thumbnail({ selected, class: clsx(className) })} />
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let selected: boolean = false;
-@prop export let alt: string | undefined | null = '';
-@prop export let activeClass: string = 'opacity-100';
-@prop export let inactiveClass: string = 'opacity-60';
+@props: selected: any;
+@props:class: string;
 -->

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

@@ -1,28 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLImgAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLImgAttributes & {
-        selected?: boolean;
-        alt?: string | undefined | null;
-        activeClass?: string;
-        inactiveClass?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type ThumbnailProps = typeof __propDef.props;
+type ThumbnailProps_ = typeof __propDef.props;
+export { ThumbnailProps_ as ThumbnailProps };
 export type ThumbnailEvents = typeof __propDef.events;
 export type ThumbnailSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let selected: boolean = false;
- * @prop export let alt: string | undefined | null = '';
- * @prop export let activeClass: string = 'opacity-100';
- * @prop export let inactiveClass: string = 'opacity-60';
+ * @props: selected: any;
+ * @props:class: string;
  */
-export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
+export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps_, ThumbnailEvents, ThumbnailSlots> {
 }
-export {};

package/dist/carousel/Thumbnails.svelte

@@ -1,32 +1,40 @@
-<script>import { twMerge } from "tailwind-merge";
-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;
-let lastClickedAt = /* @__PURE__ */ new Date();
-const btnClick = (idx) => {
-  if ((/* @__PURE__ */ new Date()).getTime() - lastClickedAt.getTime() < throttleDelay) {
-    console.warn("Thumbnail action throttled");
-    return;
-  }
-  if (idx === index) {
-    return;
-  }
-  index = idx;
-  lastClickedAt = /* @__PURE__ */ new Date();
-};
-$: index = (index + images.length) % images.length;
+<script lang="ts">
+  import clsx from "clsx";
+  import Thumbnail from "./Thumbnail.svelte";
+  import { thumbnails } from "./theme";
+  import type { ThumbnailsProps as Props } from "./type";
+
+  let { children, images = [], index = $bindable(), ariaLabel = "Click to view image", imgClass, throttleDelay = 650, class: className }: Props = $props();
+
+  let lastClickedAt = new Date();
+
+  const btnClick = (idx: number) => {
+    if (new Date().getTime() - lastClickedAt.getTime() < throttleDelay) {
+      console.warn("Thumbnail action throttled");
+      return;
+    }
+    if (idx === index) {
+      return;
+    }
+
+    index = idx;
+    lastClickedAt = new Date();
+  };
+
+  $effect(() => {
+    index = (index + images.length) % images.length;
+  });
 </script>
 
-<div class={twMerge('flex flex-row justify-center bg-gray-100 w-full', $$props.class)}>
+<div class={thumbnails({ class: clsx(className) })}>
   {#each images as image, idx}
     {@const selected = index === idx}
-    <button on:click={() => btnClick(idx)} aria-label={ariaLabel}>
-      <slot {Thumbnail} {image} {selected} {imgClass}>
-        <Thumbnail {...image} {selected} class={imgClass} />
-      </slot>
+    <button onclick={() => btnClick(idx)} aria-label={ariaLabel}>
+      {#if children}
+        {@render children({ image, selected, imgClass, Thumbnail })}
+      {:else}
+        <Thumbnail {...image} class={imgClass} />
+      {/if}
     </button>
   {/each}
 </div>
@@ -35,9 +43,11 @@ $: index = (index + images.length) % images.length;
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@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;
+@props: children: any;
+@props:images: any = [];
+@props:index: any = $bindable();
+@props:ariaLabel: any = "Click to view image";
+@props:imgClass: any;
+@props:throttleDelay: any = 650;
+@props:class: string;
 -->

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

@@ -1,39 +1,25 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLImgAttributes } from 'svelte/elements';
-import Thumbnail from './Thumbnail.svelte';
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        images?: HTMLImgAttributes[] | undefined;
-        index?: number | undefined;
-        ariaLabel?: string | undefined;
-        imgClass?: string | undefined;
-        throttleDelay?: number | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {
-            Thumbnail: typeof Thumbnail;
-            image: HTMLImgAttributes;
-            selected: any;
-            imgClass: string;
-        };
-    };
+    slots: {};
 };
-export type ThumbnailsProps = typeof __propDef.props;
+type ThumbnailsProps_ = typeof __propDef.props;
+export { ThumbnailsProps_ as ThumbnailsProps };
 export type ThumbnailsEvents = typeof __propDef.events;
 export type ThumbnailsSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @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;
+ * @props: children: any;
+ * @props:images: any = [];
+ * @props:index: any = $bindable();
+ * @props:ariaLabel: any = "Click to view image";
+ * @props:imgClass: any;
+ * @props:throttleDelay: any = 650;
+ * @props:class: string;
  */
-export default class Thumbnails extends SvelteComponentTyped<ThumbnailsProps, ThumbnailsEvents, ThumbnailsSlots> {
+export default class Thumbnails extends SvelteComponentTyped<ThumbnailsProps_, ThumbnailsEvents, ThumbnailsSlots> {
 }
-export {};

package/dist/carousel/index.d.ts

@@ -0,0 +1,8 @@
+import Carousel from "./Carousel.svelte";
+import ControlButton from "./ControlButton.svelte";
+import Controls from "./Controls.svelte";
+import Indicators from "./Indicators.svelte";
+import { carousel } from "./theme";
+import Thumbnails from "./Thumbnails.svelte";
+import type { CarouselProps } from "./type";
+export { Carousel, carousel, ControlButton, Controls, Indicators, Thumbnails, type CarouselProps };

package/dist/carousel/index.js

@@ -0,0 +1,7 @@
+import Carousel from "./Carousel.svelte";
+import ControlButton from "./ControlButton.svelte";
+import Controls from "./Controls.svelte";
+import Indicators from "./Indicators.svelte";
+import { carousel } from "./theme";
+import Thumbnails from "./Thumbnails.svelte";
+export { Carousel, carousel, ControlButton, Controls, Indicators, Thumbnails };

package/dist/carousel/theme.d.ts

@@ -0,0 +1,86 @@
+import { type VariantProps } from "tailwind-variants";
+export type CarouselVariants = VariantProps<typeof carousel>;
+export declare const carousel: import("tailwind-variants").TVReturnType<{}, undefined, "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96", unknown, unknown, undefined>>;
+export declare const indicators: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            indicator: string;
+        };
+        false: {
+            indicator: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+}, undefined, {
+    selected: {
+        true: {
+            indicator: string;
+        };
+        false: {
+            indicator: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+}, import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            indicator: string;
+        };
+        false: {
+            indicator: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const controlButton: import("tailwind-variants").TVReturnType<{
+    forward: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-hidden text-white dark:text-gray-300", {
+    forward: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    forward: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-hidden text-white dark:text-gray-300", unknown, unknown, undefined>>;
+export declare const thumbnails: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex flex-row justify-center bg-gray-100 w-full", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex flex-row justify-center bg-gray-100 w-full", unknown, unknown, undefined>>;
+export declare const thumbnail: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            indicator: string;
+        };
+        false: {
+            indicator: string;
+        };
+    };
+}, undefined, "", {
+    selected: {
+        true: {
+            indicator: string;
+        };
+        false: {
+            indicator: string;
+        };
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            indicator: string;
+        };
+        false: {
+            indicator: string;
+        };
+    };
+}, undefined, "", unknown, unknown, undefined>>;
+export declare const slide: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "absolute block w-full! h-full object-cover", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "absolute block w-full! h-full object-cover", unknown, unknown, undefined>>;

package/dist/carousel/theme.js

@@ -0,0 +1,47 @@
+import { select } from "../forms/select";
+import { tv } from "tailwind-variants";
+export const carousel = tv({
+    base: "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96",
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {}
+});
+export const indicators = tv({
+    slots: {
+        base: "absolute start-1/2 bottom-5 z-30 flex -translate-x-1/2 space-x-3 rtl:translate-x-1/2 rtl:space-x-reverse",
+        indicator: "bg-gray-100 hover:bg-gray-300"
+    },
+    variants: {
+        selected: {
+            true: { indicator: "opacity-100" },
+            false: { indicator: "opacity-60" }
+        }
+    }
+});
+export const controlButton = tv({
+    base: "flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-hidden text-white dark:text-gray-300",
+    variants: {
+        forward: {
+            true: "end-0",
+            false: "start-0"
+        }
+    }
+});
+export const thumbnails = tv({
+    base: "flex flex-row justify-center bg-gray-100 w-full"
+});
+export const thumbnail = tv({
+    base: "",
+    variants: {
+        selected: {
+            true: { indicator: "opacity-100" },
+            false: { indicator: "opacity-60" }
+        }
+    },
+    defaultVariants: {
+        selected: false
+    }
+});
+export const slide = tv({
+    base: "absolute block w-full! h-full object-cover"
+});

package/dist/carousel/type.d.ts

@@ -0,0 +1,62 @@
+import type { Component, Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLImgAttributes } from "svelte/elements";
+import type { CarouselVariants } from "./theme";
+import type { TransitionConfig } from "svelte/transition";
+import type { ParamsType } from "../types";
+import type Slide from "./Slide.svelte";
+export type State = {
+    images: HTMLImgAttributes[];
+    index: number;
+    lastSlideChange: Date;
+    slideDuration: number;
+    forward: boolean;
+};
+interface CarouselProps extends CarouselVariants, Omit<HTMLAttributes<HTMLDivElement>, "children" | "onchange"> {
+    children?: Snippet<[number]>;
+    slide?: Snippet<[{
+        index: number;
+        Slide: typeof Slide;
+    }]>;
+    images: HTMLImgAttributes[];
+    index: number;
+    slideDuration: number;
+    transition?: TransitionFunc;
+    duration: number;
+    disableSwipe: boolean;
+    imgClass: string;
+    onchange?: (x: HTMLImgAttributes) => {};
+}
+interface IndicatorsProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children?: Snippet<[{
+        selected: boolean;
+        index: number;
+    }]>;
+    activeClass?: string;
+    inactiveClass?: string;
+}
+interface ControlButtonProps extends HTMLButtonAttributes {
+    forward: boolean;
+    name: string;
+}
+interface ThumbnailProps extends HTMLImgAttributes {
+    selected?: boolean;
+}
+interface ThumbnailsProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children?: Snippet<[{
+        image: HTMLImgAttributes;
+        selected: boolean;
+        imgClass: string;
+        Thumbnail: Component;
+    }]>;
+    images: HTMLImgAttributes[];
+    index: number;
+    ariaLabel: string;
+    imgClass: string;
+    throttleDelay: number;
+}
+type TransitionFunc = (node: HTMLElement, params: ParamsType) => TransitionConfig;
+interface SlideProps extends HTMLImgAttributes {
+    image: HTMLImgAttributes;
+    transition?: TransitionFunc;
+}
+export type { CarouselProps, IndicatorsProps, ControlButtonProps, ThumbnailProps, ThumbnailsProps, SlideProps };

package/dist/carousel/type.js

@@ -0,0 +1 @@
+export {};

package/dist/chart/Chart.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { ApexOptions } from "apexcharts";
+  import type ApexCharts from "apexcharts";
+  import "./chart.css";
+  import { type ChartProps as Props } from ".";
+
+  let { options, class: classname }: Props = $props();
+
+  function initChart(node: HTMLElement, options: ApexOptions) {
+    let chart: ApexCharts;
+
+    async function asyncInitChart() {
+      const ApexCharts = (await import("apexcharts")).default;
+      chart = new ApexCharts(node, options);
+      chart.render();
+    }
+
+    asyncInitChart();
+
+    return {
+      update(options: ApexOptions) {
+        if (chart) {
+          chart.updateOptions(options);
+        }
+      },
+      destroy() {
+        if (chart) {
+          chart.destroy();
+        }
+      }
+    };
+  }
+</script>
+
+<div use:initChart={options} class={classname}></div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: options: any;
+@props:class: string;
+-->