@archytechtor/ui 0.0.0-stage → 0.1.0

package/dist/components/code-block/use-highlighted-code.js

@@ -0,0 +1,67 @@
+"use client";
+import { loadHighlighter } from "./highlighter.js";
+import { useEffect, useMemo, useState } from "react";
+// src/components/code-block/use-highlighted-code.ts
+/**
+* Подсветить код по строкам. Пока язык загружается — строки без подсветки.
+* При потоковом коде подсвечиваются только новые строки, начиная с состояния последней
+* @param value - код
+* @param language - имя языка: ts, tsx, json, bash, ansi…
+* @returns по узлу React на строку — для CodeBlockLine
+*/
+function useHighlightedCode(value, language) {
+	const code = value.endsWith("\n") ? value.slice(0, -1) : value;
+	const [loaded, setLoaded] = useState(null);
+	const highlighter = loaded?.language === language ? loaded.highlighter : null;
+	useEffect(() => {
+		let isCancelled = false;
+		/**
+		* Сохранить загруженную подсветку, если язык ещё актуален
+		* @param next - подсветка
+		*/
+		const saveHighlighter = (next) => {
+			if (!isCancelled) setLoaded({
+				language,
+				highlighter: next
+			});
+		};
+		loadHighlighter(language).then(saveHighlighter).catch(() => void 0);
+		return () => {
+			isCancelled = true;
+		};
+	}, [language]);
+	const [done, setDone] = useState({
+		highlighter: null,
+		text: "",
+		lines: []
+	});
+	let next = done;
+	if (next.highlighter !== highlighter || !code.startsWith(next.text)) next = {
+		highlighter,
+		text: "",
+		lines: []
+	};
+	const end = code.lastIndexOf("\n") + 1;
+	if (highlighter !== null && end > next.text.length) {
+		const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);
+		next = {
+			highlighter,
+			text: code.slice(0, end),
+			lines: next.lines.concat(result.lines),
+			state: result.state
+		};
+	}
+	if (next !== done) setDone(next);
+	const tail = code.slice(end);
+	return useMemo(() => {
+		if (highlighter === null) return code.split("\n");
+		const tailLine = highlighter.highlight(tail, next.state).lines[0];
+		return next.lines.concat([tailLine]);
+	}, [
+		code,
+		highlighter,
+		next,
+		tail
+	]);
+}
+export { useHighlightedCode };

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,19 @@
+import { CollapsibleContentPropsT, CollapsiblePropsT, CollapsibleTriggerPropsT } from "./types.js";
+/**
+ * Раскрывающийся блок: показывает и скрывает содержимое по нажатию на переключатель
+ * @param props - пропсы блока
+ * @returns обёртка переключателя и содержимого
+ */
+export declare function Collapsible({ onOpenChange, ...props }: CollapsiblePropsT): import("react").JSX.Element;
+/**
+ * Переключатель: кнопка, которая раскрывает и скрывает содержимое. Свою кнопку — через render={<Button />}
+ * @param props - пропсы переключателя
+ * @returns кнопка с aria-expanded
+ */
+export declare function CollapsibleTrigger(props: CollapsibleTriggerPropsT): import("react").JSX.Element;
+/**
+ * Содержимое: видно, пока блок раскрыт
+ * @param props - пропсы содержимого
+ * @returns раскрываемый блок
+ */
+export declare function CollapsibleContent(props: CollapsibleContentPropsT): import("react").JSX.Element;

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+// src/components/collapsible/collapsible.tsx
+/**
+* Раскрывающийся блок: показывает и скрывает содержимое по нажатию на переключатель
+* @param props - пропсы блока
+* @returns обёртка переключателя и содержимого
+*/
+function Collapsible$1({ onOpenChange, ...props }) {
+	/**
+	* Блок раскрыли или скрыли: наружу только флаг
+	* @param open - раскрыт ли
+	*/
+	const handleOpenChange = (open) => onOpenChange?.(open);
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "collapsible",
+		onOpenChange: handleOpenChange,
+		...props
+	});
+}
+/**
+* Переключатель: кнопка, которая раскрывает и скрывает содержимое. Свою кнопку — через render={<Button />}
+* @param props - пропсы переключателя
+* @returns кнопка с aria-expanded
+*/
+function CollapsibleTrigger(props) {
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		"data-slot": "collapsible-trigger",
+		...props
+	});
+}
+/**
+* Содержимое: видно, пока блок раскрыт
+* @param props - пропсы содержимого
+* @returns раскрываемый блок
+*/
+function CollapsibleContent(props) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		"data-slot": "collapsible-content",
+		...props
+	});
+}
+export { Collapsible$1 as Collapsible, CollapsibleContent, CollapsibleTrigger };

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

