@archytechtor/ui 0.0.0-stage → 0.2.0

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;

package/dist/components/marker/marker.js

@@ -0,0 +1,51 @@
+import { cn } from "../../lib/utils.js";
+import { markerVariants } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/marker/marker.tsx
+/**
+* Отметка: короткая служебная строка в ленте — событие, статус, разделитель по дате
+* @param props - пропсы отметки
+* @returns отметка или дочерний элемент в её стилях (render)
+*/
+function Marker({ className, variant = "default", render, ...props }) {
+	const classes = cn(markerVariants({ variant }), className);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "marker",
+			"data-variant": variant,
+			className: classes
+		}, props)
+	});
+}
+/**
+* Иконка отметки: декоративная, скрыта от скринридера
+* @param props - пропсы иконки
+* @returns обёртка иконки 16px
+*/
+function MarkerIcon({ className, ...props }) {
+	const classes = cn("size-4", "shrink-0", "[&_svg:not([class*=size-])]:size-4", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "marker-icon",
+		"aria-hidden": true,
+		className: classes,
+		...props
+	});
+}
+/**
+* Текст отметки
+* @param props - пропсы текста
+* @returns текст
+*/
+function MarkerContent({ className, ...props }) {
+	const classes = cn("min-w-0", "wrap-break-word", "group-data-[variant=separator]/marker:flex-none", "group-data-[variant=separator]/marker:text-center", "*:[a]:underline", "*:[a]:underline-offset-3", "*:[a]:hover:text-foreground", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "marker-content",
+		className: classes,
+		...props
+	});
+}
+export { Marker, MarkerContent, MarkerIcon };

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

@@ -0,0 +1,30 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Стили отметки: строка, разделитель с линиями по бокам или строка с нижней границей.
+ * Ссылка (render={<a />}) подчёркнута и темнеет при наведении
+ */
+export declare const markerVariants: (props?: ({
+  variant?: "default" | "separator" | "border" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты оформления отметки
+ */
+type MarkerVariantsT = VariantProps<typeof markerVariants>;
+/**
+ * Пропсы отметки
+ */
+export type MarkerPropsT = useRender.ComponentProps<'div'> & {
+  /** Оформление: default — строка, separator — текст между линиями, border — строка с нижней границей */
+  variant?: MarkerVariantsT['variant'];
+};
+/**
+ * Пропсы иконки отметки
+ */
+export type MarkerIconPropsT = ComponentProps<'span'>;
+/**
+ * Пропсы текста отметки
+ */
+export type MarkerContentPropsT = ComponentProps<'span'>;
+export {};

package/dist/components/marker/types.js

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority";
+// src/components/marker/types.ts
+/**
+* Стили отметки: строка, разделитель с линиями по бокам или строка с нижней границей.
+* Ссылка (render={<a />}) подчёркнута и темнеет при наведении
+*/
+const markerVariants = cva([
+	"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground",
+	"[a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
+	"[&_svg:not([class*=size-])]:size-4"
+], { variants: { variant: {
+	default: "",
+	separator: ["before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border", "after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border"],
+	border: "border-b border-border pb-2"
+} } });
+export { markerVariants };

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

@@ -0,0 +1,3 @@
+import { MenubarCheckboxItemPropsT, MenubarContentPropsT, MenubarGroupPropsT, MenubarItemPropsT, MenubarItemVariantT, MenubarLabelPropsT, MenubarMenuPropsT, MenubarPortalPropsT, MenubarPropsT, MenubarRadioGroupPropsT, MenubarRadioItemPropsT, MenubarSeparatorPropsT, MenubarShortcutPropsT, MenubarSubContentPropsT, MenubarSubPropsT, MenubarSubTriggerPropsT, MenubarTriggerPropsT } from "./types.js";
+import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./menubar.js";
+export { Menubar, MenubarCheckboxItem, type MenubarCheckboxItemPropsT, MenubarContent, type MenubarContentPropsT, MenubarGroup, type MenubarGroupPropsT, MenubarItem, type MenubarItemPropsT, type MenubarItemVariantT, MenubarLabel, type MenubarLabelPropsT, MenubarMenu, type MenubarMenuPropsT, MenubarPortal, type MenubarPortalPropsT, type MenubarPropsT, MenubarRadioGroup, type MenubarRadioGroupPropsT, MenubarRadioItem, type MenubarRadioItemPropsT, MenubarSeparator, type MenubarSeparatorPropsT, MenubarShortcut, type MenubarShortcutPropsT, MenubarSub, MenubarSubContent, type MenubarSubContentPropsT, type MenubarSubPropsT, MenubarSubTrigger, type MenubarSubTriggerPropsT, MenubarTrigger, type MenubarTriggerPropsT };

package/dist/components/menubar/index.js

@@ -0,0 +1 @@
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./menubar.js";