flowbite-svelte 1.9.0 → 1.10.0

package/dist/kbd/Kbd.svelte

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

package/dist/kbd/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Kbd } from "./Kbd.svelte";
-export { kbd } from "./theme";
+export { kbd, type KbdTheme } from "./theme";

package/dist/kbd/theme.d.ts

@@ -1 +1,2 @@
 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;

package/dist/list-group/Listgroup.svelte

@@ -2,9 +2,12 @@
   import { setContext } from "svelte";
   import { listGroup } from ".";
   import { type ListgroupProps, ListgroupItem, cn } 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 }));
 
   let tag = active ? "div" : "ul";
@@ -22,7 +25,7 @@
   }
 </script>
 
-<svelte:element this={tag} {...restProps} class={cn(base, className)}>
+<svelte:element this={tag} {...restProps} class={cn(base, className, theme)}>
   {#if items?.length}
     {#each items as item}
       {#if children}
@@ -42,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1033)
+[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1026)
 ## 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#L1033)
+ * [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1026)
  * ## Props
  * @prop children
  * @prop items

package/dist/list-group/ListgroupItem.svelte

@@ -2,9 +2,12 @@
   import { getContext } from "svelte";
   import { type ListgroupItemProps, cn } from "..";
   import { listGroupItem, type ListgroupItemVariants } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, active, current, disabled, horizontal, name, Icon, class: className, iconClass = "me-2.5 h-15 w-15", ...restProps }: ListgroupItemProps = $props();
 
+  const theme = getTheme("listgroupItem");
+
   active = active ?? getContext("listGrpActive");
   horizontal = horizontal ?? getContext("listGrpHorizontal");
 
@@ -24,15 +27,15 @@
 {/snippet}
 
 {#if restProps.href === undefined && !active}
-  <li class={cn(itemClass, className)}>
+  <li class={cn(itemClass, className, theme)}>
     {@render nameOrChildren()}
   </li>
 {:else if restProps.href === undefined}
-  <button type="button" {...restProps} class={cn(itemClass, className)} {disabled} aria-current={current}>
+  <button type="button" {...restProps} class={cn(itemClass, className, theme)} {disabled} aria-current={current}>
     {@render nameOrChildren()}
   </button>
 {:else}
-  <a {...restProps} class={cn(itemClass, className)} aria-current={current}>
+  <a {...restProps} class={cn(itemClass, className, theme)} aria-current={current}>
     {@render nameOrChildren()}
   </a>
 {/if}
@@ -41,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1044)
+[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1037)
 ## 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#L1044)
+ * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1037)
  * ## Props
  * @prop children
  * @prop active

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

@@ -1,3 +1,3 @@
 export { default as Listgroup } from "./Listgroup.svelte";
 export { default as ListgroupItem } from "./ListgroupItem.svelte";
-export { listGroup, listGroupItem } from "./theme";
+export { listGroup, listGroupItem, type ListGroupTheme, type ListGroupItemTheme } from "./theme";

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

