@archytechtor/ui 0.0.0-stage → 0.1.0

package/dist/components/message-scroller/message-scroller.d.ts

@@ -0,0 +1,39 @@
+import { MessageScrollerButtonPropsT, MessageScrollerContentPropsT, MessageScrollerItemPropsT, MessageScrollerPropsT, MessageScrollerProviderPropsT, MessageScrollerViewportPropsT } from "./types.js";
+import { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "./message-scroller-primitive.js";
+/**
+ * Провайдер ленты сообщений: нужен, когда хуки прокрутки используются вне MessageScroller
+ * @param props - пропсы провайдера
+ * @returns контекст ленты
+ */
+export declare function MessageScrollerProvider(props: MessageScrollerProviderPropsT): import("react").JSX.Element;
+/**
+ * Лента сообщений: корень с прокручиваемой областью и кнопками прокрутки
+ * @param props - пропсы корня
+ * @returns корень ленты
+ */
+export declare function MessageScroller({ className, ...props }: MessageScrollerPropsT): import("react").JSX.Element;
+/**
+ * Прокручиваемая область ленты: фокусируется и прокручивается с клавиатуры
+ * @param props - пропсы области
+ * @returns область прокрутки
+ */
+export declare function MessageScrollerViewport({ className, 'aria-label': ariaLabel, ...props }: MessageScrollerViewportPropsT): import("react").JSX.Element;
+/**
+ * Содержимое ленты: колонка сообщений, объявляет новые сообщения скринридеру (role=log)
+ * @param props - пропсы содержимого
+ * @returns колонка сообщений
+ */
+export declare function MessageScrollerContent({ className, ...props }: MessageScrollerContentPropsT): import("react").JSX.Element;
+/**
+ * Элемент ленты: сообщение или группа сообщений
+ * @param props - пропсы элемента
+ * @returns элемент ленты
+ */
+export declare function MessageScrollerItem({ className, scrollAnchor, ...props }: MessageScrollerItemPropsT): import("react").JSX.Element;
+/**
+ * Кнопка прокрутки: появляется, когда есть куда прокручивать
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function MessageScrollerButton({ direction, className, children, variant, size, label, ...props }: MessageScrollerButtonPropsT): import("react").JSX.Element;
+export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };

package/dist/components/message-scroller/message-scroller.js

@@ -0,0 +1,103 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { MessageScrollerPrimitive, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "./message-scroller-primitive.js";
+import { ArrowDownIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/message-scroller/message-scroller.tsx
+/** Подпись области сообщений для скринридера по умолчанию */
+const VIEWPORT_LABEL = "Сообщения";
+/** Подпись кнопки «в конец» по умолчанию */
+const SCROLL_TO_END_LABEL = "Прокрутить в конец";
+/** Подпись кнопки «в начало» по умолчанию */
+const SCROLL_TO_START_LABEL = "Прокрутить в начало";
+/**
+* Провайдер ленты сообщений: нужен, когда хуки прокрутки используются вне MessageScroller
+* @param props - пропсы провайдера
+* @returns контекст ленты
+*/
+function MessageScrollerProvider(props) {
+	return /* @__PURE__ */ jsx(MessageScrollerPrimitive.Provider, { ...props });
+}
+/**
+* Лента сообщений: корень с прокручиваемой областью и кнопками прокрутки
+* @param props - пропсы корня
+* @returns корень ленты
+*/
+function MessageScroller({ className, ...props }) {
+	const classes = cn("group/message-scroller", "relative", "flex", "size-full", "min-h-0", "flex-col", "overflow-hidden", className);
+	return /* @__PURE__ */ jsx(MessageScrollerPrimitive.Root, {
+		"data-slot": "message-scroller",
+		className: classes,
+		...props
+	});
+}
+/**
+* Прокручиваемая область ленты: фокусируется и прокручивается с клавиатуры
+* @param props - пропсы области
+* @returns область прокрутки
+*/
+function MessageScrollerViewport({ className, "aria-label": ariaLabel = VIEWPORT_LABEL, ...props }) {
+	const classes = cn("size-full", "min-h-0", "min-w-0", "scroll-fade-b", "overflow-y-auto", "overscroll-contain", "[contain:content]", "[scrollbar-gutter:stable]", "[scrollbar-width:thin]", "data-autoscrolling:[scrollbar-color:transparent_transparent]", "data-pending-scroll:invisible", className);
+	return /* @__PURE__ */ jsx(MessageScrollerPrimitive.Viewport, {
+		"data-slot": "message-scroller-viewport",
+		"aria-label": ariaLabel,
+		className: classes,
+		...props
+	});
+}
+/**
+* Содержимое ленты: колонка сообщений, объявляет новые сообщения скринридеру (role=log)
+* @param props - пропсы содержимого
+* @returns колонка сообщений
+*/
+function MessageScrollerContent({ className, ...props }) {
+	const classes = cn("flex", "h-max", "min-h-full", "flex-col", "gap-8", className);
+	return /* @__PURE__ */ jsx(MessageScrollerPrimitive.Content, {
+		"data-slot": "message-scroller-content",
+		className: classes,
+		...props
+	});
+}
+/**
+* Элемент ленты: сообщение или группа сообщений
+* @param props - пропсы элемента
+* @returns элемент ленты
+*/
+function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+	const classes = cn("min-w-0", "shrink-0", "[contain-intrinsic-size:auto_10rem]", "[content-visibility:auto]", className);
+	return /* @__PURE__ */ jsx(MessageScrollerPrimitive.Item, {
+		"data-slot": "message-scroller-item",
+		scrollAnchor,
+		className: classes,
+		...props
+	});
+}
+/**
+* Кнопка прокрутки: появляется, когда есть куда прокручивать
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function MessageScrollerButton({ direction = "end", className, children, variant = "secondary", size = "icon-sm", label, ...props }) {
+	const defaultLabel = direction === "end" ? SCROLL_TO_END_LABEL : SCROLL_TO_START_LABEL;
+	const classes = cn("absolute", "left-1/2", "-translate-x-1/2", "border-border", "bg-background", "text-foreground", "transition-[translate,scale,opacity]", "duration-200", "hover:bg-muted", "hover:text-foreground", "data-[active=false]:pointer-events-none", "data-[active=false]:scale-95", "data-[active=false]:opacity-0", "data-[active=false]:duration-400", "data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)]", "data-[active=true]:translate-y-0", "data-[active=true]:scale-100", "data-[active=true]:opacity-100", "data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)]", "data-[direction=end]:bottom-4", "data-[direction=end]:data-[active=false]:translate-y-full", "data-[direction=start]:top-4", "data-[direction=start]:data-[active=false]:-translate-y-full", "data-[direction=start]:[&_svg]:rotate-180", className);
+	const content = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ArrowDownIcon, {}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: label ?? defaultLabel
+	})] });
+	return /* @__PURE__ */ jsx(MessageScrollerPrimitive.Button, {
+		"data-slot": "message-scroller-button",
+		"data-direction": direction,
+		"data-variant": variant,
+		"data-size": size,
+		direction,
+		className: classes,
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size
+		}),
+		...props,
+		children: content
+	});
+}
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };

