@archytechtor/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,229 @@
+import { FloatingAlignT, FloatingSideT } from "../../lib/floating.js";
+import { CSSProperties, ReactNode, Ref, RefObject } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+/**
+ * Пропсы части: className только строкой, render и style описаны по-русски
+ */
+export type PartPropsT<PropsT extends {
+  render?: unknown;
+}> = Omit<PropsT, 'className' | 'render' | 'style'> & {
+  /** Классы элемента */
+  className?: string;
+  /** Свой элемент вместо стандартного: render={<a />}. Стили и пропсы переходят на него */
+  render?: PropsT['render'];
+  /** Инлайн-стили элемента */
+  style?: CSSProperties;
+};
+/**
+ * Пропсы корня Base UI
+ */
+export type RootPropsT<Value, Multiple extends boolean | undefined> = Combobox.Root.Props<Value, Multiple>;
+/**
+ * Пропсы комбобокса
+ */
+export type ComboboxPropsT<Value, Multiple extends boolean | undefined = false> = {
+  /** Части комбобокса: поле, список */
+  children?: ReactNode;
+  /** Все пункты списка: массив значений или групп { value, items } — по ним идёт фильтрация */
+  items?: RootPropsT<Value, Multiple>['items'];
+  /** Уже отфильтрованные пункты — когда фильтруете сами, вместе с filter={null} */
+  filteredItems?: RootPropsT<Value, Multiple>['filteredItems'];
+  /** Своя функция фильтрации: true — показать пункт; null — не фильтровать */
+  filter?: RootPropsT<Value, Multiple>['filter'];
+  /** Выбор нескольких значений: value становится массивом, выбранное показывают чипы */
+  multiple?: Multiple;
+  /** Выбранное значение — контролируемый режим, вместе с onValueChange */
+  value?: RootPropsT<Value, Multiple>['value'];
+  /** Выбранное значение при первом рендере — неконтролируемый режим */
+  defaultValue?: RootPropsT<Value, Multiple>['defaultValue'];
+  /** Выбрано другое значение */
+  onValueChange?: RootPropsT<Value, Multiple>['onValueChange'];
+  /** Текст в поле — контролируемый режим, вместе с onInputValueChange */
+  inputValue?: string;
+  /** Текст в поле при первом рендере */
+  defaultInputValue?: string;
+  /** Изменился текст в поле: новый текст */
+  onInputValueChange?: (inputValue: string, eventDetails: Combobox.Root.ChangeEventDetails) => void;
+  /** Список открыт — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Список открыт при первом рендере */
+  defaultOpen?: boolean;
+  /** Список открыли или закрыли: новое состояние */
+  onOpenChange?: (open: boolean, eventDetails: Combobox.Root.OpenChangeEventDetails) => void;
+  /** Анимация открытия или закрытия закончилась */
+  onOpenChangeComplete?: (open: boolean) => void;
+  /** Открывать список нажатием на поле. По умолчанию true */
+  openOnInputClick?: boolean;
+  /** Подсвечивать первый подходящий пункт при вводе, чтобы выбрать его Enter */
+  autoHighlight?: boolean;
+  /** Подсвечивать пункты наведением мыши. По умолчанию true */
+  highlightItemOnHover?: boolean;
+  /** Подсвечен другой пункт: его значение или undefined */
+  onItemHighlighted?: RootPropsT<Value, Multiple>['onItemHighlighted'];
+  /** Стрелки переходят с последнего пункта на первый и обратно. По умолчанию true */
+  loopFocus?: boolean;
+  /** Объект-значение → текст в поле. Для { value, label } не нужен: берётся label */
+  itemToStringLabel?: RootPropsT<Value, Multiple>['itemToStringLabel'];
+  /** Объект-значение → строка для отправки формы. Для { value, label } берётся value */
+  itemToStringValue?: RootPropsT<Value, Multiple>['itemToStringValue'];
+  /** Сравнение пункта с выбранным значением, если объекты не совпадают по ссылке */
+  isItemEqualToValue?: RootPropsT<Value, Multiple>['isItemEqualToValue'];
+  /** Сколько пунктов показывать после фильтрации; -1 — все. По умолчанию -1 */
+  limit?: number;
+  /** Локаль для сравнения строк при фильтрации */
+  locale?: Intl.LocalesArgument;
+  /** Список виртуализирован: пункты получают index вручную */
+  virtualized?: boolean;
+  /** Список встроен в страницу, а не во всплывающее окно */
+  inline?: boolean;
+  /** Блокировать прокрутку и нажатия вне списка, пока он открыт */
+  modal?: boolean;
+  /** Отключить комбобокс */
+  disabled?: boolean;
+  /** Только чтение: значение видно, но не меняется */
+  readOnly?: boolean;
+  /** Обязательное поле формы */
+  required?: boolean;
+  /** Имя поля в форме */
+  name?: string;
+  /** id формы, к которой относится поле, если оно вне её */
+  form?: string;
+  /** id скрытого поля формы */
+  id?: string;
+  /** Подсказка браузеру для автозаполнения */
+  autoComplete?: string;
+  /** Ref на поле ввода */
+  inputRef?: Ref<HTMLInputElement>;
+  /** Ref с методами: close() — закрыть список, unmount() — убрать после своей анимации */
+  actionsRef?: RefObject<Combobox.Root.Actions | null>;
+};
+/**
+ * Пропсы выбранного значения
+ */
+export type ComboboxValuePropsT = {
+  /** Своё отображение: функция от выбранного значения или готовый узел */
+  children?: ReactNode | ((selectedValue: any) => ReactNode);
+  /** Текст, пока ничего не выбрано */
+  placeholder?: ReactNode;
+};
+/**
+ * Пропсы кнопки открытия
+ */
+export type ComboboxTriggerPropsT = PartPropsT<Omit<Combobox.Trigger.Props, 'disabled' | 'nativeButton'>> & {
+  /** Отключить кнопку */
+  disabled?: boolean;
+  /** render отрисовывает настоящий button. false — если там другой элемент. По умолчанию true */
+  nativeButton?: boolean;
+};
+/**
+ * Пропсы кнопки очистки
+ */
+export type ComboboxClearPropsT = PartPropsT<Omit<Combobox.Clear.Props, 'disabled' | 'keepMounted' | 'nativeButton'>> & {
+  /** Отключить кнопку */
+  disabled?: boolean;
+  /** Оставлять кнопку в DOM, когда очищать нечего */
+  keepMounted?: boolean;
+  /** render отрисовывает настоящий button. false — если там другой элемент. По умолчанию true */
+  nativeButton?: boolean;
+};
+/**
+ * Пропсы поля
+ */
+export type ComboboxInputPropsT = PartPropsT<Omit<Combobox.Input.Props, 'disabled'>> & {
+  /** Отключить поле и кнопки */
+  disabled?: boolean;
+  /** Показать стрелку, открывающую список. По умолчанию true */
+  showTrigger?: boolean;
+  /** Показать крестик очистки, когда есть значение */
+  showClear?: boolean;
+};
+/**
+ * Пропсы списка во всплывающем окне
+ */
+export type ComboboxContentPropsT = PartPropsT<Omit<Combobox.Popup.Props, 'initialFocus' | 'finalFocus'>> & {
+  /** Сторона поля, с которой появляется окно; при нехватке места окно перевернётся. По умолчанию bottom */
+  side?: FloatingSideT;
+  /** Расстояние от поля в px. По умолчанию 6 */
+  sideOffset?: number;
+  /** Выравнивание вдоль стороны поля. По умолчанию start */
+  align?: FloatingAlignT;
+  /** Сдвиг от выравнивания в px. По умолчанию 0 */
+  alignOffset?: number;
+  /** Элемент, к которому привязано окно, вместо поля: обычно ComboboxChips через useComboboxAnchor */
+  anchor?: Combobox.Positioner.Props['anchor'];
+  /** Куда поставить фокус при открытии: true — по умолчанию, false — не двигать, ref — на элемент */
+  initialFocus?: Combobox.Popup.Props['initialFocus'];
+  /** Куда вернуть фокус при закрытии: true — по умолчанию, false — не двигать, ref — на элемент */
+  finalFocus?: Combobox.Popup.Props['finalFocus'];
+};
+/**
+ * Пропсы списка пунктов
+ */
+export type ComboboxListPropsT = PartPropsT<Omit<Combobox.List.Props, 'children'>> & {
+  /** Пункты: функция от пункта из items (item, index) или готовые ComboboxItem */
+  children?: ReactNode | ((item: any, index: number) => ReactNode);
+};
+/**
+ * Пропсы пункта
+ */
+export type ComboboxItemPropsT = PartPropsT<Omit<Combobox.Item.Props, 'value' | 'index' | 'disabled' | 'nativeButton'>> & {
+  /** Значение пункта: строка или объект из items */
+  value?: unknown;
+  /** Номер пункта — только для виртуализированного списка */
+  index?: number;
+  /** Отключить пункт */
+  disabled?: boolean;
+  /** Ссылка на элемент пункта */
+  ref?: Ref<HTMLDivElement>;
+  /** render отрисовывает настоящий button. По умолчанию false */
+  nativeButton?: boolean;
+};
+/**
+ * Пропсы группы
+ */
+export type ComboboxGroupPropsT = PartPropsT<Omit<Combobox.Group.Props, 'items'>> & {
+  /** Пункты группы — для ComboboxCollection внутри */
+  items?: readonly unknown[];
+};
+/**
+ * Пропсы подписи группы
+ */
+export type ComboboxLabelPropsT = PartPropsT<Combobox.GroupLabel.Props>;
+/**
+ * Пропсы коллекции
+ */
+export type ComboboxCollectionPropsT = {
+  /** Функция от пункта группы: (item, index) => ComboboxItem */
+  children: (item: any, index: number) => ReactNode;
+};
+/**
+ * Пропсы пустого результата
+ */
+export type ComboboxEmptyPropsT = PartPropsT<Combobox.Empty.Props>;
+/**
+ * Пропсы разделителя
+ */
+export type ComboboxSeparatorPropsT = PartPropsT<Omit<Combobox.Separator.Props, 'orientation'>> & {
+  /** Направление: horizontal — линия поперёк списка. По умолчанию horizontal */
+  orientation?: 'horizontal' | 'vertical';
+};
+/**
+ * Пропсы поля с чипами
+ */
+export type ComboboxChipsPropsT = PartPropsT<Combobox.Chips.Props>;
+/**
+ * Пропсы чипа
+ */
+export type ComboboxChipPropsT = PartPropsT<Combobox.Chip.Props> & {
+  /** Показать крестик удаления. По умолчанию true */
+  showRemove?: boolean;
+  /** Подпись крестика для скринридеров. По умолчанию «Удалить» */
+  removeLabel?: string;
+};
+/**
+ * Пропсы поля ввода среди чипов
+ */
+export type ComboboxChipsInputPropsT = PartPropsT<Omit<Combobox.Input.Props, 'disabled'>> & {
+  /** Отключить поле */
+  disabled?: boolean;
+};

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

