@archytechtor/ui 0.0.0-stage → 0.1.0

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,39 @@
+import { AvatarBadgePropsT, AvatarFallbackPropsT, AvatarGroupCountPropsT, AvatarGroupPropsT, AvatarImagePropsT, AvatarPropsT } from "./types.js";
+/**
+ * Аватар: изображение пользователя с заглушкой на случай, если изображения нет
+ * @param props - пропсы аватара
+ * @returns круглый контейнер для AvatarImage, AvatarFallback и AvatarBadge
+ */
+export declare function Avatar({ className, size, ...props }: AvatarPropsT): import("react").JSX.Element;
+/**
+ * Изображение аватара: показывается только после успешной загрузки
+ * @param props - пропсы изображения
+ * @returns изображение
+ */
+export declare function AvatarImage({ className, ...props }: AvatarImagePropsT): import("react").JSX.Element;
+/**
+ * Заглушка аватара: инициалы или иконка, пока изображение не загружено
+ * @param props - пропсы заглушки
+ * @returns заглушка
+ */
+export declare function AvatarFallback({ className, ...props }: AvatarFallbackPropsT): import("react").JSX.Element;
+/**
+ * Значок аватара: точка статуса или иконка в правом нижнем углу. Только у одиночного аватара:
+ * в AvatarGroup значок скрыт — у наложенных аватаров он вылезал бы поверх соседа
+ * @param props - пропсы значка
+ * @returns значок
+ */
+export declare function AvatarBadge({ className, ...props }: AvatarBadgePropsT): import("react").JSX.Element;
+/**
+ * Группа аватаров: аватары с наложением друг на друга
+ * @param props - пропсы группы
+ * @returns группа
+ */
+export declare function AvatarGroup({ className, ...props }: AvatarGroupPropsT): import("react").JSX.Element;
+/**
+ * Счётчик группы аватаров: сколько ещё участников не показано, например «+3».
+ * Размер повторяет размер аватаров группы
+ * @param props - пропсы счётчика
+ * @returns счётчик
+ */
+export declare function AvatarGroupCount({ className, ...props }: AvatarGroupCountPropsT): import("react").JSX.Element;

