@archytechtor/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,294 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { getMasonryLayout } from "./masonry.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { createPortal } from "react-dom";
+// src/components/image-gallery/image-gallery.tsx
+const DEFAULT_OPEN_LABEL = "Открыть изображение";
+const LAZY_MARGIN = 500;
+const MOBILE_WIDTH = 480;
+const TABLET_WIDTH = 768;
+const FALLBACK_RATIOS = [
+	.75,
+	1,
+	1.5,
+	2
+];
+const morphTransition = {
+	type: "spring",
+	stiffness: 120,
+	damping: 15
+};
+/**
+* Изображению без размеров подставляет размеры по номеру, чтобы раскладка была стабильной
+* @param image - изображение
+* @param index - номер в списке
+* @returns изображение с размерами
+*/
+function withDimensions(image, index) {
+	if (image.width && image.height) return image;
+	const ratio = FALLBACK_RATIOS[index % FALLBACK_RATIOS.length] ?? 1;
+	return {
+		...image,
+		width: 800,
+		height: Math.round(800 / ratio)
+	};
+}
+/**
+* Скругление элемента в px из его классов. motion сохраняет скругление при анимации
+* размера, только если оно задано числом в style, иначе углы сжимаются вместе с картинкой
+* @param ref - элемент, у которого берётся скругление
+* @returns скругление в px или undefined до измерения
+*/
+function useBorderRadius(ref) {
+	const [radius, setRadius] = useState();
+	useLayoutEffect(() => {
+		if (ref.current) setRadius(parseFloat(getComputedStyle(ref.current).borderTopLeftRadius));
+	}, [ref]);
+	return radius;
+}
+/**
+* Число колонок по ширине галереи
+* @param width - ширина контейнера, px
+* @param columns - число колонок для разной ширины
+* @returns число колонок
+*/
+function getColumnCount(width, columns = {}) {
+	if (width < MOBILE_WIDTH) return columns.mobile ?? 1;
+	if (width < TABLET_WIDTH) return columns.tablet ?? 2;
+	return columns.desktop ?? 3;
+}
+/**
+* Галерея изображений: сетка «кирпичной кладки» с ленивой загрузкой.
+* Нажатие на изображение плавно увеличивает его поверх страницы
+* @param props - пропсы галереи
+* @returns контейнер с плитками и просмотром изображения
+*/
+function ImageGallery({ images, gap = 16, columns, lazyLoading = true, filterImages, sortImages, onImageClick, openLabel = DEFAULT_OPEN_LABEL, closeLabel = texts.close, itemClassName, viewerClassName, backdropClassName, className, style, ref, ...props }) {
+	const galleryId = useId();
+	const containerRef = useRef(null);
+	const [containerWidth, setContainerWidth] = useState(0);
+	const [activeIndex, setActiveIndex] = useState(null);
+	const visibleImages = useMemo(() => {
+		let result = images.map(withDimensions);
+		if (filterImages) result = result.filter(filterImages);
+		if (sortImages) result = result.sort(sortImages);
+		return result;
+	}, [
+		images,
+		filterImages,
+		sortImages
+	]);
+	const columnCount = getColumnCount(containerWidth, columns);
+	const layout = useMemo(() => getMasonryLayout(visibleImages, containerWidth, columnCount, gap), [
+		visibleImages,
+		containerWidth,
+		columnCount,
+		gap
+	]);
+	const activeImage = activeIndex === null ? void 0 : visibleImages[activeIndex];
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(() => setContainerWidth(container.clientWidth));
+		setContainerWidth(container.clientWidth);
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, []);
+	/**
+	* Элемент галереи: для измерения ширины и наружу
+	* @param node - элемент или null при размонтировании
+	*/
+	const setRef = (node) => {
+		containerRef.current = node;
+		if (typeof ref === "function") {
+			ref(node);
+			return;
+		}
+		if (ref) ref.current = node;
+	};
+	/**
+	* Нажатие на плитку: открыть изображение и сообщить наружу
+	* @param item - плитка
+	*/
+	const handleItemClick = (item) => {
+		setActiveIndex(item.index);
+		onImageClick?.(item.image, item.index);
+	};
+	const closeViewer = () => setActiveIndex(null);
+	const rootStyle = {
+		height: layout.height,
+		...style
+	};
+	const classes = cn("relative", "w-full", className);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "image-gallery",
+		ref: setRef,
+		className: classes,
+		style: rootStyle,
+		...props,
+		children: [layout.items.map((item) => /* @__PURE__ */ jsx(ImageGalleryItem, {
+			item,
+			layoutId: `${galleryId}-${item.index}`,
+			lazyLoading,
+			openLabel,
+			className: itemClassName,
+			onOpen: handleItemClick
+		}, `${item.image.src}-${item.index}`)), /* @__PURE__ */ jsx(ImageGalleryViewer, {
+			image: activeImage,
+			layoutId: `${galleryId}-${activeIndex}`,
+			closeLabel,
+			className: viewerClassName,
+			backdropClassName,
+			onClose: closeViewer
+		})]
+	});
+}
+/**
+* Плитка галереи: кнопка с изображением, пока изображение не загружено — заглушка
+* @param props - пропсы плитки
+* @returns кнопка открытия изображения
+*/
+function ImageGalleryItem({ item, layoutId, lazyLoading, openLabel, className, onOpen }) {
+	const buttonRef = useRef(null);
+	const [isNear, setIsNear] = useState(false);
+	const isLoaded = !lazyLoading || isNear;
+	const radius = useBorderRadius(buttonRef);
+	useEffect(() => {
+		const button = buttonRef.current;
+		if (!lazyLoading || !button) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				setIsNear(true);
+				observer.disconnect();
+			}
+		}, { rootMargin: `${LAZY_MARGIN}px` });
+		observer.observe(button);
+		return () => observer.disconnect();
+	}, [lazyLoading]);
+	const classes = cn("group/image-gallery-item", "absolute", "block", "cursor-zoom-in", "rounded-lg", "outline-none", "focus-visible:border-ring", "focus-visible:ring-3", "focus-visible:ring-ring/50", !isLoaded && ["animate-pulse", "bg-muted"], className);
+	const buttonStyle = {
+		left: item.x,
+		top: item.y,
+		width: item.width,
+		height: item.height
+	};
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "image-gallery-item",
+		ref: buttonRef,
+		type: "button",
+		"aria-label": `${openLabel}: ${item.image.alt}`,
+		className: classes,
+		style: buttonStyle,
+		onClick: () => onOpen(item),
+		children: isLoaded && /* @__PURE__ */ jsx(motion.img, {
+			"data-slot": "image-gallery-image",
+			layoutId,
+			src: item.image.src,
+			alt: "",
+			draggable: false,
+			transition: morphTransition,
+			className: "size-full rounded-[inherit] object-cover object-center",
+			style: { borderRadius: radius }
+		})
+	});
+}
+/**
+* Просмотр: затемнение и увеличенное изображение поверх страницы. Закрывается
+* нажатием, клавишей Escape; прокрутка страницы блокируется
+* @param props - пропсы просмотра
+* @returns портал с затемнением и изображением
+*/
+function ImageGalleryViewer({ image, layoutId, closeLabel, className, backdropClassName, onClose }) {
+	const [isMounted, setIsMounted] = useState(false);
+	const isOpen = image !== void 0;
+	useEffect(() => {
+		setIsMounted(true);
+	}, []);
+	useEffect(() => {
+		if (!isOpen) return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") onClose();
+		};
+		const previousOverflow = document.body.style.overflow;
+		const previousFocus = document.activeElement;
+		const blockedElements = [];
+		for (const element of document.body.children) {
+			const slot = element.getAttribute("data-slot");
+			if (slot === "image-gallery-backdrop" || slot === "image-gallery-viewer") continue;
+			if (!element.hasAttribute("inert")) {
+				element.setAttribute("inert", "");
+				blockedElements.push(element);
+			}
+		}
+		document.body.style.overflow = "hidden";
+		document.addEventListener("keydown", handleKeyDown);
+		document.querySelector("[data-slot=\"image-gallery-viewer\"]")?.focus({ preventScroll: true });
+		return () => {
+			for (const element of blockedElements) element.removeAttribute("inert");
+			document.body.style.overflow = previousOverflow;
+			document.removeEventListener("keydown", handleKeyDown);
+			if (previousFocus instanceof HTMLElement) previousFocus.focus({ preventScroll: true });
+		};
+	}, [isOpen, onClose]);
+	if (!isMounted) return null;
+	const backdropClasses = cn("fixed", "inset-0", "z-50", "cursor-zoom-out", "bg-black/80", backdropClassName);
+	const imageClasses = cn("pointer-events-auto", "max-h-[90vh]", "max-w-[90vw]", "cursor-zoom-out", "rounded-lg", "object-cover", "object-center", className);
+	return createPortal(/* @__PURE__ */ jsx(AnimatePresence, { children: image && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(motion.button, {
+		"data-slot": "image-gallery-backdrop",
+		type: "button",
+		"aria-label": closeLabel,
+		tabIndex: -1,
+		className: backdropClasses,
+		initial: { opacity: 0 },
+		animate: {
+			opacity: 1,
+			pointerEvents: "auto"
+		},
+		exit: {
+			opacity: 0,
+			pointerEvents: "none"
+		},
+		transition: { duration: .3 },
+		onClick: onClose
+	}, "backdrop"), /* @__PURE__ */ jsx("div", {
+		"data-slot": "image-gallery-viewer",
+		role: "dialog",
+		"aria-modal": true,
+		"aria-label": image.alt,
+		tabIndex: -1,
+		className: "pointer-events-none fixed inset-0 z-50 flex items-center justify-center outline-none",
+		children: /* @__PURE__ */ jsx(ImageGalleryViewerImage, {
+			image,
+			layoutId,
+			className: imageClasses,
+			onClose
+		})
+	}, layoutId)] }) }), document.body);
+}
+/**
+* Увеличенное изображение: прилетает из плитки и улетает обратно, сохраняя скругление
+* @param props - пропсы изображения
+* @returns изображение
+*/
+function ImageGalleryViewerImage({ image, layoutId, className, onClose }) {
+	const imageRef = useRef(null);
+	const radius = useBorderRadius(imageRef);
+	return /* @__PURE__ */ jsx(motion.img, {
+		"data-slot": "image-gallery-viewer-image",
+		ref: imageRef,
+		layoutId,
+		src: image.src,
+		alt: image.alt,
+		animate: { pointerEvents: "auto" },
+		exit: { pointerEvents: "none" },
+		transition: morphTransition,
+		className,
+		style: { borderRadius: radius },
+		onClick: onClose
+	});
+}
+export { ImageGallery };

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

