flowbite-svelte 1.10.5 → 1.10.7

package/dist/forms/select/MultiSelect.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T">
-  import { Badge, CloseButton, type MultiSelectProps, type SelectOptionType, cn } from "../..";
+  import clsx from "clsx";
+  import { Badge, CloseButton, type MultiSelectProps, type SelectOptionType } from "../..";
   import { multiSelect, type MultiSelectTheme } from ".";
   import { getTheme } from "../../theme/themeUtils";
   import { onMount, onDestroy } from "svelte"; // Import onMount and onDestroy
@@ -193,11 +194,11 @@
   {/each}
 </select>
 
-<div bind:this={multiSelectContainer} {...restProps} onclick={toggleDropdown} onblur={handleBlur} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={cn(base({ size }), className, (theme as MultiSelectTheme)?.base)}>
+<div bind:this={multiSelectContainer} {...restProps} onclick={toggleDropdown} onblur={handleBlur} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={base({ size, class: clsx((theme as MultiSelectTheme)?.base, className) })}>
   {#if !selectItems.length}
     <span class="text-gray-400">{placeholder}</span>
   {/if}
-  <span class={cn(select(), (theme as MultiSelectTheme)?.select)}>
+  <span class={select({ class: clsx((theme as MultiSelectTheme)?.select) })}>
     {#if selectItems.length}
       {#each selectItems as item (item.name)}
         {#if children}
@@ -212,16 +213,16 @@
   </span>
   <div class="ms-auto flex items-center gap-2">
     {#if selectItems.length}
-      <CloseButton {size} onclick={clearAll} color="none" class={cn(closebutton(), (theme as MultiSelectTheme)?.closebutton)} {disabled} />
+      <CloseButton {size} onclick={clearAll} color="none" class={closebutton({ class: clsx((theme as MultiSelectTheme)?.closebutton) })} {disabled} />
     {/if}
 
-    <svg class={cn("ms-1 h-3 w-3 cursor-pointer text-gray-800 dark:text-white", disabled && "cursor-not-allowed")} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+    <svg class={clsx("ms-1 h-3 w-3 cursor-pointer text-gray-800 dark:text-white", disabled && "cursor-not-allowed")} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? "m1 5 4-4 4 4" : "m9 1-4 4-4-4"} />
     </svg>
   </div>
 
   {#if show}
-    <div role="presentation" class={cn(dropdown(), dropdownClass)}>
+    <div role="presentation" class={dropdown({ class: clsx(dropdownClass) })}>
       {#each items as item (item.name)}
         <div
           onclick={(e) => selectOption(item, e)}

package/dist/forms/select/Select.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="T">
   import { select as selectCls, type SelectTheme } from ".";
-  import { type SelectProps, CloseButton, cn } from "../..";
+  import clsx from "clsx";
+  import { type SelectProps, CloseButton } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, items, value = $bindable(), elementRef = $bindable(), underline, size = "md", disabled, selectClass, class: className, placeholder = "Choose option ...", clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: SelectProps<T> = $props();
@@ -18,8 +19,8 @@
   };
 </script>
 
-<div class={cn(base(), className, (theme as SelectTheme)?.base)}>
-  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={cn(select(), selectClass, (theme as SelectTheme)?.select)}>
+<div class={base({ class: clsx((theme as SelectTheme)?.base, className) })}>
+  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={select({ class: clsx((theme as SelectTheme)?.select, selectClass) })}>
     {#if placeholder}
       <option disabled selected value="">{placeholder}</option>
     {/if}
@@ -35,7 +36,7 @@
     {/if}
   </select>
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as SelectTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} {disabled} />
+    <CloseButton onclick={clearAll} class={closebutton({ class: clsx((theme as SelectTheme)?.closebutton, clearableClass) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(clearableSvgClass)} {disabled} />
   {/if}
 </div>
 <!--

package/dist/forms/select/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type SelectVariants = VariantProps<typeof select>;
 export declare const select: import("tailwind-variants").TVReturnType<{
     underline: {
@@ -92,7 +93,7 @@ export declare const select: import("tailwind-variants").TVReturnType<{
     closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SelectSlots = keyof typeof select.slots;
-export type SelectTheme = Partial<Record<SelectSlots, string>>;
+export type SelectTheme = Partial<Record<SelectSlots, ClassValue>>;
 export type MultiSelectVariants = VariantProps<typeof multiSelect>;
 export declare const multiSelect: import("tailwind-variants").TVReturnType<{
     size: {
@@ -192,4 +193,4 @@ export declare const multiSelect: import("tailwind-variants").TVReturnType<{
     closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
 export type MultiSelectSlots = keyof typeof multiSelect.slots;
-export type MultiSelectTheme = Partial<Record<MultiSelectSlots, string>>;
+export type MultiSelectTheme = Partial<Record<MultiSelectSlots, ClassValue>>;

package/dist/forms/tags/Tags.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { type TagsProps, CloseButton, cn } from "../..";
+  import clsx from "clsx";
+  import { type TagsProps, CloseButton } from "../..";
   import { tags, type TagsTheme } from "./theme";
   import { getTheme } from "../../theme/themeUtils";
 
@@ -36,15 +37,15 @@
   };
 </script>
 
-<div {...restProps} class={cn(base(), className, (theme as TagsTheme)?.base)}>
+<div {...restProps} class={base({ class: clsx((theme as TagsTheme)?.base, className) })}>
   {#each value as tag, index}
-    <div class={cn(tagCls(), itemClass, (theme as TagsTheme)?.tag)}>
-      <span class={cn(spanCls(), spanClass, (theme as TagsTheme)?.span)}>
+    <div class={tagCls({ class: clsx((theme as TagsTheme)?.tag, itemClass) })}>
+      <span class={spanCls({ class: clsx((theme as TagsTheme)?.span, spanClass) })}>
         {tag}
       </span>
       <CloseButton
         size={closeBtnSize}
-        class={cn(closebutton(), closeClass, (theme as TagsTheme)?.closebutton)}
+        class={closebutton({ class: clsx((theme as TagsTheme)?.closebutton, closeClass) })}
         onclick={() => {
           deleteField(index);
         }}
@@ -60,7 +61,7 @@
     placeholder={value.length === 0 ? placeholder : ""}
     type="text"
     autocomplete="new-password"
-    class={cn(inputCls(), inputClass)}
+    class={inputCls({ class: clsx(inputClass) })}
   />
 </div>
 
@@ -68,7 +69,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L899)
+[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L885)
 ## Props
 @prop value = $bindable([])
 @prop itemClass

package/dist/forms/tags/Tags.svelte.d.ts

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

package/dist/forms/tags/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 export declare const tags: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -48,4 +49,4 @@ export declare const tags: import("tailwind-variants").TVReturnType<{
     input: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TagsSlots = keyof typeof tags.slots;
-export type TagsTheme = Partial<Record<TagsSlots, string>>;
+export type TagsTheme = Partial<Record<TagsSlots, ClassValue>>;

package/dist/forms/textarea/Textarea.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { textarea, type TextareaTheme } from ".";
-  import { type TextareaProps, CloseButton, cn } from "../..";
+  import clsx from "clsx";
+  import { type TextareaProps, CloseButton } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { header, footer, addon, value = $bindable(), elementRef = $bindable(), divClass, innerClass, headerClass, footerClass, addonClass, disabled, class: className, cols, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, textareaClass, ...restProps }: TextareaProps = $props();
@@ -23,33 +24,33 @@
   };
 </script>
 
-<div class={cn(divWrapper(), divClass, (theme as TextareaTheme)?.divWrapper)}>
+<div class={divWrapper({ class: clsx((theme as TextareaTheme)?.divWrapper, divClass) })}>
   {#if !wrapped}
-    <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={cn(wrapper(), className)}></textarea>
+    <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={wrapper({ class: clsx(className) })}></textarea>
   {:else}
-    <div class={cn(wrapper(), className, (theme as TextareaTheme)?.wrapper)}>
+    <div class={wrapper({ class: clsx((theme as TextareaTheme)?.wrapper, className) })}>
       {#if header}
-        <div class={cn(headerCls(), headerClass, (theme as TextareaTheme)?.headerCls)}>
+        <div class={headerCls({ class: clsx((theme as TextareaTheme)?.headerCls, headerClass) })}>
           {@render header()}
         </div>
       {/if}
-      <div class={cn(innerWrapper(), innerClass, (theme as TextareaTheme)?.innerWrapper)}>
+      <div class={innerWrapper({ class: clsx((theme as TextareaTheme)?.innerWrapper, innerClass) })}>
         {#if addon}
-          <div class={cn(addonCls(), addonClass, (theme as TextareaTheme)?.addonCls)}>
+          <div class={addonCls({ class: clsx((theme as TextareaTheme)?.addonCls, addonClass) })}>
             {@render addon()}
           </div>
         {/if}
-        <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={cn(base(), textareaClass, (theme as TextareaTheme)?.base)}></textarea>
+        <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={base({ class: clsx((theme as TextareaTheme)?.base, textareaClass) })}></textarea>
       </div>
       {#if footer}
-        <div class={cn(footerCls(), footerClass, (theme as TextareaTheme)?.footerCls)}>
+        <div class={footerCls({ class: clsx((theme as TextareaTheme)?.footerCls, footerClass) })}>
           {@render footer()}
         </div>
       {/if}
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as TextareaTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={closebutton({ class: clsx((theme as TextareaTheme)?.closebutton, clearableClass) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(clearableSvgClass)} />
   {/if}
 </div>
 
@@ -57,7 +58,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L946)
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L932)
 ## Props
 @prop header
 @prop footer

package/dist/forms/textarea/Textarea.svelte.d.ts

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

package/dist/forms/textarea/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type TextareaVariants = VariantProps<typeof textarea>;
 export declare const textarea: import("tailwind-variants").TVReturnType<{
     cols: {
@@ -113,4 +114,4 @@ export declare const textarea: import("tailwind-variants").TVReturnType<{
     closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TextareaSlots = keyof typeof textarea.slots;
-export type TextareaTheme = Partial<Record<TextareaSlots, string>>;
+export type TextareaTheme = Partial<Record<TextareaSlots, ClassValue>>;

package/dist/forms/timepicker/Timepicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Dropdown, DropdownItem, Button, Input, ButtonGroup, Select, Label, Toggle, type TimepickerProps, type TimePickerOption, cn } from "../..";
+  import clsx from "clsx";
+  import { Dropdown, DropdownItem, Button, Input, ButtonGroup, Select, Label, Toggle, type TimepickerProps, type TimePickerOption } from "../..";
   import { timepicker, type TimepickerTheme } from ".";
   import { parse, isValid, isBefore, isAfter } from "date-fns";
   import { getTheme } from "../../theme/themeUtils";
@@ -154,10 +155,10 @@
 </script>
 
 {#if type !== "inline-buttons"}
-  <ButtonGroup {size} class={cn(styles.buttonGroup(), divClass, (theme as TimepickerTheme)?.buttonGroup)}>
+  <ButtonGroup {size} class={styles.buttonGroup({ class: clsx((theme as TimepickerTheme)?.buttonGroup, divClass) })}>
     {#if type === "default"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), styles.inputWithIcon(), inputClass, (theme as TimepickerTheme)?.input)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
-      <div class={cn(styles.iconWrapper(), (theme as TimepickerTheme)?.iconWrapper)}>
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(styles.inputWithIcon(), (theme as TimepickerTheme)?.input, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <div class={styles.iconWrapper({ class: clsx((theme as TimepickerTheme)?.iconWrapper) })}>
         {#if Icon}
           <Icon class={iconClass} />
         {:else}
@@ -167,13 +168,13 @@
         {/if}
       </div>
     {:else if type === "select"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), inputClass, (theme as TimepickerTheme)?.input)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
-      <Select selectClass={cn(styles.select(), selectClass, (theme as TimepickerTheme)?.select)} onchange={handleOptionSelect} items={options} value={selectedOption} />
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx((theme as TimepickerTheme)?.input, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <Select selectClass={styles.select({ class: clsx((theme as TimepickerTheme)?.select, selectClass) })} onchange={handleOptionSelect} items={options} value={selectedOption} />
     {:else if type === "dropdown"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), inputClass, (theme as TimepickerTheme)?.input)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
-      <Button color={buttonColor} class={cn(styles.button(), (theme as TimepickerTheme)?.button)}>
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx((theme as TimepickerTheme)?.input, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <Button color={buttonColor} class={styles.button({ class: clsx((theme as TimepickerTheme)?.button) })}>
         {optionLabel}
-        <svg class={cn(styles.buttonIcon(), (theme as TimepickerTheme)?.buttonIcon)} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg class={styles.buttonIcon({ class: clsx((theme as TimepickerTheme)?.buttonIcon) })} aria-hidden="true" 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="M19 9l-7 7-7-7"></path>
         </svg>
       </Button>
@@ -185,69 +186,69 @@
         {/each}
       </Dropdown>
     {:else if type === "range"}
-      <div class={cn(styles.rangeInputWrapper(), (theme as TimepickerTheme)?.rangeInputWrapper)}>
-        <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), styles.rangeInput(), inputClass, (theme as TimepickerTheme)?.rangeInput)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
-        <button type="button" class={cn(styles.rangeButton(), (theme as TimepickerTheme)?.rangeButton)} onclick={() => document.getElementById(id)?.click()} aria-label="Open time picker">
+      <div class={styles.rangeInputWrapper({ class: clsx((theme as TimepickerTheme)?.rangeInputWrapper) })}>
+        <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx((theme as TimepickerTheme)?.rangeInput, styles.rangeInput(), inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+        <button type="button" class={styles.rangeButton({ class: clsx((theme as TimepickerTheme)?.rangeButton) })} onclick={() => document.getElementById(id)?.click()} aria-label="Open time picker">
           {#if Icon}
             <Icon class={iconClass} />
           {:else}
-            <svg class={cn(styles.icon(), (theme as TimepickerTheme)?.icon)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+            <svg class={styles.icon({ class: clsx((theme as TimepickerTheme)?.icon) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
             </svg>
           {/if}
         </button>
       </div>
-      <span class={cn(styles.rangeSeparator(), (theme as TimepickerTheme)?.rangeSeparator)}>-</span>
-      <div class={cn(styles.rangeInputWrapper(), (theme as TimepickerTheme)?.rangeInputWrapper)}>
-        <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), styles.rangeInput(), inputClass, (theme as TimepickerTheme)?.rangeInput)} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
-        <button type="button" class={cn(styles.rangeButton(), (theme as TimepickerTheme)?.rangeButton)} onclick={() => document.getElementById(endId)?.click()} aria-label="Open end time picker">
+      <span class={styles.rangeSeparator({ class: clsx((theme as TimepickerTheme)?.rangeSeparator) })}>-</span>
+      <div class={styles.rangeInputWrapper({ class: clsx((theme as TimepickerTheme)?.rangeInputWrapper) })}>
+        <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(styles.rangeInput(), (theme as TimepickerTheme)?.rangeInput, inputClass) })} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+        <button type="button" class={styles.rangeButton({ class: clsx((theme as TimepickerTheme)?.rangeButton) })} onclick={() => document.getElementById(endId)?.click()} aria-label="Open end time picker">
           {#if Icon}
             <Icon class={iconClass} />
           {:else}
-            <svg class={cn(styles.icon(), (theme as TimepickerTheme)?.icon)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+            <svg class={styles.icon({ class: clsx((theme as TimepickerTheme)?.icon) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
             </svg>
           {/if}
         </button>
       </div>
     {:else if type === "timerange-dropdown"}
-      <Button color={buttonColor} {size} class={cn(styles.button(), (theme as TimepickerTheme)?.button)}>
+      <Button color={buttonColor} {size} class={styles.button({ class: clsx((theme as TimepickerTheme)?.button) })}>
         {timerangeLabel}
-        <svg class={cn(styles.buttonIcon(), (theme as TimepickerTheme)?.buttonIcon)} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg class={styles.buttonIcon({ class: clsx((theme as TimepickerTheme)?.buttonIcon) })} aria-hidden="true" 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="M19 9l-7 7-7-7"></path>
         </svg>
       </Button>
-      <Dropdown simple class={cn(styles.dropdownContent(), (theme as TimepickerTheme)?.dropdownContent)}>
-        <div class={cn(styles.dropdownInner(), (theme as TimepickerTheme)?.dropdownInner)}>
-          <div class={cn(styles.dropdownTimeRow(), (theme as TimepickerTheme)?.dropdownTimeRow)}>
-            <div class={cn(styles.dropdownTimeCol(), (theme as TimepickerTheme)?.dropdownTimeCol)}>
+      <Dropdown simple class={styles.dropdownContent({ class: clsx((theme as TimepickerTheme)?.dropdownContent) })}>
+        <div class={styles.dropdownInner({ class: clsx((theme as TimepickerTheme)?.dropdownInner) })}>
+          <div class={styles.dropdownTimeRow({ class: clsx((theme as TimepickerTheme)?.dropdownTimeRow) })}>
+            <div class={styles.dropdownTimeCol({ class: clsx((theme as TimepickerTheme)?.dropdownTimeCol) })}>
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.dropdownTimeInput(), inputClass, (theme as TimepickerTheme)?.dropdownTimeInput)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.dropdownTimeInput({ class: clsx((theme as TimepickerTheme)?.dropdownTimeInput, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
             </div>
-            <div class={cn(styles.dropdownTimeCol(), (theme as TimepickerTheme)?.dropdownTimeCol)}>
+            <div class={styles.dropdownTimeCol({ class: clsx((theme as TimepickerTheme)?.dropdownTimeCol) })}>
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.dropdownTimeInput(), inputClass, (theme as TimepickerTheme)?.dropdownTimeInput)} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.dropdownTimeInput({ class: clsx((theme as TimepickerTheme)?.dropdownTimeInput, inputClass) })} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
             </div>
           </div>
-          <Button color={buttonColor} class={cn(styles.dropdownButton(), (theme as TimepickerTheme)?.dropdownButton)} onclick={applyTimerange}>
+          <Button color={buttonColor} class={styles.dropdownButton({ class: clsx((theme as TimepickerTheme)?.dropdownButton) })} onclick={applyTimerange}>
             {timerangeButtonLabel}
           </Button>
         </div>
       </Dropdown>
     {:else if type === "timerange-toggle"}
-      <div class={cn(styles.toggleWrapper(), (theme as TimepickerTheme)?.toggleWrapper)}>
-        <div class={cn(styles.toggleRow(), (theme as TimepickerTheme)?.toggleRow)}>
+      <div class={styles.toggleWrapper({ class: clsx((theme as TimepickerTheme)?.toggleWrapper) })}>
+        <div class={styles.toggleRow({ class: clsx((theme as TimepickerTheme)?.toggleRow) })}>
           <Toggle id={`${id}-timerange-toggle`} checked={showTimerange} onchange={toggleTimerange} spanClass="me-0 rounded-lg" />
         </div>
         {#if showTimerange}
-          <div class={cn(styles.toggleTimeRow(), (theme as TimepickerTheme)?.toggleTimeRow)}>
-            <div class={cn(styles.toggleTimeCol(), (theme as TimepickerTheme)?.toggleTimeCol)}>
+          <div class={styles.toggleTimeRow({ class: clsx((theme as TimepickerTheme)?.toggleTimeRow) })}>
+            <div class={styles.toggleTimeCol({ class: clsx((theme as TimepickerTheme)?.toggleTimeCol) })}>
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.toggleTimeInput(), inputClass, (theme as TimepickerTheme)?.toggleTimeInput)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.toggleTimeInput({ class: clsx((theme as TimepickerTheme)?.toggleTimeInput, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
             </div>
-            <div class={cn(styles.toggleTimeCol(), (theme as TimepickerTheme)?.toggleTimeCol)}>
+            <div class={styles.toggleTimeCol({ class: clsx((theme as TimepickerTheme)?.toggleTimeCol) })}>
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.toggleTimeInput(), inputClass, (theme as TimepickerTheme)?.toggleTimeInput)} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.toggleTimeInput({ class: clsx((theme as TimepickerTheme)?.toggleTimeInput, inputClass) })} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
             </div>
           </div>
         {/if}
@@ -255,9 +256,9 @@
     {/if}
   </ButtonGroup>
 {:else}
-  <div class={cn(styles.inlineGrid(), (theme as TimepickerTheme)?.inlineGrid)}>
+  <div class={styles.inlineGrid({ class: clsx((theme as TimepickerTheme)?.inlineGrid) })}>
     {#each timeIntervals as time}
-      <Button {size} color={value === time ? buttonColor : "light"} class={cn(styles.inlineButton(), (theme as TimepickerTheme)?.inlineButton)} onclick={() => handleInlineButtonSelect(time)}>
+      <Button {size} color={value === time ? buttonColor : "light"} class={styles.inlineButton({ class: clsx((theme as TimepickerTheme)?.inlineButton) })} onclick={() => handleInlineButtonSelect(time)}>
         {time}
       </Button>
     {/each}
@@ -268,7 +269,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L917)
+[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L903)
 ## Props
 @prop id = "time"
 @prop endId = "end-time"

package/dist/forms/timepicker/Timepicker.svelte.d.ts

@@ -2,7 +2,7 @@ import { type TimepickerProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L917)
+ * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L903)
  * ## Props
  * @prop id = "time"
  * @prop endId = "end-time"

package/dist/forms/timepicker/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type TimepickerVariants = VariantProps<typeof timepicker>;
 export declare const timepicker: import("tailwind-variants").TVReturnType<{
     type: {
@@ -188,4 +189,4 @@ export declare const timepicker: import("tailwind-variants").TVReturnType<{
     inlineButton: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TimepickerSlots = keyof typeof timepicker.slots;
-export type TimepickerTheme = Partial<Record<TimepickerSlots, string>>;
+export type TimepickerTheme = Partial<Record<TimepickerSlots, ClassValue>>;

package/dist/forms/toggle/Toggle.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { toggle, type ToggleTheme } from "./index";
-  import { type ToggleProps, Label, cn } from "../..";
+  import clsx from "clsx";
+  import { type ToggleProps, Label } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, size = "default", value, checked = $bindable(), disabled, color = "primary", class: className, inputClass, spanClass, offLabel, ...restProps }: ToggleProps = $props();
@@ -10,12 +11,12 @@
   const { input, label, span } = $derived(toggle({ color, checked, size, disabled, off_state_label: !!offLabel }));
 </script>
 
-<Label class={cn(label(), className, (theme as ToggleTheme)?.label)}>
+<Label class={label({ class: clsx((theme as ToggleTheme)?.label, className) })}>
   {#if offLabel}
     {@render offLabel()}
   {/if}
-  <input type="checkbox" bind:checked {value} {...restProps} {disabled} class={cn(input(), inputClass, (theme as ToggleTheme)?.input)} />
-  <span class={cn(span(), spanClass, (theme as ToggleTheme)?.span)}></span>
+  <input type="checkbox" bind:checked {value} {...restProps} {disabled} class={input({ class: clsx((theme as ToggleTheme)?.input, inputClass) })} />
+  <span class={span({ class: clsx((theme as ToggleTheme)?.span, spanClass) })}></span>
   {#if children}
     {@render children()}
   {/if}
@@ -25,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L968)
+[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L954)
 ## Props
 @prop children
 @prop size = "default"

package/dist/forms/toggle/Toggle.svelte.d.ts

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

package/dist/forms/toggle/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type ToggleVariants = VariantProps<typeof toggle>;
 export declare const toggle: import("tailwind-variants").TVReturnType<{
     disabled: {
@@ -278,4 +279,4 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
     input: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ToggleSlots = keyof typeof toggle.slots;
-export type ToggleTheme = Partial<Record<ToggleSlots, string>>;
+export type ToggleTheme = Partial<Record<ToggleSlots, ClassValue>>;

package/dist/gallery/Gallery.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { gallery, type GalleryTheme } from ".";
-  import { type GalleryProps, type ImgType, cn } from "..";
+  import clsx from "clsx";
+  import { type GalleryProps, type ImgType } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, figure, items = [], imgClass, class: className, ...restProps }: GalleryProps = $props();
@@ -16,11 +17,11 @@
 
 {#snippet _figure(item: ImgType)}
   <div>
-    <img src={item.src} alt={item.alt} class={cn(image(), imgClass, (theme as GalleryTheme)?.image)} {...restProps} />
+    <img src={item.src} alt={item.alt} class={image({ class: clsx((theme as GalleryTheme)?.image, imgClass) })} {...restProps} />
   </div>
 {/snippet}
 
-<div class={cn(div(), className, (theme as GalleryTheme)?.div)} use:init>
+<div class={div({ class: clsx((theme as GalleryTheme)?.div, className) })} use:init>
   {#each items as item}
     {#if figure}
       {@render figure(item as ImgType)}
@@ -38,7 +39,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L985)
+[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L971)
 ## Props
 @prop children
 @prop figure

package/dist/gallery/Gallery.svelte.d.ts

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

package/dist/gallery/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 declare const gallery: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -31,4 +32,4 @@ declare const gallery: import("tailwind-variants").TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 export { gallery };
 export type GallerySlots = keyof typeof gallery.slots;
-export type GalleryTheme = Partial<Record<GallerySlots, string>>;
+export type GalleryTheme = Partial<Record<GallerySlots, ClassValue>>;

package/dist/indicator/Indicator.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { indicator } from "./index";
-  import { type IndicatorProps, cn } from "..";
+  import clsx from "clsx";
+  import { type IndicatorProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, color = "primary", cornerStyle = "circular", size = "md", border = false, placement, offset = true, class: className, ...restProps }: IndicatorProps = $props();
@@ -16,12 +17,13 @@
       border,
       placement,
       offset,
-      hasChildren
+      hasChildren,
+      class: clsx(theme, className)
     })
   );
 </script>
 
-<div {...restProps} class={cn(base, className, theme)}>
+<div {...restProps} class={base}>
   {#if children}
     {@render children()}
   {/if}
@@ -31,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L996)
+[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L982)
 ## Props
 @prop children
 @prop color = "primary"

package/dist/indicator/Indicator.svelte.d.ts

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

package/dist/indicator/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type IndicatorVariants = VariantProps<typeof indicator>;
 export declare const indicator: import("tailwind-variants").TVReturnType<{
     color: {
@@ -175,4 +176,4 @@ export declare const indicator: import("tailwind-variants").TVReturnType<{
         false: {};
     };
 }, undefined, "shrink-0", unknown, unknown, undefined>>;
-export type IndicatorTheme = string;
+export type IndicatorTheme = ClassValue;