flowbite-svelte 0.9.3 → 0.9.6

package/footer/SocialMediaFooter.svelte

@@ -1,110 +1,63 @@
-<script>
-  export let site = {
-    link: "/",
-    name: "Flowbite Svelte",
-    img: "/images/mkdir-logo.png",
-  };
-  export let links = [
-    {
-      parent: "RESOURCES",
-      children: [
-        { name: "Flowbite-Svelte", link: "/" },
-        {
-          name: "Flowbite",
-          link: "/",
-        },
-      ],
-    },
-    {
-      parent: "FOLLOW US",
-      children: [
-        { name: "Github", link: "/" },
-        {
-          name: "Flowbite",
-          link: "/",
-        },
-      ],
-    },
-    {
-      parent: "LEGAL",
-      children: [
-        { name: "Privacy Policy", link: "/" },
-        {
-          name: "Terms & Conditions",
-          link: "/",
-        },
-      ],
-    },
-  ];
-  export let socialMedia = [
-    {
-      link: "/",
-      icon: "",
-    },
-  ];
-  export let footerClass = "p-4 bg-white sm:p-6 dark:bg-gray-800";
-  export let divClass = "md:flex md:justify-between";
-  export let divClass2 = "mb-6 md:mb-0";
-  export let siteLinkClass = "flex items-center";
-  export let siteNameSpanClass =
-    "self-center text-2xl font-semibold whitespace-nowrap dark:text-white";
-  export let imgClass = "mr-3 h-8";
-  export let linksDivClass = "grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3";
-  export let parentClass =
-    "mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white";
-  export let ulClass = "text-gray-600 dark:text-gray-400";
-  export let linkClass = "hover:underline";
-  export let hrClass =
-    "my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8";
-  export let copyrightDivClass = "sm:flex sm:items-center sm:justify-between";
-  export let copyrightClass =
-    "text-sm text-gray-500 sm:text-center dark:text-gray-400";
-  export let socialMediaDivClass =
-    "flex mt-4 space-x-6 sm:justify-center sm:mt-0";
-  export let socialMediaLinkClass =
-    "text-gray-500 hover:text-gray-900 dark:hover:text-white";
-  export let iconClass = "h-5 w-5 mr-2";
-  export let copyrightYear = "© 2022";
-  export let allRightsReserved = "All Rights Reserved.";
+<script >export let site;
+export let links;
+export let socialMedia;
+export let footerClass = 'p-4 bg-white sm:p-6 dark:bg-gray-800';
+export let divClass = 'md:flex md:justify-between';
+export let divClass2 = 'mb-6 md:mb-0';
+export let siteLinkClass = 'flex items-center';
+export let siteNameSpanClass = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
+export let imgClass = 'mr-3 h-8';
+export let linksDivClass = 'grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3';
+export let parentClass = 'mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white';
+export let ulClass = 'text-gray-600 dark:text-gray-400';
+export let linkClass = 'hover:underline';
+export let hrClass = 'my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8';
+export let copyrightDivClass = 'sm:flex sm:items-center sm:justify-between';
+export let copyrightClass = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
+export let socialMediaDivClass = 'flex mt-4 space-x-6 sm:justify-center sm:mt-0';
+export let socialMediaLinkClass = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
+export let iconClass = 'h-5 w-5 mr-2';
+export let copyrightYear = '© 2022';
+export let allRightsReserved = 'All Rights Reserved.';
 </script>
 
 <footer class={footerClass}>
