flowbite-svelte 0.27.13 → 0.27.15

package/src/lib/typography/Ul.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import classNames from 'classnames';
+
+  export let list: 'disc' | 'none' | 'decimal' = 'disc';
+  export let position: 'inside' | 'outside' = 'inside';
+  export let ulClass: string = 'max-w-md text-gray-500 dark:text-gray-400';
+  let lists = {
+    disc: 'list-disc',
+    none: 'list-none',
+    decimal: 'list-decimal'
+  };
+  let positions = {
+    inside: 'list-inside',
+    outside: 'list-outside'
+  };
+  let classUl = classNames(ulClass, lists[list], positions[position], $$props.class);
+  console.log('list', list);
+</script>
+
+<ul {...$$restProps} class={classUl} {list}>
+  <slot />
+</ul>

package/src/lib/utils/Chevron.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { BasePlacement, Placement } from '@popperjs/core';
+  import ChevronDown from './ChevronDown.svelte';
+  import ChevronLeft from './ChevronLeft.svelte';
+  import ChevronUp from './ChevronUp.svelte';
+  import ChevronRight from './ChevronRight.svelte';
+  import Wrapper from './Wrapper.svelte';
+  import type { ComponentType } from 'svelte';
+
+  export let placement: Placement = 'bottom';
+  export let aligned: boolean = false;
+
+  const icons = {
+    top: ChevronUp,
+    right: ChevronRight,
+    bottom: ChevronDown,
+    left: ChevronLeft
+  };
+
+  let icon: ComponentType;
+  $: icon = icons[placement.split('-')[0] as BasePlacement] ?? ChevronDown;
+</script>
+
+<Wrapper class="flex items-center justify-between" show={aligned}>
+  {#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}
+</Wrapper>

package/src/lib/utils/ChevronDown.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	export let size = '24';
+	export let color = 'currentColor';
+	export let variation: 'solid' | 'outline' = 'outline';
+	let viewBox: string;
+	let svgpath: string;
+	let svgoutline = `<path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+	let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 16.2803C12.2374 16.5732 11.7626 16.5732 11.4697 16.2803L3.96967 8.78033C3.67678 8.48744 3.67678 8.01256 3.96967 7.71967C4.26256 7.42678 4.73744 7.42678 5.03033 7.71967L12 14.6893L18.9697 7.71967C19.2626 7.42678 19.7374 7.42678 20.0303 7.71967C20.3232 8.01256 20.3232 8.48744 20.0303 8.78033L12.5303 16.2803Z" fill="${color}"/> `;
+	$: switch (variation) {
+		case 'outline':
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+			break;
+		case 'solid':
+			svgpath = svgsolid;
+			viewBox = '0 0 24 24';
+			break;
+		default:
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+	}
+	export let ariaLabel = 'chevron down';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/src/lib/utils/ChevronLeft.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	export let size = '24';
+	export let color = 'currentColor';
+	export let variation: 'solid' | 'outline' = 'outline';
+	let viewBox: string;
+	let svgpath: string;
+	let svgoutline = `<path d="M15.75 19.5L8.25 12L15.75 4.5" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+	let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M7.71967 12.5303C7.42678 12.2374 7.42678 11.7626 7.71967 11.4697L15.2197 3.96967C15.5126 3.67678 15.9874 3.67678 16.2803 3.96967C16.5732 4.26256 16.5732 4.73744 16.2803 5.03033L9.31066 12L16.2803 18.9697C16.5732 19.2626 16.5732 19.7374 16.2803 20.0303C15.9874 20.3232 15.5126 20.3232 15.2197 20.0303L7.71967 12.5303Z" fill="${color}"/> `;
+	$: switch (variation) {
+		case 'outline':
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+			break;
+		case 'solid':
+			svgpath = svgsolid;
+			viewBox = '0 0 24 24';
+			break;
+		default:
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+	}
+	export let ariaLabel = 'chevron left';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/src/lib/utils/ChevronRight.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	export let size = '24';
+	export let color = 'currentColor';
+	export let variation: 'solid' | 'outline' = 'outline';
+	let viewBox: string;
+	let svgpath: string;
+	let svgoutline = `<path d="M8.25 4.5L15.75 12L8.25 19.5" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+	let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2803 11.4697C16.5732 11.7626 16.5732 12.2374 16.2803 12.5303L8.78033 20.0303C8.48744 20.3232 8.01256 20.3232 7.71967 20.0303C7.42678 19.7374 7.42678 19.2626 7.71967 18.9697L14.6893 12L7.71967 5.03033C7.42678 4.73744 7.42678 4.26256 7.71967 3.96967C8.01256 3.67678 8.48744 3.67678 8.78033 3.96967L16.2803 11.4697Z" fill="${color}"/> `;
+	$: switch (variation) {
+		case 'outline':
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+			break;
+		case 'solid':
+			svgpath = svgsolid;
+			viewBox = '0 0 24 24';
+			break;
+		default:
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+	}
+	export let ariaLabel = 'chevron right';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/src/lib/utils/ChevronUp.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	export let size = '24';
+	export let color = 'currentColor';
+	export let variation: 'solid' | 'outline' = 'outline';
+	let viewBox: string;
+	let svgpath: string;
+	let svgoutline = `<path d="M4.5 15.75L12 8.25L19.5 15.75" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+	let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z" fill="${color}"/> `;
+	$: switch (variation) {
+		case 'outline':
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+			break;
+		case 'solid':
+			svgpath = svgsolid;
+			viewBox = '0 0 24 24';
+			break;
+		default:
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+	}
+	export let ariaLabel = 'chevron up';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click>
+	{@html svgpath}
+</svg>

package/src/lib/utils/CloseButton.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import classNames from 'classnames';
+
+	const background = getContext('background');
+
+	export let color = 'default';
+	export let name = 'Close';
+	export let size: 'xs' | 'sm' | 'md' = 'md';
+
+	const colors = {
+		dark: 'hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600',
+		gray: 'focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-300',
+		red: 'focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-300',
+		yellow: 'focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-300',
+		green: 'focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-300',
+		indigo: 'focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-300',
+		purple: 'focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-300',
+		pink: 'focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-300',
+		blue: 'focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-300',
+		default: 'focus:ring-gray-300 '
+	};
+
+	const sizing = {
+		xs: 'm-0.5 rounded focus:ring-1 p-0.5',
+		sm: 'm-0.5 rounded focus:ring-1 p-0.5',
+		md: 'rounded-lg focus:ring-2 p-1.5'
+	};
+	let buttonClass: string = '';
+	$: buttonClass = classNames(
+		'ml-auto focus:outline-none whitespace-normal',
+		sizing[size],
+		colors[color],
+		color === 'default' &&
+			(background
+				? 'hover:bg-gray-100 dark:hover:bg-gray-600'
+				: 'hover:bg-gray-100 dark:hover:bg-gray-700'),
+		$$props.class
+	);
+
+	const svgSizes = {
+		xs: 'w-3 h-3',
+		sm: 'w-3.5 h-3.5',
+		md: 'w-5 h-5'
+	};
+</script>
+
+<button on:click type="button" class={buttonClass} aria-label="Close">
+	<slot>
+		<span class="sr-only">{name}</span>
+		<svg
+			class={svgSizes[size]}
+			fill="currentColor"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fill-rule="evenodd"
+				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	</slot>
+</button>

package/src/lib/utils/Frame.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import classNames from 'classnames';
+  import { setContext } from 'svelte';
+
+  import { noop } from 'svelte/internal';
+  import type { Action } from 'svelte/action';
+  import type { TransitionConfig } from 'svelte/transition';
+
+  setContext('background', true);
+  $: setContext('color', color);
+
+  export let tag: string = 'div';
+  export let color:
+    | 'gray'
+    | 'red'
+    | 'yellow'
+    | 'green'
+    | 'indigo'
+    | 'default'
+    | 'purple'
+    | 'pink'
+    | 'blue'
+    | 'light'
+    | 'dark'
+    | 'dropdown'
+    | 'navbar'
+    | 'navbarUl'
+    | 'form'
+    | 'none' = 'default';
+  export let rounded: boolean = false;
+  export let border: boolean = false;
+  export let shadow: boolean = false;
+
+  type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
+
+  // Export a prop through which you can set a desired svelte transition
+  export let transition: TransitionFunc | undefined = undefined;
+  // Pass in extra transition params
+  export let params: object = {};
+
+  // For components development
+  export let node: HTMLElement | undefined = undefined;
+  export let use: Action = noop;
+  export let options = {};
+
+  // your script goes here
+  const bgColors = {
+    gray: 'bg-gray-100 dark:bg-gray-200 ',
+    red: 'bg-red-100 dark:bg-red-200',
+    yellow: 'bg-yellow-100 dark:bg-yellow-200 ',
+    green: 'bg-green-100 dark:bg-green-200 ',
+    indigo: 'bg-indigo-100 dark:bg-indigo-200 ',
+    purple: 'bg-purple-100 dark:bg-purple-200 ',
+    pink: 'bg-pink-100 dark:bg-pink-200 ',
+    blue: 'bg-blue-100 dark:bg-blue-200 ',
+    light: 'bg-gray-50 dark:bg-gray-700',
+    dark: 'bg-gray-100 dark:bg-gray-700',
+    default: 'bg-white dark:bg-gray-800',
+    dropdown: 'bg-white dark:bg-gray-700',
+    navbar: 'bg-white dark:bg-gray-900',
+    navbarUl: 'bg-gray-50 dark:bg-gray-800',
+    form: 'bg-gray-50 dark:bg-gray-700',
+    primary: 'bg-primary-100 dark:bg-primary-200 ',
+    none: ''
+  };
+  const textColors = {
+    gray: 'text-gray-700 dark:text-gray-800',
+    red: 'text-red-700 dark:text-red-800',
+    yellow: 'text-yellow-700 dark:text-yellow-800',
+    green: 'text-green-700 dark:text-green-800',
+    indigo: 'text-indigo-700 dark:text-indigo-800',
+    purple: 'text-purple-700 dark:text-purple-800',
+    pink: 'text-pink-700 dark:text-pink-800',
+    blue: 'text-blue-700 dark:text-blue-800',
+    light: 'text-gray-700 dark:text-gray-300',
+    dark: 'text-gray-700 dark:text-gray-300',
+    default: 'text-gray-500 dark:text-gray-400',
+    dropdown: 'text-gray-700 dark:text-gray-200',
+    navbar: 'text-gray-700 dark:text-gray-200',
+    navbarUl: 'text-gray-700 dark:text-gray-400',
+    form: 'text-gray-900 dark:text-white',
+    primary: 'text-primary-700 dark:text-primary-800',
+    none: ''
+  };
+
+  const borderColors = {
+    gray: 'border-gray-500 dark:bg-gray-200 ',
+    red: 'border-red-500 dark:bg-red-200 ',
+    yellow: 'border-yellow-500 dark:bg-tellow-200 ',
+    green: 'border-green-500 dark:bg-green-200 ',
+    indigo: 'border-indigo-500 dark:bg-indigo-200 ',
+    purple: 'border-purple-500 dark:bg-purple-200 ',
+    pink: 'border-pink-500 dark:bg-pink-200 ',
+    blue: 'border-blue-500 dark:bg-blue-200 ',
+    light: 'border-gray-500',
+    dark: 'border-gray-500',
+    default: 'border-gray-200 dark:border-gray-700',
+    dropdown: 'border-gray-100 dark:border-gray-700',
+    navbar: 'border-gray-100 dark:border-gray-700',
+    navbarUl: 'border-gray-100 dark:border-gray-700',
+    form: 'border-gray-300 dark:border-gray-700',
+    primary: 'border-primary-500 dark:bg-primary-200 ',
+    none: ''
+  };
+
+  let divClass: string;
+
+  $: divClass = classNames(
+    bgColors[color],
+    textColors[color],
+    rounded && (color === 'dropdown' ? 'rounded' : 'rounded-lg'),
+    border && 'border',
+    borderColors[color],
+    shadow && 'shadow-md',
+    $$props.class
+  );
+</script>
+
+{#if transition}
+  <svelte:element
+    this={tag}
+    use:use={options}
+    bind:this={node}
+    transition:transition={params}
+    {...$$restProps}
+    class={divClass}
+    on:mouseenter
+    on:mouseleave
+    on:focusin
+    on:focusout>
+    <slot />
+  </svelte:element>
+{:else}
+  <svelte:element
+    this={tag}
+    use:use={options}
+    bind:this={node}
+    {...$$restProps}
+    class={divClass}
+    on:mouseenter
+    on:mouseleave
+    on:focusin
+    on:focusout>
+    <slot />
+  </svelte:element>
+{/if}

package/src/lib/utils/InformationCircle.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	export let size = '24';
+	export let color = 'currentColor';
+	export let variation: 'solid' | 'outline' = 'outline';
+	let viewBox: string;
+	let svgpath: string;
+	let svgoutline = `<path d="M11.25 11.25L11.2915 11.2293C11.8646 10.9427 12.5099 11.4603 12.3545 12.082L11.6455 14.918C11.4901 15.5397 12.1354 16.0573 12.7085 15.7707L12.75 15.75M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 8.25H12.0075V8.2575H12V8.25Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+	let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM10.9562 10.5584C12.1025 9.98533 13.3931 11.0206 13.0823 12.2639L12.3733 15.0999L12.4148 15.0792C12.7852 14.894 13.2357 15.0441 13.421 15.4146C13.6062 15.7851 13.4561 16.2356 13.0856 16.4208L13.0441 16.4416C11.8979 17.0147 10.6072 15.9794 10.9181 14.7361L11.6271 11.9001L11.5856 11.9208C11.2151 12.1061 10.7646 11.9559 10.5793 11.5854C10.3941 11.2149 10.5443 10.7644 10.9148 10.5792L10.9562 10.5584ZM12 9C12.4142 9 12.75 8.66421 12.75 8.25C12.75 7.83579 12.4142 7.5 12 7.5C11.5858 7.5 11.25 7.83579 11.25 8.25C11.25 8.66421 11.5858 9 12 9Z" fill="${color}"/> `;
+	$: switch (variation) {
+		case 'outline':
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+			break;
+		case 'solid':
+			svgpath = svgsolid;
+			viewBox = '0 0 24 24';
+			break;
+		default:
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+	}
+	export let ariaLabel = 'information circle';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click
+>
+	{@html svgpath}
+</svg>

package/src/lib/utils/Popper.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { createPopper, type Rect } from '@popperjs/core';
+  import classNames from 'classnames';
+  import type { Placement, Instance } from '@popperjs/core';
+  import createEventDispatcher from './createEventDispatcher';
+  import Frame from './Frame.svelte';
+
+  export let activeContent: boolean = false;
+  export let arrow: boolean = true;
+  export let offset: number = 8;
+  export let placement: Placement = 'top';
+  export let trigger: 'hover' | 'click' = 'hover';
+  export let triggeredBy: string | undefined = undefined;
+  export let strategy: 'absolute' | 'fixed' = 'absolute';
+  export let open: boolean = false;
+  export let yOnly: boolean = false;
+
+  const dispatch = createEventDispatcher();
+
+  let clickable: boolean;
+  $: clickable = trigger === 'click';
+
+  $: dispatch('show', triggerEl, open);
+
+  let triggerEl: Element;
+  let contentEl: HTMLElement;
+  let triggerEls: HTMLElement[] = [];
+  let popper: Instance;
+
+  let _blocked: boolean = false; // managment of the race condition between focusin and click events
+  const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 250));
+
+  const showHandler = (ev: Event) => {
+    if (triggerEl === undefined) console.error('trigger undefined');
+    if (triggerEls.includes(ev.target as HTMLElement) && triggerEl !== ev.target) {
+      triggerEl = ev.target as HTMLElement;
+      block();
+    }
+    if (clickable && ev.type === 'focusin' && !open) block();
+    open = clickable && ev.type === 'click' && !_blocked ? !open : true;
+  };
+
+  // reactivity
+  $: popper && popper.setOptions({ placement });
+
+  // typescript typeguards - poper.state.element.reference: Element|HTMLElement|VirtualElement
+  const hasHover = (el: object) => (el as Element).matches && (el as Element).matches(':hover');
+  const hasFocus = (el: object) =>
+    (el as Element).contains && (el as Element).contains(document.activeElement);
+
+  const hideHandler = (ev: Event) => {
+    if (activeContent) {
+      setTimeout(() => {
+        const elements = Object.values(popper?.state.elements ?? {});
+        if (ev.type === 'mouseleave' && elements.some(hasHover)) return;
+        if (ev.type === 'focusout' && elements.some(hasFocus)) return;
+        open = false;
+      }, 100);
+    } else open = false;
+  };
+
+  function init(node: HTMLElement, _triggerEl: HTMLElement) {
+    popper = createPopper(_triggerEl, node, {
+      placement,
+      strategy,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: ({ reference, popper }: { reference: Rect; popper: Rect }) => {
+              // for full screen mega menu
+              return [yOnly ? popper.width / 2 - reference.width / 2 - reference.x : 0, offset];
+            }
+          }
+        },
+        { name: 'eventListeners', enabled: open },
+        { name: 'flip', enabled: false }
+      ]
+    });
+    return {
+      update(_triggerEl: HTMLElement) {
+        popper.state.elements.reference = _triggerEl;
+        popper.update();
+      },
+      destroy() {
+        popper.destroy();
+      }
+    };
+  }
+
+  onMount(() => {
+    const events: [string, any, boolean][] = [
+      ['focusin', showHandler, true],
+      ['focusout', hideHandler, true],
+      ['click', showHandler, clickable],
+      ['mouseenter', showHandler, !clickable],
+      ['mouseleave', hideHandler, !clickable]
+    ];
+
+    if (triggeredBy) triggerEls = [...document.querySelectorAll<HTMLElement>(triggeredBy)];
+    else
+      triggerEls = contentEl.previousElementSibling ? [contentEl.previousElementSibling as HTMLElement] : [];
+
+    if (!triggerEls.length) {
+      console.error('No triggers found.');
+    }
+
+    triggerEls.forEach((element: HTMLElement) => {
+      if (element.tabIndex < 0) element.tabIndex = 0; // trigger must be focusable
+      for (const [name, handler, cond] of events) if (cond) element.addEventListener(name, handler);
+    });
+
+    triggerEl = triggerEls[0];
+
+    return () => {
+      triggerEls.forEach((element: HTMLElement) => {
+        if (element) {
+          for (const [name, handler] of events) element.removeEventListener(name, handler);
+        }
+      });
+    };
+  });
+  function optional(pred: boolean, func: (ev: Event) => void) {
+    return pred && func;
+  }
+</script>
+
+{#if !triggerEl}
+  <div bind:this={contentEl} />
+{/if}
+
+{#if open && triggerEl}
+  <Frame
+    use={init}
+    options={triggerEl}
+    role="tooltip"
+    tabIndex={activeContent ? -1 : undefined}
+    on:focusin={optional(activeContent, showHandler)}
+    on:focusout={optional(activeContent, hideHandler)}
+    on:mouseenter={optional(activeContent && !clickable, showHandler)}
+    on:mouseleave={optional(activeContent && !clickable, hideHandler)}
+    {...$$restProps}
+    class={classNames('z-10 outline-none', $$props.class)}>
+    <slot />
+    {#if arrow}<div data-popper-arrow class="tooltip-arrow border dark:border-gray-100" />{/if}
+  </Frame>
+{/if}

package/src/lib/utils/UserCircle.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	export let size = '24';
+	export let color = 'currentColor';
+	export let variation: 'solid' | 'outline' = 'outline';
+	let viewBox: string;
+	let svgpath: string;
+	let svgoutline = `<path d="M17.9815 18.7248C16.6121 16.9175 14.4424 15.75 12 15.75C9.55761 15.75 7.38789 16.9175 6.01846 18.7248M17.9815 18.7248C19.8335 17.0763 21 14.6744 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 14.6744 4.1665 17.0763 6.01846 18.7248M17.9815 18.7248C16.3915 20.1401 14.2962 21 12 21C9.70383 21 7.60851 20.1401 6.01846 18.7248M15 9.75C15 11.4069 13.6569 12.75 12 12.75C10.3431 12.75 9 11.4069 9 9.75C9 8.09315 10.3431 6.75 12 6.75C13.6569 6.75 15 8.09315 15 9.75Z" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> `;
+	let svgsolid = `<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6854 19.0971C20.5721 17.3191 21.75 14.7971 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 14.7971 3.42785 17.3191 5.31463 19.0971C7.06012 20.7419 9.41234 21.75 12 21.75C14.5877 21.75 16.9399 20.7419 18.6854 19.0971ZM6.14512 17.8123C7.51961 16.0978 9.63161 15 12 15C14.3684 15 16.4804 16.0978 17.8549 17.8123C16.3603 19.3178 14.289 20.25 12 20.25C9.711 20.25 7.63973 19.3178 6.14512 17.8123ZM15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25C14.0711 5.25 15.75 6.92893 15.75 9Z" fill="${color}"/> `;
+	$: switch (variation) {
+		case 'outline':
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+			break;
+		case 'solid':
+			svgpath = svgsolid;
+			viewBox = '0 0 24 24';
+			break;
+		default:
+			svgpath = svgoutline;
+			viewBox = '0 0 24 24';
+	}
+	export let ariaLabel = 'user circle';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	class={$$props.class}
+	{...$$restProps}
+	aria-label={ariaLabel}
+	fill="none"
+	{viewBox}
+	stroke-width="2"
+	on:click
+>
+	{@html svgpath}
+</svg>

package/src/lib/utils/Wrapper.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Action } from 'svelte/action';
+
+  export let tag: string = 'div';
+  export let show: boolean;
+  export let use: Action = () => {};
+</script>
+
+{#if show}
+  <svelte:element this={tag} use:use {...$$restProps}><slot /></svelte:element>
+{:else}
+  <slot />
+{/if}