odj-svelte-ui 0.1.0

package/dist/elements/typography/P.svelte.d.ts

@@ -0,0 +1,58 @@
+import type { PsizeType, PweightType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let color: string = 'text-neutral-900 dark:text-white';
+ * @prop export let height: 'normal' | 'relaxed' | 'loose' = 'normal';
+ * @prop export let align: 'left' | 'center' | 'right' = 'left';
+ * @prop export let justify: boolean = false;
+ * @prop export let italic: boolean = false;
+ * @prop export let firstupper: boolean = false;
+ * @prop export let upperClass: string = 'first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-neutral-900 dark:first-letter:text-neutral-100 first-letter:mr-3 first-letter:float-left';
+ * @prop export let opacity: number | undefined = undefined;
+ * @prop export let whitespace: 'normal' | 'nowrap' | 'pre' | 'preline' | 'prewrap' = 'normal';
+ * @prop export let size: PsizeType = 'base';
+ * @prop export let space: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | undefined = undefined;
+ * @prop export let weight: PweightType = 'normal';
+ */
+declare const P: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    color?: string | undefined;
+    height?: "normal" | "relaxed" | "loose" | undefined;
+    align?: "left" | "center" | "right" | undefined;
+    justify?: boolean | undefined;
+    italic?: boolean | undefined;
+    firstupper?: boolean | undefined;
+    upperClass?: string | undefined;
+    opacity?: number | undefined | undefined;
+    whitespace?: "normal" | "nowrap" | "pre" | "preline" | "prewrap" | undefined;
+    size?: PsizeType | undefined;
+    space?: "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" | undefined | undefined;
+    weight?: PweightType | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type P = InstanceType<typeof P>;
+export default P;

package/dist/elements/typography/Secondary.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let color: string = 'text-neutral-500 dark:text-neutral-400';
+  export let secondaryClass: string = 'font-semibold';
+</script>
+
+<small {...$$restProps} class={twMerge(color, secondaryClass, $$props.class)}>
+  <slot />
+</small>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: string = 'text-neutral-500 dark:text-neutral-400';
+@prop export let secondaryClass: string = 'font-semibold';
+-->

package/dist/elements/typography/Secondary.svelte.d.ts

@@ -0,0 +1,37 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let color: string = 'text-neutral-500 dark:text-neutral-400';
+ * @prop export let secondaryClass: string = 'font-semibold';
+ */
+declare const Secondary: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    color?: string | undefined;
+    secondaryClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Secondary = InstanceType<typeof Secondary>;
+export default Secondary;

package/dist/elements/typography/Span.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let italic: boolean = false;
+  export let underline: boolean = false;
+  export let linethrough: boolean = false;
+  export let uppercase: boolean = false;
+  export let gradient: boolean = false;
+  export let highlight: boolean = false;
+  export let highlightClass: string = 'text-blue-600 dark:text-blue-500';
+  export let decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
+  export let gradientClass: string = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+
+  let underlineClass = twMerge('underline', decorationClass);
+  let classSpan: string = twMerge(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-neutral-900 dark:text-white', highlight && highlightClass, $$props.class);
+</script>
+
+<span {...$$restProps} class={classSpan}>
+  <slot />
+</span>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let italic: boolean = false;
+@prop export let underline: boolean = false;
+@prop export let linethrough: boolean = false;
+@prop export let uppercase: boolean = false;
+@prop export let gradient: boolean = false;
+@prop export let highlight: boolean = false;
+@prop export let highlightClass: string = 'text-blue-600 dark:text-blue-500';
+@prop export let decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
+@prop export let gradientClass: string = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+-->

package/dist/elements/typography/Span.svelte.d.ts

@@ -0,0 +1,51 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let italic: boolean = false;
+ * @prop export let underline: boolean = false;
+ * @prop export let linethrough: boolean = false;
+ * @prop export let uppercase: boolean = false;
+ * @prop export let gradient: boolean = false;
+ * @prop export let highlight: boolean = false;
+ * @prop export let highlightClass: string = 'text-blue-600 dark:text-blue-500';
+ * @prop export let decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
+ * @prop export let gradientClass: string = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+ */
+declare const Span: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    italic?: boolean | undefined;
+    underline?: boolean | undefined;
+    linethrough?: boolean | undefined;
+    uppercase?: boolean | undefined;
+    gradient?: boolean | undefined;
+    highlight?: boolean | undefined;
+    highlightClass?: string | undefined;
+    decorationClass?: string | undefined;
+    gradientClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Span = InstanceType<typeof Span>;
+export default Span;

package/dist/elements/utils/CloseButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import ToolbarButton from '../toolbar/ToolbarButton.svelte';
+
+  export let name: string = 'Close';
+</script>
+
+<ToolbarButton on:click {name} {...$$restProps} class={twMerge('ml-auto', $$props.class)} let:svgSize>
+  <svg class={svgSize} 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>
+</ToolbarButton>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let name: string = 'Close';
+-->

package/dist/elements/utils/CloseButton.svelte.d.ts

@@ -0,0 +1,28 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let name: string = 'Close';
+ */
+declare const CloseButton: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    name?: string | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CloseButton = InstanceType<typeof CloseButton>;
+export default CloseButton;

package/dist/elements/utils/Frame.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { setContext } from 'svelte';
+
+  import type { Action } from 'svelte/action';
+  import type { TransitionConfig } from 'svelte/transition';
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+  const null_transition = () => ({ duration: 0 });
+  const noop = () => {};
+
+  type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
+  type FrameColor = keyof typeof bgColors;
+
+  interface $$Props extends HTMLAnchorAttributes {
+    tag?: string;
+    color?: FrameColor;
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: TransitionFunc;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+  }
+
+  setContext('background', true);
+
+  export let tag: string = $$restProps.href ? 'a' : 'div';
+  export let color: FrameColor = 'default';
+  export let rounded: boolean = false;
+  export let border: boolean = false;
+  export let shadow: boolean = false;
+
+  // Export a prop through which you can set a desired svelte transition
+  export let transition: TransitionFunc = null_transition;
+  // Pass in extra transition params
+  export let params: object = {};
+
+  // For components development
+  export let node: HTMLElement | undefined = undefined;
+  // Action function and its params
+  export let use: Action<HTMLElement, any> = noop;
+  export let options = {};
+
+  export let role: string | undefined = undefined;
+
+  $: color = color ?? 'default'; // for cases when undefined
+  $: setContext('color', color);
+
+  // your script goes here
+  const bgColors = {
+    neutral: 'bg-neutral-50 dark:bg-neutral-700',
+    red: 'bg-red-50 dark:bg-red-800/10',
+    yellow: 'bg-yellow-50 dark:bg-yellow-800/10',
+    green: 'bg-green-50 dark:bg-green-800/10',
+    indigo: 'bg-indigo-50 dark:bg-indigo-800/10 ',
+    purple: 'bg-purple-50 dark:bg-purple-800/10 ',
+    pink: 'bg-pink-50 dark:bg-pink-800/10',
+    blue: 'bg-blue-50 dark:bg-blue-800/10',
+    light: 'bg-neutral-50 dark:bg-neutral-700',
+    dark: 'bg-neutral-50 dark:bg-neutral-700',
+    default: 'bg-white dark:bg-neutral-800',
+    dropdown: 'bg-white dark:bg-neutral-700',
+    navbar: 'bg-white dark:bg-neutral-900',
+    navbarUl: 'bg-neutral-50 dark:bg-neutral-800',
+    form: 'bg-neutral-50 dark:bg-neutral-700',
+    primary: 'bg-primary-50 dark:bg-neutral-800 ',
+    orange: 'bg-orange-50 dark:bg-orange-800',
+    none: ''
+  };
+
+  const textColors = {
+    neutral: 'text-neutral-800 dark:text-neutral-300',
+    red: 'text-red-800 dark:text-red-400',
+    yellow: 'text-yellow-800 dark:text-yellow-300',
+    green: 'text-green-800 dark:text-green-400',
+    indigo: 'text-indigo-800 dark:text-indigo-400',
+    purple: 'text-purple-800 dark:text-purple-400',
+    pink: 'text-pink-800 dark:text-pink-400',
+    blue: 'text-blue-800 dark:text-blue-400',
+    light: 'text-neutral-700 dark:text-neutral-300',
+    dark: 'text-neutral-700 dark:text-neutral-300',
+    default: 'text-neutral-500 dark:text-neutral-400',
+    dropdown: 'text-neutral-700 dark:text-neutral-200',
+    navbar: 'text-neutral-700 dark:text-neutral-200',
+    navbarUl: 'text-neutral-700 dark:text-neutral-400',
+    form: 'text-neutral-900 dark:text-white',
+    primary: 'text-primary-800 dark:text-primary-400',
+    orange: 'text-orange-800 dark:text-orange-400',
+    none: ''
+  };
+
+  const borderColors = {
+    neutral: 'border-neutral-300 dark:border-neutral-800 divide-neutral-300 dark:divide-neutral-800',
+    red: 'border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800',
+    yellow: 'border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800',
+    green: 'border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800',
+    indigo: 'border-indigo-300 dark:border-indigo-800 divide-indigo-300 dark:divide-indigo-800',
+    purple: 'border-purple-300 dark:border-purple-800 divide-purple-300 dark:divide-purple-800',
+    pink: 'border-pink-300 dark:border-pink-800 divide-pink-300 dark:divide-pink-800',
+    blue: 'border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800',
+    light: 'border-neutral-500 divide-neutral-500',
+    dark: 'border-neutral-500 divide-neutral-500',
+    default: 'border-neutral-200 dark:border-neutral-700 divide-neutral-200 dark:divide-neutral-700',
+    dropdown: 'border-neutral-100 dark:border-neutral-600 divide-neutral-100 dark:divide-neutral-600',
+    navbar: 'border-neutral-100 dark:border-neutral-700 divide-neutral-100 dark:divide-neutral-700',
+    navbarUl: 'border-neutral-100 dark:border-neutral-700 divide-neutral-100 dark:divide-neutral-700',
+    form: 'border-neutral-300 dark:border-neutral-700 divide-neutral-300 dark:divide-neutral-700',
+    primary: 'border-primary-500 dark:border-primary-200  divide-primary-500 dark:divide-primary-200 ',
+    orange: 'border-orange-300 dark:border-orange-800 divide-orange-300 dark:divide-orange-800',
+    none: ''
+  };
+
+  let divClass: string;
+
+  $: divClass = twMerge(bgColors[color], textColors[color], rounded && 'rounded-lg', border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
+</script>
+
+<svelte:element this={tag} use:use={options} bind:this={node} transition:transition={params} {...$$restProps} class={divClass} on:click on:mouseenter on:mouseleave on:focusin on:focusout {role}>
+  <slot />
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let tag: string = $$restProps.href ? 'a' : 'div';
+@prop export let color: FrameColor = 'default';
+@prop export let rounded: boolean = false;
+@prop export let border: boolean = false;
+@prop export let shadow: boolean = false;
+@prop export let transition: TransitionFunc = null_transition;
+@prop export let params: object = {};
+@prop export let node: HTMLElement | undefined = undefined;
+@prop export let use: Action<HTMLElement, any> = noop;
+@prop export let options = {};
+@prop export let role: string | undefined = undefined;
+-->

package/dist/elements/utils/Frame.svelte.d.ts

@@ -0,0 +1,64 @@
+import type { Action } from 'svelte/action';
+import type { TransitionConfig } from 'svelte/transition';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let tag: string = $$restProps.href ? 'a' : 'div';
+ * @prop export let color: FrameColor = 'default';
+ * @prop export let rounded: boolean = false;
+ * @prop export let border: boolean = false;
+ * @prop export let shadow: boolean = false;
+ * @prop export let transition: TransitionFunc = null_transition;
+ * @prop export let params: object = {};
+ * @prop export let node: HTMLElement | undefined = undefined;
+ * @prop export let use: Action<HTMLElement, any> = noop;
+ * @prop export let options = {};
+ * @prop export let role: string | undefined = undefined;
+ */
+declare const Frame: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAnchorAttributes & {
+    tag?: string;
+    color?: "primary" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "dark" | "default" | "none" | "form" | "light" | "neutral" | "dropdown" | "navbar" | "navbarUl";
+    rounded?: boolean;
+    border?: boolean;
+    shadow?: boolean;
+    transition?: (node: HTMLElement, params: any) => TransitionConfig;
+    params?: object;
+    node?: HTMLElement | undefined;
+    use?: Action<HTMLElement, any>;
+    options?: object;
+    class?: string;
+    role?: string;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    focusin: FocusEvent;
+    focusout: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Frame = InstanceType<typeof Frame>;
+export default Frame;

package/dist/elements/utils/Popper.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import type { ComputePositionReturn, Middleware, Placement, Side } from '@floating-ui/dom';
+  import * as dom from '@floating-ui/dom';
+  import { onMount, type ComponentProps } from 'svelte';
+  import { twJoin } from 'tailwind-merge';
+  import Frame from './Frame.svelte';
+  import createEventDispatcher from './createEventDispatcher';
+
+  // propagate props type from underlying Frame
+  interface $$Props extends ComponentProps<Frame> {
+    activeContent?: boolean;
+    arrow?: boolean;
+    offset?: number;
+    placement?: Placement;
+    trigger?: 'hover' | 'click';
+    triggeredBy?: string;
+    reference?: string;
+    strategy?: 'absolute' | 'fixed';
+    open?: boolean;
+    yOnly?: boolean;
+  }
+
+  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 reference: 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', referenceEl, open);
+  $: placement && (referenceEl = referenceEl);
+
+  let referenceEl: Element;
+  let floatingEl: HTMLElement;
+  let arrowEl: HTMLElement | null;
+  let contentEl: HTMLElement;
+  let triggerEls: HTMLElement[] = [];
+
+  let _blocked: boolean = false; // management of the race condition between focusin and click events
+  const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 250));
+
+  const showHandler = (ev: Event) => {
+    if (referenceEl === undefined) console.error('trigger undefined');
+    if (!reference && triggerEls.includes(ev.target as HTMLElement) && referenceEl !== ev.target) {
+      referenceEl = ev.target as HTMLElement;
+      block();
+    }
+    if (clickable && ev.type === 'focusin' && !open) block();
+    open = clickable && ev.type === 'click' && !_blocked ? !open : true;
+  };
+
+  const hasHover = (el: Element) => el.matches(':hover');
+  const hasFocus = (el: Element) => el.contains(document.activeElement);
+  const px = (n: number | undefined) => (n != null ? `${n}px` : '');
+
+  const hideHandler = (ev: Event) => {
+    if (activeContent) {
+      // setTimeout(() => {
+        const elements = [referenceEl, floatingEl, ...triggerEls].filter(Boolean);
+        if (ev.type === 'mouseleave' && elements.some(hasHover)) return;
+        if (ev.type === 'focusout' && elements.some(hasFocus)) return;
+        if (ev.type === 'focusout' && ev.relatedTarget?.classList?.contains(`popper_${triggeredBy}`)) return;
+        open = false;
+      // }, 100);
+    } else open = false;
+  };
+
+  let arrowSide: Side;
+  const oppositeSideMap: Record<Side, Side> = {
+    left: 'right',
+    right: 'left',
+    bottom: 'top',
+    top: 'bottom'
+  };
+
+  let middleware: (Middleware | null)[];
+  $: middleware = [dom.flip(), dom.shift(), dom.offset(+offset), arrowEl && dom.arrow({ element: arrowEl, padding: 10 })];
+
+  function updatePosition() {
+    dom.computePosition(referenceEl, floatingEl, { placement, strategy, middleware }).then(({ x, y, middlewareData, placement, strategy }: ComputePositionReturn) => {
+      floatingEl.style.position = strategy;
+      floatingEl.style.left = yOnly ? '0' : px(x);
+      floatingEl.style.top = px(y);
+
+      if (middlewareData.arrow && arrowEl instanceof HTMLDivElement) {
+        arrowEl.style.left = px(middlewareData.arrow.x);
+        arrowEl.style.top = px(middlewareData.arrow.y);
+
+        arrowSide = oppositeSideMap[placement.split('-')[0] as Side];
+        arrowEl.style[arrowSide] = px(-arrowEl.offsetWidth / 2 - ($$props.border ? 1 : 0));
+      }
+    });
+  }
+
+  function init(node: HTMLElement, _referenceEl: HTMLElement) {
+    floatingEl = node;
+    let cleanup = dom.autoUpdate(_referenceEl, floatingEl, updatePosition);
+
+    return {
+      update(_referenceEl: HTMLElement) {
+        cleanup();
+        cleanup = dom.autoUpdate(_referenceEl, floatingEl, updatePosition);
+      },
+      destroy() {
+        cleanup();
+      }
+    };
+  }
+
+  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);
+    });
+
+    if (reference) {
+      referenceEl = document.querySelector(reference) ?? document.body;
+      if (referenceEl === document.body) {
+        console.error(`Popup reference not found: '${reference}'`);
+      } else {
+        referenceEl.addEventListener('focusout', hideHandler);
+        if (!clickable) referenceEl.addEventListener('mouseleave', hideHandler);
+      }
+    } else {
+      referenceEl = triggerEls[0];
+    }
+
+    return () => {
+      // This is onDestroy function
+      triggerEls.forEach((element: HTMLElement) => {
+        if (element) {
+          for (const [name, handler] of events) element.removeEventListener(name, handler);
+        }
+      });
+      if (referenceEl) {
+        referenceEl.removeEventListener('focusout', hideHandler);
+        referenceEl.removeEventListener('mouseleave', hideHandler);
+      }
+    };
+  });
+
+  function optional(pred: boolean, func: (ev: Event) => void) {
+    return pred ? func : () => undefined;
+  }
+
+  let arrowClass: string;
+  $: arrowClass = twJoin('absolute pointer-events-none block w-[10px] h-[10px] rotate-45 bg-inherit border-inherit', $$props.border && arrowSide === 'bottom' && 'border-b border-r', $$props.border && arrowSide === 'top' && 'border-t border-l ', $$props.border && arrowSide === 'right' && 'border-t border-r ', $$props.border && arrowSide === 'left' && 'border-b border-l ');
+
+  function initArrow(node: HTMLElement) {
+    arrowEl = node;
+    return {
+      destroy() {
+        arrowEl = null;
+      }
+    };
+  }
+</script>
+
+{#if !referenceEl}
+  <div bind:this={contentEl} />
+{/if}
+
+{#if open && referenceEl}
+  <Frame use={init} options={referenceEl} 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}>
+    <slot />
+    {#if arrow}<div use:initArrow class={arrowClass} />{/if}
+  </Frame>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let activeContent: boolean = false;
+@prop export let arrow: boolean = true;
+@prop export let offset: number = 8;
+@prop export let placement: Placement = 'top';
+@prop export let trigger: 'hover' | 'click' = 'hover';
+@prop export let triggeredBy: string | undefined = undefined;
+@prop export let reference: string | undefined = undefined;
+@prop export let strategy: 'absolute' | 'fixed' = 'absolute';
+@prop export let open: boolean = false;
+@prop export let yOnly: boolean = false;
+-->