package/dist/components/avatar/avatar.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { avatarVariants } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+// src/components/avatar/avatar.tsx
+/**
+* Аватар: изображение пользователя с заглушкой на случай, если изображения нет
+* @param props - пропсы аватара
+* @returns круглый контейнер для AvatarImage, AvatarFallback и AvatarBadge
+*/
+function Avatar$1({ className, size = "default", ...props }) {
+	const classes = cn(avatarVariants({ size }), className);
+	return /* @__PURE__ */ jsx(Avatar.Root, {
+		"data-slot": "avatar",
+		"data-size": size,
+		className: classes,
+		...props
+	});
+}
+/**
+* Изображение аватара: показывается только после успешной загрузки
+* @param props - пропсы изображения
+* @returns изображение
+*/
+function AvatarImage({ className, ...props }) {
+	const classes = cn("aspect-square", "size-full", "rounded-full", "object-cover", className);
+	return /* @__PURE__ */ jsx(Avatar.Image, {
+		"data-slot": "avatar-image",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заглушка аватара: инициалы или иконка, пока изображение не загружено
+* @param props - пропсы заглушки
+* @returns заглушка
+*/
+function AvatarFallback({ className, ...props }) {
+	const classes = cn("flex", "size-full", "items-center", "justify-center", "rounded-full", "bg-muted", "text-sm", "text-muted-foreground", "group-data-[size=sm]/avatar:text-xs", className);
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: classes,
+		...props
+	});
+}
+/**
+* Значок аватара: точка статуса или иконка в правом нижнем углу. Только у одиночного аватара:
+* в AvatarGroup значок скрыт — у наложенных аватаров он вылезал бы поверх соседа
+* @param props - пропсы значка
+* @returns значок
+*/
+function AvatarBadge({ className, ...props }) {
+	const classes = cn("absolute", "right-0", "bottom-0", "z-10", "inline-flex", "items-center", "justify-center", "rounded-full", "select-none", "bg-primary", "text-primary-foreground", "bg-blend-color", "ring-2", "ring-background", "group-data-[size=sm]/avatar:size-2", "group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5", "group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3", "group-data-[size=lg]/avatar:[&>svg]:size-2", "in-data-[slot=avatar-group]:hidden", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-badge",
+		className: classes,
+		...props
+	});
+}
+/**
+* Группа аватаров: аватары с наложением друг на друга
+* @param props - пропсы группы
+* @returns группа
+*/
+function AvatarGroup({ className, ...props }) {
+	const classes = cn("group/avatar-group", "flex", "-space-x-2", "*:data-[slot=avatar]:ring-2", "*:data-[slot=avatar]:ring-background", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Счётчик группы аватаров: сколько ещё участников не показано, например «+3».
+* Размер повторяет размер аватаров группы
+* @param props - пропсы счётчика
+* @returns счётчик
+*/
+function AvatarGroupCount({ className, ...props }) {
+	const classes = cn("relative", "flex", "size-8", "shrink-0", "items-center", "justify-center", "rounded-full", "bg-muted", "text-sm", "text-muted-foreground", "ring-2", "ring-background", "group-has-data-[size=lg]/avatar-group:size-10", "group-has-data-[size=sm]/avatar-group:size-6", "[&>svg]:size-4", "group-has-data-[size=lg]/avatar-group:[&>svg]:size-5", "group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group-count",
+		className: classes,
+		...props
+	});
+}
+export { Avatar$1 as Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

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

@@ -0,0 +1,3 @@
+import { AvatarBadgePropsT, AvatarFallbackPropsT, AvatarGroupCountPropsT, AvatarGroupPropsT, AvatarImagePropsT, AvatarPropsT, avatarVariants } from "./types.js";
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./avatar.js";
+export { Avatar, AvatarBadge, type AvatarBadgePropsT, AvatarFallback, type AvatarFallbackPropsT, AvatarGroup, AvatarGroupCount, type AvatarGroupCountPropsT, type AvatarGroupPropsT, AvatarImage, type AvatarImagePropsT, type AvatarPropsT, avatarVariants };

package/dist/components/avatar/index.js

@@ -0,0 +1,3 @@
+import { avatarVariants } from "./types.js";
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./avatar.js";
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, avatarVariants };

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

@@ -0,0 +1,54 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+import { Avatar } from "@base-ui/react/avatar";
+/**
+ * Стили аватара: размер.
+ * Экспортируются, чтобы оформить аватаром другой элемент: avatarVariants({ size: 'lg' }).
+ * Рамка рисуется псевдоэлементом поверх изображения и смешивается с ним, чтобы светлые
+ * и тёмные фото не сливались с фоном
+ */
+export declare const avatarVariants: (props?: ({
+  size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Размеры аватара
+ */
+export type AvatarVariantsT = VariantProps<typeof avatarVariants>;
+/**
+ * Пропсы аватара
+ */
+export type AvatarPropsT = PartPropsT<Avatar.Root.Props> & {
+  /** Размер: sm — 24 px, default — 32 px, lg — 40 px */
+  size?: AvatarVariantsT['size'];
+};
+/**
+ * Пропсы изображения аватара
+ */
+export type AvatarImagePropsT = PartPropsT<Omit<Avatar.Image.Props, 'onLoadingStatusChange'>> & {
+  /** Адрес изображения. Пока оно грузится или если не загрузилось, показывается AvatarFallback */
+  src?: string;
+  /** Описание изображения для скринридера: имя пользователя */
+  alt?: string;
+  /** Смена состояния загрузки изображения: idle, loading, loaded, error */
+  onLoadingStatusChange?: (status: 'idle' | 'loading' | 'loaded' | 'error') => void;
+};
+/**
+ * Пропсы заглушки аватара
+ */
+export type AvatarFallbackPropsT = PartPropsT<Omit<Avatar.Fallback.Props, 'delay'>> & {
+  /** Задержка показа в мс: чтобы заглушка не мелькала, если изображение загрузится быстро */
+  delay?: number;
+};
+/**
+ * Пропсы значка аватара
+ */
+export type AvatarBadgePropsT = ComponentProps<'span'>;
+/**
+ * Пропсы группы аватаров
+ */
+export type AvatarGroupPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы счётчика группы аватаров
+ */
+export type AvatarGroupCountPropsT = ComponentProps<'div'>;

package/dist/components/avatar/types.js

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority";
+// src/components/avatar/types.ts
+/**
+* Стили аватара: размер.
+* Экспортируются, чтобы оформить аватаром другой элемент: avatarVariants({ size: 'lg' }).
+* Рамка рисуется псевдоэлементом поверх изображения и смешивается с ним, чтобы светлые
+* и тёмные фото не сливались с фоном
+*/
+const avatarVariants = cva([
+	"group/avatar relative flex shrink-0 rounded-full select-none",
+	"after:absolute after:inset-0 after:rounded-full after:border after:border-border",
+	"after:mix-blend-darken dark:after:mix-blend-lighten"
+], {
+	variants: { size: {
+		default: "size-8",
+		sm: "size-6",
+		lg: "size-10"
+	} },
+	defaultVariants: { size: "default" }
+});
+export { avatarVariants };

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,7 @@
+import { BadgePropsT } from "./types.js";
+/**
+ * Бейдж: короткая метка — статус, категория, счётчик
+ * @param props - пропсы бейджа
+ * @returns бейдж или дочерний элемент в стилях бейджа (render)
+ */
+export declare function Badge({ className, variant, render, ...props }: BadgePropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/badge/badge.js

@@ -0,0 +1,23 @@
+import { cn } from "../../lib/utils.js";
+import { badgeVariants } from "./types.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/badge/badge.tsx
+/**
+* Бейдж: короткая метка — статус, категория, счётчик
+* @param props - пропсы бейджа
+* @returns бейдж или дочерний элемент в стилях бейджа (render)
+*/
+function Badge({ className, variant = "default", render, ...props }) {
+	const classes = cn(badgeVariants({ variant }), className);
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			"data-slot": "badge",
+			"data-variant": variant,
+			className: classes
+		}, props)
+	});
+}
+export { Badge };

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

@@ -0,0 +1,3 @@
+import { BadgePropsT, badgeVariants } from "./types.js";
+import { Badge } from "./badge.js";
+export { Badge, type BadgePropsT, badgeVariants };

package/dist/components/badge/index.js

@@ -0,0 +1,3 @@
+import { badgeVariants } from "./types.js";
+import { Badge } from "./badge.js";
+export { Badge, badgeVariants };

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

@@ -0,0 +1,21 @@
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Стили бейджа: вариант оформления.
+ * Экспортируются, чтобы оформить бейджем другой элемент: badgeVariants({ variant: 'outline' }).
+ * Цвет наведения появляется только у бейджа-ссылки (render={<a />}).
+ */
+export declare const badgeVariants: (props?: ({
+  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты оформления бейджа
+ */
+export type BadgeVariantsT = VariantProps<typeof badgeVariants>;
+/**
+ * Пропсы бейджа
+ */
+export type BadgePropsT = useRender.ComponentProps<'span'> & {
+  /** Оформление: основной, второстепенный, опасный, контурный, без фона или ссылка */
+  variant?: BadgeVariantsT['variant'];
+};

package/dist/components/badge/types.js

@@ -0,0 +1,26 @@
+import { cva } from "class-variance-authority";
+// src/components/badge/types.ts
+/**
+* Стили бейджа: вариант оформления.
+* Экспортируются, чтобы оформить бейджем другой элемент: badgeVariants({ variant: 'outline' }).
+* Цвет наведения появляется только у бейджа-ссылки (render={<a />}).
+*/
+const badgeVariants = cva([
+	"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden",
+	"rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all select-none",
+	"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+	"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+	"has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+	"[&>svg]:pointer-events-none [&>svg]:size-3!"
+], {
+	variants: { variant: {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive: ["bg-destructive/10 text-destructive [a]:hover:bg-destructive/20", "focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40"],
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline"
+	} },
+	defaultVariants: { variant: "default" }
+});
+export { badgeVariants };

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,43 @@
+import { BreadcrumbEllipsisPropsT, BreadcrumbItemPropsT, BreadcrumbLinkPropsT, BreadcrumbListPropsT, BreadcrumbPagePropsT, BreadcrumbPropsT, BreadcrumbSeparatorPropsT } from "./types.js";
+/**
+ * Навигационная цепочка: путь к текущей странице по иерархии разделов
+ * @param props - пропсы цепочки
+ * @returns элемент <nav>
+ */
+export declare function Breadcrumb({ className, label, ...props }: BreadcrumbPropsT): import("react").JSX.Element;
+/**
+ * Список пунктов навигационной цепочки
+ * @param props - пропсы списка
+ * @returns элемент <ol>
+ */
+export declare function BreadcrumbList({ className, ...props }: BreadcrumbListPropsT): import("react").JSX.Element;
+/**
+ * Пункт навигационной цепочки: ссылка, текущая страница или многоточие
+ * @param props - пропсы пункта
+ * @returns элемент <li>
+ */
+export declare function BreadcrumbItem({ className, ...props }: BreadcrumbItemPropsT): import("react").JSX.Element;
+/**
+ * Ссылка на раздел в навигационной цепочке
+ * @param props - пропсы ссылки
+ * @returns ссылка или дочерний элемент в стилях ссылки (render)
+ */
+export declare function BreadcrumbLink({ render, className, ...props }: BreadcrumbLinkPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Текущая страница: последний пункт цепочки, не ссылка
+ * @param props - пропсы текущей страницы
+ * @returns элемент с aria-current="page"
+ */
+export declare function BreadcrumbPage({ className, ...props }: BreadcrumbPagePropsT): import("react").JSX.Element;
+/**
+ * Разделитель между пунктами, по умолчанию шеврон. Скрыт от скринридера
+ * @param props - пропсы разделителя; children заменяет иконку
+ * @returns элемент <li>
+ */
+export declare function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorPropsT): import("react").JSX.Element;
+/**
+ * Многоточие на месте свёрнутых пунктов длинной цепочки
+ * @param props - пропсы многоточия
+ * @returns иконка многоточия с текстом для скринридера
+ */
+export declare function BreadcrumbEllipsis({ className, label, ...props }: BreadcrumbEllipsisPropsT): import("react").JSX.Element;

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,115 @@
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/breadcrumb/breadcrumb.tsx
+/**
+* Навигационная цепочка: путь к текущей странице по иерархии разделов
+* @param props - пропсы цепочки
+* @returns элемент <nav>
+*/
+function Breadcrumb({ className, label = texts.breadcrumb, ...props }) {
+	const classes = cn(className);
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": label,
+		"data-slot": "breadcrumb",
+		className: classes,
+		...props
+	});
+}
+/**
+* Список пунктов навигационной цепочки
+* @param props - пропсы списка
+* @returns элемент <ol>
+*/
+function BreadcrumbList({ className, ...props }) {
+	const classes = cn("flex", "flex-wrap", "items-center", "gap-1.5", "text-sm", "wrap-break-word", "text-muted-foreground", className);
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: classes,
+		...props
+	});
+}
+/**
+* Пункт навигационной цепочки: ссылка, текущая страница или многоточие
+* @param props - пропсы пункта
+* @returns элемент <li>
+*/
+function BreadcrumbItem({ className, ...props }) {
+	const classes = cn("inline-flex", "items-center", "gap-1", className);
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: classes,
+		...props
+	});
+}
+/**
+* Ссылка на раздел в навигационной цепочке
+* @param props - пропсы ссылки
+* @returns ссылка или дочерний элемент в стилях ссылки (render)
+*/
+function BreadcrumbLink({ render, className, ...props }) {
+	const classes = cn("transition-colors", "hover:text-foreground", className);
+	return useRender({
+		defaultTagName: "a",
+		render,
+		props: mergeProps({
+			"data-slot": "breadcrumb-link",
+			className: classes
+		}, props)
+	});
+}
+/**
+* Текущая страница: последний пункт цепочки, не ссылка
+* @param props - пропсы текущей страницы
+* @returns элемент с aria-current="page"
+*/
+function BreadcrumbPage({ className, ...props }) {
+	const classes = cn("font-normal", "text-foreground", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-page",
+		role: "link",
+		"aria-disabled": "true",
+		"aria-current": "page",
+		className: classes,
+		...props
+	});
+}
+/**
+* Разделитель между пунктами, по умолчанию шеврон. Скрыт от скринридера
+* @param props - пропсы разделителя; children заменяет иконку
+* @returns элемент <li>
+*/
+function BreadcrumbSeparator({ children, className, ...props }) {
+	const classes = cn("[&>svg]:size-3.5", className);
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: classes,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+}
+/**
+* Многоточие на месте свёрнутых пунктов длинной цепочки
+* @param props - пропсы многоточия
+* @returns иконка многоточия с текстом для скринридера
+*/
+function BreadcrumbEllipsis({ className, label = texts.more, ...props }) {
+	const classes = cn("flex", "size-5", "items-center", "justify-center", "[&>svg]:size-4", className);
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

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

@@ -0,0 +1,3 @@
+import { BreadcrumbEllipsisPropsT, BreadcrumbItemPropsT, BreadcrumbLinkPropsT, BreadcrumbListPropsT, BreadcrumbPagePropsT, BreadcrumbPropsT, BreadcrumbSeparatorPropsT } from "./types.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";
+export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisPropsT, BreadcrumbItem, type BreadcrumbItemPropsT, BreadcrumbLink, type BreadcrumbLinkPropsT, BreadcrumbList, type BreadcrumbListPropsT, BreadcrumbPage, type BreadcrumbPagePropsT, type BreadcrumbPropsT, BreadcrumbSeparator, type BreadcrumbSeparatorPropsT };

