@archytechtor/ui 0.0.0-stage → 0.1.0

package/dist/components/data-table/data-table.js

@@ -0,0 +1,283 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { ROW_FORMS, texts } from "../../lib/locale.js";
+import { pluralize } from "../../lib/format.js";
+import { Button } from "../button/button.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../dropdown-menu/dropdown-menu.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select/select.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
+import { dataTableFeatures } from "./data-table-features.js";
+import { ArrowDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, EyeOffIcon, Settings2Icon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FlexRender, createColumnHelper, useTable } from "@tanstack/react-table";
+// src/components/data-table/data-table.tsx
+/**
+* Помощник для описания столбцов таблицы с нужным типом строк
+* @returns помощник: accessor(), display(), columns()
+*/
+function createDataTableColumnHelper() {
+	return createColumnHelper();
+}
+/**
+* Создать таблицу: сортировка, фильтры, страницы, выбор строк и скрытие столбцов уже подключены
+* @param options - data, columns и остальные параметры useTable
+* @returns экземпляр таблицы для DataTable и помощников
+*/
+function useDataTable(options) {
+	return useTable({
+		features: dataTableFeatures,
+		...options
+	});
+}
+/**
+* Таблица данных: заголовки и строки текущей страницы в рамке
+* @param props - пропсы; table — экземпляр из useDataTable
+* @returns div с таблицей
+*/
+function DataTable({ table, emptyText = texts.empty, className, ...props }) {
+	const classes = cn("overflow-hidden", "rounded-md", "border", className);
+	const rows = table.getRowModel().rows;
+	const columnCount = table.getVisibleLeafColumns().length;
+	const headerRows = [];
+	const bodyRows = [];
+	for (const headerGroup of table.getHeaderGroups()) {
+		const cells = [];
+		for (const header of headerGroup.headers) {
+			const content = header.isPlaceholder ? null : /* @__PURE__ */ jsx(FlexRender, { header });
+			cells.push(/* @__PURE__ */ jsx(TableHead, { children: content }, header.id));
+		}
+		headerRows.push(/* @__PURE__ */ jsx(TableRow, { children: cells }, headerGroup.id));
+	}
+	for (const row of rows) {
+		const cells = [];
+		const state = row.getIsSelected() ? "selected" : void 0;
+		for (const cell of row.getVisibleCells()) cells.push(/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(FlexRender, { cell }) }, cell.id));
+		bodyRows.push(/* @__PURE__ */ jsx(TableRow, {
+			"data-state": state,
+			children: cells
+		}, row.id));
+	}
+	if (bodyRows.length === 0) bodyRows.push(/* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		colSpan: columnCount,
+		className: "h-24 text-center",
+		children: emptyText
+	}) }, "empty"));
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table",
+		className: classes,
+		...props,
+		children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: headerRows }), /* @__PURE__ */ jsx(TableBody, { children: bodyRows })] })
+	});
+}
+/**
+* Заголовок столбца с меню: сортировка по возрастанию и убыванию, скрыть столбец
+* @param props - столбец и название
+* @returns div с кнопкой меню или просто название, если сортировать нельзя
+*/
+function DataTableColumnHeader({ column, title, ascendingLabel = texts.sortAscending, descendingLabel = texts.sortDescending, hideLabel = texts.hide, className, ...props }) {
+	if (!column.getCanSort()) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table-column-header",
+		className: cn(className),
+		...props,
+		children: title
+	});
+	const sorted = column.getIsSorted();
+	let icon = /* @__PURE__ */ jsx(ChevronsUpDownIcon, {});
+	if (sorted === "desc") icon = /* @__PURE__ */ jsx(ArrowDownIcon, {});
+	else if (sorted === "asc") icon = /* @__PURE__ */ jsx(ArrowUpIcon, {});
+	const classes = cn("flex", "items-center", "gap-2", className);
+	const headerButtonClasses = "-ml-3 h-8 data-open:bg-accent in-[th:first-child]:-ml-2";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "data-table-column-header",
+		className: classes,
+		...props,
+		children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				className: headerButtonClasses
+			}),
+			children: [/* @__PURE__ */ jsx("span", { children: title }), icon]
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "start",
+			className: "w-auto",
+			children: [
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: () => column.toggleSorting(false),
+					children: [/* @__PURE__ */ jsx(ArrowUpIcon, {}), ascendingLabel]
+				}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: () => column.toggleSorting(true),
+					children: [/* @__PURE__ */ jsx(ArrowDownIcon, {}), descendingLabel]
+				}),
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: () => column.toggleVisibility(false),
+					children: [/* @__PURE__ */ jsx(EyeOffIcon, {}), hideLabel]
+				})
+			]
+		})] })
+	});
+}
+/** Размеры страницы в выпадающем списке */
+const PAGE_SIZES = [
+	10,
+	20,
+	25,
+	30,
+	40,
+	50
+];
+/**
+* Пагинация таблицы: выбрано строк, размер страницы, номер страницы и кнопки перехода
+* @param props - пропсы; table — экземпляр из useDataTable
+* @returns div
+*/
+function DataTablePagination({ table, pageSizes = PAGE_SIZES, showSelected = true, className, ...props }) {
+	const { pageIndex, pageSize } = table.state.pagination;
+	const selectedCount = table.getFilteredSelectedRowModel().rows.length;
+	const totalCount = table.getFilteredRowModel().rows.length;
+	const rowsWord = pluralize(totalCount, ROW_FORMS);
+	const selectedText = `${texts.selected} ${selectedCount} ${texts.of} ${totalCount} ${rowsWord}`;
+	const pageNumber = pageIndex + 1;
+	const pageCount = Math.max(table.getPageCount(), 1);
+	const pageText = `${texts.page} ${pageNumber} ${texts.of} ${pageCount}`;
+	const canPrevious = table.getCanPreviousPage();
+	const canNext = table.getCanNextPage();
+	const classes = cn("flex", "flex-wrap", "items-center", "justify-between", "gap-x-6", "gap-y-2", "px-2", className);
+	const sizeItems = [];
+	for (const size of pageSizes) sizeItems.push(/* @__PURE__ */ jsx(SelectItem, {
+		value: `${size}`,
+		children: size
+	}, size));
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table-pagination",
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex-1 text-sm whitespace-nowrap text-muted-foreground",
+			children: showSelected && selectedText
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-x-6 gap-y-2 lg:gap-x-8",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium whitespace-nowrap",
+						children: texts.rowsPerPage
+					}), /* @__PURE__ */ jsxs(Select, {
+						value: `${pageSize}`,
+						onValueChange: (value) => table.setPageSize(Number(value)),
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							"aria-label": texts.rowsPerPage,
+							className: "h-8 w-[70px]",
+							children: /* @__PURE__ */ jsx(SelectValue, { placeholder: `${pageSize}` })
+						}), /* @__PURE__ */ jsx(SelectContent, {
+							side: "top",
+							children: sizeItems
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex min-w-[100px] items-center justify-center text-sm font-medium whitespace-nowrap",
+					children: pageText
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "icon",
+							className: "hidden size-8 lg:flex",
+							onClick: () => table.setPageIndex(0),
+							disabled: !canPrevious,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: texts.firstPage
+							}), /* @__PURE__ */ jsx(ChevronsLeftIcon, {})]
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "icon",
+							className: "size-8",
+							onClick: () => table.previousPage(),
+							disabled: !canPrevious,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: texts.previousPage
+							}), /* @__PURE__ */ jsx(ChevronLeftIcon, {})]
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "icon",
+							className: "size-8",
+							onClick: () => table.nextPage(),
+							disabled: !canNext,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: texts.nextPage
+							}), /* @__PURE__ */ jsx(ChevronRightIcon, {})]
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "icon",
+							className: "hidden size-8 lg:flex",
+							onClick: () => table.setPageIndex(table.getPageCount() - 1),
+							disabled: !canNext,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: texts.lastPage
+							}), /* @__PURE__ */ jsx(ChevronsRightIcon, {})]
+						})
+					]
+				})
+			]
+		})]
+	});
+}
+/**
+* Название столбца для меню: заголовок-строка или id
+* @param column - столбец
+* @returns название
+*/
+function getColumnTitle(column) {
+	const header = column.columnDef.header;
+	if (typeof header === "string") return header;
+	return column.id;
+}
+/**
+* Выбор столбцов: меню с флажками, какие столбцы показывать
+* @param props - пропсы; table — экземпляр из useDataTable
+* @returns меню
+*/
+function DataTableViewOptions({ table, label = texts.view, menuLabel = texts.columns, className }) {
+	const classes = cn("ml-auto", "h-8", className);
+	const items = [];
+	for (const column of table.getAllColumns()) {
+		if (typeof column.accessorFn === "undefined" || !column.getCanHide()) continue;
+		const title = getColumnTitle(column);
+		items.push(/* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+			checked: column.getIsVisible(),
+			onCheckedChange: (value) => column.toggleVisibility(Boolean(value)),
+			children: title
+		}, column.id));
+	}
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			"data-slot": "data-table-view-options",
+			variant: "outline",
+			size: "sm",
+			className: classes
+		}),
+		children: [/* @__PURE__ */ jsx(Settings2Icon, {}), label]
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		className: "w-[180px]",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, { children: menuLabel }) }),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			items
+		]
+	})] });
+}
+export { DataTable, DataTableColumnHeader, DataTablePagination, DataTableViewOptions, createDataTableColumnHelper, useDataTable };

