@archytechtor/ui 0.0.0-stage → 0.1.0

package/dist/components/carousel/carousel.js

@@ -0,0 +1,190 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { Button } from "../button/button.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useEffectEvent, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+// src/components/carousel/carousel.tsx
+/** Состояние карусели */
+const CarouselContext = createContext(null);
+/**
+* Состояние карусели: API, направление, функции прокрутки
+* @returns состояние из Carousel
+*/
+function useCarousel() {
+	const context = useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel работает только внутри Carousel");
+	return context;
+}
+/**
+* Карусель на Embla: слайды листаются свайпом, кнопками и стрелками клавиатуры
+* @param props - пропсы карусели
+* @returns div с role="region"
+*/
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+	const axis = orientation === "horizontal" ? "x" : "y";
+	const [carouselRef, api] = useEmblaCarousel({
+		...opts,
+		axis
+	}, plugins);
+	const [canScrollPrev, setCanScrollPrev] = useState(false);
+	const [canScrollNext, setCanScrollNext] = useState(false);
+	const updateScroll = useCallback((carouselApi) => {
+		if (!carouselApi) return;
+		setCanScrollPrev(carouselApi.canScrollPrev());
+		setCanScrollNext(carouselApi.canScrollNext());
+	}, []);
+	const scrollPrev = useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	/**
+	* Стрелки влево и вправо листают слайды
+	* @param event - нажатие клавиши
+	*/
+	const handleKeyDown = (event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			scrollNext();
+		}
+	};
+	const notifyApi = useEffectEvent((carouselApi) => setApi?.(carouselApi));
+	useEffect(() => {
+		if (api) notifyApi(api);
+	}, [api]);
+	useEffect(() => {
+		if (!api) return;
+		updateScroll(api);
+		api.on("reInit", updateScroll);
+		api.on("select", updateScroll);
+		return () => {
+			api.off("reInit", updateScroll);
+			api.off("select", updateScroll);
+		};
+	}, [api, updateScroll]);
+	const context = {
+		carouselRef,
+		api,
+		opts,
+		orientation,
+		scrollPrev,
+		scrollNext,
+		canScrollPrev,
+		canScrollNext
+	};
+	const classes = cn("relative", className);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			onKeyDownCapture: handleKeyDown,
+			className: classes,
+			role: "region",
+			"aria-roledescription": texts.carousel,
+			"data-slot": "carousel",
+			...props,
+			children
+		})
+	});
+}
+/**
+* Лента слайдов: область прокрутки с CarouselItem внутри
+* @param props - пропсы ленты; className уходит на внутренний flex-контейнер
+* @returns div
+*/
+function CarouselContent({ className, ...props }) {
+	const { carouselRef, orientation } = useCarousel();
+	const classes = cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className);
+	return /* @__PURE__ */ jsx("div", {
+		ref: carouselRef,
+		className: "overflow-hidden",
+		"data-slot": "carousel-content",
+		children: /* @__PURE__ */ jsx("div", {
+			className: classes,
+			...props
+		})
+	});
+}
+/**
+* Слайд: по умолчанию во всю ширину; basis-1/2, basis-1/3 — несколько слайдов в ряд
+* @param props - пропсы слайда
+* @returns div с role="group"
+*/
+function CarouselItem({ className, ...props }) {
+	const { orientation } = useCarousel();
+	const classes = cn("min-w-0", "shrink-0", "grow-0", "basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className);
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": texts.slide,
+		"data-slot": "carousel-item",
+		className: classes,
+		...props
+	});
+}
+/**
+* Кнопка «назад»: круглая, слева от карусели, неактивна на первом слайде
+* @param props - пропсы кнопки; по умолчанию variant="outline", size="icon-sm"
+* @returns кнопка
+*/
+function CarouselPrevious({ className, variant = "outline", size = "icon-sm", label = texts.previousSlide, onClick, ...props }) {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+	const classes = cn("absolute", "touch-manipulation", "rounded-full", orientation === "horizontal" ? "inset-y-0 -left-12 my-auto" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className);
+	/**
+	* Нажатие: пролистать назад и передать событие наружу
+	* @param event - нажатие
+	*/
+	const handleClick = (event) => {
+		scrollPrev();
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "carousel-previous",
+		variant,
+		size,
+		className: classes,
+		disabled: !canScrollPrev,
+		onClick: handleClick,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}
+/**
+* Кнопка «вперёд»: круглая, справа от карусели, неактивна на последнем слайде
+* @param props - пропсы кнопки; по умолчанию variant="outline", size="icon-sm"
+* @returns кнопка
+*/
+function CarouselNext({ className, variant = "outline", size = "icon-sm", label = texts.nextSlide, onClick, ...props }) {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+	const classes = cn("absolute", "touch-manipulation", "rounded-full", orientation === "horizontal" ? "inset-y-0 -right-12 my-auto" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className);
+	/**
+	* Нажатие: пролистать вперёд и передать событие наружу
+	* @param event - нажатие
+	*/
+	const handleClick = (event) => {
+		scrollNext();
+		onClick?.(event);
+	};
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "carousel-next",
+		variant,
+		size,
+		className: classes,
+		disabled: !canScrollNext,
+		onClick: handleClick,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronRightIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };

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

@@ -0,0 +1,3 @@
+import { CarouselApiT, CarouselContentPropsT, CarouselContextI, CarouselItemPropsT, CarouselNextPropsT, CarouselOptionsT, CarouselOrientationT, CarouselPluginT, CarouselPreviousPropsT, CarouselPropsT } from "./types.js";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel } from "./carousel.js";
+export { Carousel, type CarouselApiT, CarouselContent, type CarouselContentPropsT, type CarouselContextI, CarouselItem, type CarouselItemPropsT, CarouselNext, type CarouselNextPropsT, type CarouselOptionsT, type CarouselOrientationT, type CarouselPluginT, CarouselPrevious, type CarouselPreviousPropsT, type CarouselPropsT, useCarousel };

