flowbite-svelte 1.30.0 → 1.31.0

package/dist/skeleton/TextPlaceholder.svelte

@@ -6,7 +6,7 @@
 
   let { size = "sm", class: className, classes, ...restProps }: TextPlaceholderProps = $props();
 
-  const theme = getTheme("textPlaceholder");
+  const theme = $derived(getTheme("textPlaceholder"));
 
   const { base, div, lineA, lineB } = $derived(
     textPlaceholder({

package/dist/skeleton/VideoPlaceholder.svelte

@@ -6,7 +6,7 @@
 
   let { size = "sm", class: className }: VideoPlaceholderProps = $props();
 
-  const theme = getTheme("videoPlaceholder");
+  const theme = $derived(getTheme("videoPlaceholder"));
 
   const base = $derived(videoPlaceholder({ size, class: clsx(theme, className) }));
 </script>

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -6,7 +6,7 @@
 
   let { class: className, classes }: WidgetPlaceholderProps = $props();
 
-  const theme = getTheme("widgetPlaceholder");
+  const theme = $derived(getTheme("widgetPlaceholder"));
 
   const { base, wrapper, vLine, hLine } = widgetPlaceholder({});
 </script>

package/dist/speed-dial/SpeedDial.svelte

@@ -2,7 +2,7 @@
   import clsx from "clsx";
   import Popper from "../utils/Popper.svelte";
   import { getSideAxis } from "@floating-ui/utils";
-  import { setContext } from "svelte";
+  import { setContext, untrack } from "svelte";
   import { speedDial } from "./theme";
   import type { SpeedDialProps, SpeedCtxType } from "../types";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
@@ -21,8 +21,11 @@
     ...restProps
   }: SpeedDialProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("SpeedDial", { popperClass }, { popperClass: "popper" });
+  warnThemeDeprecation(
+    "SpeedDial",
+    untrack(() => ({ popperClass })),
+    { popperClass: "popper" }
+  );
 
   const styling = $derived(
     classes ?? {
@@ -30,7 +33,7 @@
     }
   );
 
-  const theme = getTheme("speedDial");
+  const theme = $derived(getTheme("speedDial"));
 
   $effect(() => {
     setContext<SpeedCtxType>("speed-dial", { pill, tooltip, textOutside });

package/dist/speed-dial/SpeedDialButton.svelte

@@ -2,7 +2,7 @@
   import Button from "../buttons/Button.svelte";
   import Tooltip from "../tooltip/Tooltip.svelte";
   import type { Placement } from "@floating-ui/dom";
-  import { getContext } from "svelte";
+  import { getContext, untrack } from "svelte";
   import { speedDialButton } from "./theme";
   import type { SpeedCtxType, SpeedDialButtonProps } from "../types";
   import clsx from "clsx";
@@ -23,8 +23,11 @@
     ...restProps
   }: SpeedDialButtonProps = $props();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("SpeedDialButton", { textClass }, { textClass: "span" });
+  warnThemeDeprecation(
+    "SpeedDialButton",
+    untrack(() => ({ textClass })),
+    { textClass: "span" }
+  );
 
   const styling = $derived(
     classes ?? {
@@ -34,7 +37,7 @@
 
   let tooltip = $derived<Placement | "none">(_tooltip ?? context.tooltip);
 
-  const theme = getTheme("speedDialButton");
+  const theme = $derived(getTheme("speedDialButton"));
 
   let { base, span } = $derived(speedDialButton({ textOutside, noTooltip: tooltip === "none" }));
   let spanCls = $derived(tooltip === "none" || textOutside ? span({ class: clsx(theme?.span, styling.span) }) : "sr-only");

package/dist/spinner/Spinner.svelte

@@ -6,7 +6,7 @@
 
   let { type = "default", color = "primary", size = "8", class: className, currentFill = "inherit", currentColor = "currentColor", ...restProps }: SpinnerProps = $props();
 
-  const theme = getTheme("spinner");
+  const theme = $derived(getTheme("spinner"));
   let spinnerClass = $derived(spinner({ type, color, size, class: clsx(theme, className) }));
 </script>
 

package/dist/split-pane/Divider.svelte

@@ -7,8 +7,8 @@
 
   let { direction, index, onMouseDown, onTouchStart, onKeyDown, isDragging, currentSize, class: className = "" }: DividerProps = $props();
 
-  const themePane = getTheme("divider");
-  const themeDividerHitArea = getTheme("dividerHitArea");
+  const themeDivider = $derived(getTheme("divider"));
+  const themeDividerHitArea = $derived(getTheme("dividerHitArea"));
 
   const isHorizontal = $derived(direction === "horizontal");
   const roundedSize = $derived(Math.round(currentSize));
@@ -25,7 +25,7 @@
   aria-valuemin="0"
   aria-valuemax="100"
   aria-valuetext={`${roundedSize} percent`}
-  class={divider({ direction, isDragging, class: clsx(themePane, className) })}
+  class={divider({ direction, isDragging, class: clsx(themeDivider, className) })}
   onmousedown={(e) => onMouseDown(e, index)}
   use:nonPassiveTouch={(e) => onTouchStart(e, index)}
   onkeydown={(e) => onKeyDown(e, index)}
@@ -37,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2258)
+[DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2259)
 ## Props
 @prop direction
 @prop index

package/dist/split-pane/Divider.svelte.d.ts

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

package/dist/split-pane/Pane.svelte

@@ -8,7 +8,7 @@
 
   let { children, class: className = "", style = "" }: PaneProps = $props();
 
-  const theme = getTheme("pane");
+  const theme = $derived(getTheme("pane"));
 
   const context = getSplitPaneContext();
   const paneIndex = context ? context.registerPane() : 0;
@@ -47,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2252)
+[PaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2253)
 ## Props
 @prop children
 @prop class: className = ""

package/dist/split-pane/Pane.svelte.d.ts

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

package/dist/split-pane/SplitPane.svelte

@@ -40,7 +40,7 @@
       transition = transitionProp;
     }
   });
