flowbite-svelte 1.10.5 → 1.10.7

package/dist/buttons/GradientButton.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import { gradientButton, type GradientButtonTheme } from ".";
-  import { type GradientButtonProps, type SizeType, Button, cn } from "..";
+  import clsx from "clsx";
+  import { type GradientButtonProps, type SizeType, Button } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   const group: SizeType = getContext("group");
@@ -14,13 +15,13 @@
 </script>
 
 {#if outline}
-  <div class={cn(base(), className, (theme as GradientButtonTheme)?.base)}>
-    <Button {...restProps} class={cn(outlineWrapper(), btnClass, (theme as GradientButtonTheme)?.outlineWrapper)} {disabled} {href} {size}>
+  <div class={base({ class: clsx((theme as GradientButtonTheme)?.base, className) })}>
+    <Button {...restProps} class={outlineWrapper({ class: clsx((theme as GradientButtonTheme)?.outlineWrapper, btnClass) })} {disabled} {href} {size}>
       {@render children?.()}
     </Button>
   </div>
 {:else}
-  <Button {...restProps} class={cn(base(), className, (theme as GradientButtonTheme)?.base)} {disabled} {href} {size}>
+  <Button {...restProps} class={base({ class: clsx((theme as GradientButtonTheme)?.base, className) })} {disabled} {href} {size}>
     {@render children?.()}
   </Button>
 {/if}
@@ -29,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L347)
+[GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L330)
 ## Props
 @prop children
 @prop outline

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

@@ -2,7 +2,7 @@ import { type GradientButtonProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L347)
+ * [GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L330)
  * ## Props
  * @prop children
  * @prop outline