package/dist/components/breadcrumb/index.js

@@ -0,0 +1 @@
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";

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

@@ -0,0 +1,36 @@
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Пропсы навигационной цепочки
+ */
+export type BreadcrumbPropsT = ComponentProps<'nav'> & {
+  /** Название навигации для скринридера (aria-label), по умолчанию «Навигационная цепочка» */
+  label?: string;
+};
+/**
+ * Пропсы списка навигационной цепочки
+ */
+export type BreadcrumbListPropsT = ComponentProps<'ol'>;
+/**
+ * Пропсы пункта навигационной цепочки
+ */
+export type BreadcrumbItemPropsT = ComponentProps<'li'>;
+/**
+ * Пропсы ссылки навигационной цепочки
+ */
+export type BreadcrumbLinkPropsT = useRender.ComponentProps<'a'>;
+/**
+ * Пропсы текущей страницы навигационной цепочки
+ */
+export type BreadcrumbPagePropsT = ComponentProps<'span'>;
+/**
+ * Пропсы разделителя навигационной цепочки
+ */
+export type BreadcrumbSeparatorPropsT = ComponentProps<'li'>;
+/**
+ * Пропсы многоточия навигационной цепочки
+ */
+export type BreadcrumbEllipsisPropsT = ComponentProps<'span'> & {
+  /** Текст для скринридера, по умолчанию «Ещё» */
+  label?: string;
+};