package/dist/components/message-scroller/types.d.ts

@@ -0,0 +1,107 @@
+import { ButtonPropsT } from "../button/types.js";
+import "../button/index.js";
+import { ComponentProps, ReactElement, ReactNode, RefObject } from "react";
+/**
+ * Начальная позиция прокрутки: в начале, в конце или у последнего якоря
+ */
+export type MessageScrollerDefaultScrollPositionT = 'start' | 'end' | 'last-anchor';
+/**
+ * Направление кнопки прокрутки
+ */
+export type MessageScrollerButtonDirectionT = 'start' | 'end';
+/**
+ * Выравнивание сообщения при прокрутке к нему
+ */
+export type MessageScrollerScrollAlignT = 'start' | 'center' | 'end' | 'nearest';
+/**
+ * Параметры прокрутки: выравнивание, поведение, отступ
+ * @property align - выравнивание сообщения
+ * @property behavior - плавная или мгновенная прокрутка
+ * @property scrollMargin - отступ от края в пикселях
+ */
+export type MessageScrollerScrollOptionsT = {
+  align?: MessageScrollerScrollAlignT;
+  behavior?: ScrollBehavior;
+  scrollMargin?: number;
+};
+/**
+ * Есть ли куда прокручивать: к началу и к концу
+ * @property start - есть куда прокрутить к началу
+ * @property end - есть куда прокрутить к концу
+ */
+export type MessageScrollerScrollableT = {
+  start: boolean;
+  end: boolean;
+};
+/**
+ * Видимые сообщения и текущий якорь
+ * @property currentAnchorId - якорь, который сейчас у верхнего края
+ * @property visibleMessageIds - видимые сообщения по порядку
+ */
+export type MessageScrollerVisibilityStateT = {
+  currentAnchorId: string | null;
+  visibleMessageIds: string[];
+};
+/**
+ * Пропсы провайдера ленты сообщений
+ */
+export type MessageScrollerProviderPropsT = {
+  /** Содержимое: лента и элементы, которые управляют прокруткой через хуки */
+  children?: ReactNode;
+  /** Следовать за новыми сообщениями, пока пользователь у нижнего края */
+  autoScroll?: boolean;
+  /** Начальная позиция: start, end или last-anchor (начало последнего якоря), по умолчанию end */
+  defaultScrollPosition?: MessageScrollerDefaultScrollPositionT;
+  /** Расстояние до края в пикселях, при котором лента считается прокрученной до конца, по умолчанию 8 */
+  scrollEdgeThreshold?: number;
+  /** Сколько пикселей предыдущего сообщения видно над якорем, по умолчанию 64 */
+  scrollPreviousItemPeek?: number;
+  /** Отступ сверху при прокрутке к сообщению в пикселях, по умолчанию 0 */
+  scrollMargin?: number;
+};
+/**
+ * Пропсы корня ленты сообщений
+ */
+export type MessageScrollerPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы прокручиваемой области
+ */
+export type MessageScrollerViewportPropsT = Omit<ComponentProps<'div'>, 'aria-label'> & {
+  /** Подпись области для скринридера, по умолчанию «Сообщения» */
+  'aria-label'?: string;
+  /** Сохранять видимое сообщение на месте, когда сверху подгружается история, по умолчанию true */
+  preserveScrollOnPrepend?: boolean;
+};
+/**
+ * Пропсы содержимого ленты
+ */
+export type MessageScrollerContentPropsT = ComponentProps<'div'> & {
+  /** Классы служебного отступа в конце ленты, который позволяет прокрутить якорь к верху */
+  spacerClassName?: string;
+};
+/**
+ * Пропсы элемента ленты
+ */
+export type MessageScrollerItemPropsT = ComponentProps<'div'> & {
+  /** Идентификатор сообщения: для scrollToMessage и отслеживания видимости */
+  messageId?: string;
+  /** Якорь: при появлении лента прокручивается так, чтобы элемент оказался сверху */
+  scrollAnchor?: boolean;
+};
+/**
+ * Пропсы кнопки прокрутки
+ */
+export type MessageScrollerButtonPropsT = Omit<ComponentProps<'button'>, 'children'> & {
+  /** Куда прокручивает: end — в конец (внизу ленты), start — в начало (вверху) */
+  direction?: MessageScrollerButtonDirectionT;
+  /** Плавная или мгновенная прокрутка, по умолчанию smooth */
+  behavior?: ScrollBehavior;
+  /** Оформление кнопки, по умолчанию secondary */
+  variant?: ButtonPropsT['variant'];
+  /** Размер кнопки, по умолчанию icon-sm */
+  size?: ButtonPropsT['size'];
+  /** Подпись для скринридера, по умолчанию «Прокрутить в конец» или «Прокрутить в начало» */
+  label?: string;
+  /** Своё содержимое вместо стрелки и подписи */
+  children?: ReactNode;
+};

