@archytechtor/ui 0.0.0-stage → 0.2.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?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | 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/bottom-nav/bottom-nav.d.ts

@@ -0,0 +1,19 @@
+import { BottomNavActionPropsT, BottomNavItemPropsT, BottomNavPropsT } from "./types.js";
+/**
+ * Нижняя навигация для телефона: пункты разделов и выделенное действие по центру
+ * @param props - пропсы навигации
+ * @returns навигация
+ */
+export declare function BottomNav({ className, position, render, ...props }: BottomNavPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Пункт нижней навигации: иконка и подпись. Ссылку рисуют через render={<a href />}
+ * @param props - пропсы пункта
+ * @returns кнопка или свой элемент в стилях пункта
+ */
+export declare function BottomNavItem({ className, active, render, ...props }: BottomNavItemPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Выделенное действие нижней навигации: круглая кнопка с иконкой, приподнятая над панелью
+ * @param props - пропсы действия
+ * @returns кнопка или свой элемент в стилях действия
+ */
+export declare function BottomNavAction({ className, render, ...props }: BottomNavActionPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/bottom-nav/bottom-nav.js

@@ -0,0 +1,59 @@
+import { cn } from "../../lib/utils.js";
+import { bottomNavActionVariants, bottomNavItemVariants, bottomNavVariants } from "./types.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/bottom-nav/bottom-nav.tsx
+/**
+* Нижняя навигация для телефона: пункты разделов и выделенное действие по центру
+* @param props - пропсы навигации
+* @returns навигация
+*/
+function BottomNav({ className, position = "fixed", render, ...props }) {
+	const classes = cn(bottomNavVariants({ position }), className);
+	return useRender({
+		defaultTagName: "nav",
+		render,
+		props: mergeProps({
+			"data-slot": "bottom-nav",
+			"data-position": position,
+			"className": classes
+		}, props)
+	});
+}
+/**
+* Пункт нижней навигации: иконка и подпись. Ссылку рисуют через render={<a href />}
+* @param props - пропсы пункта
+* @returns кнопка или свой элемент в стилях пункта
+*/
+function BottomNavItem({ className, active = false, render, ...props }) {
+	const classes = cn(bottomNavItemVariants(), className);
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps({
+			"type": render ? void 0 : "button",
+			"data-slot": "bottom-nav-item",
+			"data-active": active || void 0,
+			"aria-current": active ? "page" : void 0,
+			"className": classes
+		}, props)
+	});
+}
+/**
+* Выделенное действие нижней навигации: круглая кнопка с иконкой, приподнятая над панелью
+* @param props - пропсы действия
+* @returns кнопка или свой элемент в стилях действия
+*/
+function BottomNavAction({ className, render, ...props }) {
+	const classes = cn(bottomNavActionVariants(), className);
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps({
+			"type": render ? void 0 : "button",
+			"data-slot": "bottom-nav-action",
+			"className": classes
+		}, props)
+	});
+}
+export { BottomNav, BottomNavAction, BottomNavItem };

package/dist/components/bottom-nav/index.d.ts

@@ -0,0 +1,3 @@
+import { BottomNavActionPropsT, BottomNavItemPropsT, BottomNavPropsT, bottomNavActionVariants, bottomNavItemVariants, bottomNavVariants } from "./types.js";
+import { BottomNav, BottomNavAction, BottomNavItem } from "./bottom-nav.js";
+export { BottomNav, BottomNavAction, type BottomNavActionPropsT, BottomNavItem, type BottomNavItemPropsT, type BottomNavPropsT, bottomNavActionVariants, bottomNavItemVariants, bottomNavVariants };

package/dist/components/bottom-nav/index.js

@@ -0,0 +1,3 @@
+import { bottomNavActionVariants, bottomNavItemVariants, bottomNavVariants } from "./types.js";
+import { BottomNav, BottomNavAction, BottomNavItem } from "./bottom-nav.js";
+export { BottomNav, BottomNavAction, BottomNavItem, bottomNavActionVariants, bottomNavItemVariants, bottomNavVariants };

package/dist/components/bottom-nav/types.d.ts

