@archytechtor/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,33 @@
+import { ComponentProps } from "react";
+/**
+ * Пропсы таблицы
+ */
+export type TablePropsT = ComponentProps<'table'>;
+/**
+ * Пропсы шапки таблицы
+ */
+export type TableHeaderPropsT = ComponentProps<'thead'>;
+/**
+ * Пропсы тела таблицы
+ */
+export type TableBodyPropsT = ComponentProps<'tbody'>;
+/**
+ * Пропсы подвала таблицы
+ */
+export type TableFooterPropsT = ComponentProps<'tfoot'>;
+/**
+ * Пропсы строки таблицы
+ */
+export type TableRowPropsT = ComponentProps<'tr'>;
+/**
+ * Пропсы ячейки заголовка таблицы
+ */
+export type TableHeadPropsT = ComponentProps<'th'>;
+/**
+ * Пропсы ячейки таблицы
+ */
+export type TableCellPropsT = ComponentProps<'td'>;
+/**
+ * Пропсы подписи таблицы
+ */
+export type TableCaptionPropsT = ComponentProps<'caption'>;

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

@@ -0,0 +1,3 @@
+import { TabsContentPropsT, TabsListPropsT, TabsPropsT, TabsTriggerPropsT, tabsListVariants } from "./types.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
+export { Tabs, TabsContent, type TabsContentPropsT, TabsList, type TabsListPropsT, type TabsPropsT, TabsTrigger, type TabsTriggerPropsT, tabsListVariants };

package/dist/components/tabs/index.js

@@ -0,0 +1,3 @@
+import { tabsListVariants } from "./types.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,25 @@
+import { TabsContentPropsT, TabsListPropsT, TabsPropsT, TabsTriggerPropsT } from "./types.js";
+/**
+ * Вкладки: переключение между панелями содержимого
+ * @param props - пропсы вкладок
+ * @returns обёртка списка вкладок и панелей
+ */
+export declare function Tabs({ className, orientation, onValueChange, ...props }: TabsPropsT): import("react").JSX.Element;
+/**
+ * Список вкладок: кнопки переключения
+ * @param props - пропсы списка
+ * @returns элемент с role=tablist
+ */
+export declare function TabsList({ className, variant, children, ...props }: TabsListPropsT): import("react").JSX.Element;
+/**
+ * Вкладка: кнопка, открывающая панель с тем же value
+ * @param props - пропсы вкладки
+ * @returns элемент с role=tab
+ */
+export declare function TabsTrigger({ className, ...props }: TabsTriggerPropsT): import("react").JSX.Element;
+/**
+ * Панель вкладки: содержимое, видимое при выбранной вкладке
+ * @param props - пропсы панели
+ * @returns элемент с role=tabpanel
+ */
+export declare function TabsContent({ className, ...props }: TabsContentPropsT): import("react").JSX.Element;

package/dist/components/tabs/tabs.js

