flowbite-svelte 1.4.3 → 1.5.1

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#L835)
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L811)
 ## 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#L835)
+ * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L811)
  * ## 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#L840)
+[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L817)
 ## 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#L840)
+ * [SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L817)
  * ## 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#L883)
+[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L861)
 ## 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#L883)
+ * [TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L861)
  * ## 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#L930)
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L907)
 ## 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#L930)
+ * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L907)
  * ## 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";

package/dist/forms/timepicker/Timepicker.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-  import { twMerge } from "tailwind-merge";
-  import { Dropdown, DropdownItem, Button, Input, ButtonGroup, Select, InputAddon, Label, Toggle, type TimepickerProps, type TimePickerOption } from "../..";
+  import { Dropdown, DropdownItem, Button, Input, ButtonGroup, Select, InputAddon, Label, Toggle, type TimepickerProps, type TimePickerOption, cn } from "../..";
 
   // Props
-  let { id = "time", endId = "end-time", value = "00:00", endValue = "00:00", min = "", max = "", required = true, disabled = false, inputColor, buttonColor = "primary", Icon, type = "default", optionLabel = "Options", options = [], size = "md", divClass = "inline-flex rounded-lg shadow-sm", inputClass, selectClass, timerangeLabel = "Choose time range", timerangeButtonLabel = "Save time", timeIntervals = [], columns = 2, onselect }: TimepickerProps = $props();
+  let { id = "time", endId = "end-time", value = $bindable("00:00"), endValue = $bindable("00:00"), min = "", max = "", required = true, disabled = false, inputColor, buttonColor = "primary", Icon, type = "default", optionLabel = "Options", options = [], size = "md", divClass, inputClass, selectClass, timerangeLabel = "Choose time range", timerangeButtonLabel = "Save time", timeIntervals = [], columns = 2, onselect }: TimepickerProps = $props();
 
-  const defaultInputClass = "block disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:ring-0 focus:outline-none p-2.5 border-r-0";
-  const inputCls = twMerge(defaultInputClass, inputClass);
-  const defaultSelectClass = "text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-r-lg rounded-l-none focus:ring-0 focus:outline-none block w-full p-2.5 border-l-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500";
-  const selectCls = twMerge(defaultSelectClass, selectClass);
+  const defaultDivClass = "inline-flex rounded-lg shadow-sm";
+  const acturalDivCls = cn(defaultDivClass, divClass);
+  const defaultInputClass = "block disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:ring-0 focus:outline-none border-r-0";
+  const inputCls = cn(defaultInputClass, inputClass);
+  const defaultSelectClass = "text-gray-900 disabled:text-gray-400 bg-gray-50 border border-gray-300 rounded-r-lg rounded-l-none focus:ring-0 focus:outline-none block w-full border-l-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:disabled:text-gray-500 dark:focus:ring-primary-500 dark:focus:border-primary-500";
+  const selectCls = cn(defaultSelectClass, selectClass);
 
   // State
   // let value = $state("00:00");
