flowbite-svelte 1.13.7 → 1.13.8

package/dist/typography/heading/Heading.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1887)
+[HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1889)
 ## Props
 @prop children
 @prop tag = "h1"

package/dist/typography/heading/Heading.svelte.d.ts

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

package/dist/typography/hr/Hr.svelte

@@ -4,7 +4,7 @@
   import type { HrProps } from "../../types";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
 
-  let { children, divClass, innerDivClass, class: className, classes, ...restProps }: HrProps = $props();
+  let { children, divClass, innerDivClass, class: className, classes, divProps = {}, hrProps = {}, ...restProps }: HrProps = $props();
 
   // base container content
   warnThemeDeprecation(
@@ -21,19 +21,24 @@
   });
 
   const theme = getTheme("hr");
+  const bg = classes?.bg ?? "bg-gray-200 dark:bg-gray-700";
+
+  // for backward compatibility and ...restPorps will be removed and use only ..divProps and ...hrProps in future
+  const mergedDivProps = { ...restProps, ...divProps };
+  const mergedHrProps = { ...restProps, ...hrProps };
 
   let { base, div, content } = $derived(hr({ withChildren: !!children }));
 </script>
 
 {#if children}
-  <div {...restProps} class={div({ class: clsx(theme?.div, divClass) })}>
-    <hr class={base({ class: clsx(theme?.base, className) })} />
+  <div {...mergedDivProps} class={div({ class: clsx(theme?.div, divClass) })}>
+    <hr {...mergedHrProps} class={base({ class: clsx(theme?.base, className, bg) })} />
     <div class={content({ class: clsx(theme?.content, styling.content) })}>
       {@render children()}
     </div>
   </div>
 {:else}
-  <hr class={base({ class: clsx(theme?.base, className) })} {...restProps} />
+  <hr {...mergedHrProps} class={base({ class: clsx(theme?.base, className, bg) })} />
 {/if}
 
 <!--

package/dist/typography/hr/theme.d.ts

@@ -12,6 +12,7 @@ export declare const hr: import("tailwind-variants").TVReturnType<{
     base: string;
     div: string;
     content: string;
+    bg: string;
 }, undefined, {
     withChildren: {
         true: {
@@ -23,6 +24,7 @@ export declare const hr: import("tailwind-variants").TVReturnType<{
     base: string;
     div: string;
     content: string;
+    bg: string;
 }, import("tailwind-variants").TVReturnType<{
     withChildren: {
         true: {
@@ -34,4 +36,5 @@ export declare const hr: import("tailwind-variants").TVReturnType<{
     base: string;
     div: string;
     content: string;
+    bg: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/typography/hr/theme.js

@@ -1,9 +1,10 @@
 import { tv } from "tailwind-variants";
 export const hr = tv({
     slots: {
-        base: "h-px my-8 bg-gray-200 border-0 dark:bg-gray-700",
+        base: "h-px my-8 border-0",
         div: "inline-flex items-center justify-center w-full",
-        content: "absolute px-4 -translate-x-1/2 rtl:translate-x-1/2 bg-white start-1/2 dark:bg-gray-900"
+        content: "absolute px-4 -translate-x-1/2 rtl:translate-x-1/2 bg-white start-1/2 dark:bg-gray-900",
+        bg: ""
     },
     variants: {
         withChildren: {

package/dist/typography/img/EnhancedImg.svelte

@@ -49,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1925)
+[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1929)
 ## Props
 @prop src
 @prop href

package/dist/typography/img/EnhancedImg.svelte.d.ts

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

package/dist/typography/img/Img.svelte

@@ -49,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1916)
+[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1920)
 ## Props
 @prop size = "none"
 @prop effect = "none"

package/dist/typography/img/Img.svelte.d.ts

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

package/dist/typography/layout/Layout.svelte

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

package/dist/typography/layout/Layout.svelte.d.ts

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

package/dist/typography/list/Li.svelte

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

package/dist/typography/list/Li.svelte.d.ts

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

package/dist/typography/list/List.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1943)
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1947)
 ## Props
 @prop children
 @prop tag = "ul"

package/dist/typography/list/List.svelte.d.ts

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

package/dist/typography/mark/Mark.svelte

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

package/dist/typography/mark/Mark.svelte.d.ts

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

package/dist/typography/paragraph/P.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1962)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1966)
 ## Props
 @prop children
 @prop class: className = "text-gray-900 dark:text-white"

package/dist/typography/paragraph/P.svelte.d.ts

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

package/dist/typography/secondary/Secondary.svelte

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

package/dist/typography/secondary/Secondary.svelte.d.ts

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

package/dist/typography/span/Span.svelte

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

package/dist/typography/span/Span.svelte.d.ts

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

package/dist/utils/Arrow.svelte

@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2017)
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2021)
 ## Props
 @prop placement = "top"
 @prop cords

package/dist/utils/Arrow.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ArrowProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2017)
+ * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2021)
  * ## Props
  * @prop placement = "top"
  * @prop cords

package/dist/utils/Popper.svelte

@@ -213,7 +213,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1997)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
 ## Props
 @prop triggeredBy
 @prop triggerDelay = 200

package/dist/utils/Popper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PopperProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1997)
+ * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
  * ## Props
  * @prop triggeredBy
  * @prop triggerDelay = 200

