flowbite-svelte 1.10.19 → 1.10.21

package/dist/pagination/PaginationNav.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import clsx from "clsx";
   import { setContext } from "svelte";
-  import { paginationNav, type PaginationNavTheme } from "./theme";
+  import { paginationNav } from "./theme";
   import { type PaginationNavProps, PaginationButton } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
   function paginationRange(start: number, end: number): number[] {
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
@@ -24,11 +24,15 @@
     ariaLabel = "Page navigation",
     size = "default",
     class: className,
+    classes,
     spanClass,
     tableDivClass,
     ...restProps
   }: PaginationNavProps = $props();
 
+  warnThemeDeprecation("PaginationNav", { prevClass, nextClass, spanClass, tableDivClass }, { prevClass: "prev", nextClass: "next", spanClass: "span", tableDivClass: "tableDiv" });
+  const styling = $derived(classes ?? { prev: prevClass, next: nextClass, span: spanClass, tableDiv: tableDivClass });
+
   const theme = getTheme("paginationNav");
 
   // Set context values for child components
@@ -53,22 +57,22 @@
     onPageChange(Math.max(currentPage - 1, 1));
   }
 
-  const { base, tableDiv, tableSpan, prevItem, nextItem } = $derived(paginationNav({ layout }));
+  const { base, tableDiv, span, prev, next } = $derived(paginationNav({ layout }));
 </script>
 
 <nav aria-label={ariaLabel} {...restProps}>
   {#if layout === "table"}
-    <div class={tableDiv({ class: clsx((theme as PaginationNavTheme)?.tableDiv, tableDivClass) })}>
-      Showing <span class={tableSpan({ class: clsx((theme as PaginationNavTheme)?.tableSpan, spanClass) })}>{currentPage}</span>
+    <div class={tableDiv({ class: clsx(theme?.tableDiv, styling.tableDiv) })}>
+      Showing <span class={span({ class: clsx(theme?.span, styling.span) })}>{currentPage}</span>
       of
-      <span class={tableSpan({ class: clsx((theme as PaginationNavTheme)?.tableSpan, spanClass) })}>{totalPages}</span>
+      <span class={span({ class: clsx(theme?.span, styling.span) })}>{totalPages}</span>
       Entries
     </div>
   {/if}
 
-  <ul class={base({ class: clsx((theme as PaginationNavTheme)?.base, className) })}>
+  <ul class={base({ class: clsx(theme?.base, className) })}>
     <li {...restProps}>
-      <PaginationButton onclick={goToPreviousPage} disabled={currentPage === 1} class={prevItem({ class: clsx((theme as PaginationNavTheme)?.prevItem, prevClass) })}>
+      <PaginationButton onclick={goToPreviousPage} disabled={currentPage === 1} class={prev({ class: clsx(theme?.prev, styling.prev) })}>
         {#if prevContent}
           {@render prevContent()}
         {:else}
@@ -86,7 +90,7 @@
       {/each}
     {/if}
     <li {...restProps}>
-      <PaginationButton onclick={goToNextPage} disabled={currentPage === totalPages} class={nextItem({ class: clsx((theme as PaginationNavTheme)?.nextItem, nextClass) })}>
+      <PaginationButton onclick={goToNextPage} disabled={currentPage === totalPages} class={next({ class: clsx(theme?.next, styling.next) })}>
         {#if nextContent}
           {@render nextContent()}
         {:else}
@@ -101,7 +105,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1156)
+[PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1165)
 ## Props
 @prop currentPage = 1
 @prop totalPages = 1
@@ -117,6 +121,7 @@
 @prop ariaLabel = "Page navigation"
 @prop size = "default"
 @prop class: className
+@prop classes
 @prop spanClass
 @prop tableDivClass
 @prop ...restProps

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#L1156)
+ * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1165)
  * ## Props
  * @prop currentPage = 1
  * @prop totalPages = 1
@@ -18,6 +18,7 @@ import { type PaginationNavProps } from "..";
  * @prop ariaLabel = "Page navigation"
  * @prop size = "default"
  * @prop class: className
+ * @prop classes
  * @prop spanClass
  * @prop tableDivClass
  * @prop ...restProps

package/dist/pagination/index.d.ts

@@ -1,4 +1,4 @@
-export { paginationItem, pagination, paginationButton, paginationNav, type PaginationNavTheme, type PaginationButtonTheme, type PaginationItemTheme, type PaginationTheme } 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,8 @@
 import { type VariantProps } from "tailwind-variants";
-import type { ClassValue } from "svelte/elements";
+import type { Classes } from "../theme/themeUtils";
+export type PaginationNavVariants = VariantProps<typeof paginationNav> & Classes<typeof paginationNav>;
 export type PaginationVariants = VariantProps<typeof pagination>;
+export type PaginationItemVariants = VariantProps<typeof paginationItem>;
 export declare const paginationNav: import("tailwind-variants").TVReturnType<{
     size: {
         default: string;
@@ -8,24 +10,24 @@ export declare const paginationNav: import("tailwind-variants").TVReturnType<{
     };
     layout: {
         table: {
-            prevItem: string;
-            nextItem: string;
+            prev: string;
+            next: string;
         };
         navigation: {
-            prevItem: string;
-            nextItem: string;
+            prev: string;
+            next: string;
         };
         pagination: {
-            prevItem: string;
-            nextItem: string;
+            prev: string;
+            next: string;
         };
     };
 }, {
     base: string;
     tableDiv: string;
-    tableSpan: string;
-    prevItem: string;
-    nextItem: string;
+    span: string;
+    prev: string;
+    next: string;
 }, undefined, {
     size: {
         default: string;
@@ -33,24 +35,24 @@ export declare const paginationNav: import("tailwind-variants").TVReturnType<{
     };
     layout: {
         table: {
-            prevItem: string;
-            nextItem: string;
+            prev: string;
+            next: string;
         };
         navigation: {
-            prevItem: string;
-            nextItem: string;
+            prev: string;
+            next: string;
         };
         pagination: {
-            prevItem: string;
-            nextItem: string;
+            prev: string;
+            next: string;
         };
     };
 }, {
     base: string;
     tableDiv: string;
-    tableSpan: string;
-    prevItem: string;
-    nextItem: string;
+    span: string;
+    prev: string;
+    next: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
         default: string;
@@ -58,28 +60,25 @@ export declare const paginationNav: import("tailwind-variants").TVReturnType<{
     };
     layout: {
         table: {
-            prevItem: string;
-            nextItem: string;
+            prev: string;
+            next: string;
         };
         navigation: {
-            prevItem: string;
-            nextItem: string;
+            prev: string;
+            next: string;
         };
         pagination: {
-            prevItem: string;
-            nextItem: string;
+            prev: string;
+            next: string;
         };
     };
 }, {
     base: string;
     tableDiv: string;
-    tableSpan: string;
-    prevItem: string;
-    nextItem: string;
+    span: string;
+    prev: string;
+    next: string;
 }, undefined, unknown, unknown, undefined>>;
-export type PaginationNavSlots = keyof typeof paginationNav.slots;
-export type PaginationNavTheme = Partial<Record<PaginationNavSlots, ClassValue>>;
-export type PaginationItemVariants = VariantProps<typeof paginationItem>;
 export declare const paginationButton: import("tailwind-variants").TVReturnType<{
     size: {
         default: string;
@@ -144,7 +143,6 @@ export declare const paginationButton: import("tailwind-variants").TVReturnType<
         false: string;
     };
 }, undefined, "flex items-center font-medium", unknown, unknown, undefined>>;
-export type PaginationButtonTheme = ClassValue;
 export declare const paginationItem: import("tailwind-variants").TVReturnType<{
     size: {
         default: string;
@@ -197,7 +195,6 @@ export declare const paginationItem: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "flex items-center font-medium", unknown, unknown, undefined>>;
-export type PaginationItemTheme = ClassValue;
 export declare const pagination: import("tailwind-variants").TVReturnType<{
     table: {
         true: string;
@@ -226,4 +223,3 @@ 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 = ClassValue;

package/dist/pagination/theme.js

@@ -3,9 +3,9 @@ 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",
-        tableSpan: "font-semibold mx-1",
-        prevItem: "rounded-none",
-        nextItem: "rounded-none"
+        span: "font-semibold mx-1",
+        prev: "rounded-none",
+        next: "rounded-none"
     },
     variants: {
         size: {
@@ -13,9 +13,9 @@ export const paginationNav = tv({
             large: ""
         },
         layout: {
-            table: { prevItem: "rounded-s bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white text-white  hover:text-gray-200", nextItem: "text-white bg-gray-800 border-0 border-s border-gray-700 rounded-e hover:bg-gray-900 hover:text-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" },
-            navigation: { prevItem: "rounded-s-lg", nextItem: "rounded-e-lg" },
-            pagination: { prevItem: "rounded-s-lg", nextItem: "rounded-e-lg" }
+            table: { prev: "rounded-s bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white text-white  hover:text-gray-200", next: "text-white bg-gray-800 border-0 border-s border-gray-700 rounded-e hover:bg-gray-900 hover:text-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" },
+            navigation: { prev: "rounded-s-lg", next: "rounded-e-lg" },
+            pagination: { prev: "rounded-s-lg", next: "rounded-e-lg" }
         }
     },
     defaultVariants: {

package/dist/popover/Popover.svelte

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

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#L1189)
+ * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1198)
  * ## Props
  * @prop title: titleSlot
  * @prop color = "default"
@@ -12,6 +12,7 @@ import type { PopoverProps } from "../types";
  * @prop children
  * @prop placement = "top"
  * @prop class: className
+ * @prop classes
  * @prop isOpen = $bindable(false)
  * @prop ...restProps
  */

package/dist/popover/index.d.ts

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

package/dist/popover/theme.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
-import type { ClassValue } from "svelte/elements";
-export type PopoverVariants = VariantProps<typeof popover>;
+import type { Classes } from "../theme/themeUtils";
+export type PopoverVariants = VariantProps<typeof popover> & Classes<typeof popover>;
 export declare const popover: import("tailwind-variants").TVReturnType<{
     color: {
         default: {
@@ -278,5 +278,3 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
     title: string;
     h3: string;
 }, undefined, unknown, unknown, undefined>>;
-export type PopoverSlots = keyof typeof popover.slots;
-export type PopoverTheme = Partial<Record<PopoverSlots, ClassValue>>;

package/dist/progress/Progressbar.svelte

@@ -3,7 +3,7 @@
   import clsx from "clsx";
   import { cubicOut } from "svelte/easing";
   import { Tween } from "svelte/motion";
-  import { progressbar, type ProgressbarTheme } from ".";
+  import { progressbar } from ".";
   import { getTheme } from "../theme/themeUtils";
 
   let { progress = "45", precision = 0, tweenDuration = 400, animate = false, size = "h-2.5", labelInside = false, labelOutside = "", easing = cubicOut, color = "primary", class: className, classes, ...restProps }: ProgressbarProps = $props();
@@ -14,7 +14,14 @@
     duration: animate ? tweenDuration : 0,
     easing
   });
-  const { base, labelInsideDiv, insideDiv, outsideDiv, oustsideSpan, outsideProgress } = $derived(
+  const {
+    base,
+    label: labelInsideCls,
+    inside,
+    outside,
+    span,
+    progressCls
+  } = $derived(
     progressbar({
       color,
       labelInside
@@ -27,18 +34,18 @@
 </script>
 
 {#if labelOutside}
-  <div {...restProps} class={outsideDiv({ class: clsx((theme as ProgressbarTheme)?.outsideDiv, classes?.outsideDiv) })}>
-    <span class={oustsideSpan({ class: clsx((theme as ProgressbarTheme)?.oustsideSpan, classes?.oustsideSpan) })}>{labelOutside}</span>
-    <span class={outsideProgress({ class: clsx((theme as ProgressbarTheme)?.outsideProgress, classes?.outsideProgress) })}>{progress}%</span>
+  <div {...restProps} class={outside({ class: clsx(theme?.outside, classes?.outside) })}>
+    <span class={span({ class: clsx(theme?.span, classes?.span) })}>{labelOutside}</span>
+    <span class={progressCls({ class: clsx(theme?.progressCls, classes?.progressCls) })}>{progress}%</span>
   </div>
 {/if}
-<div {...restProps} class={base({ class: clsx(size, classes?.base, (theme as ProgressbarTheme)?.base, className) })}>
+<div {...restProps} class={base({ class: clsx(size, theme?.base, className) })}>
   {#if labelInside}
-    <div class={labelInsideDiv({ class: clsx(size, (theme as ProgressbarTheme)?.labelInsideDiv, classes?.labelInsideDiv) })} style="width: {_progress.current}%">
+    <div class={labelInsideCls({ class: clsx(size, theme?.label, classes?.label) })} style="width: {_progress.current}%">
       {_progress.current.toFixed(precision)}%
     </div>
   {:else}
-    <div class={insideDiv({ class: clsx(size, (theme as ProgressbarTheme)?.insideDiv, classes?.labelInsideDiv) })} style="width: {_progress.current}%"></div>
+    <div class={inside({ class: clsx(size, theme?.inside, classes?.label) })} style="width: {_progress.current}%"></div>
   {/if}
 </div>
 
@@ -46,7 +53,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1199)
+[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1208)
 ## Props
 @prop progress = "45"
 @prop precision = 0

package/dist/progress/Progressbar.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ProgressbarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1199)
+ * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1208)
  * ## Props
  * @prop progress = "45"
  * @prop precision = 0

package/dist/progress/Progressradial.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { progressradial, type ProgressradialTheme } from ".";
+  import { progressradial } from ".";
   import type { ProgressradialProps } from "../types";
   import clsx from "clsx";
   import { cubicOut } from "svelte/easing";
@@ -15,7 +15,7 @@
     easing
   });
 
-  const { base, labelInsideDiv, circleBackground, circleForeground, outsideDiv, outsideSpan, outsideProgress } = $derived(
+  const { base, label, background, foreground, outside, span, progressCls } = $derived(
     progressradial({
       color,
       labelInside
@@ -38,23 +38,23 @@
 
 <div class="flex flex-col items-center">
   {#if labelOutside}
-    <div class={outsideDiv({ class: clsx((theme as ProgressradialTheme)?.outsideDiv, classes?.outsideDiv) })}>
-      <span class={outsideSpan({ class: clsx((theme as ProgressradialTheme)?.outsideSpan, classes?.outsideSpan) })}>{labelOutside}</span>
-      <span class={outsideProgress({ class: clsx((theme as ProgressradialTheme)?.outsideProgress, classes?.outsideProgress) })}>{formattedProgress}%</span>
+    <div class={outside({ class: clsx(theme?.outside, classes?.outside) })}>
+      <span class={span({ class: clsx(theme?.span, classes?.span) })}>{labelOutside}</span>
+      <span class={progressCls({ class: clsx(theme?.progressCls, classes?.progressCls) })}>{formattedProgress}%</span>
     </div>
   {/if}
 
-  <div {...restProps} class={base({ class: clsx(size, (theme as ProgressradialTheme)?.base, classes?.base, className) })}>
+  <div {...restProps} class={base({ class: clsx(size, theme?.base, className) })}>
     <svg viewBox="0 0 100 100" class="h-full w-full" style="transform: rotate({rotationAngle}deg)">
       <!-- Background circle -->
-      <circle cx="50" cy="50" r={radius} class={circleBackground({ class: clsx((theme as ProgressradialTheme)?.circleBackground, classes?.circleBackground) })} fill="none" stroke-width={thickness} />
+      <circle cx="50" cy="50" r={radius} class={background({ class: clsx(theme?.background, classes?.background) })} fill="none" stroke-width={thickness} />
 
       <!-- Foreground circle (progress indicator) -->
-      <circle cx="50" cy="50" r={radius} class={circleForeground({ class: clsx((theme as ProgressradialTheme)?.circleForeground, classes?.circleForeground) })} fill="none" stroke-width={thickness} stroke-dasharray={circumference} stroke-dashoffset={strokeDashoffset} stroke-linecap="round" />
+      <circle cx="50" cy="50" r={radius} class={foreground({ class: clsx(theme?.foreground, classes?.foreground) })} fill="none" stroke-width={thickness} stroke-dasharray={circumference} stroke-dashoffset={strokeDashoffset} stroke-linecap="round" />
     </svg>
 
     {#if labelInside}
-      <div class={labelInsideDiv({ class: clsx((theme as ProgressradialTheme)?.labelInsideDiv, classes?.labelInsideDiv) })}>
+      <div class={label({ class: clsx(theme?.label, classes?.label) })}>
         {formattedProgress}%
       </div>
     {/if}
@@ -65,7 +65,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1210)
+[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1219)
 ## Props
 @prop progress = 45
 @prop radius = 42

package/dist/progress/Progressradial.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ProgressradialProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1210)
+ * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1219)
  * ## Props
  * @prop progress = 45
  * @prop radius = 42

package/dist/progress/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Progressbar } from "./Progressbar.svelte";
 export { default as Progressradial } from "./Progressradial.svelte";
-export { progressbar, type ProgressbarTheme, progressradial, type ProgressradialTheme } from "./theme";
+export { progressbar, progressradial } from "./theme";