flowbite-svelte 0.12.0 → 0.12.3

package/README.md

@@ -4,84 +4,139 @@
 
 ## Installation
 
-[Getting started](https://flowbite-svelte.vercel.app/getting-started)
+- [Getting started](https://flowbite-svelte.vercel.app/getting-started)
+- [About](https://flowbite-svelte.vercel.app/about)
+- [Type list](https://flowbite-svelte.vercel.app/type-list)
+- [CLI](https://flowbite-svelte.vercel.app/cli)
 
 ## Accordion components
 
-[Accordions](https://flowbite-svelte.vercel.app/accordions)
+- [Default accordion](https://flowbite-svelte.vercel.app/accordions/default)
+- [Icon accordion](https://flowbite-svelte.vercel.app/accordions/icon-accordion)
 
-## Avatar components
+## Alert components
 
-[Avatar](https://flowbite-svelte.vercel.app/avatar)
+- [Default alert](https://flowbite-svelte.vercel.app/alerts/default-alert)
+- [Border alert](https://flowbite-svelte.vercel.app/alerts/border-alert)
+- [Information alert](https://flowbite-svelte.vercel.app/alerts/information-alert)
+- [Animation alert](https://flowbite-svelte.vercel.app/alerts/animation)
 
-## Alert components
+## Avatar components
 
-[Alerts](https://flowbite-svelte.vercel.app/alerts)
+- [Avatar](https://flowbite-svelte.vercel.app/avatar)
 
 ## Badges components
 
-[Badges](https://flowbite-svelte.vercel.app/badges)
+- [Default badge](https://flowbite-svelte.vercel.app/badges/default)
+- [Icon badge](https://flowbite-svelte.vercel.app/badges/badge-icon)
+- [Link badge](https://flowbite-svelte.vercel.app/badges/badge-link)
 
 ## Button group compnents
 
-[Button group](https://flowbite-svelte.vercel.app/button-groups)
+- [Default button group](https://flowbite-svelte.vercel.app/button-groups/default)
+- [Outline button group](https://flowbite-svelte.vercel.app/button-groups/outline)
 
 ## Button components
 
-[Buttons](https://flowbite-svelte.vercel.app/buttons)
+- [Setup](https://flowbite-svelte.vercel.app/buttons/setup)
+- [Default Button](https://flowbite-svelte.vercel.app/buttons/default)
+- [Colored Shadow Button](https://flowbite-svelte.vercel.app/buttons/colored-shadow)
+- [Gradient Duotone Button](https://flowbite-svelte.vercel.app/buttons/gradient-duotone)
+- [Gradient Monochrome Button](https://flowbite-svelte.vercel.app/buttons/gradient-monochrome)
+- [Gradietn Outline Button](https://flowbite-svelte.vercel.app/buttons/gradient-outline)
+- [Outlined Button](https://flowbite-svelte.vercel.app/buttons/outlined)
+- [Rounded Button](https://flowbite-svelte.vercel.app/buttons/rounded)
 
 ## Card components
 
-[Cards](https://flowbite-svelte.vercel.app/cards)
+- [Default Card](https://flowbite-svelte.vercel.app/cards/card)
+- [CTA Card](https://flowbite-svelte.vercel.app/cards/cta)
+- [Ecommerce Card](https://flowbite-svelte.vercel.app/cards/ecommerce)
+- [Horizontal Card](https://flowbite-svelte.vercel.app/cards/horizontal)
+- [Interactive Card](https://flowbite-svelte.vercel.app/cards/interactive)
+- [List Card](https://flowbite-svelte.vercel.app/cards/list)
+- [Signin Card](https://flowbite-svelte.vercel.app/cards/signin)
 
-## Dark mode component
+## Dark mode components
 
-[Dark mode](https://flowbite-svelte.vercel.app/darkmode)
+- [Dark mode](https://flowbite-svelte.vercel.app/darkmode)
 
 ## Dropdown components
 
-[Dropdowns](https://flowbite-svelte.vercel.app/dropdowns)
+- [Dropdowns](https://flowbite-svelte.vercel.app/dropdowns)
 
 ## Form components
 
-[Forms](https://flowbite-svelte.vercel.app/forms)
+- [Forms](https://flowbite-svelte.vercel.app/forms)
 
-## Footer
+## Footer components
 
-[Footer](https://flowbite-svelte.vercel.app/footer)
+- [Default Footer](https://flowbite-svelte.vercel.app/footer/default)
+- [Footer with Logo](https://flowbite-svelte.vercel.app/footer/logo)
+- [Footer with Sitemap](https://flowbite-svelte.vercel.app/footer/sitemap)
+- [Footer with Socialmedia](https://flowbite-svelte.vercel.app/footer/socialmedia)
 
-## Icons
+## Icons components
 
-[Icons](https://flowbite-svelte.vercel.app/icons)
+- [Heroicons](https://flowbite-svelte.vercel.app/icons/heroicons)
+- [Simpleicons](https://flowbite-svelte.vercel.app/icons/simple-icons)
 
-## List group component
+## List group components
 
-[List group](https://flowbite-svelte.vercel.app/list-group)
+- [List group](https://flowbite-svelte.vercel.app/list-group)
 
 ## Modal components
 
-[Modals](https://flowbite-svelte.vercel.app/modals)
+- [Small Modal](https://flowbite-svelte.vercel.app/modals/small)
+- [Medium Modal](https://flowbite-svelte.vercel.app/modals/medium)
+- [Large Modal](https://flowbite-svelte.vercel.app/modals/large)
+- [Extra Large Modal](https://flowbite-svelte.vercel.app/modals/extra-large)
+- [Signin Modal](https://flowbite-svelte.vercel.app/modals/signin)
+- [All Modals](https://flowbite-svelte.vercel.app/modals/all-modals)
 
 ## Navbar components
 
-[Navbars](https://flowbite-svelte.vercel.app/navbar)
+- [Default Navbar](https://flowbite-svelte.vercel.app/navbars/default)
+- [Dropdown Navbar](https://flowbite-svelte.vercel.app/navbars/dropdown)
+
+## Pagination components
+
+- [Pagination](https://flowbite-svelte.vercel.app/paginations)
 
 ## Sidebar components
 
-[Sidebar](https://flowbite-svelte.vercel.app/sidebars)
+- [Sidebar](https://flowbite-svelte.vercel.app/sidebars)
 
 ## Spinner components
 
-[Spinners](https://flowbite-svelte.vercel.app/spinners)
+- [Default Spinner](https://flowbite-svelte.vercel.app/spinners/default)
+- [Button Spinner](https://flowbite-svelte.vercel.app/spinners/button-spinner)
 
 ## Tab components
 
-[Tabs](https://flowbite-svelte.vercel.app/tabs)
+- [Default Tabs](https://flowbite-svelte.vercel.app/tabs/default-tabs)
+- [Underline Tabs](https://flowbite-svelte.vercel.app/tabs/underline-tabs)
+- [Icon Tabs](https://flowbite-svelte.vercel.app/tabs/icon-tabs)
+- [Full width Tabs](https://flowbite-svelte.vercel.app/tabs/full-width-tabs)
+- [Interactive Tabs](https://flowbite-svelte.vercel.app/tabs/interactive-tabs)
+- [Interactive Tabs 2](https://flowbite-svelte.vercel.app/tabs/interactive-tabs-2)
+- [Multiple Interactive Tabs](https://flowbite-svelte.vercel.app/tabs/multiple-interactive-tabs)
+- [Pill Tabs](https://flowbite-svelte.vercel.app/tabs/pilltabs)
+
+## Timeline components
+
+- [Default timeline](https://flowbite-svelte.vercel.app/timelines/default)
+- [Vetical timeline](https://flowbite-svelte.vercel.app/timelines/vertical)
+- [Horizontal timeline](https://flowbite-svelte.vercel.app/timelines/horizontal)
+- [Activity log](https://flowbite-svelte.vercel.app/timelines/activity)
+- [Grouped timeline](https://flowbite-svelte.vercel.app/timelines/group)
 
 ## Toast components
 
-[Toast](https://flowbite-svelte.vercel.app/toasts)
+- [Toast](https://flowbite-svelte.vercel.app/toasts)
 
 ## Tooltip components
 
-[Tooltips](https://flowbite-svelte.vercel.app/tooltips)
+- [Default Tooltip](https://flowbite-svelte.vercel.app/tooltips/default)
+- [Light Tooltip](https://flowbite-svelte.vercel.app/tooltips/light)
+

package/alerts/Alert.svelte.d.ts

@@ -3,7 +3,7 @@ import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         color?: Colors;
-        alertId?: string;
+        alertId?: string | number;
         closeBtn?: boolean;
         btn1?: boolean;
     };

package/cards/InteractiveCard.svelte

@@ -51,11 +51,11 @@ else {
 </script>
 
 <div class={divClass}>
-	<div class="flex justify-end px-4 pt-4">
+	<div class="flex justify-end px-4 pt-4 relative">
 		<button
 			id="dropdownButton"
 			on:click={toggleDropdown}
-			class="sm:inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
+			class="hidden sm:inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
 			type="button"
 		>
 			<svg
@@ -73,7 +73,7 @@ else {
 			id="dropdown"
 			class:hidden={isOpen}
 			class:block={!isOpen}
-			class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 absolute"
+			class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 absolute top-16 -right-16"
 		>
 			<ul class="py-1" aria-labelledby="dropdownButton">
 				{#each dropdownLinks as { href, name, rel }}

package/index.d.ts

@@ -59,9 +59,14 @@ export { default as TableData } from "./paginations/TableData.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 InteractiveTabHead } from "./tabs/InteractiveTabHead.svelte";
 export { default as InteractiveTabs } from "./tabs/InteractiveTabs.svelte";
 export { default as DefaultTabs } from "./tabs/DefaultTabs.svelte";
+export { default as FullWidthTabs } from "./tabs/FullWidthTabs.svelte";
+export { default as IconTabs } from "./tabs/IconTabs.svelte";
 export { default as PillTabs } from "./tabs/PillTabs.svelte";
+export { default as TabContent } from "./tabs/TabContent.svelte";
+export { default as UnderlineTabs } from "./tabs/UnderlineTabs.svelte";
 export { default as Group } from "./timelines/Group.svelte";
 export { default as GroupItem } from "./timelines/GroupItem.svelte";
 export { default as Activity } from "./timelines/Activity.svelte";

package/index.js

@@ -96,9 +96,14 @@ export { default as Spinner } from'./spinners/Spinner.svelte'
 export { default as SpinnerButton } from'./spinners/SpinnerButton.svelte'
 
 // Tabs
+export { default as InteractiveTabHead } from './tabs/InteractiveTabHead.svelte'
 export { default as InteractiveTabs } from'./tabs/InteractiveTabs.svelte'
-export { default as DefaultTabs } from'./tabs/DefaultTabs.svelte'
+export { default as DefaultTabs } from './tabs/DefaultTabs.svelte'
+export { default as FullWidthTabs } from './tabs/FullWidthTabs.svelte'
+export { default as IconTabs } from './tabs/IconTabs.svelte'
 export { default as PillTabs } from './tabs/PillTabs.svelte'
+export { default as TabContent } from './tabs/TabContent.svelte'
+export { default as UnderlineTabs } from './tabs/UnderlineTabs.svelte'
 
 // Timeline
 export { default as Group } from './timelines/Group.svelte'
@@ -111,8 +116,6 @@ export { default as TimelineHorizontal } from './timelines/TimelineHorizontal.sv
 export { default as TimelineItemHorizontal } from './timelines/TimelineItemHorizontal.svelte'
 export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte'
 
-
-
 // Toast
 export { default as Toast } from './toasts/Toast.svelte'
 

package/modals/ExtraLargeModal.svelte

@@ -7,10 +7,10 @@ export let textColor = 'gray';
 export let title = 'Terms of Service';
 export let btn1;
 export let btn2;
-const closeModal = () => {
+export const closeModal = () => {
     modalIdStore.update((value) => (value = null));
 };
-export let showModalId;
+let showModalId;
 modalIdStore.subscribe((value) => {
     showModalId = value;
 });

package/modals/ExtraLargeModal.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         title?: string;
         btn1: string;
         btn2: string;
-        showModalId: string;
+        closeModal?: () => void;
     };
     events: {
         handlebtn1: CustomEvent<any>;
@@ -24,5 +24,6 @@ export declare type ExtraLargeModalProps = typeof __propDef.props;
 export declare type ExtraLargeModalEvents = typeof __propDef.events;
 export declare type ExtraLargeModalSlots = typeof __propDef.slots;
 export default class ExtraLargeModal extends SvelteComponentTyped<ExtraLargeModalProps, ExtraLargeModalEvents, ExtraLargeModalSlots> {
+    get closeModal(): () => void;
 }
 export {};

package/modals/LargeModal.svelte

@@ -7,10 +7,10 @@ export let textColor = 'gray';
 export let title = 'Terms of Service';
 export let btn1;
 export let btn2;
-const closeModal = () => {
+export const closeModal = () => {
     modalIdStore.update((value) => (value = null));
 };
-export let showModalId;
+let showModalId;
 modalIdStore.subscribe((value) => {
     showModalId = value;
 });

package/modals/LargeModal.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         title?: string;
         btn1: string;
         btn2: string;
-        showModalId: string;
+        closeModal?: () => void;
     };
     events: {
         handlebtn1: CustomEvent<any>;
@@ -24,5 +24,6 @@ export declare type LargeModalProps = typeof __propDef.props;
 export declare type LargeModalEvents = typeof __propDef.events;
 export declare type LargeModalSlots = typeof __propDef.slots;
 export default class LargeModal extends SvelteComponentTyped<LargeModalProps, LargeModalEvents, LargeModalSlots> {
+    get closeModal(): () => void;
 }
 export {};

package/modals/MediumModal.svelte

@@ -8,10 +8,10 @@ export let textColor = 'gray';
 export let title = 'Terms of Service';
 export let btn1;
 export let btn2;
-const closeModal = () => {
+export const closeModal = () => {
     modalIdStore.update((value) => (value = null));
 };
-export let showModalId;
+let showModalId;
 modalIdStore.subscribe((value) => {
     showModalId = value;
 });

package/modals/MediumModal.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         title?: string;
         btn1: string;
         btn2: string;
-        showModalId: string;
+        closeModal?: () => void;
     };
     events: {
         handlebtn1: CustomEvent<any>;
@@ -24,5 +24,6 @@ export declare type MediumModalProps = typeof __propDef.props;
 export declare type MediumModalEvents = typeof __propDef.events;
 export declare type MediumModalSlots = typeof __propDef.slots;
 export default class MediumModal extends SvelteComponentTyped<MediumModalProps, MediumModalEvents, MediumModalSlots> {
+    get closeModal(): () => void;
 }
 export {};

package/modals/SignInModal.svelte

@@ -7,10 +7,10 @@ export let rememberMe = false;
 export let signUp;
 export let action;
 export let emailPlaceholder = 'name@company.com';
-const closeModal = () => {
+export const closeModal = () => {
     modalIdStore.update((value) => (value = null));
 };
-export let showModalId;
+let showModalId;
 modalIdStore.subscribe((value) => {
     showModalId = value;
 });

package/modals/SignInModal.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         signUp: string;
         action: string;
         emailPlaceholder?: string;
-        showModalId: string;
+        closeModal?: () => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -21,5 +21,6 @@ export declare type SignInModalProps = typeof __propDef.props;
 export declare type SignInModalEvents = typeof __propDef.events;
 export declare type SignInModalSlots = typeof __propDef.slots;
 export default class SignInModal extends SvelteComponentTyped<SignInModalProps, SignInModalEvents, SignInModalSlots> {
+    get closeModal(): () => void;
 }
 export {};

package/modals/SmallModal.svelte

@@ -7,10 +7,10 @@ export let textColor = 'gray';
 export let title = 'Terms of Service';
 export let btn1;
 export let btn2;
-const closeModal = () => {
+export const closeModal = () => {
     modalIdStore.update((value) => (value = null));
 };
-export let showModalId;
+let showModalId;
 modalIdStore.subscribe((value) => {
     showModalId = value;
 });

package/modals/SmallModal.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         title?: string;
         btn1: string;
         btn2: string;
-        showModalId: string;
+        closeModal?: () => void;
     };
     events: {
         handlebtn1: CustomEvent<any>;
@@ -24,5 +24,6 @@ export declare type SmallModalProps = typeof __propDef.props;
 export declare type SmallModalEvents = typeof __propDef.events;
 export declare type SmallModalSlots = typeof __propDef.slots;
 export default class SmallModal extends SvelteComponentTyped<SmallModalProps, SmallModalEvents, SmallModalSlots> {
+    get closeModal(): () => void;
 }
 export {};

package/navbar/DropdownNavbar.svelte

@@ -1,12 +1,5 @@
 <script >import { page, session } from '$app/stores';
-let hidden = true;
-let block = false;
-let activeDropdown = undefined;
-const handleDropdown = (id) => {
-    hidden = !hidden;
-    block = !block;
-    activeDropdown = id;
-};
+import NavDropdown from './NavDropdown.svelte';
 let barHidden = true;
 const handleClickbtn = () => {
     barHidden = !barHidden;
@@ -65,41 +58,16 @@ export let liButtonClass = `flex justify-between items-center py-2 pr-4 pl-3 w-f
 		</button>
 		<div class="w-full md:block md:w-auto" class:hidden={barHidden} id="mobile-menu">
 			<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
-				{#each menus as { id, name, href, rel, child }}
+				{#each menus as { name, href, rel, child }}
 					{#if child}
-						<li>
-							<button on:click={() => handleDropdown(id)} class={liButtonClass}
-								>{name}
-								<svg
-									class="ml-1 w-4 h-4"
-									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 activeDropdown === id}
-								<!-- Dropdown menu -->
-								<div
-									class:hidden
-									class:block
-									class={dropdownDiv}
-									style="position: absolute; margin: 0px;"
-								>
-									<ul class="py-1" aria-labelledby="dropdownLargeButton">
-										{#each child as item}
-											<li>
-												<a href={item.href} {rel} class={dropdownLinkClassWithChild}>{item.name}</a>
-											</li>
-										{/each}
-									</ul>
-								</div>
-							{/if}
-						</li>
+						<NavDropdown
+							{liButtonClass}
+							{dropdownDiv}
+							{name}
+							{child}
+							{rel}
+							{dropdownLinkClassWithChild}
+						/>
 					{:else}
 						<li>
 							<a

package/navbar/NavDropdown.svelte

@@ -0,0 +1,41 @@
+<script >export let liButtonClass;
+export let name;
+let hidden = true;
+let block = false;
+export let child;
+const handleDropdown = () => {
+    hidden = !hidden;
+    block = !block;
+};
+export let dropdownDiv;
+export let dropdownLinkClassWithChild;
+export let rel;
+</script>
+
+<li>
+	<button on:click={() => handleDropdown()} class={liButtonClass}
+		>{name}
+		<svg
+			class="ml-1 w-4 h-4"
+			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
+	>
+
+	<!-- Dropdown menu -->
+	<div class:hidden class:block class={dropdownDiv} style="position: absolute; margin: 0px;">
+		<ul class="py-1" aria-labelledby="dropdownLargeButton">
+			{#each child as item}
+				<li>
+					<a href={item.href} {rel} class={dropdownLinkClassWithChild}>{item.name}</a>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</li>

package/navbar/NavDropdown.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { NavbarType } from '../types';
+declare const __propDef: {
+    props: {
+        liButtonClass: string;
+        name: string;
+        child: NavbarType[];
+        dropdownDiv: string;
+        dropdownLinkClassWithChild: string;
+        rel: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type NavDropdownProps = typeof __propDef.props;
+export declare type NavDropdownEvents = typeof __propDef.events;
+export declare type NavDropdownSlots = typeof __propDef.slots;
+export default class NavDropdown extends SvelteComponentTyped<NavDropdownProps, NavDropdownEvents, NavDropdownSlots> {
+}
+export {};

package/navbar/Navbar.svelte

@@ -1,5 +1,5 @@
 <script >import { page, session } from '$app/stores';
-export let sitename = 'Svelte Flow';
+export let name = 'Svelte Flow';
 export let logo = '/images/mkdir-logo.png';
 export let alt = 'Svelte Flow';
 export let textsize = 'text-sm';
@@ -19,7 +19,7 @@ export let liLinkClass = `block py-2 pr-4 pl-3  text-gray-700 border-b border-gr
 	<div class={navDivClass}>
 		<a href="/" class="flex">
 			<img src={logo} {alt} />
-			<span class={spanClass}>{sitename}</span>
+			<span class={spanClass}>{name}</span>
 		</a>
 		<button
 			on:click={handleClickbtn}

package/navbar/Navbar.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { LinkType } from '../types';
 declare const __propDef: {
     props: {
-        sitename?: string;
+        name?: string;
         logo?: string;
         alt?: string;
         textsize?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.12.0",
+  "version": "0.12.3",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -125,18 +125,26 @@
     "./modals/SmallModal.svelte": "./modals/SmallModal.svelte",
     "./modals/modalStores": "./modals/modalStores.js",
     "./navbar/DropdownNavbar.svelte": "./navbar/DropdownNavbar.svelte",
+    "./navbar/NavDropdown.svelte": "./navbar/NavDropdown.svelte",
     "./navbar/Navbar.svelte": "./navbar/Navbar.svelte",
     "./paginations/Next.svelte": "./paginations/Next.svelte",
     "./paginations/Pagination.svelte": "./paginations/Pagination.svelte",
     "./paginations/Previous.svelte": "./paginations/Previous.svelte",
     "./paginations/TableData.svelte": "./paginations/TableData.svelte",
     "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
+    "./sidebars/SidebarDropdown.svelte": "./sidebars/SidebarDropdown.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/FullWidthTabs.svelte": "./tabs/FullWidthTabs.svelte",
+    "./tabs/IconTabs.svelte": "./tabs/IconTabs.svelte",
+    "./tabs/InteractiveTabHead.svelte": "./tabs/InteractiveTabHead.svelte",
     "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
     "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
+    "./tabs/TabContent.svelte": "./tabs/TabContent.svelte",
+    "./tabs/UnderlineTabs.svelte": "./tabs/UnderlineTabs.svelte",
+    "./tabs/tabStore": "./tabs/tabStore.js",
     "./timelines/Activity.svelte": "./timelines/Activity.svelte",
     "./timelines/ActivityItem.svelte": "./timelines/ActivityItem.svelte",
     "./timelines/Group.svelte": "./timelines/Group.svelte",

package/sidebars/Sidebar.svelte

@@ -1,13 +1,7 @@
-<script >import { slide } from 'svelte/transition';
+<script >import SidebarDropdown from './SidebarDropdown.svelte';
 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">
@@ -23,48 +17,7 @@ const handleDropdown = (id) => {
 		<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>
+					<SidebarDropdown {link} />
 				{:else}
 					<li>
 						<a

package/sidebars/SidebarDropdown.svelte

@@ -0,0 +1,50 @@
+<script >import { slide } from 'svelte/transition';
+export let link;
+let isOpen = false;
+let activeDropdown = undefined;
+const handleDropdown = (id) => {
+    isOpen = !isOpen;
+    activeDropdown = id;
+};
+</script>
+
+<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>

package/sidebars/SidebarDropdown.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SidebarType } from '../types';
+declare const __propDef: {
+    props: {
+        link: SidebarType;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SidebarDropdownProps = typeof __propDef.props;
+export declare type SidebarDropdownEvents = typeof __propDef.events;
+export declare type SidebarDropdownSlots = typeof __propDef.slots;
+export default class SidebarDropdown extends SvelteComponentTyped<SidebarDropdownProps, SidebarDropdownEvents, SidebarDropdownSlots> {
+}
+export {};

package/tabs/FullWidthTabs.svelte

@@ -0,0 +1,31 @@
+<script >export let tabs;
+export let tabLabel;
+</script>
+
+<div class="sm:hidden">
+	<label for="tabs" class="sr-only">{tabLabel}</label>
+	<select
+		id="tabs"
+		class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+	>
+		{#each tabs as { name }}
+			<option>{name}</option>
+		{/each}
+	</select>
+</div>
+<ul
+	class="hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400"
+>
+	{#each tabs as { name, href, rel, active }}
+		<li class="w-full">
+			<a
+				{href}
+				{rel}
+				class={active
+					? 'inline-block p-4 w-full text-gray-900 bg-gray-100 rounded-l-lg focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white'
+					: 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'}
+				aria-current="page">{name}</a
+			>
+		</li>
+	{/each}
+</ul>

package/tabs/FullWidthTabs.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TabType } from '../types';
+declare const __propDef: {
+    props: {
+        tabs: TabType[];
+        tabLabel: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FullWidthTabsProps = typeof __propDef.props;
+export declare type FullWidthTabsEvents = typeof __propDef.events;
+export declare type FullWidthTabsSlots = typeof __propDef.slots;
+export default class FullWidthTabs extends SvelteComponentTyped<FullWidthTabsProps, FullWidthTabsEvents, FullWidthTabsSlots> {
+}
+export {};

package/tabs/IconTabs.svelte

@@ -0,0 +1,24 @@
+<script >export let tabs;
+export let iconClass = 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300';
+</script>
+
+<div class="border-b border-gray-200 dark:border-gray-700">
+	<ul
+		class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400"
+	>
+		{#each tabs as { name, active, href, rel, icon }}
+			<li class="mr-2">
+				<a
+					{href}
+					{rel}
+					class={active
+						? 'inline-flex p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500 group'
+						: '  inline-flex p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group '}
+				>
+					<svelte:component this={icon} className={iconClass} />
+					{name}
+				</a>
+			</li>
+		{/each}
+	</ul>
+</div>

package/tabs/IconTabs.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IconTabType } from '../types';
+declare const __propDef: {
+    props: {
+        tabs: IconTabType[];
+        iconClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type IconTabsProps = typeof __propDef.props;
+export declare type IconTabsEvents = typeof __propDef.events;
+export declare type IconTabsSlots = typeof __propDef.slots;
+export default class IconTabs extends SvelteComponentTyped<IconTabsProps, IconTabsEvents, IconTabsSlots> {
+}
+export {};

package/tabs/InteractiveTabHead.svelte

@@ -0,0 +1,53 @@
+<script >import { tabStore } from './tabStore';
+export let tabs;
+export let tabId = 'myTab';
+export let activeTabValue = 1;
+const handleClick = (tabValue) => () => {
+    tabStore.update((n) => (n = tabValue));
+    activeTabValue = tabValue;
+};
+</script>
+
+<!--
+@component
+Header part of Interactive tab component. Use with TabContent.
+
+@param tabs: TabHeadType[];
+@param tabId = 'myTab';
+
+- Usage:
+
+  ```tsx
+  <InteractiveHead>
+    <TabContent>
+      Some HTML|Component|string
+    </TabContent>
+  </InteractiveHead>
+  ```
+  -->
+<div class="mb-4 border-b border-gray-200">
+	<ul
+		class="flex flex-wrap -mb-px text-sm font-medium text-center"
+		id={tabId}
+		data-tabs-toggle="#myTabContent"
+		role="tablist"
+	>
+		{#each tabs as { name, id }}
+			<li class="mr-2" role="presentation">
+				<button
+					on:click={handleClick(id)}
+					class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
+					id="{name}-tab"
+					data-tabs-target="#{name}"
+					type="button"
+					role="tab"
+					class:active={activeTabValue === id}
+					aria-controls={name}
+					aria-selected="false">{name}</button
+				>
+			</li>
+		{/each}
+	</ul>
+</div>
+
+<slot />

package/tabs/InteractiveTabHead.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TabHeadType } from '../types';
+declare const __propDef: {
+    props: {
+        tabs: TabHeadType[];
+        tabId?: string;
+        activeTabValue?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type InteractiveTabHeadProps = typeof __propDef.props;
+export declare type InteractiveTabHeadEvents = typeof __propDef.events;
+export declare type InteractiveTabHeadSlots = typeof __propDef.slots;
+/**
+ * Header part of Interactive tab component. Use with TabContent.
+ *
+ * @param tabs: TabHeadType[];
+ * @param tabId = 'myTab';
+ *
+ * - Usage:
+ *
+ * ```tsx
+ * <InteractiveHead>
+ *   <TabContent>
+ *     Some HTML|Component|string
+ *   </TabContent>
+ * </InteractiveHead>
+ * ```
+ */
+export default class InteractiveTabHead extends SvelteComponentTyped<InteractiveTabHeadProps, InteractiveTabHeadEvents, InteractiveTabHeadSlots> {
+}
+export {};

package/tabs/InteractiveTabs.svelte

@@ -32,7 +32,7 @@ export let tabs;
 			>
 				{#if typeof content === 'string'}
 					<p class="text-sm text-gray-500 dark:text-gray-400">
-						{content}
+						{@html content}
 					</p>
 				{:else}
 					<svelte:component this={content} />

package/tabs/TabContent.svelte

@@ -0,0 +1,32 @@
+<script >import { tabStore } from './tabStore';
+export let divClass = 'p-4 rounded-lg dark:bg-gray-800';
+export let tab;
+let activeTabValue;
+tabStore.subscribe((value) => {
+    activeTabValue = value;
+});
+</script>
+
+<!--
+@component
+Content part of Interactive tab component. Use with InteractiveHead.
+
+- let tabId = 'myTab';
+- let tabs: TabHeadType;
+- let divClass: string;
+- Usage:
+
+  ```tsx
+  <InteractiveHead>
+    <TabContent>
+      Some HTML|Component|string
+    </TabContent>
+  </InteractiveHead>
+  ```
+-->
+
+{#if activeTabValue === tab.id}
+	<div class={divClass} id="{tab.id}Content" role="tabpanel" aria-labelledby="{tab.name}-tab">
+		<slot />
+	</div>
+{/if}

package/tabs/TabContent.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TabHeadType } from '../types';
+declare const __propDef: {
+    props: {
+        divClass?: string;
+        tab: TabHeadType;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabContentProps = typeof __propDef.props;
+export declare type TabContentEvents = typeof __propDef.events;
+export declare type TabContentSlots = typeof __propDef.slots;
+/**
+ * Content part of Interactive tab component. Use with InteractiveHead.
+ *
+ * - let tabId = 'myTab';
+ * - let tabs: TabHeadType;
+ * - let divClass: string;
+ * - Usage:
+ *
+ * ```tsx
+ * <InteractiveHead>
+ *   <TabContent>
+ *     Some HTML|Component|string
+ *   </TabContent>
+ * </InteractiveHead>
+ * ```
+ */
+export default class TabContent extends SvelteComponentTyped<TabContentProps, TabContentEvents, TabContentSlots> {
+}
+export {};

package/tabs/UnderlineTabs.svelte

@@ -0,0 +1,20 @@
+<script >export let divClass = 'text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700';
+export let tabs;
+</script>
+
+<div class={divClass}>
+	<ul class="flex flex-wrap -mb-px">
+		{#each tabs as { name, active, href, rel }}
+			<li class="mr-2">
+				<a
+					{href}
+					{rel}
+					class={active
+						? 'inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500'
+						: '  inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 '}
+					>{name}</a
+				>
+			</li>
+		{/each}
+	</ul>
+</div>

package/tabs/UnderlineTabs.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TabType } from '../types';
+declare const __propDef: {
+    props: {
+        divClass?: string;
+        tabs: TabType[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type UnderlineTabsProps = typeof __propDef.props;
+export declare type UnderlineTabsEvents = typeof __propDef.events;
+export declare type UnderlineTabsSlots = typeof __propDef.slots;
+export default class UnderlineTabs extends SvelteComponentTyped<UnderlineTabsProps, UnderlineTabsEvents, UnderlineTabsSlots> {
+}
+export {};

package/tabs/tabStore.d.ts

@@ -0,0 +1,2 @@
+import type { Writable } from 'svelte/store';
+export declare const tabStore: Writable<number>;

package/tabs/tabStore.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const tabStore = writable(1);

package/types.d.ts

@@ -43,18 +43,28 @@ export interface TabType {
     href: string;
     rel?: string;
 }
+export interface IconTabType {
+    name: string;
+    active: boolean;
+    href: string;
+    rel?: string;
+    icon?: typeof SvelteComponent;
+}
 export interface InteractiveTabType {
     name: string;
     id: number;
     content: string | typeof SvelteComponent;
 }
+export interface TabHeadType {
+    name: string;
+    id: number;
+}
 export interface PillTabType {
     name: string;
     selected: boolean;
     href: string;
 }
 export interface NavbarType {
-    id: number;
     name: string;
     href: string;
     rel?: string;