@archytechtor/ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 archytechtor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,106 @@
-# Temporary Holding Version
+# @archytechtor/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Библиотека React-компонентов на Base UI и Tailwind CSS v4 для русскоязычных проектов
+(локализации нет: даты, время, телефоны и денежные суммы только в российских форматах, RTL-вёрстка не поддерживается).
+Все тексты по умолчанию на русском, каждый переопределяется пропом.
+
+## Установка
+
+```bash
+pnpm add @archytechtor/ui
+```
+
+```bash
+npm install @archytechtor/ui
+```
+
+```bash
+yarn add @archytechtor/ui
+```
+
+Playground со всеми компонентами: https://archytechtor-ui.web.app/
+
+## Зависимости
+
+Обязательные peer-зависимости: `react` и `react-dom` версии 19+, `tailwindcss` версии 4+.
+Всё остальное (`@base-ui/react`, `recharts`, `react-day-picker`, `react-hook-form` и другие)
+ставится вместе с пакетом, дополнительно ничего устанавливать не нужно.
+
+## Подключение стилей
+
+В глобальном CSS приложения:
+
+```css
+@import "tailwindcss";
+@import "@archytechtor/ui/styles.css";
+```
+
+## Темизация
+
+Цвета, радиусы и прочие токены задаются CSS-переменными в OKLCH. Чтобы изменить тему,
+переопределите нужные переменные:
+
+```css
+:root {
+	--primary: oklch(0.72 0.12 350);
+	--radius: 0.75rem;
+}
+```
+
+Тёмная тема включается классом `.dark` на корневом элементе:
+
+```html
+<html class="dark">
+```
+
+## Шрифты
+
+Шрифты не поставляются: компоненты берут `font-sans` и `font-mono` из вашего Tailwind.
+Установите шрифт с поддержкой кириллицы (например, Inter) и задайте переменные в `@theme`:
+
+```bash
+pnpm add @fontsource-variable/inter
+```
+
+```css
+@import "tailwindcss";
+@import "@archytechtor/ui/styles.css";
+@import "@fontsource-variable/inter";
+
+@theme {
+	--font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+	--font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
+}
+```
+
+В Next.js вместо этого можно подключить `next/font` и присвоить его переменную в `--font-sans`.
+
+## Использование
+
+Через общий вход:
+
+```tsx
+import { Button } from "@archytechtor/ui";
+
+export const Example = () => <Button>Сохранить</Button>;
+```
+
+Или точечно, по компонентам:
+
+```tsx
+import { Dialog, DialogContent, DialogTrigger } from "@archytechtor/ui/dialog";
+```
+
+У каждой части компонента есть `className` и атрибут `data-slot="<компонент>-<часть>"`
+для стилизации снаружи. Вместо `asChild` используется проп `render`.
+
+## Компоненты
+
+accordion, alert, alert-dialog, aspect-ratio, attachment, avatar, badge, breadcrumb, bubble,
+button, button-group, calendar, card, carousel, chart, checkbox, code-block, collapsible,
+combobox, command, context-menu, data-table, date-input, date-picker, date-range-picker,
+dialog, drawer, dropdown-menu, empty, field, form, hover-card, input, input-group, input-otp,
+item, kbd, label, marker, menubar, message, message-scroller, money-input, native-select,
+navigation-menu, number-stepper, pagination, phone-input, popover, progress, questionnaire,
+radio-group, resizable, scroll-area, select, separator, sheet, sidebar, skeleton, slider,
+spinner, switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip, trace, typography.

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,25 @@
+import { AccordionContentPropsT, AccordionItemPropsT, AccordionPropsT, AccordionTriggerPropsT } from "./types.js";
+/**
+ * Аккордеон: вертикальный список секций, которые раскрываются по нажатию на заголовок
+ * @param props - пропсы аккордеона
+ * @returns обёртка секций
+ */
+export declare function Accordion({ className, onValueChange, ...props }: AccordionPropsT): import("react").JSX.Element;
+/**
+ * Секция аккордеона: заголовок и раскрываемое содержимое
+ * @param props - пропсы секции
+ * @returns обёртка секции
+ */
+export declare function AccordionItem({ className, ...props }: AccordionItemPropsT): import("react").JSX.Element;
+/**
+ * Заголовок секции: кнопка, которая раскрывает и скрывает содержимое
+ * @param props - пропсы заголовка
+ * @returns заголовок h3 с кнопкой и стрелкой
+ */
+export declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerPropsT): import("react").JSX.Element;
+/**
+ * Содержимое секции: раскрывается с анимацией высоты
+ * @param props - пропсы содержимого; className применяется к внутреннему блоку с отступами
+ * @returns раскрываемый блок
+ */
+export declare function AccordionContent({ className, children, ...props }: AccordionContentPropsT): import("react").JSX.Element;

