sheer-ui 0.0.0

package/src/lib/components/command/compute-command-score.ts

@@ -0,0 +1,207 @@
+// oxlint-disable ban-ts-comment
+// @ts-nocheck
+// The scores are arranged so that a continuous match of characters will
+// result in a total score of 1.
+//
+// The best case, this character is a match, and either this is the start
+// of the string, or the previous character was also a match.
+const SCORE_CONTINUE_MATCH = 1;
+// A new match at the start of a word scores better than a new match
+// elsewhere as it's more likely that the user will type the starts
+// of fragments.
+// NOTE: We score word jumps between spaces slightly higher than slashes, brackets
+// hyphens, etc.
+const SCORE_SPACE_WORD_JUMP = 0.9;
+const SCORE_NON_SPACE_WORD_JUMP = 0.8;
+// Any other match isn't ideal, but we include it for completeness.
+const SCORE_CHARACTER_JUMP = 0.17;
+// If the user transposed two letters, it should be significantly penalized.
+//
+// i.e. "ouch" is more likely than "curtain" when "uc" is typed.
+const SCORE_TRANSPOSITION = 0.1;
+// The goodness of a match should decay slightly with each missing
+// character.
+//
+// i.e. "bad" is more likely than "bard" when "bd" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 100 characters are inserted between matches.
+const PENALTY_SKIPPED = 0.999;
+// The goodness of an exact-case match should be higher than a
+// case-insensitive match by a small amount.
+//
+// i.e. "HTML" is more likely than "haml" when "HM" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 1000 characters are inserted between matches.
+const PENALTY_CASE_MISMATCH = 0.9999;
+// Match higher for letters closer to the beginning of the word
+// If the word has more characters than the user typed, it should
+// be penalized slightly.
+//
+// i.e. "html" is more likely than "html5" if I type "html".
+//
+// However, it may well be the case that there's a sensible secondary
+// ordering (like alphabetical) that it makes sense to rely on when
+// there are many prefix matches, so we don't make the penalty increase
+// with the number of tokens.
+const PENALTY_NOT_COMPLETE = 0.99;
+
+const IS_GAP_REGEXP = /[\\/_+.#"@[({&]/;
+const COUNT_GAPS_REGEXP = /[\\/_+.#"@[({&]/g;
+const IS_SPACE_REGEXP = /[\s-]/;
+const COUNT_SPACE_REGEXP = /[\s-]/g;
+
+function computeCommandScoreInner(
+	string,
+	abbreviation,
+	lowerString,
+	lowerAbbreviation,
+	stringIndex,
+	abbreviationIndex,
+	memoizedResults
+) {
+	if (abbreviationIndex === abbreviation.length) {
+		if (stringIndex === string.length) return SCORE_CONTINUE_MATCH;
+		return PENALTY_NOT_COMPLETE;
+	}
+
+	const memoizeKey = `${stringIndex},${abbreviationIndex}`;
+	if (memoizedResults[memoizeKey] !== undefined) return memoizedResults[memoizeKey];
+
+	const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex);
+	let index = lowerString.indexOf(abbreviationChar, stringIndex);
+	let highScore = 0;
+
+	let score, transposedScore, wordBreaks, spaceBreaks;
+
+	while (index >= 0) {
+		score = computeCommandScoreInner(
+			string,
+			abbreviation,
+			lowerString,
+			lowerAbbreviation,
+			index + 1,
+			abbreviationIndex + 1,
+			memoizedResults
+		);
+		if (score > highScore) {
+			if (index === stringIndex) {
+				score *= SCORE_CONTINUE_MATCH;
+			} else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
+				score *= SCORE_NON_SPACE_WORD_JUMP;
+				wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP);
+				if (wordBreaks && stringIndex > 0) {
+					score *= PENALTY_SKIPPED ** wordBreaks.length;
+				}
+			} else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
+				score *= SCORE_SPACE_WORD_JUMP;
+				spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP);
+				if (spaceBreaks && stringIndex > 0) {
+					score *= PENALTY_SKIPPED ** spaceBreaks.length;
+				}
+			} else {
+				score *= SCORE_CHARACTER_JUMP;
+				if (stringIndex > 0) {
+					score *= PENALTY_SKIPPED ** (index - stringIndex);
+				}
+			}
+
+			if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {
+				score *= PENALTY_CASE_MISMATCH;
+			}
+		}
+
+		if (
+			(score < SCORE_TRANSPOSITION &&
+				lowerString.charAt(index - 1) ===
+					lowerAbbreviation.charAt(abbreviationIndex + 1)) ||
+			(lowerAbbreviation.charAt(abbreviationIndex + 1) ===
+				lowerAbbreviation.charAt(abbreviationIndex) &&
+				lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex))
+		) {
+			transposedScore = computeCommandScoreInner(
+				string,
+				abbreviation,
+				lowerString,
+				lowerAbbreviation,
+				index + 1,
+				abbreviationIndex + 2,
+				memoizedResults
+			);
+
+			if (transposedScore * SCORE_TRANSPOSITION > score) {
+				score = transposedScore * SCORE_TRANSPOSITION;
+			}
+		}
+
+		if (score > highScore) {
+			highScore = score;
+		}
+
+		index = lowerString.indexOf(abbreviationChar, index + 1);
+	}
+
+	memoizedResults[memoizeKey] = highScore;
+	return highScore;
+}
+
+/**
+ *
+ * @param string
+ * @returns
+ */
+function formatInput(string) {
+	// convert all valid space characters to space so they match each other
+	return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ");
+}
+
+/**
+ * Given a command, a search query, and (optionally) a list of keywords for the command,
+ * computes a score between 0 and 1 that represents how well the search query matches the
+ * abbreviation and keywords. 1 is a perfect match, 0 is no match.
+ *
+ * The score is calculated based on the following rules:
+ * - The scores are arranged so that a continuous match of characters will result in a total
+ * score of 1. The best case, this character is a match, and either this is the start of the string
+ * or the previous character was also a match.
+ * - A new match at the start of a word scores better than a new match elsewhere as it's more likely
+ * that the user will type the starts of fragments.
+ * - Word jumps between spaces are scored slightly higher than slashes, brackets, hyphens, etc.
+ * - A continuous match of characters will result in a total score of 1.
+ * - A new match at the start of a word scores better than a new match elsewhere as it's more likely that the user will type the starts of fragments.
+ * - Any other match isn't ideal, but we include it for completeness.
+ * - If the user transposed two letters, it should be significantly penalized.
+ * - The goodness of a match should decay slightly with each missing character.
+ * - Match higher for letters closer to the beginning of the word.
+ *
+ * @param command - The value to score against the search string (e.g. a command name like "Calculator")
+ * @param search - The search string to score against the value/aliases
+ * @param commandKeywords - An optional list of aliases/keywords to score against the search string - e.g. ["math", "add", "divide", "multiply", "subtract"]
+ * @returns A score between 0 and 1 that represents how well the search string matches the
+ * command (and keywords)
+ */
+export function computeCommandScore(
+	command: string,
+	search: string,
+	commandKeywords?: string[]
+): number {
+	/**
+	 * NOTE: We used to do lower-casing on each recursive call, but this meant that `toLowerCase()`
+	 * was the dominating cost in the algorithm. Passing both is a little ugly, but considerably
+	 * faster.
+	 */
+	command =
+		commandKeywords && commandKeywords.length > 0
+			? `${`${command} ${commandKeywords?.join(" ")}`}`
+			: command;
+	return computeCommandScoreInner(
+		command,
+		search,
+		formatInput(command),
+		formatInput(search),
+		0,
+		0,
+		{}
+	);
+}

