flowbite-svelte 0.12.1 → 0.12.2

package/cards/InteractiveCard.svelte

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

package/index.d.ts

@@ -62,8 +62,11 @@ export { default as SpinnerButton } from "./spinners/SpinnerButton.svelte";
 export { default as InteractiveTabHead } from "./tabs/InteractiveTabHead.svelte";
 export { default as InteractiveTabs } from "./tabs/InteractiveTabs.svelte";
 export { default as DefaultTabs } from "./tabs/DefaultTabs.svelte";
+export { default as FullWidthTabs } from "./tabs/FullWidthTabs.svelte";
+export { default as IconTabs } from "./tabs/IconTabs.svelte";
 export { default as PillTabs } from "./tabs/PillTabs.svelte";
 export { default as TabContent } from "./tabs/TabContent.svelte";
+export { default as UnderlineTabs } from "./tabs/UnderlineTabs.svelte";
 export { default as Group } from "./timelines/Group.svelte";
 export { default as GroupItem } from "./timelines/GroupItem.svelte";
 export { default as Activity } from "./timelines/Activity.svelte";

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -137,10 +137,13 @@
     "./spinners/SpinnerButton.svelte": "./spinners/SpinnerButton.svelte",
     "./tables/Table.svelte": "./tables/Table.svelte",
     "./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
+    "./tabs/FullWidthTabs.svelte": "./tabs/FullWidthTabs.svelte",
+    "./tabs/IconTabs.svelte": "./tabs/IconTabs.svelte",
     "./tabs/InteractiveTabHead.svelte": "./tabs/InteractiveTabHead.svelte",
     "./tabs/InteractiveTabs.svelte": "./tabs/InteractiveTabs.svelte",
     "./tabs/PillTabs.svelte": "./tabs/PillTabs.svelte",
     "./tabs/TabContent.svelte": "./tabs/TabContent.svelte",
+    "./tabs/UnderlineTabs.svelte": "./tabs/UnderlineTabs.svelte",
     "./tabs/tabStore": "./tabs/tabStore.js",
     "./timelines/Activity.svelte": "./timelines/Activity.svelte",
     "./timelines/ActivityItem.svelte": "./timelines/ActivityItem.svelte",

package/tabs/FullWidthTabs.svelte

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

package/tabs/FullWidthTabs.svelte.d.ts

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

package/tabs/IconTabs.svelte

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

package/tabs/IconTabs.svelte.d.ts

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

package/tabs/UnderlineTabs.svelte

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

package/tabs/UnderlineTabs.svelte.d.ts

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

package/types.d.ts

@@ -43,6 +43,13 @@ export interface TabType {
     href: string;
     rel?: string;
 }
+export interface IconTabType {
+    name: string;
+    active: boolean;
+    href: string;
+    rel?: string;
+    icon?: typeof SvelteComponent;
+}
 export interface InteractiveTabType {
     name: string;
     id: number;