@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/date-input/date-input.js

@@ -0,0 +1,147 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { DATE_FORMAT, DATE_MASK, texts } from "../../lib/locale.js";
+import { formatDate } from "../../lib/format.js";
+import { Calendar } from "../calendar/calendar.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../input-group/input-group.js";
+import { useControllableState } from "../../lib/use-controllable-state.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { isValid, parse } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/components/date-input/date-input.tsx
+/** Цифр в полной дате дд.мм.гггг */
+const DATE_DIGITS = 8;
+/**
+* Наложить маску дд.мм.гггг на цифры
+* @param raw - текст из поля
+* @returns текст с точками: 31.12.2026
+*/
+function maskDate(raw) {
+	const digits = raw.replace(/\D/g, "").slice(0, DATE_DIGITS);
+	const day = digits.slice(0, 2);
+	const month = digits.slice(2, 4);
+	const year = digits.slice(4, 8);
+	let result = day;
+	if (digits.length > 2) result += `.${month}`;
+	if (digits.length > 4) result += `.${year}`;
+	return result;
+}
+/**
+* Дата из текста, если он полный и дата существует
+* @param text - текст дд.мм.гггг
+* @returns дата или null
+*/
+function parseDate(text) {
+	if (text.replace(/\D/g, "").length !== DATE_DIGITS) return null;
+	const date = parse(text, DATE_FORMAT, /* @__PURE__ */ new Date());
+	if (!isValid(date)) return null;
+	return date;
+}
+/**
+* Поле даты: ввод по маске дд.мм.гггг и выбор в календаре
+* @param props - пропсы поля; value — дата, onValueChange — дата или null
+* @returns группа поля
+*/
+function DateInput({ value, defaultValue = null, onValueChange, showCalendar = true, calendarLabel = texts.pickDate, captionLayout = "label", startMonth, endMonth, disabledDates, groupClassName, placeholder = DATE_MASK, onChange, onKeyDown, disabled, ...props }) {
+	const [date, setDate] = useControllableState({
+		prop: value,
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		caller: "DateInput"
+	});
+	const [text, setText] = useState(() => date ? formatDate(date) : "");
+	const [open, setOpen] = useState(false);
+	const [month, setMonth] = useState(date ?? void 0);
+	const parsed = parseDate(text);
+	const isTextInSync = parsed?.getTime() === date?.getTime() || parsed === null && date === null;
+	const dateText = date ? formatDate(date) : "";
+	const shownText = isTextInSync ? text : dateText;
+	const selected = date ?? void 0;
+	const classes = cn(groupClassName);
+	/**
+	* Новый текст поля: наложить маску; полная верная дата уходит наружу
+	* @param event - событие изменения
+	*/
+	const handleChange = (event) => {
+		onChange?.(event);
+		const nextText = maskDate(event.target.value);
+		const nextDate = parseDate(nextText);
+		setText(nextText);
+		if (nextDate) {
+			setDate(nextDate);
+			setMonth(nextDate);
+		} else if (date !== null) setDate(null);
+	};
+	/**
+	* Стрелка вниз открывает календарь
+	* @param event - нажатие клавиши
+	*/
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.key === "ArrowDown" && showCalendar) {
+			event.preventDefault();
+			setOpen(true);
+		}
+	};
+	/**
+	* Выбрана дата в календаре: показать в поле и закрыть
+	* @param day - выбранная дата или undefined
+	*/
+	const selectDate = (day) => {
+		const nextDate = day ?? null;
+		const nextText = day ? formatDate(day) : "";
+		setDate(nextDate);
+		setText(nextText);
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		"data-slot": "date-input",
+		"data-disabled": disabled,
+		className: classes,
+		children: [/* @__PURE__ */ jsx(InputGroupInput, {
+			type: "text",
+			inputMode: "numeric",
+			autoComplete: "off",
+			placeholder,
+			value: shownText,
+			onChange: handleChange,
+			onKeyDown: handleKeyDown,
+			disabled,
+			...props
+		}), showCalendar && /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "inline-end",
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					render: /* @__PURE__ */ jsx(InputGroupButton, {
+						variant: "ghost",
+						size: "icon-xs",
+						"aria-label": calendarLabel,
+						disabled
+					}),
+					children: /* @__PURE__ */ jsx(CalendarIcon, {})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					className: "w-auto overflow-hidden p-0",
+					align: "end",
+					alignOffset: -8,
+					sideOffset: 10,
+					children: /* @__PURE__ */ jsx(Calendar, {
+						mode: "single",
+						selected,
+						onSelect: selectDate,
+						month,
+						onMonthChange: setMonth,
+						captionLayout,
+						startMonth,
+						endMonth,
+						disabled: disabledDates
+					})
+				})]
+			})
+		})]
+	});
+}
+export { DateInput };

