@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/command/command.js

@@ -0,0 +1,179 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { InputGroup, InputGroupAddon } from "../input-group/input-group.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog/dialog.js";
+import { CheckIcon, SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command } from "cmdk";
+// src/components/command/command.tsx
+/**
+* Прокрутить список палитры так, чтобы элемент стал виден. Двигается только список:
+* встроенный scrollIntoView прокрутил бы и страницу, если палитра за краем экрана
+* @param element - пункт или заголовок группы
+*/
+function scrollIntoList(element) {
+	const list = element.closest("[cmdk-list]");
+	if (!list) return;
+	const listRect = list.getBoundingClientRect();
+	const rect = element.getBoundingClientRect();
+	if (rect.top < listRect.top) list.scrollTop -= listRect.top - rect.top;
+	else if (rect.bottom > listRect.bottom) list.scrollTop += rect.bottom - listRect.bottom;
+}
+/**
+* Подменить scrollIntoView элемента на прокрутку только внутри списка
+* @param element - пункт или корень группы (подменяется у заголовка группы)
+*/
+function keepScrollInList(element) {
+	if (!element) return;
+	const target = element.querySelector("[cmdk-group-heading]") ?? element;
+	target.scrollIntoView = () => scrollIntoList(target);
+}
+/**
+* Передать элемент и в свой обработчик, и в ref потребителя
+* @param ref - ref из пропсов
+* @returns ref-колбэк
+*/
+function withScrollInList(ref) {
+	return (element) => {
+		keepScrollInList(element);
+		if (typeof ref === "function") ref(element);
+		else if (ref) ref.current = element;
+	};
+}
+/**
+* Палитра команд: поле поиска и список, который фильтруется по мере ввода
+* @param props - пропсы палитры; value — выделенный пункт, shouldFilter, filter, loop — как в cmdk
+* @returns div
+*/
+function Command$1({ className, ...props }) {
+	const classes = cn("flex", "size-full", "flex-col", "overflow-hidden", "rounded-xl!", "bg-popover", "p-1", "text-popover-foreground", className);
+	return /* @__PURE__ */ jsx(Command, {
+		"data-slot": "command",
+		className: classes,
+		...props
+	});
+}
+/**
+* Палитра в диалоге: окно в верхней трети экрана, обычно открывается по ⌘K
+* @param props - пропсы диалога; внутрь кладутся CommandInput и CommandList — Command уже есть
+* @returns диалог
+*/
+function CommandDialog({ title = texts.commandPalette, description = texts.commandPaletteDescription, children, className, showCloseButton = false, ...props }) {
+	const classes = cn("top-1/3", "translate-y-0", "overflow-hidden", "rounded-xl!", "p-0", className);
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...props,
+		children: [/* @__PURE__ */ jsxs(DialogHeader, {
+			className: "sr-only",
+			children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
+		}), /* @__PURE__ */ jsx(DialogContent, {
+			className: classes,
+			showCloseButton,
+			children: /* @__PURE__ */ jsx(Command$1, { children })
+		})]
+	});
+}
+/**
+* Поле поиска: фильтрует список, слева иконка лупы
+* @param props - пропсы поля; value и onValueChange — текст поиска
+* @returns обёртка с полем
+*/
+function CommandInput({ className, ...props }) {
+	const classes = cn("w-full", "text-sm", "outline-hidden", "disabled:cursor-not-allowed", "disabled:opacity-50", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "command-input-wrapper",
+		className: "p-1 pb-0",
+		children: /* @__PURE__ */ jsxs(InputGroup, {
+			className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!",
+			children: [/* @__PURE__ */ jsx(Command.Input, {
+				"data-slot": "command-input",
+				className: classes,
+				...props
+			}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })]
+		})
+	});
+}
+/**
+* Список пунктов: прокручивается, не выше 18rem
+* @param props - пропсы списка; label — подпись для скринридеров, по умолчанию «Варианты»
+* @returns div
+*/
+function CommandList({ className, label = texts.suggestions, ...props }) {
+	const classes = cn("max-h-72", "scroll-py-1", "overflow-x-hidden", "overflow-y-auto", "outline-none", "[scrollbar-width:none]", className);
+	return /* @__PURE__ */ jsx(Command.List, {
+		"data-slot": "command-list",
+		label,
+		className: classes,
+		...props
+	});
+}
+/**
+* Пустой результат: показывается, когда ничего не нашлось
+* @param props - пропсы; children по умолчанию «Ничего не найдено»
+* @returns div
+*/
+function CommandEmpty({ className, children = texts.empty, ...props }) {
+	const classes = cn("py-6", "text-center", "text-sm", className);
+	return /* @__PURE__ */ jsx(Command.Empty, {
+		"data-slot": "command-empty",
+		className: classes,
+		...props,
+		children
+	});
+}
+/**
+* Группа пунктов с заголовком heading
+* @param props - пропсы группы
+* @returns div
+*/
+function CommandGroup({ className, ref, ...props }) {
+	const classes = cn("overflow-hidden", "p-1", "text-foreground", "**:[[cmdk-group-heading]]:px-2", "**:[[cmdk-group-heading]]:py-1.5", "**:[[cmdk-group-heading]]:text-xs", "**:[[cmdk-group-heading]]:font-medium", "**:[[cmdk-group-heading]]:text-muted-foreground", className);
+	return /* @__PURE__ */ jsx(Command.Group, {
+		ref: withScrollInList(ref),
+		"data-slot": "command-group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Разделитель между группами
+* @param props - пропсы разделителя
+* @returns div
+*/
+function CommandSeparator({ className, ...props }) {
+	const classes = cn("-mx-1", "h-px", "bg-border", className);
+	return /* @__PURE__ */ jsx(Command.Separator, {
+		"data-slot": "command-separator",
+		className: classes,
+		...props
+	});
+}
+/**
+* Пункт списка. data-checked={true} показывает галочку справа
+* @param props - пропсы пункта; onSelect — пункт выбран, value — по нему идёт поиск
+* @returns div с role="option"
+*/
+function CommandItem({ className, children, ref, ...props }) {
+	const classes = cn("group/command-item", "relative", "flex", "cursor-default", "items-center", "gap-2", "rounded-sm", "px-2", "py-1.5", "text-sm", "outline-hidden", "select-none", "in-data-[slot=dialog-content]:rounded-lg!", "data-[selected=true]:bg-muted", "data-[selected=true]:text-foreground", "data-[selected=true]:*:[svg]:text-foreground", "data-[disabled=true]:pointer-events-none", "data-[disabled=true]:opacity-50", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*=size-])]:size-4", className);
+	return /* @__PURE__ */ jsxs(Command.Item, {
+		ref: withScrollInList(ref),
+		"data-slot": "command-item",
+		className: classes,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })]
+	});
+}
+/**
+* Сочетание клавиш справа в пункте
+* @param props - пропсы
+* @returns span
+*/
+function CommandShortcut({ className, ...props }) {
+	const classes = cn("ml-auto", "text-xs", "tracking-widest", "text-muted-foreground", "group-data-[selected=true]/command-item:text-foreground", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: classes,
+		...props
+	});
+}
+export { Command$1 as Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

package/dist/components/command/index.d.ts

@@ -0,0 +1,3 @@
+import { CommandDialogPropsT, CommandEmptyPropsT, CommandGroupPropsT, CommandInputPropsT, CommandItemPropsT, CommandListPropsT, CommandPropsT, CommandSeparatorPropsT, CommandShortcutPropsT } from "./types.js";
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./command.js";
+export { Command, CommandDialog, type CommandDialogPropsT, CommandEmpty, type CommandEmptyPropsT, CommandGroup, type CommandGroupPropsT, CommandInput, type CommandInputPropsT, CommandItem, type CommandItemPropsT, CommandList, type CommandListPropsT, type CommandPropsT, CommandSeparator, type CommandSeparatorPropsT, CommandShortcut, type CommandShortcutPropsT };

package/dist/components/command/index.js

@@ -0,0 +1 @@
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./command.js";

package/dist/components/command/types.d.ts

@@ -0,0 +1,69 @@
+import { DialogPropsT } from "../dialog/types.js";
+import { ComponentProps, ReactNode } from "react";
+import { Command } from "cmdk";
+/**
+ * Пропсы палитры команд
+ */
+export type CommandPropsT = Omit<ComponentProps<typeof Command>, 'value' | 'defaultValue' | 'onValueChange' | 'label' | 'shouldFilter' | 'filter' | 'loop' | 'disablePointerSelection' | 'vimBindings'> & {
+  /** Значение выделенного пункта — контролируемый режим, вместе с onValueChange */
+  value?: string;
+  /** Значение выделенного пункта при первом рендере */
+  defaultValue?: string;
+  /** Выделен другой пункт: его значение */
+  onValueChange?: (value: string) => void;
+  /** Подпись палитры для скринридеров */
+  label?: string;
+  /** Фильтровать и сортировать пункты по запросу. false — фильтруете сами. По умолчанию true */
+  shouldFilter?: boolean;
+  /** Своя функция ранжирования: 0 — скрыть пункт, больше — выше в списке */
+  filter?: (value: string, search: string, keywords?: string[]) => number;
+  /** Стрелки переходят с последнего пункта на первый и обратно */
+  loop?: boolean;
+  /** Не выделять пункты наведением мыши */
+  disablePointerSelection?: boolean;
+  /** Сочетания Ctrl+N/J/P/K для перехода по пунктам. По умолчанию true */
+  vimBindings?: boolean;
+};
+/**
+ * Пропсы палитры в диалоге
+ */
+export type CommandDialogPropsT = Omit<DialogPropsT, 'children'> & {
+  /** Содержимое палитры */
+  children?: ReactNode;
+  /** Заголовок диалога для скринридеров */
+  title?: string;
+  /** Описание диалога для скринридеров */
+  description?: string;
+  /** Классы окна диалога */
+  className?: string;
+  /** Показать крестик в углу окна */
+  showCloseButton?: boolean;
+};
+/**
+ * Пропсы поля поиска
+ */
+export type CommandInputPropsT = ComponentProps<typeof Command.Input>;
+/**
+ * Пропсы списка
+ */
+export type CommandListPropsT = ComponentProps<typeof Command.List>;
+/**
+ * Пропсы пустого результата
+ */
+export type CommandEmptyPropsT = ComponentProps<typeof Command.Empty>;
+/**
+ * Пропсы группы
+ */
+export type CommandGroupPropsT = ComponentProps<typeof Command.Group>;
+/**
+ * Пропсы разделителя
+ */
+export type CommandSeparatorPropsT = ComponentProps<typeof Command.Separator>;
+/**
+ * Пропсы пункта
+ */
+export type CommandItemPropsT = ComponentProps<typeof Command.Item>;
+/**
+ * Пропсы сочетания клавиш
+ */
+export type CommandShortcutPropsT = ComponentProps<'span'>;

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

@@ -0,0 +1,92 @@
+import { ContextMenuCheckboxItemPropsT, ContextMenuContentPropsT, ContextMenuGroupPropsT, ContextMenuItemPropsT, ContextMenuLabelPropsT, ContextMenuPortalPropsT, ContextMenuPropsT, ContextMenuRadioGroupPropsT, ContextMenuRadioItemPropsT, ContextMenuSeparatorPropsT, ContextMenuShortcutPropsT, ContextMenuSubContentPropsT, ContextMenuSubPropsT, ContextMenuSubTriggerPropsT, ContextMenuTriggerPropsT } from "./types.js";
+/**
+ * Контекстное меню: список действий по правому клику или долгому нажатию на области
+ * @param props - пропсы меню
+ * @returns корень без своей разметки
+ */
+export declare function ContextMenu({ onOpenChange, ...props }: ContextMenuPropsT): import("react").JSX.Element;
+/**
+ * Портал: переносит меню в конец body. ContextMenuContent рендерит его сам
+ * @param props - пропсы портала
+ * @returns портал
+ */
+export declare function ContextMenuPortal(props: ContextMenuPortalPropsT): import("react").JSX.Element;
+/**
+ * Область меню: правый клик или долгое нажатие по ней открывает меню у курсора
+ * @param props - пропсы области
+ * @returns div
+ */
+export declare function ContextMenuTrigger({ className, ...props }: ContextMenuTriggerPropsT): import("react").JSX.Element;
+/**
+ * Содержимое меню: рендерится в портале у курсора
+ * @param props - пропсы содержимого; по умолчанию side="right", align="start"
+ * @returns портал с меню
+ */
+export declare function ContextMenuContent({ className, side, sideOffset, align, alignOffset, collisionPadding, arrowPadding, sticky, ...props }: ContextMenuContentPropsT): import("react").JSX.Element;
+/**
+ * Группа пунктов: объединяет связанные действия; ContextMenuLabel кладётся внутрь неё
+ * @param props - пропсы группы
+ * @returns div с role="group"
+ */
+export declare function ContextMenuGroup(props: ContextMenuGroupPropsT): import("react").JSX.Element;
+/**
+ * Пункт меню: действие. Ссылку рисуют через render={<a href />}
+ * @param props - пропсы пункта
+ * @returns div с role="menuitem"
+ */
+export declare function ContextMenuItem({ className, inset, variant, ...props }: ContextMenuItemPropsT): import("react").JSX.Element;
+/**
+ * Пункт-флажок: включает и выключает настройку, отмечен галочкой справа
+ * @param props - пропсы пункта
+ * @returns div с role="menuitemcheckbox"
+ */
+export declare function ContextMenuCheckboxItem({ className, children, inset, onCheckedChange, ...props }: ContextMenuCheckboxItemPropsT): import("react").JSX.Element;
+/**
+ * Группа радиокнопок: из пунктов внутри выбран один
+ * @param props - пропсы группы
+ * @returns div с role="group"
+ */
+export declare function ContextMenuRadioGroup({ onValueChange, ...props }: ContextMenuRadioGroupPropsT): import("react").JSX.Element;
+/**
+ * Пункт-радиокнопка: выбранный отмечен галочкой справа
+ * @param props - пропсы пункта
+ * @returns div с role="menuitemradio"
+ */
+export declare function ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenuRadioItemPropsT): import("react").JSX.Element;
+/**
+ * Подпись: заголовок группы пунктов, не выбирается. Кладётся внутрь ContextMenuGroup
+ * или ContextMenuRadioGroup
+ * @param props - пропсы подписи
+ * @returns div
+ */
+export declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelPropsT): import("react").JSX.Element;
+/**
+ * Разделитель: линия между группами пунктов
+ * @param props - пропсы разделителя
+ * @returns div с role="separator"
+ */
+export declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorPropsT): import("react").JSX.Element;
+/**
+ * Сочетание клавиш: подсказка справа в пункте. Само сочетание не обрабатывает
+ * @param props - пропсы сочетания
+ * @returns span
+ */
+export declare function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutPropsT): import("react").JSX.Element;
+/**
+ * Подменю: вложенный список, открывается из пункта
+ * @param props - пропсы подменю
+ * @returns корень без своей разметки
+ */
+export declare function ContextMenuSub({ onOpenChange, ...props }: ContextMenuSubPropsT): import("react").JSX.Element;
+/**
+ * Пункт, открывающий подменю: со стрелкой справа
+ * @param props - пропсы пункта
+ * @returns div с role="menuitem"
+ */
+export declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerPropsT): import("react").JSX.Element;
+/**
+ * Содержимое подменю: появляется сбоку от пункта
+ * @param props - пропсы содержимого; по умолчанию side="right", align="start"
+ * @returns портал с подменю
+ */
+export declare function ContextMenuSubContent({ className, side, sideOffset, align, alignOffset, ...props }: ContextMenuSubContentPropsT): import("react").JSX.Element;

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

