fix: replace $effect() with svelte-ignore state_referenced_locally

Author: shinokada

src/lib/accordion/Accordion.svelte

@@ -11,7 +11,7 @@
   const theme = getTheme("accordion");
 
   // Simple reactive state object
-  const reactivecCtx: AccordionContextType = {
+  const reactiveCtx: AccordionContextType = {
     get flush() {
       return flush;
     },
@@ -27,7 +27,7 @@
   };
 
   // Set context during initialization
-  setAccordionContext(reactivecCtx);
+  setAccordionContext(reactiveCtx);
 
   $effect(() => {
     createSingleSelectionContext(multiple);

src/lib/accordion/AccordionItem.svelte

@@ -23,23 +23,22 @@
     contentClass
   }: AccordionItemProps = $props();
 
-  $effect(() => {
-    warnThemeDeprecation(
-      "AccordionItem",
-      {
-        headerClass,
-        contentClass,
-        activeClass,
-        inactiveClass
-      },
-      {
-        headerClass: "button",
-        contentClass: "content",
-        activeClass: "active",
-        inactiveClass: "inactive"
-      }
-    );
-  });
+  // svelte-ignore state_referenced_locally
+  warnThemeDeprecation(
+    "AccordionItem",
+    {
+      headerClass,
+      contentClass,
+      activeClass,
+      inactiveClass
+    },
+    {
+      headerClass: "button",
+      contentClass: "content",
+      activeClass: "active",
+      inactiveClass: "inactive"
+    }
+  );
 
   let styling: typeof classes = $derived(classes ?? { button: headerClass, content: contentClass, active: activeClass, inactive: inactiveClass });
 

src/lib/badge/Badge.svelte

@@ -26,9 +26,8 @@
     ...restProps
   }: BadgeProps = $props();
 
-  $effect(() => {
-    warnThemeDeprecation("Badge", { aClass }, { aClass: "linkClass" });
-  });
+  // svelte-ignore state_referenced_locally
+  warnThemeDeprecation("Badge", { aClass }, { aClass: "linkClass" });
 
   const styling = $derived(classes ?? { linkClass: aClass });
 

src/lib/banner/Banner.svelte

@@ -24,9 +24,8 @@
     ...restProps
   }: BannerProps = $props();
 
-  $effect(() => {
-    warnThemeDeprecation("Banner", { innerClass, closeClass }, { innerClass: "insideDiv", closeClass: "dismissable" });
-  });
+  // svelte-ignore state_referenced_locally
+  warnThemeDeprecation("Banner", { innerClass, closeClass }, { innerClass: "insideDiv", closeClass: "dismissable" });
 
   const styling = $derived(classes ?? { insideDiv: innerClass, dismissable: closeClass });
 

src/lib/bottom-navigation/BottomNav.svelte

@@ -8,9 +8,9 @@
 
   let { children, header, position = "fixed", navType = "default", class: className, classes, outerClass, innerClass, activeClass, activeUrl = "", ...restProps }: BottomNavProps = $props();
 
-  $effect(() => {
-    warnThemeDeprecation("BottomNav", { innerClass, outerClass }, { innerClass: "inner", outerClass: "class" });
-  });
+  // svelte-ignore state_referenced_locally
+  warnThemeDeprecation("BottomNav", { innerClass, outerClass }, { innerClass: "inner", outerClass: "class" });
+
   const styling = $derived(classes ?? { inner: innerClass });
 
   // Theme context
@@ -19,7 +19,7 @@
   const activeCls = $derived(cn("text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900", activeClass));
 
   // Create reactive context using getters
-  const reactivecCtx: BottomNavContextType = {
+  const reactiveCtx: BottomNavContextType = {
     get activeClass() {
       return activeCls;
     },
@@ -31,7 +31,7 @@
     }
   };
 
-  setBottomNavContext(reactivecCtx);
+  setBottomNavContext(reactiveCtx);
 
   const { base, inner } = $derived(bottomNav({ position, navType }));
 </script>

src/lib/bottom-navigation/BottomNavHeader.svelte

@@ -6,9 +6,8 @@
 
   let { children, class: className, classes, outerClass, innerClass, ...restProps }: BottomNavHeaderProps = $props();
 
-  $effect(() => {
-    warnThemeDeprecation("BottomNavHeader", { innerClass, outerClass }, { innerClass: "inner", outerClass: "class" });
-  });
+  // svelte-ignore state_referenced_locally
+  warnThemeDeprecation("BottomNavHeader", { innerClass, outerClass }, { innerClass: "inner", outerClass: "class" });
 
   const styling = $derived(classes ?? { innerDiv: innerClass });
 

src/lib/bottom-navigation/BottomNavItem.svelte

@@ -8,9 +8,9 @@
 
   let { children, btnName, appBtnPosition = "middle", activeClass, class: className, classes, btnClass, spanClass, active: manualActive, ...restProps }: BottomNavItemProps = $props();
 
-  $effect(() => {
-    warnThemeDeprecation("BottomNavItem", { spanClass, btnClass }, { spanClass: "span", btnClass: "class" });
-  });
+  // svelte-ignore state_referenced_locally
+  warnThemeDeprecation("BottomNavItem", { spanClass, btnClass }, { spanClass: "span", btnClass: "class" });
+
   const styling = $derived(classes ?? { span: spanClass });
 
   // Theme context

src/lib/breadcrumb/Breadcrumb.svelte

@@ -6,9 +6,9 @@
 
   let { children, solid = false, class: className, classes, olClass, ariaLabel = "Breadcrumb", ...restProps }: BreadcrumbProps = $props();
 
-  $effect(() => {
-    warnThemeDeprecation("Breadcrumb", { olClass }, { olClass: "list" });
-  });
+  // svelte-ignore state_referenced_locally
+  warnThemeDeprecation("Breadcrumb", { olClass }, { olClass: "list" });
+
   const styling = $derived(classes ?? { list: olClass });
 
   const theme = getTheme("breadcrumb");

src/lib/button-group/ButtonGroup.svelte

@@ -13,7 +13,7 @@
 
   // Create a reactive context object
   // The object itself stays the same, but its properties are reactive
-  const reactivecCtx = {
+  const reactiveCtx = {
     get size() {
       return size;
     },
@@ -22,7 +22,7 @@
     }
   };
 
-  setButtonGroupContext(reactivecCtx);
+  setButtonGroupContext(reactiveCtx);
 </script>
 
 <div {...restProps} class={groupClass} role="group">

src/lib/card/Card.svelte

@@ -6,9 +6,8 @@
 
   let { children, color = "gray", horizontal = false, shadow = "md", reverse = false, img, size = "sm", class: className, classes, imgClass, ...restProps }: CardProps = $props();
 
-  $effect(() => {
-    warnThemeDeprecation("Card", { imgClass }, { imgClass: "image" });
-  });
+  // svelte-ignore state_referenced_locally
+  warnThemeDeprecation("Card", { imgClass }, { imgClass: "image" });
 
   const styling = $derived(classes ?? { image: imgClass });