flowbite-svelte 1.4.3 → 1.5.1

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { setContext } from "svelte";
-  import { twMerge } from "tailwind-merge";
-  import { type ButtonToggleGroupProps, buttonToggleGroup } from "../..";
+  import { type ButtonToggleGroupProps, buttonToggleGroup, cn } from "../..";
 
   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();
 
@@ -57,12 +56,12 @@
   setContext("buttonToggleColor", color);
   setContext("buttonToggleSize", size);
   setContext("buttonToggleRounded", roundedSize);
-  setContext("ctxIconClass", ctxIconClass);
-  setContext("ctxBtnClass", ctxBtnClass);
+  setContext("ctxIconClass", cn(ctxIconClass));
+  setContext("ctxBtnClass", cn(ctxBtnClass));
 </script>
 
 <div class="inline">
-  <div class={twMerge(base, className)} role={multiSelect ? "group" : "radiogroup"} aria-label={name} {...restProps}>
+  <div class={cn(base, className)} role={multiSelect ? "group" : "radiogroup"} aria-label={name} {...restProps}>
     {@render children()}
   </div>
 </div>

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

@@ -1,7 +1,18 @@
 <script lang="ts">
-  let { class: className, ...restProps } = $props();
+  import { type CheckIconProps, cn } from "../..";
+  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={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={cn(className)} {...restProps}>
   <polyline points="20 6 9 17 4 12"></polyline>
 </svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L385)
+## Props
+@prop class: className
+@prop ...restProps
+-->

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

@@ -1,5 +1,12 @@
-declare const CheckIcon: import("svelte").Component<{
-    class: any;
-} & Record<string, any>, {}, "">;
+import { type CheckIconProps } from "../..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L385)
+ * ## Props
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const CheckIcon: import("svelte").Component<CheckIconProps, {}, "">;
 type CheckIcon = ReturnType<typeof CheckIcon>;
 export default CheckIcon;

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

@@ -65,7 +65,7 @@ export declare const buttonToggle: import("tailwind-variants").TVReturnType<{
         rose: string;
         none: string;
     };
