flowbite-svelte 1.9.0 → 1.10.0

package/dist/dropdown/DropdownDivider.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
   import { dropdownDivider } from ".";
   import { type DropdownDividerProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { class: className, ...restProps }: DropdownDividerProps = $props();
+
+  const theme = getTheme("dropdownDivider");
 </script>
 
-<div {...restProps} class={cn(dropdownDivider(), className)}></div>
+<div {...restProps} class={cn(dropdownDivider(), className, theme)}></div>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L609)
+[DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L602)
 ## Props
 @prop class: className
 @prop ...restProps

package/dist/dropdown/DropdownDivider.svelte.d.ts

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

package/dist/dropdown/DropdownGroup.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { dropdownGroup } from ".";
   import { type DropdownGroupProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: DropdownGroupProps = $props();
+
+  const theme = getTheme("dropdownGroup");
 </script>
 
-<ul {...restProps} class={cn(dropdownGroup(), className)}>
+<ul {...restProps} class={cn(dropdownGroup(), className, theme)}>
   {@render children()}
 </ul>
 
@@ -13,7 +16,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L626)
+[DropdownGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L619)
 ## Props
 @prop children
 @prop class: className

package/dist/dropdown/DropdownGroup.svelte.d.ts

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

package/dist/dropdown/DropdownHeader.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { dropdownHeader } from ".";
   import { type DropdownHeaderProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: DropdownHeaderProps = $props();
+
+  const theme = getTheme("dropdownHeader");
 </script>
 
-<div {...restProps} class={cn(dropdownHeader(), className)}>
+<div {...restProps} class={cn(dropdownHeader(), className, theme)}>
   {@render children()}
 </div>
 
@@ -13,7 +16,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L611)
+[DropdownHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L604)
 ## Props
 @prop children
 @prop class: className

package/dist/dropdown/DropdownHeader.svelte.d.ts

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

package/dist/dropdown/DropdownItem.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { dropdownItem } from ".";
+  import { dropdownItem, type DropdownItemTheme } from ".";
   import { type DropdownItemProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { aClass, children, activeClass, liClass, class: className, ...restProps }: DropdownItemProps = $props();
 
+  const theme = getTheme("dropdownItem");
+
   const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
   let sidebarUrl = $state("");
   activeUrlStore.subscribe((value) => {
@@ -17,7 +20,7 @@
   });
 
   const { anchor, activeAnchor } = dropdownItem();
-  let finalClass = $derived([active ? cn(activeAnchor(), activeClass, className) : cn(anchor(), aClass, className)]);
+  let finalClass = $derived([active ? cn(activeAnchor(), activeClass, className, (theme as DropdownItemTheme)?.activeAnchor) : cn(anchor(), aClass, className, (theme as DropdownItemTheme)?.anchor)]);
 </script>
 
 <li class={cn(liClass)}>
@@ -40,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L617)
+[DropdownItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L610)
 ## Props
 @prop aClass
 @prop children

package/dist/dropdown/DropdownItem.svelte.d.ts

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

package/dist/dropdown/index.d.ts

@@ -3,4 +3,4 @@ export { default as DropdownDivider } from "./DropdownDivider.svelte";
 export { default as DropdownGroup } from "./DropdownGroup.svelte";
 export { default as DropdownHeader } from "./DropdownHeader.svelte";
 export { default as DropdownItem } from "./DropdownItem.svelte";
-export { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem } from "./theme";
+export { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem, type DropdownTheme, type DropdownDividerTheme, type DropdownGroupTheme, type DropdownHeaderTheme, type DropdownItemTheme } from "./theme";

package/dist/dropdown/theme.d.ts

@@ -29,8 +29,12 @@ export declare const dropdown: import("tailwind-variants").TVReturnType<{
     base: string;
     backdrop: string;
 }, undefined, unknown, unknown, undefined>>;
+export type DropdownSlots = keyof typeof dropdown.slots;
+export type DropdownTheme = Partial<Record<DropdownSlots, string>>;
 export declare const dropdownDivider: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "my-1 h-px bg-gray-100 dark:bg-gray-500", unknown, unknown, undefined>>;
+export type DropdownDividerTheme = string;
 export declare const dropdownHeader: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "px-4 py-3 text-sm text-gray-900 dark:text-white", unknown, unknown, undefined>>;
+export type DropdownHeaderTheme = string;
 export declare const dropdownItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -62,4 +66,7 @@ export declare const dropdownItem: import("tailwind-variants").TVReturnType<{
     anchor: string;
     activeAnchor: string;
 }, undefined, unknown, unknown, undefined>>;
+export type DropdownItemSlots = keyof typeof dropdownItem.slots;
+export type DropdownItemTheme = Partial<Record<DropdownItemSlots, string>>;
 export declare const dropdownGroup: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "py-2 text-sm text-gray-700 dark:text-gray-200", unknown, unknown, undefined>>;