@@ -40,6 +40,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 ListgroupItemVariants = VariantProps<typeof listGroupItem>;
 export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
     state: {
@@ -84,3 +85,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;

package/dist/mega-menu/MegaMenu.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { megamenu } from "./theme";
+  import { megamenu, type MegaMenuTheme } from "./theme";
   import { type MegaMenuProps, type LinkType, Popper, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, extra, items = [], full, ulClass, isOpen = $bindable(false), class: className, extraClass, ...restProps }: MegaMenuProps = $props();
 
+  const theme = getTheme("megaMenu");
+
   /* eslint-disable  @typescript-eslint/no-explicit-any */
   interface LinkTypeLike extends LinkType {
     [propName: string]: any;
@@ -12,9 +15,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)}>
-  <div class={div()}>
-    <ul class={cn(ul(), ulClass)}>
+<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)}>
       {#each items as item, index}
         <li>
           {@render children({ item, index })}
@@ -23,7 +26,7 @@
         {@render children({ item: items[0], index: 0 })}
       {/each}
     </ul>
-    {#if full && extra}<div class={cn(extraCls(), extraClass)}>{@render extra()}</div>{/if}
+    {#if full && extra}<div class={cn(extraCls(), extraClass, (theme as MegaMenuTheme)?.extra)}>{@render extra()}</div>{/if}
   </div>
 </Popper>
 
@@ -31,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1055)
+[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1048)
 ## 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#L1055)
+ * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1048)
  * ## Props
  * @prop children
  * @prop extra

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

@@ -1,2 +1,2 @@
 export { default as MegaMenu } from "./MegaMenu.svelte";
-export { megamenu } from "./theme";
+export { megamenu, type MegaMenuTheme } from "./theme";

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

@@ -41,3 +41,5 @@ export declare const megamenu: import("tailwind-variants").TVReturnType<{
     ul: string;
     extra: string;
 }, undefined, unknown, unknown, undefined>>;
+export type MegaMenuSlots = keyof typeof megamenu.slots;
+export type MegaMenuTheme = Partial<Record<MegaMenuSlots, string>>;

package/dist/modal/Modal.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
-  import { type ModalProps, type ParamsType, CloseButton, trapFocus } from "..";
+  import { type ModalProps, type ParamsType, CloseButton, trapFocus, cn } from "..";
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
   import { fade } from "svelte/transition";
-  import { modal as modalTheme } from ".";
+  import { modal as modalStyle, type ModalTheme } from ".";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, onaction = () => true, oncancel, onsubmit, ontoggle, form = false, modal = true, autoclose = false, focustrap = false, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, outsideclose = true, size = "md", placement, class: className, params, transition = fade, ...restProps }: ModalProps = $props();
 
+  const theme = getTheme("modal");
+
   const paramsDefault = { duration: 100, easing: sineIn };
   const paramsOptions = $derived(params ?? paramsDefault);
 
-  const { base, form: formCls, header: headerCls, footer: footerCls, body, closeBtn } = $derived(modalTheme({ placement, size }));
+  const { base, form: formCls, header: headerCls, footer: footerCls, body, closebutton } = $derived(modalStyle({ placement, size }));
 
   const close = (dlg: HTMLDialogElement) => (open = false);
   // @ts-expect-error: dlg.requestClose may not be supported
