flowbite-svelte 1.10.19 → 1.10.21

package/dist/stepper/theme.js

@@ -1,214 +1,180 @@
 import { tv } from "tailwind-variants";
-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"
+export const stepper = tv({
+    slots: {
+        base: "flex items-center w-full text-sm font-medium text-center text-gray-500 dark:text-gray-400 sm:text-base",
+        item: "flex items-center",
+        content: "flex items-center"
+    },
+    variants: {
+        status: {
+            completed: {
+                item: "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",
+                content: "after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200 dark:after:text-gray-500"
             },
-            isLast: {
-                true: "",
-                false: ""
-            }
-        },
-        compoundVariants: [
-            {
-                isLast: true,
-                class: "after:content-none after:hidden"
-            }
-        ],
-        defaultVariants: {
-            status: "pending",
-            isLast: false
-        }
-    }),
-    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"
+            current: {
+                item: "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",
+                content: "after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200 dark:after:text-gray-500"
             },
-            isLast: {
-                true: "",
-                false: ""
+            pending: {
+                item: "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",
+                content: "after:content-['/'] sm:after:hidden after:mx-2 after:text-gray-200 dark:after:text-gray-500"
             }
         },
-        compoundVariants: [
-            {
-                isLast: true,
-                class: "after:content-none"
-            }
-        ],
-        defaultVariants: {
-            status: "pending",
-            isLast: false
+        isLast: {
+            true: {
+                item: "after:content-none after:hidden",
+                content: "after:content-none"
+            },
+            false: {}
         }
-    })
-};
-export const progressStepper = {
-    stepper: tv({
-        base: "flex items-center w-full"
-    }),
-    item: tv({
+    },
+    defaultVariants: {
+        status: "pending",
+        isLast: false
+    }
+});
+// ProgressStepper
+export const progressStepper = tv({
+    slots: {
         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"
+        item: "flex items-center w-full",
+        circle: "flex items-center justify-center w-10 h-10 rounded-full lg:h-12 lg:w-12 shrink-0"
+    },
+    variants: {
+        status: {
+            completed: {
+                item: "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",
+                circle: "bg-primary-100 dark:bg-primary-800"
             },
-            isLast: {
-                true: "",
-                false: ""
-            }
-        },
-        compoundVariants: [
-            {
-                isLast: true,
-                class: "after:content-none"
-            }
-        ],
-        defaultVariants: {
-            status: "pending",
-            isLast: false
-        }
-    }),
-    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"
-        }
-    })
-};
-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"
-        }
-    }),
-    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"
+            current: {
+                item: "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",
+                circle: "bg-gray-100 dark:bg-gray-700"
+            },
+            pending: {
+                item: "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",
+                circle: "bg-gray-100 dark:bg-gray-700"
             }
         },
-        defaultVariants: {
-            status: "pending"
+        isLast: {
+            true: {
+                item: "after:content-none"
+            },
+            false: {}
         }
-    })
-};
-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",
+        isLast: false
+    }
+});
+// DetailedStepper
+export const detailedStepper = tv({
+    slots: {
+        base: "items-center w-full space-y-4 sm:flex sm:space-x-8 sm:space-y-0 rtl:space-x-reverse",
+        item: "flex items-center space-x-2.5 rtl:space-x-reverse",
+        indicator: "flex items-center justify-center w-8 h-8 rounded-full shrink-0"
+    },
+    variants: {
+        status: {
+            completed: {
+                item: "text-primary-600 dark:text-primary-500",
+                indicator: "border border-primary-600 dark:border-primary-500 bg-primary-600 dark:bg-primary-500 text-white"
+            },
+            current: {
+                item: "text-gray-500 dark:text-gray-400",
+                indicator: "border border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400"
+            },
+            pending: {
+                item: "text-gray-500 dark:text-gray-400",
+                indicator: "border border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400"
             }
-        },
-        defaultVariants: {
-            status: "pending"
         }
-    }),
-    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"
+    },
+    defaultVariants: {
+        status: "pending"
+    }
+});
+export const verticalStepper = tv({
+    slots: {
+        base: "space-y-4 w-72",
+        card: "w-full p-4 border rounded-lg",
+        content: "flex items-center justify-between"
+    },
+    variants: {
+        status: {
+            completed: {
+                card: "text-green-700 border-green-300 bg-green-50 dark:bg-gray-800 dark:border-green-800 dark:text-green-400"
+            },
+            current: {
+                card: "text-primary-700 bg-primary-100 border-primary-300 dark:bg-gray-800 dark:border-primary-800 dark:text-primary-400"
             },
-            hasChevron: {
-                true: "",
-                false: ""
+            pending: {
+                card: "text-gray-900 bg-gray-100 border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
             }
-        },
-        defaultVariants: {
-            status: "pending",
-            hasChevron: false
         }
-    }),
-    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"
+    }
+});
+export const breadcrumbStepper = tv({
+    slots: {
+        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: "flex items-center",
+        indicator: "flex items-center justify-center w-5 h-5 me-2 text-xs rounded-full shrink-0"
+    },
+    variants: {
+        status: {
+            completed: {
+                item: "text-primary-600 dark:text-primary-500",
+                indicator: "border border-primary-600 dark:border-primary-500 bg-primary-600 dark:bg-primary-500 text-white"
+            },
+            current: {
+                item: "text-gray-500 dark:text-gray-400",
+                indicator: "border border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400"
+            },
+            pending: {
+                item: "text-gray-500 dark:text-gray-400",
+                indicator: "border border-gray-500 dark:border-gray-400 text-gray-500 dark:text-gray-400"
             }
         },
-        defaultVariants: {
-            status: "pending"
+        hasChevron: {
+            true: {},
+            false: {}
         }
-    })
-};
-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: {
+        status: "pending",
+        hasChevron: false
+    }
+});
+export const timelineStepper = tv({
+    slots: {
+        base: "relative text-gray-500 border-s border-gray-200 dark:border-gray-700 dark:text-gray-400",
+        item: "ms-6",
+        circle: "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: {
+                circle: "bg-green-200 dark:bg-green-900"
+            },
+            current: {
+                circle: "bg-gray-100 dark:bg-gray-700"
+            },
+            pending: {
+                circle: "bg-gray-100 dark:bg-gray-700"
             }
         },
-        defaultVariants: {
-            isLast: false
-        }
-    }),
-    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"
+        isLast: {
+            true: {},
+            false: {
+                item: "mb-10"
             }
-        },
-        defaultVariants: {
-            status: "pending"
         }
