flowbite-svelte 1.4.2 → 1.5.0

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/input-field/theme.d.ts

@@ -94,6 +94,7 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     left: string;
     right: string;
     clearbtn: string;
+    combo: string;
 }, undefined, {
     size: {
         sm: {
@@ -188,6 +189,7 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     left: string;
     right: string;
     clearbtn: string;
+    combo: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
@@ -282,4 +284,5 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     left: string;
     right: string;
     clearbtn: string;
+    combo: string;
 }, undefined, unknown, unknown, undefined>>;

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

@@ -5,7 +5,8 @@ export const input = tv({
         input: "block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:outline-hidden",
         left: "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 pointer-events-none start-0 p-2.5",
         right: "flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5",
-        clearbtn: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black"
+        clearbtn: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black",
+        combo: "absolute top-full right-0 left-0 z-20 mt-1 max-h-60 overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
     },
     variants: {
         size: {

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#L804)
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L794)
 ## 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#L804)
+ * [LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L794)
  * ## 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(): {};

package/dist/forms/radio/RadioButton.svelte

@@ -1,13 +1,12 @@
 <script lang="ts" generics="T">
-  import { Button, type RadioButtonProps } from "../..";
-  import { twMerge } from "tailwind-merge";
+  import { Button, type RadioButtonProps, cn } from "../..";
   import { radiobutton } from ".";
 
   let { children, group = $bindable<T>(), value = $bindable<T>(), inline, pill, outline, size, color, shadow, checkedClass, class: className, ...restProps }: RadioButtonProps<T> = $props();
 
   let inputEl: HTMLInputElement;
   let isChecked = $derived(value == group);
-  let base = $derived(twMerge(radiobutton({ inline }), isChecked && checkedClass, className));
+  let base = $derived(cn(radiobutton({ inline }), isChecked && checkedClass, className));
 
   function clickHandler() {
     inputEl?.click(); // manually trigger the click on the hidden input

package/dist/forms/range/Range.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { range } from "./";
-  import type { RangeProps } from "../../types";
+  import { type RangeProps, cn } from "../..";
 
-  let { value = $bindable(), appearance = "none", color = "blue", size = "md", class: inputClass, ...restProps }: RangeProps = $props();
+  let { value = $bindable(), appearance = "none", color = "blue", size = "md", inputClass, ...restProps }: RangeProps = $props();
 
-  const inputCls = $derived(range({ class: clsx(inputClass), appearance, color, size }));
+  const inputCls = $derived(cn(range({ appearance, color, size }), inputClass));
 </script>
 
 <input type="range" bind:value {...restProps} class={inputCls} />
@@ -14,12 +13,12 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L833)
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L822)
 ## Props
 @prop value = $bindable()
 @prop appearance = "none"
 @prop color = "blue"
 @prop size = "md"
-@prop class: inputClass
+@prop inputClass
 @prop ...restProps
 -->

package/dist/forms/range/Range.svelte.d.ts

@@ -1,14 +1,14 @@
-import type { RangeProps } from "../../types";
+import { type RangeProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L833)
+ * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L822)
  * ## Props
  * @prop value = $bindable()
  * @prop appearance = "none"
  * @prop color = "blue"
  * @prop size = "md"
- * @prop class: inputClass
+ * @prop inputClass
  * @prop ...restProps
  */
 declare const Range: import("svelte").Component<RangeProps, {}, "value">;

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

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

package/dist/forms/range/index.js

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

package/dist/forms/search/Search.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { search } from ".";
-  import { CloseButton, type SearchProps } from "../..";
+  import { CloseButton, type SearchProps, cn } from "../..";
 
-  let { children, class: inputClass, size, placeholder = "Search", value = $bindable(), elementRef = $bindable(), clearable = false, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: SearchProps = $props();
+  let { children, inputClass, size, placeholder = "Search", value = $bindable(), elementRef = $bindable(), clearable = false, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: SearchProps = $props();
 
   const { base, content, icon, clearbtn, input: inputCls, leftDiv } = $derived(search({ size }));
 
@@ -22,14 +21,14 @@
       <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={inputCls({ class: clsx(inputClass) })} {placeholder} required {...restProps} />
+  <input type="search" bind:value bind:this={elementRef} class={cn(inputCls(), inputClass)} {placeholder} required {...restProps} />
   {#if children}
     <div class={content()}>
       {@render children()}
     </div>
   {/if}
   {#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}
 </div>
 
@@ -37,10 +36,10 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L838)
+[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L828)
 ## Props
 @prop children
-@prop class: inputClass
+@prop inputClass
 @prop size
 @prop placeholder = "Search"
 @prop value = $bindable()

package/dist/forms/search/Search.svelte.d.ts

@@ -2,10 +2,10 @@ import { type SearchProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L838)
+ * [SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L828)
  * ## Props
  * @prop children
- * @prop class: inputClass
+ * @prop inputClass
  * @prop size
  * @prop placeholder = "Search"
  * @prop value = $bindable()

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

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

package/dist/forms/search/index.js

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

package/dist/forms/select/MultiSelect.svelte

@@ -1,7 +1,5 @@
 <script lang="ts" generics="T">
-  import { Badge, CloseButton, type MultiSelectProps, type SelectOptionType } from "../..";
-  import clsx from "clsx";
-  import { twMerge } from "tailwind-merge";
+  import { Badge, CloseButton, type MultiSelectProps, type SelectOptionType, cn } from "../..";
   import { multiselect } from "./theme";
 
   // Consider reusing that component - https://svelecte.vercel.app/
@@ -99,7 +97,7 @@
     <option {value} {disabled}>{name}</option>
   {/each}
 </select>
-<div onclick={toggleDropdown} onfocusout={closeDropdown} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={base({ size, class: clsx(className) })}>
+<div onclick={toggleDropdown} onfocusout={closeDropdown} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={cn(base({ size }), className)}>
   {#if !selectItems.length}
     <span class="text-gray-400">{placeholder}</span>
   {/if}
@@ -121,13 +119,13 @@
       <CloseButton {size} onclick={clearAll} color="none" class={closebutton()} {disabled} />
     {/if}
 
-    <svg class={twMerge("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={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">
       <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={dropdown({ class: dropdownClass })}>
+    <div role="presentation" class={cn(dropdown(), dropdownClass)}>
       {#each items as item (item.name)}
         <div onclick={() => selectOption(item)} role="presentation" class={dropdownitem({ selected: selectItems.includes(item), active: activeItem === item, disabled: item.disabled })}>
           {item.name}

package/dist/forms/select/Select.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" generics="T">
-  import clsx from "clsx";
   import { select as selectCls } from ".";
-  import { type SelectProps, CloseButton } from "../..";
+  import { type SelectProps, CloseButton, cn } from "../..";
 
   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();
 
@@ -16,8 +15,8 @@
   };
 </script>
 
-<div class={base({ class: clsx(className) })}>
-  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={select({ class: clsx(selectClass) })}>
+<div class={cn(base(), className)}>
+  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={cn(select(), selectClass)}>
     {#if placeholder}
       <option disabled selected value="">{placeholder}</option>
     {/if}
@@ -33,7 +32,7 @@
     {/if}
   </select>
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={clearbtn({ class: clearableClass })} color={clearableColor} aria-label="Clear search value" svgClass={clearableSvgClass} {disabled} />
+    <CloseButton onclick={clearAll} class={cn(clearbtn(), clearableClass)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} {disabled} />
   {/if}
 </div>
 <!--

package/dist/forms/tags/Tags.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type TagsProps, CloseButton } from "../..";
+  import { type TagsProps, CloseButton, cn } from "../..";
   import { tags } from "./theme";
 
   let { value = $bindable([]), itemClass, spanClass, placeholder = "Enter tags", class: className, closeClass, inputClass, closeBtnSize = "xs", ...restProps }: TagsProps = $props();
@@ -33,15 +33,15 @@
   };
 </script>
 
-<div {...restProps} class={base({ class: className })}>
+<div {...restProps} class={cn(base(), className)}>
   {#each value as tag, index}
-    <div class={tagCls({ class: itemClass })}>
-      <span class={spanCls({ class: spanClass })}>
+    <div class={cn(tagCls(), itemClass)}>
+      <span class={cn(spanCls(), spanClass)}>
         {tag}
       </span>
       <CloseButton
         size={closeBtnSize}
-        class={close({ class: closeClass })}
+        class={cn(close(), closeClass)}
         onclick={() => {
           deleteField(index);
         }}
@@ -57,7 +57,7 @@
     placeholder={value.length === 0 ? placeholder : ""}
     type="text"
     autocomplete="new-password"
-    class={inputCls({ class: inputClass })}
+    class={cn(inputCls(), inputClass)}
   />
 </div>
 
@@ -65,7 +65,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L881)
+[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L872)
 ## Props
 @prop value = $bindable([])
 @prop itemClass

package/dist/forms/tags/Tags.svelte.d.ts

@@ -2,7 +2,7 @@ import { type TagsProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L881)
+ * [TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L872)
  * ## Props
  * @prop value = $bindable([])
  * @prop itemClass

package/dist/forms/textarea/Textarea.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import clsx from "clsx";
   import { textarea } from ".";
-  import { type TextareaProps, CloseButton } from "../..";
+  import { type TextareaProps, CloseButton, cn } from "../..";
 
-  let { header, footer, value = $bindable(), elementRef = $bindable(), divClass, innerClass, headerClass, footerClass, disabled, class: className, cols, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: TextareaProps = $props();
+  let { header, footer, value = $bindable(), elementRef = $bindable(), divClass, innerClass, headerClass, footerClass, disabled, class: className, cols, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, textareaClass, ...restProps }: TextareaProps = $props();
 
   let hasHeader = $derived(!!header);
   let hasFooter = $derived(!!footer);
@@ -20,28 +19,28 @@
   };
 </script>
 
-<div class={divWrapper({ class: divClass })}>
+<div class={cn(divWrapper(), divClass)}>
   {#if !wrapped}
-    <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={wrapper({ class: clsx(className) })}></textarea>
+    <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={cn(wrapper(), className)}></textarea>
   {:else}
-    <div class={wrapper({ class: clsx(className) })}>
+    <div class={cn(wrapper(), className)}>
       {#if header}
-        <div class={headerCls({ class: headerClass })}>
+        <div class={cn(headerCls(), headerClass)}>
           {@render header()}
         </div>
       {/if}
-      <div class={innerWrapper({ class: innerClass })}>
-        <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={base()}></textarea>
+      <div class={cn(innerWrapper(), innerClass)}>
+        <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={cn(base(), textareaClass)}></textarea>
       </div>
       {#if footer}
-        <div class={footerCls({ class: footerClass })}>
+        <div class={cn(footerCls(), footerClass)}>
           {@render footer()}
         </div>
       {/if}
     </div>
   {/if}
   {#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}
 </div>
 
@@ -49,7 +48,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L928)
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L918)
 ## Props
 @prop header
 @prop footer
@@ -67,5 +66,6 @@
 @prop clearableColor = "none"
 @prop clearableClass
 @prop clearableOnClick
+@prop textareaClass
 @prop ...restProps
 -->

package/dist/forms/textarea/Textarea.svelte.d.ts

@@ -2,7 +2,7 @@ import { type TextareaProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L928)
+ * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L918)
  * ## Props
  * @prop header
  * @prop footer
@@ -20,6 +20,7 @@ import { type TextareaProps } from "../..";
  * @prop clearableColor = "none"
  * @prop clearableClass
  * @prop clearableOnClick
+ * @prop textareaClass
  * @prop ...restProps
  */
 declare const Textarea: import("svelte").Component<TextareaProps, {}, "value" | "elementRef">;

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

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

package/dist/forms/textarea/index.js

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