flowbite-svelte 1.29.1 → 1.30.1

package/dist/accordion/Accordion.svelte

@@ -1,25 +1,38 @@
 <script lang="ts">
-  import type { AccordionCtxType, AccordionProps } from "..";
+  import type { AccordionContextType, AccordionProps } from "../types";
   import { getTheme } from "../theme/themeUtils";
   import clsx from "clsx";
-  import { setContext } from "svelte";
+  import { setAccordionContext } from "../context";
   import { accordion } from "./theme";
   import { createSingleSelectionContext } from "../utils/singleselection.svelte";
+  import { untrack } from "svelte";
 
   let { children, flush, activeClass, inactiveClass, multiple = false, class: className, transitionType, ...restProps }: AccordionProps = $props();
 
   const theme = getTheme("accordion");
 
-  const ctx: AccordionCtxType = $state({
-    flush,
-    activeClass,
-    inactiveClass,
-    transitionType
-  });
-
-  setContext<AccordionCtxType>("ctx", ctx);
-
-  createSingleSelectionContext(multiple);
+  // Simple reactive state object
+  const reactiveCtx: AccordionContextType = {
+    get flush() {
+      return flush;
+    },
+    get activeClass() {
+      return activeClass;
+    },
+    get inactiveClass() {
+      return inactiveClass;
+    },
+    get transitionType() {
+      return transitionType;
+    }
+  };
+
+  // Set context during initialization
+  setAccordionContext(reactiveCtx);
+
+  // Create selection context synchronously for proper nesting
+  // Use untrack to explicitly capture only the initial value
+  createSingleSelectionContext(untrack(() => multiple));
 
   const base = $derived(accordion({ flush, class: clsx(theme, className) }));
 </script>
@@ -32,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L206)
+[AccordionProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L199)
 ## Props
 @prop children
 @prop flush

package/dist/accordion/Accordion.svelte.d.ts

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

package/dist/accordion/AccordionItem.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import type { AccordionCtxType, AccordionItemProps, ParamsType } from "..";
+  import type { AccordionItemProps, ParamsType } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import { useSingleSelection } from "../utils/singleselection.svelte";
   import clsx from "clsx";
-  import { getContext } from "svelte";
+  import { getAccordionContext } from "../context";
   import { slide } from "svelte/transition";
   import { accordionItem } from "./theme";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -25,12 +26,12 @@
 
   warnThemeDeprecation(
     "AccordionItem",
-    {
+    untrack(() => ({
       headerClass,
       contentClass,
       activeClass,
       inactiveClass
-    },
+    })),
     {
       headerClass: "button",
       contentClass: "content",
@@ -41,11 +42,12 @@
 
   let styling: typeof classes = $derived(classes ?? { button: headerClass, content: contentClass, active: activeClass, inactive: inactiveClass });
 
-  const ctx: AccordionCtxType = getContext("ctx") ?? {};
+  // Get context - it will be undefined if used outside Accordion
+  const ctx = getAccordionContext();
 
-  const ctxTransitionType = ctx.transitionType ?? transitionType;
+  const ctxTransitionType = $derived(ctx?.transitionType ?? transitionType);
   // Check if transitionType is explicitly set to undefined in props
-  const useTransition = transitionType === "none" ? false : ctxTransitionType === "none" ? false : true;
+  const useTransition = $derived(transitionType === "none" ? false : ctxTransitionType === "none" ? false : true);
 
   // Theme context
   const theme = getTheme("accordionItem");
@@ -63,9 +65,9 @@
     open = !open;
   };
 
-  const { base, button, content, active, inactive } = $derived(accordionItem({ flush: ctx.flush, open }));
+  const { base, button, content, active, inactive } = $derived(accordionItem({ flush: ctx?.flush, open }));
 
-  let buttonClass = $derived(clsx(open && !ctx.flush && (styling.active || ctx.activeClass || active()), !open && !ctx.flush && (styling.inactive || ctx.inactiveClass || inactive())));
+  let buttonClass = $derived(clsx(open && !ctx?.flush && (styling.active || ctx?.activeClass || active()), !open && !ctx?.flush && (styling.inactive || ctx?.inactiveClass || inactive())));
 </script>
 
 <h2 class={base({ class: clsx(theme?.base, className) })}>
@@ -111,7 +113,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L214)
+[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L207)
 ## Props
 @prop children
 @prop header