package/src/lib/components/command/index.ts

@@ -0,0 +1,29 @@
+export { default as Root } from './components/command.svelte';
+export { default as Empty } from './components/command-empty.svelte';
+export { default as Group } from './components/command-group.svelte';
+export { default as GroupHeading } from './components/command-group-heading.svelte';
+export { default as GroupItems } from './components/command-group-items.svelte';
+export { default as Input } from './components/command-input.svelte';
+export { default as Item } from './components/command-item.svelte';
+export { default as LinkItem } from './components/command-link-item.svelte';
+export { default as List } from './components/command-list.svelte';
+export { default as Viewport } from './components/command-viewport.svelte';
+export { default as Loading } from './components/command-loading.svelte';
+export { default as Separator } from './components/command-separator.svelte';
+
+export type {
+	CommandRootProps as RootProps,
+	CommandEmptyProps as EmptyProps,
+	CommandGroupProps as GroupProps,
+	CommandGroupHeadingProps as GroupHeadingProps,
+	CommandGroupItemsProps as GroupItemsProps,
+	CommandItemProps as ItemProps,
+	CommandLinkItemProps as LinkItemProps,
+	CommandInputProps as InputProps,
+	CommandSeparatorProps as SeparatorProps,
+	CommandListProps as ListProps,
+	CommandLoadingProps as LoadingProps,
+	CommandViewportProps as ViewportProps,
+} from './types.js';
+
+export { computeCommandScore } from './compute-command-score.js';