@@ -0,0 +1,45 @@
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Стили нижней навигации: положение на странице.
+ * Высота 64px плюс безопасная зона снизу (полоска жестов iPhone).
+ */
+export declare const bottomNavVariants: (props?: ({
+  position?: "fixed" | "sticky" | "static" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Стили пункта нижней навигации: иконка над подписью, активный пункт выделен цветом.
+ * Экспортируются, чтобы оформить пунктом другой элемент.
+ */
+export declare const bottomNavItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Стили выделенного действия: круглая кнопка, приподнятая над панелью.
+ * Экспортируются, чтобы оформить действием другой элемент.
+ */
+export declare const bottomNavActionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Положение нижней навигации
+ */
+export type BottomNavVariantsT = VariantProps<typeof bottomNavVariants>;
+/**
+ * Пропсы нижней навигации
+ */
+export type BottomNavPropsT = useRender.ComponentProps<'nav'> & {
+  /**
+   * Положение: fixed — прибита к низу экрана, sticky — прилипает к низу прокручиваемого блока,
+   * static — в потоке страницы. По умолчанию fixed
+   */
+  position?: BottomNavVariantsT['position'];
+};
+/**
+ * Пропсы пункта нижней навигации
+ */
+export type BottomNavItemPropsT = useRender.ComponentProps<'button'> & {
+  /** Текущий раздел: пункт выделен, у элемента aria-current="page" */
+  active?: boolean;
+};
+/**
+ * Пропсы выделенного действия нижней навигации.
+ * В кнопке только иконка, поэтому подпись для скринридера обязательна: aria-label
+ */
+export type BottomNavActionPropsT = useRender.ComponentProps<'button'>;

package/dist/components/bottom-nav/types.js

@@ -0,0 +1,44 @@
+import { cva } from "class-variance-authority";
+// src/components/bottom-nav/types.ts
+/**
+* Стили нижней навигации: положение на странице.
+* Высота 64px плюс безопасная зона снизу (полоска жестов iPhone).
+*/
+const bottomNavVariants = cva(["z-40 flex h-[calc(--spacing(16)+env(safe-area-inset-bottom))] w-full items-stretch gap-1", "border-t bg-background px-2 pb-[env(safe-area-inset-bottom)] text-foreground"], {
+	variants: { position: {
+		fixed: "fixed inset-x-0 bottom-0",
+		sticky: "sticky bottom-0",
+		static: "relative"
+	} },
+	defaultVariants: { position: "fixed" }
+});
+/**
+* Стили пункта нижней навигации: иконка над подписью, активный пункт выделен цветом.
+* Экспортируются, чтобы оформить пунктом другой элемент.
+*/
+const bottomNavItemVariants = cva([
+	"group/bottom-nav-item my-1 flex min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-1",
+	"rounded-lg px-1 text-xs font-medium whitespace-nowrap text-muted-foreground transition-all outline-none select-none",
+	"hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50",
+	"active:not-aria-disabled:translate-y-px data-active:text-foreground",
+	"disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-5"
+]);
+/**
+* Стили выделенного действия: круглая кнопка, приподнятая над панелью.
+* Экспортируются, чтобы оформить действием другой элемент.
+*/
+const bottomNavActionVariants = cva([
+	"flex size-14 shrink-0 cursor-pointer items-center justify-center self-center rounded-full",
+	"-translate-y-4 bg-primary text-primary-foreground shadow-lg ring-4 ring-background",
+	"transition-all outline-none select-none hover:bg-[color-mix(in_oklch,var(--primary),var(--background)_20%)]",
+	"active:scale-95",
+	"focus-visible:ring-ring/50",
+	"disabled:cursor-not-allowed disabled:bg-[color-mix(in_oklch,var(--primary),var(--background)_50%)]",
+	"aria-disabled:cursor-not-allowed aria-disabled:bg-[color-mix(in_oklch,var(--primary),var(--background)_50%)]",
+	"disabled:text-[color-mix(in_oklch,var(--primary-foreground),var(--background)_50%)]",
+	"aria-disabled:text-[color-mix(in_oklch,var(--primary-foreground),var(--background)_50%)]",
+	"disabled:shadow-none aria-disabled:shadow-none",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-6"
+]);
+export { bottomNavActionVariants, bottomNavItemVariants, bottomNavVariants };

package/dist/components/box/box.d.ts

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

package/dist/components/box/box.js

@@ -0,0 +1,26 @@
+import { cn } from "../../lib/utils.js";
+import { boxVariants } from "./types.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/box/box.tsx
+/**
+* Контейнер: ограничивает ширину содержимого, центрирует его и добавляет боковые отступы
+* @param props - пропсы контейнера
+* @returns контейнер или свой элемент в стилях контейнера (render)
+*/
+function Box({ className, size = "xl", padded = true, render, ...props }) {
+	const classes = cn(boxVariants({
+		size,
+		padded
+	}), className);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "box",
+			"data-size": size,
+			"className": classes
+		}, props)
+	});
+}
+export { Box };

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

@@ -0,0 +1,3 @@
+import { BoxPropsT, boxVariants } from "./types.js";
+import { Box } from "./box.js";
+export { Box, type BoxPropsT, boxVariants };

package/dist/components/box/index.js

@@ -0,0 +1,3 @@
+import { boxVariants } from "./types.js";
+import { Box } from "./box.js";
+export { Box, boxVariants };

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

@@ -0,0 +1,23 @@
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Стили контейнера: максимальная ширина по брейкпоинтам Tailwind и боковые отступы.
+ * Экспортируются, чтобы ограничить ширину другого элемента: boxVariants({ size: 'md' }).
+ */
+export declare const boxVariants: (props?: ({
+  size?: "sm" | "lg" | "md" | "xl" | "2xl" | "full" | null | undefined;
+  padded?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Размеры контейнера
+ */
+export type BoxVariantsT = VariantProps<typeof boxVariants>;
+/**
+ * Пропсы контейнера
+ */
+export type BoxPropsT = useRender.ComponentProps<'div'> & {
+  /** Максимальная ширина: sm — 640px, md — 768px, lg — 1024px, xl — 1280px, 2xl — 1536px, full — без ограничения */
+  size?: BoxVariantsT['size'];
+  /** Боковые отступы: 16px на телефоне, 24px от sm, 32px от lg. По умолчанию включены */
+  padded?: boolean;
+};

package/dist/components/box/types.js

@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+// src/components/box/types.ts
+/**
+* Стили контейнера: максимальная ширина по брейкпоинтам Tailwind и боковые отступы.
+* Экспортируются, чтобы ограничить ширину другого элемента: boxVariants({ size: 'md' }).
+*/
+const boxVariants = cva("mx-auto w-full", {
+	variants: {
+		size: {
+			"sm": "max-w-(--breakpoint-sm)",
+			"md": "max-w-(--breakpoint-md)",
+			"lg": "max-w-(--breakpoint-lg)",
+			"xl": "max-w-(--breakpoint-xl)",
+			"2xl": "max-w-(--breakpoint-2xl)",
+			"full": "max-w-none"
+		},
+		padded: {
+			true: "px-4 sm:px-6 lg:px-8",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "xl",
+		padded: true
+	}
+});
+export { boxVariants };

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;