@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/code-block/highlighter.js

@@ -0,0 +1,123 @@
+import { jsx } from "react/jsx-runtime";
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+// src/components/code-block/highlighter.tsx
+/** Поддерживаемые языки: каждый загружается при первом использовании */
+const languages = {
+	bash: () => import("shiki/langs/shellscript.mjs"),
+	css: () => import("shiki/langs/css.mjs"),
+	diff: () => import("shiki/langs/diff.mjs"),
+	html: () => import("shiki/langs/html.mjs"),
+	javascript: () => import("shiki/langs/javascript.mjs"),
+	json: () => import("shiki/langs/json.mjs"),
+	jsx: () => import("shiki/langs/jsx.mjs"),
+	markdown: () => import("shiki/langs/markdown.mjs"),
+	python: () => import("shiki/langs/python.mjs"),
+	sql: () => import("shiki/langs/sql.mjs"),
+	tsx: () => import("shiki/langs/tsx.mjs"),
+	typescript: () => import("shiki/langs/typescript.mjs"),
+	yaml: () => import("shiki/langs/yaml.mjs")
+};
+/** Другие имена языков */
+const aliases = {
+	js: "javascript",
+	md: "markdown",
+	py: "python",
+	sh: "bash",
+	shell: "bash",
+	shellscript: "bash",
+	ts: "typescript",
+	yml: "yaml",
+	zsh: "bash"
+};
+let highlighterPromise;
+/**
+* Получить общий экземпляр shiki со светлой и тёмной темой
+* @returns экземпляр shiki
+*/
+function getHighlighter() {
+	highlighterPromise ??= createHighlighterCore({
+		themes: [import("shiki/themes/one-light.mjs"), import("shiki/themes/one-dark-pro.mjs")],
+		langs: [],
+		engine: createJavaScriptRegexEngine({ forgiving: true })
+	});
+	return highlighterPromise;
+}
+/**
+* Найти язык по имени или псевдониму
+* @param language - имя языка
+* @returns язык, ansi или null, если язык не поддерживается
+*/
+function getLanguage(language) {
+	const name = language.toLowerCase();
+	if (name === "ansi") return name;
+	if (name in languages) return name;
+	return aliases[name] ?? null;
+}
+/**
+* Отрисовать строку токенов: цвет светлой и тёмной темы в CSS-переменных
+* @param line - токены строки
+* @returns узлы строки
+*/
+function renderLine(line) {
+	const nodes = [];
+	line.forEach((token, index) => {
+		nodes.push(/* @__PURE__ */ jsx("span", {
+			style: token.htmlStyle,
+			className: "text-(--shiki-light) dark:text-(--shiki-dark)",
+			children: token.content
+		}, index));
+	});
+	return nodes;
+}
+/**
+* Загрузить язык и вернуть подсветку для него
+* @param language - имя языка: ts, tsx, json, bash, ansi…
+* @returns подсветка или null для языка не из списка
+*/
+async function loadHighlighter(language) {
+	const lang = getLanguage(language);
+	if (lang === null) return null;
+	const shiki = await getHighlighter();
+	if (lang !== "ansi" && !shiki.getLoadedLanguages().includes(lang)) await shiki.loadLanguage(languages[lang]);
+	/**
+	* Подсветить код
+	* @param code - код
+	* @param state - состояние грамматики, с которого продолжить
+	* @returns строки и состояние грамматики после последней
+	*/
+	const highlight = (code, state) => {
+		/**
+		* Разбить текст на токены
+		* @param text - текст
+		* @returns строки токенов
+		*/
+		const tokenize = (text) => shiki.codeToTokens(text, {
+			lang,
+			themes: {
+				light: "one-light",
+				dark: "one-dark-pro"
+			},
+			defaultColor: false,
+			grammarState: state
+		}).tokens;
+		const tokens = lang === "ansi" ? code.split("\n").flatMap((line) => tokenize(line)) : tokenize(code);
+		return {
+			lines: tokens.map(renderLine),
+			state: shiki.getLastGrammarState(tokens)
+		};
+	};
+	return { highlight };
+}
+/**
+* Подсветить код целиком
+* @param code - код
+* @param language - имя языка
+* @returns по узлу React на строку или null для языка не из списка
+*/
+async function highlightCode(code, language) {
+	const highlighter = await loadHighlighter(language);
+	if (highlighter === null) return null;
+	return highlighter.highlight(code).lines;
+}
+export { highlightCode, loadHighlighter };

