flowbite-svelte 1.11.2 → 1.11.4

package/dist/navbar/NavHamburger.svelte.d.ts

@@ -1,7 +1,7 @@
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1104)
+ * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1088)
  * ## Props
  * @prop children
  * @prop onclick
@@ -16,63 +16,111 @@ declare const NavHamburger: import("svelte").Component<import("../toolbar/theme"
 } & import("svelte/elements").HTMLButtonAttributes & {
     name?: string;
 } & import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+    breakpoint: {
+        sm: {
+            base: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     menu: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     menu: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     menu: string;
 }, undefined, unknown, unknown, undefined>>> & import("../theme/themeUtils").Classes<import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+    breakpoint: {
+        sm: {
+            base: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     menu: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     menu: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     menu: string;
 }, undefined, unknown, unknown, undefined>>> & {

package/dist/navbar/NavLi.svelte

@@ -1,25 +1,19 @@
 <script lang="ts">
+  import { getTheme } from "../theme/themeUtils";
+  import type { NavbarState, NavLiProps, NavbarBreakpoint } from "../types";
   import clsx from "clsx";
   import { getContext } from "svelte";
   import { navbarLi } from "./theme";
-  import type { NavbarState, NavLiProps } from "../types";
-  import { getTheme } from "../theme/themeUtils";
 
   let navState = getContext<NavbarState>("navState");
+  let navBreakpoint = getContext<NavbarBreakpoint>("breakpoint");
 
   let { children, activeClass, nonActiveClass, class: className, ...restProps }: NavLiProps = $props();
 
   const theme = getTheme("navbarLi");
 
-  const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
-
-  let navUrl = $state("");
-  activeUrlStore.subscribe((value) => {
-    navUrl = value;
-  });
-
-  let active = $derived(navUrl ? restProps.href === navUrl : false);
-  let liClass = $derived(navbarLi({ hidden: navState.hidden, class: clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), theme, className) }));
+  let active = $derived(navState.activeUrl ? restProps.href === navState.activeUrl : false);
+  let liClass = $derived(navbarLi({ breakpoint: navBreakpoint, hidden: navState.hidden, class: clsx(active ? (activeClass ?? navState.activeClass) : (nonActiveClass ?? navState.nonActiveClass), theme, className) }));
 </script>
 
 <li>
@@ -38,7 +32,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1125)
+[NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1109)
 ## Props
 @prop children
 @prop activeClass

package/dist/navbar/NavLi.svelte.d.ts

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

package/dist/navbar/NavUl.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-  import { getContext, setContext } from "svelte";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import type { NavbarState, NavUlProps, NavbarBreakpoint } from "../types";
+  import clsx from "clsx";
+  import { getContext } from "svelte";
   import { sineIn } from "svelte/easing";
   import { prefersReducedMotion } from "svelte/motion";
-  import { writable } from "svelte/store";
-  import { slide, fly, fade, scale } from "svelte/transition";
-  import clsx from "clsx";
+  import { fade, fly, scale, slide } from "svelte/transition";
   import { navbarUl } from "./theme";
-  import type { NavbarState, NavUlProps } from "../types";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
 
   let navState = getContext<NavbarState>("navState");
+  let navBreakpoint = getContext<NavbarBreakpoint>("breakpoint");
 
-  let { children, activeUrl, ulClass, slideParams, transition = slide, transitionParams, activeClass, nonActiveClass, respectMotionPreference = true, class: clasName, classes, ...restProps }: NavUlProps = $props();
+  let { children, activeUrl = $bindable(), ulClass, slideParams, transition = slide, transitionParams, activeClass, nonActiveClass, respectMotionPreference = true, class: clasName, classes, ...restProps }: NavUlProps = $props();
 
   warnThemeDeprecation("NavUl", { ulClass, activeClass, nonActiveClass }, { ulClass: "ul", activeClass: "active", nonActiveClass: "nonActive" });
   const styling = $derived(classes ?? { ul: ulClass, active: activeClass, nonActive: nonActiveClass });
@@ -39,22 +39,16 @@
     return finalParams;
   });
 
-  const activeUrlStore = writable<string>("");
-
   let hidden: boolean = $derived(navState.hidden ?? true);
 
-  let { base, ul, active, nonActive } = $derived(navbarUl({ hidden }));
+  let { base, ul, active, nonActive } = $derived(navbarUl({ hidden, breakpoint: navBreakpoint }));
 
   $effect(() => {
     navState.activeClass = active({ class: clsx(theme?.active, styling.active) });
     navState.nonActiveClass = nonActive({ class: clsx(theme?.nonActive, styling.nonActive) });
+    navState.activeUrl = activeUrl;
   });
 
-  $effect(() => {
-    activeUrlStore.set(activeUrl ?? "");
-  });
-  setContext("activeUrl", activeUrlStore);
-
   let divCls: string = $derived(base({ class: clsx(theme?.base, clasName) }));
   let ulCls: string = $derived(ul({ class: clsx(theme?.ul, styling.ul) }));
 </script>