-  const theme = getTheme("splitpane");
+  const theme = $derived(getTheme("splitpane"));
 
   let isDragging = $state(false);
   let startPos = $state(0);
@@ -385,7 +385,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2238)
+[SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2239)
 ## Props
 @prop direction = "horizontal"
 @prop minSize = 100

package/dist/split-pane/SplitPane.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SplitPaneProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2238)
+ * [SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2239)
  * ## Props
  * @prop direction = "horizontal"
  * @prop minSize = 100

package/dist/step-indicator/StepIndicator.svelte

@@ -20,7 +20,7 @@
     ...restProps
   }: StepIndicatorProps = $props();
 
-  const theme = getTheme("stepIndicator");
+  const theme = $derived(getTheme("stepIndicator"));
 
   const { base, label, container, wrapper, step: stepCls, glow: stepGlow, incomplete } = $derived(stepIndicator({ size, color, glow, hideLabel }));
 

package/dist/stepper/BreadcrumbStepper.svelte

@@ -14,7 +14,7 @@
     if (current > steps.length && steps.length > 0) current = steps.length;
   });
 
-  const theme = getTheme("breadcrumbStepper");
+  const theme = $derived(getTheme("breadcrumbStepper"));
 
   const { base, item, indicator } = $derived(breadcrumbStepper());
 

package/dist/stepper/DetailedStepper.svelte

@@ -13,7 +13,7 @@
     if (current > steps.length && steps.length > 0) current = steps.length;
   });
 
-  const theme = getTheme("detailedStepper");
+  const theme = $derived(getTheme("detailedStepper"));
 
   // Override the theme to make current step also highlighted
   const stepperTheme = $derived(() => {

package/dist/stepper/ProgressStepper.svelte

@@ -31,7 +31,7 @@
     }
   });
 
-  const theme = getTheme("progressStepper");
+  const theme = $derived(getTheme("progressStepper"));
 
   const { base, item, circle, line, progressLine } = $derived(progressStepper());
 

package/dist/stepper/Stepper.svelte

@@ -14,7 +14,7 @@
     if (current > steps.length && steps.length > 0) current = steps.length;
   });
 