package/dist/components/accordion/accordion.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Accordion } from "@base-ui/react/accordion";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/accordion/accordion.tsx
+/**
+* Аккордеон: вертикальный список секций, которые раскрываются по нажатию на заголовок
+* @param props - пропсы аккордеона
+* @returns обёртка секций
+*/
+function Accordion$1({ className, onValueChange, ...props }) {
+	const classes = cn("flex", "w-full", "flex-col", className);
+	/**
+	* Изменился набор открытых секций: наружу только значения
+	* @param value - значения открытых секций
+	*/
+	const handleValueChange = (value) => onValueChange?.(value);
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		"data-slot": "accordion",
+		className: classes,
+		onValueChange: handleValueChange,
+		...props
+	});
+}
+/**
+* Секция аккордеона: заголовок и раскрываемое содержимое
+* @param props - пропсы секции
+* @returns обёртка секции
+*/
+function AccordionItem({ className, ...props }) {
+	const classes = cn("not-last:border-b", className);
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		"data-slot": "accordion-item",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок секции: кнопка, которая раскрывает и скрывает содержимое
+* @param props - пропсы заголовка
+* @returns заголовок h3 с кнопкой и стрелкой
+*/
+function AccordionTrigger({ className, children, ...props }) {
+	const classes = cn("group/accordion-trigger", "relative", "flex", "flex-1", "items-start", "justify-between", "rounded-lg", "border", "border-transparent", "py-2.5", "text-left", "text-sm", "font-medium", "transition-all", "outline-none", "cursor-pointer", "hover:underline", "data-disabled:cursor-not-allowed", "data-disabled:opacity-50", "data-disabled:hover:no-underline", "focus-visible:border-ring", "focus-visible:ring-3", "focus-visible:ring-ring/50", "focus-visible:after:border-ring", "**:data-[slot=accordion-trigger-icon]:ml-auto", "**:data-[slot=accordion-trigger-icon]:size-4", "**:data-[slot=accordion-trigger-icon]:text-muted-foreground", className);
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		"data-slot": "accordion-header",
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: classes,
+			...props,
+			children: [
+				children,
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					"data-slot": "accordion-trigger-icon",
+					"aria-hidden": true,
+					className: cn("pointer-events-none", "shrink-0", "group-aria-expanded/accordion-trigger:hidden")
+				}),
+				/* @__PURE__ */ jsx(ChevronUpIcon, {
+					"data-slot": "accordion-trigger-icon",
+					"aria-hidden": true,
+					className: cn("pointer-events-none", "hidden", "shrink-0", "group-aria-expanded/accordion-trigger:inline")
+				})
+			]
+		})
+	});
+}
+/**
+* Содержимое секции: раскрывается с анимацией высоты
+* @param props - пропсы содержимого; className применяется к внутреннему блоку с отступами
+* @returns раскрываемый блок
+*/
+function AccordionContent({ className, children, ...props }) {
+	const panelClasses = cn("h-(--accordion-panel-height)", "overflow-hidden", "text-sm", "transition-[height]", "duration-200", "ease-out", "data-starting-style:h-0", "data-ending-style:h-0");
+	const classes = cn("pt-0", "pb-2.5", "[&_a]:underline", "[&_a]:underline-offset-3", "[&_a]:hover:text-foreground", "[&_p:not(:last-child)]:mb-4", className);
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		"data-slot": "accordion-content",
+		className: panelClasses,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "accordion-content-inner",
+			className: classes,
+			children
+		})
+	});
+}
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -0,0 +1,3 @@
+import { AccordionContentPropsT, AccordionItemPropsT, AccordionPropsT, AccordionTriggerPropsT } from "./types.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion.js";
+export { Accordion, AccordionContent, type AccordionContentPropsT, AccordionItem, type AccordionItemPropsT, type AccordionPropsT, AccordionTrigger, type AccordionTriggerPropsT };

package/dist/components/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion.js";

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