@@ -77,10 +71,10 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1110)
+[NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1094)
 ## Props
 @prop children
-@prop activeUrl
+@prop activeUrl = $bindable()
 @prop ulClass
 @prop slideParams
 @prop transition = slide

package/dist/navbar/NavUl.svelte.d.ts

@@ -2,10 +2,10 @@ import type { NavUlProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1110)
+ * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1094)
  * ## Props
  * @prop children
- * @prop activeUrl
+ * @prop activeUrl = $bindable()
  * @prop ulClass
  * @prop slideParams
  * @prop transition = slide
@@ -17,6 +17,6 @@ import type { NavUlProps } from "../types";
  * @prop classes
  * @prop ...restProps
  */
-declare const NavUl: import("svelte").Component<NavUlProps, {}, "">;
+declare const NavUl: import("svelte").Component<NavUlProps, {}, "activeUrl">;
 type NavUl = ReturnType<typeof NavUl>;
 export default NavUl;

package/dist/navbar/Navbar.svelte

@@ -8,12 +8,13 @@
 
   // propagate props type from underlying Frame
 
-  let { children, fluid, navContainerClass, class: className, closeOnClickOutside = true, ...restProps }: NavbarProps = $props();
+  let { children, fluid, navContainerClass, class: className, closeOnClickOutside = true, breakpoint = "md", ...restProps }: NavbarProps = $props();
 
   const theme = getTheme("navbar");
 
   let navState = $state({ hidden: true });
   setContext<NavbarState>("navState", navState);
+  setContext("breakpoint", breakpoint);
 
   // Add reference to the navbar element
   let navbarElement: HTMLElement;
@@ -45,12 +46,13 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1091)
+[NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1074)
 ## Props
 @prop children
 @prop fluid
 @prop navContainerClass
 @prop class: className
 @prop closeOnClickOutside = true
+@prop breakpoint = "md"
 @prop ...restProps
 -->

package/dist/navbar/Navbar.svelte.d.ts

@@ -2,13 +2,14 @@ import type { NavbarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1091)
+ * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1074)
  * ## Props
  * @prop children
  * @prop fluid
  * @prop navContainerClass
  * @prop class: className
  * @prop closeOnClickOutside = true
+ * @prop breakpoint = "md"
  * @prop ...restProps
  */
 declare const Navbar: import("svelte").Component<NavbarProps, {}, "">;

package/dist/navbar/theme.d.ts

@@ -1,5 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
 import type { Classes } from "../theme/themeUtils";
+export type NavbarBreakpoint = "sm" | "md" | "lg" | "xl";
 export type NavbarUlVariants = VariantProps<typeof navbarUl> & Classes<typeof navbarUl>;
 export type NavbarHamburgerVariants = VariantProps<typeof navbarHamburger> & Classes<typeof navbarHamburger>;
 export declare const navbar: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative w-full px-2 py-2.5 sm:px-4", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative w-full px-2 py-2.5 sm:px-4", unknown, unknown, undefined>>;
@@ -21,6 +22,32 @@ export declare const navbarContainer: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "mx-auto flex flex-wrap items-center justify-between ", unknown, unknown, undefined>>;
 export declare const navbarUl: import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        md: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        lg: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        xl: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+    };
     hidden: {
         false: {
             base: string;
@@ -36,6 +63,32 @@ export declare const navbarUl: import("tailwind-variants").TVReturnType<{
     active: string;
     nonActive: string;
 }, undefined, {
+    breakpoint: {
+        sm: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        md: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        lg: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        xl: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+    };
     hidden: {
         false: {
             base: string;
@@ -51,6 +104,32 @@ export declare const navbarUl: import("tailwind-variants").TVReturnType<{
     active: string;
     nonActive: string;
 }, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        md: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        lg: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+        xl: {
+            base: string;
+            ul: string;
+            active: string;
+            nonActive: string;
+        };
+    };
     hidden: {
         false: {
             base: string;
@@ -67,46 +146,88 @@ export declare const navbarUl: import("tailwind-variants").TVReturnType<{
     nonActive: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const navbarLi: import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
     hidden: {
         false: string;
     };
-}, undefined, "block py-2 pe-4 ps-3 md:p-2 rounded-sm md:border-0", {
+}, undefined, "block py-2 pe-4 ps-3 rounded-sm", {
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
     hidden: {
         false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
     hidden: {
         false: string;
     };
-}, undefined, "block py-2 pe-4 ps-3 md:p-2 rounded-sm md:border-0", unknown, unknown, undefined>>;
+}, undefined, "block py-2 pe-4 ps-3 rounded-sm", unknown, unknown, undefined>>;
 export declare const navbarHamburger: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+    breakpoint: {
+        sm: {
+            base: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     menu: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            menu?: import("tailwind-variants").ClassValue;
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
     menu: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnType<{
+    breakpoint: {
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     menu: string;
 }, undefined, unknown, unknown, undefined>>;