@archytechtor/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,81 @@
+import { LabelPropsT } from "../label/types.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps, ReactNode } from "react";
+/**
+ * Стили поля: расположение подписи и элемента управления.
+ * Экспортируются, чтобы оформить полем другой элемент: fieldVariants({ orientation: 'horizontal' }).
+ */
+export declare const fieldVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты стилей поля
+ */
+export type FieldVariantsT = VariantProps<typeof fieldVariants>;
+/**
+ * Расположение поля: vertical — подпись сверху, horizontal — в строку, responsive — в строку на широкой группе
+ */
+export type FieldOrientationT = NonNullable<FieldVariantsT['orientation']>;
+/**
+ * Пропсы набора полей
+ */
+export type FieldSetPropsT = ComponentProps<'fieldset'>;
+/**
+ * Вид заголовка набора: legend — крупный, label — как подпись поля
+ */
+export type FieldLegendVariantT = 'legend' | 'label';
+/**
+ * Пропсы заголовка набора
+ */
+export type FieldLegendPropsT = ComponentProps<'legend'> & {
+  /** Вид: legend — крупный заголовок, label — как подпись поля */
+  variant?: FieldLegendVariantT;
+};
+/**
+ * Пропсы группы полей
+ */
+export type FieldGroupPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы поля
+ */
+export type FieldPropsT = ComponentProps<'div'> & {
+  /** Расположение: vertical — подпись сверху, horizontal — в строку, responsive — в строку на широкой группе */
+  orientation?: FieldOrientationT;
+};
+/**
+ * Пропсы содержимого поля
+ */
+export type FieldContentPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы подписи поля
+ */
+export type FieldLabelPropsT = LabelPropsT;
+/**
+ * Пропсы заголовка поля
+ */
+export type FieldTitlePropsT = ComponentProps<'div'>;
+/**
+ * Пропсы описания поля
+ */
+export type FieldDescriptionPropsT = ComponentProps<'p'>;
+/**
+ * Пропсы разделителя полей
+ */
+export type FieldSeparatorPropsT = ComponentProps<'div'> & {
+  /** Текст посередине линии, например «или» */
+  children?: ReactNode;
+};
+/**
+ * Ошибка валидации
+ * @property message - текст ошибки
+ */
+export interface FieldErrorItemI {
+  message?: string;
+}
+/**
+ * Пропсы ошибки поля
+ */
+export type FieldErrorPropsT = ComponentProps<'div'> & {
+  /** Ошибки валидации (например, из react-hook-form): одна — текстом, несколько — списком */
+  errors?: (FieldErrorItemI | undefined)[];
+};

