@archytechtor/ui 0.0.0-stage → 0.1.0

package/dist/components/item/types.js

@@ -0,0 +1,48 @@
+import { cva } from "class-variance-authority";
+// src/components/item/types.ts
+/**
+* Стили элемента списка: вариант оформления и размер.
+* Ссылка (render={<a />}) подсвечивается фоном при наведении
+*/
+const itemVariants = cva([
+	"group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100",
+	"outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+	"[a]:transition-colors [a]:hover:bg-muted"
+], {
+	variants: {
+		variant: {
+			default: "border-transparent",
+			outline: "border-border",
+			muted: "border-transparent bg-muted/50"
+		},
+		size: {
+			default: "gap-2.5 px-3 py-2.5",
+			sm: "gap-2.5 px-3 py-2.5",
+			xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/**
+* Стили медиа элемента: без оформления, иконка или изображение
+*/
+const itemMediaVariants = cva([
+	"flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none",
+	"group-has-data-[slot=item-description]/item:translate-y-0.5",
+	"group-has-data-[slot=item-description]/item:self-start"
+], {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "[&_svg:not([class*=size-])]:size-4",
+		image: [
+			"size-10 overflow-hidden rounded-sm",
+			"group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6",
+			"[&_img]:size-full [&_img]:object-cover"
+		]
+	} },
+	defaultVariants: { variant: "default" }
+});
+export { itemMediaVariants, itemVariants };

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

@@ -0,0 +1,3 @@
+import { KbdGroupPropsT, KbdPropsT } from "./types.js";
+import { Kbd, KbdGroup } from "./kbd.js";
+export { Kbd, KbdGroup, type KbdGroupPropsT, type KbdPropsT };

package/dist/components/kbd/index.js

@@ -0,0 +1 @@
+export { Kbd, KbdGroup } from "./kbd.js";

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,13 @@
+import { KbdGroupPropsT, KbdPropsT } from "./types.js";
+/**
+ * Клавиша: подпись клавиши или сочетания для ввода с клавиатуры
+ * @param props - пропсы клавиши
+ * @returns элемент <kbd>
+ */
+export declare function Kbd({ className, ...props }: KbdPropsT): import("react").JSX.Element;
+/**
+ * Группа клавиш: сочетание из нескольких Kbd
+ * @param props - пропсы группы
+ * @returns элемент <kbd> с вложенными клавишами
+ */
+export declare function KbdGroup({ className, ...props }: KbdGroupPropsT): import("react").JSX.Element;

package/dist/components/kbd/kbd.js

@@ -0,0 +1,30 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/kbd/kbd.tsx
+/**
+* Клавиша: подпись клавиши или сочетания для ввода с клавиатуры
+* @param props - пропсы клавиши
+* @returns элемент <kbd>
+*/
+function Kbd({ className, ...props }) {
+	const classes = cn("pointer-events-none", "inline-flex", "h-5", "w-fit", "min-w-5", "items-center", "justify-center", "gap-1", "rounded-sm", "px-1", "select-none", "bg-muted", "font-sans", "text-xs", "font-medium", "text-muted-foreground", "in-data-[slot=tooltip-content]:bg-background/20", "in-data-[slot=tooltip-content]:text-background", "dark:in-data-[slot=tooltip-content]:bg-background/10", "[&_svg:not([class*=size-])]:size-3", className);
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: classes,
+		...props
+	});
+}
+/**
+* Группа клавиш: сочетание из нескольких Kbd
+* @param props - пропсы группы
+* @returns элемент <kbd> с вложенными клавишами
+*/
+function KbdGroup({ className, ...props }) {
+	const classes = cn("inline-flex", "items-center", "gap-1", className);
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd-group",
+		className: classes,
+		...props
+	});
+}
+export { Kbd, KbdGroup };

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

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+/**
+ * Пропсы клавиши
+ */
+export type KbdPropsT = ComponentProps<'kbd'>;
+/**
+ * Пропсы группы клавиш
+ */
+export type KbdGroupPropsT = ComponentProps<'kbd'>;

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

@@ -0,0 +1,3 @@
+import { LabelPropsT } from "./types.js";
+import { Label } from "./label.js";
+export { Label, type LabelPropsT };

