flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/modal/theme.js

@@ -0,0 +1,52 @@
+import { tv } from "tailwind-variants";
+export const modal = tv({
+    slots: {
+        base: "fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex pointer-events-none",
+        div: "flex relative w-full max-h-full",
+        content: "w-full divide-y text-gray-800 dark:text-gray-300 border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-800 bg-white dark:bg-gray-800 pointer-events-auto",
+        backdrop: "fixed inset-0 z-50 bg-gray-900 bg-opacity-50 dark:bg-opacity-80 pointer-events-auto",
+        header: "flex justify-between items-center p-4 md:p-5 rounded-t-lg",
+        footer: "flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg",
+        body: "p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain",
+        closeBtn: "absolute top-3 end-2.5",
+        h3: "text-xl font-semibold text-gray-900 dark:text-white p-0"
+    },
+    variants: {
+        // position: {
+        //   fixed: { base: 'fixed' },
+        //   absolute: { base: 'absolute' }
+        // },
+        placement: {
+            "top-left": { base: "justify-start items-start" },
+            "top-center": { base: "justify-center items-start" },
+            "top-right": { base: "justify-end items-start" },
+            "center-left": { base: "justify-start items-center" },
+            center: { base: "justify-center items-center" },
+            "center-right": { base: "justify-end items-center" },
+            "bottom-left": { base: "justify-start items-end" },
+            "bottom-center": { base: "justify-center items-end" },
+            "bottom-right": { base: "justify-end items-end" },
+            default: { base: "justify-center items-center" }
+        },
+        size: {
+            xs: { div: "max-w-md" },
+            sm: { div: "max-w-lg" },
+            md: { div: "max-w-2xl" },
+            lg: { div: "max-w-4xl" },
+            xl: { div: "max-w-7xl" }
+        },
+        backdrop: {
+            true: { backdrop: "bg-gray-900 bg-opacity-75" }
+        },
+        rounded: {
+            true: { content: "rounded-sm" }
+        },
+        shadow: {
+            true: { content: "shadow-md" }
+        }
+    },
+    defaultVariants: {
+        placement: "center",
+        rounded: true
+    }
+});

package/dist/modal/type.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { TransitionFunc, ParamsType } from "../types";
+import type { ModalVariants } from "./theme";
+interface ModalProps extends ModalVariants, HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    title?: string;
+    open: boolean;
+    dismissable?: boolean;
+    closeBtnClass?: string;
+    h3Class?: string;
+    divClass?: string;
+    headerClass?: string;
+    contentClass?: string;
+    bodyClass?: string;
+    footerClass?: string;
+    outsideClose?: boolean;
+    backdrop?: boolean;
+    backdropClass?: string;
+    params?: ParamsType;
+    transition?: TransitionFunc;
+}
+export { type ModalProps };

package/dist/modal/type.js

@@ -0,0 +1 @@
+export {};

package/dist/navbar/NavBrand.svelte

@@ -1,14 +1,32 @@
-<script>import { twMerge } from "tailwind-merge";
-export let href = "";
+<script lang="ts">
+  import { type NavBrandProps as Props, navbrand } from ".";
+  import { getContext } from "svelte";
+  import type { navbarType } from "../types";
+
+  let { children, siteName, closeNav, aClass, spanClass, ...restProps }: Props = $props();
+
+  const context = getContext<navbarType>("navbarContext");
+  closeNav = context.closeNav ?? closeNav;
+
+  const { base, span } = $derived(navbrand());
 </script>
 
-<a {href} {...$$restProps} class={twMerge('flex items-center', $$props.class)}>
-  <slot />
+<a href="/" onclick={closeNav} {...restProps} class={base({ class: aClass })}>
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if siteName}
+    <span class={span({ class: spanClass })}>{siteName}</span>
+  {/if}
 </a>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let href: $$Props['href'] = '';
+@props: children: any;
+@props:siteName: any;
+@props:closeNav: any;
+@props:aClass: any;
+@props:spanClass: any;
 -->

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