-  const theme = getTheme("stepper");
+  const theme = $derived(getTheme("stepper"));
 
   const { base, item, content } = $derived(stepper());
 

package/dist/stepper/TimelineStepper.svelte

@@ -15,7 +15,7 @@
     if (current > steps.length && steps.length > 0) current = steps.length;
   });
 
-  const theme = getTheme("timelineStepper");
+  const theme = $derived(getTheme("timelineStepper"));
 
   const { base, item, circle } = $derived(timelineStepper());
 

package/dist/stepper/VerticalStepper.svelte

@@ -14,7 +14,7 @@
     if (current > steps.length && steps.length > 0) current = steps.length;
   });
 
-  const theme = getTheme("verticalStepper");
+  const theme = $derived(getTheme("verticalStepper"));
 
   const { base, card, content } = $derived(verticalStepper());
 

package/dist/table/Table.svelte

@@ -6,18 +6,22 @@
   import clsx from "clsx";
   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();
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Table", { divClass }, { divClass: "div" });
+  warnThemeDeprecation(
+    "Table",
+    untrack(() => ({ divClass })),
+    { divClass: "div" }
+  );
 
   const styling = $derived(
     classes ?? {
       div: divClass
     }
   );
-  const theme = getTheme("table");
+  const theme = $derived(getTheme("table"));
 
   const { div, table } = $derived(tableCls({ color, shadow }));
 

package/dist/table/TableBodyCell.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, colspan, onclick, ...restProps }: TableBodyCellProps = $props();
 
-  const theme = getTheme("tableBodyCell");
+  const theme = $derived(getTheme("tableBodyCell"));
 </script>
 
 <td {...restProps} class={tableBodyCell({ class: clsx(theme, className) })} colspan={colspan ?? 1}>

package/dist/table/TableBodyRow.svelte

@@ -7,7 +7,7 @@
 
   let { children, class: className, color, striped, hoverable, border, ...restProps }: TableBodyRowProps = $props();
 
-  const theme = getTheme("tableBodyRow");
+  const theme = $derived(getTheme("tableBodyRow"));
 
   const tableCtx = getTableContext();
   // for reactivity with svelte context

package/dist/table/TableHead.svelte

@@ -8,7 +8,7 @@
 
   let { children, headerSlot, color, striped, border, class: className, headItems, defaultRow = true, ...restProps }: TableHeadProps = $props();
 
-  const theme = getTheme("tableHead");
+  const theme = $derived(getTheme("tableHead"));
 
   const tableCtx = getTableContext();
   // for reactivity with svelte context

package/dist/table/TableHeadCell.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: TableHeadCellProps = $props();
 
-  const theme = getTheme("tableHeadCell");
+  const theme = $derived(getTheme("tableHeadCell"));
 </script>
 
 <th {...restProps} class={tableHeadCell({ class: clsx(theme, className) })}>

package/dist/table/TableSearch.svelte

@@ -4,6 +4,7 @@
   import clsx from "clsx";
   import { tableSearch } from "./theme";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let {
     children,
@@ -27,10 +28,9 @@
     ...restProps
   }: TableSearchProps = $props();
 
-  // svelte-ignore state_referenced_locally
   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" }
   );
 
@@ -46,7 +46,7 @@
     }
   );
 
-  const theme = getTheme("tableSearch");
+  const theme = $derived(getTheme("tableSearch"));
 
   const themeColor = $derived(color === "custom" ? "default" : (color as "default" | "blue" | "green" | "red" | "yellow" | "purple" | "indigo" | "pink"));
 

package/dist/tabs/TabItem.svelte

