flowbite-svelte 1.10.5 → 1.10.7

package/dist/accordion/Accordion.svelte

@@ -2,7 +2,8 @@
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
   import { accordion } from "./";
-  import { type AccordionProps, cn } from "..";
+  import clsx from "clsx";
+  import { type AccordionProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, flush, activeClass, inactiveClass, multiple = false, class: className, transitionType, ...restProps }: AccordionProps = $props();
@@ -18,11 +19,10 @@
 
   setContext("ctx", ctx);
   setContext("ctxTransitionType", transitionType);
-  const base = $derived(cn(accordion({ flush }), className));
-  const finalClass = $derived(cn(base, theme));
+  const base = $derived(accordion({ flush, class: clsx(theme, className) }));
 </script>
 
-<div {...restProps} class={finalClass}>
+<div {...restProps} class={base}>
   {@render children()}
 </div>
 
@@ -30,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L158)
+[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L159)
 ## Props
 @prop children
 @prop flush

package/dist/accordion/Accordion.svelte.d.ts

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

package/dist/accordion/AccordionItem.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
-  import { slide } from "svelte/transition";
+  import { type AccordionCtxType, type AccordionItemProps, type ParamsType } from "..";
+  import { getTheme, themeDeprecated } from "../theme/themeUtils";
+  import clsx from "clsx";
   import { getContext } from "svelte";
   import { writable } from "svelte/store";
+  import { slide } from "svelte/transition";
   import { accordionItem, type AccordionItemTheme } from ".";
-  import { type AccordionCtxType, type AccordionItemProps, type ParamsType, cn } from "..";
-  import { getTheme } from "../theme/themeUtils";
 
-  let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transitionType = slide, transitionParams, class: className, headerClass, contentClass }: AccordionItemProps = $props();
+  let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transitionType = slide, transitionParams, class: className, classes, headerClass, contentClass }: AccordionItemProps = $props();
+
+  themeDeprecated("AccordionItem", { headerClass, contentClass, activeClass, inactiveClass });
+
+  let styling: typeof classes = $derived(classes ?? { button: headerClass, content: contentClass, active: activeClass, inactive: inactiveClass });
 
   const ctxTransitionType = getContext("ctxTransitionType");
   // Check if transitionType is explicitly set to undefined in props
@@ -29,11 +34,11 @@
 
   const { base, button, content, active, inactive } = $derived(accordionItem({ flush: ctx.flush, open }));
 
-  let buttonClass = $derived(cn(button(), open && !ctx.flush && (activeClass || ctx.activeClass || active()), !open && !ctx.flush && (inactiveClass || ctx.inactiveClass || inactive()), className));
+  let buttonClass = $derived(clsx(open && !ctx.flush && (styling.active || ctx.activeClass || active()), !open && !ctx.flush && (styling.inactive || ctx.inactiveClass || inactive())));
 </script>
 
