@ctrl-ui/react 0.8.0

package/dist/ui/combobox-disabled-selection.d.ts

@@ -0,0 +1,5 @@
+//#region src/ui/combobox-disabled-selection.d.ts
+declare function shouldAcceptComboboxValueChange<Value>(value: Value | null, disabledValues: ReadonlySet<unknown>): boolean;
+declare function emitComboboxValueChange<Value>(value: Value | null, disabledValues: ReadonlySet<unknown>, onValueChange: (value: Value | null) => void): boolean;
+//#endregion
+export { emitComboboxValueChange, shouldAcceptComboboxValueChange };

package/dist/ui/combobox-disabled-selection.js

@@ -0,0 +1,11 @@
+//#region src/ui/combobox-disabled-selection.ts
+function shouldAcceptComboboxValueChange(value, disabledValues) {
+	return value === null || !disabledValues.has(value);
+}
+function emitComboboxValueChange(value, disabledValues, onValueChange) {
+	if (!shouldAcceptComboboxValueChange(value, disabledValues)) return false;
+	onValueChange(value);
+	return true;
+}
+//#endregion
+export { emitComboboxValueChange, shouldAcceptComboboxValueChange };

package/dist/ui/combobox.d.ts

@@ -0,0 +1,70 @@
+import { OpenChangeEventDetails } from "../control-props.js";
+import { ControlSize } from "../control-variants.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/combobox.d.ts
+type ComboboxProps<Value = string> = {
+  children?: ReactNode;
+  items?: readonly Value[];
+  value?: Value | null;
+  defaultValue?: Value | null;
+  onValueChange?: (value: Value | null) => void;
+  inputValue?: string;
+  defaultInputValue?: string;
+  onInputValueChange?: (inputValue: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  autoHighlight?: boolean;
+  itemToStringLabel?: (itemValue: Value) => string;
+  isItemEqualToValue?: (itemValue: Value, value: Value) => boolean;
+};
+type ComboboxInputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+} & {
+  size?: ControlSize;
+};
+type ComboboxTriggerProps = ComponentProps<"button"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type ComboboxContentProps = Omit<ComponentProps<"div"> & {
+  sideOffset?: number;
+}, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type ComboboxListProps<Value = unknown> = Omit<ComponentProps<"div">, "children"> & {
+  children?: ReactNode | ((item: Value, index: number) => ReactNode);
+} & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type ComboboxItemProps<Value = unknown> = Omit<Omit<ComponentProps<"div">, "value"> & {
+  value?: Value;
+  disabled?: boolean;
+}, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type ComboboxEmptyProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type ComboboxGroupProps = ComponentProps<"div"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type ComboboxGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function Combobox<Value = string>({ children, onValueChange, autoHighlight, ...props }: ComboboxProps<Value>): import("react").JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: ComboboxTriggerProps): import("react").JSX.Element;
+declare function ComboboxInput({ size, className, ...props }: ComboboxInputProps): import("react").JSX.Element;
+declare function ComboboxContent({ className, children, sideOffset, ...props }: ComboboxContentProps): import("react").JSX.Element;
+declare function ComboboxList<Value = unknown>({ className, children, ...props }: ComboboxListProps<Value>): import("react").JSX.Element;
+declare function ComboboxEmpty({ className, children, ...props }: ComboboxEmptyProps): import("react").JSX.Element;
+declare function ComboboxItem<Value = unknown>({ className, children, disabled, value, ...props }: ComboboxItemProps<Value>): import("react").JSX.Element;
+declare function ComboboxGroup({ className, children, ...props }: ComboboxGroupProps): import("react").JSX.Element;
+declare function ComboboxGroupLabel({ className, children, ...props }: ComboboxGroupLabelProps): import("react").JSX.Element;
+//#endregion
+export { Combobox, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxList, ComboboxListProps, ComboboxProps, ComboboxTrigger, ComboboxTriggerProps };

package/dist/ui/combobox.js

