@archytechtor/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,186 @@
+import { ButtonPropsT } from "../button/types.js";
+import { SeparatorPropsT } from "../separator/types.js";
+import { InputPropsT } from "../input/types.js";
+import { TooltipContentPropsT } from "../tooltip/types.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Состояние боковой панели
+ * @property state - expanded — раскрыта, collapsed — свёрнута
+ * @property open - раскрыта на десктопе
+ * @property setOpen - раскрыть или свернуть на десктопе
+ * @property openMobile - открыта шторка на мобильном
+ * @property setOpenMobile - открыть или закрыть шторку
+ * @property isMobile - мобильный экран
+ * @property toggleSidebar - переключить панель или шторку
+ */
+export interface SidebarContextI {
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+}
+/**
+ * Пропсы провайдера
+ */
+export type SidebarProviderPropsT = ComponentProps<'div'> & {
+  /** Панель раскрыта при первом рендере. По умолчанию true */
+  defaultOpen?: boolean;
+  /** Панель раскрыта — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Панель раскрыли или свернули: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Сторона экрана для панели
+ */
+export type SidebarSideT = 'left' | 'right';
+/**
+ * Вид панели: sidebar — во всю высоту, floating — парящая карточка, inset — содержимое в карточке
+ */
+export type SidebarVariantT = 'sidebar' | 'floating' | 'inset';
+/**
+ * Как сворачивается панель: offcanvas — уезжает за край, icon — до иконок, none — не сворачивается
+ */
+export type SidebarCollapsibleT = 'offcanvas' | 'icon' | 'none';
+/**
+ * Пропсы панели
+ */
+export type SidebarPropsT = ComponentProps<'div'> & {
+  /** Сторона экрана. По умолчанию left */
+  side?: SidebarSideT;
+  /** Вид: sidebar, floating или inset. По умолчанию sidebar */
+  variant?: SidebarVariantT;
+  /** Как сворачивается: offcanvas, icon или none. По умолчанию offcanvas */
+  collapsible?: SidebarCollapsibleT;
+  /** Заголовок шторки на мобильном для скринридеров. По умолчанию «Боковая панель» */
+  mobileTitle?: string;
+  /** Описание шторки на мобильном для скринридеров */
+  mobileDescription?: string;
+};
+/**
+ * Пропсы кнопки переключения
+ */
+export type SidebarTriggerPropsT = ButtonPropsT & {
+  /** Подпись для скринридеров. По умолчанию «Переключить боковую панель» */
+  label?: string;
+};
+/**
+ * Пропсы полосы у края панели
+ */
+export type SidebarRailPropsT = ComponentProps<'button'> & {
+  /** Подпись для скринридеров и всплывающая подсказка. По умолчанию «Переключить боковую панель» */
+  label?: string;
+};
+/**
+ * Пропсы основной области
+ */
+export type SidebarInsetPropsT = ComponentProps<'main'>;
+/**
+ * Пропсы поля в панели
+ */
+export type SidebarInputPropsT = InputPropsT;
+/**
+ * Пропсы шапки панели
+ */
+export type SidebarHeaderPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы подвала панели
+ */
+export type SidebarFooterPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы разделителя панели
+ */
+export type SidebarSeparatorPropsT = SeparatorPropsT;
+/**
+ * Пропсы содержимого панели
+ */
+export type SidebarContentPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы группы
+ */
+export type SidebarGroupPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы подписи группы
+ */
+export type SidebarGroupLabelPropsT = useRender.ComponentProps<'div'> & {};
+/**
+ * Пропсы действия группы
+ */
+export type SidebarGroupActionPropsT = useRender.ComponentProps<'button'> & {};
+/**
+ * Пропсы содержимого группы
+ */
+export type SidebarGroupContentPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы меню
+ */
+export type SidebarMenuPropsT = ComponentProps<'ul'>;
+/**
+ * Пропсы пункта меню
+ */
+export type SidebarMenuItemPropsT = ComponentProps<'li'>;
+/**
+ * Стили кнопки пункта меню: вид и размер.
+ * Экспортируются, чтобы оформить так же другой элемент
+ */
+export declare const sidebarMenuButtonVariants: (props?: ({
+  variant?: "default" | "outline" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты стилей кнопки пункта меню
+ */
+export type SidebarMenuButtonVariantsT = VariantProps<typeof sidebarMenuButtonVariants>;
+/**
+ * Пропсы кнопки пункта меню
+ */
+export type SidebarMenuButtonPropsT = useRender.ComponentProps<'button'> & {
+  /** Текущий раздел: пункт подсвечен */
+  isActive?: boolean;
+  /** Подсказка, когда панель свёрнута до иконок: текст или пропсы TooltipContent */
+  tooltip?: string | TooltipContentPropsT;
+  /** Вид: default или outline — с рамкой */
+  variant?: SidebarMenuButtonVariantsT['variant'];
+  /** Размер: default — 32px, sm — 28px, lg — 48px */
+  size?: SidebarMenuButtonVariantsT['size'];
+};
+/**
+ * Пропсы действия пункта меню
+ */
+export type SidebarMenuActionPropsT = useRender.ComponentProps<'button'> & {
+  /** Показывать только при наведении на пункт */
+  showOnHover?: boolean;
+};
+/**
+ * Пропсы счётчика пункта меню
+ */
+export type SidebarMenuBadgePropsT = ComponentProps<'div'>;
+/**
+ * Пропсы заглушки пункта меню
+ */
+export type SidebarMenuSkeletonPropsT = ComponentProps<'div'> & {
+  /** Показать заглушку иконки */
+  showIcon?: boolean;
+};
+/**
+ * Пропсы подменю
+ */
+export type SidebarMenuSubPropsT = ComponentProps<'ul'>;
+/**
+ * Пропсы пункта подменю
+ */
+export type SidebarMenuSubItemPropsT = ComponentProps<'li'>;
+/**
+ * Пропсы кнопки подменю
+ */
+export type SidebarMenuSubButtonPropsT = useRender.ComponentProps<'a'> & {
+  /** Размер текста: md — 14px, sm — 12px. По умолчанию md */
+  size?: 'sm' | 'md';
+  /** Текущий раздел: пункт подсвечен */
+  isActive?: boolean;
+};

package/dist/components/sidebar/types.js

@@ -0,0 +1,42 @@
+import { cva } from "class-variance-authority";
+// src/components/sidebar/types.ts
+/**
+* Стили кнопки пункта меню: вид и размер.
+* Экспортируются, чтобы оформить так же другой элемент
+*/
+const sidebarMenuButtonVariants = cva([
+	"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm",
+	"ring-sidebar-ring outline-hidden transition-[width,height,padding] focus-visible:ring-2",
+	"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+	"active:bg-sidebar-accent active:text-sidebar-accent-foreground",
+	"data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground",
+	"data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground",
+	"group-has-data-[sidebar=menu-action]/menu-item:pr-8",
+	"group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2!",
+	"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+	"[&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+	"group-data-[collapsible=icon]:[&:not(:has(svg,img,[data-slot=avatar]))]:justify-center",
+	"group-data-[collapsible=icon]:[&:not(:has(svg,img,[data-slot=avatar]))]:px-0!",
+	"group-data-[collapsible=icon]:[&:not(:has(svg,img,[data-slot=avatar]))_span]:w-[1ch]",
+	"group-data-[collapsible=icon]:[&:not(:has(svg,img,[data-slot=avatar]))_span]:overflow-hidden",
+	"group-data-[collapsible=icon]:[&:not(:has(svg,img,[data-slot=avatar]))_span]:text-clip!",
+	"group-data-[collapsible=icon]:[&:not(:has(svg,img,[data-slot=avatar]))_span]:font-medium",
+	"group-data-[collapsible=icon]:[&:not(:has(svg,img,[data-slot=avatar]))_span~span]:hidden"
+], {
+	variants: {
+		variant: {
+			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+			outline: ["bg-background shadow-[0_0_0_1px_var(--sidebar-border)]", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"]
+		},
+		size: {
+			default: "h-8 text-sm",
+			sm: "h-7 text-xs",
+			lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+export { sidebarMenuButtonVariants };

package/dist/components/sidebar/use-mobile.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+// src/components/sidebar/use-mobile.ts
+/** Ширина экрана, с которой начинается десктоп, px */
+const MOBILE_BREAKPOINT = 768;
+/**
+* Экран уже 768px: боковая панель открывается шторкой
+* @returns мобильный ли экран; при первом рендере на сервере — false
+*/
+function useIsMobile() {
+	const [isMobile, setIsMobile] = useState(void 0);
+	useEffect(() => {
+		const query = window.matchMedia(`(max-width: 767px)`);
+		/** Ширина экрана изменилась */
+		const updateMobile = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		query.addEventListener("change", updateMobile);
+		updateMobile();
+		return () => query.removeEventListener("change", updateMobile);
+	}, []);
+	return Boolean(isMobile);
+}
+export { useIsMobile };

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

@@ -0,0 +1,3 @@
+import { SkeletonPropsT } from "./types.js";
+import { Skeleton } from "./skeleton.js";
+export { Skeleton, type SkeletonPropsT };

package/dist/components/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from "./skeleton.js";

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,8 @@
+import { SkeletonPropsT } from "./types.js";
+/**
+ * Заглушка: пульсирующий блок на месте контента, пока он загружается.
+ * Размер и форма задаются классами: className={'h-4 w-[250px]'}, className={'size-10 rounded-full'}
+ * @param props - пропсы заглушки
+ * @returns блок-заглушка
+ */
+export declare function Skeleton({ className, ...props }: SkeletonPropsT): import("react").JSX.Element;

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,18 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/skeleton/skeleton.tsx
+/**
+* Заглушка: пульсирующий блок на месте контента, пока он загружается.
+* Размер и форма задаются классами: className={'h-4 w-[250px]'}, className={'size-10 rounded-full'}
+* @param props - пропсы заглушки
+* @returns блок-заглушка
+*/
+function Skeleton({ className, ...props }) {
+	const classes = cn("animate-pulse", "rounded-md", "bg-muted", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: classes,
+		...props
+	});
+}
+export { Skeleton };

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

@@ -0,0 +1,5 @@
+import { ComponentProps } from "react";
+/**
+ * Пропсы заглушки
+ */
+export type SkeletonPropsT = ComponentProps<'div'>;

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

@@ -0,0 +1,3 @@
+import { SliderPropsT } from "./types.js";
+import { Slider } from "./slider.js";
+export { Slider, type SliderPropsT };

package/dist/components/slider/index.js

@@ -0,0 +1 @@
+export { Slider } from "./slider.js";

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,7 @@
+import { SliderPropsT } from "./types.js";
+/**
+ * Слайдер: выбор значения или диапазона перетаскиванием бегунка
+ * @param props - пропсы слайдера
+ * @returns слайдер с бегунками по числу значений
+ */
+export declare function Slider({ className, defaultValue, value, min, max, orientation, thumbLabels, 'aria-label': ariaLabel, onValueChange, onValueCommit, ...props }: SliderPropsT): import("react").JSX.Element;

package/dist/components/slider/slider.js

@@ -0,0 +1,106 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Slider } from "@base-ui/react/slider";
+// src/components/slider/slider.tsx
+/** Подписи бегунков диапазона: «Минимум» и «Максимум» */
+const RANGE_THUMB_LABELS = [texts.minimum, texts.maximum];
+/**
+* Подпись бегунка для скринридера по умолчанию
+* @param index - номер бегунка с нуля
+* @param count - сколько всего бегунков
+* @param sliderLabel - aria-label слайдера: подпись одиночного бегунка
+* @returns подпись бегунка
+*/
+function getThumbLabel(index, count, sliderLabel) {
+	if (count === 2) return RANGE_THUMB_LABELS[index];
+	if (count > 2) return `Значение ${index + 1} из ${count}`;
+	return sliderLabel;
+}
+/**
+* Значение слайдера в виде массива
+* @param value - число или массив
+* @returns массив значений
+*/
+function toArray(value) {
+	if (typeof value === "number") return [value];
+	return [...value];
+}
+/** Классы корня */
+const rootClasses = "data-horizontal:w-full data-vertical:h-full";
+/** Классы области перетаскивания */
+const controlClasses = cn("relative", "flex", "w-full", "touch-none", "items-center", "select-none", "data-disabled:opacity-50", "data-vertical:h-full", "data-vertical:min-h-40", "data-vertical:w-auto", "data-vertical:flex-col");
+/** Классы дорожки */
+const trackClasses = cn("relative", "grow", "overflow-hidden", "rounded-full", "bg-muted", "data-horizontal:h-1", "data-horizontal:w-full", "data-vertical:h-full", "data-vertical:w-1");
+/** Классы заполненной части дорожки */
+const rangeClasses = cn("absolute", "bg-primary", "select-none", "data-horizontal:h-full", "data-vertical:w-full");
+/**
+* Классы бегунка. Белая заливка в обеих темах: bg-background в светлой, bg-foreground в тёмной
+* (временная замена отдельному токену)
+*/
+const thumbClasses = cn("relative", "block", "size-3", "shrink-0", "rounded-full", "border", "border-ring", "bg-background", "dark:bg-foreground", "ring-ring/50", "transition-[color,box-shadow]", "select-none", "after:absolute", "after:-inset-2", "hover:ring-3", "focus-visible:ring-3", "focus-visible:outline-hidden", "active:ring-3", "data-disabled:pointer-events-none", "data-disabled:opacity-50");
+/**
+* Слайдер: выбор значения или диапазона перетаскиванием бегунка
+* @param props - пропсы слайдера
+* @returns слайдер с бегунками по числу значений
+*/
+function Slider$1({ className, defaultValue, value, min = 0, max = 100, orientation = "horizontal", thumbLabels, "aria-label": ariaLabel, onValueChange, onValueCommit, ...props }) {
+	const values = useMemo(() => {
+		if (Array.isArray(value)) return value;
+		if (Array.isArray(defaultValue)) return defaultValue;
+		return [min];
+	}, [
+		value,
+		defaultValue,
+		min
+	]);
+	const classes = cn(rootClasses, className);
+	const thumbs = [];
+	for (let index = 0; index < values.length; index++) {
+		const label = thumbLabels?.[index] ?? getThumbLabel(index, values.length, ariaLabel);
+		thumbs.push(/* @__PURE__ */ jsx(Slider.Thumb, {
+			"data-slot": "slider-thumb",
+			"aria-label": label,
+			className: thumbClasses
+		}, index));
+	}
+	/**
+	* Значение меняется: наружу всегда массив
+	* @param next - значение от Base UI: число или массив
+	*/
+	const handleValueChange = (next) => onValueChange?.(toArray(next));
+	/**
+	* Значение зафиксировано: наружу всегда массив
+	* @param next - значение от Base UI: число или массив
+	*/
+	const handleValueCommitted = (next) => onValueCommit?.(toArray(next));
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		"data-slot": "slider",
+		defaultValue,
+		value,
+		min,
+		max,
+		orientation,
+		thumbAlignment: "edge",
+		"aria-label": ariaLabel,
+		className: classes,
+		onValueChange: handleValueChange,
+		onValueCommitted: handleValueCommitted,
+		...props,
+		children: /* @__PURE__ */ jsxs(Slider.Control, {
+			"data-slot": "slider-control",
+			className: controlClasses,
+			children: [/* @__PURE__ */ jsx(Slider.Track, {
+				"data-slot": "slider-track",
+				className: trackClasses,
+				children: /* @__PURE__ */ jsx(Slider.Indicator, {
+					"data-slot": "slider-range",
+					className: rangeClasses
+				})
+			}), thumbs]
+		})
+	});
+}
+export { Slider$1 as Slider };

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

@@ -0,0 +1,39 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { Slider } from "@base-ui/react/slider";
+/**
+ * Пропсы слайдера
+ */
+export type SliderPropsT = PartPropsT<Omit<Slider.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'orientation' | 'children'>> & {
+  /** Значения бегунков — контролируемый режим, вместе с onValueChange. Сколько значений, столько бегунков */
+  value?: number[];
+  /** Значения бегунков при первом рендере — неконтролируемый режим */
+  defaultValue?: number[];
+  /** Значение меняется во время перетаскивания или нажатия стрелок */
+  onValueChange?: (value: number[]) => void;
+  /** Значение зафиксировано: бегунок отпустили или нажали клавишу */
+  onValueCommit?: (value: number[]) => void;
+  /** Минимальное значение */
+  min?: number;
+  /** Максимальное значение */
+  max?: number;
+  /** Шаг изменения значения */
+  step?: number;
+  /** Шаг при Page Up / Page Down и Shift + стрелка. По умолчанию 10 */
+  largeStep?: number;
+  /** Минимальное расстояние между бегунками в шагах */
+  minStepsBetweenValues?: number;
+  /** Ориентация: горизонтальная или вертикальная */
+  orientation?: 'horizontal' | 'vertical';
+  /** Отключённое состояние: значение нельзя изменить */
+  disabled?: boolean;
+  /** Имя поля для отправки формы */
+  name?: string;
+  /** id формы, к которой относится поле, если слайдер вне её разметки */
+  form?: string;
+  /** Бегунки при встрече: push — толкают друг друга, swap — меняются местами, none — останавливаются */
+  thumbCollisionBehavior?: 'push' | 'swap' | 'none';
+  /** Подпись слайдера для скринридера; у одиночного бегунка становится и его подписью */
+  'aria-label'?: string;
+  /** Подписи бегунков для скринридера по порядку. По умолчанию «Минимум» и «Максимум» у диапазона, «Значение 1 из 3» у трёх и более */
+  thumbLabels?: string[];
+};

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

@@ -0,0 +1,3 @@
+import { SpinnerPropsT } from "./types.js";
+import { Spinner } from "./spinner.js";
+export { Spinner, type SpinnerPropsT };

package/dist/components/spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from "./spinner.js";

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,7 @@
+import { SpinnerPropsT } from "./types.js";
+/**
+ * Спиннер: индикатор загрузки. Размер задаётся классом: className={'size-6'}
+ * @param props - пропсы спиннера
+ * @returns вращающаяся иконка с role="status"
+ */
+export declare function Spinner({ className, 'aria-label': ariaLabel, ...props }: SpinnerPropsT): import("react").JSX.Element;

package/dist/components/spinner/spinner.js

@@ -0,0 +1,21 @@
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { Loader2Icon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+// src/components/spinner/spinner.tsx
+/**
+* Спиннер: индикатор загрузки. Размер задаётся классом: className={'size-6'}
+* @param props - пропсы спиннера
+* @returns вращающаяся иконка с role="status"
+*/
+function Spinner({ className, "aria-label": ariaLabel = texts.loading, ...props }) {
+	const classes = cn("size-4", "animate-spin", className);
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		"data-slot": "spinner",
+		role: "status",
+		"aria-label": ariaLabel,
+		className: classes,
+		...props
+	});
+}
+export { Spinner };

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

@@ -0,0 +1,8 @@
+import { ComponentProps } from "react";
+/**
+ * Пропсы спиннера
+ */
+export type SpinnerPropsT = Omit<ComponentProps<'svg'>, 'aria-label'> & {
+  /** Текст для скринридера, по умолчанию «Загрузка…» */
+  'aria-label'?: 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 };

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

@@ -0,0 +1,56 @@
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Отступы между элементами по шкале Tailwind: 4 → gap-4 (16px).
+ * Классы перечислены целиком, чтобы Tailwind потребителя их увидел.
+ */
+export declare const gapClasses: {
+  0: string;
+  0.5: string;
+  1: string;
+  1.5: string;
+  2: string;
+  2.5: string;
+  3: string;
+  4: string;
+  5: string;
+  6: string;
+  8: string;
+  10: string;
+  12: string;
+  16: string;
+};
+/**
+ * Стили стека: направление, отступ, выравнивание и перенос.
+ * Экспортируются, чтобы разложить стеком другой элемент: stackVariants({ direction: 'row' }).
+ */
+export declare const stackVariants: (props?: ({
+  direction?: "row" | "column" | null | undefined;
+  gap?: 0 | 1 | 2 | 0.5 | 1.5 | 2.5 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
+  align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
+  wrap?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Направление, отступ, выравнивание и перенос стека
+ */
+export type StackVariantsT = VariantProps<typeof stackVariants>;
+/**
+ * Отступ между элементами по шкале Tailwind
+ */
+export type GapT = keyof typeof gapClasses;
+/**
+ * Пропсы стека
+ */
+export type StackPropsT = useRender.ComponentProps<'div'> & {
+  /** Направление: column — сверху вниз, row — слева направо */
+  direction?: StackVariantsT['direction'];
+  /** Отступ между элементами по шкале Tailwind: 4 → 16px. По умолчанию 2 (8px) */
+  gap?: GapT;
+  /** Выравнивание поперёк направления: по началу, центру, концу, растянуть или по базовой линии текста */
+  align?: StackVariantsT['align'];
+  /** Распределение вдоль направления: по началу, центру, концу или с равными промежутками */
+  justify?: StackVariantsT['justify'];
+  /** Переносить элементы на новую строку, если не помещаются */
+  wrap?: boolean;
+};