@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,170 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+// src/components/alert-dialog/alert-dialog.tsx
+/**
+* Диалог подтверждения: прерывает работу и ждёт ответа. Не закрывается кликом мимо окна
+* @param props - пропсы диалога
+* @returns корень диалога без своей разметки
+*/
+function AlertDialog$1({ onOpenChange, ...props }) {
+	/**
+	* Диалог открыли или закрыли: наружу только флаг
+	* @param open - открыт ли
+	*/
+	const handleOpenChange = (open) => onOpenChange?.(open);
+	return /* @__PURE__ */ jsx(AlertDialog.Root, {
+		"data-slot": "alert-dialog",
+		onOpenChange: handleOpenChange,
+		...props
+	});
+}
+/**
+* Кнопка открытия диалога. Свою кнопку — через render={<Button />}
+* @param props - пропсы кнопки
+* @returns кнопка с aria-haspopup="dialog"
+*/
+function AlertDialogTrigger(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+/**
+* Портал: переносит оверлей и окно в конец body
+* @param props - пропсы портала
+* @returns портал
+*/
+function AlertDialogPortal(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...props
+	});
+}
+/**
+* Оверлей: затемняет и размывает страницу под диалогом
+* @param props - пропсы оверлея
+* @returns полупрозрачный слой на весь экран
+*/
+function AlertDialogOverlay({ className, ...props }) {
+	const classes = cn("fixed", "inset-0", "z-50", "bg-black/10", "duration-100", "supports-backdrop-filter:backdrop-blur-xs", "data-open:animate-in", "data-open:fade-in-0", "data-closed:animate-out", "data-closed:fade-out-0", className);
+	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		className: classes,
+		...props
+	});
+}
+/**
+* Окно диалога: рендерится в портале поверх оверлея, по центру экрана
+* @param props - пропсы окна
+* @returns портал с оверлеем и окном
+*/
+function AlertDialogContent({ className, size = "default", ...props }) {
+	const classes = cn("group/alert-dialog-content", "fixed", "top-1/2", "left-1/2", "z-50", "grid", "w-full", "-translate-x-1/2", "-translate-y-1/2", "gap-4", "rounded-xl", "bg-popover", "p-4", "text-popover-foreground", "ring-1", "ring-foreground/10", "duration-100", "outline-none", "data-[size=default]:max-w-xs", "data-[size=sm]:max-w-xs", "data-[size=default]:sm:max-w-sm", "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", className);
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		"data-slot": "alert-dialog-content",
+		"data-size": size,
+		className: classes,
+		...props
+	})] });
+}
+/**
+* Шапка диалога: иконка, заголовок и описание. В размере sm и на узком экране — по центру
+* @param props - пропсы шапки
+* @returns блок
+*/
+function AlertDialogHeader({ className, ...props }) {
+	const classes = cn("grid", "grid-rows-[auto_1fr]", "place-items-center", "gap-1.5", "text-center", "has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr]", "has-data-[slot=alert-dialog-media]:gap-x-4", "sm:group-data-[size=default]/alert-dialog-content:place-items-start", "sm:group-data-[size=default]/alert-dialog-content:text-left", "sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: classes,
+		...props
+	});
+}
+/**
+* Подвал диалога: кнопки отмены и действия
+* @param props - пропсы подвала
+* @returns блок с серым фоном и разделителем
+*/
+function AlertDialogFooter({ className, ...props }) {
+	const classes = cn("-mx-4", "-mb-4", "flex", "flex-col-reverse", "gap-2", "rounded-b-xl", "border-t", "bg-muted/50", "p-4", "sm:flex-row", "sm:justify-end", "group-data-[size=sm]/alert-dialog-content:grid", "group-data-[size=sm]/alert-dialog-content:grid-cols-2", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: classes,
+		...props
+	});
+}
+/**
+* Иконка диалога: квадрат с иконкой над заголовком или слева от него
+* @param props - пропсы иконки
+* @returns блок
+*/
+function AlertDialogMedia({ className, ...props }) {
+	const classes = cn("mb-2", "inline-flex", "size-10", "items-center", "justify-center", "rounded-md", "bg-muted", "sm:group-data-[size=default]/alert-dialog-content:row-span-2", "*:[svg:not([class*=size-])]:size-6", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-media",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок диалога: озвучивается при открытии
+* @param props - пропсы заголовка
+* @returns h2
+*/
+function AlertDialogTitle({ className, ...props }) {
+	const classes = cn("text-base", "font-medium", "sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className);
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание диалога: озвучивается после заголовка
+* @param props - пропсы описания
+* @returns p
+*/
+function AlertDialogDescription({ className, ...props }) {
+	const classes = cn("text-sm", "text-balance", "text-muted-foreground", "md:text-pretty", "*:[a]:underline", "*:[a]:underline-offset-3", "*:[a]:hover:text-foreground", className);
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Кнопка действия: подтверждает и закрывает диалог
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function AlertDialogAction({ variant = "default", size = "default", ...props }) {
+	const button = /* @__PURE__ */ jsx(Button, {
+		variant,
+		size
+	});
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		"data-slot": "alert-dialog-action",
+		render: button,
+		...props
+	});
+}
+/**
+* Кнопка отмены: закрывает диалог без действия
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function AlertDialogCancel({ variant = "outline", size = "default", ...props }) {
+	const button = /* @__PURE__ */ jsx(Button, {
+		variant,
+		size
+	});
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		"data-slot": "alert-dialog-cancel",
+		render: button,
+		...props
+	});
+}
+export { AlertDialog$1 as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1,3 @@
+import { AlertDialogActionPropsT, AlertDialogCancelPropsT, AlertDialogContentPropsT, AlertDialogDescriptionPropsT, AlertDialogFooterPropsT, AlertDialogHeaderPropsT, AlertDialogMediaPropsT, AlertDialogOverlayPropsT, AlertDialogPortalPropsT, AlertDialogPropsT, AlertDialogSizeT, AlertDialogTitlePropsT, AlertDialogTriggerPropsT } from "./types.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./alert-dialog.js";
+export { AlertDialog, AlertDialogAction, type AlertDialogActionPropsT, AlertDialogCancel, type AlertDialogCancelPropsT, AlertDialogContent, type AlertDialogContentPropsT, AlertDialogDescription, type AlertDialogDescriptionPropsT, AlertDialogFooter, type AlertDialogFooterPropsT, AlertDialogHeader, type AlertDialogHeaderPropsT, AlertDialogMedia, type AlertDialogMediaPropsT, AlertDialogOverlay, type AlertDialogOverlayPropsT, AlertDialogPortal, type AlertDialogPortalPropsT, type AlertDialogPropsT, type AlertDialogSizeT, AlertDialogTitle, type AlertDialogTitlePropsT, AlertDialogTrigger, type AlertDialogTriggerPropsT };

package/dist/components/alert-dialog/index.js

@@ -0,0 +1 @@
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./alert-dialog.js";

package/dist/components/alert-dialog/types.d.ts

@@ -0,0 +1,80 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { ButtonPropsT } from "../button/types.js";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+import { ComponentProps } from "react";
+/**
+ * Пропсы диалога подтверждения
+ */
+export type AlertDialogPropsT = Omit<AlertDialog.Root.Props, 'onOpenChange'> & {
+  /** Диалог открыт — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Диалог открыт при первом рендере — неконтролируемый режим */
+  defaultOpen?: boolean;
+  /** Диалог открыли или закрыли: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Пропсы кнопки открытия
+ */
+export type AlertDialogTriggerPropsT = PartPropsT<AlertDialog.Trigger.Props>;
+/**
+ * Пропсы портала
+ */
+export type AlertDialogPortalPropsT = AlertDialog.Portal.Props;
+/**
+ * Пропсы оверлея
+ */
+export type AlertDialogOverlayPropsT = PartPropsT<AlertDialog.Backdrop.Props>;
+/**
+ * Размер окна: default — кнопки в ряд справа, sm — узкое окно, кнопки в две колонки
+ */
+export type AlertDialogSizeT = 'default' | 'sm';
+/**
+ * Пропсы окна диалога
+ */
+export type AlertDialogContentPropsT = PartPropsT<AlertDialog.Popup.Props> & {
+  /** Размер окна: default — кнопки в ряд справа, sm — узкое окно, кнопки в две колонки */
+  size?: AlertDialogSizeT;
+  /** Куда перевести фокус при открытии: элемент или false — оставить на месте */
+  initialFocus?: AlertDialog.Popup.Props['initialFocus'];
+  /** Куда вернуть фокус при закрытии: элемент или false — никуда */
+  finalFocus?: AlertDialog.Popup.Props['finalFocus'];
+};
+/**
+ * Пропсы шапки
+ */
+export type AlertDialogHeaderPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы подвала
+ */
+export type AlertDialogFooterPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы иконки
+ */
+export type AlertDialogMediaPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы заголовка
+ */
+export type AlertDialogTitlePropsT = PartPropsT<AlertDialog.Title.Props>;
+/**
+ * Пропсы описания
+ */
+export type AlertDialogDescriptionPropsT = PartPropsT<AlertDialog.Description.Props>;
+/**
+ * Пропсы кнопки действия
+ */
+export type AlertDialogActionPropsT = PartPropsT<AlertDialog.Close.Props> & {
+  /** Вариант оформления кнопки */
+  variant?: ButtonPropsT['variant'];
+  /** Размер кнопки */
+  size?: ButtonPropsT['size'];
+};
+/**
+ * Пропсы кнопки отмены
+ */
+export type AlertDialogCancelPropsT = PartPropsT<AlertDialog.Close.Props> & {
+  /** Вариант оформления кнопки */
+  variant?: ButtonPropsT['variant'];
+  /** Размер кнопки */
+  size?: ButtonPropsT['size'];
+};

package/dist/components/aspect-ratio/aspect-ratio.d.ts

@@ -0,0 +1,8 @@
+import { AspectRatioPropsT } from "./types.js";
+/**
+ * Блок с заданным соотношением сторон: изображение, видео, карта.
+ * Ширина берётся от родителя, высота вычисляется из ratio
+ * @param props - пропсы блока: ratio (например, 16 / 9), className, содержимое
+ * @returns блок с соотношением сторон
+ */
+export declare function AspectRatio({ ratio, className, style, ...props }: AspectRatioPropsT): import("react").JSX.Element;

package/dist/components/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,20 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/aspect-ratio/aspect-ratio.tsx
+/**
+* Блок с заданным соотношением сторон: изображение, видео, карта.
+* Ширина берётся от родителя, высота вычисляется из ratio
+* @param props - пропсы блока: ratio (например, 16 / 9), className, содержимое
+* @returns блок с соотношением сторон
+*/
+function AspectRatio({ ratio = 1, className, style, ...props }) {
+	const classes = cn("relative", "aspect-(--ratio)", className);
+	const ratioStyle = Object.assign({ "--ratio": ratio }, style);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "aspect-ratio",
+		style: ratioStyle,
+		className: classes,
+		...props
+	});
+}
+export { AspectRatio };

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1,3 @@
+import { AspectRatioPropsT } from "./types.js";
+import { AspectRatio } from "./aspect-ratio.js";
+export { AspectRatio, type AspectRatioPropsT };

