flowbite-svelte 1.10.4 → 1.10.6

package/dist/pagination/PaginationNav.svelte

@@ -2,7 +2,7 @@
   import clsx from "clsx";
   import { setContext } from "svelte";
   import { paginationNav, type PaginationNavTheme } from "./theme";
-  import { type PaginationNavProps, PaginationButton, cn } from "..";
+  import { type PaginationNavProps, PaginationButton } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   function paginationRange(start: number, end: number): number[] {
@@ -58,17 +58,17 @@
 
 <nav aria-label={ariaLabel} {...restProps}>
   {#if layout === "table"}
-    <div class={cn(tableDiv(), clsx(tableDivClass), (theme as PaginationNavTheme)?.tableDiv)}>
-      Showing <span class={cn(tableSpan(), clsx(spanClass), (theme as PaginationNavTheme)?.tableSpan)}>{currentPage}</span>
+    <div class={tableDiv({ class: clsx((theme as PaginationNavTheme)?.tableDiv, tableDivClass) })}>
+      Showing <span class={tableSpan({ class: clsx((theme as PaginationNavTheme)?.tableSpan, spanClass) })}>{currentPage}</span>
       of
-      <span class={cn(tableSpan(), clsx(spanClass), (theme as PaginationNavTheme)?.tableSpan)}>{totalPages}</span>
+      <span class={tableSpan({ class: clsx((theme as PaginationNavTheme)?.tableSpan, spanClass) })}>{totalPages}</span>
       Entries
     </div>
   {/if}
 
-  <ul class={cn(base(), clsx(className), (theme as PaginationNavTheme)?.base)}>
+  <ul class={base({ class: clsx((theme as PaginationNavTheme)?.base, className) })}>
     <li {...restProps}>
-      <PaginationButton onclick={goToPreviousPage} disabled={currentPage === 1} class={cn(prevItem(), clsx(prevClass), (theme as PaginationNavTheme)?.prevItem)}>
+      <PaginationButton onclick={goToPreviousPage} disabled={currentPage === 1} class={prevItem({ class: clsx((theme as PaginationNavTheme)?.prevItem, prevClass) })}>
         {#if prevContent}
           {@render prevContent()}
         {:else}
@@ -86,7 +86,7 @@
       {/each}
     {/if}
     <li {...restProps}>
-      <PaginationButton onclick={goToNextPage} disabled={currentPage === totalPages} class={cn(nextItem(), clsx(nextClass), (theme as PaginationNavTheme)?.nextItem)}>
+      <PaginationButton onclick={goToNextPage} disabled={currentPage === totalPages} class={nextItem({ class: clsx((theme as PaginationNavTheme)?.nextItem, nextClass) })}>
         {#if nextContent}
           {@render nextContent()}
         {:else}

package/dist/pagination/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type PaginationVariants = VariantProps<typeof pagination>;
 export declare const paginationNav: import("tailwind-variants").TVReturnType<{
     size: {
@@ -77,7 +78,7 @@ export declare const paginationNav: import("tailwind-variants").TVReturnType<{
     nextItem: string;
 }, undefined, unknown, unknown, undefined>>;
 export type PaginationNavSlots = keyof typeof paginationNav.slots;
-export type PaginationNavTheme = Partial<Record<PaginationNavSlots, string>>;
+export type PaginationNavTheme = Partial<Record<PaginationNavSlots, ClassValue>>;
 export type PaginationItemVariants = VariantProps<typeof paginationItem>;
 export declare const paginationButton: import("tailwind-variants").TVReturnType<{
     size: {
@@ -143,7 +144,7 @@ export declare const paginationButton: import("tailwind-variants").TVReturnType<
         false: string;
     };
 }, undefined, "flex items-center font-medium", unknown, unknown, undefined>>;
-export type PaginationButtonTheme = string;
+export type PaginationButtonTheme = ClassValue;
 export declare const paginationItem: import("tailwind-variants").TVReturnType<{
     size: {
         default: string;
@@ -196,7 +197,7 @@ export declare const paginationItem: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "flex items-center font-medium", unknown, unknown, undefined>>;
-export type PaginationItemTheme = string;
+export type PaginationItemTheme = ClassValue;
 export declare const pagination: import("tailwind-variants").TVReturnType<{
     table: {
         true: string;
@@ -225,4 +226,4 @@ export declare const pagination: import("tailwind-variants").TVReturnType<{
         large: string;
     };
 }, undefined, "inline-flex -space-x-px rtl:space-x-reverse items-center", unknown, unknown, undefined>>;
-export type PaginationTheme = string;
+export type PaginationTheme = ClassValue;

package/dist/popover/Popover.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import clsx from "clsx";
   import Popper from "../utils/Popper.svelte";
   import { popover, type PopoverTheme } from "./theme";
@@ -13,15 +12,15 @@
   let { base, title, h3, content } = $derived(popover({ color }));
 </script>
 
-<Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={cn(base(), clsx(className), (theme as PopoverTheme)?.base)}>
+<Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={base({ class: clsx((theme as PopoverTheme)?.base, className) })}>
   {#if typeof titleSlot === "string"}
-    <div class={cn(title(), (theme as PopoverTheme)?.title)}>
-      <h3 class={cn(h3(), (theme as PopoverTheme)?.h3)}>{titleSlot}</h3>
+    <div class={title({ class: clsx((theme as PopoverTheme)?.title) })}>
+      <h3 class={h3({ class: clsx((theme as PopoverTheme)?.h3) })}>{titleSlot}</h3>
     </div>
   {:else if titleSlot}
     {@render titleSlot()}
   {/if}
-  <div class={cn(content(), clsx(defaultClass), (theme as PopoverTheme)?.content)}>
+  <div class={content({ class: clsx((theme as PopoverTheme)?.content, defaultClass) })}>
     {@render children()}
   </div>
 </Popper>

package/dist/popover/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type PopoverVariants = VariantProps<typeof popover>;
 export declare const popover: import("tailwind-variants").TVReturnType<{
     color: {
@@ -278,4 +279,4 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
     h3: string;
 }, undefined, unknown, unknown, undefined>>;
 export type PopoverSlots = keyof typeof popover.slots;
-export type PopoverTheme = Partial<Record<PopoverSlots, string>>;
+export type PopoverTheme = Partial<Record<PopoverSlots, ClassValue>>;

package/dist/progress/Progressbar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import type { ProgressbarProps } from "../types";
   import clsx from "clsx";
   import { cubicOut } from "svelte/easing";
@@ -28,18 +27,18 @@
 </script>
 
 {#if labelOutside}
-  <div {...restProps} class={cn(outsideDiv({ class: clsx(classes?.outsideDiv) }), (theme as ProgressbarTheme)?.outsideDiv)}>
-    <span class={cn(oustsideSpan({ class: clsx(classes?.oustsideSpan) }), (theme as ProgressbarTheme)?.oustsideSpan)}>{labelOutside}</span>
-    <span class={cn(outsideProgress({ class: clsx(classes?.outsideProgress) }), (theme as ProgressbarTheme)?.outsideProgress)}>{progress}%</span>
+  <div {...restProps} class={outsideDiv({ class: clsx((theme as ProgressbarTheme)?.outsideDiv, classes?.outsideDiv) })}>
+    <span class={oustsideSpan({ class: clsx((theme as ProgressbarTheme)?.oustsideSpan, classes?.oustsideSpan) })}>{labelOutside}</span>
+    <span class={outsideProgress({ class: clsx((theme as ProgressbarTheme)?.outsideProgress, classes?.outsideProgress) })}>{progress}%</span>
   </div>
 {/if}
-<div {...restProps} class={cn(base({ class: clsx(size, classes?.base, className) }), (theme as ProgressbarTheme)?.base)}>
+<div {...restProps} class={base({ class: clsx(size, classes?.base, (theme as ProgressbarTheme)?.base, className) })}>
   {#if labelInside}
-    <div class={cn(labelInsideDiv({ class: clsx(classes?.labelInsideDiv, size) }), (theme as ProgressbarTheme)?.labelInsideDiv)} style="width: {_progress.current}%">
+    <div class={labelInsideDiv({ class: clsx(size, (theme as ProgressbarTheme)?.labelInsideDiv, classes?.labelInsideDiv) })} style="width: {_progress.current}%">
       {_progress.current.toFixed(precision)}%
     </div>
   {:else}
-    <div class={cn(insideDiv({ class: clsx(classes?.labelInsideDiv, size) }), (theme as ProgressbarTheme)?.insideDiv)} style="width: {_progress.current}%"></div>
+    <div class={insideDiv({ class: clsx(size, (theme as ProgressbarTheme)?.insideDiv, classes?.labelInsideDiv) })} style="width: {_progress.current}%"></div>
   {/if}
 </div>
 

package/dist/progress/Progressradial.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { cn } from "..";
   import { progressradial, type ProgressradialTheme } from ".";
   import type { ProgressradialProps } from "../types";
   import clsx from "clsx";
@@ -39,23 +38,23 @@
 
 <div class="flex flex-col items-center">
   {#if labelOutside}
-    <div class={cn(outsideDiv({ class: clsx(classes?.outsideDiv) }), (theme as ProgressradialTheme)?.outsideDiv)}>
-      <span class={cn(outsideSpan({ class: clsx(classes?.outsideSpan) }), (theme as ProgressradialTheme)?.outsideSpan)}>{labelOutside}</span>
-      <span class={cn(outsideProgress({ class: clsx(classes?.outsideProgress) }), (theme as ProgressradialTheme)?.outsideProgress)}>{formattedProgress}%</span>
+    <div class={outsideDiv({ class: clsx((theme as ProgressradialTheme)?.outsideDiv, classes?.outsideDiv) })}>
+      <span class={outsideSpan({ class: clsx((theme as ProgressradialTheme)?.outsideSpan, classes?.outsideSpan) })}>{labelOutside}</span>
+      <span class={outsideProgress({ class: clsx((theme as ProgressradialTheme)?.outsideProgress, classes?.outsideProgress) })}>{formattedProgress}%</span>
     </div>
   {/if}
 
-  <div {...restProps} class={cn(base({ class: clsx(size, classes?.base, className) }), (theme as ProgressradialTheme)?.base)}>
+  <div {...restProps} class={base({ class: clsx(size, (theme as ProgressradialTheme)?.base, 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={cn(circleBackground({ class: clsx(classes?.circleBackground) }), (theme as ProgressradialTheme)?.circleBackground)} fill="none" stroke-width={thickness} />
+      <circle cx="50" cy="50" r={radius} class={circleBackground({ class: clsx((theme as ProgressradialTheme)?.circleBackground, classes?.circleBackground) })} fill="none" stroke-width={thickness} />
 
       <!-- Foreground circle (progress indicator) -->
-      <circle cx="50" cy="50" r={radius} class={cn(circleForeground({ class: clsx(classes?.circleForeground) }), (theme as ProgressradialTheme)?.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((theme as ProgressradialTheme)?.circleForeground, classes?.circleForeground) })} fill="none" stroke-width={thickness} stroke-dasharray={circumference} stroke-dashoffset={strokeDashoffset} stroke-linecap="round" />
     </svg>
 
     {#if labelInside}
-      <div class={cn(labelInsideDiv({ class: clsx(classes?.labelInsideDiv) }), (theme as ProgressradialTheme)?.labelInsideDiv)}>
+      <div class={labelInsideDiv({ class: clsx((theme as ProgressradialTheme)?.labelInsideDiv, classes?.labelInsideDiv) })}>
         {formattedProgress}%
       </div>
     {/if}

package/dist/progress/theme.d.ts

@@ -290,7 +290,7 @@ export declare const progressbar: import("tailwind-variants").TVReturnType<{
     outsideProgress: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ProgressbarSlots = keyof typeof progressbar.slots;
-export type ProgressbarTheme = Partial<Record<ProgressbarSlots, string>>;
+export type ProgressbarTheme = Partial<Record<ProgressbarSlots, ClassValue>>;
 export type ProgressradialClasses = Partial<{
     [K in keyof (typeof progressradial)["slots"]]: ClassValue;
 }>;
@@ -581,4 +581,4 @@ export declare const progressradial: import("tailwind-variants").TVReturnType<{
     outsideProgress: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ProgressradialSlots = keyof typeof progressradial.slots;
-export type ProgressradialTheme = Partial<Record<ProgressradialSlots, string>>;
+export type ProgressradialTheme = Partial<Record<ProgressradialSlots, ClassValue>>;

package/dist/rating/AdvancedRating.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { advancedRating, type AdvancedRatingTheme } from ".";
   import type { AdvancedRatingProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { rating, globalText, ratings, divClass, spanClass, div2Class, div3Class, span2Class, unit }: AdvancedRatingProps = $props();
@@ -19,12 +18,12 @@
   {@render globalText()}
 {/if}
 {#each ratings as { label, rating }}
-  <div class={cn(base(), clsx(divClass), (theme as AdvancedRatingTheme)?.base)}>
-    <span class={cn(span(), clsx(spanClass), (theme as AdvancedRatingTheme)?.span)}>{label}</span>
-    <div class={cn(div2(), clsx(div2Class), (theme as AdvancedRatingTheme)?.div2)}>
-      <div class={cn(div3(), clsx(div3Class), (theme as AdvancedRatingTheme)?.div3)} style="width: {rating}%"></div>
+  <div class={base({ class: clsx((theme as AdvancedRatingTheme)?.base, divClass) })}>
+    <span class={span({ class: clsx((theme as AdvancedRatingTheme)?.span, spanClass) })}>{label}</span>
+    <div class={div2({ class: clsx((theme as AdvancedRatingTheme)?.div2, div2Class) })}>
+      <div class={div3({ class: clsx((theme as AdvancedRatingTheme)?.div3, div3Class) })} style="width: {rating}%"></div>
     </div>
-    <span class={cn(span2(), clsx(span2Class), (theme as AdvancedRatingTheme)?.span2)}>{rating}{unit}</span>
+    <span class={span2({ class: clsx((theme as AdvancedRatingTheme)?.span2, span2Class) })}>{rating}{unit}</span>
   </div>
 {/each}
 

package/dist/rating/Rating.svelte

@@ -3,7 +3,6 @@
   import Star from "./Star.svelte";
   import { rating as ratingVariants, type RatingTheme } from ".";
   import type { RatingProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, text, class: className, size = 24, total = 5, rating = 4, icon: Icon = Star, count = false, pClass, ...restProps }: RatingProps = $props();
@@ -18,10 +17,10 @@
   let grayStars: number = total - (fullStars + Math.ceil(rateDiffence));
 </script>
 
-<div {...restProps} class={cn(base({ class: clsx(className) }), (theme as RatingTheme)?.base)}>
+<div {...restProps} class={base({ class: clsx((theme as RatingTheme)?.base, className) })}>
   {#if count && children}
     <Icon fillPercent={100} {size} iconIndex={0} groupId={ratingGroupId} />
-    <p class={cn(p({ class: clsx(pClass) }), (theme as RatingTheme)?.p)}>{rating}</p>
+    <p class={p({ class: clsx((theme as RatingTheme)?.p, pClass) })}>{rating}</p>
     {@render children()}
   {:else}
     <!-- eslint-disable @typescript-eslint/no-unused-vars-->

package/dist/rating/Review.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { review as reviewVariants, type ReviewTheme } from ".";
   import type { ReviewProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, address, item1, item2, item3, review, articleClass, divClass, div2Class, div3Class, imgClass, ulClass, liClass }: ReviewProps = $props();
@@ -13,15 +12,15 @@
 </script>
 
 {#if review}
-  <article class={cn(article(), clsx(articleClass), (theme as ReviewTheme)?.article)}>
+  <article class={article({ class: clsx((theme as ReviewTheme)?.article, articleClass) })}>
     <div>
-      <div class={cn(div(), clsx(divClass), (theme as ReviewTheme)?.div)}>
-        <img class={cn(img(), clsx(imgClass), (theme as ReviewTheme)?.img)} src={review.imgSrc} alt={review.imgAlt} />
-        <div class={cn(div2(), clsx(div2Class), (theme as ReviewTheme)?.div2)}>
+      <div class={div({ class: clsx((theme as ReviewTheme)?.div, divClass) })}>
+        <img class={img({ class: clsx((theme as ReviewTheme)?.img, imgClass) })} src={review.imgSrc} alt={review.imgAlt} />
+        <div class={div2({ class: clsx((theme as ReviewTheme)?.div2, div2Class) })}>
           <p>{review.name}</p>
           {#if review.address}
             {#if address}
-              <div class={cn(div3(), clsx(div3Class), (theme as ReviewTheme)?.div3)}>
+              <div class={div3({ class: clsx((theme as ReviewTheme)?.div3, div3Class) })}>
                 {@render address()}
               </div>
             {/if}
@@ -29,9 +28,9 @@
         </div>
       </div>
       {#if review.item1 || review.item2 || review.item3}
-        <ul class={cn(ul(), clsx(ulClass), (theme as ReviewTheme)?.ul)}>
+        <ul class={ul({ class: clsx((theme as ReviewTheme)?.ul, ulClass) })}>
           {#if review.item1}
-            <li class={cn(li(), clsx(liClass), (theme as ReviewTheme)?.li)}>
+            <li class={li({ class: clsx((theme as ReviewTheme)?.li, liClass) })}>
               {#if item1}
                 {@render item1()}
               {/if}

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>

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,32 +5,10 @@
   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";
 
-  let {
-    children,
-    isOpen = false, // Controls the *overlay* state on small screens
-    closeSidebar,
-    isSingle = true,
-    breakpoint = "md", // e.g., 'md'
-    alwaysOpen = false, // When true, sidebar is always visible, no hamburger menu
-    position = "fixed",
-    activateClickOutside = true,
-    backdrop = true,
-    backdropClass,
-    transition = fly,
-    params,
-    divClass,
-    ariaLabel,
-    nonActiveClass,
-    activeClass,
-    activeUrl = "",
-    class: className,
-    disableBreakpoints = false, // Key prop for Drawer integration
-    ...restProps
-  }: SidebarProps = $props();
+  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, disableBreakpoints = false, ...restProps }: SidebarProps = $props();
 
   const theme = getTheme("sidebar");
 
@@ -43,15 +21,8 @@
   };
 
   let innerWidth: number = $state(-1);
-  // This derived state is now primarily for trapFocus and transition,
-  // NOT for rendering the main sidebar element in standalone mode.
-  // It determines if the screen size *would* make it "large" if alwaysOpen were applied.
-  let isLargeScreen = $derived(innerWidth >= breakpointValues[breakpoint]);
-
-  // Determine if the sidebar should be "open" based on explicit isOpen or large screen AND alwaysOpen
-  // This state is what should drive the 'hidden' / 'block' classes for the sidebar itself,
-  // which will be passed to tailwind-variants.
-  let shouldBeOpen = $derived(isOpen || (alwaysOpen && isLargeScreen));
+  // isLargeScreen should only be true if not disabling breakpoints and it meets the criteria
+  let isLargeScreen = $derived(disableBreakpoints ? false : alwaysOpen || innerWidth >= breakpointValues[breakpoint]);
 
   const activeUrlStore = writable("");
   setContext("activeUrl", activeUrlStore);
@@ -59,42 +30,27 @@
     activeUrlStore.set(activeUrl);
   });
 
-  // Pass shouldBeOpen to sidebar utility for `isOpen` variant and other relevant styling.
-  // Pass alwaysOpen directly to sidebar utility for the `alwaysOpen` variant.
-  const {
-    base,
-    active,
-    nonactive,
-    div,
-    backdrop: backdropCls
-  } = $derived(
-    sidebar({
-      isOpen: shouldBeOpen, // Now dynamically drives the tv `isOpen` variant
-      breakpoint: alwaysOpen ? undefined : breakpoint, // Apply breakpoint variant ONLY if not alwaysOpen
-      position,
-      backdrop: backdrop && !disableBreakpoints, // Backdrop for standalone sidebar
-      alwaysOpen // Pass alwaysOpen directly
-    })
-  );
+  if (disableBreakpoints) isOpen = true;
+  const { base, active, nonactive, div, backdrop: backdropCls } = $derived(sidebar({ isOpen, breakpoint, position, backdrop, alwaysOpen: alwaysOpen && !disableBreakpoints }));
 
   let sidebarCtx: SidebarCtxType = {
     get closeSidebar() {
       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
   };
 
-  // Transition parameters for the fly effect when opening/closing
   let transitionParams = params ? params : { x: -320, duration: 200, easing: sineIn };
 
   setContext("sidebarContext", sidebarCtx);
 
+  // Handler for Escape key
   const handleEscape = () => {
     closeSidebar?.();
   };
@@ -103,18 +59,27 @@
 <svelte:window bind:innerWidth />
 
 {#if !disableBreakpoints}
-  <aside use:trapFocus={isOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} transition:transition={isOpen && !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)}>
-      {@render children()}
-    </div>
-  </aside>
-
-  {#if isOpen && !alwaysOpen && backdrop}
-    <div role="presentation" class={cn(backdropCls(), clsx(backdropClass), (theme as SidebarTheme)?.backdrop)} onclick={activateClickOutside ? closeSidebar : undefined}></div>
+  {#if isOpen || isLargeScreen}
+    {#if isOpen && !alwaysOpen}
+      {#if backdrop && activateClickOutside}
+        <div role="presentation" class={backdropCls({ class: clsx((theme as SidebarTheme)?.backdrop, backdropClass) })} onclick={closeSidebar}></div>
+      {:else if backdrop && !activateClickOutside}
+        <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={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} transition:transition={isOpen && !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={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>

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}

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}>

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}