package/dist/components/field/types.js

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority";
+// src/components/field/types.ts
+/**
+* Стили поля: расположение подписи и элемента управления.
+* Экспортируются, чтобы оформить полем другой элемент: fieldVariants({ orientation: 'horizontal' }).
+*/
+const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+	variants: { orientation: {
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+		horizontal: ["flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto", "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"],
+		responsive: [
+			"flex-col *:w-full [&>.sr-only]:w-auto",
+			"@md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto",
+			"@md/field-group:has-[>[data-slot=field-content]]:items-start",
+			"@md/field-group:*:data-[slot=field-label]:flex-auto",
+			"@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		]
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+export { fieldVariants };

package/dist/components/form/form.d.ts

@@ -0,0 +1,49 @@
+import { FormControlPropsT, FormDescriptionPropsT, FormFieldPropsT, FormFieldStateI, FormItemPropsT, FormLabelPropsT, FormMessagePropsT, FormPropsT } from "./types.js";
+import { FieldPath, FieldValues } from "react-hook-form";
+/**
+ * Форма: передаёт результат useForm() всем полям внутри. Сам тег form пишется внутри
+ * @param props - результат useForm() и children
+ * @returns провайдер без своей разметки
+ */
+export declare function Form<TFieldValues extends FieldValues, TContext = unknown, TTransformedValues = TFieldValues>(props: FormPropsT<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
+/**
+ * Поле формы: связывает значение из формы с элементом управления в render
+ * @param props - name, control и render, как у Controller
+ * @returns Controller
+ */
+export declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues>(props: FormFieldPropsT<TFieldValues, TName, TTransformedValues>): import("react").JSX.Element;
+/**
+ * Состояние текущего поля: ошибка и id частей. Работает внутри FormField и FormItem
+ * @returns состояние поля
+ */
+export declare function useFormField(): FormFieldStateI;
+/**
+ * Блок поля: подпись, элемент, описание и ошибка. При ошибке подсвечивается
+ * @param props - пропсы Field; orientation — vertical, horizontal или responsive
+ * @returns div с role="group"
+ */
+export declare function FormItem(props: FormItemPropsT): import("react").JSX.Element;
+/**
+ * Подпись поля: связана с элементом, при ошибке красная
+ * @param props - пропсы подписи
+ * @returns label
+ */
+export declare function FormLabel(props: FormLabelPropsT): import("react").JSX.Element;
+/**
+ * Обёртка элемента управления: передаёт ему id, aria-invalid и aria-describedby
+ * @param props - пропсы; внутрь кладётся один элемент: Input, SelectTrigger, Checkbox (или он в render)
+ * @returns дочерний элемент с атрибутами
+ */
+export declare function FormControl({ children, render, ...props }: FormControlPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Описание поля: подсказка под элементом
+ * @param props - пропсы описания
+ * @returns p
+ */
+export declare function FormDescription(props: FormDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Ошибка поля: текст ошибки проверки, а без ошибки — children
+ * @param props - пропсы ошибки
+ * @returns div с role="alert" или null
+ */
+export declare function FormMessage({ children, ...props }: FormMessagePropsT): import("react").JSX.Element;

package/dist/components/form/form.js

@@ -0,0 +1,136 @@
+"use client";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../field/field.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { createContext, isValidElement, useContext, useId } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
+// src/components/form/form.tsx
+/**
+* Форма: передаёт результат useForm() всем полям внутри. Сам тег form пишется внутри
+* @param props - результат useForm() и children
+* @returns провайдер без своей разметки
+*/
+function Form(props) {
+	return /* @__PURE__ */ jsx(FormProvider, { ...props });
+}
+/** Имя текущего поля */
+const FormFieldContext = createContext(null);
+/**
+* Поле формы: связывает значение из формы с элементом управления в render
+* @param props - name, control и render, как у Controller
+* @returns Controller
+*/
+function FormField(props) {
+	const context = { name: props.name };
+	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Controller, { ...props })
+	});
+}
+/** id текущего блока поля */
+const FormItemContext = createContext(null);
+/**
+* Состояние текущего поля: ошибка и id частей. Работает внутри FormField и FormItem
+* @returns состояние поля
+*/
+function useFormField() {
+	const fieldContext = useContext(FormFieldContext);
+	const itemContext = useContext(FormItemContext);
+	const { getFieldState } = useFormContext();
+	const formState = useFormState({ name: fieldContext?.name });
+	if (!fieldContext || !itemContext) throw new Error("useFormField работает только внутри FormField и FormItem");
+	const fieldState = getFieldState(fieldContext.name, formState);
+	const { id } = itemContext;
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState
+	};
+}
+/**
+* Блок поля: подпись, элемент, описание и ошибка. При ошибке подсвечивается
+* @param props - пропсы Field; orientation — vertical, horizontal или responsive
+* @returns div с role="group"
+*/
+function FormItem(props) {
+	const context = { id: useId() };
+	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(FormItemField, { ...props })
+	});
+}
+/**
+* Field с data-invalid по состоянию поля
+* @param props - пропсы Field
+* @returns div с role="group"
+*/
+function FormItemField(props) {
+	const { invalid } = useFormField();
+	return /* @__PURE__ */ jsx(Field, {
+		"data-invalid": invalid,
+		...props
+	});
+}
+/**
+* Подпись поля: связана с элементом, при ошибке красная
+* @param props - пропсы подписи
+* @returns label
+*/
+function FormLabel(props) {
+	const { invalid, formItemId } = useFormField();
+	return /* @__PURE__ */ jsx(FieldLabel, {
+		"data-error": invalid,
+		htmlFor: formItemId,
+		...props
+	});
+}
+/**
+* Обёртка элемента управления: передаёт ему id, aria-invalid и aria-describedby
+* @param props - пропсы; внутрь кладётся один элемент: Input, SelectTrigger, Checkbox (или он в render)
+* @returns дочерний элемент с атрибутами
+*/
+function FormControl({ children, render, ...props }) {
+	const { invalid, formItemId, formDescriptionId, formMessageId } = useFormField();
+	const describedBy = invalid ? `${formDescriptionId} ${formMessageId}` : formDescriptionId;
+	const element = render ?? (isValidElement(children) ? children : void 0);
+	return useRender({
+		render: element,
+		props: mergeProps({
+			"data-slot": "form-control",
+			"id": formItemId,
+			"aria-describedby": describedBy,
+			"aria-invalid": invalid
+		}, props)
+	});
+}
+/**
+* Описание поля: подсказка под элементом
+* @param props - пропсы описания
+* @returns p
+*/
+function FormDescription(props) {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ jsx(FieldDescription, {
+		id: formDescriptionId,
+		...props
+	});
+}
+/**
+* Ошибка поля: текст ошибки проверки, а без ошибки — children
+* @param props - пропсы ошибки
+* @returns div с role="alert" или null
+*/
+function FormMessage({ children, ...props }) {
+	const { error, formMessageId } = useFormField();
+	const body = error?.message ?? children;
+	return /* @__PURE__ */ jsx(FieldError, {
+		id: formMessageId,
+		...props,
+		children: body
+	});
+}
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

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