package/dist/utils/singleselection.svelte.d.ts

@@ -1,15 +1,15 @@
 /**
  * @template T
  * @param {boolean} [nonReactive=false] - use a non-reactive placeholder to allow multiple selection and keep context shallow
- * @returns {SingleSelectionContext<T>|null}
+ * @returns {SingleSelectionContext<T>}
  */
-export function createSingleSelectionContext<T>(nonReactive?: boolean): SingleSelectionContext<T> | null;
+export function createSingleSelectionContext<T>(nonReactive?: boolean): SingleSelectionContext<T>;
 /**
  * @template T
- * @param {(value: T) => void} callback
+ * @param {(value: T|null) => void} callback
  * @returns {(open: boolean, v?: T) => SingleSelectionContext<T>}
  */
-export function useSingleSelection<T>(callback: (value: T) => void): (open: boolean, v?: T) => SingleSelectionContext<T>;
+export function useSingleSelection<T>(callback: (value: T | null) => void): (open: boolean, v?: T) => SingleSelectionContext<T>;
 export type SingleSelectionContext<T> = {
-    value?: T | undefined;
+    value: T | null;
 };

package/dist/utils/singleselection.svelte.js

@@ -1,9 +1,9 @@
-import { getContext, setContext } from "svelte";
+import { getContext, setContext, untrack } from "svelte";
 
 /**
  * @template T
  * @typedef {Object} SingleSelectionContext
- * @property {T=} value
+ * @property {T|null} value
  */
 
 /** @type {symbol} */
@@ -12,11 +12,16 @@ const SINGLE_SELECTION_KEY = Symbol("singleton");
 /**
  * @template T
  * @param {boolean} [nonReactive=false] - use a non-reactive placeholder to allow multiple selection and keep context shallow
- * @returns {SingleSelectionContext<T>|null}
+ * @returns {SingleSelectionContext<T>}
  */
 export function createSingleSelectionContext(nonReactive = false) {
-  const context = $state({ value: undefined });
-  return setContext(SINGLE_SELECTION_KEY, nonReactive ? null : context);
+  if (nonReactive) {
+    const context = { value: null };
+    return setContext(SINGLE_SELECTION_KEY, context);
+  } else {
+    const context = $state({ value: null });
+    return setContext(SINGLE_SELECTION_KEY, context);
+  }
 }
 
 /**
@@ -27,22 +32,27 @@ export function createSingleSelectionContext(nonReactive = false) {
  * @returns {SingleSelectionContext<T>}
  */
 function setSelected(context, open, value) {
-  if (open) context.value = value;
-  else if (context.value === value) context.value = undefined;
+  if (open) context.value = value ?? null;
+  else if (context.value === value) context.value = null;
 
   return context;
 }
 
 /**
  * @template T
- * @param {(value: T) => void} callback
+ * @param {(value: T|null) => void} callback
  * @returns {(open: boolean, v?: T) => SingleSelectionContext<T>}
  */
 export function useSingleSelection(callback) {
   const context = getContext(SINGLE_SELECTION_KEY) ?? createSingleSelectionContext(false);
 
+  let initialized = $state(false);
   $effect(() => {
-    if (context.value !== undefined) callback(context.value);
+    if (initialized)
+      // if (context.value !== null)
+      callback(context.value);
+    initialized = true;
   });
-  return (open, v) => setSelected(context, open, v);
+
+  return (open, v) => untrack(() => setSelected(context, open, v));
 }

package/dist/video/Video.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1984)
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1988)
 ## Props
 @prop children
 @prop type = "video/mp4"

package/dist/video/Video.svelte.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.13.7",
+  "version": "1.13.8",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {