@archytechtor/ui 0.1.0 → 0.2.0

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

@@ -8,7 +8,7 @@ import { useRender } from "@base-ui/react/use-render";
  */
 export declare const attachmentVariants: (props?: ({
   size?: "default" | "sm" | "xs" | null | undefined;
-  orientation?: "horizontal" | "vertical" | null | undefined;
+  orientation?: "vertical" | "horizontal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Стили медиа вложения: иконка или превью изображения

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

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
  * Цвет наведения появляется только у бейджа-ссылки (render={<a />}).
  */
 export declare const badgeVariants: (props?: ({
-  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Варианты оформления бейджа

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/button/types.d.ts

@@ -11,8 +11,8 @@ import { MouseEvent, ReactNode, Ref } from "react";
  * а цвета наведения у каждого варианта возвращаются к обычным.
  */
 export declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-  size?: "default" | "sm" | "xs" | "icon" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+  size?: "default" | "icon" | "sm" | "xs" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Варианты оформления и размеры кнопки
@@ -22,7 +22,7 @@ export type ButtonVariantsT = VariantProps<typeof buttonVariants>;
  * Стили заливки удержания: растёт слева направо поверх кнопки, цвет контрастен варианту
  */
 export declare const buttonHoldFillVariants: (props?: ({
-  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Пропсы кнопки

package/dist/components/button-group/types.d.ts

@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
  * Экспортируются, чтобы оформить группой другой элемент: buttonGroupVariants({ orientation: 'vertical' }).
  */
 export declare const buttonGroupVariants: (props?: ({
-  orientation?: "horizontal" | "vertical" | null | undefined;
+  orientation?: "vertical" | "horizontal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Варианты стилей группы

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

@@ -6,7 +6,7 @@ import { ComponentProps, ReactNode } from "react";
  * Экспортируются, чтобы оформить полем другой элемент: fieldVariants({ orientation: 'horizontal' }).
  */
 export declare const fieldVariants: (props?: ({
-  orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+  orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Варианты стилей поля

package/dist/components/grid/grid.d.ts

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

package/dist/components/grid/grid.js

@@ -0,0 +1,36 @@
+import { cn } from "../../lib/utils.js";
+import { gridColumnsClasses, gridVariants } from "./types.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/grid/grid.tsx
+/**
+* Классы колонок: число — на любой ширине, объект — по брейкпоинтам
+* @param columns - число колонок или колонки по брейкпоинтам
+* @returns классы grid-cols-*
+*/
+function getColumnsClasses(columns) {
+	if (typeof columns === "number") return gridColumnsClasses.base[columns];
+	const classes = [];
+	for (const [breakpoint, count] of Object.entries(columns)) {
+		if (count === void 0) continue;
+		classes.push(gridColumnsClasses[breakpoint][count]);
+	}
+	return classes;
+}
+/**
+* Сетка: элементы по колонкам с отступом между ячейками
+* @param props - пропсы сетки
+* @returns сетка или свой элемент в стилях сетки (render)
+*/
+function Grid({ className, columns = 1, gap = 4, render, ...props }) {
+	const classes = cn(gridVariants({ gap }), getColumnsClasses(columns), className);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "grid",
+			"className": classes
+		}, props)
+	});
+}
+export { Grid };

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

@@ -0,0 +1,3 @@
+import { GridBreakpointT, GridColumnsCountT, GridColumnsResponsiveT, GridPropsT, gridColumnsClasses, gridVariants } from "./types.js";
+import { Grid } from "./grid.js";
+export { Grid, type GridBreakpointT, type GridColumnsCountT, type GridColumnsResponsiveT, type GridPropsT, gridColumnsClasses, gridVariants };

package/dist/components/grid/index.js

@@ -0,0 +1,3 @@
+import { gridColumnsClasses, gridVariants } from "./types.js";
+import { Grid } from "./grid.js";
+export { Grid, gridColumnsClasses, gridVariants };

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

@@ -0,0 +1,35 @@
+import { GapT } from "../stack/types.js";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Число колонок сетки
+ */
+export type GridColumnsCountT = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/**
+ * Брейкпоинт Tailwind; base — без брейкпоинта, на любой ширине
+ */
+export type GridBreakpointT = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Число колонок по брейкпоинтам: { base: 1, md: 2, lg: 4 }
+ */
+export type GridColumnsResponsiveT = Partial<Record<GridBreakpointT, GridColumnsCountT>>;
+/**
+ * Классы колонок по брейкпоинтам.
+ * Перечислены целиком, чтобы Tailwind потребителя их увидел.
+ */
+export declare const gridColumnsClasses: Record<GridBreakpointT, Record<GridColumnsCountT, string>>;
+/**
+ * Стили сетки: отступ между ячейками. Колонки — gridColumnsClasses.
+ * Экспортируются, чтобы разложить сеткой другой элемент: gridVariants({ gap: 4 }).
+ */
+export declare const gridVariants: (props?: ({
+  gap?: 0 | 1 | 2 | 0.5 | 1.5 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Пропсы сетки
+ */
+export type GridPropsT = useRender.ComponentProps<'div'> & {
+  /** Число колонок от 1 до 12 или по брейкпоинтам: { base: 1, md: 2, lg: 4 }. По умолчанию 1 */
+  columns?: GridColumnsCountT | GridColumnsResponsiveT;
+  /** Отступ между ячейками по шкале Tailwind: 4 → 16px. По умолчанию 4 */
+  gap?: GapT;
+};

package/dist/components/grid/types.js

@@ -0,0 +1,102 @@
+import { gapClasses } from "../stack/types.js";
+import { cva } from "class-variance-authority";
+// src/components/grid/types.ts
+/**
+* Классы колонок по брейкпоинтам.
+* Перечислены целиком, чтобы Tailwind потребителя их увидел.
+*/
+const gridColumnsClasses = {
+	"base": {
+		1: "grid-cols-1",
+		2: "grid-cols-2",
+		3: "grid-cols-3",
+		4: "grid-cols-4",
+		5: "grid-cols-5",
+		6: "grid-cols-6",
+		7: "grid-cols-7",
+		8: "grid-cols-8",
+		9: "grid-cols-9",
+		10: "grid-cols-10",
+		11: "grid-cols-11",
+		12: "grid-cols-12"
+	},
+	"sm": {
+		1: "sm:grid-cols-1",
+		2: "sm:grid-cols-2",
+		3: "sm:grid-cols-3",
+		4: "sm:grid-cols-4",
+		5: "sm:grid-cols-5",
+		6: "sm:grid-cols-6",
+		7: "sm:grid-cols-7",
+		8: "sm:grid-cols-8",
+		9: "sm:grid-cols-9",
+		10: "sm:grid-cols-10",
+		11: "sm:grid-cols-11",
+		12: "sm:grid-cols-12"
+	},
+	"md": {
+		1: "md:grid-cols-1",
+		2: "md:grid-cols-2",
+		3: "md:grid-cols-3",
+		4: "md:grid-cols-4",
+		5: "md:grid-cols-5",
+		6: "md:grid-cols-6",
+		7: "md:grid-cols-7",
+		8: "md:grid-cols-8",
+		9: "md:grid-cols-9",
+		10: "md:grid-cols-10",
+		11: "md:grid-cols-11",
+		12: "md:grid-cols-12"
+	},
+	"lg": {
+		1: "lg:grid-cols-1",
+		2: "lg:grid-cols-2",
+		3: "lg:grid-cols-3",
+		4: "lg:grid-cols-4",
+		5: "lg:grid-cols-5",
+		6: "lg:grid-cols-6",
+		7: "lg:grid-cols-7",
+		8: "lg:grid-cols-8",
+		9: "lg:grid-cols-9",
+		10: "lg:grid-cols-10",
+		11: "lg:grid-cols-11",
+		12: "lg:grid-cols-12"
+	},
+	"xl": {
+		1: "xl:grid-cols-1",
+		2: "xl:grid-cols-2",
+		3: "xl:grid-cols-3",
+		4: "xl:grid-cols-4",
+		5: "xl:grid-cols-5",
+		6: "xl:grid-cols-6",
+		7: "xl:grid-cols-7",
+		8: "xl:grid-cols-8",
+		9: "xl:grid-cols-9",
+		10: "xl:grid-cols-10",
+		11: "xl:grid-cols-11",
+		12: "xl:grid-cols-12"
+	},
+	"2xl": {
+		1: "2xl:grid-cols-1",
+		2: "2xl:grid-cols-2",
+		3: "2xl:grid-cols-3",
+		4: "2xl:grid-cols-4",
+		5: "2xl:grid-cols-5",
+		6: "2xl:grid-cols-6",
+		7: "2xl:grid-cols-7",
+		8: "2xl:grid-cols-8",
+		9: "2xl:grid-cols-9",
+		10: "2xl:grid-cols-10",
+		11: "2xl:grid-cols-11",
+		12: "2xl:grid-cols-12"
+	}
+};
+/**
+* Стили сетки: отступ между ячейками. Колонки — gridColumnsClasses.
+* Экспортируются, чтобы разложить сеткой другой элемент: gridVariants({ gap: 4 }).
+*/
+const gridVariants = cva("grid", {
+	variants: { gap: gapClasses },
+	defaultVariants: { gap: 4 }
+});
+export { gridColumnsClasses, gridVariants };

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

@@ -14,7 +14,7 @@ export declare const itemVariants: (props?: ({
  * Стили медиа элемента: без оформления, иконка или изображение
  */
 export declare const itemMediaVariants: (props?: ({
-  variant?: "image" | "default" | "icon" | null | undefined;
+  variant?: "default" | "image" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Варианты оформления и размеры элемента

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

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
  * Ссылка (render={<a />}) подчёркнута и темнеет при наведении
  */
 export declare const markerVariants: (props?: ({
-  variant?: "separator" | "default" | "border" | null | undefined;
+  variant?: "default" | "separator" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Варианты оформления отметки

package/dist/components/number-stepper/types.d.ts

@@ -8,7 +8,7 @@ import { NumberField } from "@base-ui/react/number-field";
 export declare const numberStepperVariants: (props?: ({
   variant?: "outline" | "ghost" | "pill" | null | undefined;
   size?: "default" | "sm" | "lg" | null | undefined;
-  orientation?: "horizontal" | "vertical" | null | undefined;
+  orientation?: "vertical" | "horizontal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Стили кнопок степпера: «−» и «+» (в вертикальном — стрелки)
@@ -16,7 +16,7 @@ export declare const numberStepperVariants: (props?: ({
 export declare const numberStepperButtonVariants: (props?: ({
   variant?: "outline" | "ghost" | "pill" | null | undefined;
   size?: "default" | "sm" | "lg" | null | undefined;
-  orientation?: "horizontal" | "vertical" | null | undefined;
+  orientation?: "vertical" | "horizontal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Варианты оформления, размеры и ориентации степпера

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

@@ -0,0 +1,3 @@
+import { GapT, StackPropsT, gapClasses, stackVariants } from "./types.js";
+import { Stack } from "./stack.js";
+export { type GapT, Stack, type StackPropsT, gapClasses, stackVariants };

package/dist/components/stack/index.js

@@ -0,0 +1,3 @@
+import { gapClasses, stackVariants } from "./types.js";
+import { Stack } from "./stack.js";
+export { Stack, gapClasses, stackVariants };

package/dist/components/stack/stack.d.ts

@@ -0,0 +1,7 @@
+import { StackPropsT } from "./types.js";
+/**
+ * Стек: элементы в столбик или в строку с отступом между ними
+ * @param props - пропсы стека
+ * @returns стек или свой элемент в стилях стека (render)
+ */
+export declare function Stack({ className, direction, gap, align, justify, wrap, render, ...props }: StackPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/stack/stack.js

@@ -0,0 +1,29 @@
+import { cn } from "../../lib/utils.js";
+import { stackVariants } from "./types.js";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/stack/stack.tsx
+/**
+* Стек: элементы в столбик или в строку с отступом между ними
+* @param props - пропсы стека
+* @returns стек или свой элемент в стилях стека (render)
+*/
+function Stack({ className, direction = "column", gap = 2, align = "stretch", justify = "start", wrap = false, render, ...props }) {
+	const classes = cn(stackVariants({
+		direction,
+		gap,
+		align,
+		justify,
+		wrap
+	}), className);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "stack",
+			"data-direction": direction,
+			"className": classes
+		}, props)
+	});
+}
+export { Stack };