@archytechtor/ui 0.0.0-stage → 0.1.0

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;

package/dist/components/field/field.js

@@ -0,0 +1,173 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Separator } from "../separator/separator.js";
+import { Label } from "../label/label.js";
+import { fieldVariants } from "./types.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/field/field.tsx
+/**
+* Набор полей: fieldset с заголовком FieldLegend
+* @param props - пропсы набора
+* @returns fieldset
+*/
+function FieldSet({ className, ...props }) {
+	const classes = cn("flex", "flex-col", "gap-4", "has-[>[data-slot=checkbox-group]]:gap-3", "has-[>[data-slot=radio-group]]:gap-3", className);
+	return /* @__PURE__ */ jsx("fieldset", {
+		"data-slot": "field-set",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок набора полей
+* @param props - пропсы заголовка
+* @returns legend
+*/
+function FieldLegend({ className, variant = "legend", ...props }) {
+	const classes = cn("mb-1.5", "font-medium", "data-[variant=label]:text-sm", "data-[variant=legend]:text-base", className);
+	return /* @__PURE__ */ jsx("legend", {
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		className: classes,
+		...props
+	});
+}
+/**
+* Группа полей: столбик полей с отступами; контейнер для orientation="responsive"
+* @param props - пропсы группы
+* @returns div
+*/
+function FieldGroup({ className, ...props }) {
+	const classes = cn("group/field-group", "@container/field-group", "flex", "w-full", "flex-col", "gap-5", "data-[slot=checkbox-group]:gap-3", "*:data-[slot=field-group]:gap-4", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Поле формы: подпись, элемент управления, описание и ошибка.
+* data-invalid={true} красит поле в цвет ошибки, data-disabled={true} приглушает подпись
+* @param props - пропсы поля
+* @returns div с role="group"
+*/
+function Field({ className, orientation = "vertical", ...props }) {
+	const classes = cn(fieldVariants({ orientation }), className);
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: classes,
+		...props
+	});
+}
+/**
+* Содержимое поля: подпись и описание столбиком рядом с флажком или переключателем
+* @param props - пропсы содержимого
+* @returns div
+*/
+function FieldContent({ className, ...props }) {
+	const classes = cn("group/field-content", "flex", "flex-1", "flex-col", "gap-0.5", "leading-snug", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: classes,
+		...props
+	});
+}
+/**
+* Подпись поля. С Field внутри становится карточкой выбора
+* @param props - пропсы подписи
+* @returns label
+*/
+function FieldLabel({ className, ...props }) {
+	const classes = cn("group/field-label", "peer/field-label", "flex", "w-fit", "gap-2", "leading-snug", "group-data-[disabled=true]/field:opacity-50", "has-data-checked:border-primary/30", "has-data-checked:bg-primary/5", "dark:has-data-checked:border-primary/20", "dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full", "has-[>[data-slot=field]]:flex-col", "has-[>[data-slot=field]]:rounded-lg", "has-[>[data-slot=field]]:border", "has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50", "keyboard:has-[>[data-slot=field]]:has-[:focus-visible]:border-ring", "keyboard:has-[>[data-slot=field]]:has-[:focus-visible]:ring-3", "keyboard:has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50", "*:data-[slot=field]:p-2.5", className);
+	return /* @__PURE__ */ jsx(Label, {
+		"data-slot": "field-label",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок поля: как подпись, но не label — для карточек выбора
+* @param props - пропсы заголовка
+* @returns div
+*/
+function FieldTitle({ className, ...props }) {
+	const classes = cn("flex", "w-fit", "items-center", "gap-2", "text-sm", "leading-snug", "font-medium", "group-data-[disabled=true]/field:opacity-50", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-label",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание поля: подсказка серым текстом
+* @param props - пропсы описания
+* @returns p
+*/
+function FieldDescription({ className, ...props }) {
+	const classes = cn("text-left", "text-sm", "leading-normal", "font-normal", "text-muted-foreground", "group-has-data-horizontal/field:text-balance", "last:mt-0", "nth-last-2:-mt-1", "[[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline", "[&>a]:underline-offset-4", "[&>a:hover]:text-primary", className);
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Разделитель полей: линия, при необходимости с текстом посередине
+* @param props - пропсы разделителя
+* @returns div
+*/
+function FieldSeparator({ children, className, ...props }) {
+	const classes = cn("relative", "-my-2", "flex", "h-5", "items-center", "gap-2", "text-sm", "group-data-[variant=outline]/field-group:-mb-2", className);
+	let content = null;
+	if (children) content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"data-slot": "field-separator-content",
+		className: "shrink-0 text-muted-foreground",
+		children
+	}), /* @__PURE__ */ jsx(Separator, { className: "flex-1" })] });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-separator",
+		"data-content": Boolean(children),
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, { className: "flex-1" }), content]
+	});
+}
+/**
+* Собрать содержимое ошибки: свой текст или уникальные сообщения из errors
+* @param children - свой текст ошибки
+* @param errors - ошибки валидации
+* @returns содержимое или null, если показывать нечего
+*/
+function getErrorContent(children, errors) {
+	if (children) return children;
+	if (!errors?.length) return null;
+	const messages = /* @__PURE__ */ new Set();
+	for (const error of errors) if (error?.message) messages.add(error.message);
+	if (messages.size === 0) return null;
+	const list = [...messages];
+	if (list.length === 1) return list[0];
+	return /* @__PURE__ */ jsx("ul", {
+		className: "ml-4 flex list-disc flex-col gap-1",
+		children: list.map((message) => /* @__PURE__ */ jsx("li", { children: message }, message))
+	});
+}
+/**
+* Ошибка поля: красный текст под элементом управления, озвучивается сразу
+* @param props - пропсы ошибки
+* @returns div с role="alert" или null, если ошибок нет
+*/
+function FieldError({ className, children, errors, ...props }) {
+	const content = getErrorContent(children, errors);
+	const classes = cn("text-sm", "font-normal", "text-destructive", className);
+	if (content === null) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: classes,
+		...props,
+		children: content
+	});
+}
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

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

@@ -0,0 +1,3 @@
+import { FieldContentPropsT, FieldDescriptionPropsT, FieldErrorItemI, FieldErrorPropsT, FieldGroupPropsT, FieldLabelPropsT, FieldLegendPropsT, FieldLegendVariantT, FieldOrientationT, FieldPropsT, FieldSeparatorPropsT, FieldSetPropsT, FieldTitlePropsT, fieldVariants } from "./types.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./field.js";
+export { Field, FieldContent, type FieldContentPropsT, FieldDescription, type FieldDescriptionPropsT, FieldError, type FieldErrorItemI, type FieldErrorPropsT, FieldGroup, type FieldGroupPropsT, FieldLabel, type FieldLabelPropsT, FieldLegend, type FieldLegendPropsT, type FieldLegendVariantT, type FieldOrientationT, type FieldPropsT, FieldSeparator, type FieldSeparatorPropsT, FieldSet, type FieldSetPropsT, FieldTitle, type FieldTitlePropsT, fieldVariants };

package/dist/components/field/index.js

@@ -0,0 +1,3 @@
+import { fieldVariants } from "./types.js";
+import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./field.js";
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, fieldVariants };