@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/sheet/sheet.js

@@ -0,0 +1,155 @@
+"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/sheet/sheet.tsx
+/**
+* Боковая панель: окно, которое выезжает с края экрана. Дополняет основное содержимое страницы
+* @param props - пропсы панели
+* @returns корень панели без своей разметки
+*/
+function Sheet({ onOpenChange, ...props }) {
+	/**
+	* Панель открыли или закрыли: наружу только флаг
+	* @param open - открыта ли
+	*/
+	const handleOpenChange = (open) => onOpenChange?.(open);
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "sheet",
+		onOpenChange: handleOpenChange,
+		...props
+	});
+}
+/**
+* Кнопка открытия панели
+* @param props - пропсы кнопки
+* @returns кнопка с aria-haspopup="dialog"
+*/
+function SheetTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "sheet-trigger",
+		...props
+	});
+}
+/**
+* Портал: переносит оверлей и панель в конец body
+* @param props - пропсы портала
+* @returns портал
+*/
+function SheetPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "sheet-portal",
+		...props
+	});
+}
+/**
+* Кнопка закрытия панели: любая кнопка внутри панели, которая закрывает её
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function SheetClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "sheet-close",
+		...props
+	});
+}
+/**
+* Оверлей: затемняет и размывает страницу под панелью
+* @param props - пропсы оверлея
+* @returns полупрозрачный слой на весь экран
+*/
+function SheetOverlay({ className, ...props }) {
+	const classes = cn("fixed", "inset-0", "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": "sheet-overlay",
+		className: classes,
+		...props
+	});
+}
+/**
+* Панель: рендерится в портале поверх оверлея и выезжает с выбранной стороны
+* @param props - пропсы панели
+* @returns портал с оверлеем и панелью
+*/
+function SheetContent({ className, children, side = "right", showCloseButton = true, closeLabel = texts.close, ...props }) {
+	const classes = cn("fixed", "z-50", "flex", "flex-col", "gap-4", "bg-popover", "bg-clip-padding", "text-sm", "text-popover-foreground", "shadow-lg", "transition", "duration-200", "ease-in-out", "data-[side=bottom]:inset-x-0", "data-[side=bottom]:bottom-0", "data-[side=bottom]:h-auto", "data-[side=bottom]:border-t", "data-[side=left]:inset-y-0", "data-[side=left]:left-0", "data-[side=left]:h-full", "data-[side=left]:w-3/4", "data-[side=left]:border-r", "data-[side=left]:sm:max-w-sm", "data-[side=right]:inset-y-0", "data-[side=right]:right-0", "data-[side=right]:h-full", "data-[side=right]:w-3/4", "data-[side=right]:border-l", "data-[side=right]:sm:max-w-sm", "data-[side=top]:inset-x-0", "data-[side=top]:top-0", "data-[side=top]:h-auto", "data-[side=top]:border-b", "data-starting-style:opacity-0", "data-ending-style:opacity-0", "data-[side=bottom]:data-starting-style:translate-y-10", "data-[side=bottom]:data-ending-style:translate-y-10", "data-[side=left]:data-starting-style:-translate-x-10", "data-[side=left]:data-ending-style:-translate-x-10", "data-[side=right]:data-starting-style:translate-x-10", "data-[side=right]:data-ending-style:translate-x-10", "data-[side=top]:data-starting-style:-translate-y-10", "data-[side=top]:data-ending-style:-translate-y-10", className);
+	let closeButton = null;
+	if (showCloseButton) {
+		const closeRender = /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-sm",
+			className: "absolute top-3 right-3"
+		});
+		closeButton = /* @__PURE__ */ jsxs(Dialog.Close, {
+			"data-slot": "sheet-close",
+			render: closeRender,
+			children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: closeLabel
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-slot": "sheet-content",
+		"data-side": side,
+		className: classes,
+		...props,
+		children: [children, closeButton]
+	})] });
+}
+/**
+* Шапка панели: заголовок и описание
+* @param props - пропсы шапки
+* @returns блок
+*/
+function SheetHeader({ className, ...props }) {
+	const classes = cn("flex", "flex-col", "gap-0.5", "p-4", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: classes,
+		...props
+	});
+}
+/**
+* Подвал панели: прижат к низу, кнопки столбиком
+* @param props - пропсы подвала
+* @returns блок
+*/
+function SheetFooter({ className, ...props }) {
+	const classes = cn("mt-auto", "flex", "flex-col", "gap-2", "p-4", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок панели: озвучивается при открытии
+* @param props - пропсы заголовка
+* @returns h2
+*/
+function SheetTitle({ className, ...props }) {
+	const classes = cn("text-base", "font-medium", "text-foreground", className);
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "sheet-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание панели: озвучивается после заголовка
+* @param props - пропсы описания
+* @returns p
+*/
+function SheetDescription({ className, ...props }) {
+	const classes = cn("text-sm", "text-muted-foreground", className);
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "sheet-description",
+		className: classes,
+		...props
+	});
+}
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };

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

