flowbite-svelte 1.10.13 → 1.10.14

package/dist/forms/button-toggle/ButtonToggle.svelte

@@ -54,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L334)
+[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L335)
 ## Props
 @prop value
 @prop selected = false

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

@@ -2,7 +2,7 @@ import { type ButtonToggleProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L334)
+ * [ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L335)
  * ## Props
  * @prop value
  * @prop selected = false

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

@@ -12,7 +12,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L351)
+[CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L352)
 ## Props
 @prop class: className
 @prop ...restProps

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#L351)
+ * [CheckIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L352)
  * ## Props
  * @prop class: className
  * @prop ...restProps

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -58,7 +58,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L674)
+[CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L675)
 ## 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#L674)
+ * [CheckboxButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L675)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/forms/dropzone/Dropzone.svelte

@@ -52,7 +52,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L687)
+[DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L688)
 ## 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#L687)
+ * [DropzoneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L688)
  * ## Props
  * @prop children
  * @prop files = $bindable<FileList | null>()

package/dist/forms/fileupload/Fileupload.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L696)
+[FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L697)
 ## Props
 @prop files = $bindable()
 @prop size = "md"

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#L696)
+ * [FileuploadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L697)
  * ## Props
  * @prop files = $bindable()
  * @prop size = "md"

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

@@ -2,6 +2,8 @@ import { type VariantProps } from "tailwind-variants";
 import type { ClassValue } from "svelte/elements";
 import type { Classes } from "../../theme/themeUtils";
 export type FileuploadViariants = VariantProps<typeof fileupload> & Classes<typeof fileupload>;
+export type FileuploadSlots = keyof typeof fileupload.slots;
+export type FileuploadTheme = Partial<Record<FileuploadSlots, ClassValue>>;
 export declare const fileupload: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
@@ -54,5 +56,3 @@ export declare const fileupload: import("tailwind-variants").TVReturnType<{
     close: string;
     svg: string;
 }, undefined, unknown, unknown, undefined>>;
-export type FileuploadSlots = keyof typeof fileupload.slots;
-export type FileuploadTheme = Partial<Record<FileuploadSlots, ClassValue>>;

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

@@ -164,7 +164,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L710)
+[FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L711)
 ## 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#L710)
+ * [FloatingLabelInputProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L711)
  * ## Props
  * @prop children
  * @prop id = idGenerator()

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

@@ -2,6 +2,8 @@ import { type VariantProps } from "tailwind-variants";
 import type { ClassValue } from "svelte/elements";
 import type { Classes } from "../../theme/themeUtils";
 export type FloatingLabelInputVaratiants = VariantProps<typeof floatingLabelInput> & Classes<typeof floatingLabelInput>;
+export type FloatingLabelInputSlots = keyof typeof floatingLabelInput.slots;
+export type FloatingLabelInputTheme = Partial<Record<FloatingLabelInputSlots, ClassValue>>;
 export declare const floatingLabelInput: import("tailwind-variants").TVReturnType<{
     variant: {
         filled: {
@@ -348,5 +350,3 @@ export declare const floatingLabelInput: import("tailwind-variants").TVReturnTyp
     combo: string;
     svg: string;
 }, undefined, unknown, unknown, undefined>>;
-export type FloatingLabelInputSlots = keyof typeof floatingLabelInput.slots;
-export type FloatingLabelInputTheme = Partial<Record<FloatingLabelInputSlots, ClassValue>>;

package/dist/forms/helper/Helper.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L733)
+[HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L734)
 ## 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#L733)
+ * [HelperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L734)
  * ## Props
  * @prop children
  * @prop class: className

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

@@ -1,6 +1,7 @@
 import { type VariantProps } from "tailwind-variants";
 import type { ClassValue } from "svelte/elements";
 export type HelperVariants = VariantProps<typeof helper>;
+export type HelperTheme = ClassValue;
 export declare const helper: import("tailwind-variants").TVReturnType<{
     color: {
         disabled: string;
@@ -74,4 +75,3 @@ 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 = ClassValue;

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

@@ -44,7 +44,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L775)
+[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L776)
 ## 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#L775)
+ * [InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L776)
  * ## Props
  * @prop children
  * @prop class: className

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

@@ -2,6 +2,8 @@ import { type VariantProps } from "tailwind-variants";
 import type { ClassValue } from "svelte/elements";
 import type { Classes } from "../../theme/themeUtils";
 export type InputVariants = VariantProps<typeof input> & Classes<typeof input>;
+export type InputSlots = keyof typeof input.slots;
+export type InputTheme = Partial<Record<InputSlots, ClassValue>>;
 export declare const input: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
@@ -300,5 +302,3 @@ export declare const input: import("tailwind-variants").TVReturnType<{
     svg: string;
     wrapper: string;
 }, undefined, unknown, unknown, undefined>>;
-export type InputSlots = keyof typeof input.slots;
-export type InputTheme = Partial<Record<InputSlots, ClassValue>>;

package/dist/forms/label/Label.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L790)
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L791)
 ## 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#L790)
