flowbite-svelte 0.6.0

package/cards/InteractiveCard.svelte.d.ts

@@ -0,0 +1,63 @@
+/** @typedef {typeof __propDef.props}  InteractiveCardProps */
+/** @typedef {typeof __propDef.events}  InteractiveCardEvents */
+/** @typedef {typeof __propDef.slots}  InteractiveCardSlots */
+export default class InteractiveCard extends SvelteComponentTyped<{
+    header?: string;
+    img?: {
+        src: string;
+        alt: string;
+    };
+    dropdownLinks?: {
+        href: string;
+        label: string;
+    }[];
+    content?: string;
+    buttonColor?: string;
+    link1?: {
+        href: string;
+        title: string;
+        rel: string;
+    };
+    link2?: {
+        href: string;
+        title: string;
+        rel: string;
+    };
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type InteractiveCardProps = typeof __propDef.props;
+export type InteractiveCardEvents = typeof __propDef.events;
+export type InteractiveCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        header?: string;
+        img?: {
+            src: string;
+            alt: string;
+        };
+        dropdownLinks?: {
+            href: string;
+            label: string;
+        }[];
+        content?: string;
+        buttonColor?: string;
+        link1?: {
+            href: string;
+            title: string;
+            rel: string;
+        };
+        link2?: {
+            href: string;
+            title: string;
+            rel: string;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/cards/ListCard.svelte

@@ -0,0 +1,82 @@
+<script>
+  export let lists = [
+    {
+      img: {
+        src: "/images/profile-picture-1.jpeg",
+        alt: "Neil Sims",
+      },
+      field1: "Neil Sims",
+      field2: "email@windster.com",
+      field3: "Advisor",
+    },
+    {
+      img: {
+        src: "/images/profile-picture-2.jpeg",
+        alt: "Bonnie Green",
+      },
+      field1: "Bonnie Green",
+      field2: "email@windster.com",
+      field3: "Developer",
+    },
+    {
+      img: {
+        src: "/images/profile-picture-3.jpeg",
+        alt: "Michael Gough",
+      },
+      field1: "Michael Gough",
+      field2: "email@windster.com",
+      field3: "Marketing",
+    },
+  ];
+  export let title = "Latest Customers";
+  export let action = {
+    link: "/#",
+    title: "View all",
+    rel: "",
+  };
+</script>
+
+<div
+  class="p-4 max-w-md bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700"
+>
+  <div class="flex justify-between items-center mb-4">
+    <h3 class="text-xl font-bold leading-none text-gray-900 dark:text-white">
+      {title}
+    </h3>
+    <a
+      href={action.link}
+      rel={action.rel}
+      class="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+    >
+      {action.title}
+    </a>
+  </div>
+  <div class="flow-root">
+    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
+      {#each lists as { img, field1, field2, field3 }}
+        <li class="py-3 sm:py-4">
+          <div class="flex items-center space-x-4">
+            <div class="flex-shrink-0">
+              <img class="w-8 h-8 rounded-full" src={img.src} alt={img.alt} />
+            </div>
+            <div class="flex-1 min-w-0">
+              <p
+                class="text-sm font-medium text-gray-900 truncate dark:text-white"
+              >
+                {field1}
+              </p>
+              <p class="text-sm text-gray-500 truncate dark:text-gray-400">
+                {field2}
+              </p>
+            </div>
+            <div
+              class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white"
+            >
+              {field3}
+            </div>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</div>

package/cards/ListCard.svelte.d.ts

@@ -0,0 +1,51 @@
+/** @typedef {typeof __propDef.props}  ListCardProps */
+/** @typedef {typeof __propDef.events}  ListCardEvents */
+/** @typedef {typeof __propDef.slots}  ListCardSlots */
+export default class ListCard extends SvelteComponentTyped<{
+    lists?: {
+        img: {
+            src: string;
+            alt: string;
+        };
+        field1: string;
+        field2: string;
+        field3: string;
+    }[];
+    title?: string;
+    action?: {
+        link: string;
+        title: string;
+        rel: string;
+    };
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ListCardProps = typeof __propDef.props;
+export type ListCardEvents = typeof __propDef.events;
+export type ListCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        lists?: {
+            img: {
+                src: string;
+                alt: string;
+            };
+            field1: string;
+            field2: string;
+            field3: string;
+        }[];
+        title?: string;
+        action?: {
+            link: string;
+            title: string;
+            rel: string;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/cards/SignInCard.svelte

@@ -0,0 +1,125 @@
+<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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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 {
+    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";
+  }
+</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"
+>
+  <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>
+</div>

package/cards/SignInCard.svelte.d.ts

@@ -0,0 +1,45 @@
+/** @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";
+declare const __propDef: {
+    props: {
+        action: any;
+        title?: string;
+        btnSignInColor?: string;
+        rememberMe?: boolean;
+        signupLink?: {
+            href: string;
+            rel: string;
+        };
+        lostPasswordLink?: {
+            href: string;
+            rel: string;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/darkmode/DarkMode.svelte

@@ -0,0 +1,78 @@
+<script>
+  import { onMount } from "svelte";
+  export let btnClass =
+    "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50";
+
+  let mode;
+
+  const toggleTheme = () => {
+    // console.log("clicked theme icon");
+    if (localStorage.getItem("color-theme") === "dark") {
+      console.log("it's dark");
+      mode = "dark";
+      window.document.documentElement.classList.remove("dark");
+      window.document.documentElement.classList.add("light");
+      localStorage.setItem("color-theme", "light");
+    } else {
+      console.log("it's light");
+      mode = "light";
+      window.document.documentElement.classList.remove("light");
+      window.document.documentElement.classList.add("dark");
+      localStorage.setItem("color-theme", "dark");
+    }
+  };
+
+  onMount(() => {
+    let themeToggleDarkIcon = document.getElementById("theme-toggle-dark-icon");
+    let themeToggleLightIcon = document.getElementById(
+      "theme-toggle-light-icon"
+    );
+    if (
+      localStorage.getItem("color-theme") === "dark" ||
+      (!("color-theme" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+      document.documentElement.classList.add("dark");
+      themeToggleDarkIcon.classList.add("hidden");
+    } else {
+      document.documentElement.classList.remove("dark");
+      themeToggleLightIcon.classList.add("hidden");
+    }
+  });
+</script>
+
+<button
+  on:click={toggleTheme}
+  aria-label="Dark mode"
+  id="theme-toggle"
+  type="button"
+  class={btnClass}
+>
+  <svg
+    class:hidden={mode === "light"}
+    on:click={() => (mode = "dark")}
+    id="theme-toggle-dark-icon"
+    class="hidden w-5 h-5"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
+    /></svg
+  >
+
+  <svg
+    class:hidden={mode === "dark"}
+    on:click={() => (mode = "light")}
+    id="theme-toggle-light-icon"
+    class="hidden w-5 h-5"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    /></svg
+  >
+</button>

package/darkmode/DarkMode.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  DarkModeProps */
+/** @typedef {typeof __propDef.events}  DarkModeEvents */
+/** @typedef {typeof __propDef.slots}  DarkModeSlots */
+export default class DarkMode extends SvelteComponentTyped<{
+    btnClass?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DarkModeProps = typeof __propDef.props;
+export type DarkModeEvents = typeof __propDef.events;
+export type DarkModeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        btnClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dropdowns/DropdownDefault.svelte

@@ -0,0 +1,117 @@
+<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") {
+    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") {
+    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") {
+    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-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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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") {
+    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 {
+    // 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>
+</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"
+>
+  {#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>
+</div>

package/dropdowns/DropdownDefault.svelte.d.ts

@@ -0,0 +1,51 @@
+/** @typedef {typeof __propDef.props}  DropdownDefaultProps */
+/** @typedef {typeof __propDef.events}  DropdownDefaultEvents */
+/** @typedef {typeof __propDef.slots}  DropdownDefaultSlots */
+export default class DropdownDefault extends SvelteComponentTyped<{
+    rounded?: boolean;
+    textSize?: string;
+    color?: string;
+    label?: 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";
+declare const __propDef: {
+    props: {
+        rounded?: boolean;
+        textSize?: string;
+        color?: string;
+        label?: string;
+        items?: ({
+            link: string;
+            label: string;
+            divider?: undefined;
+        } | {
+            link: string;
+            label: string;
+            divider: boolean;
+        })[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+    };
+};
+export {};

package/footer/SimpleFooter.svelte

@@ -0,0 +1,32 @@
+<script>
+  export let link = undefined;
+  export let siteName = "Svelte flow";
+  export let links = [
+    { name: "About", link: "about", rel: undefined },
+    { name: "Privacy Policy", link: "policy", rel: undefined },
+    { name: "Licensing", link: "licensing", rel: undefined },
+    { name: "Contact", link: "contact", rel: undefined },
+  ];
+  export let footerClass =
+    "p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800";
+  export let spanClass =
+    "text-sm text-gray-500 sm:text-center dark:text-gray-400";
+  export let ulClass = "flex flex-wrap items-center mt-3 sm:mt-0";
+  export let aClass =
+    "mr-4 text-sm text-gray-500 hover:underline md:mr-6 dark:text-gray-400";
+  export let spanLinkClass = "hover:underline";
+</script>
+
+<footer class={footerClass}>
+  <span class={spanClass}
+    >© 2022 <a href={link} class={spanLinkClass} target="_blank">{siteName}</a>.
+    All Rights Reserved.
+  </span>
+  <ul class={ulClass}>
+    {#each links as { name, link, rel }}
+      <li>
+        <a href={link} {rel} class={aClass}>{name}</a>
+      </li>
+    {/each}
+  </ul>
+</footer>