flowbite-svelte 1.4.3 → 1.5.1

package/dist/dropdown/DropdownDivider.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
-  import clsx from "clsx";
-  import { dropdownDivider } from "./";
-  import type { DropdownDividerProps } from "../types";
+  import { dropdownDivider } from ".";
+  import { type DropdownDividerProps, cn } from "..";
 
-  let { class: divClass, ...restProps }: DropdownDividerProps = $props();
-  const base = dropdownDivider({ class: clsx(divClass) });
+  let { class: className, ...restProps }: DropdownDividerProps = $props();
 </script>
 
-<div {...restProps} class={base}></div>
+<div {...restProps} class={cn(dropdownDivider(), className)}></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L612)
+[DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L594)
 ## Props
-@prop class: divClass
+@prop class: className
 @prop ...restProps
 -->

package/dist/dropdown/DropdownDivider.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { DropdownDividerProps } from "../types";
+import { type DropdownDividerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L612)
+ * [DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L594)
  * ## Props
- * @prop class: divClass
+ * @prop class: className
  * @prop ...restProps
  */
 declare const DropdownDivider: import("svelte").Component<DropdownDividerProps, {}, "">;

package/dist/dropdown/DropdownGroup.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { dropdownGroup } from ".";
-  import type { DropdownGroupProps } from "../types";
+  import { type DropdownGroupProps, cn } from "..";
 
   let { children, class: className, ...restProps }: DropdownGroupProps = $props();
-
-  const ulCls = $derived(dropdownGroup({ class: clsx(className) }));
 </script>
 
-<ul {...restProps} class={ulCls}>
+<ul {...restProps} class={cn(dropdownGroup(), className)}>
   {@render children()}
 </ul>
 
@@ -16,7 +13,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L629)
+[DropdownGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L611)
 ## Props
 @prop children
 @prop class: className

package/dist/dropdown/DropdownGroup.svelte.d.ts

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

package/dist/dropdown/DropdownHeader.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { dropdownHeader } from ".";
-  import type { DropdownHeaderProps } from "../types";
+  import { type DropdownHeaderProps, cn } from "..";
 
   let { children, class: className, ...restProps }: DropdownHeaderProps = $props();
-  let headerClass = $derived(dropdownHeader({ class: clsx(className) }));
 </script>
 
-<div {...restProps} class={headerClass}>
+<div {...restProps} class={cn(dropdownHeader(), className)}>
   {@render children()}
 </div>
 
@@ -15,7 +13,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L614)
+[DropdownHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L596)
 ## Props
 @prop children
 @prop class: className

package/dist/dropdown/DropdownHeader.svelte.d.ts

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

package/dist/dropdown/DropdownItem.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import { dropdownItem } from ".";
-  import type { DropdownItemProps } from "../types";
-  import clsx from "clsx";
+  import { type DropdownItemProps, cn } from "..";
 
-  let { aClass, children, href, activeClass, liClass, class: className, ...restProps }: DropdownItemProps = $props();
+  let { aClass, children, activeClass, liClass, class: className, ...restProps }: DropdownItemProps = $props();
 
   const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
   let sidebarUrl = $state("");
@@ -14,26 +13,26 @@
 
   let active = $state(false);
   $effect(() => {
-    active = sidebarUrl ? href === sidebarUrl : false;
+    active = sidebarUrl ? restProps.href === sidebarUrl : false;
   });
 
   const { anchor, activeAnchor } = dropdownItem();
-  let finalClass = $derived([active ? activeAnchor({ class: clsx(activeClass, className) }) : anchor({ class: clsx(aClass, className) })]);
+  let finalClass = $derived([active ? cn(activeAnchor(), activeClass, className) : cn(anchor(), aClass, className)]);
 </script>
 
