flowbite-svelte 1.9.0 → 1.10.0

package/dist/table/TableHeadCell.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
-  import { tableheadcell } from ".";
+  import { tableHeadCell } from ".";
   import type { TableHeadCellProps } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: TableHeadCellProps = $props();
+
+  const theme = getTheme("tableHeadCell");
 </script>
 
-<th {...restProps} class={twMerge(tableheadcell(), clsx(className))}>
+<th {...restProps} class={cn(tableHeadCell(), clsx(className), theme)}>
   {#if children}
     {@render children()}
   {/if}
@@ -17,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableHeadCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1686)
+[TableHeadCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1680)
 ## Props
 @prop children
 @prop class: className

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

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

package/dist/table/TableSearch.svelte

@@ -1,25 +1,30 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
-  import clsx from "clsx";
   import { setContext } from "svelte";
   import type { TableSearchProps, TableSearchType } from "../types";
+  import { cn } from "..";
+  import { tableSearch, type TableSearchTheme } from ".";
+  import { getTheme } from "../theme/themeUtils";
 
-  let { children, header, footer, divClass = "relative overflow-x-auto shadow-md sm:rounded-lg", inputValue = $bindable(), striped, hoverable, customColor = "", color = "default", innerDivClass = "p-4", inputClass, searchClass = "relative mt-1", svgDivClass, svgClass = "w-5 h-5 text-gray-500 dark:text-gray-400", tableClass = "w-full text-left text-sm", class: className, placeholder = "Search", ...restProps }: TableSearchProps = $props();
+  let { children, header, footer, divClass, inputValue = $bindable(), striped = false, hoverable = false, customColor = "", color = "default", innerDivClass, inputClass, searchClass, svgDivClass, svgClass, tableClass, class: className, placeholder = "Search", ...restProps }: TableSearchProps = $props();
 
-  let inputCls = twMerge("bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", clsx(inputClass));
-  let svgDivCls = twMerge("absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none", clsx(svgDivClass));
+  const theme = getTheme("tableSearch");
 