-}, undefined, "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0", {
+}, undefined, "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800", {
     selected: {
         true: string;
         false: string;
@@ -147,7 +147,7 @@ export declare const buttonToggle: import("tailwind-variants").TVReturnType<{
         rose: string;
         none: string;
     };
-}, undefined, "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0", unknown, unknown, undefined>>;
+}, undefined, "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800", unknown, unknown, undefined>>;
 export declare const buttonToggleContent: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex items-center w-full overflow-hidden relative", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex items-center w-full overflow-hidden relative", unknown, unknown, undefined>>;
 export declare const buttonToggleText: import("tailwind-variants").TVReturnType<{
     selected: {

package/dist/forms/button-toggle/theme.js

@@ -12,7 +12,7 @@ export const buttonToggleGroup = tv({
     }
 });
 export const buttonToggle = tv({
-    base: "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0",
+    base: "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800",
     variants: {
         selected: {
             true: "",

package/dist/forms/checkbox/Checkbox.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-  import Label from "../label/Label.svelte";
   import { checkbox } from ".";
-  import { type CheckboxProps, type CheckboxItem } from "../..";
-  import clsx from "clsx";
+  import { type CheckboxProps, type CheckboxItem, Label, cn } from "../..";
 
   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();
 
@@ -22,16 +20,16 @@
 
 {#if choices.length > 0}
   {#each choices as choice, i}
-    <div class={divStyle({ class: clsx(divClass) })}>
-      <input type="checkbox" value={choice.value} checked={choice.checked ?? false} {disabled} bind:group {...restProps} class={base({ class: clsx(className) })} />
+    <div class={cn(divStyle(), divClass)}>
+      <input type="checkbox" value={choice.value} checked={choice.checked ?? false} {disabled} bind:group {...restProps} class={cn(base(), className)} />
       <Label show={true} {...labelProps}>
         {renderLabel(choice)}
       </Label>
     </div>
   {/each}
 {:else}
-  <div class={divStyle({ class: clsx(divClass) })}>
-    <input type="checkbox" {value} bind:checked {indeterminate} {disabled} {...restProps} class={base({ class: clsx(className) })} />
+  <div class={cn(divStyle(), divClass)}>
+    <input type="checkbox" {value} bind:checked {indeterminate} {disabled} {...restProps} class={cn(base(), className)} />
     {#if children}
       {@render children({ value, checked, disabled })}
     {/if}

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Button from "../../buttons/Button.svelte";
-  import clsx from "clsx";
-  import type { CheckboxButtonProps } from "../../types";
+  import { type CheckboxButtonProps, cn } from "../..";
   import { checkboxbutton } from "./theme";
 
   let { children, class: className, group = $bindable([]), value, checked, inline, pill, outline, size, color, shadow, ...restProps }: CheckboxButtonProps = $props();
@@ -43,7 +42,7 @@
     }
   }
 
-  let buttonClass: string = $derived(checkboxbutton({ inline, checked, class: clsx(className) }));
+  let buttonClass: string = $derived(cn(checkboxbutton({ inline, checked }), className));
 </script>
 
 <Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
@@ -55,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L715)
+[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L692)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/checkbox/CheckboxButton.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { CheckboxButtonProps } from "../../types";
+import { type CheckboxButtonProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L715)
+ * [CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L692)
  * ## Props
  * @prop children
  * @prop class: className

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

@@ -1,3 +1,5 @@
+import { type VariantProps } from "tailwind-variants";
+export type CheckboxVariants = VariantProps<typeof checkbox>;
 export declare const checkbox: import("tailwind-variants").TVReturnType<{
     color: {
         primary: {

package/dist/forms/dropzone/Dropzone.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
   import type { DragEventHandler, ChangeEventHandler } from "svelte/elements";
   import { dropzone } from ".";
-  import type { DropzoneProps } from "../../types";
-  import clsx from "clsx";
+  import { type DropzoneProps, cn } from "../..";
 
   type HTMLInputElementWithFiles = HTMLInputElement & { files: FileList | null };
 
   let { children, files = $bindable<FileList | null>(), class: className, ...restProps }: DropzoneProps = $props();
 
-  const base = $derived(dropzone({ class: clsx(className) }));
   let input: HTMLInputElement;
 
   function keydown(ev: KeyboardEvent) {
@@ -51,7 +49,7 @@
   };
 </script>
 
-<button class={base} onkeydown={keydown} onclick={onClick} ondrop={onDrop} ondragover={onDragOver} type="button">
+<button class={cn(dropzone(), className)} onkeydown={keydown} onclick={onClick} ondrop={onDrop} ondragover={onDragOver} type="button">
   {@render children()}
 </button>
 <label class="hidden">
@@ -62,7 +60,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L728)
+[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L705)
 ## Props
 @prop children
 @prop files = $bindable<FileList | null>()

package/dist/forms/dropzone/Dropzone.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { DropzoneProps } from "../../types";
+import { type DropzoneProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L728)
+ * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L705)
  * ## Props
  * @prop children
  * @prop files = $bindable<FileList | null>()

package/dist/forms/fileupload/Fileupload.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import { fileupload } from ".";
-  import { CloseButton, type FileuploadProps } from "../..";
-  import clsx from "clsx";
+  import { CloseButton, type FileuploadProps, cn } from "../..";
 
-  let { files = $bindable(), size = "md", clearable = false, elementRef = $bindable(), class: className, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: FileuploadProps = $props();
+  let { files = $bindable(), size = "md", clearable = false, elementRef = $bindable(), class: className, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, wrapperClass, ...restProps }: FileuploadProps = $props();
 
   const { base, wrapper, right } = fileupload();
 
@@ -16,10 +15,10 @@
   };
 </script>
 
-<div class={wrapper()}>
-  <input type="file" bind:files bind:this={elementRef} {...restProps} class={base({ size, class: clsx(className) })} />
+<div class={cn(wrapper(), wrapperClass)}>
+  <input type="file" bind:files bind:this={elementRef} {...restProps} class={cn(base({ size }), className)} />
   {#if files && files.length > 0 && clearable}
-    <CloseButton onclick={clearAll} class={right({ class: clearableClass })} color={clearableColor} aria-label="Clear selected files" svgClass={clearableSvgClass} />
+    <CloseButton onclick={clearAll} class={cn(right(), clearableClass)} color={clearableColor} aria-label="Clear selected files" svgClass={cn(clearableSvgClass)} />
   {/if}
 </div>
 
@@ -27,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L734)
+[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L711)
 ## Props
 @prop files = $bindable()
 @prop size = "md"
@@ -38,5 +37,6 @@
 @prop clearableColor = "none"
 @prop clearableClass
 @prop clearableOnClick
+@prop wrapperClass
 @prop ...restProps
 -->

package/dist/forms/fileupload/Fileupload.svelte.d.ts

@@ -2,7 +2,7 @@ import { type FileuploadProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L734)
+ * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L711)
  * ## Props
  * @prop files = $bindable()
  * @prop size = "md"
@@ -13,6 +13,7 @@ import { type FileuploadProps } from "../..";
  * @prop clearableColor = "none"
  * @prop clearableClass
  * @prop clearableOnClick
+ * @prop wrapperClass
  * @prop ...restProps
  */
 declare const Fileupload: import("svelte").Component<FileuploadProps, {}, "elementRef" | "files">;

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

@@ -1,10 +1,9 @@
 <script lang="ts">
   import { idGenerator } from "../../uiHelpers.svelte";
   import { floatingLabelInput } from ".";
-  import { type FloatingLabelInputProps, CloseButton } from "../..";
-  import clsx from "clsx";
+  import { type FloatingLabelInputProps, CloseButton, cn } from "../..";
 
-  let { children, id = idGenerator(), value = $bindable(), elementRef = $bindable(), "aria-describedby": ariaDescribedby, variant = "standard", size = "default", color = "default", class: divClass, inputClass, labelClass, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, ...restProps }: FloatingLabelInputProps = $props();
+  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();
 
   const { base, input, label, clearbtn, combo } = $derived(floatingLabelInput({ variant, size, color }));
 
@@ -124,17 +123,17 @@
   <div tabindex="-1" bind:this={dummyFocusDiv} class="sr-only"></div>
 {/if}
 
-<div class={clsx(base({ class: clsx(divClass) }), isCombobox ? "relative" : "")}>
-  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} aria-describedby={ariaDescribedby} class={input({ class: inputClass })} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} />
+<div class={cn(base(), isCombobox ? "relative" : "", className)}>
+  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} aria-describedby={ariaDescribedby} class={cn(input(), inputClass)} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} />
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={clearbtn({ class: clearableClass })} color={clearableColor} aria-label="Clear search value" svgClass={clearableSvgClass} />
+    <CloseButton onclick={clearAll} class={cn(clearbtn(), clearableClass)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
   {/if}
-  <label for={id} class={label({ class: labelClass })}>
+  <label for={id} class={cn(label(), labelClass)}>
     {@render children()}
   </label>
 
   {#if isCombobox && isFocused && filteredSuggestions.length > 0}
-    <div class={combo({ class: clsx(comboClass) })}>
+    <div class={cn(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}
@@ -148,7 +147,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L747)
+[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L725)
 ## Props
 @prop children
 @prop id = idGenerator()
@@ -158,7 +157,7 @@
 @prop variant = "standard"
 @prop size = "default"
 @prop color = "default"
-@prop class: divClass
+@prop class: className
 @prop inputClass
 @prop labelClass
 @prop clearable

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

@@ -2,7 +2,7 @@ import { type FloatingLabelInputProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L747)
+ * [FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L725)
  * ## Props
  * @prop children
  * @prop id = idGenerator()
@@ -12,7 +12,7 @@ import { type FloatingLabelInputProps } from "../..";
  * @prop variant = "standard"
  * @prop size = "default"
  * @prop color = "default"
- * @prop class: divClass
+ * @prop class: className
  * @prop inputClass
  * @prop labelClass
  * @prop clearable

package/dist/forms/helper/Helper.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { helper } from ".";
-  import type { HelperProps } from "../../types";
+  import { type HelperProps, cn } from "../..";
 
   let { children, class: className, color = "gray", ...restProps }: HelperProps = $props();
 
-  const base = $derived(helper({ color, class: clsx(className) }));
+  const base = $derived(cn(helper({ color }), className));
 </script>
 
 <p {...restProps} class={base}>
@@ -16,7 +15,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L770)
+[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L748)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/helper/Helper.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { HelperProps } from "../../types";
+import { type HelperProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L770)
+ * [HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L748)
  * ## Props
  * @prop children
  * @prop class: className

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

@@ -1,9 +1,7 @@
 <script lang="ts">
   import type { SizeType } from "../../types";
-  import { twMerge } from "tailwind-merge";
   import { getContext } from "svelte";
-  import { clampSize } from "../..";
-  import type { InputAddonProps } from "../../types";
+  import { type InputAddonProps, clampSize, cn } from "../..";
 
   let { children, class: className, size, ...restProps }: InputAddonProps = $props();
   let background: boolean = getContext("background");
@@ -30,7 +28,7 @@
   // size: explicit, inherited, default
   let _size = size || clampSize(group?.size) || "md";
 
-  let divClass: string = twMerge(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);
+  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);
 </script>
 
 <div {...restProps} class={divClass}>
@@ -41,7 +39,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L799)
+[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L777)
 ## Props
 @prop children
 @prop class: className

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