package/dist/components/money-input/index.d.ts

@@ -0,0 +1,3 @@
+import { MoneyInputPropsT } from "./types.js";
+import { MoneyInput } from "./money-input.js";
+export { MoneyInput, type MoneyInputPropsT };

package/dist/components/money-input/index.js

@@ -0,0 +1 @@
+export { MoneyInput } from "./money-input.js";

package/dist/components/money-input/money-input.d.ts

@@ -0,0 +1,7 @@
+import { MoneyInputPropsT } from "./types.js";
+/**
+ * Поле суммы: разряды через пробел, запятая в дробной части, ₽ справа
+ * @param props - пропсы поля; value — число, onValueChange — число или null
+ * @returns группа поля
+ */
+export declare function MoneyInput({ value, defaultValue, onValueChange, fractionDigits, allowNegative, currencySymbol, groupClassName, onChange, placeholder, disabled, ...props }: MoneyInputPropsT): import("react").JSX.Element;

package/dist/components/money-input/money-input.js

@@ -0,0 +1,143 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { NUMBER_LOCALE } from "../../lib/locale.js";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "../input-group/input-group.js";
+import { useControllableState } from "../../lib/use-controllable-state.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+// src/components/money-input/money-input.tsx
+/** Разделитель тысяч в ru-RU: неразрывный пробел */
+const GROUP_SEPARATOR = "\xA0";
+/**
+* Разбить целую часть на разряды: 1234567 → 1 234 567
+* @param integer - цифры целой части
+* @returns цифры с разделителями
+*/
+function groupDigits(integer) {
+	return integer.replace(/\B(?=(\d{3})+(?!\d))/g, GROUP_SEPARATOR);
+}
+/**
+* Очистить ввод: цифры, одна запятая, минус в начале; разряды через пробел
+* @param raw - текст из поля
+* @param fractionDigits - знаков после запятой
+* @param allowNegative - можно ли минус
+* @returns текст для показа
+*/
+function cleanText(raw, fractionDigits, allowNegative) {
+	const isNegative = allowNegative && raw.trim().startsWith("-");
+	const normalized = raw.replace(/\./g, ",").replace(/[^\d,]/g, "");
+	const commaIndex = fractionDigits > 0 ? normalized.indexOf(",") : -1;
+	let integer;
+	let fraction = "";
+	if (commaIndex >= 0) {
+		integer = normalized.slice(0, commaIndex);
+		fraction = normalized.slice(commaIndex + 1).replace(/,/g, "").slice(0, fractionDigits);
+	} else integer = normalized.replace(/,/g, "");
+	integer = integer.replace(/^0+(?=\d)/, "");
+	if (commaIndex >= 0 && integer === "") integer = "0";
+	const sign = isNegative ? "-" : "";
+	const comma = commaIndex >= 0 ? "," : "";
+	return `${sign}${groupDigits(integer)}${comma}${fraction}`;
+}
+/**
+* Число из текста поля
+* @param text - текст с разрядами и запятой
+* @returns число или null, если цифр нет
+*/
+function parseText(text) {
+	const plain = text.replace(new RegExp(GROUP_SEPARATOR, "g"), "").replace(",", ".");
+	if (!/\d/.test(plain)) return null;
+	return Number(plain);
+}
+/**
+* Текст поля для числа: разряды и запятая, без лишних нулей
+* @param value - сумма
+* @param fractionDigits - знаков после запятой
+* @returns текст
+*/
+function formatValue(value, fractionDigits) {
+	if (value === null || Number.isNaN(value)) return "";
+	return new Intl.NumberFormat(NUMBER_LOCALE, {
+		maximumFractionDigits: fractionDigits,
+		useGrouping: true
+	}).format(value).replace(/\s/g, GROUP_SEPARATOR);
+}
+/**
+* Сколько значимых символов (цифр, запятых и точек, минуса) стоит до позиции
+* @param text - текст
+* @param position - позиция курсора
+* @returns число символов
+*/
+function countSignificant(text, position) {
+	return text.slice(0, position).replace(/[^\d,.-]/g, "").length;
+}
+/**
+* Позиция после заданного числа значимых символов
+* @param text - текст
+* @param count - число значимых символов
+* @returns позиция курсора
+*/
+function findPosition(text, count) {
+	let seen = 0;
+	for (let index = 0; index < text.length; index++) {
+		if (seen === count) return index;
+		if (/[\d,-]/.test(text.charAt(index))) seen++;
+	}
+	return text.length;
+}
+/**
+* Поле суммы: разряды через пробел, запятая в дробной части, ₽ справа
+* @param props - пропсы поля; value — число, onValueChange — число или null
+* @returns группа поля
+*/
+function MoneyInput({ value, defaultValue = null, onValueChange, fractionDigits = 2, allowNegative = false, currencySymbol = "₽", groupClassName, onChange, placeholder = "0", disabled, ...props }) {
+	const [amount, setAmount] = useControllableState({
+		prop: value,
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		caller: "MoneyInput"
+	});
+	const [text, setText] = useState(() => formatValue(amount, fractionDigits));
+	const inputRef = useRef(null);
+	const caretRef = useRef(null);
+	const shownText = parseText(text) === amount ? text : formatValue(amount, fractionDigits);
+	const classes = cn(groupClassName);
+	useLayoutEffect(() => {
+		const input = inputRef.current;
+		if (input && caretRef.current !== null && document.activeElement === input) input.setSelectionRange(caretRef.current, caretRef.current);
+		caretRef.current = null;
+	});
+	/**
+	* Новый текст поля: очистить, разбить на разряды и сохранить место курсора
+	* @param event - событие изменения
+	*/
+	const handleChange = (event) => {
+		onChange?.(event);
+		const raw = event.target.value;
+		const significantBefore = countSignificant(raw, event.target.selectionStart ?? raw.length);
+		const nextText = cleanText(raw, fractionDigits, allowNegative);
+		caretRef.current = findPosition(nextText, significantBefore);
+		setText(nextText);
+		setAmount(parseText(nextText));
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		"data-slot": "money-input",
+		"data-disabled": disabled,
+		className: classes,
+		children: [/* @__PURE__ */ jsx(InputGroupInput, {
+			ref: inputRef,
+			type: "text",
+			inputMode: "decimal",
+			autoComplete: "off",
+			placeholder,
+			value: shownText,
+			onChange: handleChange,
+			disabled,
+			...props
+		}), currencySymbol && /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "inline-end",
+			children: /* @__PURE__ */ jsx(InputGroupText, { children: currencySymbol })
+		})]
+	});
+}
+export { MoneyInput };

