windmill-components 1.448.50 → 1.472.2

package/package/components/meltComponents/MenuSingleItem.svelte

@@ -0,0 +1,12 @@
+<script>import { melt } from '@melt-ui/svelte';
+export let createMenu;
+const menu = createMenu();
+const { elements: { trigger, item, menu: menuElement } } = menu;
+</script>
+
+<div class="hover:z-50 flex w-full h-8">
+	<slot name="trigger" {trigger} />
+	<div {...$menuElement} use:$menuElement.action>
+		<slot {item} />
+	</div>
+</div>

package/package/components/meltComponents/MenuSingleItem.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+import { type MenubarBuilders } from '@melt-ui/svelte';
+declare const __propDef: {
+    props: {
+        createMenu: MenubarBuilders['createMenu'];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trigger: {
+            trigger: import("@melt-ui/svelte/internal/helpers").MeltElement<[import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "keydown" | "pointerenter">, ([$rootOpen, $menuId, $triggerId]: [boolean, string, string]) => {
+                readonly 'aria-controls': string;
+                readonly 'aria-expanded': boolean;
+                readonly 'data-state': "open" | "closed";
+                readonly id: string;
+                readonly 'aria-haspopup': "menu";
+                readonly 'data-orientation': "horizontal";
+                readonly role: "menuitem";
+            }, string>;
+        };
+        default: {
+            item: import("@melt-ui/svelte/internal/helpers").MeltElement<import("svelte/store").Stores | undefined, (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "focusin" | "focusout" | "keydown" | "pointerdown" | "pointerleave" | "pointermove">, () => {
+                readonly role: "menuitem";
+                readonly tabindex: -1;
+                readonly 'data-orientation': "vertical";
+            }, string>;
+        };
+    };
+};
+export type MenuSingleItemProps = typeof __propDef.props;
+export type MenuSingleItemEvents = typeof __propDef.events;
+export type MenuSingleItemSlots = typeof __propDef.slots;
+export default class MenuSingleItem extends SvelteComponent<MenuSingleItemProps, MenuSingleItemEvents, MenuSingleItemSlots> {
+}
+export {};

package/package/components/meltComponents/Menubar.svelte

@@ -0,0 +1,7 @@
+<script>import { createMenubar, melt } from '@melt-ui/svelte';
+const { elements: { menubar }, builders: { createMenu } } = createMenubar();
+</script>
+
+<div {...$menubar} use:$menubar.action class={$$props.class}>
+	<slot {createMenu} />
+</div>

package/package/components/meltComponents/Menubar.svelte.d.ts

@@ -0,0 +1,255 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            createMenu: (props?: import("@melt-ui/svelte").CreateMenubarMenuProps | undefined) => {
+                ids: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
+                    menu: string;
+                    trigger: string;
+                }>;
+                elements: {
+                    menu: import("@melt-ui/svelte/internal/helpers").MeltElement<[import("svelte/store").Readable<boolean>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<HTMLElement | null>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string | HTMLElement | null>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">, ([$isVisible, $rootOpen, $rootActiveTrigger, $portal, $menuId, $triggerId, $menubarId,]: [boolean, boolean, HTMLElement | null, string | HTMLElement | null, string, string, string]) => {
+                        readonly role: "menu";
+                        readonly hidden: true | undefined;
+                        readonly style: string | undefined;
+                        readonly id: string;
+                        readonly 'aria-labelledby': string;
+                        readonly 'data-state': "open" | "closed";
+                        readonly 'data-melt-scope': string;
+                        readonly 'data-portal': "" | undefined;
+                        readonly tabindex: -1;
+                    }, string>;
+                    trigger: import("@melt-ui/svelte/internal/helpers").MeltElement<[import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "keydown" | "pointerenter">, ([$rootOpen, $menuId, $triggerId]: [boolean, string, string]) => {
+                        readonly 'aria-controls': string;
+                        readonly 'aria-expanded': boolean;
+                        readonly 'data-state': "open" | "closed";
+                        readonly id: string;
+                        readonly 'aria-haspopup': "menu";
+                        readonly 'data-orientation': "horizontal";
+                        readonly role: "menuitem";
+                    }, string>;
+                    overlay: import("@melt-ui/svelte/internal/helpers").MeltElement<[import("svelte/store").Readable<boolean>], <Node_1 extends unknown>(node: HTMLElement) => {
+                        destroy(): void;
+                    }, ([$isVisible]: [boolean]) => {
+                        readonly hidden: true | undefined;
+                        readonly tabindex: -1;
+                        readonly style: string;
+                        readonly 'aria-hidden': "true";
+                        readonly 'data-state': "open" | "closed";
+                    }, string>;
+                    item: import("@melt-ui/svelte/internal/helpers").MeltElement<import("svelte/store").Stores | undefined, (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "focusin" | "focusout" | "keydown" | "pointerdown" | "pointerleave" | "pointermove">, () => {
+                        readonly role: "menuitem";
+                        readonly tabindex: -1;
+                        readonly 'data-orientation': "vertical";
+                    }, string>;
+                    group: import("@melt-ui/svelte/internal/helpers").MeltElement<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => (groupId: string) => {
+                        readonly role: "group";
+                        readonly 'aria-labelledby': string;
+                    }, string>;
+                    groupLabel: import("@melt-ui/svelte/internal/helpers").MeltElement<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => (groupId: string) => {
+                        readonly id: string;
+                    }, string>;
+                    arrow: import("@melt-ui/svelte/internal/helpers").MeltElement<import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<number | undefined>>, import("svelte/action").Action<any, any, Record<never, any>>, ($arrowSize: number | undefined) => {
+                        readonly 'data-arrow': true;
+                        readonly style: string;
+                    }, string>;
+                    separator: import("@melt-ui/svelte/internal/helpers").MeltElement<[import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").Orientation>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>], import("svelte/action").Action<any, any, Record<never, any>>, ([$orientation, $decorative]: [import("@melt-ui/svelte/internal/types").Orientation, boolean]) => {
+                        readonly role: "none" | "separator";
+                        readonly 'aria-orientation': "vertical" | undefined;
+                        readonly 'aria-hidden': boolean;
+                        readonly 'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
+                    }, "separator">;
+                };
+                builders: {
+                    createCheckboxItem: (props?: import("@melt-ui/svelte/dist/builders/menu")._CheckboxItemProps | undefined) => {
+                        elements: {
+                            checkboxItem: import("@melt-ui/svelte/internal/helpers").MeltElement<[{
+                                update: (updater: import("svelte/store").Updater<boolean | "indeterminate">, sideEffect?: ((newValue: boolean | "indeterminate") => void) | undefined) => void;
+                                set: (this: void, value: boolean | "indeterminate") => void;
+                                subscribe(this: void, run: import("svelte/store").Subscriber<boolean | "indeterminate">, invalidate?: import("svelte/store").Invalidator<boolean | "indeterminate"> | undefined): import("svelte/store").Unsubscriber;
+                                get: () => boolean | "indeterminate";
+                                destroy?: (() => void) | undefined;
+                            }, import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "focusin" | "focusout" | "keydown" | "pointerdown" | "pointerleave" | "pointermove">, ([$checked, $disabled]: [boolean | "indeterminate", boolean]) => {
+                                readonly role: "menuitemcheckbox";
+                                readonly tabindex: -1;
+                                readonly 'data-orientation': "vertical";
+                                readonly 'aria-checked': "true" | "false" | "mixed";
+                                readonly 'data-disabled': true | undefined;
+                                readonly 'data-state': "checked" | "indeterminate" | "unchecked";
+                            }, string>;
+                        };
+                        states: {
+                            checked: {
+                                update: (updater: import("svelte/store").Updater<boolean | "indeterminate">, sideEffect?: ((newValue: boolean | "indeterminate") => void) | undefined) => void;
+                                set: (this: void, value: boolean | "indeterminate") => void;
+                                subscribe(this: void, run: import("svelte/store").Subscriber<boolean | "indeterminate">, invalidate?: import("svelte/store").Invalidator<boolean | "indeterminate"> | undefined): import("svelte/store").Unsubscriber;
+                                get: () => boolean | "indeterminate";
+                                destroy?: (() => void) | undefined;
+                            };
+                        };
+                        helpers: {
+                            isChecked: import("svelte/store").Readable<boolean>;
+                            isIndeterminate: import("svelte/store").Readable<boolean>;
+                        };
+                        options: {
+                            disabled: import("svelte/store").Writable<boolean>;
+                        };
+                    };
+                    createSubmenu: (args?: import("@melt-ui/svelte/dist/builders/menu")._CreateSubmenuProps | undefined) => {
+                        ids: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
+                            menu: string;
+                            trigger: string;
+                        }>;
+                        elements: {
+                            subTrigger: import("@melt-ui/svelte/internal/helpers").MeltElement<[{
+                                update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void;
+                                set: (this: void, value: boolean) => void;
+                                subscribe(this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined): import("svelte/store").Unsubscriber;
+                                get: () => boolean;
+                                destroy?: (() => void) | undefined;
+                            }, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "focusin" | "focusout" | "keydown" | "pointerleave" | "pointermove">, ([$subOpen, $disabled, $subMenuId, $subTriggerId]: [boolean, boolean, string, string]) => {
+                                readonly role: "menuitem";
+                                readonly id: string;
+                                readonly tabindex: -1;
+                                readonly 'aria-controls': string;
+                                readonly 'aria-expanded': boolean;
+                                readonly 'data-state': "open" | "closed";
+                                readonly 'data-disabled': true | undefined;
+                                readonly 'aria-haspopop': "menu";
+                            }, string>;
+                            subMenu: import("@melt-ui/svelte/internal/helpers").MeltElement<[import("svelte/store").Readable<boolean>, {
+                                update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void;
+                                set: (this: void, value: boolean) => void;
+                                subscribe(this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined): import("svelte/store").Unsubscriber;
+                                get: () => boolean;
+                                destroy?: (() => void) | undefined;
+                            }, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<HTMLElement | null>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>, import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"focusout" | "keydown" | "pointermove">, ([$subIsVisible, $subOpen, $subActiveTrigger, $subMenuId, $subTriggerId]: [boolean, boolean, HTMLElement | null, string, string]) => {
+                                readonly role: "menu";
+                                readonly hidden: true | undefined;
+                                readonly style: string | undefined;
+                                readonly id: string;
+                                readonly 'aria-labelledby': string;
+                                readonly 'data-state': "open" | "closed";
+                                readonly 'data-id': string;
+                                readonly tabindex: -1;
+                            }, string>;
+                            subArrow: import("@melt-ui/svelte/internal/helpers").MeltElement<import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<number>>, import("svelte/action").Action<any, any, Record<never, any>>, ($arrowSize: number) => {
+                                readonly 'data-arrow': true;
+                                readonly style: string;
+                            }, string>;
+                        };
+                        states: {
+                            subOpen: {
+                                update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void;
+                                set: (this: void, value: boolean) => void;
+                                subscribe(this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined): import("svelte/store").Unsubscriber;
+                                get: () => boolean;
+                                destroy?: (() => void) | undefined;
+                            };
+                        };
+                        options: import("@melt-ui/svelte/internal/helpers").ToWritableStores<Omit<{
+                            open?: import("svelte/store").Writable<boolean> | undefined;
+                            ids?: Partial<{
+                                menu: string;
+                                trigger: string;
+                            }> | undefined;
+                            onOpenChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined;
+                            positioning: import("@melt-ui/svelte/internal/actions").FloatingConfig | {
+                                placement: "right-start";
+                                gutter: number;
+                            };
+                            arrowSize: number;
+                            disabled: boolean;
+                            preventScroll: true;
+                            escapeBehavior: "close";
+                            closeOnOutsideClick: true;
+                            portal: string;
+                            loop: false;
+                            dir: "ltr";
+                            defaultOpen: false;
+                            typeahead: true;
+                            closeOnItemClick: true;
+                            onOutsideClick: undefined;
+                            preventTextSelectionOverflow: true;
+                        }, "ids">>;
+                    };
+                    createMenuRadioGroup: (args?: import("@melt-ui/svelte/dist/builders/menu")._CreateRadioGroupProps | undefined) => {
+                        elements: {
+                            radioGroup: import("@melt-ui/svelte/internal/helpers").MeltElement<import("svelte/store").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => {
+                                readonly role: "group";
+                            }, string>;
+                            radioItem: import("@melt-ui/svelte/internal/helpers").MeltElement<[{
+                                update: (updater: import("svelte/store").Updater<string | null>, sideEffect?: ((newValue: string | null) => void) | undefined) => void;
+                                set: (this: void, value: string | null) => void;
+                                subscribe(this: void, run: import("svelte/store").Subscriber<string | null>, invalidate?: import("svelte/store").Invalidator<string | null> | undefined): import("svelte/store").Unsubscriber;
+                                get: () => string | null;
+                                destroy?: (() => void) | undefined;
+                            }], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "focusin" | "focusout" | "keydown" | "pointerdown" | "pointerleave" | "pointermove">, ([$value]: [string | null]) => (itemProps: import("@melt-ui/svelte/dist/builders/menu")._RadioItemProps) => {
+                                readonly disabled: boolean;
+                                readonly role: "menuitemradio";
+                                readonly 'data-state': "checked" | "unchecked";
+                                readonly 'aria-checked': boolean;
+                                readonly 'data-disabled': true | undefined;
+                                readonly 'data-value': string;
+                                readonly 'data-orientation': "vertical";
+                                readonly tabindex: -1;
+                            }, string>;
+                        };
+                        states: {
+                            value: {
+                                update: (updater: import("svelte/store").Updater<string | null>, sideEffect?: ((newValue: string | null) => void) | undefined) => void;
+                                set: (this: void, value: string | null) => void;
+                                subscribe(this: void, run: import("svelte/store").Subscriber<string | null>, invalidate?: import("svelte/store").Invalidator<string | null> | undefined): import("svelte/store").Unsubscriber;
+                                get: () => string | null;
+                                destroy?: (() => void) | undefined;
+                            };
+                        };
+                        helpers: {
+                            isChecked: import("svelte/store").Readable<(itemValue: string) => boolean>;
+                        };
+                    };
+                };
+                states: {
+                    open: import("@melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>;
+                };
+                options: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
+                    dir: import("@melt-ui/svelte/internal/types").TextDirection;
+                    open?: import("svelte/store").Writable<boolean> | undefined;
+                    forceVisible: boolean;
+                    portal: string | HTMLElement | null;
+                    ids?: Partial<{
+                        menu: string;
+                        trigger: string;
+                    }> | undefined;
+                    defaultOpen: boolean;
+                    onOpenChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined;
+                    positioning: import("@melt-ui/svelte/internal/actions").FloatingConfig | {
+                        placement: "bottom-start";
+                    };
+                    arrowSize: number;
+                    loop: boolean;
+                    closeOnOutsideClick: boolean;
+                    escapeBehavior: import("@melt-ui/svelte/internal/actions").EscapeBehaviorType;
+                    onOutsideClick: ((event: import("@melt-ui/svelte").InteractOutsideEvent) => void) | undefined;
+                    preventTextSelectionOverflow: boolean;
+                    typeahead: boolean;
+                    closeOnItemClick: boolean;
+                    closeFocus: import("@melt-ui/svelte").FocusProp | undefined;
+                    disableFocusFirstItem: boolean;
+                }>;
+            };
+        };
+    };
+};
+export type MenubarProps = typeof __propDef.props;
+export type MenubarEvents = typeof __propDef.events;
+export type MenubarSlots = typeof __propDef.slots;
+export default class Menubar extends SvelteComponent<MenubarProps, MenubarEvents, MenubarSlots> {
+}
+export {};

package/package/components/meltComponents/Popover.svelte

@@ -1,32 +1,99 @@
+<script context="module">import { writable } from 'svelte/store';
+const activePopover = writable({
+    id: null,
+    close: null
+});
+</script>
+
 <script>import { createPopover, createSync, melt } from '@melt-ui/svelte';
 import { fade } from 'svelte/transition';
 import { X } from 'lucide-svelte';
-export let open = false;
-export let closeButton = true;
+import { pointerDownOutside } from '../../utils';
+import { twMerge } from 'tailwind-merge';
+export let closeButton = false;
 export let displayArrow = false;
 export let placement = 'bottom';
-const { elements: { trigger, content, arrow, close }, states } = createPopover({
+export let disablePopup = false;
+export let openOnHover = false;
+export let floatingConfig = undefined;
+export let usePointerDownOutside = false;
+export let closeOnOutsideClick = true;
+export let contentClasses = '';
+export let portal = 'body';
+export let closeOnOtherPopoverOpen = false;
+const { elements: { trigger, content, arrow, close: closeElement }, states, options: { closeOnOutsideClick: closeOnOutsideClickOption }, ids: { content: popoverId } } = createPopover({
     forceVisible: true,
-    positioning: {
+    positioning: floatingConfig ?? {
         placement
+    },
+    portal,
+    onOpenChange: ({ next }) => {
+        if (closeOnOtherPopoverOpen) {
+            if (next) {
+                // Close previous popover if exists
+                if ($activePopover.close && $activePopover.id !== $popoverId) {
+                    $activePopover.close();
+                }
+                // Set this popover as active
+                activePopover.set({ id: $popoverId, close });
+            }
+            else if ($activePopover.id === $popoverId) {
+                activePopover.set({ id: null, close: null });
+            }
+        }
+        return next;
     }
 });
+export let isOpen = false;
 const sync = createSync(states);
-$: sync.open(open, (v) => (open = v));
+$: sync.open(isOpen, (v) => (isOpen = v));
+// Allow for dynamic closeOnOutsideClick
+$: $closeOnOutsideClickOption = closeOnOutsideClick;
+export function close() {
+    isOpen = false;
+}
+export function open() {
+    isOpen = true;
+}
+async function getMenuElements() {
+    return Array.from(document.querySelectorAll('[data-popover]'));
+}
 </script>
 
-<button class="w-full h-full" type="button" {...$trigger} use:$trigger.action aria-label="Popup button">
-	<slot name="trigger" />
+<button
+	class={$$props.class}
+	{...$trigger} use:$trigger.action
+	aria-label="Popup button"
+	on:mouseenter={() => (openOnHover ? open() : null)}
+	on:mouseleave={() => (openOnHover ? close() : null)}
+	use:pointerDownOutside={{
+		capture: true,
+		stopPropagation: false,
+		exclude: getMenuElements
+	}}
+	on:pointerdown_outside={() => {
+		if (usePointerDownOutside) {
+			close()
+		}
+	}}
+	data-popover
+>
+	<slot name="trigger" {isOpen} />
 </button>
 
-{#if open}
-	<div {...$content} use:$content.action transition:fade={{ duration: 100 }} class="content z-[9999]">
+{#if isOpen && !disablePopup}
+	<div
+		{...$content} use:$content.action
+		transition:fade={{ duration: 0 }}
+		class={twMerge(' w-fit border rounded-md bg-surface shadow-lg', contentClasses, `z-[5001]`)}
+		data-popover
+	>
 		{#if displayArrow}
 			<div {...$arrow} use:$arrow.action />
 		{/if}
-		<slot name="content" />
+		<slot name="content" {open} {close} />
 		{#if closeButton}
-			<button class="close" {...$close} use:$close.action>
+			<button class="close" {...$closeElement} use:$closeElement.action>
 				<X class="size-3" />
 			</button>
 		{/if}
@@ -69,17 +136,4 @@ $: sync.open(open, (v) => (open = v));
     font-size: 0.875rem;
     line-height: 1.25rem;
     font-weight: 500
-}
-
-	.content {
-    width: -moz-fit-content;
-    width: fit-content;
-    overflow: hidden;
-    border-radius: 4px;
-    --tw-bg-opacity: 1;
-    background-color: rgb(var(--color-surface) / var(--tw-bg-opacity));
-    padding: 0px;
-    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }</style>

package/package/components/meltComponents/Popover.svelte.d.ts

@@ -1,22 +1,41 @@
 import { SvelteComponent } from "svelte";
+import type { Placement } from '@floating-ui/core';
 declare const __propDef: {
     props: {
-        open?: boolean | undefined;
+        [x: string]: any;
         closeButton?: boolean | undefined;
         displayArrow?: boolean | undefined;
-        placement?: any;
+        placement?: Placement | undefined;
+        disablePopup?: boolean | undefined;
+        openOnHover?: boolean | undefined;
+        floatingConfig?: any | undefined;
+        usePointerDownOutside?: boolean | undefined;
+        closeOnOutsideClick?: boolean | undefined;
+        contentClasses?: string | undefined;
+        portal?: string | HTMLElement | null | undefined;
+        closeOnOtherPopoverOpen?: boolean | undefined;
+        isOpen?: boolean | undefined;
+        close?: (() => void) | undefined;
+        open?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {};
-        content: {};
+        trigger: {
+            isOpen: boolean;
+        };
+        content: {
+            open: () => void;
+            close: () => void;
+        };
     };
 };
 export type PopoverProps = typeof __propDef.props;
 export type PopoverEvents = typeof __propDef.events;
 export type PopoverSlots = typeof __propDef.slots;
 export default class Popover extends SvelteComponent<PopoverProps, PopoverEvents, PopoverSlots> {
+    get close(): () => void;
+    get open(): () => void;
 }
 export {};

package/package/components/meltComponents/SideBarTab.svelte

@@ -1,5 +1,8 @@
-<script>export let dropdownItems = [];
+<script>import { twMerge } from 'tailwind-merge';
+export let dropdownItems = [];
 export let fullMenu = false;
+export let noTrigger = false;
+export let expandRight = false;
 let open = false;
 let timeout = null;
 function handleMouseEnter() {
@@ -16,21 +19,30 @@ function handleMouseLeave() {
     }
     open = false;
 }
+let hasCloseButton = $$slots['close button'];
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="flex flex-col relative !overflow-visible"
+	class="flex flex-col relative !overflow-visible w-[33px]"
 	on:mouseenter={handleMouseEnter}
 	on:mouseleave={handleMouseLeave}
 >
-	<slot name="close button" />
+	{#if hasCloseButton}
+		<slot name="close button" />
+	{:else}
+		<div class="w-[31px]" />
+	{/if}
 
 	{#if fullMenu}
 		<div
-			class="absolute flex-col top-[30px] left-0 z-50 bg-surface border-l border-b {open
-				? 'rounded-md rounded-tl-none overflow-hidden shadow-md'
-				: 'rounded-bl-md'}"
+			class={twMerge(
+				'absolute flex-col left-0 z-50 bg-surface border-l border-b overflow-hidden',
+				hasCloseButton ? 'top-[30px]' : 'top-[1px]',
+				open ? 'rounded-md rounded-tl-none shadow-md' : 'rounded-bl-md',
+				hasCloseButton ? '' : 'rounded-tl-md border-t',
+				noTrigger && !dropdownItems.some((item) => item.selected) ? 'rounded-md border' : ''
+			)}
 		>
 			{#each dropdownItems as item}
 				<button

package/package/components/meltComponents/SideBarTab.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
             selected?: boolean | undefined;
         }[] | undefined;
         fullMenu?: boolean | undefined;
+        noTrigger?: boolean | undefined;
+        expandRight?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/meltComponents/Tooltip.svelte

@@ -0,0 +1,66 @@
+<script>import Markdown from 'svelte-exmarkdown';
+import { ExternalLink, InfoIcon } from 'lucide-svelte';
+import { gfmPlugin } from 'svelte-exmarkdown/gfm';
+import { zIndexes } from '../../zIndexes';
+import { createTooltip, melt } from '@melt-ui/svelte';
+import { fade } from 'svelte/transition';
+export let light = false;
+export let placement = 'bottom';
+export let documentationLink = undefined;
+export let small = false;
+export let markdownTooltip = undefined;
+export let disablePopup = false;
+export let openDelay = 300;
+export let closeDelay = 0;
+export let portal = 'body';
+const plugins = [gfmPlugin()];
+const { elements: { trigger, content }, states: { open } } = createTooltip({
+    positioning: {
+        placement
+    },
+    openDelay,
+    closeDelay,
+    group: true,
+    portal
+});
+</script>
+
+<span class={$$props.class} {...$trigger} use:$trigger.action>
+	<slot />
+</span>
+{#if !$$slots.default}
+	<div
+		class="inline-flex w-3 mx-0.5 h-3 {light
+			? 'text-tertiary-inverse'
+			: 'text-tertiary'} {$$props.class} "
+		{...$trigger} use:$trigger.action
+	>
+		<InfoIcon size={small ? 12 : 14} />
+	</div>
+{/if}
+
+{#if $open && !disablePopup}
+	<div
+		{...$content} use:$content.action
+		transition:fade={{ duration: 100 }}
+		class="shadow max-w-sm break-words py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800 whitespace-normal text-left"
+		style="z-index: {zIndexes.tooltip}"
+	>
+		{#if markdownTooltip}
+			<div class="prose-sm">
+				<Markdown md={markdownTooltip} {plugins} />
+			</div>
+		{:else}
+			<slot name="text" />
+		{/if}
+
+		{#if documentationLink}
+			<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">
+				<div class="flex flex-row gap-2 mt-4">
+					See documentation
+					<ExternalLink size="16" />
+				</div>
+			</a>
+		{/if}
+	</div>
+{/if}

package/package/components/meltComponents/Tooltip.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { Placement } from '@floating-ui/core';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        light?: boolean | undefined;
+        placement?: Placement | undefined;
+        documentationLink?: string | undefined;
+        small?: boolean | undefined;
+        markdownTooltip?: string | undefined;
+        disablePopup?: boolean | undefined;
+        openDelay?: number | undefined;
+        closeDelay?: number | undefined;
+        portal?: string | undefined | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        text: {};
+    };
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};