flowbite-svelte 1.10.20 → 1.10.21

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

@@ -1,9 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
-import type { ClassValue } from "svelte/elements";
 import type { Classes } from "../../theme/themeUtils";
 export type SearchVariants = VariantProps<typeof search> & Classes<typeof search>;
-export type SearchSlots = keyof typeof search.slots;
-export type SearchTheme = Partial<Record<SearchSlots, ClassValue>>;
 export declare const search: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {

package/dist/forms/select/MultiSelect.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="T">
   import clsx from "clsx";
   import { Badge, CloseButton, type MultiSelectProps, type SelectOptionType } from "../..";
-  import { multiSelect, type MultiSelectTheme } from ".";
+  import { multiSelect } from ".";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { onMount } from "svelte";
 
@@ -197,11 +197,11 @@
   {/each}
 </select>
 
-<div bind:this={multiSelectContainer} {...restProps} onclick={toggleDropdown} onblur={handleBlur} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={base({ size, class: clsx((theme as MultiSelectTheme)?.base, className) })}>
+<div bind:this={multiSelectContainer} {...restProps} onclick={toggleDropdown} onblur={handleBlur} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={base({ size, class: clsx(theme?.base, className) })}>
   {#if !selectItems.length}
     <span class={placeholderSpan({ class: clsx(classes?.placeholder) })}>{placeholder}</span>
   {/if}
-  <span class={select({ class: clsx((theme as MultiSelectTheme)?.select, classes?.span) })}>
+  <span class={select({ class: clsx(theme?.select, classes?.span) })}>
     {#if selectItems.length}
       {#each selectItems as item (item.name)}
         {#if children}
@@ -216,7 +216,7 @@
   </span>
   <div class="ms-auto flex items-center gap-2">
     {#if selectItems.length}
-      <CloseButton {size} onclick={clearAll} color="none" class={close({ class: clsx((theme as MultiSelectTheme)?.close, classes?.close) })} {disabled} />
+      <CloseButton {size} onclick={clearAll} color="none" class={close({ class: clsx(theme?.close, classes?.close) })} {disabled} />
     {/if}
 
     <svg class={clsx(svg(), disabled && "cursor-not-allowed", classes?.svg)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">

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

@@ -1,8 +1,15 @@
 import { type MultiSelectProps } from "../..";
+declare function $$render<T>(): {
+    props: MultiSelectProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): MultiSelectProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "value";
     exports(): {};
 }

package/dist/forms/select/Select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="T">
-  import { select as selectCls, type SelectTheme } from ".";
+  import { select as selectCls } from ".";
   import clsx from "clsx";
   import { type SelectProps, CloseButton } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
@@ -31,8 +31,8 @@
   };
 </script>
 
-<div class={base({ class: clsx((theme as SelectTheme)?.base, className) })}>
-  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={select({ class: clsx((theme as SelectTheme)?.select, styling.select) })}>
+<div class={base({ class: clsx(theme?.base, className) })}>
+  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={select({ class: clsx(theme?.select, styling.select) })}>
     {#if placeholder}
       <option disabled selected={value === "" || value === undefined} value="">{placeholder}</option>
     {/if}
@@ -48,6 +48,6 @@
     {/if}
   </select>
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={close({ class: clsx((theme as SelectTheme)?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} {disabled} />
+    <CloseButton onclick={clearAll} class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} {disabled} />
   {/if}
 </div>

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

@@ -1,8 +1,15 @@
 import { type SelectProps } from "../..";
+declare function $$render<T>(): {
+    props: SelectProps<T>;
+    exports: {};
+    bindings: "value" | "elementRef";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): SelectProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "value" | "elementRef";
     exports(): {};
 }

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

@@ -1,3 +1,3 @@
 export { default as Select } from "./Select.svelte";
 export { default as MultiSelect } from "./MultiSelect.svelte";
-export { select, multiSelect, type SelectTheme, type MultiSelectTheme } from "./theme";
+export { select, multiSelect } from "./theme";

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

@@ -1,12 +1,7 @@
 import { type VariantProps } from "tailwind-variants";
-import type { ClassValue } from "svelte/elements";
 import type { Classes } from "../../theme/themeUtils";
 export type SelectVariants = VariantProps<typeof select> & Classes<typeof select>;
 export type MultiSelectVariants = VariantProps<typeof multiSelect> & Classes<typeof multiSelect>;
-export type SelectSlots = keyof typeof select.slots;
-export type SelectTheme = Partial<Record<SelectSlots, ClassValue>>;
-export type MultiSelectSlots = keyof typeof multiSelect.slots;
-export type MultiSelectTheme = Partial<Record<MultiSelectSlots, ClassValue>>;
 export declare const select: import("tailwind-variants").TVReturnType<{
     underline: {
         true: {

package/dist/forms/tags/Tags.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import clsx from "clsx";
   import { type TagsProps, CloseButton, P } from "../..";
-  import { tags, type TagsTheme } from "./theme";
+  import { tags } from "./theme";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
   import { computePosition, offset, flip, shift, autoUpdate } from "@floating-ui/dom";
   import { onDestroy } from "svelte";
@@ -150,15 +150,15 @@
 <div
   {...restProps}
   class={base({
-    class: clsx((theme as TagsTheme)?.base, className)
+    class: clsx(theme?.base, className)
   })}
 >
   {#each value as tag, index}
-    <div class={tagCls({ class: clsx((theme as TagsTheme)?.tag, styling.tag) })}>
-      <span class={spanCls({ class: clsx((theme as TagsTheme)?.span, styling.span) })}>
+    <div class={tagCls({ class: clsx(theme?.tag, styling.tag) })}>
+      <span class={spanCls({ class: clsx(theme?.span, styling.span) })}>
         {tag}
       </span>
-      <CloseButton size={closeBtnSize} class={close({ class: clsx((theme as TagsTheme)?.close, styling.close) })} onclick={() => deleteField(index)} />
+      <CloseButton size={closeBtnSize} class={close({ class: clsx(theme?.close, styling.close) })} onclick={() => deleteField(index)} />
     </div>
   {/each}
   <div class="relative w-full" bind:this={inputContainer}>
@@ -194,7 +194,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L888)
+[TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L889)
 ## Props
 @prop value = $bindable([])
 @prop placeholder = "Enter tags"

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#L888)
+ * [TagsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L889)
  * ## Props
  * @prop value = $bindable([])
  * @prop placeholder = "Enter tags"

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

@@ -1,2 +1,2 @@
 export { default as Tags } from "./Tags.svelte";
-export { tags, type TagsTheme } from "./theme";
+export { tags } from "./theme";

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

@@ -1,17 +1,14 @@
 import { type VariantProps } from "tailwind-variants";
-import type { ClassValue } from "svelte/elements";
 import type { Classes } from "../../theme/themeUtils";
 export type TagsVariants = VariantProps<typeof tags> & Classes<typeof tags>;
-export type TagsSlots = keyof typeof tags.slots;
-export type TagsTheme = Partial<Record<TagsSlots, ClassValue>>;
 export declare const tags: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
             close?: import("tailwind-variants").ClassValue;
             tag?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
             error?: import("tailwind-variants").ClassValue;
             info?: import("tailwind-variants").ClassValue;
             warning?: import("tailwind-variants").ClassValue;
@@ -20,11 +17,11 @@ export declare const tags: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
             close?: import("tailwind-variants").ClassValue;
             tag?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
             error?: import("tailwind-variants").ClassValue;
             info?: import("tailwind-variants").ClassValue;
             warning?: import("tailwind-variants").ClassValue;
@@ -42,11 +39,11 @@ export declare const tags: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
             span?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
             close?: import("tailwind-variants").ClassValue;
             tag?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
             error?: import("tailwind-variants").ClassValue;
             info?: import("tailwind-variants").ClassValue;
             warning?: import("tailwind-variants").ClassValue;

package/dist/forms/textarea/Textarea.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { textarea, type TextareaTheme } from ".";
+  import { textarea } from ".";
   import clsx from "clsx";
   import { type TextareaProps, CloseButton } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
@@ -38,33 +38,33 @@
   };
 </script>
 
-<div class={div({ class: clsx((theme as TextareaTheme)?.div, styling.div) })}>
+<div class={div({ class: clsx(theme?.div, styling.div) })}>
   {#if !wrapped}
     <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={wrapper({ class: clsx(className, classes?.wrapper) })}></textarea>
   {:else}
-    <div class={wrapper({ class: clsx((theme as TextareaTheme)?.wrapper, classes?.wrapper) })}>
+    <div class={wrapper({ class: clsx(theme?.wrapper, classes?.wrapper) })}>
       {#if header}
-        <div class={headerCls({ class: clsx((theme as TextareaTheme)?.header, styling.header) })}>
+        <div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
           {@render header()}
         </div>
       {/if}
-      <div class={inner({ class: clsx((theme as TextareaTheme)?.inner, styling.inner) })}>
+      <div class={inner({ class: clsx(theme?.inner, styling.inner) })}>
         {#if addon}
-          <div class={addonCls({ class: clsx((theme as TextareaTheme)?.addon, styling.addon) })}>
+          <div class={addonCls({ class: clsx(theme?.addon, styling.addon) })}>
             {@render addon()}
           </div>
         {/if}
-        <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={base({ class: clsx((theme as TextareaTheme)?.base, className) })}></textarea>
+        <textarea bind:value bind:this={elementRef} {disabled} {...restProps} class={base({ class: clsx(theme?.base, className) })}></textarea>
       </div>
       {#if footer}
-        <div class={footerCls({ class: clsx((theme as TextareaTheme)?.footer, styling.footer) })}>
+        <div class={footerCls({ class: clsx(theme?.footer, styling.footer) })}>
           {@render footer()}
         </div>
       {/if}
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={close({ class: clsx((theme as TextareaTheme)?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
+    <CloseButton onclick={clearAll} class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
   {/if}
 </div>
 
@@ -72,7 +72,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L941)
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L942)
 ## Props
 @prop header
 @prop footer

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#L941)
+ * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L942)
  * ## Props
  * @prop header
  * @prop footer

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

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

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

@@ -1,9 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
-import type { ClassValue } from "svelte/elements";
 import type { Classes } from "../../theme/themeUtils";
 export type TextareaVariants = VariantProps<typeof textarea> & Classes<typeof textarea>;
-export type TextareaSlots = keyof typeof textarea.slots;
-export type TextareaTheme = Partial<Record<TextareaSlots, ClassValue>>;
 export declare const textarea: import("tailwind-variants").TVReturnType<{
     wrapped: {
         false: {

package/dist/forms/timepicker/Timepicker.svelte

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

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

@@ -2,7 +2,7 @@ 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#L912)
+ * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L913)
  * ## Props
  * @prop id = "time"
  * @prop endId = "end-time"

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

@@ -1,2 +1,2 @@
 export { default as Timepicker } from "./Timepicker.svelte";
-export { timepicker, type TimepickerTheme } from "./theme";
+export { timepicker } from "./theme";

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

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

package/dist/forms/toggle/Toggle.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { toggle, type ToggleTheme } from "./index";
+  import { toggle } from "./index";
   import clsx from "clsx";
   import { type ToggleProps, Label } from "../..";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
@@ -14,12 +14,12 @@
   const { input, label, span } = $derived(toggle({ color, checked, size, disabled, off_state_label: !!offLabel }));
 </script>
 
-<Label class={label({ class: clsx((theme as ToggleTheme)?.label, className) })}>
+<Label class={label({ class: clsx(theme?.label, className) })}>
   {#if offLabel}
     {@render offLabel()}
   {/if}
-  <input type="checkbox" bind:checked {value} {...restProps} {disabled} class={input({ class: clsx((theme as ToggleTheme)?.input, styling.input) })} />
-  <span class={span({ class: clsx((theme as ToggleTheme)?.span, styling.span) })}></span>
+  <input type="checkbox" bind:checked {value} {...restProps} {disabled} class={input({ class: clsx(theme?.input, styling.input) })} />
+  <span class={span({ class: clsx(theme?.span, styling.span) })}></span>
   {#if children}
     {@render children()}
   {/if}
@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L963)
+[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L964)
 ## Props
 @prop children
 @prop size = "default"

package/dist/forms/toggle/Toggle.svelte.d.ts

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

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

@@ -1,2 +1,2 @@
 export { default as Toggle } from "./Toggle.svelte";
-export { toggle, type ToggleTheme } from "./theme";
+export { toggle } from "./theme";

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

@@ -1,9 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
-import type { ClassValue } from "svelte/elements";
 import type { Classes } from "../../theme/themeUtils";
 export type ToggleVariants = VariantProps<typeof toggle> & Classes<typeof toggle>;
-export type ToggleSlots = keyof typeof toggle.slots;
-export type ToggleTheme = Partial<Record<ToggleSlots, ClassValue>>;
 export declare const toggle: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {

package/dist/gallery/Gallery.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { gallery, type GalleryTheme } from ".";
+  import { gallery } from ".";
   import clsx from "clsx";
   import { type GalleryProps, type ImgType } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
@@ -20,11 +20,11 @@
 
 {#snippet _figure(item: ImgType)}
   <div>
-    <img src={item.src} alt={item.alt} class={image({ class: clsx((theme as GalleryTheme)?.image, styling.image) })} {...restProps} />
+    <img src={item.src} alt={item.alt} class={image({ class: clsx(theme?.image, styling.image) })} {...restProps} />
   </div>
 {/snippet}
 
-<div class={div({ class: clsx((theme as GalleryTheme)?.div, className) })} use:init>
+<div class={div({ class: clsx(theme?.div, className) })} use:init>
   {#each items as item}
     {#if figure}
       {@render figure(item as ImgType)}
@@ -42,7 +42,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L980)
+[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L981)
 ## Props
 @prop children
 @prop figure

package/dist/gallery/Gallery.svelte.d.ts

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

package/dist/gallery/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Gallery } from "./Gallery.svelte";
-export { gallery, type GalleryTheme } from "./theme";
+export { gallery } from "./theme";