package/dist/components/aspect-ratio/index.js

@@ -0,0 +1 @@
+export { AspectRatio } from "./aspect-ratio.js";

package/dist/components/aspect-ratio/types.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from "react";
+/**
+ * Пропсы блока с соотношением сторон
+ */
+export type AspectRatioPropsT = ComponentProps<'div'> & {
+  /** Соотношение ширины к высоте: 16 / 9, 1, 9 / 16. По умолчанию 1 — квадрат */
+  ratio?: number;
+};

package/dist/components/attachment/attachment.d.ts

@@ -0,0 +1,57 @@
+import { AttachmentActionPropsT, AttachmentActionsPropsT, AttachmentContentPropsT, AttachmentDescriptionPropsT, AttachmentGroupPropsT, AttachmentMediaPropsT, AttachmentPropsT, AttachmentTitlePropsT, AttachmentTriggerPropsT } from "./types.js";
+/**
+ * Вложение: файл или изображение в сообщении, с состоянием загрузки
+ * @param props - пропсы вложения
+ * @returns карточка вложения
+ */
+export declare function Attachment({ className, state, size, orientation, ...props }: AttachmentPropsT): import("react").JSX.Element;
+/**
+ * Медиа вложения: иконка типа файла, спиннер или превью
+ * @param props - пропсы медиа
+ * @returns квадратная плашка медиа
+ */
+export declare function AttachmentMedia({ className, variant, ...props }: AttachmentMediaPropsT): import("react").JSX.Element;
+/**
+ * Содержимое вложения: название и описание
+ * @param props - пропсы содержимого
+ * @returns колонка содержимого
+ */
+export declare function AttachmentContent({ className, ...props }: AttachmentContentPropsT): import("react").JSX.Element;
+/**
+ * Название вложения: одна строка, мерцает во время загрузки и обработки
+ * @param props - пропсы названия
+ * @returns название
+ */
+export declare function AttachmentTitle({ className, ...props }: AttachmentTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание вложения: тип, размер, ход загрузки
+ * @param props - пропсы описания
+ * @returns описание
+ */
+export declare function AttachmentDescription({ className, ...props }: AttachmentDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Действия вложения: кнопки поверх области нажатия.
+ * У вертикального вложения — в правом верхнем углу превью
+ * @param props - пропсы действий
+ * @returns блок действий
+ */
+export declare function AttachmentActions({ className, ...props }: AttachmentActionsPropsT): import("react").JSX.Element;
+/**
+ * Действие вложения: кнопка с иконкой — удалить, отменить, повторить.
+ * Без текста — подпись задаётся через aria-label
+ * @param props - пропсы кнопки
+ * @returns кнопка, по умолчанию ghost размера icon-xs
+ */
+export declare function AttachmentAction({ className, variant, size, ...props }: AttachmentActionPropsT): import("react").JSX.Element;
+/**
+ * Область нажатия вложения: растягивается на всю карточку и открывает файл или превью
+ * @param props - пропсы области
+ * @returns кнопка или свой элемент (render={<a href />}) поверх карточки
+ */
+export declare function AttachmentTrigger({ className, render, type, ...props }: AttachmentTriggerPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Группа вложений: горизонтальная прокрутка с привязкой к карточкам
+ * @param props - пропсы группы
+ * @returns прокручиваемая строка вложений
+ */
+export declare function AttachmentGroup({ className, ...props }: AttachmentGroupPropsT): import("react").JSX.Element;

package/dist/components/attachment/attachment.js

@@ -0,0 +1,139 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { attachmentMediaVariants, attachmentVariants } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/attachment/attachment.tsx
+/**
+* Вложение: файл или изображение в сообщении, с состоянием загрузки
+* @param props - пропсы вложения
+* @returns карточка вложения
+*/
+function Attachment({ className, state = "done", size = "default", orientation = "horizontal", ...props }) {
+	const classes = cn(attachmentVariants({
+		size,
+		orientation
+	}), className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment",
+		"data-state": state,
+		"data-size": size,
+		"data-orientation": orientation,
+		className: classes,
+		...props
+	});
+}
+/**
+* Медиа вложения: иконка типа файла, спиннер или превью
+* @param props - пропсы медиа
+* @returns квадратная плашка медиа
+*/
+function AttachmentMedia({ className, variant = "icon", ...props }) {
+	const classes = cn(attachmentMediaVariants({ variant }), className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-media",
+		"data-variant": variant,
+		className: classes,
+		...props
+	});
+}
+/**
+* Содержимое вложения: название и описание
+* @param props - пропсы содержимого
+* @returns колонка содержимого
+*/
+function AttachmentContent({ className, ...props }) {
+	const classes = cn("max-w-full", "min-w-0", "flex-1", "leading-tight", "group-data-[orientation=vertical]/attachment:px-1", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-content",
+		className: classes,
+		...props
+	});
+}
+/**
+* Название вложения: одна строка, мерцает во время загрузки и обработки
+* @param props - пропсы названия
+* @returns название
+*/
+function AttachmentTitle({ className, ...props }) {
+	const classes = cn("block", "max-w-full", "min-w-0", "truncate", "font-medium", "group-data-[state=processing]/attachment:shimmer", "group-data-[state=uploading]/attachment:shimmer", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "attachment-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание вложения: тип, размер, ход загрузки
+* @param props - пропсы описания
+* @returns описание
+*/
+function AttachmentDescription({ className, ...props }) {
+	const classes = cn("mt-0.5", "block", "max-w-full", "min-w-0", "truncate", "text-xs", "text-muted-foreground", "group-data-[state=error]/attachment:text-destructive/80", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "attachment-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Действия вложения: кнопки поверх области нажатия.
+* У вертикального вложения — в правом верхнем углу превью
+* @param props - пропсы действий
+* @returns блок действий
+*/
+function AttachmentActions({ className, ...props }) {
+	const classes = cn("relative", "z-20", "flex", "shrink-0", "items-center", "group-data-[orientation=vertical]/attachment:absolute", "group-data-[orientation=vertical]/attachment:top-3", "group-data-[orientation=vertical]/attachment:right-3", "group-data-[orientation=vertical]/attachment:gap-1", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-actions",
+		className: classes,
+		...props
+	});
+}
+/**
+* Действие вложения: кнопка с иконкой — удалить, отменить, повторить.
+* Без текста — подпись задаётся через aria-label
+* @param props - пропсы кнопки
+* @returns кнопка, по умолчанию ghost размера icon-xs
+*/
+function AttachmentAction({ className, variant = "ghost", size = "icon-xs", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "attachment-action",
+		variant,
+		size,
+		className,
+		...props
+	});
+}
+/**
+* Область нажатия вложения: растягивается на всю карточку и открывает файл или превью
+* @param props - пропсы области
+* @returns кнопка или свой элемент (render={<a href />}) поверх карточки
+*/
+function AttachmentTrigger({ className, render, type, ...props }) {
+	const classes = cn("absolute", "inset-0", "z-10", "cursor-pointer", "outline-none", className);
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps({
+			"data-slot": "attachment-trigger",
+			type: render ? void 0 : type ?? "button",
+			className: classes
+		}, props)
+	});
+}
+/**
+* Группа вложений: горизонтальная прокрутка с привязкой к карточкам
+* @param props - пропсы группы
+* @returns прокручиваемая строка вложений
+*/
+function AttachmentGroup({ className, ...props }) {
+	const classes = cn("flex", "min-w-0", "scroll-px-1", "snap-x", "snap-mandatory", "gap-3", "overflow-x-auto", "overscroll-x-contain", "py-1", "scroll-fade-x", "no-scrollbar", "*:data-[slot=attachment]:flex-none", "*:data-[slot=attachment]:snap-start", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-group",
+		className: classes,
+		...props
+	});
+}
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };

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

