@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/composer/use-composer-suggestions.d.mts

@@ -0,0 +1,83 @@
+import { ComponentPropsWithoutRef, CompositionEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler, PointerEvent, RefObject } from "react";
+//#region src/components/composer/use-composer-suggestions.d.ts
+export interface ComposerSuggestionTriggerMatch {
+  /** The trigger marker that opened the list, e.g. "@" or "#". */
+  marker: string;
+  /** The query typed after the marker, excluding the marker. */
+  query: string;
+  /** Caret index in the value where the marker begins. */
+  start: number;
+}
+export interface UseComposerSuggestionsParams<TItem extends object> {
+  /** Controlled value of the composer input. */
+  value: string;
+  /** Called when typing or an inserted suggestion changes the value. */
+  onValueChange: (value: string) => void;
+  /** Detect an active trigger in the text before the caret; return null when inactive. */
+  detectTrigger: (textBeforeCaret: string) => ComposerSuggestionTriggerMatch | null;
+  /** Items offered for the active trigger. An empty list closes the popup. */
+  getItems: (match: ComposerSuggestionTriggerMatch) => readonly TItem[];
+  /** Text inserted in place of the trigger token when an item is chosen, e.g. "@handle ". */
+  getItemText: (item: TItem) => string;
+  /** Optional predicate marking an item as non-selectable. */
+  isItemDisabled?: (item: TItem) => boolean;
+}
+export type ComposerSuggestionsInputProps = Omit<ComponentPropsWithoutRef<"textarea">, "aria-activedescendant" | "aria-autocomplete" | "aria-controls" | "role" | "value">;
+export type ComposerSuggestionsListProps = Omit<ComponentPropsWithoutRef<"div">, "aria-label" | "aria-labelledby" | "id" | "role"> & ({
+  "aria-label": string;
+  "aria-labelledby"?: never;
+} | {
+  "aria-label"?: never;
+  "aria-labelledby": string;
+});
+export type ComposerSuggestionsOptionProps = Omit<ComponentPropsWithoutRef<"div">, "aria-disabled" | "aria-selected" | "data-disabled" | "data-composer-suggestion-index" | "data-highlighted" | "id" | "role">;
+interface ComposerSuggestionsInputInternalProps {
+  "aria-activedescendant": string | undefined;
+  "aria-autocomplete": "list";
+  "aria-controls": string | undefined;
+  ref: RefObject<HTMLTextAreaElement | null>;
+  value: string;
+  onBlur: FocusEventHandler<HTMLTextAreaElement>;
+  onChange: FormEventHandler<HTMLTextAreaElement>;
+  onCompositionEnd: CompositionEventHandler<HTMLTextAreaElement>;
+  onCompositionStart: () => void;
+  onKeyDown: KeyboardEventHandler<HTMLTextAreaElement>;
+  onSelect: FormEventHandler<HTMLTextAreaElement>;
+}
+interface ComposerSuggestionsListInternalProps {
+  id: string;
+  ref: RefObject<HTMLDivElement | null>;
+  role: "listbox";
+}
+interface ComposerSuggestionsOptionInternalProps {
+  "aria-disabled": boolean;
+  "aria-selected": boolean;
+  "data-disabled": boolean;
+  "data-composer-suggestion-index": number;
+  "data-highlighted": boolean;
+  id: string;
+  onClick: () => void;
+  onPointerDown: (event: PointerEvent<HTMLDivElement>) => void;
+  role: "option";
+}
+/**
+ * Headless behavior for an inline trigger-driven suggestion popup (@mention, #channel)
+ * layered over a composer textarea. Owns open state, highlighted option, keyboard
+ * navigation, IME guarding, and caret-preserving insertion. The consumer supplies
+ * trigger detection, item data, insertion text, and textarea/listbox option semantics.
+ */
+export declare function useComposerSuggestions<TItem extends object>({ value, onValueChange, detectTrigger, getItems, getItemText, isItemDisabled }: UseComposerSuggestionsParams<TItem>): {
+  open: boolean;
+  items: readonly TItem[];
+  highlightedIndex: number;
+  activeItem: TItem | undefined;
+  inputRef: RefObject<HTMLTextAreaElement | null>;
+  listRef: RefObject<HTMLDivElement | null>;
+  getInputProps: (props?: ComposerSuggestionsInputProps) => ComposerSuggestionsInputInternalProps & ComposerSuggestionsInputProps;
+  getListProps: (props: ComposerSuggestionsListProps) => ComposerSuggestionsListInternalProps & ComposerSuggestionsListProps;
+  getOptionProps: (item: TItem, index: number, props?: ComposerSuggestionsOptionProps) => ComposerSuggestionsOptionInternalProps & ComposerSuggestionsOptionProps;
+  select: (item: TItem) => void;
+  insert: (text: string) => void;
+  clear: () => void;
+};
+//#endregion

