flowbite-svelte 1.9.0 → 1.10.0

package/dist/forms/button-toggle/CheckIcon.svelte.d.ts

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

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

@@ -1,4 +1,4 @@
 export { default as ButtonToggleGroup } from "./ButtonToggleGroup.svelte";
 export { default as ButtonToggle } from "./ButtonToggle.svelte";
 export { default as CheckIcon } from "./CheckIcon.svelte";
-export { buttonToggleGroup, buttonToggle } from "./theme";
+export { buttonToggleGroup, buttonToggle, type ButtonToggleGroupTheme, type ButtonToggleTheme } from "./theme";

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

@@ -24,147 +24,155 @@ export declare const buttonToggleGroup: import("tailwind-variants").TVReturnType
         full: string;
     };
 }, undefined, "inline-flex border border-gray-300 overflow-hidden", unknown, unknown, undefined>>;
-export declare const buttonToggle: import("tailwind-variants").TVReturnType<{
-    selected: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    roundedSize: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    color: {
-        primary: string;
-        secondary: string;
-        gray: string;
-        red: string;
-        orange: string;
-        amber: string;
-        yellow: string;
-        lime: string;
-        green: string;
-        emerald: string;
-        teal: string;
-        cyan: string;
-        sky: string;
-        blue: string;
-        indigo: string;
-        violet: string;
-        purple: string;
-        fuchsia: string;
-        pink: string;
-        rose: string;
-        none: string;
-    };
-}, undefined, "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800", {
-    selected: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    roundedSize: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    color: {
-        primary: string;
-        secondary: string;
-        gray: string;
-        red: string;
-        orange: string;
-        amber: string;
-        yellow: string;
-        lime: string;
-        green: string;
-        emerald: string;
-        teal: string;
-        cyan: string;
-        sky: string;
-        blue: string;
-        indigo: string;
-        violet: string;
-        purple: string;
-        fuchsia: string;
-        pink: string;
-        rose: string;
-        none: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    selected: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    roundedSize: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    color: {
-        primary: string;
-        secondary: string;
-        gray: string;
-        red: string;
-        orange: string;
-        amber: string;
-        yellow: string;
-        lime: string;
-        green: string;
-        emerald: string;
-        teal: string;
-        cyan: string;
-        sky: string;
-        blue: string;
-        indigo: string;
-        violet: string;
-        purple: string;
-        fuchsia: string;
-        pink: string;
-        rose: string;
-        none: string;
-    };
-}, undefined, "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800", unknown, unknown, undefined>>;
-export declare const buttonToggleContent: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex items-center w-full overflow-hidden relative", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex items-center w-full overflow-hidden relative", unknown, unknown, undefined>>;
-export declare const buttonToggleText: import("tailwind-variants").TVReturnType<{
-    selected: {
-        true: string;
-        false: string;
-    };
-}, undefined, "transition-all duration-200 ml-0", {
-    selected: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    selected: {
-        true: string;
-        false: string;
-    };
-}, undefined, "transition-all duration-200 ml-0", unknown, unknown, undefined>>;
-export type ButtonToggleVariants = VariantProps<typeof buttonToggle>;
-export type ButtonToggleContentVariants = VariantProps<typeof buttonToggleContent>;
-export type ButtonToggleTextVariants = VariantProps<typeof buttonToggleText>;
+export type ButtonToggleGroupTheme = string;
+export declare const buttonToggle: {
+    button: import("tailwind-variants").TVReturnType<{
+        selected: {
+            true: string;
+            false: string;
+        };
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        roundedSize: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            full: string;
+        };
+        color: {
+            primary: string;
+            secondary: string;
+            gray: string;
+            red: string;
+            orange: string;
+            amber: string;
+            yellow: string;
+            lime: string;
+            green: string;
+            emerald: string;
+            teal: string;
+            cyan: string;
+            sky: string;
+            blue: string;
+            indigo: string;
+            violet: string;
+            purple: string;
+            fuchsia: string;
+            pink: string;
+            rose: string;
+            none: string;
+        };
+    }, undefined, "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800", {
+        selected: {
+            true: string;
+            false: string;
+        };
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        roundedSize: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            full: string;
+        };
+        color: {
+            primary: string;
+            secondary: string;
+            gray: string;
+            red: string;
+            orange: string;
+            amber: string;
+            yellow: string;
+            lime: string;
+            green: string;
+            emerald: string;
+            teal: string;
+            cyan: string;
+            sky: string;
+            blue: string;
+            indigo: string;
+            violet: string;
+            purple: string;
+            fuchsia: string;
+            pink: string;
+            rose: string;
+            none: string;
+        };
+    }, undefined, import("tailwind-variants").TVReturnType<{
+        selected: {
+            true: string;
+            false: string;
+        };
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        roundedSize: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            full: string;
+        };
+        color: {
+            primary: string;
+            secondary: string;
+            gray: string;
+            red: string;
+            orange: string;
+            amber: string;
+            yellow: string;
+            lime: string;
+            green: string;
+            emerald: string;
+            teal: string;
+            cyan: string;
+            sky: string;
+            blue: string;
+            indigo: string;
+            violet: string;
+            purple: string;
+            fuchsia: string;
+            pink: string;
+            rose: string;
+            none: string;
+        };
+    }, undefined, "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800", unknown, unknown, undefined>>;
+    content: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex items-center w-full overflow-hidden relative", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex items-center w-full overflow-hidden relative", unknown, unknown, undefined>>;
+    text: import("tailwind-variants").TVReturnType<{
+        selected: {
+            true: string;
+            false: string;
+        };
+    }, undefined, "transition-all duration-200 ml-0", {
+        selected: {
+            true: string;
+            false: string;
+        };
+    }, undefined, import("tailwind-variants").TVReturnType<{
+        selected: {
+            true: string;
+            false: string;
+        };
+    }, undefined, "transition-all duration-200 ml-0", unknown, unknown, undefined>>;
+};
+export type ButtonToggleTheme = {
+    button?: string;
+    content?: string;
+    text?: string;
+};
+export type ButtonToggleVariants = VariantProps<typeof buttonToggle.button>;
+export type ButtonToggleContentVariants = VariantProps<typeof buttonToggle.content>;
+export type ButtonToggleTextVariants = VariantProps<typeof buttonToggle.text>;

