flowbite-svelte 1.10.4 → 1.10.6

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type LabelVariants = VariantProps<typeof label>;
 export declare const label: import("tailwind-variants").TVReturnType<{
     color: {
@@ -73,4 +74,4 @@ export declare const label: import("tailwind-variants").TVReturnType<{
         rose: string;
     };
 }, undefined, "text-sm rtl:text-right font-medium block", unknown, unknown, undefined>>;
-export type LabelTheme = string;
+export type LabelTheme = ClassValue;

package/dist/forms/phoneinput/PhoneInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type PhoneInputProps, cn } from "../..";
+  import { type PhoneInputProps } from "../..";
   import { phoneinput, type PhoneInputTheme } from ".";
   import clsx from "clsx";
   import { getTheme } from "../../theme/themeUtils";
@@ -12,7 +12,7 @@
 </script>
 
 {#snippet phoneIconSnippet()}
-  <svg class={cn(phonesvg(), (theme as PhoneInputTheme)?.phonesvg)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
+  <svg class={phonesvg({ class: clsx((theme as PhoneInputTheme)?.phonesvg) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
     <path d="M18 13.446a3.02 3.02 0 0 0-.946-1.985l-1.4-1.4a3.054 3.054 0 0 0-4.218 0l-.7.7a.983.983 0 0 1-1.39 0l-2.1-2.1a.983.983 0 0 1 0-1.389l.7-.7a2.98 2.98 0 0 0 0-4.217l-1.4-1.4a2.824 2.824 0 0 0-4.218 0c-3.619 3.619-3 8.229 1.752 12.979C6.785 16.639 9.45 18 11.912 18a7.175 7.175 0 0 0 5.139-2.325A2.9 2.9 0 0 0 18 13.446Z" />
   </svg>
 {/snippet}
@@ -20,20 +20,20 @@
 {#if phoneType === "default" || phoneType === "countryCode"}
   <div class="relative">
     {#if phoneIcon}
-      <div class={cn(defaultDiv({ class: clsx(classes?.defaultDiv) }), (theme as PhoneInputTheme)?.defaultDiv)}>
+      <div class={defaultDiv({ class: clsx((theme as PhoneInputTheme)?.defaultDiv, classes?.defaultDiv) })}>
         {@render phoneIconSnippet()}
       </div>
     {/if}
-    <input type="tel" {pattern} {...restProps} class={cn(defaultInput({ class: clsx(classes?.defaultInput) }), (theme as PhoneInputTheme)?.defaultInput)} />
+    <input type="tel" {pattern} {...restProps} class={defaultInput({ class: clsx((theme as PhoneInputTheme)?.defaultInput, classes?.defaultInput) })} />
   </div>
 {:else if phoneType === "floating"}
   <div class="relative">
     {#if phoneIcon}
-      <span class={cn(floatingSpan({ class: clsx(classes?.floatingSpan) }), (theme as PhoneInputTheme)?.floatingSpan)}>
+      <span class={floatingSpan({ class: clsx((theme as PhoneInputTheme)?.floatingSpan, classes?.floatingSpan) })}>
         {@render phoneIconSnippet()}
       </span>
     {/if}
-    <input type="tel" class={cn(floatingInput({ class: clsx(classes?.floatingInput) }), (theme as PhoneInputTheme)?.floatingInput)} {pattern} {...restProps} />
-    <label for={labelFor} class={cn(labelFloating({ class: clsx(classes?.labelFloating) }), (theme as PhoneInputTheme)?.labelFloating)}>{floatingLabel}</label>
+    <input type="tel" class={floatingInput({ class: clsx((theme as PhoneInputTheme)?.floatingInput, classes?.floatingInput) })} {pattern} {...restProps} />
+    <label for={labelFor} class={labelFloating({ class: clsx((theme as PhoneInputTheme)?.labelFloating, classes?.labelFloating) })}>{floatingLabel}</label>
   </div>
 {/if}

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

@@ -83,4 +83,4 @@ export declare const phoneinput: import("tailwind-variants").TVReturnType<{
     labelFloating: string;
 }, undefined, unknown, unknown, undefined>>;
 export type PhoneInputSlots = keyof typeof phoneinput.slots;
-export type PhoneInputTheme = Partial<Record<PhoneInputSlots, string>>;
+export type PhoneInputTheme = Partial<Record<PhoneInputSlots, ClassValue>>;

package/dist/forms/radio/Radio.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" generics="T">
   import { getContext } from "svelte";
   import { radio, type RadioTheme } from ".";
-  import { type RadioProps, Label, cn } from "../..";
+  import clsx from "clsx";
+  import { type RadioProps, Label } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, "aria-describedby": ariaDescribedby, inline = false, labelClass, color = "primary", custom = false, group = $bindable<T>(), value = $bindable<T>(), inputClass, ...restProps }: RadioProps<T> = $props();
@@ -11,8 +12,8 @@
   const { input, label } = $derived(radio({ color, tinted: !!getContext("background"), custom, inline }));
 </script>
 
-<Label class={cn(label(), labelClass, (theme as RadioTheme)?.label)}>
-  <input type="radio" bind:group {value} aria-describedby={ariaDescribedby} {...restProps} class={cn(input(), inputClass, (theme as RadioTheme)?.input)} />
+<Label class={label({ class: clsx((theme as RadioTheme)?.label, labelClass) })}>
+  <input type="radio" bind:group {value} aria-describedby={ariaDescribedby} {...restProps} class={input({ class: clsx((theme as RadioTheme)?.input, inputClass) })} />
   {@render children?.()}
 </Label>
 

package/dist/forms/radio/RadioButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T">
-  import { Button, type RadioButtonProps, cn } from "../..";
+  import clsx from "clsx";
+  import { Button, type RadioButtonProps } from "../..";
   import { radiobutton } from ".";
   import { getTheme } from "../../theme/themeUtils";
 
@@ -9,7 +10,7 @@
 
   let inputEl: HTMLInputElement;
   let isChecked = $derived(value == group);
-  let base = $derived(cn(radiobutton({ inline }), className, isChecked && checkedClass, theme));
+  let base = $derived(radiobutton({ inline, class: clsx(isChecked && checkedClass, theme, className) }));
 
   function clickHandler() {
     inputEl?.click(); // manually trigger the click on the hidden input

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type RadioVariants = VariantProps<typeof radio>;
 export declare const radio: import("tailwind-variants").TVReturnType<{
     color: {
@@ -272,7 +273,7 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
     label: string;
 }, undefined, unknown, unknown, undefined>>;
 export type RadioSlots = keyof typeof radio.slots;
-export type RadioTheme = Partial<Record<RadioSlots, string>>;
+export type RadioTheme = Partial<Record<RadioSlots, ClassValue>>;
 export declare const radiobutton: import("tailwind-variants").TVReturnType<{
     inline: {
         true: string;
@@ -289,4 +290,4 @@ export declare const radiobutton: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
-export type RadioButtonTheme = string;
+export type RadioButtonTheme = ClassValue;

package/dist/forms/range/Range.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { range } from "./";
-  import { type RangeProps, cn } from "../..";
+  import clsx from "clsx";
+  import { type RangeProps } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { value = $bindable(), appearance = "none", color = "blue", size = "md", inputClass, ...restProps }: RangeProps = $props();
 
   const theme = getTheme("range");
 
-  const inputCls = $derived(cn(range({ appearance, color, size }), inputClass, theme));
+  const inputCls = $derived(range({ appearance, color, size, class: clsx(theme, inputClass) }));
 </script>
 
 <input type="range" bind:value {...restProps} class={inputCls} />

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type RangeVariants = VariantProps<typeof range>;
 export declare const range: import("tailwind-variants").TVReturnType<{
     size: {
@@ -64,4 +65,4 @@ export declare const range: import("tailwind-variants").TVReturnType<{
         none: string;
     };
 }, undefined, "w-full bg-gray-200 rounded-lg cursor-pointer dark:bg-gray-700", unknown, unknown, undefined>>;
-export type RangeTheme = string;
+export type RangeTheme = ClassValue;

package/dist/forms/search/Search.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { search, type SearchTheme } from ".";
-  import { CloseButton, type SearchProps, cn } from "../..";
+  import clsx from "clsx";
+  import { CloseButton, type SearchProps } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, inputClass, size, placeholder = "Search", value = $bindable(), elementRef = $bindable(), clearable = false, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: SearchProps = $props();
@@ -18,20 +19,20 @@
   };
 </script>
 
-<div class={cn(base(), (theme as SearchTheme)?.base)}>
-  <div class={cn(leftDiv(), (theme as SearchTheme)?.leftDiv)}>
-    <svg class={cn(icon(), (theme as SearchTheme)?.icon)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+<div class={base({ class: clsx((theme as SearchTheme)?.base) })}>
+  <div class={leftDiv({ class: clsx((theme as SearchTheme)?.leftDiv) })}>
+    <svg class={icon({ class: clsx((theme as SearchTheme)?.icon) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
     </svg>
   </div>
-  <input type="search" bind:value bind:this={elementRef} class={cn(inputCls(), inputClass, (theme as SearchTheme)?.input)} {placeholder} required {...restProps} />
+  <input type="search" bind:value bind:this={elementRef} class={inputCls({ class: clsx((theme as SearchTheme)?.input, inputClass) })} {placeholder} required {...restProps} />
   {#if children}
-    <div class={cn(content(), (theme as SearchTheme)?.content)}>
+    <div class={content({ class: clsx((theme as SearchTheme)?.content) })}>
       {@render children()}
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as SearchTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={closebutton({ class: clsx((theme as SearchTheme)?.closebutton, clearableClass) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(clearableSvgClass)} />
   {/if}
 </div>
 

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type SearchVariants = VariantProps<typeof search>;
 export declare const search: import("tailwind-variants").TVReturnType<{
     size: {
@@ -68,4 +69,4 @@ export declare const search: import("tailwind-variants").TVReturnType<{
     closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SearchSlots = keyof typeof search.slots;
-export type SearchTheme = Partial<Record<SearchSlots, string>>;
+export type SearchTheme = Partial<Record<SearchSlots, ClassValue>>;

package/dist/forms/select/MultiSelect.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T">
-  import { Badge, CloseButton, type MultiSelectProps, type SelectOptionType, cn } from "../..";
+  import clsx from "clsx";
+  import { Badge, CloseButton, type MultiSelectProps, type SelectOptionType } from "../..";
   import { multiSelect, type MultiSelectTheme } from ".";
   import { getTheme } from "../../theme/themeUtils";
   import { onMount, onDestroy } from "svelte"; // Import onMount and onDestroy
@@ -193,11 +194,11 @@
   {/each}
 </select>
 
-<div bind:this={multiSelectContainer} {...restProps} onclick={toggleDropdown} onblur={handleBlur} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={cn(base({ size }), className, (theme as MultiSelectTheme)?.base)}>
+<div bind:this={multiSelectContainer} {...restProps} onclick={toggleDropdown} onblur={handleBlur} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={base({ size, class: clsx((theme as MultiSelectTheme)?.base, className) })}>
   {#if !selectItems.length}
     <span class="text-gray-400">{placeholder}</span>
   {/if}
-  <span class={cn(select(), (theme as MultiSelectTheme)?.select)}>
+  <span class={select({ class: clsx((theme as MultiSelectTheme)?.select) })}>
     {#if selectItems.length}
       {#each selectItems as item (item.name)}
         {#if children}
@@ -212,16 +213,16 @@
   </span>
   <div class="ms-auto flex items-center gap-2">
     {#if selectItems.length}
-      <CloseButton {size} onclick={clearAll} color="none" class={cn(closebutton(), (theme as MultiSelectTheme)?.closebutton)} {disabled} />
+      <CloseButton {size} onclick={clearAll} color="none" class={closebutton({ class: clsx((theme as MultiSelectTheme)?.closebutton) })} {disabled} />
     {/if}
 
-    <svg class={cn("ms-1 h-3 w-3 cursor-pointer text-gray-800 dark:text-white", disabled && "cursor-not-allowed")} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+    <svg class={clsx("ms-1 h-3 w-3 cursor-pointer text-gray-800 dark:text-white", disabled && "cursor-not-allowed")} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? "m1 5 4-4 4 4" : "m9 1-4 4-4-4"} />
     </svg>
   </div>
 
   {#if show}
-    <div role="presentation" class={cn(dropdown(), dropdownClass)}>
+    <div role="presentation" class={dropdown({ class: clsx(dropdownClass) })}>
       {#each items as item (item.name)}
         <div
           onclick={(e) => selectOption(item, e)}

package/dist/forms/select/Select.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="T">
   import { select as selectCls, type SelectTheme } from ".";
-  import { type SelectProps, CloseButton, cn } from "../..";
+  import clsx from "clsx";
+  import { type SelectProps, CloseButton } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { children, items, value = $bindable(), elementRef = $bindable(), underline, size = "md", disabled, selectClass, class: className, placeholder = "Choose option ...", clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: SelectProps<T> = $props();
@@ -18,8 +19,8 @@
   };
 </script>
 
-<div class={cn(base(), className, (theme as SelectTheme)?.base)}>
-  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={cn(select(), selectClass, (theme as SelectTheme)?.select)}>
+<div class={base({ class: clsx((theme as SelectTheme)?.base, className) })}>
+  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={select({ class: clsx((theme as SelectTheme)?.select, selectClass) })}>
     {#if placeholder}
       <option disabled selected value="">{placeholder}</option>
     {/if}
@@ -35,7 +36,7 @@
     {/if}
   </select>
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as SelectTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} {disabled} />
+    <CloseButton onclick={clearAll} class={closebutton({ class: clsx((theme as SelectTheme)?.closebutton, clearableClass) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(clearableSvgClass)} {disabled} />
   {/if}
 </div>
 <!--

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type SelectVariants = VariantProps<typeof select>;
 export declare const select: import("tailwind-variants").TVReturnType<{
     underline: {
@@ -92,7 +93,7 @@ export declare const select: import("tailwind-variants").TVReturnType<{
     closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
 export type SelectSlots = keyof typeof select.slots;
-export type SelectTheme = Partial<Record<SelectSlots, string>>;
+export type SelectTheme = Partial<Record<SelectSlots, ClassValue>>;
 export type MultiSelectVariants = VariantProps<typeof multiSelect>;
 export declare const multiSelect: import("tailwind-variants").TVReturnType<{
     size: {
@@ -192,4 +193,4 @@ export declare const multiSelect: import("tailwind-variants").TVReturnType<{
     closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
 export type MultiSelectSlots = keyof typeof multiSelect.slots;
-export type MultiSelectTheme = Partial<Record<MultiSelectSlots, string>>;
+export type MultiSelectTheme = Partial<Record<MultiSelectSlots, ClassValue>>;

package/dist/forms/tags/Tags.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { type TagsProps, CloseButton, cn } from "../..";
+  import clsx from "clsx";
+  import { type TagsProps, CloseButton } from "../..";
   import { tags, type TagsTheme } from "./theme";
   import { getTheme } from "../../theme/themeUtils";
 
@@ -36,15 +37,15 @@
   };
 </script>
 
-<div {...restProps} class={cn(base(), className, (theme as TagsTheme)?.base)}>
+<div {...restProps} class={base({ class: clsx((theme as TagsTheme)?.base, className) })}>
   {#each value as tag, index}
-    <div class={cn(tagCls(), itemClass, (theme as TagsTheme)?.tag)}>
-      <span class={cn(spanCls(), spanClass, (theme as TagsTheme)?.span)}>
+    <div class={tagCls({ class: clsx((theme as TagsTheme)?.tag, itemClass) })}>
+      <span class={spanCls({ class: clsx((theme as TagsTheme)?.span, spanClass) })}>
         {tag}
       </span>
       <CloseButton
         size={closeBtnSize}
-        class={cn(closebutton(), closeClass, (theme as TagsTheme)?.closebutton)}
+        class={closebutton({ class: clsx((theme as TagsTheme)?.closebutton, closeClass) })}
         onclick={() => {
           deleteField(index);
         }}
@@ -60,7 +61,7 @@
     placeholder={value.length === 0 ? placeholder : ""}
     type="text"
     autocomplete="new-password"
-    class={cn(inputCls(), inputClass)}
+    class={inputCls({ class: clsx(inputClass) })}
   />
 </div>
 

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

@@ -1,3 +1,4 @@
+import type { ClassValue } from "svelte/elements";
 export declare const tags: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -48,4 +49,4 @@ export declare const tags: import("tailwind-variants").TVReturnType<{
     input: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TagsSlots = keyof typeof tags.slots;
-export type TagsTheme = Partial<Record<TagsSlots, string>>;
+export type TagsTheme = Partial<Record<TagsSlots, ClassValue>>;

package/dist/forms/textarea/Textarea.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { textarea, type TextareaTheme } from ".";
-  import { type TextareaProps, CloseButton, cn } from "../..";
+  import clsx from "clsx";
+  import { type TextareaProps, CloseButton } from "../..";
   import { getTheme } from "../../theme/themeUtils";
 
   let { header, footer, addon, value = $bindable(), elementRef = $bindable(), divClass, innerClass, headerClass, footerClass, addonClass, disabled, class: className, cols, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, textareaClass, ...restProps }: TextareaProps = $props();
@@ -23,33 +24,33 @@
   };
 </script>
 
-<div class={cn(divWrapper(), divClass, (theme as TextareaTheme)?.divWrapper)}>
+<div class={divWrapper({ class: clsx((theme as TextareaTheme)?.divWrapper, divClass) })}>
   {#if !wrapped}
-    <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={cn(wrapper(), className)}></textarea>
+    <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={wrapper({ class: clsx(className) })}></textarea>
   {:else}
-    <div class={cn(wrapper(), className, (theme as TextareaTheme)?.wrapper)}>
+    <div class={wrapper({ class: clsx((theme as TextareaTheme)?.wrapper, className) })}>
       {#if header}
-        <div class={cn(headerCls(), headerClass, (theme as TextareaTheme)?.headerCls)}>
+        <div class={headerCls({ class: clsx((theme as TextareaTheme)?.headerCls, headerClass) })}>
           {@render header()}
         </div>
       {/if}
-      <div class={cn(innerWrapper(), innerClass, (theme as TextareaTheme)?.innerWrapper)}>
+      <div class={innerWrapper({ class: clsx((theme as TextareaTheme)?.innerWrapper, innerClass) })}>
         {#if addon}
-          <div class={cn(addonCls(), addonClass, (theme as TextareaTheme)?.addonCls)}>
+          <div class={addonCls({ class: clsx((theme as TextareaTheme)?.addonCls, addonClass) })}>
             {@render addon()}
           </div>
         {/if}
-        <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={cn(base(), textareaClass, (theme as TextareaTheme)?.base)}></textarea>
+        <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={base({ class: clsx((theme as TextareaTheme)?.base, textareaClass) })}></textarea>
       </div>
       {#if footer}
-        <div class={cn(footerCls(), footerClass, (theme as TextareaTheme)?.footerCls)}>
+        <div class={footerCls({ class: clsx((theme as TextareaTheme)?.footerCls, footerClass) })}>
           {@render footer()}
         </div>
       {/if}
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as TextareaTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={closebutton({ class: clsx((theme as TextareaTheme)?.closebutton, clearableClass) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(clearableSvgClass)} />
   {/if}
 </div>
 

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type TextareaVariants = VariantProps<typeof textarea>;
 export declare const textarea: import("tailwind-variants").TVReturnType<{
     cols: {
@@ -113,4 +114,4 @@ export declare const textarea: import("tailwind-variants").TVReturnType<{
     closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TextareaSlots = keyof typeof textarea.slots;
-export type TextareaTheme = Partial<Record<TextareaSlots, string>>;
+export type TextareaTheme = Partial<Record<TextareaSlots, ClassValue>>;

package/dist/forms/timepicker/Timepicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Dropdown, DropdownItem, Button, Input, ButtonGroup, Select, Label, Toggle, type TimepickerProps, type TimePickerOption, cn } from "../..";
+  import clsx from "clsx";
+  import { Dropdown, DropdownItem, Button, Input, ButtonGroup, Select, Label, Toggle, type TimepickerProps, type TimePickerOption } from "../..";
   import { timepicker, type TimepickerTheme } from ".";
   import { parse, isValid, isBefore, isAfter } from "date-fns";
   import { getTheme } from "../../theme/themeUtils";
@@ -154,10 +155,10 @@
 </script>
 
 {#if type !== "inline-buttons"}
-  <ButtonGroup {size} class={cn(styles.buttonGroup(), divClass, (theme as TimepickerTheme)?.buttonGroup)}>
+  <ButtonGroup {size} class={styles.buttonGroup({ class: clsx((theme as TimepickerTheme)?.buttonGroup, divClass) })}>
     {#if type === "default"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), styles.inputWithIcon(), inputClass, (theme as TimepickerTheme)?.input)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
-      <div class={cn(styles.iconWrapper(), (theme as TimepickerTheme)?.iconWrapper)}>
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(styles.inputWithIcon(), (theme as TimepickerTheme)?.input, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <div class={styles.iconWrapper({ class: clsx((theme as TimepickerTheme)?.iconWrapper) })}>
         {#if Icon}
           <Icon class={iconClass} />
         {:else}
@@ -167,13 +168,13 @@
         {/if}
       </div>
     {:else if type === "select"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), inputClass, (theme as TimepickerTheme)?.input)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
-      <Select selectClass={cn(styles.select(), selectClass, (theme as TimepickerTheme)?.select)} onchange={handleOptionSelect} items={options} value={selectedOption} />
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx((theme as TimepickerTheme)?.input, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <Select selectClass={styles.select({ class: clsx((theme as TimepickerTheme)?.select, selectClass) })} onchange={handleOptionSelect} items={options} value={selectedOption} />
     {:else if type === "dropdown"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), inputClass, (theme as TimepickerTheme)?.input)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
-      <Button color={buttonColor} class={cn(styles.button(), (theme as TimepickerTheme)?.button)}>
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx((theme as TimepickerTheme)?.input, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+      <Button color={buttonColor} class={styles.button({ class: clsx((theme as TimepickerTheme)?.button) })}>
         {optionLabel}
-        <svg class={cn(styles.buttonIcon(), (theme as TimepickerTheme)?.buttonIcon)} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg class={styles.buttonIcon({ class: clsx((theme as TimepickerTheme)?.buttonIcon) })} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
         </svg>
       </Button>
@@ -185,69 +186,69 @@
         {/each}
       </Dropdown>
     {:else if type === "range"}
-      <div class={cn(styles.rangeInputWrapper(), (theme as TimepickerTheme)?.rangeInputWrapper)}>
-        <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), styles.rangeInput(), inputClass, (theme as TimepickerTheme)?.rangeInput)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
-        <button type="button" class={cn(styles.rangeButton(), (theme as TimepickerTheme)?.rangeButton)} onclick={() => document.getElementById(id)?.click()} aria-label="Open time picker">
+      <div class={styles.rangeInputWrapper({ class: clsx((theme as TimepickerTheme)?.rangeInputWrapper) })}>
+        <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx((theme as TimepickerTheme)?.rangeInput, styles.rangeInput(), inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+        <button type="button" class={styles.rangeButton({ class: clsx((theme as TimepickerTheme)?.rangeButton) })} onclick={() => document.getElementById(id)?.click()} aria-label="Open time picker">
           {#if Icon}
             <Icon class={iconClass} />
           {:else}
-            <svg class={cn(styles.icon(), (theme as TimepickerTheme)?.icon)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+            <svg class={styles.icon({ class: clsx((theme as TimepickerTheme)?.icon) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
             </svg>
           {/if}
         </button>
       </div>
-      <span class={cn(styles.rangeSeparator(), (theme as TimepickerTheme)?.rangeSeparator)}>-</span>
-      <div class={cn(styles.rangeInputWrapper(), (theme as TimepickerTheme)?.rangeInputWrapper)}>
-        <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.input(), styles.rangeInput(), inputClass, (theme as TimepickerTheme)?.rangeInput)} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
-        <button type="button" class={cn(styles.rangeButton(), (theme as TimepickerTheme)?.rangeButton)} onclick={() => document.getElementById(endId)?.click()} aria-label="Open end time picker">
+      <span class={styles.rangeSeparator({ class: clsx((theme as TimepickerTheme)?.rangeSeparator) })}>-</span>
+      <div class={styles.rangeInputWrapper({ class: clsx((theme as TimepickerTheme)?.rangeInputWrapper) })}>
+        <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.input({ class: clsx(styles.rangeInput(), (theme as TimepickerTheme)?.rangeInput, inputClass) })} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+        <button type="button" class={styles.rangeButton({ class: clsx((theme as TimepickerTheme)?.rangeButton) })} onclick={() => document.getElementById(endId)?.click()} aria-label="Open end time picker">
           {#if Icon}
             <Icon class={iconClass} />
           {:else}
-            <svg class={cn(styles.icon(), (theme as TimepickerTheme)?.icon)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+            <svg class={styles.icon({ class: clsx((theme as TimepickerTheme)?.icon) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6v4l3.276 3.276M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
             </svg>
           {/if}
         </button>
       </div>
     {:else if type === "timerange-dropdown"}
-      <Button color={buttonColor} {size} class={cn(styles.button(), (theme as TimepickerTheme)?.button)}>
+      <Button color={buttonColor} {size} class={styles.button({ class: clsx((theme as TimepickerTheme)?.button) })}>
         {timerangeLabel}
-        <svg class={cn(styles.buttonIcon(), (theme as TimepickerTheme)?.buttonIcon)} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg class={styles.buttonIcon({ class: clsx((theme as TimepickerTheme)?.buttonIcon) })} aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
         </svg>
       </Button>
-      <Dropdown simple class={cn(styles.dropdownContent(), (theme as TimepickerTheme)?.dropdownContent)}>
-        <div class={cn(styles.dropdownInner(), (theme as TimepickerTheme)?.dropdownInner)}>
-          <div class={cn(styles.dropdownTimeRow(), (theme as TimepickerTheme)?.dropdownTimeRow)}>
-            <div class={cn(styles.dropdownTimeCol(), (theme as TimepickerTheme)?.dropdownTimeCol)}>
+      <Dropdown simple class={styles.dropdownContent({ class: clsx((theme as TimepickerTheme)?.dropdownContent) })}>
+        <div class={styles.dropdownInner({ class: clsx((theme as TimepickerTheme)?.dropdownInner) })}>
+          <div class={styles.dropdownTimeRow({ class: clsx((theme as TimepickerTheme)?.dropdownTimeRow) })}>
+            <div class={styles.dropdownTimeCol({ class: clsx((theme as TimepickerTheme)?.dropdownTimeCol) })}>
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.dropdownTimeInput(), inputClass, (theme as TimepickerTheme)?.dropdownTimeInput)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.dropdownTimeInput({ class: clsx((theme as TimepickerTheme)?.dropdownTimeInput, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
             </div>
-            <div class={cn(styles.dropdownTimeCol(), (theme as TimepickerTheme)?.dropdownTimeCol)}>
+            <div class={styles.dropdownTimeCol({ class: clsx((theme as TimepickerTheme)?.dropdownTimeCol) })}>
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.dropdownTimeInput(), inputClass, (theme as TimepickerTheme)?.dropdownTimeInput)} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.dropdownTimeInput({ class: clsx((theme as TimepickerTheme)?.dropdownTimeInput, inputClass) })} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
             </div>
           </div>
-          <Button color={buttonColor} class={cn(styles.dropdownButton(), (theme as TimepickerTheme)?.dropdownButton)} onclick={applyTimerange}>
+          <Button color={buttonColor} class={styles.dropdownButton({ class: clsx((theme as TimepickerTheme)?.dropdownButton) })} onclick={applyTimerange}>
             {timerangeButtonLabel}
           </Button>
         </div>
       </Dropdown>
     {:else if type === "timerange-toggle"}
-      <div class={cn(styles.toggleWrapper(), (theme as TimepickerTheme)?.toggleWrapper)}>
-        <div class={cn(styles.toggleRow(), (theme as TimepickerTheme)?.toggleRow)}>
+      <div class={styles.toggleWrapper({ class: clsx((theme as TimepickerTheme)?.toggleWrapper) })}>
+        <div class={styles.toggleRow({ class: clsx((theme as TimepickerTheme)?.toggleRow) })}>
           <Toggle id={`${id}-timerange-toggle`} checked={showTimerange} onchange={toggleTimerange} spanClass="me-0 rounded-lg" />
         </div>
         {#if showTimerange}
-          <div class={cn(styles.toggleTimeRow(), (theme as TimepickerTheme)?.toggleTimeRow)}>
-            <div class={cn(styles.toggleTimeCol(), (theme as TimepickerTheme)?.toggleTimeCol)}>
+          <div class={styles.toggleTimeRow({ class: clsx((theme as TimepickerTheme)?.toggleTimeRow) })}>
+            <div class={styles.toggleTimeCol({ class: clsx((theme as TimepickerTheme)?.toggleTimeCol) })}>
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.toggleTimeInput(), inputClass, (theme as TimepickerTheme)?.toggleTimeInput)} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
+              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.toggleTimeInput({ class: clsx((theme as TimepickerTheme)?.toggleTimeInput, inputClass) })} bind:value oninput={(e) => handleTimeChange(e)} onchange={(e) => handleTimeChange(e)} />
             </div>
-            <div class={cn(styles.toggleTimeCol(), (theme as TimepickerTheme)?.toggleTimeCol)}>
+            <div class={styles.toggleTimeCol({ class: clsx((theme as TimepickerTheme)?.toggleTimeCol) })}>
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn(styles.toggleTimeInput(), inputClass, (theme as TimepickerTheme)?.toggleTimeInput)} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
+              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={styles.toggleTimeInput({ class: clsx((theme as TimepickerTheme)?.toggleTimeInput, inputClass) })} bind:value={endValue} oninput={(e) => handleTimeChange(e, true)} onchange={(e) => handleTimeChange(e, true)} />
             </div>
           </div>
         {/if}
@@ -255,9 +256,9 @@
     {/if}
   </ButtonGroup>
 {:else}
-  <div class={cn(styles.inlineGrid(), (theme as TimepickerTheme)?.inlineGrid)}>
+  <div class={styles.inlineGrid({ class: clsx((theme as TimepickerTheme)?.inlineGrid) })}>
     {#each timeIntervals as time}
-      <Button {size} color={value === time ? buttonColor : "light"} class={cn(styles.inlineButton(), (theme as TimepickerTheme)?.inlineButton)} onclick={() => handleInlineButtonSelect(time)}>
+      <Button {size} color={value === time ? buttonColor : "light"} class={styles.inlineButton({ class: clsx((theme as TimepickerTheme)?.inlineButton) })} onclick={() => handleInlineButtonSelect(time)}>
         {time}
       </Button>
     {/each}

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
+import type { ClassValue } from "svelte/elements";
 export type TimepickerVariants = VariantProps<typeof timepicker>;
 export declare const timepicker: import("tailwind-variants").TVReturnType<{
     type: {
@@ -188,4 +189,4 @@ export declare const timepicker: import("tailwind-variants").TVReturnType<{
     inlineButton: string;
 }, undefined, unknown, unknown, undefined>>;
 export type TimepickerSlots = keyof typeof timepicker.slots;
-export type TimepickerTheme = Partial<Record<TimepickerSlots, string>>;
+export type TimepickerTheme = Partial<Record<TimepickerSlots, ClassValue>>;