flowbite-svelte 0.36.4 → 0.37.1

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

@@ -30,6 +30,54 @@ declare const __propDef: {
 export type NavDropdownProps = typeof __propDef.props;
 export type NavDropdownEvents = typeof __propDef.events;
 export type NavDropdownSlots = typeof __propDef.slots;
+/**
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop liButtonClass: string = 'flex items-center justify-between w-full';
+ * @prop name: string;
+ * @prop child: NavbarType[] = [];
+ * @prop dropdownDiv: string = '';
+ * @prop dropdownLinkClassWithChild: string | undefined = undefined;
+ * @prop rel: string | undefined = undefined;
+ * ## Event
+ * - on:blur
+ * - on:change
+ * - on:click
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ * ## Example
+ * ```
+ * <script>
+ *   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img
+ *       src="https://flowbite.com/docs/images/logo.svg"
+ *       class="mr-3 h-6 sm:h-9"
+ *       alt="Flowbite Logo"
+ *     />
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+ *       Flowbite
+ *     </span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/" active={true}>Home</NavLi>
+ *     <NavLi href="/about">About</NavLi>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/pricing">Pricing</NavLi>
+ *     <NavLi href="/contact">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class NavDropdown extends SvelteComponentTyped<NavDropdownProps, NavDropdownEvents, NavDropdownSlots> {
 }
 export {};

package/dist/navbar/NavDropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavDropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA8C3C,QAAA,MAAM,SAAS;;;cAD6L,MAAM;;;qCAA2E,MAAM,GAAG,SAAS;cAAQ,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CAClR,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"NavDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavDropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAgD3C,QAAA,MAAM,SAAS;;;cAD6L,MAAM;;;qCAA2E,MAAM,GAAG,SAAS;cAAQ,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CAClR,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/navbar/NavHamburger.svelte

@@ -5,5 +5,39 @@ export let btnClass = 'ml-3 md:hidden';
 </script>
 
 <ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
-	<Menu class="h-6 w-6 shrink-0" />
+  <Menu class="h-6 w-6 shrink-0" />
 </ToolbarButton>
+
+<!--
+  @component
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop btnClass: string = 'ml-3 md:hidden';
+  ## Example
+  ```
+  <script>
+    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+  </script>
+
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img
+        src="https://flowbite.com/docs/images/logo.svg"
+        class="mr-3 h-6 sm:h-9"
+        alt="Flowbite Logo"
+      />
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+        Flowbite
+      </span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->

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

@@ -14,6 +14,38 @@ declare const __propDef: {
 export type NavHamburgerProps = typeof __propDef.props;
 export type NavHamburgerEvents = typeof __propDef.events;
 export type NavHamburgerSlots = typeof __propDef.slots;
+/**
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop btnClass: string = 'ml-3 md:hidden';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img
+ *       src="https://flowbite.com/docs/images/logo.svg"
+ *       class="mr-3 h-6 sm:h-9"
+ *       alt="Flowbite Logo"
+ *     />
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+ *       Flowbite
+ *     </span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/" active={true}>Home</NavLi>
+ *     <NavLi href="/about">About</NavLi>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/pricing">Pricing</NavLi>
+ *     <NavLi href="/contact">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class NavHamburger extends SvelteComponentTyped<NavHamburgerProps, NavHamburgerEvents, NavHamburgerSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"NavHamburger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavHamburger.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"NavHamburger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavHamburger.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/navbar/NavLi.svelte

@@ -28,3 +28,42 @@ $: liClass = classNames('block py-2 pr-4 pl-3 md:p-0 rounded md:border-0', activ
     <slot />
   </svelte:element>
 </li>
+
+<!--
+  @component
+  ## Features
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop href: string = '';
+  @prop active: boolean = false;
+  @prop activeClass: string | undefined = undefined;
+  @prop nonActiveClass: string | undefined = undefined;
+  ## Event 
+  - on:blur
+  - on:change
+  - on:click
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+  ## Example
+  ```
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->

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

@@ -28,6 +28,43 @@ declare const __propDef: {
 export type NavLiProps = typeof __propDef.props;
 export type NavLiEvents = typeof __propDef.events;
 export type NavLiSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop href: string = '';
+ * @prop active: boolean = false;
+ * @prop activeClass: string | undefined = undefined;
+ * @prop nonActiveClass: string | undefined = undefined;
+ * ## Event
+ * - on:blur
+ * - on:change
+ * - on:click
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ * ## Example
+ * ```
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/" active={true}>Home</NavLi>
+ *     <NavLi href="/about">About</NavLi>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/pricing">Pricing</NavLi>
+ *     <NavLi href="/contact">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class NavLi extends SvelteComponentTyped<NavLiProps, NavLiEvents, NavLiSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"NavLi.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavLi.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiCD,QAAA,MAAM,SAAS;;;;;sBAD8I,MAAM,GAAG,SAAS;yBAAmB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CACtI,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"NavLi.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavLi.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmCD,QAAA,MAAM,SAAS;;;;;sBAD8I,MAAM,GAAG,SAAS;yBAAmB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CACtI,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/navbar/NavSidebarHamburger.svelte

@@ -5,5 +5,39 @@ export let btnClass = 'ml-3 md:hidden';
 </script>
 
 <ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
-	<SidebarMenu class="h-6 w-6 shrink-0" variation="solid" />
+  <SidebarMenu class="h-6 w-6 shrink-0" variation="solid" />
 </ToolbarButton>
+
+<!--
+  @component
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop btnClass: string = 'ml-3 md:hidden';
+  ## Example
+  ```
+  <script>
+    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+  </script>
+
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img
+        src="https://flowbite.com/docs/images/logo.svg"
+        class="mr-3 h-6 sm:h-9"
+        alt="Flowbite Logo"
+      />
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+        Flowbite
+      </span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->

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

@@ -14,6 +14,38 @@ declare const __propDef: {
 export type NavSidebarHamburgerProps = typeof __propDef.props;
 export type NavSidebarHamburgerEvents = typeof __propDef.events;
 export type NavSidebarHamburgerSlots = typeof __propDef.slots;
+/**
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop btnClass: string = 'ml-3 md:hidden';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img
+ *       src="https://flowbite.com/docs/images/logo.svg"
+ *       class="mr-3 h-6 sm:h-9"
+ *       alt="Flowbite Logo"
+ *     />
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+ *       Flowbite
+ *     </span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/" active={true}>Home</NavLi>
+ *     <NavLi href="/about">About</NavLi>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/pricing">Pricing</NavLi>
+ *     <NavLi href="/contact">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class NavSidebarHamburger extends SvelteComponentTyped<NavSidebarHamburgerProps, NavSidebarHamburgerEvents, NavSidebarHamburgerSlots> {
 }
 export {};

package/dist/navbar/NavSidebarHamburger.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavSidebarHamburger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavSidebarHamburger.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}
+{"version":3,"file":"NavSidebarHamburger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavSidebarHamburger.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB,CAAC,wBAAwB,EAAE,yBAAyB,EAAE,wBAAwB,CAAC;CACnJ"}

package/dist/navbar/NavUl.svelte

@@ -34,3 +34,33 @@ $$props.class);
     </ul>
   </div>
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop divClass: string = 'w-full md:block md:w-auto';
+  @prop ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
+  @prop hidden: boolean = true;
+  @prop slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
+  @prop activeClass: string = 'text-white bg-blue-700 md:bg-transparent md:text-blue-700 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent';
+  @prop nonActiveClass: string = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+  ## Example
+  ```
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->

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

@@ -26,6 +26,34 @@ declare const __propDef: {
 export type NavUlProps = typeof __propDef.props;
 export type NavUlEvents = typeof __propDef.events;
 export type NavUlSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop divClass: string = 'w-full md:block md:w-auto';
+ * @prop ulClass: string = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
+ * @prop hidden: boolean = true;
+ * @prop slideParams: SlideParams = { delay: 250, duration: 500, easing: quintOut };
+ * @prop activeClass: string = 'text-white bg-blue-700 md:bg-transparent md:text-blue-700 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent';
+ * @prop nonActiveClass: string = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+ * ## Example
+ * ```
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Flowbite </span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/" active={true}>Home</NavLi>
+ *     <NavLi href="/about">About</NavLi>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/pricing">Pricing</NavLi>
+ *     <NavLi href="/contact">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class NavUl extends SvelteComponentTyped<NavUlProps, NavUlEvents, NavUlSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"NavUl.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavUl.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAIJ,OAAO,EAAS,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAqD5D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"NavUl.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/NavUl.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAIJ,OAAO,EAAS,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAuD5D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/navbar/Navbar.svelte

@@ -18,3 +18,39 @@ let toggle = () => {
     <slot {hidden} {toggle} />
   </div>
 </Frame>
+
+<!--
+  @component
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
+  @prop navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
+  @prop fluid: boolean = false;
+  ## Example
+  ```
+  <script>
+    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+  </script>
+
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img
+        src="https://flowbite.com/docs/images/logo.svg"
+        class="mr-3 h-6 sm:h-9"
+        alt="Flowbite Logo"
+      />
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+        Flowbite
+      </span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->

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

@@ -259,6 +259,40 @@ declare const __propDef: {
 export type NavbarProps = typeof __propDef.props;
 export type NavbarEvents = typeof __propDef.events;
 export type NavbarSlots = typeof __propDef.slots;
+/**
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop navClass: string = 'px-2 sm:px-4 py-2.5 w-full';
+ * @prop navDivClass: string = 'mx-auto flex flex-wrap justify-between items-center ';
+ * @prop fluid: boolean = false;
+ * ## Example
+ * ```
+ * <script>
+ *   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img
+ *       src="https://flowbite.com/docs/images/logo.svg"
+ *       class="mr-3 h-6 sm:h-9"
+ *       alt="Flowbite Logo"
+ *     />
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+ *       Flowbite
+ *     </span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/" active={true}>Home</NavLi>
+ *     <NavLi href="/about">About</NavLi>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/pricing">Pricing</NavLi>
+ *     <NavLi href="/contact">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class Navbar extends SvelteComponentTyped<NavbarProps, NavbarEvents, NavbarSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Navbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/Navbar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Navbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/Navbar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA0CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/navbar/SidebarMenu.svelte

@@ -22,15 +22,51 @@ export let ariaLabel = 'bars 3';
 </script>
 
 <svg
-	xmlns="http://www.w3.org/2000/svg"
-	width={size}
-	height={size}
-	class={$$props.class}
-	{...$$restProps}
-	aria-label={ariaLabel}
-	fill="none"
-	{viewBox}
-	stroke-width="2"
-	on:click>
-	{@html svgpath}
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  class={$$props.class}
+  {...$$restProps}
+  aria-label={ariaLabel}
+  fill="none"
+  {viewBox}
+  stroke-width="2"
+  on:click>
+  {@html svgpath}
 </svg>
+
+<!--
+  @component
+  [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+  ## Props
+  @prop size = '20';
+  @prop color = 'currentColor';
+  @prop variation: 'solid' | 'outline' = 'outline';  
+  ## Example
+  ```
+  <script>
+    import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+  </script>
+
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img
+        src="https://flowbite.com/docs/images/logo.svg"
+        class="mr-3 h-6 sm:h-9"
+        alt="Flowbite Logo"
+      />
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+        Flowbite
+      </span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->

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

@@ -17,6 +17,40 @@ declare const __propDef: {
 export type SidebarMenuProps = typeof __propDef.props;
 export type SidebarMenuEvents = typeof __propDef.events;
 export type SidebarMenuSlots = typeof __propDef.slots;
+/**
+ * [Go to Navbar](https://flowbite-svelte.com/docs/components/navbar)
+ * ## Props
+ * @prop size = '20';
+ * @prop color = 'currentColor';
+ * @prop variation: 'solid' | 'outline' = 'outline';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img
+ *       src="https://flowbite.com/docs/images/logo.svg"
+ *       class="mr-3 h-6 sm:h-9"
+ *       alt="Flowbite Logo"
+ *     />
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+ *       Flowbite
+ *     </span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/" active={true}>Home</NavLi>
+ *     <NavLi href="/about">About</NavLi>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/pricing">Pricing</NavLi>
+ *     <NavLi href="/contact">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class SidebarMenu extends SvelteComponentTyped<SidebarMenuProps, SidebarMenuEvents, SidebarMenuSlots> {
 }
 export {};

package/dist/navbar/SidebarMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/SidebarMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"SidebarMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/navbar/SidebarMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}