flowbite-svelte 0.10.11 → 0.12.0

package/sidebars/Sidebar.svelte

@@ -0,0 +1,101 @@
+<script >import { slide } from 'svelte/transition';
+export let site;
+export let links;
+export let cta;
+let isOpen = false;
+let activeDropdown = undefined;
+const handleDropdown = (id) => {
+    isOpen = !isOpen;
+    activeDropdown = id;
+};
+</script>
+
+<aside class="w-64" aria-label="Sidebar">
+	<div class="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800">
+		{#if site}
+			<a href={site.href} class="flex items-center pl-2.5 mb-5">
+				<img src={site.img} class="h-6 mr-3 sm:h-7" alt={site.name} />
+				<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white"
+					>{site.name}</span
+				>
+			</a>
+		{/if}
+		<ul class="space-y-2">
+			{#each links as link (link.id)}
+				{#if link.children}
+					<li>
+						<button
+							type="button"
+							on:click={() => handleDropdown(link.id)}
+							class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+							aria-controls="dropdown"
+							data-collapse-toggle="dropdown"
+						>
+							{#if link.icon}
+								<svelte:component this={link.icon} className="h-4 w-4 mr-2" />
+							{/if}
+							<span class="flex-1 ml-3 text-left whitespace-nowrap" sidebar-toggle-item=""
+								>{link.name}</span
+							>
+							<svg
+								sidebar-toggle-item=""
+								class="w-6 h-6"
+								fill="currentColor"
+								viewBox="0 0 20 20"
+								xmlns="http://www.w3.org/2000/svg"
+								><path
+									fill-rule="evenodd"
+									d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+									clip-rule="evenodd"
+								/></svg
+							>
+						</button>
+						{#if isOpen && link.id == activeDropdown}
+							<ul id="dropdown" class="py-2 space-y-2" transition:slide={{ duration: 500 }}>
+								{#each link.children as child}
+									<li>
+										<a
+											href={child.href}
+											rel={child.rel}
+											class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+											>{child.name}</a
+										>
+									</li>
+								{/each}
+							</ul>
+						{/if}
+					</li>
+				{:else}
+					<li>
+						<a
+							href={link.href}
+							rel={link.rel}
+							class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
+						>
+							{#if link.icon}
+								<svelte:component this={link.icon} className="h-4 w-4 mr-2" />
+							{/if}
+							<span class="ml-3">{link.name}</span>
+							{#if link.subtext}
+								{@html link.subtext}
+							{/if}
+						</a>
+					</li>
+				{/if}
+			{/each}
+		</ul>
+		{#if cta}
+			<div id="dropdown-cta" class="p-4 mt-6 bg-blue-50 rounded-lg dark:bg-blue-900" role="alert">
+				<div class="flex items-center mb-3">
+					<span
+						class="bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900"
+						>{cta.label}</span
+					>
+				</div>
+				<p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
+					{cta.text}
+				</p>
+			</div>
+		{/if}
+	</div>
+</aside>

package/sidebars/Sidebar.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SiteType, SidebarType, SidebarCtaType } from '../types';
+declare const __propDef: {
+    props: {
+        site: SiteType;
+        links: SidebarType[];
+        cta: SidebarCtaType;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SidebarProps = typeof __propDef.props;
+export declare type SidebarEvents = typeof __propDef.events;
+export declare type SidebarSlots = typeof __propDef.slots;
+export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
+}
+export {};

package/tabs/InteractiveTabs.svelte

@@ -30,9 +30,13 @@ export let tabs;
 				role="tabpanel"
 				aria-labelledby="{name}-tab"
 			>
-				<p class="text-sm text-gray-500 dark:text-gray-400">
-					{content}
-				</p>
+				{#if typeof content === 'string'}
+					<p class="text-sm text-gray-500 dark:text-gray-400">
+						{content}
+					</p>
+				{:else}
+					<svelte:component this={content} />
+				{/if}
 			</div>
 		{/if}
 	{/each}

package/timelines/Activity.svelte

@@ -0,0 +1,6 @@
+<script >export let olClass = 'relative border-l border-gray-200 dark:border-gray-700';
+</script>
+
+<ol class={olClass}>
+	<slot />
+</ol>

package/timelines/Activity.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        olClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ActivityProps = typeof __propDef.props;
+export declare type ActivityEvents = typeof __propDef.events;
+export declare type ActivitySlots = typeof __propDef.slots;
+export default class Activity extends SvelteComponentTyped<ActivityProps, ActivityEvents, ActivitySlots> {
+}
+export {};

package/timelines/ActivityItem.svelte

@@ -0,0 +1,29 @@
+<script >export let activities;
+</script>
+
+{#each activities as { title, date, src, alt, text }}
+	<li class="mb-10 ml-6">
+		<span
+			class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900"
+		>
+			<img class="rounded-full shadow-lg" {src} {alt} />
+		</span>
+		<div
+			class="p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600"
+		>
+			<div class="justify-between items-center mb-3 sm:flex">
+				<time class="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">{date}</time>
+				<div class="text-sm font-normal text-gray-500 lex dark:text-gray-300">
+					{@html title}
+				</div>
+			</div>
+			{#if text}
+				<div
+					class="p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300"
+				>
+					{@html text}
+				</div>
+			{/if}
+		</div>
+	</li>
+{/each}

package/timelines/ActivityItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ActivityType } from '../types';
+declare const __propDef: {
+    props: {
+        activities: ActivityType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ActivityItemProps = typeof __propDef.props;
+export declare type ActivityItemEvents = typeof __propDef.events;
+export declare type ActivityItemSlots = typeof __propDef.slots;
+export default class ActivityItem extends SvelteComponentTyped<ActivityItemProps, ActivityItemEvents, ActivityItemSlots> {
+}
+export {};

package/timelines/Group.svelte

@@ -0,0 +1,11 @@
+<script >export let divClass = 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700';
+export let timeClass = 'text-lg font-semibold text-gray-900 dark:text-white';
+export let date;
+</script>
+
+<div class={divClass}>
+	<time class={timeClass}>{date}</time>
+	<ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
+		<slot />
+	</ol>
+</div>

package/timelines/Group.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        divClass?: string;
+        timeClass?: string;
+        date: Date | string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type GroupProps = typeof __propDef.props;
+export declare type GroupEvents = typeof __propDef.events;
+export declare type GroupSlots = typeof __propDef.slots;
+export default class Group extends SvelteComponentTyped<GroupProps, GroupEvents, GroupSlots> {
+}
+export {};

package/timelines/GroupItem.svelte

@@ -0,0 +1,49 @@
+<script >export let timelines;
+</script>
+
+{#each timelines as { title, src, alt, isPrivate, href, comment }}
+	<li>
+		<a {href} class="block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
+			<img class="mr-3 mb-3 w-12 h-12 rounded-full sm:mb-0" {src} {alt} />
+			<div class="text-gray-600 dark:text-gray-400">
+				<div class="text-base font-normal">
+					{@html title}
+				</div>
+				{#if comment}
+					<div class="text-sm font-normal">{comment}</div>
+				{/if}
+				<span class="inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400">
+					{#if isPrivate}
+						<svg
+							class="mr-1 w-3 h-3"
+							fill="currentColor"
+							viewBox="0 0 20 20"
+							xmlns="http://www.w3.org/2000/svg"
+							><path
+								fill-rule="evenodd"
+								d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
+								clip-rule="evenodd"
+							/><path
+								d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"
+							/></svg
+						>
+						Private
+					{:else}
+						<svg
+							class="mr-1 w-3 h-3"
+							fill="currentColor"
+							viewBox="0 0 20 20"
+							xmlns="http://www.w3.org/2000/svg"
+							><path
+								fill-rule="evenodd"
+								d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z"
+								clip-rule="evenodd"
+							/></svg
+						>
+						Public
+					{/if}
+				</span>
+			</div>
+		</a>
+	</li>
+{/each}

package/timelines/GroupItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GroupTimelineType } from '../types';
+declare const __propDef: {
+    props: {
+        timelines: GroupTimelineType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type GroupItemProps = typeof __propDef.props;
+export declare type GroupItemEvents = typeof __propDef.events;
+export declare type GroupItemSlots = typeof __propDef.slots;
+export default class GroupItem extends SvelteComponentTyped<GroupItemProps, GroupItemEvents, GroupItemSlots> {
+}
+export {};

package/timelines/Timeline.svelte

@@ -0,0 +1,6 @@
+<script >export let olClass = 'relative border-l border-gray-200 dark:border-gray-700';
+</script>
+
+<ol class={olClass}>
+	<slot />
+</ol>

package/timelines/Timeline.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        olClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TimelineProps = typeof __propDef.props;
+export declare type TimelineEvents = typeof __propDef.events;
+export declare type TimelineSlots = typeof __propDef.slots;
+export default class Timeline extends SvelteComponentTyped<TimelineProps, TimelineEvents, TimelineSlots> {
+}
+export {};

package/timelines/TimelineHorizontal.svelte

@@ -0,0 +1,6 @@
+<script >export let olClass = 'items-center sm:flex';
+</script>
+
+<ol class={olClass}>
+	<slot />
+</ol>

package/timelines/TimelineHorizontal.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        olClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TimelineHorizontalProps = typeof __propDef.props;
+export declare type TimelineHorizontalEvents = typeof __propDef.events;
+export declare type TimelineHorizontalSlots = typeof __propDef.slots;
+export default class TimelineHorizontal extends SvelteComponentTyped<TimelineHorizontalProps, TimelineHorizontalEvents, TimelineHorizontalSlots> {
+}
+export {};

package/timelines/TimelineItem.svelte

@@ -0,0 +1,37 @@
+<script >export let timelineItems;
+</script>
+
+{#each timelineItems as { date, title, text, href, linkname }}
+	<li class="mb-10 ml-4">
+		<div
+			class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"
+		/>
+		<time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
+			>{date}</time
+		>
+		<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+			{title}
+		</h3>
+		<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+			{text}
+		</p>
+		{#if href}
+			<a
+				{href}
+				class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+				>{linkname}
+				<svg
+					class="ml-2 w-3 h-3"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+					><path
+						fill-rule="evenodd"
+						d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+						clip-rule="evenodd"
+					/></svg
+				></a
+			>
+		{/if}
+	</li>
+{/each}

package/timelines/TimelineItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TimelineItemType } from '../types';
+declare const __propDef: {
+    props: {
+        timelineItems: TimelineItemType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TimelineItemProps = typeof __propDef.props;
+export declare type TimelineItemEvents = typeof __propDef.events;
+export declare type TimelineItemSlots = typeof __propDef.slots;
+export default class TimelineItem extends SvelteComponentTyped<TimelineItemProps, TimelineItemEvents, TimelineItemSlots> {
+}
+export {};

package/timelines/TimelineItemHorizontal.svelte

@@ -0,0 +1,38 @@
+<script >export let timelineItems;
+</script>
+
+{#each timelineItems as { date, title, text, icon }}
+	<li class="relative mb-6 sm:mb-0">
+		<div class="flex items-center">
+			<div
+				class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0"
+			>
+				{#if icon}
+					<svelte:component this={icon} className="h-4 w-4" />
+				{:else}
+					<svg
+						class="w-3 h-3 text-blue-600 dark:text-blue-300"
+						fill="currentColor"
+						viewBox="0 0 20 20"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							fill-rule="evenodd"
+							d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+							clip-rule="evenodd"
+						/></svg
+					>
+				{/if}
+			</div>
+			<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
+		</div>
+		<div class="mt-3 sm:pr-8">
+			<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
+			<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
+				>{date}</time
+			>
+			<p class="text-base font-normal text-gray-500 dark:text-gray-400">
+				{text}
+			</p>
+		</div>
+	</li>
+{/each}

package/timelines/TimelineItemHorizontal.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TimelineItemHorizontalType } from '../types';
+declare const __propDef: {
+    props: {
+        timelineItems: TimelineItemHorizontalType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TimelineItemHorizontalProps = typeof __propDef.props;
+export declare type TimelineItemHorizontalEvents = typeof __propDef.events;
+export declare type TimelineItemHorizontalSlots = typeof __propDef.slots;
+export default class TimelineItemHorizontal extends SvelteComponentTyped<TimelineItemHorizontalProps, TimelineItemHorizontalEvents, TimelineItemHorizontalSlots> {
+}
+export {};

package/timelines/TimelineItemVertical.svelte

@@ -0,0 +1,54 @@
+<script >export let timelineItems;
+</script>
+
+{#each timelineItems as { date, title, text, href, linkname, icon }}
+	<li class="mb-10 ml-6">
+		<span
+			class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900"
+		>
+			{#if icon}
+				<svelte:component this={icon} className="h-4 w-4" />
+			{:else}
+				<svg
+					class="w-3 h-3 text-blue-600 dark:text-blue-300"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+					><path
+						fill-rule="evenodd"
+						d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+						clip-rule="evenodd"
+					/></svg
+				>
+			{/if}
+		</span>
+
+		<h3 class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white">
+			{title}
+		</h3>
+		<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
+			>{date}</time
+		>
+		<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+			{text}
+		</p>
+		{#if href}
+			<a
+				{href}
+				class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+				>{linkname}
+				<svg
+					class="ml-2 w-3 h-3"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg"
+					><path
+						fill-rule="evenodd"
+						d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+						clip-rule="evenodd"
+					/></svg
+				></a
+			>
+		{/if}
+	</li>
+{/each}

package/timelines/TimelineItemVertical.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TimelineItemVerticalType } from '../types';
+declare const __propDef: {
+    props: {
+        timelineItems: TimelineItemVerticalType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TimelineItemVerticalProps = typeof __propDef.props;
+export declare type TimelineItemVerticalEvents = typeof __propDef.events;
+export declare type TimelineItemVerticalSlots = typeof __propDef.slots;
+export default class TimelineItemVertical extends SvelteComponentTyped<TimelineItemVerticalProps, TimelineItemVerticalEvents, TimelineItemVerticalSlots> {
+}
+export {};

package/toasts/Toast.svelte

@@ -0,0 +1,83 @@
+<script >import { fade, blur, fly, slide } from 'svelte/transition';
+let visible = true;
+const handleHide = () => {
+    visible = !visible;
+};
+export let iconColor = 'blue';
+// Export a prop through which you can set a desired transition
+export let transitionType = 'fade';
+// Pass in params
+export let transitionParams = {};
+let iconDivClass;
+export let divClass = 'flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800';
+export let textClass = 'ml-3 text-sm font-normal';
+export let btnClass = 'ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700';
+if (iconColor === 'blue') {
+    iconDivClass =
+        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200';
+}
+else if (iconColor === 'green') {
+    iconDivClass =
+        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200';
+}
+else if (iconColor === 'red') {
+    iconDivClass =
+        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200';
+}
+else if (iconColor === 'gray') {
+    iconDivClass =
+        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200';
+}
+else if (iconColor === 'purple') {
+    iconDivClass =
+        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-purple-500 bg-purple-100 rounded-lg dark:bg-purple-800 dark:text-purple-200';
+}
+else if (iconColor === 'indigo') {
+    iconDivClass =
+        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-indigo-500 bg-indigo-100 rounded-lg dark:bg-indigo-800 dark:text-indigo-200';
+}
+else if (iconColor === 'yellow') {
+    iconDivClass =
+        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-yellow-500 bg-yellow-100 rounded-lg dark:bg-yellow-800 dark:text-yellow-200';
+}
+else {
+    iconDivClass =
+        'inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200';
+}
+// have a custom transition function that returns the desired transition
+function multiple(node, params) {
+    switch (transitionType) {
+        case 'slide':
+            return slide(node, params);
+        case 'blur':
+            return blur(node, params);
+        case 'fly':
+            return fly(node, params);
+        case 'fade':
+            return fade(node, params);
+    }
+}
+</script>
+
+{#if visible}
+	<div transition:multiple={transitionParams} class={divClass} role="alert">
+		<div class={iconDivClass}>
+			<slot name="icon" />
+		</div>
+		<div class={textClass}><slot name="text" /></div>
+		<button type="button" class={btnClass} on:click={handleHide} 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>
+	</div>
+{/if}

package/toasts/Toast.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Colors, TransitionTypes } from '../types';
+declare const __propDef: {
+    props: {
+        iconColor?: Colors;
+        transitionType?: TransitionTypes;
+        transitionParams?: {};
+        divClass?: string;
+        textClass?: string;
+        btnClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        text: {};
+    };
+};
+export declare type ToastProps = typeof __propDef.props;
+export declare type ToastEvents = typeof __propDef.events;
+export declare type ToastSlots = typeof __propDef.slots;
+export default class Toast extends SvelteComponentTyped<ToastProps, ToastEvents, ToastSlots> {
+}
+export {};