flowbite-svelte 1.29.1 → 1.30.1

package/dist/step-indicator/StepIndicator.svelte.d.ts

@@ -2,20 +2,22 @@ import type { StepIndicatorProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1574)
+ * [StepIndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1632)
  * ## Props
  * @prop steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"]
- * @prop currentStep = 1
- * @prop size = "md"
- * @prop color = "primary"
+ * @prop currentStep = $bindable(1)
+ * @prop size = $bindable("md")
+ * @prop color = $bindable("primary")
  * @prop glow = false
  * @prop hideLabel = false
+ * @prop clickable = true
  * @prop completedCustom = ""
  * @prop currentCustom = ""
+ * @prop onStepClick
  * @prop class: className
  * @prop classes
  * @prop ...restProps
  */
-declare const StepIndicator: import("svelte").Component<StepIndicatorProps, {}, "">;
+declare const StepIndicator: import("svelte").Component<StepIndicatorProps, {}, "color" | "size" | "currentStep">;
 type StepIndicator = ReturnType<typeof StepIndicator>;
 export default StepIndicator;

package/dist/stepper/BreadcrumbStepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import DoubleArrowIcon from "./DoubleArrowIcon.svelte";
   import { breadcrumbStepper } from "./theme";
@@ -17,8 +16,6 @@
 
   const theme = getTheme("breadcrumbStepper");
 
-  setContext("stepperType", "breadcrumb");
-
   const { base, item, indicator } = $derived(breadcrumbStepper());
 
   // Handle step click
@@ -137,7 +134,7 @@ The `current` prop is 1-based:
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1669)
+[BreadcrumbStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1729)
 ## Props
 @prop steps = []
 @prop class: className

package/dist/stepper/BreadcrumbStepper.svelte.d.ts

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

package/dist/stepper/CheckmarkIcon.svelte

@@ -55,10 +55,10 @@
   };
 
   // Select the appropriate props based on the variant
-  const iconProps = variant === "simple" ? simpleIconProps : variant === "tick" ? polylineIconProps : defaultIconProps;
+  const iconProps = $derived(variant === "simple" ? simpleIconProps : variant === "tick" ? polylineIconProps : defaultIconProps);
 
   // Determine the base class for the SVG
-  const baseClass = className || (variant !== "default" ? "h-4 w-4" : "me-2.5 h-3.5 w-3.5 sm:h-4 sm:w-4");
+  const baseClass = $derived(className || (variant !== "default" ? "h-4 w-4" : "me-2.5 h-3.5 w-3.5 sm:h-4 sm:w-4"));
 </script>
 
 <svg

package/dist/stepper/DetailedStepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import { detailedStepper } from "./theme";
   import type { DetailedStepperProps } from "../types";
@@ -16,8 +15,6 @@
 
   const theme = getTheme("detailedStepper");
 
-  setContext("stepperType", "detailed");
-
   // Override the theme to make current step also highlighted
   const stepperTheme = $derived(() => {
     const baseTheme = detailedStepper();
@@ -145,7 +142,7 @@ The `current` prop is 1-based:
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1632)
+[DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1692)
 ## Props
 @prop steps = []
 @prop contentClass

package/dist/stepper/DetailedStepper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DetailedStepperProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1632)
+ * [DetailedStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1692)
  * ## Props
  * @prop steps = []
  * @prop contentClass

package/dist/stepper/ProgressStepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import { progressStepper } from "./theme";
   import type { ProgressStepperProps } from "../types";
@@ -34,8 +33,6 @@
 
   const theme = getTheme("progressStepper");
 
-  setContext("stepperType", "progress");
-
   const { base, item, circle, line, progressLine } = $derived(progressStepper());
 
   // Handle step click
@@ -152,7 +149,7 @@ The `current` prop is 1-based:
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1614)
+[ProgressStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1674)
 ## Props
 @prop steps = []
 @prop class: className

package/dist/stepper/ProgressStepper.svelte.d.ts

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

package/dist/stepper/Stepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import type { StepStatus, Step } from "../types";
   import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import { stepper } from "./theme";
@@ -17,8 +16,6 @@
 
   const theme = getTheme("stepper");
 
-  setContext("stepperType", "stepper");
-
   const { base, item, content } = $derived(stepper());
 
   // Handle step click
@@ -109,7 +106,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
+[StepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1658)
 ## Props
 @prop steps = []
 @prop class: className

package/dist/stepper/Stepper.svelte.d.ts

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

package/dist/stepper/TimelineStepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import type { StepStatus, TimelineStep } from "../types";
   import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import ProfileCardIcon from "./ProfileCardIcon.svelte";
@@ -18,8 +17,6 @@
 
   const theme = getTheme("timelineStepper");
 
-  setContext("stepperType", "timeline");
-
   const { base, item, circle } = $derived(timelineStepper());
 
   // Handle step click
@@ -111,7 +108,7 @@ The `current` prop is 1-based:
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1687)
+[TimelineStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1747)
 ## Props
 @prop steps = []
 @prop class: className

package/dist/stepper/TimelineStepper.svelte.d.ts

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

