flowbite-svelte 0.24.10 → 0.24.13

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.24.13](https://github.com/themesberg/flowbite-svelte/compare/v0.24.12...v0.24.13) (2022-08-16)
+
+
+### Features
+
+* add disabled to InteractiveTabs ([f5ca0fe](https://github.com/themesberg/flowbite-svelte/commit/f5ca0fe858a50ef2c017ed6ec266c0012166b5f9))
+* add Tabs component for all tab ([758e2e7](https://github.com/themesberg/flowbite-svelte/commit/758e2e743eb845c7190a7c6c2a9888c67c46db73))
+
+### [0.24.12](https://github.com/themesberg/flowbite-svelte/compare/v0.24.11...v0.24.12) (2022-08-16)
+
+
+### Features
+
+* add active color to InteractiveTabs and InteractiveTabHead component ([7995e21](https://github.com/themesberg/flowbite-svelte/commit/7995e210f98325350b055a43199fa4d7750ea225))
+
+### [0.24.11](https://github.com/themesberg/flowbite-svelte/compare/v0.24.10...v0.24.11) (2022-08-15)
+
+
+### Features
+
+* add sticky footer, add $$props.class to all skeleton components ([1fad8dc](https://github.com/themesberg/flowbite-svelte/commit/1fad8dc9d8c0bc1428daeada82f44accc5f7e9a0))
+
 ### [0.24.10](https://github.com/themesberg/flowbite-svelte/compare/v0.24.9...v0.24.10) (2022-08-15)
 
 

package/footer/FooterCopyright.svelte

@@ -1,5 +1,5 @@
 <script>import classNames from 'classnames';
-export let spanClass = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
+export let spanClass = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
 export let aClass = 'hover:underline';
 export let year = new Date().getFullYear();
 export let href = '';

package/index.d.ts

@@ -89,6 +89,7 @@ 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';

package/index.js

@@ -117,6 +117,7 @@ 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.24.10",
+  "version": "0.24.13",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -204,6 +204,7 @@
     "./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",
     "./timelines/Activity.svelte": "./timelines/Activity.svelte",

package/skeleton/CardPlaceholder.svelte

@@ -1,10 +1,9 @@
-<script>export let size = '48';
+<script>import classNames from 'classnames';
+export let divClass = 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
+export let size = '48';
 </script>
 
-<div
-	role="status"
-	class="p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700"
->
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div class="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded dark:bg-gray-700">
 		<svg
 			width={size}

package/skeleton/CardPlaceholder.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        divClass?: string;
         size?: string;
     };
     events: {

package/skeleton/ImagePlaceholder.svelte

@@ -1,10 +1,9 @@
-<script>export let size = '48';
+<script>import classNames from 'classnames';
+export let divClass = 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center';
+export let size = '48';
 </script>
 
-<div
-	role="status"
-	class="space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center"
->
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div
 		class="flex justify-center items-center w-full h-48 bg-gray-300 rounded sm:w-96 dark:bg-gray-700"
 	>

package/skeleton/ImagePlaceholder.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        divClass?: string;
         size?: string;
     };
     events: {

package/skeleton/ListPlaceholder.svelte

@@ -1,7 +1,8 @@
-<div
-	role="status"
-	class="p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700"
->
+<script>import classNames from 'classnames';
+export let divClass = 'p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700';
+</script>
+
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div class="flex justify-between items-center">
 		<div>
 			<div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" />

package/skeleton/ListPlaceholder.svelte.d.ts

@@ -1,19 +1,17 @@
-/** @typedef {typeof __propDef.props}  ListPlaceholderProps */
-/** @typedef {typeof __propDef.events}  ListPlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  ListPlaceholderSlots */
-export default class ListPlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ListPlaceholderProps = typeof __propDef.props;
-export type ListPlaceholderEvents = typeof __propDef.events;
-export type ListPlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type ListPlaceholderProps = typeof __propDef.props;
+export declare type ListPlaceholderEvents = typeof __propDef.events;
+export declare type ListPlaceholderSlots = typeof __propDef.slots;
+export default class ListPlaceholder extends SvelteComponentTyped<ListPlaceholderProps, ListPlaceholderEvents, ListPlaceholderSlots> {
+}
 export {};

package/skeleton/Skeleton.svelte

@@ -1,4 +1,8 @@
-<div role="status" class="max-w-sm animate-pulse">
+<script>import classNames from 'classnames';
+export let divClass = 'max-w-sm animate-pulse';
+</script>
+
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4" />
 	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5" />
 	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />

package/skeleton/Skeleton.svelte.d.ts

@@ -1,19 +1,17 @@
-/** @typedef {typeof __propDef.props}  SkeletonProps */
-/** @typedef {typeof __propDef.events}  SkeletonEvents */
-/** @typedef {typeof __propDef.slots}  SkeletonSlots */
-export default class Skeleton extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SkeletonProps = typeof __propDef.props;
-export type SkeletonEvents = typeof __propDef.events;
-export type SkeletonSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type SkeletonProps = typeof __propDef.props;
+export declare type SkeletonEvents = typeof __propDef.events;
+export declare type SkeletonSlots = typeof __propDef.slots;
+export default class Skeleton extends SvelteComponentTyped<SkeletonProps, SkeletonEvents, SkeletonSlots> {
+}
 export {};

package/skeleton/TestimonialPlaceholder.svelte

@@ -1,4 +1,8 @@
-<div role="status" class="animate-pulse">
+<script>import classNames from 'classnames';
+export let divClass = 'animate-pulse';
+</script>
+
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 max-w-[640px] mb-2.5 mx-auto" />
 	<div class="h-2.5 mx-auto bg-gray-300 rounded-full dark:bg-gray-700 max-w-[540px]" />
 	<div class="flex justify-center items-center mt-4">

package/skeleton/TestimonialPlaceholder.svelte.d.ts

@@ -1,19 +1,17 @@
-/** @typedef {typeof __propDef.props}  TestimonialPlaceholderProps */
-/** @typedef {typeof __propDef.events}  TestimonialPlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  TestimonialPlaceholderSlots */
-export default class TestimonialPlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TestimonialPlaceholderProps = typeof __propDef.props;
-export type TestimonialPlaceholderEvents = typeof __propDef.events;
-export type TestimonialPlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type TestimonialPlaceholderProps = typeof __propDef.props;
+export declare type TestimonialPlaceholderEvents = typeof __propDef.events;
+export declare type TestimonialPlaceholderSlots = typeof __propDef.slots;
+export default class TestimonialPlaceholder extends SvelteComponentTyped<TestimonialPlaceholderProps, TestimonialPlaceholderEvents, TestimonialPlaceholderSlots> {
+}
 export {};

package/skeleton/TextPlaceholder.svelte

@@ -1,4 +1,8 @@
-<div role="status" class="space-y-2.5 animate-pulse max-w-lg">
+<script>import classNames from 'classnames';
+export let divClass = 'space-y-2.5 animate-pulse max-w-lg';
+</script>
+
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div class="flex items-center space-x-2 w-full">
 		<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32" />
 		<div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />

package/skeleton/TextPlaceholder.svelte.d.ts

@@ -1,19 +1,17 @@
-/** @typedef {typeof __propDef.props}  TextPlaceholderProps */
-/** @typedef {typeof __propDef.events}  TextPlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  TextPlaceholderSlots */
-export default class TextPlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TextPlaceholderProps = typeof __propDef.props;
-export type TextPlaceholderEvents = typeof __propDef.events;
-export type TextPlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type TextPlaceholderProps = typeof __propDef.props;
+export declare type TextPlaceholderEvents = typeof __propDef.events;
+export declare type TextPlaceholderSlots = typeof __propDef.slots;
+export default class TextPlaceholder extends SvelteComponentTyped<TextPlaceholderProps, TextPlaceholderEvents, TextPlaceholderSlots> {
+}
 export {};

package/skeleton/VideoPlaceholder.svelte

@@ -1,10 +1,9 @@
-<script>export let size = '48';
+<script>import classNames from 'classnames';
+export let divClass = 'flex justify-center items-center max-w-sm h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
+export let size = '48';
 </script>
 
-<div
-	role="status"
-	class="flex justify-center items-center max-w-sm h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700"
->
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<svg
 		width={size}
 		height={size}

package/skeleton/VideoPlaceholder.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        divClass?: string;
         size?: string;
     };
     events: {

package/skeleton/WidgetPlaceholder.svelte

@@ -1,7 +1,8 @@
-<div
-	role="status"
-	class="p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700"
->
+<script>import classNames from 'classnames';
+export let divClass = 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
+</script>
+
+<div role="status" class={classNames(divClass, $$props.class)}>
 	<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2.5" />
 	<div class="mb-10 w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
 	<div class="flex items-baseline mt-4 space-x-6">

package/skeleton/WidgetPlaceholder.svelte.d.ts

@@ -1,19 +1,17 @@
-/** @typedef {typeof __propDef.props}  WidgetPlaceholderProps */
-/** @typedef {typeof __propDef.events}  WidgetPlaceholderEvents */
-/** @typedef {typeof __propDef.slots}  WidgetPlaceholderSlots */
-export default class WidgetPlaceholder extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type WidgetPlaceholderProps = typeof __propDef.props;
-export type WidgetPlaceholderEvents = typeof __propDef.events;
-export type WidgetPlaceholderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type WidgetPlaceholderProps = typeof __propDef.props;
+export declare type WidgetPlaceholderEvents = typeof __propDef.events;
+export declare type WidgetPlaceholderSlots = typeof __propDef.slots;
+export default class WidgetPlaceholder extends SvelteComponentTyped<WidgetPlaceholderProps, WidgetPlaceholderEvents, WidgetPlaceholderSlots> {
+}
 export {};

package/tabs/InteractiveTabHead.svelte

@@ -1,7 +1,11 @@
 <script>import { tabStore } from './tabStores';
+import classNames from 'classnames';
 export let tabs;
 export let tabId = 'myTab';
 export let activeTabValue = 1;
+export let btnClass = 'inline-block py-4 px-4 text-sm font-medium text-center rounded-t-lg border-b-2 border-transparent';
+export let activeClass = 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500';
+export let inactiveClasses = 'text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300';
 const handleClick = (tabValue) => () => {
     tabStore.update((n) => (n = tabValue));
     activeTabValue = tabValue;
@@ -36,12 +40,11 @@ Header part of Interactive tab component. Use with TabContent.
 			<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"
+					class={classNames(btnClass, activeTabValue === id ? activeClass : inactiveClasses)}
 					id="{name}-tab"
 					data-tabs-target="#{name}"
 					type="button"
 					role="tab"
-					class:active={activeTabValue === id}
 					aria-controls={name}
 					aria-selected="false"
 					on:blur

package/tabs/InteractiveTabHead.svelte.d.ts

@@ -5,6 +5,9 @@ declare const __propDef: {
         tabs: TabHeadType[];
         tabId?: string;
         activeTabValue?: number;
+        btnClass?: string;
+        activeClass?: string;
+        inactiveClasses?: string;
     };
     events: {
         blur: FocusEvent;

package/tabs/InteractiveTabs.svelte

@@ -1,12 +1,16 @@
-<script>export let tabId = 'myTab';
+<script>import classNames from 'classnames';
+export let tabId = 'myTab';
 export let activeTabValue = 1;
 export let tabs;
+export let btnClass = 'inline-block py-4 px-4 text-sm font-medium text-center rounded-t-lg border-b-2 border-transparent';
+export let activeClass = 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500';
+export let inactiveClasses = 'text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300';
 const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 </script>
 
 <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
 	<ul class="flex flex-wrap -mb-px" id={tabId} role="tablist">
-		{#each tabs as { name, id }}
+		{#each tabs as { name, id, disabled }}
 			<li class="mr-2" role="presentation">
 				<button
 					on:click={handleClick(id)}
@@ -19,12 +23,12 @@ const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 					on:mouseenter
 					on:mouseleave
 					on:mouseover
-					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"
+					class={classNames(btnClass, activeTabValue === id ? activeClass : inactiveClasses)}
 					id="{name}-tab"
 					type="button"
 					role="tab"
-					class:active={activeTabValue === id}
-					aria-controls={name}>{name}</button
+					aria-controls={name}
+					{disabled}>{name}</button
 				>
 			</li>
 		{/each}

package/tabs/InteractiveTabs.svelte.d.ts

@@ -5,6 +5,9 @@ declare const __propDef: {
         tabId?: string;
         activeTabValue?: number;
         tabs: InteractiveTabType[];
+        btnClass?: string;
+        activeClass?: string;
+        inactiveClasses?: string;
     };
     events: {
         blur: FocusEvent;

package/tabs/Tabs.svelte

@@ -0,0 +1,115 @@
+<script>import classNames from 'classnames';
+export let tabStyle = 'default';
+export let tabId = 'myTab';
+export let tabLabel = 'Full-width tabs';
+export let activeTabValue = 1;
+export let tabs;
+export let customDivClass = '';
+export let customUlClass = '';
+export let customLiClass = '';
+export let customActiveClass = '';
+export let customInActiveClass = '';
+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';
+export let contentDivClass = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800';
+export let fullSelectClass = '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';
+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
+};
+const liClasses = {
+    default: 'mr-2',
+    full: 'w-full',
+    icon: 'mr-2',
+    pill: 'mr-2',
+    underline: 'mr-2',
+    custom: 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 handleClick = (tabValue) => () => (activeTabValue = tabValue);
+</script>
+
+{#if tabStyle === 'full'}
+	<div class="sm:hidden">
+		<label for="tabs" class="sr-only">{tabLabel}</label>
+		<select id="tabs" class={fullSelectClass}>
+			{#each tabs as { name }}
+				<option>{name}</option>
+			{/each}
+		</select>
+	</div>
+{/if}
+<div class={divClasses[tabStyle]}>
+	<ul class={ulClasses[tabStyle]} id={tabId} role="tablist">
+		{#each tabs as { name, id, disabled, icon, iconSize }}
+			<li class={liClasses[tabStyle]} role="presentation">
+				<button
+					on:click={handleClick(id)}
+					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="{name}-tab"
+					type="button"
+					role="tab"
+					aria-controls={name}
+					{disabled}
+				>
+					{#if icon}
+						<svelte:component this={icon} size={iconSize} class={iconClass} />
+					{/if}
+					{name}</button
+				>
+			</li>
+		{/each}
+	</ul>
+</div>
+<div id="{tabId}Content">
+	{#each tabs as { name, content, id }}
+		{#if activeTabValue === id}
+			<div class={contentDivClass} id={name} role="tabpanel" aria-labelledby="{name}-tab">
+				{#if typeof content === 'string'}
+					<p class="text-sm text-gray-500 dark:text-gray-400">
+						{@html content}
+					</p>
+				{:else}
+					<svelte:component this={content} />
+				{/if}
+			</div>
+		{/if}
+	{/each}
+</div>

package/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InteractiveTabType } from '../types';
+declare const __propDef: {
+    props: {
+        tabStyle?: 'default' | 'full' | 'icon' | 'pill' | 'underline' | 'custom';
+        tabId?: string;
+        tabLabel?: string;
+        activeTabValue?: number;
+        tabs: InteractiveTabType[];
+        customDivClass?: string;
+        customUlClass?: string;
+        customLiClass?: string;
+        customActiveClass?: string;
+        customInActiveClass?: string;
+        iconClass?: string;
+        contentDivClass?: string;
+        fullSelectClass?: string;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type TabsProps = typeof __propDef.props;
+export declare type TabsEvents = typeof __propDef.events;
+export declare type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponentTyped<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

package/types.d.ts

@@ -114,6 +114,10 @@ export declare type InputType = 'color' | 'date' | 'datetime-local' | 'email' |
 export interface InteractiveTabType {
     name: string;
     id: number;
+    active?: boolean;
+    disabled?: boolean;
+    icon?: typeof SvelteComponent;
+    iconSize?: number;
     content: string | typeof SvelteComponent;
 }
 export interface ListGroupItemType {