flowbite-svelte 1.10.4 → 1.10.6

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}

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" />

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,8 +46,8 @@
 {#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}
 
 <!--

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}

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,7 +9,7 @@
   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

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}

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>
 

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()}

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;

package/dist/datepicker/Datepicker.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import clsx from "clsx";
   import { fade } from "svelte/transition";
-  import { Button, ToolbarButton, type DatepickerProps, cn } from "..";
+  import clsx from "clsx";
+  import { Button, ToolbarButton, type DatepickerProps } from "..";
   import { datepicker, type DatepickerTheme } from "./theme";
   import { parse, isValid, addDays, startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameDay, isWithinInterval } from "date-fns";
   import { getTheme } from "../theme/themeUtils";
@@ -274,8 +274,8 @@
 <div bind:this={datepickerContainerElement} class={["relative", inline && "inline-block"]}>
   {#if !inline}
     <div class="relative">
-      <input bind:this={inputElement} type="text" class={cn(input({ color }), inputClass, (theme as DatepickerTheme)?.input)} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} oninput={handleInputChangeWithDateFns} onkeydown={handleInputKeydown} {disabled} {required} {inputmode} aria-haspopup="dialog" />
-      <button type="button" class={cn(button({ class: clsx(classes?.button) }), btnClass, (theme as DatepickerTheme)?.button)} onclick={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? "Close date picker" : "Open date picker"}>
+      <input bind:this={inputElement} type="text" class={input({ color, class: clsx((theme as DatepickerTheme)?.input, inputClass) })} {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} onfocus={() => (isOpen = true)} oninput={handleInputChangeWithDateFns} onkeydown={handleInputKeydown} {disabled} {required} {inputmode} aria-haspopup="dialog" />
+      <button type="button" class={button({ class: clsx(btnClass, (theme as DatepickerTheme)?.button, classes?.button) })} onclick={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? "Close date picker" : "Open date picker"}>
         <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
           <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"></path>
         </svg>