+ * [LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L791)
  * ## Props
  * @prop children
  * @prop color = "gray"

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

@@ -1,6 +1,7 @@
 import { type VariantProps } from "tailwind-variants";
 import type { ClassValue } from "svelte/elements";
 export type LabelVariants = VariantProps<typeof label>;
+export type LabelTheme = ClassValue;
 export declare const label: import("tailwind-variants").TVReturnType<{
     color: {
         disabled: string;
@@ -74,4 +75,3 @@ 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 = ClassValue;

package/dist/forms/phoneinput/PhoneInput.svelte

@@ -4,15 +4,15 @@
   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();
+  let { children, phoneIcon = true, pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}", phoneType = "default", floatingLabel = "Phone number", labelFor = "floating-phone-number", class: className, classes, ...restProps }: PhoneInputProps = $props();
 
   const theme = getTheme("phoneInput");
 
-  const { defaultDiv, phonesvg, defaultInput, floatingSpan, floatingInput, labelFloating } = $derived(phoneinput({ phoneType, phoneIcon }));
+  const { div, svg, input, span, floatingInput, label } = $derived(phoneinput({ phoneType, phoneIcon }));
 </script>
 
 {#snippet phoneIconSnippet()}
-  <svg class={phonesvg({ class: clsx((theme as PhoneInputTheme)?.phonesvg) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18">
+  <svg class={svg({ class: clsx((theme as PhoneInputTheme)?.svg) })} 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}
@@ -20,20 +20,20 @@
 {#if phoneType === "default" || phoneType === "countryCode"}
   <div class="relative">
     {#if phoneIcon}
-      <div class={defaultDiv({ class: clsx((theme as PhoneInputTheme)?.defaultDiv, classes?.defaultDiv) })}>
+      <div class={div({ class: clsx((theme as PhoneInputTheme)?.div, classes?.div) })}>
         {@render phoneIconSnippet()}
       </div>
     {/if}
-    <input type="tel" {pattern} {...restProps} class={defaultInput({ class: clsx((theme as PhoneInputTheme)?.defaultInput, classes?.defaultInput) })} />
+    <input type="tel" {pattern} {...restProps} class={input({ class: clsx((theme as PhoneInputTheme)?.input, classes?.input) })} />
   </div>
 {:else if phoneType === "floating"}
   <div class="relative">
     {#if phoneIcon}
-      <span class={floatingSpan({ class: clsx((theme as PhoneInputTheme)?.floatingSpan, classes?.floatingSpan) })}>
+      <span class={span({ class: clsx((theme as PhoneInputTheme)?.span, classes?.span) })}>
         {@render phoneIconSnippet()}
       </span>
     {/if}
     <input type="tel" class={floatingInput({ class: clsx((theme as PhoneInputTheme)?.floatingInput, classes?.floatingInput) })} {pattern} {...restProps} />
-    <label for={labelFor} class={labelFloating({ class: clsx((theme as PhoneInputTheme)?.labelFloating, classes?.labelFloating) })}>{floatingLabel}</label>
+    <label for={labelFor} class={label({ class: clsx((theme as PhoneInputTheme)?.label, classes?.label) })}>{floatingLabel}</label>
   </div>
 {/if}

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

@@ -6,81 +6,81 @@ export type phoneInputClasses = Partial<{
 export type PhoneInputVariants = VariantProps<typeof phoneinput> & {
     classes?: phoneInputClasses;
 };
+export type PhoneInputSlots = keyof typeof phoneinput.slots;
+export type PhoneInputTheme = Partial<Record<PhoneInputSlots, ClassValue>>;
 export declare const phoneinput: import("tailwind-variants").TVReturnType<{
     phoneType: {
         default: {};
         floating: {
-            phonesvg: string;
+            svg: string;
         };
         countryCode: {
-            defaultInput: string;
+            input: string;
         };
         copy: {};
         advanced: {};
     };
     phoneIcon: {
         true: {
-            defaultInput: string;
+            input: string;
         };
         false: {};
     };
 }, {
-    defaultDiv: string;
-    phonesvg: string;
-    defaultInput: string;
-    floatingSpan: string;
+    div: string;
+    svg: string;
+    input: string;
+    span: string;
     floatingInput: string;
-    labelFloating: string;
+    label: string;
 }, undefined, {
     phoneType: {
         default: {};
         floating: {
-            phonesvg: string;
+            svg: string;
         };
         countryCode: {
-            defaultInput: string;
+            input: string;
         };
         copy: {};
         advanced: {};
     };
     phoneIcon: {
         true: {
-            defaultInput: string;
+            input: string;
         };
         false: {};
     };
 }, {
-    defaultDiv: string;
-    phonesvg: string;
-    defaultInput: string;
-    floatingSpan: string;
+    div: string;
+    svg: string;
+    input: string;
+    span: string;
     floatingInput: string;
-    labelFloating: string;
+    label: string;
 }, import("tailwind-variants").TVReturnType<{
     phoneType: {
         default: {};
         floating: {
-            phonesvg: string;
+            svg: string;
         };
         countryCode: {
-            defaultInput: string;
+            input: string;
         };
         copy: {};
         advanced: {};
     };
     phoneIcon: {
         true: {
-            defaultInput: string;
+            input: string;
         };
         false: {};
     };
 }, {
-    defaultDiv: string;
-    phonesvg: string;
-    defaultInput: string;
-    floatingSpan: string;
+    div: string;
+    svg: string;
+    input: string;
+    span: string;
     floatingInput: string;
-    labelFloating: string;
+    label: string;
 }, undefined, unknown, unknown, undefined>>;
-export type PhoneInputSlots = keyof typeof phoneinput.slots;
-export type PhoneInputTheme = Partial<Record<PhoneInputSlots, ClassValue>>;

package/dist/forms/phoneinput/theme.js

@@ -1,27 +1,27 @@
 import { tv } from "tailwind-variants";
 export const phoneinput = tv({
     slots: {
-        defaultDiv: "absolute inset-y-0 start-0 top-0 flex items-center ps-3.5 pointer-events-none",
-        phonesvg: "w-4 h-4 text-gray-500 dark:text-gray-400",
-        defaultInput: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
-        floatingSpan: "absolute start-0 bottom-3 text-gray-500 dark:text-gray-400",
+        div: "absolute inset-y-0 start-0 top-0 flex items-center ps-3.5 pointer-events-none",
+        svg: "w-4 h-4 text-gray-500 dark:text-gray-400",
+        input: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
+        span: "absolute start-0 bottom-3 text-gray-500 dark:text-gray-400",
         floatingInput: "block py-2.5 ps-6 pe-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-primary-500 focus:outline-none focus:ring-0 focus:border-primary-600 peer",
-        labelFloating: "absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-placeholder-shown:start-6 peer-focus:start-0 peer-focus:text-primary-600 peer-focus:dark:text-primary-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto"
+        label: "absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-placeholder-shown:start-6 peer-focus:start-0 peer-focus:text-primary-600 peer-focus:dark:text-primary-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto"
     },
     variants: {
         phoneType: {
             default: {},
             floating: {
-                phonesvg: "w-4 h-4 rtl:rotate-[270deg]"
+                svg: "w-4 h-4 rtl:rotate-[270deg]"
             },
             countryCode: {
-                defaultInput: "rounded-none rounded-e-lg"
+                input: "rounded-none rounded-e-lg"
             },
             copy: {},
             advanced: {}
         },
         phoneIcon: {
-            true: { defaultInput: "ps-10" },
+            true: { input: "ps-10" },
             false: {}
         }
     }

package/dist/forms/radio/Radio.svelte

@@ -3,17 +3,20 @@
   import { radio, type RadioTheme } from ".";
   import clsx from "clsx";
   import { type RadioProps, Label } from "../..";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme, warnThemeDeprecation } 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();
+  let { children, "aria-describedby": ariaDescribedby, inline = false, labelClass, color = "primary", custom = false, group = $bindable<T>(), value = $bindable<T>(), class: className, inputClass, classes, ...restProps }: RadioProps<T> = $props();
+
+  warnThemeDeprecation("Fileupload", { inputClass, labelClass }, { inputClass: "class", labelClass: "label" });
+  let styling = $derived(classes ?? { label: labelClass });
 
   const theme = getTheme("radio");
 
   const { input, label } = $derived(radio({ color, tinted: !!getContext("background"), custom, inline }));
 </script>
 
-<Label class={label({ class: clsx((theme as RadioTheme)?.label, labelClass) })}>
-  <input type="radio" bind:group {value} aria-describedby={ariaDescribedby} {...restProps} class={input({ class: clsx((theme as RadioTheme)?.input, inputClass) })} />
+<Label class={label({ class: clsx((theme as RadioTheme)?.label, styling.label) })}>
+  <input type="radio" bind:group {value} aria-describedby={ariaDescribedby} {...restProps} class={input({ class: clsx((theme as RadioTheme)?.input, className ?? inputClass) })} />
   {@render children?.()}
 </Label>
 

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

@@ -1,6 +1,10 @@
 import { type VariantProps } from "tailwind-variants";
 import type { ClassValue } from "svelte/elements";
-export type RadioVariants = VariantProps<typeof radio>;
+import type { Classes } from "../../theme/themeUtils";
+export type RadioVariants = VariantProps<typeof radio> & Classes<typeof radio>;
+export type RadioSlots = keyof typeof radio.slots;
+export type RadioTheme = Partial<Record<RadioSlots, ClassValue>>;
+export type RadioButtonTheme = ClassValue;
 export declare const radio: import("tailwind-variants").TVReturnType<{
     color: {
         primary: {
@@ -272,8 +276,6 @@ 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, ClassValue>>;
 export declare const radiobutton: import("tailwind-variants").TVReturnType<{
     inline: {
         true: string;
@@ -290,4 +292,3 @@ export declare const radiobutton: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
-export type RadioButtonTheme = ClassValue;

package/dist/forms/range/Range.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L818)
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L819)
 ## 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#L818)
+ * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L819)
  * ## Props
  * @prop value = $bindable()
  * @prop appearance = "none"

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

@@ -1,6 +1,7 @@
 import { type VariantProps } from "tailwind-variants";
 import type { ClassValue } from "svelte/elements";
 export type RangeVariants = VariantProps<typeof range>;
+export type RangeTheme = ClassValue;
 export declare const range: import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
@@ -65,4 +66,3 @@ 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 = ClassValue;

package/dist/forms/search/Search.svelte

@@ -2,13 +2,16 @@
   import { search, type SearchTheme } from ".";
   import clsx from "clsx";
   import { CloseButton, type SearchProps } from "../..";
-  import { getTheme } from "../../theme/themeUtils";
+  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
 
-  let { children, inputClass, size, placeholder = "Search", value = $bindable(), elementRef = $bindable(), clearable = false, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, ...restProps }: SearchProps = $props();
+  let { children, inputClass, size, placeholder = "Search", value = $bindable(), elementRef = $bindable(), clearable = false, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, class: className, classes, ...restProps }: SearchProps = $props();
+
+  warnThemeDeprecation("Search", { inputClass, clearableSvgClass, clearableClass }, { inputClass: "input", clearableSvgClass: "svg", clearableClass: "close" });
+  let styling = $derived({ input: inputClass, svg: clearableSvgClass, close: clearableClass });
 
   const theme = getTheme("search");
 
-  const { base, content, icon, closebutton, input: inputCls, leftDiv } = $derived(search({ size }));
+  const { base, content, icon, close, input: inputCls, left } = $derived(search({ size }));
 
   const clearAll = () => {
     if (elementRef) {
@@ -19,20 +22,20 @@
   };
 </script>
 
-<div class={base({ class: clsx((theme as SearchTheme)?.base) })}>
-  <div class={leftDiv({ class: clsx((theme as SearchTheme)?.leftDiv) })}>
-    <svg class={icon({ class: clsx((theme as SearchTheme)?.icon) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+<div class={base({ class: clsx((theme as SearchTheme)?.base, className) })}>
+  <div class={left({ class: clsx((theme as SearchTheme)?.left, classes?.left) })}>
+    <svg class={icon({ class: clsx((theme as SearchTheme)?.icon, classes?.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 as SearchTheme)?.input, inputClass) })} {placeholder} required {...restProps} />
+  <input type="search" bind:value bind:this={elementRef} class={inputCls({ class: clsx((theme as SearchTheme)?.input, styling.input) })} {placeholder} required {...restProps} />
   {#if children}
-    <div class={content({ class: clsx((theme as SearchTheme)?.content) })}>
+    <div class={content({ class: clsx((theme as SearchTheme)?.content, classes?.content) })}>
       {@render children()}
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton onclick={clearAll} class={closebutton({ class: clsx((theme as SearchTheme)?.closebutton, clearableClass) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(clearableSvgClass)} />
+    <CloseButton onclick={clearAll} class={close({ class: clsx((theme as SearchTheme)?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
   {/if}
 </div>
 
@@ -40,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L824)
+[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L825)
 ## Props
 @prop children
 @prop inputClass
@@ -53,5 +56,7 @@
 @prop clearableColor = "none"
 @prop clearableClass
 @prop clearableOnClick
+@prop class:className
+@prop classes
 @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#L824)
+ * [SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L825)
  * ## Props
  * @prop children
  * @prop inputClass
@@ -15,6 +15,8 @@ import { type SearchProps } from "../..";
  * @prop clearableColor = "none"
  * @prop clearableClass
  * @prop clearableOnClick
+ * @prop class:className
+ * @prop classes
  * @prop ...restProps
  */
 declare const Search: import("svelte").Component<SearchProps, {}, "value" | "elementRef">;