flowbite-svelte 2.0.0-next.2 → 2.0.0-next.4

package/dist/forms/phoneinput/PhoneInput.svelte

@@ -2,20 +2,24 @@
   import type { PhoneInputProps } from "../..";
   import { phoneInput } from "./theme";
   import clsx from "clsx";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
 
   let {
     children,
     phoneIcon = true,
-    pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}",
+    pattern,
     phoneType = "default",
     floatingLabel = "Phone number",
     labelFor = "floating-phone-number",
     class: className,
     classes,
+    value = $bindable(""),
     ...restProps
   }: PhoneInputProps = $props();
 
+  // Set default pattern if not provided
+  const inputPattern = $derived(pattern ?? "[0-9]{3}-[0-9]{3}-[0-9]{4}");
+
   const theme = $derived(getTheme("phoneInput"));
 
   const { div, svg, input, span, floatingInput, label } = $derived(phoneInput({ phoneType, phoneIcon }));
@@ -36,7 +40,7 @@
         {@render phoneIconSnippet()}
       </div>
     {/if}
-    <input type="tel" {pattern} {...restProps} class={input({ class: clsx(theme?.input, classes?.input) })} />
+    <input type="tel" pattern={inputPattern} bind:value {...restProps} class={input({ class: clsx(theme?.input, classes?.input) })} />
   </div>
 {:else if phoneType === "floating"}
   <div class="relative">
@@ -45,7 +49,25 @@
         {@render phoneIconSnippet()}
       </span>
     {/if}