package/dist/components/code-block/index.d.ts

@@ -0,0 +1,5 @@
+import { CodeBlockActionsPropsT, CodeBlockContentPropsT, CodeBlockCopyButtonPropsT, CodeBlockFooterPropsT, CodeBlockHeaderPropsT, CodeBlockLinePropsT, CodeBlockPropsT, CodeBlockTitlePropsT, CodeHighlighterI, HighlightResultI, codeBlockLineVariants, codeBlockVariants } from "./types.js";
+import { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle } from "./code-block.js";
+import { highlightCode, loadHighlighter } from "./highlighter.js";
+import { useHighlightedCode } from "./use-highlighted-code.js";
+export { CodeBlock, CodeBlockActions, type CodeBlockActionsPropsT, CodeBlockContent, type CodeBlockContentPropsT, CodeBlockCopyButton, type CodeBlockCopyButtonPropsT, CodeBlockFooter, type CodeBlockFooterPropsT, CodeBlockHeader, type CodeBlockHeaderPropsT, CodeBlockLine, type CodeBlockLinePropsT, type CodeBlockPropsT, CodeBlockTitle, type CodeBlockTitlePropsT, type CodeHighlighterI, type HighlightResultI, codeBlockLineVariants, codeBlockVariants, highlightCode, loadHighlighter, useHighlightedCode };

package/dist/components/code-block/index.js

@@ -0,0 +1,5 @@
+import { codeBlockLineVariants, codeBlockVariants } from "./types.js";
+import { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle } from "./code-block.js";
+import { highlightCode, loadHighlighter } from "./highlighter.js";
+import { useHighlightedCode } from "./use-highlighted-code.js";
+export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, codeBlockLineVariants, codeBlockVariants, highlightCode, loadHighlighter, useHighlightedCode };

package/dist/components/code-block/types.d.ts

