flowbite-svelte 1.9.0 → 1.10.0

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
-  import { bottomNavItem } from ".";
+  import { bottomNavItem, type BottomNavItemTheme } from ".";
   import { type BottomNavItemProps, type BottomNavContextType, type BottomNavVariantType, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, btnName, appBtnPosition = "middle", target, activeClass, href = "", btnClass, spanClass, active: manualActive, ...restProps }: BottomNavItemProps = $props();
 
+  // Theme context
+  const theme = getTheme("bottomNavItem");
+
   const navType: BottomNavVariantType = getContext("navType");
   const context = getContext<BottomNavContextType>("bottomNavType") ?? {};
 
@@ -22,11 +26,11 @@
   let isActive = $derived(manualActive !== undefined ? !!manualActive : navUrl ? (href === "/" ? navUrl === "/" : href && (navUrl === href || navUrl.startsWith(href + "/") || (href !== "/" && navUrl.replace(/^https?:\/\/[^/]+/, "").startsWith(href)))) : false);
 
   function getCommonClass() {
-    return cn(base(), isActive && (activeClass ?? context.activeClass), btnClass);
+    return cn(base(), isActive && (activeClass ?? context.activeClass), btnClass, (theme as BottomNavItemTheme)?.base);
   }
 
   function getSpanClass() {
-    return cn(span(), isActive && (activeClass ?? context.activeClass), spanClass);
+    return cn(span(), isActive && (activeClass ?? context.activeClass), spanClass, (theme as BottomNavItemTheme)?.span);
   }
 
   /* eslint-disable  @typescript-eslint/no-explicit-any */
@@ -64,7 +68,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L267)
+[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L260)
 ## Props
 @prop children
 @prop btnName

package/dist/bottom-navigation/BottomNavItem.svelte.d.ts

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

package/dist/bottom-navigation/index.d.ts

@@ -2,4 +2,4 @@ export { default as BottomNav } from "./BottomNav.svelte";
 export { default as BottomNavItem } from "./BottomNavItem.svelte";
 export { default as BottomNavHeaderItem } from "./BottomNavHeaderItem.svelte";
 export { default as BottomNavHeader } from "./BottomNavHeader.svelte";
-export { bottomNav, bottomNavItem, bottomnavheader, bottomnavheaderitem } from "./theme";
+export { bottomNav, bottomNavItem, bottomNavHeader, bottomNavHeaderItem, type BottomNavTheme, type BottomNavItemTheme, type BottomNavHeaderTheme, type BottomNavHeaderItemTheme } from "./theme";

package/dist/bottom-navigation/index.js

@@ -2,4 +2,4 @@ export { default as BottomNav } from "./BottomNav.svelte";
 export { default as BottomNavItem } from "./BottomNavItem.svelte";
 export { default as BottomNavHeaderItem } from "./BottomNavHeaderItem.svelte";
 export { default as BottomNavHeader } from "./BottomNavHeader.svelte";
-export { bottomNav, bottomNavItem, bottomnavheader, bottomnavheaderitem } from "./theme";
+export { bottomNav, bottomNavItem, bottomNavHeader, bottomNavHeaderItem } from "./theme";

package/dist/bottom-navigation/theme.d.ts

@@ -294,7 +294,7 @@ export declare const bottomNavItem: import("tailwind-variants").TVReturnType<{
     base: string;
     span: string;
 }, undefined, unknown, unknown, undefined>>;
