flowbite-svelte 1.9.0 → 1.10.0

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#L1118)
+ * [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#L1100)
+[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#L1100)
+ * [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#L1198)
+[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#L1198)
+ * [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#L1169)
+[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#L1169)
+ * [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#L1194)
+[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#L1194)
+ * [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#L1175)
+[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#L1175)
+ * [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: {

package/dist/popover/Popover.svelte

@@ -1,24 +1,27 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
+  import { cn } from "..";
   import clsx from "clsx";
   import Popper from "../utils/Popper.svelte";
-  import { popover } from "./theme";
+  import { popover, type PopoverTheme } from "./theme";
   import type { PopoverProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
 
   let { title: titleSlot, color = "default", trigger = "hover", defaultClass, arrow = true, children, placement = "top", class: className, isOpen = $bindable(false), ...restProps }: PopoverProps = $props();
 
+  const theme = getTheme("popover");
+
   let { base, title, h3, content } = $derived(popover({ color }));
 </script>
 
-<Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={twMerge(base(), clsx(className))}>
+<Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={cn(base(), clsx(className), (theme as PopoverTheme)?.base)}>
   {#if typeof titleSlot === "string"}
-    <div class={title()}>
-      <h3 class={h3()}>{titleSlot}</h3>
+    <div class={cn(title(), (theme as PopoverTheme)?.title)}>
+      <h3 class={cn(h3(), (theme as PopoverTheme)?.h3)}>{titleSlot}</h3>
     </div>
   {:else if titleSlot}
     {@render titleSlot()}
   {/if}
-  <div class={twMerge(content(), clsx(defaultClass))}>
+  <div class={cn(content(), clsx(defaultClass), (theme as PopoverTheme)?.content)}>
     {@render children()}
   </div>
 </Popper>
@@ -27,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1208)
+[PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1201)
 ## Props
 @prop title: titleSlot
 @prop color = "default"

package/dist/popover/Popover.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PopoverProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1208)
+ * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1201)
  * ## Props
  * @prop title: titleSlot
  * @prop color = "default"

package/dist/popover/index.d.ts

@@ -1,3 +1,2 @@
-import Popover from "./Popover.svelte";
-import { popover } from "./theme";
-export { Popover, popover };
+export { default as Popover } from "./Popover.svelte";
+export { popover, type PopoverTheme } from "./theme";

package/dist/popover/index.js

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

package/dist/popover/theme.d.ts

@@ -92,7 +92,6 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
     content: string;
     title: string;
     h3: string;
-    arrowBase: string;
 }, undefined, {
     color: {
         default: {
@@ -185,7 +184,6 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
     content: string;
     title: string;
     h3: string;
-    arrowBase: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
         default: {
@@ -278,5 +276,6 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
     content: string;
     title: string;
     h3: string;
-    arrowBase: string;
 }, undefined, unknown, unknown, undefined>>;
+export type PopoverSlots = keyof typeof popover.slots;
+export type PopoverTheme = Partial<Record<PopoverSlots, string>>;

package/dist/popover/theme.js

@@ -4,8 +4,7 @@ export const popover = tv({
         base: "rounded-lg shadow-md bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700",
         content: "p-2",
         title: "py-2 px-3 rounded-t-md border-b ",
-        h3: "font-semibold",
-        arrowBase: "absolute pointer-events-none block w-[10px] h-[10px] rotate-45 bg-inherit border-inherit shadow-md"
+        h3: "font-semibold"
     },
     variants: {
         color: {