@@ -0,0 +1,3 @@
+import { CollapsibleContentPropsT, CollapsiblePropsT, CollapsibleTriggerPropsT } from "./types.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+export { Collapsible, CollapsibleContent, type CollapsibleContentPropsT, type CollapsiblePropsT, CollapsibleTrigger, type CollapsibleTriggerPropsT };

package/dist/components/collapsible/index.js

@@ -0,0 +1 @@
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";

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

@@ -0,0 +1,26 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { Collapsible } from "@base-ui/react/collapsible";
+/**
+ * Пропсы раскрывающегося блока
+ */
+export type CollapsiblePropsT = PartPropsT<Omit<Collapsible.Root.Props, 'onOpenChange'>> & {
+  /** Блок раскрыт — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Блок раскрыт при первом рендере — неконтролируемый режим */
+  defaultOpen?: boolean;
+  /** Блок раскрыли или скрыли: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+  /** Отключить переключение */
+  disabled?: boolean;
+};
+/**
+ * Пропсы переключателя
+ */
+export type CollapsibleTriggerPropsT = PartPropsT<Collapsible.Trigger.Props>;
+/**
+ * Пропсы содержимого
+ */
+export type CollapsibleContentPropsT = PartPropsT<Collapsible.Panel.Props> & {
+  /** Держать содержимое в DOM, даже когда блок скрыт: для поиска по странице и своих анимаций */
+  keepMounted?: boolean;
+};

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