-  <div class={divClass}>
-    <div class={divClass2}>
-      <a href={site.link} class={siteLinkClass}>
-        <img src={site.img} class={imgClass} alt={site.name} />
-        <span class={siteNameSpanClass}>{site.name}</span>
-      </a>
-    </div>
-    <div class={linksDivClass}>
-      {#each links as { parent, children }}
-        <div>
-          <h2 class={parentClass}>
-            {parent}
-          </h2>
-          <ul class={ulClass}>
-            {#each children as { name, link }}
-              <li class="mb-4">
-                <a href={link} class={linkClass}>{name}</a>
-              </li>
-            {/each}
-          </ul>
-        </div>
-      {/each}
-    </div>
-  </div>
-  <hr class={hrClass} />
-  <div class={copyrightDivClass}>
-    <span class={copyrightClass}
-      >{copyrightYear}
-      <a href={site.link} class="hover:underline">{site.name}</a>. {allRightsReserved}
-    </span>
-    <div class={socialMediaDivClass}>
-      {#each socialMedia as { link, icon }}
-        <a href={link} class={socialMediaLinkClass}>
-          <svelte:component this={icon} className={iconClass} />
-        </a>
-      {/each}
-    </div>
-  </div>
+	<div class={divClass}>
+		<div class={divClass2}>
+			<a href={site.href} class={siteLinkClass}>
+				<img src={site.img} class={imgClass} alt={site.name} />
+				<span class={siteNameSpanClass}>{site.name}</span>
+			</a>
+		</div>
+		<div class={linksDivClass}>
+			{#each links as { parent, children }}
+				<div>
+					<h2 class={parentClass}>
+						{parent}
+					</h2>
+					<ul class={ulClass}>
+						{#each children as { name, href }}
+							<li class="mb-4">
+								<a {href} class={linkClass}>{name}</a>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			{/each}
+		</div>
+	</div>
+	<hr class={hrClass} />
+	<div class={copyrightDivClass}>
+		<span class={copyrightClass}
+			>{copyrightYear}
+			<a href={site.href} class="hover:underline">{site.name}</a>. {allRightsReserved}
+		</span>
+		<div class={socialMediaDivClass}>
+			{#each socialMedia as { href, icon }}
+				<a {href} class={socialMediaLinkClass}>
+					<svelte:component this={icon} className={iconClass} />
+				</a>
+			{/each}
+		</div>
+	</div>
 </footer>

package/footer/SocialMediaFooter.svelte.d.ts

@@ -1,67 +1,10 @@
-/** @typedef {typeof __propDef.props}  SocialMediaFooterProps */
-/** @typedef {typeof __propDef.events}  SocialMediaFooterEvents */
-/** @typedef {typeof __propDef.slots}  SocialMediaFooterSlots */
-export default class SocialMediaFooter extends SvelteComponentTyped<{
-    site?: {
-        link: string;
-        name: string;
-        img: string;
-    };
-    links?: {
-        parent: string;
-        children: {
-            name: string;
-            link: string;
-        }[];
-    }[];
-    socialMedia?: {
-        link: string;
-        icon: string;
-    }[];
-    footerClass?: string;
-    divClass?: string;
-    divClass2?: string;
-    siteLinkClass?: string;
-    siteNameSpanClass?: string;
-    imgClass?: string;
-    linksDivClass?: string;
-    parentClass?: string;
-    ulClass?: string;
-    linkClass?: string;
-    hrClass?: string;
-    copyrightDivClass?: string;
-    copyrightClass?: string;
-    socialMediaDivClass?: string;
-    socialMediaLinkClass?: string;
-    iconClass?: string;
-    copyrightYear?: string;
-    allRightsReserved?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SocialMediaFooterProps = typeof __propDef.props;
-export type SocialMediaFooterEvents = typeof __propDef.events;
-export type SocialMediaFooterSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { SocialMediaLinkType, SocialMediaType, SiteType } from '../types';
 declare const __propDef: {
     props: {
-        site?: {
-            link: string;
-            name: string;
-            img: string;
-        };
-        links?: {
-            parent: string;
-            children: {
-                name: string;
-                link: string;
-            }[];
-        }[];
-        socialMedia?: {
-            link: string;
-            icon: string;
-        }[];
+        site: SiteType;
+        links: SocialMediaLinkType[];
+        socialMedia: SocialMediaType[];
         footerClass?: string;
         divClass?: string;
         divClass2?: string;
@@ -86,4 +29,9 @@ declare const __propDef: {
     };
     slots: {};
 };
+export declare type SocialMediaFooterProps = typeof __propDef.props;
+export declare type SocialMediaFooterEvents = typeof __propDef.events;
+export declare type SocialMediaFooterSlots = typeof __propDef.slots;
+export default class SocialMediaFooter extends SvelteComponentTyped<SocialMediaFooterProps, SocialMediaFooterEvents, SocialMediaFooterSlots> {
+}
 export {};

package/index.d.ts

@@ -3,6 +3,11 @@ import AccordionItem from "./accordions/AccordionItem.svelte";
 import Alert from "./alerts/Alert.svelte";
 import BorderAlert from "./alerts/BorderAlert.svelte";
 import InfoAlert from "./alerts/InfoAlert.svelte";
+import Confirm from "./auth/Confirm.svelte";
+import ForgotPassword from "./auth/ForgotPassword.svelte";
+import Login from "./auth/Login.svelte";
+import Register from "./auth/Register.svelte";
+import Reset from "./auth/Reset.svelte";
 import Badge from "./badges/Badge.svelte";
 import BadgeIcon from "./badges/BadgeIcon.svelte";
 import BadgeLink from "./badges/BadgeLink.svelte";
@@ -43,4 +48,4 @@ import DefaultTabs from "./tabs/DefaultTabs.svelte";
 import PillTabs from "./tabs/PillTabs.svelte";
 import Tooltip from "./tooltips/Tooltip.svelte";
 import LightTooltip from "./tooltips/LightTooltip.svelte";
-export { Accordion, AccordionItem, Alert, BorderAlert, InfoAlert, Badge, BadgeIcon, BadgeLink, Button, ColorShadowButton, GradientDuotoneButton, GradientMonochromeButton, GradientOutlineButton, ButtonGroup, ButtonGroupOutline, Card, HorizontalCard, InteractiveCard, ListCard, CtaCard, EcommerceCard, SignInCard, DarkMode, Dropdown, SimpleFooter, LogoFooter, SocialMediaFooter, SitemapFooter, List, modalIdStore, ExtraLargeModal, LargeModal, MediumModal, ModalButton, SignInModal, SmallModal, Navbar, DropdownNavbar, Spinner, SpinnerButton, InteractiveTabs, DefaultTabs, PillTabs, Tooltip, LightTooltip };
+export { Accordion, AccordionItem, Alert, BorderAlert, InfoAlert, Confirm, ForgotPassword, Login, Register, Reset, Badge, BadgeIcon, BadgeLink, Button, ColorShadowButton, GradientDuotoneButton, GradientMonochromeButton, GradientOutlineButton, ButtonGroup, ButtonGroupOutline, Card, HorizontalCard, InteractiveCard, ListCard, CtaCard, EcommerceCard, SignInCard, DarkMode, Dropdown, SimpleFooter, LogoFooter, SocialMediaFooter, SitemapFooter, List, modalIdStore, ExtraLargeModal, LargeModal, MediumModal, ModalButton, SignInModal, SmallModal, Navbar, DropdownNavbar, Spinner, SpinnerButton, InteractiveTabs, DefaultTabs, PillTabs, Tooltip, LightTooltip };

package/index.js

@@ -1,3 +1,4 @@
+// Accordion
 import Accordion from './accordions/AccordionDefault.svelte'
 import AccordionItem from './accordions/AccordionItem.svelte'
 
@@ -6,6 +7,13 @@ import Alert from './alerts/Alert.svelte'
 import BorderAlert from './alerts/BorderAlert.svelte'
 import InfoAlert from './alerts/InfoAlert.svelte'
 
+// Auth
+import Confirm from './auth/Confirm.svelte'
+import ForgotPassword from './auth/ForgotPassword.svelte'
+import Login from './auth/Login.svelte'
+import Register from './auth/Register.svelte'
+import Reset from './auth/Reset.svelte'
+
 // Badges
 import Badge from './badges/Badge.svelte'
 import BadgeIcon from './badges/BadgeIcon.svelte'
@@ -80,6 +88,12 @@ export {
   Alert,
   BorderAlert,
   InfoAlert,
+  // auth
+  Confirm,
+  ForgotPassword,
+  Login,
+  Register,
+  Reset,
   // Badges
   Badge,
   BadgeIcon,

package/list-group/List.svelte

@@ -1,79 +1,47 @@
-<script>
-  export let lists = [
-    {
-      title: "Profile",
-      icon: "",
-      link: "/profile",
-      rel: "",
-    },
-    {
-      title: "Settings",
-      icon: "",
-      link: "/settings",
-      rel: "",
-    },
-    {
-      title: "Messages",
-      icon: "",
-      link: "/message",
-      rel: "",
-    },
-    {
-      title: "Download",
-      icon: "",
-      link: "/download",
-      rel: "",
-    },
-  ];
-  // let len = count($lists);
-  // top rounded-t-lg border-b border-gray-200
-  // middle border-b border-gray-200
-  // bottom rounded-b-lg
-  const common =
-    "inline-flex relative items-center py-2 px-4 w-full text-sm font-medium hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white";
-  const topClass = `${common} rounded-t-lg border-b border-gray-200`;
-  const bottomClass = `${common} rounded-b-lg`;
-  const middleClass = `${common} border-b border-gray-200`;
-  let listClass;
+<script >export let lists;
+const common = 'inline-flex relative items-center py-2 px-4 w-full text-sm font-medium hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white';
+const topClass = `${common} rounded-t-lg border-b border-gray-200`;
+const bottomClass = `${common} rounded-b-lg`;
+const middleClass = `${common} border-b border-gray-200`;
 </script>
 
 <div
-  class="w-48 text-gray-900 bg-white rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+	class="w-48 text-gray-900 bg-white rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
 >
-  {#each lists as { title, icon, link, rel }, i}
-    {#if i === 0}
-      <button type="button" class={topClass}>
-        {#if icon}
-          <svelte:component this={icon} className="h-4 w-4 mr-2" />
-        {/if}
-        {#if link}
-          <a href={link} {rel}>{title}</a>
-        {:else}
-          {title} here
-        {/if}
-      </button>
-    {:else if i === lists.length - 1}
-      <button type="button" class={bottomClass}>
-        {#if icon}
-          <svelte:component this={icon} className="h-4 w-4 mr-2" />
-        {/if}
-        {#if link}
-          <a href={link} {rel}>{title}</a>
-        {:else}
-          {title}
-        {/if}
-      </button>
-    {:else}
-      <button type="button" class={middleClass}>
-        {#if icon}
-          <svelte:component this={icon} className="h-4 w-4 mr-2" />
-        {/if}
-        {#if link}
-          <a href={link} {rel}>{title}</a>
-        {:else}
-          {title}
-        {/if}
-      </button>
-    {/if}
-  {/each}
+	{#each lists as { name, icon, href, rel }, i}
+		{#if i === 0}
+			<button type="button" class={topClass}>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+				{/if}
+				{#if href}
+					<a {href} {rel}>{name}</a>
+				{:else}
+					{name} here
+				{/if}
+			</button>
+		{:else if i === lists.length - 1}
+			<button type="button" class={bottomClass}>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+				{/if}
+				{#if href}
+					<a {href} {rel}>{name}</a>
+				{:else}
+					{name}
+				{/if}
+			</button>
+		{:else}
+			<button type="button" class={middleClass}>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4 mr-2" />
+				{/if}
+				{#if href}
+					<a {href} {rel}>{name}</a>
+				{:else}
+					{name}
+				{/if}
+			</button>
+		{/if}
+	{/each}
 </div>

package/list-group/List.svelte.d.ts

@@ -1,33 +1,17 @@
-/** @typedef {typeof __propDef.props}  ListProps */
-/** @typedef {typeof __propDef.events}  ListEvents */
-/** @typedef {typeof __propDef.slots}  ListSlots */
-export default class List extends SvelteComponentTyped<{
-    lists?: {
-        title: string;
-        icon: string;
-        link: string;
-        rel: string;
-    }[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ListProps = typeof __propDef.props;
-export type ListEvents = typeof __propDef.events;
-export type ListSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { ButtonGroupType } from '../types';
 declare const __propDef: {
     props: {
-        lists?: {
-            title: string;
-            icon: string;
-            link: string;
-            rel: string;
-        }[];
+        lists: ButtonGroupType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type ListProps = typeof __propDef.props;
+export declare type ListEvents = typeof __propDef.events;
+export declare type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
 export {};

package/navbar/DropdownNavbar.svelte

@@ -16,21 +16,26 @@ export let logo = '/images/mkdir-logo.png';
 export let alt;
 export let textsize = 'text-sm';
 export let menus;
+export let navClass = 'px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700';
+const navDivClass = 'container flex flex-wrap justify-between items-center mx-auto';
+export let spanClass = 'self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white';
+export let buttonClass = 'inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500';
+export let dropdownDiv = 'z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600';
+export let dropdownLinkClassWithChild = `block py-2 px-4 ${textsize} text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white`;
+export let dropdownLinkClassWithoutChild = `block py-2 pr-4 pl-3  text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent ${textsize}`;
+export let liButtonClass = `flex justify-between items-center py-2 pr-4 pl-3 w-full ${textsize} font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent`;
 </script>
 
-<nav class="px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
-	<div class="container flex flex-wrap justify-between items-center mx-auto">
+<nav class={navClass}>
+	<div class={navDivClass}>
 		<a href="/" class="flex">
 			<img src={logo} {alt} />
-			<span
-				class="self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white"
-				>{sitename}</span
-			>
+			<span class={spanClass}>{sitename}</span>
 		</a>
 		<button
 			on:click={handleClickbtn}
 			type="button"
-			class="inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500"
+			class={buttonClass}
 			aria-controls="mobile-menu-2"
 			aria-expanded="false"
 		>
@@ -63,9 +68,7 @@ export let menus;
 				{#each menus as { id, name, href, rel, child }}
 					{#if child}
 						<li>
-							<button
-								on:click={() => handleDropdown(id)}
-								class="flex justify-between items-center py-2 pr-4 pl-3 w-full {textsize} font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent"
+							<button on:click={() => handleDropdown(id)} class={liButtonClass}
 								>{name}
 								<svg
 									class="ml-1 w-4 h-4"
@@ -84,18 +87,13 @@ export let menus;
 								<div
 									class:hidden
 									class:block
-									class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
+									class={dropdownDiv}
 									style="position: absolute; margin: 0px;"
 								>
 									<ul class="py-1" aria-labelledby="dropdownLargeButton">
 										{#each child as item}
 											<li>
-												<a
-													href={item.href}
-													{rel}
-													class="block py-2 px-4 text-{textsize} text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white"
-													>{item.name}</a
-												>
+												<a href={item.href} {rel} class={dropdownLinkClassWithChild}>{item.name}</a>
 											</li>
 										{/each}
 									</ul>
@@ -108,8 +106,7 @@ export let menus;
 								class:active={$page.url.pathname === href}
 								{href}
 								{rel}
-								class="block py-2 pr-4 pl-3  text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent {textsize}"
-								>{name}</a
+								class={dropdownLinkClassWithoutChild}>{name}</a
 							>
 						</li>
 					{/if}

package/navbar/DropdownNavbar.svelte.d.ts

@@ -7,6 +7,13 @@ declare const __propDef: {
         alt: string;
         textsize?: string;
         menus: NavbarType[];
+        navClass?: string;
+        spanClass?: string;
+        buttonClass?: string;
+        dropdownDiv?: string;
+        dropdownLinkClassWithChild?: string;
+        dropdownLinkClassWithoutChild?: string;
+        liButtonClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/navbar/Navbar.svelte

@@ -8,21 +8,23 @@ const handleClickbtn = () => {
     barHidden = !barHidden;
 };
 export let menus;
+export let navClass = 'px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700';
+const navDivClass = 'container flex flex-wrap justify-between items-center mx-auto';
+export let spanClass = 'self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white';
+export let buttonClass = 'inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500';
+export let liLinkClass = `block py-2 pr-4 pl-3  text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent ${textsize}`;
 </script>
 
-<nav class="px-2 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
-	<div class="container flex flex-wrap justify-between items-center mx-auto">
+<nav class={navClass}>
+	<div class={navDivClass}>
 		<a href="/" class="flex">
 			<img src={logo} {alt} />
-			<span
-				class="self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white"
-				>{sitename}</span
-			>
+			<span class={spanClass}>{sitename}</span>
 		</a>
 		<button
 			on:click={handleClickbtn}
 			type="button"
-			class="inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500"
+			class={buttonClass}
 			aria-controls="mobile-menu-2"
 			aria-expanded="false"
 		>
@@ -52,14 +54,9 @@ export let menus;
 		</button>
 		<div class:hidden={barHidden} class="hidden w-full md:block md:w-auto" id="mobile-menu">
 			<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
-				{#each menus as { name, link, rel }}
+				{#each menus as { name, href, rel }}
 					<li>
-						<a
-							class:active={$page.url.pathname === link}
-							href={link}
-							{rel}
-							class="block py-2 pr-4 pl-3  text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent {textsize}"
-							>{name}</a
+						<a class:active={$page.url.pathname === href} {href} {rel} class={liLinkClass}>{name}</a
 						>
 					</li>
 				{/each}

package/navbar/Navbar.svelte.d.ts

@@ -7,6 +7,10 @@ declare const __propDef: {
         alt?: string;
         textsize?: string;
         menus: LinkType[];
+        navClass?: string;
+        spanClass?: string;
+        buttonClass?: string;
+        liLinkClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.9.3",
+  "version": "0.9.6",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",
@@ -11,7 +11,7 @@
   "homepage": "https://github.com/shinokada/flowbite-svelte",
   "license": "MIT",
   "devDependencies": {
-    "@codewithshin/svelte-sidebar": "^0.2.3",
+    "@codewithshin/svelte-sidebar": "^0.4.2",
     "@codewithshin/svelte-simpleicons": "^0.2.2",
     "@codewithshin/svelte-utterances": "^0.1.2",
     "@playwright/test": "^1.19.1",
@@ -23,7 +23,6 @@
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
-    "flowbite-svelte": "^0.9.0",
     "mdsvex": "^0.10.5",
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.1",
@@ -75,6 +74,11 @@
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
     "./alerts/BorderAlert.svelte": "./alerts/BorderAlert.svelte",
     "./alerts/InfoAlert.svelte": "./alerts/InfoAlert.svelte",
+    "./auth/Confirm.svelte": "./auth/Confirm.svelte",
+    "./auth/ForgotPassword.svelte": "./auth/ForgotPassword.svelte",
+    "./auth/Login.svelte": "./auth/Login.svelte",
+    "./auth/Register.svelte": "./auth/Register.svelte",
+    "./auth/Reset.svelte": "./auth/Reset.svelte",
     "./badges/Badge.svelte": "./badges/Badge.svelte",
     "./badges/BadgeIcon.svelte": "./badges/BadgeIcon.svelte",
     "./badges/BadgeLink.svelte": "./badges/BadgeLink.svelte",