-  const colors: { [key: string]: string } = {
-    default: "text-gray-500 dark:text-gray-400",
-    blue: "text-blue-100 dark:text-blue-100",
-    green: "text-green-100 dark:text-green-100",
-    red: "text-red-100 dark:text-red-100",
-    yellow: "text-yellow-100 dark:text-yellow-100",
-    purple: "text-purple-100 dark:text-purple-100",
-    indigo: "text-indigo-100 dark:text-indigo-100",
-    pink: "text-pink-100 dark:text-pink-100",
-    custom: customColor
-  };
+  // Generate theme styles - handle custom color case
+  const themeColor = color === "custom" ? "default" : (color as "default" | "blue" | "green" | "red" | "yellow" | "purple" | "indigo" | "pink");
+
+  const styles = tableSearch({ color: themeColor, striped, hoverable });
+
+  // Apply custom classes or use theme defaults
+  const rootClass = cn(styles.root(), divClass, (theme as TableSearchTheme)?.root);
+  const innerDivCls = cn(styles.innerDiv(), innerDivClass, (theme as TableSearchTheme)?.innerDiv);
+  const searchContainerCls = cn(styles.searchContainer(), searchClass, (theme as TableSearchTheme)?.searchContainer);
+  const svgContainerCls = cn(styles.svgContainer(), svgDivClass, (theme as TableSearchTheme)?.svgContainer);
+  const svgCls = cn(styles.svg(), svgClass, (theme as TableSearchTheme)?.svg);
+  const inputCls = cn(styles.input(), inputClass, (theme as TableSearchTheme)?.input);
+  const tableCls = cn(styles.table(), tableClass, className, (theme as TableSearchTheme)?.table);
+
+  // Handle custom color
+  const finalTableClass = color === "custom" && customColor ? cn(tableCls, customColor) : tableCls;
 
   const tableSearchCtx: TableSearchType = {
     striped,
@@ -30,12 +35,12 @@
   setContext("tableCtx", tableSearchCtx);
 </script>
 
-<div class={clsx(divClass)}>
-  <div class={clsx(innerDivClass)}>
+<div class={rootClass}>
+  <div class={innerDivCls}>
     <label for="table-search" class="sr-only">Search</label>
-    <div class={clsx(searchClass)}>
-      <div class={svgDivCls}>
-        <svg class={clsx(svgClass)} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <div class={searchContainerCls}>
+      <div class={svgContainerCls}>
+        <svg class={svgCls} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
         </svg>
       </div>
@@ -45,7 +50,7 @@
       {@render header()}
     {/if}
   </div>
-  <table {...restProps} class={twMerge(clsx(tableClass), colors[color], clsx(className))}>
+  <table {...restProps} class={finalTableClass}>
     {#if children}
       {@render children()}
     {/if}
@@ -59,23 +64,23 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1701)
+[TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1695)
 ## Props
 @prop children
 @prop header
 @prop footer
-@prop divClass = "relative overflow-x-auto shadow-md sm:rounded-lg"
+@prop divClass
 @prop inputValue = $bindable()
-@prop striped
-@prop hoverable
+@prop striped = false
+@prop hoverable = false
 @prop customColor = ""
 @prop color = "default"
-@prop innerDivClass = "p-4"
+@prop innerDivClass
 @prop inputClass
-@prop searchClass = "relative mt-1"
+@prop searchClass
 @prop svgDivClass
-@prop svgClass = "w-5 h-5 text-gray-500 dark:text-gray-400"
-@prop tableClass = "w-full text-left text-sm"
+@prop svgClass
+@prop tableClass
 @prop class: className
 @prop placeholder = "Search"
 @prop ...restProps

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

@@ -2,23 +2,23 @@ import type { TableSearchProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1701)
+ * [TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1695)
  * ## Props
  * @prop children
  * @prop header
  * @prop footer
- * @prop divClass = "relative overflow-x-auto shadow-md sm:rounded-lg"
+ * @prop divClass
  * @prop inputValue = $bindable()
- * @prop striped
- * @prop hoverable
+ * @prop striped = false
+ * @prop hoverable = false
  * @prop customColor = ""
  * @prop color = "default"
- * @prop innerDivClass = "p-4"
+ * @prop innerDivClass
  * @prop inputClass
- * @prop searchClass = "relative mt-1"
+ * @prop searchClass
  * @prop svgDivClass
- * @prop svgClass = "w-5 h-5 text-gray-500 dark:text-gray-400"
- * @prop tableClass = "w-full text-left text-sm"
+ * @prop svgClass
+ * @prop tableClass
  * @prop class: className
  * @prop placeholder = "Search"
  * @prop ...restProps

package/dist/table/index.d.ts

@@ -1,9 +1,8 @@
-import Table from "./Table.svelte";
-import TableBody from "./TableBody.svelte";
-import TableBodyCell from "./TableBodyCell.svelte";
-import TableBodyRow from "./TableBodyRow.svelte";
-import TableHeadCell from "./TableHeadCell.svelte";
-import TableHead from "./TableHead.svelte";
-import TableSearch from "./TableSearch.svelte";
-import { table, tablebodyrow, tablehead, tablebodycell, tableheadcell } from "./theme";
-export { Table, table, TableBody, TableBodyCell, tablebodycell, TableBodyRow, tablebodyrow, TableHeadCell, tableheadcell, TableHead, tablehead, TableSearch };
+export { default as Table } from "./Table.svelte";
+export { default as TableBody } from "./TableBody.svelte";
+export { default as TableBodyCell } from "./TableBodyCell.svelte";
+export { default as TableBodyRow } from "./TableBodyRow.svelte";
+export { default as TableHeadCell } from "./TableHeadCell.svelte";
+export { default as TableHead } from "./TableHead.svelte";
+export { default as TableSearch } from "./TableSearch.svelte";
+export { table, tableBodyRow, tableHead, tableBodyCell, tableHeadCell, tableSearch, type TableTheme, type TableBodyRowTheme, type TableHeadTheme, type TableBodyCellTheme, type TableHeadCellTheme, type TableSearchTheme } from "./theme";

package/dist/table/index.js

@@ -1,9 +1,8 @@
-import Table from "./Table.svelte";
-import TableBody from "./TableBody.svelte";
-import TableBodyCell from "./TableBodyCell.svelte";
-import TableBodyRow from "./TableBodyRow.svelte";
-import TableHeadCell from "./TableHeadCell.svelte";
-import TableHead from "./TableHead.svelte";
-import TableSearch from "./TableSearch.svelte";
-import { table, tablebodyrow, tablehead, tablebodycell, tableheadcell } from "./theme";
-export { Table, table, TableBody, TableBodyCell, tablebodycell, TableBodyRow, tablebodyrow, TableHeadCell, tableheadcell, TableHead, tablehead, TableSearch };
+export { default as Table } from "./Table.svelte";
+export { default as TableBody } from "./TableBody.svelte";
+export { default as TableBodyCell } from "./TableBodyCell.svelte";
+export { default as TableBodyRow } from "./TableBodyRow.svelte";
+export { default as TableHeadCell } from "./TableHeadCell.svelte";
+export { default as TableHead } from "./TableHead.svelte";
+export { default as TableSearch } from "./TableSearch.svelte";
+export { table, tableBodyRow, tableHead, tableBodyCell, tableHeadCell, tableSearch } from "./theme";

package/dist/table/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "clsx";
 export type TableVariants = VariantProps<typeof table>;
 export declare const table: import("tailwind-variants").TVReturnType<{
     color: {
@@ -223,7 +224,9 @@ export declare const table: import("tailwind-variants").TVReturnType<{
     base: string;
     table: string;
 }, undefined, unknown, unknown, undefined>>;
-export declare const tablebodyrow: import("tailwind-variants").TVReturnType<{
+export type TableSlots = keyof typeof table.slots;
+export type TableTheme = Partial<Record<TableSlots, string>>;
+export declare const tableBodyRow: import("tailwind-variants").TVReturnType<{
     color: {
         default: string;
         primary: string;
@@ -323,7 +326,8 @@ export declare const tablebodyrow: import("tailwind-variants").TVReturnType<{
         true: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
-export declare const tablehead: import("tailwind-variants").TVReturnType<{
+export type TableBodyRowTheme = string;
+export declare const tableHead: import("tailwind-variants").TVReturnType<{
     color: {
         default: string;
         primary: string;
@@ -420,5 +424,189 @@ export declare const tablehead: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "text-xs uppercase", unknown, unknown, undefined>>;
-export declare const tablebodycell: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-6 py-4 whitespace-nowrap font-medium", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-6 py-4 whitespace-nowrap font-medium", unknown, unknown, undefined>>;
-export declare const tableheadcell: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-6 py-3", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-6 py-3", unknown, unknown, undefined>>;
+export type TableHeadTheme = string;
+export declare const tableBodyCell: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-6 py-4 whitespace-nowrap font-medium", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-6 py-4 whitespace-nowrap font-medium", unknown, unknown, undefined>>;
+export type TableBodyCellTheme = string;
+export declare const tableHeadCell: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-6 py-3", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-6 py-3", unknown, unknown, undefined>>;
+export type TableHeadCellTheme = string;
+export type TableSearchClasses = Partial<{
+    root: ClassValue;
+    innerDiv: ClassValue;
+    searchContainer: ClassValue;
+    svgContainer: ClassValue;
+    svg: ClassValue;
+    input: ClassValue;
+    table: ClassValue;
+}>;
+export type TableSearchVariants = {
+    classes?: TableSearchClasses;
+};
+export declare const tableSearch: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            svg: string;
+            table: string;
+        };
+        blue: {
+            svg: string;
+            table: string;
+        };
+        green: {
+            svg: string;
+            table: string;
+        };
+        red: {
+            svg: string;
+            table: string;
+        };
+        yellow: {
+            svg: string;
+            table: string;
+        };
+        purple: {
+            svg: string;
+            table: string;
+        };
+        indigo: {
+            svg: string;
+            table: string;
+        };
+        pink: {
+            svg: string;
+            table: string;
+        };
+    };
+    striped: {
+        true: {
+            table: string;
+        };
+        false: {};
+    };
+    hoverable: {
+        true: {
+            table: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    innerDiv: string;
+    searchContainer: string;
+    svgContainer: string;
+    svg: string;
+    input: string;
+    table: string;
+}, undefined, {
+    color: {
+        default: {
+            svg: string;
+            table: string;
+        };
+        blue: {
+            svg: string;
+            table: string;
+        };
+        green: {
+            svg: string;
+            table: string;
+        };
+        red: {
+            svg: string;
+            table: string;
+        };
+        yellow: {
+            svg: string;
+            table: string;
+        };
+        purple: {
+            svg: string;
+            table: string;
+        };
+        indigo: {
+            svg: string;
+            table: string;
+        };
+        pink: {
+            svg: string;
+            table: string;
+        };
+    };
+    striped: {
+        true: {
+            table: string;
+        };
+        false: {};
+    };
+    hoverable: {
+        true: {
+            table: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    innerDiv: string;
+    searchContainer: string;
+    svgContainer: string;
+    svg: string;
+    input: string;
+    table: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: {
+            svg: string;
+            table: string;
+        };
+        blue: {
+            svg: string;
+            table: string;
+        };
+        green: {
+            svg: string;
+            table: string;
+        };
+        red: {
+            svg: string;
+            table: string;
+        };
+        yellow: {
+            svg: string;
+            table: string;
+        };
+        purple: {
+            svg: string;
+            table: string;
+        };
+        indigo: {
+            svg: string;
+            table: string;
+        };
+        pink: {
+            svg: string;
+            table: string;
+        };
+    };
+    striped: {
+        true: {
+            table: string;
+        };
+        false: {};
+    };
+    hoverable: {
+        true: {
+            table: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    innerDiv: string;
+    searchContainer: string;
+    svgContainer: string;
+    svg: string;
+    input: string;
+    table: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TableSearchColor = "default" | "blue" | "green" | "red" | "yellow" | "purple" | "indigo" | "pink" | "custom";
+export type TableSearchSlots = keyof typeof tableSearch.slots;
+export type TableSearchTheme = Partial<Record<TableSearchSlots, string>>;

package/dist/table/theme.js

@@ -34,7 +34,7 @@ export const table = tv({
         }
     }
 });
-export const tablebodyrow = tv({
+export const tableBodyRow = tv({
     base: "",
     variants: {
         color: {
@@ -284,7 +284,7 @@ export const tablebodyrow = tv({
         }
     ]
 });
-export const tablehead = tv({
+export const tableHead = tv({
     base: "text-xs uppercase",
     variants: {
         color: {
@@ -368,9 +368,73 @@ export const tablehead = tv({
         }
     ]
 });
-export const tablebodycell = tv({
+export const tableBodyCell = tv({
     base: "px-6 py-4 whitespace-nowrap font-medium"
 });
-export const tableheadcell = tv({
+export const tableHeadCell = tv({
     base: "px-6 py-3"
 });
+export const tableSearch = tv({
+    slots: {
+        root: "relative overflow-x-auto shadow-md sm:rounded-lg",
+        innerDiv: "p-4",
+        searchContainer: "relative mt-1",
+        svgContainer: "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none",
+        svg: "w-5 h-5",
+        input: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 p-2.5 ps-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
+        table: "w-full text-left text-sm"
+    },
+    variants: {
+        color: {
+            default: {
+                svg: "text-gray-500 dark:text-gray-400",
+                table: "text-gray-500 dark:text-gray-400"
+            },
+            blue: {
+                svg: "text-blue-500 dark:text-blue-400",
+                table: "text-blue-100 dark:text-blue-100"
+            },
+            green: {
+                svg: "text-green-500 dark:text-green-400",
+                table: "text-green-100 dark:text-green-100"
+            },
+            red: {
+                svg: "text-red-500 dark:text-red-400",
+                table: "text-red-100 dark:text-red-100"
+            },
+            yellow: {
+                svg: "text-yellow-500 dark:text-yellow-400",
+                table: "text-yellow-100 dark:text-yellow-100"
+            },
+            purple: {
+                svg: "text-purple-500 dark:text-purple-400",
+                table: "text-purple-100 dark:text-purple-100"
+            },
+            indigo: {
+                svg: "text-indigo-500 dark:text-indigo-400",
+                table: "text-indigo-100 dark:text-indigo-100"
+            },
+            pink: {
+                svg: "text-pink-500 dark:text-pink-400",
+                table: "text-pink-100 dark:text-pink-100"
+            }
+        },
+        striped: {
+            true: {
+                table: "[&_tbody_tr:nth-child(odd)]:bg-white [&_tbody_tr:nth-child(odd)]:dark:bg-gray-900 [&_tbody_tr:nth-child(even)]:bg-gray-50 [&_tbody_tr:nth-child(even)]:dark:bg-gray-800"
+            },
+            false: {}
+        },
+        hoverable: {
+            true: {
+                table: "[&_tbody_tr]:hover:bg-gray-50 [&_tbody_tr]:dark:hover:bg-gray-600"
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        color: "default",
+        striped: false,
+        hoverable: false
+    }
+});

package/dist/tabs/TabItem.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import { writable } from "svelte/store";
-  import { tabItem, tabs } from ".";
+  import { tabItem, tabs, type TabItemTheme } from ".";
   import { type TabitemProps, type TabCtxType, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, titleSlot, open = false, title = "Tab title", activeClass, inactiveClass, class: className, disabled, tabStyle, ...restProps }: TabitemProps = $props();
 
+  const theme = getTheme("tabItem");
+
   const ctx: TabCtxType = getContext("ctx");
   let compoTabStyle = $derived(tabStyle ? tabStyle : ctx.tabStyle || "full");
 
@@ -29,8 +32,8 @@
   const { base, button, content } = $derived(tabItem({ open, disabled }));
 </script>
 
-<li {...restProps} class={cn(base(), className)} role="presentation">
-  <button type="button" onclick={() => (open = true)} role="tab" id={tabId} aria-controls={ctx.panelId} aria-selected={open} {disabled} class={cn(button(), open ? (activeClass ?? active()) : (inactiveClass ?? inactive()))}>
+<li {...restProps} class={cn(base(), className, (theme as TabItemTheme)?.base)} role="presentation">
+  <button type="button" onclick={() => (open = true)} role="tab" id={tabId} aria-controls={ctx.panelId} aria-selected={open} {disabled} class={cn(button(), open ? (activeClass ?? active()) : (inactiveClass ?? inactive()), (theme as TabItemTheme)?.button)}>
     {#if titleSlot}
       {@render titleSlot()}
     {:else}
@@ -39,7 +42,7 @@
   </button>
 
   {#if open && children}
-    <div class={content()}>
+    <div class={cn(content(), (theme as TabItemTheme)?.content)}>
       <div use:init>
         {@render children()}
       </div>
@@ -51,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1729)
+[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1723)
 ## Props
 @prop children
 @prop titleSlot

package/dist/tabs/TabItem.svelte.d.ts

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

package/dist/tabs/Tabs.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { writable } from "svelte/store";
   import { setContext } from "svelte";
-  import { tabs } from ".";
+  import { tabs, type TabsTheme } from ".";
   import type { TabsProps, TabCtxType } from "../types";
+  import { cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, tabStyle = "none", ulClass, contentClass, divider = true, ...restProps }: TabsProps = $props();
 
+  const theme = getTheme("tabs");
+
   const { base, content, divider: dividerClass } = $derived(tabs({ tabStyle, hasDivider: divider }));
 
   // Generate a unique ID for the tab panel
@@ -33,19 +36,19 @@
   }
 </script>
 
-<ul role="tablist" {...restProps} class={twMerge(base(), clsx(ulClass))}>
+<ul role="tablist" {...restProps} class={cn(base(), clsx(ulClass), (theme as TabsTheme)?.base)}>
   {@render children()}
 </ul>
 {#if dividerBool}
-  <div class={dividerClass()}></div>
+  <div class={cn(dividerClass(), (theme as TabsTheme)?.divider)}></div>
 {/if}
-<div id={panelId} class={twMerge(content(), clsx(contentClass))} role="tabpanel" aria-labelledby={panelId} use:init></div>
+<div id={panelId} class={cn(content(), clsx(contentClass), (theme as TabsTheme)?.content)} role="tabpanel" aria-labelledby={panelId} use:init></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1721)
+[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1715)
 ## Props
 @prop children
 @prop tabStyle = "none"

package/dist/tabs/Tabs.svelte.d.ts

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

package/dist/tabs/index.d.ts

@@ -1,4 +1,3 @@
-import TabItem from "./TabItem.svelte";
-import Tabs from "./Tabs.svelte";
-import { tabs, tabItem } from "./theme";
-export { TabItem, tabItem, Tabs, tabs };
+export { default as TabItem } from "./TabItem.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export { tabs, tabItem, type TabsTheme, type TabItemTheme } from "./theme";

package/dist/tabs/index.js

@@ -1,4 +1,3 @@
-import TabItem from "./TabItem.svelte";
-import Tabs from "./Tabs.svelte";
-import { tabs, tabItem } from "./theme";
-export { TabItem, tabItem, Tabs, tabs };
+export { default as TabItem } from "./TabItem.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export { tabs, tabItem } from "./theme";