package/dist/components/label/index.js

@@ -0,0 +1 @@
+export { Label } from "./label.js";

package/dist/components/label/label.d.ts

@@ -0,0 +1,7 @@
+import { LabelPropsT } from "./types.js";
+/**
+ * Подпись поля формы
+ * @param props - пропсы подписи
+ * @returns элемент label
+ */
+export declare function Label({ className, ...props }: LabelPropsT): import("react").JSX.Element;

package/dist/components/label/label.js

@@ -0,0 +1,17 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/label/label.tsx
+/**
+* Подпись поля формы
+* @param props - пропсы подписи
+* @returns элемент label
+*/
+function Label({ className, ...props }) {
+	const classes = cn("flex", "items-center", "gap-2", "text-sm", "leading-none", "font-medium", "select-none", "group-data-[disabled=true]:pointer-events-none", "group-data-[disabled=true]:opacity-50", "peer-disabled:cursor-not-allowed", "peer-disabled:opacity-50", className);
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: classes,
+		...props
+	});
+}
+export { Label };

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

@@ -0,0 +1,8 @@
+import { ComponentProps } from "react";
+/**
+ * Пропсы подписи
+ */
+export type LabelPropsT = ComponentProps<'label'> & {
+  /** id поля, к которому относится подпись: клик по подписи переводит фокус на поле */
+  htmlFor?: string;
+};

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

@@ -0,0 +1,3 @@
+import { LoaderPropsT, loaderVariants } from "./types.js";
+import { Loader } from "./loader.js";
+export { Loader, type LoaderPropsT, loaderVariants };

package/dist/components/loader/index.js

@@ -0,0 +1,3 @@
+import { loaderVariants } from "./types.js";
+import { Loader } from "./loader.js";
+export { Loader, loaderVariants };

package/dist/components/loader/loader.d.ts

@@ -0,0 +1,8 @@
+import { LoaderPropsT } from "./types.js";
+/**
+ * Индикатор загрузки с анимированными видами. Цвет — text-primary, меняется через className.
+ * Для маленького индикатора внутри кнопки или текста есть Spinner.
+ * @param props - пропсы индикатора
+ * @returns индикатор
+ */
+export declare function Loader({ className, variant, size, 'aria-label': ariaLabel, ...props }: LoaderPropsT): import("react").JSX.Element;

package/dist/components/loader/loader.js

