flowbite-svelte 1.10.5 → 1.10.7

package/dist/rating/ScoreRating.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { scoreRating, type ScoreRatingTheme } from ".";
   import type { ScoreRatingProps } from "../types";
-  import { cn } from "..";
+  import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
   let { ratings, ratings2, headerLabel }: ScoreRatingProps = $props();
@@ -14,17 +14,17 @@
 <div class="mb-5 flex items-center">
   {#if headerLabel}
     {#if headerLabel.desc1}
-      <p class={cn(desc1(), (theme as ScoreRatingTheme)?.desc1)}>{headerLabel.desc1}</p>
+      <p class={desc1({ class: clsx((theme as ScoreRatingTheme)?.desc1) })}>{headerLabel.desc1}</p>
     {/if}
     {#if headerLabel.desc2}
-      <p class={cn(desc2(), (theme as ScoreRatingTheme)?.desc2)}>{headerLabel.desc2}</p>
+      <p class={desc2({ class: clsx((theme as ScoreRatingTheme)?.desc2) })}>{headerLabel.desc2}</p>
     {/if}
     {#if headerLabel.desc3}
-      <span class={cn(desc3span(), (theme as ScoreRatingTheme)?.desc3span)}></span>
-      <p class={cn(desc3p(), (theme as ScoreRatingTheme)?.desc3p)}>{headerLabel.desc3}</p>
+      <span class={desc3span({ class: clsx((theme as ScoreRatingTheme)?.desc3span) })}></span>
+      <p class={desc3p({ class: clsx((theme as ScoreRatingTheme)?.desc3p) })}>{headerLabel.desc3}</p>
     {/if}
     {#if headerLabel.link}
-      <a href={headerLabel.link.url} class={cn(link(), (theme as ScoreRatingTheme)?.link)}>{headerLabel.link.label}</a>
+      <a href={headerLabel.link.url} class={link({ class: clsx((theme as ScoreRatingTheme)?.link) })}>{headerLabel.link.label}</a>
     {/if}
   {/if}
 </div>
@@ -38,7 +38,7 @@
           </dt>
           <dd class="mb-3 flex items-center">
             <div class="me-2 h-2.5 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
-              <div class={cn(bar(), (theme as ScoreRatingTheme)?.bar)} style="width: {rating * 10}%"></div>
+              <div class={bar({ class: clsx((theme as ScoreRatingTheme)?.bar) })} style="width: {rating * 10}%"></div>
             </div>
             <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
           </dd>
@@ -55,7 +55,7 @@
           </dt>
           <dd class="mb-3 flex items-center">
             <div class="me-2 h-2.5 w-full rounded-sm bg-gray-200 dark:bg-gray-700">
-              <div class={cn(bar(), (theme as ScoreRatingTheme)?.bar)} style="width: {rating * 10}%"></div>
+              <div class={bar({ class: clsx((theme as ScoreRatingTheme)?.bar) })} style="width: {rating * 10}%"></div>
             </div>
             <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
           </dd>
@@ -69,7 +69,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1314)
+[ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1300)
 ## Props
 @prop ratings
 @prop ratings2

package/dist/rating/ScoreRating.svelte.d.ts

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

package/dist/rating/Star.svelte

@@ -35,7 +35,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1311)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#F5CA14"

package/dist/rating/Star.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1311)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#F5CA14"

package/dist/rating/Thumbup.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1311)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#00b500"

package/dist/rating/Thumbup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1325)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1311)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#00b500"

package/dist/rating/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 export declare const advancedRating: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -48,7 +49,7 @@ export declare const advancedRating: import("tailwind-variants").TVReturnType<{
     span2: string;
 }, undefined, unknown, unknown, undefined>>;
 export type AdvancedRatingSlots = keyof typeof advancedRating.slots;
-export type AdvancedRatingTheme = Partial<Record<AdvancedRatingSlots, string>>;
+export type AdvancedRatingTheme = Partial<Record<AdvancedRatingSlots, ClassValue>>;
 export declare const rating: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -81,7 +82,7 @@ export declare const rating: import("tailwind-variants").TVReturnType<{
     p: string;
 }, undefined, unknown, unknown, undefined>>;
 export type RatingSlots = keyof typeof rating.slots;