@@ -0,0 +1,69 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { ComponentProps } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+/**
+ * Пропсы боковой панели
+ */
+export type SheetPropsT = Omit<Dialog.Root.Props, 'onOpenChange'> & {
+  /** Панель открыта — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Панель открыта при первом рендере — неконтролируемый режим */
+  defaultOpen?: boolean;
+  /** Панель открыли или закрыли: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+  /** Модальный режим: страница под панелью недоступна, фокус заперт внутри. По умолчанию true */
+  modal?: boolean | 'trap-focus';
+  /** Не закрывать панель нажатием вне её */
+  disablePointerDismissal?: boolean;
+};
+/**
+ * Пропсы кнопки открытия
+ */
+export type SheetTriggerPropsT = PartPropsT<Dialog.Trigger.Props>;
+/**
+ * Пропсы портала
+ */
+export type SheetPortalPropsT = Dialog.Portal.Props;
+/**
+ * Пропсы кнопки закрытия
+ */
+export type SheetClosePropsT = PartPropsT<Dialog.Close.Props>;
+/**
+ * Пропсы оверлея
+ */
+export type SheetOverlayPropsT = PartPropsT<Dialog.Backdrop.Props>;
+/**
+ * Сторона экрана, с которой выезжает панель
+ */
+export type SheetSideT = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Пропсы панели
+ */
+export type SheetContentPropsT = PartPropsT<Dialog.Popup.Props> & {
+  /** Сторона экрана, с которой выезжает панель. По умолчанию right */
+  side?: SheetSideT;
+  /** Показать кнопку-крестик в правом верхнем углу. По умолчанию true */
+  showCloseButton?: boolean;
+  /** Подпись крестика для скринридеров */
+  closeLabel?: string;
+  /** Куда перевести фокус при открытии: элемент или false — оставить на месте */
+  initialFocus?: Dialog.Popup.Props['initialFocus'];
+  /** Куда вернуть фокус при закрытии: элемент или false — никуда */
+  finalFocus?: Dialog.Popup.Props['finalFocus'];
+};
+/**
+ * Пропсы шапки
+ */
+export type SheetHeaderPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы подвала
+ */
+export type SheetFooterPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы заголовка
+ */
+export type SheetTitlePropsT = PartPropsT<Dialog.Title.Props>;
+/**
+ * Пропсы описания
+ */
+export type SheetDescriptionPropsT = PartPropsT<Dialog.Description.Props>;

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

@@ -0,0 +1,3 @@
+import { SidebarCollapsibleT, SidebarContentPropsT, SidebarContextI, SidebarFooterPropsT, SidebarGroupActionPropsT, SidebarGroupContentPropsT, SidebarGroupLabelPropsT, SidebarGroupPropsT, SidebarHeaderPropsT, SidebarInputPropsT, SidebarInsetPropsT, SidebarMenuActionPropsT, SidebarMenuBadgePropsT, SidebarMenuButtonPropsT, SidebarMenuItemPropsT, SidebarMenuPropsT, SidebarMenuSkeletonPropsT, SidebarMenuSubButtonPropsT, SidebarMenuSubItemPropsT, SidebarMenuSubPropsT, SidebarPropsT, SidebarProviderPropsT, SidebarRailPropsT, SidebarSeparatorPropsT, SidebarSideT, SidebarTriggerPropsT, SidebarVariantT, sidebarMenuButtonVariants } from "./types.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./sidebar.js";
+export { Sidebar, type SidebarCollapsibleT, SidebarContent, type SidebarContentPropsT, type SidebarContextI, SidebarFooter, type SidebarFooterPropsT, SidebarGroup, SidebarGroupAction, type SidebarGroupActionPropsT, SidebarGroupContent, type SidebarGroupContentPropsT, SidebarGroupLabel, type SidebarGroupLabelPropsT, type SidebarGroupPropsT, SidebarHeader, type SidebarHeaderPropsT, SidebarInput, type SidebarInputPropsT, SidebarInset, type SidebarInsetPropsT, SidebarMenu, SidebarMenuAction, type SidebarMenuActionPropsT, SidebarMenuBadge, type SidebarMenuBadgePropsT, SidebarMenuButton, type SidebarMenuButtonPropsT, SidebarMenuItem, type SidebarMenuItemPropsT, type SidebarMenuPropsT, SidebarMenuSkeleton, type SidebarMenuSkeletonPropsT, SidebarMenuSub, SidebarMenuSubButton, type SidebarMenuSubButtonPropsT, SidebarMenuSubItem, type SidebarMenuSubItemPropsT, type SidebarMenuSubPropsT, type SidebarPropsT, SidebarProvider, type SidebarProviderPropsT, SidebarRail, type SidebarRailPropsT, SidebarSeparator, type SidebarSeparatorPropsT, type SidebarSideT, SidebarTrigger, type SidebarTriggerPropsT, type SidebarVariantT, sidebarMenuButtonVariants, useSidebar };

package/dist/components/sidebar/index.js

@@ -0,0 +1,3 @@
+import { sidebarMenuButtonVariants } from "./types.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./sidebar.js";
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar };

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

@@ -0,0 +1,145 @@
+import { SidebarContentPropsT, SidebarContextI, SidebarFooterPropsT, SidebarGroupActionPropsT, SidebarGroupContentPropsT, SidebarGroupLabelPropsT, SidebarGroupPropsT, SidebarHeaderPropsT, SidebarInputPropsT, SidebarInsetPropsT, SidebarMenuActionPropsT, SidebarMenuBadgePropsT, SidebarMenuButtonPropsT, SidebarMenuItemPropsT, SidebarMenuPropsT, SidebarMenuSkeletonPropsT, SidebarMenuSubButtonPropsT, SidebarMenuSubItemPropsT, SidebarMenuSubPropsT, SidebarPropsT, SidebarProviderPropsT, SidebarRailPropsT, SidebarSeparatorPropsT, SidebarTriggerPropsT } from "./types.js";
+/**
+ * Состояние боковой панели: открыта ли, мобильный ли экран, функция переключения
+ * @returns состояние панели
+ */
+export declare function useSidebar(): SidebarContextI;
+/**
+ * Провайдер: хранит состояние панели, сохраняет его в cookie, переключает по ⌘B / Ctrl+B.
+ * Оборачивает Sidebar и SidebarInset
+ * @param props - пропсы провайдера
+ * @returns div
+ */
+export declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: SidebarProviderPropsT): import("react").JSX.Element;
+/**
+ * Боковая панель: на десктопе — колонка слева или справа, на мобильном — шторка
+ * @param props - пропсы панели
+ * @returns div или шторка
+ */
+export declare function Sidebar({ side, variant, collapsible, mobileTitle, mobileDescription, className, children, ...props }: SidebarPropsT): import("react").JSX.Element;
+/**
+ * Кнопка переключения панели: иконка панели
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function SidebarTrigger({ className, onClick, label, ...props }: SidebarTriggerPropsT): import("react").JSX.Element;
+/**
+ * Полоса у края панели: нажатие сворачивает и раскрывает панель
+ * @param props - пропсы полосы
+ * @returns кнопка
+ */
+export declare function SidebarRail({ className, label, ...props }: SidebarRailPropsT): import("react").JSX.Element;
+/**
+ * Основная область страницы рядом с панелью. При variant="inset" — карточка с отступами
+ * @param props - пропсы области
+ * @returns main
+ */
+export declare function SidebarInset({ className, ...props }: SidebarInsetPropsT): import("react").JSX.Element;
+/**
+ * Поле в панели: например, поиск
+ * @param props - пропсы Input
+ * @returns input
+ */
+export declare function SidebarInput({ className, ...props }: SidebarInputPropsT): import("react").JSX.Element;
+/**
+ * Шапка панели: закреплена сверху
+ * @param props - пропсы шапки
+ * @returns div
+ */
+export declare function SidebarHeader({ className, ...props }: SidebarHeaderPropsT): import("react").JSX.Element;
+/**
+ * Подвал панели: закреплён снизу
+ * @param props - пропсы подвала
+ * @returns div
+ */
+export declare function SidebarFooter({ className, ...props }: SidebarFooterPropsT): import("react").JSX.Element;
+/**
+ * Разделитель внутри панели
+ * @param props - пропсы Separator
+ * @returns div с role="separator"
+ */
+export declare function SidebarSeparator({ className, ...props }: SidebarSeparatorPropsT): import("react").JSX.Element;
+/**
+ * Содержимое панели: прокручивается между шапкой и подвалом
+ * @param props - пропсы содержимого
+ * @returns div
+ */
+export declare function SidebarContent({ className, ...props }: SidebarContentPropsT): import("react").JSX.Element;
+/**
+ * Группа пунктов меню с подписью
+ * @param props - пропсы группы
+ * @returns div
+ */
+export declare function SidebarGroup({ className, ...props }: SidebarGroupPropsT): import("react").JSX.Element;
+/**
+ * Подпись группы: прячется, когда панель свёрнута до иконок
+ * @param props - пропсы подписи
+ * @returns div
+ */
+export declare function SidebarGroupLabel({ className, render, ...props }: SidebarGroupLabelPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Кнопка действия справа от подписи группы: например, «добавить»
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function SidebarGroupAction({ className, render, ...props }: SidebarGroupActionPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Содержимое группы
+ * @param props - пропсы содержимого
+ * @returns div
+ */
+export declare function SidebarGroupContent({ className, ...props }: SidebarGroupContentPropsT): import("react").JSX.Element;
+/**
+ * Меню: список пунктов
+ * @param props - пропсы меню
+ * @returns ul
+ */
+export declare function SidebarMenu({ className, ...props }: SidebarMenuPropsT): import("react").JSX.Element;
+/**
+ * Пункт меню: кнопка, действие, счётчик, подменю
+ * @param props - пропсы пункта
+ * @returns li
+ */
+export declare function SidebarMenuItem({ className, ...props }: SidebarMenuItemPropsT): import("react").JSX.Element;
+/**
+ * Кнопка пункта меню: иконка и текст; в свёрнутой панели — только иконка с подсказкой
+ * @param props - пропсы кнопки
+ * @returns кнопка, при tooltip — с подсказкой
+ */
+export declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, children, ...props }: SidebarMenuButtonPropsT): import("react").JSX.Element;
+/**
+ * Кнопка действия справа в пункте меню: например, «ещё»
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function SidebarMenuAction({ className, render, showOnHover, ...props }: SidebarMenuActionPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Счётчик справа в пункте меню: например, число непрочитанных
+ * @param props - пропсы счётчика
+ * @returns div
+ */
+export declare function SidebarMenuBadge({ className, ...props }: SidebarMenuBadgePropsT): import("react").JSX.Element;
+/**
+ * Заглушка пункта меню на время загрузки: ширина текста случайная, 50–90%
+ * @param props - пропсы заглушки
+ * @returns div
+ */
+export declare function SidebarMenuSkeleton({ className, showIcon, ...props }: SidebarMenuSkeletonPropsT): import("react").JSX.Element;
+/**
+ * Подменю: вложенный список с линией слева
+ * @param props - пропсы подменю
+ * @returns ul
+ */
+export declare function SidebarMenuSub({ className, ...props }: SidebarMenuSubPropsT): import("react").JSX.Element;
+/**
+ * Пункт подменю
+ * @param props - пропсы пункта
+ * @returns li
+ */
+export declare function SidebarMenuSubItem({ className, ...props }: SidebarMenuSubItemPropsT): import("react").JSX.Element;
+/**
+ * Ссылка пункта подменю
+ * @param props - пропсы ссылки
+ * @returns a
+ */
+export declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: SidebarMenuSubButtonPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;