@@ -25,19 +26,43 @@
   function handleTimeChange(event: Event, isEndTime: boolean = false): void {
     const target = event.target as HTMLInputElement;
     const newValue = target.value;
+
+    // Validate against min/max constraints first
+    if (min && newValue < min) {
+      target.value = isEndTime ? endValue : value; // Reset to previous valid value
+      return;
+    }
+
+    if (max && newValue > max) {
+      target.value = isEndTime ? endValue : value; // Reset to previous valid value
+      return;
+    }
+
     const newMinutes = timeToMinutes(newValue);
     const valueMinutes = timeToMinutes(value);
     const endValueMinutes = timeToMinutes(endValue);
 
     if (isEndTime) {
       if (newMinutes < valueMinutes) {
-        value = newValue;
+        // Only update start time if it respects min/max constraints
+        if ((!min || newValue >= min) && (!max || newValue <= max)) {
+          value = newValue;
+        } else {
+          target.value = endValue; // Reset if constraint violation
+          return;
+        }
       } else {
         endValue = newValue;
       }
     } else {
       if (newMinutes > endValueMinutes) {
-        endValue = newValue;
+        // Only update end time if it respects min/max constraints
+        if ((!min || newValue >= min) && (!max || newValue <= max)) {
+          endValue = newValue;
+        } else {
+          target.value = value; // Reset if constraint violation
+          return;
+        }
       } else {
         value = newValue;
       }
@@ -89,9 +114,9 @@
 </script>
 
 {#if type !== "inline-buttons"}
-  <ButtonGroup {size} class={divClass}>
+  <ButtonGroup {size} class={acturalDivCls}>
     {#if type === "default"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class="{inputCls} rounded-l-lg" bind:value onchange={(e) => handleTimeChange(e)} />
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("rounded-l-lg", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
       <InputAddon class="rounded-r-lg">
         {#if Icon}
           <Icon class="h-4 w-4 text-gray-500 dark:text-gray-400" />
@@ -102,10 +127,10 @@
         {/if}
       </InputAddon>
     {:else if type === "select"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class="{inputCls} w-1/3 rounded-l-lg" bind:value onchange={(e) => handleTimeChange(e)} />
-      <Select class={selectCls} onchange={handleOptionSelect} items={options} value={selectedOption} />
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-1/3 rounded-l-lg", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
+      <Select selectClass={selectCls} onchange={handleOptionSelect} items={options} value={selectedOption} />
     {:else if type === "dropdown"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class="{inputCls} rounded-l-lg" bind:value onchange={(e) => handleTimeChange(e)} />
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("rounded-l-lg", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
       <Button color={buttonColor} class="!rounded-r-lg">
         {optionLabel}
         <svg class="ml-2 h-4 w-4" 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>
@@ -118,7 +143,7 @@
         {/each}
       </Dropdown>
     {:else if type === "range"}
-      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class="{inputCls} rounded-l-lg" bind:value onchange={(e) => handleTimeChange(e)} />
+      <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("rounded-l-lg", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
       <InputAddon class="rounded-none">
         {#if Icon}
           <Icon class="h-4 w-4 text-gray-500 dark:text-gray-400" />
@@ -129,7 +154,7 @@
         {/if}
       </InputAddon>
       <span class="flex items-center justify-center px-2 text-gray-500 dark:text-gray-400">-</span>
-      <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class="{inputCls} rounded-none" bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
+      <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("rounded-none", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
       <InputAddon class="rounded-r-lg">
         {#if Icon}
           <Icon class="h-4 w-4 text-gray-500 dark:text-gray-400" />
@@ -149,11 +174,11 @@
           <div class="flex space-x-4">
             <div class="flex flex-col">
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class="{inputCls} rounded-l-lg border-r" bind:value onchange={(e) => handleTimeChange(e)} />
+              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-l-lg !border-r", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
             </div>
             <div class="flex flex-col">
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class="{inputCls} rounded-l-lg border-r" bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
+              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-l-lg !border-r", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
             </div>
           </div>
           <Button color={buttonColor} class="w-full !rounded-l-lg" onclick={applyTimerange}>
@@ -164,17 +189,17 @@
     {:else if type === "timerange-toggle"}
       <div class="flex w-full flex-col space-y-2">
         <div class="flex items-center justify-between">
-          <Toggle id={`${id}-timerange-toggle`} checked={showTimerange} onchange={toggleTimerange} spanClass="me-0" />
+          <Toggle id={`${id}-timerange-toggle`} checked={showTimerange} onchange={toggleTimerange} spanClass="me-0 rounded-lg" />
         </div>
         {#if showTimerange}
-          <div class="flex space-x-4">
+          <div class="flex space-x-4 p-2.5">
             <div class="flex flex-col">
               <Label for={id}>Start time:</Label>
-              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class="{inputCls} !rounded-lg border-r-1" bind:value onchange={(e) => handleTimeChange(e)} />
+              <Input {id} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-lg !border-r", inputCls)} bind:value onchange={(e) => handleTimeChange(e)} />
             </div>
             <div class="flex flex-col">
               <Label for={endId}>End time:</Label>
-              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class="{inputCls} !rounded-lg border-r-1" bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
+              <Input id={endId} color={inputColor} type="time" {min} {max} {required} {disabled} class={cn("w-24 rounded-lg !border-r", inputCls)} bind:value={endValue} onchange={(e) => handleTimeChange(e, true)} />
             </div>
           </div>
         {/if}
@@ -195,12 +220,12 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L902)
+[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L879)
 ## Props
 @prop id = "time"
 @prop endId = "end-time"
-@prop value = "00:00"
-@prop endValue = "00:00"
+@prop value = $bindable("00:00")
+@prop endValue = $bindable("00:00")
 @prop min = ""
 @prop max = ""
 @prop required = true
@@ -212,7 +237,7 @@
 @prop optionLabel = "Options"
 @prop options = []
 @prop size = "md"
-@prop divClass = "inline-flex rounded-lg shadow-sm"
+@prop divClass
 @prop inputClass
 @prop selectClass
 @prop timerangeLabel = "Choose time range"

package/dist/forms/timepicker/Timepicker.svelte.d.ts

@@ -2,12 +2,12 @@ import { type TimepickerProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L902)
+ * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L879)
  * ## Props
  * @prop id = "time"
  * @prop endId = "end-time"
- * @prop value = "00:00"
- * @prop endValue = "00:00"
+ * @prop value = $bindable("00:00")
+ * @prop endValue = $bindable("00:00")
  * @prop min = ""
  * @prop max = ""
  * @prop required = true
@@ -19,7 +19,7 @@ import { type TimepickerProps } from "../..";
  * @prop optionLabel = "Options"
  * @prop options = []
  * @prop size = "md"
- * @prop divClass = "inline-flex rounded-lg shadow-sm"
+ * @prop divClass
  * @prop inputClass
  * @prop selectClass
  * @prop timerangeLabel = "Choose time range"
@@ -28,6 +28,6 @@ import { type TimepickerProps } from "../..";
  * @prop columns = 2
  * @prop onselect
  */
-declare const Timepicker: import("svelte").Component<TimepickerProps, {}, "">;
+declare const Timepicker: import("svelte").Component<TimepickerProps, {}, "value" | "endValue">;
 type Timepicker = ReturnType<typeof Timepicker>;
 export default Timepicker;

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

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

package/dist/forms/timepicker/index.js

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

package/dist/forms/toggle/Toggle.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
-  import clsx from "clsx";
-  import { Label } from "../label";
   import { toggle } from "./index";
-  import type { ToggleProps } from "../../types";
+  import { type ToggleProps, Label, cn } from "../..";
 
   let { children, size = "default", value, checked = $bindable(), disabled, color = "primary", class: className, inputClass, spanClass, offLabel, ...restProps }: ToggleProps = $props();
 
   const { input, label, span } = $derived(toggle({ color, checked, size, disabled, off_state_label: !!offLabel }));
 </script>
 
-<Label class={label({ class: clsx(className) })}>
+<Label class={cn(label(), className)}>
   {#if offLabel}
     {@render offLabel()}
   {/if}
-  <input type="checkbox" bind:checked {value} {...restProps} {disabled} class={input({ class: inputClass })} />
-  <span class={span({ class: spanClass })}></span>
+  <input type="checkbox" bind:checked {value} {...restProps} {disabled} class={cn(input(), inputClass)} />
+  <span class={cn(span(), spanClass)}></span>
   {#if children}
     {@render children()}
   {/if}
@@ -24,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L949)
+[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L927)
 ## Props
 @prop children
 @prop size = "default"