flowbite-svelte 0.26.1 → 0.26.2

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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)
 
 

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

package/index.js

@@ -116,17 +116,6 @@ 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';
-// 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.1",
+  "version": "0.26.2",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -200,21 +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/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",
     "./timelines/Activity.svelte": "./timelines/Activity.svelte",
     "./timelines/ActivityItem.svelte": "./timelines/ActivityItem.svelte",
     "./timelines/Group.svelte": "./timelines/Group.svelte",

package/typography/A.svelte

@@ -1,9 +1,10 @@
 <script>import classNames from 'classnames';
 export let href = '#';
 export let textColor = 'text-blue-600 dark:text-blue-500';
-export let aClass = 'inline-flex items-center text-lg  hover:underline';
+export let aClass = 'inline-flex items-center hover:underline';
+export let textSize = 'text-lg';
 </script>
 
-<a {href} class={classNames(aClass, textColor, $$props.class)}>
-	<slot />
+<a {href} class={classNames(aClass, textColor, textSize, $$props.class)}>
+  <slot />
 </a>

package/typography/A.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         href?: string;
         textColor?: string;
         aClass?: string;
+        textSize?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tabs/DefaultTabs.svelte

@@ -1,26 +0,0 @@
-<script>export let tabs;
-</script>
-
-<ul class="flex flex-wrap border-b border-gray-200 dark:border-gray-700">
-	{#each tabs as { name, active, href, rel }}
-		<li class="mr-2">
-			<a
-				{href}
-				{rel}
-				aria-current="page"
-				on:blur
-				on:click
-				on:focus
-				on:keydown
-				on:keypress
-				on:keyup
-				on:mouseenter
-				on:mouseleave
-				on:mouseover
-				class={active
-					? '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'
-					: '  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 '}
-				>{name}</a
-			>
-		</li>{/each}
-</ul>

package/tabs/DefaultTabs.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TabType } from '../types';
-declare const __propDef: {
-    props: {
-        tabs: TabType[];
-    };
-    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 DefaultTabsProps = typeof __propDef.props;
-export declare type DefaultTabsEvents = typeof __propDef.events;
-export declare type DefaultTabsSlots = typeof __propDef.slots;
-export default class DefaultTabs extends SvelteComponentTyped<DefaultTabsProps, DefaultTabsEvents, DefaultTabsSlots> {
-}
-export {};

package/tabs/FullWidthTabs.svelte

@@ -1,42 +0,0 @@
-<script>export let tabs;
-export let tabLabel;
-</script>
-
-<div class="sm:hidden">
-	<label for="tabs" class="sr-only">{tabLabel}</label>
-	<select
-		id="tabs"
-		class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-	>
-		{#each tabs as { name }}
-			<option>{name}</option>
-		{/each}
-	</select>
-</div>
-<ul
-	class="hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400"
->
-	{#each tabs as { name, href, rel, active }, i}
-		<li class="w-full" data-id={i}>
-			<a
-				{href}
-				{rel}
-				class:rounded-l-lg={i === 0}
-				class:rounded-r-lg={i === tabs.length - 1}
-				class={active
-					? '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'
-					: 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'}
-				aria-current="page"
-				on:blur
-				on:click
-				on:focus
-				on:keydown
-				on:keypress
-				on:keyup
-				on:mouseenter
-				on:mouseleave
-				on:mouseover>{name}</a
-			>
-		</li>
-	{/each}
-</ul>

package/tabs/FullWidthTabs.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TabType } from '../types';
-declare const __propDef: {
-    props: {
-        tabs: TabType[];
-        tabLabel: 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 FullWidthTabsProps = typeof __propDef.props;
-export declare type FullWidthTabsEvents = typeof __propDef.events;
-export declare type FullWidthTabsSlots = typeof __propDef.slots;
-export default class FullWidthTabs extends SvelteComponentTyped<FullWidthTabsProps, FullWidthTabsEvents, FullWidthTabsSlots> {
-}
-export {};

package/tabs/IconTabs.svelte

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

package/tabs/IconTabs.svelte.d.ts

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

package/tabs/InteractiveTabHead.svelte

@@ -1,65 +0,0 @@
-<script>import { tabStore } from './tabStores';
-import classNames from 'classnames';
-export let tabs;
-export let tabId = 'myTab';
-export let activeTabValue = 1;
-export let disabled = false;
-export let divClass = 'mb-4 border-b border-gray-200';
-export let ulClass = 'flex flex-wrap -mb-px text-sm font-medium text-center';
-export let liClass = 'mr-2';
-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;
-};
-</script>
-
-<!--
-@component
-Header part of Interactive tab component. Use with TabContent.
-
-@param tabs: TabHeadType[];
-@param tabId = 'myTab';
-
-- Usage:
-
-  ```tsx
-  <InteractiveHead>
-    <TabContent>
-      Some HTML|Component|string
-    </TabContent>
-  </InteractiveHead>
-  ```
-  -->
-<div class={divClass}>
-	<ul class={ulClass} id={tabId} data-tabs-toggle="#myTabContent" role="tablist">
-		{#each tabs as { name, id }}
-			<li class={liClass} role="presentation">
-				<button
-					on:click={handleClick(id)}
-					class={classNames(btnClass, activeTabValue === id ? activeClass : inactiveClasses)}
-					id="{name}-tab"
-					data-tabs-target="#{name}"
-					type="button"
-					role="tab"
-					aria-controls={name}
-					aria-selected="false"
-					on:blur
-					on:click
-					on:focus
-					on:keydown
-					on:keypress
-					on:keyup
-					on:mouseenter
-					on:mouseleave
-					on:mouseover
-					{disabled}>{name}</button
-				>
-			</li>
-		{/each}
-	</ul>
-</div>
-
-<slot />

package/tabs/InteractiveTabHead.svelte.d.ts

@@ -1,54 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TabHeadType } from '../types';
-declare const __propDef: {
-    props: {
-        tabs: TabHeadType[];
-        tabId?: string;
-        activeTabValue?: number;
-        disabled?: boolean;
-        divClass?: string;
-        ulClass?: string;
-        liClass?: string;
-        btnClass?: string;
-        activeClass?: string;
-        inactiveClasses?: 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: {
-        default: {};
-    };
-};
-export declare type InteractiveTabHeadProps = typeof __propDef.props;
-export declare type InteractiveTabHeadEvents = typeof __propDef.events;
-export declare type InteractiveTabHeadSlots = typeof __propDef.slots;
-/**
- * Header part of Interactive tab component. Use with TabContent.
- *
- * @param tabs: TabHeadType[];
- * @param tabId = 'myTab';
- *
- * - Usage:
- *
- * ```tsx
- * <InteractiveHead>
- *   <TabContent>
- *     Some HTML|Component|string
- *   </TabContent>
- * </InteractiveHead>
- * ```
- */
-export default class InteractiveTabHead extends SvelteComponentTyped<InteractiveTabHeadProps, InteractiveTabHeadEvents, InteractiveTabHeadSlots> {
-}
-export {};

package/tabs/InteractiveTabs.svelte

@@ -1,56 +0,0 @@
-<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, disabled }}
-			<li class="mr-2" 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(btnClass, activeTabValue === id ? activeClass : inactiveClasses)}
-					id="{name}-tab"
-					type="button"
-					role="tab"
-					aria-controls={name}
-					{disabled}>{name}</button
-				>
-			</li>
-		{/each}
-	</ul>
-</div>
-<div id="{tabId}Content">
-	{#each tabs as { name, content, id }}
-		{#if activeTabValue === id}
-			<div
-				class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
-				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/InteractiveTabs.svelte.d.ts

@@ -1,32 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { InteractiveTabType } from '../types';
-declare const __propDef: {
-    props: {
-        tabId?: string;
-        activeTabValue?: number;
-        tabs: InteractiveTabType[];
-        btnClass?: string;
-        activeClass?: string;
-        inactiveClasses?: 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 InteractiveTabsProps = typeof __propDef.props;
-export declare type InteractiveTabsEvents = typeof __propDef.events;
-export declare type InteractiveTabsSlots = typeof __propDef.slots;
-export default class InteractiveTabs extends SvelteComponentTyped<InteractiveTabsProps, InteractiveTabsEvents, InteractiveTabsSlots> {
-}
-export {};

package/tabs/PillTabs.svelte

@@ -1,25 +0,0 @@
-<script>export let tabs;
-</script>
-
-<ul class="flex flex-wrap">
-	{#each tabs as { name, selected, href }}
-		<li class="mr-2">
-			<a
-				class="{selected
-					? 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg'
-					: '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'} "
-				{href}
-				rel="external"
-				on:blur
-				on:click
-				on:focus
-				on:keydown
-				on:keypress
-				on:keyup
-				on:mouseenter
-				on:mouseleave
-				on:mouseover>{name}</a
-			>
-		</li>
-	{/each}
-</ul>

package/tabs/PillTabs.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { PillTabType } from '../types';
-declare const __propDef: {
-    props: {
-        tabs: PillTabType[];
-    };
-    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 PillTabsProps = typeof __propDef.props;
-export declare type PillTabsEvents = typeof __propDef.events;
-export declare type PillTabsSlots = typeof __propDef.slots;
-export default class PillTabs extends SvelteComponentTyped<PillTabsProps, PillTabsEvents, PillTabsSlots> {
-}
-export {};

package/tabs/TabContent.svelte

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

package/tabs/TabContent.svelte.d.ts

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

package/tabs/Tabs.svelte

@@ -1,113 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-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/tabs/UnderlineTabs.svelte

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

package/tabs/UnderlineTabs.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { TabType } from '../types';
-declare const __propDef: {
-    props: {
-        divClass?: string;
-        tabs: TabType[];
-    };
-    events: {
-        click: MouseEvent;
-        change: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type UnderlineTabsProps = typeof __propDef.props;
-export declare type UnderlineTabsEvents = typeof __propDef.events;
-export declare type UnderlineTabsSlots = typeof __propDef.slots;
-export default class UnderlineTabs extends SvelteComponentTyped<UnderlineTabsProps, UnderlineTabsEvents, UnderlineTabsSlots> {
-}
-export {};

package/tabs/tabStores.js

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