fluentui-svelte 0.1.0

package/dist/components/list-view/types.d.ts

@@ -0,0 +1,95 @@
+import type { CheckboxProps } from '../checkbox/types.ts';
+import type { FSContext } from '../../internal/index.js';
+import type { PolymorphicProps, Shapes } from '../../types/index.js';
+export type SelectionMode = 'none' | 'single' | 'multiselect' | 'extended';
+export type NavigationMode = 'items' | 'composite';
+/** @propsmith ListViewProps */
+export type ListViewProps<T extends 'ul' | 'ol' | 'div'> = {
+    /** How many items can be selected, and how the selection is made.
+     * @default 'none'
+     */
+    selectionMode?: SelectionMode;
+    /** Whether the list itself takes a single tab stop, or every item takes its own.
+     * @default 'items'
+     */
+    navigationMode?: NavigationMode;
+    /** The values of the selected items.
+     * @bindable
+     */
+    selectedItems?: string[];
+    /** The items can have a circular, rounded or square shape.
+     * @default 'rounded'
+     */
+    shape?: Shapes;
+    /** Called whenever the selection changes. */
+    onSelectionChange?: (e: Event, selectedItems: string[] | []) => void;
+    /** The HTML element to render the list as.
+     * @type 'ul' | 'ol' | 'div'
+     * @default 'ul'
+     */
+    as?: T | 'ul' | 'ol' | 'div';
+    /** The DOM reference of the list element.
+     * @type HTMLUListElement | HTMLOListElement | HTMLDivElement
+     * @bindable
+     */
+    ref?: ListViewDOM[T];
+    /** Opts the list out of the tabspot focus management, to wire your own.
+     * @default false
+     */
+    disableTabspot?: boolean;
+} & PolymorphicProps<T>;
+export type ListViewDOM = {
+    ul: HTMLUListElement;
+    ol: HTMLOListElement;
+    div: HTMLDivElement;
+};
+/** @propsmith ListViewItemProps */
+export type ListViewItemProps<T extends 'li' | 'a' | 'div' = 'li'> = {
+    /** The HTML element to render the item as.
+     * @type 'li' | 'a' | 'div'
+     * @default 'li'
+     */
+    as?: T | 'a' | 'div';
+    /** The item can have a circular, rounded or square shape. Inherited from the list by default. */
+    shape?: Shapes;
+    /** The value reported to the list when the item is selected. Falls back to a generated id. */
+    value?: string;
+    /** Renders the item in its pressed state. */
+    active?: boolean;
+    /** The ARIA role of the item. Derived from the list by default. */
+    role?: 'treeitem' | 'menuitem' | 'option' | 'row';
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** The props to spread on the checkbox rendered when the list is multiselect.
+     * @type CheckboxProps
+     */
+    checkmark?: Omit<CheckboxProps, 'element' | 'label' | 'disabled'>;
+    /** Called when the item is clicked or activated with the keyboard. */
+    onAction?: (e: MouseEvent, value: string) => void;
+    /** Called when the item receives the focus. */
+    onfocus?: (e: Event, value: string) => void;
+    /** The DOM reference of the item element.
+     * @type HTMLLIElement | HTMLAnchorElement | HTMLDivElement
+     * @bindable
+     */
+    ref?: ListViewItemDOM[T] | null;
+} & PolymorphicProps<T>;
+export type ListViewItemDOM = {
+    li: HTMLLIElement;
+    a: HTMLAnchorElement;
+    div: HTMLDivElement;
+};
+export type ListViewContextConfig = {
+    shape: Shapes;
+};
+export type ListViewContextState = {
+    selectedItems: string[];
+    anchorIndex: number | null;
+};
+export type ListViewContextMethods = {
+    handleSelection: (e: MouseEvent, value: string) => void;
+    getChildrenRole: (tag: 'li' | 'a' | 'div') => 'listitem' | 'option' | 'row' | undefined;
+    registerItem: (id: string, value: string, disabled: boolean) => void;
+    unregisterItem: (id: string) => void;
+};
+export type ListViewContext = FSContext<ListViewContextConfig, ListViewContextState, null, ListViewContextMethods>;

package/dist/components/list-view/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/list-view/utils.d.ts

@@ -0,0 +1,6 @@
+import type { ListViewContext, NavigationMode, SelectionMode } from './types.ts';
+export declare const COMPONENT_NAME = "fslist-view-";
+export declare const TAG: string[];
+export declare const ITEM_TAG: string[];
+export declare function getRole(tag: 'ul' | 'ol' | 'div', selectionMode: SelectionMode, navigationMode: NavigationMode): 'grid' | 'listbox' | 'list' | undefined;
+export declare const getListViewContext: () => ListViewContext | null, setListViewContext: (context: ListViewContext) => void;

package/dist/components/list-view/utils.js