-<li class={liClass}>
-  {#if href}
-    <a {href} {...restProps} class={finalClass}>
+<li class={cn(liClass)}>
+  {#if restProps.href === undefined && restProps.onclick === undefined}
+    <div {...restProps} class={finalClass}>
       {@render children()}
-    </a>
-  {:else if restProps.onclick}
-    <button type="button" class={finalClass} onclick={restProps.onclick}>
+    </div>
+  {:else if restProps.href === undefined}
+    <button type="button" {...restProps} class={finalClass}>
       {@render children()}
     </button>
   {:else}
-    <div class={finalClass}>
+    <a {...restProps} class={finalClass}>
       {@render children()}
-    </div>
+    </a>
   {/if}
 </li>
 
@@ -41,11 +40,10 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L620)
+[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L602)
 ## Props
 @prop aClass
 @prop children
-@prop href
 @prop activeClass
 @prop liClass
 @prop class: className

package/dist/dropdown/DropdownItem.svelte.d.ts

@@ -1,12 +1,11 @@
-import type { DropdownItemProps } from "../types";
+import { type DropdownItemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L620)
+ * [DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L602)
  * ## Props
  * @prop aClass
  * @prop children
- * @prop href
  * @prop activeClass
  * @prop liClass
  * @prop class: className

package/dist/dropdown/index.d.ts

@@ -1,7 +1,6 @@
-import Dropdown from "./Dropdown.svelte";
-import DropdownDivider from "./DropdownDivider.svelte";
-import DropdownGroup from "./DropdownGroup.svelte";
-import DropdownHeader from "./DropdownHeader.svelte";
-import DropdownItem from "./DropdownItem.svelte";
-import { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem } from "./theme";
-export { Dropdown, dropdown, DropdownDivider, dropdownDivider, DropdownGroup, dropdownGroup, DropdownHeader, dropdownHeader, DropdownItem, dropdownItem };
+export { default as Dropdown } from "./Dropdown.svelte";
+export { default as DropdownDivider } from "./DropdownDivider.svelte";
+export { default as DropdownGroup } from "./DropdownGroup.svelte";
+export { default as DropdownHeader } from "./DropdownHeader.svelte";
+export { default as DropdownItem } from "./DropdownItem.svelte";
+export { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem } from "./theme";

package/dist/dropdown/index.js

@@ -1,7 +1,6 @@
-import Dropdown from "./Dropdown.svelte";
-import DropdownDivider from "./DropdownDivider.svelte";
-import DropdownGroup from "./DropdownGroup.svelte";
-import DropdownHeader from "./DropdownHeader.svelte";
-import DropdownItem from "./DropdownItem.svelte";
-import { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem } from "./theme";
-export { Dropdown, dropdown, DropdownDivider, dropdownDivider, DropdownGroup, dropdownGroup, DropdownHeader, dropdownHeader, DropdownItem, dropdownItem };
+export { default as Dropdown } from "./Dropdown.svelte";
+export { default as DropdownDivider } from "./DropdownDivider.svelte";
+export { default as DropdownGroup } from "./DropdownGroup.svelte";
+export { default as DropdownHeader } from "./DropdownHeader.svelte";
+export { default as DropdownItem } from "./DropdownItem.svelte";
+export { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem } from "./theme";

package/dist/footer/Footer.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { footer } from ".";
-  import type { FooterProps } from "../types";
+  import { type FooterProps, cn } from "..";
 
   let { children, footerType = "default", class: className, ...restProps }: FooterProps = $props();
 
-  const footerCls = $derived(footer({ footerType, className }));
+  const footerCls = $derived(footer({ footerType }));
 </script>
 
-<footer {...restProps} class={footerCls}>
+<footer {...restProps} class={cn(footerCls, className)}>
   {@render children()}
 </footer>
 
@@ -15,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L636)
+[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L618)
 ## Props
 @prop children
 @prop footerType = "default"

package/dist/footer/Footer.svelte.d.ts

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

package/dist/footer/FooterBrand.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { footerBrand } from ".";
-  import type { FooterBrandProps } from "../types";
+  import { type FooterBrandProps, cn } from "..";
 
   let { children, aClass, spanClass, imgClass, href, src, alt, name, ...restProps }: FooterBrandProps = $props();
 