@@ -1,8 +1,8 @@
-import type { InputAddonProps } from "../../types";
+import { type InputAddonProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L799)
+ * [InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L777)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/forms/input-addon/index.d.ts

@@ -1,2 +1 @@
-import InputAddon from "./InputAddon.svelte";
-export { InputAddon };
+export { default as InputAddon } from "./InputAddon.svelte";

package/dist/forms/input-addon/index.js

@@ -1,2 +1 @@
-import InputAddon from "./InputAddon.svelte";
-export { InputAddon };
+export { default as InputAddon } from "./InputAddon.svelte";

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

@@ -1,11 +1,9 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { CloseButton, type SizeType, type InputProps, type InputValue } from "../..";
-  import { twMerge } from "tailwind-merge";
+  import { CloseButton, type SizeType, type InputProps, type InputValue, cn } from "../..";
   import { input, clampSize } from ".";
-  import clsx from "clsx";
 
-  let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, wrapperClass, classLeft, classRight, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, ...restProps }: InputProps<InputValue> = $props();
+  let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, ...restProps }: InputProps<InputValue> = $props();
 
   // Automatically enable combobox when data is provided
   const isCombobox = $derived(Array.isArray(data) && data.length > 0);
@@ -21,7 +19,7 @@
   let _size = $derived(size || clampSize(group?.size) || "md");
   const _color = $derived(color === "default" && background ? "tinted" : color);
 