@@ -0,0 +1,194 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { popupItemStructureClasses } from "../surface-variants.js";
+import { emitComboboxValueChange } from "./combobox-disabled-selection.js";
+import { createContext, use, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
+//#region src/ui/combobox.tsx
+const ComboboxDisabledValueContext = createContext(null);
+function Combobox({ children, onValueChange, autoHighlight = true, ...props }) {
+	const [disabledValues] = useState(() => /* @__PURE__ */ new Set());
+	const [disabledValueRegistry] = useState(() => ({ register(value, disabled) {
+		if (!disabled || value === void 0) return () => {};
+		disabledValues.add(value);
+		return () => disabledValues.delete(value);
+	} }));
+	return /* @__PURE__ */ jsx(ComboboxDisabledValueContext.Provider, {
+		value: disabledValueRegistry,
+		children: /* @__PURE__ */ jsx(Combobox$1.Root, {
+			autoHighlight,
+			...props,
+			onValueChange: onValueChange ? (value) => {
+				if (!Array.isArray(value)) emitComboboxValueChange(value, disabledValues, onValueChange);
+			} : void 0,
+			children
+		})
+	});
+}
+function ComboboxTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Trigger, {
+		"data-control-ui": "combobox",
+		"data-control-family": "field",
+		"data-field-kind": "combobox",
+		"data-slot": "trigger",
+		"aria-label": "Toggle suggestions",
+		className: cn("group inline-flex size-6 shrink-0 cursor-pointer items-center justify-center disabled:cursor-not-allowed", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Combobox$1.Icon, {
+			"data-control-ui": "combobox",
+			"data-control-family": "field",
+			"data-field-kind": "combobox",
+			"data-slot": "icon",
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				className: "size-3",
+				"aria-hidden": "true",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M3 4.5 6 7.5 9 4.5",
+					stroke: "currentColor",
+					strokeWidth: "1.3",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			})
+		})
+	});
+}
+function ComboboxInput({ size = "md", className, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.InputGroup, {
+		"data-control-ui": "combobox",
+		"data-field-kind": "combobox",
+		"data-slot": "root",
+		className: "relative flex w-full items-center",
+		children: [/* @__PURE__ */ jsx(Combobox$1.Input, {
+			"data-control-ui": "combobox",
+			"data-field-kind": "combobox",
+			"data-slot": "input",
+			"data-control": "true",
+			"data-control-family": "field",
+			"data-size": size,
+			className: cn("w-full min-w-0 disabled:cursor-not-allowed", className),
+			...props
+		}), /* @__PURE__ */ jsx(ComboboxTrigger, { className: "absolute right-1.5 top-1/2 -translate-y-1/2" })]
+	});
+}
+function ComboboxContent({ className, children, sideOffset = 6, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+		"data-control-ui": "combobox",
+		"data-popup-kind": "combobox",
+		"data-control-family": "popup",
+		"data-slot": "positioner",
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		side: "bottom",
+		align: "start",
+		sideOffset,
+		className: "z-[80]",
+		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
+			"data-control-ui": "combobox",
+			"data-popup-kind": "combobox",
+			"data-control-family": "popup",
+			"data-slot": "content",
+			"data-surface": "floating",
+			"data-popup-part": "list-surface",
+			className: cn("w-[var(--anchor-width)] max-w-[var(--available-width)]", className),
+			...props,
+			children
+		})
+	}) });
+}
+function ComboboxList({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.List, {
+		"data-control-ui": "combobox",
+		"data-popup-kind": "combobox",
+		"data-slot": "list",
+		"data-control-family": "popup",
+		"data-popup-part": "list-content",
+		className: cn("max-h-[min(18rem,var(--available-height))] overflow-y-auto overscroll-contain", className),
+		...props,
+		children
+	});
+}
+function ComboboxEmpty({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
+		"data-control-ui": "combobox",
+		"data-control-family": "popup",
+		"data-popup-kind": "combobox",
+		"data-slot": "empty",
+		className: cn("px-[calc(var(--padding-x)*0.5)] empty:h-0 empty:overflow-hidden empty:p-0", className),
+		...props,
+		children
+	});
+}
+function ComboboxItem({ className, children, disabled, value, ...props }) {
+	const disabledValueRegistry = use(ComboboxDisabledValueContext);
+	useEffect(() => disabledValueRegistry?.register(value, Boolean(disabled)), [
+		disabled,
+		disabledValueRegistry,
+		value
+	]);
+	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
+		"data-control-ui": "combobox",
+		"data-popup-kind": "combobox",
+		"data-control-family": "popup",
+		"data-slot": "item",
+		"data-popup-part": "item",
+		"data-disabled": disabled ? "true" : void 0,
+		"aria-disabled": disabled || void 0,
+		disabled,
+		value,
+		className: cn(popupItemStructureClasses, className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex min-w-0 flex-1 items-center truncate",
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "combobox",
+			"data-popup-kind": "combobox",
+			"data-control-family": "popup",
+			"data-slot": "item-indicator",
+			className: "flex size-3.5 shrink-0 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 12 12",
+				className: "size-3",
+				"aria-hidden": "true",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M2.5 6.5 5 9l4.5-5",
+					stroke: "currentColor",
+					strokeWidth: "1.4",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			}) })
+		})]
+	});
+}
+function ComboboxGroup({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Group, {
+		"data-control-ui": "combobox",
+		"data-control-family": "field",
+		"data-field-kind": "combobox",
+		"data-slot": "group",
+		className,
+		...props,
+		children
+	});
+}
+function ComboboxGroupLabel({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+		"data-control-ui": "combobox",
+		"data-popup-kind": "combobox",
+		"data-slot": "group-label",
+		"data-control-family": "popup",
+		"data-popup-part": "label",
+		className: cn("px-[calc(var(--padding-x)*0.5)]", className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger };

package/dist/ui/command.d.ts

@@ -0,0 +1,44 @@
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { Dialog } from "./dialog.js";
+import { CSSProperties, ComponentProps } from "react";
+import { Command as Command$1 } from "cmdk";
+//#region src/ui/command.d.ts
+type CommandProps = Omit<ComponentProps<typeof Command$1>, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function Command({ className, ...props }: CommandProps): import("react").JSX.Element;
+declare function CommandDialog({ title, description, children, className, commandProps, ...props }: ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  commandProps?: ComponentProps<typeof Command>;
+}): import("react").JSX.Element;
+type CommandInputProps = Omit<ComponentProps<typeof Command$1.Input>, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function CommandInput({ className, ...props }: CommandInputProps): import("react").JSX.Element;
+declare function CommandList({ className, ...props }: ComponentProps<typeof Command$1.List> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+type CommandEmptyProps = Omit<ComponentProps<typeof Command$1.Empty>, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function CommandEmpty({ className, ...props }: CommandEmptyProps): import("react").JSX.Element;
+type CommandGroupProps = Omit<ComponentProps<typeof Command$1.Group>, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function CommandGroup({ className, ...props }: CommandGroupProps): import("react").JSX.Element;
+type CommandSeparatorProps = Omit<ComponentProps<typeof Command$1.Separator>, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function CommandSeparator({ className, ...props }: CommandSeparatorProps): import("react").JSX.Element;
+type CommandItemProps = Omit<ComponentProps<typeof Command$1.Item>, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function CommandItem({ className, disabled, onSelect, ...props }: CommandItemProps): import("react").JSX.Element;
+type CommandShortcutProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function CommandShortcut({ className, ...props }: CommandShortcutProps): import("react").JSX.Element;
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandEmptyProps, CommandGroup, CommandGroupProps, CommandInput, CommandInputProps, CommandItem, CommandItemProps, CommandList, CommandProps, CommandSeparator, CommandSeparatorProps, CommandShortcut, CommandShortcutProps };

package/dist/ui/command.js

@@ -0,0 +1,166 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { ScrollArea } from "./scroll-area.js";
+import { popupItemStructureClasses } from "../surface-variants.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command as Command$1 } from "cmdk";
+//#region src/ui/command.tsx
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1, {
+		"data-control-ui": "command",
+		"data-popup-kind": "command",
+		"data-slot": "root",
+		"data-control-family": "popup",
+		"data-popup-part": "surface",
+		"data-popup-static": "",
+		"data-surface": "panel",
+		className: cn("flex h-full w-full flex-col overflow-hidden", className),
+		...props
+	});
+}
+function CommandDialog({ title = "Command palette", description = "Search for a command to run...", children, className, commandProps, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		...props,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: cn("overflow-hidden p-0", className),
+			showCloseButton: false,
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: "sr-only",
+					children: title
+				}),
+				/* @__PURE__ */ jsx(DialogDescription, {
+					className: "sr-only",
+					children: description
+				}),
+				/* @__PURE__ */ jsx(Command, {
+					...commandProps,
+					"data-control-ui": "command",
+					"data-popup-kind": "command",
+					"data-control-family": "popup",
+					"data-slot": "dialog-root",
+					className: cn("grid grid-rows-[auto_1fr] in-data-[starting-style]:grid-rows-[auto_0fr]", commandProps?.className),
+					children
+				})
+			]
+		})
+	});
+}
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "command",
+		"data-popup-kind": "command",
+		"data-slot": "input-wrapper",
+		"data-control-family": "popup",
+		"data-control": "true",
+		"data-size": "lg",
+		className: "flex items-center",
+		children: [/* @__PURE__ */ jsxs("svg", {
+			"data-control-ui": "command",
+			"data-popup-kind": "command",
+			"data-control-family": "popup",
+			"data-slot": "input-icon",
+			viewBox: "0 0 16 16",
+			className: "size-4 shrink-0",
+			"aria-hidden": "true",
+			fill: "none",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "7",
+				cy: "7",
+				r: "4.25",
+				stroke: "currentColor",
+				strokeWidth: "1.3"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "m10.5 10.5 3 3",
+				stroke: "currentColor",
+				strokeWidth: "1.3",
+				strokeLinecap: "round"
+			})]
+		}), /* @__PURE__ */ jsx(Command$1.Input, {
+			"data-control-ui": "command",
+			"data-popup-kind": "command",
+			"data-control-family": "popup",
+			"data-slot": "input",
+			className: cn("h-full w-full disabled:cursor-not-allowed", className),
+			...props
+		})]
+	});
+}
+function CommandList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		maxHeight: "min(360px, var(--available-height, 360px))",
+		className: "min-h-0 w-full",
+		children: /* @__PURE__ */ jsx(Command$1.List, {
+			"data-control-ui": "command",
+			"data-control-family": "popup",
+			"data-popup-kind": "command",
+			"data-slot": "list",
+			className: cn("p-[var(--popover-padding)]", className),
+			...props
+		})
+	});
+}
+function CommandEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Empty, {
+		"data-control-ui": "command",
+		"data-control-family": "popup",
+		"data-popup-kind": "command",
+		"data-slot": "empty",
+		className,
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Group, {
+		"data-control-ui": "command",
+		"data-control-family": "popup",
+		"data-popup-kind": "command",
+		"data-slot": "group",
+		className: cn("overflow-hidden p-[var(--popover-padding)]", className),
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Separator, {
+		"data-control-ui": "command",
+		"data-popup-kind": "command",
+		"data-control-family": "popup",
+		"data-popup-part": "separator",
+		"data-slot": "separator",
+		className: cn(className),
+		...props
+	});
+}
+function CommandItem({ className, disabled, onSelect, ...props }) {
+	function handleSelect(value) {
+		if (disabled) return;
+		onSelect?.(value);
+	}
+	return /* @__PURE__ */ jsx(Command$1.Item, {
+		"data-control-ui": "command",
+		"data-popup-kind": "command",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		"data-slot": "item",
+		className: cn("relative", popupItemStructureClasses, className),
+		...props,
+		"data-disabled": disabled ? "true" : void 0,
+		"aria-disabled": disabled || void 0,
+		disabled,
+		onSelect: handleSelect
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "command",
+		"data-popup-kind": "command",
+		"data-control-family": "popup",
+		"data-popup-part": "shortcut",
+		"data-slot": "shortcut",
+		className: cn(className),
+		...props
+	});
+}
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