@@ -0,0 +1,12 @@
+import { PREFIX } from '../../internal/constants.js';
+import { createFSContext } from '../../internal/index.js';
+export const COMPONENT_NAME = `${PREFIX}list-view-`;
+export const TAG = ['ul', 'ol', 'div'];
+export const ITEM_TAG = ['li', 'a', 'div'];
+export function getRole(tag, selectionMode, navigationMode) {
+    if (selectionMode !== 'none') {
+        return navigationMode === 'composite' ? 'grid' : 'listbox';
+    }
+    return tag === 'div' ? 'list' : undefined;
+}
+export const [getListViewContext, setListViewContext] = createFSContext();

package/dist/components/menu/context-menu-trigger.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+	import { on } from 'svelte/events';
+	import { useDebounce } from 'runed';
+	import { COMPONENT_NAME, getMenuContext } from './menu.svelte.js';
+	import { preventDefault } from '../../internal/index.js';
+	import { VIRTUAL_ELEMENT } from '../../internal/constants.js';
+
+	let {
+		disabled,
+		ref
+	}: {
+		/** Disables the user interaction. */
+		disabled?: boolean;
+		/** The reference element for the context menu. */
+		ref: HTMLElement;
+	} = $props();
+
+	const context = getMenuContext();
+
+	if (!context) throw new Error(`No MenuContext found for ${COMPONENT_NAME}.`);
+
+	const { state: _state } = context;
+
+	const { toggle, close } = context.methods;
+
+	const { id, openingDelay } = context.config;
+
+	let offClick: (() => void) | null = $state(null);
+
+	const debounced = useDebounce(async (e: MouseEvent) => {
+		if (disabled) return;
+
+		const { clientX, clientY } = e;
+
+		_state.ref = {
+			getBoundingClientRect() {
+				return {
+					width: 0,
+					height: 0,
+					x: clientX,
+					y: clientY,
+					top: clientY,
+					right: clientX,
+					bottom: clientY,
+					left: clientX
+				};
+			}
+		};
+
+		// Add event to check if user click outside the menu to close it
+		offClick ??= on(document, 'click', (e) => {
+			const clickTarget = e.target as HTMLElement;
+
+			if (!clickTarget.closest(`#fs-menu-popover-${id}`)) {
+				_state.locked = false;
+				close(e);
+				offClick?.();
+				offClick = null;
+			}
+		});
+
+		_state.locked = !_state.locked;
+		toggle(e);
+
+		// When requesting to open the context menu when is already open, we need to wait for the toggle to finish before allowing it to be toggled again
+		if (!_state.open) {
+			await tick();
+			_state.locked = !_state.locked;
+			toggle(e);
+		}
+	}, openingDelay || 0);
+
+	onMount(() => {
+		_state.ref ??= VIRTUAL_ELEMENT;
+
+		const off = on(ref ? ref : document.body, 'contextmenu', preventDefault(debounced));
+
+		return () => {
+			off();
+			offClick?.();
+		};
+	});
+</script>

package/dist/components/menu/context-menu-trigger.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** The reference element for the context menu. */
+    ref: HTMLElement;
+};
+declare const ContextMenuTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextMenuTrigger = ReturnType<typeof ContextMenuTrigger>;
+export default ContextMenuTrigger;

package/dist/components/menu/docs/llms.md