@@ -0,0 +1,55 @@
+import { CommandDialogPropsT, CommandEmptyPropsT, CommandGroupPropsT, CommandInputPropsT, CommandItemPropsT, CommandListPropsT, CommandPropsT, CommandSeparatorPropsT, CommandShortcutPropsT } from "./types.js";
+/**
+ * Палитра команд: поле поиска и список, который фильтруется по мере ввода
+ * @param props - пропсы палитры; value — выделенный пункт, shouldFilter, filter, loop — как в cmdk
+ * @returns div
+ */
+export declare function Command({ className, ...props }: CommandPropsT): import("react").JSX.Element;
+/**
+ * Палитра в диалоге: окно в верхней трети экрана, обычно открывается по ⌘K
+ * @param props - пропсы диалога; внутрь кладутся CommandInput и CommandList — Command уже есть
+ * @returns диалог
+ */
+export declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: CommandDialogPropsT): import("react").JSX.Element;
+/**
+ * Поле поиска: фильтрует список, слева иконка лупы
+ * @param props - пропсы поля; value и onValueChange — текст поиска
+ * @returns обёртка с полем
+ */
+export declare function CommandInput({ className, ...props }: CommandInputPropsT): import("react").JSX.Element;
+/**
+ * Список пунктов: прокручивается, не выше 18rem
+ * @param props - пропсы списка; label — подпись для скринридеров, по умолчанию «Варианты»
+ * @returns div
+ */
+export declare function CommandList({ className, label, ...props }: CommandListPropsT): import("react").JSX.Element;
+/**
+ * Пустой результат: показывается, когда ничего не нашлось
+ * @param props - пропсы; children по умолчанию «Ничего не найдено»
+ * @returns div
+ */
+export declare function CommandEmpty({ className, children, ...props }: CommandEmptyPropsT): import("react").JSX.Element;
+/**
+ * Группа пунктов с заголовком heading
+ * @param props - пропсы группы
+ * @returns div
+ */
+export declare function CommandGroup({ className, ref, ...props }: CommandGroupPropsT): import("react").JSX.Element;
+/**
+ * Разделитель между группами
+ * @param props - пропсы разделителя
+ * @returns div
+ */
+export declare function CommandSeparator({ className, ...props }: CommandSeparatorPropsT): import("react").JSX.Element;
+/**
+ * Пункт списка. data-checked={true} показывает галочку справа
+ * @param props - пропсы пункта; onSelect — пункт выбран, value — по нему идёт поиск
+ * @returns div с role="option"
+ */
+export declare function CommandItem({ className, children, ref, ...props }: CommandItemPropsT): import("react").JSX.Element;
+/**
+ * Сочетание клавиш справа в пункте
+ * @param props - пропсы
+ * @returns span
+ */
+export declare function CommandShortcut({ className, ...props }: CommandShortcutPropsT): import("react").JSX.Element;

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;