flowbite-svelte 0.6.0

package/buttons/GradientOutlineButton.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+  const handleClick = () => {
+    dispatch("handleClick");
+  };
+
+  export let textSize = "text-sm";
+  export let color = "purple2blue";
+  export let name = "Read more";
+  let btnClass;
+  let spanClass;
+
+  if (color === "purple2blue") {
+    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800`;
+    spanClass =
+      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
+  } else if (color === "cyan2blue") {
+    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:ring-cyan-200 dark:focus:ring-cyan-800`;
+    spanClass =
+      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
+  } else if (color === "green2blue") {
+    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800`;
+    spanClass =
+      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
+  } else if (color === "purple2pink") {
+    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800`;
+    spanClass =
+      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
+  } else if (color === "pink2orange") {
+    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800`;
+    spanClass =
+      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
+  } else if (color === "teal2lime") {
+    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:ring-lime-200 dark:focus:ring-lime-800`;
+    spanClass =
+      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
+  } else if (color === "red2yellow") {
+    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400`;
+    spanClass =
+      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
+  } else {
+    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800`;
+    spanClass =
+      "relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0";
+  }
+</script>
+
+<button class={btnClass}>
+  <span class={spanClass} on:click={handleClick}>{name}</span>
+</button>

package/buttons/GradientOutlineButton.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  GradientOutlineButtonProps */
+/** @typedef {typeof __propDef.events}  GradientOutlineButtonEvents */
+/** @typedef {typeof __propDef.slots}  GradientOutlineButtonSlots */
+export default class GradientOutlineButton extends SvelteComponentTyped<{
+    textSize?: string;
+    name?: string;
+    color?: string;
+}, {
+    handleClick: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type GradientOutlineButtonProps = typeof __propDef.props;
+export type GradientOutlineButtonEvents = typeof __propDef.events;
+export type GradientOutlineButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        textSize?: string;
+        name?: string;
+        color?: string;
+    };
+    events: {
+        handleClick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/cards/Card.svelte

@@ -0,0 +1,86 @@
+<script>
+  export let link;
+  export let rel;
+  export let alt;
+  export let img;
+  export let btnLabel = "Read more";
+  export let btnColor = "blue";
+  export let header =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
+  let buttonClass;
+  if (btnColor === "blue") {
+    buttonClass =
+      "inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+  } else if (btnColor === "gray") {
+    buttonClass =
+      "inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800";
+  } else if (btnColor === "red") {
+    buttonClass =
+      "inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800";
+  } else if (btnColor === "yellow") {
+    buttonClass =
+      "inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800";
+  } else if (btnColor === "green") {
+    buttonClass =
+      "inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800";
+  } else if (btnColor === "indigo") {
+    buttonClass =
+      "inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800";
+  } else if (btnColor === "purple") {
+    buttonClass =
+      "inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800";
+  } else if (btnColor === "pink") {
+    buttonClass =
+      "inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800";
+  } else {
+    buttonClass =
+      "inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+  }
+</script>
+
+<div
+  class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
+>
+  {#if img}
+    <a href={link} {rel}>
+      <img class="rounded-t-lg" src={img} {alt} />
+    </a>
+  {/if}
+  <div class="p-5">
+    {#if link}
+      <a href={link} {rel}>
+        <h5
+          class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
+        >
+          {header}
+        </h5>
+      </a>
+    {:else}
+      <h5
+        class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
+      >
+        {header}
+      </h5>
+    {/if}
+
+    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+      <slot />
+    </p>
+    {#if link}
+      <a href={link} {rel} class={buttonClass}>
+        {btnLabel}
+        <svg
+          class="ml-2 -mr-1 w-4 h-4"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+          ><path
+            fill-rule="evenodd"
+            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+            clip-rule="evenodd"
+          /></svg
+        >
+      </a>
+    {/if}
+  </div>
+</div>

package/cards/Card.svelte.d.ts

@@ -0,0 +1,39 @@
+/** @typedef {typeof __propDef.props}  CardProps */
+/** @typedef {typeof __propDef.events}  CardEvents */
+/** @typedef {typeof __propDef.slots}  CardSlots */
+export default class Card extends SvelteComponentTyped<{
+    link: any;
+    rel: any;
+    alt: any;
+    img: any;
+    header?: string;
+    btnLabel?: string;
+    btnColor?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        link: any;
+        rel: any;
+        alt: any;
+        img: any;
+        header?: string;
+        btnLabel?: string;
+        btnColor?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/cards/CtaCard.svelte

@@ -0,0 +1,63 @@
+<script>
+  import Button from "../buttons/Button.svelte";
+  export let title = "Work fast from anywhere";
+  export let headColor = "gray";
+  export let btns = [
+    {
+      size: "base",
+      name: "Download it",
+      type: "blue",
+      link: "/about",
+      rel: undefined,
+      rounded: null,
+    },
+    {
+      size: "base",
+      name: "Get in on",
+      type: "red-outline",
+      link: "/#",
+      rel: undefined,
+      rounded: null,
+    },
+  ];
+  let headClass;
+  if (headColor === "blue") {
+    headClass = "mb-2 text-3xl font-bold text-blue-900 dark:text-white";
+  } else if (headColor === "gray") {
+    headClass = "mb-2 text-3xl font-bold text-gray-900 dark:text-white";
+  } else if (headColor === "red") {
+    headClass = "mb-2 text-3xl font-bold text-red-900 dark:text-white";
+  } else if (headColor === "yellow") {
+    headClass = "mb-2 text-3xl font-bold text-yellow-900 dark:text-white";
+  } else if (headColor === "green") {
+    headClass = "mb-2 text-3xl font-bold text-green-900 dark:text-white";
+  } else if (headColor === "indigo") {
+    headClass = "mb-2 text-3xl font-bold text-indigo-900 dark:text-white";
+  } else if (headColor === "purple") {
+    headClass = "mb-2 text-3xl font-bold text-purple-900 dark:text-white";
+  } else if (headColor === "pink") {
+    headClass = "mb-2 text-3xl font-bold text-pink-900 dark:text-white";
+  } else {
+    headClass = "mb-2 text-3xl font-bold text-blue-900 dark:text-white";
+  }
+</script>
+
+<div
+  class="p-4 w-full text-center bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700"
+>
+  <h3 class={headClass}>
+    {title}
+  </h3>
+  <p class="mb-5 text-base text-gray-500 sm:text-lg dark:text-gray-400">
+    <slot />
+  </p>
+  <div
+    class="justify-center items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4"
+  >
+    {#each btns as { name, size, type, link, rel, rounded }}
+      <a href={link} {rel}>
+        <Button {name} {size} {type} {rounded} />
+      </a>
+    {/each}
+  </div>
+</div>

package/cards/CtaCard.svelte.d.ts

@@ -0,0 +1,45 @@
+/** @typedef {typeof __propDef.props}  CtaCardProps */
+/** @typedef {typeof __propDef.events}  CtaCardEvents */
+/** @typedef {typeof __propDef.slots}  CtaCardSlots */
+export default class CtaCard extends SvelteComponentTyped<{
+    title?: string;
+    headColor?: string;
+    btns?: {
+        size: string;
+        name: string;
+        type: string;
+        link: string;
+        rel: any;
+        rounded: any;
+    }[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type CtaCardProps = typeof __propDef.props;
+export type CtaCardEvents = typeof __propDef.events;
+export type CtaCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string;
+        headColor?: string;
+        btns?: {
+            size: string;
+            name: string;
+            type: string;
+            link: string;
+            rel: any;
+            rounded: any;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/cards/EcommerceCard.svelte

@@ -0,0 +1,98 @@
+<script>
+  export let img = {
+    src: "/images/product-1.png",
+    alt: "product image",
+  };
+  export let link = "/#";
+  export let btnColor = "blue";
+  export let rel;
+  export let title =
+    "Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport";
+  export let stars = "5.0";
+  export let price = "$555";
+  let spanClass;
+  let linkClass;
+  if (btnColor === "blue") {
+    spanClass =
+      "bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3";
+    linkClass =
+      "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 (btnColor === "gray") {
+    spanClass =
+      "bg-gray-100 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-200 dark:text-gray-800 ml-3";
+    linkClass =
+      "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 (btnColor === "red") {
+    spanClass =
+      "bg-red-100 text-red-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-800 ml-3";
+    linkClass =
+      "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 (btnColor === "yellow") {
+    spanClass =
+      "bg-yellow-100 text-yellow-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-800 ml-3";
+    linkClass =
+      "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 (btnColor === "green") {
+    spanClass =
+      "bg-green-100 text-green-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-800 ml-3";
+    linkClass =
+      "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 (btnColor === "indigo") {
+    spanClass =
+      "bg-indigo-100 text-indigo-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-800 ml-3";
+    linkClass =
+      "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 (btnColor === "purple") {
+    spanClass =
+      "bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-800 ml-3";
+    linkClass =
+      "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 (btnColor === "pink") {
+    spanClass =
+      "bg-pink-100 text-pink-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-800 ml-3";
+    linkClass =
+      "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 {
+    spanClass =
+      "bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3";
+    linkClass =
+      "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="max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700"
+>
+  <a href={link} {rel}>
+    <img class="p-8 rounded-t-lg" src={img.src} alt={img.alt} />
+  </a>
+  <div class="px-5 pb-5">
+    <a href={link} {rel}>
+      <h3
+        class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white"
+      >
+        {title}
+      </h3>
+    </a>
+    <div class="flex items-center mt-2.5 mb-5">
+      {#each { length: parseInt(stars) } as _, i}
+        <svg
+          class="w-5 h-5 text-yellow-300"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+          ><path
+            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+          /></svg
+        >
+      {/each}
+      <span class={spanClass}>{stars}</span>
+    </div>
+    <div class="flex justify-between items-center">
+      <span class="text-3xl font-bold text-gray-900 dark:text-white"
+        >{price}</span
+      >
+      <a href={link} {rel} class={linkClass}>Add to cart</a>
+    </div>
+  </div>
+</div>

package/cards/EcommerceCard.svelte.d.ts

@@ -0,0 +1,41 @@
+/** @typedef {typeof __propDef.props}  EcommerceCardProps */
+/** @typedef {typeof __propDef.events}  EcommerceCardEvents */
+/** @typedef {typeof __propDef.slots}  EcommerceCardSlots */
+export default class EcommerceCard extends SvelteComponentTyped<{
+    rel: any;
+    link?: string;
+    btnColor?: string;
+    img?: {
+        src: string;
+        alt: string;
+    };
+    title?: string;
+    stars?: string;
+    price?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type EcommerceCardProps = typeof __propDef.props;
+export type EcommerceCardEvents = typeof __propDef.events;
+export type EcommerceCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        rel: any;
+        link?: string;
+        btnColor?: string;
+        img?: {
+            src: string;
+            alt: string;
+        };
+        title?: string;
+        stars?: string;
+        price?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/cards/HorizontalCard.svelte

@@ -0,0 +1,29 @@
+<script>
+  export let link;
+  export let rel;
+  export let img = "/images/image-4.jpeg";
+  export let alt;
+  export let header = "Lorem ipsum dolor sit ametit.";
+</script>
+
+<a
+  href={link}
+  {rel}
+  class="flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
+>
+  <img
+    class="object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
+    src={img}
+    {alt}
+  />
+  <div class="flex flex-col justify-between p-4 leading-normal">
+    <h5
+      class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
+    >
+      {header}
+    </h5>
+    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+      <slot />
+    </p>
+  </div>
+</a>

package/cards/HorizontalCard.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  HorizontalCardProps */
+/** @typedef {typeof __propDef.events}  HorizontalCardEvents */
+/** @typedef {typeof __propDef.slots}  HorizontalCardSlots */
+export default class HorizontalCard extends SvelteComponentTyped<{
+    link: any;
+    rel: any;
+    alt: any;
+    header?: string;
+    img?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type HorizontalCardProps = typeof __propDef.props;
+export type HorizontalCardEvents = typeof __propDef.events;
+export type HorizontalCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        link: any;
+        rel: any;
+        alt: any;
+        header?: string;
+        img?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/cards/InteractiveCard.svelte

@@ -0,0 +1,127 @@
+<script>
+  let isOpen = true;
+  const toggleDropdown = () => {
+    isOpen = !isOpen;
+  };
+
+  export let dropdownLinks = [
+    {
+      href: "/",
+      label: "label 1",
+    },
+    {
+      href: "about",
+      label: "About",
+    },
+    {
+      href: "profile",
+      label: "Profile",
+    },
+  ];
+  export let img = {
+    src: "",
+    alt: "",
+  };
+  export let header = "Lorem ipsum";
+  export let content = "Proin efficitur purus felis.";
+  export let buttonColor = "blue";
+  export let link1 = { href: "", title: "", rel: "" };
+  export let link2 = { href: "", title: "", rel: "" };
+  let linkClass;
+  if (buttonColor === "blue") {
+    linkClass =
+      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+  } else if (buttonColor === "gray") {
+    linkClass =
+      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800";
+  } else if (buttonColor === "red") {
+    linkClass =
+      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800";
+  } else if (buttonColor === "yellow") {
+    linkClass =
+      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800";
+  } else if (buttonColor === "green") {
+    linkClass =
+      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800";
+  } else if (buttonColor === "indigo") {
+    linkClass =
+      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800";
+  } else if (buttonColor === "purple") {
+    linkClass =
+      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800";
+  } else if (buttonColor === "pink") {
+    linkClass =
+      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800";
+  } else {
+    linkClass =
+      "inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+  }
+</script>
+
+<div
+  class="max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
+>
+  <div class="flex justify-end px-4 pt-4">
+    <button
+      id="dropdownButton"
+      on:click={toggleDropdown}
+      class="sm:inline-block 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-1.5"
+      type="button"
+    >
+      <svg
+        class="w-6 h-6"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+        ><path
+          d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
+        /></svg
+      >
+    </button>
+
+    <div
+      id="dropdown"
+      class:hidden={isOpen}
+      class:block={!isOpen}
+      class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 absolute"
+    >
+      <ul class="py-1" aria-labelledby="dropdownButton">
+        {#each dropdownLinks as { href, label, rel }}
+          <li>
+            <a
+              {href}
+              {rel}
+              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>
+  </div>
+
+  <div class="flex flex-col items-center pb-10">
+    <img
+      class="mb-3 w-24 h-24 rounded-full shadow-lg"
+      src={img.src}
+      alt={img.alt}
+    />
+    <h3 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
+      {header}
+    </h3>
+    <span class="text-sm text-gray-500 dark:text-gray-400">{content}</span>
+    <div class="flex mt-4 space-x-3 lg:mt-6">
+      {#if link1.href}
+        <a href={link1.href} rel={link1.rel} class={linkClass}>{link1.title}</a>
+      {/if}
+      {#if link2.href}
+        <a
+          href={link2.href}
+          rel={link2.rel}
+          class="inline-flex items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800"
+          >{link2.title}</a
+        >
+      {/if}
+    </div>
+  </div>
+</div>