-  const { base, input: inputCls, left: leftCls, right: rightCls, clearbtn, combo } = $derived(input({ size: _size, color: _color, group: isGroup, class: clsx(className) }));
+  const { base, input: inputCls, left: leftCls, right: rightCls, clearbtn, combo } = $derived(input({ size: _size, color: _color, group: isGroup }));
 
   const clearAll = () => {
     if (elementRef) {
@@ -161,9 +159,9 @@
 {/if}
 
 {#if isCombobox}
-  <div class={twMerge(isCombobox ? "relative w-full" : "", wrapperClass)}>
+  <div class={cn(isCombobox ? "relative w-full" : "", wrapperClass)}>
     {#if right || left || clearable}
-      <div class={base({ class: divClass })}>
+      <div class={cn(base(), divClass)}>
         {@render inputContent()}
       </div>
     {:else}
@@ -171,7 +169,7 @@
     {/if}
 
     {#if isCombobox && isFocused && filteredSuggestions.length > 0}
-      <div class={combo({ class: clsx(comboClass) })}>
+      <div class={cn(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}
@@ -183,7 +181,7 @@
 {:else if group}
   {@render inputContent()}
 {:else if right || left || clearable}
-  <div class={base({ class: divClass })}>
+  <div class={cn(base(), divClass)}>
     {@render inputContent()}
   </div>
 {:else}
@@ -192,20 +190,20 @@
 
 {#snippet inputContent()}
   {#if left}
-    <div class={leftCls({ class: classLeft })}>
+    <div class={cn(leftCls(), 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={inputCls({ class: clsx(className) })} />
+    <input {...restProps} bind:value bind:this={elementRef} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} class={cn(inputCls(), className)} />
     {#if value !== undefined && value !== "" && clearable}
-      <CloseButton onclick={clearAll} class={clearbtn({ class: clearableClass })} color={clearableColor} aria-label="Clear search value" svgClass={clearableSvgClass} />
+      <CloseButton onclick={clearAll} class={cn(clearbtn(), clearableClass)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
     {/if}
   {/if}
   {#if right}
-    <div class={rightCls({ class: classRight })}>
+    <div class={cn(rightCls(), rightClass)}>
       {@render right()}
     </div>
   {/if}

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

@@ -1,5 +1,4 @@
-import Input from "./Input.svelte";
+export { default as Input } from "./Input.svelte";
 import type { SizeType } from "../../types";
-import { input } from "./theme";
-declare function clampSize(s: SizeType): "sm" | "md" | "lg";
-export { Input, input, clampSize };
+export { input } from "./theme";
+export declare function clampSize(s: SizeType): "md" | "sm" | "lg";

package/dist/forms/input-field/index.js

@@ -1,6 +1,5 @@
-import Input from "./Input.svelte";
-import { input } from "./theme";
-function clampSize(s) {
+export { default as Input } from "./Input.svelte";
+export { input } from "./theme";
+export function clampSize(s) {
     return s && s === "xs" ? "sm" : s === "xl" ? "lg" : s;
 }
-export { Input, input, clampSize };

package/dist/forms/label/Label.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { label } from ".";
-  import type { LabelProps } from "../../types";
+  import { type LabelProps, cn } from "../..";
 
   let { children, color = "gray", show = true, class: className, ...restProps }: LabelProps = $props();
 
-  let base = $derived(label({ color, class: clsx(className) }));
+  let base = $derived(cn(label({ color }), className));
 </script>
 
 {#if show}
@@ -20,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L806)
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L783)
 ## Props
 @prop children
 @prop color = "gray"

package/dist/forms/label/Label.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { LabelProps } from "../../types";
+import { type LabelProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L806)
+ * [LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L783)
  * ## Props
  * @prop children
  * @prop color = "gray"

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

@@ -1,3 +1,2 @@
-import Label from "./Label.svelte";
-import { label } from "./theme";
-export { Label, label };
+export { default as Label } from "./Label.svelte";
+export { label } from "./theme";

package/dist/forms/label/index.js

@@ -1,3 +1,2 @@
-import Label from "./Label.svelte";
-import { label } from "./theme";
-export { Label, label };
+export { default as Label } from "./Label.svelte";
+export { label } from "./theme";

package/dist/forms/radio/Radio.svelte

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

package/dist/forms/radio/Radio.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RadioProps } from "../../types";
+import { type RadioProps } from "../..";
 declare class __sveltets_Render<T> {
     props(): RadioProps<T>;
     events(): {};