flowbite-svelte 1.10.5 → 1.10.6

package/dist/accordion/Accordion.svelte

@@ -2,7 +2,8 @@
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
   import { accordion } from "./";
-  import { type AccordionProps, cn } from "..";
+  import clsx from "clsx";
+  import { type AccordionProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, flush, activeClass, inactiveClass, multiple = false, class: className, transitionType, ...restProps }: AccordionProps = $props();
@@ -18,11 +19,10 @@
 
   setContext("ctx", ctx);
   setContext("ctxTransitionType", transitionType);
-  const base = $derived(cn(accordion({ flush }), className));
-  const finalClass = $derived(cn(base, theme));
+  const base = $derived(accordion({ flush, class: clsx(theme, className) }));
 </script>
 
-<div {...restProps} class={finalClass}>
+<div {...restProps} class={base}>
   {@render children()}
 </div>
 

package/dist/accordion/AccordionItem.svelte

@@ -2,8 +2,9 @@
   import { slide } from "svelte/transition";
   import { getContext } from "svelte";
   import { writable } from "svelte/store";
+  import clsx from "clsx";
   import { accordionItem, type AccordionItemTheme } from ".";
-  import { type AccordionCtxType, type AccordionItemProps, type ParamsType, cn } from "..";
+  import { type AccordionCtxType, type AccordionItemProps, type ParamsType } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transitionType = slide, transitionParams, class: className, headerClass, contentClass }: AccordionItemProps = $props();
@@ -29,11 +30,11 @@
 
   const { base, button, content, active, inactive } = $derived(accordionItem({ flush: ctx.flush, open }));
 
-  let buttonClass = $derived(cn(button(), open && !ctx.flush && (activeClass || ctx.activeClass || active()), !open && !ctx.flush && (inactiveClass || ctx.inactiveClass || inactive()), className));
+  let buttonClass = $derived(clsx(open && !ctx.flush && (activeClass || ctx.activeClass || active()), !open && !ctx.flush && (inactiveClass || ctx.inactiveClass || inactive())));
 </script>
 
