@archytechtor/ui 0.0.0-stage → 0.1.0

package/dist/components/date-picker/types.d.ts

@@ -0,0 +1,38 @@
+import { ButtonPropsT } from "../button/types.js";
+import { FloatingAlignT } from "../../lib/floating.js";
+import { Matcher } from "react-day-picker";
+/**
+ * Пропсы выбора даты
+ */
+export type DatePickerPropsT = Omit<ButtonPropsT, 'value' | 'defaultValue' | 'onChange' | 'children' | 'variant' | 'size'> & {
+  /** Выбранная дата — контролируемый режим, вместе с onValueChange. null — дата не выбрана */
+  value?: Date | null;
+  /** Дата при первом рендере — неконтролируемый режим */
+  defaultValue?: Date | null;
+  /** Выбрана другая дата или выбор снят: новая дата или null */
+  onValueChange?: (value: Date | null) => void;
+  /** Календарь открыт — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Календарь открыт при первом рендере */
+  defaultOpen?: boolean;
+  /** Календарь открыли или закрыли: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+  /** Текст, пока дата не выбрана. По умолчанию «Выберите дату» */
+  placeholder?: string;
+  /** Формат даты в кнопке, как в date-fns. По умолчанию dd.MM.yyyy */
+  dateFormat?: string;
+  /** Закрывать календарь после выбора даты. По умолчанию true */
+  closeOnSelect?: boolean;
+  /** label — заголовок месяца, dropdown — списки месяца и года. По умолчанию label */
+  captionLayout?: 'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years';
+  /** Первый месяц, до которого можно листать */
+  startMonth?: Date;
+  /** Последний месяц, до которого можно листать */
+  endMonth?: Date;
+  /** Недоступные даты: дата, массив, { before }, { after }, { dayOfWeek } или функция */
+  disabledDates?: Matcher | Matcher[];
+  /** Выравнивание календаря относительно кнопки. По умолчанию start */
+  align?: FloatingAlignT;
+  /** Классы окна с календарём */
+  contentClassName?: string;
+};

package/dist/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,7 @@
+import { DateRangePickerPropsT } from "./types.js";
+/**
+ * Выбор периода: кнопка с датами начала и конца открывает календарь на два месяца
+ * @param props - пропсы; остальные пропсы уходят на кнопку (id, aria-invalid, disabled)
+ * @returns окно с календарём
+ */
+export declare function DateRangePicker({ value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, placeholder, dateFormat, numberOfMonths, closeOnSelect, min, max, startMonth, endMonth, disabledDates, align, className, contentClassName, ...props }: DateRangePickerPropsT): import("react").JSX.Element;

package/dist/components/date-range-picker/date-range-picker.js

@@ -0,0 +1,89 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { DATE_FORMAT, texts } from "../../lib/locale.js";
+import { formatDate } from "../../lib/format.js";
+import { Button } from "../button/button.js";
+import { Calendar } from "../calendar/calendar.js";
+import { useControllableState } from "../../lib/use-controllable-state.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { CalendarIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/date-range-picker/date-range-picker.tsx
+/**
+* Текст периода: «20.01.2026 – 09.02.2026» или только начало
+* @param range - период
+* @param dateFormat - формат дат
+* @returns текст или null, если начало не выбрано
+*/
+function formatRange(range, dateFormat) {
+	if (!range?.from) return null;
+	const from = formatDate(range.from, dateFormat);
+	if (!range.to) return from;
+	return `${from} – ${formatDate(range.to, dateFormat)}`;
+}
+/**
+* Выбор периода: кнопка с датами начала и конца открывает календарь на два месяца
+* @param props - пропсы; остальные пропсы уходят на кнопку (id, aria-invalid, disabled)
+* @returns окно с календарём
+*/
+function DateRangePicker({ value, defaultValue = null, onValueChange, open, defaultOpen = false, onOpenChange, placeholder = texts.pickDateRange, dateFormat = DATE_FORMAT, numberOfMonths = 2, closeOnSelect = false, min, max, startMonth, endMonth, disabledDates, align = "start", className, contentClassName, ...props }) {
+	const [range, setRange] = useControllableState({
+		prop: value,
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		caller: "DateRangePicker"
+	});
+	const [isOpen, setOpen] = useControllableState({
+		prop: open,
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		caller: "DateRangePicker"
+	});
+	const text = formatRange(range, dateFormat);
+	const isEmpty = text === null;
+	const label = text ?? placeholder;
+	const selected = range ?? void 0;
+	const classes = cn("w-60", "justify-start", "px-2.5", "text-left", "font-normal", "data-[empty=true]:text-muted-foreground", className);
+	const contentClasses = cn("w-auto", "overflow-hidden", "p-0", contentClassName);
+	/**
+	* Изменился период в календаре: сохранить и закрыть, если выбраны обе даты
+	* @param next - новый период или undefined, если выбор снят
+	*/
+	const selectRange = (next) => {
+		setRange(next ?? null);
+		if (closeOnSelect && next?.from && next.to) setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: isOpen,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				"data-slot": "date-range-picker",
+				"data-empty": isEmpty,
+				variant: "outline",
+				className: classes,
+				...props
+			}),
+			children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: contentClasses,
+			align,
+			children: /* @__PURE__ */ jsx(Calendar, {
+				mode: "range",
+				selected,
+				onSelect: selectRange,
+				defaultMonth: selected?.from,
+				numberOfMonths,
+				min,
+				max,
+				startMonth,
+				endMonth,
+				disabled: disabledDates
+			})
+		})]
+	});
+}
+export { DateRangePicker };