package/src/lib/components/command/types.ts

@@ -0,0 +1,222 @@
+import type {
+	BitsPrimitiveAnchorAttributes,
+	BitsPrimitiveDivAttributes,
+	BitsPrimitiveInputAttributes,
+	WithChild,
+	Without,
+} from "../../internal/index.js";
+
+export type CommandState = {
+	/** The value of the search query */
+	search: string;
+	/** The value of the selected command menu item */
+	value: string;
+	/** The filtered items */
+	filtered: {
+		/** The count of all visible items. */
+		count: number;
+		/** Map from visible item value to its search store. */
+		items: Map<string, number>;
+		/** Set of groups with at least one visible item. */
+		groups: Set<string>;
+	};
+};
+
+export type CommandRootPropsWithoutHTML = WithChild<{
+	/**
+	 * An accessible label for the command menu.
+	 * Not visible & only used for screen readers.
+	 */
+	label?: string;
+
+	/**
+	 * Optionally set to `false` to turn off the automatic filtering
+	 * and sorting. If `false`, you must conditionally render valid
+	 * items yourself.
+	 */
+	shouldFilter?: boolean;
+
+	/**
+	 * A custom filter function for whether each command item should
+	 * match the query. It should return a number between `0` and `1`,
+	 * with `1` being a perfect match, and `0` being no match, resulting
+	 * in the item being hidden entirely.
+	 *
+	 * By default, it will use the `computeCommandScore` function exported
+	 * by this package to compute the score.
+	 */
+	filter?: (value: string, search: string, keywords?: string[]) => number;
+
+	/**
+	 * A function that is called when the command state changes.
+	 */
+	onStateChange?: (state: Readonly<CommandState>) => void;
+
+	/**
+	 * Optionally provide or bind to the selected command menu item.
+	 */
+	value?: string;
+
+	/**
+	 * A function that is called when the selected command menu item
+	 * changes. It receives the new value as an argument.
+	 */
+	onValueChange?: (value: string) => void;
+
+	/**
+	 * Optionally set to `true` to enable looping through the items
+	 * when the user reaches the end of the list using the keyboard.
+	 */
+	loop?: boolean;
+
+	/**
+	 * Optionally set to `true` to disable selection via pointer events.
+	 */
+	disablePointerSelection?: boolean;
+
+	/**
+	 * Set this prop to `false` to disable the option to use ctrl+n/j/p/k (vim style) navigation.
+	 *
+	 * @default true
+	 */
+	vimBindings?: boolean;
+
+	/**
+	 * The number of columns in a grid layout.
+	 *
+	 * @default null
+	 */
+	columns?: number | null;
+
+	/**
+	 * Whether to disable scrolling the selected item into view on initial mount.
+	 * When `true`, prevents automatic scrolling when the command menu first renders
+	 * and selects its first item, but still allows scrolling on subsequent selections.
+	 *
+	 * @default false
+	 */
+	disableInitialScroll?: boolean;
+}>;
+
+export type CommandRootProps = CommandRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, CommandRootPropsWithoutHTML>;
+
+export type CommandEmptyPropsWithoutHTML = WithChild<{
+	/**
+	 * Whether to force mount the group container regardless of
+	 * filtering logic.
+	 */
+	forceMount?: boolean;
+}>;
+
+export type CommandEmptyProps = CommandEmptyPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, CommandEmptyPropsWithoutHTML>;
+
+export type CommandGroupPropsWithoutHTML = WithChild<{
+	/**
+	 * A unique value for the group.
+	 */
+	value?: string;
+
+	/**
+	 * Whether to force mount the group container regardless of
+	 * filtering logic.
+	 */
+	forceMount?: boolean;
+}>;
+
+export type CommandGroupProps = CommandGroupPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, CommandGroupPropsWithoutHTML>;
+
+export type CommandGroupHeadingPropsWithoutHTML = WithChild;
+
+export type CommandGroupHeadingProps = CommandGroupHeadingPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, CommandGroupHeadingPropsWithoutHTML>;
+
+export type CommandGroupItemsPropsWithoutHTML = WithChild;
+
+export type CommandGroupItemsProps = CommandGroupItemsPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, CommandGroupItemsPropsWithoutHTML>;
+
+export type CommandItemPropsWithoutHTML = WithChild<{
+	/**
+	 * Whether the item is disabled.
+	 *
+	 * @default false
+	 */
+	disabled?: boolean;
+
+	/**
+	 * A callback that is fired when the item is selected, either via
+	 * click or keyboard selection.
+	 */
+	onSelect?: () => void;
+
+	/**
+	 * A unique value for this item that will be used when filtering
+	 * and ranking the items. If not provided, an attempt will be made
+	 * to use the `textContent` of the item. If the `textContent` is dynamic,
+	 * you will need to provide a stable unique value for the item.
+	 */
+	value?: string;
+
+	/**
+	 * A list of keywords that will be used to filter the item.
+	 */
+	keywords?: string[];
+
+	/**
+	 * Whether to always mount the item regardless of filtering logic.
+	 */
+	forceMount?: boolean;
+}>;
+
+export type CommandItemProps = CommandItemPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, CommandItemPropsWithoutHTML>;
+
+export type CommandLinkItemPropsWithoutHTML = CommandItemPropsWithoutHTML;
+
+export type CommandLinkItemProps = CommandLinkItemPropsWithoutHTML &
+	Without<BitsPrimitiveAnchorAttributes, CommandLinkItemPropsWithoutHTML>;
+
+export type CommandInputPropsWithoutHTML = WithChild<{
+	/**
+	 * The value of the input element, used to search/filter items.
+	 */
+	value?: string;
+}>;
+
+export type CommandInputProps = CommandInputPropsWithoutHTML &
+	Without<BitsPrimitiveInputAttributes, CommandInputPropsWithoutHTML>;
+
+export type CommandListPropsWithoutHTML = WithChild;
+
+export type CommandListProps = CommandListPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, CommandListPropsWithoutHTML>;
+
+export type CommandSeparatorPropsWithoutHTML = WithChild<{
+	/**
+	 * Whether to force mount the separator container regardless of
+	 * filtering logic.
+	 */
+	forceMount?: boolean;
+}>;
+
+export type CommandSeparatorProps = CommandSeparatorPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, CommandSeparatorPropsWithoutHTML>;
+
+export type CommandLoadingPropsWithoutHTML = WithChild<{
+	/**
+	 * The current progress of the loading state.
+	 * This is a number between `0` and `100`.
+	 */
+	progress?: number;
+}>;
+
+export type CommandLoadingProps = CommandLoadingPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, CommandLoadingPropsWithoutHTML>;
+
+export type CommandViewportPropsWithoutHTML = WithChild;
+
+export type CommandViewportProps = CommandViewportPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, CommandViewportPropsWithoutHTML>;