package/dist/buttons/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type ButtonVariants = VariantProps<typeof button>;
 export declare const button: import("tailwind-variants").TVReturnType<{
     color: {
@@ -703,6 +704,6 @@ export declare const gradientButton: import("tailwind-variants").TVReturnType<{
     outlineWrapper: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ButtonSlots = keyof typeof button.slots;
-export type ButtonTheme = Partial<Record<ButtonSlots, string>>;
+export type ButtonTheme = Partial<Record<ButtonSlots, ClassValue>>;
 export type GradientButtonSlots = keyof typeof gradientButton.slots;
-export type GradientButtonTheme = Partial<Record<GradientButtonSlots, string>>;
+export type GradientButtonTheme = Partial<Record<GradientButtonSlots, ClassValue>>;

package/dist/card/Card.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type CardProps, cn } from "..";
+  import { type CardProps } from "..";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
   import { card, type CardTheme } from ".";
@@ -22,7 +22,7 @@
 
 {#snippet childSlot()}
   {#if img}
-    <img class={cn(image({ class: clsx(imgClass) }), (theme as CardTheme)?.image)} src={img} alt={img} />
+    <img class={image({ class: clsx((theme as CardTheme)?.image, imgClass) })} src={img} alt={img} />
     {@render children()}
   {:else}
     {@render children()}
@@ -30,11 +30,11 @@
 {/snippet}
 
 {#if restProps.href === undefined}
-  <div {...restProps} class={cn(base({ class: clsx(className) }), (theme as CardTheme)?.base)}>
+  <div {...restProps} class={base({ class: clsx((theme as CardTheme)?.base, className) })}>
     {@render childSlot()}
   </div>
 {:else}
-  <a {...restProps} class={cn(base({ class: clsx(className) }), (theme as CardTheme)?.base)}>
+  <a {...restProps} class={base({ class: clsx((theme as CardTheme)?.base, className) })}>
     {@render childSlot()}
   </a>
 {/if}
@@ -43,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L387)
+[CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L370)
 ## Props
 @prop children
 @prop color = "gray"

package/dist/card/Card.svelte.d.ts

@@ -2,7 +2,7 @@ import { type CardProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L387)
+ * [CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L370)
  * ## Props
  * @prop children
  * @prop color = "gray"

package/dist/card/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type CardVariants = VariantProps<typeof card>;
 export declare const card: import("tailwind-variants").TVReturnType<{
     size: {
@@ -392,4 +393,4 @@ export declare const card: import("tailwind-variants").TVReturnType<{
     image: string;
 }, undefined, unknown, unknown, undefined>>;
 export type CardSlots = keyof typeof card.slots;
-export type CardTheme = Partial<Record<CardSlots, string>>;
+export type CardTheme = Partial<Record<CardSlots, ClassValue>>;

package/dist/carousel/Carousel.svelte

@@ -3,7 +3,8 @@
   import { writable } from "svelte/store";
   import { canChangeSlide } from "./CarouselSlide";
   import { carousel } from "./theme";
-  import { type CarouselProps, type State, Slide, cn } from "..";
+  import clsx from "clsx";
+  import { type CarouselProps, type State, Slide } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   const SLIDE_DURATION_RATIO = 0.25;
@@ -168,12 +169,12 @@
 
 <!-- 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} class={cn("relative", divClass)} onmousedown={onDragStart} ontouchstart={onDragStart} onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0">
-  <div {...restProps} class={cn(carousel(), activeDragGesture === undefined ? "transition-transform" : "", className, theme)} {@attach loop}>
+<div bind:this={carouselDiv} class={clsx("relative", divClass)} onmousedown={onDragStart} ontouchstart={onDragStart} onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0">
+  <div {...restProps} class={carousel({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", theme, className) })} {@attach loop}>
     {#if slide}
       {@render slide({ index, Slide })}
     {:else}
-      <Slide image={images[index]} class={cn(imgClass)} {transition} />
+      <Slide image={images[index]} class={clsx(imgClass)} {transition} />
     {/if}
   </div>
   {@render children?.(index)}
@@ -183,7 +184,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L405)
+[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L388)
 ## Props
 @prop children
 @prop slide

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

@@ -2,7 +2,7 @@ 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#L405)
+ * [CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L388)
  * ## Props
  * @prop children
  * @prop slide

package/dist/carousel/CarouselIndicators.svelte

@@ -2,7 +2,8 @@
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
   import { carouselIndicators, type CarouselIndicatorsTheme } from "./theme";
-  import { Indicator, type IndicatorsProps, type State, cn } from "..";
+  import clsx from "clsx";
+  import { Indicator, type IndicatorsProps, type State } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, activeClass, inactiveClass, position = "bottom", class: className, ...restProps }: IndicatorsProps = $props();
@@ -26,14 +27,14 @@
   }
 </script>
 
-<div class={cn(base(), className, (theme as CarouselIndicatorsTheme)?.base)} {...restProps}>
+<div class={base({ class: clsx((theme as CarouselIndicatorsTheme)?.base, className) })} {...restProps}>
   {#each $state.images as _, idx}
     {@const selected = $state.index === idx}
     <button onclick={() => goToIndex(idx)}>
       {#if children}
         {@render children({ selected, index: idx })}
       {:else}
-        <Indicator class={cn(indicator({ selected }), selected ? activeClass : inactiveClass, (theme as CarouselIndicatorsTheme)?.indicator)} />
+        <Indicator class={indicator({ selected, class: clsx(selected ? activeClass : inactiveClass, (theme as CarouselIndicatorsTheme)?.indicator) })} />
       {/if}
     </button>
   {/each}
@@ -43,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L419)
+[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L402)
 ## Props
 @prop children
 @prop activeClass

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

@@ -2,7 +2,7 @@ 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#L419)
+ * [IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L402)
  * ## Props
  * @prop children
  * @prop activeClass

package/dist/carousel/ControlButton.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
-  import { controlButton } from "./theme";
-  import { type ControlButtonProps, cn } from "..";
+  import { controlButton, type ControlButtonTheme } 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 } = controlButton({ forward });
+
   const theme = getTheme("carouselButton");
 </script>
 
-<button type="button" class={cn(controlButton({ forward }), className, theme)} {...restProps}>
+<button type="button" class={base({ class: clsx(className, theme) })} {...restProps}>
   {#if children}
     {@render children()}
   {:else}
-    <span class={cn("inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-hidden sm:h-10 sm:w-10 dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70", spanClass)}>
+    <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" />
@@ -33,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L426)
+[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L409)
 ## Props
 @prop children
 @prop forward

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

@@ -2,7 +2,7 @@ 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#L426)
+ * [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L409)
  * ## Props
  * @prop children
  * @prop forward

package/dist/carousel/Controls.svelte

@@ -2,7 +2,8 @@
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
   import { canChangeSlide } from "./CarouselSlide";
-  import { type State, type ControlsProps, ControlButton, cn } from "..";
+  import clsx from "clsx";
+  import { type State, type ControlsProps, ControlButton } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: ControlsProps = $props();
@@ -45,15 +46,15 @@
 {#if children}
   {@render children(changeSlide)}
 {:else}
-  <ControlButton name="Previous" forward={false} onclick={() => changeSlide(false)} class={cn(className, theme)} {...restProps} />
-  <ControlButton name="Next" forward={true} onclick={() => changeSlide(true)} class={cn(className, theme)} {...restProps} />
+  <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#L432)
+[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L415)
 ## Props
 @prop children
 @prop class: className

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

@@ -2,7 +2,7 @@ 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#L432)
+ * [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L415)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/carousel/Slide.svelte

@@ -3,7 +3,8 @@
   import type { Writable } from "svelte/store";
   import { fly } from "svelte/transition";
   import { slide } from "./theme";
-  import { type SlideProps, type State, cn } from "..";
+  import clsx from "clsx";
+  import { type SlideProps, type State } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   const state = getContext<Writable<State>>("state");
@@ -28,7 +29,7 @@
     duration: $state.slideDuration
   });
 
-  let imgClass = cn(slide(), className, theme);
+  let imgClass = slide({ class: clsx(theme, className) });
 </script>
 
 {#if transition}
@@ -45,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
+[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L432)
 ## Props
 @prop image
 @prop transition

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

@@ -2,7 +2,7 @@ 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#L449)
+ * [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L432)
  * ## Props
  * @prop image
  * @prop transition

package/dist/carousel/Thumbnail.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { thumbnail } from "./theme";
-  import { type ThumbnailProps, cn } from "..";
+  import { type ThumbnailProps } from "..";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -9,13 +9,13 @@
   const theme = getTheme("thumbnail");
 </script>
 
-<img {...restProps} class={cn(thumbnail({ selected, class: clsx(className) }), theme)} />
+<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#L436)
+[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L419)
 ## Props
 @prop selected
 @prop class: className

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

@@ -2,7 +2,7 @@ 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#L436)
+ * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L419)
  * ## Props
  * @prop selected
  * @prop class: className

package/dist/carousel/Thumbnails.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
   import { thumbnails } from "./theme";
-  import { type ThumbnailsProps, type State, Thumbnail, cn } from "..";
+  import { type ThumbnailsProps, type State, Thumbnail } from "..";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -50,12 +50,12 @@
   });
 </script>
 
-<div class={cn(thumbnails(), className, theme)}>
+<div class={thumbnails({ class: clsx(theme, className) })}>
   {#each images as image, idx}
     {@const selected = index === idx}
     <button onclick={() => btnClick(idx)} aria-label={ariaLabel}>
       {#if children}
-        {@render children({ image, selected, imgClass: cn(imgClass), Thumbnail })}
+        {@render children({ image, selected, imgClass: clsx(imgClass), Thumbnail })}
       {:else}
         <Thumbnail {...image} {selected} class={clsx(imgClass)} />
       {/if}
@@ -67,7 +67,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L440)
+[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L423)
 ## Props
 @prop children
 @prop images = []

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

@@ -2,7 +2,7 @@ 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#L440)
+ * [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L423)
  * ## Props
  * @prop children
  * @prop images = []

package/dist/carousel/theme.d.ts

@@ -1,7 +1,8 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 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 type CarouselTheme = string;
+export type CarouselTheme = ClassValue;
 export declare const carouselIndicators: import("tailwind-variants").TVReturnType<{
     selected: {
         true: {
@@ -73,26 +74,36 @@ export declare const carouselIndicators: import("tailwind-variants").TVReturnTyp
     indicator: string;
 }, undefined, unknown, unknown, undefined>>;
 export type CarouselIndicatorsSlots = keyof typeof carouselIndicators.slots;
-export type CarouselIndicatorsTheme = Partial<Record<CarouselIndicatorsSlots, string>>;
+export type CarouselIndicatorsTheme = Partial<Record<CarouselIndicatorsSlots, ClassValue>>;
 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", {
+}, {
+    base: string;
+    span: string;
+}, undefined, {
     forward: {
         true: string;
         false: string;
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, {
+    base: string;
+    span: string;
+}, 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 type ControlButtonTheme = string;
+}, {
+    base: string;
+    span: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ControlButtonSlots = keyof typeof controlButton.slots;
+export type ControlButtonTheme = Partial<Record<ControlButtonSlots, ClassValue>>;
 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 type ThumbnailsTheme = string;
+export type ThumbnailsTheme = ClassValue;
 export declare const thumbnail: import("tailwind-variants").TVReturnType<{
     selected: {
         true: string;
@@ -109,6 +120,6 @@ export declare const thumbnail: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
-export type ThumbnailTheme = string;
+export type ThumbnailTheme = ClassValue;
 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>>;
-export type SlideTheme = string;
+export type SlideTheme = ClassValue;

package/dist/carousel/theme.js

@@ -23,7 +23,10 @@ export const carouselIndicators = tv({
     }
 });
 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",
+    slots: {
+        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",
+        span: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-white group-focus:outline-hidden sm:h-10 sm:w-10 dark:bg-gray-800/30 dark:group-hover:bg-gray-800/60 dark:group-focus:ring-gray-800/70"
+    },
     variants: {
         forward: {
             true: "end-0",

package/dist/clipboard/Clipboard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Button from "../buttons/Button.svelte";
   import clsx from "clsx";
-  import { type ClipboardProps, cn } from "..";
+  import { type ClipboardProps } from "..";
   import { clipboard } from "./theme";
   import type { MouseEventHandler } from "svelte/elements";
   import { getTheme } from "../theme/themeUtils";
@@ -38,7 +38,7 @@
   };
 </script>
 
-<Button onclick={copyToClipboard} {...restProps} class={cn(clipboard({ embedded, class: clsx(className) }), theme)}>
+<Button onclick={copyToClipboard} {...restProps} class={clipboard({ embedded, class: clsx(theme, className) })}>
   {@render children?.(success)}
 </Button>
 
@@ -46,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L461)
+[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L444)
 ## Props
 @prop children
 @prop embedded = false

package/dist/clipboard/Clipboard.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ClipboardProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L461)
+ * [ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L444)
  * ## Props
  * @prop children
  * @prop embedded = false

package/dist/clipboard/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type ClipboardVariants = VariantProps<typeof clipboard>;
 export declare const clipboard: import("tailwind-variants").TVReturnType<{
     embedded: {
@@ -16,4 +17,4 @@ export declare const clipboard: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "gap-2", unknown, unknown, undefined>>;
-export type ClipboardTheme = string;
+export type ClipboardTheme = ClassValue;

package/dist/darkmode/DarkMode.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { darkmode } from ".";
-  import { type DarkmodeProps, cn } from "..";
+  import clsx from "clsx";
+  import { type DarkmodeProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   // const THEME_PREFERENCE_KEY = 'color-theme';
@@ -33,7 +34,7 @@
   </script>
 </svelte:head>
 
-<button onclick={toggleTheme} aria-label={ariaLabel} type="button" {...restProps} class={cn(darkmode(), className, theme)} tabindex={0}>
+<button onclick={toggleTheme} aria-label={ariaLabel} type="button" {...restProps} class={darkmode({ class: clsx(theme, className) })} tabindex={0}>
   <span class="hidden dark:block">
     {#if lightIcon}
       {@render lightIcon()}
@@ -63,7 +64,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L470)
+[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L453)
 ## Props
 @prop class: className
 @prop lightIcon

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -2,7 +2,7 @@ import { type DarkmodeProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L470)
+ * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L453)
  * ## Props
  * @prop class: className
  * @prop lightIcon

package/dist/darkmode/theme.d.ts

@@ -1,2 +1,3 @@
+import type { ClassValue } from "svelte/elements";
 export declare const darkmode: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5", unknown, unknown, undefined>>;
-export type DarkModeTheme = string;
+export type DarkModeTheme = ClassValue;