package/dist/accordion/AccordionItem.svelte.d.ts

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

package/dist/alert/Alert.svelte

@@ -77,7 +77,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L228)
+[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L221)
 ## Props
 @prop children
 @prop icon

package/dist/alert/Alert.svelte.d.ts

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

package/dist/avatar/Avatar.svelte

@@ -10,7 +10,7 @@
   // Theme context
   const theme = getTheme("avatar");
 
-  dot = dot && { placement: "top-right", color: "gray", size: "lg", ...dot };
+  let dotProps = $derived(dot ? { placement: "top-right" as const, color: "gray" as const, size: "lg" as const, ...dot } : undefined);
 
   let avatarClass = $derived(
     avatar({
@@ -34,8 +34,8 @@
         <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
       </svg>
     {/if}
-    {#if dot}
-      <Indicator border offset={cornerStyle === "circular" ? true : false} {...dot} />
+    {#if dotProps}
+      <Indicator border offset={cornerStyle === "circular" ? true : false} {...dotProps} />
     {/if}
     {#if indicator}
       {@render indicator()}
@@ -49,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L239)
+[AvatarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L232)
 ## Props
 @prop children
 @prop indicator

package/dist/avatar/Avatar.svelte.d.ts

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

package/dist/badge/Badge.svelte

@@ -6,6 +6,7 @@
   import { fade } from "svelte/transition";
   import { badge } from "./theme";
   import { createDismissableContext } from "../utils/dismissable";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -26,7 +27,11 @@
     ...restProps
   }: BadgeProps = $props();
 
-  warnThemeDeprecation("Badge", { aClass }, { aClass: "linkClass" });
+  warnThemeDeprecation(
+    "Badge",
+    untrack(() => ({ aClass })),
+    { aClass: "linkClass" }
+  );
 
   const styling = $derived(classes ?? { linkClass: aClass });
 
@@ -72,7 +77,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L251)
+[BadgeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L244)
 ## Props
 @prop children
 @prop icon

package/dist/badge/Badge.svelte.d.ts

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

package/dist/banner/Banner.svelte

@@ -6,6 +6,7 @@
   import CloseButton from "../utils/CloseButton.svelte";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import { createDismissableContext } from "../utils/dismissable";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -24,7 +25,11 @@
     ...restProps
   }: BannerProps = $props();
 
-  warnThemeDeprecation("Banner", { innerClass, closeClass }, { innerClass: "insideDiv", closeClass: "dismissable" });
+  warnThemeDeprecation(
+    "Banner",
+    untrack(() => ({ innerClass, closeClass })),
+    { innerClass: "insideDiv", closeClass: "dismissable" }
+  );
 
   const styling = $derived(classes ?? { insideDiv: innerClass, dismissable: closeClass });
 
@@ -61,7 +66,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L265)
+[BannerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L258)
 ## Props
 @prop children
 @prop header

package/dist/banner/Banner.svelte.d.ts

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

package/dist/bottom-navigation/BottomNav.svelte

@@ -1,31 +1,43 @@
 <script lang="ts">
-  import { type BottomNavContextType, type BottomNavProps } from "..";
+  import type { BottomNavContextType, BottomNavProps } from "../types";
   import { cn } from "../utils";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
-  import { setContext } from "svelte";
+  import { setBottomNavContext } from "../context";
   import { bottomNav } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, header, position = "fixed", navType = "default", class: className, classes, outerClass, innerClass, activeClass, activeUrl = "", ...restProps }: BottomNavProps = $props();
 