package/src/lib/components/command/utils.ts

@@ -0,0 +1,30 @@
+export function findNextSibling(el: Element, selector: string) {
+	let sibling = el.nextElementSibling;
+
+	while (sibling) {
+		if (sibling.matches(selector)) return sibling;
+		sibling = sibling.nextElementSibling;
+	}
+}
+
+export function findPreviousSibling(el: Element, selector: string) {
+	let sibling = el.previousElementSibling;
+
+	while (sibling) {
+		if (sibling.matches(selector)) return sibling;
+		sibling = sibling.previousElementSibling;
+	}
+}
+
+export function findFirstStartMarkerWithImmediateSiblingAsEnd(el: Element, type: 'item' | 'group') {
+	const startMarkers = el.querySelectorAll<HTMLElement>(`[data-bits-command-${type}-start]`);
+
+	for (const startMarker of startMarkers) {
+		const endMarker = startMarker.nextElementSibling;
+		if (endMarker && endMarker.hasAttribute(`data-bits-command-${type}-end`)) {
+			return startMarker;
+		}
+	}
+
+	return null;
+}

package/src/lib/components/context-menu/components/context-menu-content-static.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { ContextMenuContentStaticProps } from '../types.js';
+	import MenuContent from '../../menu/components/menu-content.svelte';
+	import { getFloatingContentCSSVars } from '../../../internal/floating-layer/index.js';
+
+	let { ref = $bindable(null), ...restProps }: ContextMenuContentStaticProps = $props();
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'context-menu-content',
+				class:
+					'bg-popover text-popover-foreground popup-surface popup-surface-static z-50 min-w-32 origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+				style: getFloatingContentCSSVars('context-menu'),
+			},
+			restProps,
+		),
+	);
+</script>
+
+<MenuContent bind:ref {...mergedProps} isStatic />

