flowbite-svelte 0.6.0

package/README.md

@@ -0,0 +1,33 @@
+# FLOWBITE-SVELTE
+
+## Installation
+
+[Getting started](https://flowbite-svelte.vercel.app/getting-started)
+
+## Alert components
+
+[Alerts](https://flowbite-svelte.vercel.app/alerts)
+
+## Button component
+
+[Buttons](https://flowbite-svelte.vercel.app/buttons)
+
+## Card components
+
+[Cards](https://flowbite-svelte.vercel.app/cards)
+
+## List group component
+
+[List group](https://flowbite-svelte.vercel.app/list-group)
+
+## Modal components
+
+[Modals](https://flowbite-svelte.vercel.app/modals)
+
+## Navbar component
+
+[Navbars](https://flowbite-svelte.vercel.app/navbar)
+
+## Tab components
+
+[Tabs](https://flowbite-svelte.vercel.app/tabs)

package/accordions/AccordionDefault.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { onDestroy } from "svelte";
+  import { setContext } from "svelte";
+  import { createEventDispatcher } from "svelte";
+  import { writable } from "svelte/store";
+  export let duration = 0.2;
+  export let easing = "ease";
+  export let id = null;
+  const dispatch = createEventDispatcher();
+  // create a store for the children to access
+  const store = writable({ id, duration, easing });
+  // when the store changes, update the id prop
+  const unsubscribe = store.subscribe((s) => {
+    id = s.id;
+    dispatch("change", { id });
+  });
+  // when the id prop changes, update the store
+  $: store.update((s) => Object.assign(s, { id }));
+  // make the store available to children
+  setContext("svelte-collapsible-accordion", store);
+  onDestroy(unsubscribe);
+</script>
+
+<div>
+  <slot />
+</div>

package/accordions/AccordionDefault.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  AccordionDefaultProps */
+/** @typedef {typeof __propDef.events}  AccordionDefaultEvents */
+/** @typedef {typeof __propDef.slots}  AccordionDefaultSlots */
+export default class AccordionDefault extends SvelteComponentTyped<{
+    id?: any;
+    duration?: number;
+    easing?: string;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type AccordionDefaultProps = typeof __propDef.props;
+export type AccordionDefaultEvents = typeof __propDef.events;
+export type AccordionDefaultSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: any;
+        duration?: number;
+        easing?: string;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/accordions/AccordionItem.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { getContext } from "svelte";
+  import collapse from "svelte-collapse";
+  import {
+    ChevronDownIconSolid,
+    ChevronUpIconSolid,
+  } from "@codewithshin/svelte-heroicons";
+  export let id;
+  const store = getContext("svelte-collapsible-accordion");
+  $: params = {
+    open: $store.id === id,
+    duration: $store.duration,
+    easing: $store.easing,
+  };
+  const handleToggle = () => {
+    if (params.open) {
+      store.update((s) => Object.assign(s, { id: null }));
+    } else {
+      store.update((s) => Object.assign(s, { id }));
+    }
+  };
+</script>
+
+<h2 aria-expanded={params.open}>
+  <button
+    on:click={handleToggle}
+    type="button"
+    class:rounded-t-xl={id === "1"}
+    class:border-t-0={id !== "1"}
+    class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+  >
+    <span><slot name="header" /></span>
+    {#if params.open}
+      <ChevronUpIconSolid />
+    {:else}
+      <ChevronDownIconSolid />
+    {/if}
+  </button>
+</h2>
+<div use:collapse={params}>
+  <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
+    <slot name="body" />
+  </div>
+</div>

package/accordions/AccordionItem.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  AccordionItemProps */
+/** @typedef {typeof __propDef.events}  AccordionItemEvents */
+/** @typedef {typeof __propDef.slots}  AccordionItemSlots */
+export default class AccordionItem extends SvelteComponentTyped<{
+    id: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    body: {};
+}> {
+}
+export type AccordionItemProps = typeof __propDef.props;
+export type AccordionItemEvents = typeof __propDef.events;
+export type AccordionItemSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        body: {};
+    };
+};
+export {};

package/alerts/Alert.svelte

@@ -0,0 +1,111 @@
+<script>
+  import Button from "../buttons/Button.svelte";
+
+  // use blue (default), red, yellow, purple, green, indigo, gray, (no pink)
+  export let color = "blue";
+  export let alertId = "alert-1";
+  export let closeBtn = false;
+
+  let hidden = false;
+  const handleHide = () => {
+    hidden = !hidden;
+  };
+  let divClass;
+  let svgClass;
+  let slotClass;
+  let buttonClass;
+
+  if (color === "blue") {
+    divClass = "flex p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800";
+    slotClass = "ml-3 text-sm font-medium text-blue-700 dark:text-blue-800";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300";
+  } else if (color === "gray") {
+    divClass = "flex p-4 mb-4 bg-gray-100 rounded-lg dark:bg-gray-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-gray-700 dark:text-gray-800";
+    slotClass = "ml-3 text-sm font-medium text-gray-700 dark:text-gray-800";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300";
+  } else if (color === "red") {
+    divClass = "flex p-4 mb-4 bg-red-100 rounded-lg dark:bg-red-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-red-700 dark:text-red-800";
+    slotClass = "ml-3 text-sm font-medium text-red-700 dark:text-red-800";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300";
+  } else if (color === "yellow") {
+    divClass = "flex p-4 mb-4 bg-yellow-100 rounded-lg dark:bg-yellow-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-yellow-700 dark:text-yellow-800";
+    slotClass = "ml-3 text-sm font-medium text-yellow-700 dark:text-yellow-800";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300";
+  } else if (color === "green") {
+    divClass = "flex p-4 mb-4 bg-green-100 rounded-lg dark:bg-green-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-green-700 dark:text-green-800";
+    slotClass = "ml-3 text-sm font-medium text-green-700 dark:text-green-800";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300";
+  } else if (color === "indigo") {
+    divClass = "flex p-4 mb-4 bg-indigo-100 rounded-lg dark:bg-indigo-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-indigo-700 dark:text-indigo-800";
+    slotClass = "ml-3 text-sm font-medium text-indigo-700 dark:text-indigo-800";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-indigo-100 text-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-400 p-1.5 hover:bg-indigo-200 inline-flex h-8 w-8 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300";
+  } else if (color === "purple") {
+    divClass = "flex p-4 mb-4 bg-purple-100 rounded-lg dark:bg-purple-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-purple-700 dark:text-purple-800";
+    slotClass = "ml-3 text-sm font-medium text-purple-700 dark:text-purple-800";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-purple-100 text-purple-500 rounded-lg focus:ring-2 focus:ring-purple-400 p-1.5 hover:bg-purple-200 inline-flex h-8 w-8 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300";
+  } else if (color === "pink") {
+    divClass = "flex p-4 mb-4 bg-pink-100 rounded-lg dark:bg-pink-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-pink-700 dark:text-pink-800";
+    slotClass = "ml-3 text-sm font-medium text-pink-700 dark:text-pink-800";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-pink-100 text-pink-500 rounded-lg focus:ring-2 focus:ring-pink-400 p-1.5 hover:bg-pink-200 inline-flex h-8 w-8 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300";
+  } else {
+    divClass = "flex p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800";
+    slotClass = "ml-3 text-sm font-medium text-blue-700 dark:text-blue-800";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300";
+  }
+</script>
+
+<div id={alertId} class:hidden class={divClass} role="alert">
+  <svg
+    class={svgClass}
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      fill-rule="evenodd"
+      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+      clip-rule="evenodd"
+    /></svg
+  >
+  <div class={slotClass}>
+    <slot />
+  </div>
+  {#if closeBtn}
+    <button
+      on:click={handleHide}
+      type="button"
+      class={buttonClass}
+      aria-label="Close"
+    >
+      <span class="sr-only">Close</span>
+      <svg
+        class="w-5 h-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        /></svg
+      >
+    </button>
+  {/if}
+</div>

package/alerts/Alert.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  AlertProps */
+/** @typedef {typeof __propDef.events}  AlertEvents */
+/** @typedef {typeof __propDef.slots}  AlertSlots */
+export default class Alert extends SvelteComponentTyped<{
+    color?: string;
+    alertId?: string;
+    closeBtn?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string;
+        alertId?: string;
+        closeBtn?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/alerts/BorderAlert.svelte

@@ -0,0 +1,118 @@
+<script>
+  // use blue (default), red, green, yellow, and gray
+  export let color = "blue";
+  export let alertId = "alert-border-1";
+  export let closeBtn = false;
+  let hidden = false;
+  const handleHide = () => {
+    hidden = !hidden;
+  };
+
+  let divClass;
+  let svgClass;
+  let slotClass;
+  let buttonClass;
+
+  if (color === "blue") {
+    divClass =
+      "flex p-4 mb-4 bg-blue-100 border-t-4 border-blue-500 dark:bg-blue-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-blue-700";
+    slotClass = "ml-3 text-sm font-medium text-blue-700";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300";
+  } else if (color === "gray") {
+    divClass =
+      "flex p-4 mb-4 bg-gray-100 border-t-4 border-gray-500 dark:bg-gray-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-gray-700";
+    slotClass = "ml-3 text-sm font-medium text-gray-700";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300";
+  } else if (color === "red") {
+    divClass =
+      "flex p-4 mb-4 bg-red-100 border-t-4 border-red-500 dark:bg-red-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-red-700";
+    slotClass = "ml-3 text-sm font-medium text-red-700";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300";
+  } else if (color === "yellow") {
+    divClass =
+      "flex p-4 mb-4 bg-yellow-100 border-t-4 border-yellow-500 dark:bg-yellow-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-yellow-700";
+    slotClass = "ml-3 text-sm font-medium text-yellow-700";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300";
+  } else if (color === "green") {
+    divClass =
+      "flex p-4 mb-4 bg-green-100 border-t-4 border-green-500 dark:bg-green-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-green-700";
+    slotClass = "ml-3 text-sm font-medium text-green-700";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300";
+  } else if (color === "indigo") {
+    divClass =
+      "flex p-4 mb-4 bg-indigo-100 border-t-4 border-indigo-500 dark:bg-indigo-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-indigo-700";
+    slotClass = "ml-3 text-sm font-medium text-indigo-700";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-indigo-100 text-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-400 p-1.5 hover:bg-indigo-200 inline-flex h-8 w-8 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300";
+  } else if (color === "purple") {
+    divClass =
+      "flex p-4 mb-4 bg-purple-100 border-t-4 border-purple-500 dark:bg-purple-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-purple-700";
+    slotClass = "ml-3 text-sm font-medium text-purple-700";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-purple-100 text-purple-500 rounded-lg focus:ring-2 focus:ring-purple-400 p-1.5 hover:bg-purple-200 inline-flex h-8 w-8 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300";
+  } else if (color === "pink") {
+    divClass =
+      "flex p-4 mb-4 bg-pink-100 border-t-4 border-pink-500 dark:bg-pink-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-pink-700";
+    slotClass = "ml-3 text-sm font-medium text-pink-700";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-pink-100 text-pink-500 rounded-lg focus:ring-2 focus:ring-pink-400 p-1.5 hover:bg-pink-200 inline-flex h-8 w-8 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300";
+  } else {
+    divClass =
+      "flex p-4 mb-4 bg-blue-100 border-t-4 border-blue-500 dark:bg-blue-200";
+    svgClass = "flex-shrink-0 w-5 h-5 text-blue-700";
+    slotClass = "ml-3 text-sm font-medium text-blue-700";
+    buttonClass =
+      "ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300";
+  }
+</script>
+
+<div id={alertId} class:hidden class={divClass} role="alert">
+  <svg
+    class={svgClass}
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      fill-rule="evenodd"
+      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+      clip-rule="evenodd"
+    /></svg
+  >
+  <div class={slotClass}>
+    <slot />
+  </div>
+  {#if closeBtn}
+    <button
+      on:click={handleHide}
+      type="button"
+      class={buttonClass}
+      aria-label="Close"
+    >
+      <span class="sr-only">Dismiss</span>
+      <svg
+        class="w-5 h-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        /></svg
+      >
+    </button>
+  {/if}
+</div>

package/alerts/BorderAlert.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  BorderAlertProps */
+/** @typedef {typeof __propDef.events}  BorderAlertEvents */
+/** @typedef {typeof __propDef.slots}  BorderAlertSlots */
+export default class BorderAlert extends SvelteComponentTyped<{
+    color?: string;
+    alertId?: string;
+    closeBtn?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type BorderAlertProps = typeof __propDef.props;
+export type BorderAlertEvents = typeof __propDef.events;
+export type BorderAlertSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string;
+        alertId?: string;
+        closeBtn?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/alerts/InfoAlert.svelte

@@ -0,0 +1,125 @@
+<script>
+  // use blue (default), red, green, yellow, and gray
+  export let color = "blue";
+  export let alertId = "alert-additional-content-1";
+  export let infoLink = false;
+  export let closeBtn = false;
+  let hidden = false;
+  const handleHide = () => {
+    hidden = !hidden;
+  };
+
+  let divClass;
+  let svgClass;
+  let slotClass;
+  let buttonClass;
+
+  if (color === "blue") {
+    divClass = "p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200";
+    svgClass = "mr-2 w-5 h-5 text-blue-700 dark:text-blue-800";
+    slotClass = "mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800";
+    buttonClass =
+      "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900";
+  } else if (color === "gray") {
+    divClass = "p-4 mb-4 bg-gray-100 rounded-lg dark:bg-gray-200";
+    svgClass = "mr-2 w-5 h-5 text-gray-700 dark:text-gray-800";
+    slotClass = "mt-2 mb-4 text-sm text-gray-700 dark:text-gray-800";
+    buttonClass =
+      "text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-gray-800 dark:hover:bg-gray-900";
+  } else if (color === "red") {
+    divClass = "p-4 mb-4 bg-red-100 rounded-lg dark:bg-red-200";
+    svgClass = "mr-2 w-5 h-5 text-red-700 dark:text-red-800";
+    slotClass = "mt-2 mb-4 text-sm text-red-700 dark:text-red-800";
+    buttonClass =
+      "text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-red-800 dark:hover:bg-red-900";
+  } else if (color === "yellow") {
+    divClass = "p-4 mb-4 bg-yellow-100 rounded-lg dark:bg-yellow-200";
+    svgClass = "mr-2 w-5 h-5 text-yellow-700 dark:text-yellow-800";
+    slotClass = "mt-2 mb-4 text-sm text-yellow-700 dark:text-yellow-800";
+    buttonClass =
+      "text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-yellow-800 dark:hover:bg-yellow-900";
+  } else if (color === "green") {
+    divClass = "p-4 mb-4 bg-green-100 rounded-lg dark:bg-green-200";
+    svgClass = "mr-2 w-5 h-5 text-green-700 dark:text-green-800";
+    slotClass = "mt-2 mb-4 text-sm text-green-700 dark:text-green-800";
+    buttonClass =
+      "text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-green-800 dark:hover:bg-green-900";
+  } else if (color === "indigo") {
+    divClass = "p-4 mb-4 bg-indigo-100 rounded-lg dark:bg-indigo-200";
+    svgClass = "mr-2 w-5 h-5 text-indigo-700 dark:text-indigo-800";
+    slotClass = "mt-2 mb-4 text-sm text-indigo-700 dark:text-indigo-800";
+    buttonClass =
+      "text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-indigo-800 dark:hover:bg-indigo-900";
+  } else if (color === "purple") {
+    divClass = "p-4 mb-4 bg-purple-100 rounded-lg dark:bg-purple-200";
+    svgClass = "mr-2 w-5 h-5 text-purple-700 dark:text-purple-800";
+    slotClass = "mt-2 mb-4 text-sm text-purple-700 dark:text-purple-800";
+    buttonClass =
+      "text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-purple-800 dark:hover:bg-purple-900";
+  } else if (color === "pink") {
+    divClass = "p-4 mb-4 bg-pink-100 rounded-lg dark:bg-pink-200";
+    svgClass = "mr-2 w-5 h-5 text-pink-700 dark:text-pink-800";
+    slotClass = "mt-2 mb-4 text-sm text-pink-700 dark:text-pink-800";
+    buttonClass =
+      "text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-pink-800 dark:hover:bg-pink-900";
+  } else {
+    divClass = "p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200";
+    svgClass = "mr-2 w-5 h-5 text-blue-700 dark:text-blue-800";
+    slotClass = "mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800";
+    buttonClass =
+      "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900";
+  }
+</script>
+
+<div id={alertId} class:hidden class={divClass} role="alert">
+  <div class="flex items-center">
+    <svg
+      class={svgClass}
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+      ><path
+        fill-rule="evenodd"
+        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+        clip-rule="evenodd"
+      /></svg
+    >
+    <h3 class="text-lg font-medium text-{color}-700 dark:text-{color}-800">
+      <slot name="header">No header was provided</slot>
+    </h3>
+  </div>
+  <div class={slotClass}>
+    <slot>No content was provided.</slot>
+  </div>
+  <div class="flex">
+    {#if infoLink}
+      <button
+        type="button"
+        class="text-white bg-{color}-700 hover:bg-{color}-800 focus:ring-4 focus:ring-{color}-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-{color}-800 dark:hover:bg-{color}-900"
+      >
+        <svg
+          class="-ml-0.5 mr-2 h-4 w-4"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+          ><path d="M10 12a2 2 0 100-4 2 2 0 000 4z" /><path
+            fill-rule="evenodd"
+            d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
+            clip-rule="evenodd"
+          /></svg
+        >
+        <a href={infoLink} rel="external">View more</a>
+      </button>
+    {/if}
+    {#if closeBtn}
+      <button
+        on:click={handleHide}
+        type="button"
+        class="text-{color}-700 bg-transparent border border-{color}-700 hover:bg-{color}-800 hover:text-white focus:ring-4 focus:ring-{color}-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:border-{color}-800 dark:text-{color}-800 dark:hover:text-white"
+        aria-label="Close"
+      >
+        Dismiss
+      </button>
+    {/if}
+  </div>
+</div>

package/alerts/InfoAlert.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  InfoAlertProps */
+/** @typedef {typeof __propDef.events}  InfoAlertEvents */
+/** @typedef {typeof __propDef.slots}  InfoAlertSlots */
+export default class InfoAlert extends SvelteComponentTyped<{
+    color?: string;
+    alertId?: string;
+    closeBtn?: boolean;
+    infoLink?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+}> {
+}
+export type InfoAlertProps = typeof __propDef.props;
+export type InfoAlertEvents = typeof __propDef.events;
+export type InfoAlertSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string;
+        alertId?: string;
+        closeBtn?: boolean;
+        infoLink?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+    };
+};
+export {};

package/badges/Badge.svelte

@@ -0,0 +1,28 @@
+<script>
+  export let textSize = "text-xs"; // text-sm
+  export let name = "Read more";
+  export let color = "blue";
+
+  let badgeClass;
+  if (color === "blue") {
+    badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800`;
+  } else if (color === "gray") {
+    badgeClass = `bg-gray-100 text-gray-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300`;
+  } else if (color === "red") {
+    badgeClass = `bg-red-100 text-red-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-900`;
+  } else if (color === "green") {
+    badgeClass = `bg-green-100 text-green-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-900`;
+  } else if (color === "yellow") {
+    badgeClass = `bg-yellow-100 text-yellow-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-900`;
+  } else if (color === "indigo") {
+    badgeClass = `bg-indigo-100 text-indigo-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-900`;
+  } else if (color === "purple") {
+    badgeClass = `bg-purple-100 text-purple-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900`;
+  } else if (color === "pink") {
+    badgeClass = `bg-pink-100 text-pink-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-900`;
+  } else {
+    badgeClass = `bg-blue-100 text-blue-800 ${textSize} font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800`;
+  }
+</script>
+
+<span class={badgeClass}>{name}</span>