flowbite-svelte 1.4.3 → 1.5.1

package/dist/forms/toggle/Toggle.svelte.d.ts

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

package/dist/forms/toggle/index.d.ts

@@ -1,3 +1,2 @@
-import Toggle from "./Toggle.svelte";
-import { toggle } from "./theme";
-export { Toggle, toggle };
+export { default as Toggle } from "./Toggle.svelte";
+export { toggle } from "./theme";

package/dist/forms/toggle/index.js

@@ -1,3 +1,2 @@
-import Toggle from "./Toggle.svelte";
-import { toggle } from "./theme";
-export { Toggle, toggle };
+export { default as Toggle } from "./Toggle.svelte";
+export { toggle } from "./theme";

package/dist/gallery/Gallery.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { gallery } from ".";
-  import type { GalleryProps, ImgType } from "../types";
+  import { type GalleryProps, type ImgType, cn } from "..";
 
   let { children, figure, items = [], imgClass, class: className, ...restProps }: GalleryProps = $props();
 
@@ -14,11 +13,11 @@
 
 {#snippet _figure(item: ImgType)}
   <div>
-    <img src={item.src} alt={item.alt} class={image({ class: imgClass })} {...restProps} />
+    <img src={item.src} alt={item.alt} class={cn(image(), imgClass)} {...restProps} />
   </div>
 {/snippet}
 
-<div class={div({ class: clsx(className) })} use:init>
+<div class={cn(div(), className)} use:init>
   {#each items as item}
     {#if figure}
       {@render figure(item as ImgType)}
@@ -36,7 +35,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L966)
+[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L944)
 ## Props
 @prop children
 @prop figure

package/dist/gallery/Gallery.svelte.d.ts

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

package/dist/gallery/index.d.ts

@@ -1,3 +1,2 @@
-import Gallery from "./Gallery.svelte";
-import { gallery } from "./theme";
-export { Gallery, gallery };
+export { default as Gallery } from "./Gallery.svelte";
+export { gallery } from "./theme";

package/dist/gallery/index.js

@@ -1,3 +1,2 @@
-import Gallery from "./Gallery.svelte";
-import { gallery } from "./theme";
-export { Gallery, gallery };
+export { default as Gallery } from "./Gallery.svelte";
+export { gallery } from "./theme";

package/dist/gallery/theme.d.ts

@@ -1,15 +1,15 @@
 declare const gallery: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
             image?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
             image?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -18,8 +18,8 @@ declare const gallery: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
             image?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from "./buttons";
 export * from "./card";
 export * from "./carousel";
 export * from "./chart";
+export * from "./clipboard";
 export * from "./darkmode";
 export * from "./datepicker";
 export * from "./device-mockups";

package/dist/index.js

@@ -11,6 +11,7 @@ export * from "./buttons";
 export * from "./card";
 export * from "./carousel";
 export * from "./chart";
+export * from "./clipboard";
 export * from "./darkmode";
 export * from "./datepicker";
 export * from "./device-mockups";

package/dist/indicator/Indicator.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { indicator } from "./index";
-  import type { IndicatorProps } from "../types";
+  import { type IndicatorProps, cn } from "..";
 
   let { children, color = "primary", cornerStyle = "circular", size = "md", border = false, placement, offset = true, class: className, ...restProps }: IndicatorProps = $props();
 
@@ -19,7 +18,7 @@
   );
 </script>
 
-<div {...restProps} class={base({ class: clsx(className) })}>
+<div {...restProps} class={cn(base(), className)}>
   {#if children}
     {@render children()}
   {/if}
@@ -29,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L977)
+[IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L955)
 ## Props
 @prop children
 @prop color = "primary"

package/dist/indicator/Indicator.svelte.d.ts

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

package/dist/indicator/index.d.ts

@@ -1,3 +1,2 @@
-import Indicator from "./Indicator.svelte";
-import { indicator } from "./theme";
-export { Indicator, indicator };
+export { default as Indicator } from "./Indicator.svelte";
+export { indicator } from "./theme";

package/dist/indicator/index.js

@@ -1,3 +1,2 @@
-import Indicator from "./Indicator.svelte";
-import { indicator } from "./theme";
-export { Indicator, indicator };
+export { default as Indicator } from "./Indicator.svelte";
+export { indicator } from "./theme";

package/dist/kbd/Kbd.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { kbd } from ".";
-  import type { KbdProps } from "../types";
+  import { type KbdProps, cn } from "..";
 
   let { children, class: className, ...restProps }: KbdProps = $props();
-  const kbdCls = kbd({ class: clsx(className) });
+  const kbdCls = cn(kbd(), className);
 </script>
 
 <kbd {...restProps} class={kbdCls}>
@@ -15,7 +14,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L988)
+[KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L966)
 ## Props
 @prop children
 @prop class: className