@@ -8,7 +8,7 @@
 
   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 theme = $derived(getTheme("tabItem"));
   const tabsCtx = getTabsContext();
 
   if (!tabsCtx) {

package/dist/tabs/Tabs.svelte

@@ -5,15 +5,19 @@
   import clsx from "clsx";
   import { tabs } from "./theme";
   import { setTabsContext } from "../context";
+  import { untrack } from "svelte";
 
   let { children, selected = $bindable(), tabStyle = "none", ulClass, contentClass, divider = true, class: className, classes, ...restProps }: TabsProps = $props();
 
   const activeClasses = $derived(typeof classes?.active === "string" ? classes.active : undefined);
 
-  // svelte-ignore state_referenced_locally
-  warnThemeDeprecation("Tabs", { ulClass, contentClass }, { ulClass: "class", contentClass: "content" });
+  warnThemeDeprecation(
+    "Tabs",
+    untrack(() => ({ ulClass, contentClass })),
+    { ulClass: "class", contentClass: "content" }
+  );
 
-  const theme = getTheme("tabs");
+  const theme = $derived(getTheme("tabs"));
   const styling = $derived(classes ?? { content: contentClass });
   const { base, content, divider: dividerClass } = $derived(tabs({ tabStyle, hasDivider: divider }));
 

package/dist/theme/ThemeProvider.svelte

@@ -10,13 +10,18 @@
 
   let { children, theme }: ThemeProviderProps = $props();
 
-  $effect(() => {
-    if (theme) {
-      setThemeContext(theme);
-    } else {
-      console.log("ThemeProvider: No theme provided");
+  // Create a stable object with a reactive getter that will be tracked
+  // when accessed inside $derived expressions in child components
+  const themeContext: { value?: ThemeConfig } = {
+    get value() {
+      // This getter makes the theme reactive - when accessed in a $derived,
+      // it will track the theme prop and update when it changes
+      return theme;
     }
-  });
+  };
+
+  // Set the context once with the stable object
+  setThemeContext(themeContext);
 </script>
 
 {@render children()}

package/dist/theme/themeUtils.js

@@ -1,8 +1,10 @@
 import { getThemeContext } from "../context";
 import { DEV } from "esm-env";
 export function getTheme(componentKey) {
-    const theme = getThemeContext();
-    return theme?.[componentKey];
+    const themeState = getThemeContext();
+    const theme = themeState && "value" in themeState ? themeState.value : themeState;
+    const finalTheme = theme;
+    return finalTheme?.[componentKey];
 }
 /**
  * Warns about deprecated theme-related props and suggests modern alternatives.

package/dist/timeline/Activity.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: ActivityProps = $props();
 
-  const theme = getTheme("activity");
+  const theme = $derived(getTheme("activity"));
 </script>
 
 <ol {...restProps} class={activity({ class: clsx(theme, className) })}>

package/dist/timeline/ActivityItem.svelte

@@ -3,13 +3,13 @@
   import type { ActivityItemProps } from "../types";
   import clsx from "clsx";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { activities, liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass, class: className, classes, ...restProps }: ActivityItemProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "ActivityItem",
-    { liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass },
+    untrack(() => ({ liClass, spanClass, imgClass, outerDivClass, innerDivClass, timeClass, titleClass, textClass })),
     {
       liClass: "class",
       spanClass: "span",
@@ -34,7 +34,7 @@
     }
   );
 
-  const theme = getTheme("activityItem");
+  const theme = $derived(getTheme("activityItem"));
 
   const { li, span, img, outer, inner, time, title, text } = $derived(activityItem());
 </script>

package/dist/timeline/Group.svelte

@@ -3,13 +3,13 @@
   import type { GroupProps } from "../types";
   import clsx from "clsx";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { children, divClass, timeClass, date, olClass, class: className, classes, ...restProps }: GroupProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "Group",
-    { divClass, timeClass, olClass },
+    untrack(() => ({ divClass, timeClass, olClass })),
     {
       divClass: "class",
       timeClass: "time",
@@ -22,7 +22,7 @@
     ol: olClass
   });
 
-  const theme = getTheme("group");
+  const theme = $derived(getTheme("group"));
 
   const { div, time, ol } = $derived(group());
 </script>

package/dist/timeline/GroupItem.svelte

@@ -3,13 +3,13 @@
   import type { GroupItemProps } from "../types";
   import clsx from "clsx";
   import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
 
   let { timelines, aClass, imgClass, divClass, titleClass, spanClass, class: className, classes, ...restProps }: GroupItemProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "GroupItem",
-    { aClass, imgClass, divClass, titleClass, spanClass },
+    untrack(() => ({ aClass, imgClass, divClass, titleClass, spanClass })),
     {
       aClass: "class",
       imgClass: "img",
@@ -28,7 +28,7 @@
       a: aClass
     }
   );
-  const theme = getTheme("groupItem");
+  const theme = $derived(getTheme("groupItem"));
 
   const { base, a, img, div, title, span, svg } = $derived(groupItem());
 </script>

package/dist/timeline/Timeline.svelte

@@ -7,11 +7,9 @@
 
   let { children, order = "default", class: className, ...restProps }: TimelineProps = $props();
 
-  const theme = getTheme("timeline");
-
-  $effect(() => {
-    setContext<TimelineVariants["order"]>("order", order);
-  });
+  const theme = $derived(getTheme("timeline"));
+  // svelte-ignore state_referenced_locally
+  setContext<TimelineVariants["order"]>("order", order);
   const olCls = $derived(timeline({ order, class: clsx(theme, className) }));
 </script>
 

package/dist/timeline/TimelineItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getContext, untrack } from "svelte";
   import { timelineItem, type TimelineVariants } from "./theme";
   import type { TimelineItemProps, DateFormat } from "../types";
   import clsx from "clsx";
@@ -15,6 +15,7 @@
     isLast = false,
     svgClass,
     liClass,
+    defaultDivClass,
     divClass,
     timeClass,
     h3Class,
@@ -25,10 +26,9 @@
     ...restProps
   }: TimelineItemProps = $props();
 
-  // svelte-ignore state_referenced_locally
   warnThemeDeprecation(
     "TimelineItem",
-    { svgClass, liClass, divClass, timeClass, h3Class, connectorClass },
+    untrack(() => ({ svgClass, liClass, divClass, timeClass, h3Class, connectorClass })),
     {
       liClass: "class",
       svgClass: "svg",
@@ -47,10 +47,12 @@
     connector: connectorClass
   });
 
-  const theme = getTheme("timelineItem");
+  const theme = $derived(getTheme("timelineItem"));
   let order = getContext<TimelineVariants["order"]>("order");
 
-  const { base, div, time, h3, svg, connector } = $derived(timelineItem({ order, color, isLast }));
+  const { base, div, defaultDiv, time, h3, svg, connector } = $derived(timelineItem({ order, color, isLast }));
+
+  const defaultDivCls = $derived(defaultDivClass ? defaultDivClass : defaultDiv());
 
   function formatDisplayDate(dateStr: string, format: DateFormat) {
     const date = new Date(dateStr);
@@ -102,6 +104,7 @@
       </div>
     {/if}
   {:else if date}
+    <div class={defaultDivCls} aria-hidden="true"></div>
     <time datetime={date} class={time({ class: clsx(theme?.time, styling.time) })}>
       {datePrefix}
       {formatDisplayDate(date, dateFormat)}
@@ -141,6 +144,7 @@
 @prop isLast = false
 @prop svgClass
 @prop liClass
+@prop defaultDivClass
 @prop divClass
 @prop timeClass
 @prop h3Class

package/dist/timeline/TimelineItem.svelte.d.ts

@@ -13,6 +13,7 @@ import type { TimelineItemProps } from "../types";
  * @prop isLast = false
  * @prop svgClass
  * @prop liClass
+ * @prop defaultDivClass
  * @prop divClass
  * @prop timeClass
  * @prop h3Class

package/dist/timeline/theme.d.ts

@@ -247,6 +247,7 @@ export declare const timelineItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     div: string;
+    defaultDiv: string;
     time: string;
     h3: string;
     svg: string;
@@ -302,6 +303,7 @@ export declare const timelineItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     div: string;
+    defaultDiv: string;
     time: string;
     h3: string;
     svg: string;
@@ -357,6 +359,7 @@ export declare const timelineItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     div: string;
+    defaultDiv: string;
     time: string;
     h3: string;
     svg: string;