@@ -0,0 +1,81 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { tabsListVariants } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+// src/components/tabs/tabs.tsx
+/**
+* Вкладки: переключение между панелями содержимого
+* @param props - пропсы вкладок
+* @returns обёртка списка вкладок и панелей
+*/
+function Tabs$1({ className, orientation = "horizontal", onValueChange, ...props }) {
+	const classes = cn("group/tabs", "flex", "gap-2", "data-horizontal:flex-col", className);
+	/**
+	* Открыта другая вкладка: наружу только значение
+	* @param value - значение вкладки
+	*/
+	const handleValueChange = (value) => onValueChange?.(value);
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		"data-slot": "tabs",
+		"data-orientation": orientation,
+		orientation,
+		className: classes,
+		onValueChange: handleValueChange,
+		...props
+	});
+}
+/**
+* Список вкладок: кнопки переключения
+* @param props - пропсы списка
+* @returns элемент с role=tablist
+*/
+function TabsList({ className, variant = "default", children, ...props }) {
+	const classes = cn(tabsListVariants({ variant }), className);
+	return /* @__PURE__ */ jsxs(Tabs.List, {
+		"data-slot": "tabs-list",
+		"data-variant": variant,
+		className: classes,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(TabsIndicator, {})]
+	});
+}
+/**
+* Индикатор выбранной вкладки: подложка (default) или линия (line). Переезжает к новой вкладке
+* с пружиной; при «уменьшении движения» в системе — без анимации
+* @returns индикатор
+*/
+function TabsIndicator() {
+	const classes = cn("pointer-events-none", "absolute", "z-0", "transition-[left,top,width,height]", "duration-[430ms]", "ease-spring", "motion-reduce:transition-none", "group-data-[variant=default]/tabs-list:top-(--active-tab-top)", "group-data-[variant=default]/tabs-list:left-(--active-tab-left)", "group-data-[variant=default]/tabs-list:h-(--active-tab-height)", "group-data-[variant=default]/tabs-list:w-(--active-tab-width)", "group-data-[variant=default]/tabs-list:rounded-md", "group-data-[variant=default]/tabs-list:border", "group-data-[variant=default]/tabs-list:border-transparent", "group-data-[variant=default]/tabs-list:bg-background", "group-data-[variant=default]/tabs-list:shadow-sm", "dark:group-data-[variant=default]/tabs-list:border-input", "dark:group-data-[variant=default]/tabs-list:bg-input/30", "group-data-[variant=line]/tabs-list:bg-foreground", "group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:left-(--active-tab-left)", "group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:w-(--active-tab-width)", "group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:bottom-[calc(var(--active-tab-bottom)-5px)]", "group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:h-0.5", "group-data-vertical/tabs:group-data-[variant=line]/tabs-list:top-(--active-tab-top)", "group-data-vertical/tabs:group-data-[variant=line]/tabs-list:h-(--active-tab-height)", "group-data-vertical/tabs:group-data-[variant=line]/tabs-list:right-[calc(var(--active-tab-right)-4px)]", "group-data-vertical/tabs:group-data-[variant=line]/tabs-list:w-0.5");
+	return /* @__PURE__ */ jsx(Tabs.Indicator, {
+		"data-slot": "tabs-indicator",
+		className: classes
+	});
+}
+/**
+* Вкладка: кнопка, открывающая панель с тем же value
+* @param props - пропсы вкладки
+* @returns элемент с role=tab
+*/
+function TabsTrigger({ className, ...props }) {
+	const classes = cn("relative", "inline-flex", "h-[calc(100%-1px)]", "flex-1", "items-center", "justify-center", "gap-1.5", "rounded-md", "border", "border-transparent", "px-1.5", "py-0.5", "text-sm", "font-medium", "whitespace-nowrap", "text-foreground/60", "transition-[color,scale]", "duration-150", "active:scale-[0.98]", "motion-reduce:active:scale-100", "cursor-pointer", "hover:text-foreground", "dark:text-muted-foreground", "dark:hover:text-foreground", "group-data-vertical/tabs:w-full", "group-data-vertical/tabs:justify-start", "focus-visible:border-ring", "focus-visible:ring-[3px]", "focus-visible:ring-ring/50", "focus-visible:outline-1", "focus-visible:outline-ring", "data-disabled:cursor-not-allowed", "data-disabled:opacity-50", "data-disabled:hover:text-foreground/60", "dark:data-disabled:hover:text-muted-foreground", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*=size-])]:size-4", "has-data-[icon=inline-end]:pr-1", "has-data-[icon=inline-start]:pl-1", "z-10", "data-active:text-foreground", "dark:data-active:text-foreground", className);
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "tabs-trigger",
+		className: classes,
+		...props
+	});
+}
+/**
+* Панель вкладки: содержимое, видимое при выбранной вкладке
+* @param props - пропсы панели
+* @returns элемент с role=tabpanel
+*/
+function TabsContent({ className, ...props }) {
+	const classes = cn("flex-1", "text-sm", "outline-none", className);
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		"data-slot": "tabs-content",
+		className: classes,
+		...props
+	});
+}
+export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger };

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