package/src/lib/components/context-menu/components/context-menu-content.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { ContextMenuContentProps } from '../types.js';
+	import MenuContent from '../../menu/components/menu-content.svelte';
+	import { getFloatingContentCSSVars } from '../../../internal/floating-layer/index.js';
+
+	let { ref = $bindable(null), side = 'right', sideOffset = 2, align = 'start', trapFocus = false, ...restProps }: ContextMenuContentProps = $props();
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'context-menu-content',
+				class:
+					'bg-popover text-popover-foreground popup-surface z-50 min-w-32 origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+				style: getFloatingContentCSSVars('context-menu'),
+			},
+			restProps,
+		),
+	);
+</script>
+
+<MenuContent bind:ref {...mergedProps} {side} {sideOffset} {align} {trapFocus} />

package/src/lib/components/context-menu/components/context-menu-trigger.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { ContextMenuTriggerProps } from '../types.js';
+	import { ContextMenuTriggerState } from '../../menu/menu.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { setFloatingAnchor } from '../../../internal/floating-layer/index.js';
+
+	const uid = $props.id();
+
+	let { id = createId(uid), ref = $bindable(null), child, children, disabled = false, ...restProps }: ContextMenuTriggerProps = $props();
+
+	const triggerState = ContextMenuTriggerState.create({
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'context-menu-trigger',
+			},
+			restProps,
+			triggerState.props,
+			{ style: { pointerEvents: 'auto' } },
+			{
+				style: restProps.style,
+				tabindex: restProps.tabindex,
+			},
+		),
+	);
+
+	setFloatingAnchor(triggerState.virtualElement);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/context-menu/components/context-menu.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { ContextMenuRootProps } from '../types.js';
+	import Menu from '../../menu/components/menu.svelte';
+
+	let { ...restProps }: ContextMenuRootProps = $props();
+</script>
+
+<Menu _internal_variant="context-menu" {...restProps} />

package/src/lib/components/context-menu/index.ts

@@ -0,0 +1,39 @@
+export { default as Root } from './components/context-menu.svelte';
+export { default as Sub } from '../menu/components/menu-sub.svelte';
+export { default as Item } from '../menu/components/menu-item.svelte';
+export { default as Group } from '../menu/components/menu-group.svelte';
+export { default as GroupHeading } from '../menu/components/menu-group-heading.svelte';
+export { default as Arrow } from '../menu/components/menu-arrow.svelte';
+export { default as Content } from './components/context-menu-content.svelte';
+export { default as ContentStatic } from './components/context-menu-content-static.svelte';
+export { default as Trigger } from './components/context-menu-trigger.svelte';
+export { default as RadioItem } from '../menu/components/menu-radio-item.svelte';
+export { default as Separator } from '../menu/components/menu-separator.svelte';
+export { default as RadioGroup } from '../menu/components/menu-radio-group.svelte';
+export { default as SubContent } from '../menu/components/menu-sub-content.svelte';
+export { default as SubContentStatic } from '../menu/components/menu-sub-content-static.svelte';
+export { default as SubTrigger } from '../menu/components/menu-sub-trigger.svelte';
+export { default as CheckboxItem } from '../menu/components/menu-checkbox-item.svelte';
+export { default as Portal } from '../../internal/portal/portal.svelte';
+export { default as CheckboxGroup } from '../menu/components/menu-checkbox-group.svelte';
+
+export type {
+	ContextMenuArrowProps as ArrowProps,
+	ContextMenuCheckboxItemProps as CheckboxItemProps,
+	ContextMenuGroupProps as GroupProps,
+	ContextMenuItemProps as ItemProps,
+	ContextMenuGroupHeadingProps as GroupHeadingProps,
+	ContextMenuRootProps as RootProps,
+	ContextMenuRadioGroupProps as RadioGroupProps,
+	ContextMenuRadioItemProps as RadioItemProps,
+	ContextMenuSeparatorProps as SeparatorProps,
+	ContextMenuSubContentProps as SubContentProps,
+	ContextMenuSubContentStaticProps as SubContentStaticProps,
+	ContextMenuSubProps as SubProps,
+	ContextMenuSubTriggerProps as SubTriggerProps,
+	ContextMenuContentProps as ContentProps,
+	ContextMenuContentStaticProps as ContentStaticProps,
+	ContextMenuTriggerProps as TriggerProps,
+	ContextMenuPortalProps as PortalProps,
+	ContextMenuCheckboxGroupProps as CheckboxGroupProps,
+} from './types.js';