@@ -0,0 +1,386 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { loaderVariants } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+// src/components/loader/loader.tsx
+/**
+* Бесконечная анимация с общими настройками
+* @param duration - длительность цикла, секунды
+* @param extra - остальные настройки перехода
+* @returns настройки перехода
+*/
+function loop(duration, extra = {}) {
+	return {
+		duration,
+		repeat: Infinity,
+		...extra
+	};
+}
+/**
+* Дуга, которая вращается
+* @returns дуга
+*/
+function ArcLoader() {
+	return /* @__PURE__ */ jsx(motion.div, {
+		className: "size-full rounded-full border-primary border-t-transparent border-(length:--loader-stroke)",
+		animate: { rotate: 360 },
+		transition: loop(1.2, { ease: "linear" })
+	});
+}
+/**
+* Две дуги, вращающиеся навстречу друг другу
+* @returns дуги
+*/
+function DualArcLoader() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative size-full",
+		children: [/* @__PURE__ */ jsx(motion.div, {
+			className: "absolute inset-0 rounded-full border-primary border-t-transparent border-(length:--loader-stroke)",
+			animate: { rotate: 360 },
+			transition: loop(1.2, { ease: "linear" })
+		}), /* @__PURE__ */ jsx(motion.div, {
+			className: "absolute inset-(--loader-inset) rounded-full border-primary border-b-transparent border-(length:--loader-stroke)",
+			animate: { rotate: -360 },
+			transition: loop(1.2, { ease: "linear" })
+		})]
+	});
+}
+/**
+* Восемь точек по кругу, пульсирующих по очереди
+* @returns точки
+*/
+function CircleDotsLoader() {
+	const dots = Array.from({ length: 8 }, (_, index) => index);
+	const renderDot = (index) => {
+		const angle = index * 45 * Math.PI / 180;
+		const left = 50 + 35 * Math.cos(angle);
+		const top = 50 + 35 * Math.sin(angle);
+		return /* @__PURE__ */ jsx(motion.span, {
+			className: "absolute size-1/5 rounded-full bg-primary",
+			style: {
+				left: `${left}%`,
+				top: `${top}%`,
+				x: "-50%",
+				y: "-50%"
+			},
+			animate: {
+				opacity: [
+					.6,
+					1,
+					.6
+				],
+				scale: [
+					.4,
+					1,
+					.4
+				]
+			},
+			transition: loop(1.6, {
+				ease: [
+					.4,
+					0,
+					.6,
+					1
+				],
+				delay: index * .2
+			})
+		}, index);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative size-full",
+		children: dots.map(renderDot)
+	});
+}
+/**
+* Две мигающие точки
+* @returns точки
+*/
+function TwoDotsLoader() {
+	const renderDot = (index) => /* @__PURE__ */ jsx(motion.span, {
+		className: "size-1/4 rounded-full bg-primary",
+		animate: { opacity: [
+			1,
+			.3,
+			1
+		] },
+		transition: loop(.6, { delay: index * .3 })
+	}, index);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex size-full items-center justify-center",
+		children: [0, 1].map(renderDot)
+	});
+}
+/**
+* Три подпрыгивающие точки
+* @returns точки
+*/
+function ThreeDotsLoader() {
+	const renderDot = (index) => /* @__PURE__ */ jsx(motion.span, {
+		className: "aspect-square w-1/4 rounded-full bg-primary",
+		animate: { y: [
+			"0%",
+			"-50%",
+			"0%"
+		] },
+		transition: loop(.8, {
+			ease: "easeInOut",
+			delay: index * .2
+		})
+	}, index);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex size-full items-center justify-center gap-[6%]",
+		children: [
+			0,
+			1,
+			2
+		].map(renderDot)
+	});
+}
+/**
+* Три мигающие точки в вершинах треугольника
+* @returns точки
+*/
+function TriangleLoader() {
+	const positions = [
+		{
+			x: "0%",
+			y: "-100%"
+		},
+		{
+			x: "-70%",
+			y: "0%"
+		},
+		{
+			x: "70%",
+			y: "0%"
+		}
+	];
+	const renderDot = (position, index) => /* @__PURE__ */ jsx(motion.span, {
+		className: "absolute size-1/4 rounded-full bg-primary",
+		style: position,
+		animate: { opacity: [
+			1,
+			.2,
+			1
+		] },
+		transition: loop(.8, { delay: index * .2 })
+	}, index);
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative flex size-full items-center justify-center",
+		children: positions.map(renderDot)
+	});
+}
+/**
+* Два расходящихся и сжимающихся круга
+* @returns круги
+*/
+function BounceLoader() {
+	const renderCircle = (delay) => /* @__PURE__ */ jsx(motion.div, {
+		className: "absolute size-full rounded-full bg-primary/60",
+		animate: { scale: [
+			0,
+			1,
+			0
+		] },
+		transition: loop(2.1, {
+			ease: "easeInOut",
+			delay
+		})
+	}, delay);
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative size-full",
+		children: [0, 1].map(renderCircle)
+	});
+}
+/**
+* Вращающаяся дуга, которая «дышит»
+* @returns дуга
+*/
+function ClipLoader() {
+	return /* @__PURE__ */ jsx(motion.div, {
+		className: "size-full rounded-full border-primary border-t-transparent border-(length:--loader-stroke-thick)",
+		animate: {
+			rotate: 360,
+			scale: [
+				.8,
+				1,
+				.8
+			]
+		},
+		transition: loop(1, { ease: "linear" })
+	});
+}
+/**
+* Полоса с двумя бегущими отрезками
+* @returns полоса
+*/
+function BarLoader() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative size-full overflow-hidden rounded-sm bg-primary/30",
+		children: [/* @__PURE__ */ jsx(motion.span, {
+			className: "absolute inset-y-0 z-10 h-full bg-primary",
+			animate: {
+				left: [
+					"-35%",
+					"100%",
+					"100%"
+				],
+				right: [
+					"100%",
+					"-90%",
+					"-90%"
+				]
+			},
+			transition: loop(1.5, {
+				ease: [
+					.65,
+					.815,
+					.735,
+					.395
+				],
+				times: [
+					0,
+					.6,
+					1
+				]
+			})
+		}), /* @__PURE__ */ jsx(motion.span, {
+			className: "absolute inset-y-0 z-10 h-full bg-primary",
+			animate: {
+				left: [
+					"-200%",
+					"107%",
+					"107%"
+				],
+				right: [
+					"100%",
+					"-8%",
+					"-8%"
+				]
+			},
+			transition: loop(1.5, {
+				ease: [
+					.165,
+					.84,
+					.44,
+					1
+				],
+				times: [
+					0,
+					.6,
+					1
+				]
+			})
+		})]
+	});
+}
+/**
+* Три пульсирующие точки: крайние и средняя в противофазе
+* @returns точки
+*/
+function BeatLoader() {
+	const renderDot = (index) => {
+		const delay = index === 1 ? .5 : 0;
+		return /* @__PURE__ */ jsx(motion.span, {
+			className: "aspect-square w-1/4 rounded-full bg-primary",
+			initial: {
+				opacity: .5,
+				scale: .75
+			},
+			animate: {
+				opacity: [
+					.5,
+					1,
+					.5
+				],
+				scale: [
+					.75,
+					1,
+					.75
+				]
+			},
+			transition: loop(1, {
+				ease: "easeInOut",
+				delay
+			})
+		}, index);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex size-full items-center justify-center",
+		children: [
+			0,
+			1,
+			2
+		].map(renderDot)
+	});
+}
+/**
+* Два расходящихся и гаснущих кольца
+* @returns кольца
+*/
+function PuffLoader() {
+	const renderRing = (color, delay) => {
+		const classes = cn("absolute", "inset-0", "rounded-full", "border-(length:--loader-stroke-thick)", color);
+		return /* @__PURE__ */ jsx(motion.span, {
+			className: classes,
+			initial: {
+				opacity: 0,
+				scale: 0
+			},
+			animate: {
+				scale: [
+					0,
+					1,
+					0
+				],
+				opacity: [1, 0]
+			},
+			transition: loop(2, { delay })
+		}, delay);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative size-full",
+		children: [renderRing("border-muted-foreground/40", 0), renderRing("border-primary", 1)]
+	});
+}
+/**
+* Содержимое индикатора по виду
+*/
+const loaderBodies = {
+	arc: ArcLoader,
+	"dual-arc": DualArcLoader,
+	"circle-dots": CircleDotsLoader,
+	"two-dots": TwoDotsLoader,
+	"three-dots": ThreeDotsLoader,
+	triangle: TriangleLoader,
+	bounce: BounceLoader,
+	clip: ClipLoader,
+	bar: BarLoader,
+	beat: BeatLoader,
+	puff: PuffLoader
+};
+/**
+* Индикатор загрузки с анимированными видами. Цвет — text-primary, меняется через className.
+* Для маленького индикатора внутри кнопки или текста есть Spinner.
+* @param props - пропсы индикатора
+* @returns индикатор
+*/
+function Loader({ className, variant = "arc", size = "default", "aria-label": ariaLabel = texts.loading, ...props }) {
+	const Body = loaderBodies[variant ?? "arc"];
+	const classes = cn(loaderVariants({
+		variant,
+		size
+	}), className);
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-label": ariaLabel,
+		"data-slot": "loader",
+		"data-variant": variant,
+		className: classes,
+		...props,
+		children: /* @__PURE__ */ jsx(Body, {})
+	});
+}
+export { Loader };

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