@@ -0,0 +1,3 @@
+import { FormControlPropsT, FormDescriptionPropsT, FormFieldPropsT, FormFieldStateI, FormItemPropsT, FormLabelPropsT, FormMessagePropsT, FormPropsT } from "./types.js";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./form.js";
+export { Form, FormControl, type FormControlPropsT, FormDescription, type FormDescriptionPropsT, FormField, type FormFieldPropsT, type FormFieldStateI, FormItem, type FormItemPropsT, FormLabel, type FormLabelPropsT, FormMessage, type FormMessagePropsT, type FormPropsT, useFormField };

package/dist/components/form/index.js

@@ -0,0 +1 @@
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./form.js";

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

@@ -0,0 +1,59 @@
+import { FieldDescriptionPropsT, FieldErrorPropsT, FieldLabelPropsT, FieldPropsT } from "../field/types.js";
+import "../field/index.js";
+import { useRender } from "@base-ui/react/use-render";
+import { ControllerProps, FieldPath, FieldValues, FormProviderProps } from "react-hook-form";
+/**
+ * Пропсы формы: результат useForm() из react-hook-form
+ */
+export type FormPropsT<TFieldValues extends FieldValues = FieldValues, TContext = unknown, TTransformedValues = TFieldValues> = FormProviderProps<TFieldValues, TContext, TTransformedValues>;
+/**
+ * Пропсы поля формы: как у Controller из react-hook-form
+ */
+export type FormFieldPropsT<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TTransformedValues = TFieldValues> = ControllerProps<TFieldValues, TName, TTransformedValues>;
+/**
+ * Состояние поля формы и id его частей
+ * @property id - базовый id блока
+ * @property name - имя поля
+ * @property formItemId - id элемента управления
+ * @property formDescriptionId - id описания
+ * @property formMessageId - id ошибки
+ * @property invalid - есть ошибка
+ * @property isDirty - значение меняли
+ * @property isTouched - поле теряло фокус
+ * @property isValidating - идёт проверка
+ * @property error - ошибка проверки
+ */
+export interface FormFieldStateI {
+  id: string;
+  name: string;
+  formItemId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+  invalid: boolean;
+  isDirty: boolean;
+  isTouched: boolean;
+  isValidating: boolean;
+  error?: {
+    message?: string;
+  };
+}
+/**
+ * Пропсы блока поля
+ */
+export type FormItemPropsT = FieldPropsT;
+/**
+ * Пропсы подписи поля
+ */
+export type FormLabelPropsT = FieldLabelPropsT;
+/**
+ * Пропсы обёртки элемента
+ */
+export type FormControlPropsT = useRender.ComponentProps<'div'>;
+/**
+ * Пропсы описания поля
+ */
+export type FormDescriptionPropsT = FieldDescriptionPropsT;
+/**
+ * Пропсы ошибки поля
+ */
+export type FormMessagePropsT = Omit<FieldErrorPropsT, 'errors'>;

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

@@ -0,0 +1,19 @@
+import { HoverCardContentPropsT, HoverCardPropsT, HoverCardTriggerPropsT } from "./types.js";
+/**
+ * Карточка при наведении: превью содержимого за ссылкой. Только для зрячих пользователей мыши
+ * @param props - пропсы карточки
+ * @returns корень без своей разметки
+ */
+export declare function HoverCard({ onOpenChange, ...props }: HoverCardPropsT): import("react").JSX.Element;
+/**
+ * Ссылка с карточкой: при наведении показывает её. Свой элемент — через render={<Button />}
+ * @param props - пропсы ссылки
+ * @returns a
+ */
+export declare function HoverCardTrigger(props: HoverCardTriggerPropsT): import("react").JSX.Element;
+/**
+ * Содержимое карточки: рендерится в портале рядом со ссылкой
+ * @param props - пропсы содержимого; по умолчанию align="center", sideOffset={4}
+ * @returns портал с карточкой
+ */
+export declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, collisionPadding, arrowPadding, sticky, ...props }: HoverCardContentPropsT): import("react").JSX.Element;

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