package/dist/components/composer/use-composer-suggestions.mjs

@@ -0,0 +1,207 @@
+import { useEffect, useId, useRef, useState } from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+//#region src/components/composer/use-composer-suggestions.ts
+function findNextEnabledIndex(items, current, direction, isItemDisabled) {
+	if (items.length === 0) return -1;
+	const start = current >= 0 ? current : direction === 1 ? -1 : 0;
+	for (let offset = 1; offset <= items.length; offset += 1) {
+		const index = (start + direction * offset + items.length) % items.length;
+		if (!isItemDisabled(items[index])) return index;
+	}
+	return -1;
+}
+function normalizeHighlightedIndex(items, highlightedIndex, isItemDisabled) {
+	const highlightedItem = items[highlightedIndex];
+	if (highlightedItem !== void 0 && !isItemDisabled(highlightedItem)) return highlightedIndex;
+	return findNextEnabledIndex(items, -1, 1, isItemDisabled);
+}
+/**
+* Headless behavior for an inline trigger-driven suggestion popup (@mention, #channel)
+* layered over a composer textarea. Owns open state, highlighted option, keyboard
+* navigation, IME guarding, and caret-preserving insertion. The consumer supplies
+* trigger detection, item data, insertion text, and textarea/listbox option semantics.
+*/
+function useComposerSuggestions({ value, onValueChange, detectTrigger, getItems, getItemText, isItemDisabled = () => false }) {
+	const listId = `composer-suggestions-${useId()}`;
+	const inputRef = useRef(null);
+	const listRef = useRef(null);
+	const composingRef = useRef(false);
+	const frameRef = useRef(null);
+	const caretRef = useRef(value.length);
+	const [interaction, setInteraction] = useState(() => {
+		const initialMatch = detectTrigger(value);
+		return {
+			highlightedIndex: initialMatch ? findNextEnabledIndex(getItems(initialMatch), -1, 1, isItemDisabled) : -1,
+			match: initialMatch,
+			value
+		};
+	});
+	const match = interaction.value === value ? interaction.match : null;
+	const items = match ? getItems(match) : [];
+	const highlightedIndex = normalizeHighlightedIndex(items, interaction.highlightedIndex, isItemDisabled);
+	const hasActiveItem = highlightedIndex >= 0 && highlightedIndex < items.length;
+	const activeItem = hasActiveItem ? items[highlightedIndex] : void 0;
+	const open = Boolean(match && items.length > 0);
+	const syncTrigger = (nextValue, caret) => {
+		const nextMatch = detectTrigger(nextValue.slice(0, caret));
+		setInteraction({
+			highlightedIndex: nextMatch ? findNextEnabledIndex(getItems(nextMatch), -1, 1, isItemDisabled) : -1,
+			match: nextMatch,
+			value: nextValue
+		});
+	};
+	const commit = (nextValue, caret) => {
+		onValueChange(nextValue);
+		setInteraction({
+			highlightedIndex: -1,
+			match: null,
+			value: nextValue
+		});
+		caretRef.current = caret;
+		if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+		frameRef.current = requestAnimationFrame(() => {
+			inputRef.current?.focus({ preventScroll: true });
+			inputRef.current?.setSelectionRange(caret, caret);
+			frameRef.current = null;
+		});
+	};
+	const select = (item) => {
+		if (!match || isItemDisabled(item)) return;
+		const caret = interaction.value === value ? caretRef.current : value.length;
+		const insertion = getItemText(item);
+		const nextValue = `${value.slice(0, match.start)}${insertion}${value.slice(caret)}`;
+		commit(nextValue, match.start + insertion.length);
+	};
+	const insert = (text) => {
+		const caret = interaction.value === value ? caretRef.current : value.length;
+		const nextValue = `${value.slice(0, caret)}${text}${value.slice(caret)}`;
+		commit(nextValue, caret + text.length);
+	};
+	const clear = () => {
+		onValueChange("");
+		setInteraction({
+			highlightedIndex: -1,
+			match: null,
+			value: ""
+		});
+		caretRef.current = 0;
+	};
+	const handleChange = (event) => {
+		caretRef.current = event.currentTarget.selectionStart ?? 0;
+		onValueChange(event.currentTarget.value);
+		syncTrigger(event.currentTarget.value, caretRef.current);
+	};
+	const handleSelect = (event) => {
+		caretRef.current = event.currentTarget.selectionStart ?? 0;
+		syncTrigger(event.currentTarget.value, caretRef.current);
+	};
+	const handleCompositionEnd = (event) => {
+		composingRef.current = false;
+		caretRef.current = event.currentTarget.selectionStart ?? 0;
+		syncTrigger(event.currentTarget.value, caretRef.current);
+	};
+	const handleBlur = (event) => {
+		const nextTarget = event.relatedTarget;
+		if (nextTarget instanceof Node && listRef.current?.contains(nextTarget)) return;
+		setInteraction({
+			highlightedIndex: -1,
+			match: null,
+			value
+		});
+	};
+	const handleKeyDown = (event) => {
+		if (composingRef.current || event.nativeEvent.isComposing || event.keyCode === 229) return;
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			setInteraction({
+				highlightedIndex: -1,
+				match: null,
+				value
+			});
+			return;
+		}
+		if (!open) return;
+		if (event.key === "Enter" && !event.shiftKey && !hasActiveItem) {
+			event.preventDefault();
+			return;
+		}
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			setInteraction({
+				highlightedIndex: findNextEnabledIndex(items, highlightedIndex, event.key === "ArrowDown" ? 1 : -1, isItemDisabled),
+				match,
+				value
+			});
+			return;
+		}
+		if ((event.key === "Tab" || event.key === "Enter" && !event.shiftKey) && hasActiveItem && activeItem !== void 0 && !isItemDisabled(activeItem)) {
+			event.preventDefault();
+			select(activeItem);
+		}
+	};
+	useEffect(() => {
+		if (!open || highlightedIndex < 0) return;
+		const list = listRef.current;
+		const option = list?.querySelector(`[data-composer-suggestion-index="${highlightedIndex}"]`);
+		if (!list || !option) return;
+		const listRect = list.getBoundingClientRect();
+		const optionRect = option.getBoundingClientRect();
+		if (optionRect.top < listRect.top || optionRect.bottom > listRect.bottom) option.scrollIntoView({ block: "nearest" });
+	}, [highlightedIndex, open]);
+	useEffect(() => () => {
+		if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+	}, []);
+	const getInputProps = (props = {}) => mergeProps(props, {
+		"aria-activedescendant": open && highlightedIndex >= 0 ? `${listId}-option-${highlightedIndex}` : void 0,
+		"aria-autocomplete": "list",
+		"aria-controls": open ? listId : void 0,
+		ref: inputRef,
+		value,
+		onBlur: handleBlur,
+		onChange: handleChange,
+		onCompositionEnd: handleCompositionEnd,
+		onCompositionStart: () => {
+			composingRef.current = true;
+		},
+		onKeyDown: handleKeyDown,
+		onSelect: handleSelect
+	});
+	const getListProps = (props) => mergeProps(props, {
+		id: listId,
+		ref: listRef,
+		role: "listbox"
+	});
+	const getOptionProps = (item, index, props = {}) => {
+		const highlighted = index === highlightedIndex;
+		const internalProps = {
+			"aria-disabled": isItemDisabled(item),
+			"aria-selected": highlighted,
+			"data-disabled": isItemDisabled(item),
+			"data-composer-suggestion-index": index,
+			"data-highlighted": highlighted,
+			id: `${listId}-option-${index}`,
+			role: "option",
+			onClick: () => select(item),
+			onPointerDown: (event) => {
+				event.preventDefault();
+			}
+		};
+		return mergeProps(props, internalProps);
+	};
+	return {
+		open,
+		items,
+		highlightedIndex,
+		activeItem,
+		inputRef,
+		listRef,
+		getInputProps,
+		getListProps,
+		getOptionProps,
+		select,
+		insert,
+		clear
+	};
+}
+//#endregion
+export { useComposerSuggestions };