package/dist/components/bubble/bubble.d.ts

@@ -0,0 +1,25 @@
+import { BubbleContentPropsT, BubbleGroupPropsT, BubblePropsT, BubbleReactionsPropsT } from "./types.js";
+/**
+ * Группа пузырей: подряд идущие сообщения одного автора
+ * @param props - пропсы группы
+ * @returns колонка пузырей
+ */
+export declare function BubbleGroup({ className, ...props }: BubbleGroupPropsT): import("react").JSX.Element;
+/**
+ * Пузырь: сообщение в чате
+ * @param props - пропсы пузыря
+ * @returns пузырь
+ */
+export declare function Bubble({ variant, align, className, ...props }: BubblePropsT): import("react").JSX.Element;
+/**
+ * Содержимое пузыря: текст сообщения на цветной подложке
+ * @param props - пропсы содержимого
+ * @returns содержимое или дочерний элемент в его стилях (render)
+ */
+export declare function BubbleContent({ render, className, ...props }: BubbleContentPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Реакции пузыря: эмодзи или кнопка на краю сообщения
+ * @param props - пропсы реакций
+ * @returns плашка реакций
+ */
+export declare function BubbleReactions({ side, align, className, ...props }: BubbleReactionsPropsT): import("react").JSX.Element;

package/dist/components/bubble/bubble.js

@@ -0,0 +1,69 @@
+import { cn } from "../../lib/utils.js";
+import { bubbleReactionsVariants, bubbleVariants } 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/bubble/bubble.tsx
+/**
+* Группа пузырей: подряд идущие сообщения одного автора
+* @param props - пропсы группы
+* @returns колонка пузырей
+*/
+function BubbleGroup({ className, ...props }) {
+	const classes = cn("flex", "min-w-0", "flex-col", "gap-2", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble-group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Пузырь: сообщение в чате
+* @param props - пропсы пузыря
+* @returns пузырь
+*/
+function Bubble({ variant = "default", align = "start", className, ...props }) {
+	const classes = cn(bubbleVariants({ variant }), className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble",
+		"data-variant": variant,
+		"data-align": align,
+		className: classes,
+		...props
+	});
+}
+/**
+* Содержимое пузыря: текст сообщения на цветной подложке
+* @param props - пропсы содержимого
+* @returns содержимое или дочерний элемент в его стилях (render)
+*/
+function BubbleContent({ render, className, ...props }) {
+	const classes = cn("w-fit", "max-w-full", "min-w-0", "overflow-hidden", "rounded-xl", "border", "border-transparent", "px-3", "py-2", "text-sm", "leading-relaxed", "wrap-break-word", "group-data-[align=end]/bubble:self-end", "[button]:cursor-pointer", "[button]:text-left", "[button,a]:transition-colors", "[button,a]:outline-none", "[button,a]:focus-visible:border-ring", "[button,a]:focus-visible:ring-3", "[button,a]:focus-visible:ring-ring/30", className);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "bubble-content",
+			className: classes
+		}, props)
+	});
+}
+/**
+* Реакции пузыря: эмодзи или кнопка на краю сообщения
+* @param props - пропсы реакций
+* @returns плашка реакций
+*/
+function BubbleReactions({ side = "bottom", align = "end", className, ...props }) {
+	const classes = cn(bubbleReactionsVariants({
+		side,
+		align
+	}), className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble-reactions",
+		"data-align": align,
+		"data-side": side,
+		className: classes,
+		...props
+	});
+}
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };

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

@@ -0,0 +1,3 @@
+import { BubbleContentPropsT, BubbleGroupPropsT, BubblePropsT, BubbleReactionsPropsT, bubbleReactionsVariants, bubbleVariants } from "./types.js";
+import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "./bubble.js";
+export { Bubble, BubbleContent, type BubbleContentPropsT, BubbleGroup, type BubbleGroupPropsT, type BubblePropsT, BubbleReactions, type BubbleReactionsPropsT, bubbleReactionsVariants, bubbleVariants };

package/dist/components/bubble/index.js

@@ -0,0 +1,3 @@
+import { bubbleReactionsVariants, bubbleVariants } from "./types.js";
+import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "./bubble.js";
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions, bubbleReactionsVariants, bubbleVariants };