flowbite-svelte 0.26.5 → 0.26.8

package/CHANGELOG.md

@@ -2,6 +2,50 @@
 
 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.8](https://github.com/themesberg/flowbite-svelte/compare/v0.26.7...v0.26.8) (2022-09-03)
+
+
+### Features
+
+* dropdown button ([f6347f2](https://github.com/themesberg/flowbite-svelte/commit/f6347f280cbfc552d001aa22128026174b46a6f3))
+* more Frame inheritance ([bb72d69](https://github.com/themesberg/flowbite-svelte/commit/bb72d6952386bd0f6dec4711795e3591a6837c02))
+* popover finalization ([c71481e](https://github.com/themesberg/flowbite-svelte/commit/c71481ec18e2850488d86cfdb583587eae4a19b2))
+
+
+### Bug Fixes
+
+* missing 683restProps ([0d52fd1](https://github.com/themesberg/flowbite-svelte/commit/0d52fd1b4168c8cc707c174dc2c18f532cf2e93c))
+* no triggers error ([83075e1](https://github.com/themesberg/flowbite-svelte/commit/83075e1a969bdf93a520bd9e35b339e36bf4f325))
+* remove unused imports ([acb58b9](https://github.com/themesberg/flowbite-svelte/commit/acb58b9144948feeb3c1c14b41a71d2122187340))
+
+### [0.26.7](https://github.com/themesberg/flowbite-svelte/compare/v0.26.6...v0.26.7) (2022-09-03)
+
+
+### Features
+
+* add Layout component ([2204586](https://github.com/themesberg/flowbite-svelte/commit/22045861703bf3e46cc7900e15c4db64d5246c50))
+* add paragraphs page ([db973a3](https://github.com/themesberg/flowbite-svelte/commit/db973a3929bfdc8c4dd48338cc114bdc2c808fb8))
+
+
+### Bug Fixes
+
+* add html block to text page ([37e910a](https://github.com/themesberg/flowbite-svelte/commit/37e910ae269099865865580d419b8dd05dccb7a8))
+
+### [0.26.6](https://github.com/themesberg/flowbite-svelte/compare/v0.26.5...v0.26.6) (2022-09-02)
+
+
+### Features
+
+* add highlight to Span component and update heading page ([d47121b](https://github.com/themesberg/flowbite-svelte/commit/d47121ba47e6c6e3dfdd366128f51da77a966e0f))
+* add Text decoration examples to text page ([fe074cd](https://github.com/themesberg/flowbite-svelte/commit/fe074cd2a36d780333444f276de69edec51649d5))
+* add underline and decoratio class to Span ([f3b11a9](https://github.com/themesberg/flowbite-svelte/commit/f3b11a92b3782c27e09f25c894a81402661b73d3))
+
+
+### Bug Fixes
+
+* header blocking anchor links ([af6d2d6](https://github.com/themesberg/flowbite-svelte/commit/af6d2d6eb9bb630e58e76fd214f8a14f0435dc2f))
+* remove TextGradient and Underline ([cb7b2d7](https://github.com/themesberg/flowbite-svelte/commit/cb7b2d753f110cad4677f990d60a11154e38ac93))
+
 ### [0.26.5](https://github.com/themesberg/flowbite-svelte/compare/v0.26.4...v0.26.5) (2022-09-02)
 
 

package/dropdowns/Dropdown.svelte

@@ -1,26 +1,13 @@
-<script>import Button from '../buttons/Button.svelte';
-import Frame from '../utils/Frame.svelte';
+<script>import classNames from 'classnames';
+import Button from '../buttons/Button.svelte';
 import Popper from '../utils/Popper.svelte';
-import classNames from 'classnames';
-import ChevronUp from '../utils/ChevronUp.svelte';
-import ChevronRight from '../utils/ChevronRight.svelte';
-import ChevronDown from '../utils/ChevronDown.svelte';
-import ChevronLeft from '../utils/ChevronLeft.svelte';
+import Chevron from '../utils/Chevron.svelte';
 export let label = '';
 export let inline = 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';
 export let open = false;
-export let triggeredBy = undefined;
-const icons = {
-    top: ChevronUp,
-    right: ChevronRight,
-    bottom: ChevronDown,
-    left: ChevronLeft
-};
-// @ts-ignore
-$: icon = icons[placement.split('-')[0]];
 let popoverClass;
 $: popoverClass = classNames('outline-none', $$props.class);
 </script>
@@ -28,33 +15,40 @@ $: popoverClass = classNames('outline-none', $$props.class);
 {#if label}
 	<slot name="trigger">
 		{#if inline}
-			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
-				<slot name="label">{label}</slot>
+			<button class={labelClass}>
 				{#if arrowIcon}
-					<svelte:component
-						this={icon ?? ChevronDown}
-						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')} />
+					<Chevron {placement}><slot name="label">{label}</slot></Chevron>
+				{:else}
+					<slot name="label">{label}</slot>
 				{/if}
 			</button>
 		{:else}
-			<Button {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
-				<slot name="label">{label}</slot>
+			<Button>
 				{#if arrowIcon}
-					<svelte:component
-						this={icon ?? ChevronDown}
-						class={classNames('h-4 w-4', icon == ChevronLeft ? 'mr-2' : 'ml-2')} />
+					<Chevron {placement}><slot name="label">{label}</slot></Chevron>
+				{:else}
+					<slot name="label">{label}</slot>
 				{/if}
 			</Button>
 		{/if}
 	</slot>
 {/if}
 
-<Popper activeContent={true} arrow={false} {placement} trigger="click" on:show bind:open {triggeredBy}>
-	<Frame class={popoverClass} rounded border shadow>
-		<slot name="content">
-			<ul class="py-1">
-				<slot />
-			</ul>
-		</slot>
-	</Frame>
+<Popper
+	rounded
+	border
+	shadow
+	activeContent
+	arrow={false}
+	{placement}
+	trigger="click"
+	{...$$restProps}
+	class={popoverClass}
+	on:show
+	bind:open>
+	<slot name="content">
+		<ul class="py-1">
+			<slot />
+		</ul>
+	</slot>
 </Popper>

package/dropdowns/Dropdown.svelte.d.ts

@@ -7,9 +7,8 @@ declare const __propDef: {
         inline?: boolean;
         arrowIcon?: boolean;
         labelClass?: string;
-        placement?: 'auto' | Placement;
+        placement?: Placement;
         open?: boolean;
-        triggeredBy?: string;
     };
     events: {
         show: CustomEvent<any>;

package/dropdowns/DropdownItem.svelte

@@ -1,6 +1,7 @@
 <script>import classNames from 'classnames';
 export let liClass = 'block font-medium cursor-pointer py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
 export let color = 'default';
+export let tabindex = 0;
 const colors = {
     default: 'text-gray-700 dark:text-gray-200 dark:hover:text-white',
     red: 'text-red-600 dark:text-red-500'
@@ -18,7 +19,6 @@ const colors = {
 	on:blur
 	on:mouseenter
 	on:mouseleave
-	tabindex="0"
->
+	{tabindex}>
 	<slot />
 </li>

package/dropdowns/DropdownItem.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         liClass?: string;
         color?: string;
+        tabindex?: number;
     };
     events: {
         click: MouseEvent;

package/index.d.ts

@@ -110,17 +110,15 @@ export { default as A } from './typography/A.svelte';
 export { default as Blockquote } from './typography/Blockquote.svelte';
 export { default as DescriptionList } from './typography/DescriptionList.svelte';
 export { default as Heading } from './typography/Heading.svelte';
-export { default as Highlight } from './typography/Highlight.svelte';
 export { default as Hr } from './typography/Hr.svelte';
 export { default as Img } from './typography/Img.svelte';
+export { default as Layout } from './typography/Layout.svelte';
 export { default as Li } from './typography/Li.svelte';
 export { default as Mark } from './typography/Mark.svelte';
 export { default as List } from './typography/List.svelte';
 export { default as P } from './typography/P.svelte';
 export { default as Secondary } from './typography/Secondary.svelte';
 export { default as Span } from './typography/Span.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';
 export { default as ChevronDown } from './utils/ChevronDown.svelte';
 export { default as ChevronLeft } from './utils/ChevronLeft.svelte';

package/index.js

@@ -143,17 +143,15 @@ export { default as A } from './typography/A.svelte';
 export { default as Blockquote } from './typography/Blockquote.svelte';
 export { default as DescriptionList } from './typography/DescriptionList.svelte';
 export { default as Heading } from './typography/Heading.svelte';
-export { default as Highlight } from './typography/Highlight.svelte';
 export { default as Hr } from './typography/Hr.svelte';
 export { default as Img } from './typography/Img.svelte';
+export { default as Layout } from './typography/Layout.svelte';
 export { default as Li } from './typography/Li.svelte';
 export { default as Mark } from './typography/Mark.svelte';
 export { default as List } from './typography/List.svelte';
 export { default as P } from './typography/P.svelte';
 export { default as Secondary } from './typography/Secondary.svelte';
 export { default as Span } from './typography/Span.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';
 export { default as ChevronDown } from './utils/ChevronDown.svelte';

package/navbar/NavLi.svelte

@@ -7,7 +7,8 @@ $: aClass = active ? activeClass : nonActiveClass;
 </script>
 
 <li>
-	<a
+	<svelte:element
+		this={href ? 'a' : 'div'}
 		{href}
 		{...$$restProps}
 		on:blur
@@ -20,8 +21,7 @@ $: aClass = active ? activeClass : nonActiveClass;
 		on:mouseenter
 		on:mouseleave
 		on:mouseover
-		class={classNames(aClass, $$props.class)}
-	>
+		class={classNames(aClass, $$props.class)}>
 		<slot />
-	</a>
+	</svelte:element>
 </li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.5",
+  "version": "0.26.8",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -222,18 +222,18 @@
     "./typography/Blockquote.svelte": "./typography/Blockquote.svelte",
     "./typography/DescriptionList.svelte": "./typography/DescriptionList.svelte",
     "./typography/Heading.svelte": "./typography/Heading.svelte",
-    "./typography/Highlight.svelte": "./typography/Highlight.svelte",
     "./typography/Hr.svelte": "./typography/Hr.svelte",
     "./typography/Img.svelte": "./typography/Img.svelte",
+    "./typography/Layout.svelte": "./typography/Layout.svelte",
     "./typography/Li.svelte": "./typography/Li.svelte",
     "./typography/List.svelte": "./typography/List.svelte",
     "./typography/Mark.svelte": "./typography/Mark.svelte",
     "./typography/P.svelte": "./typography/P.svelte",
     "./typography/Secondary.svelte": "./typography/Secondary.svelte",
     "./typography/Span.svelte": "./typography/Span.svelte",
-    "./typography/TextGradient.svelte": "./typography/TextGradient.svelte",
     "./typography/Ul.svelte": "./typography/Ul.svelte",
     "./typography/Underline.svelte": "./typography/Underline.svelte",
+    "./utils/Chevron.svelte": "./utils/Chevron.svelte",
     "./utils/ChevronDown.svelte": "./utils/ChevronDown.svelte",
     "./utils/ChevronLeft.svelte": "./utils/ChevronLeft.svelte",
     "./utils/ChevronRight.svelte": "./utils/ChevronRight.svelte",

package/popover/Popover.svelte

@@ -1,20 +1,18 @@
 <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);
+export let defaultClass = 'py-2 px-3';
 </script>
 
-<Popper activeContent={true} {...$$restProps} class={popoverClass} on:show>
-  {#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 activeContent border shadow rounded {...$$restProps} class={$$props.class} on:show>
+	{#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={defaultClass}>
+		<slot />
+	</div>
 </Popper>

package/popover/Popover.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         title?: string;
+        defaultClass?: string;
     };
     events: {
         show: CustomEvent<any>;

package/tooltips/Tooltip.svelte

@@ -1,19 +1,24 @@
 <script>import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
-export let color = '';
-export let style = 'dark';
-export let tipClass = 'py-2 px-3 text-sm font-medium rounded-lg shadow-sm tooltip';
-export let triggeredBy;
+export let color = 'custom';
+export let style = 'auto';
+export let tipClass = 'py-2 px-3 text-sm font-medium';
 const colors = {
-    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:bg-gray-700 dark:text-white dark:border-gray-600 ',
-    custom: color
+    dark: 'border-gray-800 bg-gray-900 text-white dark:bg-gray-700 dark:border-gray-600',
+    light: 'border-gray-200 bg-white text-gray-900',
+    auto: 'border-gray-200 bg-white text-gray-900 dark:bg-gray-700 dark:text-white dark:border-gray-600 '
 };
 let toolTipClass;
 $: toolTipClass = classNames(tipClass, colors[style], $$props.class);
 </script>
 
-<Popper activeContent={false} {triggeredBy} {...$$restProps} class={toolTipClass} on:show>
+<Popper
+	rounded
+	border
+	shadow
+	color={style === 'custom' ? color : 'none'}
+	{...$$restProps}
+	class={toolTipClass}
+	on:show>
 	<slot />
 </Popper>

package/tooltips/Tooltip.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         color?: string;
         style?: 'dark' | 'light' | 'auto' | 'custom';
         tipClass?: string;
-        triggeredBy: string;
     };
     events: {
         show: CustomEvent<any>;

package/typography/A.svelte

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

package/typography/A.svelte.d.ts

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

package/typography/Blockquote.svelte

@@ -11,24 +11,33 @@ let alignmentClasses = {
     center: 'text-center',
     right: 'text-right'
 };
-export let size = 'xl';
-let sizeClasses = {
+export let size = 'lg';
+const sizes = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
     lg: 'text-lg',
     xl: 'text-xl',
-    xxl: 'text-2xl'
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+    '5xl': 'text-5xl',
+    '6xl': 'text-6xl',
+    '7xl': 'text-7xl',
+    '8xl': 'text-8xl',
+    '9xl': 'text-9xl'
 };
 </script>
 
 <blockquote
-	class={classNames(
-		baseClass,
-		alignmentClasses[alignment],
-		sizeClasses[size],
-		bg && bgClass,
-		border && borderClass,
-		italic && 'italic',
-		$$props.class
-	)}
->
-	<slot />
+  class={classNames(
+    baseClass,
+    alignmentClasses[alignment],
+    sizes[size],
+    bg && bgClass,
+    border && borderClass,
+    italic && 'italic',
+    $$props.class
+  )}>
+  <slot />
 </blockquote>

package/typography/Blockquote.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
         bg?: boolean;
         baseClass?: string;
         alignment?: 'left' | 'center' | 'right';
-        size?: 'lg' | 'xl' | 'xxl';
+        size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/Layout.svelte

@@ -0,0 +1,10 @@
+<script>import classNames from 'classnames';
+export let divClass = 'grid';
+export let cols = 'grid-cols-1 sm:grid-cols-2';
+export let gap;
+let classDiv = classNames(divClass, 'gap-' + String(gap), cols);
+</script>
+
+<div class={classDiv}>
+  <slot />
+</div>

package/typography/Layout.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        divClass?: string;
+        cols?: string;
+        gap: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type LayoutProps = typeof __propDef.props;
+export declare type LayoutEvents = typeof __propDef.events;
+export declare type LayoutSlots = typeof __propDef.slots;
+export default class Layout extends SvelteComponentTyped<LayoutProps, LayoutEvents, LayoutSlots> {
+}
+export {};

package/typography/P.svelte

@@ -1,9 +1,77 @@
 <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';
+export let color = 'text-gray-900 dark:text-white';
+export let height = 'normal';
+export let align = 'left';
+export let justify = false;
+export let italic = false;
+export let firstupper = false;
+export let upperClass = 'first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 dark:first-letter:text-gray-100 first-letter:mr-3 first-letter:float-left';
+export let opacity;
+export let whitespace = 'normal';
+export let size = 'base';
+export let space;
+export let weight;
+const sizes = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+    '5xl': 'text-5xl',
+    '6xl': 'text-6xl',
+    '7xl': 'text-7xl',
+    '8xl': 'text-8xl',
+    '9xl': 'text-9xl'
+};
+const weights = {
+    thin: 'font-thin',
+    extralight: 'font-extralight',
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+    extrabold: 'font-extrabold',
+    black: 'font-black'
+};
+const spaces = {
+    tighter: 'tracking-tighter',
+    tight: 'tracking-tight',
+    normal: 'tracking-normal',
+    wide: 'tracking-wide',
+    wider: 'tracking-wider',
+    widest: 'tracking-widest'
+};
+const heights = {
+    normal: 'leading-normal',
+    relaxed: 'leading-relaxed',
+    loose: 'leading-loose'
+};
+const aligns = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+};
+const whitespaces = {
+    normal: 'whitespace-normal',
+    nowrap: 'whitespace-nowrap',
+    pre: 'whitespace-pre',
+    preline: 'whitespace-pre-line',
+    prewrap: 'whitespace-pre-wrap'
+};
+let colorAndopacity = color
+    .split(' ')
+    .map((element) => element.trim())
+    .map((element) => element + '/' + String(opacity))
+    .join(' ');
+// console.log('colorArr', colorAndopacity);
+// console.log(typeof colorAndopacity);
+let classP = classNames(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
 </script>
 
-<p class={classNames(pClass, size, textColor, $$props.class)}>
-	<slot />
+<p class={classP}>
+  <slot />
 </p>

package/typography/P.svelte.d.ts

@@ -2,9 +2,18 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        textColor?: string;
-        size?: string;
-        pClass?: string;
+        color?: string;
+        height?: 'normal' | 'relaxed' | 'loose';
+        align?: 'left' | 'center' | 'right';
+        justify?: boolean;
+        italic?: boolean;
+        firstupper?: boolean;
+        upperClass?: string;
+        opacity: number;
+        whitespace?: 'normal' | 'nowrap' | 'pre' | 'preline' | 'prewrap';
+        size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
+        space: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
+        weight: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/Span.svelte

@@ -1,5 +1,15 @@
 <script>import classNames from 'classnames';
-export let classSpan = classNames('font-semibold text-gray-900 dark:text-white', $$props.class);
+export let italic = false;
+export let underline = false;
+export let linethrough = false;
+export let uppercase = false;
+export let gradient = false;
+export let highlight = false;
+export let highlightClass = 'text-blue-600 dark:text-blue-500';
+export let decorationClass = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
+export let gradientClass = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+let underlineClass = classNames('underline', decorationClass);
+let classSpan = classNames(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-gray-900 dark:text-white', highlight && highlightClass, $$props.class);
 </script>
 
 <span class={classSpan}>

package/typography/Span.svelte.d.ts

@@ -2,7 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        classSpan?: string;
+        italic?: boolean;
+        underline?: boolean;
+        linethrough?: boolean;
+        uppercase?: boolean;
+        gradient?: boolean;
+        highlight?: boolean;
+        highlightClass?: string;
+        decorationClass?: string;
+        gradientClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/Underline.svelte

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

package/utils/Chevron.svelte

@@ -0,0 +1,23 @@
+<script>import ChevronDown from './ChevronDown.svelte';
+import ChevronLeft from './ChevronLeft.svelte';
+import ChevronUp from './ChevronUp.svelte';
+import ChevronRight from './ChevronRight.svelte';
+export let placement = 'bottom';
+const icons = {
+    top: ChevronUp,
+    right: ChevronRight,
+    bottom: ChevronDown,
+    left: ChevronLeft
+};
+// @ts-ignore
+let icon;
+$: icon = icons[placement.split('-')[0]] ?? ChevronDown;
+</script>
+
+{#if placement.split('-')[0] === 'left'}
+	<ChevronLeft class="h-4 w-4 mr-2" />
+	<slot />
+{:else}
+	<slot />
+	<svelte:component this={icon} class="h-4 w-4 ml-2" />
+{/if}

package/utils/Chevron.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Placement } from '@popperjs/core';
+declare const __propDef: {
+    props: {
+        placement?: Placement;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ChevronProps = typeof __propDef.props;
+export declare type ChevronEvents = typeof __propDef.events;
+export declare type ChevronSlots = typeof __propDef.slots;
+export default class Chevron extends SvelteComponentTyped<ChevronProps, ChevronEvents, ChevronSlots> {
+}
+export {};

package/utils/Frame.svelte

@@ -1,6 +1,6 @@
 <script>import classNames from 'classnames';
 import { setContext } from 'svelte';
-import * as transitions from 'svelte/transition';
+import { noop } from 'svelte/internal';
 setContext('background', true);
 $: setContext('color', color);
 export let tag = 'div';
@@ -8,10 +8,14 @@ export let color = 'default';
 export let rounded = false;
 export let border = false;
 export let shadow = false;
-// Export a prop through which you can set a desired transition
+// Export a prop through which you can set a desired svelte transition
 export let transition = undefined;
 // Pass in extra transition params
 export let params = {};
+// For components development
+export let node = undefined;
+export let use = noop;
+export let options = {};
 // your script goes here
 const bgColors = {
     gray: 'bg-gray-100 dark:bg-gray-200 ',
@@ -57,17 +61,22 @@ const borderColors = {
 };
 // have a custom transition function that returns the desired transition
 let transitionFunc;
-$: transitionFunc = transitions[transition];
+// $: transitionFunc = (node: Element) => (transition ? transition(node, params) : noop);
+$: transitionFunc = transition ?? noop;
 let divClass;
 $: divClass = classNames(bgColors[color], textColors[color], rounded && 'rounded-lg ', border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
 </script>
 
-{#if transitionFunc}
-	<svelte:element this={tag} transition:transitionFunc={params} {...$$restProps} class={divClass}>
-		<slot />
-	</svelte:element>
-{:else}
-	<svelte:element this={tag} {...$$restProps} class={divClass}>
-		<slot />
-	</svelte:element>
-{/if}
+<svelte:element
+	this={tag}
+	use:use={options}
+	bind:this={node}
+	transition:transitionFunc={params}
+	{...$$restProps}
+	class={divClass}
+	on:mouseenter
+	on:mouseleave
+	on:focusin
+	on:focusout>
+	<slot />
+</svelte:element>

package/utils/Frame.svelte.d.ts

@@ -1,17 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TransitionTypes, TransitionParamTypes } from '../types';
+import type { Action } from 'svelte/action';
+import type { TransitionConfig } from 'svelte/transition';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        tag?: string;
+        tag?: 'div' | 'a';
         color?: string;
         rounded?: boolean;
         border?: boolean;
         shadow?: boolean;
-        transition?: TransitionTypes;
-        params?: TransitionParamTypes;
+        transition?: (node: Element, params: object) => TransitionConfig;
+        params?: object;
+        node?: HTMLElement;
+        use?: Action;
+        options?: {};
     };
     events: {
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/utils/Popper.svelte

@@ -1,10 +1,9 @@
 <script>import { onMount } from 'svelte';
-import { fade } from 'svelte/transition';
 import { createPopper } from '@popperjs/core';
 import classNames from 'classnames';
 import createEventDispatcher from './createEventDispatcher';
+import Frame from './Frame.svelte';
 export let activeContent = false;
-export let animation = 100;
 export let arrow = true;
 export let offset = 8;
 export let placement = 'top';
@@ -77,12 +76,12 @@ onMount(() => {
         ['mouseenter', showHandler, !clickable],
         ['mouseleave', hideHandler, !clickable]
     ];
-    triggerEls = [...document.querySelectorAll(triggeredBy)];
+    if (triggeredBy)
+        triggerEls = [...document.querySelectorAll(triggeredBy)];
+    else
+        triggerEls = contentEl.previousElementSibling ? [contentEl.previousElementSibling] : [];
     if (!triggerEls.length) {
-        if (contentEl.previousElementSibling)
-            triggerEls.push(contentEl.previousElementSibling);
-        else
-            console.error('No triggers found.');
+        console.error('No triggers found.');
     }
     triggerEls.forEach((element) => {
         if (element.tabIndex < 0)
@@ -108,18 +107,19 @@ onMount(() => {
 {/if}
 
 {#if open && triggerEl}
-	<div
-		use:init={triggerEl}
-		transition:fade={{ duration: animation ? animation : 0 }}
+	<Frame
+		use={init}
+		options={triggerEl}
 		role="tooltip"
 		tabIndex={activeContent ? -1 : undefined}
-		class={classNames('z-10', $$props.class)}
 		on:focusin={activeContent ? showHandler : undefined}
 		on:focusout={activeContent ? hideHandler : undefined}
-		on:mouseenter={activeContent && !clickable ? showHandler : undefined}
+		on:mouseenter={showHandler}
 		on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
+		{...$$restProps}
+		class={classNames('z-10', $$props.class)}
 		style="position: absolute;">
 		<slot />
 		{#if arrow}<div data-popper-arrow />{/if}
-	</div>
+	</Frame>
 {/if}

package/utils/Popper.svelte.d.ts

@@ -4,7 +4,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         activeContent?: boolean;
-        animation?: false | number;
         arrow?: boolean;
         offset?: number;
         placement?: Placement;

package/typography/Highlight.svelte

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

@@ -1,19 +0,0 @@
-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/TextGradient.svelte

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

@@ -1,19 +0,0 @@
-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 {};