@@ -8,26 +8,26 @@
 </script>
 
 {#if href}
-  <a {...restProps} {href} class={base({ class: aClass })}>
+  <a {...restProps} {href} class={cn(base(), aClass)}>
     {#if src}
-      <img {src} class={img({ class: imgClass })} {alt} />
+      <img {src} class={cn(img(), imgClass)} {alt} />
     {/if}
     {#if name}
-      <span class={span({ class: spanClass })}>{name}</span>
+      <span class={cn(span(), spanClass)}>{name}</span>
     {/if}
     {#if children}
       {@render children()}
     {/if}
   </a>
 {:else}
-  <img {src} class={img({ class: imgClass })} {alt} />
+  <img {src} class={cn(img(), imgClass)} {alt} />
 {/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L642)
+[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L623)
 ## Props
 @prop children
 @prop aClass

package/dist/footer/FooterBrand.svelte.d.ts

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

package/dist/footer/FooterCopyright.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
   import { footerCopyright } from ".";
-  import type { FooterCopyrightProps } from "../types";
+  import { type FooterCopyrightProps, cn } from "..";
 
-  let { spanClass, aClass, href, by, copyrightMessage = "All Rights Reserved.", year, ...restProps }: FooterCopyrightProps = $props();
+  let { spanClass, aClass, href, by, copyrightMessage = "All Rights Reserved.", year, bySpanClass, ...restProps }: FooterCopyrightProps = $props();
 
   if (!year) year = new Date().getFullYear();
 
-  const { base, link, bySpan } = $derived(footerCopyright());
+  const { base, link, bySpan } = footerCopyright();
 </script>
 
-<span class={base({ class: spanClass })}>
+<span class={cn(base(), spanClass)}>
   &copy; {year}
   {#if href}
-    <a {...restProps} {href} class={link({ class: aClass })}>
+    <a {...restProps} {href} class={cn(link(), aClass)}>
       {by}
     </a>
   {:else}
-    <span class={bySpan()}>{by}</span>
+    <span class={cn(bySpan(), bySpanClass)}>{by}</span>
   {/if}
   {copyrightMessage}
 </span>
@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L653)
+[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L634)
 ## Props
 @prop spanClass
 @prop aClass
@@ -33,5 +33,6 @@
 @prop by
 @prop copyrightMessage = "All Rights Reserved."
 @prop year
+@prop bySpanClass
 @prop ...restProps
 -->

package/dist/footer/FooterCopyright.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { FooterCopyrightProps } from "../types";
+import { type FooterCopyrightProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L653)
+ * [FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L634)
  * ## Props
  * @prop spanClass
  * @prop aClass
@@ -10,6 +10,7 @@ import type { FooterCopyrightProps } from "../types";
  * @prop by
  * @prop copyrightMessage = "All Rights Reserved."
  * @prop year
+ * @prop bySpanClass
  * @prop ...restProps
  */
 declare const FooterCopyright: import("svelte").Component<FooterCopyrightProps, {}, "">;

package/dist/footer/FooterIcon.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
   import { footerIcon } from ".";
-  import type { FooterIconProps } from "../types";
+  import { type FooterIconProps, cn } from "..";
 
-  let { children, href, ariaLabel, class: aClass, ...restProps }: FooterIconProps = $props();
-
-  const aCls = $derived(footerIcon({ class: aClass }));
+  let { children, href, ariaLabel, class: className, ...restProps }: FooterIconProps = $props();
 </script>
 
 {#if href}
-  <a {...restProps} {href} aria-label={ariaLabel} class={aCls}>
+  <a {...restProps} {href} aria-label={ariaLabel} class={cn(footerIcon(), className)}>
     {@render children()}
   </a>
 {:else}
@@ -19,11 +17,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L662)
+[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L644)
 ## Props
 @prop children
 @prop href
 @prop ariaLabel
-@prop class: aClass
+@prop class: className
 @prop ...restProps
 -->

package/dist/footer/FooterIcon.svelte.d.ts

@@ -1,13 +1,13 @@
-import type { FooterIconProps } from "../types";
+import { type FooterIconProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L662)
+ * [FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L644)
  * ## Props
  * @prop children
  * @prop href
  * @prop ariaLabel
- * @prop class: aClass
+ * @prop class: className
  * @prop ...restProps
  */
 declare const FooterIcon: import("svelte").Component<FooterIconProps, {}, "">;

package/dist/footer/FooterLink.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { footerLink } from ".";
-  import type { FooterLinkProps } from "../types";
+  import { type FooterLinkProps, cn } from "..";
 
   let { children, liClass, aClass, href, ...restProps }: FooterLinkProps = $props();
-  const { base, link } = $derived(footerLink());
+  const { base, link } = footerLink();
 </script>
 
-<li class={base({ class: liClass })}>
-  <a {...restProps} {href} class={link({ class: aClass })}>
+<li class={cn(base(), liClass)}>
+  <a {...restProps} {href} class={cn(link(), aClass)}>
     {@render children()}
   </a>
 </li>
@@ -16,7 +16,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L674)
+[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L654)
 ## Props
 @prop children
 @prop liClass

package/dist/footer/FooterLink.svelte.d.ts

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

package/dist/footer/FooterLinkGroup.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import { footerLinkGroup } from ".";
-  import type { FooterLinkGroupProps } from "../types";
+  import { type FooterLinkGroupProps, cn } from "..";
 
-  let { class: ulClass, children, ...restProps }: FooterLinkGroupProps = $props();
-  const base = $derived(footerLinkGroup({ class: ulClass }));
+  let { class: className, children, ...restProps }: FooterLinkGroupProps = $props();
 </script>
 
-<ul {...restProps} class={base}>
+<ul {...restProps} class={cn(footerLinkGroup(), className)}>
   {@render children()}
 </ul>
 
@@ -14,9 +13,9 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L669)
+[FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L650)
 ## Props
-@prop class: ulClass
+@prop class: className
 @prop children
 @prop ...restProps
 -->

package/dist/footer/FooterLinkGroup.svelte.d.ts

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

package/dist/footer/index.d.ts

@@ -1,8 +1,7 @@
-import Footer from "./Footer.svelte";
-import FooterBrand from "./FooterBrand.svelte";
-import FooterCopyright from "./FooterCopyright.svelte";
-import FooterIcon from "./FooterIcon.svelte";
-import FooterLink from "./FooterLink.svelte";
-import FooterLinkGroup from "./FooterLinkGroup.svelte";
-import { footer, footerBrand, footerCopyright, footerIcon, footerLinkGroup, footerLink } from "./theme";
-export { Footer, FooterBrand, FooterCopyright, FooterIcon, FooterLink, FooterLinkGroup, footer, footerBrand, footerCopyright, footerIcon, footerLinkGroup, footerLink };
+export { default as Footer } from "./Footer.svelte";
+export { default as FooterBrand } from "./FooterBrand.svelte";
+export { default as FooterCopyright } from "./FooterCopyright.svelte";
+export { default as FooterIcon } from "./FooterIcon.svelte";
+export { default as FooterLink } from "./FooterLink.svelte";
+export { default as FooterLinkGroup } from "./FooterLinkGroup.svelte";
+export { footer, footerBrand, footerCopyright, footerIcon, footerLinkGroup, footerLink } from "./theme";

package/dist/footer/index.js

@@ -1,8 +1,7 @@
-import Footer from "./Footer.svelte";
-import FooterBrand from "./FooterBrand.svelte";
-import FooterCopyright from "./FooterCopyright.svelte";
-import FooterIcon from "./FooterIcon.svelte";
-import FooterLink from "./FooterLink.svelte";
-import FooterLinkGroup from "./FooterLinkGroup.svelte";
-import { footer, footerBrand, footerCopyright, footerIcon, footerLinkGroup, footerLink } from "./theme";
-export { Footer, FooterBrand, FooterCopyright, FooterIcon, FooterLink, FooterLinkGroup, footer, footerBrand, footerCopyright, footerIcon, footerLinkGroup, footerLink };
+export { default as Footer } from "./Footer.svelte";
+export { default as FooterBrand } from "./FooterBrand.svelte";
+export { default as FooterCopyright } from "./FooterCopyright.svelte";
+export { default as FooterIcon } from "./FooterIcon.svelte";
+export { default as FooterLink } from "./FooterLink.svelte";
+export { default as FooterLinkGroup } from "./FooterLinkGroup.svelte";
+export { footer, footerBrand, footerCopyright, footerIcon, footerLinkGroup, footerLink } from "./theme";

package/dist/forms/button-toggle/ButtonToggle.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { twMerge } from "tailwind-merge";
   import CheckIcon from "./CheckIcon.svelte";
   import { buttonToggle, buttonToggleContent, buttonToggleText } from "./theme";
   import type { ButtonToggleVariants } from "./theme";
-  import { type ButtonToggleProps, type ButtonToggleContext } from "../..";
+  import { type ButtonToggleProps, type ButtonToggleContext, cn } from "../..";
 
-  let { value, selected = false, children, iconSlot, color, class: className, iconClass, txtClass, ...restProps }: ButtonToggleProps = $props();
+  let { value, selected = false, children, iconSlot, color, class: className, iconClass, txtClass, contentClass, ...restProps }: ButtonToggleProps = $props();
 
   const { toggleSelected, isSelected } = getContext<ButtonToggleContext>("button-toggle-group");
   const multiSelect = getContext<boolean>("multiSelect");
@@ -14,7 +13,7 @@
   const size = getContext<ButtonToggleVariants["size"]>("buttonToggleSize");
   const roundedSize = getContext<ButtonToggleVariants["roundedSize"]>("buttonToggleRounded");
   const ctxIconClass = getContext<string | undefined>("ctxIconClass");
-  const actualIconClass = ctxIconClass || iconClass;
+  const actualIconClass = ctxIconClass || cn(iconClass);
   const ctxBtnClass = getContext<string | undefined>("ctxBtnClass");
 
   function handleClick() {
@@ -26,16 +25,16 @@
   });
 </script>
 
-<button type="button" class={twMerge(buttonToggle({ selected, color: actualColor, size, roundedSize }), ctxBtnClass, className)} data-selected={selected} onclick={handleClick} role={multiSelect ? "checkbox" : "radio"} aria-checked={selected} {...restProps}>
-  <div class={buttonToggleContent()}>
+<button type="button" class={cn(buttonToggle({ selected, color: actualColor, size, roundedSize }), ctxBtnClass, className)} data-selected={selected} onclick={handleClick} role={multiSelect ? "checkbox" : "radio"} aria-checked={selected} {...restProps}>
+  <div class={cn(buttonToggleContent(), contentClass)}>
     {#if selected}
       {#if iconSlot}
         {@render iconSlot()}
       {:else}
-        <CheckIcon class={twMerge("absolute left-0 flex-shrink-0 text-green-600", actualIconClass)} />
+        <CheckIcon class={cn("absolute left-0 flex-shrink-0 text-green-600", actualIconClass)} />
       {/if}
     {/if}
-    <span class={buttonToggleText({ selected, class: txtClass })}>
+    <span class={cn(buttonToggleText({ selected }), txtClass)}>
       {@render children()}
     </span>
   </div>
@@ -45,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L374)
+[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L369)
 ## Props
 @prop value
 @prop selected = false
@@ -55,5 +54,6 @@
 @prop class: className
 @prop iconClass
 @prop txtClass
+@prop contentClass
 @prop ...restProps
 -->

package/dist/forms/button-toggle/ButtonToggle.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ButtonToggleProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L374)
+ * [ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L369)
  * ## Props
  * @prop value
  * @prop selected = false
@@ -12,6 +12,7 @@ import { type ButtonToggleProps } from "../..";
  * @prop class: className
  * @prop iconClass
  * @prop txtClass
+ * @prop contentClass
  * @prop ...restProps
  */
 declare const ButtonToggle: import("svelte").Component<ButtonToggleProps, {}, "">;