@@ -0,0 +1,39 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { Accordion } from "@base-ui/react/accordion";
+/**
+ * Пропсы аккордеона
+ */
+export type AccordionPropsT = PartPropsT<Omit<Accordion.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'orientation' | 'loopFocus'>> & {
+  /** Значения открытых секций — контролируемый режим, вместе с onValueChange */
+  value?: string[];
+  /** Значения открытых секций при первом рендере — неконтролируемый режим */
+  defaultValue?: string[];
+  /** Изменился набор открытых секций: значения открытых */
+  onValueChange?: (value: string[]) => void;
+  /** Можно открыть несколько секций сразу. По умолчанию false — открыта одна */
+  multiple?: boolean;
+  /** Отключить все секции */
+  disabled?: boolean;
+  /** Держать содержимое закрытых секций в DOM: для поиска по странице и своих анимаций */
+  keepMounted?: boolean;
+};
+/**
+ * Пропсы секции аккордеона
+ */
+export type AccordionItemPropsT = PartPropsT<Omit<Accordion.Item.Props, 'value'>> & {
+  /** Значение секции: попадает в value аккордеона, когда секция открыта */
+  value: string;
+  /** Отключить секцию: не открывается и не закрывается */
+  disabled?: boolean;
+};
+/**
+ * Пропсы заголовка секции
+ */
+export type AccordionTriggerPropsT = PartPropsT<Accordion.Trigger.Props>;
+/**
+ * Пропсы содержимого секции
+ */
+export type AccordionContentPropsT = PartPropsT<Accordion.Panel.Props> & {
+  /** Держать содержимое в DOM, даже когда секция закрыта: для поиска по странице и своих анимаций */
+  keepMounted?: boolean;
+};

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,25 @@
+import { AlertActionPropsT, AlertDescriptionPropsT, AlertPropsT, AlertTitlePropsT } from "./types.js";
+/**
+ * Уведомление: заметное сообщение для пользователя, объявляется скринридером (role="alert")
+ * @param props - пропсы уведомления
+ * @returns уведомление
+ */
+export declare function Alert({ className, variant, ...props }: AlertPropsT): import("react").JSX.Element;
+/**
+ * Заголовок уведомления
+ * @param props - пропсы заголовка
+ * @returns заголовок
+ */
+export declare function AlertTitle({ className, ...props }: AlertTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание уведомления: подробности под заголовком
+ * @param props - пропсы описания
+ * @returns описание
+ */
+export declare function AlertDescription({ className, ...props }: AlertDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Действие в правом верхнем углу уведомления: кнопка
+ * @param props - пропсы действия
+ * @returns блок действия
+ */
+export declare function AlertAction({ className, ...props }: AlertActionPropsT): import("react").JSX.Element;

package/dist/components/alert/alert.js

@@ -0,0 +1,59 @@
+import { cn } from "../../lib/utils.js";
+import { alertVariants } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/alert/alert.tsx
+/**
+* Уведомление: заметное сообщение для пользователя, объявляется скринридером (role="alert")
+* @param props - пропсы уведомления
+* @returns уведомление
+*/
+function Alert({ className, variant = "default", ...props }) {
+	const classes = cn(alertVariants({ variant }), className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert",
+		"data-variant": variant,
+		role: "alert",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок уведомления
+* @param props - пропсы заголовка
+* @returns заголовок
+*/
+function AlertTitle({ className, ...props }) {
+	const classes = cn("font-medium", "group-has-[>svg]/alert:col-start-2", "[&_a]:underline", "[&_a]:underline-offset-3", "[&_a]:hover:text-foreground", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание уведомления: подробности под заголовком
+* @param props - пропсы описания
+* @returns описание
+*/
+function AlertDescription({ className, ...props }) {
+	const classes = cn("text-sm", "text-balance", "text-muted-foreground", "md:text-pretty", "[&_a]:underline", "[&_a]:underline-offset-3", "[&_a]:hover:text-foreground", "[&_p:not(:last-child)]:mb-4", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Действие в правом верхнем углу уведомления: кнопка
+* @param props - пропсы действия
+* @returns блок действия
+*/
+function AlertAction({ className, ...props }) {
+	const classes = cn("absolute", "top-2", "right-2", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-action",
+		className: classes,
+		...props
+	});
+}
+export { Alert, AlertAction, AlertDescription, AlertTitle };

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

@@ -0,0 +1,3 @@
+import { AlertActionPropsT, AlertDescriptionPropsT, AlertPropsT, AlertTitlePropsT, alertVariants } from "./types.js";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert.js";
+export { Alert, AlertAction, type AlertActionPropsT, AlertDescription, type AlertDescriptionPropsT, type AlertPropsT, AlertTitle, type AlertTitlePropsT, alertVariants };

package/dist/components/alert/index.js

@@ -0,0 +1,3 @@
+import { alertVariants } from "./types.js";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert.js";
+export { Alert, AlertAction, AlertDescription, AlertTitle, alertVariants };

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

@@ -0,0 +1,32 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+/**
+ * Стили уведомления: вариант оформления.
+ * Иконка первым дочерним элементом занимает левую колонку, заголовок и описание — правую.
+ */
+export declare const alertVariants: (props?: ({
+  variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты оформления уведомления
+ */
+export type AlertVariantsT = VariantProps<typeof alertVariants>;
+/**
+ * Пропсы уведомления
+ */
+export type AlertPropsT = ComponentProps<'div'> & {
+  /** Оформление: обычное или ошибка */
+  variant?: AlertVariantsT['variant'];
+};
+/**
+ * Пропсы заголовка уведомления
+ */
+export type AlertTitlePropsT = ComponentProps<'div'>;
+/**
+ * Пропсы описания уведомления
+ */
+export type AlertDescriptionPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы действия уведомления
+ */
+export type AlertActionPropsT = ComponentProps<'div'>;

package/dist/components/alert/types.js

@@ -0,0 +1,19 @@
+import { cva } from "class-variance-authority";
+// src/components/alert/types.ts
+/**
+* Стили уведомления: вариант оформления.
+* Иконка первым дочерним элементом занимает левую колонку, заголовок и описание — правую.
+*/
+const alertVariants = cva([
+	"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm",
+	"has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18",
+	"has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2",
+	"*:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*=size-])]:size-4"
+], {
+	variants: { variant: {
+		default: "bg-card text-card-foreground",
+		destructive: ["bg-card text-destructive", "*:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"]
+	} },
+	defaultVariants: { variant: "default" }
+});
+export { alertVariants };

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

@@ -0,0 +1,73 @@
+import { AlertDialogActionPropsT, AlertDialogCancelPropsT, AlertDialogContentPropsT, AlertDialogDescriptionPropsT, AlertDialogFooterPropsT, AlertDialogHeaderPropsT, AlertDialogMediaPropsT, AlertDialogOverlayPropsT, AlertDialogPortalPropsT, AlertDialogPropsT, AlertDialogTitlePropsT, AlertDialogTriggerPropsT } from "./types.js";
+/**
+ * Диалог подтверждения: прерывает работу и ждёт ответа. Не закрывается кликом мимо окна
+ * @param props - пропсы диалога
+ * @returns корень диалога без своей разметки
+ */
+export declare function AlertDialog({ onOpenChange, ...props }: AlertDialogPropsT): import("react").JSX.Element;
+/**
+ * Кнопка открытия диалога. Свою кнопку — через render={<Button />}
+ * @param props - пропсы кнопки
+ * @returns кнопка с aria-haspopup="dialog"
+ */
+export declare function AlertDialogTrigger(props: AlertDialogTriggerPropsT): import("react").JSX.Element;
+/**
+ * Портал: переносит оверлей и окно в конец body
+ * @param props - пропсы портала
+ * @returns портал
+ */
+export declare function AlertDialogPortal(props: AlertDialogPortalPropsT): import("react").JSX.Element;
+/**
+ * Оверлей: затемняет и размывает страницу под диалогом
+ * @param props - пропсы оверлея
+ * @returns полупрозрачный слой на весь экран
+ */
+export declare function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayPropsT): import("react").JSX.Element;
+/**
+ * Окно диалога: рендерится в портале поверх оверлея, по центру экрана
+ * @param props - пропсы окна
+ * @returns портал с оверлеем и окном
+ */
+export declare function AlertDialogContent({ className, size, ...props }: AlertDialogContentPropsT): import("react").JSX.Element;
+/**
+ * Шапка диалога: иконка, заголовок и описание. В размере sm и на узком экране — по центру
+ * @param props - пропсы шапки
+ * @returns блок
+ */
+export declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderPropsT): import("react").JSX.Element;
+/**
+ * Подвал диалога: кнопки отмены и действия
+ * @param props - пропсы подвала
+ * @returns блок с серым фоном и разделителем
+ */
+export declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterPropsT): import("react").JSX.Element;
+/**
+ * Иконка диалога: квадрат с иконкой над заголовком или слева от него
+ * @param props - пропсы иконки
+ * @returns блок
+ */
+export declare function AlertDialogMedia({ className, ...props }: AlertDialogMediaPropsT): import("react").JSX.Element;
+/**
+ * Заголовок диалога: озвучивается при открытии
+ * @param props - пропсы заголовка
+ * @returns h2
+ */
+export declare function AlertDialogTitle({ className, ...props }: AlertDialogTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание диалога: озвучивается после заголовка
+ * @param props - пропсы описания
+ * @returns p
+ */
+export declare function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Кнопка действия: подтверждает и закрывает диалог
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function AlertDialogAction({ variant, size, ...props }: AlertDialogActionPropsT): import("react").JSX.Element;
+/**
+ * Кнопка отмены: закрывает диалог без действия
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function AlertDialogCancel({ variant, size, ...props }: AlertDialogCancelPropsT): import("react").JSX.Element;