package/dist/components/carousel/index.js

@@ -0,0 +1 @@
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel } from "./carousel.js";

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

@@ -0,0 +1,79 @@
+import { ButtonPropsT } from "../button/types.js";
+import { ComponentProps } from "react";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+/**
+ * API карусели Embla: scrollTo(), selectedScrollSnap(), on('select')…
+ */
+export type CarouselApiT = UseEmblaCarouselType[1];
+/**
+ * Параметры useEmblaCarousel
+ */
+export type UseCarouselParametersT = Parameters<typeof useEmblaCarousel>;
+/**
+ * Настройки Embla: loop, align, slidesToScroll…
+ */
+export type CarouselOptionsT = UseCarouselParametersT[0];
+/**
+ * Плагины Embla: автопрокрутка, колесо мыши…
+ */
+export type CarouselPluginT = UseCarouselParametersT[1];
+/**
+ * Направление карусели
+ */
+export type CarouselOrientationT = 'horizontal' | 'vertical';
+/**
+ * Состояние карусели для частей
+ * @property carouselRef - ref на область прокрутки
+ * @property api - API Embla
+ * @property opts - настройки Embla
+ * @property orientation - направление
+ * @property scrollPrev - к предыдущему слайду
+ * @property scrollNext - к следующему слайду
+ * @property canScrollPrev - есть слайд слева
+ * @property canScrollNext - есть слайд справа
+ */
+export interface CarouselContextI {
+  carouselRef: UseEmblaCarouselType[0];
+  api: CarouselApiT;
+  opts?: CarouselOptionsT;
+  orientation: CarouselOrientationT;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+}
+/**
+ * Пропсы карусели
+ */
+export type CarouselPropsT = ComponentProps<'div'> & {
+  /** Настройки Embla: loop, align, slidesToScroll… */
+  opts?: CarouselOptionsT;
+  /** Плагины Embla: автопрокрутка и другие */
+  plugins?: CarouselPluginT;
+  /** Направление: horizontal или vertical. По умолчанию horizontal */
+  orientation?: CarouselOrientationT;
+  /** Получить API Embla, когда карусель готова */
+  setApi?: (api: CarouselApiT) => void;
+};
+/**
+ * Пропсы ленты слайдов
+ */
+export type CarouselContentPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы слайда
+ */
+export type CarouselItemPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы кнопки «назад»
+ */
+export type CarouselPreviousPropsT = ButtonPropsT & {
+  /** Подпись для скринридеров. По умолчанию «Предыдущий слайд» */
+  label?: string;
+};
+/**
+ * Пропсы кнопки «вперёд»
+ */
+export type CarouselNextPropsT = ButtonPropsT & {
+  /** Подпись для скринридеров. По умолчанию «Следующий слайд» */
+  label?: string;
+};

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

@@ -0,0 +1,35 @@
+import { ChartContainerPropsT, ChartLegendContentPropsT, ChartStylePropsT, ChartTooltipContentPropsT } from "./types.js";
+import * as RechartsPrimitive from "recharts";
+/**
+ * Контейнер графика: подстраивает график под размер, задаёт цвета рядов и оформление осей.
+ * Высоту задайте через className, по умолчанию пропорции 16:9
+ * @param props - пропсы контейнера; config — подписи и цвета рядов
+ * @returns div с графиком
+ */
+export declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: ChartContainerPropsT): import("react").JSX.Element;
+/**
+ * Стили графика: CSS-переменные --color-<ключ> для светлой и тёмной темы
+ * @param props - id графика и настройки рядов
+ * @returns style или null, если цветов нет
+ */
+export declare function ChartStyle({ id, config }: ChartStylePropsT): import("react").JSX.Element | null;
+/**
+ * Подсказка графика: Tooltip из recharts. В content передайте ChartTooltipContent
+ */
+export declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+/**
+ * Содержимое подсказки: заголовок и значения рядов с цветными отметками. Числа — в формате ru-RU
+ * @param props - данные от recharts и настройки вида
+ * @returns div или null, если подсказка скрыта
+ */
+export declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }: ChartTooltipContentPropsT): import("react").JSX.Element | null;
+/**
+ * Легенда графика: Legend из recharts. В content передайте ChartLegendContent
+ */
+export declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+/**
+ * Содержимое легенды: цветной квадрат или иконка и подпись каждого ряда
+ * @param props - данные от recharts и настройки вида
+ * @returns div или null, если рядов нет
+ */
+export declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey }: ChartLegendContentPropsT): import("react").JSX.Element | null;

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;