@@ -0,0 +1,61 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { VariantProps } from "class-variance-authority";
+import { Tabs } from "@base-ui/react/tabs";
+/**
+ * Ориентация вкладок: расположение списка и навигация стрелками
+ */
+type TabsOrientationT = 'horizontal' | 'vertical';
+/**
+ * Пропсы вкладок
+ */
+export type TabsPropsT = PartPropsT<Omit<Tabs.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'orientation'>> & {
+  /** Значение открытой вкладки — контролируемый режим, вместе с onValueChange */
+  value?: string;
+  /** Значение открытой вкладки при первом рендере — неконтролируемый режим */
+  defaultValue?: string;
+  /** Открыта другая вкладка: её значение */
+  onValueChange?: (value: string) => void;
+  /** Ориентация: список вкладок сверху (horizontal) или слева (vertical) */
+  orientation?: TabsOrientationT;
+};
+/**
+ * Стили списка вкладок: обычный (на подложке) или линия под активной вкладкой.
+ * Экспортируются, чтобы оформить списком вкладок другой элемент
+ */
+export declare const tabsListVariants: (props?: ({
+  variant?: "default" | "line" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты оформления списка вкладок
+ */
+type TabsListVariantsT = VariantProps<typeof tabsListVariants>;
+/**
+ * Пропсы списка вкладок
+ */
+export type TabsListPropsT = PartPropsT<Tabs.List.Props> & {
+  /** Оформление: на подложке (default) или линия под активной вкладкой (line) */
+  variant?: TabsListVariantsT['variant'];
+  /** Переход фокуса стрелками: с последней вкладки на первую и обратно. По умолчанию true */
+  loopFocus?: boolean;
+  /** true — вкладка открывается при фокусе стрелками; false (по умолчанию) — по Enter или Space */
+  activateOnFocus?: boolean;
+};
+/**
+ * Пропсы вкладки
+ */
+export type TabsTriggerPropsT = PartPropsT<Omit<Tabs.Tab.Props, 'value'>> & {
+  /** Значение вкладки: совпадает со value панели, которую она открывает */
+  value: string;
+  /** Отключить вкладку: не выбирается и пропускается при навигации стрелками */
+  disabled?: boolean;
+};
+/**
+ * Пропсы панели вкладки
+ */
+export type TabsContentPropsT = PartPropsT<Omit<Tabs.Panel.Props, 'value'>> & {
+  /** Значение вкладки, которая открывает панель */
+  value: string;
+  /** Держать панель в DOM, даже когда вкладка не выбрана: для анимаций и сохранения состояния */
+  keepMounted?: boolean;
+};
+export {};

package/dist/components/tabs/types.js

@@ -0,0 +1,18 @@
+import { cva } from "class-variance-authority";
+// src/components/tabs/types.ts
+/**
+* Стили списка вкладок: обычный (на подложке) или линия под активной вкладкой.
+* Экспортируются, чтобы оформить списком вкладок другой элемент
+*/
+const tabsListVariants = cva([
+	"group/tabs-list relative inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground",
+	"group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+	"data-[variant=line]:rounded-none"
+], {
+	variants: { variant: {
+		default: "bg-muted",
+		line: "gap-1 bg-transparent"
+	} },
+	defaultVariants: { variant: "default" }
+});
+export { tabsListVariants };

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

@@ -0,0 +1,3 @@
+import { TextareaPropsT } from "./types.js";
+import { Textarea } from "./textarea.js";
+export { Textarea, type TextareaPropsT };

package/dist/components/textarea/index.js

@@ -0,0 +1 @@
+export { Textarea } from "./textarea.js";

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,7 @@
+import { TextareaPropsT } from "./types.js";
+/**
+ * Многострочное поле ввода: высота подстраивается под текст
+ * @param props - пропсы поля
+ * @returns элемент textarea
+ */
+export declare function Textarea({ className, ...props }: TextareaPropsT): import("react").JSX.Element;

package/dist/components/textarea/textarea.js

@@ -0,0 +1,17 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/textarea/textarea.tsx
+/**
+* Многострочное поле ввода: высота подстраивается под текст
+* @param props - пропсы поля
+* @returns элемент textarea
+*/
+function Textarea({ className, ...props }) {
+	const classes = cn("flex", "field-sizing-content", "min-h-16", "w-full", "rounded-lg", "border", "border-input", "bg-transparent", "px-2.5", "py-2", "text-base", "transition-colors", "outline-none", "placeholder:text-muted-foreground", "focus-visible:border-ring", "focus-visible:ring-3", "focus-visible:ring-ring/50", "disabled:cursor-not-allowed", "disabled:bg-input/50", "disabled:opacity-50", "aria-invalid:border-destructive", "aria-invalid:ring-3", "aria-invalid:ring-destructive/20", "md:text-sm", "dark:bg-input/30", "dark:disabled:bg-input/80", "dark:aria-invalid:border-destructive/50", "dark:aria-invalid:ring-destructive/40", className);
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: classes,
+		...props
+	});
+}
+export { Textarea };

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

@@ -0,0 +1,26 @@
+import { ChangeEvent, ComponentProps } from "react";
+/**
+ * Пропсы многострочного поля
+ */
+export type TextareaPropsT = Omit<ComponentProps<'textarea'>, 'value' | 'defaultValue' | 'placeholder' | 'rows' | 'maxLength' | 'disabled' | 'readOnly' | 'required' | 'aria-invalid' | 'onChange'> & {
+  /** Значение поля — контролируемый режим, вместе с onChange */
+  value?: string;
+  /** Значение при первом рендере — неконтролируемый режим */
+  defaultValue?: string;
+  /** Подсказка, пока поле пустое */
+  placeholder?: string;
+  /** Начальная высота в строках. По умолчанию высота растёт вместе с текстом */
+  rows?: number;
+  /** Наибольшее число символов */
+  maxLength?: number;
+  /** Отключённое состояние: поле нельзя изменить и выделить, оно не отправляется с формой */
+  disabled?: boolean;
+  /** Только для чтения: текст виден и выделяется, но не меняется */
+  readOnly?: boolean;
+  /** Обязательное поле: форма не отправится, пока оно пустое */
+  required?: boolean;
+  /** Ошибка: красная рамка и объявление скринридеру, что значение неверное */
+  'aria-invalid'?: boolean;
+  /** Текст изменился */
+  onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+};

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

@@ -0,0 +1,3 @@
+import { ToastActionI, ToastActionPropsT, ToastClosePropsT, ToastContentPropsT, ToastDescriptionPropsT, ToastFunctionT, ToastManagerT, ToastOptionsI, ToastPositionT, ToastPromiseTextsI, ToastPropsT, ToastTitlePropsT, ToastTypeT, ToastViewportPropsT, ToasterPropsT } from "./types.js";
+import { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastTitle, ToastViewport, Toaster, createToast, createToastManager, toast, useToastManager } from "./toast.js";
+export { Toast, ToastAction, type ToastActionI, type ToastActionPropsT, ToastClose, type ToastClosePropsT, ToastContent, type ToastContentPropsT, ToastDescription, type ToastDescriptionPropsT, type ToastFunctionT, type ToastManagerT, type ToastOptionsI, type ToastPositionT, type ToastPromiseTextsI, type ToastPropsT, ToastTitle, type ToastTitlePropsT, type ToastTypeT, ToastViewport, type ToastViewportPropsT, Toaster, type ToasterPropsT, createToast, createToastManager, toast, useToastManager };

package/dist/components/toast/index.js

@@ -0,0 +1 @@
+export { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastTitle, ToastViewport, Toaster, createToast, createToastManager, toast, useToastManager } from "./toast.js";

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,63 @@
+import { ToastActionPropsT, ToastClosePropsT, ToastContentPropsT, ToastDescriptionPropsT, ToastFunctionT, ToastManagerT, ToastPropsT, ToastTitlePropsT, ToastViewportPropsT, ToasterPropsT } from "./types.js";
+import { Toast } from "@base-ui/react/toast";
+/** Создать свой менеджер уведомлений: для отдельного Toaster */
+export declare const createToastManager: typeof Toast.createToastManager;
+/**
+ * Функция показа уведомлений для менеджера
+ * @param manager - менеджер, в который добавляются уведомления
+ * @returns toast с методами success, info, warning, error, loading, promise, dismiss
+ */
+export declare function createToast(manager: ToastManagerT): ToastFunctionT;
+/** Показать уведомление в общем Toaster: toast('Текст'), toast.success(...), toast.promise(...) */
+export declare const toast: ToastFunctionT;
+/**
+ * Область уведомлений: стопка в углу экрана, раскрывается при наведении
+ * @param props - пропсы области
+ * @returns область с role="region"
+ */
+export declare function ToastViewport({ className, position, ...props }: ToastViewportPropsT): import("react").JSX.Element;
+/**
+ * Уведомление: карточка в стопке; смахивается к краю экрана
+ * @param props - пропсы уведомления; toast — объект из useToastManager().toasts
+ * @returns карточка уведомления
+ */
+declare function Toast$1({ className, ...props }: ToastPropsT): import("react").JSX.Element;
+/**
+ * Содержимое уведомления: иконка, текст и кнопки в строку; у задних карточек стопки скрыто
+ * @param props - пропсы содержимого
+ * @returns строка содержимого
+ */
+export declare function ToastContent({ className, ...props }: ToastContentPropsT): import("react").JSX.Element;
+/**
+ * Заголовок уведомления: по умолчанию — первый аргумент toast()
+ * @param props - пропсы заголовка
+ * @returns заголовок
+ */
+export declare function ToastTitle({ className, ...props }: ToastTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание уведомления: по умолчанию — description из параметров
+ * @param props - пропсы описания
+ * @returns абзац
+ */
+export declare function ToastDescription({ className, ...props }: ToastDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Кнопка действия: по умолчанию — action из параметров, оформлена как Button outline sm
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function ToastAction({ className, render, ...props }: ToastActionPropsT): import("react").JSX.Element;
+/**
+ * Кнопка закрытия уведомления: крестик
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function ToastClose({ className, children, label, render, ...props }: ToastClosePropsT): import("react").JSX.Element;
+/**
+ * Контейнер уведомлений: ставится один раз в корень приложения
+ * @param props - пропсы контейнера
+ * @returns провайдер с областью уведомлений
+ */
+export declare function Toaster({ children, position, toastManager, closeButton, viewportLabel, ...props }: ToasterPropsT): import("react").JSX.Element;
+/** Хук: список уведомлений и методы add, close, update, promise ближайшего Toaster */
+export declare const useToastManager: typeof Toast.useToastManager;
+export { Toast$1 as Toast };