@@ -0,0 +1,94 @@
+import { ButtonPropsT } from "../button/types.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps, ReactNode } from "react";
+import { GrammarState } from "shiki/core";
+/**
+ * Стили блока кода: обычный или блок ошибки
+ */
+export declare const codeBlockVariants: (props?: ({
+  variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Стили строки кода: обычная, подсвеченная, добавленная или удалённая
+ */
+export declare const codeBlockLineVariants: (props?: ({
+  variant?: "default" | "added" | "removed" | "highlighted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Вариант оформления блока кода
+ */
+export type CodeBlockVariantsT = VariantProps<typeof codeBlockVariants>;
+/**
+ * Вариант строки кода
+ */
+export type CodeBlockLineVariantsT = VariantProps<typeof codeBlockLineVariants>;
+/**
+ * Пропсы блока кода
+ */
+export type CodeBlockPropsT = ComponentProps<'div'> & {
+  /** Оформление: default — обычный код, destructive — вывод ошибки */
+  variant?: CodeBlockVariantsT['variant'];
+  /** Размер: default или sm — мельче шрифт и отступы */
+  size?: 'default' | 'sm';
+};
+/**
+ * Пропсы шапки блока кода
+ */
+export type CodeBlockHeaderPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы заголовка блока кода
+ */
+export type CodeBlockTitlePropsT = ComponentProps<'div'>;
+/**
+ * Пропсы действий блока кода
+ */
+export type CodeBlockActionsPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы кнопки копирования
+ */
+export type CodeBlockCopyButtonPropsT = ButtonPropsT & {
+  /** Текст, который копируется в буфер обмена */
+  value: string;
+  /** Подпись кнопки для скринридера, по умолчанию «Копировать» */
+  copyLabel?: string;
+  /** Подпись после копирования и объявление для скринридера, по умолчанию «Скопировано» */
+  copiedLabel?: string;
+};
+/**
+ * Пропсы содержимого блока кода
+ */
+export type CodeBlockContentPropsT = ComponentProps<'pre'> & {
+  /** Переносить длинные строки вместо горизонтальной прокрутки */
+  wrap?: boolean;
+  /** Показывать номера строк */
+  lineNumbers?: boolean;
+  /** Номер первой строки, по умолчанию 1 */
+  startLine?: number;
+};
+/**
+ * Пропсы строки кода
+ */
+export type CodeBlockLinePropsT = ComponentProps<'span'> & {
+  /** Оформление: default, highlighted — подсвечена, added — добавлена (+), removed — удалена (−) */
+  variant?: CodeBlockLineVariantsT['variant'];
+};
+/**
+ * Пропсы подвала блока кода
+ */
+export type CodeBlockFooterPropsT = ComponentProps<'div'>;
+/**
+ * Результат подсветки
+ * @property lines - по узлу React на строку
+ * @property state - состояние грамматики после последней строки: продолжить подсветку с того же места
+ */
+export interface HighlightResultI {
+  lines: ReactNode[];
+  state?: GrammarState;
+}
+/**
+ * Подсветка для одного языка
+ * @property highlight - подсветить код, продолжая с состояния грамматики
+ */
+export interface CodeHighlighterI {
+  highlight: (code: string, state?: GrammarState) => HighlightResultI;
+}

package/dist/components/code-block/types.js

@@ -0,0 +1,38 @@
+import { cva } from "class-variance-authority";
+// src/components/code-block/types.ts
+/**
+* Стили блока кода: обычный или блок ошибки
+*/
+const codeBlockVariants = cva([
+	"group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg text-sm",
+	"data-[size=sm]:text-xs",
+	"keyboard:has-[>[data-slot=code-block-content]:focus-visible]:ring-3",
+	"keyboard:has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50"
+], {
+	variants: { variant: {
+		default: "bg-muted text-foreground ring-1 ring-foreground/5 dark:ring-foreground/10",
+		destructive: ["bg-destructive/5 text-destructive ring-1 ring-destructive/15", "dark:bg-destructive/10 dark:ring-destructive/20"]
+	} },
+	defaultVariants: { variant: "default" }
+});
+/**
+* Стили строки кода: обычная, подсвеченная, добавленная или удалённая
+*/
+const codeBlockLineVariants = cva([
+	"relative -mx-3 block min-h-lh px-3 group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5",
+	"after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none",
+	"in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3",
+	"in-data-numbered:[counter-increment:line]",
+	"in-data-numbered:before:min-w-6 in-data-numbered:before:text-end in-data-numbered:before:text-muted-foreground",
+	"in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none",
+	"in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']"
+], {
+	variants: { variant: {
+		default: "",
+		added: "bg-foreground/5 after:content-['+']",
+		removed: "bg-destructive/10 after:text-destructive after:content-['−']",
+		highlighted: "bg-foreground/5"
+	} },
+	defaultVariants: { variant: "default" }
+});
+export { codeBlockLineVariants, codeBlockVariants };

package/dist/components/code-block/use-highlighted-code.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+/**
+ * Подсветить код по строкам. Пока язык загружается — строки без подсветки.
+ * При потоковом коде подсвечиваются только новые строки, начиная с состояния последней
+ * @param value - код
+ * @param language - имя языка: ts, tsx, json, bash, ansi…
+ * @returns по узлу React на строку — для CodeBlockLine
+ */
+export declare function useHighlightedCode(value: string, language: string): ReactNode[];

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