flowbite-svelte 1.10.5 → 1.10.7

package/dist/kbd/Kbd.svelte

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

package/dist/kbd/Kbd.svelte.d.ts

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

package/dist/kbd/theme.d.ts

@@ -1,2 +1,3 @@
+import type { ClassValue } from "svelte/elements";
 export declare const kbd: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500", unknown, unknown, undefined>>;
-export type KbdTheme = string;
+export type KbdTheme = ClassValue;

package/dist/list-group/Listgroup.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { listGroup } from ".";
-  import { type ListgroupProps, ListgroupItem, cn } from "..";
+  import clsx from "clsx";
+  import { type ListgroupProps, ListgroupItem } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, items, active, onclick, horizontal, rounded, border, class: className, itemClass, iconClass, ...restProps }: ListgroupProps = $props();
 
   const theme = getTheme("listgroup");
 
-  const base = $derived(listGroup({ rounded, border, horizontal }));
+  const base = $derived(listGroup({ rounded, border, horizontal, class: clsx(theme, className) }));
 
   let tag = active ? "div" : "ul";
   setContext("listGrpActive", active);
@@ -25,15 +26,15 @@
   }
 </script>
 
-<svelte:element this={tag} {...restProps} class={cn(base, className, theme)}>
+<svelte:element this={tag} {...restProps} class={base}>
   {#if items?.length}
     {#each items as item}
       {#if children}
         {@render children(item)}
       {:else if typeof item === "string"}
-        <ListgroupItem href={undefined} class={cn(itemClass)} iconClass={cn(iconClass)} {active} {horizontal} onclick={createItemClickHandler(item)}>{item}</ListgroupItem>
+        <ListgroupItem href={undefined} class={clsx(itemClass)} iconClass={clsx(iconClass)} {active} {horizontal} onclick={createItemClickHandler(item)}>{item}</ListgroupItem>
       {:else}
-        <ListgroupItem href={item.href} class={cn(itemClass)} iconClass={cn(iconClass)} {active} {horizontal} {...item} onclick={item.onclick ?? createItemClickHandler(item)} />
+        <ListgroupItem href={item.href} class={clsx(itemClass)} iconClass={clsx(iconClass)} {active} {horizontal} {...item} onclick={item.onclick ?? createItemClickHandler(item)} />
       {/if}
     {/each}
   {:else}
@@ -45,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1026)
+[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1012)
 ## Props
 @prop children
 @prop items

package/dist/list-group/Listgroup.svelte.d.ts

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

package/dist/list-group/ListgroupItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { type ListgroupItemProps, cn } from "..";
+  import clsx from "clsx";
+  import { type ListgroupItemProps } from "..";
   import { listGroupItem, type ListgroupItemVariants } from "./theme";
   import { getTheme } from "../theme/themeUtils";
 
@@ -12,12 +13,12 @@
   horizontal = horizontal ?? getContext("listGrpHorizontal");
 
   let state: ListgroupItemVariants["state"] = $derived(disabled ? "disabled" : current ? "current" : "normal");
-  let itemClass = $derived(listGroupItem({ state, active, horizontal }));
+  let itemClass = $derived(listGroupItem({ state, active, horizontal, class: clsx(theme, className) }));
 </script>
 
 {#snippet nameOrChildren()}
   {#if Icon}
-    <Icon class={cn(iconClass)} />
+    <Icon class={clsx(iconClass)} />
   {/if}
   {#if children}
     {@render children()}
@@ -27,15 +28,15 @@
 {/snippet}
 
 {#if restProps.href === undefined && !active}
-  <li class={cn(itemClass, className, theme)}>
+  <li class={itemClass}>
     {@render nameOrChildren()}
   </li>
 {:else if restProps.href === undefined}
-  <button type="button" {...restProps} class={cn(itemClass, className, theme)} {disabled} aria-current={current}>
+  <button type="button" {...restProps} class={itemClass} {disabled} aria-current={current}>
     {@render nameOrChildren()}
   </button>
 {:else}
-  <a {...restProps} class={cn(itemClass, className, theme)} aria-current={current}>
+  <a {...restProps} class={itemClass} aria-current={current}>
     {@render nameOrChildren()}
   </a>
 {/if}
@@ -44,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1037)
+[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1023)
 ## Props
 @prop children
 @prop active

package/dist/list-group/ListgroupItem.svelte.d.ts

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

package/dist/list-group/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type ListgroupVariants = VariantProps<typeof listGroup>;
 export declare const listGroup: import("tailwind-variants").TVReturnType<{
     rounded: {
@@ -40,7 +41,7 @@ export declare const listGroup: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "flex bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600", unknown, unknown, undefined>>;
-export type ListGroupTheme = string;
+export type ListGroupTheme = ClassValue;
 export type ListgroupItemVariants = VariantProps<typeof listGroupItem>;
 export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
     state: {
@@ -85,4 +86,4 @@ export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left gap-2", unknown, unknown, undefined>>;
-export type ListGroupItemTheme = string;
+export type ListGroupItemTheme = ClassValue;

package/dist/mega-menu/MegaMenu.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { megamenu, type MegaMenuTheme } from "./theme";
-  import { type MegaMenuProps, type LinkType, Popper, cn } from "..";
+  import clsx from "clsx";
+  import { type MegaMenuProps, type LinkType, Popper } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, extra, items = [], full, ulClass, isOpen = $bindable(false), class: className, extraClass, ...restProps }: MegaMenuProps = $props();
@@ -15,9 +16,9 @@
   const { base, div, ul, extra: extraCls } = $derived(megamenu({ full, extra: !!extra }));
 </script>
 
-<Popper color={full ? "default" : "dropdown"} arrow={false} bind:isOpen trigger="click" placement="bottom" yOnly={full} {...restProps} class={cn(base(), className, (theme as MegaMenuTheme)?.base)}>
-  <div class={cn(div(), (theme as MegaMenuTheme)?.div)}>
-    <ul class={cn(ul(), ulClass, (theme as MegaMenuTheme)?.ul)}>
+<Popper color={full ? "default" : "dropdown"} arrow={false} bind:isOpen trigger="click" placement="bottom" yOnly={full} {...restProps} class={base({ class: clsx((theme as MegaMenuTheme)?.base, className) })}>
+  <div class={div({ class: clsx((theme as MegaMenuTheme)?.div) })}>
+    <ul class={ul({ class: clsx((theme as MegaMenuTheme)?.ul, ulClass) })}>
       {#each items as item, index}
         <li>
           {@render children({ item, index })}
@@ -26,7 +27,7 @@
         {@render children({ item: items[0], index: 0 })}
       {/each}
     </ul>
-    {#if full && extra}<div class={cn(extraCls(), extraClass, (theme as MegaMenuTheme)?.extra)}>{@render extra()}</div>{/if}
+    {#if full && extra}<div class={extraCls({ class: clsx((theme as MegaMenuTheme)?.extra, extraClass) })}>{@render extra()}</div>{/if}
   </div>
 </Popper>
 
@@ -34,7 +35,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1048)
+[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1034)
 ## Props
 @prop children
 @prop extra

package/dist/mega-menu/MegaMenu.svelte.d.ts

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

package/dist/mega-menu/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 export declare const megamenu: import("tailwind-variants").TVReturnType<{
     full: {
         true: {
@@ -42,4 +43,4 @@ export declare const megamenu: import("tailwind-variants").TVReturnType<{
     extra: string;
 }, undefined, unknown, unknown, undefined>>;
 export type MegaMenuSlots = keyof typeof megamenu.slots;
-export type MegaMenuTheme = Partial<Record<MegaMenuSlots, string>>;
+export type MegaMenuTheme = Partial<Record<MegaMenuSlots, ClassValue>>;

package/dist/modal/Modal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type ModalProps, type ParamsType, CloseButton, trapFocus, cn } from "..";
+  import { type ModalProps, type ParamsType, CloseButton, trapFocus } from "..";
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
   import { fade } from "svelte/transition";
@@ -84,7 +84,7 @@
 
 {#snippet content()}
   {#if title || header}
-    <div class={cn(headerCls({ class: clsx(headerClass) }), (theme as ModalTheme)?.header)}>
+    <div class={headerCls({ class: clsx((theme as ModalTheme)?.header, headerClass) })}>
       {#if title}
         <h3>{title}</h3>
         {#if dismissable && !permanent}
@@ -95,23 +95,23 @@
       {/if}
     </div>
   {/if}
-  <div class={cn(body({ class: clsx(bodyClass) }), (theme as ModalTheme)?.body)}>
+  <div class={body({ class: clsx((theme as ModalTheme)?.body, bodyClass) })}>
     {@render children?.()}
   </div>
   {#if footer}
-    <div class={cn(footerCls({ class: clsx(footerClass) }), (theme as ModalTheme)?.footer)}>
+    <div class={footerCls({ class: clsx((theme as ModalTheme)?.footer, footerClass) })}>
       {@render footer()}
     </div>
   {/if}
   {#if dismissable && !permanent && !title}
-    <CloseButton type="submit" formnovalidate onclick={close_handler(form)} class={cn(closebutton({ class: clsx(closeBtnClass) }), (theme as ModalTheme)?.closebutton)} />
+    <CloseButton type="submit" formnovalidate onclick={close_handler(form)} class={closebutton({ class: clsx((theme as ModalTheme)?.closebutton, closeBtnClass) })} />
   {/if}
 {/snippet}
 
 {#if open}
-  <dialog {@attach init} use:focusTrap class={cn(base({ class: clsx(className) }), (theme as ModalTheme)?.base)} tabindex="-1" onsubmit={_onsubmit} oncancel={_oncancel} onclick={_onclick} ontoggle={_ontoggle} transition:transition|global={paramsOptions as ParamsType} {...restProps}>
+  <dialog {@attach init} use:focusTrap class={base({ class: clsx((theme as ModalTheme)?.base, className) })} tabindex="-1" onsubmit={_onsubmit} oncancel={_oncancel} onclick={_onclick} ontoggle={_ontoggle} transition:transition|global={paramsOptions as ParamsType} {...restProps}>
     {#if form}
-      <form method="dialog" class={cn(formCls(), (theme as ModalTheme)?.form)}>
+      <form method="dialog" class={formCls({ class: clsx((theme as ModalTheme)?.form) })}>
         {@render content()}
       </form>
     {:else}
@@ -124,7 +124,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1059)
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1045)
 ## Props
 @prop children
 @prop onaction = ()

package/dist/modal/Modal.svelte.d.ts

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

package/dist/modal/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type ModalVariants = VariantProps<typeof modal>;
 export declare const modal: import("tailwind-variants").TVReturnType<{
     placement: {
@@ -164,4 +165,4 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ModalSlots = keyof typeof modal.slots;
-export type ModalTheme = Partial<Record<ModalSlots, string>>;
+export type ModalTheme = Partial<Record<ModalSlots, ClassValue>>;

package/dist/navbar/Menu.svelte

@@ -2,7 +2,6 @@
   import type { MenuProps } from "../types";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
-  import { cn } from "..";
 
   let { size = "24", color = "currentColor", variation = "outline", ariaLabel = "bars 3", class: className, ...restProps }: MenuProps = $props();
 
@@ -29,7 +28,7 @@
   });
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" role="button" tabindex="0" width={size} height={size} class={cn(clsx(className), theme)} {...restProps} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2">
+<svg xmlns="http://www.w3.org/2000/svg" role="button" tabindex="0" width={size} height={size} class={clsx(theme, className)} {...restProps} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2">
   {@html svgpath}
 </svg>
 
@@ -37,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1080)
+[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1066)
 ## Props
 @prop size = "24"
 @prop color = "currentColor"

package/dist/navbar/Menu.svelte.d.ts

@@ -2,7 +2,7 @@ import type { MenuProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1080)
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1066)
  * ## Props
  * @prop size = "24"
  * @prop color = "currentColor"

package/dist/navbar/NavBrand.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import clsx from "clsx";
-  import { cn } from "..";
   import { navbarBrand } from "./theme";
   import type { NavBrandProps } from "../types";
   import { getTheme } from "../theme/themeUtils";
@@ -10,7 +9,7 @@
   const theme = getTheme("navBrand");
 </script>
 
-<a {...restProps} class={cn(navbarBrand(), clsx(className), theme)}>
+<a {...restProps} class={navbarBrand({ class: clsx(theme, className) })}>
   {@render children?.()}
 </a>
 
@@ -18,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1100)
+[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1086)
 ## Props
 @prop children
 @prop class: className

package/dist/navbar/NavBrand.svelte.d.ts

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

package/dist/navbar/NavContainer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import clsx from "clsx";
   import { navbarContainer } from "./theme";
   import type { NavContainerProps } from "../types";
@@ -10,7 +9,7 @@
   const theme = getTheme("navContainer");
 </script>
 
-<div {...restProps} class={cn(navbarContainer({ fluid }), clsx(clasName), theme)}>
+<div {...restProps} class={navbarContainer({ fluid, class: clsx(theme, clasName) })}>
   {@render children?.()}
 </div>
 
@@ -18,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1102)
+[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1088)
 ## Props
 @prop children
 @prop fluid

package/dist/navbar/NavContainer.svelte.d.ts

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

package/dist/navbar/NavHamburger.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import clsx from "clsx";
   import { getContext } from "svelte";
   import ToolbarButton from "../toolbar/ToolbarButton.svelte";
@@ -21,15 +20,15 @@
   };
 </script>
 
-<ToolbarButton {name} onclick={onclick || toggle} {...restProps} class={cn(base(), clsx(className), (theme as NavbarHamburgerTheme)?.base)}>
-  <Menu class={cn(menu(), clsx(menuClass), (theme as NavbarHamburgerTheme)?.menu)} />
+<ToolbarButton {name} onclick={onclick || toggle} {...restProps} class={base({ class: clsx((theme as NavbarHamburgerTheme)?.base, className) })}>
+  <Menu class={menu({ class: clsx((theme as NavbarHamburgerTheme)?.menu, menuClass) })} />
 </ToolbarButton>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1106)
+[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1092)
 ## Props
 @prop children
 @prop onclick

package/dist/navbar/NavHamburger.svelte.d.ts

@@ -1,8 +1,7 @@
-import clsx from "clsx";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1106)
+ * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1092)
  * ## Props
  * @prop children
  * @prop onclick
@@ -17,7 +16,7 @@ declare const NavHamburger: import("svelte").Component<import("../toolbar/theme"
     name?: string;
 } & {
     href?: undefined;
-    menuClass?: clsx.ClassValue;
+    menuClass?: import("svelte/elements").ClassValue;
 }, {}, "">;
 type NavHamburger = ReturnType<typeof NavHamburger>;
 export default NavHamburger;

package/dist/navbar/NavLi.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import clsx from "clsx";
   import { getContext } from "svelte";
   import { navbarLi } from "./theme";
@@ -20,7 +19,7 @@
   });
 
   let active = $derived(navUrl ? restProps.href === navUrl : false);
-  let liClass = $derived(cn(navbarLi({ hidden: navState.hidden }), clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), className), theme));
+  let liClass = $derived(navbarLi({ hidden: navState.hidden, class: clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), theme, className) }));
 </script>
 
 <li>
@@ -39,7 +38,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1126)
+[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1112)
 ## Props
 @prop children
 @prop activeClass

package/dist/navbar/NavLi.svelte.d.ts

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

package/dist/navbar/NavUl.svelte

@@ -4,7 +4,6 @@
   import { prefersReducedMotion } from "svelte/motion";
   import { writable } from "svelte/store";
   import { slide, fly, fade, scale } from "svelte/transition";
-  import { cn } from "..";
   import clsx from "clsx";
   import { navbarUl, type NavbarUlTheme } from "./theme";
   import type { NavbarState, NavUlProps } from "../types";
@@ -44,8 +43,8 @@
   let { base, ul, active, nonActive } = $derived(navbarUl({ hidden }));
 
   $effect(() => {
-    navState.activeClass = cn(active(), clsx(activeClass), (theme as NavbarUlTheme)?.active);
-    navState.nonActiveClass = cn(nonActive(), clsx(nonActiveClass), (theme as NavbarUlTheme)?.nonActive);
+    navState.activeClass = active({ class: clsx((theme as NavbarUlTheme)?.active, activeClass) });
+    navState.nonActiveClass = nonActive({ class: clsx((theme as NavbarUlTheme)?.nonActive, nonActiveClass) });
   });
 
   $effect(() => {
@@ -53,8 +52,8 @@
   });
   setContext("activeUrl", activeUrlStore);
 
-  let divCls: string = $derived(cn(base(), clsx(clasName), (theme as NavbarUlTheme)?.base));
-  let ulCls: string = $derived(cn(ul(), clsx(ulClass), (theme as NavbarUlTheme)?.ul));
+  let divCls: string = $derived(base({ class: clsx((theme as NavbarUlTheme)?.base, clasName) }));
+  let ulCls: string = $derived(ul({ class: clsx((theme as NavbarUlTheme)?.ul, ulClass) }));
 </script>
 
 {#if !hidden}
@@ -75,7 +74,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1111)
+[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1097)
 ## Props
 @prop children
 @prop activeUrl

package/dist/navbar/NavUl.svelte.d.ts

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

package/dist/navbar/Navbar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import clsx from "clsx";
   import { setContext } from "svelte";
-  import { NavContainer, cn } from "..";
+  import { NavContainer } from "..";
   import { navbar } from "./theme";
   import type { NavbarState, NavbarProps } from "../types";
   import { getTheme } from "../theme/themeUtils";
@@ -34,7 +34,7 @@
 <svelte:document onclick={handleDocumentClick} />
 
 <nav bind:this={navbarElement}>
-  <div {...restProps} class={cn(navbar(), clsx(className), theme)}>
+  <div {...restProps} class={navbar({ class: clsx(theme, className) })}>
     <NavContainer {fluid} class={clsx(navContainerClass)}>
       {@render children({ hidden: navState.hidden, toggle, NavContainer })}
     </NavContainer>
@@ -45,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1093)
+[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1079)
 ## Props
 @prop children
 @prop fluid

package/dist/navbar/Navbar.svelte.d.ts

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

package/dist/navbar/theme.d.ts

@@ -1,7 +1,8 @@
+import type { ClassValue } from "svelte/elements";
 export declare const navbar: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative w-full px-2 py-2.5 sm:px-4", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative w-full px-2 py-2.5 sm:px-4", unknown, unknown, undefined>>;
-export type NavbarTheme = string;
+export type NavbarTheme = ClassValue;
 export declare const navbarBrand: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex items-center", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex items-center", unknown, unknown, undefined>>;
-export type NavbarBrandTheme = string;
+export type NavbarBrandTheme = ClassValue;
 export declare const navbarContainer: import("tailwind-variants").TVReturnType<{
     fluid: {
         true: string;
@@ -65,7 +66,7 @@ export declare const navbarUl: import("tailwind-variants").TVReturnType<{
     nonActive: string;
 }, undefined, unknown, unknown, undefined>>;
 export type NavbarUlSlots = keyof typeof navbarUl.slots;
-export type NavbarUlTheme = Partial<Record<NavbarUlSlots, string>>;
+export type NavbarUlTheme = Partial<Record<NavbarUlSlots, ClassValue>>;
 export declare const navbarLi: import("tailwind-variants").TVReturnType<{
     hidden: {
         false: string;
@@ -79,7 +80,7 @@ export declare const navbarLi: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "block py-2 pe-4 ps-3 md:p-2 rounded-sm md:border-0", unknown, unknown, undefined>>;
-export type NavbarLiTheme = string;
+export type NavbarLiTheme = ClassValue;
 export declare const navbarHamburger: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -112,4 +113,4 @@ export declare const navbarHamburger: import("tailwind-variants").TVReturnType<{
     menu: string;
 }, undefined, unknown, unknown, undefined>>;
 export type NavbarHamburgerSlots = keyof typeof navbarHamburger.slots;
-export type NavbarHamburgerTheme = Partial<Record<NavbarHamburgerSlots, string>>;
+export type NavbarHamburgerTheme = Partial<Record<NavbarHamburgerSlots, ClassValue>>;