flowbite-svelte 1.10.4 → 1.10.6

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -2,7 +2,6 @@
   import { widgetPlaceholder, type WidgetPlaceholderTheme } from ".";
   import clsx from "clsx";
   import { type WidgetPlaceholderProps } from "..";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { class: className }: WidgetPlaceholderProps = $props();
@@ -12,7 +11,7 @@
   const { base, wrapper, vLine, hLine } = widgetPlaceholder({});
 </script>
 
-<div role="status" class={cn(base(), clsx(className), (theme as WidgetPlaceholderTheme)?.base)}>
+<div role="status" class={base({ class: clsx((theme as WidgetPlaceholderTheme)?.base, className) })}>
   <div class={hLine({ class: "mb-2.5 h-2.5 w-32" })}></div>
   <div class={hLine({ class: "mb-10 h-2 w-48" })}></div>
   <div class={wrapper()}>

package/dist/skeleton/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type CardPlaceholderVariants = VariantProps<typeof cardPlaceholder>;
 export declare const cardPlaceholder: import("tailwind-variants").TVReturnType<{
     size: {
@@ -74,7 +75,7 @@ export declare const cardPlaceholder: import("tailwind-variants").TVReturnType<{
     footerArea: string;
 }, undefined, unknown, unknown, undefined>>;
 export type CardPlaceholderSlots = keyof typeof cardPlaceholder.slots;
-export type CardPlaceholderTheme = Partial<Record<CardPlaceholderSlots, string>>;
+export type CardPlaceholderTheme = Partial<Record<CardPlaceholderSlots, ClassValue>>;
 export type ImagePlaceholderVariants = VariantProps<typeof imagePlaceholder>;
 export declare const imagePlaceholder: import("tailwind-variants").TVReturnType<{
     size: {
@@ -207,7 +208,7 @@ export declare const imagePlaceholder: import("tailwind-variants").TVReturnType<
     line: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ImagePlaceholderSlots = keyof typeof imagePlaceholder.slots;
-export type ImagePlaceholderTheme = Partial<Record<ImagePlaceholderSlots, string>>;
+export type ImagePlaceholderTheme = Partial<Record<ImagePlaceholderSlots, ClassValue>>;
 export type ListPlaceholderVariants = VariantProps<typeof listPlaceholder>;
 export declare const listPlaceholder: import("tailwind-variants").TVReturnType<{
     size: {
@@ -331,7 +332,7 @@ export declare const listPlaceholder: import("tailwind-variants").TVReturnType<{
     itemExtra: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ListPlaceholderSlots = keyof typeof listPlaceholder.slots;
-export type ListPlaceholderTheme = Partial<Record<ListPlaceholderSlots, string>>;
+export type ListPlaceholderTheme = Partial<Record<ListPlaceholderSlots, ClassValue>>;
 export type SkeletonVariants = VariantProps<typeof skeleton>;
 export declare const skeleton: import("tailwind-variants").TVReturnType<{
     size: {
@@ -398,7 +399,7 @@ export declare const skeleton: import("tailwind-variants").TVReturnType<{
     line: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SkeletonSlots = keyof typeof skeleton.slots;
-export type SkeletonTheme = Partial<Record<SkeletonSlots, string>>;
+export type SkeletonTheme = Partial<Record<SkeletonSlots, ClassValue>>;
 export declare const testimonialPlaceholder: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -449,7 +450,7 @@ export declare const testimonialPlaceholder: import("tailwind-variants").TVRetur
     subContent: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TestimonialPlaceholderSlots = keyof typeof testimonialPlaceholder.slots;
-export type TestimonialPlaceholderTheme = Partial<Record<TestimonialPlaceholderSlots, string>>;
+export type TestimonialPlaceholderTheme = Partial<Record<TestimonialPlaceholderSlots, ClassValue>>;
 export type TextPlaceholderVariants = VariantProps<typeof textPlaceholder>;
 export declare const textPlaceholder: import("tailwind-variants").TVReturnType<{
     size: {
@@ -522,7 +523,7 @@ export declare const textPlaceholder: import("tailwind-variants").TVReturnType<{
     lineB: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TextPlaceholderSlots = keyof typeof textPlaceholder.slots;
-export type TextPlaceholderTheme = Partial<Record<TextPlaceholderSlots, string>>;
+export type TextPlaceholderTheme = Partial<Record<TextPlaceholderSlots, ClassValue>>;
 export type VideoPlaceholderVariants = VariantProps<typeof videoPlaceholder>;
 export declare const videoPlaceholder: import("tailwind-variants").TVReturnType<{
     size: {
@@ -549,7 +550,7 @@ export declare const videoPlaceholder: import("tailwind-variants").TVReturnType<
         "2xl": string;
     };
 }, undefined, "flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700", unknown, unknown, undefined>>;
-export type VideoPlaceholderTheme = string;
+export type VideoPlaceholderTheme = ClassValue;
 export declare const widgetPlaceholder: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -594,4 +595,4 @@ export declare const widgetPlaceholder: import("tailwind-variants").TVReturnType
     vLine: string;
 }, undefined, unknown, unknown, undefined>>;
 export type WidgetPlaceholderSlots = keyof typeof widgetPlaceholder.slots;
-export type WidgetPlaceholderTheme = Partial<Record<WidgetPlaceholderSlots, string>>;
+export type WidgetPlaceholderTheme = Partial<Record<WidgetPlaceholderSlots, ClassValue>>;

package/dist/speed-dial/SpeedDial.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import clsx from "clsx";
-  import { Popper, cn } from "..";
+  import { Popper } from "..";
   import { getSideAxis } from "@floating-ui/utils";
   import { setContext } from "svelte";
   import { speedDial, type SpeedDialTheme } from "./theme";
@@ -18,8 +18,8 @@
   let { base, popper } = $derived(speedDial({ vertical }));
 </script>
 
-<Popper {...restProps} bind:isOpen {trigger} arrow={false} {placement} class={cn(base(), clsx(className), (theme as SpeedDialTheme)?.base)}>
-  <div class={cn(popper(), clsx(popperClass), (theme as SpeedDialTheme)?.popper)}>
+<Popper {...restProps} bind:isOpen {trigger} arrow={false} {placement} class={base({ class: clsx((theme as SpeedDialTheme)?.base, className) })}>
+  <div class={popper({ class: clsx((theme as SpeedDialTheme)?.popper, popperClass) })}>
     {@render children()}
   </div>
 </Popper>

package/dist/speed-dial/SpeedDialButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button, Tooltip, cn } from "..";
+  import { Button, Tooltip } from "..";
   import { getContext } from "svelte";
   import { speedDialButton, type SpeedDialButtonTheme } from "./theme";
   import type { SpeedCtxType, SpeedDialButtonProps } from "../types";
@@ -13,10 +13,10 @@
   const theme = getTheme("speedDialButton");
 
   let { base, span } = $derived(speedDialButton({ textOutside, tooltip: tooltip == "none" }));
-  let spanClass = $derived(tooltip === "none" ? cn(span(), clsx(textClass), (theme as SpeedDialButtonTheme)?.span) : "sr-only");
+  let spanClass = $derived(tooltip === "none" ? span({ class: clsx((theme as SpeedDialButtonTheme)?.span, textClass) }) : "sr-only");
 </script>
 
-<Button {pill} {color} {...restProps} class={cn(base(), clsx(className), (theme as SpeedDialButtonTheme)?.base)}>
+<Button {pill} {color} {...restProps} class={base({ class: clsx((theme as SpeedDialButtonTheme)?.base, className) })}>
   {@render children?.()}
   <span class={spanClass}>{name}</span>
 </Button>

package/dist/speed-dial/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type SpeedDialVariants = VariantProps<typeof speedDial>;
 export declare const speedDial: import("tailwind-variants").TVReturnType<{
     vertical: {
@@ -29,7 +30,7 @@ export declare const speedDial: import("tailwind-variants").TVReturnType<{
     popper: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SpeedDialSlots = keyof typeof speedDial.slots;
-export type SpeedDialTheme = Partial<Record<SpeedDialSlots, string>>;
+export type SpeedDialTheme = Partial<Record<SpeedDialSlots, ClassValue>>;
 export type SpeedDialButtonVariants = VariantProps<typeof speedDialButton>;
 export declare const speedDialButton: import("tailwind-variants").TVReturnType<{
     textOutside: {
@@ -78,4 +79,4 @@ export declare const speedDialButton: import("tailwind-variants").TVReturnType<{
     span: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SpeedDialButtonSlots = keyof typeof speedDialButton.slots;
-export type SpeedDialButtonTheme = Partial<Record<SpeedDialButtonSlots, string>>;
+export type SpeedDialButtonTheme = Partial<Record<SpeedDialButtonSlots, ClassValue>>;

package/dist/spinner/Spinner.svelte

@@ -2,17 +2,16 @@
   import clsx from "clsx";
   import { spinner } from ".";
   import type { SpinnerProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { color = "primary", size = "8", class: className, currentFill = "currentFill", currentColor = "currentColor", ...restProps }: SpinnerProps = $props();
 
   const theme = getTheme("spinner");
 
-  let spinnerClass = $derived(spinner({ color, size }));
+  let spinnerClass = $derived(spinner({ color, size, class: clsx(theme, className) }));
 </script>
 
-<svg {...restProps} role="status" class={cn(spinnerClass, clsx(className), theme)} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg {...restProps} role="status" class={spinnerClass} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill={currentColor} />
   <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill={currentFill} />
 </svg>

package/dist/spinner/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type SpinnerVaraiants = VariantProps<typeof spinner>;
 export declare const spinner: import("tailwind-variants").TVReturnType<{
     color: {
@@ -97,4 +98,4 @@ export declare const spinner: import("tailwind-variants").TVReturnType<{
         "16": string;
     };
 }, undefined, "inline-block animate-spin text-gray-300", unknown, unknown, undefined>>;
-export type SpinnerTheme = string;
+export type SpinnerTheme = ClassValue;

package/dist/stepindicator/StepIndicator.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { type StepIndicatorProps, cn } from "..";
+  import clsx from "clsx";
+  import { type StepIndicatorProps } from "..";
   import { stepIndicator, getStepStateClasses, type StepIndicatorTheme } from ".";
   import { getTheme } from "../theme/themeUtils";
 
@@ -26,24 +27,24 @@
   };
 </script>
 
-<div {...restProps} class={cn(style.base(), className, (theme as StepIndicatorTheme)?.base)}>
+<div {...restProps} class={style.base({ class: clsx((theme as StepIndicatorTheme)?.base, className) })}>
   {#if !hideLabel}
-    <h3 class={cn(style.label(), (theme as StepIndicatorTheme)?.label)}>{currentStepLabel}</h3>
+    <h3 class={style.label({ class: clsx((theme as StepIndicatorTheme)?.label) })}>{currentStepLabel}</h3>
   {/if}
 
-  <div class={cn(style.container(), (theme as StepIndicatorTheme)?.container)}>
+  <div class={style.container({ class: clsx((theme as StepIndicatorTheme)?.container) })}>
     {#each steps as step, i}
       {#if i === currentStep - 1}
-        <div class={cn(style.stepWrapper(), (theme as StepIndicatorTheme)?.stepWrapper)}>
-          <div class={cn(style.step(), getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step)} data-state="current"></div>
+        <div class={style.stepWrapper({ class: clsx((theme as StepIndicatorTheme)?.stepWrapper) })}>
+          <div class={style.step({ class: clsx(getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step) })} data-state="current"></div>
           {#if glow}
-            <div class={cn(style.stepGlow(), getCustomStepClass(i), (theme as StepIndicatorTheme)?.stepGlow)}></div>
+            <div class={style.stepGlow({ class: clsx(getCustomStepClass(i), (theme as StepIndicatorTheme)?.stepGlow) })}></div>
           {/if}
         </div>
       {:else if i < currentStep - 1}
-        <div class={cn(style.step(), getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step)} data-state="completed"></div>
+        <div class={style.step({ class: clsx(getStepStateClasses(i, currentStep), getCustomStepClass(i), (theme as StepIndicatorTheme)?.step) })} data-state="completed"></div>
       {:else}
-        <div class={cn(style.incompleteStep(), (theme as StepIndicatorTheme)?.incompleteStep)} data-state="incomplete"></div>
+        <div class={style.incompleteStep({ class: clsx((theme as StepIndicatorTheme)?.incompleteStep) })} data-state="incomplete"></div>
       {/if}
     {/each}
   </div>

package/dist/stepindicator/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type StepIndicatorVariants = VariantProps<typeof stepIndicator>;
 export declare const stepIndicator: import("tailwind-variants").TVReturnType<{
     size: {
@@ -242,5 +243,5 @@ export declare const stepIndicator: import("tailwind-variants").TVReturnType<{
     incompleteStep: string;
 }, undefined, unknown, unknown, undefined>>;
 export type StepIndicatorSlots = keyof typeof stepIndicator.slots;
-export type StepIndicatorTheme = Partial<Record<StepIndicatorSlots, string>>;
+export type StepIndicatorTheme = Partial<Record<StepIndicatorSlots, ClassValue>>;
 export declare const getStepStateClasses: (stepIndex: number, currentStep: number) => "data-[state=current]" | "data-[state=completed]" | "data-[state=incomplete]";

package/dist/stepper/BreadcrumbStepper.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { breadcrumbStepper, type BreadcrumbStepperTheme } from ".";
-  import { type BreadcrumbStepperProps, cn } from "..";
+  import clsx from "clsx";
+  import { type BreadcrumbStepperProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, steps = [], classes, ...restProps }: BreadcrumbStepperProps = $props();
@@ -10,7 +11,7 @@
 
   setContext("stepperType", "breadcrumb");
 
-  const base = cn(breadcrumbStepper.stepper(), (theme as BreadcrumbStepperTheme)?.stepper);
+  const base = breadcrumbStepper.stepper({ class: clsx((theme as BreadcrumbStepperTheme)?.stepper) });
 </script>
 
 <ol class={base} {...restProps}>
@@ -19,15 +20,13 @@
   {:else if steps}
     {#each steps as step, index}
       <li
-        class={cn(
-          breadcrumbStepper.item({
-            status: step.status,
-            hasChevron: index < steps.length - 1
-          }),
-          (theme as BreadcrumbStepperTheme)?.item
-        )}
+        class={breadcrumbStepper.item({
+          status: step.status,
+          hasChevron: index < steps.length - 1,
+          class: clsx((theme as BreadcrumbStepperTheme)?.item)
+        })}
       >
-        <span class={cn(breadcrumbStepper.indicator({ status: step.status }), (theme as BreadcrumbStepperTheme)?.indicator)}>
+        <span class={breadcrumbStepper.indicator({ status: step.status, class: clsx((theme as BreadcrumbStepperTheme)?.indicator) })}>
           {#if step.status === "completed" && step.icon}
             <step.icon class={step.iconClass || "h-3 w-3"} />
           {:else}

package/dist/stepper/DetailedStepper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { detailedStepper, type DetailedStepperTheme } from ".";
-  import { type DetailedStepperProps, cn } from "..";
+  import { type DetailedStepperProps } from "..";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -12,13 +12,13 @@
   setContext("stepperType", "detailed");
 </script>
 
-<ol class={cn(detailedStepper.stepper(), clsx(classes?.detailedstepper), (theme as DetailedStepperTheme)?.stepper)} {...restrorps}>
+<ol class={detailedStepper.stepper({ class: clsx((theme as DetailedStepperTheme)?.stepper, classes?.detailedstepper) })} {...restrorps}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
-      <li class={cn(detailedStepper.item({ status: step.status }), clsx(classes?.detailedstepperitem), (theme as DetailedStepperTheme)?.item)}>
-        <span class={cn(detailedStepper.indicator({ status: step.status }), clsx(classes?.detailedstepperindicator), (theme as DetailedStepperTheme)?.indicator)}>
+      <li class={detailedStepper.item({ status: step.status, class: clsx((theme as DetailedStepperTheme)?.item, classes?.detailedstepperitem) })}>
+        <span class={detailedStepper.indicator({ status: step.status, class: clsx((theme as DetailedStepperTheme)?.indicator, classes?.detailedstepperindicator) })}>
           {#if step.status === "completed" && step.icon}
             <step.icon class={clsx(step.iconClass)} />
           {:else}

package/dist/stepper/ProgressStepper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { progressStepper } from ".";
-  import { type ProgressStepperProps, cn } from "..";
+  import { type ProgressStepperProps } from "..";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
   import type { ProgressStepperTheme } from ".";
@@ -13,22 +13,19 @@
   setContext("stepperType", "progress");
 </script>
 
-<ol class={cn(progressStepper.stepper(), clsx(classes?.progressstepper), (theme as ProgressStepperTheme)?.stepper)} {...restrorps}>
+<ol class={progressStepper.stepper({ class: clsx((theme as ProgressStepperTheme)?.stepper, classes?.progressstepper) })} {...restrorps}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
       <li
-        class={cn(
-          progressStepper.item({
-            status: step.status,
-            isLast: index === steps.length - 1
-          }),
-          clsx(classes?.progressstepperitem),
-          (theme as ProgressStepperTheme)?.item
-        )}
+        class={progressStepper.item({
+          status: step.status,
+          isLast: index === steps.length - 1,
+          class: clsx((theme as ProgressStepperTheme)?.item, classes?.progressstepperitem)
+        })}
       >
-        <span class={cn(progressStepper.circle({ status: step.status }), clsx(classes?.progresssteppercircle), (theme as ProgressStepperTheme)?.circle)}>
+        <span class={progressStepper.circle({ status: step.status, class: clsx((theme as ProgressStepperTheme)?.circle, classes?.progresssteppercircle) })}>
           {#if step.status === "completed"}
             {#if step.icon}
               <step.icon class={clsx(step.iconClass) || "h-5 w-5 lg:h-6 lg:w-6"} />

package/dist/stepper/Stepper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { stepper, type StepperTheme } from ".";
-  import { type StepperProps, cn } from "..";
+  import { type StepperProps } from "..";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -12,30 +12,24 @@
   setContext("stepperType", "stepper");
 </script>
 
-<ol {...restProps} class={cn(stepper.base(), clsx(classes?.stepper), (theme as StepperTheme)?.base)}>
+<ol {...restProps} class={stepper.base({ class: clsx((theme as StepperTheme)?.base, classes?.stepper) })}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
       <li
-        class={cn(
-          stepper.item({
-            status: step.status,
-            isLast: index === steps.length - 1
-          }),
-          clsx(classes?.stepperitem),
-          (theme as StepperTheme)?.item
-        )}
+        class={stepper.item({
+          status: step.status,
+          isLast: index === steps.length - 1,
+          class: clsx((theme as StepperTheme)?.item, classes?.stepperitem)
+        })}
       >
         <span
-          class={cn(
-            stepper.content({
-              status: step.status,
-              isLast: index === steps.length - 1
-            }),
-            clsx(classes?.steppercontent),
-            (theme as StepperTheme)?.content
-          )}
+          class={stepper.content({
+            status: step.status,
+            isLast: index === steps.length - 1,
+            class: clsx((theme as StepperTheme)?.content, classes?.steppercontent)
+          })}
         >
           {#if step.status === "completed"}
             {#if step.icon}

package/dist/stepper/TimelineStepper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { timelineStepper, type TimelineStepperTheme } from ".";
-  import { type TimelineStepperProps, cn } from "..";
+  import { type TimelineStepperProps } from "..";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -12,13 +12,13 @@
   setContext("stepperType", "timeline");
 </script>
 
-<ol class={cn(timelineStepper.base(), clsx(classes?.timelinestepper), (theme as TimelineStepperTheme)?.base)} {...restProps}>
+<ol class={timelineStepper.base({ class: clsx((theme as TimelineStepperTheme)?.base, classes?.timelinestepper) })} {...restProps}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
-      <li class={cn(timelineStepper.item({ isLast: index === steps.length - 1 }), clsx(classes?.timelinestepperitem), (theme as TimelineStepperTheme)?.item)}>
-        <span class={cn(timelineStepper.circle({ status: step.status }), clsx(classes?.timelinesteppercircle), (theme as TimelineStepperTheme)?.circle)}>
+      <li class={timelineStepper.item({ isLast: index === steps.length - 1, class: clsx((theme as TimelineStepperTheme)?.item, classes?.timelinestepperitem) })}>
+        <span class={timelineStepper.circle({ status: step.status, class: clsx((theme as TimelineStepperTheme)?.circle, classes?.timelinesteppercircle) })}>
           {#if step.status === "completed"}
             {#if step.icon}
               <step.icon class={clsx(step.iconClass) || "h-3.5 w-3.5"} />

package/dist/stepper/VerticalStepper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { verticalStepper, type VerticalStepperTheme } from ".";
-  import { type VerticalStepperProps, cn } from "..";
+  import { type VerticalStepperProps } from "..";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -12,14 +12,14 @@
   setContext("stepperType", "vertical");
 </script>
 
-<ol class={cn(verticalStepper.stepper(), (theme as VerticalStepperTheme)?.stepper)} {...restProps}>
+<ol class={verticalStepper.stepper({ class: (theme as VerticalStepperTheme)?.stepper })} {...restProps}>
   {#if children}
     {@render children()}
   {:else if steps}
     {#each steps as step, index}
       <li class={clsx(liClass)}>
-        <div class={cn(verticalStepper.card({ status: step.status }), clsx(classes?.verticalsteppercard), (theme as VerticalStepperTheme)?.card)} role="alert">
-          <div class={cn(verticalStepper.content(), clsx(classes?.verticalsteppercontent), (theme as VerticalStepperTheme)?.content)}>
+        <div class={verticalStepper.card({ status: step.status, class: clsx((theme as VerticalStepperTheme)?.card, classes?.verticalsteppercard) })} role="alert">
+          <div class={verticalStepper.content({ class: clsx((theme as VerticalStepperTheme)?.content, classes?.verticalsteppercontent) })}>
             <span class="sr-only">{step.label}</span>
             <h3 class="font-medium">{step.id}. {step.label}</h3>
             {#if step.status === "completed"}

package/dist/table/Table.svelte

@@ -2,7 +2,7 @@
   import { setContext } from "svelte";
   import { table as tableCls, TableHead, TableBody, type TableTheme } from ".";
   import clsx from "clsx";
-  import { type TableProps, type TableCtxType, cn } from "..";
+  import { type TableProps, type TableCtxType } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, footerSlot, captionSlot, items, divClass = "relative overflow-x-auto", striped, hoverable, border = true, shadow, color = "default", class: className, ...restProps }: TableProps = $props();
@@ -32,8 +32,8 @@
   let bodyItems = $derived(items && items.length > 0 ? items.map((item) => Object.values(item)) : []);
 </script>
 
-<div class={cn(base(), clsx(divClass), (theme as TableTheme)?.base)}>
-  <table {...restProps} class={cn(table(), clsx(className), (theme as TableTheme)?.table)}>
+<div class={base({ class: clsx((theme as TableTheme)?.base, divClass) })}>
+  <table {...restProps} class={table({ class: clsx((theme as TableTheme)?.table, className) })}>
     {#if captionSlot}
       {@render captionSlot()}
     {/if}

package/dist/table/TableBody.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { TableBodyRow, TableBodyCell } from ".";
   import type { TableBodyProps, CellValue, BodyRow } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, bodyItems, class: className, ...restProps }: TableBodyProps = $props();
@@ -18,7 +17,7 @@
   }
 </script>
 
-<tbody {...restProps} class={cn(clsx(className), theme)}>
+<tbody {...restProps} class={clsx(theme, className)}>
   {#if bodyItems}
     {#each bodyItems as row}
       <TableBodyRow>

package/dist/table/TableBodyCell.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { tableBodyCell } from ".";
   import type { TableBodyCellProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, colspan, onclick, ...restProps }: TableBodyCellProps = $props();
@@ -10,7 +9,7 @@
   const theme = getTheme("tableBodyCell");
 </script>
 
-<td {...restProps} class={cn(tableBodyCell(), clsx(className), theme)} colspan={colspan ?? 1}>
+<td {...restProps} class={tableBodyCell({ class: clsx(theme, className) })} colspan={colspan ?? 1}>
   {#if onclick}
     <button {onclick}>
       {#if children}

package/dist/table/TableBodyRow.svelte

@@ -3,7 +3,6 @@
   import { tableBodyRow } from ".";
   import type { TableBodyRowProps, TableCtxType } from "../types";
   import clsx from "clsx";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, color, striped, hoverable, border, ...restProps }: TableBodyRowProps = $props();
@@ -17,10 +16,10 @@
   let compoStriped = $derived(striped || tableCtx.striped || false);
   let compoBorder = $derived(border || tableCtx.border || false);
 
-  const base = $derived(tableBodyRow({ color: compoColor, hoverable: compoHoverable, striped: compoStriped, border: compoBorder }));
+  const base = $derived(tableBodyRow({ color: compoColor, hoverable: compoHoverable, striped: compoStriped, border: compoBorder, class: clsx(theme, className) }));
 </script>
 
-<tr {...restProps} class={cn(base, clsx(className), theme)}>
+<tr {...restProps} class={base}>
   {#if children}
     {@render children()}
   {/if}

package/dist/table/TableHead.svelte

@@ -3,7 +3,6 @@
   import { TableHeadCell, tableHead } from ".";
   import type { TableHeadProps, TableCtxType, HeadItemType } from "../types";
   import clsx from "clsx";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, headerSlot, color, striped, border, class: className, headItems, defaultRow = true, ...restProps }: TableHeadProps = $props();
@@ -16,7 +15,7 @@
   let compoStriped = $derived(striped ? striped : tableCtx.striped || false);
   let compoBorder = $derived(border ? border : tableCtx.border || false);
 
-  const base = $derived(tableHead({ color: compoColor, border: compoBorder, striped: compoStriped }));
+  const base = $derived(tableHead({ color: compoColor, border: compoBorder, striped: compoStriped, class: clsx(theme, className) }));
 
   function getItemText(item: HeadItemType): string {
     if (typeof item === "object" && "text" in item) {
@@ -26,7 +25,7 @@
   }
 </script>
 
-<thead {...restProps} class={cn(base, clsx(className), theme)}>
+<thead {...restProps} class={base}>
   {#if headItems}
     {#if headerSlot}
       {@render headerSlot()}

package/dist/table/TableHeadCell.svelte

@@ -2,7 +2,6 @@
   import clsx from "clsx";
   import { tableHeadCell } from ".";
   import type { TableHeadCellProps } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: TableHeadCellProps = $props();
@@ -10,7 +9,7 @@
   const theme = getTheme("tableHeadCell");
 </script>
 
-<th {...restProps} class={cn(tableHeadCell(), clsx(className), theme)}>
+<th {...restProps} class={tableHeadCell({ class: clsx(theme, className) })}>
   {#if children}
     {@render children()}
   {/if}

package/dist/table/TableSearch.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import type { TableSearchProps, TableSearchType } from "../types";
-  import { cn } from "..";
+  import clsx from "clsx";
   import { tableSearch, type TableSearchTheme } from ".";
   import { getTheme } from "../theme/themeUtils";
 
@@ -15,16 +15,16 @@
   const styles = tableSearch({ color: themeColor, striped, hoverable });
 
   // Apply custom classes or use theme defaults
-  const rootClass = cn(styles.root(), divClass, (theme as TableSearchTheme)?.root);
-  const innerDivCls = cn(styles.innerDiv(), innerDivClass, (theme as TableSearchTheme)?.innerDiv);
-  const searchContainerCls = cn(styles.searchContainer(), searchClass, (theme as TableSearchTheme)?.searchContainer);
-  const svgContainerCls = cn(styles.svgContainer(), svgDivClass, (theme as TableSearchTheme)?.svgContainer);
-  const svgCls = cn(styles.svg(), svgClass, (theme as TableSearchTheme)?.svg);
-  const inputCls = cn(styles.input(), inputClass, (theme as TableSearchTheme)?.input);
-  const tableCls = cn(styles.table(), tableClass, className, (theme as TableSearchTheme)?.table);
+  const rootClass = styles.root({ class: clsx((theme as TableSearchTheme)?.root, divClass) });
+  const innerDivCls = styles.innerDiv({ class: clsx((theme as TableSearchTheme)?.innerDiv, innerDivClass) });
+  const searchContainerCls = styles.searchContainer({ class: clsx((theme as TableSearchTheme)?.searchContainer, searchClass) });
+  const svgContainerCls = styles.svgContainer({ class: clsx((theme as TableSearchTheme)?.svgContainer, svgDivClass) });
+  const svgCls = styles.svg({ class: clsx((theme as TableSearchTheme)?.svg, svgClass) });
+  const inputCls = styles.input({ class: clsx((theme as TableSearchTheme)?.input, inputClass) });
+  const tableCls = styles.table({ class: clsx(tableClass, (theme as TableSearchTheme)?.table, className) });
 
   // Handle custom color
-  const finalTableClass = color === "custom" && customColor ? cn(tableCls, customColor) : tableCls;
+  const finalTableClass = color === "custom" && customColor ? clsx(tableCls, customColor) : tableCls;
 
   const tableSearchCtx: TableSearchType = {
     striped,