flowbite-svelte 0.25.4 → 0.25.8

package/CHANGELOG.md

@@ -2,6 +2,73 @@
 
 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.25.8](https://github.com/themesberg/flowbite-svelte/compare/v0.25.7...v0.25.8) (2022-08-21)
+
+
+### Features
+
+* add H1, H2, A, P, Higlight components ([3f80473](https://github.com/themesberg/flowbite-svelte/commit/3f804731e6a093c1e34f8b3be6289f930c372a96))
+* add Heading and removed H1 and H2 ([b2be994](https://github.com/themesberg/flowbite-svelte/commit/b2be9945c39bcbfe23a0df53348ce768c5958255))
+* add Mark and TextGradient ([343e719](https://github.com/themesberg/flowbite-svelte/commit/343e719406bc146639882f97bbeafbc2de9514cb))
+
+### [0.25.7](https://github.com/themesberg/flowbite-svelte/compare/v0.25.6...v0.25.7) (2022-08-21)
+
+
+### Features
+
+* dropdown as Popper + fixes ([67fdf78](https://github.com/themesberg/flowbite-svelte/commit/67fdf7837f36d63b3683e0b6f6e78fbf91f6bf23))
+
+### [0.25.6](https://github.com/themesberg/flowbite-svelte/compare/v0.25.5...v0.25.6) (2022-08-20)
+
+
+### Features
+
+* fixing standard-version ([cd316e4](https://github.com/themesberg/flowbite-svelte/commit/cd316e412171689e04ec435dfc31abd89b7cbe1d))
+
+### [0.25.5](https://github.com/themesberg/flowbite-svelte/compare/v0.25.4...v0.25.5) (2022-08-20)
+
+
+### Bug Fixes
+
+* Iconinput has unused export property value when I install it ([b19afc9](https://github.com/themesberg/flowbite-svelte/commit/b19afc9284aa2c92c5a15b89de9dc9111652f0f7))
+
+### [0.25.4](https://github.com/themesberg/flowbite-svelte/compare/v0.25.2...v0.25.4) (2022-08-20)
+
+
+### Bug Fixes
+
+* add Table color hover and example ([b49c139](https://github.com/themesberg/flowbite-svelte/commit/b49c139c6d09a4563d462b35a5c49da605006d79))
+
+### [0.25.2](https://github.com/themesberg/flowbite-svelte/compare/v0.25.1...v0.25.2) (2022-08-19)
+
+
+### Features
+
+* add popover related files ([8b5050b](https://github.com/themesberg/flowbite-svelte/commit/8b5050b0e9f6e45533b858c7aa392463cfb6cc91))
+* popover ([c41ddc4](https://github.com/themesberg/flowbite-svelte/commit/c41ddc408f3696e05ee66de4922b95ee5cee1a08))
+
+
+### Bug Fixes
+
+* change href=# to href=/ in popover page ([f885a92](https://github.com/themesberg/flowbite-svelte/commit/f885a924706e477349c975641fc6fba0b4df45e5))
+* missing Popper ([ff4b0e7](https://github.com/themesberg/flowbite-svelte/commit/ff4b0e772e228f03c1024e222fcc91e63adc23ba))
+
+### [0.25.1](https://github.com/themesberg/flowbite-svelte/compare/v0.25.0...v0.25.1) (2022-08-18)
+
+
+### Bug Fixes
+
+* move @floating-ui/dom from dependencies to devDependencies ([6668ec8](https://github.com/themesberg/flowbite-svelte/commit/6668ec8ca1559366ad0cbc223c9c91e3337ceb22))
+
+## [0.25.0](https://github.com/themesberg/flowbite-svelte/compare/v0.24.19...v0.25.0) (2022-08-18)
+
+
+### Bug Fixes
+
+* [#226](https://github.com/themesberg/flowbite-svelte/issues/226) for double on:click in DropdownItem ([c125d2d](https://github.com/themesberg/flowbite-svelte/commit/c125d2d02e3818cedb83994e930ca5cc7075571c))
+* migrate to sveltekit 1.0.0 ([434ec99](https://github.com/themesberg/flowbite-svelte/commit/434ec998e1f96ab5e35eda6c6c78f6db2279aa4e))
+* update pnpm-lock ([4926a47](https://github.com/themesberg/flowbite-svelte/commit/4926a47bd529601b1a0709533fee2b5291e59eb8))
+
 ### [0.24.19](https://github.com/themesberg/flowbite-svelte/compare/v0.24.18...v0.24.19) (2022-08-17)
 
 

package/README.md

@@ -2,8 +2,9 @@
 
 [![npm version](https://badgen.net/npm/v/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
 [![npm downloads](https://badgen.net/npm/dw/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
-[![release](https://badgen.net/github/release/themesberg/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/releases)
+[![npm downloads](https://badgen.net/npm/dt/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
 [![license](https://badgen.net/npm/license/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE)
+[![Discord](https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord)](https://discord.com/invite/4eeurUVvTy)
 
 **⚠️ Flowbite-Svelte is currently in early development and APIs and packages are likely to change quite often.**
 

package/avatar/Dot.svelte

@@ -23,7 +23,7 @@ $: dotClass = classNames('absolute rounded-full border-white dark:border-gray-80
 </script>
 
 {#if show}
-	<div class="relative flex-shrink-0 h-full">
+	<div class="relative flex-shrink-0">
 		<slot />
 		<span class={dotClass} />
 	</div>

package/badges/Badge.svelte

@@ -6,6 +6,7 @@ export let href = undefined;
 export let rounded = false;
 export let index = false;
 export let dismissable = false;
+export let baseClass = 'inline-flex items-center justify-center -mb-0.5';
 let hidden = false;
 const colors = {
     blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
@@ -36,7 +37,7 @@ const hovers = {
     pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
 };
 let badgeClass;
-$: badgeClass = classNames('inline-flex items-center justify-center -mb-0.5', large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), $$props.class);
+$: badgeClass = classNames(baseClass, large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), $$props.class);
 const handleHide = () => {
     hidden = !hidden;
 };

package/badges/Badge.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         rounded?: boolean;
         index?: boolean;
         dismissable?: boolean;
+        baseClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/breadcrumbs/Breadcrumb.svelte

@@ -3,7 +3,7 @@ export let navClass = 'flex';
 export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
 </script>
 
-<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(navClass, $$props.classNav)}>
+<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(navClass, $$props.class)}>
 	<ol class={classNames(olClass, $$props.classOl)}>
 		<slot />
 	</ol>

package/dropdowns/Dropdown.svelte

@@ -1,11 +1,10 @@
 <script>import { setContext } from 'svelte';
-import Tooltip from '../tooltips/Tooltip.svelte';
 import Button from '../buttons/Button.svelte';
+import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
 import { ChevronUp, ChevronRight, ChevronDown, ChevronLeft } from 'svelte-heros';
 export let label = '';
 export let inline = false;
-export let tooltipArrow = false;
 export let arrowIcon = true;
 export let labelClass = 'flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent';
 export let placement = 'bottom';
@@ -19,18 +18,21 @@ const icons = {
 };
 // @ts-ignore
 $: icon = icons[placement.split('-')[0]];
+let popoverClass;
+$: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800', 'text-gray-500 dark:text-gray-400', 'border border-gray-200 dark:border-gray-700', 'outline-none', $$props.class);
 </script>
 
-<Tooltip
-	class={classNames('!rounded !p-0', $$props.class)}
-	style="auto"
-	animation="duration-100"
+<Popper
+	activeContent={true}
+	arrow={false}
 	{placement}
-	arrow={tooltipArrow}
+	{...$$restProps}
+	class={popoverClass}
 	trigger="click"
+	on:show
 	bind:open
 >
-	<slot name="trigger">
+	<slot name="trigger" slot="trigger">
 		{#if inline}
 			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
 				<slot name="label">{label}</slot>
@@ -53,9 +55,9 @@ $: icon = icons[placement.split('-')[0]];
 			</Button>
 		{/if}
 	</slot>
-	<slot name="content" slot="content">
+	<slot name="content">
 		<ul class="py-1">
 			<slot />
 		</ul>
 	</slot>
-</Tooltip>
+</Popper>

package/dropdowns/Dropdown.svelte.d.ts

@@ -1,25 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Placement } from '@floating-ui/dom';
+import type { Placement } from '@popperjs/core';
 declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string;
         inline?: boolean;
-        tooltipArrow?: boolean;
         arrowIcon?: boolean;
         labelClass?: string;
         placement?: 'auto' | Placement;
         open?: boolean;
     };
     events: {
+        show: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {};
-        label: {};
-        content: {
+        trigger: {
             slot: string;
         };
+        label: {};
+        content: {};
         default: {};
     };
 };

package/dropdowns/DropdownItem.svelte

@@ -11,7 +11,6 @@ const colors = {
 	{...$$restProps}
 	class={classNames(liClass, colors[color] ?? colors.default, $$props.class)}
 	on:click|stopPropagation
-	on:click
 	on:change
 	on:keydown
 	on:keyup

package/forms/Iconinput.svelte

@@ -1,6 +1,5 @@
 <script>import classNames from 'classnames';
 export let type = 'text';
-export let value = '';
 export let size = 'md';
 export let icon;
 export let noBorder = false;

package/forms/Iconinput.svelte.d.ts

@@ -1,11 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { InputType } from '../types';
 import type { SvelteComponent } from 'svelte';
+import type { InputType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         type?: InputType;
-        value?: string;
         size?: 'sm' | 'md' | 'lg';
         icon: typeof SvelteComponent;
         noBorder?: boolean;

package/index.d.ts

@@ -59,6 +59,7 @@ export { default as Pagination } from './paginations/Pagination.svelte';
 export { default as Previous } from './paginations/Previous.svelte';
 export { default as Next } from './paginations/Next.svelte';
 export { default as TableData } from './paginations/TableData.svelte';
+export { default as Popover } from './popover/Popover.svelte';
 export { default as Progressbar } from './progressbars/Progressbar.svelte';
 export { default as Rating } from './ratings/Rating.svelte';
 export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
@@ -110,4 +111,12 @@ export { default as TimelineItemHorizontal } from './timelines/TimelineItemHoriz
 export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
 export { default as Toast } from './toasts/Toast.svelte';
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
+export { default as A } from './typography/A.svelte';
+export { default as Heading } from './typography/Heading.svelte';
+export { default as Highlight } from './typography/Highlight.svelte';
+export { default as Mark } from './typography/Mark.svelte';
+export { default as P } from './typography/P.svelte';
+export { default as Secondary } from './typography/Secondary.svelte';
+export { default as TextGradient } from './typography/TextGradient.svelte';
+export { default as Underline } from './typography/Underline.svelte';
 export { default as CloseButton } from './utils/CloseButton.svelte';

package/index.js

@@ -80,6 +80,8 @@ export { default as Pagination } from './paginations/Pagination.svelte';
 export { default as Previous } from './paginations/Previous.svelte';
 export { default as Next } from './paginations/Next.svelte';
 export { default as TableData } from './paginations/TableData.svelte';
+// Popover
+export { default as Popover } from './popover/Popover.svelte';
 // Progressbar
 export { default as Progressbar } from './progressbars/Progressbar.svelte';
 // Rating
@@ -141,5 +143,14 @@ export { default as TimelineItemVertical } from './timelines/TimelineItemVertica
 export { default as Toast } from './toasts/Toast.svelte';
 // Tooltips
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
+// Typography
+export { default as A } from './typography/A.svelte';
+export { default as Heading } from './typography/Heading.svelte';
+export { default as Highlight } from './typography/Highlight.svelte';
+export { default as Mark } from './typography/Mark.svelte';
+export { default as P } from './typography/P.svelte';
+export { default as Secondary } from './typography/Secondary.svelte';
+export { default as TextGradient } from './typography/TextGradient.svelte';
+export { default as Underline } from './typography/Underline.svelte';
 // utils
 export { default as CloseButton } from './utils/CloseButton.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.4",
+  "version": "0.25.8",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -14,11 +14,14 @@
   "devDependencies": {
     "@floating-ui/dom": "^1.0.1",
     "@playwright/test": "^1.25.0",
+    "@popperjs/core": "^2.11.6",
     "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
+    "@sveltejs/kit": "1.0.0-next.420",
+    "@sveltejs/package": "1.0.0-next.1",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "autoprefixer": "^10.4.8",
+    "classnames": "^2.3.1",
     "createprops": "^0.4.9",
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
@@ -82,7 +85,6 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "classnames": "^2.3.1",
     "flowbite": "^1.5.2"
   },
   "engines": {
@@ -167,6 +169,7 @@
     "./paginations/Pagination.svelte": "./paginations/Pagination.svelte",
     "./paginations/Previous.svelte": "./paginations/Previous.svelte",
     "./paginations/TableData.svelte": "./paginations/TableData.svelte",
+    "./popover/Popover.svelte": "./popover/Popover.svelte",
     "./progressbars/Progressbar.svelte": "./progressbars/Progressbar.svelte",
     "./ratings/AdvancedRating.svelte": "./ratings/AdvancedRating.svelte",
     "./ratings/Rating.svelte": "./ratings/Rating.svelte",
@@ -219,10 +222,19 @@
     "./toasts/Toast.svelte": "./toasts/Toast.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
+    "./typography/A.svelte": "./typography/A.svelte",
+    "./typography/Heading.svelte": "./typography/Heading.svelte",
+    "./typography/Highlight.svelte": "./typography/Highlight.svelte",
+    "./typography/Mark.svelte": "./typography/Mark.svelte",
+    "./typography/P.svelte": "./typography/P.svelte",
+    "./typography/Secondary.svelte": "./typography/Secondary.svelte",
+    "./typography/TextGradient.svelte": "./typography/TextGradient.svelte",
+    "./typography/Underline.svelte": "./typography/Underline.svelte",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
+    "./utils/Popper.svelte": "./utils/Popper.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/focusTrap": "./utils/focusTrap.js",
     "./utils/generateId": "./utils/generateId.js"
   },
   "svelte": "./index.js"
-}
+}

package/popover/Popover.svelte

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

package/popover/Popover.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        title?: string;
+    };
+    events: {
+        show: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trigger: {
+            slot: string;
+        };
+        title: {};
+        default: {};
+    };
+};
+export declare type PopoverProps = typeof __propDef.props;
+export declare type PopoverEvents = typeof __propDef.events;
+export declare type PopoverSlots = typeof __propDef.slots;
+export default class Popover extends SvelteComponentTyped<PopoverProps, PopoverEvents, PopoverSlots> {
+}
+export {};

package/tables/Table.svelte

@@ -1,16 +1,30 @@
 <script>import classNames from 'classnames';
 import { setContext } from 'svelte';
-export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+export let divClass = 'relative overflow-x-auto';
 export let striped = false;
 export let hoverable = false;
+export let noborder = false;
+export let shadow = false;
+export let color = 'default';
+const colors = {
+    default: 'text-gray-500 dark:text-gray-400',
+    blue: 'text-blue-100 dark:text-blue-100',
+    green: 'text-green-100 dark:text-green-100',
+    red: 'text-red-100 dark:text-red-100',
+    yellow: 'text-yellow-100 dark:text-yellow-100',
+    purple: 'text-purple-100 dark:text-purple-100',
+    custom: ''
+};
 $: setContext('striped', striped);
 $: setContext('hoverable', hoverable);
+$: setContext('noborder', noborder);
+$: setContext('color', color);
 </script>
 
-<div class={divClass}>
+<div class={classNames(divClass, shadow && 'shadow-md sm:rounded-lg')}>
 	<table
 		{...$$restProps}
-		class={classNames('w-full text-left text-sm text-gray-500 dark:text-gray-400', $$props.class)}
+		class={classNames('w-full text-left text-sm', colors[color], $$props.class)}
 	>
 		<slot />
 	</table>

package/tables/Table.svelte.d.ts

@@ -5,6 +5,9 @@ declare const __propDef: {
         divClass?: string;
         striped?: boolean;
         hoverable?: boolean;
+        noborder?: boolean;
+        shadow?: boolean;
+        color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tables/TableBodyCell.svelte

@@ -1,7 +1,14 @@
 <script>import classNames from 'classnames';
-export let tdClass = 'px-6 py-4 whitespace-nowrap font-medium text-gray-900 dark:text-white';
+import { getContext } from 'svelte';
+export let tdClass = 'px-6 py-4 whitespace-nowrap font-medium ';
+let color = 'default';
+color = getContext('color');
+let tdClassfinal;
+$: tdClassfinal = classNames(tdClass, color === 'default'
+    ? 'text-gray-900 dark:text-white'
+    : 'text-blue-50 whitespace-nowrap dark:text-blue-100', $$props.class);
 </script>
 
-<td {...$$restProps} class={classNames(tdClass, $$props.class)}>
+<td {...$$restProps} class={tdClassfinal}>
 	<slot />
 </td>

package/tables/TableBodyRow.svelte

@@ -1,19 +1,39 @@
 <script>import classNames from 'classnames';
 import { getContext } from 'svelte';
-export let trClass = 'bg-white dark:border-gray-700 dark:bg-gray-800';
+export let trClass = 'bg-white';
+const colors = {
+    default: 'dark:border-gray-700 dark:bg-gray-800',
+    blue: 'bg-blue-500 border-b border-blue-400',
+    green: 'bg-green-500 border-b border-green-400',
+    red: 'bg-red-500 border-b border-red-400',
+    yellow: 'bg-yellow-500 border-b border-yellow-400',
+    purple: 'bg-purple-500 border-b border-purple-400',
+    custom: ''
+};
+const hoverColors = {
+    default: 'hover:bg-gray-50 dark:hover:bg-gray-600',
+    blue: 'hover:bg-blue-400',
+    green: 'hover:bg-green-400',
+    red: 'hover:bg-red-400',
+    yellow: 'hover:bg-yellow-400',
+    purple: 'hover:bg-purple-400',
+    custom: ''
+};
+const stripColors = {
+    default: 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700',
+    blue: 'odd:bg-blue-800 even:bg-blue-700 odd:dark:bg-blue-800 even:dark:bg-blue-700',
+    green: 'odd:bg-green-800 even:bg-green-700 odd:dark:bg-green-800 even:dark:bg-green-700',
+    red: 'odd:bg-red-800 even:bg-red-700 odd:dark:bg-red-800 even:dark:bg-red-700',
+    yellow: 'odd:bg-yellow-800 even:bg-yellow-700 odd:dark:bg-yellow-800 even:dark:bg-yellow-700',
+    purple: 'odd:bg-purple-800 even:bg-purple-700 odd:dark:bg-purple-800 even:dark:bg-purple-700',
+    custom: ''
+};
+let color = 'default';
+color = getContext('color');
+let trClassfinal;
+$: trClassfinal = classNames(getContext('noborder') ? 'bg-white dark:bg-gray-800' : trClass, colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class);
 </script>
 
-<tr
-	{...$$restProps}
-	class={classNames(
-		trClass,
-		{
-			'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700':
-				getContext('striped') === true,
-			'hover:bg-gray-50 dark:hover:bg-gray-600': getContext('hoverable') === true
-		},
-		$$props.class
-	)}
->
+<tr {...$$restProps} class={trClassfinal}>
 	<slot />
 </tr>

package/tables/TableHead.svelte

@@ -1,13 +1,36 @@
 <script>import classNames from 'classnames';
+import { getContext } from 'svelte';
+export let theadClass = 'text-xs uppercase';
+let color;
+color = getContext('color');
+let noborder = getContext('noborder');
+let striped = getContext('striped');
+let defatultBgColor = noborder || striped ? '' : 'bg-gray-50 dark:bg-gray-700';
+const bgColors = {
+    default: defatultBgColor,
+    blue: 'bg-blue-600',
+    green: 'bg-green-600',
+    red: 'bg-red-600',
+    yellow: 'bg-yellow-600',
+    purple: 'bg-purple-600',
+    custom: ''
+};
+let textColor = color === 'default'
+    ? 'text-gray-700 dark:text-gray-400'
+    : color === 'custom'
+        ? ''
+        : 'text-white  dark:text-white';
+let borderColors = striped
+    ? ''
+    : color === 'default'
+        ? 'border-gray-700'
+        : color === 'custom'
+            ? ''
+            : `border-${color}-400`;
+$: theadClassfinal = classNames(theadClass, textColor, striped && borderColors, bgColors[color], $$props.class);
 </script>
 
-<thead
-	{...$$restProps}
-	class={classNames(
-		'bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400',
-		$$props.class
-	)}
->
+<thead {...$$restProps} class={theadClassfinal}>
 	<tr>
 		<slot />
 	</tr>

package/tables/TableHead.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        theadClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tables/TableSearch.svelte

@@ -5,8 +5,19 @@ export let inputValue = '';
 export let striped = false;
 export let hoverable = false;
 export let placeholder = 'Search';
+export let color = 'default';
+const colors = {
+    default: 'text-gray-500 dark:text-gray-400',
+    blue: 'text-blue-100 dark:text-blue-100',
+    green: 'text-green-100 dark:text-green-100',
+    red: 'text-red-100 dark:text-red-100',
+    yellow: 'text-yellow-100 dark:text-yellow-100',
+    purple: 'text-purple-100 dark:text-purple-100',
+    custom: ''
+};
 $: setContext('striped', striped);
 $: setContext('hoverable', hoverable);
+$: setContext('color', color);
 </script>
 
 <div class={divClass}>
@@ -37,7 +48,7 @@ $: setContext('hoverable', hoverable);
 	</div>
 	<table
 		{...$$restProps}
-		class={classNames('w-full text-left text-sm text-gray-500 dark:text-gray-400', $$props.class)}
+		class={classNames('w-full text-left text-sm', colors[color], $$props.class)}
 	>
 		<slot />
 	</table>

package/tables/TableSearch.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         striped?: boolean;
         hoverable?: boolean;
         placeholder?: string;
+        color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tooltips/Tooltip.svelte

@@ -1,142 +1,20 @@
-<script>import classNames from 'classnames';
-import { clickOutside } from '../utils/clickOutside';
-import { computePosition, flip, shift, offset, autoPlacement, arrow as arrowFloat } from '@floating-ui/dom';
-import { onDestroy } from 'svelte';
-export let placement = 'top';
-export let trigger = 'hover';
-export let style = 'dark';
+<script>import Popper from '../utils/Popper.svelte';
+import classNames from 'classnames';
 export let content = '';
-export let animation = 'duration-300';
-export let arrow = true;
-export let tipClass = 'absolute inline-block rounded-lg py-2 px-3 text-sm font-medium shadow-sm';
+export let style = 'dark';
 export let tipColor = '';
-export let open = false;
+export let tipClass = 'py-2 px-3 text-sm font-medium rounded-lg shadow-sm tooltip';
 const tipStyleClasses = {
-    dark: 'bg-gray-900 text-white dark:bg-gray-700',
+    dark: 'border border-gray-800 bg-gray-900 text-white dark:bg-gray-700 dark:border-gray-600',
     light: 'border border-gray-200 bg-white text-gray-900',
-    auto: 'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white',
-    custom: tipColor
-};
-const arrowStyleClasses = {
-    dark: 'bg-gray-900 dark:bg-gray-700',
-    light: 'bg-white',
-    auto: 'bg-white dark:bg-gray-700',
+    auto: 'border border-gray-200 bg-white text-gray-900 dark:bg-gray-700 dark:text-white dark:border-gray-600 ',
     custom: tipColor
 };
 let toolTipClass;
-$: toolTipClass = classNames(tipClass, animation !== false && `transition-opacity ${animation}`, !open && 'invisible opacity-0', tipStyleClasses[style], $$props.class);
-const floatingPlacement = (placement) => {
-    return placement === 'auto' ? undefined : placement;
-};
-const floatingMiddleware = (arrowRef, placement) => {
-    const middleware = [];
-    middleware.push(offset(8));
-    middleware.push(placement === 'auto' ? autoPlacement() : flip());
-    middleware.push(shift({ padding: 8 }));
-    if (arrowRef) {
-        middleware.push(arrowFloat({ element: arrowRef }));
-    }
-    return middleware;
-};
-let placementData;
-let tooltipRef, triggerRef, arrowRef;
-const updatePosition = () => computePosition(triggerRef, tooltipRef, {
-    middleware: floatingMiddleware(arrowRef, placement),
-    placement: floatingPlacement(placement)
-}).then((data) => (placementData = data));
-let attachedScroll = false;
-$: tooltipRef && open && updatePosition();
-$: {
-    if (tooltipRef && triggerRef) {
-        if (open && !attachedScroll) {
-            attachedScroll = true;
-            window.addEventListener('scroll', updatePosition, true);
-        }
-        else if (!open && attachedScroll) {
-            attachedScroll = false;
-            window.removeEventListener('scroll', updatePosition, true);
-        }
-    }
-}
-onDestroy(() => {
-    if (attachedScroll) {
-        attachedScroll = false;
-        window.removeEventListener('scroll', updatePosition, true);
-    }
-});
-const arrPos = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right'
-};
-let floatingArrowPlacement;
-$: {
-    if (placementData) {
-        const arrow = placementData.middlewareData.arrow;
-        const pos = arrPos[placementData?.placement?.split('-')[0]] ?? 'top';
-        if (pos === 'top' || pos === 'bottom')
-            floatingArrowPlacement = `${pos}: -4px; left: ${px(arrow?.x)}`;
-        else
-            floatingArrowPlacement = `${pos}: -4px; top: ${px(arrow?.y)}`;
-    }
-}
-const px = (x) => (x === undefined ? '' : x + 'px');
+$: toolTipClass = classNames(tipClass, tipStyleClasses[style], $$props.class);
 </script>
 
-<svelte:window on:resize={() => open && updatePosition()} />
-
-<div
-	use:clickOutside={() => {
-		if (open) {
-			open = false;
-		}
-	}}
->
-	<div
-		class="w-fit"
-		bind:this={triggerRef}
-		on:mouseenter={() => {
-			if (trigger === 'hover') {
-				open = true;
-			}
-		}}
-		on:mouseleave={() => {
-			if (open && trigger === 'hover') {
-				open = false;
-			}
-		}}
-		on:click={() => {
-			if (trigger === 'click') {
-				open = !open;
-			}
-		}}
-	>
-		<slot />
-	</div>
-
-	<div
-		bind:this={tooltipRef}
-		data-testid="tooltip"
-		class={toolTipClass}
-		style:left={px(placementData?.x)}
-		style:top={px(placementData?.y)}
-		style:position={placementData?.strategy ?? ''}
-	>
-		<div class="relative z-20">
-			<slot name="content">
-				{content}
-			</slot>
-		</div>
-		{#if arrow}
-			<div
-				class={classNames('absolute z-10 h-2 w-2 rotate-45', arrowStyleClasses[style])}
-				data-testid="tooltip-arrow"
-				style={floatingArrowPlacement}
-				bind:this={arrowRef}
-			>
-				&nbsp;
-			</div>
-		{/if}
-	</div>
-</div>
+<Popper activeContent={false} {...$$restProps} class={toolTipClass} on:show>
+	<slot slot="trigger" />
+	<slot name="content">{content}</slot>
+</Popper>

package/tooltips/Tooltip.svelte.d.ts

@@ -1,23 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Placement } from '@floating-ui/dom';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: 'auto' | Placement;
-        trigger?: 'hover' | 'click';
-        style?: 'dark' | 'light' | 'auto' | 'custom';
         content?: string;
-        animation?: false | `duration-${number}`;
-        arrow?: boolean;
-        tipClass?: string;
+        style?: 'dark' | 'light' | 'auto' | 'custom';
         tipColor?: string;
-        open?: boolean;
+        tipClass?: string;
     };
     events: {
+        show: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            slot: string;
+        };
         content: {};
     };
 };

package/typography/A.svelte

@@ -0,0 +1,9 @@
+<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';
+</script>
+
+<a {href} class={classNames(aClass, textColor, $$props.class)}>
+	<slot />
+</a>

package/typography/A.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href?: string;
+        textColor?: string;
+        aClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type AProps = typeof __propDef.props;
+export declare type AEvents = typeof __propDef.events;
+export declare type ASlots = typeof __propDef.slots;
+export default class A extends SvelteComponentTyped<AProps, AEvents, ASlots> {
+}
+export {};

package/typography/Heading.svelte

@@ -0,0 +1,20 @@
+<script>import classNames from 'classnames';
+export let tag = 'h1';
+export let textColor = 'text-gray-900 dark:text-white';
+export let customSize;
+const textSizes = {
+    h1: 'text-5xl font-extrabold',
+    h2: 'text-4xl font-bold',
+    h3: 'text-3xl font-bold',
+    h4: 'text-2xl font-bold',
+    h5: 'text-xl font-bold',
+    h6: 'text-lg font-bold'
+};
+</script>
+
+<svelte:element
+	this={tag}
+	class={classNames(customSize ? customSize : textSizes[tag], textColor, $$props.class)}
+>
+	<slot />
+</svelte:element>

package/typography/Heading.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+        textColor?: string;
+        customSize: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type HeadingProps = typeof __propDef.props;
+export declare type HeadingEvents = typeof __propDef.events;
+export declare type HeadingSlots = typeof __propDef.slots;
+export default class Heading extends SvelteComponentTyped<HeadingProps, HeadingEvents, HeadingSlots> {
+}
+export {};

package/typography/Highlight.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let textColor = 'text-blue-600 dark:text-blue-500';
+</script>
+
+<span class={classNames(textColor, $$props.class)}>
+	<slot />
+</span>

package/typography/Highlight.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        textColor?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type HighlightProps = typeof __propDef.props;
+export declare type HighlightEvents = typeof __propDef.events;
+export declare type HighlightSlots = typeof __propDef.slots;
+export default class Highlight extends SvelteComponentTyped<HighlightProps, HighlightEvents, HighlightSlots> {
+}
+export {};

package/typography/Mark.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let textColor = 'text-white dark:bg-blue-500';
+export let bgColor = 'bg-blue-600';
+export let markClass = 'px-2 rounded';
+</script>
+
+<mark class={classNames(markClass, bgColor, textColor, $$props.class)}>
+	<slot />
+</mark>

package/typography/Mark.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        textColor?: string;
+        bgColor?: string;
+        markClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type MarkProps = typeof __propDef.props;
+export declare type MarkEvents = typeof __propDef.events;
+export declare type MarkSlots = typeof __propDef.slots;
+export default class Mark extends SvelteComponentTyped<MarkProps, MarkEvents, MarkSlots> {
+}
+export {};

package/typography/P.svelte

@@ -0,0 +1,9 @@
+<script>import classNames from 'classnames';
+export let textColor = 'text-gray-500 dark:text-gray-400';
+export let size = 'text-lg';
+export let pClass = 'font-normal';
+</script>
+
+<p class={classNames(pClass, size, textColor, $$props.class)}>
+	<slot />
+</p>

package/typography/P.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        textColor?: string;
+        size?: string;
+        pClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PProps = typeof __propDef.props;
+export declare type PEvents = typeof __propDef.events;
+export declare type PSlots = typeof __propDef.slots;
+export default class P extends SvelteComponentTyped<PProps, PEvents, PSlots> {
+}
+export {};

package/typography/Secondary.svelte

@@ -0,0 +1,8 @@
+<script>import classNames from 'classnames';
+export let textColor = 'text-gray-500 dark:text-gray-400';
+export let secondaryClass = 'font-semibold';
+</script>
+
+<small class={classNames(textColor, secondaryClass, $$props.class)}>
+	<slot />
+</small>

package/typography/Secondary.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        textColor?: string;
+        secondaryClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SecondaryProps = typeof __propDef.props;
+export declare type SecondaryEvents = typeof __propDef.events;
+export declare type SecondarySlots = typeof __propDef.slots;
+export default class Secondary extends SvelteComponentTyped<SecondaryProps, SecondaryEvents, SecondarySlots> {
+}
+export {};

package/typography/TextGradient.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let gradientClass = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+</script>
+
+<span class={classNames(gradientClass, $$props.class)}>
+	<slot />
+</span>

package/typography/TextGradient.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        gradientClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TextGradientProps = typeof __propDef.props;
+export declare type TextGradientEvents = typeof __propDef.events;
+export declare type TextGradientSlots = typeof __propDef.slots;
+export default class TextGradient extends SvelteComponentTyped<TextGradientProps, TextGradientEvents, TextGradientSlots> {
+}
+export {};

package/typography/Underline.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let underlineClass = 'underline underline-offset-3 decoration-8 decoration-blue-400 dark:decoration-blue-600';
+</script>
+
+<span class={classNames(underlineClass, $$props.class)}>
+	<slot />
+</span>

package/typography/Underline.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        underlineClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type UnderlineProps = typeof __propDef.props;
+export declare type UnderlineEvents = typeof __propDef.events;
+export declare type UnderlineSlots = typeof __propDef.slots;
+export default class Underline extends SvelteComponentTyped<UnderlineProps, UnderlineEvents, UnderlineSlots> {
+}
+export {};

package/utils/Popper.svelte

@@ -0,0 +1,83 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { createPopper } from '@popperjs/core';
+import classNames from 'classnames';
+const dispatch = createEventDispatcher();
+export let open = false;
+export let placement = 'top';
+export let offset = 8;
+export let trigger = 'hover';
+export let arrow = true;
+export let animation = 'duration-300';
+export let activeContent;
+let clickable;
+$: clickable = trigger === 'click';
+let triggerEl, contentEl, popper;
+let _blocked = false; // managment of the race condition between focusin and click events
+const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 500));
+const showHandler = (ev) => {
+    if (clickable && ev.type === 'focusin' && !open)
+        block();
+    open = ev.type === 'click' && !_blocked ? !open : true;
+};
+const hideHandler = (ev) => {
+    if (activeContent)
+        setTimeout(() => (!clickable && (triggerEl.matches(':hover') || contentEl.matches(':hover'))) ||
+            contentEl.contains(document.activeElement) ||
+            (open = false), 100);
+    else
+        open = false;
+};
+$: {
+    if (triggerEl && contentEl) {
+        popper = createPopper(triggerEl, contentEl, {
+            placement,
+            modifiers: [{ name: 'offset', options: { offset: [0, offset] } }]
+        });
+    }
+}
+function enableListeners(modifiers) {
+    const modifier = modifiers.find((x) => x.name === 'eventListeners');
+    if (!modifier)
+        return [...modifiers, { name: 'eventListeners', enabled: open }];
+    modifier.enabled = open;
+    return modifiers;
+}
+$: {
+    if (popper) {
+        // Enable the event listeners
+        popper.setOptions(({ modifiers, ...options }) => ({
+            ...options,
+            modifiers: enableListeners(modifiers)
+        }));
+        open && popper.update(); // Update the position
+        dispatch('show', open);
+    }
+}
+let divClass;
+$: divClass = classNames('z-10', animation && `transition-opacity ${animation}`, open ? 'visible opacity-100' : 'invisible opacity-0', $$props.class);
+</script>
+
+<div
+	bind:this={triggerEl}
+	on:focusin={showHandler}
+	on:focusout={hideHandler}
+	on:click={clickable ? showHandler : undefined}
+	on:mouseenter={clickable ? undefined : showHandler}
+	on:mouseleave={clickable ? undefined : hideHandler}
+	class="inline-block"
+>
+	<slot name="trigger" />
+</div>
+<div
+	bind:this={contentEl}
+	role="tooltip"
+	tabindex={activeContent ? -1 : undefined}
+	class={divClass}
+	on:focusin={activeContent ? showHandler : undefined}
+	on:focusout={activeContent ? hideHandler : undefined}
+	on:mouseenter={activeContent && !clickable ? showHandler : undefined}
+	on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
+>
+	<slot />
+	{#if arrow}<div data-popper-arrow />{/if}
+</div>

package/utils/Popper.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Placement } from '@popperjs/core';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        open?: boolean;
+        placement?: Placement;
+        offset?: number;
+        trigger?: 'hover' | 'click';
+        arrow?: boolean;
+        animation?: false | `duration-${number}`;
+        activeContent: boolean;
+    };
+    events: {
+        show: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trigger: {};
+        default: {};
+    };
+};
+export declare type PopperProps = typeof __propDef.props;
+export declare type PopperEvents = typeof __propDef.events;
+export declare type PopperSlots = typeof __propDef.slots;
+export default class Popper extends SvelteComponentTyped<PopperProps, PopperEvents, PopperSlots> {
+}
+export {};