flowbite-svelte 1.10.4 → 1.10.6

package/dist/table/theme.d.ts

@@ -225,7 +225,7 @@ export declare const table: import("tailwind-variants").TVReturnType<{
     table: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TableSlots = keyof typeof table.slots;
-export type TableTheme = Partial<Record<TableSlots, string>>;
+export type TableTheme = Partial<Record<TableSlots, ClassValue>>;
 export declare const tableBodyRow: import("tailwind-variants").TVReturnType<{
     color: {
         default: string;
@@ -326,7 +326,7 @@ export declare const tableBodyRow: import("tailwind-variants").TVReturnType<{
         true: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
-export type TableBodyRowTheme = string;
+export type TableBodyRowTheme = ClassValue;
 export declare const tableHead: import("tailwind-variants").TVReturnType<{
     color: {
         default: string;
@@ -424,11 +424,11 @@ export declare const tableHead: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "text-xs uppercase", unknown, unknown, undefined>>;
-export type TableHeadTheme = string;
+export type TableHeadTheme = ClassValue;
 export declare const tableBodyCell: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-6 py-4 whitespace-nowrap font-medium", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-6 py-4 whitespace-nowrap font-medium", unknown, unknown, undefined>>;
-export type TableBodyCellTheme = string;
+export type TableBodyCellTheme = ClassValue;
 export declare const tableHeadCell: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-6 py-3", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-6 py-3", unknown, unknown, undefined>>;
-export type TableHeadCellTheme = string;
+export type TableHeadCellTheme = ClassValue;
 export type TableSearchClasses = Partial<{
     root: ClassValue;
     innerDiv: ClassValue;
@@ -609,4 +609,4 @@ export declare const tableSearch: import("tailwind-variants").TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 export type TableSearchColor = "default" | "blue" | "green" | "red" | "yellow" | "purple" | "indigo" | "pink" | "custom";
 export type TableSearchSlots = keyof typeof tableSearch.slots;
-export type TableSearchTheme = Partial<Record<TableSearchSlots, string>>;
+export type TableSearchTheme = Partial<Record<TableSearchSlots, ClassValue>>;

package/dist/tabs/TabItem.svelte

@@ -2,7 +2,8 @@
   import { getContext } from "svelte";
   import { writable } from "svelte/store";
   import { tabItem, tabs, type TabItemTheme } from ".";
-  import { type TabitemProps, type TabCtxType, cn } from "..";
+  import clsx from "clsx";
+  import { type TabitemProps, type TabCtxType } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, titleSlot, open = false, title = "Tab title", activeClass, inactiveClass, class: className, disabled, tabStyle, ...restProps }: TabitemProps = $props();
@@ -32,8 +33,8 @@
   const { base, button, content } = $derived(tabItem({ open, disabled }));
 </script>
 
-<li {...restProps} class={cn(base(), className, (theme as TabItemTheme)?.base)} role="presentation">
-  <button type="button" onclick={() => (open = true)} role="tab" id={tabId} aria-controls={ctx.panelId} aria-selected={open} {disabled} class={cn(button(), open ? (activeClass ?? active()) : (inactiveClass ?? inactive()), (theme as TabItemTheme)?.button)}>
+<li {...restProps} class={base({ class: clsx((theme as TabItemTheme)?.base, className) })} role="presentation">
+  <button type="button" onclick={() => (open = true)} role="tab" id={tabId} aria-controls={ctx.panelId} aria-selected={open} {disabled} class={button({ class: clsx(open ? (activeClass ?? active()) : (inactiveClass ?? inactive()), (theme as TabItemTheme)?.button) })}>
     {#if titleSlot}
       {@render titleSlot()}
     {:else}
@@ -42,7 +43,7 @@
   </button>
 
   {#if open && children}
-    <div class={cn(content(), (theme as TabItemTheme)?.content)}>
+    <div class={content({ class: clsx((theme as TabItemTheme)?.content) })}>
       <div use:init>
         {@render children()}
       </div>

package/dist/tabs/Tabs.svelte

@@ -4,7 +4,6 @@
   import { setContext } from "svelte";
   import { tabs, type TabsTheme } from ".";
   import type { TabsProps, TabCtxType } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, tabStyle = "none", ulClass, contentClass, divider = true, ...restProps }: TabsProps = $props();
@@ -36,13 +35,13 @@
   }
 </script>
 
-<ul role="tablist" {...restProps} class={cn(base(), clsx(ulClass), (theme as TabsTheme)?.base)}>
+<ul role="tablist" {...restProps} class={base({ class: clsx((theme as TabsTheme)?.base, ulClass) })}>
   {@render children()}
 </ul>
 {#if dividerBool}
-  <div class={cn(dividerClass(), (theme as TabsTheme)?.divider)}></div>
+  <div class={dividerClass({ class: clsx((theme as TabsTheme)?.divider) })}></div>
 {/if}
-<div id={panelId} class={cn(content(), clsx(contentClass), (theme as TabsTheme)?.content)} role="tabpanel" aria-labelledby={panelId} use:init></div>
+<div id={panelId} class={content({ class: clsx((theme as TabsTheme)?.content, contentClass) })} role="tabpanel" aria-labelledby={panelId} use:init></div>
 
 <!--
 @component

package/dist/tabs/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type TabsVaraints = VariantProps<typeof tabs>;
 export declare const tabs: import("tailwind-variants").TVReturnType<{
     tabStyle: {
@@ -89,7 +90,7 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
     inactive: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TabsSlots = keyof typeof tabs.slots;
-export type TabsTheme = Partial<Record<TabsSlots, string>>;
+export type TabsTheme = Partial<Record<TabsSlots, ClassValue>>;
 export declare const tabItem: import("tailwind-variants").TVReturnType<{
     open: {
         true: {
@@ -137,4 +138,4 @@ export declare const tabItem: import("tailwind-variants").TVReturnType<{
     content: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TabItemSlots = keyof typeof tabItem.slots;
-export type TabItemTheme = Partial<Record<TabItemSlots, string>>;
+export type TabItemTheme = Partial<Record<TabItemSlots, ClassValue>>;

package/dist/timeline/Activity.svelte

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

package/dist/timeline/ActivityItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { activityItem, type ActivityItemTheme } from "./index";
   import type { ActivityItemProps } from "../types";
-  import { cn } from "..";
+  import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
   let { activities, liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass, ...restProps }: ActivityItemProps = $props();
@@ -12,19 +12,19 @@
 </script>
 
 {#each activities as { title: name, date, src, alt, text: activity }}
-  <li {...restProps} class={cn(li({ class: liClass }), (theme as ActivityItemTheme)?.li)}>
-    <span class={cn(span({ class: spanClass }), (theme as ActivityItemTheme)?.span)}>
-      <img class={cn(img({ class: imgClass }), (theme as ActivityItemTheme)?.img)} {src} {alt} />
+  <li {...restProps} class={li({ class: clsx((theme as ActivityItemTheme)?.li, liClass) })}>
+    <span class={span({ class: clsx((theme as ActivityItemTheme)?.span, spanClass) })}>
+      <img class={img({ class: clsx((theme as ActivityItemTheme)?.img, imgClass) })} {src} {alt} />
     </span>
-    <div class={cn(outerDiv({ class: outerDivClass }), (theme as ActivityItemTheme)?.outerDiv)}>
-      <div class={cn(innerDiv({ class: innerDivClass }), (theme as ActivityItemTheme)?.innerDiv)}>
-        <time class={cn(time({ class: timeClass }), (theme as ActivityItemTheme)?.time)}>{date}</time>
-        <div class={cn(title({ class: titleClass }), (theme as ActivityItemTheme)?.title)}>
+    <div class={outerDiv({ class: clsx((theme as ActivityItemTheme)?.outerDiv, outerDivClass) })}>
+      <div class={innerDiv({ class: clsx((theme as ActivityItemTheme)?.innerDiv, innerDivClass) })}>
+        <time class={time({ class: clsx((theme as ActivityItemTheme)?.time, timeClass) })}>{date}</time>
+        <div class={title({ class: clsx((theme as ActivityItemTheme)?.title, titleClass) })}>
           {@html name}
         </div>
       </div>
       {#if activity}
-        <div class={cn(text({ class: textClass }), (theme as ActivityItemTheme)?.text)}>
+        <div class={text({ class: clsx((theme as ActivityItemTheme)?.text, textClass) })}>
           {@html activity}
         </div>
       {/if}

package/dist/timeline/Group.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { group, type GroupTheme } from ".";
   import type { GroupProps } from "../types";
-  import { cn } from "..";
+  import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, divClass, timeClass, date, olClass, ...restProps }: GroupProps = $props();
@@ -11,9 +11,9 @@
   const { div, time, ol } = $derived(group());
 </script>
 
-<div class={cn(div({ class: divClass }), (theme as GroupTheme)?.div)}>
-  <time class={cn(time({ class: timeClass }), (theme as GroupTheme)?.time)}>{date}</time>
-  <ol {...restProps} class={cn(ol({ class: olClass }), (theme as GroupTheme)?.ol)}>
+<div class={div({ class: clsx((theme as GroupTheme)?.div, divClass) })}>
+  <time class={time({ class: clsx((theme as GroupTheme)?.time, timeClass) })}>{date}</time>
+  <ol {...restProps} class={ol({ class: clsx((theme as GroupTheme)?.ol, olClass) })}>
     {@render children()}
   </ol>
 </div>

package/dist/timeline/GroupItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { groupItem, type GroupItemTheme } from ".";
   import type { GroupItemProps } from "../types";
-  import { cn } from "..";
+  import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
   let { timelines, aClass, imgClass, divClass, titleClass, spanClass, ...restProps }: GroupItemProps = $props();
@@ -13,17 +13,17 @@
 
 {#each timelines as { name, src, alt, isPrivate, href, comment }}
   <li {...restProps}>
-    <a {href} class={cn(a({ class: aClass }), (theme as GroupItemTheme)?.a)}>
-      <img class={cn(img({ class: imgClass }), (theme as GroupItemTheme)?.img)} {src} {alt} />
-      <div class={cn(div({ class: divClass }), (theme as GroupItemTheme)?.div)}>
-        <div class={cn(title({ class: titleClass }), (theme as GroupItemTheme)?.title)}>
+    <a {href} class={a({ class: clsx((theme as GroupItemTheme)?.a, aClass) })}>
+      <img class={img({ class: clsx((theme as GroupItemTheme)?.img, imgClass) })} {src} {alt} />
+      <div class={div({ class: clsx((theme as GroupItemTheme)?.div, divClass) })}>
+        <div class={title({ class: clsx((theme as GroupItemTheme)?.title, titleClass) })}>
           {@html name}
         </div>
         {#if comment}
           <div class="text-sm font-normal">{comment}</div>
         {/if}
 
-        <span class={cn(span({ class: spanClass }), (theme as GroupItemTheme)?.span)}>
+        <span class={span({ class: clsx((theme as GroupItemTheme)?.span, spanClass) })}>
           {#if isPrivate}
             <svg class="me-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />

package/dist/timeline/Timeline.svelte

@@ -3,7 +3,6 @@
   import { timeline } from ".";
   import clsx from "clsx";
   import type { TimelineProps, TimelineVariants } from "../types";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, order = "default", class: className, ...restProps }: TimelineProps = $props();
@@ -11,10 +10,10 @@
   const theme = getTheme("timeline");
 
   setContext<TimelineVariants["order"]>("order", order);
-  const olCls = $derived(timeline({ order, class: clsx(className) }));
+  const olCls = $derived(timeline({ order, class: clsx(theme, className) }));
 </script>
 
-<ol {...restProps} class={cn(olCls, theme)}>
+<ol {...restProps} class={olCls}>
   {@render children()}
 </ol>
 

package/dist/timeline/TimelineItem.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte";
   import { timelineItem, type TimelineItemTheme } from ".";
   import type { TimelineItemProps, TimelineVariants, DateFormat } from "../types";
-  import { cn } from "..";
+  import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, orientationSlot, title, date, dateFormat = "month-year", svgClass, liClass, divClass, timeClass, h3Class, ...restProps }: TimelineItemProps = $props();
@@ -42,31 +42,31 @@
   }
 </script>
 
-<li {...restProps} class={cn(li({ class: liClass }), (theme as TimelineItemTheme)?.li)}>
+<li {...restProps} class={li({ class: clsx((theme as TimelineItemTheme)?.li, liClass) })}>
   {#if order !== "default"}
     {#if orientationSlot && (order === "vertical" || order === "horizontal")}
       {@render orientationSlot()}
     {:else}
-      <div class={cn(div({ class: divClass }), (theme as TimelineItemTheme)?.div)}>
-        <svg aria-hidden="true" class={cn(svg({ class: svgClass }), (theme as TimelineItemTheme)?.svg)} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <div class={div({ class: clsx((theme as TimelineItemTheme)?.div, divClass) })}>
+        <svg aria-hidden="true" class={svg({ class: clsx((theme as TimelineItemTheme)?.svg, svgClass) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
         </svg>
       </div>
     {/if}
   {:else if date}
-    <time datetime={date} class={cn(time({ class: timeClass }), (theme as TimelineItemTheme)?.time)}>
+    <time datetime={date} class={time({ class: clsx((theme as TimelineItemTheme)?.time, timeClass) })}>
       {formatDisplayDate(date, dateFormat)}
     </time>
   {/if}
   {#if title}
-    <h3 class={cn(h3({ class: h3Class }), (theme as TimelineItemTheme)?.h3)}>
+    <h3 class={h3({ class: clsx((theme as TimelineItemTheme)?.h3, h3Class) })}>
       {title}
     </h3>
   {/if}
 
   {#if order !== "default"}
     {#if date}
-      <time datetime={date} class={cn(time({ class: timeClass }), (theme as TimelineItemTheme)?.time)}>
+      <time datetime={date} class={time({ class: clsx((theme as TimelineItemTheme)?.time, timeClass) })}>
         {formatDisplayDate(date, dateFormat)}
       </time>
     {/if}

package/dist/timeline/theme.d.ts

@@ -1,6 +1,7 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export declare const activity: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative border-s border-gray-200 dark:border-gray-700", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative border-s border-gray-200 dark:border-gray-700", unknown, unknown, undefined>>;
-export type ActivityTheme = string;
+export type ActivityTheme = ClassValue;
 export declare const activityItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -69,7 +70,7 @@ export declare const activityItem: import("tailwind-variants").TVReturnType<{
     text: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ActivityItemSlots = keyof typeof activityItem.slots;
-export type ActivityItemTheme = Partial<Record<ActivityItemSlots, string>>;
+export type ActivityItemTheme = Partial<Record<ActivityItemSlots, ClassValue>>;
 export declare const group: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -108,7 +109,7 @@ export declare const group: import("tailwind-variants").TVReturnType<{
     ol: string;
 }, undefined, unknown, unknown, undefined>>;
 export type GroupSlots = keyof typeof group.slots;
-export type GroupTheme = Partial<Record<GroupSlots, string>>;
+export type GroupTheme = Partial<Record<GroupSlots, ClassValue>>;
 export declare const groupItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -159,7 +160,7 @@ export declare const groupItem: import("tailwind-variants").TVReturnType<{
     span: string;
 }, undefined, unknown, unknown, undefined>>;
 export type GroupItemSlots = keyof typeof groupItem.slots;
-export type GroupItemTheme = Partial<Record<GroupItemSlots, string>>;
+export type GroupItemTheme = Partial<Record<GroupItemSlots, ClassValue>>;
 export type TimelineVariants = VariantProps<typeof timeline>;
 export declare const timeline: import("tailwind-variants").TVReturnType<{
     order: {
@@ -186,7 +187,7 @@ export declare const timeline: import("tailwind-variants").TVReturnType<{
         default: string;
     };
 }, undefined, undefined, unknown, unknown, undefined>>;
-export type TimelineTheme = string;
+export type TimelineTheme = ClassValue;
 export declare const timelineItem: import("tailwind-variants").TVReturnType<{
     order: {
         default: {
@@ -306,4 +307,4 @@ export declare const timelineItem: import("tailwind-variants").TVReturnType<{
     svg: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TimelineItemSlots = keyof typeof timelineItem.slots;
-export type TimelineItemTheme = Partial<Record<TimelineItemSlots, string>>;
+export type TimelineItemTheme = Partial<Record<TimelineItemSlots, ClassValue>>;

package/dist/toast/Toast.svelte

@@ -4,7 +4,7 @@
   import { toast, type ToastTheme } from ".";
   import type { ToastProps } from "../types";
   import { fly } from "svelte/transition";
-  import { cn } from "..";
+  import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, icon, toastStatus = $bindable(true), dismissable = true, color = "primary", position, iconClass, contentClass, align = true, params, transition = fly, class: className, onclose, ...restProps }: ToastProps = $props();
@@ -20,19 +20,19 @@
 </script>
 
 {#if toastStatus}
-  <div role="alert" transition:transition={params as ParamsType} {...restProps} class={cn(base({ class: className }), (theme as ToastTheme)?.base)}>
+  <div role="alert" transition:transition={params as ParamsType} {...restProps} class={base({ class: clsx((theme as ToastTheme)?.base, className) })}>
     {#if icon}
-      <div class={cn(iconVariants({ class: iconClass }), (theme as ToastTheme)?.icon)}>
+      <div class={iconVariants({ class: clsx((theme as ToastTheme)?.icon, iconClass) })}>
         {@render icon()}
       </div>
     {/if}
 
-    <div class={cn(content({ class: contentClass }), (theme as ToastTheme)?.content)}>
+    <div class={content({ class: clsx((theme as ToastTheme)?.content, contentClass) })}>
       {@render children()}
     </div>
 
     {#if dismissable}
-      <CloseButton class={cn(close(), (theme as ToastTheme)?.close)} ariaLabel="Remove toast" {color} onclick={handleClose} />
+      <CloseButton class={close({ class: clsx((theme as ToastTheme)?.close) })} ariaLabel="Remove toast" {color} onclick={handleClose} />
     {/if}
   </div>
 {/if}

package/dist/toast/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type ToastVaraints = VariantProps<typeof toast>;
 export declare const toast: import("tailwind-variants").TVReturnType<{
     position: {
@@ -320,4 +321,4 @@ export declare const toast: import("tailwind-variants").TVReturnType<{
     close: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ToastSlots = keyof typeof toast.slots;
-export type ToastTheme = Partial<Record<ToastSlots, string>>;
+export type ToastTheme = Partial<Record<ToastSlots, ClassValue>>;

package/dist/toolbar/Toolbar.svelte

@@ -4,7 +4,6 @@
   import { toolbar, type ToolbarTheme } from "./";
   import type { ToolbarProps } from "../types";
   import clsx from "clsx";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, end, color, embedded, class: className, ...restProps }: ToolbarProps = $props();
@@ -29,8 +28,8 @@
   // let divClass: string = twMerge('flex justify-between items-center', !embedded && 'py-2 px-3', className);
 </script>
 
-<div {...restProps} class={cn(base({ class: clsx(className) }), (theme as ToolbarTheme)?.base)}>
-  <div class={cn(content(), (theme as ToolbarTheme)?.content)}>
+<div {...restProps} class={base({ class: clsx((theme as ToolbarTheme)?.base, className) })}>
+  <div class={content({ class: clsx((theme as ToolbarTheme)?.content) })}>
     {@render children?.()}
   </div>
   {#if end}

package/dist/toolbar/ToolbarButton.svelte

@@ -3,7 +3,6 @@
   import { toolbarButton } from ".";
   import type { ToolbarButtonProps } from "../types";
   import clsx from "clsx";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   const background = getContext("background");
@@ -11,23 +10,23 @@
 
   const theme = getTheme("toolbarButton");
 
-  const buttonClass = $derived(
+  const buttonCls = $derived(
     toolbarButton({
       color,
       size,
       background: !!background,
-      class: clsx(className)
+      class: clsx(theme, className)
     })
   );
 </script>
 
 {#if restProps.href === undefined}
-  <button type="button" {...restProps} class={cn(buttonClass, theme)} aria-label={ariaLabel ?? name}>
+  <button type="button" {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
     {#if name}<span class="sr-only">{name}</span>{/if}
     {@render children?.()}
   </button>
 {:else}
-  <a {...restProps} class={buttonClass} aria-label={ariaLabel ?? name}>
+  <a {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
     {#if name}<span class="sr-only">{name}</span>{/if}
     {@render children?.()}
   </a>

package/dist/toolbar/ToolbarGroup.svelte

@@ -4,20 +4,19 @@
   import { toolbarGroup } from ".";
   import type { ToolbarGroupProps } from "../types";
   import clsx from "clsx";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, spacing, padding, position = "middle", class: className, ...restProps }: ToolbarGroupProps = $props();
 
   const theme = getTheme("toolbarGroup");
 
-  const groupClass = $derived(toolbarGroup({ spacing, padding, position, class: clsx(className) }));
+  const groupCls = $derived(toolbarGroup({ spacing, padding, position, class: clsx(theme, className) }));
 
   const options: Writable<boolean> = getContext("toolbar");
   if (options) $options = true;
 </script>
 
-<div {...restProps} class={cn(groupClass, theme)}>
+<div {...restProps} class={groupCls}>
   {@render children?.()}
 </div>
 

package/dist/toolbar/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type ToolbarVariants = VariantProps<typeof toolbar>;
 export declare const toolbar: import("tailwind-variants").TVReturnType<{
     embedded: {
@@ -197,7 +198,7 @@ export declare const toolbar: import("tailwind-variants").TVReturnType<{
     content: string;
 }, undefined, unknown, unknown, undefined>>;
 export type ToolbarSlots = keyof typeof toolbar.slots;
-export type ToolbarTheme = Partial<Record<ToolbarSlots, string>>;
+export type ToolbarTheme = Partial<Record<ToolbarSlots, ClassValue>>;
 export type ToolbarGroupVariants = VariantProps<typeof toolbarGroup>;
 export declare const toolbarGroup: import("tailwind-variants").TVReturnType<{
     spacing: {
@@ -245,7 +246,7 @@ export declare const toolbarGroup: import("tailwind-variants").TVReturnType<{
         last: string;
     };
 }, undefined, "flex items-center", unknown, unknown, undefined>>;
-export type ToolbarGroupTheme = string;
+export type ToolbarGroupTheme = ClassValue;
 export type ToolbarButtonVariants = VariantProps<typeof toolbarButton>;
 export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
     color: {
@@ -320,4 +321,4 @@ export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "focus:outline-hidden whitespace-normal", unknown, unknown, undefined>>;
-export type ToolbarButtonTheme = string;
+export type ToolbarButtonTheme = ClassValue;

package/dist/tooltip/Tooltip.svelte

@@ -3,7 +3,6 @@
   import Popper from "../utils/Popper.svelte";
   import { tooltip, type TooltipTheme } from "./theme";
   import type { TooltipProps, TriggeredToggleEvent } from "..";
-  import { cn } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { type = "dark", color = undefined, trigger = "hover", arrow = true, children, placement = "top", onbeforetoggle: _onbeforetoggle, class: className, isOpen = $bindable(false), ...restProps }: TooltipProps = $props();
@@ -22,7 +21,7 @@
   }
 </script>
 
-<Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={cn(base({ class: clsx(className) }), (theme as TooltipTheme)?.base)} {onbeforetoggle}>
+<Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={base({ class: clsx((theme as TooltipTheme)?.base, className) })} {onbeforetoggle}>
   <div class="pointer-events-none">{@render children()}</div>
 </Popper>
 

package/dist/tooltip/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type TooltipVariants = VariantProps<typeof tooltip>;
 export declare const tooltip: import("tailwind-variants").TVReturnType<{
     type: {
@@ -233,4 +234,4 @@ export declare const tooltip: import("tailwind-variants").TVReturnType<{
     arrowBase: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TooltipSlots = keyof typeof tooltip.slots;
-export type TooltipTheme = Partial<Record<TooltipSlots, string>>;
+export type TooltipTheme = Partial<Record<TooltipSlots, ClassValue>>;

package/dist/types.d.ts

@@ -1,8 +1,7 @@
 import type { fade, fly, scale, slide } from "svelte/transition";
 import type { Coords, Middleware, Placement, Strategy } from "@floating-ui/dom";
-import type { ClassValue } from "clsx";
 import type { Component, Snippet } from "svelte";
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLBlockquoteAttributes, HTMLButtonAttributes, HTMLDialogAttributes, HTMLImgAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLLiAttributes, HTMLOlAttributes, HTMLSelectAttributes, HTMLSourceAttributes, HTMLTableAttributes, HTMLTdAttributes, HTMLTextareaAttributes, HTMLThAttributes, HTMLTrackAttributes, HTMLVideoAttributes, SVGAttributes, FullAutoFill } from "svelte/elements";
+import type { ClassValue, HTMLAnchorAttributes, HTMLAttributes, HTMLBlockquoteAttributes, HTMLButtonAttributes, HTMLDialogAttributes, HTMLImgAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLLiAttributes, HTMLOlAttributes, HTMLSelectAttributes, HTMLSourceAttributes, HTMLTableAttributes, HTMLTdAttributes, HTMLTextareaAttributes, HTMLThAttributes, HTMLTrackAttributes, HTMLVideoAttributes, SVGAttributes, FullAutoFill } from "svelte/elements";
 import { type Writable } from "svelte/store";
 import type { BlurParams, EasingFunction, FadeParams, FlyParams, ScaleParams, SlideParams, TransitionConfig } from "svelte/transition";
 import { type VariantProps } from "tailwind-variants";
@@ -1505,7 +1504,7 @@ export interface TabCtxType {
     panelId: string;
 }
 export interface ThemeConfig {
-    [key: string]: string | ThemeConfig;
+    [key: string]: ClassValue | ThemeConfig;
 }
 export type TimelineVariants = VariantProps<typeof timeline>;
 export interface ActivityType {

package/dist/typography/anchor/A.svelte

@@ -2,14 +2,13 @@
   import clsx from "clsx";
   import { anchor } from "./index";
   import type { AnchorProps } from "../../types";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, color = "primary", asButton = false, onclick, href = "#", class: className, ...restProps }: AnchorProps = $props();
 
   const theme = getTheme("a");
 
-  let linkClass = $derived(anchor({ color, class: clsx(className) }));
+  let linkCls = $derived(anchor({ color, class: clsx(theme, className) }));
 
   // Handle click events when in button mode
   function handleClick(event: MouseEvent) {
@@ -30,12 +29,12 @@
 
 {#if asButton}
   <!-- Render as a button that looks like a link -->
-  <button type="button" class={cn(linkClass, theme)} onclick={handleClick} {...buttonProps}>
+  <button type="button" class={linkCls} onclick={handleClick} {...buttonProps}>
     {@render children()}
   </button>
 {:else}
   <!-- Standard anchor behavior -->
-  <a {href} class={cn(linkClass, theme)} onclick={handleClick} {...restProps}>
+  <a {href} class={linkCls} onclick={handleClick} {...restProps}>
     {@render children()}
   </a>
 {/if}

package/dist/typography/anchor/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type AnchorVariants = VariantProps<typeof anchor>;
 export declare const anchor: import("tailwind-variants").TVReturnType<{
     color: {
@@ -70,4 +71,4 @@ export declare const anchor: import("tailwind-variants").TVReturnType<{
         rose: string;
     };
 }, undefined, "inline-flex items-center hover:underline", unknown, unknown, undefined>>;
-export type AnchorTheme = string;
+export type AnchorTheme = ClassValue;

package/dist/typography/blockquote/Blockquote.svelte

@@ -2,26 +2,25 @@
   import clsx from "clsx";
   import { blockquote } from "./index";
   import type { BlockquoteProps } from "../../types";
-  import { cn } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, border, italic = true, bg, alignment = "left", size = "lg", ...restProps }: BlockquoteProps = $props();
 
   const theme = getTheme("blockquote");
 
-  let blockquoteClass = $derived(
+  let blockquoteCls = $derived(
     blockquote({
       border,
       italic,
       bg,
       alignment,
       size,
-      class: clsx(className)
+      class: clsx(theme, className)
     })
   );
 </script>
 
-<blockquote {...restProps} class={cn(blockquoteClass, theme)}>
+<blockquote {...restProps} class={blockquoteCls}>
   {@render children()}
 </blockquote>