-    <input type="tel" class={floatingInput({ class: clsx(theme?.floatingInput, classes?.floatingInput) })} {pattern} {...restProps} />
+    <input type="tel" pattern={inputPattern} bind:value {...restProps} class={floatingInput({ class: clsx(theme?.floatingInput, classes?.floatingInput) })} />
     <label for={labelFor} class={label({ class: clsx(theme?.label, classes?.label) })}>{floatingLabel}</label>
   </div>
 {/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[PhoneInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L828)
+## Props
+@prop children
+@prop phoneIcon = true
+@prop pattern
+@prop phoneType = "default"
+@prop floatingLabel = "Phone number"
+@prop labelFor = "floating-phone-number"
+@prop class: className
+@prop classes
+@prop value = $bindable("")
+@prop ...restProps
+-->

package/dist/forms/phoneinput/PhoneInput.svelte.d.ts

@@ -1,4 +1,20 @@
 import type { PhoneInputProps } from "../..";
-declare const PhoneInput: import("svelte").Component<PhoneInputProps, {}, "">;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [PhoneInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L828)
+ * ## Props
+ * @prop children
+ * @prop phoneIcon = true
+ * @prop pattern
+ * @prop phoneType = "default"
+ * @prop floatingLabel = "Phone number"
+ * @prop labelFor = "floating-phone-number"
+ * @prop class: className
+ * @prop classes
+ * @prop value = $bindable("")
+ * @prop ...restProps
+ */
+declare const PhoneInput: import("svelte").Component<PhoneInputProps, {}, "value">;
 type PhoneInput = ReturnType<typeof PhoneInput>;
 export default PhoneInput;

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../../theme/themeUtils";
+import type { Classes } from "../../theme-provider/themeUtils";
 export type PhoneInputVariants = VariantProps<typeof phoneInput> & Classes<typeof phoneInput>;
 export declare const phoneInput: import("tailwind-variants").TVReturnType<{
     phoneType: {

package/dist/forms/radio/Radio.svelte

@@ -4,7 +4,7 @@
   import clsx from "clsx";
   import type { RadioProps } from "../..";
   import Label from "../label/Label.svelte";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
 
   let {
     children,

package/dist/forms/radio/RadioButton.svelte

@@ -3,7 +3,7 @@
   import type { RadioButtonProps } from "../..";
   import Button from "../../buttons/Button.svelte";
   import { radioButton } from "./theme";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
 
   let { children, group = $bindable<T>(), value = $bindable<T>(), inline, pill, outline, size, color, shadow, checkedClass, class: className, ...restProps }: RadioButtonProps<T> = $props();
 

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../../theme/themeUtils";
+import type { Classes } from "../../theme-provider/themeUtils";
 export type RadioVariants = VariantProps<typeof radio> & Classes<typeof radio>;
 export declare const radio: import("tailwind-variants").TVReturnType<{
     color: {
@@ -21,15 +21,6 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
         success: {
             input: string;
         };
-        teal: {
-            input: string;
-        };
-        indigo: {
-            input: string;
-        };
-        purple: {
-            input: string;
-        };
     };
     tinted: {
         true: {
@@ -78,15 +69,6 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
         success: {
             input: string;
         };
-        teal: {
-            input: string;
-        };
-        indigo: {
-            input: string;
-        };
-        purple: {
-            input: string;
-        };
     };
     tinted: {
         true: {
@@ -135,15 +117,6 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
         success: {
             input: string;
         };
-        teal: {
-            input: string;
-        };
-        indigo: {
-            input: string;
-        };
-        purple: {
-            input: string;
-        };
     };
     tinted: {
         true: {

package/dist/forms/radio/theme.js

@@ -6,7 +6,7 @@ export const radio = tv({
     },
     variants: {
         color: {
-            // "brand" | "danger" | "success" | "warning" | "dark" | "neutral" | "purple" | "indigo" | "teal"
+            // "brand" | "danger" | "success" | "warning" | "dark" | "neutral"
             brand: {
                 input: "text-brand focus:ring-fuchsia-500 dark:focus:ring-fuchsia-600"
             },
@@ -22,15 +22,6 @@ export const radio = tv({
             },
             success: {
                 input: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600"
-            },
-            teal: {
-                input: "text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600"
-            },
-            indigo: {
-                input: "text-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600"
-            },
-            purple: {
-                input: "text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600"
             }
         },
         tinted: {

package/dist/forms/range/Range.svelte

@@ -2,7 +2,7 @@
   import { range } from "./theme";
   import clsx from "clsx";
   import type { RangeProps } from "../..";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
 
   let { value = $bindable(), appearance = "none", color = "blue", size = "md", inputClass, class: className, ...restProps }: RangeProps = $props();
 
@@ -11,13 +11,13 @@
   const inputCls = $derived(range({ appearance, color, size, class: clsx(theme, inputClass, className) }));
 </script>
 
-<input type="range" bind:value {...restProps} class={inputCls} />
+<input data-scope="range" data-part="base" type="range" bind:value {...restProps} class={inputCls} />
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L856)
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L864)
 ## Props
 @prop value = $bindable()
 @prop appearance = "none"

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

@@ -2,7 +2,7 @@ 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#L856)
+ * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L864)
  * ## Props
  * @prop value = $bindable()
  * @prop appearance = "none"

package/dist/forms/search/Search.svelte

@@ -3,7 +3,7 @@
   import clsx from "clsx";
   import type { SearchProps } from "../..";
   import CloseButton from "../../utils/CloseButton.svelte";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
 
   let {
@@ -13,10 +13,10 @@
     value = $bindable(),
     elementRef = $bindable(),
     clearable = false,
-    clearableColor = "none",
     clearableOnClick,
     class: className,
     classes,
+    closeButtonProps,
     ...restProps
   }: SearchProps = $props();
 
@@ -35,22 +35,32 @@
   };
 
   createDismissableContext(clearAll);
+
+  const finalCloseProps = $derived({
+    class: close({ class: clsx(theme?.close, styling?.close) }),
+    color: closeButtonProps?.color ?? "gray",
+    ariaLabel: closeButtonProps?.ariaLabel ?? "Clear search value",
+    size: closeButtonProps?.size,
+    classes: closeButtonProps?.classes ?? { svg: clsx(theme?.svg, styling?.svg) },
+    name: closeButtonProps?.name,
+    onclick: closeButtonProps?.onclick
+  });
 </script>
 
-<div class={base({ class: clsx(theme?.base, className) })}>
-  <div class={left({ class: clsx(theme?.left, styling?.left) })}>
-    <svg class={icon({ class: clsx(theme?.icon, styling?.icon) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+<div data-scope="search" data-part="base" class={base({ class: clsx(theme?.base, className) })}>
+  <div data-part="left" class={left({ class: clsx(theme?.left, styling?.left) })}>
+    <svg data-part="icon" class={icon({ class: clsx(theme?.icon, styling?.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="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(theme?.input, styling?.input) })} {placeholder} required {...restProps} />
+  <input data-part="input" type="search" bind:value bind:this={elementRef} class={inputCls({ class: clsx(theme?.input, styling?.input) })} {placeholder} required {...restProps} />
   {#if children}
-    <div class={content({ class: clsx(theme?.content, styling?.content) })}>
+    <div data-part="content" class={content({ class: clsx(theme?.content, styling?.content) })}>
       {@render children()}
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton class={close({ class: clsx(theme?.close, styling?.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling?.svg)} />
+    <CloseButton {...finalCloseProps} />
   {/if}
 </div>
 
@@ -58,7 +68,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L862)
+[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L870)
 ## Props
 @prop children
 @prop size
@@ -66,9 +76,9 @@
 @prop value = $bindable()
 @prop elementRef = $bindable()
 @prop clearable = false
-@prop clearableColor = "none"
 @prop clearableOnClick
 @prop class: className
 @prop classes
+@prop closeButtonProps
 @prop ...restProps
 -->

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

@@ -2,7 +2,7 @@ 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#L862)
+ * [SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L870)
  * ## Props
  * @prop children
  * @prop size
@@ -10,10 +10,10 @@ import type { SearchProps } from "../..";
  * @prop value = $bindable()
  * @prop elementRef = $bindable()
  * @prop clearable = false
- * @prop clearableColor = "none"
  * @prop clearableOnClick
  * @prop class: className
  * @prop classes
+ * @prop closeButtonProps
  * @prop ...restProps
  */
 declare const Search: import("svelte").Component<SearchProps, {}, "value" | "elementRef">;

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../../theme/themeUtils";
+import type { Classes } from "../../theme-provider/themeUtils";
 export type SearchVariants = VariantProps<typeof search> & Classes<typeof search>;
 export declare const search: import("tailwind-variants").TVReturnType<{
     size: {

package/dist/forms/select/MultiSelect.svelte

@@ -4,7 +4,7 @@
   import Badge from "../../badge/Badge.svelte";
   import CloseButton from "../../utils/CloseButton.svelte";
   import { multiSelect } from "./theme";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
   import { onMount } from "svelte";
   import { createDismissableContext } from "../../utils/dismissable";
   import { getButtonGroupContext } from "../../context";
@@ -27,6 +27,7 @@
     form,
     required,
     autocomplete,
+    closeButtonProps,
     ...restProps
   }: MultiSelectProps<T> = $props();
 
@@ -195,6 +196,17 @@
   });
 
   const { base, dropdown, item: dropdownItem, close, select, placeholder: placeholderSpan, svg } = $derived(multiSelect({ disabled, grouped: !!group }));
+
+  const finalCloseProps = $derived({
+    class: close({ class: clsx(theme?.close, styling?.close) }),
+    color: closeButtonProps?.color ?? "gray",
+    ariaLabel: closeButtonProps?.ariaLabel ?? "Clear search value",
+    size: closeButtonProps?.size,
+    classes: closeButtonProps?.classes ?? { svg: clsx(theme?.svg, styling?.svg) },
+    name: closeButtonProps?.name,
+    onclick: closeButtonProps?.onclick,
+    disabled
+  });
 </script>
 
 <select {name} {form} {required} {autocomplete} {value} hidden multiple {onchange}>
@@ -231,7 +243,7 @@
   </span>
   <div class="ms-auto flex items-center gap-2">
     {#if selectItems.length}
-      <CloseButton {size} color="none" class={close({ class: clsx(theme?.close, classes?.close) })} {disabled} />
+      <CloseButton {...finalCloseProps} />
     {/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/Select.svelte

@@ -3,7 +3,7 @@
   import clsx from "clsx";
   import type { SelectProps } from "../..";
   import CloseButton from "../../utils/CloseButton.svelte";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
   import { getButtonGroupContext } from "../../context";
 
@@ -17,11 +17,11 @@
     disabled,
     placeholder = "Choose option ...",
     clearable,
-    clearableColor = "none",
     clearableOnClick,
     onClear,
     class: className,
     classes,
+    closeButtonProps,
     ...restProps
   }: SelectProps<T> = $props();
 
@@ -48,6 +48,17 @@
   };
 
   createDismissableContext(clearAll);
+
+  const finalCloseProps = $derived({
+    class: close({ class: clsx(theme?.close, styling?.close) }),
+    color: closeButtonProps?.color ?? "gray",
+    ariaLabel: closeButtonProps?.ariaLabel ?? "Clear search value",
+    size: closeButtonProps?.size,
+    classes: closeButtonProps?.classes ?? { svg: clsx(theme?.svg, styling?.svg) },
+    name: closeButtonProps?.name,
+    onclick: closeButtonProps?.onclick,
+    disabled
+  });
 </script>
 
 <div class={base({ class: clsx(theme?.base, className) })}>
@@ -67,6 +78,6 @@
     {/if}
   </select>
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton class={close({ class: clsx(theme?.close, styling?.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling?.svg)} {disabled} />
+    <CloseButton {...finalCloseProps} />
   {/if}
 </div>

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../../theme/themeUtils";
+import type { Classes } from "../../theme-provider/themeUtils";
 export type SelectVariants = VariantProps<typeof select> & Classes<typeof select>;
 export type MultiSelectVariants = VariantProps<typeof multiSelect> & Classes<typeof multiSelect>;
 export declare const select: import("tailwind-variants").TVReturnType<{

package/dist/forms/textarea/Textarea.svelte

@@ -3,7 +3,7 @@
   import clsx from "clsx";
   import type { TextareaProps } from "../..";
   import CloseButton from "../../utils/CloseButton.svelte";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
 
   let {
@@ -16,8 +16,8 @@
     class: className,
     classes,
     clearable,
-    clearableColor = "none",
     clearableOnClick,
+    closeButtonProps,
     ...restProps
   }: TextareaProps = $props();
 
@@ -41,6 +41,16 @@
   };
 
   createDismissableContext(clearAll);
+
+  const finalCloseProps = $derived({
+    class: close({ class: clsx(theme?.close, styling?.close) }),
+    color: closeButtonProps?.color ?? "gray",
+    ariaLabel: closeButtonProps?.ariaLabel ?? "Clear search value",
+    size: closeButtonProps?.size,
+    classes: closeButtonProps?.classes ?? { svg: clsx(theme?.svg, styling?.svg) },
+    name: closeButtonProps?.name,
+    onclick: closeButtonProps?.onclick
+  });
 </script>
 
 <div class={div({ class: clsx(theme?.div, className) })}>
@@ -69,7 +79,7 @@
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton class={close({ class: clsx(theme?.close, styling?.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling?.svg)} />
+    <CloseButton {...finalCloseProps} />
   {/if}
 </div>
 
@@ -77,7 +87,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L960)
+[TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L969)
 ## Props
 @prop header
 @prop footer
@@ -88,7 +98,7 @@
 @prop class: className
 @prop classes
 @prop clearable
-@prop clearableColor = "none"
 @prop clearableOnClick
+@prop closeButtonProps
 @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#L960)
+ * [TextareaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L969)
  * ## Props
  * @prop header
  * @prop footer
@@ -13,8 +13,8 @@ import type { TextareaProps } from "../..";
  * @prop class: className
  * @prop classes
  * @prop clearable
- * @prop clearableColor = "none"
  * @prop clearableOnClick
+ * @prop closeButtonProps
  * @prop ...restProps
  */
 declare const Textarea: import("svelte").Component<TextareaProps, {}, "value" | "elementRef">;

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../../theme/themeUtils";
+import type { Classes } from "../../theme-provider/themeUtils";
 export type TextareaVariants = VariantProps<typeof textarea> & Classes<typeof textarea>;
 export declare const textarea: import("tailwind-variants").TVReturnType<{
     wrapped: {

package/dist/forms/timepicker/Timepicker.svelte

@@ -11,7 +11,7 @@
   import Toggle from "../toggle/Toggle.svelte";
   import { timepicker } from "./theme";
   import { parse, isValid, isBefore, isAfter } from "date-fns";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
 
   let {
     id = "time",
@@ -23,7 +23,7 @@
     required = true,
     disabled = false,
     inputColor,
-    buttonColor = "primary",
+    buttonColor = "brand",
     Icon,
     iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400",
     type = "default",
@@ -396,7 +396,7 @@
 {:else}
   <div class={styles.inlineGrid({ class: clsx(theme?.inlineGrid) })}>
     {#each timeIntervals as time (time)}
-      <Button {size} color={value === time ? buttonColor : "light"} class={styles.inlineButton({ class: clsx(theme?.inlineButton) })} onclick={() => handleInlineButtonSelect(time)}>
+      <Button {size} color={value === time ? buttonColor : "danger"} class={styles.inlineButton({ class: clsx(theme?.inlineButton) })} onclick={() => handleInlineButtonSelect(time)}>
         {time}
       </Button>
     {/each}
@@ -407,7 +407,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L931)
+[TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L940)
 ## Props
 @prop id = "time"
 @prop endId = "end-time"
@@ -418,7 +418,7 @@
 @prop required = true
 @prop disabled = false
 @prop inputColor
-@prop buttonColor = "primary"
+@prop buttonColor = "brand"
 @prop Icon
 @prop iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400"
 @prop type = "default"

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#L931)
+ * [TimepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L940)
  * ## Props
  * @prop id = "time"
  * @prop endId = "end-time"
@@ -13,7 +13,7 @@ import type { TimepickerProps } from "../..";
  * @prop required = true
  * @prop disabled = false
  * @prop inputColor
- * @prop buttonColor = "primary"
+ * @prop buttonColor = "brand"
  * @prop Icon
  * @prop iconClass = "h-5 w-5 text-gray-500 dark:text-gray-400"
  * @prop type = "default"

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../../theme/themeUtils";
+import type { Classes } from "../../theme-provider/themeUtils";
 export type TimepickerVariants = VariantProps<typeof timepicker> & Classes<typeof timepicker>;
 export declare const timepicker: import("tailwind-variants").TVReturnType<{
     type: {

package/dist/forms/toggle/Toggle.svelte

@@ -3,7 +3,7 @@
   import clsx from "clsx";
   import type { ToggleProps } from "../..";
   import Label from "../label/Label.svelte";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme-provider/themeUtils";
 
   let { children, size = "default", value, checked = $bindable(), disabled, color = "primary", class: className, classes, offLabel, ...restProps }: ToggleProps = $props();
 
@@ -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#L973)
+[ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L983)
 ## 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#L973)
+ * [ToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L983)
  * ## Props
  * @prop children
  * @prop size = "default"

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-import type { Classes } from "../../theme/themeUtils";
+import type { Classes } from "../../theme-provider/themeUtils";
 export type ToggleVariants = VariantProps<typeof toggle> & Classes<typeof toggle>;
 export declare const toggle: import("tailwind-variants").TVReturnType<{
     disabled: {

package/dist/gallery/Gallery.svelte

@@ -2,7 +2,7 @@
   import { gallery } from "./theme";
   import clsx from "clsx";
   import type { GalleryProps, ImgType } from "..";
-  import { getTheme } from "../theme/themeUtils";
+  import { getTheme } from "../theme-provider/themeUtils";
 
   let { children, figure, items = [], class: className, classes, ...restProps }: GalleryProps = $props();
 
@@ -41,7 +41,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L988)
+[GalleryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L998)
 ## Props
 @prop children
 @prop figure