flowbite-svelte 1.10.5 → 1.10.7

package/dist/footer/Footer.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
   import { footer } from ".";
-  import { type FooterProps, cn } from "..";
+  import clsx from "clsx";
+  import { type FooterProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, footerType = "default", class: className, ...restProps }: FooterProps = $props();
 
   const theme = getTheme("footer");
 
-  const footerCls = $derived(footer({ footerType }));
+  const footerCls = $derived(footer({ footerType, class: clsx(theme, className) }));
 </script>
 
-<footer {...restProps} class={cn(footerCls, className, theme)}>
+<footer {...restProps} class={footerCls}>
   {@render children()}
 </footer>
 
@@ -18,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L626)
+[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L609)
 ## Props
 @prop children
 @prop footerType = "default"

package/dist/footer/Footer.svelte.d.ts

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

package/dist/footer/FooterBrand.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { footerBrand, type FooterBrandTheme } from ".";
-  import { type FooterBrandProps, cn } from "..";
+  import clsx from "clsx";
+  import { type FooterBrandProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, aClass, spanClass, imgClass, href, src, alt, name, ...restProps }: FooterBrandProps = $props();
@@ -11,26 +12,26 @@
 </script>
 
 {#if href}
-  <a {...restProps} {href} class={cn(base(), aClass, (theme as FooterBrandTheme)?.base)}>
+  <a {...restProps} {href} class={base({ class: clsx((theme as FooterBrandTheme)?.base, aClass) })}>
     {#if src}
-      <img {src} class={cn(img(), imgClass, (theme as FooterBrandTheme)?.img)} {alt} />
+      <img {src} class={img({ class: clsx((theme as FooterBrandTheme)?.img, imgClass) })} {alt} />
     {/if}
     {#if name}
-      <span class={cn(span(), spanClass, (theme as FooterBrandTheme)?.span)}>{name}</span>
+      <span class={span({ class: clsx((theme as FooterBrandTheme)?.span, spanClass) })}>{name}</span>
     {/if}
     {#if children}
       {@render children()}
     {/if}
   </a>
 {:else}
-  <img {src} class={cn(img(), imgClass)} {alt} />
+  <img {src} class={img({ class: clsx(imgClass) })} {alt} />
 {/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L631)
+[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L614)
 ## Props
 @prop children
 @prop aClass

package/dist/footer/FooterBrand.svelte.d.ts

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

package/dist/footer/FooterCopyright.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { footerCopyright, type FooterCopyrightTheme } from ".";
-  import { type FooterCopyrightProps, cn } from "..";
+  import clsx from "clsx";
+  import { type FooterCopyrightProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { spanClass, aClass, href, by, copyrightMessage = "All Rights Reserved.", year, bySpanClass, ...restProps }: FooterCopyrightProps = $props();
@@ -12,14 +13,14 @@
   const { base, link, bySpan } = footerCopyright();
 </script>
 
-<span class={cn(base(), spanClass, (theme as FooterCopyrightTheme)?.base)}>
+<span class={base({ class: clsx((theme as FooterCopyrightTheme)?.base, spanClass) })}>
   &copy; {year}
   {#if href}
-    <a {...restProps} {href} class={cn(link(), aClass, (theme as FooterCopyrightTheme)?.link)}>
+    <a {...restProps} {href} class={link({ class: clsx((theme as FooterCopyrightTheme)?.link, aClass) })}>
       {by}
     </a>
   {:else}
-    <span class={cn(bySpan(), bySpanClass, (theme as FooterCopyrightTheme)?.bySpan)}>{by}</span>
+    <span class={bySpan({ class: clsx((theme as FooterCopyrightTheme)?.bySpan, bySpanClass) })}>{by}</span>
   {/if}
   {copyrightMessage}
 </span>
@@ -28,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L642)
+[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L625)
 ## Props
 @prop spanClass
 @prop aClass

package/dist/footer/FooterCopyright.svelte.d.ts

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

package/dist/footer/FooterIcon.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { footerIcon } from ".";
-  import { type FooterIconProps, cn } from "..";
+  import clsx from "clsx";
+  import { type FooterIconProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, href, ariaLabel, class: className, ...restProps }: FooterIconProps = $props();
@@ -9,7 +10,7 @@
 </script>
 
 {#if href}
-  <a {...restProps} {href} aria-label={ariaLabel} class={cn(footerIcon(), className, theme)}>
+  <a {...restProps} {href} aria-label={ariaLabel} class={footerIcon({ class: clsx(theme, className) })}>
     {@render children()}
   </a>
 {:else}
@@ -20,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L652)
+[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L635)
 ## Props
 @prop children
 @prop href

package/dist/footer/FooterIcon.svelte.d.ts

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

package/dist/footer/FooterLink.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { footerLink, type FooterLinkTheme } from ".";
-  import { type FooterLinkProps, cn } from "..";
+  import clsx from "clsx";
+  import { type FooterLinkProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, liClass, aClass, href, ...restProps }: FooterLinkProps = $props();
@@ -10,8 +11,8 @@
   const { base, link } = footerLink();
 </script>
 
-<li class={cn(base(), liClass, (theme as FooterLinkTheme)?.base)}>
-  <a {...restProps} {href} class={cn(link(), aClass, (theme as FooterLinkTheme)?.link)}>
+<li class={base({ class: clsx((theme as FooterLinkTheme)?.base, liClass) })}>
+  <a {...restProps} {href} class={link({ class: clsx((theme as FooterLinkTheme)?.link, aClass) })}>
     {@render children()}
   </a>
 </li>
@@ -20,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L662)
+[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L645)
 ## Props
 @prop children
 @prop liClass

package/dist/footer/FooterLink.svelte.d.ts

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

package/dist/footer/FooterLinkGroup.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { footerLinkGroup } from ".";
-  import { type FooterLinkGroupProps, cn } from "..";
+  import clsx from "clsx";
+  import { type FooterLinkGroupProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { class: className, children, ...restProps }: FooterLinkGroupProps = $props();
@@ -8,7 +9,7 @@
   const theme = getTheme("footerLinkGroup");
 </script>
 
-<ul {...restProps} class={cn(footerLinkGroup(), className, theme)}>
+<ul {...restProps} class={footerLinkGroup({ class: clsx(theme, className) })}>
   {@render children()}
 </ul>
 
@@ -16,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L658)
+[FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L641)
 ## Props
 @prop class: className
 @prop children

package/dist/footer/FooterLinkGroup.svelte.d.ts

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

package/dist/footer/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 export declare const footer: import("tailwind-variants").TVReturnType<{
     footerType: {
         default: string;
@@ -23,7 +24,7 @@ export declare const footer: import("tailwind-variants").TVReturnType<{
         sticky: string;
     };
 }, undefined, "bg-white dark:bg-gray-800", unknown, unknown, undefined>>;
-export type FooterTheme = string;
+export type FooterTheme = ClassValue;
 export declare const footerBrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -62,7 +63,7 @@ export declare const footerBrand: import("tailwind-variants").TVReturnType<{
     img: string;
 }, undefined, unknown, unknown, undefined>>;
 export type FooterBrandSlots = keyof typeof footerBrand.slots;
-export type FooterBrandTheme = Partial<Record<FooterBrandSlots, string>>;
+export type FooterBrandTheme = Partial<Record<FooterBrandSlots, ClassValue>>;
 export declare const footerCopyright: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -101,11 +102,11 @@ export declare const footerCopyright: import("tailwind-variants").TVReturnType<{
     bySpan: string;
 }, undefined, unknown, unknown, undefined>>;
 export type FooterCopyrightSlots = keyof typeof footerCopyright.slots;
-export type FooterCopyrightTheme = Partial<Record<FooterCopyrightSlots, string>>;
+export type FooterCopyrightTheme = Partial<Record<FooterCopyrightSlots, ClassValue>>;
 export declare const footerIcon: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 hover:text-gray-900 dark:hover:text-white", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 hover:text-gray-900 dark:hover:text-white", unknown, unknown, undefined>>;
-export type FooterIconTheme = string;
+export type FooterIconTheme = ClassValue;
 export declare const footerLinkGroup: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-600 dark:text-gray-400", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-600 dark:text-gray-400", unknown, unknown, undefined>>;
-export type FooterLinkGroupTheme = string;
+export type FooterLinkGroupTheme = ClassValue;
 export declare const footerLink: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -138,4 +139,4 @@ export declare const footerLink: import("tailwind-variants").TVReturnType<{
     link: string;
 }, undefined, unknown, unknown, undefined>>;
 export type FooterLinkSlots = keyof typeof footerLink.slots;
-export type FooterLinkTheme = Partial<Record<FooterLinkSlots, string>>;
+export type FooterLinkTheme = Partial<Record<FooterLinkSlots, ClassValue>>;

package/dist/forms/button-toggle/ButtonToggle.svelte

@@ -3,7 +3,8 @@
   import CheckIcon from "./CheckIcon.svelte";
   import { buttonToggle, type ButtonToggleTheme } from ".";
   import type { ButtonToggleVariants } from "./theme";
-  import { type ButtonToggleProps, type ButtonToggleContext, cn } from "../..";
+  import clsx from "clsx";
+  import { type ButtonToggleProps, type ButtonToggleContext } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { value, selected = false, children, iconSlot, color, class: className, iconClass, txtClass, contentClass, ...restProps }: ButtonToggleProps = $props();
@@ -16,7 +17,7 @@
   const size = getContext<ButtonToggleVariants["size"]>("buttonToggleSize");
   const roundedSize = getContext<ButtonToggleVariants["roundedSize"]>("buttonToggleRounded");
   const ctxIconClass = getContext<string | undefined>("ctxIconClass");
-  const actualIconClass = ctxIconClass || cn(iconClass);
+  const actualIconClass = ctxIconClass || clsx(iconClass);
   const ctxBtnClass = getContext<string | undefined>("ctxBtnClass");
 
   function handleClick() {
@@ -28,16 +29,16 @@
   });
 </script>
 
-<button type="button" class={cn(buttonToggle.button({ selected, color: actualColor, size, roundedSize }), ctxBtnClass, className, (theme as ButtonToggleTheme)?.button)} data-selected={selected} onclick={handleClick} role={multiSelect ? "checkbox" : "radio"} aria-checked={selected} {...restProps}>
-  <div class={cn(buttonToggle.content(), contentClass, (theme as ButtonToggleTheme)?.content)}>
+<button type="button" class={buttonToggle.button({ selected, color: actualColor, size, roundedSize, class: clsx((theme as ButtonToggleTheme)?.button, ctxBtnClass, className) })} data-selected={selected} onclick={handleClick} role={multiSelect ? "checkbox" : "radio"} aria-checked={selected} {...restProps}>
+  <div class={buttonToggle.content({ class: clsx((theme as ButtonToggleTheme)?.content, contentClass) })}>
     {#if selected}
       {#if iconSlot}
         {@render iconSlot()}
       {:else}
-        <CheckIcon class={cn("absolute left-0 flex-shrink-0 text-green-600", actualIconClass)} />
+        <CheckIcon class={clsx("absolute left-0 flex-shrink-0 text-green-600", actualIconClass)} />
       {/if}
     {/if}
-    <span class={cn(buttonToggle.text({ selected }), txtClass, (theme as ButtonToggleTheme)?.text)}>
+    <span class={buttonToggle.text({ selected, class: clsx((theme as ButtonToggleTheme)?.text, txtClass) })}>
       {@render children()}
     </span>
   </div>
@@ -47,7 +48,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L368)
+[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L351)
 ## Props
 @prop value
 @prop selected = false

package/dist/forms/button-toggle/ButtonToggle.svelte.d.ts

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

package/dist/forms/button-toggle/ButtonToggleGroup.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import { type ButtonToggleGroupProps, buttonToggleGroup, cn } from "../..";
+  import clsx from "clsx";
+  import { type ButtonToggleGroupProps, buttonToggleGroup } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { multiSelect = false, name = "toggle-group", value = multiSelect ? [] : null, color, size = "md", roundedSize = "md", onSelect = (val: any) => {}, children, ctxIconClass, ctxBtnClass, class: className, ...restProps }: ButtonToggleGroupProps = $props();
 
   const theme = getTheme("buttonToggleGroup");
 
-  const base = $derived(buttonToggleGroup({ roundedSize }));
+  const base = $derived(buttonToggleGroup({ roundedSize, class: clsx(theme, className) }));
   type SelectedValue = string | null | string[];
 
   let selectedValues = $state<SelectedValue>(multiSelect ? [] : null);
@@ -59,12 +60,12 @@
   setContext("buttonToggleColor", color);
   setContext("buttonToggleSize", size);
   setContext("buttonToggleRounded", roundedSize);
-  setContext("ctxIconClass", cn(ctxIconClass));
-  setContext("ctxBtnClass", cn(ctxBtnClass));
+  setContext("ctxIconClass", clsx(ctxIconClass));
+  setContext("ctxBtnClass", clsx(ctxBtnClass));
 </script>
 
 <div class="inline">
-  <div class={cn(base, className, theme)} role={multiSelect ? "group" : "radiogroup"} aria-label={name} {...restProps}>
+  <div class={base} role={multiSelect ? "group" : "radiogroup"} aria-label={name} {...restProps}>
     {@render children()}
   </div>
 </div>

package/dist/forms/button-toggle/CheckIcon.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { type CheckIconProps, cn } from "../..";
+  import { type CheckIconProps } from "../..";
+  import clsx from "clsx";
   let { class: className, ...restProps }: CheckIconProps = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cn(className)} {...restProps}>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={clsx(className)} {...restProps}>
   <polyline points="20 6 9 17 4 12"></polyline>
 </svg>
 
@@ -11,7 +12,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L384)
+[CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L367)
 ## Props
 @prop class: className
 @prop ...restProps

package/dist/forms/button-toggle/CheckIcon.svelte.d.ts

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

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export declare const buttonToggleGroup: import("tailwind-variants").TVReturnType<{
     roundedSize: {
         sm: string;
@@ -24,7 +25,7 @@ export declare const buttonToggleGroup: import("tailwind-variants").TVReturnType
         full: string;
     };
 }, undefined, "inline-flex border border-gray-300 overflow-hidden", unknown, unknown, undefined>>;
-export type ButtonToggleGroupTheme = string;
+export type ButtonToggleGroupTheme = ClassValue;
 export declare const buttonToggle: {
     button: import("tailwind-variants").TVReturnType<{
         selected: {
@@ -169,9 +170,9 @@ export declare const buttonToggle: {
     }, undefined, "transition-all duration-200 ml-0", unknown, unknown, undefined>>;
 };
 export type ButtonToggleTheme = {
-    button?: string;
-    content?: string;
-    text?: string;
+    button?: ClassValue;
+    content?: ClassValue;
+    text?: ClassValue;
 };
 export type ButtonToggleVariants = VariantProps<typeof buttonToggle.button>;
 export type ButtonToggleContentVariants = VariantProps<typeof buttonToggle.content>;

package/dist/forms/checkbox/Checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { checkbox, type CheckboxTheme } from ".";
-  import { type CheckboxProps, type CheckboxItem, Label, cn } from "../..";
+  import clsx from "clsx";
+  import { type CheckboxProps, type CheckboxItem, Label } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, color = "primary", custom, inline, tinted, rounded, group = $bindable([]), choices = [], checked = $bindable(false), indeterminate, class: className, divClass, disabled = false, value, labelProps = {}, ...restProps }: CheckboxProps = $props();
@@ -23,17 +24,17 @@
 
 {#if choices.length > 0}
   {#each choices as choice, i}
-    <div class={cn(divStyle(), divClass, (theme as CheckboxTheme)?.div)}>
+    <div class={divStyle({ class: clsx((theme as CheckboxTheme)?.div, divClass) })}>
       <Label show={true} {...labelProps}>
-        <input type="checkbox" value={choice.value} checked={choice.checked ?? false} {disabled} bind:group {...restProps} class={cn(base(), className, (theme as CheckboxTheme)?.base)} />
+        <input type="checkbox" value={choice.value} checked={choice.checked ?? false} {disabled} bind:group {...restProps} class={base({ class: clsx((theme as CheckboxTheme)?.base, className) })} />
         {renderLabel(choice)}
       </Label>
     </div>
   {/each}
 {:else}
-  <div class={cn(divStyle(), divClass, (theme as CheckboxTheme)?.div)}>
+  <div class={divStyle({ class: clsx((theme as CheckboxTheme)?.div, divClass) })}>
     <Label show={true} {...labelProps}>
-      <input type="checkbox" {value} bind:checked {indeterminate} {disabled} {...restProps} class={cn(base(), className, (theme as CheckboxTheme)?.base)} />
+      <input type="checkbox" {value} bind:checked {indeterminate} {disabled} {...restProps} class={base({ class: clsx((theme as CheckboxTheme)?.base, className) })} />
       {#if children}
         {@render children({ value, checked, disabled })}
       {/if}

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Button from "../../buttons/Button.svelte";
-  import { type CheckboxButtonProps, cn } from "../..";
+  import clsx from "clsx";
+  import { type CheckboxButtonProps } from "../..";
   import { checkboxbutton } from "./theme";
   import { getTheme } from "../../theme/themeUtils";
 
@@ -45,7 +46,7 @@
     }
   }
 
-  let buttonClass: string = $derived(cn(checkboxbutton({ inline, checked }), className, theme));
+  let buttonClass: string = $derived(checkboxbutton({ inline, checked, class: clsx(theme, className) }));
 </script>
 
 <Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
@@ -57,7 +58,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L700)
+[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L683)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/checkbox/CheckboxButton.svelte.d.ts

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

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type CheckboxVariants = VariantProps<typeof checkbox>;
 export declare const checkbox: import("tailwind-variants").TVReturnType<{
     color: {
@@ -290,7 +291,7 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
     div: string;
 }, undefined, unknown, unknown, undefined>>;
 export type CheckboxSlots = keyof typeof checkbox.slots;
-export type CheckboxTheme = Partial<Record<CheckboxSlots, string>>;
+export type CheckboxTheme = Partial<Record<CheckboxSlots, ClassValue>>;
 export declare const checkboxbutton: import("tailwind-variants").TVReturnType<{
     inline: {
         true: string;
@@ -316,4 +317,4 @@ export declare const checkboxbutton: import("tailwind-variants").TVReturnType<{
         true: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
-export type CheckboxButtonTheme = string;
+export type CheckboxButtonTheme = ClassValue;

package/dist/forms/dropzone/Dropzone.svelte

@@ -1,72 +1,64 @@
 <script lang="ts">
   import type { DragEventHandler, ChangeEventHandler } from "svelte/elements";
   import { dropzone } from ".";
-  import { type DropzoneProps, cn } from "../..";
+  import clsx from "clsx";
+  import { type DropzoneProps } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   type HTMLInputElementWithFiles = HTMLInputElement & { files: FileList | null };
 
-  let { children, files = $bindable<FileList | null>(), class: className, ...restProps }: DropzoneProps = $props();
+  let { children, files = $bindable<FileList | null>(), class: className, onDrop, onDragOver, onChange, ...restProps }: DropzoneProps = $props();
 
   const theme = getTheme("dropzone");
 
-  let input: HTMLInputElement;
+  let inputElement: HTMLInputElement;
 
-  function keydown(ev: KeyboardEvent) {
-    if ([" ", "Enter"].includes(ev.key)) {
-      ev.preventDefault();
-      input.click();
-    }
-  }
-
-  function onClick(event: MouseEvent) {
+  const handleDrop: DragEventHandler<HTMLLabelElement> = function (this: Window, event) {
     event.preventDefault();
-    input.click();
-  }
 
-  const onDrop: DragEventHandler<HTMLButtonElement> = function (this: Window, event) {
-    event.preventDefault();
-
-    // When files are dropped, update the files binding
     if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
       files = event.dataTransfer.files;
+      if (inputElement) {
+        inputElement.files = event.dataTransfer.files;
+      }
     }
 
-    // Then call any custom ondrop handler
-    if (ondrop) {
-      ondrop.call(this, event);
+    if (onDrop) {
+      onDrop.call(this, event);
     }
   };
 
-  const onDragOver: DragEventHandler<HTMLButtonElement> = function (this: Window, event) {
+  const handleDragOver: DragEventHandler<HTMLLabelElement> = function (this: Window, event) {
     event.preventDefault();
-    if (ondragover) {
-      ondragover.call(this, event);
+    if (onDragOver) {
+      onDragOver.call(this, event);
     }
   };
 
-  const onChange: ChangeEventHandler<HTMLInputElementWithFiles> = function (this: Window, event) {
-    if (onchange) {
-      onchange.call(this, event);
+  const handleChange: ChangeEventHandler<HTMLInputElementWithFiles> = function (this: Window, event) {
+    if (onChange) {
+      onChange.call(this, event);
     }
   };
 </script>
 
-<button class={cn(dropzone(), className, theme)} onkeydown={keydown} onclick={onClick} ondrop={onDrop} ondragover={onDragOver} type="button">
+<label class={dropzone({ class: clsx(theme, className) })} ondrop={handleDrop} ondragover={handleDragOver}>
   {@render children()}
-</button>
-<label class="hidden">
-  <input {...restProps} bind:files bind:this={input} onchange={onChange} type="file" />
+
+  <input {...restProps} bind:files bind:this={inputElement} onchange={handleChange} type="file" class="hidden" />
 </label>
 
 <!--
 @component
 [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
 -->