@@ -0,0 +1,104 @@
+import { ComboboxChipPropsT, ComboboxChipsInputPropsT, ComboboxChipsPropsT, ComboboxClearPropsT, ComboboxCollectionPropsT, ComboboxContentPropsT, ComboboxEmptyPropsT, ComboboxGroupPropsT, ComboboxInputPropsT, ComboboxItemPropsT, ComboboxLabelPropsT, ComboboxListPropsT, ComboboxPropsT, ComboboxSeparatorPropsT, ComboboxTriggerPropsT, ComboboxValuePropsT } from "./types.js";
+/**
+ * Комбобокс: поле с поиском и выпадающим списком, выбор одного или нескольких значений
+ * @param props - пропсы комбобокса; items — пункты, по ним идёт фильтрация
+ * @returns корень без своей разметки
+ */
+export declare function Combobox<Value, Multiple extends boolean | undefined = false>(props: ComboboxPropsT<Value, Multiple>): import("react").JSX.Element;
+/**
+ * Выбранное значение: текст выбранного пункта или функция для своего отображения
+ * @param props - пропсы значения
+ * @returns текст без своей разметки
+ */
+export declare function ComboboxValue(props: ComboboxValuePropsT): import("react").JSX.Element;
+/**
+ * Кнопка открытия списка: справа стрелка вниз
+ * @param props - пропсы кнопки; render — оформить другим элементом, например Button
+ * @returns кнопка
+ */
+export declare function ComboboxTrigger({ className, children, ...props }: ComboboxTriggerPropsT): import("react").JSX.Element;
+/**
+ * Кнопка очистки: крестик, сбрасывает выбранное значение и текст
+ * @param props - пропсы кнопки; aria-label по умолчанию «Очистить»
+ * @returns кнопка
+ */
+export declare function ComboboxClear({ className, 'aria-label': ariaLabel, ...props }: ComboboxClearPropsT): import("react").JSX.Element;
+/**
+ * Поле с поиском: ввод фильтрует список, справа стрелка и крестик очистки.
+ * В children можно положить InputGroupAddon с иконкой
+ * @param props - пропсы поля; className уходит на рамку InputGroup
+ * @returns группа поля
+ */
+export declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxInputPropsT): import("react").JSX.Element;
+/**
+ * Всплывающее окно со списком: рендерится в портале под полем, шириной с поле.
+ * Внутрь кладутся ComboboxEmpty и ComboboxList, при необходимости ComboboxInput
+ * @param props - пропсы окна; по умолчанию side="bottom", align="start", sideOffset={6}
+ * @returns портал с окном
+ */
+export declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxContentPropsT): import("react").JSX.Element;
+/**
+ * Список пунктов: прокручивается внутри окна
+ * @param props - пропсы списка; children — функция (item, index) => ComboboxItem
+ * @returns div с role="listbox"
+ */
+export declare function ComboboxList({ className, ...props }: ComboboxListPropsT): import("react").JSX.Element;
+/**
+ * Пункт списка: у выбранного справа галочка
+ * @param props - пропсы пункта; value — значение пункта
+ * @returns div с role="option"
+ */
+export declare function ComboboxItem({ className, children, ref, ...props }: ComboboxItemPropsT): import("react").JSX.Element;
+/**
+ * Группа пунктов с подписью ComboboxLabel
+ * @param props - пропсы группы
+ * @returns div с role="group"
+ */
+export declare function ComboboxGroup({ className, ...props }: ComboboxGroupPropsT): import("react").JSX.Element;
+/**
+ * Подпись группы: мелкий приглушённый текст
+ * @param props - пропсы подписи
+ * @returns div
+ */
+export declare function ComboboxLabel({ className, ...props }: ComboboxLabelPropsT): import("react").JSX.Element;
+/**
+ * Коллекция: отрисовывает пункты группы из ComboboxGroup items
+ * @param props - пропсы коллекции
+ * @returns пункты без своей разметки
+ */
+export declare function ComboboxCollection(props: ComboboxCollectionPropsT): import("react").JSX.Element;
+/**
+ * Пустой результат: показывается, когда ничего не нашлось
+ * @param props - пропсы; children по умолчанию «Ничего не найдено»
+ * @returns div
+ */
+export declare function ComboboxEmpty({ className, children, ...props }: ComboboxEmptyPropsT): import("react").JSX.Element;
+/**
+ * Разделитель между группами
+ * @param props - пропсы разделителя
+ * @returns div с role="separator"
+ */
+export declare function ComboboxSeparator({ className, ...props }: ComboboxSeparatorPropsT): import("react").JSX.Element;
+/**
+ * Поле с чипами для выбора нескольких значений: чипы и ComboboxChipsInput в общей рамке
+ * @param props - пропсы поля; ref передайте в anchor у ComboboxContent
+ * @returns div
+ */
+export declare function ComboboxChips({ className, ...props }: ComboboxChipsPropsT): import("react").JSX.Element;
+/**
+ * Чип выбранного значения: текст и крестик удаления
+ * @param props - пропсы чипа
+ * @returns div
+ */
+export declare function ComboboxChip({ className, children, showRemove, removeLabel, ...props }: ComboboxChipPropsT): import("react").JSX.Element;
+/**
+ * Поле ввода среди чипов: занимает оставшееся место в строке
+ * @param props - пропсы поля
+ * @returns input
+ */
+export declare function ComboboxChipsInput({ className, ...props }: ComboboxChipsInputPropsT): import("react").JSX.Element;
+/**
+ * Ref для привязки окна к полю с чипами: передайте в ComboboxChips ref и в ComboboxContent anchor
+ * @returns ref на div
+ */
+export declare function useComboboxAnchor(): import("react").RefObject<HTMLDivElement | null>;

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";