@archytechtor/ui 0.0.0-stage → 0.1.0

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,31 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+// src/components/checkbox/checkbox.tsx
+/**
+* Флажок: отметить или снять отметку
+* @param props - пропсы флажка
+* @returns элемент с role=checkbox
+*/
+function Checkbox$1({ className, onCheckedChange, ...props }) {
+	const classes = cn("peer", "relative", "flex", "size-4", "shrink-0", "items-center", "justify-center", "rounded-[4px]", "border", "border-input", "transition-colors", "outline-none", "group-has-disabled/field:opacity-50", "keyboard:group-has-[:focus-visible]/field-label:ring-0", "keyboard:group-has-[:focus-visible]/field-label:not-data-checked:border-input", "after:absolute", "after:-inset-x-3", "after:-inset-y-2", "focus-visible:border-ring", "focus-visible:ring-3", "focus-visible:ring-ring/50", "data-disabled:cursor-not-allowed", "data-disabled:opacity-50", "aria-invalid:border-destructive", "aria-invalid:ring-3", "aria-invalid:ring-destructive/20", "aria-invalid:aria-checked:border-primary", "aria-invalid:aria-[checked=mixed]:border-primary", "dark:bg-input/30", "dark:aria-invalid:border-destructive/50", "dark:aria-invalid:ring-destructive/40", "data-checked:border-primary", "data-checked:bg-primary", "data-checked:text-primary-foreground", "dark:data-checked:bg-primary", "keyboard:group-has-[:focus-visible]/field-label:data-checked:border-primary", "data-indeterminate:border-primary", "data-indeterminate:bg-primary", "data-indeterminate:text-primary-foreground", "dark:data-indeterminate:bg-primary", "keyboard:group-has-[:focus-visible]/field-label:data-indeterminate:border-primary", className);
+	/**
+	* Флажок переключили: наружу только состояние
+	* @param checked - отмечен ли
+	*/
+	const handleCheckedChange = (checked) => onCheckedChange?.(checked);
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: classes,
+		onCheckedChange: handleCheckedChange,
+		...props,
+		children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "group/checkbox-indicator grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			children: [/* @__PURE__ */ jsx(CheckIcon, { className: "group-data-indeterminate/checkbox-indicator:hidden" }), /* @__PURE__ */ jsx(MinusIcon, { className: "hidden group-data-indeterminate/checkbox-indicator:block" })]
+		})
+	});
+}
+export { Checkbox$1 as Checkbox };

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

@@ -0,0 +1,3 @@
+import { CheckboxPropsT } from "./types.js";
+import { Checkbox } from "./checkbox.js";
+export { Checkbox, type CheckboxPropsT };

package/dist/components/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from "./checkbox.js";

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

@@ -0,0 +1,25 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { Checkbox } from "@base-ui/react/checkbox";
+/**
+ * Пропсы флажка
+ */
+export type CheckboxPropsT = PartPropsT<Omit<Checkbox.Root.Props, 'onCheckedChange' | 'children'>> & {
+  /** Отмечен ли флажок — контролируемый режим, вместе с onCheckedChange */
+  checked?: boolean;
+  /** Отмечен ли флажок при первом рендере — неконтролируемый режим */
+  defaultChecked?: boolean;
+  /** Частично отмечен: черта вместо галочки, например у «выбрать все», когда выбрана часть */
+  indeterminate?: boolean;
+  /** Флажок отметили или сняли: новое состояние */
+  onCheckedChange?: (checked: boolean) => void;
+  /** Отключённое состояние: флажок не переключается */
+  disabled?: boolean;
+  /** Обязательное поле: форма не отправится, пока флажок не отмечен */
+  required?: boolean;
+  /** Имя поля при отправке формы */
+  name?: string;
+  /** Значение при отправке формы, по умолчанию on */
+  value?: string;
+  /** Ошибка: красная рамка и объявление скринридеру, что значение неверное */
+  'aria-invalid'?: boolean;
+};

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