@@ -0,0 +1,4 @@
+import { ImageGalleryColumnsI, ImageGalleryImageI, ImageGalleryPropsT, MasonryItemI, MasonryLayoutI } from "./types.js";
+import { ImageGallery } from "./image-gallery.js";
+import { getMasonryLayout } from "./masonry.js";
+export { ImageGallery, type ImageGalleryColumnsI, type ImageGalleryImageI, type ImageGalleryPropsT, type MasonryItemI, type MasonryLayoutI, getMasonryLayout };

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

@@ -0,0 +1,3 @@
+import { getMasonryLayout } from "./masonry.js";
+import { ImageGallery } from "./image-gallery.js";
+export { ImageGallery, getMasonryLayout };

package/dist/components/image-gallery/masonry.d.ts

@@ -0,0 +1,11 @@
+import { ImageGalleryImageI, MasonryLayoutI } from "./types.js";
+/**
+ * Раскладка «кирпичной кладки»: каждое изображение идёт в самую низкую колонку,
+ * затем плитки колонки растягиваются так, чтобы все колонки закончились на одной высоте
+ * @param images - изображения
+ * @param containerWidth - ширина контейнера, px
+ * @param columnCount - число колонок
+ * @param gap - промежуток между плитками, px
+ * @returns плитки с позициями и общая высота
+ */
+export declare function getMasonryLayout(images: ImageGalleryImageI[], containerWidth: number, columnCount: number, gap: number): MasonryLayoutI;

