flowbite-svelte 0.27.15 → 0.27.16

package/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Writable } from 'svelte/store';
+export interface TabCtxType {
+    activeClasses: string;
+    inactiveClasses: string;
+    selected: Writable<HTMLElement>;
+}
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        style?: "none" | "pill" | "underline" | "full" | undefined;
+        defaultClass?: string | undefined;
+        contentClass?: string | undefined;
+        divider?: boolean | undefined;
+        activeClasses?: string | undefined;
+        inactiveClasses?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            style: "none" | "pill" | "underline" | "full";
+        };
+        divider: {};
+    };
+};
+export declare type TabsProps = typeof __propDef.props;
+export declare type TabsEvents = typeof __propDef.events;
+export declare type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponentTyped<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

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 | undefined;
+    };
+    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 | undefined;
+        timeClass?: string | undefined;
+        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,17 @@
+<script>import { setContext } from 'svelte';
+export let customClass = '';
+export let order = 'default';
+setContext('order', order);
+let olClasses = {
+    group: 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700',
+    horizontal: 'items-center sm:flex',
+    activity: 'relative border-l border-gray-200 dark:border-gray-700',
+    vertical: 'relative border-l border-gray-200 dark:border-gray-700',
+    default: 'relative border-l border-gray-200 dark:border-gray-700',
+    custom: customClass
+};
+</script>
+
+<ol class={olClasses[order]}>
+	<slot />
+</ol>

package/timelines/Timeline.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        customClass?: string | undefined;
+        order?: "default" | "custom" | "group" | "horizontal" | "vertical" | "activity" | undefined;
+    };
+    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 | undefined;
+    };
+    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,125 @@
+<script>import classNames from 'classnames';
+import { getContext } from 'svelte';
+export let title = '';
+export let date = '';
+export let customDiv = '';
+export let customTimeClass = '';
+let order = 'default';
+order = getContext('order');
+const liClasses = {
+    default: 'mb-10 ml-4',
+    vertical: 'mb-10 ml-6',
+    horizontal: 'relative mb-6 sm:mb-0',
+    activity: 'mb-10 ml-6',
+    group: ''
+};
+const divClasses = {
+    default: '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',
+    vertical: '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',
+    horizontal: 'flex items-center',
+    activity: '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',
+    group: 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700',
+    custom: customDiv
+};
+const timeClasses = {
+    default: 'mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500',
+    vertical: 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500',
+    horizontal: 'block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500',
+    activity: 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0',
+    group: 'text-lg font-semibold text-gray-900 dark:text-white',
+    custom: customTimeClass
+};
+const h3Class = classNames(order === 'vertical'
+    ? 'flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white'
+    : 'text-lg font-semibold text-gray-900 dark:text-white');
+</script>
+
+<li class={liClasses[order]}>
+	{#if order === 'default'}
+		<div class={divClasses[order]} />
+		{#if date}
+			<time class={timeClasses[order]}>{date}</time>
+		{/if}
+		{#if title}
+			<h3 class={h3Class}>
+				{title}
+			</h3>
+		{/if}
+		<slot />
+	{:else if order === 'vertical'}
+		<div class={divClasses[order]} />
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else}
+			<svg
+				aria-hidden="true"
+				class="w-3 h-3 text-blue-600 dark:text-blue-400"
+				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}
+		{#if title}
+			<h3 class={h3Class}>
+				{title}
+			</h3>
+		{/if}
+		{#if date}
+			<time class={timeClasses[order]}>{date}</time>
+		{/if}
+		<slot />
+	{:else if order === 'horizontal'}
+		<div class={divClasses[order]} />
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else}
+			<svg
+				aria-hidden="true"
+				class="w-3 h-3 text-blue-600 dark:text-blue-400"
+				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}
+		{#if title}
+			<h3 class={h3Class}>
+				{title}
+			</h3>
+		{/if}
+		{#if date}
+			<time class={timeClasses[order]}>{date}</time>
+		{/if}
+		<slot />
+	{:else}
+		<div class={divClasses[order]} />
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{:else}
+			<svg
+				aria-hidden="true"
+				class="w-3 h-3 text-blue-600 dark:text-blue-400"
+				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}
+		{#if title}
+			<h3 class={h3Class}>
+				{title}
+			</h3>
+		{/if}
+		{#if date}
+			<time class={timeClasses[order]}>{date}</time>
+		{/if}
+		<slot />
+	{/if}
+</li>

package/timelines/TimelineItem.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        date?: string | undefined;
+        customDiv?: string | undefined;
+        customTimeClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        icon: {};
+    };
+};
+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,55 @@
+<script>// import type { TimelineItemHorizontalType } from '../types';
+// export let timelineItems: TimelineItemHorizontalType[];
+export let title;
+export let date;
+export let href;
+export let text;
+export let linkname;
+export let icon;
+</script>
+
+<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}
+				{@html icon}
+			{: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>
+	{#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>

package/timelines/TimelineItemHorizontal.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        date: string;
+        href: string;
+        text: string;
+        linkname: string;
+        icon: string;
+    };
+    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,33 @@
+<script>// import type { TimelineItemVerticalType } from '../types';
+// export let timelineItems: TimelineItemVerticalType[];
+export let title;
+export let date;
+</script>
+
+<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 $$slots.icon}
+			<slot name="icon" />
+		{:else}
+			<svg
+				width="20"
+				height="20"
+				class="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>
+	<slot />
+</li>

package/timelines/TimelineItemVertical.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        date: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+};
+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,39 @@
+<script>import Frame from '../utils/Frame.svelte';
+import classNames from 'classnames';
+import CloseButton from '../utils/CloseButton.svelte';
+import { fade } from 'svelte/transition';
+export let color = 'blue';
+export let simple = false;
+export let position = 'none';
+export let open = true;
+export let divClass = 'w-full max-w-xs p-4';
+const positions = {
+    'top-left': 'absolute top-5 left-5',
+    'top-right': 'absolute top-5 right-5',
+    'bottom-left': 'absolute bottom-5 left-5',
+    'bottom-right': 'absolute bottom-5 right-5',
+    none: ''
+};
+let classDiv;
+$: classDiv = classNames(divClass, positions[position], $$props.class);
+let iconClass;
+$: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0 w-8 h-8 mr-3');
+</script>
+
+{#if open}
+  <Frame rounded border transition={fade} {...$$restProps} class={classDiv} role="alert">
+    <div class="flex {$$slots.extra ? 'items-start' : 'items-center'}">
+      {#if $$slots.icon}
+        <Frame {color} rounded class={iconClass}><slot name="icon" /></Frame>
+      {/if}
+
+      <div class="text-sm font-normal w-full">
+        <slot />
+        <slot name="extra" />
+      </div>
+      {#if !simple}
+        <CloseButton on:click={() => (open = false)} />
+      {/if}
+    </div>
+  </Frame>
+{/if}

package/toasts/Toast.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "default" | "purple" | "pink" | "blue" | "light" | "dark" | "dropdown" | "navbar" | "navbarUl" | "form" | "none" | undefined;
+        simple?: boolean | undefined;
+        position?: "none" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
+        open?: boolean | undefined;
+        divClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+        extra: {};
+    };
+};
+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 {};