@@ -0,0 +1,63 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { PreviewCard } from "@base-ui/react/preview-card";
+// src/components/hover-card/hover-card.tsx
+/**
+* Карточка при наведении: превью содержимого за ссылкой. Только для зрячих пользователей мыши
+* @param props - пропсы карточки
+* @returns корень без своей разметки
+*/
+function HoverCard({ onOpenChange, ...props }) {
+	/**
+	* Карточку показали или скрыли: наружу только флаг
+	* @param open - открыта ли
+	*/
+	const handleOpenChange = (open) => onOpenChange?.(open);
+	return /* @__PURE__ */ jsx(PreviewCard.Root, {
+		"data-slot": "hover-card",
+		onOpenChange: handleOpenChange,
+		...props
+	});
+}
+/**
+* Ссылка с карточкой: при наведении показывает её. Свой элемент — через render={<Button />}
+* @param props - пропсы ссылки
+* @returns a
+*/
+function HoverCardTrigger(props) {
+	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...props
+	});
+}
+/**
+* Содержимое карточки: рендерится в портале рядом со ссылкой
+* @param props - пропсы содержимого; по умолчанию align="center", sideOffset={4}
+* @returns портал с карточкой
+*/
+function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, collisionPadding, arrowPadding, sticky, ...props }) {
+	const classes = cn("z-50", "w-64", "origin-(--transform-origin)", "rounded-lg", "bg-popover", "p-2.5", "text-sm", "text-popover-foreground", "shadow-md", "ring-1", "ring-foreground/10", "outline-hidden", "duration-100", "data-open:animate-in", "data-open:fade-in-0", "data-open:zoom-in-95", "data-closed:animate-out", "data-closed:fade-out-0", "data-closed:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", className);
+	const positionerProps = {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		collisionPadding,
+		arrowPadding,
+		sticky
+	};
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, {
+		"data-slot": "hover-card-portal",
+		children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+			className: "isolate z-50",
+			...positionerProps,
+			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+				"data-slot": "hover-card-content",
+				className: classes,
+				...props
+			})
+		})
+	});
+}
+export { HoverCard, HoverCardContent, HoverCardTrigger };

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

@@ -0,0 +1,3 @@
+import { HoverCardContentPropsT, HoverCardPropsT, HoverCardTriggerPropsT } from "./types.js";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card.js";
+export { HoverCard, HoverCardContent, type HoverCardContentPropsT, type HoverCardPropsT, HoverCardTrigger, type HoverCardTriggerPropsT };

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

@@ -0,0 +1 @@
+export { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card.js";

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

@@ -0,0 +1,27 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { FloatingPropsT } from "../../lib/floating.js";
+import { PreviewCard } from "@base-ui/react/preview-card";
+/**
+ * Пропсы карточки при наведении
+ */
+export type HoverCardPropsT = Omit<PreviewCard.Root.Props, 'onOpenChange'> & {
+  /** Карточка открыта — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Карточка открыта при первом рендере — неконтролируемый режим */
+  defaultOpen?: boolean;
+  /** Карточку показали или скрыли: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Пропсы ссылки с карточкой
+ */
+export type HoverCardTriggerPropsT = PartPropsT<PreviewCard.Trigger.Props> & {
+  /** Задержка перед показом в мс. По умолчанию 600 */
+  delay?: number;
+  /** Задержка перед скрытием в мс. По умолчанию 300 */
+  closeDelay?: number;
+};
+/**
+ * Пропсы содержимого карточки
+ */
+export type HoverCardContentPropsT = PartPropsT<PreviewCard.Popup.Props> & FloatingPropsT;

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

@@ -0,0 +1,8 @@
+import { ImageGalleryPropsT } from "./types.js";
+/**
+ * Галерея изображений: сетка «кирпичной кладки» с ленивой загрузкой.
+ * Нажатие на изображение плавно увеличивает его поверх страницы
+ * @param props - пропсы галереи
+ * @returns контейнер с плитками и просмотром изображения
+ */
+export declare function ImageGallery({ images, gap, columns, lazyLoading, filterImages, sortImages, onImageClick, openLabel, closeLabel, itemClassName, viewerClassName, backdropClassName, className, style, ref, ...props }: ImageGalleryPropsT): import("react").JSX.Element;