flowbite-svelte 0.10.10 → 0.11.1

package/alerts/Alert.svelte

@@ -1,7 +1,13 @@
-<script >export let color = 'blue';
+<script >import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+export let color = 'blue';
 export let alertId = 'alert-1';
 export let closeBtn = false;
+export let btn1 = false;
 let hidden = false;
+const handlebtn1 = () => {
+    dispatch('handlebtn1');
+};
 const handleHide = () => {
     hidden = !hidden;
 };
@@ -72,6 +78,7 @@ else {
     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';
 }
+let button1Class = '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 id={alertId} class:hidden class={divClass} role="alert">
@@ -101,4 +108,20 @@ else {
 			>
 		</button>
 	{/if}
+	{#if btn1}
+		<button on:click={handlebtn1} 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

@@ -5,8 +5,11 @@ declare const __propDef: {
         color?: Colors;
         alertId?: string;
         closeBtn?: boolean;
+        btn1?: boolean;
     };
     events: {
+        handlebtn1: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/avatar/Avatar.svelte

@@ -0,0 +1,40 @@
+<script >export let avatar = {
+    src: '/',
+    alt: '',
+    size: 8,
+    border: false,
+    round: false,
+    header: '',
+    text: ''
+};
+let isCircle = avatar.round ? 'rounded-full' : 'rounded';
+let isBorder = avatar.border ? 'p-1 ring-2 ring-gray-300 dark:ring-gray-500' : '';
+export let avatarClass = `w-${avatar.size} h-${avatar.size} ${isCircle} ${isBorder}`;
+export let placehoder = false;
+</script>
+
+{#if placehoder}
+	<div class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
+		<svg
+			class="absolute w-12 h-12 text-gray-400 -left-1"
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+				clip-rule="evenodd"
+			/></svg
+		>
+	</div>
+{:else if avatar.header && avatar.text}
+	<div class="flex items-center space-x-4">
+		<img class="class={avatarClass}" alt={avatar.alt} src={avatar.src} />
+		<div class="space-y-1 font-medium dark:text-white">
+			<div>{avatar.header}</div>
+			<div class="text-sm text-gray-500 dark:text-gray-400">{avatar.text}</div>
+		</div>
+	</div>
+{:else}
+	<img class={avatarClass} alt={avatar.alt} src={avatar.src} />
+{/if}

package/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AvatarType } from '../types';
+declare const __propDef: {
+    props: {
+        avatar?: AvatarType;
+        avatarClass?: string;
+        placehoder?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AvatarProps = typeof __propDef.props;
+export declare type AvatarEvents = typeof __propDef.events;
+export declare type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponentTyped<AvatarProps, AvatarEvents, AvatarSlots> {
+}
+export {};

package/badges/BadgeIcon.svelte

@@ -1,5 +1,5 @@
 <script >export let textSize = 'text-xs';
-export let name = 'Read more';
+export let name = '';
 export let color = 'blue';
 let badgeClass;
 if (color === 'blue') {

package/buttons/GradientOutlineButton.svelte

@@ -10,7 +10,7 @@ if (color === 'purple2blue') {
         '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`;
+    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:outline-none 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';
 }

package/footer/LogoFooter.svelte

@@ -14,7 +14,7 @@ export let copyrightYear = '© 2022';
 export let allRightsReserved = 'All Rights Reserved.';
 </script>
 
-<footer class={footerClass}>
+<footer class="{footerClass} {$$props.class}">
 	<div class={divClass}>
 		<a href={site.href} class={siteNameLinkClass}>
 			<img src={site.img} class={imgClass} alt={site.name} />

package/footer/LogoFooter.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { LinkType, SiteType } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         site: SiteType;
         links: LinkType[];
         footerClass?: string;

package/footer/SimpleFooter.svelte

@@ -9,7 +9,7 @@ export let copyrightYear = '© 2022';
 export let allRightsReserved = 'All Rights Reserved.';
 </script>
 
-<footer class={footerClass}>
+<footer class="{footerClass} {$$props.class}">
 	<span class={siteNameClass}
 		>{copyrightYear}
 		<a href={site.href} class={siteNameLinkClass} target="_blank">{site.name}</a>. {allRightsReserved}

package/footer/SimpleFooter.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { LinkType, SiteType } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         site: SiteType;
         links: LinkType[];
         footerClass?: string;

package/footer/SitemapFooter.svelte

@@ -15,7 +15,7 @@ export let copyrightYear = '© 2022';
 export let allRightsReserved = 'All Rights Reserved.';
 </script>
 
-<footer class={footerClass}>
+<footer class="{footerClass} {$$props.class}">
 	<div class={linksClass}>
 		{#each links as { parent, children }}
 			<div>

package/footer/SitemapFooter.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { SiteType, SocialMediaType, SocialMediaLinkType } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         site: SiteType;
         links: SocialMediaLinkType[];
         socialMedia: SocialMediaType[];

package/footer/SocialMediaFooter.svelte

@@ -21,7 +21,7 @@ export let copyrightYear = '© 2022';
 export let allRightsReserved = 'All Rights Reserved.';
 </script>
 
-<footer class={footerClass}>
+<footer class="{footerClass} {$$props.class}">
 	<div class={divClass}>
 		<div class={divClass2}>
 			<a href={site.href} class={siteLinkClass}>

package/footer/SocialMediaFooter.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { SocialMediaLinkType, SocialMediaType, SiteType } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         site: SiteType;
         links: SocialMediaLinkType[];
         socialMedia: SocialMediaType[];

package/index.d.ts

@@ -8,6 +8,7 @@ export { default as ForgotPassword } from "./auth/ForgotPassword.svelte";
 export { default as Login } from "./auth/Login.svelte";
 export { default as Register } from "./auth/Register.svelte";
 export { default as Reset } from "./auth/Reset.svelte";
+export { default as Avatar } from "./avatar/Avatar.svelte";
 export { default as Badge } from "./badges/Badge.svelte";
 export { default as BadgeIcon } from "./badges/BadgeIcon.svelte";
 export { default as BadgeLink } from "./badges/BadgeLink.svelte";
@@ -51,10 +52,16 @@ export { default as SignInModal } from "./modals/SignInModal.svelte";
 export { default as SmallModal } from "./modals/SmallModal.svelte";
 export { default as Navbar } from "./navbar/Navbar.svelte";
 export { default as DropdownNavbar } from "./navbar/DropdownNavbar.svelte";
+export { default as Sidebar } from "./sidebars/Sidebar.svelte";
 export { default as Spinner } from "./spinners/Spinner.svelte";
 export { default as SpinnerButton } from "./spinners/SpinnerButton.svelte";
 export { default as InteractiveTabs } from "./tabs/InteractiveTabs.svelte";
 export { default as DefaultTabs } from "./tabs/DefaultTabs.svelte";
 export { default as PillTabs } from "./tabs/PillTabs.svelte";
+export { default as Timeline } from "./timelines/Timeline.svelte";
+export { default as TimelineItem } from "./timelines/TimelineItem.svelte";
+export { default as TimelineItemVertical } from "./timelines/TimelineItemVertical.svelte";
+export { default as TimelineItemHorizontal } from "./timelines/TimelineItemHorizontal.svelte";
+export { default as Toast } from "./toasts/Toast.svelte";
 export { default as Tooltip } from "./tooltips/Tooltip.svelte";
 export { default as LightTooltip } from "./tooltips/LightTooltip.svelte";

package/index.js

@@ -12,7 +12,10 @@ export { default as Confirm } from'./auth/Confirm.svelte'
 export { default as ForgotPassword } from'./auth/ForgotPassword.svelte'
 export { default as Login } from'./auth/Login.svelte'
 export { default as Register } from'./auth/Register.svelte'
-export { default as Reset } from'./auth/Reset.svelte'
+export { default as Reset } from './auth/Reset.svelte'
+
+// Avatar
+export { default as Avatar } from './avatar/Avatar.svelte'
 
 // Badges
 export { default as Badge } from'./badges/Badge.svelte'
@@ -79,6 +82,9 @@ export { default as SmallModal } from'./modals/SmallModal.svelte'
 export { default as Navbar } from'./navbar/Navbar.svelte'
 export { default as DropdownNavbar } from'./navbar/DropdownNavbar.svelte'
 
+// Sidebar
+export { default as Sidebar } from './sidebars/Sidebar.svelte'
+
 // Spin
 export { default as Spinner } from'./spinners/Spinner.svelte'
 export { default as SpinnerButton } from'./spinners/SpinnerButton.svelte'
@@ -86,7 +92,16 @@ export { default as SpinnerButton } from'./spinners/SpinnerButton.svelte'
 // Tabs
 export { default as InteractiveTabs } from'./tabs/InteractiveTabs.svelte'
 export { default as DefaultTabs } from'./tabs/DefaultTabs.svelte'
-export { default as PillTabs } from'./tabs/PillTabs.svelte'
+export { default as PillTabs } from './tabs/PillTabs.svelte'
+
+// Timeline
+export { default as Timeline } from './timelines/Timeline.svelte'
+export { default as TimelineItem } from './timelines/TimelineItem.svelte'
+export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte'
+export { default as TimelineItemHorizontal } from './timelines/TimelineItemHorizontal.svelte'
+
+// Toast
+export { default as Toast } from './toasts/Toast.svelte'
 
 // Tooltips
 export { default as Tooltip } from'./tooltips/Tooltip.svelte'

package/modals/SignInModal.svelte

@@ -6,6 +6,7 @@ export let lostPasswordLink;
 export let rememberMe = false;
 export let signUp;
 export let action;
+export let emailPlaceholder = 'name@company.com';
 const closeModal = () => {
     modalIdStore.update((value) => (value = null));
 };
@@ -95,7 +96,7 @@ else {
 							name="email"
 							id="email-{id}"
 							class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
-							placeholder="name@company.com"
+							placeholder={emailPlaceholder}
 							required
 						/>
 					</div>

package/modals/SignInModal.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         rememberMe?: boolean;
         signUp: string;
         action: string;
+        emailPlaceholder?: string;
         showModalId: string;
     };
     events: {

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.10.10",
+  "version": "0.11.1",
   "description": "Flowbite components for Svelte",
+  "main": "./package/index.js",
   "author": {
     "name": "Shinichi Okada",
     "email": "connect@codewithshin.com",
@@ -80,6 +81,7 @@
     "./auth/Login.svelte": "./auth/Login.svelte",
     "./auth/Register.svelte": "./auth/Register.svelte",
     "./auth/Reset.svelte": "./auth/Reset.svelte",
+    "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
     "./badges/Badge.svelte": "./badges/Badge.svelte",
     "./badges/BadgeIcon.svelte": "./badges/BadgeIcon.svelte",
     "./badges/BadgeLink.svelte": "./badges/BadgeLink.svelte",
@@ -124,12 +126,19 @@
     "./modals/modalStores": "./modals/modalStores.js",
     "./navbar/DropdownNavbar.svelte": "./navbar/DropdownNavbar.svelte",
     "./navbar/Navbar.svelte": "./navbar/Navbar.svelte",
+    "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
     "./spinners/SpinnerButton.svelte": "./spinners/SpinnerButton.svelte",
     "./tables/Table.svelte": "./tables/Table.svelte",
     "./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
     "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
     "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
+    "./timelines/Timeline.svelte": "./timelines/Timeline.svelte",
+    "./timelines/TimelineHorizontal.svelte": "./timelines/TimelineHorizontal.svelte",
+    "./timelines/TimelineItem.svelte": "./timelines/TimelineItem.svelte",
+    "./timelines/TimelineItemHorizontal.svelte": "./timelines/TimelineItemHorizontal.svelte",
+    "./timelines/TimelineItemVertical.svelte": "./timelines/TimelineItemVertical.svelte",
+    "./toasts/Toast.svelte": "./toasts/Toast.svelte",
     "./tooltips/LightTooltip.svelte": "./tooltips/LightTooltip.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js"

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/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,42 @@
+<script >export let timelineItems;
+</script>
+
+{#each timelineItems as { date, title, text, href, linkname, 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"
+			>
+				{icon}
+			</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>
+			{#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}
+		</div>
+	</li>
+{/each}

package/timelines/TimelineItemHorizontal.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 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,40 @@
+<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"
+		>
+			<svelte:component this={icon} className="h-4 w-4" />
+		</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 {};

package/types.d.ts

@@ -46,7 +46,7 @@ export interface TabType {
 export interface InteractiveTabType {
     name: string;
     id: number;
-    content: string;
+    content: string | typeof SvelteComponent;
 }
 export interface PillTabType {
     name: string;
@@ -83,7 +83,46 @@ export interface AuthFieldType {
     required?: boolean;
     placeholder?: string;
 }
+export declare type SidebarType = {
+    id: number;
+    name: string;
+    href?: string;
+    icon?: typeof SvelteComponent;
+    rel?: string;
+    children?: SidebarType[];
+    subtext?: HTMLElement;
+};
+export declare type SidebarCtaType = {
+    label: string;
+    text: HTMLElement;
+};
 export declare type SelectOptionType = {
     name: string;
     value: string;
 };
+export interface AvatarType {
+    src?: string;
+    alt?: string;
+    size?: 6 | 8 | 12 | 16 | 24 | 48;
+    border?: boolean;
+    round?: boolean;
+    header?: string;
+    text?: string;
+}
+export declare type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur';
+export interface TimelineItemType {
+    date: Date | string;
+    title: string;
+    icon?: typeof SvelteComponent;
+    href?: string;
+    linkname?: string;
+    text?: HTMLElement | string;
+}
+export interface TimelineItemVerticalType {
+    date: Date | string;
+    title: string;
+    icon: typeof SvelteComponent;
+    href?: string;
+    linkname?: string;
+    text?: HTMLElement | string;
+}

package/types.js

@@ -1,8 +1 @@
 export {};
-// export type ToggleType = {
-//     name: string;
-//     id: string;
-//     label: string;
-//     checked?: boolean;
-//     disabled?: boolean;
-// }