package/dist/components/context-menu/context-menu.d.mts

@@ -0,0 +1,53 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { KbdProps } from "../kbd/kbd.mjs";
+import "../kbd/index.mjs";
+import { ComponentPropsWithRef } from "react";
+import { ContextMenu } from "@base-ui/react";
+//#region src/components/context-menu/context-menu.d.ts
+export type ContextMenuProps = ContextMenu.Root.Props;
+declare function ContextMenu$1(props: ContextMenuProps): import("react").JSX.Element;
+export type ContextMenuSubmenuProps = ContextMenu.SubmenuRoot.Props;
+export declare function ContextMenuSubmenu(props: ContextMenuSubmenuProps): import("react").JSX.Element;
+export type ContextMenuTriggerProps = StyledProps<ContextMenu.Trigger.Props>;
+export declare function ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps): import("react").JSX.Element;
+export type ContextMenuPortalProps = ContextMenu.Portal.Props;
+export declare function ContextMenuPortal(props: ContextMenuPortalProps): import("react").JSX.Element;
+export type ContextMenuContentProps = StyledProps<ContextMenu.Popup.Props> & Partial<Pick<ContextMenu.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky">> & {
+  /**
+   * Additional space to maintain from the edge of the collision boundary: 8px
+   * from the window's edge, and 8px from a frame inset where a shell keeps one.
+   * A value you pass is kept as it is.
+   * @default 8
+   */
+  collisionPadding?: ContextMenu.Positioner.Props["collisionPadding"];
+  portalProps?: ContextMenuPortalProps;
+};
+export declare function ContextMenuContent({ align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, portalProps, className, ...props }: ContextMenuContentProps): import("react").JSX.Element;
+export type ContextMenuPopupProps = ComponentPropsWithRef<"div">;
+export declare function ContextMenuPopup({ className, ...props }: ContextMenuPopupProps): import("react").JSX.Element;
+export type ContextMenuItemProps = StyledProps<ContextMenu.Item.Props>;
+export declare function ContextMenuItem({ className, ...props }: ContextMenuItemProps): import("react").JSX.Element;
+export type ContextMenuItemLabelProps = StyledProps<ComponentPropsWithRef<"span">>;
+export declare function ContextMenuItemLabel({ className, ...props }: ContextMenuItemLabelProps): import("react").JSX.Element;
+export type ContextMenuFooterProps = StyledProps<ComponentPropsWithRef<"div">>;
+export declare function ContextMenuFooter({ className, ...props }: ContextMenuFooterProps): import("react").JSX.Element;
+export type ContextMenuSubmenuTriggerProps = StyledProps<ContextMenu.SubmenuTrigger.Props>;
+export declare function ContextMenuSubmenuTrigger({ children, className, ...props }: ContextMenuSubmenuTriggerProps): import("react").JSX.Element;
+export type ContextMenuLabelProps = StyledProps<ComponentPropsWithRef<"div">>;
+export declare function ContextMenuLabel({ className, ...props }: ContextMenuLabelProps): import("react").JSX.Element;
+export type ContextMenuShortcutProps = KbdProps;
+export declare function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): import("react").JSX.Element;
+export type ContextMenuSeparatorProps = StyledProps<ContextMenu.Separator.Props>;
+export declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): import("react").JSX.Element;
+export type ContextMenuRadioGroupProps = StyledProps<ContextMenu.RadioGroup.Props>;
+export declare function ContextMenuRadioGroup({ ...props }: ContextMenuRadioGroupProps): import("react").JSX.Element;
+export type ContextMenuRadioItemProps = StyledProps<ContextMenu.RadioItem.Props>;
+export declare function ContextMenuRadioItem({ className, children, closeOnClick, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;
+export type ContextMenuRadioItemIndicatorProps = StyledProps<ContextMenu.RadioItemIndicator.Props>;
+export declare function ContextMenuRadioItemIndicator({ className, ...props }: ContextMenuRadioItemIndicatorProps): import("react").JSX.Element;
+export type ContextMenuCheckboxItemProps = StyledProps<ContextMenu.CheckboxItem.Props>;
+export declare function ContextMenuCheckboxItem({ className, children, ...props }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
+export type ContextMenuCheckboxItemIndicatorProps = StyledProps<ContextMenu.CheckboxItemIndicator.Props>;
+export declare function ContextMenuCheckboxItemIndicator({ className, ...props }: ContextMenuCheckboxItemIndicatorProps): import("react").JSX.Element;
+//#endregion
+export { ContextMenu$1 as ContextMenu };

package/dist/components/context-menu/context-menu.mjs

@@ -0,0 +1,275 @@
+import { tv } from "../../lib/tv.mjs";
+import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { Kbd } from "../kbd/kbd.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu } from "@base-ui/react";
+//#region src/components/context-menu/context-menu.tsx
+const contextMenu = tv({ slots: {
+	trigger: ["select-none"],
+	positioner: ["isolate z-50 outline-none"],
+	content: [
+		"flex flex-col max-h-(--available-height) overflow-hidden",
+		"outline-none",
+		"min-w-60 gap-0 rounded-container bg-layer-popover p-1 text-foreground",
+		"shadow-float ring-1 ring-line-seam"
+	],
+	item: [
+		"flex w-full cursor-default select-none items-center",
+		"text-left outline-none transition-colors",
+		"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
+		"font-sans text-callout font-medium text-foreground",
+		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
+		"data-checked:font-bold",
+		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
+	],
+	radioItem: [
+		"flex w-full cursor-default select-none items-center",
+		"text-left outline-none transition-colors",
+		"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
+		"font-sans text-callout font-medium text-foreground",
+		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
+		"data-checked:font-bold",
+		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
+	],
+	submenuTrigger: [
+		"flex w-full cursor-default select-none items-center",
+		"text-left outline-none transition-colors",
+		"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
+		"font-sans text-callout font-medium text-foreground",
+		"hover:bg-brand-soft data-highlighted:bg-brand-soft data-popup-open:bg-brand-soft",
+		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
+	],
+	itemLabel: ["min-w-0 flex-1 truncate text-left"],
+	footer: ["px-3 py-2 text-xs text-foreground-muted tabular-nums"],
+	label: ["px-2.5 pt-2 pb-1", "font-sans text-caption font-bold text-foreground-hint"],
+	shortcut: [
+		"ml-auto",
+		"h-auto min-w-0 rounded-none bg-transparent p-0 shadow-none ring-0",
+		"font-mono text-mono-meta font-normal text-foreground-hint"
+	],
+	separator: ["-mx-1 my-1 h-px border-0 bg-line-hairline"],
+	indicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center", "size-4 text-foreground [&_svg]:size-4"]
+} });
+function ContextMenu$1(props) {
+	return /* @__PURE__ */ jsx(ContextMenu.Root, {
+		"data-slot": "context-menu",
+		...props
+	});
+}
+function ContextMenuSubmenu(props) {
+	return /* @__PURE__ */ jsx(ContextMenu.SubmenuRoot, {
+		"data-slot": "context-menu-submenu",
+		...props
+	});
+}
+function ContextMenuTrigger({ className, ...props }) {
+	const { trigger } = contextMenu();
+	return /* @__PURE__ */ jsx(ContextMenu.Trigger, {
+		"data-slot": "context-menu-trigger",
+		className: trigger({ className }),
+		...props
+	});
+}
+function ContextMenuPortal(props) {
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, {
+		"data-slot": "context-menu-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function ContextMenuFramePositioner({ collisionPadding, container, ...props }) {
+	const padding = usePopupCollisionPadding(collisionPadding, 8, container);
+	return /* @__PURE__ */ jsx(ContextMenu.Positioner, {
+		collisionPadding: padding,
+		...props
+	});
+}
+const CONTENT_COLLISION_AVOIDANCE = {
+	side: "shift",
+	align: "shift",
+	fallbackAxisSide: "none"
+};
+function ContextMenuContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance = CONTENT_COLLISION_AVOIDANCE, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "right", sideOffset = 0, sticky, portalProps, className, ...props }) {
+	const { positioner, content } = contextMenu();
+	return /* @__PURE__ */ jsx(ContextMenuPortal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(ContextMenuFramePositioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			container: portalProps?.container,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
+				"data-slot": "context-menu-content",
+				className: content({ className }),
+				...props
+			})
+		})
+	});
+}
+function ContextMenuPopup({ className, ...props }) {
+	const { content } = contextMenu();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "context-menu-content",
+		className: content({ className }),
+		...props
+	});
+}
+function ContextMenuItem({ className, ...props }) {
+	const { item } = contextMenu();
+	return /* @__PURE__ */ jsx(ContextMenu.Item, {
+		"data-slot": "context-menu-item",
+		className: item({ className }),
+		...props
+	});
+}
+function ContextMenuItemLabel({ className, ...props }) {
+	const { itemLabel } = contextMenu();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-item-label",
+		className: itemLabel({ className }),
+		...props
+	});
+}
+function ContextMenuFooter({ className, ...props }) {
+	const { footer } = contextMenu();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "context-menu-footer",
+		className: footer({ className }),
+		...props
+	});
+}
+function ContextMenuSubmenuTrigger({ children, className, ...props }) {
+	const { submenuTrigger, indicator } = contextMenu();
+	return /* @__PURE__ */ jsxs(ContextMenu.SubmenuTrigger, {
+		"data-slot": "context-menu-submenu-trigger",
+		className: submenuTrigger({ className }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			"data-slot": "context-menu-submenu-trigger-indicator",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(ContextMenuSubmenuChevronIcon, {})
+		})]
+	});
+}
+function ContextMenuLabel({ className, ...props }) {
+	const { label } = contextMenu();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "context-menu-label",
+		className: label({ className }),
+		...props
+	});
+}
+function ContextMenuShortcut({ className, ...props }) {
+	const { shortcut } = contextMenu();
+	return /* @__PURE__ */ jsx(Kbd, {
+		"data-slot": "context-menu-shortcut",
+		className: shortcut({ className }),
+		...props
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	const { separator } = contextMenu();
+	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
+		"data-slot": "context-menu-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function ContextMenuSubmenuChevronIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		"aria-hidden": true,
+		className: "size-3 shrink-0",
+		children: /* @__PURE__ */ jsx("g", {
+			fill: "none",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1",
+			stroke: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M4.25 2.5L7.75 6l-3.5 3.5" })
+		})
+	});
+}
+function ContextMenuCheckIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		"aria-hidden": true,
+		className: "size-3 shrink-0",
+		children: /* @__PURE__ */ jsx("g", {
+			fill: "none",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1",
+			stroke: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M1.75 6.41L4.4 9.25L10.25 2.99" })
+		})
+	});
+}
+function ContextMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...props
+	});
+}
+function ContextMenuRadioItem({ className, children, closeOnClick = true, ...props }) {
+	const { radioItem, indicator } = contextMenu();
+	return /* @__PURE__ */ jsxs(ContextMenu.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		className: radioItem({ className }),
+		closeOnClick,
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			children: /* @__PURE__ */ jsx(ContextMenu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(ContextMenuCheckIcon, {}) })
+		})]
+	});
+}
+function ContextMenuRadioItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.RadioItemIndicator, {
+		"data-slot": "context-menu-radio-item-indicator",
+		className,
+		...props
+	});
+}
+function ContextMenuCheckboxItem({ className, children, ...props }) {
+	const { item, indicator } = contextMenu();
+	return /* @__PURE__ */ jsxs(ContextMenu.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		className: item({ className }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			children: /* @__PURE__ */ jsx(ContextMenu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(ContextMenuCheckIcon, {}) })
+		})]
+	});
+}
+function ContextMenuCheckboxItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu.CheckboxItemIndicator, {
+		"data-slot": "context-menu-checkbox-item-indicator",
+		className,
+		...props
+	});
+}
+//#endregion
+export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuContent, ContextMenuFooter, ContextMenuItem, ContextMenuItemLabel, ContextMenuLabel, ContextMenuPopup, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenu, ContextMenuSubmenuTrigger, ContextMenuTrigger };

