@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/context-menu/types.d.ts

@@ -0,0 +1,138 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { FloatingPropsT } from "../../lib/floating.js";
+import { ComponentProps } from "react";
+import { ContextMenu } from "@base-ui/react/context-menu";
+/**
+ * Пропсы выпадающего меню
+ */
+export type ContextMenuPropsT = Omit<ContextMenu.Root.Props, 'onOpenChange' | 'closeParentOnEsc'> & {
+  /** Меню открыто — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Меню открыто при первом рендере — неконтролируемый режим */
+  defaultOpen?: boolean;
+  /** Меню открыли или закрыли: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+  /** Стрелки переходят с последнего пункта на первый и обратно. По умолчанию true */
+  loopFocus?: boolean;
+};
+/**
+ * Пропсы портала
+ */
+export type ContextMenuPortalPropsT = ContextMenu.Portal.Props;
+/**
+ * Пропсы области меню
+ */
+export type ContextMenuTriggerPropsT = PartPropsT<ContextMenu.Trigger.Props>;
+/**
+ * Пропсы содержимого меню
+ */
+export type ContextMenuContentPropsT = PartPropsT<ContextMenu.Popup.Props> & FloatingPropsT;
+/**
+ * Пропсы группы пунктов
+ */
+export type ContextMenuGroupPropsT = PartPropsT<ContextMenu.Group.Props>;
+/**
+ * Вариант оформления пункта
+ */
+export type ContextMenuItemVariantT = 'default' | 'destructive';
+/**
+ * Пропсы пункта меню
+ */
+export type ContextMenuItemPropsT = PartPropsT<ContextMenu.Item.Props> & {
+  /** Отступ слева под иконку, чтобы выровнять с пунктами с иконками */
+  inset?: boolean;
+  /** Вариант оформления: destructive — красный, для опасных действий */
+  variant?: ContextMenuItemVariantT;
+  /** Отключить пункт */
+  disabled?: boolean;
+  /** Закрывать меню после нажатия. По умолчанию true */
+  closeOnClick?: boolean;
+  /** Текст для поиска набором букв, если содержимое пункта — не просто текст */
+  label?: string;
+};
+/**
+ * Пропсы пункта-флажка
+ */
+export type ContextMenuCheckboxItemPropsT = PartPropsT<Omit<ContextMenu.CheckboxItem.Props, 'onCheckedChange'>> & {
+  /** Отступ слева под иконку, чтобы выровнять с пунктами с иконками */
+  inset?: boolean;
+  /** Отмечен ли пункт — контролируемый режим, вместе с onCheckedChange */
+  checked?: boolean;
+  /** Отмечен ли пункт при первом рендере — неконтролируемый режим */
+  defaultChecked?: boolean;
+  /** Отметку переключили: новое состояние */
+  onCheckedChange?: (checked: boolean) => void;
+  /** Отключить пункт */
+  disabled?: boolean;
+  /** Закрывать меню после выбора. По умолчанию false — меню остаётся открытым, чтобы выбрать несколько */
+  closeOnClick?: boolean;
+  /** Текст для поиска набором букв, если содержимое пункта — не просто текст */
+  label?: string;
+};
+/**
+ * Пропсы группы радиокнопок
+ */
+export type ContextMenuRadioGroupPropsT = PartPropsT<Omit<ContextMenu.RadioGroup.Props, 'value' | 'defaultValue' | 'onValueChange'>> & {
+  /** Значение выбранного пункта — контролируемый режим, вместе с onValueChange */
+  value?: string;
+  /** Значение выбранного пункта при первом рендере — неконтролируемый режим */
+  defaultValue?: string;
+  /** Выбран другой пункт: его значение */
+  onValueChange?: (value: string) => void;
+};
+/**
+ * Пропсы пункта-радиокнопки
+ */
+export type ContextMenuRadioItemPropsT = PartPropsT<Omit<ContextMenu.RadioItem.Props, 'value'>> & {
+  /** Значение пункта: попадает в value группы при выборе */
+  value: string;
+  /** Отступ слева под иконку, чтобы выровнять с пунктами с иконками */
+  inset?: boolean;
+  /** Отключить пункт */
+  disabled?: boolean;
+  /** Закрывать меню после выбора. По умолчанию false — меню остаётся открытым */
+  closeOnClick?: boolean;
+  /** Текст для поиска набором букв, если содержимое пункта — не просто текст */
+  label?: string;
+};
+/**
+ * Пропсы подписи
+ */
+export type ContextMenuLabelPropsT = PartPropsT<ContextMenu.GroupLabel.Props> & {
+  /** Отступ слева под иконку, чтобы выровнять с пунктами с иконками */
+  inset?: boolean;
+};
+/**
+ * Пропсы разделителя
+ */
+export type ContextMenuSeparatorPropsT = PartPropsT<ContextMenu.Separator.Props>;
+/**
+ * Пропсы сочетания клавиш
+ */
+export type ContextMenuShortcutPropsT = ComponentProps<'span'>;
+/**
+ * Пропсы подменю
+ */
+export type ContextMenuSubPropsT = Omit<ContextMenu.SubmenuRoot.Props, 'onOpenChange'> & {
+  /** Подменю открыто — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Подменю открыто при первом рендере — неконтролируемый режим */
+  defaultOpen?: boolean;
+  /** Подменю открыли или закрыли: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Пропсы пункта, открывающего подменю
+ */
+export type ContextMenuSubTriggerPropsT = PartPropsT<ContextMenu.SubmenuTrigger.Props> & {
+  /** Отступ слева под иконку, чтобы выровнять с пунктами с иконками */
+  inset?: boolean;
+  /** Отключить пункт */
+  disabled?: boolean;
+  /** Текст для поиска набором букв, если содержимое пункта — не просто текст */
+  label?: string;
+};
+/**
+ * Пропсы содержимого подменю
+ */
+export type ContextMenuSubContentPropsT = ContextMenuContentPropsT;

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

@@ -0,0 +1,21 @@
+/**
+ * Возможности таблицы: фильтрация, скрытие столбцов, страницы, выбор строк, сортировка.
+ * Передаётся в useTable как features
+ */
+export declare const dataTableFeatures: {
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  filterFns: {
+    includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+  };
+  sortFns: {
+    alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+};

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

@@ -0,0 +1,22 @@
+import { columnFilteringFeature, columnVisibilityFeature, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_includesString, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_text, tableFeatures } from "@tanstack/react-table";
+// src/components/data-table/data-table-features.ts
+/**
+* Возможности таблицы: фильтрация, скрытие столбцов, страницы, выбор строк, сортировка.
+* Передаётся в useTable как features
+*/
+const dataTableFeatures = tableFeatures({
+	columnFilteringFeature,
+	columnVisibilityFeature,
+	rowPaginationFeature,
+	rowSelectionFeature,
+	rowSortingFeature,
+	filteredRowModel: createFilteredRowModel(),
+	paginatedRowModel: createPaginatedRowModel(),
+	sortedRowModel: createSortedRowModel(),
+	filterFns: { includesString: filterFn_includesString },
+	sortFns: {
+		alphanumeric: sortFn_alphanumeric,
+		text: sortFn_text
+	}
+});
+export { dataTableFeatures };

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

@@ -0,0 +1,69 @@
+import { DataTableColumnHeaderPropsT, DataTableOptionsT, DataTablePaginationPropsT, DataTablePropsT, DataTableViewOptionsPropsT } from "./types.js";
+import { RowData } from "@tanstack/react-table";
+/**
+ * Помощник для описания столбцов таблицы с нужным типом строк
+ * @returns помощник: accessor(), display(), columns()
+ */
+export declare function createDataTableColumnHelper<TData extends RowData>(): import("@tanstack/react-table").ColumnHelper<{
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  filterFns: {
+    includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+  };
+  sortFns: {
+    alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+}, TData>;
+/**
+ * Создать таблицу: сортировка, фильтры, страницы, выбор строк и скрытие столбцов уже подключены
+ * @param options - data, columns и остальные параметры useTable
+ * @returns экземпляр таблицы для DataTable и помощников
+ */
+export declare function useDataTable<TData extends RowData>(options: DataTableOptionsT<TData>): import("@tanstack/react-table").ReactTable<{
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  filterFns: {
+    includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+  };
+  sortFns: {
+    alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+}, TData, import("@tanstack/react-table").TableState_ColumnFiltering & import("@tanstack/react-table").TableState_ColumnVisibility & import("@tanstack/react-table").TableState_RowPagination & import("@tanstack/react-table").TableState_RowSelection & import("@tanstack/react-table").TableState_RowSorting>;
+/**
+ * Таблица данных: заголовки и строки текущей страницы в рамке
+ * @param props - пропсы; table — экземпляр из useDataTable
+ * @returns div с таблицей
+ */
+export declare function DataTable<TData extends RowData>({ table, emptyText, className, ...props }: DataTablePropsT<TData>): import("react").JSX.Element;
+/**
+ * Заголовок столбца с меню: сортировка по возрастанию и убыванию, скрыть столбец
+ * @param props - столбец и название
+ * @returns div с кнопкой меню или просто название, если сортировать нельзя
+ */
+export declare function DataTableColumnHeader<TData extends RowData, TValue>({ column, title, ascendingLabel, descendingLabel, hideLabel, className, ...props }: DataTableColumnHeaderPropsT<TData, TValue>): import("react").JSX.Element;
+/**
+ * Пагинация таблицы: выбрано строк, размер страницы, номер страницы и кнопки перехода
+ * @param props - пропсы; table — экземпляр из useDataTable
+ * @returns div
+ */
+export declare function DataTablePagination<TData extends RowData>({ table, pageSizes, showSelected, className, ...props }: DataTablePaginationPropsT<TData>): import("react").JSX.Element;
+/**
+ * Выбор столбцов: меню с флажками, какие столбцы показывать
+ * @param props - пропсы; table — экземпляр из useDataTable
+ * @returns меню
+ */
+export declare function DataTableViewOptions<TData extends RowData>({ table, label, menuLabel, className }: DataTableViewOptionsPropsT<TData>): import("react").JSX.Element;

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;