@@ -0,0 +1,3 @@
+import { AttachmentActionPropsT, AttachmentActionsPropsT, AttachmentContentPropsT, AttachmentDescriptionPropsT, AttachmentGroupPropsT, AttachmentMediaPropsT, AttachmentPropsT, AttachmentStateT, AttachmentTitlePropsT, AttachmentTriggerPropsT, attachmentMediaVariants, attachmentVariants } from "./types.js";
+import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger } from "./attachment.js";
+export { Attachment, AttachmentAction, type AttachmentActionPropsT, AttachmentActions, type AttachmentActionsPropsT, AttachmentContent, type AttachmentContentPropsT, AttachmentDescription, type AttachmentDescriptionPropsT, AttachmentGroup, type AttachmentGroupPropsT, AttachmentMedia, type AttachmentMediaPropsT, type AttachmentPropsT, type AttachmentStateT, AttachmentTitle, type AttachmentTitlePropsT, AttachmentTrigger, type AttachmentTriggerPropsT, attachmentMediaVariants, attachmentVariants };

package/dist/components/attachment/index.js

@@ -0,0 +1,3 @@
+import { attachmentMediaVariants, attachmentVariants } from "./types.js";
+import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger } from "./attachment.js";
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, attachmentMediaVariants, attachmentVariants };

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