-export type RatingTheme = Partial<Record<RatingSlots, string>>;
+export type RatingTheme = Partial<Record<RatingSlots, ClassValue>>;
 export declare const review: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -144,7 +145,7 @@ export declare const review: import("tailwind-variants").TVReturnType<{
     li: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ReviewSlots = keyof typeof review.slots;
-export type ReviewTheme = Partial<Record<ReviewSlots, string>>;
+export type ReviewTheme = Partial<Record<ReviewSlots, ClassValue>>;
 export declare const scoreRating: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -201,4 +202,4 @@ export declare const scoreRating: import("tailwind-variants").TVReturnType<{
     bar: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ScoreRatingSlots = keyof typeof scoreRating.slots;
-export type ScoreRatingTheme = Partial<Record<ScoreRatingSlots, string>>;
+export type ScoreRatingTheme = Partial<Record<ScoreRatingSlots, ClassValue>>;

package/dist/sidebar/Sidebar.svelte

@@ -5,7 +5,6 @@
   import { sineIn } from "svelte/easing";
   import { sidebar, type SidebarTheme } from ".";
   import { trapFocus, type SidebarProps, type SidebarCtxType } from "..";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
 
@@ -39,10 +38,10 @@
       return closeSidebar;
     },
     get activeClass() {
-      return cn(active(), clsx(activeClass), (theme as SidebarTheme)?.active);
+      return active({ class: clsx((theme as SidebarTheme)?.active, activeClass) });
     },
     get nonActiveClass() {
-      return cn(nonactive(), clsx(nonActiveClass), (theme as SidebarTheme)?.nonactive);
+      return nonactive({ class: clsx((theme as SidebarTheme)?.nonactive, nonActiveClass) });
     },
     isSingle
   };
