flowbite-svelte 1.10.5 → 1.10.7

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>
@@ -364,7 +368,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
+[DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L463)
 ## Props
 @prop value = $bindable()
 @prop defaultDate = null

package/dist/datepicker/Datepicker.svelte.d.ts

@@ -2,7 +2,7 @@ import { type DatepickerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L480)
+ * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L463)
  * ## Props
  * @prop value = $bindable()
  * @prop defaultDate = null

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/device-mockups/Android.svelte

@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L526)
+[AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L509)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Android.svelte.d.ts

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

package/dist/device-mockups/DefaultMockup.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L537)
+[DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L520)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/DefaultMockup.svelte.d.ts

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

package/dist/device-mockups/Desktop.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L518)
+[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L501)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Desktop.svelte.d.ts

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

package/dist/device-mockups/DeviceMockup.svelte

@@ -32,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L513)
+[DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L496)
 ## Props
 @prop children
 @prop device = "default"

package/dist/device-mockups/DeviceMockup.svelte.d.ts

@@ -3,7 +3,7 @@ import type { DeviceMockupProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L513)
+ * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L496)
  * ## Props
  * @prop children
  * @prop device = "default"

package/dist/device-mockups/Ios.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L547)
+[IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L530)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Ios.svelte.d.ts

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

package/dist/device-mockups/Laptop.svelte

@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L518)
+[MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L501)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Laptop.svelte.d.ts

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

package/dist/device-mockups/Smartwatch.svelte

@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L557)
+[SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L540)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Smartwatch.svelte.d.ts

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

package/dist/device-mockups/Tablet.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L567)
+[TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L550)
 ## Props
 @prop children
 @prop divClass

package/dist/device-mockups/Tablet.svelte.d.ts

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

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}
@@ -40,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L578)
+[DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L561)
 ## Props
 @prop children
 @prop hidden = $bindable()

package/dist/drawer/Drawer.svelte.d.ts

@@ -2,7 +2,7 @@ import { type DrawerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L578)
+ * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L561)
  * ## Props
  * @prop children
  * @prop hidden = $bindable()

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>
@@ -30,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L589)
+[DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L572)
 ## Props
 @prop closeIcon
 @prop children

package/dist/drawer/Drawerhead.svelte.d.ts

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

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()}
@@ -34,7 +35,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L596)
+[DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L579)
 ## Props
 @prop children
 @prop simple = false

package/dist/dropdown/Dropdown.svelte.d.ts

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

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,13 +9,13 @@
   const theme = getTheme("dropdownDivider");
 </script>
 
-<div {...restProps} class={cn(dropdownDivider(), className, theme)}></div>
+<div {...restProps} class={dropdownDivider({ class: clsx(theme, className) })}></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L602)
+[DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L585)
 ## Props
 @prop class: className
 @prop ...restProps

package/dist/dropdown/DropdownDivider.svelte.d.ts

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

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>
 
@@ -16,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L619)
+[DropdownGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L602)
 ## Props
 @prop children
 @prop class: className

package/dist/dropdown/DropdownGroup.svelte.d.ts

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

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>
 
@@ -16,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L604)
+[DropdownHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L587)
 ## Props
 @prop children
 @prop class: className

package/dist/dropdown/DropdownHeader.svelte.d.ts

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

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()}
@@ -43,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L610)
+[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L593)
 ## Props
 @prop aClass
 @prop children

package/dist/dropdown/DropdownItem.svelte.d.ts

@@ -2,7 +2,7 @@ import { type DropdownItemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L610)
+ * [DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L593)
  * ## Props
  * @prop aClass
  * @prop 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;