package/dist/components/image-gallery/masonry.js

@@ -0,0 +1,62 @@
+// src/components/image-gallery/masonry.ts
+/**
+* Пропорции изображения: ширина к высоте, квадрат, если размеры не заданы
+* @param image - изображение
+* @returns отношение ширины к высоте
+*/
+function getAspectRatio(image) {
+	if (image.width && image.height) return image.width / image.height;
+	return 1;
+}
+/**
+* Раскладка «кирпичной кладки»: каждое изображение идёт в самую низкую колонку,
+* затем плитки колонки растягиваются так, чтобы все колонки закончились на одной высоте
+* @param images - изображения
+* @param containerWidth - ширина контейнера, px
+* @param columnCount - число колонок
+* @param gap - промежуток между плитками, px
+* @returns плитки с позициями и общая высота
+*/
+function getMasonryLayout(images, containerWidth, columnCount, gap) {
+	if (containerWidth <= 0 || images.length === 0 || columnCount < 1) return {
+		items: [],
+		height: 0
+	};
+	const columnWidth = (containerWidth - gap * (columnCount - 1)) / columnCount;
+	const columnHeights = Array.from({ length: columnCount }, () => 0);
+	const columns = Array.from({ length: columnCount }, () => []);
+	images.forEach((image, index) => {
+		const columnIndex = columnHeights.indexOf(Math.min(...columnHeights));
+		columnHeights[columnIndex] = (columnHeights[columnIndex] ?? 0) + columnWidth / getAspectRatio(image) + gap;
+		columns[columnIndex]?.push({
+			image,
+			index
+		});
+	});
+	const totalHeight = Math.max(...columnHeights) - gap;
+	const items = [];
+	columns.forEach((column, columnIndex) => {
+		if (column.length === 0) return;
+		let imagesHeight = 0;
+		for (const { image } of column) imagesHeight += columnWidth / getAspectRatio(image);
+		const scale = (totalHeight - gap * (column.length - 1)) / imagesHeight;
+		let offsetY = 0;
+		for (const { image, index } of column) {
+			const height = columnWidth / getAspectRatio(image) * scale;
+			items.push({
+				image,
+				index,
+				x: columnIndex * (columnWidth + gap),
+				y: offsetY,
+				width: columnWidth,
+				height
+			});
+			offsetY += height + gap;
+		}
+	});
+	return {
+		items,
+		height: totalHeight
+	};
+}
+export { getMasonryLayout };

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

