flowbite-svelte 1.10.5 → 1.10.7

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -1,36 +1,37 @@
 <script lang="ts">
+  import { type BottomNavContextType, type BottomNavItemProps } from "..";
+  import { getTheme, themeDeprecated } from "../theme/themeUtils";
+  import clsx from "clsx";
   import { getContext } from "svelte";
-  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
   import { bottomNavItem, type BottomNavItemTheme } from ".";
-  import { type BottomNavItemProps, type BottomNavContextType, type BottomNavVariantType, cn } from "..";
-  import { getTheme } from "../theme/themeUtils";
 
-  let { children, btnName, appBtnPosition = "middle", target, activeClass, href = "", btnClass, spanClass, active: manualActive, ...restProps }: BottomNavItemProps = $props();
+  let { children, btnName, appBtnPosition = "middle", activeClass, class: className, classes, btnClass, spanClass, active: manualActive, ...restProps }: BottomNavItemProps = $props();
+
+  themeDeprecated("BottomNavItem", { spanClass, btnClass });
+  let styling = $derived(classes ?? { span: spanClass });
 
   // Theme context
   const theme = getTheme("bottomNavItem");
 
-  const navType: BottomNavVariantType = getContext("navType");
   const context = getContext<BottomNavContextType>("bottomNavType") ?? {};
 
-  const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
-
-  let navUrl = $state("");
-  activeUrlStore.subscribe((value) => {
-    navUrl = value;
-  });
+  let navUrl = $derived(context.activeUrl || "");
 
-  const { base, span } = $derived(bottomNavItem({ navType, appBtnPosition }));
+  const { base, span } = $derived(bottomNavItem({ navType: context.navType, appBtnPosition }));
 
   // Determine active state based on manual prop or URL matching
-  let isActive = $derived(manualActive !== undefined ? !!manualActive : navUrl ? (href === "/" ? navUrl === "/" : href && (navUrl === href || navUrl.startsWith(href + "/") || (href !== "/" && navUrl.replace(/^https?:\/\/[^/]+/, "").startsWith(href)))) : false);
+  let isActive = $derived.by(() => {
+    const href = restProps.href ?? "";
+    return manualActive !== undefined ? !!manualActive : navUrl ? (href === "/" ? navUrl === "/" : href && (navUrl === href || navUrl.startsWith(href + "/") || (href !== "/" && navUrl.replace(/^https?:\/\/[^/]+/, "").startsWith(href)))) : false;
+  });
 
   function getCommonClass() {
-    return cn(base(), isActive && (activeClass ?? context.activeClass), btnClass, (theme as BottomNavItemTheme)?.base);
+    return base({ class: clsx(isActive && (activeClass ?? context.activeClass), (theme as BottomNavItemTheme)?.base, className ?? btnClass) });
   }
 
   function getSpanClass() {
-    return cn(span(), isActive && (activeClass ?? context.activeClass), spanClass, (theme as BottomNavItemTheme)?.span);
+    return span({ class: clsx(isActive && (activeClass ?? context.activeClass), (theme as BottomNavItemTheme)?.span, styling.span) });
   }
 
   /* eslint-disable  @typescript-eslint/no-explicit-any */
@@ -41,9 +42,7 @@
   });
 
   const anchorProps: HTMLAnchorAttributes = $derived({
-    ...commonProps,
-    href,
-    target
+    ...commonProps
   });
 
   const buttonProps: HTMLButtonAttributes = $derived({
@@ -52,30 +51,30 @@
   });
 </script>
 
