flowbite-svelte 0.9.4 → 0.9.5

package/dropdowns/DropdownDefault.svelte

@@ -1,117 +1,108 @@
-<script>
-  export let label = "Dropdown button";
-  export let rounded = false;
-  export let textSize = "text-sm";
-  export let color = "blue";
-
-  let paddings;
-  if (textSize === "text-xs") {
-    paddings = "py-2 px-3";
-  } else if (textSize === "text-sm") {
-    paddings = "py-2.5 px-5";
-  } else if (textSize === "text-base") {
-    paddings = "py-3 px-6";
-  } else {
-    paddings = "py-2.5 px-5";
-  }
-
-  let buttonClass;
-  let round = rounded ? "rounded-full" : "rounded-lg";
-
-  let toggleHidden = true;
-
-  const handleToggle = () => {
-    console.log("toggle clicked.");
+<script >export let label = 'Dropdown button';
+export let rounded = false;
+export let textSize = 'text-sm';
+export let color = 'blue';
+let paddings;
+if (textSize === 'text-xs') {
+    paddings = 'py-2 px-3';
+}
+else if (textSize === 'text-sm') {
+    paddings = 'py-2.5 px-5';
+}
+else if (textSize === 'text-base') {
+    paddings = 'py-3 px-6';
+}
+else {
+    paddings = 'py-2.5 px-5';
+}
+let buttonClass;
+let round = rounded ? 'rounded-full' : 'rounded-lg';
+let toggleHidden = true;
+const handleToggle = () => {
+    console.log('toggle clicked.');
     toggleHidden = !toggleHidden;
-  };
-
-  export let items = [
-    {
-      link: "/",
-      label: "Dashboard",
-    },
-    {
-      link: "/",
-      label: "Settings",
-      divider: true,
-    },
-    {
-      link: "/",
-      label: "Sign out",
-    },
-  ];
-  if (color === "blue") {
+};
+export let items;
+if (color === 'blue') {
     buttonClass = `inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
-  } else if (color === "blue-outline") {
+}
+else if (color === 'blue-outline') {
     buttonClass = `inline-flex items-center text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
-  } else if (color === "dark") {
+}
+else if (color === 'dark') {
     buttonClass =
-      buttonClass = `inline-flex items-center text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700`;
-  } else if (color === "dark-outline") {
+        buttonClass = `inline-flex items-center text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700`;
+}
+else if (color === 'dark-outline') {
     buttonClass = `inline-flex items-center text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
-  } else if (color === "light") {
+}
+else if (color === 'light') {
     buttonClass = `inline-flex items-center text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800`;
-  } else if (color === "green") {
+}
+else if (color === 'green') {
     buttonClass = `inline-flex items-center text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800`;
-  } else if (color === "green-outline") {
+}
+else if (color === 'green-outline') {
     buttonClass = `inline-flex items-center text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
-  } else if (color === "red") {
+}
+else if (color === 'red') {
     buttonClass = `inline-flex items-center text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900`;
-  } else if (color === "red-outline") {
+}
+else if (color === 'red-outline') {
     buttonClass = `inline-flex items-center text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
-  } else if (color === "yellow") {
+}
+else if (color === 'yellow') {
     buttonClass = `inline-flex items-center text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:focus:ring-yellow-900`;
-  } else if (color === "yellow-outline") {
+}
+else if (color === 'yellow-outline') {
     buttonClass = `inline-flex items-center text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
-  } else if (color === "purple") {
+}
+else if (color === 'purple') {
     buttonClass = `inline-flex items-center text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium ${round} ${textSize} ${paddings} text-center mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900`;
-  } else if (color === "purple-outline") {
+}
+else if (color === 'purple-outline') {
     buttonClass = `inline-flex items-center text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg ${textSize} ${paddings} text-center mr-2 mb-2 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
-  } else {
+}
+else {
     // blue
     buttonClass = `inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
-  }
+}
 </script>
 
 <button on:click={handleToggle} class={buttonClass} type="button"
-  >{label}
-  <svg
-    class="ml-2 w-4 h-4"
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    ><path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="M19 9l-7 7-7-7"
-    />
-  </svg>
+	>{label}
+	<svg
+		class="ml-2 w-4 h-4"
+		fill="none"
+		stroke="currentColor"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+	</svg>
 </button>
 
 <div
-  class:hidden={toggleHidden}
-  class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+	class:hidden={toggleHidden}
+	class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
 >
-  {#if $$slots.header}
-    <div class="py-3 px-4 text-gray-900 dark:text-white">
-      <slot name="header" />
-    </div>
-  {/if}
-  <ul class="py-1" aria-labelledby="dropdownButton">
-    {#each items as { link, label, divider }}
-      <li
-        class:border-b={divider}
-        class:border-gray-100={divider}
-        class:dark:border-gray-500={divider}
-      >
-        <a
-          href={link}
-          class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-          >{label}</a
-        >
-      </li>
-    {/each}
-  </ul>
+	{#if $$slots.header}
+		<div class="py-3 px-4 text-gray-900 dark:text-white">
+			<slot name="header" />
+		</div>
+	{/if}
+	<ul class="py-1" aria-labelledby="dropdownButton">
+		{#each items as { href, name, divider }}
+			<li
+				class:border-b={divider}
+				class:border-gray-100={divider}
+				class:dark:border-gray-500={divider}
+			>
+				<a
+					{href}
+					class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+					>{name}</a
+				>
+			</li>
+		{/each}
+	</ul>
 </div>

package/dropdowns/DropdownDefault.svelte.d.ts

@@ -1,45 +1,12 @@
-/** @typedef {typeof __propDef.props}  DropdownDefaultProps */
-/** @typedef {typeof __propDef.events}  DropdownDefaultEvents */
-/** @typedef {typeof __propDef.slots}  DropdownDefaultSlots */
-export default class DropdownDefault extends SvelteComponentTyped<{
-    label?: string;
-    rounded?: boolean;
-    textSize?: string;
-    color?: string;
-    items?: ({
-        link: string;
-        label: string;
-        divider?: undefined;
-    } | {
-        link: string;
-        label: string;
-        divider: boolean;
-    })[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-}> {
-}
-export type DropdownDefaultProps = typeof __propDef.props;
-export type DropdownDefaultEvents = typeof __propDef.events;
-export type DropdownDefaultSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { DropdownType } from '../types';
 declare const __propDef: {
     props: {
         label?: string;
         rounded?: boolean;
         textSize?: string;
         color?: string;
-        items?: ({
-            link: string;
-            label: string;
-            divider?: undefined;
-        } | {
-            link: string;
-            label: string;
-            divider: boolean;
-        })[];
+        items: DropdownType[];
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -48,4 +15,9 @@ declare const __propDef: {
         header: {};
     };
 };
+export declare type DropdownDefaultProps = typeof __propDef.props;
+export declare type DropdownDefaultEvents = typeof __propDef.events;
+export declare type DropdownDefaultSlots = typeof __propDef.slots;
+export default class DropdownDefault extends SvelteComponentTyped<DropdownDefaultProps, DropdownDefaultEvents, DropdownDefaultSlots> {
+}
 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"
 		>
@@ -54,12 +56,7 @@ export let menus;
 			<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, href, rel }}
 					<li>
-						<a
-							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
+						<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.4",
+  "version": "0.9.5",
   "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",
@@ -74,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",