package/src/lib/components/context-menu/types.ts

@@ -0,0 +1,56 @@
+import type { MenuContentProps, MenuContentPropsWithoutHTML } from "../menu/types.js";
+import type { WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveDivAttributes } from "../../internal/attribute-types.js";
+
+export type ContextMenuContentPropsWithoutHTML = MenuContentPropsWithoutHTML;
+
+export type ContextMenuContentProps = MenuContentProps;
+
+export type ContextMenuTriggerPropsWithoutHTML = WithChild<{
+	/**
+	 * Whether the context menu trigger is disabled. If disabled, the trigger will not
+	 * open the menu when right-clicked.
+	 */
+	disabled?: boolean;
+}>;
+
+export type ContextMenuTriggerProps = ContextMenuTriggerPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, ContextMenuTriggerPropsWithoutHTML>;
+
+export type {
+	MenuArrowProps as ContextMenuArrowProps,
+	MenuContentStaticProps as ContextMenuContentStaticProps,
+	MenuCheckboxItemProps as ContextMenuCheckboxItemProps,
+	MenuGroupProps as ContextMenuGroupProps,
+	MenuItemProps as ContextMenuItemProps,
+	MenuGroupHeadingProps as ContextMenuGroupHeadingProps,
+	MenuRootProps as ContextMenuRootProps,
+	MenuRadioGroupProps as ContextMenuRadioGroupProps,
+	MenuRadioItemProps as ContextMenuRadioItemProps,
+	MenuSeparatorProps as ContextMenuSeparatorProps,
+	MenuSubContentProps as ContextMenuSubContentProps,
+	MenuSubContentStaticProps as ContextMenuSubContentStaticProps,
+	MenuSubProps as ContextMenuSubProps,
+	MenuSubTriggerProps as ContextMenuSubTriggerProps,
+	MenuPortalProps as ContextMenuPortalProps,
+	MenuCheckboxGroupProps as ContextMenuCheckboxGroupProps,
+} from "../menu/types.js";
+
+export type {
+	MenuRootPropsWithoutHTML as ContextMenuRootPropsWithoutHTML,
+	MenuContentStaticPropsWithoutHTML as ContextMenuContentStaticPropsWithoutHTML,
+	MenuArrowPropsWithoutHTML as ContextMenuArrowPropsWithoutHTML,
+	MenuCheckboxItemPropsWithoutHTML as ContextMenuCheckboxItemPropsWithoutHTML,
+	MenuGroupPropsWithoutHTML as ContextMenuGroupPropsWithoutHTML,
+	MenuItemPropsWithoutHTML as ContextMenuItemPropsWithoutHTML,
+	MenuGroupHeadingPropsWithoutHTML as ContextMenuGroupHeadingPropsWithoutHTML,
+	MenuRadioGroupPropsWithoutHTML as ContextMenuRadioGroupPropsWithoutHTML,
+	MenuRadioItemPropsWithoutHTML as ContextMenuRadioItemPropsWithoutHTML,
+	MenuSeparatorPropsWithoutHTML as ContextMenuSeparatorPropsWithoutHTML,
+	MenuSubPropsWithoutHTML as ContextMenuSubPropsWithoutHTML,
+	MenuSubTriggerPropsWithoutHTML as ContextMenuSubTriggerPropsWithoutHTML,
+	MenuSubContentPropsWithoutHTML as ContextMenuSubContentPropsWithoutHTML,
+	MenuSubContentStaticPropsWithoutHTML as ContextMenuSubContentStaticPropsWithoutHTML,
+	MenuPortalPropsWithoutHTML as ContextMenuPortalPropsWithoutHTML,
+	MenuCheckboxGroupPropsWithoutHTML as ContextMenuCheckboxGroupPropsWithoutHTML,
+} from "../menu/types.js";