@@ -0,0 +1,270 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu } from "@base-ui/react/context-menu";
+// src/components/context-menu/context-menu.tsx
+/**
+* Контекстное меню: список действий по правому клику или долгому нажатию на области
+* @param props - пропсы меню
+* @returns корень без своей разметки
+*/
+function ContextMenu$1({ onOpenChange, ...props }) {
+	/**
+	* Меню открыли или закрыли: наружу только флаг
+	* @param open - открыто ли
+	*/
+	const handleOpenChange = (open) => onOpenChange?.(open);
+	return /* @__PURE__ */ jsx(ContextMenu.Root, {
+		"data-slot": "context-menu",
+		onOpenChange: handleOpenChange,
+		...props
+	});
+}
+/**
+* Портал: переносит меню в конец body. ContextMenuContent рендерит его сам
+* @param props - пропсы портала
+* @returns портал
+*/
+function ContextMenuPortal(props) {
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, {
+		"data-slot": "context-menu-portal",
+		...props
+	});
+}
+/**
+* Область меню: правый клик или долгое нажатие по ней открывает меню у курсора
+* @param props - пропсы области
+* @returns div
+*/
+function ContextMenuTrigger({ className, ...props }) {
+	const classes = cn("select-none", className);
+	return /* @__PURE__ */ jsx(ContextMenu.Trigger, {
+		"data-slot": "context-menu-trigger",
+		className: classes,
+		...props
+	});
+}
+/** Классы окна меню */
+const contentClasses = [
+	"z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin)",
+	"overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md",
+	"ring-1 ring-foreground/10 duration-100 outline-none data-closed:overflow-hidden",
+	"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+	"data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+	"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+	"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+];
+/**
+* Содержимое меню: рендерится в портале у курсора
+* @param props - пропсы содержимого; по умолчанию side="right", align="start"
+* @returns портал с меню
+*/
+function ContextMenuContent({ className, side = "right", sideOffset = 0, align = "start", alignOffset = 4, collisionPadding, arrowPadding, sticky, ...props }) {
+	const classes = cn(contentClasses, className);
+	const positionerProps = {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		collisionPadding,
+		arrowPadding,
+		sticky
+	};
+	return /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
+		className: "isolate z-50 outline-none",
+		...positionerProps,
+		children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
+			"data-slot": "context-menu-content",
+			className: classes,
+			...props
+		})
+	}) });
+}
+/**
+* Группа пунктов: объединяет связанные действия; ContextMenuLabel кладётся внутрь неё
+* @param props - пропсы группы
+* @returns div с role="group"
+*/
+function ContextMenuGroup(props) {
+	return /* @__PURE__ */ jsx(ContextMenu.Group, {
+		"data-slot": "context-menu-group",
+		...props
+	});
+}
+/**
+* Пункт меню: действие. Ссылку рисуют через render={<a href />}
+* @param props - пропсы пункта
+* @returns div с role="menuitem"
+*/
+function ContextMenuItem({ className, inset, variant = "default", ...props }) {
+	const classes = cn("group/context-menu-item", "relative", "flex", "cursor-default", "items-center", "gap-1.5", "rounded-md", "px-1.5", "py-1", "text-sm", "outline-hidden", "select-none", "data-inset:pl-7", "focus:bg-accent", "focus:text-accent-foreground", "focus:*:[svg]:text-accent-foreground", "data-[variant=destructive]:text-destructive", "data-[variant=destructive]:focus:bg-destructive/10", "data-[variant=destructive]:focus:text-destructive", "dark:data-[variant=destructive]:focus:bg-destructive/20", "data-[variant=destructive]:*:[svg]:text-destructive", "data-disabled:pointer-events-none", "data-disabled:opacity-50", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*=size-])]:size-4", className);
+	return /* @__PURE__ */ jsx(ContextMenu.Item, {
+		"data-slot": "context-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: classes,
+		...props
+	});
+}
+/**
+* Классы пунктов-переключателей: флажка и радиокнопки
+*/
+const toggleItemClasses = [
+	"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none",
+	"data-inset:pl-7 focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground",
+	"data-disabled:pointer-events-none data-disabled:opacity-50",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4"
+];
+/**
+* Пункт-флажок: включает и выключает настройку, отмечен галочкой справа
+* @param props - пропсы пункта
+* @returns div с role="menuitemcheckbox"
+*/
+function ContextMenuCheckboxItem({ className, children, inset, onCheckedChange, ...props }) {
+	const classes = cn(toggleItemClasses, className);
+	/**
+	* Отметку переключили: наружу только состояние
+	* @param checked - отмечен ли
+	*/
+	const handleCheckedChange = (checked) => onCheckedChange?.(checked);
+	return /* @__PURE__ */ jsxs(ContextMenu.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		"data-inset": inset,
+		className: classes,
+		onCheckedChange: handleCheckedChange,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "context-menu-checkbox-item-indicator",
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(ContextMenu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+/**
+* Группа радиокнопок: из пунктов внутри выбран один
+* @param props - пропсы группы
+* @returns div с role="group"
+*/
+function ContextMenuRadioGroup({ onValueChange, ...props }) {
+	/**
+	* Выбран другой пункт: наружу только значение
+	* @param value - значение пункта
+	*/
+	const handleValueChange = (value) => onValueChange?.(value);
+	return /* @__PURE__ */ jsx(ContextMenu.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		onValueChange: handleValueChange,
+		...props
+	});
+}
+/**
+* Пункт-радиокнопка: выбранный отмечен галочкой справа
+* @param props - пропсы пункта
+* @returns div с role="menuitemradio"
+*/
+function ContextMenuRadioItem({ className, children, inset, ...props }) {
+	const classes = cn(toggleItemClasses, className);
+	return /* @__PURE__ */ jsxs(ContextMenu.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		"data-inset": inset,
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "context-menu-radio-item-indicator",
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(ContextMenu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+/**
+* Подпись: заголовок группы пунктов, не выбирается. Кладётся внутрь ContextMenuGroup
+* или ContextMenuRadioGroup
+* @param props - пропсы подписи
+* @returns div
+*/
+function ContextMenuLabel({ className, inset, ...props }) {
+	const classes = cn("px-1.5", "py-1", "text-xs", "font-medium", "text-muted-foreground", "data-inset:pl-7", className);
+	return /* @__PURE__ */ jsx(ContextMenu.GroupLabel, {
+		"data-slot": "context-menu-label",
+		"data-inset": inset,
+		className: classes,
+		...props
+	});
+}
+/**
+* Разделитель: линия между группами пунктов
+* @param props - пропсы разделителя
+* @returns div с role="separator"
+*/
+function ContextMenuSeparator({ className, ...props }) {
+	const classes = cn("-mx-1", "my-1", "h-px", "bg-border", className);
+	return /* @__PURE__ */ jsx(ContextMenu.Separator, {
+		"data-slot": "context-menu-separator",
+		className: classes,
+		...props
+	});
+}
+/**
+* Сочетание клавиш: подсказка справа в пункте. Само сочетание не обрабатывает
+* @param props - пропсы сочетания
+* @returns span
+*/
+function ContextMenuShortcut({ className, ...props }) {
+	const classes = cn("ml-auto", "text-xs", "tracking-widest", "text-muted-foreground", "group-focus/context-menu-item:text-accent-foreground", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "context-menu-shortcut",
+		className: classes,
+		...props
+	});
+}
+/**
+* Подменю: вложенный список, открывается из пункта
+* @param props - пропсы подменю
+* @returns корень без своей разметки
+*/
+function ContextMenuSub({ onOpenChange, ...props }) {
+	/**
+	* Подменю открыли или закрыли: наружу только флаг
+	* @param open - открыто ли
+	*/
+	const handleOpenChange = (open) => onOpenChange?.(open);
+	return /* @__PURE__ */ jsx(ContextMenu.SubmenuRoot, {
+		"data-slot": "context-menu-sub",
+		onOpenChange: handleOpenChange,
+		...props
+	});
+}
+/**
+* Пункт, открывающий подменю: со стрелкой справа
+* @param props - пропсы пункта
+* @returns div с role="menuitem"
+*/
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+	const classes = cn("flex", "cursor-default", "items-center", "gap-1.5", "rounded-md", "px-1.5", "py-1", "text-sm", "outline-hidden", "select-none", "data-inset:pl-7", "focus:bg-accent", "focus:text-accent-foreground", "not-data-[variant=destructive]:focus:**:text-accent-foreground", "data-popup-open:bg-accent", "data-popup-open:text-accent-foreground", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*=size-])]:size-4", className);
+	return /* @__PURE__ */ jsxs(ContextMenu.SubmenuTrigger, {
+		"data-slot": "context-menu-sub-trigger",
+		"data-inset": inset,
+		className: classes,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
+	});
+}
+/**
+* Содержимое подменю: появляется сбоку от пункта
+* @param props - пропсы содержимого; по умолчанию side="right", align="start"
+* @returns портал с подменю
+*/
+function ContextMenuSubContent({ className, side = "right", sideOffset = 0, align = "start", alignOffset = -3, ...props }) {
+	const classes = cn("w-auto", "min-w-32", "border", "shadow-lg", className);
+	return /* @__PURE__ */ jsx(ContextMenuContent, {
+		"data-slot": "context-menu-sub-content",
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		className: classes,
+		...props
+	});
+}
+export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

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

@@ -0,0 +1,3 @@
+import { ContextMenuCheckboxItemPropsT, ContextMenuContentPropsT, ContextMenuGroupPropsT, ContextMenuItemPropsT, ContextMenuItemVariantT, ContextMenuLabelPropsT, ContextMenuPortalPropsT, ContextMenuPropsT, ContextMenuRadioGroupPropsT, ContextMenuRadioItemPropsT, ContextMenuSeparatorPropsT, ContextMenuShortcutPropsT, ContextMenuSubContentPropsT, ContextMenuSubPropsT, ContextMenuSubTriggerPropsT, ContextMenuTriggerPropsT } from "./types.js";
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./context-menu.js";
+export { ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemPropsT, ContextMenuContent, type ContextMenuContentPropsT, ContextMenuGroup, type ContextMenuGroupPropsT, ContextMenuItem, type ContextMenuItemPropsT, type ContextMenuItemVariantT, ContextMenuLabel, type ContextMenuLabelPropsT, ContextMenuPortal, type ContextMenuPortalPropsT, type ContextMenuPropsT, ContextMenuRadioGroup, type ContextMenuRadioGroupPropsT, ContextMenuRadioItem, type ContextMenuRadioItemPropsT, ContextMenuSeparator, type ContextMenuSeparatorPropsT, ContextMenuShortcut, type ContextMenuShortcutPropsT, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubContentPropsT, type ContextMenuSubPropsT, ContextMenuSubTrigger, type ContextMenuSubTriggerPropsT, ContextMenuTrigger, type ContextMenuTriggerPropsT };

package/dist/components/context-menu/index.js

@@ -0,0 +1 @@
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./context-menu.js";