+export type DropdownGroupTheme = string;

package/dist/footer/Footer.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
   import { footer } from ".";
   import { type FooterProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, footerType = "default", class: className, ...restProps }: FooterProps = $props();
 
+  const theme = getTheme("footer");
+
   const footerCls = $derived(footer({ footerType }));
 </script>
 
-<footer {...restProps} class={cn(footerCls, className)}>
+<footer {...restProps} class={cn(footerCls, className, theme)}>
   {@render children()}
 </footer>
 
@@ -15,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L633)
+[FooterProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L626)
 ## Props
 @prop children
 @prop footerType = "default"

package/dist/footer/Footer.svelte.d.ts

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

package/dist/footer/FooterBrand.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
-  import { footerBrand } from ".";
+  import { footerBrand, type FooterBrandTheme } from ".";
   import { type FooterBrandProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, aClass, spanClass, imgClass, href, src, alt, name, ...restProps }: FooterBrandProps = $props();
 
+  const theme = getTheme("footerBrand");
+
   const { base, span, img } = $derived(footerBrand());
 </script>
 
 {#if href}
-  <a {...restProps} {href} class={cn(base(), aClass)}>
+  <a {...restProps} {href} class={cn(base(), aClass, (theme as FooterBrandTheme)?.base)}>
     {#if src}
-      <img {src} class={cn(img(), imgClass)} {alt} />
+      <img {src} class={cn(img(), imgClass, (theme as FooterBrandTheme)?.img)} {alt} />
     {/if}
     {#if name}
-      <span class={cn(span(), spanClass)}>{name}</span>
+      <span class={cn(span(), spanClass, (theme as FooterBrandTheme)?.span)}>{name}</span>
     {/if}
     {#if children}
       {@render children()}
@@ -27,7 +30,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L638)
+[FooterBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L631)
 ## Props
 @prop children
 @prop aClass

package/dist/footer/FooterBrand.svelte.d.ts

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

package/dist/footer/FooterCopyright.svelte

@@ -1,22 +1,25 @@
 <script lang="ts">
-  import { footerCopyright } from ".";
+  import { footerCopyright, type FooterCopyrightTheme } from ".";
   import { type FooterCopyrightProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { spanClass, aClass, href, by, copyrightMessage = "All Rights Reserved.", year, bySpanClass, ...restProps }: FooterCopyrightProps = $props();
 
+  const theme = getTheme("footerCopyright");
+
   if (!year) year = new Date().getFullYear();
 
   const { base, link, bySpan } = footerCopyright();
 </script>
 
-<span class={cn(base(), spanClass)}>
+<span class={cn(base(), spanClass, (theme as FooterCopyrightTheme)?.base)}>
   &copy; {year}
   {#if href}
-    <a {...restProps} {href} class={cn(link(), aClass)}>
+    <a {...restProps} {href} class={cn(link(), aClass, (theme as FooterCopyrightTheme)?.link)}>
       {by}
     </a>
   {:else}
-    <span class={cn(bySpan(), bySpanClass)}>{by}</span>
+    <span class={cn(bySpan(), bySpanClass, (theme as FooterCopyrightTheme)?.bySpan)}>{by}</span>
   {/if}
   {copyrightMessage}
 </span>
@@ -25,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L649)
+[FooterCopyrightProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L642)
 ## Props
 @prop spanClass
 @prop aClass

package/dist/footer/FooterCopyright.svelte.d.ts

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

package/dist/footer/FooterIcon.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
   import { footerIcon } from ".";
   import { type FooterIconProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, href, ariaLabel, class: className, ...restProps }: FooterIconProps = $props();
+
+  const theme = getTheme("footerIcon");
 </script>
 
 {#if href}
-  <a {...restProps} {href} aria-label={ariaLabel} class={cn(footerIcon(), className)}>
+  <a {...restProps} {href} aria-label={ariaLabel} class={cn(footerIcon(), className, theme)}>
     {@render children()}
   </a>
 {:else}
@@ -17,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L659)
+[FooterIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L652)
 ## Props
 @prop children
 @prop href

package/dist/footer/FooterIcon.svelte.d.ts

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

package/dist/footer/FooterLink.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
-  import { footerLink } from ".";
+  import { footerLink, type FooterLinkTheme } from ".";
   import { type FooterLinkProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, liClass, aClass, href, ...restProps }: FooterLinkProps = $props();
+
+  const theme = getTheme("footerLink");
+
   const { base, link } = footerLink();
 </script>
 
-<li class={cn(base(), liClass)}>
-  <a {...restProps} {href} class={cn(link(), aClass)}>
+<li class={cn(base(), liClass, (theme as FooterLinkTheme)?.base)}>
+  <a {...restProps} {href} class={cn(link(), aClass, (theme as FooterLinkTheme)?.link)}>
     {@render children()}
   </a>
 </li>
@@ -16,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L669)
+[FooterLinkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L662)
 ## Props
 @prop children
 @prop liClass

package/dist/footer/FooterLink.svelte.d.ts

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

package/dist/footer/FooterLinkGroup.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { footerLinkGroup } from ".";
   import { type FooterLinkGroupProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { class: className, children, ...restProps }: FooterLinkGroupProps = $props();
+
+  const theme = getTheme("footerLinkGroup");
 </script>
 
-<ul {...restProps} class={cn(footerLinkGroup(), className)}>
+<ul {...restProps} class={cn(footerLinkGroup(), className, theme)}>
   {@render children()}
 </ul>
 
@@ -13,7 +16,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L665)
+[FooterLinkGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L658)
 ## Props
 @prop class: className
 @prop children

package/dist/footer/FooterLinkGroup.svelte.d.ts

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

package/dist/footer/index.d.ts

@@ -4,4 +4,4 @@ export { default as FooterCopyright } from "./FooterCopyright.svelte";
 export { default as FooterIcon } from "./FooterIcon.svelte";
 export { default as FooterLink } from "./FooterLink.svelte";
 export { default as FooterLinkGroup } from "./FooterLinkGroup.svelte";
-export { footer, footerBrand, footerCopyright, footerIcon, footerLinkGroup, footerLink } from "./theme";
+export { footer, footerBrand, footerCopyright, footerIcon, footerLinkGroup, footerLink, type FooterTheme, type FooterBrandTheme, type FooterCopyrightTheme, type FooterIconTheme, type FooterLinkGroupTheme, type FooterLinkTheme } from "./theme";

package/dist/footer/theme.d.ts

@@ -1,4 +1,4 @@
-declare const footer: import("tailwind-variants").TVReturnType<{
+export declare const footer: import("tailwind-variants").TVReturnType<{
     footerType: {
         default: string;
         sitemap: string;
@@ -23,20 +23,21 @@ declare const footer: import("tailwind-variants").TVReturnType<{
         sticky: string;
     };
 }, undefined, "bg-white dark:bg-gray-800", unknown, unknown, undefined>>;
-declare const footerBrand: import("tailwind-variants").TVReturnType<{
+export type FooterTheme = string;
+export declare const footerBrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
             img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
             img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -47,8 +48,8 @@ declare const footerBrand: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
-            span?: import("tailwind-variants").ClassValue;
             img?: import("tailwind-variants").ClassValue;
+            span?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -60,7 +61,9 @@ declare const footerBrand: import("tailwind-variants").TVReturnType<{
     span: string;
     img: string;
 }, undefined, unknown, unknown, undefined>>;
-declare const footerCopyright: import("tailwind-variants").TVReturnType<{
+export type FooterBrandSlots = keyof typeof footerBrand.slots;
+export type FooterBrandTheme = Partial<Record<FooterBrandSlots, string>>;
+export declare const footerCopyright: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
@@ -97,9 +100,13 @@ declare const footerCopyright: import("tailwind-variants").TVReturnType<{
     link: string;
     bySpan: string;
 }, undefined, unknown, unknown, undefined>>;
-declare const footerIcon: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 hover:text-gray-900 dark:hover:text-white", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 hover:text-gray-900 dark:hover:text-white", unknown, unknown, undefined>>;
-declare const footerLinkGroup: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-600 dark:text-gray-400", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-600 dark:text-gray-400", unknown, unknown, undefined>>;
-declare const footerLink: import("tailwind-variants").TVReturnType<{
+export type FooterCopyrightSlots = keyof typeof footerCopyright.slots;
+export type FooterCopyrightTheme = Partial<Record<FooterCopyrightSlots, string>>;
+export declare const footerIcon: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 hover:text-gray-900 dark:hover:text-white", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 hover:text-gray-900 dark:hover:text-white", unknown, unknown, undefined>>;
+export type FooterIconTheme = string;
+export declare const footerLinkGroup: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-600 dark:text-gray-400", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-600 dark:text-gray-400", unknown, unknown, undefined>>;
+export type FooterLinkGroupTheme = string;
+export declare const footerLink: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
@@ -130,4 +137,5 @@ declare const footerLink: import("tailwind-variants").TVReturnType<{
     base: string;
     link: string;
 }, undefined, unknown, unknown, undefined>>;
-export { footer, footerBrand, footerCopyright, footerIcon, footerLinkGroup, footerLink };
+export type FooterLinkSlots = keyof typeof footerLink.slots;
+export type FooterLinkTheme = Partial<Record<FooterLinkSlots, string>>;

package/dist/footer/theme.js

@@ -1,5 +1,5 @@
 import { tv } from "tailwind-variants";
-const footer = tv({
+export const footer = tv({
     base: "bg-white dark:bg-gray-800",
     variants: {
         footerType: {
@@ -11,30 +11,29 @@ const footer = tv({
         }
     }
 });
-const footerBrand = tv({
+export const footerBrand = tv({
     slots: {
         base: "flex items-center",
         span: "self-center text-2xl font-semibold whitespace-nowrap dark:text-white",
         img: "me-3 h-8"
     }
 });
-const footerCopyright = tv({
+export const footerCopyright = tv({
     slots: {
         base: "block text-sm text-gray-500 sm:text-center dark:text-gray-400",
         link: "hover:underline",
         bySpan: "ms-1"
     }
 });
-const footerIcon = tv({
+export const footerIcon = tv({
     base: "text-gray-500 hover:text-gray-900 dark:hover:text-white"
 });
-const footerLinkGroup = tv({
+export const footerLinkGroup = tv({
     base: "text-gray-600 dark:text-gray-400"
 });
-const footerLink = tv({
+export const footerLink = tv({
     slots: {
         base: "me-4 last:me-0 md:me-6",
         link: "hover:underline"
     }
 });
-export { footer, footerBrand, footerCopyright, footerIcon, footerLinkGroup, footerLink };

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

@@ -1,12 +1,15 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import CheckIcon from "./CheckIcon.svelte";
-  import { buttonToggle, buttonToggleContent, buttonToggleText } from "./theme";
+  import { buttonToggle, type ButtonToggleTheme } from ".";
   import type { ButtonToggleVariants } from "./theme";
   import { type ButtonToggleProps, type ButtonToggleContext, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { value, selected = false, children, iconSlot, color, class: className, iconClass, txtClass, contentClass, ...restProps }: ButtonToggleProps = $props();
 
+  const theme = getTheme("buttonToggle");
+
   const { toggleSelected, isSelected } = getContext<ButtonToggleContext>("button-toggle-group");
   const multiSelect = getContext<boolean>("multiSelect");
   const actualColor = getContext<ButtonToggleVariants["color"]>("buttonToggleColor") ? getContext<ButtonToggleVariants["color"]>("buttonToggleColor") : color ? color : "primary";
@@ -25,8 +28,8 @@
   });
 </script>
 
-<button type="button" class={cn(buttonToggle({ selected, color: actualColor, size, roundedSize }), ctxBtnClass, className)} data-selected={selected} onclick={handleClick} role={multiSelect ? "checkbox" : "radio"} aria-checked={selected} {...restProps}>
-  <div class={cn(buttonToggleContent(), contentClass)}>
+<button type="button" class={cn(buttonToggle.button({ selected, color: actualColor, size, roundedSize }), ctxBtnClass, className, (theme as ButtonToggleTheme)?.button)} data-selected={selected} onclick={handleClick} role={multiSelect ? "checkbox" : "radio"} aria-checked={selected} {...restProps}>
+  <div class={cn(buttonToggle.content(), contentClass, (theme as ButtonToggleTheme)?.content)}>
     {#if selected}
       {#if iconSlot}
         {@render iconSlot()}
@@ -34,7 +37,7 @@
         <CheckIcon class={cn("absolute left-0 flex-shrink-0 text-green-600", actualIconClass)} />
       {/if}
     {/if}
-    <span class={cn(buttonToggleText({ selected }), txtClass)}>
+    <span class={cn(buttonToggle.text({ selected }), txtClass, (theme as ButtonToggleTheme)?.text)}>
       {@render children()}
     </span>
   </div>
@@ -44,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L375)
+[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L368)
 ## 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#L375)
+ * [ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L368)
  * ## Props
  * @prop value
  * @prop selected = false

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

@@ -1,9 +1,12 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { type ButtonToggleGroupProps, buttonToggleGroup, cn } from "../..";
+  import { getTheme } from "../../theme/themeUtils";
 
   let { multiSelect = false, name = "toggle-group", value = multiSelect ? [] : null, color, size = "md", roundedSize = "md", onSelect = (val: any) => {}, children, ctxIconClass, ctxBtnClass, class: className, ...restProps }: ButtonToggleGroupProps = $props();
 
+  const theme = getTheme("buttonToggleGroup");
+
   const base = $derived(buttonToggleGroup({ roundedSize }));
   type SelectedValue = string | null | string[];
 
@@ -61,7 +64,7 @@
 </script>
 
 <div class="inline">
-  <div class={cn(base, className)} role={multiSelect ? "group" : "radiogroup"} aria-label={name} {...restProps}>
+  <div class={cn(base, className, theme)} role={multiSelect ? "group" : "radiogroup"} aria-label={name} {...restProps}>
     {@render children()}
   </div>
 </div>

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

@@ -11,7 +11,7 @@
 @component
 [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