-<h2 class={cn(base({ class: headerClass }), (theme as AccordionItemTheme)?.base)}>
-  <button type="button" onclick={handleToggle} class={cn(buttonClass, (theme as AccordionItemTheme)?.button)} aria-expanded={open}>
+<h2 class={base({ class: clsx((theme as AccordionItemTheme)?.base, headerClass) })}>
+  <button type="button" onclick={handleToggle} class={button({ class: clsx(buttonClass, (theme as AccordionItemTheme)?.button, className) })} aria-expanded={open}>
     {#if header}
       {@render header()}
       {#if open}
@@ -58,14 +59,14 @@
 {#if useTransition}
   {#if open && transitionType !== "none"}
     <div transition:transitionType={transitionParams as ParamsType}>
-      <div class={cn(content({ class: contentClass }), (theme as AccordionItemTheme)?.content)}>
+      <div class={content({ class: clsx((theme as AccordionItemTheme)?.content, contentClass) })}>
         {@render children()}
       </div>
     </div>
   {/if}
 {:else}
   <div class={open ? "block" : "hidden"}>
-    <div class={cn(content({ class: contentClass }), (theme as AccordionItemTheme)?.content)}>
+    <div class={content({ class: clsx(contentClass, (theme as AccordionItemTheme)?.content) })}>
       {@render children()}
     </div>
   </div>

package/dist/accordion/theme.d.ts

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

package/dist/alert/Alert.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
   import { alert } from ".";
-  import { type AlertProps, type ParamsType, CloseButton, cn } from "..";
+  import clsx from "clsx";
+  import { type AlertProps, type ParamsType, CloseButton } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, icon, alertStatus = $bindable(true), closeIcon: CloseIcon, color = "primary", rounded = true, border, class: className, dismissable, transition = fade, params, onclick = () => (alertStatus = false), ...restProps }: AlertProps = $props();
@@ -10,17 +11,14 @@
   const theme = getTheme("alert");
 
   let divCls = $derived(
-    cn(
-      alert({
-        color,
-        rounded,
-        border,
-        icon: !!icon,
-        dismissable
-      }),
-      className,
-      theme
-    )
+    alert({
+      color,
+      rounded,
+      border,
+      icon: !!icon,
+      dismissable,
+      class: clsx(theme, className)
+    })
   );
 </script>
 

package/dist/alert/theme.d.ts

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

package/dist/avatar/Avatar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { avatar } from ".";
-  import { type AvatarProps, Indicator, cn } from "..";
+  import clsx from "clsx";
+  import { type AvatarProps, Indicator } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, indicator, src, href, target, cornerStyle = "circular", border = false, stacked = false, dot, class: className, alt, size = "md", onclick, ...restProps }: AvatarProps = $props();
@@ -11,16 +12,13 @@
   dot = dot && { placement: "top-right", color: "gray", size: "lg", ...dot };
 
   let avatarClass = $derived(
-    cn(
-      avatar({
-        cornerStyle,
-        border,
-        stacked,
-        size
-      }),
-      className,
-      theme
-    )
+    avatar({
+      cornerStyle,
+      border,
+      stacked,
+      size,
+      class: clsx(theme, className)
+    })
   );
 </script>
 

package/dist/avatar/theme.d.ts

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

package/dist/badge/Badge.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { badge, type BadgeTheme } from ".";
+  import clsx from "clsx";
   import { fade } from "svelte/transition";
-  import { type ParamsType, type BadgeProps, CloseButton, cn } from "..";
+  import { type ParamsType, type BadgeProps, CloseButton } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, icon, badgeStatus = $bindable(true), color = "primary", large = false, dismissable = false, class: className, border, href, target, rounded, transition = fade, params, aClass, onclose, ...restProps }: BadgeProps = $props();
@@ -18,9 +19,9 @@
 </script>
 
 {#if badgeStatus}
-  <div {...restProps} transition:transition={params as ParamsType} class={cn(base(), className, (theme as BadgeTheme)?.base)}>
+  <div {...restProps} transition:transition={params as ParamsType} class={base({ class: clsx((theme as BadgeTheme)?.base, className) })}>
     {#if href}
-      <a {href} {target} class={cn(linkClass(), aClass, (theme as BadgeTheme)?.linkClass)}>
+      <a {href} {target} class={linkClass({ class: clsx((theme as BadgeTheme)?.linkClass, aClass) })}>
         {@render children()}
       </a>
     {:else}

package/dist/badge/theme.d.ts

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

package/dist/banner/Banner.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
   import { banner, type BannerTheme } from ".";
-  import { type ParamsType, type BannerProps, CloseButton, cn } from "..";
+  import clsx from "clsx";
+  import { type ParamsType, type BannerProps, CloseButton } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, header, open = $bindable(true), dismissable = true, color = "gray", type, class: className, innerClass, transition = fade, params, closeClass, ...restProps }: BannerProps = $props();
@@ -13,15 +14,15 @@
 </script>
 
 {#if open}
-  <div tabindex="-1" class={cn(base(), className, (theme as BannerTheme)?.base)} {...restProps} transition:transition={params as ParamsType}>
-    <div class={cn(insideDiv(), innerClass, (theme as BannerTheme)?.insideDiv)}>
+  <div tabindex="-1" class={base({ class: clsx((theme as BannerTheme)?.base, className) })} {...restProps} transition:transition={params as ParamsType}>
+    <div class={insideDiv({ class: clsx((theme as BannerTheme)?.insideDiv, innerClass) })}>
       {@render children?.()}
     </div>
 
     {#if dismissable}
       <div class="flex items-center justify-end">
         <CloseButton
-          class={cn(dismissableClass(), closeClass, (theme as BannerTheme)?.dismissable)}
+          class={dismissableClass({ class: clsx((theme as BannerTheme)?.dismissable, closeClass) })}
           {color}
           ariaLabel="Remove banner"
           onclick={() => {

package/dist/banner/theme.d.ts

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

package/dist/bottom-navigation/BottomNav.svelte

@@ -2,6 +2,7 @@
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
   import { bottomNav } from ".";
+  import clsx from "clsx";
   import { type BottomNavProps, type BottomNavContextType, cn, type BottomNavTheme } from "..";
   import { getTheme } from "../theme/themeUtils";
 
@@ -24,12 +25,12 @@
   });
 </script>
 
-<div {...restProps} class={cn(outer(), outerClass, (theme as BottomNavTheme)?.outer)}>
+<div {...restProps} class={outer({ class: clsx((theme as BottomNavTheme)?.outer, outerClass) })}>
   {#if header}
     {@render header()}
   {/if}
 
-  <div class={cn(inner(), innerClass, (theme as BottomNavTheme)?.inner)}>
+  <div class={inner({ class: clsx((theme as BottomNavTheme)?.inner, innerClass) })}>
     {@render children()}
   </div>
 </div>

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { bottomNavHeader } from ".";
-  import { type BottomNavHeaderProps, cn, type BottomNavHeaderTheme } from "..";
+  import clsx from "clsx";
+  import { type BottomNavHeaderProps, type BottomNavHeaderTheme } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, outerClass, innerClass, ...restProps }: BottomNavHeaderProps = $props();
@@ -11,8 +12,8 @@
   const { innerDiv, outerDiv } = $derived(bottomNavHeader());
 </script>
 
-<div {...restProps} class={cn(outerDiv(), outerClass, (theme as BottomNavHeaderTheme)?.outerDiv)}>
-  <div class={cn(innerDiv(), innerClass, (theme as BottomNavHeaderTheme)?.innerDiv)} role="group">
+<div {...restProps} class={outerDiv({ class: clsx((theme as BottomNavHeaderTheme)?.outerDiv, outerClass) })}>
+  <div class={innerDiv({ class: clsx((theme as BottomNavHeaderTheme)?.innerDiv, innerClass) })} role="group">
     {@render children()}
   </div>
 </div>

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { bottomNavHeaderItem } from ".";
-  import { type BottomNavHeaderItemProps, cn } from "..";
+  import clsx from "clsx";
+  import { type BottomNavHeaderItemProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { itemName, active, class: className, ...restProps }: BottomNavHeaderItemProps = $props();
@@ -8,10 +9,10 @@
   // Theme context
   const theme = getTheme("bottomNavHeaderItem");
 
-  let base = $derived(bottomNavHeaderItem({ active }));
+  let base = $derived(bottomNavHeaderItem({ active, class: clsx(theme, className) }));
 </script>
 
-<button {...restProps} class={cn(base, className, theme)}>
+<button {...restProps} class={base}>
   {itemName}
 </button>
 

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -2,7 +2,8 @@
   import { getContext } from "svelte";
   import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
   import { bottomNavItem, type BottomNavItemTheme } from ".";
-  import { type BottomNavItemProps, type BottomNavContextType, type BottomNavVariantType, cn } from "..";
+  import clsx from "clsx";
+  import { type BottomNavItemProps, type BottomNavContextType, type BottomNavVariantType } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, btnName, appBtnPosition = "middle", target, activeClass, href = "", btnClass, spanClass, active: manualActive, ...restProps }: BottomNavItemProps = $props();
@@ -26,11 +27,11 @@
   let isActive = $derived(manualActive !== undefined ? !!manualActive : navUrl ? (href === "/" ? navUrl === "/" : href && (navUrl === href || navUrl.startsWith(href + "/") || (href !== "/" && navUrl.replace(/^https?:\/\/[^/]+/, "").startsWith(href)))) : false);
 
   function getCommonClass() {
-    return cn(base(), isActive && (activeClass ?? context.activeClass), btnClass, (theme as BottomNavItemTheme)?.base);
+    return base({ class: clsx(isActive && (activeClass ?? context.activeClass), (theme as BottomNavItemTheme)?.base, btnClass) });
   }
 
   function getSpanClass() {
-    return cn(span(), isActive && (activeClass ?? context.activeClass), spanClass, (theme as BottomNavItemTheme)?.span);
+    return span({ class: clsx(isActive && (activeClass ?? context.activeClass), (theme as BottomNavItemTheme)?.span, spanClass) });
   }
 
   /* eslint-disable  @typescript-eslint/no-explicit-any */

package/dist/bottom-navigation/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 export declare const bottomNav: import("tailwind-variants").TVReturnType<{
     position: {
         static: {
@@ -342,10 +343,10 @@ export declare const bottomNavHeaderItem: import("tailwind-variants").TVReturnTy
     };
 }, undefined, "px-5 py-1.5 text-xs font-medium rounded-lg", unknown, unknown, undefined>>;
 export type BottomNavSlots = keyof typeof bottomNav.slots;
-export type BottomNavTheme = Partial<Record<BottomNavSlots, string>>;
+export type BottomNavTheme = Partial<Record<BottomNavSlots, ClassValue>>;
 export type BottomNavItemSlots = keyof typeof bottomNavItem.slots;
-export type BottomNavItemTheme = Partial<Record<BottomNavItemSlots, string>>;
+export type BottomNavItemTheme = Partial<Record<BottomNavItemSlots, ClassValue>>;
 export type BottomnavheaderSlots = keyof typeof bottomNavHeader.slots;
-export type BottomNavHeaderTheme = Partial<Record<BottomnavheaderSlots, string>>;
+export type BottomNavHeaderTheme = Partial<Record<BottomnavheaderSlots, ClassValue>>;
 export type bottomNavHeaderItemSlots = keyof typeof bottomNavHeaderItem.slots;
-export type BottomNavHeaderItemTheme = Partial<Record<bottomNavHeaderItemSlots, string>>;
+export type BottomNavHeaderItemTheme = Partial<Record<bottomNavHeaderItemSlots, ClassValue>>;

package/dist/breadcrumb/Breadcrumb.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { breadcrumb } from ".";
-  import { type BreadcrumbProps, cn, type BreadcrumbTheme } from "..";
+  import clsx from "clsx";
+  import { type BreadcrumbProps, type BreadcrumbTheme } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, solid = false, class: className, olClass, ariaLabel = "Breadcrumb", ...restProps }: BreadcrumbProps = $props();
@@ -8,8 +9,8 @@
   const theme = getTheme("breadcrumb");
 
   const { nav, list } = breadcrumb({ solid });
-  let classNav = $derived(cn(nav(), className, (theme as BreadcrumbTheme)?.nav));
-  let classList = $derived(cn(list(), olClass, (theme as BreadcrumbTheme)?.list));
+  let classNav = $derived(nav({ class: clsx((theme as BreadcrumbTheme)?.nav, className) }));
+  let classList = $derived(list({ class: clsx((theme as BreadcrumbTheme)?.list, olClass) }));
 </script>
 
 <nav aria-label={ariaLabel} {...restProps} class={classNav}>

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { breadcrumbItem } from "./index";
-  import { type BreadcrumbItemProps, cn, type BreadcrumbItemTheme } from "..";
+  import clsx from "clsx";
+  import { type BreadcrumbItemProps, type BreadcrumbItemTheme } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, icon, home = false, href, linkClass, spanClass, homeClass, class: className, ...restProps }: BreadcrumbItemProps = $props();
@@ -15,9 +16,9 @@
   );
 </script>
 
-<li {...restProps} class={cn(base(), className, (theme as BreadcrumbItemTheme)?.base)}>
+<li {...restProps} class={base({ class: clsx((theme as BreadcrumbItemTheme)?.base, className) })}>
   {#if home}
-    <a class={cn(base({ home: true }), homeClass, (theme as BreadcrumbItemTheme)?.base)} {href}>
+    <a class={base({ home: true, class: clsx((theme as BreadcrumbItemTheme)?.base, homeClass) })} {href}>
       {#if icon}
         {@render icon()}
       {:else}
@@ -32,17 +33,17 @@
     {#if icon}
       {@render icon()}
     {:else}
-      <svg class={cn(separator(), (theme as BreadcrumbItemTheme)?.separator)} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <svg class={separator({ class: clsx((theme as BreadcrumbItemTheme)?.separator) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
       </svg>
     {/if}
 
     {#if href}
-      <a class={cn(base({ home: false, hasHref: true }), linkClass, (theme as BreadcrumbItemTheme)?.base)} {href}>
+      <a class={base({ home: false, hasHref: true, class: clsx((theme as BreadcrumbItemTheme)?.base, linkClass) })} {href}>
         {@render children()}
       </a>
     {:else}
-      <span class={cn(base({ home: false, hasHref: false }), spanClass, (theme as BreadcrumbItemTheme)?.base)}>
+      <span class={base({ home: false, hasHref: false, class: clsx((theme as BreadcrumbItemTheme)?.base, spanClass) })}>
         {@render children()}
       </span>
     {/if}

package/dist/breadcrumb/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
     solid: {
         true: {
@@ -67,6 +68,6 @@ export declare const breadcrumbItem: import("tailwind-variants").TVReturnType<{
     separator: string;
 }, undefined, unknown, unknown, undefined>>;
 export type BreadcrumbSlots = keyof typeof breadcrumb.slots;
-export type BreadcrumbTheme = Partial<Record<BreadcrumbSlots, string>>;
+export type BreadcrumbTheme = Partial<Record<BreadcrumbSlots, ClassValue>>;
 export type BreadcrumbItemSlots = keyof typeof breadcrumbItem.slots;
-export type BreadcrumbItemTheme = Partial<Record<BreadcrumbItemSlots, string>>;
+export type BreadcrumbItemTheme = Partial<Record<BreadcrumbItemSlots, ClassValue>>;

package/dist/button-group/ButtonGroup.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { buttonGroup } from ".";
-  import { type ButtonGroupProps, cn } from "..";
+  import clsx from "clsx";
+  import { type ButtonGroupProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, size = "md", disabled, class: className, ...restProps }: ButtonGroupProps = $props();
 
   const theme = getTheme("buttonGroup");
 
-  let groupClass = $derived(cn(buttonGroup({ size }), className, theme));
+  let groupClass = $derived(buttonGroup({ size, class: clsx(theme, className) }));
   setContext("group", size);
   setContext("disabled", disabled);
 </script>

package/dist/button-group/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 declare const buttonGroup: import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
@@ -18,4 +19,4 @@ declare const buttonGroup: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "inline-flex rounded-lg shadow-xs", unknown, unknown, undefined>>;
 export { buttonGroup };
-export type ButtonGroupTheme = string;
+export type ButtonGroupTheme = ClassValue;

package/dist/buttons/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { type SizeType, type ButtonProps, cn } from "..";
+  import clsx from "clsx";
+  import { type SizeType, type ButtonProps } from "..";
   import { getTheme } from "../theme/themeUtils";
   import { button, type ButtonTheme } from ".";
 
@@ -16,7 +17,7 @@
   let isDisabled = $derived(Boolean(ctxDisabled) || Boolean(disabled));
 
   const { base, outline: outline_, shadow: shadow_ } = $derived(button({ color: actualColor, size: actualSize, disabled: isDisabled, pill, group: !!group }));
-  let btnCls = $derived(cn(base(), outline && outline_(), shadow && shadow_(), className, (theme as ButtonTheme)?.base));
+  let btnCls = $derived(base({ class: clsx(outline && outline_(), shadow && shadow_(), (theme as ButtonTheme)?.base, className) }));
 </script>
 
 {#if restProps.href === undefined}

package/dist/buttons/GradientButton.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import { gradientButton, type GradientButtonTheme } from ".";
-  import { type GradientButtonProps, type SizeType, Button, cn } from "..";
+  import clsx from "clsx";
+  import { type GradientButtonProps, type SizeType, Button } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   const group: SizeType = getContext("group");
@@ -14,13 +15,13 @@
 </script>
 
 {#if outline}
-  <div class={cn(base(), className, (theme as GradientButtonTheme)?.base)}>
-    <Button {...restProps} class={cn(outlineWrapper(), btnClass, (theme as GradientButtonTheme)?.outlineWrapper)} {disabled} {href} {size}>
+  <div class={base({ class: clsx((theme as GradientButtonTheme)?.base, className) })}>
+    <Button {...restProps} class={outlineWrapper({ class: clsx((theme as GradientButtonTheme)?.outlineWrapper, btnClass) })} {disabled} {href} {size}>
       {@render children?.()}
     </Button>
   </div>
 {:else}
-  <Button {...restProps} class={cn(base(), className, (theme as GradientButtonTheme)?.base)} {disabled} {href} {size}>
+  <Button {...restProps} class={base({ class: clsx((theme as GradientButtonTheme)?.base, className) })} {disabled} {href} {size}>
     {@render children?.()}
   </Button>
 {/if}

package/dist/buttons/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type ButtonVariants = VariantProps<typeof button>;
 export declare const button: import("tailwind-variants").TVReturnType<{
     color: {
@@ -703,6 +704,6 @@ export declare const gradientButton: import("tailwind-variants").TVReturnType<{
     outlineWrapper: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ButtonSlots = keyof typeof button.slots;
-export type ButtonTheme = Partial<Record<ButtonSlots, string>>;
+export type ButtonTheme = Partial<Record<ButtonSlots, ClassValue>>;
 export type GradientButtonSlots = keyof typeof gradientButton.slots;
-export type GradientButtonTheme = Partial<Record<GradientButtonSlots, string>>;
+export type GradientButtonTheme = Partial<Record<GradientButtonSlots, ClassValue>>;

package/dist/card/Card.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type CardProps, cn } from "..";
+  import { type CardProps } from "..";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
   import { card, type CardTheme } from ".";
@@ -22,7 +22,7 @@
 
 {#snippet childSlot()}
   {#if img}
-    <img class={cn(image({ class: clsx(imgClass) }), (theme as CardTheme)?.image)} src={img} alt={img} />
+    <img class={image({ class: clsx((theme as CardTheme)?.image, imgClass) })} src={img} alt={img} />
     {@render children()}
   {:else}
     {@render children()}
@@ -30,11 +30,11 @@
 {/snippet}
 
 {#if restProps.href === undefined}
-  <div {...restProps} class={cn(base({ class: clsx(className) }), (theme as CardTheme)?.base)}>
+  <div {...restProps} class={base({ class: clsx((theme as CardTheme)?.base, className) })}>
     {@render childSlot()}
   </div>
 {:else}
-  <a {...restProps} class={cn(base({ class: clsx(className) }), (theme as CardTheme)?.base)}>
+  <a {...restProps} class={base({ class: clsx((theme as CardTheme)?.base, className) })}>
     {@render childSlot()}
   </a>
 {/if}

package/dist/card/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type CardVariants = VariantProps<typeof card>;
 export declare const card: import("tailwind-variants").TVReturnType<{
     size: {
@@ -392,4 +393,4 @@ export declare const card: import("tailwind-variants").TVReturnType<{
     image: string;
 }, undefined, unknown, unknown, undefined>>;
 export type CardSlots = keyof typeof card.slots;
-export type CardTheme = Partial<Record<CardSlots, string>>;
+export type CardTheme = Partial<Record<CardSlots, ClassValue>>;

package/dist/carousel/Carousel.svelte

@@ -3,7 +3,8 @@
   import { writable } from "svelte/store";
   import { canChangeSlide } from "./CarouselSlide";
   import { carousel } from "./theme";
-  import { type CarouselProps, type State, Slide, cn } from "..";
+  import clsx from "clsx";
+  import { type CarouselProps, type State, Slide } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   const SLIDE_DURATION_RATIO = 0.25;
@@ -168,12 +169,12 @@
 
 <!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
 <svelte:document onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} />
-<div bind:this={carouselDiv} class={cn("relative", divClass)} onmousedown={onDragStart} ontouchstart={onDragStart} onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0">
-  <div {...restProps} class={cn(carousel(), activeDragGesture === undefined ? "transition-transform" : "", className, theme)} {@attach loop}>
+<div bind:this={carouselDiv} class={clsx("relative", divClass)} onmousedown={onDragStart} ontouchstart={onDragStart} onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0">
+  <div {...restProps} class={carousel({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", theme, className) })} {@attach loop}>
     {#if slide}
       {@render slide({ index, Slide })}
     {:else}
-      <Slide image={images[index]} class={cn(imgClass)} {transition} />
+      <Slide image={images[index]} class={clsx(imgClass)} {transition} />
     {/if}
   </div>
   {@render children?.(index)}