-export declare const bottomnavheader: import("tailwind-variants").TVReturnType<{
+export declare const bottomNavHeader: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             innerDiv?: import("tailwind-variants").ClassValue;
@@ -325,7 +325,7 @@ export declare const bottomnavheader: import("tailwind-variants").TVReturnType<{
     innerDiv: string;
     outerDiv: string;
 }, undefined, unknown, unknown, undefined>>;
-export declare const bottomnavheaderitem: import("tailwind-variants").TVReturnType<{
+export declare const bottomNavHeaderItem: import("tailwind-variants").TVReturnType<{
     active: {
         true: string;
         false: string;
@@ -341,3 +341,11 @@ export declare const bottomnavheaderitem: import("tailwind-variants").TVReturnTy
         false: string;
     };
 }, undefined, "px-5 py-1.5 text-xs font-medium rounded-lg", unknown, unknown, undefined>>;
+export type BottomNavSlots = keyof typeof bottomNav.slots;
+export type BottomNavTheme = Partial<Record<BottomNavSlots, string>>;
+export type BottomNavItemSlots = keyof typeof bottomNavItem.slots;
+export type BottomNavItemTheme = Partial<Record<BottomNavItemSlots, string>>;
+export type BottomnavheaderSlots = keyof typeof bottomNavHeader.slots;
+export type BottomNavHeaderTheme = Partial<Record<BottomnavheaderSlots, string>>;
+export type bottomNavHeaderItemSlots = keyof typeof bottomNavHeaderItem.slots;
+export type BottomNavHeaderItemTheme = Partial<Record<bottomNavHeaderItemSlots, string>>;

package/dist/bottom-navigation/theme.js

@@ -96,13 +96,13 @@ export const bottomNavItem = tv({
         active: false
     }
 });
-export const bottomnavheader = tv({
+export const bottomNavHeader = tv({
     slots: {
         innerDiv: "grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600",
         outerDiv: "w-full"
     }
 });
-export const bottomnavheaderitem = tv({
+export const bottomNavHeaderItem = tv({
     base: "px-5 py-1.5 text-xs font-medium rounded-lg",
     variants: {
         active: {

package/dist/breadcrumb/Breadcrumb.svelte

@@ -1,18 +1,15 @@
 <script lang="ts">
-  import { getContext } from "svelte";
   import { breadcrumb } from ".";
-  import { type BreadcrumbProps, type BaseThemes, cn } from "..";
+  import { type BreadcrumbProps, cn, type BreadcrumbTheme } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, solid = false, class: className, olClass, ariaLabel = "Breadcrumb", ...restProps }: BreadcrumbProps = $props();
 
-  // Get merged theme from context
-  const context = getContext<BaseThemes>("themeConfig");
-  // Use context theme if available, otherwise fallback to default
-  const breadcrumbTheme = context?.breadcrumb || breadcrumb;
+  const theme = getTheme("breadcrumb");
 
-  const { nav, list } = breadcrumbTheme({ solid });
-  let classNav = $derived(cn(nav(), className));
-  let classList = $derived(cn(list(), olClass));
+  const { nav, list } = breadcrumb({ solid });
+  let classNav = $derived(cn(nav(), className, (theme as BreadcrumbTheme)?.nav));
+  let classList = $derived(cn(list(), olClass, (theme as BreadcrumbTheme)?.list));
 </script>
 
 <nav aria-label={ariaLabel} {...restProps} class={classNav}>
@@ -25,7 +22,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L314)
+[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L307)
 ## Props
 @prop children
 @prop solid = false

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

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

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -1,20 +1,23 @@
 <script lang="ts">
-  import { breadcrumb } from "./index";
-  import { type BreadcrumbItemProps, cn } from "..";
+  import { breadcrumbItem } from "./index";
+  import { type BreadcrumbItemProps, cn, type BreadcrumbItemTheme } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, icon, home = false, href, linkClass, spanClass, homeClass, class: className, ...restProps }: BreadcrumbItemProps = $props();
 
-  const { item, icon: breacrumbIcon } = $derived(
-    breadcrumb({
+  const theme = getTheme("breadcrumbItem");
+
+  const { base, separator } = $derived(
+    breadcrumbItem({
       home,
       hasHref: !!href
     })
   );
 </script>
 
-<li {...restProps} class={cn(item(), className)}>
+<li {...restProps} class={cn(base(), className, (theme as BreadcrumbItemTheme)?.base)}>
   {#if home}
-    <a class={cn(item({ home: true }), homeClass)} {href}>
+    <a class={cn(base({ home: true }), homeClass, (theme as BreadcrumbItemTheme)?.base)} {href}>
       {#if icon}
         {@render icon()}
       {:else}
@@ -29,17 +32,17 @@
     {#if icon}
       {@render icon()}
     {:else}
-      <svg class={breacrumbIcon()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <svg class={cn(separator(), (theme as BreadcrumbItemTheme)?.separator)} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
       </svg>
     {/if}
 
     {#if href}
-      <a class={cn(item({ home: false, hasHref: true }), linkClass)} {href}>
+      <a class={cn(base({ home: false, hasHref: true }), linkClass, (theme as BreadcrumbItemTheme)?.base)} {href}>
         {@render children()}
       </a>
     {:else}
-      <span class={cn(item({ home: false, hasHref: false }), spanClass)}>
+      <span class={cn(base({ home: false, hasHref: false }), spanClass, (theme as BreadcrumbItemTheme)?.base)}>
         {@render children()}
       </span>
     {/if}
@@ -50,7 +53,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L321)
+[BreadcrumbItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L314)
 ## Props
 @prop children
 @prop icon

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

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

package/dist/breadcrumb/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Breadcrumb } from "./Breadcrumb.svelte";
 export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
-export { breadcrumb } from "./theme";
+export { breadcrumb, breadcrumbItem, type BreadcrumbTheme, type BreadcrumbItemTheme } from "./theme";

package/dist/breadcrumb/index.js

@@ -1,3 +1,3 @@
 export { default as Breadcrumb } from "./Breadcrumb.svelte";
 export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
-export { breadcrumb } from "./theme";
+export { breadcrumb, breadcrumbItem } from "./theme";

package/dist/breadcrumb/theme.d.ts

@@ -5,26 +5,31 @@ export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
         };
         false: string;
     };
-    home: {
-        true: string;
-        false: string;
-    };
-    hasHref: {
-        true: string;
+}, {
+    nav: string;
+    list: string;
+}, undefined, {
+    solid: {
+        true: {
+            nav: string;
+        };
         false: string;
     };
 }, {
     nav: string;
     list: string;
-    item: string;
-    icon: string;
-}, undefined, {
+}, import("tailwind-variants").TVReturnType<{
     solid: {
         true: {
             nav: string;
         };
         false: string;
     };
+}, {
+    nav: string;
+    list: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const breadcrumbItem: import("tailwind-variants").TVReturnType<{
     home: {
         true: string;
         false: string;
@@ -34,17 +39,21 @@ export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, {
-    nav: string;
-    list: string;
-    item: string;
-    icon: string;
-}, import("tailwind-variants").TVReturnType<{
-    solid: {
-        true: {
-            nav: string;
-        };
+    base: string;
+    separator: string;
+}, undefined, {
+    home: {
+        true: string;
+        false: string;
+    };
+    hasHref: {
+        true: string;
         false: string;
     };
+}, {
+    base: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnType<{
     home: {
         true: string;
         false: string;
@@ -54,8 +63,10 @@ export declare const breadcrumb: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, {
-    nav: string;
-    list: string;
-    item: string;
-    icon: string;
+    base: string;
+    separator: string;
 }, undefined, unknown, unknown, undefined>>;
+export type BreadcrumbSlots = keyof typeof breadcrumb.slots;
+export type BreadcrumbTheme = Partial<Record<BreadcrumbSlots, string>>;
+export type BreadcrumbItemSlots = keyof typeof breadcrumbItem.slots;
+export type BreadcrumbItemTheme = Partial<Record<BreadcrumbItemSlots, string>>;

package/dist/breadcrumb/theme.js

@@ -2,9 +2,7 @@ import { tv } from "tailwind-variants";
 export const breadcrumb = tv({
     slots: {
         nav: "flex",
-        list: "inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse",
-        item: "inline-flex items-center",
-        icon: "h-6 w-6 text-gray-400 rtl:-scale-x-100"
+        list: "inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse"
     },
     variants: {
         solid: {
@@ -12,7 +10,18 @@ export const breadcrumb = tv({
                 nav: "px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
             },
             false: ""
-        },
+        }
+    },
+    defaultVariants: {
+        solid: false
+    }
+});
+export const breadcrumbItem = tv({
+    slots: {
+        base: "inline-flex items-center",
+        separator: "h-6 w-6 text-gray-400 rtl:-scale-x-100"
+    },
+    variants: {
         home: {
             true: "",
             false: ""
@@ -26,26 +35,23 @@ export const breadcrumb = tv({
         {
             home: true,
             class: {
-                item: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white",
-                icon: "me-2 h-4 w-4"
+                base: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white",
+                separator: "me-2 h-4 w-4"
             }
         },
         {
             home: false,
             hasHref: true,
             class: {
-                item: "ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white"
+                base: "ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white"
             }
         },
         {
             home: false,
             hasHref: false,
             class: {
-                item: "ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400"
+                base: "ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400"
             }
         }
-    ],
-    defaultVariants: {
-        solid: false
-    }
+    ]
 });

package/dist/button-group/ButtonGroup.svelte

@@ -2,10 +2,13 @@
   import { setContext } from "svelte";
   import { buttonGroup } from ".";
   import { type ButtonGroupProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, size = "md", disabled, class: className, ...restProps }: ButtonGroupProps = $props();
 
-  let groupClass = $derived(cn(buttonGroup({ size }), className));
+  const theme = getTheme("buttonGroup");
+
+  let groupClass = $derived(cn(buttonGroup({ size }), className, theme));
   setContext("group", size);
   setContext("disabled", disabled);
 </script>
@@ -18,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L332)
+[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L325)
 ## Props
 @prop children
 @prop size = "md"

package/dist/button-group/ButtonGroup.svelte.d.ts

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

package/dist/button-group/index.d.ts

@@ -1,2 +1,2 @@
 export { default as ButtonGroup } from "./ButtonGroup.svelte";
-export { buttonGroup } from "./theme";
+export { buttonGroup, type ButtonGroupTheme } from "./theme";

package/dist/button-group/theme.d.ts

@@ -18,3 +18,4 @@ declare const buttonGroup: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "inline-flex rounded-lg shadow-xs", unknown, unknown, undefined>>;
 export { buttonGroup };
+export type ButtonGroupTheme = string;

package/dist/buttons/Button.svelte

@@ -1,18 +1,22 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import { type SizeType, type ButtonProps, cn } from "..";
-  import { button } from ".";
+  import { getTheme } from "../theme/themeUtils";
+  import { button, type ButtonTheme } from ".";
 
   const group: SizeType = getContext("group");
   const ctxDisabled: boolean | undefined = getContext("disabled");
 
   let { children, pill, outline = false, size = "md", color, shadow = false, tag = "button", disabled, class: className, ...restProps }: ButtonProps = $props();
+
+  const theme = getTheme("button");
+
   let actualSize = $derived(group ? "sm" : size);
   let actualColor = $derived(color ?? (group ? (outline ? "dark" : "alternative") : "primary"));
   let isDisabled = $derived(Boolean(ctxDisabled) || Boolean(disabled));
 
   const { base, outline: outline_, shadow: shadow_ } = $derived(button({ color: actualColor, size: actualSize, disabled: isDisabled, pill, group: !!group }));
-  let btnCls = $derived(cn(base(), outline && outline_(), shadow && shadow_(), className));
+  let btnCls = $derived(cn(base(), outline && outline_(), shadow && shadow_(), className, (theme as ButtonTheme)?.base));
 </script>
 
 {#if restProps.href === undefined}
@@ -33,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L346)
+[ButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L339)
 ## Props
 @prop children
 @prop pill

package/dist/buttons/Button.svelte.d.ts

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

package/dist/buttons/GradientButton.svelte

@@ -1,23 +1,26 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import { gradientButton } from ".";
+  import { gradientButton, type GradientButtonTheme } from ".";
   import { type GradientButtonProps, type SizeType, Button, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   const group: SizeType = getContext("group");
 
   let { children, outline, pill, color = "blue", shadow, class: className, href, disabled, size, btnClass, ...restProps }: GradientButtonProps = $props();
 
+  const theme = getTheme("gradientButton");
+
   const { base, outlineWrapper } = $derived(gradientButton({ color, outline, pill, shadow, disabled, size, group: !!group }));
 </script>
 
 {#if outline}
-  <div class={cn(base(), className)}>
-    <Button {...restProps} class={cn(outlineWrapper(), btnClass)} {disabled} {href} {size}>
+  <div class={cn(base(), className, (theme as GradientButtonTheme)?.base)}>
+    <Button {...restProps} class={cn(outlineWrapper(), btnClass, (theme as GradientButtonTheme)?.outlineWrapper)} {disabled} {href} {size}>
       {@render children?.()}
     </Button>
   </div>
 {:else}
-  <Button {...restProps} class={cn(base(), className)} {disabled} {href} {size}>
+  <Button {...restProps} class={cn(base(), className, (theme as GradientButtonTheme)?.base)} {disabled} {href} {size}>
     {@render children?.()}
   </Button>
 {/if}
@@ -26,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L354)
+[GradientButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L347)
 ## Props
 @prop children
 @prop outline

package/dist/buttons/GradientButton.svelte.d.ts

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

package/dist/buttons/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Button } from "./Button.svelte";
 export { default as GradientButton } from "./GradientButton.svelte";
-export { button, gradientButton } from "./theme";
+export { button, gradientButton, type ButtonTheme, type GradientButtonTheme } from "./theme";

package/dist/buttons/theme.d.ts

@@ -702,3 +702,7 @@ export declare const gradientButton: import("tailwind-variants").TVReturnType<{
     base: string;
     outlineWrapper: string;
 }, undefined, unknown, unknown, undefined>>;
+export type ButtonSlots = keyof typeof button.slots;
+export type ButtonTheme = Partial<Record<ButtonSlots, string>>;
+export type GradientButtonSlots = keyof typeof gradientButton.slots;
+export type GradientButtonTheme = Partial<Record<GradientButtonSlots, string>>;

package/dist/card/Card.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-  import type { CardProps } from "..";
+  import { type CardProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
-  import { card } from ".";
+  import { card, type CardTheme } from ".";
 
   let { children, color = "gray", horizontal = false, shadow = "md", reverse = false, img, size = "sm", class: className, imgClass, contentClass, ...restProps }: CardProps = $props();
 
+  const theme = getTheme("card");
+
   const { base, image } = $derived(
     card({
       size,
@@ -19,7 +22,7 @@
 
 {#snippet childSlot()}
   {#if img}
-    <img class={image({ class: clsx(imgClass) })} src={img} alt={img} />
+    <img class={cn(image({ class: clsx(imgClass) }), (theme as CardTheme)?.image)} src={img} alt={img} />
     {@render children()}
   {:else}
     {@render children()}
@@ -27,11 +30,11 @@
 {/snippet}
 
 {#if restProps.href === undefined}
-  <div {...restProps} class={base({ class: clsx(className) })}>
+  <div {...restProps} class={cn(base({ class: clsx(className) }), (theme as CardTheme)?.base)}>
     {@render childSlot()}
   </div>
 {:else}
-  <a {...restProps} class={base({ class: clsx(className) })}>
+  <a {...restProps} class={cn(base({ class: clsx(className) }), (theme as CardTheme)?.base)}>
     {@render childSlot()}
   </a>
 {/if}
@@ -40,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L394)
+[CardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L387)
 ## Props
 @prop children
 @prop color = "gray"

package/dist/card/Card.svelte.d.ts

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

package/dist/card/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Card } from "./Card.svelte";
-export { card } from "./theme";
+export { card, type CardTheme } from "./theme";

package/dist/card/theme.d.ts

@@ -391,3 +391,5 @@ export declare const card: import("tailwind-variants").TVReturnType<{
     base: string;
     image: string;
 }, undefined, unknown, unknown, undefined>>;
+export type CardSlots = keyof typeof card.slots;
+export type CardTheme = Partial<Record<CardSlots, string>>;