@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/combobox/combobox.js

@@ -0,0 +1,365 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { Button } from "../button/button.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../input-group/input-group.js";
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+// src/components/combobox/combobox.tsx
+/**
+* Комбобокс: поле с поиском и выпадающим списком, выбор одного или нескольких значений
+* @param props - пропсы комбобокса; items — пункты, по ним идёт фильтрация
+* @returns корень без своей разметки
+*/
+function Combobox$1(props) {
+	return /* @__PURE__ */ jsx(Combobox.Root, { ...props });
+}
+/**
+* Выбранное значение: текст выбранного пункта или функция для своего отображения
+* @param props - пропсы значения
+* @returns текст без своей разметки
+*/
+function ComboboxValue(props) {
+	return /* @__PURE__ */ jsx(Combobox.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+/**
+* Кнопка открытия списка: справа стрелка вниз
+* @param props - пропсы кнопки; render — оформить другим элементом, например Button
+* @returns кнопка
+*/
+function ComboboxTrigger({ className, children, ...props }) {
+	const classes = cn("[&_svg:not([class*=size-])]:size-4", className);
+	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
+		"data-slot": "combobox-trigger",
+		className: classes,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
+			"data-slot": "combobox-trigger-icon",
+			className: "pointer-events-none size-4 text-muted-foreground"
+		})]
+	});
+}
+/**
+* Кнопка очистки: крестик, сбрасывает выбранное значение и текст
+* @param props - пропсы кнопки; aria-label по умолчанию «Очистить»
+* @returns кнопка
+*/
+function ComboboxClear({ className, "aria-label": ariaLabel = texts.clear, ...props }) {
+	const classes = cn(className);
+	const button = /* @__PURE__ */ jsx(InputGroupButton, {
+		variant: "ghost",
+		size: "icon-xs"
+	});
+	return /* @__PURE__ */ jsx(Combobox.Clear, {
+		"data-slot": "combobox-clear",
+		"aria-label": ariaLabel,
+		render: button,
+		className: classes,
+		...props,
+		children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+	});
+}
+/**
+* Поле с поиском: ввод фильтрует список, справа стрелка и крестик очистки.
+* В children можно положить InputGroupAddon с иконкой
+* @param props - пропсы поля; className уходит на рамку InputGroup
+* @returns группа поля
+*/
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+	const classes = cn("w-auto", className);
+	const input = /* @__PURE__ */ jsx(InputGroupInput, { disabled });
+	const triggerButton = /* @__PURE__ */ jsx(InputGroupButton, {
+		size: "icon-xs",
+		variant: "ghost",
+		"data-slot": "input-group-button",
+		className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+	});
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className: classes,
+		children: [
+			/* @__PURE__ */ jsx(Combobox.Input, {
+				render: input,
+				...props
+			}),
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-end",
+				children: [showTrigger && /* @__PURE__ */ jsx(ComboboxTrigger, {
+					"aria-label": texts.openList,
+					render: triggerButton,
+					disabled
+				}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
+			}),
+			children
+		]
+	});
+}
+/** Сколько мс после колеса, касания или клавиши прокрутка считается пользовательской */
+const USER_SCROLL_WINDOW = 300;
+/** Клавиши, которыми пользователь прокручивает страницу */
+const scrollKeys = /* @__PURE__ */ new Set([
+	"PageUp",
+	"PageDown",
+	"Home",
+	"End",
+	" "
+]);
+/**
+* Пока окно списка открыто, страница не прокручивается сама: прокрутку, которую вызвал
+* не пользователь (фокус, scrollIntoView, сдвиг раскладки), откатываем на прежнее место
+*/
+function usePageScrollGuard() {
+	useEffect(() => {
+		let left = window.scrollX;
+		let top = window.scrollY;
+		let userUntil = 0;
+		/** Пользователь крутит колесо, касается экрана или тянет полосу прокрутки */
+		const markUser = () => {
+			userUntil = performance.now() + USER_SCROLL_WINDOW;
+		};
+		/**
+		* Клавиша прокрутки страницы
+		* @param event - событие клавиатуры
+		*/
+		const handleKeyDown = (event) => {
+			if (scrollKeys.has(event.key)) markUser();
+		};
+		/** Прокрутка: своя — запоминаем место, чужая — возвращаем */
+		const handleScroll = () => {
+			if (performance.now() < userUntil) {
+				left = window.scrollX;
+				top = window.scrollY;
+				return;
+			}
+			if (window.scrollX !== left || window.scrollY !== top) window.scrollTo(left, top);
+		};
+		window.addEventListener("wheel", markUser, { passive: true });
+		window.addEventListener("touchmove", markUser, { passive: true });
+		window.addEventListener("pointerdown", markUser);
+		window.addEventListener("keydown", handleKeyDown);
+		window.addEventListener("scroll", handleScroll);
+		return () => {
+			window.removeEventListener("wheel", markUser);
+			window.removeEventListener("touchmove", markUser);
+			window.removeEventListener("pointerdown", markUser);
+			window.removeEventListener("keydown", handleKeyDown);
+			window.removeEventListener("scroll", handleScroll);
+		};
+	}, []);
+}
+/**
+* Защита прокрутки страницы: монтируется только вместе с открытым окном
+* @returns ничего не рисует
+*/
+function PageScrollGuard() {
+	usePageScrollGuard();
+	return null;
+}
+/**
+* Всплывающее окно со списком: рендерится в портале под полем, шириной с поле.
+* Внутрь кладутся ComboboxEmpty и ComboboxList, при необходимости ComboboxInput
+* @param props - пропсы окна; по умолчанию side="bottom", align="start", sideOffset={6}
+* @returns портал с окном
+*/
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+	const hasAnchor = Boolean(anchor);
+	const classes = cn("group/combobox-content", "relative", "max-h-72", "w-(--anchor-width)", "max-w-(--available-width)", "min-w-36", "min-w-[calc(var(--anchor-width)+--spacing(7))]", "origin-(--transform-origin)", "overflow-hidden", "rounded-lg", "bg-popover", "text-popover-foreground", "shadow-md", "ring-1", "ring-foreground/10", "duration-100", "data-[chips=true]:min-w-(--anchor-width)", "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", "*:data-[slot=input-group]:m-1", "*:data-[slot=input-group]:mb-0", "*:data-[slot=input-group]:h-8", "*:data-[slot=input-group]:border-input/30", "*:data-[slot=input-group]:bg-input/30", "*:data-[slot=input-group]:shadow-none", className);
+	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsxs(Combobox.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		anchor,
+		className: "isolate z-50",
+		children: [/* @__PURE__ */ jsx(PageScrollGuard, {}), /* @__PURE__ */ jsx(Combobox.Popup, {
+			"data-slot": "combobox-content",
+			"data-chips": hasAnchor,
+			className: classes,
+			...props
+		})]
+	}) });
+}
+/**
+* Список пунктов: прокручивается внутри окна
+* @param props - пропсы списка; children — функция (item, index) => ComboboxItem
+* @returns div с role="listbox"
+*/
+function ComboboxList({ className, ...props }) {
+	const classes = cn("max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))]", "scroll-py-1", "overflow-y-auto", "overscroll-contain", "p-1", "[scrollbar-width:none]", "data-empty:p-0", className);
+	return /* @__PURE__ */ jsx(Combobox.List, {
+		"data-slot": "combobox-list",
+		className: classes,
+		...props
+	});
+}
+/**
+* Прокрутить список так, чтобы пункт стал виден; страница при этом не двигается
+* @param item - пункт списка
+*/
+function scrollItemInList(item) {
+	const list = item.closest("[data-slot=combobox-list]");
+	if (!list) return;
+	const padding = Number.parseFloat(getComputedStyle(list).scrollPaddingTop) || 0;
+	const listRect = list.getBoundingClientRect();
+	const itemRect = item.getBoundingClientRect();
+	const top = listRect.top + padding;
+	const bottom = listRect.bottom - padding;
+	if (itemRect.top < top) list.scrollTop -= top - itemRect.top;
+	else if (itemRect.bottom > bottom) list.scrollTop += itemRect.bottom - bottom;
+}
+/**
+* Пункт списка: у выбранного справа галочка
+* @param props - пропсы пункта; value — значение пункта
+* @returns div с role="option"
+*/
+function ComboboxItem({ className, children, ref, ...props }) {
+	const classes = cn("relative", "flex", "w-full", "cursor-default", "items-center", "gap-2", "rounded-md", "py-1", "pr-8", "pl-1.5", "text-sm", "outline-hidden", "select-none", "data-highlighted:bg-accent", "data-highlighted:text-accent-foreground", "not-data-[variant=destructive]:data-highlighted:**: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", className);
+	const indicator = /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" });
+	/**
+	* Пункт подсвечивается с прокруткой (scrollIntoView): прокручиваем только список,
+	* иначе браузер двигает и страницу, если окно списка выходит за край экрана
+	* @param node - элемент пункта
+	*/
+	const itemRef = (node) => {
+		if (node) node.scrollIntoView = () => scrollItemInList(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		ref: itemRef,
+		"data-slot": "combobox-item",
+		className: classes,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			"data-slot": "combobox-item-indicator",
+			render: indicator,
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+		})]
+	});
+}
+/**
+* Группа пунктов с подписью ComboboxLabel
+* @param props - пропсы группы
+* @returns div с role="group"
+*/
+function ComboboxGroup({ className, ...props }) {
+	const classes = cn(className);
+	return /* @__PURE__ */ jsx(Combobox.Group, {
+		"data-slot": "combobox-group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Подпись группы: мелкий приглушённый текст
+* @param props - пропсы подписи
+* @returns div
+*/
+function ComboboxLabel({ className, ...props }) {
+	const classes = cn("px-2", "py-1.5", "text-xs", "text-muted-foreground", className);
+	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+		"data-slot": "combobox-label",
+		className: classes,
+		...props
+	});
+}
+/**
+* Коллекция: отрисовывает пункты группы из ComboboxGroup items
+* @param props - пропсы коллекции
+* @returns пункты без своей разметки
+*/
+function ComboboxCollection(props) {
+	return /* @__PURE__ */ jsx(Combobox.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+/**
+* Пустой результат: показывается, когда ничего не нашлось
+* @param props - пропсы; children по умолчанию «Ничего не найдено»
+* @returns div
+*/
+function ComboboxEmpty({ className, children = texts.empty, ...props }) {
+	const classes = cn("hidden", "w-full", "justify-center", "py-2", "text-center", "text-sm", "text-muted-foreground", "group-data-empty/combobox-content:flex", className);
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		"data-slot": "combobox-empty",
+		className: classes,
+		...props,
+		children
+	});
+}
+/**
+* Разделитель между группами
+* @param props - пропсы разделителя
+* @returns div с role="separator"
+*/
+function ComboboxSeparator({ className, ...props }) {
+	const classes = cn("-mx-1", "my-1", "h-px", "bg-border", className);
+	return /* @__PURE__ */ jsx(Combobox.Separator, {
+		"data-slot": "combobox-separator",
+		className: classes,
+		...props
+	});
+}
+/**
+* Поле с чипами для выбора нескольких значений: чипы и ComboboxChipsInput в общей рамке
+* @param props - пропсы поля; ref передайте в anchor у ComboboxContent
+* @returns div
+*/
+function ComboboxChips({ className, ...props }) {
+	const classes = cn("flex", "min-h-8", "flex-wrap", "items-center", "gap-1", "rounded-lg", "border", "border-input", "bg-transparent", "bg-clip-padding", "px-2.5", "py-1", "text-sm", "transition-colors", "dark:bg-input/30", "keyboard:focus-within:border-ring", "keyboard:focus-within:ring-3", "keyboard:focus-within:ring-ring/50", "has-aria-invalid:border-destructive", "has-aria-invalid:ring-3", "has-aria-invalid:ring-destructive/20", "dark:has-aria-invalid:border-destructive/50", "dark:has-aria-invalid:ring-destructive/40", "has-data-[slot=combobox-chip]:px-1", className);
+	return /* @__PURE__ */ jsx(Combobox.Chips, {
+		"data-slot": "combobox-chips",
+		className: classes,
+		...props
+	});
+}
+/**
+* Чип выбранного значения: текст и крестик удаления
+* @param props - пропсы чипа
+* @returns div
+*/
+function ComboboxChip({ className, children, showRemove = true, removeLabel = texts.delete, ...props }) {
+	const classes = cn("flex", "h-[calc(--spacing(5.25))]", "w-fit", "items-center", "justify-center", "gap-1", "rounded-sm", "bg-muted", "px-1.5", "text-xs", "font-medium", "whitespace-nowrap", "text-foreground", "has-data-[slot=combobox-chip-remove]:pr-0", "has-disabled:pointer-events-none", "has-disabled:cursor-not-allowed", "has-disabled:opacity-50", className);
+	const button = /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon-xs"
+	});
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		"data-slot": "combobox-chip",
+		className: classes,
+		...props,
+		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+			"data-slot": "combobox-chip-remove",
+			"aria-label": removeLabel,
+			render: button,
+			className: "-ml-1 opacity-50 hover:opacity-100",
+			children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+		})]
+	});
+}
+/**
+* Поле ввода среди чипов: занимает оставшееся место в строке
+* @param props - пропсы поля
+* @returns input
+*/
+function ComboboxChipsInput({ className, ...props }) {
+	const classes = cn("min-w-16", "flex-1", "outline-none", className);
+	return /* @__PURE__ */ jsx(Combobox.Input, {
+		"data-slot": "combobox-chip-input",
+		className: classes,
+		...props
+	});
+}
+/**
+* Ref для привязки окна к полю с чипами: передайте в ComboboxChips ref и в ComboboxContent anchor
+* @returns ref на div
+*/
+function useComboboxAnchor() {
+	return useRef(null);
+}
+export { Combobox$1 as Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };

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

