flowbite-svelte 1.9.0 → 1.10.0

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

@@ -2,7 +2,7 @@ import { type FileuploadProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L726)
+ * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L719)
  * ## Props
  * @prop files = $bindable()
  * @prop size = "md"

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

@@ -1,2 +1,2 @@
 export { default as Fileupload } from "./Fileupload.svelte";
-export { fileupload } from "./theme";
+export { fileupload, type FileuploadTheme } from "./theme";

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

@@ -49,3 +49,5 @@ export declare const fileupload: import("tailwind-variants").TVReturnType<{
     wrapper: string;
     right: string;
 }, undefined, unknown, unknown, undefined>>;
+export type FileuploadSlots = keyof typeof fileupload.slots;
+export type FileuploadTheme = Partial<Record<FileuploadSlots, string>>;

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

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { idGenerator } from "../../utils";
-  import { floatingLabelInput } from ".";
+  import { floatingLabelInput, type FloatingLabelInputTheme } from ".";
   import { type FloatingLabelInputProps, CloseButton, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, id = idGenerator(), value = $bindable(), elementRef = $bindable(), "aria-describedby": ariaDescribedby, variant = "standard", size = "default", color = "default", class: className, inputClass, labelClass, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, ...restProps }: FloatingLabelInputProps = $props();
 
