flowbite-svelte 1.10.4 → 1.10.6

package/dist/footer/FooterBrand.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { footerBrand, type FooterBrandTheme } from ".";
-  import { type FooterBrandProps, cn } from "..";
+  import clsx from "clsx";
+  import { type FooterBrandProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, aClass, spanClass, imgClass, href, src, alt, name, ...restProps }: FooterBrandProps = $props();
@@ -11,19 +12,19 @@
 </script>
 
 {#if href}
-  <a {...restProps} {href} class={cn(base(), aClass, (theme as FooterBrandTheme)?.base)}>
+  <a {...restProps} {href} class={base({ class: clsx((theme as FooterBrandTheme)?.base, aClass) })}>
     {#if src}
-      <img {src} class={cn(img(), imgClass, (theme as FooterBrandTheme)?.img)} {alt} />
+      <img {src} class={img({ class: clsx((theme as FooterBrandTheme)?.img, imgClass) })} {alt} />
     {/if}
     {#if name}
-      <span class={cn(span(), spanClass, (theme as FooterBrandTheme)?.span)}>{name}</span>
+      <span class={span({ class: clsx((theme as FooterBrandTheme)?.span, spanClass) })}>{name}</span>
     {/if}
     {#if children}
       {@render children()}
     {/if}
   </a>
 {:else}
-  <img {src} class={cn(img(), imgClass)} {alt} />
+  <img {src} class={img({ class: clsx(imgClass) })} {alt} />
 {/if}
 
 <!--

package/dist/footer/FooterCopyright.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { footerCopyright, type FooterCopyrightTheme } from ".";
-  import { type FooterCopyrightProps, cn } from "..";
+  import clsx from "clsx";
+  import { type FooterCopyrightProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { spanClass, aClass, href, by, copyrightMessage = "All Rights Reserved.", year, bySpanClass, ...restProps }: FooterCopyrightProps = $props();
@@ -12,14 +13,14 @@
   const { base, link, bySpan } = footerCopyright();
 </script>
 
-<span class={cn(base(), spanClass, (theme as FooterCopyrightTheme)?.base)}>
+<span class={base({ class: clsx((theme as FooterCopyrightTheme)?.base, spanClass) })}>
   &copy; {year}
   {#if href}
-    <a {...restProps} {href} class={cn(link(), aClass, (theme as FooterCopyrightTheme)?.link)}>
+    <a {...restProps} {href} class={link({ class: clsx((theme as FooterCopyrightTheme)?.link, aClass) })}>
       {by}
     </a>
   {:else}
-    <span class={cn(bySpan(), bySpanClass, (theme as FooterCopyrightTheme)?.bySpan)}>{by}</span>
+    <span class={bySpan({ class: clsx((theme as FooterCopyrightTheme)?.bySpan, bySpanClass) })}>{by}</span>
   {/if}
   {copyrightMessage}
 </span>

package/dist/footer/FooterIcon.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { footerIcon } from ".";
-  import { type FooterIconProps, cn } from "..";
+  import clsx from "clsx";
+  import { type FooterIconProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, href, ariaLabel, class: className, ...restProps }: FooterIconProps = $props();
@@ -9,7 +10,7 @@
 </script>
 
 {#if href}
-  <a {...restProps} {href} aria-label={ariaLabel} class={cn(footerIcon(), className, theme)}>
+  <a {...restProps} {href} aria-label={ariaLabel} class={footerIcon({ class: clsx(theme, className) })}>
     {@render children()}
   </a>
 {:else}

package/dist/footer/FooterLink.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { footerLink, type FooterLinkTheme } from ".";
-  import { type FooterLinkProps, cn } from "..";
+  import clsx from "clsx";
+  import { type FooterLinkProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { children, liClass, aClass, href, ...restProps }: FooterLinkProps = $props();
@@ -10,8 +11,8 @@
   const { base, link } = footerLink();
 </script>
 
-<li class={cn(base(), liClass, (theme as FooterLinkTheme)?.base)}>
-  <a {...restProps} {href} class={cn(link(), aClass, (theme as FooterLinkTheme)?.link)}>
+<li class={base({ class: clsx((theme as FooterLinkTheme)?.base, liClass) })}>
+  <a {...restProps} {href} class={link({ class: clsx((theme as FooterLinkTheme)?.link, aClass) })}>
     {@render children()}
   </a>
 </li>

package/dist/footer/FooterLinkGroup.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { footerLinkGroup } from ".";
-  import { type FooterLinkGroupProps, cn } from "..";
+  import clsx from "clsx";
+  import { type FooterLinkGroupProps } from "..";
   import { getTheme } from "../theme/themeUtils";
 
   let { class: className, children, ...restProps }: FooterLinkGroupProps = $props();
@@ -8,7 +9,7 @@
   const theme = getTheme("footerLinkGroup");
 </script>
 
-<ul {...restProps} class={cn(footerLinkGroup(), className, theme)}>
+<ul {...restProps} class={footerLinkGroup({ class: clsx(theme, className) })}>
   {@render children()}
 </ul>
 

package/dist/footer/theme.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 export declare const footer: import("tailwind-variants").TVReturnType<{
     footerType: {
         default: string;
@@ -23,7 +24,7 @@ export declare const footer: import("tailwind-variants").TVReturnType<{
         sticky: string;
     };
 }, undefined, "bg-white dark:bg-gray-800", unknown, unknown, undefined>>;
-export type FooterTheme = string;
+export type FooterTheme = ClassValue;
 export declare const footerBrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -62,7 +63,7 @@ export declare const footerBrand: import("tailwind-variants").TVReturnType<{
     img: string;
 }, undefined, unknown, unknown, undefined>>;
 export type FooterBrandSlots = keyof typeof footerBrand.slots;
-export type FooterBrandTheme = Partial<Record<FooterBrandSlots, string>>;
+export type FooterBrandTheme = Partial<Record<FooterBrandSlots, ClassValue>>;
 export declare const footerCopyright: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -101,11 +102,11 @@ export declare const footerCopyright: import("tailwind-variants").TVReturnType<{
     bySpan: string;
 }, undefined, unknown, unknown, undefined>>;
 export type FooterCopyrightSlots = keyof typeof footerCopyright.slots;
-export type FooterCopyrightTheme = Partial<Record<FooterCopyrightSlots, string>>;
+export type FooterCopyrightTheme = Partial<Record<FooterCopyrightSlots, ClassValue>>;
 export declare const footerIcon: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 hover:text-gray-900 dark:hover:text-white", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 hover:text-gray-900 dark:hover:text-white", unknown, unknown, undefined>>;
-export type FooterIconTheme = string;
+export type FooterIconTheme = ClassValue;
 export declare const footerLinkGroup: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-600 dark:text-gray-400", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-600 dark:text-gray-400", unknown, unknown, undefined>>;
-export type FooterLinkGroupTheme = string;
+export type FooterLinkGroupTheme = ClassValue;
 export declare const footerLink: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -138,4 +139,4 @@ export declare const footerLink: import("tailwind-variants").TVReturnType<{
     link: string;
 }, undefined, unknown, unknown, undefined>>;
 export type FooterLinkSlots = keyof typeof footerLink.slots;
-export type FooterLinkTheme = Partial<Record<FooterLinkSlots, string>>;
+export type FooterLinkTheme = Partial<Record<FooterLinkSlots, ClassValue>>;

package/dist/forms/button-toggle/ButtonToggle.svelte

@@ -3,7 +3,8 @@
   import CheckIcon from "./CheckIcon.svelte";
   import { buttonToggle, type ButtonToggleTheme } from ".";
   import type { ButtonToggleVariants } from "./theme";
-  import { type ButtonToggleProps, type ButtonToggleContext, cn } from "../..";
+  import clsx from "clsx";
+  import { type ButtonToggleProps, type ButtonToggleContext } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { value, selected = false, children, iconSlot, color, class: className, iconClass, txtClass, contentClass, ...restProps }: ButtonToggleProps = $props();
@@ -16,7 +17,7 @@
   const size = getContext<ButtonToggleVariants["size"]>("buttonToggleSize");
   const roundedSize = getContext<ButtonToggleVariants["roundedSize"]>("buttonToggleRounded");
   const ctxIconClass = getContext<string | undefined>("ctxIconClass");
-  const actualIconClass = ctxIconClass || cn(iconClass);
+  const actualIconClass = ctxIconClass || clsx(iconClass);
   const ctxBtnClass = getContext<string | undefined>("ctxBtnClass");
 
   function handleClick() {
@@ -28,16 +29,16 @@
   });
 </script>
 
-<button type="button" class={cn(buttonToggle.button({ selected, color: actualColor, size, roundedSize }), ctxBtnClass, className, (theme as ButtonToggleTheme)?.button)} data-selected={selected} onclick={handleClick} role={multiSelect ? "checkbox" : "radio"} aria-checked={selected} {...restProps}>
-  <div class={cn(buttonToggle.content(), contentClass, (theme as ButtonToggleTheme)?.content)}>
+<button type="button" class={buttonToggle.button({ selected, color: actualColor, size, roundedSize, class: clsx((theme as ButtonToggleTheme)?.button, ctxBtnClass, className) })} data-selected={selected} onclick={handleClick} role={multiSelect ? "checkbox" : "radio"} aria-checked={selected} {...restProps}>
+  <div class={buttonToggle.content({ class: clsx((theme as ButtonToggleTheme)?.content, contentClass) })}>
     {#if selected}
       {#if iconSlot}
         {@render iconSlot()}
       {:else}
-        <CheckIcon class={cn("absolute left-0 flex-shrink-0 text-green-600", actualIconClass)} />
+        <CheckIcon class={clsx("absolute left-0 flex-shrink-0 text-green-600", actualIconClass)} />
       {/if}
     {/if}
-    <span class={cn(buttonToggle.text({ selected }), txtClass, (theme as ButtonToggleTheme)?.text)}>
+    <span class={buttonToggle.text({ selected, class: clsx((theme as ButtonToggleTheme)?.text, txtClass) })}>
       {@render children()}
     </span>
   </div>

package/dist/forms/button-toggle/ButtonToggleGroup.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import { type ButtonToggleGroupProps, buttonToggleGroup, cn } from "../..";
+  import clsx from "clsx";
+  import { type ButtonToggleGroupProps, buttonToggleGroup } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { multiSelect = false, name = "toggle-group", value = multiSelect ? [] : null, color, size = "md", roundedSize = "md", onSelect = (val: any) => {}, children, ctxIconClass, ctxBtnClass, class: className, ...restProps }: ButtonToggleGroupProps = $props();
 
   const theme = getTheme("buttonToggleGroup");
 
-  const base = $derived(buttonToggleGroup({ roundedSize }));
+  const base = $derived(buttonToggleGroup({ roundedSize, class: clsx(theme, className) }));
   type SelectedValue = string | null | string[];
 
   let selectedValues = $state<SelectedValue>(multiSelect ? [] : null);
@@ -59,12 +60,12 @@
   setContext("buttonToggleColor", color);
   setContext("buttonToggleSize", size);
   setContext("buttonToggleRounded", roundedSize);
-  setContext("ctxIconClass", cn(ctxIconClass));
-  setContext("ctxBtnClass", cn(ctxBtnClass));
+  setContext("ctxIconClass", clsx(ctxIconClass));
+  setContext("ctxBtnClass", clsx(ctxBtnClass));
 </script>
 
 <div class="inline">
-  <div class={cn(base, className, theme)} role={multiSelect ? "group" : "radiogroup"} aria-label={name} {...restProps}>
+  <div class={base} role={multiSelect ? "group" : "radiogroup"} aria-label={name} {...restProps}>
     {@render children()}
   </div>
 </div>

package/dist/forms/button-toggle/CheckIcon.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { type CheckIconProps, cn } from "../..";
+  import { type CheckIconProps } from "../..";
+  import clsx from "clsx";
   let { class: className, ...restProps }: CheckIconProps = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cn(className)} {...restProps}>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={clsx(className)} {...restProps}>
   <polyline points="20 6 9 17 4 12"></polyline>
 </svg>
 

package/dist/forms/button-toggle/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export declare const buttonToggleGroup: import("tailwind-variants").TVReturnType<{
     roundedSize: {
         sm: string;
@@ -24,7 +25,7 @@ export declare const buttonToggleGroup: import("tailwind-variants").TVReturnType
         full: string;
     };
 }, undefined, "inline-flex border border-gray-300 overflow-hidden", unknown, unknown, undefined>>;
-export type ButtonToggleGroupTheme = string;
+export type ButtonToggleGroupTheme = ClassValue;
 export declare const buttonToggle: {
     button: import("tailwind-variants").TVReturnType<{
         selected: {
@@ -169,9 +170,9 @@ export declare const buttonToggle: {
     }, undefined, "transition-all duration-200 ml-0", unknown, unknown, undefined>>;
 };
 export type ButtonToggleTheme = {
-    button?: string;
-    content?: string;
-    text?: string;
+    button?: ClassValue;
+    content?: ClassValue;
+    text?: ClassValue;
 };
 export type ButtonToggleVariants = VariantProps<typeof buttonToggle.button>;
 export type ButtonToggleContentVariants = VariantProps<typeof buttonToggle.content>;

package/dist/forms/checkbox/Checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { checkbox, type CheckboxTheme } from ".";
-  import { type CheckboxProps, type CheckboxItem, Label, cn } from "../..";
+  import clsx from "clsx";
+  import { type CheckboxProps, type CheckboxItem, Label } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, color = "primary", custom, inline, tinted, rounded, group = $bindable([]), choices = [], checked = $bindable(false), indeterminate, class: className, divClass, disabled = false, value, labelProps = {}, ...restProps }: CheckboxProps = $props();
@@ -23,17 +24,17 @@
 
 {#if choices.length > 0}
   {#each choices as choice, i}
-    <div class={cn(divStyle(), divClass, (theme as CheckboxTheme)?.div)}>
+    <div class={divStyle({ class: clsx((theme as CheckboxTheme)?.div, divClass) })}>
       <Label show={true} {...labelProps}>
-        <input type="checkbox" value={choice.value} checked={choice.checked ?? false} {disabled} bind:group {...restProps} class={cn(base(), className, (theme as CheckboxTheme)?.base)} />
+        <input type="checkbox" value={choice.value} checked={choice.checked ?? false} {disabled} bind:group {...restProps} class={base({ class: clsx((theme as CheckboxTheme)?.base, className) })} />
         {renderLabel(choice)}
       </Label>
     </div>
   {/each}
 {:else}
-  <div class={cn(divStyle(), divClass, (theme as CheckboxTheme)?.div)}>
+  <div class={divStyle({ class: clsx((theme as CheckboxTheme)?.div, divClass) })}>
     <Label show={true} {...labelProps}>
-      <input type="checkbox" {value} bind:checked {indeterminate} {disabled} {...restProps} class={cn(base(), className, (theme as CheckboxTheme)?.base)} />
+      <input type="checkbox" {value} bind:checked {indeterminate} {disabled} {...restProps} class={base({ class: clsx((theme as CheckboxTheme)?.base, className) })} />
       {#if children}
         {@render children({ value, checked, disabled })}
       {/if}

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Button from "../../buttons/Button.svelte";
-  import { type CheckboxButtonProps, cn } from "../..";
+  import clsx from "clsx";
+  import { type CheckboxButtonProps } from "../..";
   import { checkboxbutton } from "./theme";
   import { getTheme } from "../../theme/themeUtils";
 
@@ -45,7 +46,7 @@
     }
   }
 
-  let buttonClass: string = $derived(cn(checkboxbutton({ inline, checked }), className, theme));
+  let buttonClass: string = $derived(checkboxbutton({ inline, checked, class: clsx(theme, className) }));
 </script>
 
 <Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>

package/dist/forms/checkbox/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type CheckboxVariants = VariantProps<typeof checkbox>;
 export declare const checkbox: import("tailwind-variants").TVReturnType<{
     color: {
@@ -290,7 +291,7 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
     div: string;
 }, undefined, unknown, unknown, undefined>>;
 export type CheckboxSlots = keyof typeof checkbox.slots;
-export type CheckboxTheme = Partial<Record<CheckboxSlots, string>>;
+export type CheckboxTheme = Partial<Record<CheckboxSlots, ClassValue>>;
 export declare const checkboxbutton: import("tailwind-variants").TVReturnType<{
     inline: {
         true: string;
@@ -316,4 +317,4 @@ export declare const checkboxbutton: import("tailwind-variants").TVReturnType<{
         true: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
-export type CheckboxButtonTheme = string;
+export type CheckboxButtonTheme = ClassValue;

package/dist/forms/dropzone/Dropzone.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { DragEventHandler, ChangeEventHandler } from "svelte/elements";
   import { dropzone } from ".";
-  import { type DropzoneProps, cn } from "../..";
+  import clsx from "clsx";
+  import { type DropzoneProps } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   type HTMLInputElementWithFiles = HTMLInputElement & { files: FileList | null };
@@ -52,7 +53,7 @@
   };
 </script>
 
-<button class={cn(dropzone(), className, theme)} onkeydown={keydown} onclick={onClick} ondrop={onDrop} ondragover={onDragOver} type="button">
+<button class={dropzone({ class: clsx(theme, className) })} onkeydown={keydown} onclick={onClick} ondrop={onDrop} ondragover={onDragOver} type="button">
   {@render children()}
 </button>
 <label class="hidden">

package/dist/forms/dropzone/theme.d.ts

@@ -1,2 +1,3 @@
+import type { ClassValue } from "svelte/elements";
 export declare const dropzone: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600", unknown, unknown, undefined>>;
-export type DropzoneTheme = string;
+export type DropzoneTheme = ClassValue;

package/dist/forms/fileupload/Fileupload.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { fileupload, type FileuploadTheme } from ".";
-  import { CloseButton, type FileuploadProps, cn } from "../..";
+  import clsx from "clsx";
+  import { CloseButton, type FileuploadProps } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { files = $bindable(), size = "md", clearable = false, elementRef = $bindable(), class: className, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, wrapperClass, ...restProps }: FileuploadProps = $props();
@@ -18,10 +19,10 @@
   };
 </script>
 
-<div class={cn(wrapper(), wrapperClass, (theme as FileuploadTheme)?.wrapper)}>
-  <input type="file" bind:files bind:this={elementRef} {...restProps} class={cn(base({ size }), className, (theme as FileuploadTheme)?.base)} />
+<div class={wrapper({ class: clsx((theme as FileuploadTheme)?.wrapper, wrapperClass) })}>
+  <input type="file" bind:files bind:this={elementRef} {...restProps} class={base({ size, class: clsx((theme as FileuploadTheme)?.base, className) })} />
   {#if files && files.length > 0 && clearable}
-    <CloseButton onclick={clearAll} class={cn(right(), clearableClass, (theme as FileuploadTheme)?.right)} color={clearableColor} aria-label="Clear selected files" svgClass={cn(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={right({ class: clsx((theme as FileuploadTheme)?.right, clearableClass) })} color={clearableColor} aria-label="Clear selected files" svgClass={clsx(clearableSvgClass)} />
   {/if}
 </div>
 

package/dist/forms/fileupload/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type FileuploadViariants = VariantProps<typeof fileupload>;
 export declare const fileupload: import("tailwind-variants").TVReturnType<{
     size: {
@@ -50,4 +51,4 @@ export declare const fileupload: import("tailwind-variants").TVReturnType<{
     right: string;
 }, undefined, unknown, unknown, undefined>>;
 export type FileuploadSlots = keyof typeof fileupload.slots;
-export type FileuploadTheme = Partial<Record<FileuploadSlots, string>>;
+export type FileuploadTheme = Partial<Record<FileuploadSlots, ClassValue>>;

package/dist/forms/floating-label/FloatingLabelInput.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { idGenerator } from "../../utils";
   import { floatingLabelInput, type FloatingLabelInputTheme } from ".";
-  import { type FloatingLabelInputProps, CloseButton, cn } from "../..";
+  import clsx from "clsx";
+  import { type FloatingLabelInputProps, CloseButton } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, id = idGenerator(), value = $bindable(), elementRef = $bindable(), "aria-describedby": ariaDescribedby, variant = "standard", size = "default", color = "default", class: className, inputClass, labelClass, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, ...restProps }: FloatingLabelInputProps = $props();
@@ -136,17 +137,17 @@
   <div tabindex="-1" bind:this={dummyFocusDiv} class="sr-only"></div>
 {/if}
 
-<div class={cn(base(), isCombobox ? "relative" : "", className, (theme as FloatingLabelInputTheme)?.base)}>
-  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} aria-describedby={ariaDescribedby} class={cn(input(), inputClass, (theme as FloatingLabelInputTheme)?.input)} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} />
+<div class={base({ class: clsx(isCombobox ? "relative" : "", (theme as FloatingLabelInputTheme)?.base, className) })}>
+  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} aria-describedby={ariaDescribedby} class={input({ class: clsx((theme as FloatingLabelInputTheme)?.input, inputClass) })} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} />
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as FloatingLabelInputTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={closebutton({ class: clsx((theme as FloatingLabelInputTheme)?.closebutton, clearableClass) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(clearableSvgClass)} />
   {/if}
-  <label for={id} class={cn(label(), labelClass, (theme as FloatingLabelInputTheme)?.label)}>
+  <label for={id} class={label({ class: clsx((theme as FloatingLabelInputTheme)?.label, labelClass) })}>
     {@render children()}
   </label>
 
   {#if isCombobox && isFocused && filteredSuggestions.length > 0}
-    <div class={cn(combo(), comboClass, (theme as FloatingLabelInputTheme)?.combo)}>
+    <div class={combo({ class: clsx((theme as FloatingLabelInputTheme)?.combo, comboClass) })}>
       {#each filteredSuggestions as item, i}
         <button type="button" class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none" onclick={() => selectItem(item)} onmouseenter={() => (selectedIndex = i)}>
           {item}

package/dist/forms/floating-label/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type FloatingLabelInputVaratiants = VariantProps<typeof floatingLabelInput>;
 export declare const floatingLabelInput: import("tailwind-variants").TVReturnType<{
     variant: {
@@ -344,4 +345,4 @@ export declare const floatingLabelInput: import("tailwind-variants").TVReturnTyp
     combo: string;
 }, undefined, unknown, unknown, undefined>>;
 export type FloatingLabelInputSlots = keyof typeof floatingLabelInput.slots;
-export type FloatingLabelInputTheme = Partial<Record<FloatingLabelInputSlots, string>>;
+export type FloatingLabelInputTheme = Partial<Record<FloatingLabelInputSlots, ClassValue>>;

package/dist/forms/helper/Helper.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { helper } from ".";
-  import { type HelperProps, cn } from "../..";
+  import { type HelperProps } from "../..";
+  import clsx from "clsx";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, color = "gray", ...restProps }: HelperProps = $props();
 
   const theme = getTheme("helper");
 
-  const base = $derived(cn(helper({ color }), className, theme));
+  const base = $derived(helper({ color, class: clsx(theme, className) }));
 </script>
 
 <p {...restProps} class={base}>

package/dist/forms/helper/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type HelperVariants = VariantProps<typeof helper>;
 export declare const helper: import("tailwind-variants").TVReturnType<{
     color: {
@@ -73,4 +74,4 @@ export declare const helper: import("tailwind-variants").TVReturnType<{
         rose: string;
     };
 }, undefined, "text-xs font-normal text-gray-500 dark:text-gray-300", unknown, unknown, undefined>>;
-export type HelperTheme = string;
+export type HelperTheme = ClassValue;

package/dist/forms/input-addon/InputAddon.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { SizeType } from "../../types";
   import { getContext } from "svelte";
-  import { type InputAddonProps, clampSize, cn } from "../..";
+  import clsx from "clsx";
+  import { type InputAddonProps, clampSize } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, size, ...restProps }: InputAddonProps = $props();
@@ -32,7 +33,7 @@
   // size: explicit, inherited, default
   let _size = size || clampSize(group?.size) || "md";
 
-  let divClass: string = cn(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border", group && "not-first:-ms-px", "first:rounded-s-lg last:rounded-e-lg", className, theme);
+  let divClass: string = clsx(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border", group && "not-first:-ms-px", "first:rounded-s-lg last:rounded-e-lg", theme, className);
 </script>
 
 <div {...restProps} class={divClass}>

package/dist/forms/input-field/Input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { CloseButton, type SizeType, type InputProps, type InputValue, cn } from "../..";
+  import clsx from "clsx";
+  import { CloseButton, type SizeType, type InputProps, type InputValue } from "../..";
   import { input, clampSize, type InputTheme } from ".";
   import { getTheme } from "../../theme/themeUtils";
 
@@ -208,9 +209,9 @@
 {/if}
 
 {#if isCombobox}
-  <div class={cn(isCombobox ? "relative w-full" : "", wrapperClass)}>
+  <div class={clsx(isCombobox ? "relative w-full" : "", wrapperClass)}>
     {#if right || left || clearable}
-      <div class={cn(base(), divClass, (theme as InputTheme)?.base)}>
+      <div class={base({ class: clsx((theme as InputTheme)?.base, divClass) })}>
         {@render inputContent()}
       </div>
     {:else}
@@ -218,10 +219,10 @@
     {/if}
 
     {#if isCombobox && isFocused && filteredSuggestions.length > 0}
-      <div class={cn(combo(), comboClass, (theme as InputTheme)?.combo)}>
+      <div class={combo({ class: clsx((theme as InputTheme)?.combo, comboClass) })}>
         {#each filteredSuggestions as item, i}
           <button type="button" class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none" onclick={() => selectItem(item)} onmouseenter={() => (selectedIndex = i)}>
-            <p class={cn(comboItem(), comboItemClass, (theme as InputTheme)?.comboItem)}>{item}</p>
+            <p class={comboItem({ class: clsx((theme as InputTheme)?.comboItem, comboItemClass) })}>{item}</p>
           </button>
         {/each}
       </div>
@@ -230,7 +231,7 @@
 {:else if group}
   {@render inputContent()}
 {:else if right || left || clearable}
-  <div class={cn(base(), divClass, (theme as InputTheme)?.base)}>
+  <div class={base({ class: clsx((theme as InputTheme)?.base, divClass) })}>
     {@render inputContent()}
   </div>
 {:else}
@@ -239,20 +240,20 @@
 
 {#snippet inputContent()}
   {#if left}
-    <div class={cn(leftCls(), leftClass, (theme as InputTheme)?.left)}>
+    <div class={leftCls({ class: clsx((theme as InputTheme)?.left, leftClass) })}>
       {@render left()}
     </div>
   {/if}
   {#if children}
     {@render children({ ...restProps, class: inputCls() })}
   {:else}
-    <input {...restProps} bind:value bind:this={elementRef} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} class={cn(inputCls(), className, (theme as InputTheme)?.input)} />
+    <input {...restProps} bind:value bind:this={elementRef} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} class={inputCls({ class: clsx((theme as InputTheme)?.input, className) })} />
     {#if value !== undefined && value !== "" && clearable}
-      <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as InputTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
+      <CloseButton onclick={clearAll} class={closebutton({ class: clsx((theme as InputTheme)?.closebutton, clearableClass) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(clearableSvgClass)} />
     {/if}
   {/if}
   {#if right}
-    <div class={cn(rightCls(), rightClass, (theme as InputTheme)?.right)}>
+    <div class={rightCls({ class: clsx((theme as InputTheme)?.right, rightClass) })}>
       {@render right()}
     </div>
   {/if}

package/dist/forms/input-field/theme.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type InputVariants = VariantProps<typeof input>;
 export declare const input: import("tailwind-variants").TVReturnType<{
     size: {
@@ -290,4 +291,4 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     comboItem: string;
 }, undefined, unknown, unknown, undefined>>;
 export type InputSlots = keyof typeof input.slots;
-export type InputTheme = Partial<Record<InputSlots, string>>;
+export type InputTheme = Partial<Record<InputSlots, ClassValue>>;

package/dist/forms/label/Label.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { label } from ".";
-  import { type LabelProps, cn } from "../..";
+  import clsx from "clsx";
+  import { type LabelProps } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, color = "gray", show = true, class: className, ...restProps }: LabelProps = $props();
 
   const theme = getTheme("label");
 
-  let base = $derived(cn(label({ color }), className, theme));
+  let base = $derived(label({ color, class: clsx(theme, className) }));
 </script>
 
 {#if show}