@@ -76,7 +79,7 @@
 
 {#snippet content()}
   {#if title || header}
-    <div class={headerCls({ class: clsx(headerClass) })}>
+    <div class={cn(headerCls({ class: clsx(headerClass) }), (theme as ModalTheme)?.header)}>
       {#if title}
         <h3>{title}</h3>
         {#if dismissable && !permanent}
@@ -87,23 +90,23 @@
       {/if}
     </div>
   {/if}
-  <div class={body({ class: clsx(bodyClass) })}>
+  <div class={cn(body({ class: clsx(bodyClass) }), (theme as ModalTheme)?.body)}>
     {@render children?.()}
   </div>
   {#if footer}
-    <div class={footerCls({ class: clsx(footerClass) })}>
+    <div class={cn(footerCls({ class: clsx(footerClass) }), (theme as ModalTheme)?.footer)}>
       {@render footer()}
     </div>
   {/if}
   {#if dismissable && !permanent && !title}
-    <CloseButton type="submit" onclick={close_handler(form)} class={closeBtn({ class: clsx(closeBtnClass) })} />
+    <CloseButton type="submit" onclick={close_handler(form)} class={cn(closebutton({ class: clsx(closeBtnClass) }), (theme as ModalTheme)?.closebutton)} />
   {/if}
 {/snippet}
 
 {#if open}
-  <dialog {@attach init} use:focusTrap class={base({ class: clsx(className) })} tabindex="-1" onsubmit={_onsubmit} oncancel={_oncancel} onclick={_onclick} ontoggle={_ontoggle} transition:transition|global={paramsOptions as ParamsType} {...restProps}>
+  <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}>
     {#if form}
-      <form method="dialog" class={formCls()}>
+      <form method="dialog" class={cn(formCls(), (theme as ModalTheme)?.form)}>
         {@render content()}
       </form>
     {:else}
@@ -116,7 +119,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1066)
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1059)
 ## 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#L1066)
+ * [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1059)
  * ## Props
  * @prop children
  * @prop onaction = ()

package/dist/modal/index.d.ts

@@ -1,3 +1,2 @@
-import Modal from "./Modal.svelte";
-import { modal } from "./theme";
-export { Modal, modal };
+export { default as Modal } from "./Modal.svelte";
+export { modal, type ModalTheme } from "./theme";

package/dist/modal/index.js

@@ -1,3 +1,2 @@
-import Modal from "./Modal.svelte";
-import { modal } from "./theme";
-export { Modal, modal };
+export { default as Modal } from "./Modal.svelte";
+export { modal } from "./theme";

package/dist/modal/theme.d.ts

@@ -53,7 +53,7 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     header: string;
     footer: string;
     body: string;
-    closeBtn: string;
+    closebutton: string;
 }, undefined, {
     placement: {
         "top-left": {
@@ -107,7 +107,7 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     header: string;
     footer: string;
     body: string;
-    closeBtn: string;
+    closebutton: string;
 }, import("tailwind-variants").TVReturnType<{
     placement: {
         "top-left": {
@@ -161,5 +161,7 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     header: string;
     footer: string;
     body: string;
-    closeBtn: string;
+    closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
+export type ModalSlots = keyof typeof modal.slots;
+export type ModalTheme = Partial<Record<ModalSlots, string>>;

package/dist/modal/theme.js

@@ -6,7 +6,7 @@ export const modal = tv({
         header: "flex items-center p-4 md:p-5 justify-between rounded-t-lg shrink-0 text-xl font-semibold text-gray-900 dark:text-white",
         footer: "flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg shrink-0",
         body: "p-4 md:p-5 space-y-4 overflow-y-auto overscroll-contain",
-        closeBtn: "absolute top-3 end-2.5"
+        closebutton: "absolute top-3 end-2.5"
     },
     variants: {
         placement: {

package/dist/navbar/Menu.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
   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();
 
+  const theme = getTheme("memu");
+
   let viewBox: string = $state("0 0 24 24");
   let svgpath: string = $state("");
   let svgoutline = `<path stroke="${color}" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> `;
@@ -25,7 +29,7 @@
   });
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" role="button" tabindex="0" width={size} height={size} class={clsx(className)} {...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={cn(clsx(className), theme)} {...restProps} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2">
   {@html svgpath}
 </svg>
 
@@ -33,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1087)
+[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1080)
 ## 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#L1087)
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1080)
  * ## Props
  * @prop size = "24"
  * @prop color = "currentColor"

package/dist/navbar/NavBrand.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
-  import { navbar_brand } from "./theme";
+  import { cn } from "..";
+  import { navbarBrand } from "./theme";
   import type { NavBrandProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: NavBrandProps = $props();
+
+  const theme = getTheme("navBrand");
 </script>
 
-<a {...restProps} class={twMerge(navbar_brand(), clsx(className))}>
+<a {...restProps} class={cn(navbarBrand(), clsx(className), theme)}>
   {@render children?.()}
 </a>
 
@@ -15,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1107)
+[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1100)
 ## 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#L1107)
+ * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1100)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/navbar/NavContainer.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
+  import { cn } from "..";
   import clsx from "clsx";
-  import { navbar_container } from "./theme";
+  import { navbarContainer } from "./theme";
   import type { NavContainerProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, fluid, class: clasName, ...restProps }: NavContainerProps = $props();
+
+  const theme = getTheme("navContainer");
 </script>
 
-<div {...restProps} class={twMerge(navbar_container({ fluid }), clsx(clasName))}>
+<div {...restProps} class={cn(navbarContainer({ fluid }), clsx(clasName), theme)}>
   {@render children?.()}
 </div>
 
@@ -15,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1109)
+[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1102)
 ## 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#L1109)
+ * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1102)
  * ## Props
  * @prop children
  * @prop fluid

package/dist/navbar/NavHamburger.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
+  import { cn } from "..";
   import clsx from "clsx";
   import { getContext } from "svelte";
   import ToolbarButton from "../toolbar/ToolbarButton.svelte";
   import Menu from "./Menu.svelte";
-  import { navbar_hamburger } from "./theme";
+  import { navbarHamburger, type NavbarHamburgerTheme } from "./theme";
   import type { NavbarState, NavHamburgerProps } from "../types";
   import type { MouseEventHandler } from "svelte/elements";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, onclick, menuClass, class: className, name = "Open main menu", ...restProps }: NavHamburgerProps = $props();
 
-  let { base, menu } = navbar_hamburger();
+  const theme = getTheme("navHamburger");
+
+  let { base, menu } = navbarHamburger();
 
   let navState = getContext<NavbarState>("navState");
   const toggle: MouseEventHandler<HTMLButtonElement> = (ev) => {
@@ -18,15 +21,15 @@
   };
 </script>
 
-<ToolbarButton {name} onclick={onclick || toggle} {...restProps} class={twMerge(base(), clsx(className))}>
-  <Menu class={twMerge(menu(), clsx(menuClass))} />
+<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>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1113)
+[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1106)
 ## Props
 @prop children
 @prop onclick

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

@@ -2,7 +2,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#L1113)
+ * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1106)
  * ## Props
  * @prop children
  * @prop onclick

package/dist/navbar/NavLi.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
+  import { cn } from "..";
   import clsx from "clsx";
   import { getContext } from "svelte";
-  import { navbar_li } from "./theme";
+  import { navbarLi } from "./theme";
   import type { NavbarState, NavLiProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
 
   let navState = getContext<NavbarState>("navState");
 
   let { children, activeClass, nonActiveClass, class: className, ...restProps }: NavLiProps = $props();
 
+  const theme = getTheme("navLi");
+
   const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
 
   let navUrl = $state("");
@@ -17,7 +20,7 @@
   });
 
   let active = $derived(navUrl ? restProps.href === navUrl : false);
-  let liClass = $derived(twMerge(navbar_li({ hidden: navState.hidden }), clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), className)));
+  let liClass = $derived(cn(navbarLi({ hidden: navState.hidden }), clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), className), theme));
 </script>
 
 <li>
