@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/chart/chart.js

@@ -0,0 +1,212 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { formatNumber } from "../../lib/format.js";
+import { THEMES } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId } from "react";
+import * as RechartsPrimitive from "recharts";
+// src/components/chart/chart.tsx
+/** Размер графика до первого замера контейнера */
+const INITIAL_DIMENSION = {
+	width: 320,
+	height: 200
+};
+/** Настройки рядов текущего графика */
+const ChartContext = createContext(null);
+/**
+* Настройки рядов текущего графика
+* @returns настройки из ChartContainer
+*/
+function useChart() {
+	const context = useContext(ChartContext);
+	if (!context) throw new Error("useChart работает только внутри ChartContainer");
+	return context;
+}
+/**
+* Контейнер графика: подстраивает график под размер, задаёт цвета рядов и оформление осей.
+* Высоту задайте через className, по умолчанию пропорции 16:9
+* @param props - пропсы контейнера; config — подписи и цвета рядов
+* @returns div с графиком
+*/
+function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
+	const uniqueId = useId();
+	const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+	const context = { config };
+	const classes = cn("flex", "aspect-video", "justify-center", "text-xs", "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground", "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50", "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border", "[&_.recharts-dot[stroke='#fff']]:stroke-transparent", "[&_.recharts-layer]:outline-hidden", "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border", "[&_.recharts-radial-bar-background-sector]:fill-muted", "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted", "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border", "[&_.recharts-sector]:outline-hidden", "[&_.recharts-sector[stroke='#fff']]:stroke-transparent", "[&_.recharts-surface]:outline-hidden", className);
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "chart",
+			"data-chart": chartId,
+			className: classes,
+			...props,
+			children: [/* @__PURE__ */ jsx(ChartStyle, {
+				id: chartId,
+				config
+			}), /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, {
+				initialDimension,
+				children
+			})]
+		})
+	});
+}
+/**
+* Стили графика: CSS-переменные --color-<ключ> для светлой и тёмной темы
+* @param props - id графика и настройки рядов
+* @returns style или null, если цветов нет
+*/
+function ChartStyle({ id, config }) {
+	const colorConfig = [];
+	for (const entry of Object.entries(config)) if (entry[1].theme ?? entry[1].color) colorConfig.push(entry);
+	if (colorConfig.length === 0) return null;
+	const blocks = [];
+	for (const [theme, prefix] of Object.entries(THEMES)) {
+		const lines = [];
+		for (const [key, itemConfig] of colorConfig) {
+			const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+			if (color) lines.push(`  --color-${key}: ${color};`);
+		}
+		const body = lines.join("\n");
+		blocks.push(`${prefix} [data-chart=${id}] {\n${body}\n}`);
+	}
+	const html = { __html: blocks.join("\n") };
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: html });
+}
+/**
+* Подсказка графика: Tooltip из recharts. В content передайте ChartTooltipContent
+*/
+const ChartTooltip = RechartsPrimitive.Tooltip;
+/**
+* Найти настройки ряда по данным точки
+* @param config - настройки рядов
+* @param payload - данные точки из recharts
+* @param key - ключ ряда или поля с его именем
+* @returns настройки ряда или undefined
+*/
+function getPayloadConfig(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	const innerPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	const record = payload;
+	let configLabelKey = key;
+	if (typeof record[key] === "string") configLabelKey = record[key];
+	else if (innerPayload && typeof innerPayload[key] === "string") configLabelKey = innerPayload[key];
+	if (configLabelKey in config) return config[configLabelKey];
+	return config[key];
+}
+/**
+* Содержимое подсказки: заголовок и значения рядов с цветными отметками. Числа — в формате ru-RU
+* @param props - данные от recharts и настройки вида
+* @returns div или null, если подсказка скрыта
+*/
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+	const { config } = useChart();
+	if (!active || !payload?.length) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	const labelClasses = cn("font-medium", labelClassName);
+	let tooltipLabel = null;
+	if (!hideLabel) {
+		const [item] = payload;
+		const itemConfig = getPayloadConfig(config, item, String(labelKey ?? item?.dataKey ?? item?.name ?? "value"));
+		const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+		if (labelFormatter) tooltipLabel = /* @__PURE__ */ jsx("div", {
+			className: labelClasses,
+			children: labelFormatter(value, payload)
+		});
+		else if (value) tooltipLabel = /* @__PURE__ */ jsx("div", {
+			className: labelClasses,
+			children: value
+		});
+	}
+	const rows = [];
+	payload.forEach((item, index) => {
+		if (item.type === "none") return;
+		const key = String(nameKey ?? item.name ?? item.dataKey ?? "value");
+		const itemConfig = getPayloadConfig(config, item, key);
+		const indicatorColor = color ?? item.payload?.fill ?? item.color;
+		const rowClasses = cn("flex", "w-full", "flex-wrap", "items-stretch", "gap-2", "[&>svg]:h-2.5", "[&>svg]:w-2.5", "[&>svg]:text-muted-foreground", indicator === "dot" && "items-center");
+		if (formatter && item?.value !== void 0 && item.name) {
+			rows.push(/* @__PURE__ */ jsx("div", {
+				className: rowClasses,
+				children: formatter(item.value, item.name, item, index, item.payload)
+			}, index));
+			return;
+		}
+		const indicatorClasses = cn("shrink-0", "rounded-[2px]", "border-(--color-border)", "bg-(--color-bg)", {
+			"h-2.5 w-2.5": indicator === "dot",
+			"w-1": indicator === "line",
+			"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+			"my-0.5": nestLabel && indicator === "dashed"
+		});
+		const indicatorStyle = {
+			"--color-bg": indicatorColor,
+			"--color-border": indicatorColor
+		};
+		const valueAlign = nestLabel ? "items-end" : "items-center";
+		const formattedValue = typeof item.value === "number" ? formatNumber(item.value) : String(item.value);
+		const valueClasses = cn("flex", "flex-1", "justify-between", "gap-4", "leading-none", valueAlign);
+		let marker = null;
+		if (itemConfig?.icon) marker = /* @__PURE__ */ jsx(itemConfig.icon, {});
+		else if (!hideIndicator) marker = /* @__PURE__ */ jsx("div", {
+			className: indicatorClasses,
+			style: indicatorStyle
+		});
+		rows.push(/* @__PURE__ */ jsxs("div", {
+			className: rowClasses,
+			children: [marker, /* @__PURE__ */ jsxs("div", {
+				className: valueClasses,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "grid gap-1.5",
+					children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: itemConfig?.label ?? item.name
+					})]
+				}), item.value != null && /* @__PURE__ */ jsx("span", {
+					className: "font-mono font-medium text-foreground tabular-nums",
+					children: formattedValue
+				})]
+			})]
+		}, index));
+	});
+	const classes = cn("grid", "min-w-32", "items-start", "gap-1.5", "rounded-lg", "border", "border-border/50", "bg-background", "px-2.5", "py-1.5", "text-xs", "shadow-xl", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes,
+		children: [nestLabel ? null : tooltipLabel, /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1.5",
+			children: rows
+		})]
+	});
+}
+/**
+* Легенда графика: Legend из recharts. В content передайте ChartLegendContent
+*/
+const ChartLegend = RechartsPrimitive.Legend;
+/**
+* Содержимое легенды: цветной квадрат или иконка и подпись каждого ряда
+* @param props - данные от recharts и настройки вида
+* @returns div или null, если рядов нет
+*/
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }) {
+	const { config } = useChart();
+	if (!payload?.length) return null;
+	const items = [];
+	payload.forEach((item, index) => {
+		if (item.type === "none") return;
+		const key = String(nameKey ?? item.dataKey ?? "value");
+		const itemConfig = getPayloadConfig(config, item, key);
+		const markerStyle = { backgroundColor: item.color };
+		const marker = itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
+			className: "h-2 w-2 shrink-0 rounded-[2px]",
+			style: markerStyle
+		});
+		items.push(/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+			children: [marker, itemConfig?.label]
+		}, index));
+	});
+	const classes = cn("flex", "items-center", "justify-center", "gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className);
+	return /* @__PURE__ */ jsx("div", {
+		className: classes,
+		children: items
+	});
+}
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };

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