@@ -0,0 +1,169 @@
+# Menu
+
+Menu is a component for displaying a list of actions or options in a dropdown format. It can be used in various contexts, such as navigation, settings, or context menus.
+
+This component relies on the Floating UI library for positioning. It provides a flexible API for creating complex menu structures, including nested menus, checkable items, and disabled items.
+
+To create a menu, you will need to use the following components:
+
+- `Menu`: The root component that creates all the state and provides context to its children.
+- `MenuTrigger`: Handles all the logic for the trigger element that opens the menu. It uses a render prop pattern to provide the necessary props and state to the trigger element.
+- `ContextMenuTrigger`: A variant of MenuTrigger that is designed to be used for context menus. It attaches the menu to a specified element and opens on right-click.
+- `MenuPopover`: The container for the menu content. It handles the positioning and accessibility of the menu.
+- `MenuList`: A wrapper for the list of menu items.
+- `MenuItem`: Represents a single item in the menu. It can be a simple action or a trigger for a nested menu.
+- `SplitButton` or `Button`: The trigger element for the menu.
+
+Other components that can be used within the menu include:
+
+- `MenuGroup`: A wrapper for grouping related menu items together, with an optional header.
+- `MenuDivider`: A visual separator between menu items or groups.
+- `MenuItemCheckbox`: A menu item that can be checked or unchecked.
+- `MenuItemSwitch`: A menu item that can be toggled on or off.
+- `MenuItemRadio`: A menu item that can be selected as part of a group of radio items.
+
+## Usage
+
+To correctly attach events to the trigger element, you should wrap the element with the `children()` `snippet`. This allows you to bind the necessary props and state to your trigger element, ensuring that the menu opens and closes as expected.
+
+```svelte
+<script>
+	import { Button, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider } from 'fluentui-svelte';
+</script>
+
+<Menu>
+	<MenuTrigger>
+		{#snippet children({ state, menuTriggerProps })}
+			<Button bind:ref={state.ref} {...menuTriggerProps}>Open Menu</Button>
+		{/snippet}
+	</MenuTrigger>
+	<MenuPopover>
+		<MenuList>
+			<MenuGroup header="Group 1">
+				<MenuItem>Item 1</MenuItem>
+				<MenuItem>Item 2</MenuItem>
+			</MenuGroup>
+			<MenuDivider />
+			<MenuGroup header="Group 2">
+				<MenuItem>Item 3</MenuItem>
+				<MenuItem>Item 4</MenuItem>
+			</MenuGroup>
+		</MenuList>
+	</MenuPopover>
+</Menu>
+```
+
+## More Examples
+
+### Menu with checkable items and nested submenus
+
+```svelte
+<Menu hasCheckmarks hasIcons {checkedValues} onCheckedValueChange={(e, value) => (checkedValues = value)}>
+	<MenuTrigger>
+		{#snippet children({ state, menuTriggerProps })}
+			<Button isMenuButton bind:ref={state.ref} {...menuTriggerProps}>
+				<AccessTimeRegular /> Open Menu
+			</Button>
+		{/snippet}
+	</MenuTrigger>
+	<MenuPopover>
+		<MenuList>
+			<MenuItem subText="An explanation here">Item With Subtext</MenuItem>
+			<MenuDivider />
+			<MenuItem disabled>I'm Disabled</MenuItem>
+			<MenuItemCheckbox name="item4" value="item4" icon={AccessTimeRegular}>I'm a checkbox</MenuItemCheckbox>
+			<MenuItemSwitch>I'm a switch</MenuItemSwitch>
+			<MenuItemRadio name="item6" value="item6" icon={AccessTimeRegular}>I'm a radio</MenuItemRadio>
+		</MenuList>
+	</MenuPopover>
+</Menu>
+```
+
+### Menu with a SplitButton trigger
+
+```svelte
+<Menu>
+	<MenuTrigger>
+		{#snippet children({ state, menuTriggerProps, primaryButtonProps })}
+			<SplitButton
+				bind:menuTriggerRef={state.ref}
+				{menuTriggerProps}
+				primaryButtonProps={{ onclick: () => alert('Primary action'), ...primaryButtonProps }}
+			>
+				Primary Action
+			</SplitButton>
+		{/snippet}
+	</MenuTrigger>
+	<MenuPopover>
+		<MenuList>
+			<MenuItem>Item 1</MenuItem>
+			<MenuItem>Item 2</MenuItem>
+		</MenuList>
+	</MenuPopover>
+</Menu>
+```
+
+## Context Menu
+
+This variant of the `MenuTrigger` component allows you to create context menus that open on right-click. You can specify the element to which the context menu should be attached using the `ref` prop. If no element is provided, it will attach to the `document.body` by default.
+
+```svelte
+<Menu>
+	<ContextMenuTrigger ref={document.querySelector('#context-menu-box')} />
+	<MenuPopover>
+		<MenuList>
+			<MenuItem>Item 1</MenuItem>
+			<MenuItem>Item 2</MenuItem>
+		</MenuList>
+	</MenuPopover>
+</Menu>
+```
+
+## Component Props (Menu)
+
+| Name                      | Type                                                          | Description                                                                               |
+| ------------------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `checkedValues`           | `Record<string, string[]>`                                    | Map-like object of checked values, keyed by group name.                                   |
+| `onCheckedValueChange`    | `(e: Event, checkedValues: Record<string, string[]>) => void` | Callback fired when checked values change.                                                |
+| `hasCheckmarks`           | `boolean`                                                     | States that menu items can contain selectable items and reserve slots for item alignment. |
+| `hasIcons`                | `boolean`                                                     | States that menu items can contain icons and reserve slots for item alignment.            |
+| `openingDelay`            | `number`                                                      | The delay in milliseconds before opening a submenu on hover. Default is 0.                |
+| `open`                    | `boolean`                                                     | Controls the open state of the menu.                                                      |
+| `onOpenChange`            | `(e: Event, open: boolean) => void`                           | Callback fired when the open state of the menu changes.                                   |
+| `openOnHover`             | `boolean`                                                     | If true, the menu will open when the trigger is hovered.                                  |
+| `persistOnItemActivation` | `boolean`                                                     | If true, the menu will not close when a menu item is activated.                           |
+| `positionConfig`          | `Partial<ComputePositionConfig>`                              | Configuration for the Floating UI positioning. It will be passed down to MenuPopover.     |
+
+## Component Props (MenuTrigger)
+
+| Name       | Type                            | Description                                             |
+| ---------- | ------------------------------- | ------------------------------------------------------- |
+| `shape`    | `rounded \| circular \| square` | The shape of the trigger element. Default is 'rounded'. |
+| `icon`     | `Snippet \| Component`          | An optional icon to display in the trigger element.     |
+| `disabled` | `boolean`                       | If true, the trigger element will be disabled.          |
+
+## Component Props (MenuItem)
+
+| Name               | Type                   | Description                                                          |
+| ------------------ | ---------------------- | -------------------------------------------------------------------- |
+| `icon`             | `Snippet \| Component` | An optional icon to display in the menu item.                        |
+| `subText`          | `string`               | Optional subtext to display below the main content of the menu item. |
+| `secondaryContent` | `string`               | Optional secondary content to display like a hint text.              |
+| `href`             | `string`               | If provided, the menu item will render as an anchor element.         |
+| `disabled`         | `boolean`              | If true, the menu item will be disabled.                             |
+| `onClick`          | `(e: Event) => void`   | Callback fired when the menu item is clicked.                        |
+
+## Component Props (MenuItemCheckbox/Switch/Radio)
+
+| Name                 | Type      | Description                                                                    |
+| -------------------- | --------- | ------------------------------------------------------------------------------ |
+| All `MenuItem` props |           | All props from the MenuItem component are compatible.                          |
+| `value`              | `string`  | The value of the checkbox item. This is required for the item to be checkable. |
+| `checked`            | `boolean` | Controls the checked state of the checkbox item. (Bindable)                    |
+| `name`               | `string`  | The name of the checkbox item, used for grouping related checkboxes.           |
+
+## Component Props (MenuGroup)
+
+| Name     | Type     | Description                                      |
+| -------- | -------- | ------------------------------------------------ |
+| `header` | `string` | Optional header text to display above the group. |

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