package/dist/ui/context-menu.d.ts

@@ -0,0 +1,86 @@
+import { ControlledChoice, OpenChangeEventDetails } from "../control-props.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ComponentProps, MouseEvent, ReactNode } from "react";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+//#region src/ui/context-menu.d.ts
+type ContextMenuProps = {
+  children?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+};
+type ContextMenuTriggerProps = ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type ContextMenuGroupProps = ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type ContextMenuContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type ContextMenuItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  disabled?: boolean;
+  inset?: boolean;
+  onClick?: (event: MouseEvent) => void;
+};
+type ContextMenuCheckboxItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+};
+type ContextMenuRadioGroupProps<TValue extends string = string> = ComponentProps<"div"> & Omit<ControlledChoice<TValue>, "defaultValue"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type ContextMenuRadioItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  value: string;
+  disabled?: boolean;
+};
+type ContextMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  inset?: boolean;
+};
+type ContextMenuSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type ContextMenuShortcutProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type ContextMenuSubProps = {
+  children?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+};
+type ContextMenuSubTriggerProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  disabled?: boolean;
+  inset?: boolean;
+};
+type ContextMenuSubContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function ContextMenu(props: ContextMenuProps): import("react").JSX.Element;
+declare function ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps): import("react").JSX.Element;
+declare function ContextMenuPortal(props: ComponentProps<typeof ContextMenu$1.Portal>): import("react").JSX.Element;
+declare function ContextMenuGroup({ className, ...props }: ContextMenuGroupProps): import("react").JSX.Element;
+declare function ContextMenuContent({ className, children, ...props }: ContextMenuContentProps): import("react").JSX.Element;
+declare function ContextMenuItem({ className, inset, ...props }: ContextMenuItemProps): import("react").JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, ...props }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
+declare function ContextMenuRadioGroup<TValue extends string = string>({ className, ...props }: ContextMenuRadioGroupProps<TValue>): import("react").JSX.Element;
+declare function ContextMenuRadioItem({ className, children, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;
+declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): import("react").JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): import("react").JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): import("react").JSX.Element;
+declare function ContextMenuSub(props: ContextMenuSubProps): import("react").JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps): import("react").JSX.Element;
+declare function ContextMenuSubContent({ className, children, ...props }: ContextMenuSubContentProps): import("react").JSX.Element;
+//#endregion
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuContentProps, ContextMenuGroup, ContextMenuGroupProps, ContextMenuItem, ContextMenuItemProps, ContextMenuLabel, ContextMenuLabelProps, ContextMenuPortal, ContextMenuProps, ContextMenuRadioGroup, ContextMenuRadioGroupProps, ContextMenuRadioItem, ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuSeparatorProps, ContextMenuShortcut, ContextMenuShortcutProps, ContextMenuSub, ContextMenuSubContent, ContextMenuSubContentProps, ContextMenuSubProps, ContextMenuSubTrigger, ContextMenuSubTriggerProps, ContextMenuTrigger, ContextMenuTriggerProps };