package/dist/forms/button-toggle/theme.js

@@ -11,69 +11,71 @@ export const buttonToggleGroup = tv({
         }
     }
 });
-export const buttonToggle = tv({
-    base: "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800",
-    variants: {
-        selected: {
-            true: "",
-            false: ""
-        },
-        size: {
-            sm: "p-1 px-2 text-sm",
-            md: "p-2 px-4 text-base",
-            lg: "p-3 px-5 text-lg",
-            xl: "p-4 px-6 text-xl"
-        },
-        roundedSize: {
-            sm: "first:rounded-s-sm last:rounded-e-sm",
-            md: "first:rounded-s-md last:rounded-e-md",
-            lg: "first:rounded-s-lg last:rounded-e-lg",
-            xl: "first:rounded-s-xl last:rounded-e-xl",
-            full: "first:rounded-s-full last:rounded-e-full"
+export const buttonToggle = {
+    button: tv({
+        base: "relative flex items-center transition-all duration-200  focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800",
+        variants: {
+            selected: {
+                true: "",
+                false: ""
+            },
+            size: {
+                sm: "p-1 px-2 text-sm",
+                md: "p-2 px-4 text-base",
+                lg: "p-3 px-5 text-lg",
+                xl: "p-4 px-6 text-xl"
+            },
+            roundedSize: {
+                sm: "first:rounded-s-sm last:rounded-e-sm",
+                md: "first:rounded-s-md last:rounded-e-md",
+                lg: "first:rounded-s-lg last:rounded-e-lg",
+                xl: "first:rounded-s-xl last:rounded-e-xl",
+                full: "first:rounded-s-full last:rounded-e-full"
+            },
+            color: {
+                primary: "data-[selected=true]:bg-primary-200 data-[selected=false]:hover:bg-gray-100",
+                secondary: "data-[selected=true]:bg-secondary-200 data-[selected=false]:hover:bg-gray-100",
+                gray: "data-[selected=true]:bg-gray-200 data-[selected=false]:hover:bg-gray-100",
+                red: "data-[selected=true]:bg-red-200 data-[selected=false]:hover:bg-red-50",
+                orange: "data-[selected=true]:bg-orange-200 data-[selected=false]:hover:bg-orange-50",
+                amber: "data-[selected=true]:bg-amber-200 data-[selected=false]:hover:bg-amber-50",
+                yellow: "data-[selected=true]:bg-yellow-200 data-[selected=false]:hover:bg-yellow-50",
+                lime: "data-[selected=true]:bg-lime-200 data-[selected=false]:hover:bg-lime-50",
+                green: "data-[selected=true]:bg-green-200 data-[selected=false]:hover:bg-green-50",
+                emerald: "data-[selected=true]:bg-emerald-200 data-[selected=false]:hover:bg-emerald-50",
+                teal: "data-[selected=true]:bg-teal-200 data-[selected=false]:hover:bg-teal-50",
+                cyan: "data-[selected=true]:bg-cyan-200 data-[selected=false]:hover:bg-cyan-50",
+                sky: "data-[selected=true]:bg-sky-200 data-[selected=false]:hover:bg-sky-50",
+                blue: "data-[selected=true]:bg-blue-200 data-[selected=false]:hover:bg-blue-50",
+                indigo: "data-[selected=true]:bg-indigo-200 data-[selected=false]:hover:bg-indigo-50",
+                violet: "data-[selected=true]:bg-violet-200 data-[selected=false]:hover:bg-violet-50",
+                purple: "data-[selected=true]:bg-purple-200 data-[selected=false]:hover:bg-purple-50",
+                fuchsia: "data-[selected=true]:bg-fuchsia-200 data-[selected=false]:hover:bg-fuchsia-50",
+                pink: "data-[selected=true]:bg-pink-200 data-[selected=false]:hover:bg-pink-50",
+                rose: "data-[selected=true]:bg-rose-200 data-[selected=false]:hover:bg-rose-50",
+                none: ""
+            }
         },
-        color: {
-            primary: "data-[selected=true]:bg-primary-200 data-[selected=false]:hover:bg-gray-100",
-            secondary: "data-[selected=true]:bg-secondary-200 data-[selected=false]:hover:bg-gray-100",
-            gray: "data-[selected=true]:bg-gray-200 data-[selected=false]:hover:bg-gray-100",
-            red: "data-[selected=true]:bg-red-200 data-[selected=false]:hover:bg-red-50",
-            orange: "data-[selected=true]:bg-orange-200 data-[selected=false]:hover:bg-orange-50",
-            amber: "data-[selected=true]:bg-amber-200 data-[selected=false]:hover:bg-amber-50",
-            yellow: "data-[selected=true]:bg-yellow-200 data-[selected=false]:hover:bg-yellow-50",
-            lime: "data-[selected=true]:bg-lime-200 data-[selected=false]:hover:bg-lime-50",
-            green: "data-[selected=true]:bg-green-200 data-[selected=false]:hover:bg-green-50",
-            emerald: "data-[selected=true]:bg-emerald-200 data-[selected=false]:hover:bg-emerald-50",
-            teal: "data-[selected=true]:bg-teal-200 data-[selected=false]:hover:bg-teal-50",
-            cyan: "data-[selected=true]:bg-cyan-200 data-[selected=false]:hover:bg-cyan-50",
-            sky: "data-[selected=true]:bg-sky-200 data-[selected=false]:hover:bg-sky-50",
-            blue: "data-[selected=true]:bg-blue-200 data-[selected=false]:hover:bg-blue-50",
-            indigo: "data-[selected=true]:bg-indigo-200 data-[selected=false]:hover:bg-indigo-50",
-            violet: "data-[selected=true]:bg-violet-200 data-[selected=false]:hover:bg-violet-50",
-            purple: "data-[selected=true]:bg-purple-200 data-[selected=false]:hover:bg-purple-50",
-            fuchsia: "data-[selected=true]:bg-fuchsia-200 data-[selected=false]:hover:bg-fuchsia-50",
-            pink: "data-[selected=true]:bg-pink-200 data-[selected=false]:hover:bg-pink-50",
-            rose: "data-[selected=true]:bg-rose-200 data-[selected=false]:hover:bg-rose-50",
-            none: ""
+        defaultVariants: {
+            selected: false,
+            color: "primary",
+            size: "md",
+            roundedSize: "md"
         }
-    },
-    defaultVariants: {
-        selected: false,
-        color: "primary",
-        size: "md",
-        roundedSize: "md"
-    }
-});
-export const buttonToggleContent = tv({
-    base: "flex items-center w-full overflow-hidden relative"
-});
-export const buttonToggleText = tv({
-    base: "transition-all duration-200 ml-0",
-    variants: {
-        selected: {
-            true: "ml-5",
-            false: ""
+    }),
+    content: tv({
+        base: "flex items-center w-full overflow-hidden relative"
+    }),
+    text: tv({
+        base: "transition-all duration-200 ml-0",
+        variants: {
+            selected: {
+                true: "ml-5",
+                false: ""
+            }
+        },
+        defaultVariants: {
+            selected: false
         }
-    },
-    defaultVariants: {
-        selected: false
-    }
-});
+    })
+};

package/dist/forms/checkbox/Checkbox.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { checkbox } from ".";
+  import { checkbox, type CheckboxTheme } from ".";
   import { type CheckboxProps, type CheckboxItem, Label, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, color = "primary", custom, inline, tinted, rounded, group = $bindable([]), choices = [], checked = $bindable(false), indeterminate, class: className, divClass, disabled = false, value, labelProps = {}, ...restProps }: CheckboxProps = $props();
 
+  const theme = getTheme("checkbox");
+
   const disabledValue = $derived(disabled === null ? undefined : disabled);
   const { base, div: divStyle } = $derived(checkbox({ color, tinted, custom, rounded, inline, disabled: disabledValue }));
 
@@ -20,17 +23,17 @@
 
 {#if choices.length > 0}
   {#each choices as choice, i}
-    <div class={cn(divStyle(), divClass)}>
+    <div class={cn(divStyle(), divClass, (theme as CheckboxTheme)?.div)}>
       <Label show={true} {...labelProps}>
-        <input type="checkbox" value={choice.value} checked={choice.checked ?? false} {disabled} bind:group {...restProps} class={cn(base(), className)} />
+        <input type="checkbox" value={choice.value} checked={choice.checked ?? false} {disabled} bind:group {...restProps} class={cn(base(), className, (theme as CheckboxTheme)?.base)} />
         {renderLabel(choice)}
       </Label>
     </div>
   {/each}
 {:else}
-  <div class={cn(divStyle(), divClass)}>
+  <div class={cn(divStyle(), divClass, (theme as CheckboxTheme)?.div)}>
     <Label show={true} {...labelProps}>
-      <input type="checkbox" {value} bind:checked {indeterminate} {disabled} {...restProps} class={cn(base(), className)} />
+      <input type="checkbox" {value} bind:checked {indeterminate} {disabled} {...restProps} class={cn(base(), className, (theme as CheckboxTheme)?.base)} />
       {#if children}
         {@render children({ value, checked, disabled })}
       {/if}

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -2,9 +2,12 @@
   import Button from "../../buttons/Button.svelte";
   import { type CheckboxButtonProps, cn } from "../..";
   import { checkboxbutton } from "./theme";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { children, class: className, group = $bindable([]), value, checked, inline, pill, outline, size, color, shadow, ...restProps }: CheckboxButtonProps = $props();
 
+  const theme = getTheme("checkboxButton");
+
   // react on external group changes
   function init(_: HTMLElement, _group: (string | number)[]) {
     group = _group ?? [];
@@ -42,7 +45,7 @@
     }
   }
 
-  let buttonClass: string = $derived(cn(checkboxbutton({ inline, checked }), className));
+  let buttonClass: string = $derived(cn(checkboxbutton({ inline, checked }), className, theme));
 </script>
 
 <Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
@@ -54,7 +57,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L707)
+[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L700)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/checkbox/CheckboxButton.svelte.d.ts

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

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

@@ -1,3 +1,3 @@
 export { default as Checkbox } from "./Checkbox.svelte";
 export { default as CheckboxButton } from "./CheckboxButton.svelte";
-export { checkbox, checkboxbutton } from "./theme";
+export { checkbox, checkboxbutton, type CheckboxTheme, type CheckboxButtonTheme } from "./theme";

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

@@ -289,6 +289,8 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
     base: string;
     div: string;
 }, undefined, unknown, unknown, undefined>>;
+export type CheckboxSlots = keyof typeof checkbox.slots;
+export type CheckboxTheme = Partial<Record<CheckboxSlots, string>>;
 export declare const checkboxbutton: import("tailwind-variants").TVReturnType<{
     inline: {
         true: string;
@@ -314,3 +316,4 @@ export declare const checkboxbutton: import("tailwind-variants").TVReturnType<{
         true: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
+export type CheckboxButtonTheme = string;

package/dist/forms/dropzone/Dropzone.svelte

@@ -2,11 +2,14 @@
   import type { DragEventHandler, ChangeEventHandler } from "svelte/elements";
   import { dropzone } from ".";
   import { type DropzoneProps, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   type HTMLInputElementWithFiles = HTMLInputElement & { files: FileList | null };
 
   let { children, files = $bindable<FileList | null>(), class: className, ...restProps }: DropzoneProps = $props();
 
+  const theme = getTheme("dropzone");
+
   let input: HTMLInputElement;
 
   function keydown(ev: KeyboardEvent) {
@@ -49,7 +52,7 @@
   };
 </script>
 
-<button class={cn(dropzone(), className)} onkeydown={keydown} onclick={onClick} ondrop={onDrop} ondragover={onDragOver} type="button">
+<button class={cn(dropzone(), className, theme)} onkeydown={keydown} onclick={onClick} ondrop={onDrop} ondragover={onDragOver} type="button">
   {@render children()}
 </button>
 <label class="hidden">
@@ -60,7 +63,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L720)
+[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L713)
 ## Props
 @prop children
 @prop files = $bindable<FileList | null>()

package/dist/forms/dropzone/Dropzone.svelte.d.ts

@@ -2,7 +2,7 @@ import { type DropzoneProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L720)
+ * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L713)
  * ## Props
  * @prop children
  * @prop files = $bindable<FileList | null>()

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

@@ -1,2 +1,2 @@
-export { dropzone } from "./theme";
+export { dropzone, type DropzoneTheme } from "./theme";
 export { default as Dropzone } from "./Dropzone.svelte";

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

@@ -1 +1,2 @@
 export declare const dropzone: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600", unknown, unknown, undefined>>;
+export type DropzoneTheme = string;

package/dist/forms/fileupload/Fileupload.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { fileupload } from ".";
+  import { fileupload, type FileuploadTheme } from ".";
   import { CloseButton, type FileuploadProps, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { files = $bindable(), size = "md", clearable = false, elementRef = $bindable(), class: className, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, wrapperClass, ...restProps }: FileuploadProps = $props();
 
+  const theme = getTheme("fileupload");
+
   const { base, wrapper, right } = fileupload();
 
   const clearAll = () => {
@@ -15,10 +18,10 @@
   };
 </script>
 
-<div class={cn(wrapper(), wrapperClass)}>
-  <input type="file" bind:files bind:this={elementRef} {...restProps} class={cn(base({ size }), className)} />
+<div class={cn(wrapper(), wrapperClass, (theme as FileuploadTheme)?.wrapper)}>
+  <input type="file" bind:files bind:this={elementRef} {...restProps} class={cn(base({ size }), className, (theme as FileuploadTheme)?.base)} />
   {#if files && files.length > 0 && clearable}
-    <CloseButton onclick={clearAll} class={cn(right(), clearableClass)} color={clearableColor} aria-label="Clear selected files" svgClass={cn(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={cn(right(), clearableClass, (theme as FileuploadTheme)?.right)} color={clearableColor} aria-label="Clear selected files" svgClass={cn(clearableSvgClass)} />
   {/if}
 </div>
 
@@ -26,7 +29,7 @@
 @component
 [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"