@@ -0,0 +1,9 @@
+<div role="separator" class="fs-menu-divider"></div>
+
+<style>
+	.fs-menu-divider {
+		border-bottom: 1px solid var(--fs-control-stroke-default);
+		margin: 0.25rem -0.25rem;
+		width: auto;
+	}
+</style>

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

@@ -0,0 +1,26 @@
+export default MenuDivider;
+type MenuDivider = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const MenuDivider: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { PREFIX } from '../../internal/constants.js';
+	import type { MenuGroupProps } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+	const COMPONENT_NAME = 'menu-group';
+	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
+
+	let { ref = $bindable(), header, children }: MenuGroupProps = $props();
+</script>
+
+<div class="fs-menu-group" role="group" aria-labelledby="group-name-{ID}" bind:this={ref}>
+	<h3 id="group-name-{ID}" class="group-name">{header || ID}</h3>
+	{@render children()}
+</div>
+
+<style>
+	.fs-menu-group {
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		& .group-name {
+			font-size: var(--fs-caption-font-size);
+			line-height: var(--fs-caption-line-height);
+			font-weight: 500;
+			padding: 0.313rem 0.5rem 0.313rem;
+			color: var(--fs-text-secondary);
+		}
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { MenuGroupProps } from './types.ts';
+declare const MenuGroup: import("svelte").Component<MenuGroupProps, {}, "ref">;
+type MenuGroup = ReturnType<typeof MenuGroup>;
+export default MenuGroup;

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

@@ -0,0 +1,143 @@
+<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 { getMenuContext, COMPONENT_NAME as MENU_COMPONENT_NAME } from './menu.svelte.js';
+	import { invokeHandlers, RenderSoC } from '../../internal/index.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,
+		class: classes,
+		id = ID,
+		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;
+
+	watch(
+		() => _state.checkedValues?.[name]?.includes(value),
+		() => {
+			checked = _state.checkedValues?.[name]?.includes(value) || false;
+		}
+	);
+</script>
+
+<!--
+@component
+
+- Usage:
+  ```tsx
+    <Menu hasIcons>
+      <MenuGroup name="Inputs">
+        <MenuItemCheckbox secondaryContent="Item 1" hint="Ctrl + 1" {Icon}>Item 1</MenuItemCheckbox>
+        <MenuItemCheckbox secondaryContent="Item 2" hint="Ctrl + 2">Item 2</MenuItemCheckbox>
+      </MenuGroup>
+    </Menu>
+    ```
+-->
+<Button
+	as="button"
+	{disabled}
+	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: ${hasIcons && !Icon ? 1.5 : 0}rem;}`}
+	aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}
+	class="fs-menu-item-checkbox {hasIcons || hasCheckmarks ? '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-checkbox.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-checkbox.svelte.d.ts

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