package/dist/components/data-table/index.d.ts

@@ -0,0 +1,4 @@
+import { dataTableFeatures } from "./data-table-features.js";
+import { DataTableColumnHeaderPropsT, DataTableFeaturesT, DataTableOptionsT, DataTablePaginationPropsT, DataTablePropsT, DataTableT, DataTableViewOptionsPropsT } from "./types.js";
+import { DataTable, DataTableColumnHeader, DataTablePagination, DataTableViewOptions, createDataTableColumnHelper, useDataTable } from "./data-table.js";
+export { DataTable, DataTableColumnHeader, type DataTableColumnHeaderPropsT, type DataTableFeaturesT, type DataTableOptionsT, DataTablePagination, type DataTablePaginationPropsT, type DataTablePropsT, type DataTableT, DataTableViewOptions, type DataTableViewOptionsPropsT, createDataTableColumnHelper, dataTableFeatures, useDataTable };

package/dist/components/data-table/index.js

@@ -0,0 +1,3 @@
+import { dataTableFeatures } from "./data-table-features.js";
+import { DataTable, DataTableColumnHeader, DataTablePagination, DataTableViewOptions, createDataTableColumnHelper, useDataTable } from "./data-table.js";
+export { DataTable, DataTableColumnHeader, DataTablePagination, DataTableViewOptions, createDataTableColumnHelper, dataTableFeatures, useDataTable };

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

