@archytechtor/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,39 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+/**
+ * Стили медиа пустого состояния: без фона (изображение, аватар) или плашка под иконку
+ */
+export declare const emptyMediaVariants: (props?: ({
+  variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты медиа пустого состояния
+ */
+export type EmptyMediaVariantsT = VariantProps<typeof emptyMediaVariants>;
+/**
+ * Пропсы пустого состояния
+ */
+export type EmptyPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы шапки пустого состояния
+ */
+export type EmptyHeaderPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы медиа пустого состояния
+ */
+export type EmptyMediaPropsT = ComponentProps<'div'> & {
+  /** Оформление: default — без фона, icon — иконка на плашке 32px */
+  variant?: EmptyMediaVariantsT['variant'];
+};
+/**
+ * Пропсы заголовка пустого состояния
+ */
+export type EmptyTitlePropsT = ComponentProps<'div'>;
+/**
+ * Пропсы описания пустого состояния
+ */
+export type EmptyDescriptionPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы содержимого пустого состояния
+ */
+export type EmptyContentPropsT = ComponentProps<'div'>;

package/dist/components/empty/types.js

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+// src/components/empty/types.ts
+/**
+* Стили медиа пустого состояния: без фона (изображение, аватар) или плашка под иконку
+*/
+const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: ["flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground", "[&_svg:not([class*=size-])]:size-4"]
+	} },
+	defaultVariants: { variant: "default" }
+});
+export { emptyMediaVariants };

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