package/dist/kbd/Kbd.svelte.d.ts

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

package/dist/kbd/index.d.ts

@@ -1,3 +1,2 @@
-import Kbd from "./Kbd.svelte";
-import { kbd } from "./theme";
-export { Kbd, kbd };
+export { default as Kbd } from "./Kbd.svelte";
+export { kbd } from "./theme";

package/dist/kbd/index.js

@@ -1,3 +1,2 @@
-import Kbd from "./Kbd.svelte";
-import { kbd } from "./theme";
-export { Kbd, kbd };
+export { default as Kbd } from "./Kbd.svelte";
+export { kbd } from "./theme";

package/dist/list-group/Listgroup.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import ListgroupItem from "./ListgroupItem.svelte";
   import { listGroup } from ".";
-  import type { ListgroupProps } from "../types";
-  import clsx from "clsx";
+  import { type ListgroupProps, ListgroupItem, cn } from "..";
 
   let { children, items, active, onclick, horizontal, rounded, border, class: className, itemClass, iconClass, ...restProps }: ListgroupProps = $props();
 
-  const base = $derived(listGroup({ rounded, border, horizontal, class: clsx(className) }));
+  const base = $derived(listGroup({ rounded, border, horizontal }));
 
   let tag = active ? "div" : "ul";
   setContext("listGrpActive", active);
@@ -24,15 +22,15 @@
   }
 </script>
 