@@ -0,0 +1,3 @@
+import { ChartConfigT, ChartContainerPropsT, ChartIndicatorT, ChartLegendContentPropsT, ChartStylePropsT, ChartTooltipContentPropsT } from "./types.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "./chart.js";
+export { type ChartConfigT, ChartContainer, type ChartContainerPropsT, type ChartIndicatorT, ChartLegend, ChartLegendContent, type ChartLegendContentPropsT, ChartStyle, type ChartStylePropsT, ChartTooltip, ChartTooltipContent, type ChartTooltipContentPropsT };

package/dist/components/chart/index.js

@@ -0,0 +1 @@
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "./chart.js";

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

@@ -0,0 +1,89 @@
+import { ComponentProps, ComponentType, ReactNode } from "react";
+import * as RechartsPrimitive from "recharts";
+import { TooltipValueType } from "recharts";
+/** Темы и их селекторы: светлая — без селектора, тёмная — .dark */
+export declare const THEMES: {
+  readonly light: "";
+  readonly dark: ".dark";
+};
+/**
+ * Имя ряда в подсказке
+ */
+export type TooltipNameT = number | string;
+/**
+ * Тема графика
+ */
+export type ChartThemeT = keyof typeof THEMES;
+/**
+ * Настройки рядов графика: подпись, иконка и цвет каждого ряда по его ключу.
+ * Цвет попадает в CSS-переменную --color-<ключ>
+ */
+export type ChartConfigT = Record<string, {
+  /** Подпись ряда в подсказке и легенде */
+  label?: ReactNode;
+  /** Иконка вместо цветного квадрата */
+  icon?: ComponentType;
+} & ({
+  /** Цвет ряда: var(--chart-1), oklch(…) */
+  color?: string;
+  /** Цвет для каждой темы — вместо color */
+  theme?: never;
+} | {
+  /** Цвет ряда — вместо theme */
+  color?: never;
+  /** Цвет для каждой темы: { light, dark } */
+  theme: Record<ChartThemeT, string>;
+})>;
+/**
+ * Пропсы контейнера графика
+ */
+export type ChartContainerPropsT = Omit<ComponentProps<'div'>, 'children'> & {
+  /** Настройки рядов: подписи и цвета */
+  config: ChartConfigT;
+  /** График recharts: BarChart, LineChart, AreaChart, PieChart… */
+  children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+  /** Размер до первого замера контейнера, px. По умолчанию 320×200 */
+  initialDimension?: {
+    /** Ширина */
+    width: number;
+    /** Высота */
+    height: number;
+  };
+};
+/**
+ * Пропсы стилей графика
+ */
+export type ChartStylePropsT = {
+  /** id графика из data-chart */
+  id: string;
+  /** Настройки рядов */
+  config: ChartConfigT;
+};
+/**
+ * Вид отметки ряда в подсказке: dot — квадрат, line — полоса, dashed — пунктир
+ */
+export type ChartIndicatorT = 'line' | 'dot' | 'dashed';
+/**
+ * Пропсы содержимого подсказки
+ */
+export type ChartTooltipContentPropsT = ComponentProps<typeof RechartsPrimitive.Tooltip> & ComponentProps<'div'> & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameT>, 'accessibilityLayer'> & {
+  /** Скрыть заголовок подсказки */
+  hideLabel?: boolean;
+  /** Скрыть цветные отметки рядов */
+  hideIndicator?: boolean;
+  /** Вид отметки: dot, line или dashed. По умолчанию dot */
+  indicator?: ChartIndicatorT;
+  /** Поле данных с именем ряда — ключом в config */
+  nameKey?: string;
+  /** Поле данных с заголовком — ключом в config */
+  labelKey?: string;
+};
+/**
+ * Пропсы содержимого легенды
+ */
+export type ChartLegendContentPropsT = ComponentProps<'div'> & RechartsPrimitive.DefaultLegendContentProps & {
+  /** Скрыть иконки рядов из config */
+  hideIcon?: boolean;
+  /** Поле данных с именем ряда — ключом в config */
+  nameKey?: string;
+};

package/dist/components/chart/types.js

@@ -0,0 +1,7 @@
+// src/components/chart/types.ts
+/** Темы и их селекторы: светлая — без селектора, тёмная — .dark */
+const THEMES = {
+	light: "",
+	dark: ".dark"
+};
+export { THEMES };

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

@@ -0,0 +1,7 @@
+import { CheckboxPropsT } from "./types.js";
+/**
+ * Флажок: отметить или снять отметку
+ * @param props - пропсы флажка
+ * @returns элемент с role=checkbox
+ */
+export declare function Checkbox({ className, onCheckedChange, ...props }: CheckboxPropsT): import("react").JSX.Element;

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