@@ -0,0 +1,43 @@
+import { ExpandedCardBodyPropsT, ExpandedCardContentPropsT, ExpandedCardDescriptionPropsT, ExpandedCardExpandPropsT, ExpandedCardImagePropsT, ExpandedCardPropsT, ExpandedCardTitlePropsT } from "./types.js";
+/**
+ * Раскрывающаяся карточка: свёрнутая карточка плавно разворачивается в окно поверх страницы
+ * @param props - пропсы карточки
+ * @returns корень карточки без собственного элемента
+ */
+export declare function ExpandedCard({ open, defaultOpen, onOpenChange, transition, children }: ExpandedCardPropsT): import("react").JSX.Element;
+/**
+ * Тело карточки: во свёрнутом виде — кнопка раскрытия, внутри окна — его контейнер
+ * @param props - пропсы тела
+ * @returns карточка
+ */
+export declare function ExpandedCardBody({ className, onClick, onKeyDown, ref, children, ...props }: ExpandedCardBodyPropsT): import("react").JSX.Element;
+/**
+ * Окно раскрытия: затемнение и карточка по центру экрана, закрывается по Escape и клику снаружи
+ * @param props - пропсы окна
+ * @returns окно в портале или null, пока карточка свёрнута
+ */
+export declare function ExpandedCardExpand({ className, overlayClassName, showCloseButton, closeLabel, children, ...props }: ExpandedCardExpandPropsT): import("react").ReactPortal | null;
+/**
+ * Заголовок: при раскрытии плавно переезжает на своё место в окне
+ * @param props - пропсы заголовка
+ * @returns заголовок
+ */
+export declare function ExpandedCardTitle({ className, ...props }: ExpandedCardTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание: при раскрытии плавно переезжает на своё место в окне
+ * @param props - пропсы описания
+ * @returns описание
+ */
+export declare function ExpandedCardDescription({ className, ...props }: ExpandedCardDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Изображение карточки: на всю ширину, обрезается сверху
+ * @param props - пропсы изображения
+ * @returns изображение
+ */
+export declare function ExpandedCardImage({ className, alt, ...props }: ExpandedCardImagePropsT): import("react").JSX.Element;
+/**
+ * Содержимое, которое видно только в раскрытом окне: появляется с небольшой задержкой
+ * @param props - пропсы содержимого
+ * @returns содержимое
+ */
+export declare function ExpandedCardContent({ className, ...props }: ExpandedCardContentPropsT): import("react").JSX.Element;

package/dist/components/expanded-card/expanded-card.js

@@ -0,0 +1,352 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { Button } from "../button/button.js";
+import { XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+import { AnimatePresence, MotionConfig, motion, useIsPresent } from "motion/react";
+import { createPortal } from "react-dom";
+// src/components/expanded-card/expanded-card.tsx
+let scrollLockCount = 0;
+let scrollLockPrevious = "";
+/** Заблокировать прокрутку страницы (можно вызывать вложенно) */
+function lockBodyScroll() {
+	if (scrollLockCount === 0) {
+		scrollLockPrevious = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+	}
+	scrollLockCount += 1;
+}
+/** Снять блокировку; прокрутка возвращается, когда закрылось последнее окно */
+function unlockBodyScroll() {
+	scrollLockCount = Math.max(0, scrollLockCount - 1);
+	if (scrollLockCount === 0) document.body.style.overflow = scrollLockPrevious;
+}
+/**
+* Анимация по умолчанию: плавная пружина без перелёта
+*/
+const defaultTransition = {
+	type: "spring",
+	duration: .45,
+	bounce: .1
+};
+const ExpandedCardContext = createContext(null);
+const ExpandedViewContext = createContext(false);
+/**
+* Состояние карточки из контекста
+* @returns состояние карточки
+*/
+function useExpandedCard() {
+	const context = useContext(ExpandedCardContext);
+	if (!context) throw new Error("Части ExpandedCard должны находиться внутри <ExpandedCard>");
+	return context;
+}
+/**
+* Раскрывающаяся карточка: свёрнутая карточка плавно разворачивается в окно поверх страницы
+* @param props - пропсы карточки
+* @returns корень карточки без собственного элемента
+*/
+function ExpandedCard({ open, defaultOpen = false, onOpenChange, transition = defaultTransition, children }) {
+	const uniqueId = useId();
+	const triggerRef = useRef(null);
+	const [innerOpen, setInnerOpen] = useState(defaultOpen);
+	const isControlled = open !== void 0;
+	const isOpen = isControlled ? open : innerOpen;
+	/**
+	* Открыть или закрыть
+	* @param nextOpen - новое состояние
+	*/
+	const setOpen = (nextOpen) => {
+		if (!isControlled) setInnerOpen(nextOpen);
+		if (nextOpen !== isOpen) onOpenChange?.(nextOpen);
+	};
+	const contextValue = {
+		isOpen,
+		uniqueId,
+		triggerRef,
+		setOpen
+	};
+	return /* @__PURE__ */ jsx(ExpandedCardContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(MotionConfig, {
+			transition,
+			reducedMotion: "user",
+			children
+		})
+	});
+}
+/**
+* Тело карточки: во свёрнутом виде — кнопка раскрытия, внутри окна — его контейнер
+* @param props - пропсы тела
+* @returns карточка
+*/
+function ExpandedCardBody({ className, onClick, onKeyDown, ref, children, ...props }) {
+	const { isOpen, uniqueId, triggerRef, setOpen } = useExpandedCard();
+	const isExpandedView = useContext(ExpandedViewContext);
+	const classes = cn("relative", "flex", "flex-col", "overflow-hidden", "rounded-xl", "bg-card", "pb-2", "text-sm", "text-card-foreground", "shadow-sm", "ring-1", "ring-foreground/10", !isExpandedView && [
+		"cursor-pointer",
+		"outline-none",
+		"select-none",
+		"focus-visible:ring-3",
+		"focus-visible:ring-ring/50"
+	], className);
+	/**
+	* Элемент карточки: наружу и в контекст для возврата фокуса
+	* @param node - элемент или null при размонтировании
+	*/
+	const setRef = (node) => {
+		if (!isExpandedView) triggerRef.current = node;
+		if (typeof ref === "function") {
+			ref(node);
+			return;
+		}
+		if (ref) ref.current = node;
+	};
+	/**
+	* Нажатие: раскрыть свёрнутую карточку
+	* @param event - событие нажатия
+	*/
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!isExpandedView && !event.defaultPrevented) setOpen(true);
+	};
+	/**
+	* Enter и пробел раскрывают свёрнутую карточку
+	* @param event - событие клавиатуры
+	*/
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		const isActionKey = event.key === "Enter" || event.key === " ";
+		const isSelf = event.target === event.currentTarget;
+		if (isExpandedView || event.defaultPrevented || !isActionKey || !isSelf) return;
+		event.preventDefault();
+		setOpen(true);
+	};
+	const triggerProps = isExpandedView ? {} : {
+		role: "button",
+		tabIndex: 0,
+		"aria-haspopup": "dialog",
+		"aria-expanded": isOpen
+	};
+	return /* @__PURE__ */ jsx(motion.div, {
+		"data-slot": "expanded-card-body",
+		layoutId: `expanded-card-${uniqueId}`,
+		ref: setRef,
+		className: classes,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		...triggerProps,
+		...props,
+		children
+	});
+}
+/**
+* Окно раскрытия: затемнение и карточка по центру экрана, закрывается по Escape и клику снаружи
+* @param props - пропсы окна
+* @returns окно в портале или null, пока карточка свёрнута
+*/
+function ExpandedCardExpand({ className, overlayClassName, showCloseButton = true, closeLabel = texts.close, children, ...props }) {
+	const { isOpen, uniqueId, triggerRef, setOpen } = useExpandedCard();
+	const panelRef = useRef(null);
+	const [isMounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	useEffect(() => {
+		if (!isOpen) return;
+		/**
+		* Escape закрывает окно
+		* @param event - событие клавиатуры
+		*/
+		const handleEscape = (event) => {
+			if (event.key === "Escape") setOpen(false);
+		};
+		const trigger = triggerRef.current;
+		const blockedElements = [];
+		for (const element of document.body.children) {
+			const slot = element.getAttribute("data-slot");
+			if (slot === "expanded-card-overlay" || slot === "expanded-card-window") continue;
+			if (!element.hasAttribute("inert")) {
+				element.setAttribute("inert", "");
+				blockedElements.push(element);
+			}
+		}
+		lockBodyScroll();
+		document.addEventListener("keydown", handleEscape);
+		panelRef.current?.focus({ preventScroll: true });
+		return () => {
+			for (const element of blockedElements) element.removeAttribute("inert");
+			unlockBodyScroll();
+			trigger?.focus({ preventScroll: true });
+			document.removeEventListener("keydown", handleEscape);
+		};
+	}, [isOpen]);
+	if (!isMounted) return null;
+	const overlayClasses = cn("fixed", "inset-0", "z-50", "bg-black/10", "supports-backdrop-filter:backdrop-blur-xs", overlayClassName);
+	const bodyClasses = cn("pointer-events-auto", "max-h-[calc(100dvh-2rem)]", "w-full", "overflow-y-auto", "outline-none", className);
+	return createPortal(/* @__PURE__ */ jsxs(AnimatePresence, {
+		initial: false,
+		mode: "sync",
+		children: [isOpen && /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "expanded-card-overlay",
+			className: overlayClasses,
+			initial: { opacity: 0 },
+			animate: {
+				opacity: 1,
+				pointerEvents: "auto"
+			},
+			exit: {
+				opacity: 0,
+				pointerEvents: "none"
+			},
+			transition: { duration: .2 },
+			onClick: () => setOpen(false)
+		}, "overlay"), isOpen && /* @__PURE__ */ jsx("div", {
+			"data-slot": "expanded-card-window",
+			className: "pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4",
+			children: /* @__PURE__ */ jsxs(ExpandedCardPresence, {
+				className: "relative w-full max-w-2xl",
+				children: [/* @__PURE__ */ jsx(ExpandedViewContext.Provider, {
+					value: true,
+					children: /* @__PURE__ */ jsx(ExpandedCardBody, {
+						ref: panelRef,
+						role: "dialog",
+						"aria-modal": true,
+						"aria-labelledby": `${uniqueId}-title`,
+						tabIndex: -1,
+						className: bodyClasses,
+						...props,
+						children
+					})
+				}), showCloseButton && /* @__PURE__ */ jsx(ExpandedCardClose, { label: closeLabel })]
+			})
+		}, "window")]
+	}), document.body);
+}
+/**
+* Обёртка окна: пока оно закрывается (идёт анимация выхода), клики проходят сквозь него,
+* поэтому карточку можно открыть снова, не дожидаясь конца анимации
+* @param props - пропсы обёртки
+* @param props.className - классы обёртки
+* @param props.children - содержимое окна
+* @returns обёртка окна
+*/
+function ExpandedCardPresence({ className, children }) {
+	const isPresent = useIsPresent();
+	const classes = cn(className, !isPresent && ["*:pointer-events-none", "**:pointer-events-none"]);
+	return /* @__PURE__ */ jsx("div", {
+		className: classes,
+		children
+	});
+}
+/**
+* Кнопка закрытия в углу окна
+* @param props - подпись кнопки
+* @param props.label - подпись для скринридера
+* @returns кнопка закрытия
+*/
+function ExpandedCardClose({ label }) {
+	const { setOpen } = useExpandedCard();
+	return /* @__PURE__ */ jsx(motion.div, {
+		"data-slot": "expanded-card-close",
+		className: "pointer-events-auto absolute top-2 right-2 z-10",
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: {
+			opacity: 0,
+			transition: { duration: .1 }
+		},
+		transition: {
+			duration: .2,
+			delay: .2
+		},
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-sm",
+			"aria-label": label,
+			className: "rounded-full bg-background/50 text-foreground/60 hover:bg-background/70",
+			onClick: () => setOpen(false),
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		})
+	});
+}
+/**
+* Заголовок: при раскрытии плавно переезжает на своё место в окне
+* @param props - пропсы заголовка
+* @returns заголовок
+*/
+function ExpandedCardTitle({ className, ...props }) {
+	const { uniqueId } = useExpandedCard();
+	const id = useContext(ExpandedViewContext) ? `${uniqueId}-title` : void 0;
+	const classes = cn("mt-2", "px-4", "text-lg", "leading-6", "font-semibold", "tracking-tight", className);
+	return /* @__PURE__ */ jsx(motion.h2, {
+		"data-slot": "expanded-card-title",
+		id,
+		layout: "position",
+		layoutId: `expanded-card-title-${uniqueId}`,
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание: при раскрытии плавно переезжает на своё место в окне
+* @param props - пропсы описания
+* @returns описание
+*/
+function ExpandedCardDescription({ className, ...props }) {
+	const { uniqueId } = useExpandedCard();
+	const classes = cn("px-4", "text-sm", "text-muted-foreground", className);
+	return /* @__PURE__ */ jsx(motion.p, {
+		"data-slot": "expanded-card-description",
+		layout: "position",
+		layoutId: `expanded-card-description-${uniqueId}`,
+		className: classes,
+		...props
+	});
+}
+/**
+* Изображение карточки: на всю ширину, обрезается сверху
+* @param props - пропсы изображения
+* @returns изображение
+*/
+function ExpandedCardImage({ className, alt = "", ...props }) {
+	const classes = cn("h-full", "w-full", "object-cover", "object-top", className);
+	return /* @__PURE__ */ jsx("img", {
+		"data-slot": "expanded-card-image",
+		alt,
+		className: classes,
+		...props
+	});
+}
+/**
+* Содержимое, которое видно только в раскрытом окне: появляется с небольшой задержкой
+* @param props - пропсы содержимого
+* @returns содержимое
+*/
+function ExpandedCardContent({ className, ...props }) {
+	const classes = cn("overflow-hidden", "p-4", className);
+	return /* @__PURE__ */ jsx(motion.div, {
+		"data-slot": "expanded-card-content",
+		className: classes,
+		initial: {
+			opacity: 0,
+			y: 6
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: 6
+		},
+		transition: {
+			ease: "easeIn",
+			duration: .3,
+			delay: .2
+		},
+		...props
+	});
+}
+export { ExpandedCard, ExpandedCardBody, ExpandedCardContent, ExpandedCardDescription, ExpandedCardExpand, ExpandedCardImage, ExpandedCardTitle };

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

@@ -0,0 +1,3 @@
+import { ExpandedCardBodyPropsT, ExpandedCardContentPropsT, ExpandedCardDescriptionPropsT, ExpandedCardExpandPropsT, ExpandedCardImagePropsT, ExpandedCardPropsT, ExpandedCardTitlePropsT } from "./types.js";
+import { ExpandedCard, ExpandedCardBody, ExpandedCardContent, ExpandedCardDescription, ExpandedCardExpand, ExpandedCardImage, ExpandedCardTitle } from "./expanded-card.js";
+export { ExpandedCard, ExpandedCardBody, type ExpandedCardBodyPropsT, ExpandedCardContent, type ExpandedCardContentPropsT, ExpandedCardDescription, type ExpandedCardDescriptionPropsT, ExpandedCardExpand, type ExpandedCardExpandPropsT, ExpandedCardImage, type ExpandedCardImagePropsT, type ExpandedCardPropsT, ExpandedCardTitle, type ExpandedCardTitlePropsT };

package/dist/components/expanded-card/index.js

@@ -0,0 +1 @@
+export { ExpandedCard, ExpandedCardBody, ExpandedCardContent, ExpandedCardDescription, ExpandedCardExpand, ExpandedCardImage, ExpandedCardTitle } from "./expanded-card.js";

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

@@ -0,0 +1,52 @@
+import { ComponentProps, ReactNode, RefObject } from "react";
+import { Transition } from "motion/react";
+/**
+ * Пропсы карточки
+ */
+export type ExpandedCardPropsT = {
+  /** Раскрыта ли карточка (контролируемый режим) */
+  open?: boolean;
+  /** Раскрыта ли карточка при первом рендере (неконтролируемый режим) */
+  defaultOpen?: boolean;
+  /** Карточку раскрыли или закрыли */
+  onOpenChange?: (open: boolean) => void;
+  /** Анимация раскрытия: параметры motion, например { type: 'spring', duration: 0.6 } */
+  transition?: Transition;
+  /** Свёрнутая карточка и окно раскрытия */
+  children?: ReactNode;
+};
+/**
+ * Пропсы карточки-тела без обработчиков, которые у motion имеют другие типы
+ */
+export type MotionDivPropsT = Omit<ComponentProps<'div'>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'style'>;
+/**
+ * Пропсы тела карточки
+ */
+export type ExpandedCardBodyPropsT = MotionDivPropsT;
+/**
+ * Пропсы окна раскрытия
+ */
+export type ExpandedCardExpandPropsT = MotionDivPropsT & {
+  /** Классы затемнения под окном */
+  overlayClassName?: string;
+  /** Показывать ли кнопку закрытия */
+  showCloseButton?: boolean;
+  /** Подпись кнопки закрытия для скринридера и подсказки, по умолчанию «Закрыть» */
+  closeLabel?: string;
+};
+/**
+ * Пропсы заголовка карточки
+ */
+export type ExpandedCardTitlePropsT = Omit<ComponentProps<'h2'>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'style'>;
+/**
+ * Пропсы описания карточки
+ */
+export type ExpandedCardDescriptionPropsT = Omit<ComponentProps<'p'>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'style'>;
+/**
+ * Пропсы изображения карточки
+ */
+export type ExpandedCardImagePropsT = ComponentProps<'img'>;
+/**
+ * Пропсы содержимого окна
+ */
+export type ExpandedCardContentPropsT = MotionDivPropsT;

package/dist/components/field/field.d.ts

@@ -0,0 +1,62 @@
+import { FieldContentPropsT, FieldDescriptionPropsT, FieldErrorPropsT, FieldGroupPropsT, FieldLabelPropsT, FieldLegendPropsT, FieldPropsT, FieldSeparatorPropsT, FieldSetPropsT, FieldTitlePropsT } from "./types.js";
+/**
+ * Набор полей: fieldset с заголовком FieldLegend
+ * @param props - пропсы набора
+ * @returns fieldset
+ */
+export declare function FieldSet({ className, ...props }: FieldSetPropsT): import("react").JSX.Element;
+/**
+ * Заголовок набора полей
+ * @param props - пропсы заголовка
+ * @returns legend
+ */
+export declare function FieldLegend({ className, variant, ...props }: FieldLegendPropsT): import("react").JSX.Element;
+/**
+ * Группа полей: столбик полей с отступами; контейнер для orientation="responsive"
+ * @param props - пропсы группы
+ * @returns div
+ */
+export declare function FieldGroup({ className, ...props }: FieldGroupPropsT): import("react").JSX.Element;
+/**
+ * Поле формы: подпись, элемент управления, описание и ошибка.
+ * data-invalid={true} красит поле в цвет ошибки, data-disabled={true} приглушает подпись
+ * @param props - пропсы поля
+ * @returns div с role="group"
+ */
+export declare function Field({ className, orientation, ...props }: FieldPropsT): import("react").JSX.Element;
+/**
+ * Содержимое поля: подпись и описание столбиком рядом с флажком или переключателем
+ * @param props - пропсы содержимого
+ * @returns div
+ */
+export declare function FieldContent({ className, ...props }: FieldContentPropsT): import("react").JSX.Element;
+/**
+ * Подпись поля. С Field внутри становится карточкой выбора
+ * @param props - пропсы подписи
+ * @returns label
+ */
+export declare function FieldLabel({ className, ...props }: FieldLabelPropsT): import("react").JSX.Element;
+/**
+ * Заголовок поля: как подпись, но не label — для карточек выбора
+ * @param props - пропсы заголовка
+ * @returns div
+ */
+export declare function FieldTitle({ className, ...props }: FieldTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание поля: подсказка серым текстом
+ * @param props - пропсы описания
+ * @returns p
+ */
+export declare function FieldDescription({ className, ...props }: FieldDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Разделитель полей: линия, при необходимости с текстом посередине
+ * @param props - пропсы разделителя
+ * @returns div
+ */
+export declare function FieldSeparator({ children, className, ...props }: FieldSeparatorPropsT): import("react").JSX.Element;
+/**
+ * Ошибка поля: красный текст под элементом управления, озвучивается сразу
+ * @param props - пропсы ошибки
+ * @returns div с role="alert" или null, если ошибок нет
+ */
+export declare function FieldError({ className, children, errors, ...props }: FieldErrorPropsT): import("react").JSX.Element | null;