-  warnThemeDeprecation("BottomNav", { innerClass, outerClass }, { innerClass: "inner", outerClass: "class" });
+  warnThemeDeprecation(
+    "BottomNav",
+    untrack(() => ({ innerClass, outerClass })),
+    { innerClass: "inner", outerClass: "class" }
+  );
+
   const styling = $derived(classes ?? { inner: innerClass });
 
   // Theme context
   const theme = getTheme("bottomNav");
 
-  const activeCls = cn("text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900", activeClass);
+  const activeCls = $derived(cn("text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900", activeClass));
 
-  let context: BottomNavContextType = $state({ activeClass: activeCls, activeUrl, navType });
-  setContext<BottomNavContextType>("bottomNavType", context);
+  // Create reactive context using getters
+  const reactiveCtx: BottomNavContextType = {
+    get activeClass() {
+      return activeCls;
+    },
+    get activeUrl() {
+      return activeUrl;
+    },
+    get navType() {
+      return navType;
+    }
+  };
 
-  const { base, inner } = $derived(bottomNav({ position, navType }));
+  setBottomNavContext(reactiveCtx);
 
-  $effect(() => {
-    context.activeUrl = activeUrl;
-    context.navType = navType;
-    context.activeClass = activeCls;
-  });
+  const { base, inner } = $derived(bottomNav({ position, navType }));
 </script>
 
 <div {...restProps} class={base({ class: clsx(theme?.base, className ?? outerClass) })}>
@@ -42,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L284)
+[BottomNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L271)
 ## Props
 @prop children
 @prop header

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

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

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -3,10 +3,15 @@
   import clsx from "clsx";
   import type { BottomNavHeaderProps } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, class: className, classes, outerClass, innerClass, ...restProps }: BottomNavHeaderProps = $props();
 
-  warnThemeDeprecation("BottomNavHeader", { innerClass, outerClass }, { innerClass: "inner", outerClass: "class" });
+  warnThemeDeprecation(
+    "BottomNavHeader",
+    untrack(() => ({ innerClass, outerClass })),
+    { innerClass: "inner", outerClass: "class" }
+  );
 
   const styling = $derived(classes ?? { innerDiv: innerClass });
 
@@ -26,7 +31,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L303)
+[BottomNavHeaderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L290)
 ## Props
 @prop children
 @prop class: className

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

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

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -20,7 +20,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L309)
+[BottomNavHeaderItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L296)
 ## Props
 @prop itemName
 @prop active

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

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

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -1,24 +1,30 @@
 <script lang="ts">
-  import type { BottomNavContextType, BottomNavItemProps } from "..";
+  import type { BottomNavItemProps } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
   import clsx from "clsx";
-  import { getContext } from "svelte";
+  import { getBottomNavContext } from "../context";
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
   import { bottomNavItem } from "./theme";
+  import { untrack } from "svelte";
 
   let { children, btnName, appBtnPosition = "middle", activeClass, class: className, classes, btnClass, spanClass, active: manualActive, ...restProps }: BottomNavItemProps = $props();
 
-  warnThemeDeprecation("BottomNavItem", { spanClass, btnClass }, { spanClass: "span", btnClass: "class" });
+  warnThemeDeprecation(
+    "BottomNavItem",
+    untrack(() => ({ spanClass, btnClass })),
+    { spanClass: "span", btnClass: "class" }
+  );
+
   const styling = $derived(classes ?? { span: spanClass });
 
   // Theme context
   const theme = getTheme("bottomNavItem");
 
-  const context = getContext<BottomNavContextType>("bottomNavType") ?? {};
+  const context = getBottomNavContext();
 
-  let navUrl = $derived(context.activeUrl || "");
+  let navUrl = $derived(context?.activeUrl || "");
 