package/dist/components/money-input/types.d.ts

@@ -0,0 +1,20 @@
+import { InputPropsT } from "../input/types.js";
+/**
+ * Пропсы поля суммы
+ */
+export type MoneyInputPropsT = Omit<InputPropsT, 'type' | 'value' | 'defaultValue' | 'inputMode'> & {
+  /** Сумма — контролируемый режим, вместе с onValueChange. null — поле пустое */
+  value?: number | null;
+  /** Сумма при первом рендере — неконтролируемый режим */
+  defaultValue?: number | null;
+  /** Сумма изменилась: число или null, если поле пустое */
+  onValueChange?: (value: number | null) => void;
+  /** Сколько знаков после запятой можно ввести. По умолчанию 2, 0 — только целые */
+  fractionDigits?: number;
+  /** Разрешить отрицательные суммы */
+  allowNegative?: boolean;
+  /** Символ валюты справа. По умолчанию ₽; пустая строка — без символа */
+  currencySymbol?: string;
+  /** Классы рамки поля */
+  groupClassName?: string;
+};

package/dist/components/morph-image/index.d.ts

@@ -0,0 +1,3 @@
+import { MorphImagePropsT, morphImageVariants } from "./types.js";
+import { MorphImage } from "./morph-image.js";
+export { MorphImage, type MorphImagePropsT, morphImageVariants };

