flowbite-svelte 1.9.0 → 1.10.0

package/dist/stepper/theme.js

@@ -1,202 +1,214 @@
 import { tv } from "tailwind-variants";
-export const stepper = tv({
-    base: "flex items-center w-full text-sm font-medium text-center text-gray-500 dark:text-gray-400 sm:text-base"
-});
-export const stepperitem = tv({
-    base: "flex items-center",
-    variants: {
-        status: {
-            completed: ["text-primary-600", "dark:text-primary-500", "md:w-full", "sm:after:content-['']", "after:w-full", "after:h-1", "after:border-b", "after:border-gray-200", "after:border-1", "after:hidden", "sm:after:inline-block", "after:mx-6", "xl:after:mx-10", "dark:after:border-gray-700"],
-            current: ["md:w-full", "after:content-['']", "after:w-full", "after:h-1", "after:border-b", "after:border-gray-200", "after:border-1", "after:hidden", "sm:after:inline-block", "after:mx-6", "xl:after:mx-10", "dark:after:border-gray-700"],
-            pending: ["md:w-full", "after:content-['']", "after:w-full", "after:h-1", "after:border-b", "after:border-gray-200", "after:border-1", "after:hidden", "sm:after:inline-block", "after:mx-6", "xl:after:mx-10", "dark:after:border-gray-700"]
+export const stepper = {
+    base: tv({
+        base: "flex items-center w-full text-sm font-medium text-center text-gray-500 dark:text-gray-400 sm:text-base"
+    }),
+    item: tv({
+        base: "flex items-center",
+        variants: {
+            status: {
+                completed: "text-primary-600 dark:text-primary-500 md:w-full sm:after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700",
+                current: "md:w-full after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700",
+                pending: "md:w-full after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700"
+            },
+            isLast: {
+                true: "",
+                false: ""
+            }
         },
-        isLast: {
-            true: "",
-            false: ""
+        compoundVariants: [
+            {
+                isLast: true,
+                class: "after:content-none after:hidden"
+            }
+        ],
+        defaultVariants: {
+            status: "pending",
+            isLast: false
         }
-    },
-    compoundVariants: [
-        {
-            isLast: true,
-            class: ["after:content-none", "after:hidden"]
-        }
-    ],
-    defaultVariants: {
-        status: "pending",
-        isLast: false
-    }
-});
-export const steppercontent = tv({
-    base: "flex items-center",
-    variants: {
-        status: {
-            completed: ["after:content-['/']", "sm:after:hidden", "after:mx-2", "after:text-gray-200", "dark:after:text-gray-500"],
-            current: ["after:content-['/']", "sm:after:hidden", "after:mx-2", "after:text-gray-200", "dark:after:text-gray-500"],
-            pending: ["after:content-['/']", "sm:after:hidden", "after:mx-2", "after:text-gray-200", "dark:after:text-gray-500"]
+    }),
+    content: tv({
+        base: "flex items-center",
+        variants: {
+            status: {
+                completed: "after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200 dark:after:text-gray-500",
+                current: "after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200 dark:after:text-gray-500",
+                pending: "after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200 dark:after:text-gray-500"
+            },
+            isLast: {
+                true: "",
+                false: ""
+            }
         },
-        isLast: {
-            true: "",
-            false: ""
-        }
-    },
-    compoundVariants: [
-        {
-            isLast: true,
-            class: ["after:content-none"]
+        compoundVariants: [
+            {
+                isLast: true,
+                class: "after:content-none"
+            }
+        ],
+        defaultVariants: {
+            status: "pending",
+            isLast: false
         }
-    ],
-    defaultVariants: {
-        status: "pending",
-        isLast: false
-    }
-});
-export const progressstepper = tv({
-    base: "flex items-center w-full"
-});
-export const progressstepperitem = tv({
-    base: "flex items-center w-full",
-    variants: {
-        status: {
-            completed: ["text-primary-600", "dark:text-primary-500", "after:content-['']", "after:w-full", "after:h-1", "after:border-b", "after:border-primary-100", "after:border-4", "after:inline-block", "dark:after:border-primary-800"],
-            current: ["after:content-['']", "after:w-full", "after:h-1", "after:border-b", "after:border-gray-100", "after:border-4", "after:inline-block", "dark:after:border-gray-700"],
-            pending: ["after:content-['']", "after:w-full", "after:h-1", "after:border-b", "after:border-gray-100", "after:border-4", "after:inline-block", "dark:after:border-gray-700"]
+    })
+};
+export const progressStepper = {
+    stepper: tv({
+        base: "flex items-center w-full"
+    }),
+    item: tv({
+        base: "flex items-center w-full",
+        variants: {
+            status: {
+                completed: "text-primary-600 dark:text-primary-500 after:content-[''] after:w-full after:h-1 after:border-b after:border-primary-100 after:border-4 after:inline-block dark:after:border-primary-800",
+                current: "after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-100 after:border-4 after:inline-block dark:after:border-gray-700",
+                pending: "after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-100 after:border-4 after:inline-block dark:after:border-gray-700"
+            },
+            isLast: {
+                true: "",
+                false: ""
+            }
         },
-        isLast: {
-            true: "",
-            false: ""
-        }
-    },
-    compoundVariants: [
-        {
-            isLast: true,
-            class: ["after:content-none"]
+        compoundVariants: [
+            {
+                isLast: true,
+                class: "after:content-none"
+            }
+        ],
+        defaultVariants: {
+            status: "pending",
+            isLast: false
         }
-    ],
-    defaultVariants: {
-        status: "pending",
-        isLast: false
-    }
-});
-export const progresssteppercircle = tv({
-    base: ["flex items-center justify-center w-10 h-10 rounded-full lg:h-12 lg:w-12 shrink-0"],
-    variants: {
-        status: {
-            completed: ["bg-primary-100", "dark:bg-primary-800"],
-            current: ["bg-gray-100", "dark:bg-gray-700"],
-            pending: ["bg-gray-100", "dark:bg-gray-700"]
+    }),
+    circle: tv({
+        base: "flex items-center justify-center w-10 h-10 rounded-full lg:h-12 lg:w-12 shrink-0",
+        variants: {
+            status: {
+                completed: "bg-primary-100 dark:bg-primary-800",
+                current: "bg-gray-100 dark:bg-gray-700",
+                pending: "bg-gray-100 dark:bg-gray-700"
+            }
+        },
+        defaultVariants: {
+            status: "pending"
         }
-    },
-    defaultVariants: {
-        status: "pending"
-    }
-});
-export const detailedstepper = tv({
-    base: "items-center w-full space-y-4 sm:flex sm:space-x-8 sm:space-y-0 rtl:space-x-reverse"
-});
-export const detailedstepperitem = tv({
-    base: ["flex items-center space-x-2.5 rtl:space-x-reverse"],
-    variants: {
-        status: {
-            completed: ["text-primary-600", "dark:text-primary-500"],
-            current: ["text-gray-500", "dark:text-gray-400"],
-            pending: ["text-gray-500", "dark:text-gray-400"]
+    })
+};
+export const detailedStepper = {
+    stepper: tv({
+        base: "items-center w-full space-y-4 sm:flex sm:space-x-8 sm:space-y-0 rtl:space-x-reverse"
+    }),
+    item: tv({
+        base: "flex items-center space-x-2.5 rtl:space-x-reverse",
+        variants: {
+            status: {
+                completed: "text-primary-600 dark:text-primary-500",
+                current: "text-gray-500 dark:text-gray-400",
+                pending: "text-gray-500 dark:text-gray-400"
+            }
+        },
+        defaultVariants: {
+            status: "pending"
         }
-    },
-    defaultVariants: {
-        status: "pending"
-    }
-});
-export const detailedstepperindicator = tv({
-    base: ["flex items-center justify-center w-8 h-8 rounded-full shrink-0"],
-    variants: {
-        status: {
-            completed: ["border border-primary-600 dark:border-primary-500", "bg-primary-600 dark:bg-primary-500", "text-white"],
-            current: ["border border-gray-500 dark:border-gray-400", "text-gray-500 dark:text-gray-400"],
-            pending: ["border border-gray-500 dark:border-gray-400", "text-gray-500 dark:text-gray-400"]
+    }),
+    indicator: tv({
+        base: "flex items-center justify-center w-8 h-8 rounded-full shrink-0",
+        variants: {
+            status: {
+                completed: "border border-primary-600 dark:border-primary-500 bg-primary-600 dark:bg-primary-500 text-white",
+                current: "border border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400",
+                pending: "border border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400"
+            }
+        },
+        defaultVariants: {
+            status: "pending"
         }
-    },
-    defaultVariants: {
-        status: "pending"
-    }
-});
-export const verticalstepper = tv({
-    base: "space-y-4 w-72"
-});
-export const verticalsteppercard = tv({
-    base: ["w-full p-4 border rounded-lg"],
-    variants: {
-        status: {
-            completed: ["text-green-700", "border-green-300", "bg-green-50", "dark:bg-gray-800", "dark:border-green-800", "dark:text-green-400"],
-            current: ["text-primary-700", "bg-primary-100", "border-primary-300", "dark:bg-gray-800", "dark:border-primary-800", "dark:text-primary-400"],
-            pending: ["text-gray-900", "bg-gray-100", "border-gray-300", "dark:bg-gray-800", "dark:border-gray-700", "dark:text-gray-400"]
+    })
+};
+export const verticalStepper = {
+    stepper: tv({
+        base: "space-y-4 w-72"
+    }),
+    card: tv({
+        base: "w-full p-4 border rounded-lg",
+        variants: {
+            status: {
+                completed: "text-green-700 border-green-300 bg-green-50 dark:bg-gray-800 dark:border-green-800 dark:text-green-400",
+                current: "text-primary-700 bg-primary-100 border-primary-300 dark:bg-gray-800 dark:border-primary-800 dark:text-primary-400",
+                pending: "text-gray-900 bg-gray-100 border-gray-300 dark:bg-gray-800  dark:border-gray-700 dark:text-gray-400"
+            }
+        },
+        defaultVariants: {
+            status: "pending"
         }
-    },
-    defaultVariants: {
-        status: "pending"
-    }
-});
-export const verticalsteppercontent = tv({
-    base: "flex items-center justify-between"
-});
-export const breadcrumbstepper = tv({
-    base: ["flex items-center w-full p-3 space-x-2 text-sm font-medium text-center", "text-gray-500 bg-white border border-gray-200 rounded-lg shadow-xs", "dark:text-gray-400 sm:text-base dark:bg-gray-800 dark:border-gray-700", "sm:p-4 sm:space-x-4 rtl:space-x-reverse"]
-});
-export const breadcrumbstepperitem = tv({
-    base: ["flex items-center"],
-    variants: {
-        status: {
-            completed: ["text-primary-600", "dark:text-primary-500"],
-            current: ["text-gray-500", "dark:text-gray-400"],
-            pending: ["text-gray-500", "dark:text-gray-400"]
+    }),
+    content: tv({
+        base: "flex items-center justify-between"
+    })
+};
+export const breadcrumbStepper = {
+    stepper: tv({
+        base: "flex items-center w-full p-3 space-x-2 text-sm font-medium text-center text-gray-500 bg-white border border-gray-200 rounded-lg shadow-xs  dark:text-gray-400 sm:text-base dark:bg-gray-800 dark:border-gray-700 sm:p-4 sm:space-x-4 rtl:space-x-reverse"
+    }),
+    item: tv({
+        base: "flex items-center",
+        variants: {
+            status: {
+                completed: "text-primary-600 dark:text-primary-500",
+                current: "text-gray-500 dark:text-gray-400",
+                pending: "text-gray-500 dark:text-gray-400"
+            },
+            hasChevron: {
+                true: "",
+                false: ""
+            }
         },
-        hasChevron: {
-            true: [],
-            false: []
+        defaultVariants: {
+            status: "pending",
+            hasChevron: false
         }
-    },
-    defaultVariants: {
-        status: "pending",
-        hasChevron: false
-    }
-});
-export const breadcrumbstepperindicator = tv({
-    base: ["flex items-center justify-center w-5 h-5 me-2 text-xs rounded-full shrink-0"],
-    variants: {
-        status: {
-            completed: ["border border-primary-600 dark:border-primary-500", "bg-primary-600 dark:bg-primary-500", "text-white"],
-            current: ["border border-gray-500 dark:border-gray-400", "text-gray-500 dark:text-gray-400"],
-            pending: ["border border-gray-500 dark:border-gray-400", "text-gray-500 dark:text-gray-400"]
+    }),
+    indicator: tv({
+        base: "flex items-center justify-center w-5 h-5 me-2 text-xs rounded-full shrink-0",
+        variants: {
+            status: {
+                completed: "border border-primary-600 dark:border-primary-500 bg-primary-600 dark:bg-primary-500 text-white",
+                current: "border border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400",
+                pending: "border border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400"
+            }
+        },
+        defaultVariants: {
+            status: "pending"
         }
-    },
-    defaultVariants: {
-        status: "pending"
-    }
-});
-export const timelinestepper = tv({
-    base: "relative text-gray-500 border-s border-gray-200 dark:border-gray-700 dark:text-gray-400"
-});
-export const timelinestepperitem = tv({
-    base: "ms-6",
-    variants: {
-        isLast: {
-            true: "",
-            false: "mb-10"
+    })
+};
+export const timelineStepper = {
+    base: tv({
+        base: "relative text-gray-500 border-s border-gray-200 dark:border-gray-700 dark:text-gray-400"
+    }),
+    item: tv({
+        base: "ms-6",
+        variants: {
+            isLast: {
+                true: "",
+                false: "mb-10"
+            }
+        },
+        defaultVariants: {
+            isLast: false
         }
-    },
-    defaultVariants: {
-        isLast: false
-    }
-});
-export const timelinesteppercircle = tv({
-    base: ["absolute flex items-center justify-center w-8 h-8 rounded-full -start-4 ring-4 ring-white dark:ring-gray-900"],
-    variants: {
-        status: {
-            completed: ["bg-green-200", "dark:bg-green-900"],
-            current: ["bg-gray-100", "dark:bg-gray-700"],
-            pending: ["bg-gray-100", "dark:bg-gray-700"]
+    }),
+    circle: tv({
+        base: "absolute flex items-center justify-center w-8 h-8 rounded-full -start-4 ring-4 ring-white dark:ring-gray-900",
+        variants: {
+            status: {
+                completed: "bg-green-200 dark:bg-green-900",
+                current: "bg-gray-100 dark:bg-gray-700",
+                pending: "bg-gray-100 dark:bg-gray-700"
+            }
+        },
+        defaultVariants: {
+            status: "pending"
         }
-    },
-    defaultVariants: {
-        status: "pending"
-    }
-});
+    })
+};

package/dist/table/Table.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import { table as tableCls, TableHead, TableBody } from ".";
-  import { twMerge } from "tailwind-merge";
+  import { table as tableCls, TableHead, TableBody, type TableTheme } from ".";
   import clsx from "clsx";
-  import type { TableProps, TableCtxType } from "..";
+  import { type TableProps, type TableCtxType, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, footerSlot, captionSlot, items, divClass = "relative overflow-x-auto", striped, hoverable, border = true, shadow, color = "default", class: className, ...restProps }: TableProps = $props();
 
+  const theme = getTheme("table");
+
   const { base, table } = $derived(tableCls({ color, shadow }));
 
   let tableCtx: TableCtxType = {
@@ -30,8 +32,8 @@
   let bodyItems = $derived(items && items.length > 0 ? items.map((item) => Object.values(item)) : []);
 </script>
 
-<div class={twMerge(base(), clsx(divClass))}>
-  <table {...restProps} class={twMerge(table(), clsx(className))}>
+<div class={cn(base(), clsx(divClass), (theme as TableTheme)?.base)}>
+  <table {...restProps} class={cn(table(), clsx(className), (theme as TableTheme)?.table)}>
     {#if captionSlot}
       {@render captionSlot()}
     {/if}
@@ -51,7 +53,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1649)
+[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1643)
 ## Props
 @prop children
 @prop footerSlot

package/dist/table/Table.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { TableProps } from "..";
+import { type TableProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1649)
+ * [TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1643)
  * ## Props
  * @prop children
  * @prop footerSlot

package/dist/table/TableBody.svelte

@@ -2,9 +2,13 @@
   import clsx from "clsx";
   import { TableBodyRow, TableBodyCell } from ".";
   import type { TableBodyProps, CellValue, BodyRow } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, bodyItems, class: className, ...restProps }: TableBodyProps = $props();
 
+  const theme = getTheme("tableBody");
+
   function getCellValues(row: BodyRow): CellValue[] {
     if (Array.isArray(row)) {
       return row;
@@ -14,7 +18,7 @@
   }
 </script>
 
-<tbody {...restProps} class={clsx(className)}>
+<tbody {...restProps} class={cn(clsx(className), theme)}>
   {#if bodyItems}
     {#each bodyItems as row}
       <TableBodyRow>
@@ -32,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1681)
+[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1675)
 ## Props
 @prop children
 @prop bodyItems

package/dist/table/TableBody.svelte.d.ts

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

package/dist/table/TableBodyCell.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
-  import { tablebodycell } from ".";
+  import { tableBodyCell } from ".";
   import type { TableBodyCellProps } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, colspan, onclick, ...restProps }: TableBodyCellProps = $props();
+
+  const theme = getTheme("tableBodyCell");
 </script>
 
-<td {...restProps} class={twMerge(tablebodycell(), clsx(className))} colspan={colspan ?? 1}>
+<td {...restProps} class={cn(tableBodyCell(), clsx(className), theme)} colspan={colspan ?? 1}>
   {#if onclick}
     <button {onclick}>
       {#if children}
@@ -23,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1670)
+[TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1664)
 ## Props
 @prop children
 @prop class: className

package/dist/table/TableBodyCell.svelte.d.ts

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

package/dist/table/TableBodyRow.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { tablebodyrow } from ".";
+  import { tableBodyRow } from ".";
   import type { TableBodyRowProps, TableCtxType } from "../types";
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, color, striped, hoverable, border, ...restProps }: TableBodyRowProps = $props();
 
+  const theme = getTheme("tableBodyRow");
+
   const tableCtx = getContext<TableCtxType>("tableCtx");
   // for reactivity with svelte context
   let compoColor = $derived(color || tableCtx.color || "default");
@@ -14,10 +17,10 @@
   let compoStriped = $derived(striped || tableCtx.striped || false);
   let compoBorder = $derived(border || tableCtx.border || false);
 
-  const base = $derived(tablebodyrow({ color: compoColor, hoverable: compoHoverable, striped: compoStriped, border: compoBorder }));
+  const base = $derived(tableBodyRow({ color: compoColor, hoverable: compoHoverable, striped: compoStriped, border: compoBorder }));
 </script>
 
-<tr {...restProps} class={twMerge(base, clsx(className))}>
+<tr {...restProps} class={cn(base, clsx(className), theme)}>
   {#if children}
     {@render children()}
   {/if}
@@ -27,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1662)
+[TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1656)
 ## Props
 @prop children
 @prop class: className

package/dist/table/TableBodyRow.svelte.d.ts

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

package/dist/table/TableHead.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { TableHeadCell, tablehead } from ".";
+  import { TableHeadCell, tableHead } from ".";
   import type { TableHeadProps, TableCtxType, HeadItemType } from "../types";
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, headerSlot, color, striped, border, class: className, headItems, defaultRow = true, ...restProps }: TableHeadProps = $props();
 
+  const theme = getTheme("tableHead");
+
   const tableCtx = getContext<TableCtxType>("tableCtx");
   // for reactivity with svelte context
   let compoColor = $derived(color ? color : tableCtx.color || "default");
   let compoStriped = $derived(striped ? striped : tableCtx.striped || false);
   let compoBorder = $derived(border ? border : tableCtx.border || false);
 
-  const base = $derived(tablehead({ color: compoColor, border: compoBorder, striped: compoStriped }));
+  const base = $derived(tableHead({ color: compoColor, border: compoBorder, striped: compoStriped }));
 
   function getItemText(item: HeadItemType): string {
     if (typeof item === "object" && "text" in item) {
@@ -23,7 +26,7 @@
   }
 </script>
 
-<thead {...restProps} class={twMerge(base, clsx(className))}>
+<thead {...restProps} class={cn(base, clsx(className), theme)}>
   {#if headItems}
     {#if headerSlot}
       {@render headerSlot()}
@@ -50,7 +53,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1637)
+[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1631)
 ## Props
 @prop children
 @prop headerSlot

package/dist/table/TableHead.svelte.d.ts

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