@@ -36,7 +39,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1133)
+[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1126)
 ## 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#L1133)
+ * [NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1126)
  * ## Props
  * @prop children
  * @prop activeClass

package/dist/navbar/NavUl.svelte

@@ -4,15 +4,18 @@
   import { prefersReducedMotion } from "svelte/motion";
   import { writable } from "svelte/store";
   import { slide, fly, fade, scale } from "svelte/transition";
-  import { twMerge } from "tailwind-merge";
+  import { cn } from "..";
   import clsx from "clsx";
-  import { navbar_ul } from "./theme";
+  import { navbarUl, type NavbarUlTheme } from "./theme";
   import type { NavbarState, NavUlProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
 
   let navState = getContext<NavbarState>("navState");
 
   let { children, activeUrl, ulClass, slideParams, transition = slide, transitionParams, activeClass, nonActiveClass, respectMotionPreference = true, class: clasName, ...restProps }: NavUlProps = $props();
 
+  const theme = getTheme("navUl");
+
   // Default parameters for different transitions
   const getDefaultParams = (transitionFn: any) => {
     if (transitionFn === slide) return { delay: 0, duration: 200, easing: sineIn };
@@ -38,11 +41,11 @@
 
   let hidden: boolean = $derived(navState.hidden ?? true);
 
-  let { base, ul, active, nonActive } = $derived(navbar_ul({ hidden }));
+  let { base, ul, active, nonActive } = $derived(navbarUl({ hidden }));
 
   $effect(() => {
-    navState.activeClass = twMerge(active(), clsx(activeClass));
-    navState.nonActiveClass = twMerge(nonActive(), clsx(nonActiveClass));
+    navState.activeClass = cn(active(), clsx(activeClass), (theme as NavbarUlTheme)?.active);
+    navState.nonActiveClass = cn(nonActive(), clsx(nonActiveClass), (theme as NavbarUlTheme)?.nonActive);
   });
 
   $effect(() => {
@@ -50,8 +53,8 @@
   });
   setContext("activeUrl", activeUrlStore);
 
-  let divCls: string = $derived(twMerge(base(), clsx(clasName)));
-  let ulCls: string = $derived(twMerge(ul(), clsx(ulClass)));
+  let divCls: string = $derived(cn(base(), clsx(clasName), (theme as NavbarUlTheme)?.base));
+  let ulCls: string = $derived(cn(ul(), clsx(ulClass), (theme as NavbarUlTheme)?.ul));
 </script>
 
 {#if !hidden}
@@ -72,7 +75,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1118)
+[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1111)
 ## Props
 @prop children
 @prop activeUrl