package/dist/components/morph-image/index.js

@@ -0,0 +1,3 @@
+import { morphImageVariants } from "./types.js";
+import { MorphImage } from "./morph-image.js";
+export { MorphImage, morphImageVariants };

package/dist/components/morph-image/morph-image.d.ts

@@ -0,0 +1,8 @@
+import { MorphImagePropsT } from "./types.js";
+/**
+ * Изображение с плавным раскрытием на весь экран: клик по миниатюре увеличивает её поверх страницы,
+ * клик по затемнению или Escape возвращает на место
+ * @param props - пропсы изображения
+ * @returns миниатюра и слой с раскрытым изображением
+ */
+export declare function MorphImage({ className, expandedClassName, src, alt, open, defaultOpen, onOpenChange, closeOnScroll, transition, openLabel, closeLabel, ref, ...props }: MorphImagePropsT): import("react").JSX.Element;

package/dist/components/morph-image/morph-image.js

@@ -0,0 +1,155 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { morphImageVariants } from "./types.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { createPortal } from "react-dom";
+// src/components/morph-image/morph-image.tsx
+/** Пружина по умолчанию: раскрытие и возврат изображения */
+const defaultTransition = {
+	type: "spring",
+	stiffness: 120,
+	damping: 15
+};
+/** Без анимации: для пользователей с prefers-reduced-motion */
+const instantTransition = { duration: 0 };
+/**
+* Скругление элемента в px из его классов. motion сохраняет скругление при анимации
+* размера, только если оно задано числом в style, иначе углы сжимаются вместе с картинкой
+* @param ref - элемент, у которого берётся скругление
+* @param isShown - элемент показан: при появлении скругление измеряется заново
+* @returns скругление в px или undefined до измерения
+*/
+function useBorderRadius(ref, isShown = true) {
+	const [radius, setRadius] = useState();
+	useLayoutEffect(() => {
+		if (isShown && ref.current) setRadius(parseFloat(getComputedStyle(ref.current).borderTopLeftRadius));
+	}, [ref, isShown]);
+	return radius;
+}
+/**
+* Изображение с плавным раскрытием на весь экран: клик по миниатюре увеличивает её поверх страницы,
+* клик по затемнению или Escape возвращает на место
+* @param props - пропсы изображения
+* @returns миниатюра и слой с раскрытым изображением
+*/
+function MorphImage({ className, expandedClassName, src, alt, open, defaultOpen = false, onOpenChange, closeOnScroll = true, transition = defaultTransition, openLabel = "Увеличить изображение", closeLabel = texts.close, ref, ...props }) {
+	const layoutId = useId();
+	const isReduced = useReducedMotion();
+	const [innerOpen, setInnerOpen] = useState(defaultOpen);
+	const [isMounted, setIsMounted] = useState(false);
+	const isOpen = open ?? innerOpen;
+	const triggerRef = useRef(null);
+	const expandedRef = useRef(null);
+	const triggerRadius = useBorderRadius(triggerRef);
+	const expandedRadius = useBorderRadius(expandedRef, isOpen);
+	const triggerLabel = alt ? `${openLabel}: ${alt}` : openLabel;
+	const motionTransition = isReduced ? instantTransition : transition;
+	const triggerClasses = cn(morphImageVariants({ part: "trigger" }), className);
+	const imageClasses = morphImageVariants({ part: "image" });
+	const expandedClasses = cn(morphImageVariants({ part: "expanded" }), expandedClassName);
+	const expandedImageClasses = morphImageVariants({ part: "expandedImage" });
+	/**
+	* Раскрыть или свернуть изображение
+	* @param nextOpen - новое состояние
+	*/
+	const changeOpen = (nextOpen) => {
+		setInnerOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	};
+	useEffect(() => {
+		setIsMounted(true);
+	}, []);
+	useEffect(() => {
+		if (!isOpen) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				setInnerOpen(false);
+				onOpenChange?.(false);
+			}
+		};
+		const handleScroll = () => {
+			if (closeOnScroll) {
+				setInnerOpen(false);
+				onOpenChange?.(false);
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		window.addEventListener("scroll", handleScroll, true);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+			window.removeEventListener("scroll", handleScroll, true);
+		};
+	}, [
+		isOpen,
+		closeOnScroll,
+		onOpenChange
+	]);
+	const overlay = /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(motion.div, {
+		"data-slot": "morph-image-backdrop",
+		"aria-hidden": true,
+		className: morphImageVariants({ part: "backdrop" }),
+		initial: { opacity: 0 },
+		animate: {
+			opacity: 1,
+			pointerEvents: "auto"
+		},
+		exit: {
+			opacity: 0,
+			pointerEvents: "none"
+		},
+		transition: motionTransition,
+		onClick: () => changeOpen(false)
+	}, "backdrop"), /* @__PURE__ */ jsx("div", {
+		"data-slot": "morph-image-layer",
+		role: "dialog",
+		"aria-modal": true,
+		"aria-label": alt || closeLabel,
+		className: morphImageVariants({ part: "layer" }),
+		children: /* @__PURE__ */ jsx(motion.button, {
+			type: "button",
+			"data-slot": "morph-image-expanded",
+			ref: expandedRef,
+			animate: { pointerEvents: "auto" },
+			exit: { pointerEvents: "none" },
+			"aria-label": closeLabel,
+			autoFocus: true,
+			className: expandedClasses,
+			onClick: () => changeOpen(false),
+			children: /* @__PURE__ */ jsx(motion.img, {
+				"data-slot": "morph-image-expanded-image",
+				layoutId,
+				src,
+				alt,
+				className: expandedImageClasses,
+				style: { borderRadius: expandedRadius },
+				transition: motionTransition
+			})
+		})
+	}, "layer")] }) });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "morph-image",
+		"data-state": isOpen ? "open" : "closed",
+		"aria-label": triggerLabel,
+		"aria-haspopup": "dialog",
+		"aria-expanded": isOpen,
+		ref: triggerRef,
+		className: triggerClasses,
+		onClick: () => changeOpen(true),
+		children: /* @__PURE__ */ jsx(motion.img, {
+			"data-slot": "morph-image-image",
+			layoutId,
+			ref,
+			src,
+			alt,
+			className: imageClasses,
+			style: { borderRadius: triggerRadius },
+			transition: motionTransition,
+			...props
+		})
+	}), isMounted && createPortal(overlay, document.body)] });
+}
+export { MorphImage };