package/dist/components/date-range-picker/index.d.ts

@@ -0,0 +1,3 @@
+import { DateRangePickerPropsT } from "./types.js";
+import { DateRangePicker } from "./date-range-picker.js";
+export { DateRangePicker, type DateRangePickerPropsT };

package/dist/components/date-range-picker/index.js

@@ -0,0 +1 @@
+export { DateRangePicker } from "./date-range-picker.js";

package/dist/components/date-range-picker/types.d.ts

@@ -0,0 +1,43 @@
+import { ButtonPropsT } from "../button/types.js";
+import { CalendarRangeT } from "../calendar/types.js";
+import { FloatingAlignT } from "../../lib/floating.js";
+import { Matcher } from "react-day-picker";
+/**
+ * Пропсы выбора периода
+ */
+export type DateRangePickerPropsT = Omit<ButtonPropsT, 'value' | 'defaultValue' | 'onChange' | 'children' | 'variant' | 'size'> & {
+  /** Выбранный период — контролируемый режим, вместе с onValueChange. null — период не выбран */
+  value?: CalendarRangeT | null;
+  /** Период при первом рендере — неконтролируемый режим */
+  defaultValue?: CalendarRangeT | null;
+  /** Изменился период или выбор снят: { from, to } или null */
+  onValueChange?: (value: CalendarRangeT | null) => void;
+  /** Календарь открыт — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Календарь открыт при первом рендере */
+  defaultOpen?: boolean;
+  /** Календарь открыли или закрыли: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+  /** Текст, пока период не выбран. По умолчанию «Выберите период» */
+  placeholder?: string;
+  /** Формат дат в кнопке, как в date-fns. По умолчанию dd.MM.yyyy */
+  dateFormat?: string;
+  /** Сколько месяцев показывать рядом. По умолчанию 2 */
+  numberOfMonths?: number;
+  /** Закрывать календарь, когда выбраны обе даты. По умолчанию false */
+  closeOnSelect?: boolean;
+  /** Минимальная длина периода в днях */
+  min?: number;
+  /** Максимальная длина периода в днях */
+  max?: number;
+  /** Первый месяц, до которого можно листать */
+  startMonth?: Date;
+  /** Последний месяц, до которого можно листать */
+  endMonth?: Date;
+  /** Недоступные даты: дата, массив, { before }, { after }, { dayOfWeek } или функция */
+  disabledDates?: Matcher | Matcher[];
+  /** Выравнивание календаря относительно кнопки. По умолчанию start */
+  align?: FloatingAlignT;
+  /** Классы окна с календарём */
+  contentClassName?: string;
+};

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,61 @@
+import { DialogClosePropsT, DialogContentPropsT, DialogDescriptionPropsT, DialogFooterPropsT, DialogHeaderPropsT, DialogOverlayPropsT, DialogPortalPropsT, DialogPropsT, DialogTitlePropsT, DialogTriggerPropsT } from "./types.js";
+/**
+ * Диалог: окно поверх страницы, которое требует внимания пользователя
+ * @param props - пропсы диалога
+ * @returns корень диалога без своей разметки
+ */
+export declare function Dialog({ onOpenChange, ...props }: DialogPropsT): import("react").JSX.Element;
+/**
+ * Кнопка открытия диалога. Свою кнопку — через render={<Button />}
+ * @param props - пропсы кнопки
+ * @returns кнопка с aria-haspopup="dialog"
+ */
+export declare function DialogTrigger(props: DialogTriggerPropsT): import("react").JSX.Element;
+/**
+ * Портал: переносит оверлей и окно в конец body
+ * @param props - пропсы портала
+ * @returns портал
+ */
+export declare function DialogPortal(props: DialogPortalPropsT): import("react").JSX.Element;
+/**
+ * Кнопка закрытия диалога: любая кнопка внутри окна, которая закрывает его. Свою — через render={<Button />}
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function DialogClose(props: DialogClosePropsT): import("react").JSX.Element;
+/**
+ * Оверлей: затемняет и размывает страницу под диалогом
+ * @param props - пропсы оверлея
+ * @returns полупрозрачный слой на весь экран
+ */
+export declare function DialogOverlay({ className, ...props }: DialogOverlayPropsT): import("react").JSX.Element;
+/**
+ * Окно диалога: рендерится в портале поверх оверлея, по центру экрана
+ * @param props - пропсы окна
+ * @returns портал с оверлеем и окном
+ */
+export declare function DialogContent({ className, children, showCloseButton, closeLabel, ...props }: DialogContentPropsT): import("react").JSX.Element;
+/**
+ * Шапка диалога: заголовок и описание
+ * @param props - пропсы шапки
+ * @returns блок
+ */
+export declare function DialogHeader({ className, ...props }: DialogHeaderPropsT): import("react").JSX.Element;
+/**
+ * Подвал диалога: кнопки действий, на узком экране — столбиком
+ * @param props - пропсы подвала
+ * @returns блок с серым фоном и разделителем
+ */
+export declare function DialogFooter({ className, showCloseButton, closeLabel, children, ...props }: DialogFooterPropsT): import("react").JSX.Element;
+/**
+ * Заголовок диалога: озвучивается при открытии
+ * @param props - пропсы заголовка
+ * @returns h2
+ */
+export declare function DialogTitle({ className, ...props }: DialogTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание диалога: озвучивается после заголовка
+ * @param props - пропсы описания
+ * @returns p
+ */
+export declare function DialogDescription({ className, ...props }: DialogDescriptionPropsT): import("react").JSX.Element;

package/dist/components/dialog/dialog.js

@@ -0,0 +1,160 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { Button } from "../button/button.js";
+import { XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+// src/components/dialog/dialog.tsx
+/**
+* Диалог: окно поверх страницы, которое требует внимания пользователя
+* @param props - пропсы диалога
+* @returns корень диалога без своей разметки
+*/
+function Dialog$1({ onOpenChange, ...props }) {
+	/**
+	* Диалог открыли или закрыли: наружу только флаг
+	* @param open - открыт ли
+	*/
+	const handleOpenChange = (open) => onOpenChange?.(open);
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "dialog",
+		onOpenChange: handleOpenChange,
+		...props
+	});
+}
+/**
+* Кнопка открытия диалога. Свою кнопку — через render={<Button />}
+* @param props - пропсы кнопки
+* @returns кнопка с aria-haspopup="dialog"
+*/
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+/**
+* Портал: переносит оверлей и окно в конец body
+* @param props - пропсы портала
+* @returns портал
+*/
+function DialogPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+/**
+* Кнопка закрытия диалога: любая кнопка внутри окна, которая закрывает его. Свою — через render={<Button />}
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function DialogClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+/**
+* Оверлей: затемняет и размывает страницу под диалогом
+* @param props - пропсы оверлея
+* @returns полупрозрачный слой на весь экран
+*/
+function DialogOverlay({ className, ...props }) {
+	const classes = cn("fixed", "inset-0", "isolate", "z-50", "bg-black/10", "duration-100", "supports-backdrop-filter:backdrop-blur-xs", "data-open:animate-in", "data-open:fade-in-0", "data-closed:animate-out", "data-closed:fade-out-0", className);
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "dialog-overlay",
+		className: classes,
+		...props
+	});
+}
+/**
+* Окно диалога: рендерится в портале поверх оверлея, по центру экрана
+* @param props - пропсы окна
+* @returns портал с оверлеем и окном
+*/
+function DialogContent({ className, children, showCloseButton = true, closeLabel = texts.close, ...props }) {
+	const classes = cn("fixed", "top-1/2", "left-1/2", "z-50", "grid", "w-full", "max-w-[calc(100%-2rem)]", "-translate-x-1/2", "-translate-y-1/2", "gap-4", "rounded-xl", "bg-popover", "p-4", "text-sm", "text-popover-foreground", "ring-1", "ring-foreground/10", "duration-100", "outline-none", "sm:max-w-sm", "data-open:animate-in", "data-open:fade-in-0", "data-open:zoom-in-95", "data-closed:animate-out", "data-closed:fade-out-0", "data-closed:zoom-out-95", className);
+	let closeButton = null;
+	if (showCloseButton) {
+		const closeRender = /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-sm",
+			className: "absolute top-2 right-2"
+		});
+		closeButton = /* @__PURE__ */ jsxs(Dialog.Close, {
+			"data-slot": "dialog-close",
+			render: closeRender,
+			children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: closeLabel
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-slot": "dialog-content",
+		className: classes,
+		...props,
+		children: [children, closeButton]
+	})] });
+}
+/**
+* Шапка диалога: заголовок и описание
+* @param props - пропсы шапки
+* @returns блок
+*/
+function DialogHeader({ className, ...props }) {
+	const classes = cn("flex", "flex-col", "gap-2", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: classes,
+		...props
+	});
+}
+/**
+* Подвал диалога: кнопки действий, на узком экране — столбиком
+* @param props - пропсы подвала
+* @returns блок с серым фоном и разделителем
+*/
+function DialogFooter({ className, showCloseButton = false, closeLabel = texts.close, children, ...props }) {
+	const classes = cn("-mx-4", "-mb-4", "flex", "flex-col-reverse", "gap-2", "rounded-b-xl", "border-t", "bg-muted/50", "p-4", "sm:flex-row", "sm:justify-end", className);
+	let closeButton = null;
+	if (showCloseButton) closeButton = /* @__PURE__ */ jsx(Dialog.Close, {
+		render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
+		children: closeLabel
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dialog-footer",
+		className: classes,
+		...props,
+		children: [children, closeButton]
+	});
+}
+/**
+* Заголовок диалога: озвучивается при открытии
+* @param props - пропсы заголовка
+* @returns h2
+*/
+function DialogTitle({ className, ...props }) {
+	const classes = cn("text-base", "leading-none", "font-medium", className);
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание диалога: озвучивается после заголовка
+* @param props - пропсы описания
+* @returns p
+*/
+function DialogDescription({ className, ...props }) {
+	const classes = cn("text-sm", "text-muted-foreground", "*:[a]:underline", "*:[a]:underline-offset-3", "*:[a]:hover:text-foreground", className);
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: classes,
+		...props
+	});
+}
+export { Dialog$1 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

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

@@ -0,0 +1,3 @@
+import { DialogClosePropsT, DialogContentPropsT, DialogDescriptionPropsT, DialogFooterPropsT, DialogHeaderPropsT, DialogOverlayPropsT, DialogPortalPropsT, DialogPropsT, DialogTitlePropsT, DialogTriggerPropsT } from "./types.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./dialog.js";
+export { Dialog, DialogClose, type DialogClosePropsT, DialogContent, type DialogContentPropsT, DialogDescription, type DialogDescriptionPropsT, DialogFooter, type DialogFooterPropsT, DialogHeader, type DialogHeaderPropsT, DialogOverlay, type DialogOverlayPropsT, DialogPortal, type DialogPortalPropsT, type DialogPropsT, DialogTitle, type DialogTitlePropsT, DialogTrigger, type DialogTriggerPropsT };

package/dist/components/dialog/index.js

@@ -0,0 +1 @@
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./dialog.js";

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

@@ -0,0 +1,68 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { ComponentProps } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+/**
+ * Пропсы диалога
+ */
+export type DialogPropsT = Omit<Dialog.Root.Props, 'onOpenChange'> & {
+  /** Диалог открыт — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Диалог открыт при первом рендере — неконтролируемый режим */
+  defaultOpen?: boolean;
+  /** Диалог открыли или закрыли: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+  /** Модальный режим: страница под диалогом недоступна, фокус заперт внутри. По умолчанию true */
+  modal?: boolean | 'trap-focus';
+  /** Не закрывать диалог нажатием вне окна */
+  disablePointerDismissal?: boolean;
+};
+/**
+ * Пропсы кнопки открытия
+ */
+export type DialogTriggerPropsT = PartPropsT<Dialog.Trigger.Props>;
+/**
+ * Пропсы портала
+ */
+export type DialogPortalPropsT = Dialog.Portal.Props;
+/**
+ * Пропсы кнопки закрытия
+ */
+export type DialogClosePropsT = PartPropsT<Dialog.Close.Props>;
+/**
+ * Пропсы оверлея
+ */
+export type DialogOverlayPropsT = PartPropsT<Dialog.Backdrop.Props>;
+/**
+ * Пропсы окна диалога
+ */
+export type DialogContentPropsT = PartPropsT<Dialog.Popup.Props> & {
+  /** Показать кнопку-крестик в правом верхнем углу. По умолчанию true */
+  showCloseButton?: boolean;
+  /** Подпись крестика для скринридеров */
+  closeLabel?: string;
+  /** Куда перевести фокус при открытии: элемент или false — оставить на месте */
+  initialFocus?: Dialog.Popup.Props['initialFocus'];
+  /** Куда вернуть фокус при закрытии: элемент или false — никуда */
+  finalFocus?: Dialog.Popup.Props['finalFocus'];
+};
+/**
+ * Пропсы шапки
+ */
+export type DialogHeaderPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы подвала
+ */
+export type DialogFooterPropsT = ComponentProps<'div'> & {
+  /** Добавить в конец кнопку «Закрыть» */
+  showCloseButton?: boolean;
+  /** Текст кнопки «Закрыть» */
+  closeLabel?: string;
+};
+/**
+ * Пропсы заголовка
+ */
+export type DialogTitlePropsT = PartPropsT<Dialog.Title.Props>;
+/**
+ * Пропсы описания
+ */
+export type DialogDescriptionPropsT = PartPropsT<Dialog.Description.Props>;

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,69 @@
+import { DrawerClosePropsT, DrawerContentPropsT, DrawerDescriptionPropsT, DrawerFooterPropsT, DrawerHeaderPropsT, DrawerOverlayPropsT, DrawerPortalPropsT, DrawerPropsT, DrawerSwipeHandlePropsT, DrawerTitlePropsT, DrawerTriggerPropsT } from "./types.js";
+/**
+ * Шторка: выезжает с края экрана и закрывается свайпом. Шторка внутри шторки
+ * становится вложенной: предыдущие уходят назад стопкой
+ * @param props - пропсы шторки
+ * @returns корень шторки без своей разметки
+ */
+export declare function Drawer({ modal, showSwipeHandle, snapPoints, swipeDirection, onOpenChange, onSnapPointChange, ...props }: DrawerPropsT): import("react").JSX.Element;
+/**
+ * Кнопка открытия шторки. Свою кнопку передают через render={<Button />}
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function DrawerTrigger(props: DrawerTriggerPropsT): import("react").JSX.Element;
+/**
+ * Портал: выносит шторку в конец body. DrawerContent рендерит его сам
+ * @param props - пропсы портала
+ * @returns портал
+ */
+export declare function DrawerPortal(props: DrawerPortalPropsT): import("react").JSX.Element;
+/**
+ * Кнопка закрытия шторки. Свою кнопку передают через render={<Button />}
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function DrawerClose(props: DrawerClosePropsT): import("react").JSX.Element;
+/**
+ * Затемнение под шторкой: светлеет вместе со свайпом. DrawerContent рендерит его сам в модальном режиме
+ * @param props - пропсы затемнения
+ * @returns слой на весь экран
+ */
+export declare function DrawerOverlay({ className, ...props }: DrawerOverlayPropsT): import("react").JSX.Element;
+/**
+ * Ручка: полоска у края шторки, за которую её тянут. Показывается при showSwipeHandle
+ * @param props - пропсы ручки
+ * @returns полоска
+ */
+export declare function DrawerSwipeHandle({ className, ...props }: DrawerSwipeHandlePropsT): import("react").JSX.Element;
+/**
+ * Окно шторки: рендерится в портале поверх затемнения. Содержимое скрывается,
+ * когда поверх открыта вложенная шторка
+ * @param props - пропсы окна
+ * @returns портал с затемнением и окном
+ */
+export declare function DrawerContent({ className, children, ...props }: DrawerContentPropsT): import("react").JSX.Element;
+/**
+ * Шапка шторки: заголовок и описание. Снизу и сверху — по центру, на широком экране — слева
+ * @param props - пропсы шапки
+ * @returns блок
+ */
+export declare function DrawerHeader({ className, ...props }: DrawerHeaderPropsT): import("react").JSX.Element;
+/**
+ * Подвал шторки: прижат к низу, кнопки столбиком
+ * @param props - пропсы подвала
+ * @returns блок
+ */
+export declare function DrawerFooter({ className, ...props }: DrawerFooterPropsT): import("react").JSX.Element;
+/**
+ * Заголовок шторки: озвучивается при открытии
+ * @param props - пропсы заголовка
+ * @returns h2
+ */
+export declare function DrawerTitle({ className, ...props }: DrawerTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание шторки: озвучивается после заголовка
+ * @param props - пропсы описания
+ * @returns p
+ */
+export declare function DrawerDescription({ className, ...props }: DrawerDescriptionPropsT): import("react").JSX.Element;