@@ -1,24 +1,23 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAreaAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAreaAttributes & {
-        href?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type NavBrandProps = typeof __propDef.props;
+type NavBrandProps_ = typeof __propDef.props;
+export { NavBrandProps_ as NavBrandProps };
 export type NavBrandEvents = typeof __propDef.events;
 export type NavBrandSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let href: $$Props['href'] = '';
+ * @props: children: any;
+ * @props:siteName: any;
+ * @props:closeNav: any;
+ * @props:aClass: any;
+ * @props:spanClass: any;
  */
-export default class NavBrand extends SvelteComponentTyped<NavBrandProps, NavBrandEvents, NavBrandSlots> {
+export default class NavBrand extends SvelteComponentTyped<NavBrandProps_, NavBrandEvents, NavBrandSlots> {
 }
-export {};

package/dist/navbar/NavHamburger.svelte

@@ -1,26 +1,31 @@
-<script>import { getContext } from "svelte";
-import { writable } from "svelte/store";
-import { twMerge } from "tailwind-merge";
-import ToolbarButton from "../toolbar/ToolbarButton.svelte";
-import Menu from "./Menu.svelte";
-export let menuClass = "h-6 w-6 shrink-0";
-export let onClick = void 0;
-export let classMenu = "";
-export let title = "Open main menu";
-let btnClass = "ms-3 md:hidden";
-let hiddenStore = getContext("navHidden") ?? writable(true);
-const toggle = (ev) => hiddenStore.update((h) => !h);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { NavbarType } from "../types";
+  import { navhamburger, type NavHamburgerProps as Props } from ".";
+
+  let { toggleNav, class: className, ...restProps }: Props = $props();
+
+  let breakPoint;
+  const context = getContext<NavbarType>("navbarContext");
+  breakPoint = context.breakPoint ?? "md";
+  const toggleButton = $derived(navhamburger({ breakPoint, className }));
+  // const handletoggleNav = () => {
+  //   toggleNav();
+  //   console.log('toggleNav clicked')
+  // }
 </script>
 
-<ToolbarButton name={title} on:click={onClick || toggle} {...$$restProps} class={twMerge(btnClass, $$props.class)}>
-  <Menu class={twMerge(menuClass, classMenu)} />
-</ToolbarButton>
+<button onclick={toggleNav} type="button" {...restProps} class={toggleButton}>
+  <span class="sr-only">Open main menu</span>
+  <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+  </svg>
+</button>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let menuClass: $$Props['menuClass'] = 'h-6 w-6 shrink-0';
-@prop export let onClick: $$Props['onClick'] = undefined;
-@prop export let classMenu: $$Props['classMenu'] = '';
+@props: toggleNav: any;
+@props:class: string;
 -->

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

@@ -1,38 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: (({
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | "default" | "primary";
-        name?: string;
-        ariaLabel?: string;
-        size?: "xs" | "sm" | "lg" | "md";
-    } & import("svelte/elements").HTMLAnchorAttributes & {
-        href: string;
-    }) | ({
-        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | "default" | "primary";
-        name?: string;
-        ariaLabel?: string;
-        size?: "xs" | "sm" | "lg" | "md";
-    } & import("svelte/elements").HTMLButtonAttributes)) & {
-        menuClass?: string;
-        onClick?: (() => void) | undefined;
-        classMenu?: string;
-        title?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type NavHamburgerProps = typeof __propDef.props;
+type NavHamburgerProps_ = typeof __propDef.props;
+export { NavHamburgerProps_ as NavHamburgerProps };
 export type NavHamburgerEvents = typeof __propDef.events;
 export type NavHamburgerSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let menuClass: $$Props['menuClass'] = 'h-6 w-6 shrink-0';
- * @prop export let onClick: $$Props['onClick'] = undefined;
- * @prop export let classMenu: $$Props['classMenu'] = '';
+ * @props: toggleNav: any;
+ * @props:class: string;
  */
-export default class NavHamburger extends SvelteComponentTyped<NavHamburgerProps, NavHamburgerEvents, NavHamburgerSlots> {
+export default class NavHamburger extends SvelteComponentTyped<NavHamburgerProps_, NavHamburgerEvents, NavHamburgerSlots> {
 }
-export {};

package/dist/navbar/NavLi.svelte

@@ -1,45 +1,41 @@
-<script>import { getContext } from "svelte";
-import { twMerge } from "tailwind-merge";
-export let href = "";
-export let activeClass = void 0;
-export let nonActiveClass = void 0;
-const context = getContext("navbarContext") ?? {};
-const activeUrlStore = getContext("activeUrl");
-let navUrl = "";
-activeUrlStore.subscribe((value) => {
-  navUrl = value;
-});
-$: active = navUrl ? href === navUrl : false;
-$: liClass = twMerge("block py-2 pe-4 ps-3 md:p-0 rounded-sm md:border-0", active ? activeClass ?? context.activeClass : nonActiveClass ?? context.nonActiveClass, $$props.class);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { NavbarType } from "../types";
+  import { type NavLiProps as Props, navLi } from ".";
+
+  let { closeNav, href, children, aClass, class: className, ...restProps }: Props = $props();
+
+  let breakPoint: NavbarType["breakPoint"];
+
+  const context = getContext<NavbarType>("navbarContext");
+  breakPoint = context.breakPoint ?? "md";
+  closeNav = context.closeNav ?? closeNav;
+  const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
+
+  let navUrl = $state("");
+  activeUrlStore.subscribe((value) => {
+    navUrl = value;
+  });
+
+  // let currentUrl = $state();
+  let isActive = $derived(navUrl ? href === navUrl : false);
+
+  const { base, link } = $derived(navLi({ active: isActive, breakPoint }));
 </script>
 
-<li>
-  <svelte:element
-    this={href ? 'a' : 'div'}
-    role={href ? 'link' : 'presentation'}
-    {href}
-    {...$$restProps}
-    on:blur
-    on:change
-    on:click
-    on:focus
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mouseenter
-    on:mouseleave
-    on:mouseover
-    class={liClass}
-  >
-    <slot />
-  </svelte:element>
+<li class={base({ class: className })}>
+  <a {href} onclick={closeNav} {...restProps} aria-current={isActive} class={link({ class: aClass })}>
+    {@render children()}
+  </a>
 </li>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let href: $$Props['href'] = '';
-@prop export let activeClass: $$Props['activeClass'] = undefined;
-@prop export let nonActiveClass: $$Props['nonActiveClass'] = undefined;
+@props: closeNav: any;
+@props:href: any;
+@props:children: any;
+@props:aClass: any;
+@props:class: string;
 -->

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

@@ -1,28 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: {
-        href?: string;
-        activeClass?: string;
-        nonActiveClass?: string;
-    } & (HTMLAnchorAttributes | HTMLAttributes<HTMLDivElement>);
+    props: Record<string, never>;
     events: {
-        blur: FocusEvent;
-        change: Event;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 type NavLiProps_ = typeof __propDef.props;
 export { NavLiProps_ as NavLiProps };
@@ -31,9 +13,11 @@ export type NavLiSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let href: $$Props['href'] = '';
- * @prop export let activeClass: $$Props['activeClass'] = undefined;
- * @prop export let nonActiveClass: $$Props['nonActiveClass'] = undefined;
+ * @props: closeNav: any;
+ * @props:href: any;
+ * @props:children: any;
+ * @props:aClass: any;
+ * @props:class: string;
  */
 export default class NavLi extends SvelteComponentTyped<NavLiProps_, NavLiEvents, NavLiSlots> {
 }

package/dist/navbar/NavUl.svelte

@@ -1,58 +1,30 @@
-<script context="module"></script>
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+  import type { NavbarType } from "../types";
+  import { writable } from "svelte/store";
+  import { type NavUlProps as Props, navUl } from ".";
 
-<script>import { getContext, setContext } from "svelte";
-import { sineIn } from "svelte/easing";
-import { writable } from "svelte/store";
-import { slide } from "svelte/transition";
-import { twMerge } from "tailwind-merge";
-import Frame from "../utils/Frame.svelte";
-export let activeUrl = "";
-export let divClass = "w-full md:block md:w-auto";
-export let ulClass = "flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium";
-export let hidden = void 0;
-export let slideParams = { delay: 250, duration: 500, easing: sineIn };
-export let activeClass = "text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent";
-export let nonActiveClass = "text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent";
-export let classUl = "";
-const activeUrlStore = writable("");
-setContext("navbarContext", { activeClass, nonActiveClass });
-$: {
-  activeUrlStore.set(activeUrl);
-}
-setContext("activeUrl", activeUrlStore);
-let hiddenStore = getContext("navHidden");
-let _hidden;
-$: _hidden = hidden ?? $hiddenStore ?? true;
-let _divClass;
-$: _divClass = twMerge(divClass, $$props.class);
-let _ulClass;
-$: _ulClass = twMerge(ulClass, classUl);
+  let { children, activeUrl = "", class: className, ...restProps }: Props = $props();
+
+  const context = getContext<NavbarType>("navbarContext");
+  let breakPoint: NavbarType["breakPoint"] = $derived(context.breakPoint ?? "md");
+
+  const activeUrlStore = writable("");
+  $effect(() => {
+    activeUrlStore.set(activeUrl);
+  });
+  setContext("activeUrl", activeUrlStore);
 </script>
 
-{#if !_hidden}
-  <div {...$$restProps} class={_divClass} transition:slide={slideParams} on:click role="button" tabindex="0">
-    <Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
-      <slot />
-    </Frame>
-  </div>
-{:else}
-  <div {...$$restProps} class={_divClass} class:hidden={_hidden}>
-    <ul class={_ulClass}>
-      <slot />
-    </ul>
-  </div>
-{/if}
+<ul {...restProps} class={navUl({ breakPoint, className })}>
+  {@render children()}
+</ul>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let activeUrl: NonNullable<$$Props['activeUrl']> = '';
-@prop export let divClass: $$Props['divClass'] = 'w-full md:block md:w-auto';
-@prop export let ulClass: $$Props['ulClass'] = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium';
-@prop export let hidden: $$Props['hidden'] = undefined;
-@prop export let slideParams: $$Props['slideParams'] = { delay: 250, duration: 500, easing: sineIn };
-@prop export let activeClass: NonNullable<$$Props['activeClass']> = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
-@prop export let nonActiveClass: NonNullable<$$Props['nonActiveClass']> = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
-@prop export let classUl: string = '';
+@props: children: any;
+@props:activeUrl: any = "";
+@props:class: string;
 -->

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

@@ -1,44 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-export type NavbarLiType = {
-    activeClass: string;
-    nonActiveClass: string;
-};
-import type { HTMLAttributes } from 'svelte/elements';
-import { type SlideParams } from 'svelte/transition';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        activeUrl?: string;
-        divClass?: string;
-        ulClass?: string;
-        hidden?: boolean | undefined;
-        slideParams?: SlideParams;
-        activeClass?: string;
-        nonActiveClass?: string;
-    };
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type NavUlProps = typeof __propDef.props;
+type NavUlProps_ = typeof __propDef.props;
+export { NavUlProps_ as NavUlProps };
 export type NavUlEvents = typeof __propDef.events;
 export type NavUlSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let activeUrl: NonNullable<$$Props['activeUrl']> = '';
- * @prop export let divClass: $$Props['divClass'] = 'w-full md:block md:w-auto';
- * @prop export let ulClass: $$Props['ulClass'] = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-sm md:font-medium';
- * @prop export let hidden: $$Props['hidden'] = undefined;
- * @prop export let slideParams: $$Props['slideParams'] = { delay: 250, duration: 500, easing: sineIn };
- * @prop export let activeClass: NonNullable<$$Props['activeClass']> = 'text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent';
- * @prop export let nonActiveClass: NonNullable<$$Props['nonActiveClass']> = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
- * @prop export let classUl: string = '';
+ * @props: children: any;
+ * @props:activeUrl: any = "";
+ * @props:class: string;
  */
-export default class NavUl extends SvelteComponentTyped<NavUlProps, NavUlEvents, NavUlSlots> {
+export default class NavUl extends SvelteComponentTyped<NavUlProps_, NavUlEvents, NavUlSlots> {
 }
-export {};

package/dist/navbar/Navbar.svelte

@@ -1,28 +1,92 @@
-<script>import { setContext } from "svelte";
-import Frame from "../utils/Frame.svelte";
-import { twMerge } from "tailwind-merge";
-import NavContainer from "./NavContainer.svelte";
-import { writable } from "svelte/store";
-export let fluid = false;
-export let navContainerClass = "";
-let hidden = writable(true);
-setContext("navHidden", hidden);
-$: {
-  $$restProps.color = $$restProps.color ?? "navbar";
-}
-let toggle = () => hidden.update((hidden2) => !hidden2);
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { clickOutside } from "../uiHelpers.svelte";
+  import { slide, type SlideParams } from "svelte/transition";
+  import { quintOut } from "svelte/easing";
+  import type { NavbarType } from "../types";
+  import { type NavbarProps as Props, navbar } from ".";
+  import clsx from "clsx";
+
+  let { children, navSlotBlock, navSlotHiddenTop, navSlotHiddenBottom, toggleNav, closeNav = () => {}, navStatus, fluid, brand, hamburgerMenu = true, breakPoint = "md", class: navClass, divClass, btnClass, div2Class, activeClass, nonActiveClass, ...restProps }: Props = $props();
+
+  const { base, container, toggleButton, menuContainer, activeLink, inactiveLink } = $derived(navbar({ fluid, breakPoint, navStatus }));
+
+  setContext<NavbarType>("navbarContext", {
+    navStatus,
+    breakPoint,
+    get activeClass() {
+      return activeLink({ class: activeClass });
+    },
+    get nonActiveClass() {
+      return inactiveLink({ class: nonActiveClass });
+    },
+    closeNav: closeNav
+  });
+
+  let slideParams: SlideParams = {
+    delay: 250,
+    duration: 500,
+    easing: quintOut
+  };
+  // Create a helper to determine menu role and tabindex for A11y
+  function getMenuProps(isOpen: boolean) {
+    return isOpen ? { role: "menu", tabindex: 0 } : { role: "none", tabindex: -1 };
+  }
 </script>
 
-<Frame tag="nav" {...$$restProps} class={twMerge('px-2 sm:px-4 py-2.5 w-full', $$props.class)}>
-  <NavContainer {fluid} class={navContainerClass}>
-    <slot hidden={$hidden} {toggle} {NavContainer} />
-  </NavContainer>
-</Frame>
+<nav {...restProps} class={base({ class: clsx(navClass), fluid })} use:clickOutside={closeNav}>
+  <div class={container({ class: divClass, fluid })}>
+    {#if brand}
+      {@render brand()}
+    {/if}
+    {#if hamburgerMenu}
+      <button onclick={toggleNav} type="button" class={toggleButton({ class: btnClass })}>
+        <span class="sr-only">Open main menu</span>
+        <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+        </svg>
+      </button>
+    {/if}
+    {#if navSlotBlock}
+      {@render navSlotBlock()}
+    {/if}
+    {#if navStatus}
+      {#if navSlotHiddenTop}
+        {@render navSlotHiddenTop()}
+      {/if}
+      <div class={menuContainer({ class: div2Class })} transition:slide={slideParams} {...getMenuProps(true)}>
+        {@render children()}
+      </div>
+      {#if navSlotHiddenBottom}
+        {@render navSlotHiddenBottom()}
+      {/if}
+    {:else}
+      <div class={menuContainer({ class: div2Class })} {...getMenuProps(false)}>
+        {@render children()}
+      </div>
+    {/if}
+  </div>
+</nav>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let fluid: $$Props['fluid'] = false;
-@prop export let navContainerClass: string= '';
+@props: children: any;
+@props:navSlotBlock: any;
+@props:navSlotHiddenTop: any;
+@props:navSlotHiddenBottom: any;
+@props:toggleNav: any;
+@props:closeNav: any = ();
+@props:navStatus: any;
+@props:fluid: any;
+@props:brand: any;
+@props:hamburgerMenu: any = true;
+@props:breakPoint: any = "md";
+@props:class: string;
+@props:divClass: any;
+@props:btnClass: any;
+@props:div2Class: any;
+@props:activeClass: any;
+@props:nonActiveClass: any;
 -->