@@ -0,0 +1,80 @@
+import { ComponentProps } from "react";
+/**
+ * Изображение галереи
+ * @property src - адрес изображения
+ * @property alt - описание для скринридера
+ * @property width - исходная ширина, по ней считаются пропорции плитки
+ * @property height - исходная высота, по ней считаются пропорции плитки
+ */
+export interface ImageGalleryImageI {
+  src: string;
+  alt: string;
+  width?: number;
+  height?: number;
+}
+/**
+ * Число колонок на разной ширине галереи
+ * @property desktop - от 768px, по умолчанию 3
+ * @property tablet - от 480px до 768px, по умолчанию 2
+ * @property mobile - уже 480px, по умолчанию 1
+ */
+export interface ImageGalleryColumnsI {
+  desktop?: number;
+  tablet?: number;
+  mobile?: number;
+}
+/**
+ * Пропсы галереи
+ */
+export type ImageGalleryPropsT = Omit<ComponentProps<'div'>, 'children'> & {
+  /** Изображения галереи */
+  images: ImageGalleryImageI[];
+  /** Промежуток между изображениями, px. По умолчанию 16 */
+  gap?: number;
+  /** Число колонок для узкой, средней и широкой галереи. По умолчанию 1, 2 и 3 */
+  columns?: ImageGalleryColumnsI;
+  /** Загружать изображения, только когда они приближаются к видимой области. По умолчанию включено */
+  lazyLoading?: boolean;
+  /** Показывать только подходящие изображения */
+  filterImages?: (image: ImageGalleryImageI, index: number) => boolean;
+  /** Порядок изображений */
+  sortImages?: (first: ImageGalleryImageI, second: ImageGalleryImageI) => number;
+  /** Нажатие на изображение в сетке */
+  onImageClick?: (image: ImageGalleryImageI, index: number) => void;
+  /** Подпись кнопки открытия изображения для скринридера, по умолчанию «Открыть изображение» */
+  openLabel?: string;
+  /** Подпись закрытия просмотра для скринридера, по умолчанию «Закрыть» */
+  closeLabel?: string;
+  /** Классы плитки изображения */
+  itemClassName?: string;
+  /** Классы увеличенного изображения */
+  viewerClassName?: string;
+  /** Классы затемнения под увеличенным изображением */
+  backdropClassName?: string;
+};
+/**
+ * Изображение с позицией и размером в сетке
+ * @property image - исходное изображение
+ * @property index - номер изображения в переданном списке
+ * @property x - отступ слева, px
+ * @property y - отступ сверху, px
+ * @property width - ширина плитки, px
+ * @property height - высота плитки, px
+ */
+export interface MasonryItemI {
+  image: ImageGalleryImageI;
+  index: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+/**
+ * Раскладка сетки
+ * @property items - плитки с позициями
+ * @property height - общая высота сетки, px
+ */
+export interface MasonryLayoutI {
+  items: MasonryItemI[];
+  height: number;
+}

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

@@ -0,0 +1,3 @@
+import { InputPropsT, InputTypeT } from "./types.js";
+import { Input } from "./input.js";
+export { Input, type InputPropsT, type InputTypeT };

package/dist/components/input/index.js

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

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

@@ -0,0 +1,7 @@
+import { InputPropsT } from "./types.js";
+/**
+ * Однострочное поле ввода
+ * @param props - пропсы поля
+ * @returns элемент input
+ */
+export declare function Input({ className, type, ...props }: InputPropsT): import("react").JSX.Element;

package/dist/components/input/input.js

@@ -0,0 +1,18 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/input/input.tsx
+/**
+* Однострочное поле ввода
+* @param props - пропсы поля
+* @returns элемент input
+*/
+function Input({ className, type, ...props }) {
+	const classes = cn("h-8", "w-full", "min-w-0", "rounded-lg", "border", "border-input", "bg-transparent", "px-2.5", "py-1", "text-base", "transition-colors", "outline-none", "file:inline-flex", "file:h-6", "file:border-0", "file:bg-transparent", "file:text-sm", "file:font-medium", "file:text-foreground", "placeholder:text-muted-foreground", "focus-visible:border-ring", "focus-visible:ring-3", "focus-visible:ring-ring/50", "disabled:cursor-not-allowed", "disabled:bg-input/50", "disabled:opacity-50", "aria-invalid:border-destructive", "aria-invalid:ring-3", "aria-invalid:ring-destructive/20", "md:text-sm", "dark:bg-input/30", "dark:disabled:bg-input/80", "dark:aria-invalid:border-destructive/50", "dark:aria-invalid:ring-destructive/40", className);
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: classes,
+		...props
+	});
+}
+export { Input };

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