-{#if typeof href === "string" && href.length > 0}
-  <a {...anchorProps}>
+{#if restProps.href === undefined}
+  <button {...buttonProps}>
     {@render children()}
     <span class={getSpanClass()}>{btnName}</span>
-  </a>
+  </button>
 {:else}
-  <button {...buttonProps}>
+  <a {...anchorProps}>
     {@render children()}
     <span class={getSpanClass()}>{btnName}</span>
-  </button>
+  </a>
 {/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L260)
+[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L247)
 ## Props
 @prop children
 @prop btnName
 @prop appBtnPosition = "middle"
-@prop target
 @prop activeClass
-@prop href = ""
+@prop class: className
+@prop classes
 @prop btnClass
 @prop spanClass
 @prop active: manualActive

package/dist/bottom-navigation/BottomNavItem.svelte.d.ts

@@ -2,14 +2,14 @@ import { type BottomNavItemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L260)
+ * [BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L247)
  * ## Props
  * @prop children
  * @prop btnName
  * @prop appBtnPosition = "middle"
- * @prop target
  * @prop activeClass
- * @prop href = ""
+ * @prop class: className
+ * @prop classes
  * @prop btnClass
  * @prop spanClass
  * @prop active: manualActive

package/dist/bottom-navigation/theme.d.ts

@@ -1,149 +1,152 @@
+import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
+import type { Classes } from "../theme/themeUtils";
 export declare const bottomNav: import("tailwind-variants").TVReturnType<{
     position: {
         static: {
-            outer: string;
+            base: string;
         };
         fixed: {
-            outer: string;
+            base: string;
         };
         absolute: {
-            outer: string;
+            base: string;
         };
         relative: {
-            outer: string;
+            base: string;
         };
         sticky: {
-            outer: string;
+            base: string;
         };
     };
     navType: {
         default: {
-            outer: string;
+            base: string;
         };
         border: {
-            outer: string;
+            base: string;
         };
         application: {
-            outer: string;
+            base: string;
         };
         pagination: {
-            outer: string;
+            base: string;
         };
         group: {
-            outer: string;
+            base: string;
         };
         card: {
-            outer: string;
+            base: string;
         };
         meeting: {
-            outer: string;
+            base: string;
             inner: string;
         };
         video: {
-            outer: string;
+            base: string;
             inner: string;
         };
     };
 }, {
-    outer: string;
+    base: string;
     inner: string;
 }, undefined, {
     position: {
         static: {
-            outer: string;
+            base: string;
         };
         fixed: {
-            outer: string;
+            base: string;
         };
         absolute: {
-            outer: string;
+            base: string;
         };
         relative: {
-            outer: string;
+            base: string;
         };
         sticky: {
-            outer: string;
+            base: string;
         };
     };
     navType: {
         default: {
-            outer: string;
+            base: string;
         };
         border: {
-            outer: string;
+            base: string;
         };
         application: {
-            outer: string;
+            base: string;
         };
         pagination: {
-            outer: string;
+            base: string;
         };
         group: {
-            outer: string;
+            base: string;
         };
         card: {
-            outer: string;
+            base: string;
         };
         meeting: {
-            outer: string;
+            base: string;
             inner: string;
         };
         video: {
-            outer: string;
+            base: string;
             inner: string;
         };
     };
 }, {
-    outer: string;
+    base: string;
     inner: string;
 }, import("tailwind-variants").TVReturnType<{
     position: {
         static: {
-            outer: string;
+            base: string;
         };
         fixed: {
-            outer: string;
+            base: string;
         };
         absolute: {
-            outer: string;
+            base: string;
         };
         relative: {
-            outer: string;
+            base: string;
         };
         sticky: {
-            outer: string;
+            base: string;
         };
     };
     navType: {
         default: {
-            outer: string;
+            base: string;
         };
         border: {
-            outer: string;
+            base: string;
         };
         application: {
-            outer: string;
+            base: string;
         };
         pagination: {
-            outer: string;
+            base: string;
         };
         group: {
-            outer: string;
+            base: string;
         };
         card: {
-            outer: string;
+            base: string;
         };
         meeting: {
-            outer: string;
+            base: string;
             inner: string;
         };
         video: {
-            outer: string;
+            base: string;
             inner: string;
         };
     };
 }, {
-    outer: string;
+    base: string;
     inner: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const bottomNavItem: import("tailwind-variants").TVReturnType<{
@@ -297,33 +300,33 @@ export declare const bottomNavItem: import("tailwind-variants").TVReturnType<{
 export declare const bottomNavHeader: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             innerDiv?: import("tailwind-variants").ClassValue;
-            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             innerDiv?: import("tailwind-variants").ClassValue;
-            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
+    base: string;
     innerDiv: string;
-    outerDiv: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
             innerDiv?: import("tailwind-variants").ClassValue;
-            outerDiv?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
+    base: string;
     innerDiv: string;
-    outerDiv: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
     innerDiv: string;
-    outerDiv: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const bottomNavHeaderItem: import("tailwind-variants").TVReturnType<{
     active: {
@@ -342,10 +345,14 @@ export declare const bottomNavHeaderItem: import("tailwind-variants").TVReturnTy
     };
 }, undefined, "px-5 py-1.5 text-xs font-medium rounded-lg", unknown, unknown, undefined>>;
 export type BottomNavSlots = keyof typeof bottomNav.slots;
-export type BottomNavTheme = Partial<Record<BottomNavSlots, string>>;
+export type BottomNavTheme = Partial<Record<BottomNavSlots, ClassValue>>;
+export type BottomNavVariants = VariantProps<typeof bottomNav> & Classes<typeof bottomNav>;
 export type BottomNavItemSlots = keyof typeof bottomNavItem.slots;
-export type BottomNavItemTheme = Partial<Record<BottomNavItemSlots, string>>;
+export type BottomNavItemTheme = Partial<Record<BottomNavItemSlots, ClassValue>>;
+export type BottomNavItemVariants = VariantProps<typeof bottomNavItem> & Classes<typeof bottomNavItem>;
 export type BottomnavheaderSlots = keyof typeof bottomNavHeader.slots;
-export type BottomNavHeaderTheme = Partial<Record<BottomnavheaderSlots, string>>;
+export type BottomNavHeaderTheme = Partial<Record<BottomnavheaderSlots, ClassValue>>;
+export type BottomNavHeaderVariants = VariantProps<typeof bottomNavHeader> & Classes<typeof bottomNavHeader>;
 export type bottomNavHeaderItemSlots = keyof typeof bottomNavHeaderItem.slots;
-export type BottomNavHeaderItemTheme = Partial<Record<bottomNavHeaderItemSlots, string>>;
+export type BottomNavHeaderItemTheme = Partial<Record<bottomNavHeaderItemSlots, ClassValue>>;
+export type BottomNavHeaderItemVariants = VariantProps<typeof bottomNavHeaderItem>;

package/dist/bottom-navigation/theme.js

@@ -1,36 +1,36 @@
 import { tv } from "tailwind-variants";
 export const bottomNav = tv({
     slots: {
-        outer: "w-full z-30 border-gray-200 dark:bg-gray-700 dark:border-gray-600",
+        base: "w-full z-30 border-gray-200 dark:bg-gray-700 dark:border-gray-600",
         inner: "grid h-full max-w-lg mx-auto"
     },
     variants: {
         position: {
-            static: { outer: "static" },
-            fixed: { outer: "fixed" },
-            absolute: { outer: "absolute" },
-            relative: { outer: "relative" },
-            sticky: { outer: "sticky" }
+            static: { base: "static" },
+            fixed: { base: "fixed" },
+            absolute: { base: "absolute" },
+            relative: { base: "relative" },
+            sticky: { base: "sticky" }
         },
         navType: {
-            default: { outer: "bottom-0 start-0 h-16 bg-white border-t" },
-            border: { outer: "bottom-0 start-0 h-16 bg-white border-t" },
+            default: { base: "bottom-0 start-0 h-16 bg-white border-t" },
+            border: { base: "bottom-0 start-0 h-16 bg-white border-t" },
             application: {
-                outer: "h-16 max-w-lg -translate-x-1/2 rtl:translate-x-1/2 bg-white border rounded-full bottom-4 start-1/2"
+                base: "h-16 max-w-lg -translate-x-1/2 rtl:translate-x-1/2 bg-white border rounded-full bottom-4 start-1/2"
             },
             pagination: {
-                outer: "bottom-0 h-16 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2"
+                base: "bottom-0 h-16 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2"
             },
             group: {
-                outer: "bottom-0 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2"
+                base: "bottom-0 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2"
             },
-            card: { outer: "bottom-0 start-0 h-16 bg-white border-t" },
+            card: { base: "bottom-0 start-0 h-16 bg-white border-t" },
             meeting: {
-                outer: "bottom-0 start-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3",
+                base: "bottom-0 start-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3",
                 inner: "flex items-center justify-center mx-auto"
             },
             video: {
-                outer: "bottom-0 start-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3",
+                base: "bottom-0 start-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3",
                 inner: "flex items-center w-full"
             }
         }
@@ -98,8 +98,8 @@ export const bottomNavItem = tv({
 });
 export const bottomNavHeader = tv({
     slots: {
-        innerDiv: "grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600",
-        outerDiv: "w-full"
+        base: "w-full",
+        innerDiv: "grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600"
     }
 });
 export const bottomNavHeaderItem = tv({

package/dist/breadcrumb/Breadcrumb.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { breadcrumb } from ".";
-  import { type BreadcrumbProps, cn, type BreadcrumbTheme } from "..";
+  import clsx from "clsx";
+  import { type BreadcrumbProps, type BreadcrumbTheme } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, solid = false, class: className, olClass, ariaLabel = "Breadcrumb", ...restProps }: BreadcrumbProps = $props();
@@ -8,8 +9,8 @@
   const theme = getTheme("breadcrumb");
 
   const { nav, list } = breadcrumb({ solid });
-  let classNav = $derived(cn(nav(), className, (theme as BreadcrumbTheme)?.nav));
-  let classList = $derived(cn(list(), olClass, (theme as BreadcrumbTheme)?.list));
+  let classNav = $derived(nav({ class: clsx((theme as BreadcrumbTheme)?.nav, className) }));
+  let classList = $derived(list({ class: clsx((theme as BreadcrumbTheme)?.list, olClass) }));
 </script>
 
 <nav aria-label={ariaLabel} {...restProps} class={classNav}>
@@ -22,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L307)
+[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L290)
 ## Props
 @prop children
 @prop solid = false

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

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

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { breadcrumbItem } from "./index";
-  import { type BreadcrumbItemProps, cn, type BreadcrumbItemTheme } from "..";
+  import clsx from "clsx";
+  import { type BreadcrumbItemProps, type BreadcrumbItemTheme } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, icon, home = false, href, linkClass, spanClass, homeClass, class: className, ...restProps }: BreadcrumbItemProps = $props();
@@ -15,9 +16,9 @@
   );
 </script>
 
-<li {...restProps} class={cn(base(), className, (theme as BreadcrumbItemTheme)?.base)}>
+<li {...restProps} class={base({ class: clsx((theme as BreadcrumbItemTheme)?.base, className) })}>
   {#if home}
-    <a class={cn(base({ home: true }), homeClass, (theme as BreadcrumbItemTheme)?.base)} {href}>
+    <a class={base({ home: true, class: clsx((theme as BreadcrumbItemTheme)?.base, homeClass) })} {href}>
       {#if icon}
         {@render icon()}
       {:else}
@@ -32,17 +33,17 @@
     {#if icon}
       {@render icon()}
     {:else}
-      <svg class={cn(separator(), (theme as BreadcrumbItemTheme)?.separator)} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <svg class={separator({ class: clsx((theme as BreadcrumbItemTheme)?.separator) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
       </svg>
     {/if}
 
     {#if href}
-      <a class={cn(base({ home: false, hasHref: true }), linkClass, (theme as BreadcrumbItemTheme)?.base)} {href}>
+      <a class={base({ home: false, hasHref: true, class: clsx((theme as BreadcrumbItemTheme)?.base, linkClass) })} {href}>
         {@render children()}
       </a>
     {:else}
-      <span class={cn(base({ home: false, hasHref: false }), spanClass, (theme as BreadcrumbItemTheme)?.base)}>
+      <span class={base({ home: false, hasHref: false, class: clsx((theme as BreadcrumbItemTheme)?.base, spanClass) })}>
         {@render children()}
       </span>
     {/if}
@@ -53,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L314)
+[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L297)
 ## Props
 @prop children
 @prop icon

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

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

package/dist/breadcrumb/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
     solid: {
         true: {
@@ -67,6 +68,6 @@ export declare const breadcrumbItem: import("tailwind-variants").TVReturnType<{
     separator: string;
 }, undefined, unknown, unknown, undefined>>;
 export type BreadcrumbSlots = keyof typeof breadcrumb.slots;
-export type BreadcrumbTheme = Partial<Record<BreadcrumbSlots, string>>;
+export type BreadcrumbTheme = Partial<Record<BreadcrumbSlots, ClassValue>>;
 export type BreadcrumbItemSlots = keyof typeof breadcrumbItem.slots;
-export type BreadcrumbItemTheme = Partial<Record<BreadcrumbItemSlots, string>>;
+export type BreadcrumbItemTheme = Partial<Record<BreadcrumbItemSlots, ClassValue>>;

package/dist/button-group/ButtonGroup.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { buttonGroup } from ".";
-  import { type ButtonGroupProps, cn } from "..";
+  import clsx from "clsx";
+  import { type ButtonGroupProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, size = "md", disabled, class: className, ...restProps }: ButtonGroupProps = $props();
 
   const theme = getTheme("buttonGroup");
 
-  let groupClass = $derived(cn(buttonGroup({ size }), className, theme));
+  let groupClass = $derived(buttonGroup({ size, class: clsx(theme, className) }));
   setContext("group", size);
   setContext("disabled", disabled);
 </script>
@@ -21,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L325)
+[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L308)
 ## Props
 @prop children
 @prop size = "md"

package/dist/button-group/ButtonGroup.svelte.d.ts

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

package/dist/button-group/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 declare const buttonGroup: import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
@@ -18,4 +19,4 @@ declare const buttonGroup: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "inline-flex rounded-lg shadow-xs", unknown, unknown, undefined>>;
 export { buttonGroup };
-export type ButtonGroupTheme = string;
+export type ButtonGroupTheme = ClassValue;

package/dist/buttons/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { type SizeType, type ButtonProps, cn } from "..";
+  import clsx from "clsx";
+  import { type SizeType, type ButtonProps } from "..";
   import { getTheme } from "../theme/themeUtils";
   import { button, type ButtonTheme } from ".";
 
@@ -16,7 +17,7 @@
   let isDisabled = $derived(Boolean(ctxDisabled) || Boolean(disabled));
 
   const { base, outline: outline_, shadow: shadow_ } = $derived(button({ color: actualColor, size: actualSize, disabled: isDisabled, pill, group: !!group }));
-  let btnCls = $derived(cn(base(), outline && outline_(), shadow && shadow_(), className, (theme as ButtonTheme)?.base));
+  let btnCls = $derived(base({ class: clsx(outline && outline_(), shadow && shadow_(), (theme as ButtonTheme)?.base, className) }));
 </script>
 
 {#if restProps.href === undefined}
@@ -37,7 +38,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L339)
+[ButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L322)
 ## Props
 @prop children
 @prop pill

package/dist/buttons/Button.svelte.d.ts

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