package/dist/stepper/VerticalStepper.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { setContext } from "svelte";
   import type { StepStatus, Step } from "../types";
   import CheckmarkIcon from "./CheckmarkIcon.svelte";
   import { verticalStepper } from "./theme";
@@ -17,8 +16,6 @@
 
   const theme = getTheme("verticalStepper");
 
-  setContext("stepperType", "vertical");
-
   const { base, card, content } = $derived(verticalStepper());
 
   // Handle step click
@@ -111,7 +108,7 @@ The `current` prop is 1-based:
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1650)
+[VerticalStepperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1710)
 ## Props
 @prop steps = []
 @prop liClass

package/dist/stepper/VerticalStepper.svelte.d.ts

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

package/dist/table/Table.svelte

@@ -1,15 +1,21 @@
 <script lang="ts">
-  import { setContext } from "svelte";
+  import { setTableContext } from "../context";
   import { table as tableCls } from "./theme";
   import TableHead from "./TableHead.svelte";
   import TableBody from "./TableBody.svelte";
   import clsx from "clsx";
-  import type { TableProps, TableCtxType } from "../types";
+  import type { TableProps, TableContextType } from "../types";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, footerSlot, captionSlot, items, divClass, striped, hoverable, border = true, shadow, color = "default", class: className, classes, ...restProps }: TableProps = $props();
 
-  warnThemeDeprecation("Table", { divClass }, { divClass: "div" });
+  warnThemeDeprecation(
+    "Table",
+    untrack(() => ({ divClass })),
+    { divClass: "div" }
+  );
+
   const styling = $derived(
     classes ?? {
       div: divClass
@@ -19,7 +25,7 @@
 
   const { div, table } = $derived(tableCls({ color, shadow }));
 
-  let tableCtx: TableCtxType = {
+  let tableCtx: TableContextType = {
     get striped() {
       return striped;
     },
@@ -34,7 +40,7 @@
     }
   };
 
-  setContext("tableCtx", tableCtx);
+  setTableContext(tableCtx);
   let headItems = $derived(items && items.length > 0 ? Object.keys(items[0]).map((key) => ({ text: key.charAt(0).toUpperCase() + key.slice(1) })) : []);
 
   let bodyItems = $derived(items && items.length > 0 ? items.map((item) => Object.values(item)) : []);
@@ -61,7 +67,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1722)
+[TableProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1782)
 ## Props
 @prop children
 @prop footerSlot

package/dist/table/Table.svelte.d.ts

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

package/dist/table/TableBody.svelte

@@ -33,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1754)
+[TableBodyProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1814)
 ## Props
 @prop children
 @prop bodyItems

package/dist/table/TableBody.svelte.d.ts

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

package/dist/table/TableBodyCell.svelte

@@ -25,7 +25,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1743)
+[TableBodyCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1803)
 ## Props
 @prop children
 @prop class: className

package/dist/table/TableBodyCell.svelte.d.ts

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

package/dist/table/TableBodyRow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getTableContext } from "../context";
   import { tableBodyRow } from "./theme";
-  import type { TableBodyRowProps, TableCtxType } from "../types";
+  import type { TableBodyRowProps } from "../types";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -9,12 +9,12 @@
 
   const theme = getTheme("tableBodyRow");
 
-  const tableCtx = getContext<TableCtxType>("tableCtx");
+  const tableCtx = getTableContext();
   // for reactivity with svelte context
-  let compoColor = $derived(color || tableCtx.color || "default");
-  let compoHoverable = $derived(hoverable || tableCtx.hoverable || false);
-  let compoStriped = $derived(striped || tableCtx.striped || false);
-  let compoBorder = $derived(border || tableCtx.border || false);
+  let compoColor = $derived(color || tableCtx?.color || "default");
+  let compoHoverable = $derived(hoverable || tableCtx?.hoverable || false);
+  let compoStriped = $derived(striped || tableCtx?.striped || false);
+  let compoBorder = $derived(border || tableCtx?.border || false);
 
   const base = $derived(tableBodyRow({ color: compoColor, hoverable: compoHoverable, striped: compoStriped, border: compoBorder, class: clsx(theme, className) }));
 </script>
@@ -29,7 +29,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1735)
+[TableBodyRowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1795)
 ## Props
 @prop children
 @prop class: className

package/dist/table/TableBodyRow.svelte.d.ts

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

package/dist/table/TableHead.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getTableContext } from "../context";
   import TableHeadCell from "./TableHeadCell.svelte";
   import { tableHead } from "./theme";
-  import type { TableHeadProps, TableCtxType, HeadItemType } from "../types";
+  import type { TableHeadProps, HeadItemType } from "../types";
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
@@ -10,11 +10,11 @@
 
   const theme = getTheme("tableHead");
 
-  const tableCtx = getContext<TableCtxType>("tableCtx");
+  const tableCtx = getTableContext();
   // for reactivity with svelte context
