flowbite-svelte 1.10.4 → 1.10.6

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}

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)}

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}

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;

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}>

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}

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}

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>
 

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}

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>
 

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>
 

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>
 

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,8 +20,8 @@
   };
 </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>
 
 <!--

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

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
@@ -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>

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}

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>

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>>;

package/dist/pagination/Pagination.svelte

@@ -3,7 +3,7 @@
   import { pagination, PaginationItem } from ".";
   import type { PaginationProps } from "../types";
   import { getTheme } from "../theme/themeUtils";
-  import { cn } from "..";
+  import clsx from "clsx";
 
   let { pages = [], previous, next, prevContent, nextContent, table, size, ariaLabel, ...restProps }: PaginationProps = $props();
 
@@ -13,7 +13,7 @@
   setContext("table", table);
   setContext("size", size);
 
-  const paginationCls = $derived(cn(pagination({ table, size }), theme));
+  const paginationCls = $derived(pagination({ table, size, class: clsx(theme) }));
 </script>
 
 <nav aria-label={ariaLabel}>

package/dist/pagination/PaginationButton.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import clsx from "clsx";
   import { paginationButton } from ".";
   import type { PaginationButtonProps } from "../types";
@@ -14,16 +13,14 @@
   const table = getContext<boolean>("table");
 
   const paginationCls = $derived(
-    cn(
-      paginationButton({
-        size: getContext("size") ?? size,
-        active,
-        group,
-        table,
-        disabled
-      }),
-      theme
-    )
+    paginationButton({
+      size: getContext("size") ?? size,
+      active,
+      group,
+      table,
+      disabled,
+      class: clsx(theme, className)
+    })
   );
 
   function handleClick(e: MouseEvent) {
@@ -36,13 +33,13 @@
 </script>
 
 {#if href}
-  <a {href} {...restProps} class={cn(paginationCls, clsx(className), theme)} onclick={handleClick}>
+  <a {href} {...restProps} class={paginationCls} onclick={handleClick}>
     {#if children}
       {@render children()}
     {/if}
   </a>
 {:else}
-  <button {...restProps} {disabled} class={cn(paginationCls, clsx(className), theme)} onclick={handleClick}>
+  <button {...restProps} {disabled} class={paginationCls} onclick={handleClick}>
     {#if children}
       {@render children()}
     {/if}

package/dist/pagination/PaginationItem.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import clsx from "clsx";
   import { paginationItem, type PaginationItemTheme } from ".";
   import type { PaginationItemProps } from "../types";
@@ -12,7 +11,7 @@
 
   const group = getContext<boolean>("group");
   const table = getContext<boolean>("table");
-  const paginationCls = $derived(cn(paginationItem({ size: getContext("size") ?? size, active, group, table }), clsx(className), theme));
+  const paginationCls = $derived(paginationItem({ size: getContext("size") ?? size, active, group, table, class: clsx(theme, className) }));
 </script>
 
 {#if href}