@@ -0,0 +1,79 @@
+import { ButtonPropsT } from "../button/types.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Стили вложения: размер и ориентация.
+ * Состояние задаёт data-state: idle — пунктирная рамка, error — рамка ошибки
+ */
+export declare const attachmentVariants: (props?: ({
+  size?: "default" | "sm" | "xs" | null | undefined;
+  orientation?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Стили медиа вложения: иконка или превью изображения
+ */
+export declare const attachmentMediaVariants: (props?: ({
+  variant?: "image" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Размер и ориентация вложения
+ */
+export type AttachmentVariantsT = VariantProps<typeof attachmentVariants>;
+/**
+ * Варианты медиа вложения
+ */
+export type AttachmentMediaVariantsT = VariantProps<typeof attachmentMediaVariants>;
+/**
+ * Состояние вложения
+ */
+export type AttachmentStateT = 'idle' | 'uploading' | 'processing' | 'error' | 'done';
+/**
+ * Пропсы вложения
+ */
+export type AttachmentPropsT = ComponentProps<'div'> & {
+  /**
+   * Состояние: idle — выбрано, ещё не загружено; uploading — загружается; processing — обрабатывается;
+   * error — ошибка; done — готово
+   */
+  state?: AttachmentStateT;
+  /** Размер: default, sm или xs */
+  size?: AttachmentVariantsT['size'];
+  /** Ориентация: horizontal — строка, vertical — карточка с превью сверху */
+  orientation?: AttachmentVariantsT['orientation'];
+};
+/**
+ * Пропсы медиа вложения
+ */
+export type AttachmentMediaPropsT = ComponentProps<'div'> & {
+  /** Оформление: icon — иконка на плашке, image — превью изображения */
+  variant?: AttachmentMediaVariantsT['variant'];
+};
+/**
+ * Пропсы содержимого вложения
+ */
+export type AttachmentContentPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы названия вложения
+ */
+export type AttachmentTitlePropsT = ComponentProps<'span'>;
+/**
+ * Пропсы описания вложения
+ */
+export type AttachmentDescriptionPropsT = ComponentProps<'span'>;
+/**
+ * Пропсы блока действий вложения
+ */
+export type AttachmentActionsPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы действия вложения
+ */
+export type AttachmentActionPropsT = ButtonPropsT;
+/**
+ * Пропсы области нажатия вложения
+ */
+export type AttachmentTriggerPropsT = useRender.ComponentProps<'button'>;
+/**
+ * Пропсы группы вложений
+ */
+export type AttachmentGroupPropsT = ComponentProps<'div'>;

package/dist/components/attachment/types.js

@@ -0,0 +1,43 @@
+import { cva } from "class-variance-authority";
+// src/components/attachment/types.ts
+/**
+* Стили вложения: размер и ориентация.
+* Состояние задаёт data-state: idle — пунктирная рамка, error — рамка ошибки
+*/
+const attachmentVariants = cva([
+	"group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border",
+	"bg-card text-card-foreground transition-colors",
+	"keyboard:focus-within:ring-1 keyboard:focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50",
+	"data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed"
+], { variants: {
+	size: {
+		default: ["gap-2 text-sm has-data-[slot=attachment-media]:p-2", "has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2"],
+		sm: ["gap-2.5 text-xs has-data-[slot=attachment-media]:p-1.5", "has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5"],
+		xs: ["gap-1.5 rounded-lg text-xs has-data-[slot=attachment-media]:p-1", "has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1"]
+	},
+	orientation: {
+		horizontal: "min-w-40 items-center",
+		vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
+	}
+} });
+/**
+* Стили медиа вложения: иконка или превью изображения
+*/
+const attachmentMediaVariants = cva([
+	"relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg",
+	"bg-muted text-foreground [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4",
+	"group-data-[size=sm]/attachment:w-8",
+	"group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md",
+	"group-data-[size=xs]/attachment:[&_svg:not([class*=size-])]:size-3.5",
+	"group-data-[orientation=vertical]/attachment:w-full",
+	"group-data-[orientation=vertical]/attachment:[&_svg:not([class*=size-])]:size-6",
+	"group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6!",
+	"group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive"
+], {
+	variants: { variant: {
+		icon: "",
+		image: ["opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100", "*:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"]
+	} },
+	defaultVariants: { variant: "icon" }
+});
+export { attachmentMediaVariants, attachmentVariants };