@@ -0,0 +1,28 @@
+import { ChangeEvent, ComponentProps } from "react";
+/**
+ * Тип поля ввода: все значения атрибута type у input
+ */
+export type InputTypeT = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'file' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color' | 'range' | 'checkbox' | 'radio' | 'hidden' | 'button' | 'submit' | 'reset' | 'image';
+/**
+ * Пропсы поля ввода
+ */
+export type InputPropsT = Omit<ComponentProps<'input'>, 'type' | 'value' | 'defaultValue' | 'placeholder' | 'disabled' | 'readOnly' | 'required' | 'aria-invalid' | 'onChange'> & {
+  /** Тип поля: text, email, password, number, search, tel, url, file и другие */
+  type?: InputTypeT;
+  /** Значение поля — контролируемый режим, вместе с onChange */
+  value?: string | number;
+  /** Значение при первом рендере — неконтролируемый режим */
+  defaultValue?: string | number;
+  /** Подсказка о формате, пока поле пустое */
+  placeholder?: string;
+  /** Отключённое состояние: поле нельзя изменить и выделить, оно не отправляется с формой */
+  disabled?: boolean;
+  /** Только для чтения: значение видно и выделяется, но не меняется */
+  readOnly?: boolean;
+  /** Обязательное поле: форма не отправится, пока оно пустое */
+  required?: boolean;
+  /** Ошибка: красная рамка и объявление скринридеру, что значение неверное */
+  'aria-invalid'?: boolean;
+  /** Значение изменилось */
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};

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