@@ -0,0 +1,49 @@
+import { CodeBlockActionsPropsT, CodeBlockContentPropsT, CodeBlockCopyButtonPropsT, CodeBlockFooterPropsT, CodeBlockHeaderPropsT, CodeBlockLinePropsT, CodeBlockPropsT, CodeBlockTitlePropsT } from "./types.js";
+/**
+ * Блок кода: код или вывод терминала с шапкой и действиями
+ * @param props - пропсы блока
+ * @returns блок кода
+ */
+export declare function CodeBlock({ className, variant, size, ...props }: CodeBlockPropsT): import("react").JSX.Element;
+/**
+ * Шапка блока кода: заголовок и действия
+ * @param props - пропсы шапки
+ * @returns шапка
+ */
+export declare function CodeBlockHeader({ className, ...props }: CodeBlockHeaderPropsT): import("react").JSX.Element;
+/**
+ * Заголовок блока кода: имя файла, иконка
+ * @param props - пропсы заголовка
+ * @returns заголовок в одну строку
+ */
+export declare function CodeBlockTitle({ className, ...props }: CodeBlockTitlePropsT): import("react").JSX.Element;
+/**
+ * Действия блока кода: в шапке — справа, прямо в блоке — плавают в углу и появляются при наведении
+ * @param props - пропсы действий
+ * @returns блок действий
+ */
+export declare function CodeBlockActions({ className, ...props }: CodeBlockActionsPropsT): import("react").JSX.Element;
+/**
+ * Кнопка копирования: копирует value и на 2 секунды показывает галочку
+ * @param props - пропсы кнопки
+ * @returns кнопка и объявление для скринридера
+ */
+export declare function CodeBlockCopyButton({ value, variant, size, copyLabel, copiedLabel, className, onClick, ...props }: CodeBlockCopyButtonPropsT): import("react").JSX.Element;
+/**
+ * Содержимое блока кода: <pre> с прокруткой, фокусируется с клавиатуры для прокрутки стрелками
+ * @param props - пропсы содержимого
+ * @returns код
+ */
+export declare function CodeBlockContent({ className, children, style, wrap, lineNumbers, startLine, ...props }: CodeBlockContentPropsT): import("react").JSX.Element;
+/**
+ * Строка кода: номер строки и отметка изменения рисуются псевдоэлементами
+ * @param props - пропсы строки
+ * @returns строка
+ */
+export declare function CodeBlockLine({ className, variant, children, ...props }: CodeBlockLinePropsT): import("react").JSX.Element;
+/**
+ * Подвал блока кода: кнопка «Показать полностью», подпись
+ * @param props - пропсы подвала
+ * @returns подвал
+ */
+export declare function CodeBlockFooter({ className, ...props }: CodeBlockFooterPropsT): import("react").JSX.Element;

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

