@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/card/card.d.ts

@@ -0,0 +1,43 @@
+import { CardActionPropsT, CardContentPropsT, CardDescriptionPropsT, CardFooterPropsT, CardHeaderPropsT, CardPropsT, CardTitlePropsT } from "./types.js";
+/**
+ * Карточка: контейнер с шапкой, содержимым и подвалом
+ * @param props - пропсы карточки
+ * @returns карточка
+ */
+export declare function Card({ className, size, ...props }: CardPropsT): import("react").JSX.Element;
+/**
+ * Шапка карточки: заголовок, описание и действие справа
+ * @param props - пропсы шапки
+ * @returns шапка
+ */
+export declare function CardHeader({ className, ...props }: CardHeaderPropsT): import("react").JSX.Element;
+/**
+ * Заголовок карточки
+ * @param props - пропсы заголовка
+ * @returns заголовок
+ */
+export declare function CardTitle({ className, ...props }: CardTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание карточки: поясняющий текст под заголовком
+ * @param props - пропсы описания
+ * @returns описание
+ */
+export declare function CardDescription({ className, ...props }: CardDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Действие в правом верхнем углу шапки: кнопка, бейдж
+ * @param props - пропсы действия
+ * @returns блок действия
+ */
+export declare function CardAction({ className, ...props }: CardActionPropsT): import("react").JSX.Element;
+/**
+ * Содержимое карточки
+ * @param props - пропсы содержимого
+ * @returns содержимое
+ */
+export declare function CardContent({ className, ...props }: CardContentPropsT): import("react").JSX.Element;
+/**
+ * Подвал карточки: действия и дополнительная информация
+ * @param props - пропсы подвала
+ * @returns подвал
+ */
+export declare function CardFooter({ className, ...props }: CardFooterPropsT): import("react").JSX.Element;

package/dist/components/card/card.js

@@ -0,0 +1,97 @@
+import { cn } from "../../lib/utils.js";
+import { cardVariants } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/card/card.tsx
+/**
+* Карточка: контейнер с шапкой, содержимым и подвалом
+* @param props - пропсы карточки
+* @returns карточка
+*/
+function Card({ className, size = "default", ...props }) {
+	const classes = cn(cardVariants({ size }), className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		"data-size": size,
+		className: classes,
+		...props
+	});
+}
+/**
+* Шапка карточки: заголовок, описание и действие справа
+* @param props - пропсы шапки
+* @returns шапка
+*/
+function CardHeader({ className, ...props }) {
+	const classes = cn("group/card-header", "@container/card-header", "grid", "auto-rows-min", "items-start", "gap-1", "rounded-t-xl", "px-(--card-spacing)", "has-data-[slot=card-action]:grid-cols-[1fr_auto]", "has-data-[slot=card-description]:grid-rows-[auto_auto]", "[.border-b]:pb-(--card-spacing)", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок карточки
+* @param props - пропсы заголовка
+* @returns заголовок
+*/
+function CardTitle({ className, ...props }) {
+	const classes = cn("text-base", "leading-snug", "font-medium", "group-data-[size=sm]/card:text-sm", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание карточки: поясняющий текст под заголовком
+* @param props - пропсы описания
+* @returns описание
+*/
+function CardDescription({ className, ...props }) {
+	const classes = cn("text-sm", "text-muted-foreground", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Действие в правом верхнем углу шапки: кнопка, бейдж
+* @param props - пропсы действия
+* @returns блок действия
+*/
+function CardAction({ className, ...props }) {
+	const classes = cn("col-start-2", "row-span-2", "row-start-1", "self-start", "justify-self-end", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-action",
+		className: classes,
+		...props
+	});
+}
+/**
+* Содержимое карточки
+* @param props - пропсы содержимого
+* @returns содержимое
+*/
+function CardContent({ className, ...props }) {
+	const classes = cn("px-(--card-spacing)", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: classes,
+		...props
+	});
+}
+/**
+* Подвал карточки: действия и дополнительная информация
+* @param props - пропсы подвала
+* @returns подвал
+*/
+function CardFooter({ className, ...props }) {
+	const classes = cn("flex", "items-center", "rounded-b-xl", "border-t", "bg-muted/50", "p-(--card-spacing)", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: classes,
+		...props
+	});
+}
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

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

@@ -0,0 +1,3 @@
+import { CardActionPropsT, CardContentPropsT, CardDescriptionPropsT, CardFooterPropsT, CardHeaderPropsT, CardPropsT, CardTitlePropsT, cardVariants } from "./types.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
+export { Card, CardAction, type CardActionPropsT, CardContent, type CardContentPropsT, CardDescription, type CardDescriptionPropsT, CardFooter, type CardFooterPropsT, CardHeader, type CardHeaderPropsT, type CardPropsT, CardTitle, type CardTitlePropsT, cardVariants };

package/dist/components/card/index.js

@@ -0,0 +1,3 @@
+import { cardVariants } from "./types.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants };

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

@@ -0,0 +1,44 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+/**
+ * Стили карточки: размер задаёт отступы через CSS-переменную --card-spacing.
+ * Свои отступы — классом: className={'[--card-spacing:--spacing(6)]'}.
+ */
+export declare const cardVariants: (props?: ({
+  size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Размеры карточки
+ */
+export type CardVariantsT = VariantProps<typeof cardVariants>;
+/**
+ * Пропсы карточки
+ */
+export type CardPropsT = ComponentProps<'div'> & {
+  /** Размер: default — отступы 16px, sm — компактные отступы 12px */
+  size?: CardVariantsT['size'];
+};
+/**
+ * Пропсы шапки карточки
+ */
+export type CardHeaderPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы заголовка карточки
+ */
+export type CardTitlePropsT = ComponentProps<'div'>;
+/**
+ * Пропсы описания карточки
+ */
+export type CardDescriptionPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы действия в шапке карточки
+ */
+export type CardActionPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы содержимого карточки
+ */
+export type CardContentPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы подвала карточки
+ */
+export type CardFooterPropsT = ComponentProps<'div'>;

package/dist/components/card/types.js

@@ -0,0 +1,19 @@
+import { cva } from "class-variance-authority";
+// src/components/card/types.ts
+/**
+* Стили карточки: размер задаёт отступы через CSS-переменную --card-spacing.
+* Свои отступы — классом: className={'[--card-spacing:--spacing(6)]'}.
+*/
+const cardVariants = cva([
+	"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing)",
+	"text-sm text-card-foreground ring-1 ring-foreground/10",
+	"has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0",
+	"*:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl"
+], {
+	variants: { size: {
+		default: "[--card-spacing:--spacing(4)]",
+		sm: "[--card-spacing:--spacing(3)]"
+	} },
+	defaultVariants: { size: "default" }
+});
+export { cardVariants };

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

@@ -0,0 +1,36 @@
+import { CarouselContentPropsT, CarouselContextI, CarouselItemPropsT, CarouselNextPropsT, CarouselPreviousPropsT, CarouselPropsT } from "./types.js";
+/**
+ * Состояние карусели: API, направление, функции прокрутки
+ * @returns состояние из Carousel
+ */
+export declare function useCarousel(): CarouselContextI;
+/**
+ * Карусель на Embla: слайды листаются свайпом, кнопками и стрелками клавиатуры
+ * @param props - пропсы карусели
+ * @returns div с role="region"
+ */
+export declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: CarouselPropsT): import("react").JSX.Element;
+/**
+ * Лента слайдов: область прокрутки с CarouselItem внутри
+ * @param props - пропсы ленты; className уходит на внутренний flex-контейнер
+ * @returns div
+ */
+export declare function CarouselContent({ className, ...props }: CarouselContentPropsT): import("react").JSX.Element;
+/**
+ * Слайд: по умолчанию во всю ширину; basis-1/2, basis-1/3 — несколько слайдов в ряд
+ * @param props - пропсы слайда
+ * @returns div с role="group"
+ */
+export declare function CarouselItem({ className, ...props }: CarouselItemPropsT): import("react").JSX.Element;
+/**
+ * Кнопка «назад»: круглая, слева от карусели, неактивна на первом слайде
+ * @param props - пропсы кнопки; по умолчанию variant="outline", size="icon-sm"
+ * @returns кнопка
+ */
+export declare function CarouselPrevious({ className, variant, size, label, onClick, ...props }: CarouselPreviousPropsT): import("react").JSX.Element;
+/**
+ * Кнопка «вперёд»: круглая, справа от карусели, неактивна на последнем слайде
+ * @param props - пропсы кнопки; по умолчанию variant="outline", size="icon-sm"
+ * @returns кнопка
+ */
+export declare function CarouselNext({ className, variant, size, label, onClick, ...props }: CarouselNextPropsT): import("react").JSX.Element;

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;