package/dist/components/date-input/index.d.ts

@@ -0,0 +1,3 @@
+import { DateInputPropsT } from "./types.js";
+import { DateInput } from "./date-input.js";
+export { DateInput, type DateInputPropsT };

package/dist/components/date-input/index.js

@@ -0,0 +1 @@
+export { DateInput } from "./date-input.js";

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

@@ -0,0 +1,27 @@
+import { InputPropsT } from "../input/types.js";
+import { Matcher } from "react-day-picker";
+/**
+ * Пропсы поля даты
+ */
+export type DateInputPropsT = Omit<InputPropsT, 'type' | 'value' | 'defaultValue' | 'inputMode'> & {
+  /** Дата — контролируемый режим, вместе с onValueChange. null — дата не введена */
+  value?: Date | null;
+  /** Дата при первом рендере — неконтролируемый режим */
+  defaultValue?: Date | null;
+  /** Введена полная верная дата или поле очищено: дата или null */
+  onValueChange?: (value: Date | null) => void;
+  /** Показать кнопку календаря справа. По умолчанию true */
+  showCalendar?: boolean;
+  /** Подпись кнопки календаря для скринридеров. По умолчанию «Выберите дату» */
+  calendarLabel?: string;
+  /** label — заголовок месяца, dropdown — списки месяца и года. По умолчанию label */
+  captionLayout?: 'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years';
+  /** Первый месяц, до которого можно листать календарь */
+  startMonth?: Date;
+  /** Последний месяц, до которого можно листать календарь */
+  endMonth?: Date;
+  /** Недоступные в календаре даты: дата, массив, { before }, { after } или функция */
+  disabledDates?: Matcher | Matcher[];
+  /** Классы рамки поля */
+  groupClassName?: string;
+};

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

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

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

@@ -0,0 +1,74 @@
+"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 { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/date-picker/date-picker.tsx
+/**
+* Выбор даты: кнопка с датой в формате дд.мм.гггг открывает календарь
+* @param props - пропсы; остальные пропсы уходят на кнопку (id, aria-invalid, disabled)
+* @returns окно с календарём
+*/
+function DatePicker({ value, defaultValue = null, onValueChange, open, defaultOpen = false, onOpenChange, placeholder = texts.pickDate, dateFormat = DATE_FORMAT, closeOnSelect = true, captionLayout = "label", startMonth, endMonth, disabledDates, align = "start", className, contentClassName, ...props }) {
+	const [date, setDate] = useControllableState({
+		prop: value,
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		caller: "DatePicker"
+	});
+	const [isOpen, setOpen] = useControllableState({
+		prop: open,
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		caller: "DatePicker"
+	});
+	const isEmpty = date === null;
+	const label = date === null ? placeholder : formatDate(date, dateFormat);
+	const selected = date ?? void 0;
+	const classes = cn("w-[212px]", "justify-between", "text-left", "font-normal", "data-[empty=true]:text-muted-foreground", className);
+	const contentClasses = cn("w-auto", "overflow-hidden", "p-0", contentClassName);
+	/**
+	* Выбрана дата в календаре: сохранить и при необходимости закрыть
+	* @param day - выбранная дата или undefined, если выбор снят
+	*/
+	const selectDate = (day) => {
+		setDate(day ?? null);
+		if (closeOnSelect) setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: isOpen,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				"data-slot": "date-picker",
+				"data-empty": isEmpty,
+				variant: "outline",
+				className: classes,
+				...props
+			}),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: label
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground" })]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: contentClasses,
+			align,
+			children: /* @__PURE__ */ jsx(Calendar, {
+				mode: "single",
+				selected,
+				onSelect: selectDate,
+				defaultMonth: selected,
+				captionLayout,
+				startMonth,
+				endMonth,
+				disabled: disabledDates
+			})
+		})]
+	});
+}
+export { DatePicker };

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

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

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

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

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;