@@ -63,24 +62,24 @@
   {#if isOpen || isLargeScreen}
     {#if isOpen && !alwaysOpen}
       {#if backdrop && activateClickOutside}
-        <div role="presentation" class={cn(backdropCls(), clsx(backdropClass), (theme as SidebarTheme)?.backdrop)} onclick={closeSidebar}></div>
+        <div role="presentation" class={backdropCls({ class: clsx((theme as SidebarTheme)?.backdrop, backdropClass) })} onclick={closeSidebar}></div>
       {:else if backdrop && !activateClickOutside}
-        <div role="presentation" class={cn(backdropCls(), clsx(backdropClass), (theme as SidebarTheme)?.backdrop)}></div>
+        <div role="presentation" class={backdropCls({ class: clsx((theme as SidebarTheme)?.backdrop, backdropClass) })}></div>
       {:else if !backdrop && activateClickOutside}
         <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full" onclick={closeSidebar}></div>
       {:else if !backdrop && !activateClickOutside}
         <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full"></div>
       {/if}
     {/if}
-    <aside use:trapFocus={!isLargeScreen && isOpen && !alwaysOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} transition:transition={!alwaysOpen ? transitionParams : undefined} {...restProps} class={cn(base(), clsx(clsx(className)), (theme as SidebarTheme)?.base)} aria-label={ariaLabel}>
-      <div class={cn(div(), clsx(divClass), (theme as SidebarTheme)?.base)}>
+    <aside use:trapFocus={!isLargeScreen && isOpen && !alwaysOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} transition:transition={!alwaysOpen ? transitionParams : undefined} {...restProps} class={base({ class: clsx((theme as SidebarTheme)?.base, className) })} aria-label={ariaLabel}>
+      <div class={div({ class: clsx((theme as SidebarTheme)?.base, divClass) })}>
         {@render children()}
       </div>
     </aside>
   {/if}
 {:else}
-  <aside use:trapFocus={isOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} {...restProps} class={cn(base(), clsx(clsx(className)), (theme as SidebarTheme)?.base)} aria-label={ariaLabel}>
-    <div class={cn(div(), clsx(divClass), (theme as SidebarTheme)?.base)}>
+  <aside use:trapFocus={isOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} {...restProps} class={base({ class: clsx((theme as SidebarTheme)?.base, className) })} aria-label={ariaLabel}>
+    <div class={div({ class: clsx((theme as SidebarTheme)?.base, divClass) })}>
       {@render children()}
     </div>
   </aside>
@@ -90,7 +89,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1348)
+[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1334)
 ## Props
 @prop children
 @prop isOpen = false

package/dist/sidebar/Sidebar.svelte.d.ts

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

package/dist/sidebar/SidebarBrand.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { sidebarBrand, type SidebarBrandTheme } from ".";
   import type { SidebarBrandProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, site, imgClass, spanClass, class: className, ...restProps }: SidebarBrandProps = $props();
@@ -12,10 +11,10 @@
   const { base, img, span } = $derived(sidebarBrand());
 </script>
 
-<a {...restProps} href={site?.href ? site.href : "/"} class={cn(base(), clsx(className), (theme as SidebarBrandTheme)?.base)}>
+<a {...restProps} href={site?.href ? site.href : "/"} class={base({ class: clsx((theme as SidebarBrandTheme)?.base, className) })}>
   {#if site}
-    <img src={site.img} class={cn(img(), clsx(imgClass), (theme as SidebarBrandTheme)?.img)} alt={site.name} />
-    <span class={cn(span(), clsx(spanClass), (theme as SidebarBrandTheme)?.span)}>{site.name}</span>
+    <img src={site.img} class={img({ class: clsx((theme as SidebarBrandTheme)?.img, imgClass) })} alt={site.name} />
+    <span class={span({ class: clsx((theme as SidebarBrandTheme)?.span, spanClass) })}>{site.name}</span>
   {:else if children}
     {@render children()}
   {/if}
@@ -25,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1384)
+[SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1370)
 ## Props
 @prop children
 @prop site

package/dist/sidebar/SidebarBrand.svelte.d.ts

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

package/dist/sidebar/SidebarButton.svelte

@@ -2,14 +2,13 @@
   import clsx from "clsx";
   import { sidebarButton } from ".";
   import type { SidebarButtonProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { breakpoint = "md", class: className, ...restProps }: SidebarButtonProps = $props();
 
   const theme = getTheme("sidebarButton");
 
-  const base = $derived(cn(sidebarButton({ breakpoint }), clsx(className), theme));
+  const base = $derived(sidebarButton({ breakpoint, class: clsx(theme, className) }));
 </script>
 
 <button {...restProps} type="button" class={base}>
@@ -23,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1367)
+[SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1353)
 ## Props
 @prop breakpoint = "md"
 @prop class: className

package/dist/sidebar/SidebarButton.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SidebarButtonProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1367)
+ * [SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1353)
  * ## Props
  * @prop breakpoint = "md"
  * @prop class: className

package/dist/sidebar/SidebarCta.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { sidebarCta, type SidebarCtaTheme } from ".";
   import type { SidebarCtaProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, icon, divClass, spanClass, label, class: className, ...restProps }: SidebarCtaProps = $props();
@@ -12,9 +11,9 @@
   const { base, div, span } = $derived(sidebarCta());
 </script>
 
-<div {...restProps} id="dropdown-cta" class={cn(base(), clsx(className), (theme as SidebarCtaTheme)?.base)} role="alert">
-  <div class={cn(div(), clsx(divClass), (theme as SidebarCtaTheme)?.div)}>
-    <span class={cn(span(), clsx(spanClass), (theme as SidebarCtaTheme)?.span)}>{label}</span>
+<div {...restProps} id="dropdown-cta" class={base({ class: clsx((theme as SidebarCtaTheme)?.base, className) })} role="alert">
+  <div class={div({ class: clsx((theme as SidebarCtaTheme)?.div, divClass) })}>
+    <span class={span({ class: clsx((theme as SidebarCtaTheme)?.span, spanClass) })}>{label}</span>
     {#if icon}
       {@render icon()}
     {/if}
@@ -26,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1371)
+[SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1357)
 ## Props
 @prop children
 @prop icon

package/dist/sidebar/SidebarCta.svelte.d.ts

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

package/dist/sidebar/SidebarDropdownWrapper.svelte

@@ -6,7 +6,6 @@
   import { sidebarDropdownWrapper, type SidebarDropdownWrapperTheme } from ".";
   import type { SidebarDropdownWrapperProps, ParamsType } from "../types";
   import clsx from "clsx";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   type SidebarContext = {
@@ -52,30 +51,30 @@
   }
 </script>
 
-<li class={cn(base(), clsx(className), (theme as SidebarDropdownWrapperTheme)?.base)}>
-  <button {...restProps} onclick={handleDropdown} type="button" class={cn(btn(), clsx(btnClass), (theme as SidebarDropdownWrapperTheme)?.btn)} aria-controls="sidebar-dropdown">
+<li class={base({ class: clsx((theme as SidebarDropdownWrapperTheme)?.base, className) })}>
+  <button {...restProps} onclick={handleDropdown} type="button" class={btn({ class: clsx((theme as SidebarDropdownWrapperTheme)?.btn, btnClass) })} aria-controls="sidebar-dropdown">
     {#if icon}
       {@render icon()}
     {/if}
-    <span class={cn(span(), clsx(spanClass), (theme as SidebarDropdownWrapperTheme)?.span)}>{label}</span>
+    <span class={span({ class: clsx((theme as SidebarDropdownWrapperTheme)?.span, spanClass) })}>{label}</span>
     {#if isOpen}
       {#if arrowup}
         {@render arrowup()}
       {:else}
-        <svg class={cn(svg(), clsx(svgClass), (theme as SidebarDropdownWrapperTheme)?.svg)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <svg class={svg({ class: clsx((theme as SidebarDropdownWrapperTheme)?.svg, svgClass) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
         </svg>
       {/if}
     {:else if arrowdown}
       {@render arrowdown()}
     {:else}
-      <svg class={cn(svg(), clsx(svgClass), (theme as SidebarDropdownWrapperTheme)?.svg)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+      <svg class={svg({ class: clsx((theme as SidebarDropdownWrapperTheme)?.svg, svgClass) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
       </svg>
     {/if}
   </button>
   {#if isOpen}
-    <ul class={cn(ul(), clsx(ulClass), (theme as SidebarDropdownWrapperTheme)?.ul)} transition:transition={params as ParamsType}>
+    <ul class={ul({ class: clsx((theme as SidebarDropdownWrapperTheme)?.ul, ulClass) })} transition:transition={params as ParamsType}>
       {@render children()}
     </ul>
   {/if}
@@ -85,7 +84,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1390)
+[SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1376)
 ## Props
 @prop children
 @prop arrowup

package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts

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

package/dist/sidebar/SidebarGroup.svelte

@@ -13,7 +13,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1407)
+[SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1393)
 ## Props
 @prop children
 @prop class: className = "space-y-2"

package/dist/sidebar/SidebarGroup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SidebarGroupProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1407)
+ * [SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1393)
  * ## Props
  * @prop children
  * @prop class: className = "space-y-2"

package/dist/sidebar/SidebarItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { type SidebarCtxType, type SidebarItemProps, cn } from "..";
+  import clsx from "clsx";
+  import { type SidebarCtxType, type SidebarItemProps } from "..";
 
   let { icon, subtext, href, label, spanClass = "ms-3", activeClass, nonActiveClass, aClass, active, class: className, ...restProps }: SidebarItemProps = $props();
 
@@ -22,12 +23,12 @@
   let aCls = $derived((activeItem ?? sidebarUrl === href) ? (activeClass ?? context.activeClass) : (nonActiveClass ?? context.nonActiveClass));
 </script>
 
-<li class={cn(className)}>
-  <a onclick={context.closeSidebar} {...restProps} {href} aria-current={(activeItem ?? sidebarUrl === href) ? "page" : undefined} class={cn(aCls, aClass)}>
+<li class={clsx(className)}>
+  <a onclick={context.closeSidebar} {...restProps} {href} aria-current={(activeItem ?? sidebarUrl === href) ? "page" : undefined} class={clsx(aCls, aClass)}>
     {#if icon}
       {@render icon()}
     {/if}
-    <span class={cn(spanClass)}>{label}</span>
+    <span class={clsx(spanClass)}>{label}</span>
     {#if subtext}
       {@render subtext()}
     {/if}
@@ -38,7 +39,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1413)
+[SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1399)
 ## Props
 @prop icon
 @prop subtext

package/dist/sidebar/SidebarItem.svelte.d.ts

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

package/dist/sidebar/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type SidebarVariants = VariantProps<typeof sidebar>;
 export declare const sidebar: import("tailwind-variants").TVReturnType<{
     position: {
@@ -149,7 +150,7 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
     backdrop: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SidebarSlots = keyof typeof sidebar.slots;
-export type SidebarTheme = Partial<Record<SidebarSlots, string>>;
+export type SidebarTheme = Partial<Record<SidebarSlots, ClassValue>>;
 export declare const sidebarButton: import("tailwind-variants").TVReturnType<{
     breakpoint: {
         sm: string;
@@ -175,20 +176,20 @@ export declare const sidebarButton: import("tailwind-variants").TVReturnType<{
         "2xl": string;
     };
 }, undefined, "inline-flex items-center p-0 mt-0 ms-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600", unknown, unknown, undefined>>;
-export type SidebarButtonTheme = string;
+export type SidebarButtonTheme = ClassValue;
 export declare const sidebarCta: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
         };
     };
@@ -199,8 +200,8 @@ export declare const sidebarCta: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            div?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
+            div?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
         };
     };
@@ -214,7 +215,7 @@ export declare const sidebarCta: import("tailwind-variants").TVReturnType<{
     span: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SidebarCtaSlots = keyof typeof sidebarCta.slots;
-export type SidebarCtaTheme = Partial<Record<SidebarCtaSlots, string>>;
+export type SidebarCtaTheme = Partial<Record<SidebarCtaSlots, ClassValue>>;
 export declare const sidebarBrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -253,7 +254,7 @@ export declare const sidebarBrand: import("tailwind-variants").TVReturnType<{
     span: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SidebarBrandSlots = keyof typeof sidebarBrand.slots;
-export type SidebarBrandTheme = Partial<Record<SidebarBrandSlots, string>>;
+export type SidebarBrandTheme = Partial<Record<SidebarBrandSlots, ClassValue>>;
 export declare const sidebarDropdownWrapper: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -304,4 +305,4 @@ export declare const sidebarDropdownWrapper: import("tailwind-variants").TVRetur
     ul: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SidebarDropdownWrapperSlots = keyof typeof sidebarDropdownWrapper.slots;
-export type SidebarDropdownWrapperTheme = Partial<Record<SidebarDropdownWrapperSlots, string>>;
+export type SidebarDropdownWrapperTheme = Partial<Record<SidebarDropdownWrapperSlots, ClassValue>>;

package/dist/skeleton/CardPlaceholder.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { cardPlaceholder, type CardPlaceholderTheme } from ".";
   import type { CardPlaceholderProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { size = "sm", class: className, ...restProps }: CardPlaceholderProps = $props();
@@ -12,22 +11,22 @@
   const { base, imageArea, imageIcon, line, footerArea } = $derived(cardPlaceholder({ size }));
 </script>
 
-<div role="status" {...restProps} class={cn(base(), clsx(className), (theme as CardPlaceholderTheme)?.base)}>
-  <div class={cn(imageArea(), (theme as CardPlaceholderTheme)?.imageArea)}>
-    <svg width="48" height="48" class={cn(imageIcon(), (theme as CardPlaceholderTheme)?.imageIcon)} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512">
+<div role="status" {...restProps} class={base({ class: clsx((theme as CardPlaceholderTheme)?.base, className) })}>
+  <div class={imageArea({ class: clsx((theme as CardPlaceholderTheme)?.imageArea) })}>
+    <svg width="48" height="48" class={imageIcon({ class: clsx((theme as CardPlaceholderTheme)?.imageIcon) })} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512">
       <path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"></path>
     </svg>
   </div>
-  <div class={cn(line({ class: "mb-4 h-2.5 w-1/2" }), (theme as CardPlaceholderTheme)?.line)}></div>
-  <div class={cn(line({ class: "mb-2.5 h-2" }), (theme as CardPlaceholderTheme)?.line)}></div>
-  <div class={cn(line({ class: "mb-2.5 h-2" }), (theme as CardPlaceholderTheme)?.line)}></div>
-  <div class={cn(line({ class: "h-2" }), (theme as CardPlaceholderTheme)?.line)}></div>
-  <div class={cn(footerArea(), (theme as CardPlaceholderTheme)?.footerArea)}>
-    <svg class={cn(line({ class: "h-14 w-14" }), (theme as CardPlaceholderTheme)?.line)} aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <div class={line({ class: clsx("mb-4 h-2.5 w-1/2", (theme as CardPlaceholderTheme)?.line) })}></div>
+  <div class={line({ class: clsx("mb-2.5 h-2", (theme as CardPlaceholderTheme)?.line) })}></div>
+  <div class={line({ class: clsx("mb-2.5 h-2", (theme as CardPlaceholderTheme)?.line) })}></div>
+  <div class={line({ class: clsx("h-2", (theme as CardPlaceholderTheme)?.line) })}></div>
+  <div class={footerArea({ class: clsx((theme as CardPlaceholderTheme)?.footerArea) })}>
+    <svg class={line({ class: clsx("h-14 w-14", (theme as CardPlaceholderTheme)?.line) })} aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
     </svg>
-    <div class={cn(line({ class: "mb-2 h-2.5 w-32" }), (theme as CardPlaceholderTheme)?.line)}></div>
-    <div class={cn(line({ class: "mb-2 h-2 w-32" }), (theme as CardPlaceholderTheme)?.line)}></div>
+    <div class={line({ class: clsx("mb-2 h-2.5 w-32", (theme as CardPlaceholderTheme)?.line) })}></div>
+    <div class={line({ class: clsx("mb-2 h-2 w-32", (theme as CardPlaceholderTheme)?.line) })}></div>
   </div>
   <span class="sr-only">Loading...</span>
 </div>
@@ -36,7 +35,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1425)
+[CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1411)
 ## Props
 @prop size = "sm"
 @prop class: className

package/dist/skeleton/CardPlaceholder.svelte.d.ts

@@ -2,7 +2,7 @@ import type { CardPlaceholderProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1425)
+ * [CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1411)
  * ## Props
  * @prop size = "sm"
  * @prop class: className