flowbite-svelte 0.25.24 → 0.26.2

package/CHANGELOG.md

@@ -2,6 +2,62 @@
 
 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.2](https://github.com/themesberg/flowbite-svelte/compare/v0.26.1...v0.26.2) (2022-08-30)
+
+
+### Bug Fixes
+
+* add icon page ([0f5c966](https://github.com/themesberg/flowbite-svelte/commit/0f5c96626954d4174d10b99f2934365628f2ec08))
+* Iconinput click handler example ([2f5afc7](https://github.com/themesberg/flowbite-svelte/commit/2f5afc7554a7bb43d231cc39001ea31b9deafd1c))
+* remove heros icons from buttons page ([ec81a39](https://github.com/themesberg/flowbite-svelte/commit/ec81a393f438e2285d36ed7fea787af956c6f128))
+* remove heros icons from checkbox page ([1ed983c](https://github.com/themesberg/flowbite-svelte/commit/1ed983c2b230e6309ae6882972176480f8060487))
+* remove old tab components ([a61dd72](https://github.com/themesberg/flowbite-svelte/commit/a61dd728d1eb01bdbfeb61ff3adf8f96d7a1fbde))
+* remove svelte:component from FooterIcon ([0406128](https://github.com/themesberg/flowbite-svelte/commit/04061286046845c7f5c34f56ef89013d4a610aee))
+
+### [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)
 
 

package/footer/FooterIcon.svelte

@@ -2,15 +2,12 @@
 export let href = '';
 export let ariaLabel = '';
 export let aClass = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
-export let icon = null;
-export let iconClass = 'h-5 w-5';
-export let size = '20';
 </script>
 
 {#if href}
 	<a {href} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
-		<svelte:component this={icon} {size} class={iconClass} />
+		<slot />
 	</a>
 {:else}
-	<svelte:component this={icon} {size} class={iconClass} />
+	<slot />
 {/if}

package/footer/FooterIcon.svelte.d.ts

@@ -1,19 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
         href?: string;
         ariaLabel?: string;
         aClass?: string;
-        icon?: typeof SvelteComponent | null;
-        iconClass?: string;
-        size?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type FooterIconProps = typeof __propDef.props;
 export declare type FooterIconEvents = typeof __propDef.events;

package/forms/Iconinput.svelte

@@ -1,21 +1,17 @@
 <script>import classNames from 'classnames';
-// import type { InputType } from '../types';
-// export let type: InputType = 'text';
 export let value = '';
 export let size = 'md';
-export let icon;
 export let noBorder = false;
 export let inputClass = 'rounded-none rounded-r-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full border-gray-300 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';
 export let spanClass = 'inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 rounded-l-md border border-r-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600';
-export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10   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';
+export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full   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';
 export let pointerEvent = false;
 export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3';
-export let iconClass = 'mr-2';
 </script>
 
 {#if noBorder}
 	<div class="relative">
-		<span
+		<div
 			class={classNames(
 				noBorderDivClass,
 				{
@@ -24,47 +20,27 @@ export let iconClass = 'mr-2';
 					'sm:text-md p-4': size === 'lg'
 				},
 				pointerEvent ? 'cursor-pointer' : 'pointer-events-none'
-			)}
-		>
-			<svelte:component
-				this={icon}
-				on:click
-				size={classNames({
-					16: size === 'sm',
-					18: size === 'md',
-					20: size === 'lg'
-				})}
-				class={iconClass}
-			/>
-		</span>
+			)}>
+			<slot />
+		</div>
 		<input
 			{...$$restProps}
 			bind:value
 			class={classNames(
 				noBorderInputClass,
 				{
-					'p-2 sm:text-xs': size === 'sm',
-					'p-2.5 text-sm': size === 'md',
-					'sm:text-md p-4': size === 'lg'
+					'p-2 sm:text-xs pl-9': size === 'sm',
+					'p-2.5 text-sm pl-10': size === 'md',
+					'sm:text-md p-4 pl-11': size === 'lg'
 				},
 				$$props.class
-			)}
-		/>
+			)} />
 	</div>
 {:else}
 	<div class="flex">
-		<div class={spanClass}>
-			<svelte:component
-				this={icon}
-				on:click
-				size={classNames({
-					16: size === 'sm',
-					18: size === 'md',
-					20: size === 'lg'
-				})}
-				class={classNames(iconClass, pointerEvent ? 'cursor-pointer' : 'pointer-events-none')}
-			/>
-		</div>
+		<span class={spanClass}>
+			<slot />
+		</span>
 		<input
 			{...$$restProps}
 			bind:value
@@ -76,7 +52,6 @@ export let iconClass = 'mr-2';
 					'sm:text-md p-4': size === 'lg'
 				},
 				$$props.class
-			)}
-		/>
+			)} />
 	</div>
 {/if}

package/forms/Iconinput.svelte.d.ts

@@ -1,25 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
         value?: string;
         size?: 'sm' | 'md' | 'lg';
-        icon: typeof SvelteComponent;
         noBorder?: boolean;
         inputClass?: string;
         spanClass?: string;
         noBorderInputClass?: string;
         pointerEvent?: boolean;
         noBorderDivClass?: string;
-        iconClass?: string;
     };
     events: {
-        click: any;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type IconinputProps = typeof __propDef.props;
 export declare type IconinputEvents = typeof __propDef.events;

package/forms/Input.svelte

@@ -46,5 +46,4 @@ const setType = (node) => {
 			'sm:text-md p-4': size === 'lg'
 		},
 		$$props.class
-	)}
-/>
+	)} />

package/index.d.ts

@@ -88,16 +88,10 @@ export { default as TableBodyRow } from './tables/TableBodyRow.svelte';
 export { default as TableHead } from './tables/TableHead.svelte';
 export { default as TableHeadCell } from './tables/TableHeadCell.svelte';
 export { default as TableSearch } from './tables/TableSearch.svelte';
-export { default as Tabs } from './tabs/Tabs.svelte';
-export { tabStore } from './tabs/tabStores.js';
-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 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 +122,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

@@ -116,16 +116,10 @@ export { default as TableHead } from './tables/TableHead.svelte';
 export { default as TableHeadCell } from './tables/TableHeadCell.svelte';
 export { default as TableSearch } from './tables/TableSearch.svelte';
 // Tabs
-export { default as Tabs } from './tabs/Tabs.svelte';
-export { tabStore } from './tabs/tabStores.js';
-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 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 +156,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.24",
+  "version": "0.26.2",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -200,16 +200,11 @@
     "./tables/TableHead.svelte": "./tables/TableHead.svelte",
     "./tables/TableHeadCell.svelte": "./tables/TableHeadCell.svelte",
     "./tables/TableSearch.svelte": "./tables/TableSearch.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/Tabs.svelte": "./tabs/Tabs.svelte",
-    "./tabs/UnderlineTabs.svelte": "./tabs/UnderlineTabs.svelte",
-    "./tabs/tabStores": "./tabs/tabStores.js",
+    "./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",
     "./timelines/Activity.svelte": "./timelines/Activity.svelte",
     "./timelines/ActivityItem.svelte": "./timelines/ActivityItem.svelte",
     "./timelines/Group.svelte": "./timelines/Group.svelte",
@@ -241,9 +236,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/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>