@@ -284,23 +284,30 @@
   {/if}
 
   {#if isOpen || inline}
-    <div bind:this={calendarRef} id="datepicker-dropdown" class={cn(base({ inline, class: clsx(classes?.base) }), className, (theme as DatepickerTheme)?.base)} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
+    <div bind:this={calendarRef} id="datepicker-dropdown" class={base({ inline, class: clsx((theme as DatepickerTheme)?.base, classes?.base, className) })} transition:fade={{ duration: 100 }} role="dialog" aria-label="Calendar">
       {#if title}
-        <h2 class={cn(titleVariant({ class: clsx(classes?.titleVariant) }), (theme as DatepickerTheme)?.titleVariant)}>{title}</h2>
+        <h2 class={titleVariant({ class: clsx((theme as DatepickerTheme)?.titleVariant, classes?.titleVariant) })}>{title}</h2>
       {/if}
 
       {#if showMonthSelector}
         <!-- Month/Year Selector View -->
-        <div class={cn(nav({ class: clsx(classes?.nav) }), (theme as DatepickerTheme)?.nav)}>
+        <div class={nav({ class: clsx((theme as DatepickerTheme)?.nav, classes?.nav) })}>
           {@render yearNavButton(false)}
-          <h3 class={cn(polite({ class: clsx(classes?.polite) }), (theme as DatepickerTheme)?.polite)} aria-live="polite">
+          <h3 class={polite({ class: clsx((theme as DatepickerTheme)?.polite, classes?.polite) })} aria-live="polite">
             {currentMonth.getFullYear()}
           </h3>
           {@render yearNavButton(true)}
         </div>
         <div class="grid grid-cols-4 gap-2 p-4">
           {#each monthNames as month, index}
-            <Button type="button" color={monthColor} class={cn(monthButton(), currentMonth.getMonth() === index ? clsx(monthBtnSelected) : clsx(monthBtn), clsx(classes?.monthButton), (theme as DatepickerTheme)?.monthButton)} onclick={(event: MouseEvent) => selectMonth(index, event)}>
+            <Button
+              type="button"
+              color={monthColor}
+              class={monthButton({
+                class: clsx(currentMonth.getMonth() === index ? monthBtnSelected : monthBtn, classes?.monthButton, (theme as DatepickerTheme)?.monthButton)
+              })}
+              onclick={(event: MouseEvent) => selectMonth(index, event)}
+            >
               {month}
             </Button>
           {/each}
@@ -310,14 +317,14 @@
         <div class={nav({ class: clsx(classes?.nav) })}>
           {@render navButton(false)}
           <!-- MODIFIED: Use translationLocale for month/year display -->
-          <Button type="button" class={cn(polite({ class: clsx(classes?.polite) }), "cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700")} aria-live="polite" onclick={(event: MouseEvent) => toggleMonthSelector(event)}>
+          <Button type="button" class={polite({ class: clsx("cursor-pointer rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700", classes?.polite) })} aria-live="polite" onclick={(event: MouseEvent) => toggleMonthSelector(event)}>
             {currentMonth.toLocaleString(translationLocale, { month: "long", year: "numeric" })}
           </Button>
           {@render navButton(true)}
         </div>
-        <div class={cn(grid({ class: clsx(classes?.grid) }), (theme as DatepickerTheme)?.grid)} role="grid">
+        <div class={grid({ class: clsx((theme as DatepickerTheme)?.grid, classes?.grid) })} role="grid">
           {#each weekdays as day}
-            <div class={cn(columnHeader({ class: clsx(classes?.columnHeader) }), (theme as DatepickerTheme)?.columnHeader)} role="columnheader">{day}</div>
+            <div class={columnHeader({ class: clsx((theme as DatepickerTheme)?.columnHeader, classes?.columnHeader) })} role="columnheader">{day}</div>
           {/each}
           {#each daysInMonth as day}
             {@const current = day.getMonth() !== currentMonth.getMonth()}
@@ -325,16 +332,13 @@
             <Button
               type="button"
               color={isSelected(day) ? color : "alternative"}
-              class={cn(
-                dayButton({
-                  current,
-                  today: isToday(day),
-                  color: isInRange(day) ? color : undefined,
-                  unavailable: !available,
-                  class: clsx(classes?.dayButton, !available && "cursor-not-allowed opacity-50")
-                }),
-                (theme as DatepickerTheme)?.dayButton
-              )}
+              class={dayButton({
+                current,
+                today: isToday(day),
+                color: isInRange(day) ? color : undefined,
+                unavailable: !available,
+                class: clsx((theme as DatepickerTheme)?.dayButton, classes?.dayButton, !available && "cursor-not-allowed opacity-50")
+              })}
               onclick={() => handleDaySelect(day)}
               onkeydown={handleCalendarKeydown}
               aria-label={day.toLocaleDateString(translationLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}
@@ -350,7 +354,7 @@
       {/if}
 
       {#if showActionButtons && !showMonthSelector}
-        <div class={cn(actionButtons({ class: clsx(classes?.actionButtons) }), (theme as DatepickerTheme)?.actionButtons)}>
+        <div class={actionButtons({ class: clsx((theme as DatepickerTheme)?.actionButtons, classes?.actionButtons) })}>
           <Button onclick={() => handleDaySelect(new Date())} {color} size="sm" disabled={!isDateAvailable(new Date())}>Today</Button>
           <Button onclick={handleClear} color="red" size="sm">Clear</Button>
           <Button onclick={handleApply} {color} size="sm">Apply</Button>

package/dist/datepicker/theme.d.ts

@@ -389,4 +389,4 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
     monthButton: string;
 }, undefined, unknown, unknown, undefined>>;
 export type DatepickerSlots = keyof typeof datepicker.slots;
-export type DatepickerTheme = Partial<Record<DatepickerSlots, string>>;
+export type DatepickerTheme = Partial<Record<DatepickerSlots, ClassValue>>;

package/dist/drawer/Drawer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { type ParamsType, type DrawerProps, trapFocus, cn } from "..";
+  import { type ParamsType, type DrawerProps, trapFocus } from "..";
+  import clsx from "clsx";
   import { fly } from "svelte/transition";
   import { sineIn } from "svelte/easing";
   import { drawer, type DrawerTheme } from ".";
@@ -30,8 +31,8 @@
 <svelte:window bind:innerWidth bind:innerHeight />
 
 {#if !hidden}
-  <div role="presentation" class={cn(backdropCls(), backdropClass, (theme as DrawerTheme)?.backdrop)} onclick={activateClickOutside ? closeDrawer : undefined} style={bodyScrolling ? "pointer-events: none;" : ""}></div>
-  <div use:trapFocus={{ onEscape: closeDrawer }} {...restProps} class={cn(base(), className, (theme as DrawerTheme)?.base)} transition:transitionType={transitionParams ? transitionParams : (transition_params as ParamsType)} tabindex="-1">
+  <div role="presentation" class={backdropCls({ class: clsx((theme as DrawerTheme)?.backdrop, backdropClass) })} onclick={activateClickOutside ? closeDrawer : undefined} style={bodyScrolling ? "pointer-events: none;" : ""}></div>
+  <div use:trapFocus={{ onEscape: closeDrawer }} {...restProps} class={base({ class: clsx((theme as DrawerTheme)?.base, className) })} transition:transitionType={transitionParams ? transitionParams : (transition_params as ParamsType)} tabindex="-1">
     {@render children?.()}
   </div>
 {/if}

package/dist/drawer/Drawerhead.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { drawerhead, type DrawerHeadTheme } from ".";
-  import { type DrawerheadProps, cn } from "..";
+  import clsx from "clsx";
+  import { type DrawerheadProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { closeIcon, children, buttonClass, svgClass, class: className, ...restProps }: DrawerheadProps = $props();
@@ -10,15 +11,15 @@
   const { base, button, svg } = $derived(drawerhead());
 </script>
 
-<div class={cn(base(), className, (theme as DrawerHeadTheme)?.base)}>
+<div class={base({ class: clsx((theme as DrawerHeadTheme)?.base, className) })}>
   {#if children}
     {@render children()}
   {/if}
   {#if closeIcon}
     {@render closeIcon()}
   {:else}
-    <button type="button" {...restProps} class={cn(button(), buttonClass, (theme as DrawerHeadTheme)?.button)}>
-      <svg class={cn(svg(), svgClass, (theme as DrawerHeadTheme)?.svg)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+    <button type="button" {...restProps} class={button({ class: clsx((theme as DrawerHeadTheme)?.button, buttonClass) })}>
+      <svg class={svg({ class: clsx((theme as DrawerHeadTheme)?.svg, svgClass) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
       </svg>
       <span class="sr-only">Close drawer</span>

package/dist/drawer/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type DrawerVariants = VariantProps<typeof drawer>;
 export declare const drawer: import("tailwind-variants").TVReturnType<{
     position: {
@@ -171,6 +172,6 @@ export declare const drawerhead: import("tailwind-variants").TVReturnType<{
     svg: string;
 }, undefined, unknown, unknown, undefined>>;
 export type DrawerSlots = keyof typeof drawer.slots;
-export type DrawerTheme = Partial<Record<DrawerSlots, string>>;
+export type DrawerTheme = Partial<Record<DrawerSlots, ClassValue>>;
 export type DrawerHeadSlots = keyof typeof drawerhead.slots;
-export type DrawerHeadTheme = Partial<Record<DrawerHeadSlots, string>>;
+export type DrawerHeadTheme = Partial<Record<DrawerHeadSlots, ClassValue>>;

package/dist/dropdown/Dropdown.svelte

@@ -2,7 +2,8 @@
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
   import { dropdown } from "./";
-  import { type DropdownProps, Popper, cn, DropdownGroup } from "..";
+  import clsx from "clsx";
+  import { type DropdownProps, Popper, DropdownGroup } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, simple = false, placement = "bottom", offset = 2, class: className, activeUrl = "", isOpen = $bindable(false), ...restProps }: DropdownProps = $props();
@@ -20,7 +21,7 @@
 
 <!-- Dropdown menu -->
 
-<Popper {...restProps} {placement} {offset} bind:isOpen class={cn(base(), className, theme)}>
+<Popper {...restProps} {placement} {offset} bind:isOpen class={base({ class: clsx(theme, className) })}>
   {#if simple}
     <DropdownGroup>
       {@render children()}

package/dist/dropdown/DropdownDivider.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { dropdownDivider } from ".";
-  import { type DropdownDividerProps, cn } from "..";
+  import clsx from "clsx";
+  import { type DropdownDividerProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { class: className, ...restProps }: DropdownDividerProps = $props();
@@ -8,7 +9,7 @@
   const theme = getTheme("dropdownDivider");
 </script>
 
-<div {...restProps} class={cn(dropdownDivider(), className, theme)}></div>
+<div {...restProps} class={dropdownDivider({ class: clsx(theme, className) })}></div>
 
 <!--
 @component

package/dist/dropdown/DropdownGroup.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { dropdownGroup } from ".";
-  import { type DropdownGroupProps, cn } from "..";
+  import clsx from "clsx";
+  import { type DropdownGroupProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: DropdownGroupProps = $props();
@@ -8,7 +9,7 @@
   const theme = getTheme("dropdownGroup");
 </script>
 
-<ul {...restProps} class={cn(dropdownGroup(), className, theme)}>
+<ul {...restProps} class={dropdownGroup({ class: clsx(theme, className) })}>
   {@render children()}
 </ul>
 

package/dist/dropdown/DropdownHeader.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { dropdownHeader } from ".";
-  import { type DropdownHeaderProps, cn } from "..";
+  import clsx from "clsx";
+  import { type DropdownHeaderProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: DropdownHeaderProps = $props();
@@ -8,7 +9,7 @@
   const theme = getTheme("dropdownHeader");
 </script>
 
-<div {...restProps} class={cn(dropdownHeader(), className, theme)}>
+<div {...restProps} class={dropdownHeader({ class: clsx(theme, className) })}>
   {@render children()}
 </div>
 

package/dist/dropdown/DropdownItem.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import { dropdownItem, type DropdownItemTheme } from ".";
-  import { type DropdownItemProps, cn } from "..";
+  import clsx from "clsx";
+  import { type DropdownItemProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { aClass, children, activeClass, liClass, class: className, ...restProps }: DropdownItemProps = $props();
@@ -20,10 +21,10 @@
   });
 
   const { anchor, activeAnchor } = dropdownItem();
-  let finalClass = $derived([active ? cn(activeAnchor(), activeClass, className, (theme as DropdownItemTheme)?.activeAnchor) : cn(anchor(), aClass, className, (theme as DropdownItemTheme)?.anchor)]);
+  let finalClass = $derived([active ? activeAnchor({ class: clsx((theme as DropdownItemTheme)?.activeAnchor, activeClass, className) }) : anchor({ class: clsx((theme as DropdownItemTheme)?.anchor, aClass, className) })]);
 </script>
 
-<li class={cn(liClass)}>
+<li class={liClass}>
   {#if restProps.href === undefined && restProps.onclick === undefined}
     <div {...restProps} class={finalClass}>
       {@render children()}

package/dist/dropdown/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 export declare const dropdown: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -30,11 +31,11 @@ export declare const dropdown: import("tailwind-variants").TVReturnType<{
     backdrop: string;
 }, undefined, unknown, unknown, undefined>>;
 export type DropdownSlots = keyof typeof dropdown.slots;
-export type DropdownTheme = Partial<Record<DropdownSlots, string>>;
+export type DropdownTheme = Partial<Record<DropdownSlots, ClassValue>>;
 export declare const dropdownDivider: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", unknown, unknown, undefined>>;
-export type DropdownDividerTheme = string;
+export type DropdownDividerTheme = ClassValue;
 export declare const dropdownHeader: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", unknown, unknown, undefined>>;
-export type DropdownHeaderTheme = string;
+export type DropdownHeaderTheme = ClassValue;
 export declare const dropdownItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -67,6 +68,6 @@ export declare const dropdownItem: import("tailwind-variants").TVReturnType<{
     activeAnchor: string;
 }, undefined, unknown, unknown, undefined>>;
 export type DropdownItemSlots = keyof typeof dropdownItem.slots;
-export type DropdownItemTheme = Partial<Record<DropdownItemSlots, string>>;
+export type DropdownItemTheme = Partial<Record<DropdownItemSlots, ClassValue>>;
 export declare const dropdownGroup: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", unknown, unknown, undefined>>;
-export type DropdownGroupTheme = string;
+export type DropdownGroupTheme = ClassValue;

package/dist/footer/Footer.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
   import { footer } from ".";
-  import { type FooterProps, cn } from "..";
+  import clsx from "clsx";
+  import { type FooterProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, footerType = "default", class: className, ...restProps }: FooterProps = $props();
 
   const theme = getTheme("footer");
 
-  const footerCls = $derived(footer({ footerType }));
+  const footerCls = $derived(footer({ footerType, class: clsx(theme, className) }));
 </script>
 
-<footer {...restProps} class={cn(footerCls, className, theme)}>
+<footer {...restProps} class={footerCls}>
   {@render children()}
 </footer>