package/dist/components/context-menu/index.d.mts

@@ -0,0 +1,2 @@
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuCheckboxItemIndicatorProps, ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuContentProps, ContextMenuFooter, ContextMenuFooterProps, ContextMenuItem, ContextMenuItemLabel, ContextMenuItemLabelProps, ContextMenuItemProps, ContextMenuLabel, ContextMenuLabelProps, ContextMenuPopup, ContextMenuPopupProps, ContextMenuPortal, ContextMenuPortalProps, ContextMenuProps, ContextMenuRadioGroup, ContextMenuRadioGroupProps, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuRadioItemIndicatorProps, ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuSeparatorProps, ContextMenuShortcut, ContextMenuShortcutProps, ContextMenuSubmenu, ContextMenuSubmenuProps, ContextMenuSubmenuTrigger, ContextMenuSubmenuTriggerProps, ContextMenuTrigger, ContextMenuTriggerProps } from "./context-menu.mjs";
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, type ContextMenuCheckboxItemIndicatorProps, type ContextMenuCheckboxItemProps, ContextMenuContent, type ContextMenuContentProps, ContextMenuFooter, type ContextMenuFooterProps, ContextMenuItem, ContextMenuItemLabel, type ContextMenuItemLabelProps, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuPopup, type ContextMenuPopupProps, ContextMenuPortal, type ContextMenuPortalProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, ContextMenuRadioItemIndicator, type ContextMenuRadioItemIndicatorProps, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuShortcut, type ContextMenuShortcutProps, ContextMenuSubmenu, type ContextMenuSubmenuProps, ContextMenuSubmenuTrigger, type ContextMenuSubmenuTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps };

package/dist/components/conversation-panel/conversation-panel-empty-state.d.mts

@@ -0,0 +1,9 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/conversation-panel/conversation-panel-empty-state.d.ts
+export type ConversationPanelEmptyStateProps = useRender.ComponentProps<"div">;
+export declare function ConversationPanelEmptyState({ className, render, ...props }: ConversationPanelEmptyStateProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ConversationPanelEmptyStateBrandProps = useRender.ComponentProps<"div">;
+export declare function ConversationPanelEmptyStateBrand({ className, render, ...props }: ConversationPanelEmptyStateBrandProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ConversationPanelEmptyStateBrandMarkProps = useRender.ComponentProps<"div">;
+export declare function ConversationPanelEmptyStateBrandMark({ className, render, ...props }: ConversationPanelEmptyStateBrandMarkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion