@archytechtor/ui 0.0.0-stage → 0.2.0

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;

package/dist/components/drawer/drawer.js

@@ -0,0 +1,245 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+// src/components/drawer/drawer.tsx
+/** Настройки ближайшей шторки */
+const DrawerContext = createContext({
+	hasSnapPoints: false,
+	modal: true,
+	showSwipeHandle: false,
+	swipeDirection: "down"
+});
+/**
+* Шторка: выезжает с края экрана и закрывается свайпом. Шторка внутри шторки
+* становится вложенной: предыдущие уходят назад стопкой
+* @param props - пропсы шторки
+* @returns корень шторки без своей разметки
+*/
+function Drawer$1({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection = "down", onOpenChange, onSnapPointChange, ...props }) {
+	const hasSnapPoints = snapPoints !== void 0 && snapPoints.length > 0;
+	const context = useMemo(() => ({
+		hasSnapPoints,
+		modal,
+		showSwipeHandle,
+		swipeDirection
+	}), [
+		hasSnapPoints,
+		modal,
+		showSwipeHandle,
+		swipeDirection
+	]);
+	/**
+	* Шторка открылась или закрылась: наружу только флаг
+	* @param open - открыта ли
+	*/
+	const handleOpenChange = (open) => onOpenChange?.(open);
+	/**
+	* Точка остановки сменилась: наружу только значение
+	* @param snapPoint - точка
+	*/
+	const handleSnapPointChange = (snapPoint) => onSnapPointChange?.(snapPoint);
+	return /* @__PURE__ */ jsx(DrawerContext, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			modal,
+			snapPoints,
+			swipeDirection,
+			onOpenChange: handleOpenChange,
+			onSnapPointChange: handleSnapPointChange,
+			...props
+		})
+	});
+}
+/**
+* Кнопка открытия шторки. Свою кнопку передают через render={<Button />}
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function DrawerTrigger(props) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+/**
+* Портал: выносит шторку в конец body. DrawerContent рендерит его сам
+* @param props - пропсы портала
+* @returns портал
+*/
+function DrawerPortal(props) {
+	return /* @__PURE__ */ jsx(Drawer.Portal, {
+		"data-slot": "drawer-portal",
+		...props
+	});
+}
+/**
+* Кнопка закрытия шторки. Свою кнопку передают через render={<Button />}
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function DrawerClose(props) {
+	return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "drawer-close",
+		...props
+	});
+}
+/**
+* Затемнение под шторкой: светлеет вместе со свайпом. DrawerContent рендерит его сам в модальном режиме
+* @param props - пропсы затемнения
+* @returns слой на весь экран
+*/
+function DrawerOverlay({ className, ...props }) {
+	const classes = cn("fixed", "inset-0", "z-50", "min-h-dvh", "bg-black/30", "select-none", "supports-backdrop-filter:backdrop-blur-sm", "opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))]", "transition-opacity", "duration-450", "ease-[cubic-bezier(0.32,0.72,0,1)]", "data-starting-style:opacity-0", "data-ending-style:pointer-events-none", "data-ending-style:opacity-0", "data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)]", "data-swiping:duration-0", "data-snap-points:[--drawer-overlay-min-opacity:0.5]", "supports-[-webkit-touch-callout:none]:absolute", className);
+	return /* @__PURE__ */ jsx(Drawer.Backdrop, {
+		"data-slot": "drawer-overlay",
+		className: classes,
+		...props
+	});
+}
+/**
+* Ручка: полоска у края шторки, за которую её тянут. Показывается при showSwipeHandle
+* @param props - пропсы ручки
+* @returns полоска
+*/
+function DrawerSwipeHandle({ className, ...props }) {
+	const classes = cn("relative", "z-10", "flex", "shrink-0", "cursor-grab", "transition-opacity", "duration-200", "active:cursor-grabbing", "after:block", "after:shrink-0", "after:rounded-full", "after:bg-muted", "group-data-nested-drawer-open/drawer-popup:opacity-0", "group-data-nested-drawer-swiping/drawer-popup:opacity-100", "group-data-[swipe-direction=left]/drawer-popup:order-last", "group-data-[swipe-direction=up]/drawer-popup:order-last", "group-data-[swipe-axis=y]/drawer-popup:h-3", "group-data-[swipe-axis=y]/drawer-popup:w-full", "group-data-[swipe-axis=y]/drawer-popup:justify-center", "group-data-[swipe-axis=y]/drawer-popup:after:h-1.5", "group-data-[swipe-axis=y]/drawer-popup:after:w-[100px]", "group-data-[swipe-direction=down]/drawer-popup:items-end", "group-data-[swipe-direction=up]/drawer-popup:items-start", "group-data-[swipe-axis=x]/drawer-popup:h-full", "group-data-[swipe-axis=x]/drawer-popup:w-3", "group-data-[swipe-axis=x]/drawer-popup:items-center", "group-data-[swipe-axis=x]/drawer-popup:after:h-[100px]", "group-data-[swipe-axis=x]/drawer-popup:after:w-1.5", "group-data-[swipe-direction=left]/drawer-popup:justify-start", "group-data-[swipe-direction=right]/drawer-popup:justify-end", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-swipe-handle",
+		"aria-hidden": true,
+		className: classes,
+		...props
+	});
+}
+/** Стили окна: размер, свайп, стопка вложенных шторок и анимации */
+const popupClasses = [
+	"group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height)",
+	"max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) flex-col",
+	"rounded-[min(var(--radius-4xl),24px)] border border-popover bg-popover text-sm text-popover-foreground shadow-xl",
+	"outline-none select-none will-change-transform [interpolate-size:allow-keywords] dark:border-border",
+	"transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))]",
+	"transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)]",
+	"[--drawer-bleed-background:transparent] [--drawer-inset:--spacing(2)]",
+	"[--drawer-stacked-shadow:0_-20px_25px_-5px_rgb(0_0_0/0.1),0_-8px_10px_-6px_rgb(0_0_0/0.1)]",
+	"data-[swipe-direction=down]:data-nested-drawer-open:shadow-(--drawer-stacked-shadow)",
+	"data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
+	"after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover))",
+	"data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed)",
+	"data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed)",
+	"data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full",
+	"data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
+	"[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%]",
+	"data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)]",
+	"data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh]",
+	"data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+	"[--bleed:3rem] [--peek:1rem] [--stack-step:0.05]",
+	"[--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))]",
+	"[--stack-progress:clamp(0,var(--drawer-swipe-progress),1)]",
+	"[--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))]",
+	"[--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))]",
+	"[--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)]",
+	"[--stack-shrink:calc(1-var(--stack-scale))]",
+	"data-starting-style:transform-(--closed-transform) data-ending-style:transform-(--closed-transform)",
+	"data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+	"data-swiping:duration-0 data-nested-drawer-swiping:duration-0",
+	"data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+	"data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+	"data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
+	"data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
+	"data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom",
+	"data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)]",
+	"data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
+	"data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top",
+	"data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)]",
+	"data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
+	"data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left",
+	"data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)]",
+	"data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
+	"data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right",
+	"data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)]",
+	"data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]"
+];
+/**
+* Окно шторки: рендерится в портале поверх затемнения. Содержимое скрывается,
+* когда поверх открыта вложенная шторка
+* @param props - пропсы окна
+* @returns портал с затемнением и окном
+*/
+function DrawerContent({ className, children, ...props }) {
+	const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useContext(DrawerContext);
+	const swipeAxis = swipeDirection === "left" || swipeDirection === "right" ? "x" : "y";
+	const snapPointsAttribute = hasSnapPoints ? "" : void 0;
+	const classes = cn(popupClasses, className);
+	const contentClasses = cn("flex", "min-h-0", "flex-1", "flex-col", "overflow-hidden", "overscroll-contain", "rounded-[inherit]", "select-text", "transition-opacity", "duration-300", "ease-[cubic-bezier(0.45,1.005,0,1.005)]", "group-data-nested-drawer-open/drawer-popup:opacity-0", "group-data-nested-drawer-swiping/drawer-popup:opacity-100", "group-data-swiping/drawer-popup:select-none");
+	return /* @__PURE__ */ jsxs(DrawerPortal, { children: [modal === true && /* @__PURE__ */ jsx(DrawerOverlay, { "data-snap-points": snapPointsAttribute }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+		"data-slot": "drawer-viewport",
+		"data-modal": modal,
+		className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto",
+		children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+			"data-slot": "drawer-popup",
+			"data-swipe-axis": swipeAxis,
+			"data-snap-points": snapPointsAttribute,
+			className: classes,
+			...props,
+			children: [showSwipeHandle && /* @__PURE__ */ jsx(DrawerSwipeHandle, {}), /* @__PURE__ */ jsx(Drawer.Content, {
+				"data-slot": "drawer-content",
+				className: contentClasses,
+				children
+			})]
+		})
+	})] });
+}
+/**
+* Шапка шторки: заголовок и описание. Снизу и сверху — по центру, на широком экране — слева
+* @param props - пропсы шапки
+* @returns блок
+*/
+function DrawerHeader({ className, ...props }) {
+	const classes = cn("flex", "shrink-0", "flex-col", "gap-0.5", "p-4", "pb-0", "md:gap-1.5", "md:text-left", "group-data-[swipe-axis=y]/drawer-popup:text-center", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-header",
+		className: classes,
+		...props
+	});
+}
+/**
+* Подвал шторки: прижат к низу, кнопки столбиком
+* @param props - пропсы подвала
+* @returns блок
+*/
+function DrawerFooter({ className, ...props }) {
+	const classes = cn("mt-auto", "flex", "shrink-0", "flex-col", "gap-2", "p-4", "pt-0", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-footer",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок шторки: озвучивается при открытии
+* @param props - пропсы заголовка
+* @returns h2
+*/
+function DrawerTitle({ className, ...props }) {
+	const classes = cn("text-base", "font-medium", "text-foreground", className);
+	return /* @__PURE__ */ jsx(Drawer.Title, {
+		"data-slot": "drawer-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание шторки: озвучивается после заголовка
+* @param props - пропсы описания
+* @returns p
+*/
+function DrawerDescription({ className, ...props }) {
+	const classes = cn("text-sm", "text-balance", "text-muted-foreground", className);
+	return /* @__PURE__ */ jsx(Drawer.Description, {
+		"data-slot": "drawer-description",
+		className: classes,
+		...props
+	});
+}
+export { Drawer$1 as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger };

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

@@ -0,0 +1,3 @@
+import { DrawerClosePropsT, DrawerContentPropsT, DrawerDescriptionPropsT, DrawerFooterPropsT, DrawerHeaderPropsT, DrawerOverlayPropsT, DrawerPortalPropsT, DrawerPropsT, DrawerSnapPointT, DrawerSwipeDirectionT, DrawerSwipeHandlePropsT, DrawerTitlePropsT, DrawerTriggerPropsT } from "./types.js";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger } from "./drawer.js";
+export { Drawer, DrawerClose, type DrawerClosePropsT, DrawerContent, type DrawerContentPropsT, DrawerDescription, type DrawerDescriptionPropsT, DrawerFooter, type DrawerFooterPropsT, DrawerHeader, type DrawerHeaderPropsT, DrawerOverlay, type DrawerOverlayPropsT, DrawerPortal, type DrawerPortalPropsT, type DrawerPropsT, type DrawerSnapPointT, type DrawerSwipeDirectionT, DrawerSwipeHandle, type DrawerSwipeHandlePropsT, DrawerTitle, type DrawerTitlePropsT, DrawerTrigger, type DrawerTriggerPropsT };

package/dist/components/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger } from "./drawer.js";

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

@@ -0,0 +1,93 @@
+import { CSSProperties, ComponentProps } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+/**
+ * Пропсы части: className только строкой, render и style описаны по-русски
+ */
+export type PartPropsT<PropsT extends {
+  render?: unknown;
+}> = Omit<PropsT, 'className' | 'render' | 'style'> & {
+  /** Классы элемента */
+  className?: string;
+  /** Свой элемент вместо стандартного: render={<Button />}. Стили и пропсы переходят на него */
+  render?: PropsT['render'];
+  /** Инлайн-стили элемента */
+  style?: CSSProperties;
+};
+/**
+ * Край, к которому шторка закрывается свайпом: down — снизу, up — сверху, left — слева, right — справа
+ */
+export type DrawerSwipeDirectionT = 'down' | 'up' | 'left' | 'right';
+/**
+ * Точка остановки: доля высоты (0.5) или размер строкой ('300px', '20rem')
+ */
+export type DrawerSnapPointT = number | string;
+/**
+ * Пропсы шторки
+ */
+export type DrawerPropsT = Omit<Drawer.Root.Props, 'onOpenChange' | 'swipeDirection' | 'snapPoints' | 'snapPoint' | 'defaultSnapPoint' | 'onSnapPointChange'> & {
+  /** Открыта ли шторка — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Открыта ли шторка при первом рендере — неконтролируемый режим */
+  defaultOpen?: boolean;
+  /** Шторка открылась или закрылась */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Модальность: true — затемняет страницу и держит фокус, false — страница остаётся доступной,
+   * 'trap-focus' — держит фокус без затемнения. По умолчанию true
+   */
+  modal?: boolean | 'trap-focus';
+  /** Край экрана: шторка выезжает с него и закрывается свайпом к нему. По умолчанию down */
+  swipeDirection?: DrawerSwipeDirectionT;
+  /** Точки остановки: доли высоты (0.5) или размеры ('300px'). 1 — во всю высоту */
+  snapPoints?: DrawerSnapPointT[];
+  /** Текущая точка остановки — контролируемый режим, вместе с onSnapPointChange */
+  snapPoint?: DrawerSnapPointT | null;
+  /** Точка остановки при открытии — неконтролируемый режим. По умолчанию первая */
+  defaultSnapPoint?: DrawerSnapPointT | null;
+  /** Шторка остановилась на другой точке */
+  onSnapPointChange?: (snapPoint: DrawerSnapPointT | null) => void;
+  /** Показать ручку, за которую шторку тянут. По умолчанию false */
+  showSwipeHandle?: boolean;
+  /** Не закрывать шторку нажатием вне неё */
+  disablePointerDismissal?: boolean;
+};
+/**
+ * Пропсы кнопки открытия
+ */
+export type DrawerTriggerPropsT = PartPropsT<Drawer.Trigger.Props>;
+/**
+ * Пропсы портала
+ */
+export type DrawerPortalPropsT = Drawer.Portal.Props;
+/**
+ * Пропсы кнопки закрытия
+ */
+export type DrawerClosePropsT = PartPropsT<Drawer.Close.Props>;
+/**
+ * Пропсы затемнения
+ */
+export type DrawerOverlayPropsT = PartPropsT<Drawer.Backdrop.Props>;
+/**
+ * Пропсы ручки
+ */
+export type DrawerSwipeHandlePropsT = ComponentProps<'div'>;
+/**
+ * Пропсы окна шторки
+ */
+export type DrawerContentPropsT = PartPropsT<Drawer.Popup.Props>;
+/**
+ * Пропсы шапки
+ */
+export type DrawerHeaderPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы подвала
+ */
+export type DrawerFooterPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы заголовка
+ */
+export type DrawerTitlePropsT = PartPropsT<Drawer.Title.Props>;
+/**
+ * Пропсы описания
+ */
+export type DrawerDescriptionPropsT = PartPropsT<Drawer.Description.Props>;