flowbite-svelte 1.8.6 → 1.10.0

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#L1108)
+[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#L1108)
+ * [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#L1128)
+[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#L1128)
+ * [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#L1113)
+[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1111)
 ## 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#L1113)
+ * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1111)
  * ## Props
  * @prop children
  * @prop activeUrl

package/dist/navbar/Navbar.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { setContext } from "svelte";
-  import NavContainer from "./NavContainer.svelte";
+  import { NavContainer, cn } from "..";
   import { navbar } from "./theme";
   import type { NavbarState, NavbarProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
 
   // propagate props type from underlying Frame
 
   let { children, fluid, navContainerClass, class: className, closeOnClickOutside = true, ...restProps }: NavbarProps = $props();
 
+  const theme = getTheme("navbar");
+
   let navState = $state({ hidden: true });
   setContext<NavbarState>("navState", navState);
 
@@ -32,7 +34,7 @@
 <svelte:document onclick={handleDocumentClick} />
 
 <nav bind:this={navbarElement}>
-  <div {...restProps} class={twMerge(navbar(), clsx(className))}>
+  <div {...restProps} class={cn(navbar(), clsx(className), theme)}>
     <NavContainer {fluid} class={clsx(navContainerClass)}>
       {@render children({ hidden: navState.hidden, toggle, NavContainer })}
     </NavContainer>
@@ -43,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#L1095)
+[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1093)
 ## 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#L1095)
+ * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1093)
  * ## Props
  * @prop children
  * @prop fluid

package/dist/navbar/index.d.ts

@@ -1,7 +1,7 @@
-import Navbar from "./Navbar.svelte";
-import NavBrand from "./NavBrand.svelte";
-import NavLi from "./NavLi.svelte";
-import NavUl from "./NavUl.svelte";
-import NavHamburger from "./NavHamburger.svelte";
-import { navbar, navbar_ul, navbar_brand, navbar_li, navbar_hamburger } from "./theme";
-export { Navbar, navbar, NavBrand, navbar_brand, NavLi, navbar_li, NavUl, navbar_ul, NavHamburger, navbar_hamburger };
+export { default as Navbar } from "./Navbar.svelte";
+export { default as NavBrand } from "./NavBrand.svelte";
+export { default as NavLi } from "./NavLi.svelte";
+export { default as NavUl } from "./NavUl.svelte";
+export { default as NavHamburger } from "./NavHamburger.svelte";
+export { default as NavContainer } from "./NavContainer.svelte";
+export { navbar, navbarUl, navbarBrand, navbarLi, navbarHamburger, type NavbarTheme, type NavbarUlTheme, type NavbarBrandTheme, type NavbarLiTheme, type NavbarHamburgerTheme } from "./theme";

package/dist/navbar/index.js

@@ -1,7 +1,7 @@
-import Navbar from "./Navbar.svelte";
-import NavBrand from "./NavBrand.svelte";
-import NavLi from "./NavLi.svelte";
-import NavUl from "./NavUl.svelte";
-import NavHamburger from "./NavHamburger.svelte";
-import { navbar, navbar_ul, navbar_brand, navbar_li, navbar_hamburger } from "./theme";
-export { Navbar, navbar, NavBrand, navbar_brand, NavLi, navbar_li, NavUl, navbar_ul, NavHamburger, navbar_hamburger };
+export { default as Navbar } from "./Navbar.svelte";
+export { default as NavBrand } from "./NavBrand.svelte";
+export { default as NavLi } from "./NavLi.svelte";
+export { default as NavUl } from "./NavUl.svelte";
+export { default as NavHamburger } from "./NavHamburger.svelte";
+export { default as NavContainer } from "./NavContainer.svelte";
+export { navbar, navbarUl, navbarBrand, navbarLi, navbarHamburger } from "./theme";

package/dist/navbar/theme.d.ts

@@ -1,6 +1,8 @@
 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 declare const navbar_brand: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex items-center", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex items-center", unknown, unknown, undefined>>;
-export declare const navbar_container: import("tailwind-variants").TVReturnType<{
+export type NavbarTheme = string;
+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 declare const navbarContainer: import("tailwind-variants").TVReturnType<{
     fluid: {
         true: string;
         false: string;
@@ -16,7 +18,7 @@ export declare const navbar_container: import("tailwind-variants").TVReturnType<
         false: string;
     };
 }, undefined, "mx-auto flex flex-wrap items-center justify-between ", unknown, unknown, undefined>>;
-export declare const navbar_ul: import("tailwind-variants").TVReturnType<{
+export declare const navbarUl: import("tailwind-variants").TVReturnType<{
     hidden: {
         false: {
             base: string;
@@ -62,7 +64,9 @@ export declare const navbar_ul: import("tailwind-variants").TVReturnType<{
     active: string;
     nonActive: string;
 }, undefined, unknown, unknown, undefined>>;
-export declare const navbar_li: import("tailwind-variants").TVReturnType<{
+export type NavbarUlSlots = keyof typeof navbarUl.slots;
+export type NavbarUlTheme = Partial<Record<NavbarUlSlots, string>>;
+export declare const navbarLi: import("tailwind-variants").TVReturnType<{
     hidden: {
         false: string;
     };
@@ -75,7 +79,8 @@ export declare const navbar_li: 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 declare const navbar_hamburger: import("tailwind-variants").TVReturnType<{
+export type NavbarLiTheme = string;
+export declare const navbarHamburger: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
@@ -106,3 +111,5 @@ export declare const navbar_hamburger: import("tailwind-variants").TVReturnType<
     base: string;
     menu: string;
 }, undefined, unknown, unknown, undefined>>;
+export type NavbarHamburgerSlots = keyof typeof navbarHamburger.slots;
+export type NavbarHamburgerTheme = Partial<Record<NavbarHamburgerSlots, string>>;

package/dist/navbar/theme.js

@@ -2,16 +2,16 @@ import { tv } from "tailwind-variants";
 export const navbar = tv({
     base: "relative w-full px-2 py-2.5 sm:px-4"
 });
-export const navbar_brand = tv({
+export const navbarBrand = tv({
     base: "flex items-center"
 });
-export const navbar_container = tv({
+export const navbarContainer = tv({
     base: "mx-auto flex flex-wrap items-center justify-between ",
     variants: {
         fluid: { true: "w-full", false: "container" }
     }
 });
-export const navbar_ul = tv({
+export const navbarUl = tv({
     slots: {
         base: "w-full md:block md:w-auto",
         ul: "flex flex-col p-4 mt-0 md:flex-row rtl:space-x-reverse md:text-sm md:font-medium",
@@ -32,7 +32,7 @@ export const navbar_ul = tv({
     },
     defaultVariants: {}
 });
-export const navbar_li = tv({
+export const navbarLi = tv({
     base: "block py-2 pe-4 ps-3 md:p-2 rounded-sm md:border-0",
     variants: {
         hidden: {
@@ -41,7 +41,7 @@ export const navbar_li = tv({
     },
     defaultVariants: {}
 });
-export const navbar_hamburger = tv({
+export const navbarHamburger = tv({
     slots: {
         base: "ms-3 md:hidden",
         menu: "h-6 w-6 shrink-0"

package/dist/pagination/Pagination.svelte

@@ -2,18 +2,22 @@
   import { setContext } from "svelte";
   import { pagination, PaginationItem } from ".";
   import type { PaginationProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+  import { cn } from "..";
 
   let { pages = [], previous, next, prevContent, nextContent, table, size, ariaLabel, ...restProps }: PaginationProps = $props();
 
+  const theme = getTheme("pagination");
+
   setContext("group", true);
   setContext("table", table);
   setContext("size", size);
 
-  const paginationClass = $derived(pagination({ table, size }));
+  const paginationCls = $derived(cn(pagination({ table, size }), theme));
 </script>
 
 <nav aria-label={ariaLabel}>
-  <ul class={paginationClass}>
+  <ul class={paginationCls}>
     {#if typeof previous === "function"}
       <li {...restProps}>
         <PaginationItem {size} onclick={() => previous()} class={table ? "rounded-none rounded-l" : "rounded-none  rounded-s-lg"}>
@@ -50,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1193)
+[PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1191)
 ## Props
 @prop pages = []
 @prop previous

package/dist/pagination/Pagination.svelte.d.ts

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

package/dist/pagination/PaginationButton.svelte

@@ -1,23 +1,29 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
+  import { cn } from "..";
   import clsx from "clsx";
-  import { paginationbutton } from ".";
+  import { paginationButton } from ".";
   import type { PaginationButtonProps } from "../types";
   import { getContext } from "svelte";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, size, onclick, disabled = false, class: className, href, active = false, ...restProps }: PaginationButtonProps = $props();
 
+  const theme = getTheme("paginationButton");
+
   const group = getContext<boolean>("group");
   const table = getContext<boolean>("table");
 
   const paginationCls = $derived(
-    paginationbutton({
-      size: getContext("size") ?? size,
-      active,
-      group,
-      table,
-      disabled
-    })
+    cn(
+      paginationButton({
+        size: getContext("size") ?? size,
+        active,
+        group,
+        table,
+        disabled
+      }),
+      theme
+    )
   );
 
   function handleClick(e: MouseEvent) {
@@ -30,13 +36,13 @@
 </script>
 
 {#if href}
-  <a {href} {...restProps} class={twMerge(paginationCls, clsx(className))} onclick={handleClick}>
+  <a {href} {...restProps} class={cn(paginationCls, clsx(className), theme)} onclick={handleClick}>
     {#if children}
       {@render children()}
     {/if}
   </a>
 {:else}
-  <button {...restProps} {disabled} class={twMerge(paginationCls, clsx(className))} onclick={handleClick}>
+  <button {...restProps} {disabled} class={cn(paginationCls, clsx(className), theme)} onclick={handleClick}>
     {#if children}
       {@render children()}
     {/if}
@@ -47,7 +53,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1164)
+[PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1162)
 ## Props
 @prop children
 @prop size

package/dist/pagination/PaginationButton.svelte.d.ts

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

package/dist/pagination/PaginationItem.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
+  import { cn } from "..";
   import clsx from "clsx";
-  import { paginationItem } from ".";
+  import { paginationItem, type PaginationItemTheme } from ".";
   import type { PaginationItemProps } from "../types";
   import { getContext } from "svelte";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, size, class: className, href, active, ...restProps }: PaginationItemProps = $props();
 
+  const theme = getTheme("paginationItem");
+
   const group = getContext<boolean>("group");
   const table = getContext<boolean>("table");
-  const paginationCls = $derived(twMerge(paginationItem({ size: getContext("size") ?? size, active, group, table }), clsx(className)));
+  const paginationCls = $derived(cn(paginationItem({ size: getContext("size") ?? size, active, group, table }), clsx(className), theme));
 </script>
 
 {#if href}
@@ -30,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1189)
+[PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1187)
 ## Props
 @prop children
 @prop size

package/dist/pagination/PaginationItem.svelte.d.ts

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

package/dist/pagination/PaginationNav.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { setContext } from "svelte";
-  import { paginationnav } from "./theme";
-  import { type PaginationNavProps, PaginationButton } from "..";
+  import { paginationNav, type PaginationNavTheme } from "./theme";
+  import { type PaginationNavProps, PaginationButton, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   function paginationRange(start: number, end: number): number[] {
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
@@ -29,6 +29,8 @@
     ...restProps
   }: PaginationNavProps = $props();
 
+  const theme = getTheme("paginationNav");
+
   // Set context values for child components
   setContext("group", true);
   setContext("size", size);
@@ -51,22 +53,22 @@
     onPageChange(Math.max(currentPage - 1, 1));
   }
 
-  const { base, tableDiv, tableSpan, prevItem, nextItem } = $derived(paginationnav({ layout }));
+  const { base, tableDiv, tableSpan, prevItem, nextItem } = $derived(paginationNav({ layout }));
 </script>
 
 <nav aria-label={ariaLabel} {...restProps}>
   {#if layout === "table"}
-    <div class={twMerge(tableDiv(), clsx(tableDivClass))}>
-      Showing <span class={twMerge(tableSpan(), clsx(spanClass))}>{currentPage}</span>
+    <div class={cn(tableDiv(), clsx(tableDivClass), (theme as PaginationNavTheme)?.tableDiv)}>
+      Showing <span class={cn(tableSpan(), clsx(spanClass), (theme as PaginationNavTheme)?.tableSpan)}>{currentPage}</span>
       of
-      <span class={twMerge(tableSpan(), clsx(spanClass))}>{totalPages}</span>
+      <span class={cn(tableSpan(), clsx(spanClass), (theme as PaginationNavTheme)?.tableSpan)}>{totalPages}</span>
       Entries
     </div>
   {/if}
 
-  <ul class={twMerge(base(), clsx(className))}>
+  <ul class={cn(base(), clsx(className), (theme as PaginationNavTheme)?.base)}>
     <li {...restProps}>
-      <PaginationButton onclick={goToPreviousPage} disabled={currentPage === 1} class={twMerge(prevItem(), clsx(prevClass))}>
+      <PaginationButton onclick={goToPreviousPage} disabled={currentPage === 1} class={cn(prevItem(), clsx(prevClass), (theme as PaginationNavTheme)?.prevItem)}>
         {#if prevContent}
           {@render prevContent()}
         {:else}
@@ -84,7 +86,7 @@
       {/each}
     {/if}
     <li {...restProps}>
-      <PaginationButton onclick={goToNextPage} disabled={currentPage === totalPages} class={twMerge(nextItem(), clsx(nextClass))}>
+      <PaginationButton onclick={goToNextPage} disabled={currentPage === totalPages} class={cn(nextItem(), clsx(nextClass), (theme as PaginationNavTheme)?.nextItem)}>
         {#if nextContent}
           {@render nextContent()}
         {:else}
@@ -99,7 +101,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1170)
+[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1168)
 ## Props
 @prop currentPage = 1
 @prop totalPages = 1

package/dist/pagination/PaginationNav.svelte.d.ts

@@ -2,7 +2,7 @@ import { type PaginationNavProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1170)
+ * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1168)
  * ## Props
  * @prop currentPage = 1
  * @prop totalPages = 1

package/dist/pagination/index.d.ts

@@ -1,4 +1,4 @@
-export { paginationItem, pagination, paginationbutton, paginationnav } from "./theme";
+export { paginationItem, pagination, paginationButton, paginationNav, type PaginationNavTheme, type PaginationButtonTheme, type PaginationItemTheme, type PaginationTheme } from "./theme";
 export { default as PaginationNav } from "./PaginationNav.svelte";
 export { default as PaginationButton } from "./PaginationButton.svelte";
 export { default as Pagination } from "./Pagination.svelte";

package/dist/pagination/index.js

@@ -1,4 +1,4 @@
-export { paginationItem, pagination, paginationbutton, paginationnav } from "./theme";
+export { paginationItem, pagination, paginationButton, paginationNav } from "./theme";
 export { default as PaginationNav } from "./PaginationNav.svelte";
 export { default as PaginationButton } from "./PaginationButton.svelte";
 export { default as Pagination } from "./Pagination.svelte";

package/dist/pagination/theme.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
 export type PaginationVariants = VariantProps<typeof pagination>;
-export declare const paginationnav: import("tailwind-variants").TVReturnType<{
+export declare const paginationNav: import("tailwind-variants").TVReturnType<{
     size: {
         default: string;
         large: string;
@@ -76,8 +76,10 @@ export declare const paginationnav: import("tailwind-variants").TVReturnType<{
     prevItem: string;
     nextItem: string;
 }, undefined, unknown, unknown, undefined>>;
+export type PaginationNavSlots = keyof typeof paginationNav.slots;
+export type PaginationNavTheme = Partial<Record<PaginationNavSlots, string>>;
 export type PaginationItemVariants = VariantProps<typeof paginationItem>;
-export declare const paginationbutton: import("tailwind-variants").TVReturnType<{
+export declare const paginationButton: import("tailwind-variants").TVReturnType<{
     size: {
         default: string;
         large: string;
@@ -141,6 +143,7 @@ export declare const paginationbutton: import("tailwind-variants").TVReturnType<
         false: string;
     };
 }, undefined, "flex items-center font-medium", unknown, unknown, undefined>>;
+export type PaginationButtonTheme = string;
 export declare const paginationItem: import("tailwind-variants").TVReturnType<{
     size: {
         default: string;
@@ -193,6 +196,7 @@ export declare const paginationItem: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "flex items-center font-medium", unknown, unknown, undefined>>;
+export type PaginationItemTheme = string;
 export declare const pagination: import("tailwind-variants").TVReturnType<{
     table: {
         true: string;
@@ -221,3 +225,4 @@ export declare const pagination: import("tailwind-variants").TVReturnType<{
         large: string;
     };
 }, undefined, "inline-flex -space-x-px rtl:space-x-reverse items-center", unknown, unknown, undefined>>;
+export type PaginationTheme = string;

package/dist/pagination/theme.js

@@ -1,5 +1,5 @@
 import { tv } from "tailwind-variants";
-export const paginationnav = tv({
+export const paginationNav = tv({
     slots: {
         base: "inline-flex -space-x-px rtl:space-x-reverse items-center",
         tableDiv: "flex items-center text-sm mb-4",
@@ -23,7 +23,7 @@ export const paginationnav = tv({
         size: "default"
     }
 });
-export const paginationbutton = tv({
+export const paginationButton = tv({
     base: "flex items-center font-medium",
     variants: {
         size: {