-<svelte:element this={tag} {...restProps} class={base}>
+<svelte:element this={tag} {...restProps} class={cn(base, className)}>
   {#if items?.length}
     {#each items as item}
       {#if children}
         {@render children(item)}
       {:else if typeof item === "string"}
-        <ListgroupItem href={undefined} class={itemClass} {iconClass} {active} {horizontal} onclick={createItemClickHandler(item)}>{item}</ListgroupItem>
+        <ListgroupItem href={undefined} class={cn(itemClass)} iconClass={cn(iconClass)} {active} {horizontal} onclick={createItemClickHandler(item)}>{item}</ListgroupItem>
       {:else}
-        <ListgroupItem href={item.href} class={itemClass} {iconClass} {active} {horizontal} {...item} onclick={item.onclick ?? createItemClickHandler(item)} />
+        <ListgroupItem href={item.href} class={cn(itemClass)} iconClass={cn(iconClass)} {active} {horizontal} {...item} onclick={item.onclick ?? createItemClickHandler(item)} />
       {/if}
     {/each}
   {:else}
@@ -44,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1007)
+[ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L985)
 ## Props
 @prop children
 @prop items

package/dist/list-group/Listgroup.svelte.d.ts

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

package/dist/list-group/ListgroupItem.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import type { ListgroupItemProps } from "../types";
+  import { type ListgroupItemProps, cn } from "..";
   import { listGroupItem, type ListgroupItemVariants } from "./theme";
-  import clsx from "clsx";
 
-  let { children, active, current, disabled, horizontal, name, Icon, class: className, iconClass = "me-2.5 h-5 w-5", onclick, ...restProps }: ListgroupItemProps = $props();
+  let { children, active, current, disabled, horizontal, name, Icon, class: className, iconClass = "me-2.5 h-15 w-15", ...restProps }: ListgroupItemProps = $props();
 
   active = active ?? getContext("listGrpActive");
   horizontal = horizontal ?? getContext("listGrpHorizontal");
 
   let state: ListgroupItemVariants["state"] = $derived(disabled ? "disabled" : current ? "current" : "normal");
-  let itemClass = $derived(listGroupItem({ state, active, horizontal, class: clsx(className) }));
+  let itemClass = $derived(listGroupItem({ state, active, horizontal }));
 </script>
 
 {#snippet nameOrChildren()}
   {#if Icon}
-    <Icon class={iconClass} />
+    <Icon class={cn(iconClass)} />
   {/if}
   {#if children}
     {@render children()}
@@ -25,15 +24,15 @@
 {/snippet}
 
 {#if restProps.href === undefined && !active}
-  <li class={itemClass}>
+  <li class={cn(itemClass, className)}>
     {@render nameOrChildren()}
   </li>
 {:else if restProps.href === undefined}
-  <button type="button" {...restProps} class={itemClass} {disabled} aria-current={current} {onclick}>
+  <button type="button" {...restProps} class={cn(itemClass, className)} {disabled} aria-current={current}>
     {@render nameOrChildren()}
   </button>
 {:else}
-  <a {...restProps} class={itemClass} aria-current={current}>
+  <a {...restProps} class={cn(itemClass, className)} aria-current={current}>
     {@render nameOrChildren()}
   </a>
 {/if}
@@ -42,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1018)
+[ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L996)
 ## Props
 @prop children
 @prop active
@@ -52,7 +51,6 @@
 @prop name
 @prop Icon
 @prop class: className
-@prop iconClass = "me-2.5 h-5 w-5"
-@prop onclick
+@prop iconClass = "me-2.5 h-15 w-15"
 @prop ...restProps
 -->

package/dist/list-group/ListgroupItem.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { ListgroupItemProps } from "../types";
+import { type ListgroupItemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1018)
+ * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L996)
  * ## Props
  * @prop children
  * @prop active
@@ -12,8 +12,7 @@ import type { ListgroupItemProps } from "../types";
  * @prop name
  * @prop Icon
  * @prop class: className
- * @prop iconClass = "me-2.5 h-5 w-5"
- * @prop onclick
+ * @prop iconClass = "me-2.5 h-15 w-15"
  * @prop ...restProps
  */
 declare const ListgroupItem: import("svelte").Component<ListgroupItemProps, {}, "">;

package/dist/list-group/index.d.ts

@@ -1,4 +1,3 @@
-import Listgroup from "./Listgroup.svelte";
-import ListgroupItem from "./ListgroupItem.svelte";
-import { listGroup, listGroupItem } from "./theme";
-export { Listgroup, ListgroupItem, listGroup, listGroupItem };
+export { default as Listgroup } from "./Listgroup.svelte";
+export { default as ListgroupItem } from "./ListgroupItem.svelte";
+export { listGroup, listGroupItem } from "./theme";

package/dist/list-group/index.js

@@ -1,4 +1,3 @@
-import Listgroup from "./Listgroup.svelte";
-import ListgroupItem from "./ListgroupItem.svelte";
-import { listGroup, listGroupItem } from "./theme";
-export { Listgroup, ListgroupItem, listGroup, listGroupItem };
+export { default as Listgroup } from "./Listgroup.svelte";
+export { default as ListgroupItem } from "./ListgroupItem.svelte";
+export { listGroup, listGroupItem } from "./theme";

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

@@ -13,7 +13,7 @@ export declare const listGroup: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "flex w-fit bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600", {
+}, undefined, "flex bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600", {
     rounded: {
         true: string;
         false: string;
@@ -39,7 +39,7 @@ export declare const listGroup: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "flex w-fit bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600", unknown, unknown, undefined>>;
+}, undefined, "flex bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600", unknown, unknown, undefined>>;
 export type ListgroupItemVariants = VariantProps<typeof listGroupItem>;
 export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
     state: {
@@ -55,7 +55,7 @@ export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left", {
+}, undefined, "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left gap-2", {
     state: {
         normal: string;
         current: string;
@@ -83,4 +83,4 @@ export declare const listGroupItem: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left", unknown, unknown, undefined>>;
+}, undefined, "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left gap-2", unknown, unknown, undefined>>;

package/dist/list-group/theme.js

@@ -1,6 +1,6 @@
 import { tv } from "tailwind-variants";
 export const listGroup = tv({
-    base: "flex w-fit bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600",
+    base: "flex bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-gray-200 dark:divide-gray-600",
     variants: {
         rounded: {
             true: "rounded-lg",
@@ -28,7 +28,7 @@ export const listGroup = tv({
     }
 });
 export const listGroupItem = tv({
-    base: "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left",
+    base: "py-2 px-4 w-full text-sm font-medium list-none flex items-center text-left gap-2",
     variants: {
         state: {
             normal: "",

package/dist/mega-menu/MegaMenu.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
-  import clsx from "clsx";
-  import type { LinkType } from "../types";
-  import Popper from "../utils/Popper.svelte";
   import { megamenu } from "./theme";
-  import type { MegaMenuProps } from "../types";
+  import { type MegaMenuProps, type LinkType, Popper, cn } from "..";
 
-  let { children, extra, items = [], full, ulClass, isOpen = $bindable(false), class: className, ...restProps }: MegaMenuProps = $props();
+  let { children, extra, items = [], full, ulClass, isOpen = $bindable(false), class: className, extraClass, ...restProps }: MegaMenuProps = $props();
 
   /* eslint-disable  @typescript-eslint/no-explicit-any */
   interface LinkTypeLike extends LinkType {
@@ -13,13 +10,11 @@
   }
 
   const { base, div, ul, extra: extraCls } = $derived(megamenu({ full, extra: !!extra }));
-  let wrapperClass: string = $derived(base({ class: clsx(className) }));
-  let ulCls = $derived(ul({ class: ulClass }));
 </script>
 
-<Popper color={full ? "default" : "dropdown"} arrow={false} bind:isOpen trigger="click" placement="bottom" yOnly={full} {...restProps} class={wrapperClass}>
+<Popper color={full ? "default" : "dropdown"} arrow={false} bind:isOpen trigger="click" placement="bottom" yOnly={full} {...restProps} class={cn(base(), className)}>
   <div class={div()}>
-    <ul class={ulCls}>
+    <ul class={cn(ul(), ulClass)}>
       {#each items as item, index}
         <li>
           {@render children({ item, index })}
@@ -28,7 +23,7 @@
         {@render children({ item: items[0], index: 0 })}
       {/each}
     </ul>
-    {#if full && extra}<div class={extraCls()}>{@render extra()}</div>{/if}
+    {#if full && extra}<div class={cn(extraCls(), extraClass)}>{@render extra()}</div>{/if}
   </div>
 </Popper>
 
@@ -36,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1029)
+[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1007)
 ## Props
 @prop children
 @prop extra
@@ -45,5 +40,6 @@
 @prop ulClass
 @prop isOpen = $bindable(false)
 @prop class: className
+@prop extraClass
 @prop ...restProps
 -->

package/dist/mega-menu/MegaMenu.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { MegaMenuProps } from "../types";
+import { type MegaMenuProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1029)
+ * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1007)
  * ## Props
  * @prop children
  * @prop extra
@@ -11,6 +11,7 @@ import type { MegaMenuProps } from "../types";
  * @prop ulClass
  * @prop isOpen = $bindable(false)
  * @prop class: className
+ * @prop extraClass
  * @prop ...restProps
  */
 declare const MegaMenu: import("svelte").Component<MegaMenuProps, {}, "isOpen">;

package/dist/mega-menu/index.d.ts

@@ -1,3 +1,2 @@
-import MegaMenu from "./MegaMenu.svelte";
-import { megamenu } from "./theme";
-export { MegaMenu, megamenu };
+export { default as MegaMenu } from "./MegaMenu.svelte";
+export { megamenu } from "./theme";

package/dist/mega-menu/index.js

@@ -1,3 +1,2 @@
-import MegaMenu from "./MegaMenu.svelte";
-import { megamenu } from "./theme";
-export { MegaMenu, megamenu };
+export { default as MegaMenu } from "./MegaMenu.svelte";
+export { megamenu } from "./theme";

package/dist/modal/Modal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { type ParamsType, type ModalProps, CloseButton, trapFocus } from "..";
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { sineIn } from "svelte/easing";
   import { fade } from "svelte/transition";
@@ -62,9 +63,9 @@
 </script>
 
 {#if open}
-  <dialog use:trapFocus={{ onEscape: handleEscape }} bind:this={dlg} {...restProps} class={base({ class: clsx(className) })} tabindex="-1" oncancel={_oncancel} onclick={_onclick} transition:transition={paramsOptions as ParamsType} onintrostart={() => (modal ? dlg?.showModal() : dlg?.show())} onoutroend={() => dlg?.close()}>
+  <dialog use:trapFocus={{ onEscape: handleEscape }} bind:this={dlg} {...restProps} class={twMerge(base(), clsx(className))} tabindex="-1" oncancel={_oncancel} onclick={_onclick} transition:transition={paramsOptions as ParamsType} onintrostart={() => (modal ? dlg?.showModal() : dlg?.show())} onoutroend={() => dlg?.close()}>
     {#if title || header}
-      <div class={headerCls({ class: headerClass })}>
+      <div class={twMerge(headerCls(), clsx(headerClass))}>
         {#if title}
           <h3>{title}</h3>
         {:else if header}
@@ -72,16 +73,16 @@
         {/if}
       </div>
     {/if}
-    <div class={body({ class: bodyClass })}>
+    <div class={twMerge(body(), clsx(bodyClass))}>
       {@render children?.()}
     </div>
     {#if footer}
-      <div class={footerCls({ class: footerClass })}>
+      <div class={twMerge(footerCls(), clsx(footerClass))}>
         {@render footer()}
       </div>
     {/if}
     {#if dismissable && !permanent}
-      <CloseButton onclick={closeModal} class={closeBtn({ class: closeBtnClass })} />
+      <CloseButton onclick={closeModal} class={twMerge(closeBtn(), clsx(closeBtnClass))} />
     {/if}
   </dialog>
 {/if}
@@ -90,7 +91,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1039)
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1018)
 ## Props
 @prop children
 @prop oncancel

package/dist/modal/Modal.svelte.d.ts

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

package/dist/navbar/Menu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { MenuProps } from "../types";
+  import clsx from "clsx";
 
   let { size = "24", color = "currentColor", variation = "outline", ariaLabel = "bars 3", class: className, ...restProps }: MenuProps = $props();
 
@@ -24,7 +25,7 @@
   });
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" role="button" tabindex="0" width={size} height={size} class={className} {...restProps} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2">
+<svg xmlns="http://www.w3.org/2000/svg" role="button" tabindex="0" width={size} height={size} class={clsx(className)} {...restProps} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2">
   {@html svgpath}
 </svg>
 
@@ -32,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1057)
+[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1036)
 ## Props
 @prop size = "24"
 @prop color = "currentColor"

package/dist/navbar/Menu.svelte.d.ts

@@ -2,7 +2,7 @@ import type { MenuProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1057)
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1036)
  * ## Props
  * @prop size = "24"
  * @prop color = "currentColor"