flowbite-svelte 0.25.23 → 0.26.1

package/CHANGELOG.md

@@ -2,6 +2,63 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.26.1](https://github.com/themesberg/flowbite-svelte/compare/v0.26.0...v0.26.1) (2022-08-29)
+
+
+### Features
+
+* new tab components and page ([7c53437](https://github.com/themesberg/flowbite-svelte/commit/7c534377c31384b609774db19b0bace7fee3d5cb))
+* working on Tabs ([201c124](https://github.com/themesberg/flowbite-svelte/commit/201c124e33bed0d1b13cfe2e3f6ba5ea0bfc6c1c))
+
+
+### Bug Fixes
+
+* fixing the tab page layout problem ([bc3b7bf](https://github.com/themesberg/flowbite-svelte/commit/bc3b7bf32100abbbab3fede7fa6a912ff81d00f6))
+* remove heros from cards page ([c46f0b3](https://github.com/themesberg/flowbite-svelte/commit/c46f0b3f9a16793f12d68fd3d1b9e973dd1f7b4a))
+* remove heros from megamenu and list-group page ([9980b7d](https://github.com/themesberg/flowbite-svelte/commit/9980b7d98668c0356217dd3aac810c52cd5e0e51))
+* remove heros from popover page ([eeff79f](https://github.com/themesberg/flowbite-svelte/commit/eeff79f53733a8f5cbb480eead692f111f96b07c))
+* remove heros from sidebars page ([a3981a0](https://github.com/themesberg/flowbite-svelte/commit/a3981a09b6b36dcbcb90cfad789bee6a10dae9a1))
+* remove heros icons from select and toggle pages ([fba7660](https://github.com/themesberg/flowbite-svelte/commit/fba7660c1bf08c47a9d0200db545f0b1fce457a9))
+* remove unused icon prop ([10e8c81](https://github.com/themesberg/flowbite-svelte/commit/10e8c81dae9e0470ef875fc95dd7d89decdae732))
+* Review component and review in the ratings page ([afe6972](https://github.com/themesberg/flowbite-svelte/commit/afe69726d08a3cad7de7f29db131909816bc9c3e))
+
+## [0.26.0](https://github.com/themesberg/flowbite-svelte/compare/v0.25.24...v0.26.0) (2022-08-29)
+
+
+### ⚠ BREAKING CHANGES
+
+* Tooltip changed in accordance to new Popper implementation.
+
+- Tooltip examples corrected
+- Avatar example corrected
+
+### Features
+
+* tooltips new API ([d9dacf9](https://github.com/themesberg/flowbite-svelte/commit/d9dacf9f65e85be93a3458dd5359d614a0dd12a0))
+
+
+### Bug Fixes
+
+* Avatar tooltip example ([ff7c1af](https://github.com/themesberg/flowbite-svelte/commit/ff7c1af20306609f77831ff1d2632700a9f596da))
+* docs corrections ([f208323](https://github.com/themesberg/flowbite-svelte/commit/f208323ac1457b88572aaae37531e6b3da1055de))
+* docs corrections 2 ([5adb4d8](https://github.com/themesberg/flowbite-svelte/commit/5adb4d816591d7bc9aff2e549fc364c80e650b4b))
+
+
+* Merge branch 'jjagielka-tooltip' ([1c37601](https://github.com/themesberg/flowbite-svelte/commit/1c3760139e24569287891c1ca3f67f2e0e3b9168))
+
+### [0.25.24](https://github.com/themesberg/flowbite-svelte/compare/v0.25.23...v0.25.24) (2022-08-28)
+
+
+### Features
+
+* popper reloaded ([a4b851e](https://github.com/themesberg/flowbite-svelte/commit/a4b851e2409356a90fd6aaae62db327b505bdcb2))
+* popper reloaded part 2 ([2482870](https://github.com/themesberg/flowbite-svelte/commit/2482870842386c8c1e5824869ce7822b8682e8a0))
+
+
+### Bug Fixes
+
+* tab page timeline ([ab598a5](https://github.com/themesberg/flowbite-svelte/commit/ab598a59a3d373f14740a42bbaec3cb276eed34b))
+
 ### [0.25.23](https://github.com/themesberg/flowbite-svelte/compare/v0.25.22...v0.25.23) (2022-08-28)
 
 

package/avatar/Avatar.svelte

@@ -22,17 +22,17 @@ $: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1
 
 <Dot show={$$props.dot} {rounded} {...dot} {size} class={sizes[size]}>
 	{#if src}
-		<img class={avatarClass} {alt} {src} />
+		<img {alt} {src} {...$$restProps} class={avatarClass} />
 	{:else if $$slots.default}
 		<svelte:element
 			this={href ? 'a' : 'div'}
-			class="flex justify-center items-center text-xs font-medium {avatarClass}"
 			{href}
-		>
+			{...$$restProps}
+			class="flex justify-center items-center text-xs font-medium {avatarClass}">
 			<slot />
 		</svelte:element>
 	{:else}
-		<svelte:element this={href ? 'a' : 'div'} class={avatarClass}>
+		<svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
 			<AvatarPlaceholder {rounded} />
 		</svelte:element>
 	{/if}

package/dropdowns/Dropdown.svelte

@@ -6,12 +6,15 @@ import ChevronUp from '../utils/ChevronUp.svelte';
 import ChevronRight from '../utils/ChevronRight.svelte';
 import ChevronDown from '../utils/ChevronDown.svelte';
 import ChevronLeft from '../utils/ChevronLeft.svelte';
+import generateId from '../utils/generateId';
 export let label = '';
 export let inline = false;
 export let arrowIcon = true;
 export let labelClass = 'flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent';
 export let placement = 'bottom';
 export let open = false;
+export let triggeredBy = undefined;
+let id = generateId();
 setContext('background', true);
 const icons = {
     top: ChevronUp,
@@ -25,18 +28,10 @@ let popoverClass;
 $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800', 'text-gray-500 dark:text-gray-400', 'border border-gray-200 dark:border-gray-700', 'outline-none', $$props.class);
 </script>
 
-<Popper
-	activeContent={true}
-	arrow={false}
-	{placement}
-	{...$$restProps}
-	class={popoverClass}
-	trigger="click"
-	on:show
-	bind:open>
-	<slot name="trigger" slot="trigger">
+{#if label}
+	<slot name="trigger">
 		{#if inline}
-			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
+			<button {id} class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
 					<svelte:component
@@ -45,7 +40,7 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 				{/if}
 			</button>
 		{:else}
-			<Button {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
+			<Button {id} {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
 					<svelte:component
@@ -55,6 +50,18 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 			</Button>
 		{/if}
 	</slot>
+{/if}
+
+<Popper
+	activeContent={true}
+	arrow={false}
+	{placement}
+	{...$$restProps}
+	class={popoverClass}
+	trigger="click"
+	on:show
+	bind:open
+	triggeredBy={triggeredBy ?? '#' + id}>
 	<slot name="content">
 		<ul class="py-1">
 			<slot />

package/dropdowns/Dropdown.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         labelClass?: string;
         placement?: 'auto' | Placement;
         open?: boolean;
+        triggeredBy?: string;
     };
     events: {
         show: CustomEvent<any>;
@@ -16,9 +17,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {
-            slot: string;
-        };
+        trigger: {};
         label: {};
         content: {};
         default: {};

package/dropdowns/DropdownItem.svelte

@@ -18,6 +18,7 @@ const colors = {
 	on:blur
 	on:mouseenter
 	on:mouseleave
+	tabindex="0"
 >
 	<slot />
 </li>

package/index.d.ts

@@ -98,6 +98,10 @@ 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 TabHead } from './tabs/TabHead.svelte';
+export { default as TabHeadItem } from './tabs/TabHeadItem.svelte';
+export { default as TabContentItem } from './tabs/TabContentItem.svelte';
+export { default as TabWrapper } from './tabs/TabWrapper.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';
@@ -128,3 +132,5 @@ export { default as ChevronDown } from './utils/ChevronDown.svelte';
 export { default as ChevronLeft } from './utils/ChevronLeft.svelte';
 export { default as ChevronRight } from './utils/ChevronRight.svelte';
 export { default as ChevronUp } from './utils/ChevronUp.svelte';
+export { default as InformationCircle } from './utils/InformationCircle.svelte';
+export { default as UserCircle } from './utils/UserCircle.svelte';

package/index.js

@@ -126,6 +126,11 @@ 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';
+// Tabs new
+export { default as TabHead } from './tabs/TabHead.svelte';
+export { default as TabHeadItem } from './tabs/TabHeadItem.svelte';
+export { default as TabContentItem } from './tabs/TabContentItem.svelte';
+export { default as TabWrapper } from './tabs/TabWrapper.svelte';
 // Timeline
 export { default as Group } from './timelines/Group.svelte';
 export { default as GroupItem } from './timelines/GroupItem.svelte';
@@ -162,3 +167,5 @@ export { default as ChevronDown } from './utils/ChevronDown.svelte';
 export { default as ChevronLeft } from './utils/ChevronLeft.svelte';
 export { default as ChevronRight } from './utils/ChevronRight.svelte';
 export { default as ChevronUp } from './utils/ChevronUp.svelte';
+export { default as InformationCircle } from './utils/InformationCircle.svelte';
+export { default as UserCircle } from './utils/UserCircle.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.23",
+  "version": "0.26.1",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -207,6 +207,11 @@
     "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
     "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
     "./tabs/TabContent.svelte": "./tabs/TabContent.svelte",
+    "./tabs/TabContentItem.svelte": "./tabs/TabContentItem.svelte",
+    "./tabs/TabContentWrapper.svelte": "./tabs/TabContentWrapper.svelte",
+    "./tabs/TabHead.svelte": "./tabs/TabHead.svelte",
+    "./tabs/TabHeadItem.svelte": "./tabs/TabHeadItem.svelte",
+    "./tabs/TabWrapper.svelte": "./tabs/TabWrapper.svelte",
     "./tabs/Tabs.svelte": "./tabs/Tabs.svelte",
     "./tabs/UnderlineTabs.svelte": "./tabs/UnderlineTabs.svelte",
     "./tabs/tabStores": "./tabs/tabStores.js",
@@ -241,9 +246,12 @@
     "./utils/ChevronRight.svelte": "./utils/ChevronRight.svelte",
     "./utils/ChevronUp.svelte": "./utils/ChevronUp.svelte",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
+    "./utils/InformationCircle.svelte": "./utils/InformationCircle.svelte",
     "./utils/Popper.svelte": "./utils/Popper.svelte",
+    "./utils/UserCircle.svelte": "./utils/UserCircle.svelte",
     "./utils/Wrapper.svelte": "./utils/Wrapper.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
+    "./utils/createEventDispatcher": "./utils/createEventDispatcher.js",
     "./utils/focusTrap": "./utils/focusTrap.js",
     "./utils/generateId": "./utils/generateId.js"
   },

package/popover/Popover.svelte

@@ -1,16 +1,16 @@
 <script>import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
 export let title = '';
+export let triggeredBy;
 let popoverClass;
 $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800', 'text-gray-500 dark:text-gray-400', 'border border-gray-200 dark:border-gray-700', $$props.class);
 </script>
 
-<Popper activeContent={true} {...$$restProps} class={popoverClass} on:show>
+<Popper activeContent={true} {triggeredBy} {...$$restProps} class={popoverClass} on:show>
 	<slot name="trigger" slot="trigger" />
 	{#if $$slots.title || title}
 		<div
-			class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700"
-		>
+			class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">
 			<slot name="title">
 				<h3 class="font-semibold text-gray-900 dark:text-white">{title}</h3>
 			</slot>

package/popover/Popover.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         title?: string;
+        triggeredBy: string;
     };
     events: {
         show: CustomEvent<any>;

package/ratings/Review.svelte

@@ -15,29 +15,26 @@ export let liClass = 'flex items-center';
 				<p>{review.name}</p>
 				{#if review.address}
 					<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
-						{#if review.addressIcon}
-							<svelte:component this={review.addressIcon} size="16" class="mr-2" />
-						{/if}
-						{review.address}
+						<slot name="address" />
 					</div>
 				{/if}
 			</div>
 		</div>
-		{#if $$slots.item || $$slots.option1 || $$slots.option2}
+		{#if $$slots.item1 || $$slots.item2 || $$slots.item3}
 			<ul class={classNames(ulClass, $$props.classUl)}>
-				{#if $$slots.item}
+				{#if $$slots.item1}
 					<li class={classNames(liClass, $$props.classLi)}>
-						<slot name="item" />
+						<slot name="item1" />
 					</li>
 				{/if}
-				{#if $$slots.option1}
+				{#if $$slots.item2}
 					<li class={classNames(liClass, $$props.classLi)}>
-						<slot name="option1" />
+						<slot name="item2" />
 					</li>
 				{/if}
-				{#if $$slots.option2}
+				{#if $$slots.item3}
 					<li class={classNames(liClass, $$props.classLi)}>
-						<slot name="option2" />
+						<slot name="item3" />
 					</li>
 				{/if}
 			</ul>
@@ -58,8 +55,7 @@ export let liClass = 'flex items-center';
 				</h4>
 			</div>
 			<p
-				class="bg-blue-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded"
-			>
+				class="bg-blue-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
 				{review.rating}
 			</p>
 		</div>

package/ratings/Review.svelte.d.ts

@@ -14,9 +14,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        item: {};
-        option1: {};
-        option2: {};
+        address: {};
+        item1: {};
+        item2: {};
+        item3: {};
         default: {};
     };
 };

package/sidebars/SidebarDropdownWrapper.svelte

@@ -6,7 +6,6 @@ export let btnClass = 'flex items-center p-2 w-full text-base font-normal text-g
 export let label = '';
 export let spanClass = 'flex-1 ml-3 text-left whitespace-nowrap';
 export let ulClass = 'py-2 space-y-2';
-export let icon;
 let isOpen = false;
 const handleDropdown = () => {
     isOpen = !isOpen;
@@ -20,11 +19,7 @@ const handleDropdown = () => {
 		type="button"
 		class={classNames(btnClass, $$props.class)}
 		aria-controls="sidebar-dropdown">
-		<svelte:component
-			this={icon.name}
-			size={icon.size}
-			color={icon.color}
-			class="mr-2 {icon.class}" />
+		<slot name="icon" />
 		<span class={spanClass} sidebar-toggle-item>{label}</span>
 		<ChevronDown />
 	</button>

package/sidebars/SidebarDropdownWrapper.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { IconType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,12 +6,12 @@ declare const __propDef: {
         label?: string;
         spanClass?: string;
         ulClass?: string;
-        icon: IconType;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        icon: {};
         default: {};
     };
 };

package/sidebars/SidebarItem.svelte

@@ -3,7 +3,6 @@ export let aClass = 'flex items-center p-2 text-base font-normal text-gray-900 r
 export let href = '';
 export let label = '';
 export let spanClass = 'ml-3';
-export let icon;
 </script>
 
 <li>
@@ -19,14 +18,8 @@ export let icon;
 		on:mouseenter
 		on:mouseleave
 		on:mouseover
-		class={classNames(aClass, $$props.class)}
-	>
-		<svelte:component
-			this={icon.name}
-			size={icon.size}
-			color={icon.color}
-			class="mr-2 {icon.class}"
-		/>
+		class={classNames(aClass, $$props.class)}>
+		<slot name="icon" />
 		<span class={spanClass}>{label}</span>
 		{#if $$slots.subtext}
 			<slot name="subtext" />

package/sidebars/SidebarItem.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { IconType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -7,7 +6,6 @@ declare const __propDef: {
         href?: string;
         label?: string;
         spanClass?: string;
-        icon: IconType;
     };
     events: {
         blur: FocusEvent;
@@ -23,6 +21,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        icon: {};
         subtext: {};
     };
 };

package/tabs/TabContentItem.svelte

@@ -0,0 +1,10 @@
+<script>export let activeTabValue;
+export let id;
+export let contentDivClass = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800';
+</script>
+
+{#if activeTabValue === id}
+	<div class={contentDivClass} id="{id}-tabitem" role="tabpanel" aria-labelledby="{id}-tab">
+		<slot />
+	</div>
+{/if}

package/tabs/TabContentItem.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        activeTabValue: number;
+        id: number;
+        contentDivClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabContentItemProps = typeof __propDef.props;
+export declare type TabContentItemEvents = typeof __propDef.events;
+export declare type TabContentItemSlots = typeof __propDef.slots;
+export default class TabContentItem extends SvelteComponentTyped<TabContentItemProps, TabContentItemEvents, TabContentItemSlots> {
+}
+export {};

package/tabs/TabContentWrapper.svelte

@@ -0,0 +1,8 @@
+<script>import { getContext } from 'svelte';
+let tabId;
+tabId = getContext('tabId');
+</script>
+
+<div id="{tabId}-content">
+	<slot />
+</div>

package/tabs/TabContentWrapper.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabContentWrapperProps = typeof __propDef.props;
+export declare type TabContentWrapperEvents = typeof __propDef.events;
+export declare type TabContentWrapperSlots = typeof __propDef.slots;
+export default class TabContentWrapper extends SvelteComponentTyped<TabContentWrapperProps, TabContentWrapperEvents, TabContentWrapperSlots> {
+}
+export {};

package/tabs/TabHead.svelte

@@ -0,0 +1,27 @@
+<script>export let tabStyle;
+export let tabId;
+export let customDivClass = '';
+export let customUlClass = '';
+const divClasses = {
+    default: 'mb-4 border-b border-gray-200 dark:border-gray-700',
+    full: 'mb-4',
+    icon: 'mb-4 border-b border-gray-200 dark:border-gray-700',
+    pill: 'mb-4 ',
+    underline: 'mb-4 text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700',
+    custom: customDivClass
+};
+const ulClasses = {
+    default: 'flex flex-wrap -mb-px',
+    full: '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 mb-1',
+    icon: 'flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400',
+    pill: 'flex flex-wrap',
+    underline: 'flex flex-wrap -mb-px',
+    custom: customUlClass
+};
+</script>
+
+<div class={divClasses[tabStyle]}>
+	<ul class={ulClasses[tabStyle]} id={tabId} role="tablist">
+		<slot />
+	</ul>
+</div>

package/tabs/TabHead.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tabStyle: any;
+        tabId: any;
+        customDivClass?: string;
+        customUlClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabHeadProps = typeof __propDef.props;
+export declare type TabHeadEvents = typeof __propDef.events;
+export declare type TabHeadSlots = typeof __propDef.slots;
+export default class TabHead extends SvelteComponentTyped<TabHeadProps, TabHeadEvents, TabHeadSlots> {
+}
+export {};

package/tabs/TabHeadItem.svelte

@@ -0,0 +1,54 @@
+<script>import classNames from 'classnames';
+export let id;
+export let tabStyle;
+export let activeTabValue;
+export let customActiveClass = '';
+export let customInActiveClass = '';
+export let customLiClass = '';
+const activeClasses = {
+    default: 'inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500',
+    full: 'inline-block p-4 w-full text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white',
+    icon: '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',
+    pill: 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg',
+    underline: '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',
+    custom: customActiveClass
+};
+const inactiveClasses = {
+    default: 'inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300',
+    full: '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',
+    icon: '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 ',
+    pill: 'inline-block py-3 px-4 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white',
+    underline: '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',
+    custom: customInActiveClass
+};
+const liClasses = {
+    default: 'mr-2',
+    full: 'w-full',
+    icon: 'mr-2',
+    pill: 'mr-2',
+    underline: 'mr-2',
+    custom: customLiClass
+};
+</script>
+
+<li class={liClasses[tabStyle]} role="presentation">
+	<button
+		{...$$restProps}
+		on:click
+		on:blur
+		on:click
+		on:focus
+		on:keydown
+		on:keypress
+		on:keyup
+		on:mouseenter
+		on:mouseleave
+		on:mouseover
+		class={classNames(activeTabValue === id ? activeClasses[tabStyle] : inactiveClasses[tabStyle])}
+		id="{id}-tabhead"
+		type="button"
+		role="tab"
+		{...$$restProps}>
+		<slot />
+	</button>
+</li>

package/tabs/TabHeadItem.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: number;
+        tabStyle: string;
+        activeTabValue: number;
+        customActiveClass?: string;
+        customInActiveClass?: string;
+        customLiClass?: string;
+    };
+    events: {
+        click: MouseEvent;
+        blur: FocusEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabHeadItemProps = typeof __propDef.props;
+export declare type TabHeadItemEvents = typeof __propDef.events;
+export declare type TabHeadItemSlots = typeof __propDef.slots;
+export default class TabHeadItem extends SvelteComponentTyped<TabHeadItemProps, TabHeadItemEvents, TabHeadItemSlots> {
+}
+export {};

package/tabs/TabWrapper.svelte

@@ -0,0 +1,10 @@
+<script>import classNames from 'classnames';
+export let divClass = 'w-full';
+export let tabStyle = 'default';
+let tabId;
+export let activeTabValue;
+</script>
+
+<div class={classNames(divClass, $$props.class)}>
+	<slot {tabStyle} {tabId} {activeTabValue} />
+</div>

package/tabs/TabWrapper.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string;
+        tabStyle?: 'default' | 'full' | 'icon' | 'pill' | 'underline' | 'custom';
+        activeTabValue: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            tabStyle: "default" | "custom" | "full" | "icon" | "pill" | "underline";
+            tabId: number;
+            activeTabValue: number;
+        };
+    };
+};
+export declare type TabWrapperProps = typeof __propDef.props;
+export declare type TabWrapperEvents = typeof __propDef.events;
+export declare type TabWrapperSlots = typeof __propDef.slots;
+export default class TabWrapper extends SvelteComponentTyped<TabWrapperProps, TabWrapperEvents, TabWrapperSlots> {
+}
+export {};

package/tabs/Tabs.svelte

@@ -87,13 +87,11 @@ const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 					type="button"
 					role="tab"
 					aria-controls={name}
-					{disabled}
-				>
+					{disabled}>
 					{#if icon}
 						<svelte:component this={icon} size={iconSize} class={iconClass} />
 					{/if}
-					{name}</button
-				>
+					{name}</button>
 			</li>
 		{/each}
 	</ul>

package/tooltips/Tooltip.svelte

@@ -1,20 +1,19 @@
 <script>import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
-export let content = '';
+export let color = '';
 export let style = 'dark';
-export let tipColor = '';
 export let tipClass = 'py-2 px-3 text-sm font-medium rounded-lg shadow-sm tooltip';
-const tipStyleClasses = {
+export let triggeredBy;
+const colors = {
     dark: 'border border-gray-800 bg-gray-900 text-white dark:bg-gray-700 dark:border-gray-600',
     light: 'border border-gray-200 bg-white text-gray-900',
     auto: 'border border-gray-200 bg-white text-gray-900 dark:bg-gray-700 dark:text-white dark:border-gray-600 ',
-    custom: tipColor
+    custom: color
 };
 let toolTipClass;
-$: toolTipClass = classNames(tipClass, tipStyleClasses[style], $$props.class);
+$: toolTipClass = classNames(tipClass, colors[style], $$props.class);
 </script>
 
-<Popper activeContent={false} {...$$restProps} class={toolTipClass} on:show>
-	<slot slot="trigger" />
-	<slot name="content">{content}</slot>
+<Popper activeContent={false} {triggeredBy} {...$$restProps} class={toolTipClass} on:show>
+	<slot />
 </Popper>

package/tooltips/Tooltip.svelte.d.ts

@@ -2,10 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        content?: string;
+        color?: string;
         style?: 'dark' | 'light' | 'auto' | 'custom';
-        tipColor?: string;
         tipClass?: string;
+        triggeredBy: string;
     };
     events: {
         show: CustomEvent<any>;
@@ -13,10 +13,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {
-            slot: string;
-        };
-        content: {};
+        default: {};
     };
 };
 export declare type TooltipProps = typeof __propDef.props;

package/types.d.ts

@@ -157,16 +157,12 @@ export declare type ReviewType = {
     imgSrc: string;
     imgAlt: string;
     address: string | undefined;
-    addressIcon: typeof SvelteComponent | undefined;
     reviewDate: string | undefined;
     title: string;
     rating: number;
-    item: string | undefined;
-    itemIcon: typeof SvelteComponent | undefined;
-    option1: string | undefined;
-    option1Icon: typeof SvelteComponent | undefined;
-    option2: string | undefined;
-    option2Icon: typeof SvelteComponent | undefined;
+    item1: string | undefined;
+    item2: string | undefined;
+    item3: string | undefined;
 };
 export declare type SelectOptionType = {
     name: string;

package/utils/InformationCircle.svelte

@@ -0,0 +1,37 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M11.25 11.25L11.2915 11.2293C11.8646 10.9427 12.5099 11.4603 12.3545 12.082L11.6455 14.918C11.4901 15.5397 12.1354 16.0573 12.7085 15.7707L12.75 15.75M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 8.25H12.0075V8.2575H12V8.25Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM10.9562 10.5584C12.1025 9.98533 13.3931 11.0206 13.0823 12.2639L12.3733 15.0999L12.4148 15.0792C12.7852 14.894 13.2357 15.0441 13.421 15.4146C13.6062 15.7851 13.4561 16.2356 13.0856 16.4208L13.0441 16.4416C11.8979 17.0147 10.6072 15.9794 10.9181 14.7361L11.6271 11.9001L11.5856 11.9208C11.2151 12.1061 10.7646 11.9559 10.5793 11.5854C10.3941 11.2149 10.5443 10.7644 10.9148 10.5792L10.9562 10.5584ZM12 9C12.4142 9 12.75 8.66421 12.75 8.25C12.75 7.83579 12.4142 7.5 12 7.5C11.5858 7.5 11.25 7.83579 11.25 8.25C11.25 8.66421 11.5858 9 12 9Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'information circle';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click
+>
+	{@html svgpath}
+</svg>

package/utils/InformationCircle.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InformationCircleProps = typeof __propDef.props;
+export declare type InformationCircleEvents = typeof __propDef.events;
+export declare type InformationCircleSlots = typeof __propDef.slots;
+export default class InformationCircle extends SvelteComponentTyped<InformationCircleProps, InformationCircleEvents, InformationCircleSlots> {
+}
+export {};

package/utils/Popper.svelte

@@ -1,84 +1,112 @@
-<script>import { createEventDispatcher } from 'svelte';
+<script>import { onMount } from 'svelte';
+import { fade } from 'svelte/transition';
 import { createPopper } from '@popperjs/core';
 import classNames from 'classnames';
-const dispatch = createEventDispatcher();
-export let open = false;
-export let placement = 'top';
+import createEventDispatcher from './createEventDispatcher';
+export let activeContent = false;
+export let animation = 100;
+export let arrow = true;
 export let offset = 8;
+export let placement = 'top';
 export let trigger = 'hover';
-export let arrow = true;
-export let animation = 'duration-300';
-export let activeContent;
+export let triggeredBy;
+const dispatch = createEventDispatcher();
+let open = false;
 let clickable;
 $: clickable = trigger === 'click';
-let triggerEl, contentEl, popper;
+$: dispatch('show', triggerEl, open);
+let triggerEl;
+let triggerEls = [];
+let popper;
 let _blocked = false; // managment of the race condition between focusin and click events
-const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 500));
+const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 250));
 const showHandler = (ev) => {
+    if (triggerEl === undefined)
+        triggerEl = ev.target;
+    else if (triggerEls.includes(ev.target) && triggerEl !== ev.target) {
+        triggerEl = ev.target;
+        block();
+    }
     if (clickable && ev.type === 'focusin' && !open)
         block();
-    open = ev.type === 'click' && !_blocked ? !open : true;
+    open = clickable && ev.type === 'click' && !_blocked ? !open : true;
 };
+// reactivity
+$: popper && (popper.state.elements.reference = triggerEl) && popper.setOptions({ placement });
+// typescript typeguards - poper.state.element.reference: Element|HTMLElement|VirtualElement
+const hasHover = (el) => el.matches && el.matches(':hover');
+const hasFocus = (el) => el.contains && el.contains(document.activeElement);
 const hideHandler = (ev) => {
-    if (activeContent)
-        setTimeout(() => (!clickable && (triggerEl.matches(':hover') || contentEl.matches(':hover'))) ||
-            contentEl.contains(document.activeElement) ||
-            (open = false), 100);
+    if (activeContent) {
+        setTimeout(() => {
+            const elements = Object.values(popper?.state.elements ?? {});
+            if (ev.type === 'mouseleave' && elements.some(hasHover))
+                return;
+            if (ev.type === 'focusout' && elements.some(hasFocus))
+                return;
+            open = false;
+        }, 100);
+    }
     else
         open = false;
 };
-$: {
-    if (triggerEl && contentEl) {
-        popper = createPopper(triggerEl, contentEl, {
-            placement,
-            modifiers: [{ name: 'offset', options: { offset: [0, offset] } }]
-        });
-    }
-}
-function enableListeners(modifiers) {
-    const modifier = modifiers.find((x) => x.name === 'eventListeners');
-    if (!modifier)
-        return [...modifiers, { name: 'eventListeners', enabled: open }];
-    modifier.enabled = open;
-    return modifiers;
+function init(node, _open) {
+    popper = createPopper(triggerEl, node, {
+        placement,
+        modifiers: [
+            { name: 'offset', options: { offset: [0, offset] } },
+            { name: 'eventListeners', enabled: open }
+        ]
+    });
+    return {
+        destroy() {
+            popper.destroy();
+        }
+    };
 }
-$: {
-    if (popper) {
-        // Enable the event listeners
-        popper.setOptions(({ modifiers, ...options }) => ({
-            ...options,
-            modifiers: enableListeners(modifiers)
-        }));
-        open && popper.update(); // Update the position
-        dispatch('show', open);
-    }
-}
-let divClass;
-$: divClass = classNames('z-10', animation && `transition-opacity ${animation}`, open ? 'visible opacity-100' : 'invisible opacity-0', $$props.class);
+onMount(() => {
+    const events = [
+        ['focusin', showHandler, true],
+        ['focusout', hideHandler, true],
+        ['click', showHandler, clickable],
+        ['mouseenter', showHandler, !clickable],
+        ['mouseleave', hideHandler, !clickable]
+    ];
+    triggerEls = [...document.querySelectorAll(triggeredBy)];
+    if (!triggerEls.length)
+        console.error('no triggers given');
+    triggerEls.forEach((element) => {
+        if (element.tabIndex < 0)
+            element.tabIndex = 0; // trigger must be focusable
+        for (const [name, handler, cond] of events)
+            if (cond)
+                element.addEventListener(name, handler);
+    });
+    return () => {
+        triggerEl = undefined;
+        triggerEls.forEach((element) => {
+            if (element) {
+                for (const [name, handler] of events)
+                    element.removeEventListener(name, handler);
+            }
+        });
+    };
+});
 </script>
 
-<div
-	bind:this={triggerEl}
-	on:focusin={showHandler}
-	on:focusout={hideHandler}
-	on:click={clickable ? showHandler : undefined}
-	on:mouseenter={clickable ? undefined : showHandler}
-	on:mouseleave={clickable ? undefined : hideHandler}
-	class="inline-block"
->
-	<slot name="trigger" />
-</div>
-<div
-	bind:this={contentEl}
-	role="tooltip"
-	tabindex={activeContent ? -1 : undefined}
-	class={divClass}
-	on:focusin={activeContent ? showHandler : undefined}
-	on:focusout={activeContent ? hideHandler : undefined}
-	on:mouseenter={activeContent && !clickable ? showHandler : undefined}
-	on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
-	style="position: absolute;"
->
-	<slot />
-	{#if arrow}<div data-popper-arrow />{/if}
-</div>
+{#if open}
+	<div
+		use:init={open}
+		transition:fade={{ duration: animation ? animation : 0 }}
+		role="tooltip"
+		tabIndex={activeContent ? -1 : undefined}
+		class={classNames('z-10', $$props.class)}
+		on:focusin={activeContent ? showHandler : undefined}
+		on:focusout={activeContent ? hideHandler : undefined}
+		on:mouseenter={activeContent && !clickable ? showHandler : undefined}
+		on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
+		style="position: absolute;">
+		<slot />
+		{#if arrow}<div data-popper-arrow />{/if}
+	</div>
+{/if}

package/utils/Popper.svelte.d.ts

@@ -3,21 +3,18 @@ import type { Placement } from '@popperjs/core';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        open?: boolean;
-        placement?: Placement;
+        activeContent?: boolean;
+        animation?: false | number;
+        arrow?: boolean;
         offset?: number;
+        placement?: Placement;
         trigger?: 'hover' | 'click';
-        arrow?: boolean;
-        animation?: false | `duration-${number}`;
-        activeContent: boolean;
+        triggeredBy: string;
     };
     events: {
-        show: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {};
         default: {};
     };
 };

package/utils/UserCircle.svelte

@@ -0,0 +1,37 @@
+<script>export let size = '24';
+export let color = 'currentColor';
+export let variation = 'outline';
+let viewBox;
+let svgpath;
+let svgoutline = `<path d="M17.9815 18.7248C16.6121 16.9175 14.4424 15.75 12 15.75C9.55761 15.75 7.38789 16.9175 6.01846 18.7248M17.9815 18.7248C19.8335 17.0763 21 14.6744 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 14.6744 4.1665 17.0763 6.01846 18.7248M17.9815 18.7248C16.3915 20.1401 14.2962 21 12 21C9.70383 21 7.60851 20.1401 6.01846 18.7248M15 9.75C15 11.4069 13.6569 12.75 12 12.75C10.3431 12.75 9 11.4069 9 9.75C9 8.09315 10.3431 6.75 12 6.75C13.6569 6.75 15 8.09315 15 9.75Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6854 19.0971C20.5721 17.3191 21.75 14.7971 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 14.7971 3.42785 17.3191 5.31463 19.0971C7.06012 20.7419 9.41234 21.75 12 21.75C14.5877 21.75 16.9399 20.7419 18.6854 19.0971ZM6.14512 17.8123C7.51961 16.0978 9.63161 15 12 15C14.3684 15 16.4804 16.0978 17.8549 17.8123C16.3603 19.3178 14.289 20.25 12 20.25C9.711 20.25 7.63973 19.3178 6.14512 17.8123ZM15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25C14.0711 5.25 15.75 6.92893 15.75 9Z" fill="${color}"/> `;
+$: switch (variation) {
+    case 'outline':
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+        break;
+    case 'solid':
+        svgpath = svgsolid;
+        viewBox = '0 0 24 24';
+        break;
+    default:
+        svgpath = svgoutline;
+        viewBox = '0 0 24 24';
+}
+export let ariaLabel = 'user circle';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click
+>
+	{@html svgpath}
+</svg>

package/utils/UserCircle.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: string;
+        color?: string;
+        variation?: 'solid' | 'outline';
+        ariaLabel?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type UserCircleProps = typeof __propDef.props;
+export declare type UserCircleEvents = typeof __propDef.events;
+export declare type UserCircleSlots = typeof __propDef.slots;
+export default class UserCircle extends SvelteComponentTyped<UserCircleProps, UserCircleEvents, UserCircleSlots> {
+}
+export {};

package/utils/createEventDispatcher.js

@@ -0,0 +1,24 @@
+/*
+ Custom Event Dispatcher
+ 
+ Sets `target` in event data.
+
+ https://svelte.dev/repl/c93cbf99a8ca4f44912e662a8e3cbef7?version=3.37.0
+
+*/
+
+import { get_current_component } from 'svelte/internal';
+
+export default function createEventDispatcher() {
+	const component = get_current_component();
+	return (type, target, detail) => {
+		const callbacks = component.$$.callbacks[type];
+		if (callbacks) {
+			const event = new CustomEvent(type, { detail });
+			target.dispatchEvent(event);
+			callbacks.slice().forEach((fn) => {
+				fn.call(component, event);
+			});
+		}
+	};
+}