@@ -0,0 +1,27 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+/**
+ * Стили индикатора: вид и размер.
+ * Размер задаёт и толщину линий (--loader-stroke, --loader-stroke-thick) и отступ второй дуги.
+ * Полоса (bar) вытянута по горизонтали.
+ * Экспортируются, чтобы переиспользовать размеры: loaderVariants({ size: 'lg' }).
+ */
+export declare const loaderVariants: (props?: ({
+  variant?: "arc" | "dual-arc" | "circle-dots" | "two-dots" | "three-dots" | "triangle" | "bounce" | "clip" | "bar" | "beat" | "puff" | null | undefined;
+  size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Вид и размер индикатора
+ */
+export type LoaderVariantsT = VariantProps<typeof loaderVariants>;
+/**
+ * Пропсы индикатора загрузки
+ */
+export type LoaderPropsT = Omit<ComponentProps<'div'>, 'aria-label' | 'children'> & {
+  /** Вид: arc, dual-arc, circle-dots, two-dots, three-dots, triangle, bounce, clip, bar, beat, puff */
+  variant?: LoaderVariantsT['variant'];
+  /** Размер: sm, default, lg, xl */
+  size?: LoaderVariantsT['size'];
+  /** Текст для скринридера, по умолчанию «Загрузка…» */
+  'aria-label'?: string;
+};

package/dist/components/loader/types.js

@@ -0,0 +1,58 @@
+import { cva } from "class-variance-authority";
+// src/components/loader/types.ts
+/**
+* Стили индикатора: вид и размер.
+* Размер задаёт и толщину линий (--loader-stroke, --loader-stroke-thick) и отступ второй дуги.
+* Полоса (bar) вытянута по горизонтали.
+* Экспортируются, чтобы переиспользовать размеры: loaderVariants({ size: 'lg' }).
+*/
+const loaderVariants = cva("inline-flex shrink-0 items-center justify-center text-primary", {
+	variants: {
+		variant: {
+			arc: "",
+			"dual-arc": "",
+			"circle-dots": "",
+			"two-dots": "",
+			"three-dots": "",
+			triangle: "",
+			bounce: "",
+			clip: "",
+			bar: "",
+			beat: "",
+			puff: ""
+		},
+		size: {
+			sm: "size-6 [--loader-stroke:2px] [--loader-stroke-thick:3px] [--loader-inset:0.25rem]",
+			default: "size-10 [--loader-stroke:3px] [--loader-stroke-thick:4px] [--loader-inset:0.375rem]",
+			lg: "size-14 [--loader-stroke:3px] [--loader-stroke-thick:4px] [--loader-inset:0.375rem]",
+			xl: "size-18 [--loader-stroke:4px] [--loader-stroke-thick:5px] [--loader-inset:0.5rem]"
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "bar",
+			size: "sm",
+			className: "h-0.5 w-16"
+		},
+		{
+			variant: "bar",
+			size: "default",
+			className: "h-1 w-24"
+		},
+		{
+			variant: "bar",
+			size: "lg",
+			className: "h-2 w-40"
+		},
+		{
+			variant: "bar",
+			size: "xl",
+			className: "h-3 w-48"
+		}
+	],
+	defaultVariants: {
+		variant: "arc",
+		size: "default"
+	}
+});
+export { loaderVariants };

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

@@ -0,0 +1,3 @@
+import { MarkerContentPropsT, MarkerIconPropsT, MarkerPropsT, markerVariants } from "./types.js";
+import { Marker, MarkerContent, MarkerIcon } from "./marker.js";
+export { Marker, MarkerContent, type MarkerContentPropsT, MarkerIcon, type MarkerIconPropsT, type MarkerPropsT, markerVariants };

package/dist/components/marker/index.js

@@ -0,0 +1,3 @@
+import { markerVariants } from "./types.js";
+import { Marker, MarkerContent, MarkerIcon } from "./marker.js";
+export { Marker, MarkerContent, MarkerIcon, markerVariants };

package/dist/components/marker/marker.d.ts

@@ -0,0 +1,19 @@
+import { MarkerContentPropsT, MarkerIconPropsT, MarkerPropsT } from "./types.js";
+/**
+ * Отметка: короткая служебная строка в ленте — событие, статус, разделитель по дате
+ * @param props - пропсы отметки
+ * @returns отметка или дочерний элемент в её стилях (render)
+ */
+export declare function Marker({ className, variant, render, ...props }: MarkerPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Иконка отметки: декоративная, скрыта от скринридера
+ * @param props - пропсы иконки
+ * @returns обёртка иконки 16px
+ */
+export declare function MarkerIcon({ className, ...props }: MarkerIconPropsT): import("react").JSX.Element;
+/**
+ * Текст отметки
+ * @param props - пропсы текста
+ * @returns текст
+ */
+export declare function MarkerContent({ className, ...props }: MarkerContentPropsT): import("react").JSX.Element;