-<h2 class={cn(base({ class: headerClass }), (theme as AccordionItemTheme)?.base)}>
-  <button type="button" onclick={handleToggle} class={cn(buttonClass, (theme as AccordionItemTheme)?.button)} aria-expanded={open}>
+<h2 class={base({ class: clsx((theme as AccordionItemTheme)?.base, className) })}>
+  <button type="button" onclick={handleToggle} class={button({ class: clsx(buttonClass, (theme as AccordionItemTheme)?.button, styling.button) })} aria-expanded={open}>
     {#if header}
       {@render header()}
       {#if open}
@@ -58,14 +63,14 @@
 {#if useTransition}
   {#if open && transitionType !== "none"}
     <div transition:transitionType={transitionParams as ParamsType}>
-      <div class={cn(content({ class: contentClass }), (theme as AccordionItemTheme)?.content)}>
+      <div class={content({ class: clsx((theme as AccordionItemTheme)?.content, styling.content) })}>
         {@render children()}
       </div>
     </div>
   {/if}
 {:else}
   <div class={open ? "block" : "hidden"}>
-    <div class={cn(content({ class: contentClass }), (theme as AccordionItemTheme)?.content)}>
+    <div class={content({ class: clsx((theme as AccordionItemTheme)?.content, styling.content) })}>
       {@render children()}
     </div>
   </div>
@@ -75,7 +80,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L170)
+[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L167)
 ## Props
 @prop children
 @prop header
@@ -87,6 +92,7 @@
 @prop transitionType = slide
 @prop transitionParams
 @prop class: className
+@prop classes
 @prop headerClass
 @prop contentClass
 -->

package/dist/accordion/AccordionItem.svelte.d.ts

@@ -2,7 +2,7 @@ import { type AccordionItemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L170)
+ * [AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L167)
  * ## Props
  * @prop children
  * @prop header
@@ -14,6 +14,7 @@ import { type AccordionItemProps } from "..";
  * @prop transitionType = slide
  * @prop transitionParams
  * @prop class: className
+ * @prop classes
  * @prop headerClass
  * @prop contentClass
  */

package/dist/accordion/theme.d.ts

@@ -1,3 +1,8 @@
+import type { Classes } from "../theme/themeUtils";
+import type { ClassValue } from "svelte/elements";
+import { type VariantProps } from "tailwind-variants";
+export type AccordionVariants = VariantProps<typeof accordion>;
+export type AccordionItemVariants = VariantProps<typeof accordionItem> & Classes<typeof accordionItem>;
 export declare const accordion: import("tailwind-variants").TVReturnType<{
     color: {
         primary: string;
@@ -90,6 +95,6 @@ export declare const accordionItem: import("tailwind-variants").TVReturnType<{
     active: string;
     inactive: string;
 }, undefined, unknown, unknown, undefined>>;
-export type AccordionTheme = string;
+export type AccordionTheme = ClassValue;
 export type AccordionItemSlots = keyof typeof accordionItem.slots;
-export type AccordionItemTheme = Partial<Record<AccordionItemSlots, string>>;
+export type AccordionItemTheme = Partial<Record<AccordionItemSlots, ClassValue>>;

package/dist/alert/Alert.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
   import { alert } from ".";
-  import { type AlertProps, type ParamsType, CloseButton, cn } from "..";
+  import clsx from "clsx";
+  import { type AlertProps, type ParamsType, CloseButton } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, icon, alertStatus = $bindable(true), closeIcon: CloseIcon, color = "primary", rounded = true, border, class: className, dismissable, transition = fade, params, onclick = () => (alertStatus = false), ...restProps }: AlertProps = $props();
@@ -10,17 +11,14 @@
   const theme = getTheme("alert");
 
   let divCls = $derived(
-    cn(
-      alert({
-        color,
-        rounded,
-        border,
-        icon: !!icon,
-        dismissable
-      }),
-      className,
-      theme
-    )
+    alert({
+      color,
+      rounded,
+      border,
+      icon: !!icon,
+      dismissable,
+      class: clsx(theme, className)
+    })
   );
 </script>
 
@@ -54,7 +52,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L185)
+[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L181)
 ## Props
 @prop children
 @prop icon

package/dist/alert/Alert.svelte.d.ts

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

package/dist/alert/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 type AlertVariants = VariantProps<typeof alert>;
 declare const alert: import("tailwind-variants").TVReturnType<{
     color: {
@@ -107,4 +108,4 @@ declare const alert: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "p-4 gap-3 text-sm", unknown, unknown, undefined>>;
 export { alert, type AlertVariants };
-export type AlertTheme = string;
+export type AlertTheme = ClassValue;

package/dist/avatar/Avatar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { avatar } from ".";
-  import { type AvatarProps, Indicator, cn } from "..";
+  import clsx from "clsx";
+  import { type AvatarProps, Indicator } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, indicator, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: AvatarProps = $props();
@@ -11,16 +12,13 @@
   dot = dot && { placement: "top-right", color: "gray", size: "lg", ...dot };
 
   let avatarClass = $derived(
-    cn(
-      avatar({
-        cornerStyle,
-        border,
-        stacked,
-        size
-      }),
-      className,
-      theme
-    )
+    avatar({
+      cornerStyle,
+      border,
+      stacked,
+      size,
+      class: clsx(theme, className)
+    })
   );
 </script>
 
@@ -50,7 +48,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L196)
+[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L192)
 ## Props
 @prop children
 @prop indicator

package/dist/avatar/Avatar.svelte.d.ts

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

package/dist/avatar/theme.d.ts

@@ -1,3 +1,6 @@
+import type { ClassValue } from "svelte/elements";
+import { type VariantProps } from "tailwind-variants";
+export type AvatarVariants = VariantProps<typeof avatar>;
 declare const avatar: import("tailwind-variants").TVReturnType<{
     cornerStyle: {
         rounded: string;
@@ -60,4 +63,4 @@ declare const avatar: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300", unknown, unknown, undefined>>;
 export { avatar };
-export type AvatarTheme = string;
+export type AvatarTheme = ClassValue;

package/dist/badge/Badge.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-  import { badge, type BadgeTheme } from ".";
+  import { type BadgeProps, CloseButton, type ParamsType } from "..";
+  import { getTheme, themeDeprecated } from "../theme/themeUtils";
+  import clsx from "clsx";
   import { fade } from "svelte/transition";
-  import { type ParamsType, type BadgeProps, CloseButton, cn } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { badge, type BadgeTheme } from ".";
+
+  let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, classes, border, href, target, rounded, transition = fade, params, aClass, onclose, ...restProps }: BadgeProps = $props();
+
+  themeDeprecated("Badge", { aClass });
 
-  let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, border, href, target, rounded, transition = fade, params, aClass, onclose, ...restProps }: BadgeProps = $props();
+  let styling = $derived(classes ?? { linkClass: aClass });
 
   // Theme context
   const theme = getTheme("badge");
@@ -18,9 +23,9 @@
 </script>
 
 {#if badgeStatus}
-  <div {...restProps} transition:transition={params as ParamsType} class={cn(base(), className, (theme as BadgeTheme)?.base)}>
+  <div {...restProps} transition:transition={params as ParamsType} class={base({ class: clsx((theme as BadgeTheme)?.base, className) })}>
     {#if href}
-      <a {href} {target} class={cn(linkClass(), aClass, (theme as BadgeTheme)?.linkClass)}>
+      <a {href} {target} class={linkClass({ class: clsx((theme as BadgeTheme)?.linkClass, styling.linkClass) })}>
         {@render children()}
       </a>
     {:else}
@@ -44,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L212)
+[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L204)
 ## Props
 @prop children
 @prop icon
@@ -53,6 +58,7 @@
 @prop large = false
 @prop dismissable = false
 @prop class: className
+@prop classes
 @prop border
 @prop href
 @prop target

package/dist/badge/Badge.svelte.d.ts

@@ -2,7 +2,7 @@ import { type BadgeProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L212)
+ * [BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L204)
  * ## Props
  * @prop children
  * @prop icon
@@ -11,6 +11,7 @@ import { type BadgeProps } from "..";
  * @prop large = false
  * @prop dismissable = false
  * @prop class: className
+ * @prop classes
  * @prop border
  * @prop href
  * @prop target

package/dist/badge/theme.d.ts

@@ -1,5 +1,7 @@
+import type { Classes } from "../theme/themeUtils";
+import type { ClassValue } from "svelte/elements";
 import { type VariantProps } from "tailwind-variants";
-type BadgeVariants = VariantProps<typeof badge>;
+type BadgeVariants = VariantProps<typeof badge> & Classes<typeof badge>;
 declare const badge: import("tailwind-variants").TVReturnType<{
     color: {
         primary: {
@@ -246,4 +248,4 @@ declare const badge: import("tailwind-variants").TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 export { badge, type BadgeVariants };
 export type BadgeSlots = keyof typeof badge.slots;
-export type BadgeTheme = Partial<Record<BadgeSlots, string>>;
+export type BadgeTheme = Partial<Record<BadgeSlots, ClassValue>>;

package/dist/banner/Banner.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
   import { banner, type BannerTheme } from ".";
-  import { type ParamsType, type BannerProps, CloseButton, cn } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { type ParamsType, type BannerProps, CloseButton } from "..";
+  import { getTheme, themeDeprecated } from "../theme/themeUtils";
 
-  let { children, header, open = $bindable(true), dismissable = true, color = "gray", type, class: className, innerClass, transition = fade, params, closeClass, ...restProps }: BannerProps = $props();
+  let { children, header, open = $bindable(true), dismissable = true, color = "gray", type, class: className, classes, innerClass, transition = fade, params, closeClass, ...restProps }: BannerProps = $props();
+
+  themeDeprecated("Banner", { innerClass, closeClass });
+  let styling = $derived(classes ?? { insideDiv: innerClass, dismissable: closeClass });
 
   // Theme context
   const theme = getTheme("banner");
@@ -13,15 +17,15 @@
 </script>
 
 {#if open}
-  <div tabindex="-1" class={cn(base(), className, (theme as BannerTheme)?.base)} {...restProps} transition:transition={params as ParamsType}>
-    <div class={cn(insideDiv(), innerClass, (theme as BannerTheme)?.insideDiv)}>
+  <div tabindex="-1" class={base({ class: clsx((theme as BannerTheme)?.base, className) })} {...restProps} transition:transition={params as ParamsType}>
+    <div class={insideDiv({ class: clsx((theme as BannerTheme)?.insideDiv, styling.insideDiv) })}>
       {@render children?.()}
     </div>
 
     {#if dismissable}
       <div class="flex items-center justify-end">
         <CloseButton
-          class={cn(dismissableClass(), closeClass, (theme as BannerTheme)?.dismissable)}
+          class={dismissableClass({ class: clsx((theme as BannerTheme)?.dismissable, styling.dismissable) })}
           {color}
           ariaLabel="Remove banner"
           onclick={() => {
@@ -37,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L227)
+[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L219)
 ## Props
 @prop children
 @prop header
@@ -46,6 +50,7 @@
 @prop color = "gray"
 @prop type
 @prop class: className
+@prop classes
 @prop innerClass
 @prop transition = fade
 @prop params

package/dist/banner/Banner.svelte.d.ts

@@ -2,7 +2,7 @@ import { type BannerProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L227)
+ * [BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L219)
  * ## Props
  * @prop children
  * @prop header
@@ -11,6 +11,7 @@ import { type BannerProps } from "..";
  * @prop color = "gray"
  * @prop type
  * @prop class: className
+ * @prop classes
  * @prop innerClass
  * @prop transition = fade
  * @prop params

package/dist/banner/theme.d.ts

@@ -1,5 +1,7 @@
 import { type VariantProps } from "tailwind-variants";
-export type BannerVariants = VariantProps<typeof banner>;
+import type { ClassValue } from "svelte/elements";
+import type { Classes } from "../theme/themeUtils";
+export type BannerVariants = VariantProps<typeof banner> & Classes<typeof banner>;
 declare const banner: import("tailwind-variants").TVReturnType<{
     type: {
         top: {
@@ -228,4 +230,4 @@ declare const banner: import("tailwind-variants").TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 export { banner };
 export type BannerSlots = keyof typeof banner.slots;
-export type BannerTheme = Partial<Record<BannerSlots, string>>;
+export type BannerTheme = Partial<Record<BannerSlots, ClassValue>>;

package/dist/bottom-navigation/BottomNav.svelte

@@ -2,34 +2,38 @@
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
   import { bottomNav } from ".";
+  import clsx from "clsx";
   import { type BottomNavProps, type BottomNavContextType, cn, type BottomNavTheme } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme, themeDeprecated } from "../theme/themeUtils";
 
-  let { children, header, position = "fixed", navType = "default", outerClass, innerClass, activeClass, activeUrl = "", ...restProps }: BottomNavProps = $props();
+  let { children, header, position = "fixed", navType = "default", class: className, classes, outerClass, innerClass, activeClass, activeUrl = "", ...restProps }: BottomNavProps = $props();
+
+  themeDeprecated("BottomNav", { innerClass, outerClass });
+  let styling = $derived(classes ?? { inner: innerClass });
 
   // Theme context
   const theme = getTheme("bottomNav");
 
   const activeCls = cn("text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900", activeClass);
 
-  const activeUrlStore = writable("");
-  setContext("activeUrl", activeUrlStore);
-  setContext("navType", navType);
-  setContext<BottomNavContextType>("bottomNavType", { activeClass: activeCls });
+  let context: BottomNavContextType = $state({ activeClass: activeCls, activeUrl, navType });
+  setContext<BottomNavContextType>("bottomNavType", context);
 
-  const { outer, inner } = $derived(bottomNav({ position, navType }));
+  const { base, inner } = $derived(bottomNav({ position, navType }));
 
   $effect(() => {
-    activeUrlStore.set(activeUrl);
+    context.activeUrl = activeUrl;
+    context.navType = navType;
+    context.activeClass = activeCls;
   });
 </script>
 
-<div {...restProps} class={cn(outer(), outerClass, (theme as BottomNavTheme)?.outer)}>
+<div {...restProps} class={base({ class: clsx((theme as BottomNavTheme)?.base, className ?? outerClass) })}>
   {#if header}
     {@render header()}
   {/if}
 
-  <div class={cn(inner(), innerClass, (theme as BottomNavTheme)?.inner)}>
+  <div class={inner({ class: clsx((theme as BottomNavTheme)?.inner, styling.inner) })}>
     {@render children()}
   </div>
 </div>
@@ -38,12 +42,14 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L249)
+[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L238)
 ## Props
 @prop children
 @prop header
 @prop position = "fixed"
 @prop navType = "default"
+@prop class: className
+@prop classes
 @prop outerClass
 @prop innerClass
 @prop activeClass

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

@@ -2,12 +2,14 @@ import { type BottomNavProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L249)
+ * [BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L238)
  * ## Props
  * @prop children
  * @prop header
  * @prop position = "fixed"
  * @prop navType = "default"
+ * @prop class: className
+ * @prop classes
  * @prop outerClass
  * @prop innerClass
  * @prop activeClass

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -1,18 +1,22 @@
 <script lang="ts">
   import { bottomNavHeader } from ".";
-  import { type BottomNavHeaderProps, cn, type BottomNavHeaderTheme } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { type BottomNavHeaderProps, type BottomNavHeaderTheme } from "..";
+  import { getTheme, themeDeprecated } from "../theme/themeUtils";
 
-  let { children, outerClass, innerClass, ...restProps }: BottomNavHeaderProps = $props();
+  let { children, class: className, classes, outerClass, innerClass, ...restProps }: BottomNavHeaderProps = $props();
+
+  themeDeprecated("BottomNavHeader", { innerClass, outerClass });
+  let styling = $derived(classes ?? { innerDiv: innerClass });
 
   // Theme context
   const theme = getTheme("bottomNavHeader");
 
-  const { innerDiv, outerDiv } = $derived(bottomNavHeader());
+  const { innerDiv, base } = $derived(bottomNavHeader());
 </script>
 
-<div {...restProps} class={cn(outerDiv(), outerClass, (theme as BottomNavHeaderTheme)?.outerDiv)}>
-  <div class={cn(innerDiv(), innerClass, (theme as BottomNavHeaderTheme)?.innerDiv)} role="group">
+<div {...restProps} class={base({ class: clsx((theme as BottomNavHeaderTheme)?.base, className ?? outerClass) })}>
+  <div class={innerDiv({ class: clsx((theme as BottomNavHeaderTheme)?.innerDiv, styling.innerDiv) })} role="group">
     {@render children()}
   </div>
 </div>
@@ -21,9 +25,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L295)
+[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L278)
 ## Props
 @prop children
+@prop class: className
+@prop classes
 @prop outerClass
 @prop innerClass
 @prop ...restProps

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

@@ -2,9 +2,11 @@ import { type BottomNavHeaderProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L295)
+ * [BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L278)
  * ## Props
  * @prop children
+ * @prop class: className
+ * @prop classes
  * @prop outerClass
  * @prop innerClass
  * @prop ...restProps

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { bottomNavHeaderItem } from ".";
-  import { type BottomNavHeaderItemProps, cn } from "..";
+  import clsx from "clsx";
+  import { type BottomNavHeaderItemProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { itemName, active, class: className, ...restProps }: BottomNavHeaderItemProps = $props();
@@ -8,10 +9,10 @@
   // Theme context
   const theme = getTheme("bottomNavHeaderItem");
 
-  let base = $derived(bottomNavHeaderItem({ active }));
+  let base = $derived(bottomNavHeaderItem({ active, class: clsx(theme, className) }));
 </script>
 
-<button {...restProps} class={cn(base, className, theme)}>
+<button {...restProps} class={base}>
   {itemName}
 </button>
 
@@ -19,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L301)
+[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L284)
 ## Props
 @prop itemName
 @prop active

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

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