-  let compoColor = $derived(color ? color : tableCtx.color || "default");
-  let compoStriped = $derived(striped ? striped : tableCtx.striped || false);
-  let compoBorder = $derived(border ? border : tableCtx.border || false);
+  let compoColor = $derived(color ? color : tableCtx?.color || "default");
+  let compoStriped = $derived(striped ? striped : tableCtx?.striped || false);
+  let compoBorder = $derived(border ? border : tableCtx?.border || false);
 
   const base = $derived(tableHead({ color: compoColor, border: compoBorder, striped: compoStriped, class: clsx(theme, className) }));
 
@@ -53,7 +53,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1710)
+[TableHeadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1770)
 ## Props
 @prop children
 @prop headerSlot

package/dist/table/TableHead.svelte.d.ts

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

package/dist/table/TableHeadCell.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableHeadCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1759)
+[TableHeadCellProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1819)
 ## Props
 @prop children
 @prop class: className

package/dist/table/TableHeadCell.svelte.d.ts

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

package/dist/table/TableSearch.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { setContext } from "svelte";
-  import type { TableSearchProps, TableSearchType } from "../types";
+  import { setTableContext } from "../context";
+  import type { TableSearchProps, TableContextType } from "../types";
   import clsx from "clsx";
   import { tableSearch } from "./theme";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -29,9 +30,10 @@
 
   warnThemeDeprecation(
     "TableSearch",
-    { divClass, innerDivClass, inputClass, searchClass, svgDivClass, svgClass, tableClass },
+    untrack(() => ({ divClass, innerDivClass, inputClass, searchClass, svgDivClass, svgClass, tableClass })),
     { divClass: "root", innerDivClass: "inner", inputClass: "input", searchClass: "search", svgDivClass: "svgDiv", svgClass: "svg", tableClass: "table" }
   );
+
   const styling = $derived(
     classes ?? {
       root: divClass,
@@ -46,8 +48,7 @@
 
   const theme = getTheme("tableSearch");
 
-  // Generate theme styles - handle custom color case
-  const themeColor = color === "custom" ? "default" : (color as "default" | "blue" | "green" | "red" | "yellow" | "purple" | "indigo" | "pink");
+  const themeColor = $derived(color === "custom" ? "default" : (color as "default" | "blue" | "green" | "red" | "yellow" | "purple" | "indigo" | "pink"));
 
   const { root, inner, search, svgDiv, svg, input, table } = $derived(tableSearch({ color: themeColor, striped, hoverable }));
 
@@ -56,13 +57,15 @@
   // Handle custom color
   const finalTableClass = $derived(color === "custom" && customColor ? clsx(tableCls, customColor) : tableCls);
 
-  const tableSearchCtx: TableSearchType = {
+  const tableSearchCtx = $derived<TableContextType>({
     striped,
     hoverable,
-    color
-  };
+    color: themeColor
+  });
 
-  setContext("tableCtx", tableSearchCtx);
+  $effect(() => {
+    setTableContext(tableSearchCtx);
+  });
 </script>
 
 <div class={root({ class: clsx(theme?.root, styling.root) })}>
@@ -94,7 +97,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1774)
+[TableSearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1834)
 ## Props
 @prop children
 @prop header

package/dist/table/TableSearch.svelte.d.ts

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

package/dist/tabs/TabItem.svelte

@@ -3,24 +3,30 @@
   import { getTheme } from "../theme/themeUtils";
   import { useSingleSelection } from "../utils/singleselection.svelte";
   import clsx from "clsx";
-  import { getContext } from "svelte";
   import { tabItem, tabs } from "./theme";
+  import { getTabsContext } from "../context";
 
   let { children, titleSlot, open = $bindable(false), title = "Tab title", key, activeClass, inactiveClass, class: className, classes, disabled, tabStyle, ...restProps }: TabitemProps = $props();
 
   const theme = getTheme("tabItem");
-  const activeClasses = getContext<string>("activeClasses");
-  const ctx: TabCtxType = getContext("ctx");
+  const tabsCtx = getTabsContext();
+
+  if (!tabsCtx) {
+    throw new Error("TabItem must be used within a Tabs component");
+  }
+
+  const activeClasses = tabsCtx.activeClasses;
+  const ctx: TabCtxType = tabsCtx.ctx;
 
   const compoTabStyle = $derived(tabStyle ?? ctx.tabStyle ?? "full");
   const { active, inactive } = $derived(tabs({ tabStyle: compoTabStyle, hasDivider: true }));
 
   const tabId = $props.id();
-  const tabIdentifier = key ?? tabId;
-  const self: SelectedTab = { id: tabIdentifier, snippet: children };
+  const tabIdentifier = $derived(key ?? tabId);
+  const self = $derived<SelectedTab>({ id: tabIdentifier, snippet: children });
 
-  const registerTab = getContext<(tab: SelectedTab) => void>("registerTab");
-  const unregisterTab = getContext<(tabId: string) => void>("unregisterTab");
+  const registerTab = tabsCtx.registerTab;
+  const unregisterTab = tabsCtx.unregisterTab;
 
   const updateSingleSelection = useSingleSelection<SelectedTab>((value) => (open = value?.id === self.id));
 
@@ -63,7 +69,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1803)
+[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1863)
 ## Props
 @prop children
 @prop titleSlot

package/dist/tabs/TabItem.svelte.d.ts

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