flowbite-svelte 1.0.7 → 1.1.0

package/dist/forms/fileupload/Fileupload.svelte

@@ -1,41 +1,42 @@
 <script lang="ts">
   import { fileupload } from ".";
-  import type { FileuploadProps } from "../../types";
-  import { CloseButton } from "../..";
+  import { CloseButton, type FileuploadProps } from "../..";
   import clsx from "clsx";
-  let { files = $bindable<FileList | undefined>(), size = "md", clearable = false, class: className, ...restProps }: FileuploadProps = $props();
+
+  let { files = $bindable(), size = "md", clearable = false, elementRef = $bindable(), class: className, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: FileuploadProps = $props();
+
   const { base, wrapper, right } = fileupload();
 
-  let fileInputRef: HTMLInputElement | undefined = $state();
   const clearAll = () => {
-    if (fileInputRef) {
-      fileInputRef.value = "";
+    if (elementRef) {
+      elementRef.value = "";
       files = undefined;
     }
+    if (clearableOnClick) clearableOnClick();
   };
-  const hasFiles = $derived(files && files.length > 0);
 </script>
 
-{#if clearable}
-  <div class={wrapper()}>
-    <input type="file" bind:files bind:this={fileInputRef} {...restProps} class={base({ size, class: clsx(className) })} />
-    {#if hasFiles}
-      <CloseButton onclick={clearAll} class={right()} />
-    {/if}
-  </div>
-{:else}
-  <input type="file" bind:files {...restProps} class={base({ size, class: clsx(className) })} />
-{/if}
+<div class={wrapper()}>
+  <input type="file" bind:files bind:this={elementRef} {...restProps} class={base({ size, class: clsx(className) })} />
+  {#if files && files.length > 0 && clearable}
+    <CloseButton onclick={clearAll} class={right({ class: clearableClass })} color={clearableColor} aria-label="Clear selected files" svgClass={clearableSvgClass} />
+  {/if}
+</div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L685)
+[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L700)
 ## Props
-@prop files = $bindable<FileList | undefined>()
+@prop files = $bindable()
 @prop size = "md"
 @prop clearable = false
+@prop elementRef = $bindable()
 @prop class: className
+@prop clearableSvgClass
+@prop clearableColor = "none"
+@prop clearableClass
+@prop clearableOnClick
 @prop ...restProps
 -->

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

@@ -1,15 +1,20 @@
-import type { FileuploadProps } from "../../types";
+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#L685)
+ * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L700)
  * ## Props
- * @prop files = $bindable<FileList | undefined>()
+ * @prop files = $bindable()
  * @prop size = "md"
  * @prop clearable = false
+ * @prop elementRef = $bindable()
  * @prop class: className
+ * @prop clearableSvgClass
+ * @prop clearableColor = "none"
+ * @prop clearableClass
+ * @prop clearableOnClick
  * @prop ...restProps
  */
-declare const Fileupload: import("svelte").Component<FileuploadProps, {}, "files">;
+declare const Fileupload: import("svelte").Component<FileuploadProps, {}, "elementRef" | "files">;
 type Fileupload = ReturnType<typeof Fileupload>;
 export default Fileupload;

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

@@ -1,17 +1,27 @@
 <script lang="ts">
   import { idGenerator } from "../../uiHelpers.svelte";
   import { floatingLabelInput } from ".";
-  import type { FloatingLabelInputProps } from "../../types";
+  import { type FloatingLabelInputProps, CloseButton } from "../..";
   import clsx from "clsx";
 
-  let { children, id = idGenerator(), value = $bindable(), "aria-describedby": ariaDescribedby, variant = "standard", size = "default", color = "default", class: divClass, inputClass, labelClass, ...restProps }: FloatingLabelInputProps = $props();
+  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, ...restProps }: FloatingLabelInputProps = $props();
 
-  const { base, input, label } = $derived(floatingLabelInput({ variant, size, color }));
+  const { base, input, label, clearbtn } = $derived(floatingLabelInput({ variant, size, color }));
+
+  const clearAll = () => {
+    if (elementRef) {
+      elementRef.value = "";
+      value = undefined;
+    }
+    if (clearableOnClick) clearableOnClick();
+  };
 </script>
 
 <div class={base({ class: clsx(divClass) })}>
-  <input {id} placeholder=" " bind:value {...restProps} aria-describedby={ariaDescribedby} class={input({ class: inputClass })} />
-
+  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} aria-describedby={ariaDescribedby} class={input({ class: inputClass })} />
+  {#if value !== undefined && value !== "" && clearable}
+    <CloseButton onclick={clearAll} class={clearbtn({ class: clearableClass })} color={clearableColor} aria-label="Clear search value" svgClass={clearableSvgClass} />
+  {/if}
   <label for={id} class={label({ class: labelClass })}>
     {@render children()}
   </label>
@@ -21,11 +31,12 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L693)
+[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L713)
 ## Props
 @prop children
 @prop id = idGenerator()
 @prop value = $bindable()
+@prop elementRef = $bindable()
 @prop "aria-describedby": ariaDescribedby
 @prop variant = "standard"
 @prop size = "default"
@@ -33,5 +44,10 @@
 @prop class: divClass
 @prop inputClass
 @prop labelClass
+@prop clearable
+@prop clearableSvgClass
+@prop clearableColor = "none"
+@prop clearableClass
+@prop clearableOnClick
 @prop ...restProps
 -->

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

@@ -1,12 +1,13 @@
-import type { FloatingLabelInputProps } from "../../types";
+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#L693)
+ * [FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L713)
  * ## Props
  * @prop children
  * @prop id = idGenerator()
  * @prop value = $bindable()
+ * @prop elementRef = $bindable()
  * @prop "aria-describedby": ariaDescribedby
  * @prop variant = "standard"
  * @prop size = "default"
@@ -14,8 +15,13 @@ import type { FloatingLabelInputProps } from "../../types";
  * @prop class: divClass
  * @prop inputClass
  * @prop labelClass
+ * @prop clearable
+ * @prop clearableSvgClass
+ * @prop clearableColor = "none"
+ * @prop clearableClass
+ * @prop clearableOnClick
  * @prop ...restProps
  */
-declare const FloatingLabelInput: import("svelte").Component<FloatingLabelInputProps, {}, "value">;
+declare const FloatingLabelInput: import("svelte").Component<FloatingLabelInputProps, {}, "value" | "elementRef">;
 type FloatingLabelInput = ReturnType<typeof FloatingLabelInput>;
 export default FloatingLabelInput;

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

@@ -112,6 +112,7 @@ export declare const floatingLabelInput: import("tailwind-variants").TVReturnTyp
     base: string;
     input: string;
     label: string;
+    clearbtn: string;
 }, undefined, {
     variant: {
         filled: {
@@ -224,6 +225,7 @@ export declare const floatingLabelInput: import("tailwind-variants").TVReturnTyp
     base: string;
     input: string;
     label: string;
+    clearbtn: string;
 }, import("tailwind-variants").TVReturnType<{
     variant: {
         filled: {
@@ -336,4 +338,5 @@ export declare const floatingLabelInput: import("tailwind-variants").TVReturnTyp
     base: string;
     input: string;
     label: string;
+    clearbtn: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/forms/floating-label-input/theme.js

@@ -3,7 +3,8 @@ export const floatingLabelInput = tv({
     slots: {
         base: "relative",
         input: "block w-full text-sm text-gray-900 bg-transparent appearance-none dark:text-white focus:outline-hidden focus:ring-0 peer",
-        label: "absolute text-sm duration-300 transform scale-75 z-10 origin-left rtl:origin-right peer-placeholder-shown:scale-100 peer-focus:scale-75"
+        label: "absolute text-sm duration-300 transform scale-75 z-10 origin-left rtl:origin-right peer-placeholder-shown:scale-100 peer-focus:scale-75",
+        clearbtn: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black"
     },
     variants: {
         variant: {

package/dist/forms/helper/Helper.svelte

@@ -16,7 +16,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L706)
+[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L732)
 ## Props
 @prop children
 @prop class: className

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

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

package/dist/forms/input/Input.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-  import type { SizeType } from "../../types";
   import { getContext } from "svelte";
-  import { CloseButton } from "../..";
+  import { CloseButton, type SizeType, type InputProps, type InputValue } from "../..";
   import { input, clampSize } from ".";
-  import type { InputProps, InputValue } from "../../types";
   import clsx from "clsx";
 
-  let { children, left, right, value = $bindable(), clearable = false, size, color = "default", class: className, classLeft, classRight, divClass, ...restProps }: InputProps<InputValue> = $props();
+  let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, classLeft, classRight, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: InputProps<InputValue> = $props();
 
   // tinted if put in component having its own background
   let background: boolean = getContext("background");
@@ -16,10 +14,14 @@
   let _size = $derived(size || clampSize(group?.size) || "md");
   const _color = $derived(color === "default" && background ? "tinted" : color);
 
-  const { base, input: inputCls, left: leftCls, right: rightCls } = $derived(input({ size: _size, color: _color, group: isGroup, class: clsx(className) }));
+  const { base, input: inputCls, left: leftCls, right: rightCls, clearbtn } = $derived(input({ size: _size, color: _color, group: isGroup, class: clsx(className) }));
 
   const clearAll = () => {
-    value = undefined;
+    if (elementRef) {
+      elementRef.value = "";
+      value = undefined;
+    }
+    if (clearableOnClick) clearableOnClick();
   };
 </script>
 
@@ -32,21 +34,21 @@
   {#if children}
     {@render children({ ...restProps, class: inputCls() })}
   {:else}
-    <input {...restProps} bind:value class={inputCls({ class: clsx(className) })} />
+    <input {...restProps} bind:value bind:this={elementRef} class={inputCls({ class: clsx(className) })} />
+    {#if value !== undefined && value !== "" && clearable}
+      <CloseButton onclick={clearAll} class={clearbtn({ class: clearableClass })} color={clearableColor} aria-label="Clear search value" svgClass={clearableSvgClass} />
+    {/if}
   {/if}
   {#if right}
     <div class={rightCls({ class: classRight })}>
       {@render right()}
     </div>
   {/if}
-  {#if clearable && value && `${value}`.length > 0}
-    <CloseButton {size} onclick={clearAll} class={rightCls({ class: classRight })} />
-  {/if}
 {/snippet}
 
 {#if group}
   {@render inputContent()}
-{:else if right || left}
+{:else if right || left || clearable}
   <div class={base({ class: divClass })}>
     {@render inputContent()}
   </div>

package/dist/forms/input/Input.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { InputProps, InputValue } from "../../types";
+import { type InputProps, type InputValue } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @props:
  */
-declare const Input: import("svelte").Component<InputProps<InputValue>, {}, "value">;
+declare const Input: import("svelte").Component<InputProps<InputValue>, {}, "value" | "elementRef">;
 type Input = ReturnType<typeof Input>;
 export default Input;

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

@@ -93,6 +93,7 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     input: string;
     left: string;
     right: string;
+    clearbtn: string;
 }, undefined, {
     size: {
         sm: {
@@ -186,6 +187,7 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     input: string;
     left: string;
     right: string;
+    clearbtn: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
@@ -279,4 +281,5 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     input: string;
     left: string;
     right: string;
+    clearbtn: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/forms/input/theme.js

@@ -4,7 +4,8 @@ export const input = tv({
         base: "relative w-full",
         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"
+        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"
     },
     variants: {
         size: {

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

@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L725)
+[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L756)
 ## Props
 @prop children
 @prop class: className

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

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

package/dist/forms/label/Label.svelte

@@ -20,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L732)
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L763)
 ## Props
 @prop children
 @prop color = "gray"

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

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

package/dist/forms/range/Range.svelte

@@ -14,7 +14,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L761)
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L792)
 ## Props
 @prop value = $bindable()
 @prop appearance = "none"

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

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

package/dist/forms/search/Search.svelte

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

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

@@ -1,23 +1,22 @@
-import type { SearchProps } from "../../types";
-declare class __sveltets_Render<T> {
-    props(): SearchProps<T>;
-    events(): {};
-    slots(): {};
-    bindings(): "value";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
+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#L797)
  * ## Props
- * @props:
+ * @prop children
+ * @prop class: inputClass
+ * @prop size
+ * @prop placeholder = "Search"
+ * @prop value = $bindable()
+ * @prop elementRef = $bindable()
+ * @prop clearable = false
+ * @prop clearableSvgClass
+ * @prop clearableColor = "none"
+ * @prop clearableClass
+ * @prop clearableOnClick
+ * @prop ...restProps
  */
-declare const Search: $$IsomorphicComponent;
-type Search<T> = InstanceType<typeof Search<T>>;
+declare const Search: import("svelte").Component<SearchProps, {}, "value" | "elementRef">;
+type Search = ReturnType<typeof Search>;
 export default Search;

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

@@ -21,6 +21,7 @@ export declare const search: import("tailwind-variants").TVReturnType<{
     icon: string;
     content: string;
     input: string;
+    clearbtn: string;
 }, undefined, {
     size: {
         sm: {
@@ -42,6 +43,7 @@ export declare const search: import("tailwind-variants").TVReturnType<{
     icon: string;
     content: string;
     input: string;
+    clearbtn: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
@@ -63,4 +65,5 @@ export declare const search: import("tailwind-variants").TVReturnType<{
     icon: string;
     content: string;
     input: string;
+    clearbtn: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/forms/search/theme.js

@@ -5,7 +5,8 @@ export const search = tv({
         leftDiv: "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none",
         icon: "text-gray-500 dark:text-gray-400",
         content: "absolute inset-y-0 end-0 flex items-center text-gray-500 dark:text-gray-400",
-        input: "block w-full text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        input: "block w-full text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
+        clearbtn: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black"
     },
     variants: {
         size: {

package/dist/forms/select/Select.svelte

@@ -1,29 +1,41 @@
 <script lang="ts" generics="T">
   import clsx from "clsx";
   import { select as selectCls } from ".";
-  import type { SelectProps } from "../../types";
+  import { type SelectProps, CloseButton } from "../..";
 
-  let { children, items, value = $bindable(), underline, size = "md", class: className, placeholder = "Choose option ...", ...restProps }: SelectProps<T> = $props();
+  let { children, items, value = $bindable(), elementRef = $bindable(), underline, size = "md", selectClass, class: className, placeholder = "Choose option ...", clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: SelectProps<T> = $props();
 
-  const selectStyle = $derived(selectCls({ underline, size, class: clsx(className) }));
+  const { base, select, clearbtn } = $derived(selectCls({ underline, size }));
+
+  const clearAll = () => {
+    if (elementRef) {
+      elementRef.value = "";
+      value = undefined;
+    }
+    if (clearableOnClick) clearableOnClick();
+  };
 </script>
 
-<select {...restProps} bind:value class={selectStyle}>
-  {#if placeholder}
-    <option disabled selected value="">{placeholder}</option>
-  {/if}
+<div class={base({ class: clsx(className) })}>
+  <select {...restProps} bind:value bind:this={elementRef} class={select({ class: clsx(selectClass) })}>
+    {#if placeholder}
+      <option disabled selected value="">{placeholder}</option>
+    {/if}
 
-  {#if items}
-    {#each items as { value, name }}
-      <option {value}>{name}</option>
-    {/each}
-  {/if}
+    {#if items}
+      {#each items as { value, name }}
+        <option {value}>{name}</option>
+      {/each}
+    {/if}
 
-  {#if children}
-    {@render children()}
+    {#if children}
+      {@render children()}
+    {/if}
+  </select>
+  {#if value !== undefined && value !== "" && clearable}
+    <CloseButton onclick={clearAll} class={clearbtn({ class: clearableClass })} color={clearableColor} aria-label="Clear search value" svgClass={clearableSvgClass} />
   {/if}
-</select>
-
+</div>
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)

package/dist/forms/select/Select.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { SelectProps } from "../../types";
+import { type SelectProps } from "../..";
 declare class __sveltets_Render<T> {
     props(): SelectProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "value";
+    bindings(): "value" | "elementRef";
     exports(): {};
 }
 interface $$IsomorphicComponent {