@@ -0,0 +1,3 @@
+import { InputGroupAddonPropsT, InputGroupAlignT, InputGroupButtonPropsT, InputGroupButtonSizeT, InputGroupInputPropsT, InputGroupPropsT, InputGroupTextPropsT, InputGroupTextareaPropsT, inputGroupAddonVariants, inputGroupButtonVariants } from "./types.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group.js";
+export { InputGroup, InputGroupAddon, type InputGroupAddonPropsT, type InputGroupAlignT, InputGroupButton, type InputGroupButtonPropsT, type InputGroupButtonSizeT, InputGroupInput, type InputGroupInputPropsT, type InputGroupPropsT, InputGroupText, type InputGroupTextPropsT, InputGroupTextarea, type InputGroupTextareaPropsT, inputGroupAddonVariants, inputGroupButtonVariants };

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

@@ -0,0 +1,3 @@
+import { inputGroupAddonVariants, inputGroupButtonVariants } from "./types.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group.js";
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants };

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

@@ -0,0 +1,37 @@
+import { InputGroupAddonPropsT, InputGroupButtonPropsT, InputGroupInputPropsT, InputGroupPropsT, InputGroupTextPropsT, InputGroupTextareaPropsT } from "./types.js";
+/**
+ * Группа поля: поле ввода с иконками, текстом и кнопками внутри общей рамки
+ * @param props - пропсы группы
+ * @returns div с role="group"
+ */
+export declare function InputGroup({ className, ...props }: InputGroupPropsT): import("react").JSX.Element;
+/**
+ * Дополнение: иконка, текст или кнопки внутри рамки. Нажатие ставит фокус в поле
+ * @param props - пропсы дополнения
+ * @returns div с role="group"
+ */
+export declare function InputGroupAddon({ className, align, onClick, ...props }: InputGroupAddonPropsT): import("react").JSX.Element;
+/**
+ * Кнопка в группе: компактная, по умолчанию ghost
+ * @param props - пропсы кнопки; по умолчанию type="button", variant="ghost", size="xs"
+ * @returns кнопка
+ */
+export declare function InputGroupButton({ className, type, variant, size, ...props }: InputGroupButtonPropsT): import("react").JSX.Element;
+/**
+ * Текст в группе: префикс или суффикс поля (₽, https://, @example.ru)
+ * @param props - пропсы текста
+ * @returns span
+ */
+export declare function InputGroupText({ className, ...props }: InputGroupTextPropsT): import("react").JSX.Element;
+/**
+ * Поле в группе: Input без своей рамки, рамку рисует группа
+ * @param props - пропсы поля
+ * @returns input
+ */
+export declare function InputGroupInput({ className, ...props }: InputGroupInputPropsT): import("react").JSX.Element;
+/**
+ * Многострочное поле в группе: Textarea без своей рамки
+ * @param props - пропсы поля
+ * @returns textarea
+ */
+export declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaPropsT): import("react").JSX.Element;