@@ -0,0 +1,63 @@
+import { dataTableFeatures } from "./data-table-features.js";
+import { ComponentProps, ReactNode } from "react";
+import { Column, ReactTable, RowData, TableOptions } from "@tanstack/react-table";
+/**
+ * Набор возможностей таблицы
+ */
+export type DataTableFeaturesT = typeof dataTableFeatures;
+/**
+ * Экземпляр таблицы с возможностями dataTableFeatures
+ */
+export type DataTableT<TData extends RowData> = ReactTable<DataTableFeaturesT, TData>;
+/**
+ * Параметры таблицы: как у useTable, но features уже заданы
+ */
+export type DataTableOptionsT<TData extends RowData> = Omit<TableOptions<DataTableFeaturesT, TData>, 'features'>;
+/**
+ * Пропсы таблицы данных
+ */
+export type DataTablePropsT<TData extends RowData> = Omit<ComponentProps<'div'>, 'children'> & {
+  /** Таблица из useDataTable */
+  table: DataTableT<TData>;
+  /** Текст, когда строк нет. По умолчанию «Ничего не найдено» */
+  emptyText?: ReactNode;
+};
+/**
+ * Пропсы заголовка столбца
+ */
+export type DataTableColumnHeaderPropsT<TData extends RowData, TValue> = ComponentProps<'div'> & {
+  /** Столбец из контекста header */
+  column: Column<DataTableFeaturesT, TData, TValue>;
+  /** Название столбца */
+  title: string;
+  /** Подпись «По возрастанию». По умолчанию из locale */
+  ascendingLabel?: string;
+  /** Подпись «По убыванию». По умолчанию из locale */
+  descendingLabel?: string;
+  /** Подпись «Скрыть». По умолчанию из locale */
+  hideLabel?: string;
+};
+/**
+ * Пропсы пагинации
+ */
+export type DataTablePaginationPropsT<TData extends RowData> = ComponentProps<'div'> & {
+  /** Таблица из useDataTable */
+  table: DataTableT<TData>;
+  /** Варианты размера страницы. По умолчанию 10, 20, 25, 30, 40, 50 */
+  pageSizes?: number[];
+  /** Показать счётчик выбранных строк. По умолчанию true */
+  showSelected?: boolean;
+};
+/**
+ * Пропсы выбора столбцов
+ */
+export type DataTableViewOptionsPropsT<TData extends RowData> = {
+  /** Таблица из useDataTable */
+  table: DataTableT<TData>;
+  /** Текст кнопки. По умолчанию «Вид» */
+  label?: string;
+  /** Заголовок меню. По умолчанию «Столбцы» */
+  menuLabel?: string;
+  /** Классы кнопки */
+  className?: string;
+};

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

@@ -0,0 +1,7 @@
+import { DateInputPropsT } from "./types.js";
+/**
+ * Поле даты: ввод по маске дд.мм.гггг и выбор в календаре
+ * @param props - пропсы поля; value — дата, onValueChange — дата или null
+ * @returns группа поля
+ */
+export declare function DateInput({ value, defaultValue, onValueChange, showCalendar, calendarLabel, captionLayout, startMonth, endMonth, disabledDates, groupClassName, placeholder, onChange, onKeyDown, disabled, ...props }: DateInputPropsT): import("react").JSX.Element;

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";