fluentui-svelte 0.1.0

package/dist/components/menu/menu-item-radio.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { watch } from 'runed';
+	import CheckmarkFilled from 'fluentui-icons-svelte/CheckmarkFilled.svelte';
+	import { Button } from '../../index.js';
+	import { PREFIX } from '../../internal/constants.js';
+	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
+	import { getMenuContext, COMPONENT_NAME as MENU_COMPONENT_NAME } from './menu.svelte.js';
+	import type { MenuItemActionableProps } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+	const COMPONENT_NAME = 'menu-item-radio';
+	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
+
+	let {
+		ref = $bindable(),
+		icon: Icon,
+		secondaryContent,
+		children,
+		checked = $bindable(),
+		disabled,
+		class: classes,
+		id = ID,
+		name = id as string,
+		value = id as string,
+		onclick,
+		subText,
+		...attributes
+	}: MenuItemActionableProps = $props();
+
+	const context = getMenuContext();
+
+	if (!context) throw new Error(`No MenuContext found for ${MENU_COMPONENT_NAME}.`);
+
+	const { hasIcons, persistOnItemActivation } = context.config;
+
+	const { toggleRadio, toggle } = context.methods;
+
+	const { state: _state } = context;
+
+	watch(
+		() => _state.checkedValues?.[name]?.includes(value),
+		() => {
+			checked = _state.checkedValues?.[name]?.includes(value) || false;
+		}
+	);
+</script>
+
+<!--
+@component
+
+- Usage:
+  ```tsx
+    <Menu hasIcons>
+      <MenuGroup name="Inputs">
+        <MenuItemRadio secondaryContent="Item 1" hint="Ctrl + 1" {Icon}>Item 1</MenuItemRadio>
+        <MenuItemRadio secondaryContent="Item 2" hint="Ctrl + 2">Item 2</MenuItemRadio>
+      </MenuGroup>
+    </Menu>
+    ```
+-->
+<Button
+	{disabled}
+	appearance="subtle"
+	onclick={(e: MouseEvent) =>
+		invokeHandlers(e, !!disabled, [onclick, () => toggleRadio(e, value, name), !!persistOnItemActivation && toggle])}
+	onkeydown={(e: KeyboardEvent) =>
+		invokeHandlers(
+			e,
+			[e.key !== 'Enter', !!disabled],
+			[onkeydown, () => toggleRadio(e, value, name), !!persistOnItemActivation && toggle]
+		)}
+	aria-checked={checked}
+	role="menuitemradio"
+	style={`--margin-left: ${hasIcons && !Icon ? 1.5 : 0}rem;}`}
+	aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}
+	class="fs-menu-item-radio {hasIcons ? 'align' : ''} {checked ? 'checked' : ''} {classes}"
+	bind:ref
+	{...attributes}
+>
+	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
+		<CheckmarkFilled class="indicator" />
+		{#if Icon}
+			<RenderSoC SoC={Icon} class="menu-item-icon" args={[{ class: 'menu-item-icon' }]} />
+		{/if}
+		{#if subText}
+			<span class="sub-text">
+				{@render children?.()}
+				<small>{subText}</small>
+			</span>
+		{:else}
+			{@render children?.()}
+		{/if}
+	</span>
+	{#if secondaryContent}
+		<span class="secondary-content" aria-hidden="true">{secondaryContent}</span>
+	{/if}
+</Button>
+
+<style>
+	:global(.fs-menu-item-radio.fs-button) {
+		width: 100%;
+		padding: 0.375rem 0.45rem;
+		border-radius: var(--fs-control-inner-border-radius);
+		justify-content: space-between;
+		font-size: var(--fs-body2-font-size);
+		line-height: var(--fs-caption-line-height);
+		& :global(svg) {
+			width: 1.25rem;
+			fill: currentColor;
+			& > :global(path) {
+				fill: currentColor;
+			}
+		}
+		& .label {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+			font-size: inherit;
+		}
+		& .secondary-content {
+			font-size: var(--fs-caption-font-size);
+			color: var(--fs-text-secondary);
+			margin-left: 0.6rem;
+		}
+		&:global(.align .label:not(:has(.menu-item-icon))) {
+			margin-left: var(--margin-left) !important;
+		}
+		& .sub-text {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			text-align: left;
+			font-size: inherit;
+			& small {
+				font-size: var(--fs-caption2-font-size);
+				color: var(--fs-text-secondary);
+			}
+		}
+		& :global(svg.indicator) {
+			width: 20px;
+			opacity: 0;
+		}
+		&.checked :global(svg.indicator) {
+			opacity: 1;
+		}
+	}
+</style>

package/dist/components/menu/menu-item-radio.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { MenuItemActionableProps } from './types.ts';
+/**
+ * - Usage:
+ * ```tsx
+ *   <Menu hasIcons>
+ *     <MenuGroup name="Inputs">
+ *       <MenuItemRadio secondaryContent="Item 1" hint="Ctrl + 1" {Icon}>Item 1</MenuItemRadio>
+ *       <MenuItemRadio secondaryContent="Item 2" hint="Ctrl + 2">Item 2</MenuItemRadio>
+ *     </MenuGroup>
+ *   </Menu>
+ *   ```
+ */
+declare const MenuItemRadio: import("svelte").Component<MenuItemActionableProps, {}, "ref" | "checked">;
+type MenuItemRadio = ReturnType<typeof MenuItemRadio>;
+export default MenuItemRadio;

package/dist/components/menu/menu-item-switch.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+	import { watch } from 'runed';
+	import { PREFIX } from '../../internal/constants.js';
+	import { Button } from '../../index.js';
+	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
+	import { getMenuContext, COMPONENT_NAME as MENU_COMPONENT_NAME } from './menu.svelte.js';
+	import type { MenuItemActionableProps } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+	const COMPONENT_NAME = 'menu-item-switch';
+	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
+
+	let {
+		ref = $bindable(),
+		icon: Icon,
+		secondaryContent,
+		children,
+		checked = $bindable(),
+		disabled,
+		id = ID,
+		class: classes,
+		name = id as string,
+		value = id as string,
+		subText,
+		onclick,
+		...attributes
+	}: MenuItemActionableProps = $props();
+
+	const context = getMenuContext();
+
+	if (!context) throw new Error(`No MenuContext found for ${MENU_COMPONENT_NAME}.`);
+
+	const { hasIcons, hasCheckmarks } = context.config;
+
+	const { toggleCheckbox } = context.methods;
+
+	const { state: _state } = context;
+
+	const marginLeft = $derived(1.5 * (+!!(hasIcons && !Icon) + +!!hasCheckmarks));
+
+	watch(
+		() => _state.checkedValues?.[name]?.includes(value),
+		() => {
+			checked = _state.checkedValues?.[name]?.includes(value) || false;
+		}
+	);
+</script>
+
+<!--
+@component
+
+- Usage:
+  ```tsx
+    <Menu hasIcons>
+      <MenuGroup name="Inputs">
+        <MenuItemSwitch secondaryContent="Item 1" hint="Ctrl + 1" {Icon}>Item 1</MenuItemSwitch>
+        <MenuItemSwitch secondaryContent="Item 2" hint="Ctrl + 2">Item 2</MenuItemSwitch>
+      </MenuGroup>
+    </Menu>
+    ```
+-->
+<Button
+	{disabled}
+	{id}
+	appearance="subtle"
+	onclick={(e: MouseEvent) => invokeHandlers(e, disabled, [onclick, () => toggleCheckbox(e, value, name)])}
+	onkeydown={(e: KeyboardEvent) =>
+		invokeHandlers(e, [e.key !== 'Enter', !!disabled], [onkeydown, () => toggleCheckbox(e, value, name)])}
+	aria-checked={checked}
+	role="menuitemcheckbox"
+	style={`--margin-left: ${marginLeft}rem;}`}
+	aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}
+	class="fs-menu-item-switch {hasIcons || hasCheckmarks ? 'align' : ''} {checked ? 'checked' : ''} {classes}"
+	bind:ref
+	{...attributes}
+>
+	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
+		{#if Icon}
+			<RenderSoC SoC={Icon} class="menu-item-icon" args={[{ class: 'menu-item-icon' }]} />
+		{/if}
+		{#if subText}
+			<span class="sub-text">
+				{@render children?.()}
+				<small>{subText}</small>
+			</span>
+		{:else}
+			{@render children?.()}
+		{/if}
+		<span class={['item-switch', { on: checked, disabled }]} aria-hidden="true"></span>
+	</span>
+	{#if secondaryContent}
+		<span class="secondary-content" aria-hidden="true">{secondaryContent}</span>
+	{/if}
+</Button>
+
+<style>
+	:global(.fs-menu-item-switch.fs-button) {
+		width: 100%;
+		padding: 0.375rem 0.45rem;
+		border-radius: var(--fs-control-inner-border-radius);
+		justify-content: space-between;
+		font-size: var(--fs-body2-font-size);
+		line-height: var(--fs-caption-line-height);
+		& :global(svg) {
+			width: 1.25rem;
+			fill: currentColor;
+			& > :global(path) {
+				fill: currentColor;
+			}
+		}
+		& .label {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			font-size: inherit;
+			justify-content: space-between;
+			flex: 1;
+			/* Mirrors the ToggleSwitch track and thumb, driven by `.checked` on the item. */
+			& .item-switch {
+				margin-left: 1rem;
+				pointer-events: none;
+				position: relative;
+				display: inline-flex;
+				align-items: center;
+				box-sizing: border-box;
+				width: 2.5rem;
+				min-width: 2.5rem;
+				height: 1.25rem;
+				padding: 0.063rem;
+				border: 0.063rem solid var(--fs-control-strong-stroke-default);
+				border-radius: 1.125rem;
+				background-color: var(--fs-control-alt-fill-secondary);
+				&::after {
+					content: '';
+					position: absolute;
+					left: 0.22rem;
+					width: 0.75rem;
+					height: 0.75rem;
+					border-radius: 0.75rem;
+					background-color: var(--fs-text-secondary);
+					transition: transform var(--fs-fast-duration) var(--fs-point-to-point);
+				}
+				&.on {
+					background-color: var(--fs-accent-fill-default);
+					border-color: var(--fs-accent-fill-default);
+					&::after {
+						transform: translateX(1.25rem);
+						background-color: var(--fs-text-on-accent-primary);
+					}
+				}
+				&.disabled {
+					background-color: var(--fs-control-alt-fill-disabled);
+					border-color: var(--fs-control-strong-stroke-disabled);
+					&::after {
+						background-color: var(--fs-text-disabled);
+					}
+					&.on {
+						background-color: var(--fs-accent-fill-disabled);
+						border-color: var(--fs-accent-fill-disabled);
+						&::after {
+							background-color: var(--fs-text-on-accent-disabled);
+						}
+					}
+				}
+			}
+		}
+		& .secondary-content {
+			font-size: var(--fs-caption-font-size);
+			color: var(--fs-text-secondary);
+			margin-left: 0.6rem;
+		}
+		&:global(.align .label:not(:has(.menu-item-icon))) {
+			margin-left: var(--margin-left) !important;
+		}
+		& .sub-text {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			text-align: left;
+			font-size: inherit;
+			& small {
+				font-size: var(--fs-caption2-font-size);
+				color: var(--fs-text-secondary);
+			}
+		}
+		& :global(svg.indicator) {
+			width: 20px;
+			opacity: 0;
+		}
+		&.checked :global(svg.indicator) {
+			opacity: 1;
+		}
+	}
+</style>

package/dist/components/menu/menu-item-switch.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { MenuItemActionableProps } from './types.ts';
+/**
+ * - Usage:
+ * ```tsx
+ *   <Menu hasIcons>
+ *     <MenuGroup name="Inputs">
+ *       <MenuItemSwitch secondaryContent="Item 1" hint="Ctrl + 1" {Icon}>Item 1</MenuItemSwitch>
+ *       <MenuItemSwitch secondaryContent="Item 2" hint="Ctrl + 2">Item 2</MenuItemSwitch>
+ *     </MenuGroup>
+ *   </Menu>
+ *   ```
+ */
+declare const MenuItemSwitch: import("svelte").Component<MenuItemActionableProps, {}, "ref" | "checked">;
+type MenuItemSwitch = ReturnType<typeof MenuItemSwitch>;
+export default MenuItemSwitch;

package/dist/components/menu/menu-item.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { Button } from '../../index.js';
+	import { getMenuContext, COMPONENT_NAME as MENU_COMPONENT_NAME } from './menu.svelte.js';
+	import { PREFIX } from '../../internal/constants.js';
+	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
+	import type { MenuItemProps } from './types.js';
+	import type { ComponentProps } from 'svelte';
+
+	const FALLBACK_ID = $props.id();
+	const COMPONENT_NAME = 'menu-item';
+	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
+
+	let {
+		ref = $bindable(),
+		icon: Icon,
+		secondaryContent,
+		children,
+		href,
+		id = ID,
+		disabled,
+		class: classes,
+		onclick,
+		onkeydown,
+		subText,
+		...attributes
+	}: MenuItemProps & ComponentProps<typeof Button> = $props();
+
+	const context = getMenuContext();
+
+	if (!context) throw new Error(`No MenuContext found for ${MENU_COMPONENT_NAME}.`);
+
+	const { hasIcons, hasCheckmarks, persistOnItemActivation } = context.config;
+
+	const { toggle } = context.methods;
+
+	const marginLeft = $derived(1.5 * (+!!(hasIcons && !Icon) + +!!hasCheckmarks));
+</script>
+
+<!--
+@component
+
+- Usage:
+  ```tsx
+    <Menu hasIcons>
+      <MenuGroup name="Inputs">
+        <MenuItem secondaryContent="Item 1" hint="Ctrl + 1" {Icon}>Item 1</MenuItem>
+        <MenuItem secondaryContent="Item 2" hint="Ctrl + 2">Item 2</MenuItem>
+      </MenuGroup>
+    </Menu>
+    ```
+-->
+<Button
+	{href}
+	{disabled}
+	{id}
+	role="menuitem"
+	appearance="subtle"
+	onclick={(e: MouseEvent) => invokeHandlers(e, [persistOnItemActivation, disabled], [onclick, toggle])}
+	onkeydown={(e: KeyboardEvent) =>
+		invokeHandlers(e, [e.key !== 'Enter', persistOnItemActivation, disabled], [onkeydown, toggle])}
+	as={href ? 'a' : 'button'}
+	style={`--margin-left: ${marginLeft}rem;`}
+	class="fs-menu-item {hasIcons || hasCheckmarks ? 'align' : ''} {classes}"
+	bind:ref
+	{...attributes}
+>
+	<span class="label" aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}>
+		{#if Icon}
+			<RenderSoC SoC={Icon} args={[{ class: 'menu-item-icon' }]} class="menu-item-icon" />
+		{/if}
+		{#if subText}
+			<span class="sub-text">
+				{@render children?.()}
+				<small>{subText}</small>
+			</span>
+		{:else}
+			{@render children?.()}
+		{/if}
+	</span>
+	{#if secondaryContent}
+		<span class="secondary-content" aria-hidden="true">{secondaryContent}</span>
+	{/if}
+</Button>
+
+<style>
+	:global(.fs-menu-item.fs-button) {
+		width: 100%;
+		padding: 0.375rem 0.45rem;
+		border-radius: var(--fs-control-inner-border-radius);
+		justify-content: space-between;
+		font-size: var(--fs-body2-font-size);
+		line-height: var(--fs-caption-line-height);
+
+		& .label {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+			font-size: inherit;
+			line-height: inherit;
+		}
+		& .secondary-content {
+			font-size: var(--fs-caption-font-size);
+			color: var(--fs-text-secondary);
+			margin-left: 0.6rem;
+		}
+		&:global(.align) {
+			& .label:not(:has(.menu-item-icon)),
+			& .label:not(:has(.fs-menu-item-checkmark, .fs-menu-item-radio, .fs-menu-item-switch)) {
+				margin-left: var(--margin-left) !important;
+			}
+		}
+		& .sub-text {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			text-align: left;
+			font-size: inherit;
+			& small {
+				font-size: var(--fs-caption2-font-size);
+				color: var(--fs-text-secondary);
+			}
+		}
+	}
+</style>

package/dist/components/menu/menu-item.svelte.d.ts

@@ -0,0 +1,18 @@
+import { Button } from '../../index.js';
+import type { MenuItemProps } from './types.ts';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = MenuItemProps & ComponentProps<typeof Button>;
+/**
+ * - Usage:
+ * ```tsx
+ *   <Menu hasIcons>
+ *     <MenuGroup name="Inputs">
+ *       <MenuItem secondaryContent="Item 1" hint="Ctrl + 1" {Icon}>Item 1</MenuItem>
+ *       <MenuItem secondaryContent="Item 2" hint="Ctrl + 2">Item 2</MenuItem>
+ *     </MenuGroup>
+ *   </Menu>
+ *   ```
+ */
+declare const MenuItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/components/menu/menu-list.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { getTabspotAttributes } from 'tabspot';
+	import { getMenuContext } from './menu.svelte.js';
+
+	let { children } = $props();
+
+	const context = getMenuContext();
+
+	let isSubMenu = $derived(context?.config.isSubMenu);
+</script>
+
+<div
+	class="fs-menu-list"
+	role="menu"
+	{...getTabspotAttributes({
+		mover: { axis: 'vertical' },
+		grouper: isSubMenu
+			? {
+					enterDirection: 'right',
+					exitDirection: 'left'
+				}
+			: undefined
+	})}
+>
+	{@render children()}
+</div>
+
+<style>
+	.fs-menu-list {
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+		margin: 0;
+		list-style: none;
+		padding: 0.25rem;
+		flex-grow: 1;
+	}
+</style>

package/dist/components/menu/menu-list.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const MenuList: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type MenuList = ReturnType<typeof MenuList>;
+export default MenuList;

package/dist/components/menu/menu-popover.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { circOut } from 'svelte/easing';
+	import { Flyout } from '../../index.js';
+	import { COMPONENT_NAME, getIntroTransition, getMenuContext } from './menu.svelte.js';
+	import { flip, hide, offset, shift } from '@floating-ui/dom';
+	import { useDebounce } from 'runed';
+	import { floating, flyToOffset, getCSSDuration, reactiveBoundingRect } from '../../internal/index.js';
+	import { getReducedMotion } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+	import type { Snippet } from 'svelte';
+	import type { ComputePositionConfig } from '@floating-ui/dom';
+
+	let {
+		ref: _ref,
+		open: _open = $bindable(),
+		placement,
+		positionConfig: floatingPosition = {
+			placement,
+			middleware: [offset(-2), flip({ crossAxis: true, padding: 0 }), shift({ crossAxis: true, padding: 0 }), hide()],
+			strategy: 'fixed'
+		},
+		children
+	}: {
+		ref?: HTMLElement;
+		open?: boolean;
+		placement?: ComputePositionConfig['placement'];
+		positionConfig?: Partial<ComputePositionConfig>;
+		children: Snippet;
+	} = $props();
+
+	const context = getMenuContext();
+
+	if (!context) throw new Error(`No MenuContext found for ${COMPONENT_NAME}.`);
+
+	const reducedMotion = getReducedMotion();
+
+	const { positionConfig, id, isSubMenu, openOnHover, openingDelay } = context.config;
+
+	const { close } = context.methods;
+
+	let opened = $derived(_open ?? context.state.open);
+
+	let ref = $derived(_ref ?? context.state.ref);
+
+	let { state: _state } = context;
+
+	// The `placement` prop wins over the one coming from the config
+	let config = $derived.by(() => {
+		const base = positionConfig ?? floatingPosition;
+
+		return { ...base, placement: placement ?? base.placement ?? (isSubMenu ? 'right-start' : 'bottom-start') };
+	});
+
+	let boundingElement = reactiveBoundingRect();
+
+	let duration = $state(333);
+
+	let element: HTMLElement | null = $state(null);
+
+	const debounced = useDebounce((e: MouseEvent) => {
+		// Where the mouse is moving to
+		const to = e.relatedTarget as HTMLElement | null;
+		const isPopover = to?.id === `fs-menu-popover-${id}` || to?.closest(`#fs-menu-popover-${id}`);
+		const isTrigger =
+			to?.id === `fs-${isSubMenu ? 'submenu' : 'menu'}-trigger-${id}` ||
+			to?.closest(`#fs-${isSubMenu ? 'submenu' : 'menu'}-trigger-${id}`);
+
+		if (to && !isPopover && !isTrigger && !_state.locked) close(e);
+	}, openingDelay || 0);
+
+	$effect.pre(() => {
+		duration = getCSSDuration('--fs-normal-duration') || 333;
+
+		if (isSubMenu) floatingPosition.placement ??= 'right-start';
+
+		if (ref && ref instanceof HTMLElement) boundingElement.ref = ref;
+
+		// Make sure to update the position of boundingElement before the popover is shown
+		if (opened) boundingElement.update();
+	});
+</script>
+
+{#if opened && ref}
+	{@const isRefAnElement = ref instanceof HTMLElement}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		bind:this={element}
+		class="fs-menu-popover"
+		onmouseleave={openOnHover ? (e: MouseEvent) => debounced(e) : undefined}
+		{@attach ref ? floating(ref, config) : undefined}
+		style={`--position=${isSubMenu ? 'absolute' : 'fixed'} --min-width=${isRefAnElement && !isSubMenu ? `${boundingElement.rect.width}px` : 'max-content'}`}
+		in:flyToOffset={isRefAnElement
+			? {
+					...getIntroTransition({ config, anchor: boundingElement.rect, element, ref, isSubMenu }),
+					duration: duration,
+					easing: circOut,
+					reducedMotion: reducedMotion()
+				}
+			: undefined}
+	>
+		<Flyout class="fs-menu-popover" id="fs-menu-popover-{id}" role="menu">
+			{@render children()}
+		</Flyout>
+	</div>
+{/if}
+
+<style>
+	.fs-menu-popover {
+		position: var(--position, fixed);
+		top: 0;
+		left: 0;
+		width: max-content;
+		min-width: var(--min-width);
+		z-index: 110;
+		& :global(.fs-flyout),
+		& :global(.fs-flyout::before) {
+			border-radius: var(--fs-control-border-radius);
+		}
+		& :global(.fs-flyout) {
+			padding: 0;
+			& :global(> .wrapper) {
+				width: 100% !important;
+			}
+		}
+	}
+</style>

package/dist/components/menu/menu-popover.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { ComputePositionConfig } from '@floating-ui/dom';
+type $$ComponentProps = {
+    ref?: HTMLElement;
+    open?: boolean;
+    placement?: ComputePositionConfig['placement'];
+    positionConfig?: Partial<ComputePositionConfig>;
+    children: Snippet;
+};
+declare const MenuPopover: import("svelte").Component<$$ComponentProps, {}, "open">;
+type MenuPopover = ReturnType<typeof MenuPopover>;
+export default MenuPopover;