-  const { base, span } = $derived(bottomNavItem({ navType: context.navType, appBtnPosition }));
+  const { base, span } = $derived(bottomNavItem({ navType: context?.navType, appBtnPosition }));
 
   // Determine active state based on manual prop or URL matching
   let isActive = $derived.by(() => {
@@ -33,11 +39,11 @@
   });
 
   function getCommonClass() {
-    return base({ class: clsx(isActive && (activeClass ?? context.activeClass), theme?.base, className ?? btnClass) });
+    return base({ class: clsx(isActive && (activeClass ?? context?.activeClass), theme?.base, className ?? btnClass) });
   }
 
   function getSpanClass() {
-    return span({ class: clsx(isActive && (activeClass ?? context.activeClass), theme?.span, styling.span) });
+    return span({ class: clsx(isActive && (activeClass ?? context?.activeClass), theme?.span, styling.span) });
   }
 
   /* eslint-disable  @typescript-eslint/no-explicit-any */
@@ -73,7 +79,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L293)
+[BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L280)
 ## 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#L293)
+ * [BottomNavItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L280)
  * ## Props
  * @prop children
  * @prop btnName

package/dist/breadcrumb/Breadcrumb.svelte

@@ -3,15 +3,21 @@
   import clsx from "clsx";
   import type { BreadcrumbProps } from "..";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, solid = false, class: className, classes, olClass, ariaLabel = "Breadcrumb", ...restProps }: BreadcrumbProps = $props();
 
-  warnThemeDeprecation("Breadcrumb", { olClass }, { olClass: "list" });
+  warnThemeDeprecation(
+    "Breadcrumb",
+    untrack(() => ({ olClass })),
+    { olClass: "list" }
+  );
+
   const styling = $derived(classes ?? { list: olClass });
 
   const theme = getTheme("breadcrumb");
 
-  const { base, list } = breadcrumb({ solid });
+  const { base, list } = $derived(breadcrumb({ solid }));
   let classNav = $derived(base({ class: clsx(theme?.base, className) }));
   let classList = $derived(list({ class: clsx(theme?.list, styling.list) }));
 </script>
@@ -26,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L315)
+[BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L302)
 ## 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#L315)
+ * [BreadcrumbProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L302)
  * ## Props
  * @prop children
  * @prop solid = false

package/dist/breadcrumb/BreadcrumbItem.svelte

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

package/dist/button-group/ButtonGroup.svelte

@@ -1,17 +1,28 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import { buttonGroup } from "./theme";
   import clsx from "clsx";
   import type { ButtonGroupProps } from "..";
   import { getTheme } from "../theme/themeUtils";
+  import { setButtonGroupContext } from "../context";
 
   let { children, size = "md", disabled, class: className, ...restProps }: ButtonGroupProps = $props();
 
   const theme = getTheme("buttonGroup");
 
   let groupClass = $derived(buttonGroup({ size, class: clsx(theme, className) }));
-  setContext("group", size);
-  setContext("disabled", disabled);
+
+  // Create a reactive context object
+  // The object itself stays the same, but its properties are reactive
+  const reactiveCtx = {
+    get size() {
+      return size;
+    },
+    get disabled() {
+      return disabled;
+    }
+  };
+
+  setButtonGroupContext(reactiveCtx);
 </script>
 
 <div {...restProps} class={groupClass} role="group">
@@ -22,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L333)
+[ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L320)
 ## 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#L333)
+ * [ButtonGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L320)
  * ## Props
  * @prop children
  * @prop size = "md"

package/dist/buttons/Button.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-  import { getContext } from "svelte";
   import clsx from "clsx";
   import { Spinner } from "..";
-  import type { SizeType, ButtonProps } from "..";
+  import type { ButtonProps } from "..";
   import { getTheme } from "../theme/themeUtils";
   import { button } from "./theme";
+  import { getButtonGroupContext } from "../context";
 
-  const group: SizeType = getContext("group");
-  const ctxDisabled: boolean | undefined = getContext("disabled");
+  const groupCtx = getButtonGroupContext();
+  const group = groupCtx?.size;
+  const ctxDisabled = groupCtx?.disabled;
 
   let {
     children,