flowbite-svelte 1.4.3 → 1.5.1

package/dist/progress/Progressradial.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { cubicOut } from "svelte/easing";
-  import { twMerge } from "tailwind-merge";
-  import { Tween } from "svelte/motion";
   import { progressradial } from "./theme";
   import type { ProgressradialProps } from "../types";
+  import clsx from "clsx";
+  import { cubicOut } from "svelte/easing";
+  import { Tween } from "svelte/motion";
 
-  let { progress = 45, radius = 42, startingPosition = "top", precision = 0, tweenDuration = 400, animate = false, size = "h-24 w-24", thickness = 4, labelInside = false, labelOutside = "", easing = cubicOut, color = "primary", labelInsideClass, outsideSpanClass, outsideProgressClass, labelOutsideDivClass, divClass, ...restProps }: ProgressradialProps = $props();
+  let { progress = 45, radius = 42, startingPosition = "top", precision = 0, tweenDuration = 400, animate = false, size = "h-24 w-24", thickness = 4, labelInside = false, labelOutside = "", easing = cubicOut, color = "primary", class: className, classes, ...restProps }: ProgressradialProps = $props();
 
   const _progress = new Tween(0, {
     duration: animate ? tweenDuration : 0,
@@ -35,23 +35,23 @@
 
 <div class="flex flex-col items-center">
   {#if labelOutside}
-    <div class={outsideDiv({ class: labelOutsideDivClass })}>
-      <span class={outsideSpan({ class: outsideSpanClass })}>{labelOutside}</span>
-      <span class={outsideProgress({ class: outsideProgressClass })}>{formattedProgress}%</span>
+    <div class={outsideDiv({ class: clsx(classes?.outsideDiv) })}>
+      <span class={outsideSpan({ class: clsx(classes?.outsideSpan) })}>{labelOutside}</span>
+      <span class={outsideProgress({ class: clsx(classes?.outsideProgress) })}>{formattedProgress}%</span>
     </div>
   {/if}
 
-  <div {...restProps} class={twMerge(base({ class: divClass }), size)}>
+  <div {...restProps} class={base({ class: clsx(size, classes?.base, className) })}>
     <svg viewBox="0 0 100 100" class="h-full w-full" style="transform: rotate({rotationAngle}deg)">
       <!-- Background circle -->
-      <circle cx="50" cy="50" r={radius} class={circleBackground()} fill="none" stroke-width={thickness} />
+      <circle cx="50" cy="50" r={radius} class={circleBackground({ class: clsx(classes?.circleBackground) })} fill="none" stroke-width={thickness} />
 
       <!-- Foreground circle (progress indicator) -->
-      <circle cx="50" cy="50" r={radius} class={circleForeground()} fill="none" stroke-width={thickness} stroke-dasharray={circumference} stroke-dashoffset={strokeDashoffset} stroke-linecap="round" />
+      <circle cx="50" cy="50" r={radius} class={circleForeground({ class: clsx(classes?.circleForeground) })} fill="none" stroke-width={thickness} stroke-dasharray={circumference} stroke-dashoffset={strokeDashoffset} stroke-linecap="round" />
     </svg>
 
     {#if labelInside}
-      <div class={labelInsideDiv()}>
+      <div class={labelInsideDiv({ class: clsx(classes?.labelInsideDiv) })}>
         {formattedProgress}%
       </div>
     {/if}
@@ -62,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1201)
+[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1171)
 ## Props
 @prop progress = 45
 @prop radius = 42
@@ -76,10 +76,7 @@
 @prop labelOutside = ""
 @prop easing = cubicOut
 @prop color = "primary"
-@prop labelInsideClass
-@prop outsideSpanClass
-@prop outsideProgressClass
-@prop labelOutsideDivClass
-@prop divClass
+@prop class: className
+@prop classes
 @prop ...restProps
 -->

package/dist/progress/Progressradial.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ProgressradialProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1201)
+ * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1171)
  * ## Props
  * @prop progress = 45
  * @prop radius = 42
@@ -16,11 +16,8 @@ import type { ProgressradialProps } from "../types";
  * @prop labelOutside = ""
  * @prop easing = cubicOut
  * @prop color = "primary"
- * @prop labelInsideClass
- * @prop outsideSpanClass
- * @prop outsideProgressClass
- * @prop labelOutsideDivClass
- * @prop divClass
+ * @prop class: className
+ * @prop classes
  * @prop ...restProps
  */
 declare const Progressradial: import("svelte").Component<ProgressradialProps, {}, "">;

package/dist/progress/theme.d.ts

@@ -1,3 +1,11 @@
+import type { ClassValue } from "svelte/elements";
+import { type VariantProps } from "tailwind-variants";
+export type ProgressbarClasses = Partial<{
+    [K in keyof (typeof progressbar)["slots"]]: ClassValue;
+}>;
+export type ProgressbarVariants = VariantProps<typeof progressbar> & {
+    classes?: ProgressbarClasses;
+};
 export declare const progressbar: import("tailwind-variants").TVReturnType<{
     color: {
         primary: {
@@ -281,6 +289,12 @@ export declare const progressbar: import("tailwind-variants").TVReturnType<{
     oustsideSpan: string;
     outsideProgress: string;
 }, undefined, unknown, unknown, undefined>>;
+export type ProgressradialClasses = Partial<{
+    [K in keyof (typeof progressradial)["slots"]]: ClassValue;
+}>;
+export type ProgressradialVariants = VariantProps<typeof progressradial> & {
+    classes?: ProgressradialClasses;
+};
 export declare const progressradial: import("tailwind-variants").TVReturnType<{
     color: {
         primary: {

package/dist/rating/AdvancedRating.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import clsx from "clsx";
   import { advancedrating } from ".";
   import type { AdvancedRatingProps } from "../types";
 
@@ -14,12 +16,12 @@
   {@render globalText()}
 {/if}
 {#each ratings as { label, rating }}
-  <div class={base({ class: divClass })}>
-    <span class={span({ class: spanClass })}>{label}</span>
-    <div class={div2({ class: div2Class })}>
-      <div class={div3({ class: div3Class })} style="width: {rating}%"></div>
+  <div class={twMerge(base(), clsx(divClass))}>
+    <span class={twMerge(span(), clsx(spanClass))}>{label}</span>
+    <div class={twMerge(div2(), clsx(div2Class))}>
+      <div class={twMerge(div3(), clsx(div3Class))} style="width: {rating}%"></div>
     </div>
-    <span class={span2({ class: span2Class })}>{rating}{unit}</span>
+    <span class={twMerge(span2(), clsx(span2Class))}>{rating}{unit}</span>
   </div>
 {/each}
 
@@ -27,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1225)
+[AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1188)
 ## Props
 @prop rating
 @prop globalText

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

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

package/dist/rating/CustomIcon.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import clsx from "clsx";
   import type { RatingIconProps } from "../types";
 
   let { fillPercent = 100, fillColor = "#00ff00", strokeColor = "#00ff00", size = 24, ariaLabel = "custom icon", iconIndex = 0, groupId = "custom", role = "img", svgClass, pathd = "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z", ...restProps }: RatingIconProps = $props();
@@ -6,7 +7,7 @@
   const uniqueId = `${groupId}-${iconIndex}`;
 </script>
 
-<svg width={size} height={size} class={svgClass} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5">
+<svg width={size} height={size} class={clsx(svgClass)} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5">
   <defs>
     <linearGradient id={uniqueId} x1="0%" y1="0%" x2="100%" y2="0%">
       {#if fillPercent !== 100}
@@ -28,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1311)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1274)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#00ff00"

package/dist/rating/CustomIcon.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#L1311)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1274)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#00ff00"

package/dist/rating/Heart.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import clsx from "clsx";
   import type { RatingIconProps } from "../types";
 
   let { fillPercent = 100, fillColor = "#ff0000", strokeColor = "#ff0000", size = 24, ariaLabel = "star", iconIndex = 0, groupId = "star", role = "img", svgClass, ...restProps }: RatingIconProps = $props();
@@ -6,7 +7,7 @@
   const uniqueId = `${groupId}-${iconIndex}`;
 </script>
 
-<svg width={size} height={size} class={svgClass} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
+<svg width={size} height={size} class={clsx(svgClass)} {...restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
   <defs>
     <linearGradient id={uniqueId}>
       {#if fillPercent !== 100}
@@ -27,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#L1311)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1274)
 ## Props
 @prop fillPercent = 100
 @prop fillColor = "#ff0000"

package/dist/rating/Heart.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#L1311)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1274)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#ff0000"

package/dist/rating/Rating.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+  import clsx from "clsx";
   import Star from "./Star.svelte";
   import { rating as ratingVariants } from ".";
   import type { RatingProps } from "../types";
-  import clsx from "clsx";
 
-  let { children, text, class: divClass, size = 24, total = 5, rating = 4, icon: Icon = Star, count = false, pClass, ...restProps }: RatingProps = $props();
+  let { children, text, class: className, size = 24, total = 5, rating = 4, icon: Icon = Star, count = false, pClass, ...restProps }: RatingProps = $props();
 
   const { base, p } = $derived(ratingVariants());
   const ratingGroupId = crypto.randomUUID();
@@ -14,10 +14,10 @@
   let grayStars: number = total - (fullStars + Math.ceil(rateDiffence));
 </script>
 
-<div class={base({ class: clsx(divClass) })} {...restProps}>
+<div {...restProps} class={base({ class: clsx(className) })}>
   {#if count && children}
     <Icon fillPercent={100} {size} iconIndex={0} groupId={ratingGroupId} />
-    <p class={p({ class: pClass })}>{rating}</p>
+    <p class={p({ class: clsx(pClass) })}>{rating}</p>
     {@render children()}
   {:else}
     <!-- eslint-disable @typescript-eslint/no-unused-vars-->
@@ -41,11 +41,11 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1237)
+[RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1200)
 ## Props
 @prop children
 @prop text
-@prop class: divClass
+@prop class: className
 @prop size = 24
 @prop total = 5
 @prop rating = 4

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

@@ -2,11 +2,11 @@ import type { RatingProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1237)
+ * [RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1200)
  * ## Props
  * @prop children
  * @prop text
- * @prop class: divClass
+ * @prop class: className
  * @prop size = 24
  * @prop total = 5
  * @prop rating = 4

package/dist/rating/RatingComment.svelte

@@ -63,7 +63,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1248)
+[RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1211)
 ## Props
 @prop children
 @prop evaluation

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

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

package/dist/rating/Review.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { twMerge } from "tailwind-merge";
+  import clsx from "clsx";
   import { review as reviewVariants } from ".";
   import type { ReviewProps } from "../types";
 
@@ -9,15 +10,15 @@
 </script>
 
 {#if review}
-  <article class={article({ class: articleClass })}>
+  <article class={twMerge(article(), clsx(articleClass))}>
     <div>
-      <div class={div({ class: divClass })}>
-        <img class={img({ class: imgClass })} src={review.imgSrc} alt={review.imgAlt} />
-        <div class={div2({ class: div2Class })}>
+      <div class={twMerge(div(), clsx(divClass))}>
+        <img class={twMerge(img(), clsx(imgClass))} src={review.imgSrc} alt={review.imgAlt} />
+        <div class={twMerge(div2(), clsx(div2Class))}>
           <p>{review.name}</p>
           {#if review.address}
             {#if address}
-              <div class={div3({ class: div3Class })}>
+              <div class={twMerge(div3(), clsx(div3Class))}>
                 {@render address()}
               </div>
             {/if}
@@ -25,23 +26,23 @@
         </div>
       </div>
       {#if review.item1 || review.item2 || review.item3}
-        <ul class={ul({ class: ulClass })}>
+        <ul class={twMerge(ul(), clsx(ulClass))}>
           {#if review.item1}
-            <li class={twMerge(li({ class: liClass }))}>
+            <li class={twMerge(twMerge(li(), clsx(liClass)))}>
               {#if item1}
                 {@render item1()}
               {/if}
             </li>
           {/if}
           {#if review.item2}
-            <li class={liClass}>
+            <li class={clsx(liClass)}>
               {#if item2}
                 {@render item2()}
               {/if}
             </li>
           {/if}
           {#if review.item3}
-            <li class={twMerge(liClass)}>
+            <li class={twMerge(clsx(liClass))}>
               {#if item3}
                 {@render item3()}
               {/if}
@@ -78,7 +79,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1284)
+[ReviewProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1247)
 ## Props
 @prop children
 @prop address

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

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

package/dist/rating/ScoreRating.svelte

@@ -65,7 +65,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1300)
+[ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1263)
 ## 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#L1300)
+ * [ScoreRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1263)
  * ## Props
  * @prop ratings
  * @prop ratings2

package/dist/rating/Star.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import clsx from "clsx";
   import type { RatingIconProps } from "../types";
 
   let { fillPercent = 100, fillColor = "#F5CA14", strokeColor = "#F5CA14", size = 24, ariaLabel = "star", iconIndex = 0, groupId = "star", role = "img", svgClass, ...restProps }: RatingIconProps = $props();
@@ -6,7 +7,7 @@
   const uniqueId = `${groupId}-${iconIndex}`;
 </script>
 
-<svg width={size} height={size} {...restProps} class={svgClass} aria-label={ariaLabel} viewBox="100 100 120 120" {role}>
+<svg width={size} height={size} {...restProps} class={clsx(svgClass)} aria-label={ariaLabel} viewBox="100 100 120 120" {role}>
   <defs>
     <linearGradient id={uniqueId}>
       {#if fillPercent !== 100}
@@ -34,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#L1311)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1274)
 ## 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#L1311)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1274)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#F5CA14"

package/dist/rating/Thumbup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import clsx from "clsx";
   import type { RatingIconProps } from "../types";
 
   let { fillPercent = 100, fillColor = "#00b500", strokeColor = "#00b500", size = 24, ariaLabel = "thumbup", iconIndex = 0, groupId = "star", role = "img", svgClass, ...restProps }: RatingIconProps = $props();
@@ -6,7 +7,7 @@
   const uniqueId = `${groupId}-${iconIndex}`;
 </script>
 
-<svg width={size} height={size} {...restProps} class={svgClass} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
+<svg width={size} height={size} {...restProps} class={clsx(svgClass)} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none">
   <defs>
     <linearGradient id={uniqueId}>
       {#if fillPercent !== 100}
@@ -27,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#L1311)
+[RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1274)
 ## 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#L1311)
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1274)
  * ## Props
  * @prop fillPercent = 100
  * @prop fillColor = "#00b500"

package/dist/rating/theme.d.ts

@@ -83,10 +83,10 @@ export declare const review: import("tailwind-variants").TVReturnType<{
         [key: string]: import("tailwind-variants").ClassValue | {
             div?: import("tailwind-variants").ClassValue;
             img?: import("tailwind-variants").ClassValue;
-            article?: import("tailwind-variants").ClassValue;
             ul?: import("tailwind-variants").ClassValue;
             div2?: import("tailwind-variants").ClassValue;
             div3?: import("tailwind-variants").ClassValue;
+            article?: import("tailwind-variants").ClassValue;
             li?: import("tailwind-variants").ClassValue;
         };
     };
@@ -95,10 +95,10 @@ export declare const review: import("tailwind-variants").TVReturnType<{
         [x: string]: import("tailwind-variants").ClassValue | {
             div?: import("tailwind-variants").ClassValue;
             img?: import("tailwind-variants").ClassValue;
-            article?: import("tailwind-variants").ClassValue;
             ul?: import("tailwind-variants").ClassValue;
             div2?: import("tailwind-variants").ClassValue;
             div3?: import("tailwind-variants").ClassValue;
+            article?: import("tailwind-variants").ClassValue;
             li?: import("tailwind-variants").ClassValue;
         };
     };
@@ -115,10 +115,10 @@ export declare const review: import("tailwind-variants").TVReturnType<{
         [key: string]: import("tailwind-variants").ClassValue | {
             div?: import("tailwind-variants").ClassValue;
             img?: import("tailwind-variants").ClassValue;
-            article?: import("tailwind-variants").ClassValue;
             ul?: import("tailwind-variants").ClassValue;
             div2?: import("tailwind-variants").ClassValue;
             div3?: import("tailwind-variants").ClassValue;
+            article?: import("tailwind-variants").ClassValue;
             li?: import("tailwind-variants").ClassValue;
         };
     };

package/dist/sidebar/Sidebar.svelte

@@ -4,8 +4,9 @@
   import { writable } from "svelte/store";
   import { sineIn } from "svelte/easing";
   import { sidebar } from ".";
-  import clsx from "clsx";
   import { trapFocus, type SidebarProps, type SidebarCtxType } from "..";
+  import { twMerge } from "tailwind-merge";
+  import clsx from "clsx";
 
   let { children, isOpen = false, closeSidebar, isSingle = true, breakpoint = "md", alwaysOpen = false, position = "fixed", activateClickOutside = true, backdrop = true, backdropClass, transition = fly, params, divClass, ariaLabel, nonActiveClass, activeClass, activeUrl = "", class: className, ...restProps }: SidebarProps = $props();
 
@@ -34,10 +35,10 @@
       return closeSidebar;
     },
     get activeClass() {
-      return active({ class: activeClass });
+      return twMerge(active(), clsx(activeClass));
     },
     get nonActiveClass() {
-      return nonactive({ class: nonActiveClass });
+      return twMerge(nonactive(), clsx(nonActiveClass));
     },
     isSingle
   };
@@ -57,17 +58,17 @@
 {#if isOpen || isLargeScreen}
   {#if isOpen && !alwaysOpen}
     {#if backdrop && activateClickOutside}
-      <div role="presentation" class={backdropCls({ class: backdropClass })} onclick={closeSidebar}></div>
+      <div role="presentation" class={twMerge(backdropCls(), clsx(backdropClass))} onclick={closeSidebar}></div>
     {:else if backdrop && !activateClickOutside}
-      <div role="presentation" class={backdropCls({ class: backdropClass })}></div>
+      <div role="presentation" class={twMerge(backdropCls(), clsx(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={base({ class: clsx(className) })} aria-label={ariaLabel}>
-    <div class={div({ class: divClass })}>
+  <aside use:trapFocus={!isLargeScreen && isOpen && !alwaysOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} transition:transition={!alwaysOpen ? transitionParams : undefined} {...restProps} class={twMerge(base(), clsx(clsx(className)))} aria-label={ariaLabel}>
+    <div class={twMerge(div(), clsx(divClass))}>
       {@render children()}
     </div>
   </aside>
@@ -77,7 +78,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1334)
+[SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1297)
 ## 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#L1334)
+ * [SidebarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1297)
  * ## Props
  * @prop children
  * @prop isOpen = false

package/dist/sidebar/SidebarBrand.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { sitebarbrand } from ".";
   import type { SidebarBrandProps } from "../types";
@@ -8,10 +9,10 @@
   const { base, img, span } = $derived(sitebarbrand());
 </script>
 
-<a {...restProps} href={site?.href ? site.href : "/"} class={base({ class: clsx(className) })}>
+<a {...restProps} href={site?.href ? site.href : "/"} class={twMerge(base(), clsx(className))}>
   {#if site}
-    <img src={site.img} class={img({ class: imgClass })} alt={site.name} />
-    <span class={span({ class: spanClass })}>{site.name}</span>
+    <img src={site.img} class={twMerge(img(), clsx(imgClass))} alt={site.name} />
+    <span class={twMerge(span(), clsx(spanClass))}>{site.name}</span>
   {:else if children}
     {@render children()}
   {/if}
@@ -21,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1369)
+[SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1332)
 ## 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#L1369)
+ * [SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1332)
  * ## Props
  * @prop children
  * @prop site

package/dist/sidebar/SidebarButton.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import { twMerge } from "tailwind-merge";
   import clsx from "clsx";
   import { sidebarbutton } from ".";
   import type { SidebarButtonProps } from "../types";
   let { breakpoint = "md", class: className, ...restProps }: SidebarButtonProps = $props();
 
-  const base = $derived(sidebarbutton({ breakpoint, class: clsx(className) }));
+  const base = $derived(twMerge(sidebarbutton({ breakpoint }), clsx(className)));
 </script>
 
 <button {...restProps} type="button" class={base}>
@@ -18,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1352)
+[SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1315)
 ## Props
 @prop breakpoint = "md"
 @prop class: className