flowbite-svelte 0.9.4 → 0.9.7

package/cards/SignInCard.svelte

@@ -1,125 +1,128 @@
-<script>
-  export let title = "Sign in";
-  export let action;
-  export let btnSignInColor = "blue";
-  export let rememberMe = false;
-  export let signupLink = {
-    href: "",
-    rel: "",
-  };
-  export let lostPasswordLink = {
-    href: "",
-    rel: "",
-  };
-
-  let submitClass;
-
-  if (btnSignInColor === "blue") {
+<script >import Alert from '../alerts/Alert.svelte';
+export let login;
+export let title = 'Sign in';
+export let btnSignInColor = 'blue';
+export let rememberMe = false;
+export let signup;
+export let lostPassword;
+let email;
+let password;
+let error;
+let submitClass;
+if (btnSignInColor === 'blue') {
     submitClass =
-      "w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
-  } else if (btnSignInColor === "gray") {
+        'w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+}
+else if (btnSignInColor === 'gray') {
     submitClass =
-      "w-full text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800";
-  } else if (btnSignInColor === "red") {
+        'w-full text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
+}
+else if (btnSignInColor === 'red') {
     submitClass =
-      "w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800";
-  } else if (btnSignInColor === "yellow") {
+        'w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
+}
+else if (btnSignInColor === 'yellow') {
     submitClass =
-      "w-full text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800";
-  } else if (btnSignInColor === "green") {
+        'w-full text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
+}
+else if (btnSignInColor === 'green') {
     submitClass =
-      "w-full text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800";
-  } else if (btnSignInColor === "indigo") {
+        'w-full text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+}
+else if (btnSignInColor === 'indigo') {
     submitClass =
-      "w-full text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800";
-  } else if (btnSignInColor === "purple") {
+        'w-full text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
+}
+else if (btnSignInColor === 'purple') {
     submitClass =
-      "w-full text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800";
-  } else if (btnSignInColor === "pink") {
+        'w-full text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
+}
+else if (btnSignInColor === 'pink') {
     submitClass =
-      "w-full text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800";
-  } else {
+        'w-full text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
+}
+else {
     submitClass =
-      "w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
-  }
+        'w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+}
 </script>
 
 <div
-  class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700"
+	class="p-4 max-w-sm w-full bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700"
 >
-  <form class="space-y-6" {action}>
-    <h3 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
-    <div>
-      <label
-        for="email"
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        >Email</label
-      >
-      <input
-        type="email"
-        name="email"
-        id="email"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
-        placeholder="name@company.com"
-        required
-      />
-    </div>
-    <div>
-      <label
-        for="password"
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        >Your password</label
-      >
-      <input
-        type="password"
-        name="password"
-        id="password"
-        placeholder="••••••••"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
-        required
-      />
-    </div>
-    <div class="flex items-start">
-      {#if rememberMe}
-        <div class="flex items-start">
-          <div class="flex items-center h-5">
-            <input
-              id="remember"
-              aria-describedby="remember"
-              type="checkbox"
-              class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
-              required=""
-            />
-          </div>
-          <div class="ml-3 text-sm">
-            <label
-              for="remember"
-              class="font-medium text-gray-900 dark:text-gray-300"
-              >Remember me</label
-            >
-          </div>
-        </div>
-      {/if}
-      {#if lostPasswordLink}
-        <a
-          href={lostPasswordLink.href}
-          rel={lostPasswordLink.rel}
-          class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500"
-          >Lost Password?</a
-        >
-      {/if}
-    </div>
-    <button type="submit" class={submitClass}>Login to your account</button>
-
-    {#if signupLink}
-      <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
-        Not registered? <a
-          href={signupLink.href}
-          rel={signupLink.rel}
-          class="text-blue-700 hover:underline dark:text-blue-500"
-          >Create account</a
-        >
-      </div>
-    {/if}
-  </form>
+	<form class="space-y-6" on:submit|preventDefault={login}>
+		<h3 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
+		<div>
+			<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+				>Email</label
+			>
+			<input
+				type="email"
+				name="email"
+				id="email"
+				bind:value={email}
+				class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
+				placeholder="name@company.com"
+				required
+			/>
+		</div>
+		<div>
+			<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+				>Your password</label
+			>
+			<input
+				type="password"
+				name="password"
+				id="password"
+				placeholder="••••••••"
+				bind:value={password}
+				class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
+				required
+			/>
+		</div>
+		<div class="flex items-start">
+			{#if rememberMe}
+				<div class="flex items-start">
+					<div class="flex items-center h-5">
+						<input
+							id="remember"
+							aria-describedby="remember"
+							type="checkbox"
+							class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
+						/>
+					</div>
+					<div class="ml-3 text-sm">
+						<label for="remember" class="font-medium text-gray-900 dark:text-gray-300"
+							>Remember me</label
+						>
+					</div>
+				</div>
+			{/if}
+			{#if lostPassword}
+				<a
+					href={lostPassword.href}
+					rel={lostPassword.rel}
+					class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500"
+					>{lostPassword.name}</a
+				>
+			{/if}
+		</div>
+		{#if error}
+			<div class="mt-6">
+				<Alert alertId="alert-red" color="red" closeBtn>
+					{error}
+				</Alert>
+			</div>
+		{/if}
+		<button type="submit" class={submitClass}>Login to your account</button>
+		{#if signup}
+			<div class="text-sm font-medium text-gray-500 dark:text-gray-300">
+				Not registered? <a
+					href={signup.href}
+					rel={signup.rel}
+					class="text-blue-700 hover:underline dark:text-blue-500">{signup.name}</a
+				>
+			</div>
+		{/if}
+	</form>
 </div>

package/cards/SignInCard.svelte.d.ts

@@ -1,45 +1,22 @@
-/** @typedef {typeof __propDef.props}  SignInCardProps */
-/** @typedef {typeof __propDef.events}  SignInCardEvents */
-/** @typedef {typeof __propDef.slots}  SignInCardSlots */
-export default class SignInCard extends SvelteComponentTyped<{
-    action: any;
-    title?: string;
-    btnSignInColor?: string;
-    rememberMe?: boolean;
-    signupLink?: {
-        href: string;
-        rel: string;
-    };
-    lostPasswordLink?: {
-        href: string;
-        rel: string;
-    };
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SignInCardProps = typeof __propDef.props;
-export type SignInCardEvents = typeof __propDef.events;
-export type SignInCardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
+import type { AuthFunctionType, LinkType } from '../types';
 declare const __propDef: {
     props: {
-        action: any;
+        login: AuthFunctionType;
         title?: string;
         btnSignInColor?: string;
         rememberMe?: boolean;
-        signupLink?: {
-            href: string;
-            rel: string;
-        };
-        lostPasswordLink?: {
-            href: string;
-            rel: string;
-        };
+        signup: LinkType;
+        lostPassword: LinkType;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type SignInCardProps = typeof __propDef.props;
+export declare type SignInCardEvents = typeof __propDef.events;
+export declare type SignInCardSlots = typeof __propDef.slots;
+export default class SignInCard extends SvelteComponentTyped<SignInCardProps, SignInCardEvents, SignInCardSlots> {
+}
 export {};

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,