-  const { base, input, label, clearbtn, combo } = $derived(floatingLabelInput({ variant, size, color }));
+  const theme = getTheme("floatingLabelInput");
+
+  const { base, input, label, closebutton, combo } = $derived(floatingLabelInput({ variant, size, color }));
 
   const clearAll = () => {
     if (elementRef) {
@@ -133,17 +136,17 @@
   <div tabindex="-1" bind:this={dummyFocusDiv} class="sr-only"></div>
 {/if}
 
-<div class={cn(base(), isCombobox ? "relative" : "", className)}>
-  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} aria-describedby={ariaDescribedby} class={cn(input(), inputClass)} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} />
+<div class={cn(base(), isCombobox ? "relative" : "", className, (theme as FloatingLabelInputTheme)?.base)}>
+  <input {id} placeholder=" " bind:value bind:this={elementRef} {...restProps} aria-describedby={ariaDescribedby} class={cn(input(), inputClass, (theme as FloatingLabelInputTheme)?.input)} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} />
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={cn(clearbtn(), clearableClass)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as FloatingLabelInputTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
   {/if}
-  <label for={id} class={cn(label(), labelClass)}>
+  <label for={id} class={cn(label(), labelClass, (theme as FloatingLabelInputTheme)?.label)}>
     {@render children()}
   </label>
 
   {#if isCombobox && isFocused && filteredSuggestions.length > 0}
-    <div class={cn(combo(), comboClass)}>
+    <div class={cn(combo(), comboClass, (theme as FloatingLabelInputTheme)?.combo)}>
       {#each filteredSuggestions as item, i}
         <button type="button" class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none" onclick={() => selectItem(item)} onmouseenter={() => (selectedIndex = i)}>
           {item}
@@ -157,7 +160,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L740)
+[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L733)
 ## Props
 @prop children
 @prop id = idGenerator()

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

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

package/dist/forms/floating-label/index.d.ts

@@ -1,2 +1,2 @@
 export { default as FloatingLabelInput } from "./FloatingLabelInput.svelte";
-export { floatingLabelInput } from "./theme";
+export { floatingLabelInput, type FloatingLabelInputTheme } from "./theme";

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

@@ -112,7 +112,7 @@ export declare const floatingLabelInput: import("tailwind-variants").TVReturnTyp
     base: string;
     input: string;
     label: string;
-    clearbtn: string;
+    closebutton: string;
     combo: string;
 }, undefined, {
     variant: {
@@ -226,7 +226,7 @@ export declare const floatingLabelInput: import("tailwind-variants").TVReturnTyp
     base: string;
     input: string;
     label: string;
-    clearbtn: string;
+    closebutton: string;
     combo: string;
 }, import("tailwind-variants").TVReturnType<{
     variant: {
@@ -340,6 +340,8 @@ export declare const floatingLabelInput: import("tailwind-variants").TVReturnTyp
     base: string;
     input: string;
     label: string;
-    clearbtn: string;
+    closebutton: string;
     combo: string;
 }, undefined, unknown, unknown, undefined>>;
+export type FloatingLabelInputSlots = keyof typeof floatingLabelInput.slots;
+export type FloatingLabelInputTheme = Partial<Record<FloatingLabelInputSlots, string>>;

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

@@ -4,7 +4,7 @@ export const floatingLabelInput = tv({
         base: "relative",
         input: "block w-full text-sm text-gray-900 bg-transparent appearance-none dark:text-white focus:outline-hidden focus:ring-0 peer",
         label: "absolute text-sm duration-300 transform scale-75 z-10 origin-left rtl:origin-right peer-placeholder-shown:scale-100 peer-focus:scale-75",
-        clearbtn: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black",
+        closebutton: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black",
         combo: "absolute top-full right-0 left-0 z-10 mt-1 max-h-60 overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
     },
     variants: {

package/dist/forms/helper/Helper.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { helper } from ".";
   import { type HelperProps, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, color = "gray", ...restProps }: HelperProps = $props();
 
-  const base = $derived(cn(helper({ color }), className));
+  const theme = getTheme("helper");
+
+  const base = $derived(cn(helper({ color }), className, theme));
 </script>
 
 <p {...restProps} class={base}>
@@ -15,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L763)
+[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L756)
 ## Props
 @prop children
 @prop class: className

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

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

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

@@ -1,2 +1,2 @@
 export { default as Helper } from "./Helper.svelte";
-export { helper } from "./theme";
+export { helper, type HelperTheme } from "./theme";

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

@@ -73,3 +73,4 @@ export declare const helper: import("tailwind-variants").TVReturnType<{
         rose: string;
     };
 }, undefined, "text-xs font-normal text-gray-500 dark:text-gray-300", unknown, unknown, undefined>>;
+export type HelperTheme = string;

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

@@ -2,8 +2,12 @@
   import type { SizeType } from "../../types";
   import { getContext } from "svelte";
   import { type InputAddonProps, clampSize, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, size, ...restProps }: InputAddonProps = $props();
+
+  const theme = getTheme("inputAddon");
+
   let background: boolean = getContext("background");
   let group: { size: SizeType } = getContext("group");
 
@@ -28,7 +32,7 @@
   // size: explicit, inherited, default
   let _size = size || clampSize(group?.size) || "md";
 
-  let divClass: string = cn(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border", group && "not-first:-ms-px", "first:rounded-s-lg last:rounded-e-lg", className);
+  let divClass: string = cn(textSizes[_size], prefixPadding[_size], "text-gray-500 bg-gray-200", background ? darkBgClasses.tinted : darkBgClasses.base, background ? divider.tinted : divider.base, background ? borderClasses["tinted"] : borderClasses["base"], "inline-flex items-center border", group && "not-first:-ms-px", "first:rounded-s-lg last:rounded-e-lg", className, theme);
 </script>
 
 <div {...restProps} class={divClass}>
@@ -39,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L805)
+[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L798)
 ## Props
 @prop children
 @prop class: className

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

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

package/dist/forms/input-field/Input.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import { CloseButton, type SizeType, type InputProps, type InputValue, cn } from "../..";
-  import { input, clampSize } from ".";
+  import { input, clampSize, type InputTheme } from ".";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, comboItemClass, onInput, onFocus, onBlur, onKeydown, oninput, onfocus, onblur, onkeydown, ...restProps }: InputProps<InputValue> = $props();
 
+  const theme = getTheme("input");
+
   // onSelect is a custom combobox selection handler that takes a string
   // standard DOM events, onInput, onFocus, onBlur, onKeydown will be deprecated in the next minor version
   const resolvedOnInput = $derived(oninput || onInput);
@@ -26,7 +29,7 @@
   let _size = $derived(size || clampSize(group?.size) || "md");
   const _color = $derived(color === "default" && background ? "tinted" : color);
 
-  const { base, input: inputCls, left: leftCls, right: rightCls, clearbtn, combo, comboItem } = $derived(input({ size: _size, color: _color, group: isGroup }));
+  const { base, input: inputCls, left: leftCls, right: rightCls, closebutton, combo, comboItem } = $derived(input({ size: _size, color: _color, group: isGroup }));
 
   const clearAll = () => {
     if (elementRef) {
@@ -207,7 +210,7 @@
 {#if isCombobox}
   <div class={cn(isCombobox ? "relative w-full" : "", wrapperClass)}>
     {#if right || left || clearable}
-      <div class={cn(base(), divClass)}>
+      <div class={cn(base(), divClass, (theme as InputTheme)?.base)}>
         {@render inputContent()}
       </div>
     {:else}
@@ -215,10 +218,10 @@
     {/if}
 
     {#if isCombobox && isFocused && filteredSuggestions.length > 0}
-      <div class={cn(combo(), comboClass)}>
+      <div class={cn(combo(), comboClass, (theme as InputTheme)?.combo)}>
         {#each filteredSuggestions as item, i}
           <button type="button" class="w-full px-3 py-2 text-left {i === selectedIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'} focus:outline-none" onclick={() => selectItem(item)} onmouseenter={() => (selectedIndex = i)}>
-            <p class={cn(comboItem(), comboItemClass)}>{item}</p>
+            <p class={cn(comboItem(), comboItemClass, (theme as InputTheme)?.comboItem)}>{item}</p>
           </button>
         {/each}
       </div>
@@ -227,7 +230,7 @@
 {:else if group}
   {@render inputContent()}
 {:else if right || left || clearable}
-  <div class={cn(base(), divClass)}>
+  <div class={cn(base(), divClass, (theme as InputTheme)?.base)}>
     {@render inputContent()}
   </div>
 {:else}
@@ -236,20 +239,20 @@
 
 {#snippet inputContent()}
   {#if left}
-    <div class={cn(leftCls(), leftClass)}>
+    <div class={cn(leftCls(), leftClass, (theme as InputTheme)?.left)}>
       {@render left()}
     </div>
   {/if}
   {#if children}
     {@render children({ ...restProps, class: inputCls() })}
   {:else}
-    <input {...restProps} bind:value bind:this={elementRef} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} class={cn(inputCls(), className)} />
+    <input {...restProps} bind:value bind:this={elementRef} oninput={handleInput} onfocus={handleFocus} onblur={handleBlur} onkeydown={handleKeydown} class={cn(inputCls(), className, (theme as InputTheme)?.input)} />
     {#if value !== undefined && value !== "" && clearable}
-      <CloseButton onclick={clearAll} class={cn(clearbtn(), clearableClass)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
+      <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as InputTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
     {/if}
   {/if}
   {#if right}
-    <div class={cn(rightCls(), rightClass)}>
+    <div class={cn(rightCls(), rightClass, (theme as InputTheme)?.right)}>
       {@render right()}
     </div>
   {/if}

package/dist/forms/input-field/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Input } from "./Input.svelte";
 import type { SizeType } from "../../types";
-export { input } from "./theme";
+export { input, type InputTheme } from "./theme";
 export declare function clampSize(s: SizeType): "md" | "sm" | "lg";

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

@@ -93,7 +93,7 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     input: string;
     left: string;
     right: string;
-    clearbtn: string;
+    closebutton: string;
     combo: string;
     comboItem: string;
 }, undefined, {
@@ -189,7 +189,7 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     input: string;
     left: string;
     right: string;
-    clearbtn: string;
+    closebutton: string;
     combo: string;
     comboItem: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -285,7 +285,9 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     input: string;
     left: string;
     right: string;
-    clearbtn: string;
+    closebutton: string;
     combo: string;
     comboItem: string;
 }, undefined, unknown, unknown, undefined>>;
+export type InputSlots = keyof typeof input.slots;
+export type InputTheme = Partial<Record<InputSlots, string>>;

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

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

package/dist/forms/label/Label.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { label } from ".";
   import { type LabelProps, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, color = "gray", show = true, class: className, ...restProps }: LabelProps = $props();
 
-  let base = $derived(cn(label({ color }), className));
+  const theme = getTheme("label");
+
+  let base = $derived(cn(label({ color }), className, theme));
 </script>
 
 {#if show}
@@ -19,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L820)
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L813)
 ## Props
 @prop children
 @prop color = "gray"

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

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

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

@@ -1,2 +1,2 @@
 export { default as Label } from "./Label.svelte";
-export { label } from "./theme";
+export { label, type LabelTheme } from "./theme";

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

@@ -73,3 +73,4 @@ export declare const label: import("tailwind-variants").TVReturnType<{
         rose: string;
     };
 }, undefined, "text-sm rtl:text-right font-medium block", unknown, unknown, undefined>>;
+export type LabelTheme = string;

package/dist/forms/phoneinput/PhoneInput.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
-  import { type PhoneInputProps } from "../../types";
-  import { phoneinput } from ".";
+  import { type PhoneInputProps, cn } from "../..";
+  import { phoneinput, type PhoneInputTheme } from ".";
   import clsx from "clsx";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, phoneIcon = true, pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}", phoneType = "default", floatingLabel = "Phone number", labelFor = "floating-phone-number", classes, ...restProps }: PhoneInputProps = $props();
 
+  const theme = getTheme("phoneInput");
+
   const { defaultDiv, phonesvg, defaultInput, floatingSpan, floatingInput, labelFloating } = $derived(phoneinput({ phoneType, phoneIcon }));
 </script>
 
 {#snippet phoneIconSnippet()}
-  <svg class={phonesvg()} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
+  <svg class={cn(phonesvg(), (theme as PhoneInputTheme)?.phonesvg)} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
     <path d="M18 13.446a3.02 3.02 0 0 0-.946-1.985l-1.4-1.4a3.054 3.054 0 0 0-4.218 0l-.7.7a.983.983 0 0 1-1.39 0l-2.1-2.1a.983.983 0 0 1 0-1.389l.7-.7a2.98 2.98 0 0 0 0-4.217l-1.4-1.4a2.824 2.824 0 0 0-4.218 0c-3.619 3.619-3 8.229 1.752 12.979C6.785 16.639 9.45 18 11.912 18a7.175 7.175 0 0 0 5.139-2.325A2.9 2.9 0 0 0 18 13.446Z" />
   </svg>
 {/snippet}
@@ -17,20 +20,20 @@
 {#if phoneType === "default" || phoneType === "countryCode"}
   <div class="relative">
     {#if phoneIcon}
-      <div class={defaultDiv({ class: clsx(classes?.defaultDiv) })}>
+      <div class={cn(defaultDiv({ class: clsx(classes?.defaultDiv) }), (theme as PhoneInputTheme)?.defaultDiv)}>
         {@render phoneIconSnippet()}
       </div>
     {/if}
-    <input type="tel" {pattern} {...restProps} class={defaultInput({ class: clsx(classes?.defaultInput) })} />
+    <input type="tel" {pattern} {...restProps} class={cn(defaultInput({ class: clsx(classes?.defaultInput) }), (theme as PhoneInputTheme)?.defaultInput)} />
   </div>
 {:else if phoneType === "floating"}
   <div class="relative">
     {#if phoneIcon}
-      <span class={floatingSpan({ class: clsx(classes?.floatingSpan) })}>
+      <span class={cn(floatingSpan({ class: clsx(classes?.floatingSpan) }), (theme as PhoneInputTheme)?.floatingSpan)}>
         {@render phoneIconSnippet()}
       </span>
     {/if}
-    <input type="tel" class={floatingInput({ class: clsx(classes?.floatingInput) })} {pattern} {...restProps} />
-    <label for={labelFor} class={labelFloating({ class: clsx(classes?.labelFloating) })}>{floatingLabel}</label>
+    <input type="tel" class={cn(floatingInput({ class: clsx(classes?.floatingInput) }), (theme as PhoneInputTheme)?.floatingInput)} {pattern} {...restProps} />
+    <label for={labelFor} class={cn(labelFloating({ class: clsx(classes?.labelFloating) }), (theme as PhoneInputTheme)?.labelFloating)}>{floatingLabel}</label>
   </div>
 {/if}

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

@@ -1,4 +1,4 @@
-import { type PhoneInputProps } from "../../types";
+import { type PhoneInputProps } from "../..";
 declare const PhoneInput: import("svelte").Component<PhoneInputProps<number>, {}, "">;
 type PhoneInput = ReturnType<typeof PhoneInput>;
 export default PhoneInput;

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

@@ -1,2 +1,2 @@
 export { default as PhoneInput } from "./PhoneInput.svelte";
-export { phoneinput } from "./theme";
+export { phoneinput, type PhoneInputTheme } from "./theme";

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

@@ -82,3 +82,5 @@ export declare const phoneinput: import("tailwind-variants").TVReturnType<{
     floatingInput: string;
     labelFloating: string;
 }, undefined, unknown, unknown, undefined>>;
+export type PhoneInputSlots = keyof typeof phoneinput.slots;
+export type PhoneInputTheme = Partial<Record<PhoneInputSlots, string>>;

package/dist/forms/radio/Radio.svelte

@@ -1,15 +1,18 @@
 <script lang="ts" generics="T">
   import { getContext } from "svelte";
-  import { radio } from ".";
+  import { radio, type RadioTheme } from ".";
   import { type RadioProps, Label, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, "aria-describedby": ariaDescribedby, inline = false, labelClass, color = "primary", custom = false, group = $bindable<T>(), value = $bindable<T>(), inputClass, ...restProps }: RadioProps<T> = $props();
 
+  const theme = getTheme("radio");
+
   const { input, label } = $derived(radio({ color, tinted: !!getContext("background"), custom, inline }));
 </script>
 
-<Label class={cn(label(), labelClass)}>
-  <input type="radio" bind:group {value} aria-describedby={ariaDescribedby} {...restProps} class={cn(input(), inputClass)} />
+<Label class={cn(label(), labelClass, (theme as RadioTheme)?.label)}>
+  <input type="radio" bind:group {value} aria-describedby={ariaDescribedby} {...restProps} class={cn(input(), inputClass, (theme as RadioTheme)?.input)} />
   {@render children?.()}
 </Label>
 

package/dist/forms/radio/RadioButton.svelte

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

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

@@ -1,3 +1,3 @@
 export { default as Radio } from "./Radio.svelte";
 export { default as RadioButton } from "./RadioButton.svelte";
-export { radio, radiobutton } from "./theme";
+export { radio, radiobutton, type RadioTheme, type RadioButtonTheme } from "./theme";

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

@@ -271,6 +271,8 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
     input: string;
     label: string;
 }, undefined, unknown, unknown, undefined>>;
+export type RadioSlots = keyof typeof radio.slots;
+export type RadioTheme = Partial<Record<RadioSlots, string>>;
 export declare const radiobutton: import("tailwind-variants").TVReturnType<{
     inline: {
         true: string;
@@ -287,3 +289,4 @@ export declare const radiobutton: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
+export type RadioButtonTheme = string;

package/dist/forms/range/Range.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { range } from "./";
   import { type RangeProps, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { value = $bindable(), appearance = "none", color = "blue", size = "md", inputClass, ...restProps }: RangeProps = $props();
 
-  const inputCls = $derived(cn(range({ appearance, color, size }), inputClass));
+  const theme = getTheme("range");
+
+  const inputCls = $derived(cn(range({ appearance, color, size }), inputClass, theme));
 </script>
 
 <input type="range" bind:value {...restProps} class={inputCls} />
@@ -13,7 +16,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L848)
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L841)
 ## 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#L848)
+ * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L841)
  * ## Props
  * @prop value = $bindable()
  * @prop appearance = "none"

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

@@ -64,3 +64,4 @@ export declare const range: import("tailwind-variants").TVReturnType<{
         none: string;
     };
 }, undefined, "w-full bg-gray-200 rounded-lg cursor-pointer dark:bg-gray-700", unknown, unknown, undefined>>;
+export type RangeTheme = string;

package/dist/forms/search/Search.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-  import { search } from ".";
+  import { search, type SearchTheme } from ".";
   import { CloseButton, type SearchProps, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   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 }));
+  const theme = getTheme("search");
+
+  const { base, content, icon, closebutton, input: inputCls, leftDiv } = $derived(search({ size }));
 
   const clearAll = () => {
     if (elementRef) {
@@ -15,20 +18,20 @@
   };
 </script>
 
-<div class={base()}>
-  <div class={leftDiv()}>
-    <svg class={icon()} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+<div class={cn(base(), (theme as SearchTheme)?.base)}>
+  <div class={cn(leftDiv(), (theme as SearchTheme)?.leftDiv)}>
+    <svg class={cn(icon(), (theme as SearchTheme)?.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={cn(inputCls(), inputClass)} {placeholder} required {...restProps} />
+  <input type="search" bind:value bind:this={elementRef} class={cn(inputCls(), inputClass, (theme as SearchTheme)?.input)} {placeholder} required {...restProps} />
   {#if children}
-    <div class={content()}>
+    <div class={cn(content(), (theme as SearchTheme)?.content)}>
       {@render children()}
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={cn(clearbtn(), clearableClass)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={cn(closebutton(), clearableClass, (theme as SearchTheme)?.closebutton)} color={clearableColor} aria-label="Clear search value" svgClass={cn(clearableSvgClass)} />
   {/if}
 </div>
 
@@ -36,7 +39,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L854)
+[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L847)
 ## Props
 @prop children
 @prop inputClass

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#L854)
+ * [SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L847)
  * ## Props
  * @prop children
  * @prop inputClass

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

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