-    })
-};
+    },
+    defaultVariants: {
+        status: "pending",
+        isLast: false
+    }
+});

package/dist/table/Table.svelte

@@ -1,15 +1,21 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import { table as tableCls, TableHead, TableBody, type TableTheme } from ".";
+  import { table as tableCls, TableHead, TableBody } from ".";
   import clsx from "clsx";
   import { type TableProps, type TableCtxType } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme, warnThemeDeprecation } 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();
+  let { children, footerSlot, captionSlot, items, divClass = "relative overflow-x-auto", striped, hoverable, border = true, shadow, color = "default", class: className, classes, ...restProps }: TableProps = $props();
 
+  warnThemeDeprecation("Table", { divClass }, { divClass: "div" });
+  const styling = $derived(
+    classes ?? {
+      div: divClass
+    }
+  );
   const theme = getTheme("table");
 
-  const { base, table } = $derived(tableCls({ color, shadow }));
+  const { div, table } = $derived(tableCls({ color, shadow }));
 
   let tableCtx: TableCtxType = {
     get striped() {
@@ -32,8 +38,8 @@
   let bodyItems = $derived(items && items.length > 0 ? items.map((item) => Object.values(item)) : []);
 </script>
 
-<div class={base({ class: clsx((theme as TableTheme)?.base, divClass) })}>
-  <table {...restProps} class={table({ class: clsx((theme as TableTheme)?.table, className) })}>
+<div class={div({ class: clsx(theme?.div, styling.div) })}>
+  <table {...restProps} class={table({ class: clsx(theme?.table, className) })}>
     {#if captionSlot}
       {@render captionSlot()}
     {/if}
@@ -53,7 +59,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1632)
+[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1643)
 ## Props
 @prop children
 @prop footerSlot
@@ -66,5 +72,6 @@
 @prop shadow
 @prop color = "default"
 @prop class: className
+@prop classes
 @prop ...restProps
 -->

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

@@ -2,7 +2,7 @@ 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#L1632)
+ * [TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1643)
  * ## Props
  * @prop children
  * @prop footerSlot
@@ -15,6 +15,7 @@ import { type TableProps } from "..";
  * @prop shadow
  * @prop color = "default"
  * @prop class: className
+ * @prop classes
  * @prop ...restProps
  */
 declare const Table: import("svelte").Component<TableProps, {}, "">;

package/dist/table/TableBody.svelte

@@ -2,12 +2,9 @@
   import clsx from "clsx";
   import { TableBodyRow, TableBodyCell } from ".";
   import type { TableBodyProps, CellValue, BodyRow } from "../types";
-  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;
@@ -17,7 +14,7 @@
   }
 </script>
 
-<tbody {...restProps} class={clsx(theme, className)}>
+<tbody {...restProps} class={clsx(className)}>
   {#if bodyItems}
     {#each bodyItems as row}
       <TableBodyRow>
@@ -35,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1664)
+[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#L1664)
+ * [TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1675)
  * ## Props
  * @prop children
  * @prop bodyItems

package/dist/table/TableBodyCell.svelte

@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1653)
+[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#L1653)
+ * [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

@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1645)
+[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#L1645)
+ * [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

@@ -52,7 +52,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1620)
+[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#L1620)
+ * [TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1631)
  * ## Props
  * @prop children
  * @prop headerSlot

package/dist/table/TableHeadCell.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableHeadCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1669)
+[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#L1669)
+ * [TableHeadCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1680)
  * ## Props
  * @prop children
  * @prop class: className