flowbite-svelte 1.10.5 → 1.10.7

package/dist/forms/dropzone/Dropzone.svelte.d.ts

@@ -2,11 +2,14 @@ import { type DropzoneProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L713)
+ * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L696)
  * ## Props
  * @prop children
  * @prop files = $bindable<FileList | null>()
  * @prop class: className
+ * @prop onDrop
+ * @prop onDragOver
+ * @prop onChange
  * @prop ...restProps
  */
 declare const Dropzone: import("svelte").Component<DropzoneProps, {}, "files">;

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

@@ -1,2 +1,3 @@
+import type { ClassValue } from "svelte/elements";
 export declare const dropzone: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600", unknown, unknown, undefined>>;
-export type DropzoneTheme = string;
+export type DropzoneTheme = ClassValue;

package/dist/forms/fileupload/Fileupload.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { fileupload, type FileuploadTheme } from ".";
-  import { CloseButton, type FileuploadProps, cn } from "../..";
+  import clsx from "clsx";
+  import { CloseButton, type FileuploadProps } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { files = $bindable(), size = "md", clearable = false, elementRef = $bindable(), class: className, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, wrapperClass, ...restProps }: FileuploadProps = $props();
@@ -18,10 +19,10 @@
   };
 </script>
 
-<div class={cn(wrapper(), wrapperClass, (theme as FileuploadTheme)?.wrapper)}>
-  <input type="file" bind:files bind:this={elementRef} {...restProps} class={cn(base({ size }), className, (theme as FileuploadTheme)?.base)} />
+<div class={wrapper({ class: clsx((theme as FileuploadTheme)?.wrapper, wrapperClass) })}>
+  <input type="file" bind:files bind:this={elementRef} {...restProps} class={base({ size, class: clsx((theme as FileuploadTheme)?.base, className) })} />
   {#if files && files.length > 0 && clearable}
-    <CloseButton onclick={clearAll} class={cn(right(), clearableClass, (theme as FileuploadTheme)?.right)} color={clearableColor} aria-label="Clear selected files" svgClass={cn(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={right({ class: clsx((theme as FileuploadTheme)?.right, clearableClass) })} color={clearableColor} aria-label="Clear selected files" svgClass={clsx(clearableSvgClass)} />
   {/if}
 </div>
 
@@ -29,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L719)
+[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L705)
 ## Props
 @prop files = $bindable()
 @prop size = "md"

package/dist/forms/fileupload/Fileupload.svelte.d.ts

@@ -2,7 +2,7 @@ import { type FileuploadProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L719)
+ * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L705)
  * ## Props
  * @prop files = $bindable()
  * @prop size = "md"

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type FileuploadViariants = VariantProps<typeof fileupload>;
 export declare const fileupload: import("tailwind-variants").TVReturnType<{
     size: {
@@ -50,4 +51,4 @@ export declare const fileupload: import("tailwind-variants").TVReturnType<{
     right: string;
 }, undefined, unknown, unknown, undefined>>;
 export type FileuploadSlots = keyof typeof fileupload.slots;
-export type FileuploadTheme = Partial<Record<FileuploadSlots, string>>;
+export type FileuploadTheme = Partial<Record<FileuploadSlots, ClassValue>>;

package/dist/forms/floating-label/FloatingLabelInput.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { idGenerator } from "../../utils";
   import { floatingLabelInput, type FloatingLabelInputTheme } from ".";
-  import { type FloatingLabelInputProps, CloseButton, cn } from "../..";
+  import clsx from "clsx";
+  import { type FloatingLabelInputProps, CloseButton } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, id = idGenerator(), value = $bindable(), elementRef = $bindable(), "aria-describedby": ariaDescribedby, variant = "standard", size = "default", color = "default", class: className, inputClass, labelClass, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, ...restProps }: FloatingLabelInputProps = $props();
@@ -136,17 +137,17 @@
   <div tabindex="-1" bind:this={dummyFocusDiv} class="sr-only"></div>
 {/if}
 
-<div class={cn(base(), isCombobox ? "relative" : "", className, (theme as FloatingLabelInputTheme)?.base)}>
-  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} aria-describedby={ariaDescribedby} class={cn(input(), inputClass, (theme as FloatingLabelInputTheme)?.input)} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} />
+<div class={base({ class: clsx(isCombobox ? "relative" : "", (theme as FloatingLabelInputTheme)?.base, className) })}>
+  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} aria-describedby={ariaDescribedby} class={input({ class: clsx((theme as FloatingLabelInputTheme)?.input, inputClass) })} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} />
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as FloatingLabelInputTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={closebutton({ class: clsx((theme as FloatingLabelInputTheme)?.closebutton, clearableClass) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(clearableSvgClass)} />
   {/if}
-  <label for={id} class={cn(label(), labelClass, (theme as FloatingLabelInputTheme)?.label)}>
+  <label for={id} class={label({ class: clsx((theme as FloatingLabelInputTheme)?.label, labelClass) })}>
     {@render children()}
   </label>
 
   {#if isCombobox && isFocused && filteredSuggestions.length > 0}
-    <div class={cn(combo(), comboClass, (theme as FloatingLabelInputTheme)?.combo)}>
+    <div class={combo({ class: clsx((theme as FloatingLabelInputTheme)?.combo, comboClass) })}>
       {#each filteredSuggestions as item, i}
         <button type="button" class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none" onclick={() => selectItem(item)} onmouseenter={() => (selectedIndex = i)}>
           {item}
@@ -160,7 +161,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L733)
+[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L719)
 ## Props
 @prop children
 @prop id = idGenerator()

package/dist/forms/floating-label/FloatingLabelInput.svelte.d.ts

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

package/dist/forms/floating-label/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type FloatingLabelInputVaratiants = VariantProps<typeof floatingLabelInput>;
 export declare const floatingLabelInput: import("tailwind-variants").TVReturnType<{
     variant: {
@@ -344,4 +345,4 @@ export declare const floatingLabelInput: import("tailwind-variants").TVReturnTyp
     combo: string;
 }, undefined, unknown, unknown, undefined>>;
 export type FloatingLabelInputSlots = keyof typeof floatingLabelInput.slots;
-export type FloatingLabelInputTheme = Partial<Record<FloatingLabelInputSlots, string>>;
+export type FloatingLabelInputTheme = Partial<Record<FloatingLabelInputSlots, ClassValue>>;

package/dist/forms/helper/Helper.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { helper } from ".";
-  import { type HelperProps, cn } from "../..";
+  import { type HelperProps } from "../..";
+  import clsx from "clsx";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, color = "gray", ...restProps }: HelperProps = $props();
 
   const theme = getTheme("helper");
 
-  const base = $derived(cn(helper({ color }), className, theme));
+  const base = $derived(helper({ color, class: clsx(theme, className) }));
 </script>
 
 <p {...restProps} class={base}>
@@ -18,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L756)
+[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L742)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/helper/Helper.svelte.d.ts

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

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type HelperVariants = VariantProps<typeof helper>;
 export declare const helper: import("tailwind-variants").TVReturnType<{
     color: {
@@ -73,4 +74,4 @@ export declare const helper: import("tailwind-variants").TVReturnType<{
         rose: string;
     };
 }, undefined, "text-xs font-normal text-gray-500 dark:text-gray-300", unknown, unknown, undefined>>;
-export type HelperTheme = string;
+export type HelperTheme = ClassValue;

package/dist/forms/input-addon/InputAddon.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { SizeType } from "../../types";
   import { getContext } from "svelte";
-  import { type InputAddonProps, clampSize, cn } from "../..";
+  import clsx from "clsx";
+  import { type InputAddonProps, clampSize } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, size, ...restProps }: InputAddonProps = $props();
@@ -32,7 +33,7 @@
   // size: explicit, inherited, default
   let _size = size || clampSize(group?.size) || "md";
 
-  let divClass: string = cn(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border", group && "not-first:-ms-px", "first:rounded-s-lg last:rounded-e-lg", className, theme);
+  let divClass: string = clsx(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border", group && "not-first:-ms-px", "first:rounded-s-lg last:rounded-e-lg", theme, className);
 </script>
 
 <div {...restProps} class={divClass}>
@@ -43,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L798)
+[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L784)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/input-addon/InputAddon.svelte.d.ts

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

package/dist/forms/input-field/Input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { CloseButton, type SizeType, type InputProps, type InputValue, cn } from "../..";
+  import clsx from "clsx";
+  import { CloseButton, type SizeType, type InputProps, type InputValue } from "../..";
   import { input, clampSize, type InputTheme } from ".";
   import { getTheme } from "../../theme/themeUtils";
 
@@ -208,9 +209,9 @@
 {/if}
 
 {#if isCombobox}
-  <div class={cn(isCombobox ? "relative w-full" : "", wrapperClass)}>
+  <div class={clsx(isCombobox ? "relative w-full" : "", wrapperClass)}>
     {#if right || left || clearable}
-      <div class={cn(base(), divClass, (theme as InputTheme)?.base)}>
+      <div class={base({ class: clsx((theme as InputTheme)?.base, divClass) })}>
         {@render inputContent()}
       </div>
     {:else}
@@ -218,10 +219,10 @@
     {/if}
 
     {#if isCombobox && isFocused && filteredSuggestions.length > 0}
-      <div class={cn(combo(), comboClass, (theme as InputTheme)?.combo)}>
+      <div class={combo({ class: clsx((theme as InputTheme)?.combo, comboClass) })}>
         {#each filteredSuggestions as item, i}
           <button type="button" class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none" onclick={() => selectItem(item)} onmouseenter={() => (selectedIndex = i)}>
-            <p class={cn(comboItem(), comboItemClass, (theme as InputTheme)?.comboItem)}>{item}</p>
+            <p class={comboItem({ class: clsx((theme as InputTheme)?.comboItem, comboItemClass) })}>{item}</p>
           </button>
         {/each}
       </div>
@@ -230,7 +231,7 @@
 {:else if group}
   {@render inputContent()}
 {:else if right || left || clearable}
-  <div class={cn(base(), divClass, (theme as InputTheme)?.base)}>
+  <div class={base({ class: clsx((theme as InputTheme)?.base, divClass) })}>
     {@render inputContent()}
   </div>
 {:else}
@@ -239,20 +240,20 @@
 
 {#snippet inputContent()}
   {#if left}
-    <div class={cn(leftCls(), leftClass, (theme as InputTheme)?.left)}>
+    <div class={leftCls({ class: clsx((theme as InputTheme)?.left, leftClass) })}>
       {@render left()}
     </div>
   {/if}
   {#if children}
     {@render children({ ...restProps, class: inputCls() })}
   {:else}
-    <input {...restProps} bind:value bind:this={elementRef} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} class={cn(inputCls(), className, (theme as InputTheme)?.input)} />
+    <input {...restProps} bind:value bind:this={elementRef} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} class={inputCls({ class: clsx((theme as InputTheme)?.input, className) })} />
     {#if value !== undefined && value !== "" && clearable}
-      <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as InputTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
+      <CloseButton onclick={clearAll} class={closebutton({ class: clsx((theme as InputTheme)?.closebutton, clearableClass) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(clearableSvgClass)} />
     {/if}
   {/if}
   {#if right}
-    <div class={cn(rightCls(), rightClass, (theme as InputTheme)?.right)}>
+    <div class={rightCls({ class: clsx((theme as InputTheme)?.right, rightClass) })}>
       {@render right()}
     </div>
   {/if}

package/dist/forms/input-field/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type InputVariants = VariantProps<typeof input>;
 export declare const input: import("tailwind-variants").TVReturnType<{
     size: {
@@ -290,4 +291,4 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     comboItem: string;
 }, undefined, unknown, unknown, undefined>>;
 export type InputSlots = keyof typeof input.slots;
-export type InputTheme = Partial<Record<InputSlots, string>>;
+export type InputTheme = Partial<Record<InputSlots, ClassValue>>;

package/dist/forms/label/Label.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { label } from ".";
-  import { type LabelProps, cn } from "../..";
+  import clsx from "clsx";
+  import { type LabelProps } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, color = "gray", show = true, class: className, ...restProps }: LabelProps = $props();
 
   const theme = getTheme("label");
 
-  let base = $derived(cn(label({ color }), className, theme));
+  let base = $derived(label({ color, class: clsx(theme, className) }));
 </script>
 
 {#if show}
@@ -22,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L813)
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L799)
 ## Props
 @prop children
 @prop color = "gray"

package/dist/forms/label/Label.svelte.d.ts

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

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type LabelVariants = VariantProps<typeof label>;
 export declare const label: import("tailwind-variants").TVReturnType<{
     color: {
@@ -73,4 +74,4 @@ export declare const label: import("tailwind-variants").TVReturnType<{
         rose: string;
     };
 }, undefined, "text-sm rtl:text-right font-medium block", unknown, unknown, undefined>>;
-export type LabelTheme = string;
+export type LabelTheme = ClassValue;

package/dist/forms/phoneinput/PhoneInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type PhoneInputProps, cn } from "../..";
+  import { type PhoneInputProps } from "../..";
   import { phoneinput, type PhoneInputTheme } from ".";
   import clsx from "clsx";
   import { getTheme } from "../../theme/themeUtils";
@@ -12,7 +12,7 @@
 </script>
 
 {#snippet phoneIconSnippet()}
-  <svg class={cn(phonesvg(), (theme as PhoneInputTheme)?.phonesvg)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
+  <svg class={phonesvg({ class: clsx((theme as PhoneInputTheme)?.phonesvg) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
     <path d="M18 13.446a3.02 3.02 0 0 0-.946-1.985l-1.4-1.4a3.054 3.054 0 0 0-4.218 0l-.7.7a.983.983 0 0 1-1.39 0l-2.1-2.1a.983.983 0 0 1 0-1.389l.7-.7a2.98 2.98 0 0 0 0-4.217l-1.4-1.4a2.824 2.824 0 0 0-4.218 0c-3.619 3.619-3 8.229 1.752 12.979C6.785 16.639 9.45 18 11.912 18a7.175 7.175 0 0 0 5.139-2.325A2.9 2.9 0 0 0 18 13.446Z" />
   </svg>
 {/snippet}
@@ -20,20 +20,20 @@
 {#if phoneType === "default" || phoneType === "countryCode"}
   <div class="relative">
     {#if phoneIcon}
-      <div class={cn(defaultDiv({ class: clsx(classes?.defaultDiv) }), (theme as PhoneInputTheme)?.defaultDiv)}>
+      <div class={defaultDiv({ class: clsx((theme as PhoneInputTheme)?.defaultDiv, classes?.defaultDiv) })}>
         {@render phoneIconSnippet()}
       </div>
     {/if}
-    <input type="tel" {pattern} {...restProps} class={cn(defaultInput({ class: clsx(classes?.defaultInput) }), (theme as PhoneInputTheme)?.defaultInput)} />
+    <input type="tel" {pattern} {...restProps} class={defaultInput({ class: clsx((theme as PhoneInputTheme)?.defaultInput, classes?.defaultInput) })} />
   </div>
 {:else if phoneType === "floating"}
   <div class="relative">
     {#if phoneIcon}
-      <span class={cn(floatingSpan({ class: clsx(classes?.floatingSpan) }), (theme as PhoneInputTheme)?.floatingSpan)}>
+      <span class={floatingSpan({ class: clsx((theme as PhoneInputTheme)?.floatingSpan, classes?.floatingSpan) })}>
         {@render phoneIconSnippet()}
       </span>
     {/if}
-    <input type="tel" class={cn(floatingInput({ class: clsx(classes?.floatingInput) }), (theme as PhoneInputTheme)?.floatingInput)} {pattern} {...restProps} />
-    <label for={labelFor} class={cn(labelFloating({ class: clsx(classes?.labelFloating) }), (theme as PhoneInputTheme)?.labelFloating)}>{floatingLabel}</label>
+    <input type="tel" class={floatingInput({ class: clsx((theme as PhoneInputTheme)?.floatingInput, classes?.floatingInput) })} {pattern} {...restProps} />
+    <label for={labelFor} class={labelFloating({ class: clsx((theme as PhoneInputTheme)?.labelFloating, classes?.labelFloating) })}>{floatingLabel}</label>
   </div>
 {/if}

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

@@ -83,4 +83,4 @@ export declare const phoneinput: import("tailwind-variants").TVReturnType<{
     labelFloating: string;
 }, undefined, unknown, unknown, undefined>>;
 export type PhoneInputSlots = keyof typeof phoneinput.slots;
-export type PhoneInputTheme = Partial<Record<PhoneInputSlots, string>>;
+export type PhoneInputTheme = Partial<Record<PhoneInputSlots, ClassValue>>;

package/dist/forms/radio/Radio.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" generics="T">
   import { getContext } from "svelte";
   import { radio, type RadioTheme } from ".";
-  import { type RadioProps, Label, cn } from "../..";
+  import clsx from "clsx";
+  import { type RadioProps, Label } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, "aria-describedby": ariaDescribedby, inline = false, labelClass, color = "primary", custom = false, group = $bindable<T>(), value = $bindable<T>(), inputClass, ...restProps }: RadioProps<T> = $props();
@@ -11,8 +12,8 @@
   const { input, label } = $derived(radio({ color, tinted: !!getContext("background"), custom, inline }));
 </script>
 
-<Label class={cn(label(), labelClass, (theme as RadioTheme)?.label)}>
-  <input type="radio" bind:group {value} aria-describedby={ariaDescribedby} {...restProps} class={cn(input(), inputClass, (theme as RadioTheme)?.input)} />
+<Label class={label({ class: clsx((theme as RadioTheme)?.label, labelClass) })}>
+  <input type="radio" bind:group {value} aria-describedby={ariaDescribedby} {...restProps} class={input({ class: clsx((theme as RadioTheme)?.input, inputClass) })} />
   {@render children?.()}
 </Label>
 

package/dist/forms/radio/RadioButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T">
-  import { Button, type RadioButtonProps, cn } from "../..";
+  import clsx from "clsx";
+  import { Button, type RadioButtonProps } from "../..";
   import { radiobutton } from ".";
   import { getTheme } from "../../theme/themeUtils";
 
@@ -9,7 +10,7 @@
 
   let inputEl: HTMLInputElement;
   let isChecked = $derived(value == group);
-  let base = $derived(cn(radiobutton({ inline }), className, isChecked && checkedClass, theme));
+  let base = $derived(radiobutton({ inline, class: clsx(isChecked && checkedClass, theme, className) }));
 
   function clickHandler() {
     inputEl?.click(); // manually trigger the click on the hidden input

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type RadioVariants = VariantProps<typeof radio>;
 export declare const radio: import("tailwind-variants").TVReturnType<{
     color: {
@@ -272,7 +273,7 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
     label: string;
 }, undefined, unknown, unknown, undefined>>;
 export type RadioSlots = keyof typeof radio.slots;
-export type RadioTheme = Partial<Record<RadioSlots, string>>;
+export type RadioTheme = Partial<Record<RadioSlots, ClassValue>>;
 export declare const radiobutton: import("tailwind-variants").TVReturnType<{
     inline: {
         true: string;
@@ -289,4 +290,4 @@ export declare const radiobutton: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
-export type RadioButtonTheme = string;
+export type RadioButtonTheme = ClassValue;

package/dist/forms/range/Range.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { range } from "./";
-  import { type RangeProps, cn } from "../..";
+  import clsx from "clsx";
+  import { type RangeProps } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { value = $bindable(), appearance = "none", color = "blue", size = "md", inputClass, ...restProps }: RangeProps = $props();
 
   const theme = getTheme("range");
 
-  const inputCls = $derived(cn(range({ appearance, color, size }), inputClass, theme));
+  const inputCls = $derived(range({ appearance, color, size, class: clsx(theme, inputClass) }));
 </script>
 
 <input type="range" bind:value {...restProps} class={inputCls} />
@@ -16,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L841)
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L827)
 ## Props
 @prop value = $bindable()
 @prop appearance = "none"

package/dist/forms/range/Range.svelte.d.ts

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

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type RangeVariants = VariantProps<typeof range>;
 export declare const range: import("tailwind-variants").TVReturnType<{
     size: {
@@ -64,4 +65,4 @@ export declare const range: import("tailwind-variants").TVReturnType<{
         none: string;
     };
 }, undefined, "w-full bg-gray-200 rounded-lg cursor-pointer dark:bg-gray-700", unknown, unknown, undefined>>;
-export type RangeTheme = string;
+export type RangeTheme = ClassValue;

package/dist/forms/search/Search.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { search, type SearchTheme } from ".";
-  import { CloseButton, type SearchProps, cn } from "../..";
+  import clsx from "clsx";
+  import { CloseButton, type SearchProps } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, inputClass, size, placeholder = "Search", value = $bindable(), elementRef = $bindable(), clearable = false, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: SearchProps = $props();
@@ -18,20 +19,20 @@
   };
 </script>
 
-<div class={cn(base(), (theme as SearchTheme)?.base)}>
-  <div class={cn(leftDiv(), (theme as SearchTheme)?.leftDiv)}>
-    <svg class={cn(icon(), (theme as SearchTheme)?.icon)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+<div class={base({ class: clsx((theme as SearchTheme)?.base) })}>
+  <div class={leftDiv({ class: clsx((theme as SearchTheme)?.leftDiv) })}>
+    <svg class={icon({ class: clsx((theme as SearchTheme)?.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="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
     </svg>
   </div>
-  <input type="search" bind:value bind:this={elementRef} class={cn(inputCls(), inputClass, (theme as SearchTheme)?.input)} {placeholder} required {...restProps} />
+  <input type="search" bind:value bind:this={elementRef} class={inputCls({ class: clsx((theme as SearchTheme)?.input, inputClass) })} {placeholder} required {...restProps} />
   {#if children}
-    <div class={cn(content(), (theme as SearchTheme)?.content)}>
+    <div class={content({ class: clsx((theme as SearchTheme)?.content) })}>
       {@render children()}
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as SearchTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={closebutton({ class: clsx((theme as SearchTheme)?.closebutton, clearableClass) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(clearableSvgClass)} />
   {/if}
 </div>
 
@@ -39,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L847)
+[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L833)
 ## Props
 @prop children
 @prop inputClass

package/dist/forms/search/Search.svelte.d.ts

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

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type SearchVariants = VariantProps<typeof search>;
 export declare const search: import("tailwind-variants").TVReturnType<{
     size: {
@@ -68,4 +69,4 @@ export declare const search: import("tailwind-variants").TVReturnType<{
     closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SearchSlots = keyof typeof search.slots;
-export type SearchTheme = Partial<Record<SearchSlots, string>>;
+export type SearchTheme = Partial<Record<SearchSlots, ClassValue>>;