package/dist/components/morph-image/types.d.ts

@@ -0,0 +1,38 @@
+import { ComponentProps, Ref } from "react";
+import { Transition } from "motion/react";
+/**
+ * Стили частей: кнопка-миниатюра, затемнение, слой и раскрытое изображение.
+ * Экспортируются, чтобы оформить свой элемент так же: morphImageVariants({ part: 'backdrop' }).
+ */
+export declare const morphImageVariants: (props?: ({
+  part?: "image" | "trigger" | "backdrop" | "layer" | "expanded" | "expandedImage" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Пропсы изображения с раскрытием
+ */
+export type MorphImagePropsT = Omit<ComponentProps<'img'>, 'className' | 'ref' | 'src' | 'alt' | 'onClick' | 'onAnimationStart' | 'onDrag' | 'onDragStart' | 'onDragEnd'> & {
+  /** Адрес изображения */
+  src: string;
+  /** Описание изображения для скринридера. Для декоративной картинки — пустая строка */
+  alt: string;
+  /** Классы миниатюры (самого изображения): размеры и скругление задаются здесь */
+  className?: string;
+  /** Классы раскрытого изображения: например, свой максимальный размер */
+  expandedClassName?: string;
+  /** Раскрыто ли изображение (контролируемый режим) */
+  open?: boolean;
+  /** Раскрыто ли изображение при первом показе (неконтролируемый режим). По умолчанию false */
+  defaultOpen?: boolean;
+  /** Изображение раскрыли или свернули */
+  onOpenChange?: (open: boolean) => void;
+  /** Сворачивать изображение при прокрутке страницы. По умолчанию true */
+  closeOnScroll?: boolean;
+  /** Параметры анимации раскрытия motion, по умолчанию пружина */
+  transition?: Transition;
+  /** Подпись кнопки миниатюры для скринридера, по умолчанию «Увеличить изображение» */
+  openLabel?: string;
+  /** Подпись раскрытого изображения для скринридера, по умолчанию «Закрыть» */
+  closeLabel?: string;
+  /** Ссылка на элемент миниатюры */
+  ref?: Ref<HTMLImageElement>;
+};