@@ -0,0 +1,3 @@
+import { ComboboxChipPropsT, ComboboxChipsInputPropsT, ComboboxChipsPropsT, ComboboxClearPropsT, ComboboxCollectionPropsT, ComboboxContentPropsT, ComboboxEmptyPropsT, ComboboxGroupPropsT, ComboboxInputPropsT, ComboboxItemPropsT, ComboboxLabelPropsT, ComboboxListPropsT, ComboboxPropsT, ComboboxSeparatorPropsT, ComboboxTriggerPropsT, ComboboxValuePropsT } from "./types.js";
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./combobox.js";
+export { Combobox, ComboboxChip, type ComboboxChipPropsT, ComboboxChips, ComboboxChipsInput, type ComboboxChipsInputPropsT, type ComboboxChipsPropsT, ComboboxClear, type ComboboxClearPropsT, ComboboxCollection, type ComboboxCollectionPropsT, ComboboxContent, type ComboboxContentPropsT, ComboboxEmpty, type ComboboxEmptyPropsT, ComboboxGroup, type ComboboxGroupPropsT, ComboboxInput, type ComboboxInputPropsT, ComboboxItem, type ComboboxItemPropsT, ComboboxLabel, type ComboboxLabelPropsT, ComboboxList, type ComboboxListPropsT, type ComboboxPropsT, ComboboxSeparator, type ComboboxSeparatorPropsT, ComboboxTrigger, type ComboboxTriggerPropsT, ComboboxValue, type ComboboxValuePropsT, useComboboxAnchor };

package/dist/components/combobox/index.js

@@ -0,0 +1 @@
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./combobox.js";

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;