@@ -0,0 +1,188 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { Button } from "../button/button.js";
+import { codeBlockLineVariants, codeBlockVariants } from "./types.js";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+// src/components/code-block/code-block.tsx
+/** Сколько миллисекунд показывать отметку «Скопировано» */
+const COPIED_TIMEOUT = 2e3;
+/**
+* Блок кода: код или вывод терминала с шапкой и действиями
+* @param props - пропсы блока
+* @returns блок кода
+*/
+function CodeBlock({ className, variant = "default", size = "default", ...props }) {
+	const classes = cn(codeBlockVariants({ variant }), className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block",
+		"data-variant": variant,
+		"data-size": size,
+		className: classes,
+		...props
+	});
+}
+/**
+* Шапка блока кода: заголовок и действия
+* @param props - пропсы шапки
+* @returns шапка
+*/
+function CodeBlockHeader({ className, ...props }) {
+	const classes = cn("flex", "min-w-0", "shrink-0", "items-center", "gap-2", "px-3", "pt-3", "text-muted-foreground", "*:has-[>[data-slot=code-block-title]]:min-w-0", "group-data-[variant=destructive]/code-block:text-destructive", "group-data-[size=sm]/code-block:px-2.5", "group-data-[size=sm]/code-block:pt-2.5", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block-header",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок блока кода: имя файла, иконка
+* @param props - пропсы заголовка
+* @returns заголовок в одну строку
+*/
+function CodeBlockTitle({ className, ...props }) {
+	const classes = cn("min-w-0", "truncate", "font-sans", "text-sm", "font-medium", "text-foreground", "group-data-[variant=destructive]/code-block:text-destructive", "group-data-[size=sm]/code-block:text-xs", "[&_svg]:pointer-events-none", "[&_svg]:inline-block", "[&_svg]:align-middle", "*:[svg]:me-1.5", "[&_svg:not([class*=size-])]:size-3.5", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Действия блока кода: в шапке — справа, прямо в блоке — плавают в углу и появляются при наведении
+* @param props - пропсы действий
+* @returns блок действий
+*/
+function CodeBlockActions({ className, ...props }) {
+	const classes = cn("ms-auto", "-my-1", "-me-1.5", "flex", "shrink-0", "items-center", "gap-1", "[[data-slot=code-block]>&]:absolute", "[[data-slot=code-block]>&]:end-2", "[[data-slot=code-block]>&]:top-2", "[[data-slot=code-block]>&]:z-10", "[[data-slot=code-block]>&]:m-0", "[[data-slot=code-block]>&]:opacity-0", "[[data-slot=code-block]>&]:transition-opacity", "[[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100", "[[data-slot=code-block]>&]:group-hover/code-block:opacity-100", "[[data-slot=code-block]>&]:pointer-coarse:opacity-100", "group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5", "group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5", "[[data-slot=code-block]>&]:*:[button]:bg-background", "[[data-slot=code-block]>&]:*:[button]:ring-1", "[[data-slot=code-block]>&]:*:[button]:ring-foreground/10", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block-actions",
+		className: classes,
+		...props
+	});
+}
+/**
+* Кнопка копирования: копирует value и на 2 секунды показывает галочку
+* @param props - пропсы кнопки
+* @returns кнопка и объявление для скринридера
+*/
+function CodeBlockCopyButton({ value, variant = "ghost", size = "icon-xs", copyLabel = texts.copy, copiedLabel = texts.copied, className, onClick, ...props }) {
+	const [isCopied, setCopied] = useState(false);
+	useEffect(() => {
+		if (!isCopied) return;
+		const timeout = setTimeout(() => setCopied(false), COPIED_TIMEOUT);
+		return () => clearTimeout(timeout);
+	}, [isCopied]);
+	/**
+	* Нажатие: вызвать onClick и скопировать значение
+	* @param event - событие нажатия
+	*/
+	const copyValue = (event) => {
+		onClick?.(event);
+		navigator.clipboard.writeText(value).then(() => setCopied(true)).catch(() => void 0);
+	};
+	const label = isCopied ? copiedLabel : copyLabel;
+	const announcement = isCopied ? copiedLabel : "";
+	const icon = isCopied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		"data-slot": "code-block-copy-button",
+		"data-copied": isCopied || void 0,
+		variant,
+		size,
+		"aria-label": label,
+		className,
+		onClick: copyValue,
+		...props,
+		children: icon
+	}), /* @__PURE__ */ jsx("span", {
+		"aria-live": "polite",
+		className: "sr-only",
+		children: announcement
+	})] });
+}
+/**
+* Пустая ли строка: пустая строка хранит перевод строки, чтобы при копировании выделения
+* пустые строки не терялись
+* @param children - содержимое строки
+* @returns true, если содержимого нет
+*/
+function isEmptyLine(children) {
+	if (children === void 0 || children === null || children === "") return true;
+	return Array.isArray(children) && children.length === 0;
+}
+/**
+* Разбить текст на строки кода, чтобы показать номера строк
+* @param text - код
+* @returns строки
+*/
+function splitLines(text) {
+	const lines = [];
+	text.replace(/\n$/, "").split("\n").forEach((row, index) => {
+		lines.push(/* @__PURE__ */ jsx(CodeBlockLine, { children: row }, index));
+	});
+	return lines;
+}
+/**
+* Содержимое блока кода: <pre> с прокруткой, фокусируется с клавиатуры для прокрутки стрелками
+* @param props - пропсы содержимого
+* @returns код
+*/
+function CodeBlockContent({ className, children, style, wrap = false, lineNumbers = false, startLine = 1, ...props }) {
+	const classes = cn("min-h-0", "min-w-0", "overflow-auto", "px-3", "py-3", "text-start", "font-mono", "leading-relaxed", "outline-none", "scroll-fade-x", "[scrollbar-width:thin]", "data-wrap:scroll-fade-y", "data-wrap:wrap-break-word", "data-wrap:whitespace-pre-wrap", "group-has-data-[slot=code-block-header]/code-block:pt-2", "group-has-data-[slot=code-block-footer]/code-block:pb-2", "group-data-[size=sm]/code-block:px-2.5", "group-data-[size=sm]/code-block:py-2.5", "group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5", className);
+	const codeClasses = cn("grid", "min-h-lh", "min-w-max", "content-start", "in-data-numbered:grid-cols-[auto_1fr]", "in-data-wrap:min-w-0");
+	const counterReset = `line ${startLine - 1}`;
+	const content = lineNumbers && typeof children === "string" ? splitLines(children) : children;
+	return /* @__PURE__ */ jsx("pre", {
+		"data-slot": "code-block-content",
+		"data-wrap": wrap || void 0,
+		"data-numbered": lineNumbers || void 0,
+		tabIndex: 0,
+		style: {
+			counterReset,
+			...style
+		},
+		className: classes,
+		...props,
+		children: /* @__PURE__ */ jsx("code", {
+			"data-slot": "code-block-code",
+			className: codeClasses,
+			children: content
+		})
+	});
+}
+/**
+* Строка кода: номер строки и отметка изменения рисуются псевдоэлементами
+* @param props - пропсы строки
+* @returns строка
+*/
+function CodeBlockLine({ className, variant = "default", children, ...props }) {
+	const classes = cn(codeBlockLineVariants({ variant }), className);
+	const content = isEmptyLine(children) ? "\n" : children;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "code-block-line",
+		"data-variant": variant,
+		className: classes,
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "code-block-line-content",
+			className: "min-w-0",
+			children: content
+		})
+	});
+}
+/**
+* Подвал блока кода: кнопка «Показать полностью», подпись
+* @param props - пропсы подвала
+* @returns подвал
+*/
+function CodeBlockFooter({ className, ...props }) {
+	const classes = cn("flex", "min-w-0", "shrink-0", "items-center", "gap-2", "px-3", "pb-3", "text-muted-foreground", "group-data-[size=sm]/code-block:px-2.5", "group-data-[size=sm]/code-block:pb-2.5", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "code-block-footer",
+		className: classes,
+		...props
+	});
+}
+export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle };

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

@@ -0,0 +1,15 @@
+import { CodeHighlighterI } from "./types.js";
+import { ReactNode } from "react";
+/**
+ * Загрузить язык и вернуть подсветку для него
+ * @param language - имя языка: ts, tsx, json, bash, ansi…
+ * @returns подсветка или null для языка не из списка
+ */
+export declare function loadHighlighter(language: string): Promise<CodeHighlighterI | null>;
+/**
+ * Подсветить код целиком
+ * @param code - код
+ * @param language - имя языка
+ * @returns по узлу React на строку или null для языка не из списка
+ */
+export declare function highlightCode(code: string, language: string): Promise<ReactNode[] | null>;

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