@archytechtor/ui 0.0.0-stage → 0.1.0

package/dist/components/number-stepper/number-stepper.js

@@ -0,0 +1,223 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { NUMBER_LOCALE, texts } from "../../lib/locale.js";
+import { numberStepperButtonVariants, numberStepperVariants } from "./types.js";
+import { ChevronDownIcon, ChevronUpIcon, MinusIcon, PlusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { NumberField } from "@base-ui/react/number-field";
+// src/components/number-stepper/number-stepper.tsx
+/**
+* Число знаков после запятой
+* @param value - число
+* @returns количество знаков
+*/
+function decimalsOf(value) {
+	return String(value).split(".")[1]?.length ?? 0;
+}
+/**
+* Цифра, которая при смене уезжает в сторону изменения значения, а новая въезжает следом
+* @param props - пропсы цифры
+* @returns цифра
+*/
+function RollingDigit({ digit, trend }) {
+	const [current, setCurrent] = useState(digit);
+	const [previous, setPrevious] = useState(null);
+	const [changes, setChanges] = useState(0);
+	if (digit !== current) {
+		setPrevious(current);
+		setCurrent(digit);
+		setChanges(changes + 1);
+	}
+	const isUp = trend === 1;
+	const enterClasses = cn("inline-block", "duration-450", "ease-[cubic-bezier(0.2,0.8,0.2,1)]", "motion-reduce:animate-none", changes > 0 && "animate-in fade-in-0", changes > 0 && isUp && "slide-in-from-bottom-full", changes > 0 && !isUp && "slide-in-from-top-full");
+	const exitClasses = cn("absolute", "inset-0", "animate-out", "fade-out-0", "duration-450", "ease-[cubic-bezier(0.2,0.8,0.2,1)]", "fill-mode-forwards", "motion-reduce:hidden", isUp && "slide-out-to-top-full", !isUp && "slide-out-to-bottom-full");
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-block overflow-hidden",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: enterClasses,
+			children: current
+		}, changes), previous !== null && /* @__PURE__ */ jsx("span", {
+			className: exitClasses,
+			onAnimationEnd: () => setPrevious(null),
+			children: previous
+		}, `previous-${changes}`)]
+	});
+}
+/**
+* Значение поверх поля ввода: цифры прокручиваются, остальные символы стоят на месте.
+* Цифры нумеруются с конца, чтобы при появлении нового разряда единицы не перескакивали
+* @param props - пропсы значения
+* @returns значение
+*/
+function NumberStepperValue({ value, formatter, trend }) {
+	if (value === null) return null;
+	const characters = [];
+	for (const part of formatter.formatToParts(value)) characters.push(...part.value);
+	const items = [];
+	let position = 0;
+	for (let index = characters.length - 1; index >= 0; index--) {
+		const character = characters[index] ?? "";
+		const isDigit = character >= "0" && character <= "9";
+		const key = `${position}`;
+		position += 1;
+		if (isDigit) {
+			items.unshift(/* @__PURE__ */ jsx(RollingDigit, {
+				digit: character,
+				trend
+			}, key));
+			continue;
+		}
+		items.unshift(/* @__PURE__ */ jsx("span", { children: character }, key));
+	}
+	const classes = cn("pointer-events-none", "col-start-1", "row-start-1", "inline-flex", "whitespace-pre", "group-has-[input[aria-invalid=true]]/number-stepper:text-destructive");
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-slot": "number-stepper-value",
+		className: classes,
+		children: items
+	});
+}
+/**
+* Толчок значения к нажатой стороне на границе диапазона
+* @param element - элемент значения
+* @param direction - куда толкать: 1 — вперёд, -1 — назад
+* @param isHorizontal - по горизонтали или вертикали
+*/
+function nudge(element, direction, isHorizontal) {
+	if (!element || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+	const sign = isHorizontal ? direction : -direction;
+	const keyframes = [
+		0,
+		4,
+		-3,
+		0
+	].map((offset) => {
+		const shift = offset * sign;
+		return { translate: isHorizontal ? `${shift}px 0` : `0 ${shift}px` };
+	});
+	element.animate(keyframes, {
+		duration: 220,
+		easing: "ease-out"
+	});
+}
+/**
+* Степпер: число с кнопками «−» и «+». Держите кнопку — значение меняется всё быстрее;
+* стрелки ↑↓ меняют на step, Shift+стрелки и PageUp/PageDown — на largeStep, Home/End — к границам.
+* Значение можно ввести с клавиатуры, цифры прокручиваются в сторону изменения
+* @param props - пропсы степпера
+* @returns степпер
+*/
+function NumberStepper({ className, variant = "outline", size = "default", orientation = "horizontal", value, defaultValue, onValueChange, onValueCommitted, format, min, max, label = texts.value, disabled, "aria-invalid": ariaInvalid, ...props }) {
+	const isControlled = value !== void 0;
+	const isHorizontal = orientation === "horizontal";
+	const [innerValue, setInnerValue] = useState(defaultValue ?? null);
+	const [trend, setTrend] = useState(1);
+	const [isEditing, setIsEditing] = useState(false);
+	const valueRef = useRef(null);
+	const shownValue = isControlled ? value : innerValue;
+	const formatter = useMemo(() => new Intl.NumberFormat(NUMBER_LOCALE, format), [format]);
+	/**
+	* Значение изменилось: запомнить направление, на границе — толчок
+	* @param next - новое значение
+	* @param details - причина изменения
+	*/
+	const handleValueChange = (next, details) => {
+		const direction = (next ?? 0) >= (shownValue ?? 0) ? 1 : -1;
+		const isTyped = details.reason.startsWith("input");
+		const isAtLimit = next !== null && (next === max || next === min);
+		setTrend(direction);
+		if (!isTyped) setIsEditing(false);
+		if (!isControlled) setInnerValue(next);
+		if (isAtLimit && !isTyped && next !== shownValue) nudge(valueRef.current, direction, isHorizontal);
+		onValueChange?.(next);
+	};
+	const rootClasses = cn(numberStepperVariants({
+		variant,
+		size,
+		orientation
+	}), className);
+	const buttonClasses = numberStepperButtonVariants({
+		variant,
+		size,
+		orientation
+	});
+	const inputClasses = cn("col-start-1", "row-start-1", "h-full", "min-w-0", "bg-transparent", "px-0.5", "text-center", "outline-none", "disabled:cursor-not-allowed", isEditing && "aria-invalid:text-destructive", !isEditing && "text-transparent caret-transparent selection:bg-transparent", variant === "ghost" && "rounded-sm focus-visible:ring-3 focus-visible:ring-ring/50");
+	/**
+	* Клавиша в поле: печать символа или удаление — режим ввода, где виден текст поля
+	* @param event - событие клавиатуры
+	*/
+	const handleInputKeyDown = (event) => {
+		const isPrintable = event.key.length === 1 && !event.ctrlKey && !event.metaKey;
+		const isErase = event.key === "Backspace" || event.key === "Delete";
+		if (isPrintable || isErase) setIsEditing(true);
+	};
+	const stepValue = props.step === "any" ? 0 : props.step ?? 1;
+	const decimals = Math.max(decimalsOf(stepValue), 0);
+	const widthSamples = [
+		min,
+		max,
+		shownValue
+	];
+	let widthChars = 2;
+	for (const sample of widthSamples) if (typeof sample === "number" && Number.isFinite(sample)) widthChars = Math.max(widthChars, formatter.format(sample).length);
+	const inputStyle = { width: `${widthChars + (isHorizontal ? 1 : 0) + decimals}ch` };
+	const DecrementIcon = isHorizontal ? MinusIcon : ChevronDownIcon;
+	const IncrementIcon = isHorizontal ? PlusIcon : ChevronUpIcon;
+	const decrement = /* @__PURE__ */ jsx(NumberField.Decrement, {
+		"data-slot": "number-stepper-decrement",
+		"aria-label": `${texts.decrease}: ${label}`,
+		className: buttonClasses,
+		children: /* @__PURE__ */ jsx(DecrementIcon, { "aria-hidden": true })
+	});
+	const increment = /* @__PURE__ */ jsx(NumberField.Increment, {
+		"data-slot": "number-stepper-increment",
+		"aria-label": `${texts.increase}: ${label}`,
+		className: buttonClasses,
+		children: /* @__PURE__ */ jsx(IncrementIcon, { "aria-hidden": true })
+	});
+	return /* @__PURE__ */ jsx(NumberField.Root, {
+		"data-slot": "number-stepper",
+		"data-variant": variant,
+		"data-size": size,
+		"data-orientation": orientation,
+		value,
+		defaultValue,
+		format,
+		locale: NUMBER_LOCALE,
+		min,
+		max,
+		disabled,
+		className: "inline-flex w-fit",
+		onValueChange: handleValueChange,
+		onValueCommitted: (next) => onValueCommitted?.(next),
+		...props,
+		children: /* @__PURE__ */ jsxs(NumberField.Group, {
+			"data-slot": "number-stepper-group",
+			className: rootClasses,
+			children: [
+				isHorizontal ? decrement : increment,
+				/* @__PURE__ */ jsxs("div", {
+					ref: valueRef,
+					className: "grid h-full place-items-center",
+					children: [/* @__PURE__ */ jsx(NumberField.Input, {
+						"data-slot": "number-stepper-input",
+						"aria-label": label,
+						"aria-invalid": ariaInvalid,
+						style: inputStyle,
+						className: inputClasses,
+						onPointerDown: () => setIsEditing(true),
+						onKeyDown: handleInputKeyDown,
+						onBlur: () => setIsEditing(false)
+					}), !isEditing && /* @__PURE__ */ jsx(NumberStepperValue, {
+						value: shownValue,
+						formatter,
+						trend
+					})]
+				}),
+				isHorizontal ? increment : decrement
+			]
+		})
+	});
+}
+export { NumberStepper };

package/dist/components/number-stepper/types.d.ts

@@ -0,0 +1,47 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { VariantProps } from "class-variance-authority";
+import { NumberField } from "@base-ui/react/number-field";
+/**
+ * Стили степпера: вариант оформления, размер и ориентация.
+ * Экспортируются, чтобы оформить степпером другой элемент
+ */
+export declare const numberStepperVariants: (props?: ({
+  variant?: "outline" | "ghost" | "pill" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Стили кнопок степпера: «−» и «+» (в вертикальном — стрелки)
+ */
+export declare const numberStepperButtonVariants: (props?: ({
+  variant?: "outline" | "ghost" | "pill" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты оформления, размеры и ориентации степпера
+ */
+export type NumberStepperVariantsT = VariantProps<typeof numberStepperVariants>;
+/**
+ * Пропсы степпера
+ */
+export type NumberStepperPropsT = PartPropsT<Omit<NumberField.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'locale' | 'children'>> & {
+  /** Значение — контролируемый режим, вместе с onValueChange; null — пусто */
+  value?: number | null;
+  /** Значение при первом рендере — неконтролируемый режим */
+  defaultValue?: number;
+  /** Значение изменилось: кнопкой, клавишей, колесом или вводом */
+  onValueChange?: (value: number | null) => void;
+  /** Значение зафиксировано: отпустили кнопку, ушли из поля или нажали клавишу */
+  onValueCommitted?: (value: number | null) => void;
+  /** Оформление: с рамкой (outline), капсула с заливкой кнопок (pill) или без рамки (ghost) */
+  variant?: NumberStepperVariantsT['variant'];
+  /** Размер: sm, default, lg */
+  size?: NumberStepperVariantsT['size'];
+  /** Ориентация: кнопки по бокам (horizontal) или сверху и снизу (vertical) */
+  orientation?: NumberStepperVariantsT['orientation'];
+  /** Подпись для скринридера: поле читается «{label}», кнопки — «Увеличить {label}». По умолчанию «Значение» */
+  label?: string;
+  /** Ошибка: красная рамка и объявление скринридеру, что значение неверное */
+  'aria-invalid'?: boolean;
+};

package/dist/components/number-stepper/types.js

@@ -0,0 +1,174 @@
+import { cva } from "class-variance-authority";
+// src/components/number-stepper/types.ts
+/**
+* Стили степпера: вариант оформления, размер и ориентация.
+* Экспортируются, чтобы оформить степпером другой элемент
+*/
+const numberStepperVariants = cva(["group/number-stepper inline-flex w-fit items-center justify-between font-medium tabular-nums", "data-disabled:cursor-not-allowed data-disabled:opacity-50"], {
+	variants: {
+		variant: {
+			outline: [
+				"rounded-lg border border-input bg-transparent transition-[color,box-shadow] dark:bg-input/30",
+				"keyboard:has-[input:focus-visible]:border-ring keyboard:has-[input:focus-visible]:ring-3 keyboard:has-[input:focus-visible]:ring-ring/50",
+				"has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-3",
+				"has-[input[aria-invalid=true]]:ring-destructive/20 dark:has-[input[aria-invalid=true]]:ring-destructive/40"
+			],
+			pill: [
+				"rounded-full border border-input bg-background p-0.5 transition-[color,box-shadow] dark:bg-input/30",
+				"keyboard:has-[input:focus-visible]:border-ring keyboard:has-[input:focus-visible]:ring-3 keyboard:has-[input:focus-visible]:ring-ring/50",
+				"has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-3",
+				"has-[input[aria-invalid=true]]:ring-destructive/20 dark:has-[input[aria-invalid=true]]:ring-destructive/40"
+			],
+			ghost: ""
+		},
+		size: {
+			sm: "text-sm",
+			default: "text-sm",
+			lg: "text-base"
+		},
+		orientation: {
+			horizontal: "flex-row gap-0.5",
+			vertical: "min-w-10 flex-col gap-0.5"
+		}
+	},
+	compoundVariants: [
+		{
+			orientation: "horizontal",
+			size: "sm",
+			className: "h-7"
+		},
+		{
+			orientation: "horizontal",
+			size: "default",
+			className: "h-8"
+		},
+		{
+			orientation: "horizontal",
+			size: "lg",
+			className: "h-9"
+		},
+		{
+			variant: "outline",
+			orientation: "horizontal",
+			className: "px-0.5"
+		},
+		{
+			variant: "outline",
+			orientation: "vertical",
+			className: "py-0.5"
+		},
+		{
+			variant: "pill",
+			orientation: "vertical",
+			className: "min-w-0"
+		}
+	],
+	defaultVariants: {
+		variant: "outline",
+		size: "default",
+		orientation: "horizontal"
+	}
+});
+/**
+* Стили кнопок степпера: «−» и «+» (в вертикальном — стрелки)
+*/
+const numberStepperButtonVariants = cva([
+	"relative inline-flex shrink-0 cursor-pointer touch-manipulation items-center justify-center outline-none select-none",
+	"transition-[color,background-color,scale] duration-300 ease-spring active:scale-90 motion-reduce:active:scale-100",
+	"disabled:pointer-events-none disabled:opacity-40",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0"
+], {
+	variants: {
+		variant: {
+			outline: "rounded-md text-muted-foreground hover:bg-muted hover:text-foreground dark:hover:bg-input/50",
+			pill: "rounded-full bg-primary text-primary-foreground hover:bg-primary/80",
+			ghost: "rounded-md text-muted-foreground hover:bg-muted hover:text-foreground dark:hover:bg-muted/50"
+		},
+		size: {
+			sm: "[&_svg:not([class*=size-])]:size-3.5",
+			default: "[&_svg:not([class*=size-])]:size-4",
+			lg: "[&_svg:not([class*=size-])]:size-4.5"
+		},
+		orientation: {
+			horizontal: "",
+			vertical: ""
+		}
+	},
+	compoundVariants: [
+		{
+			orientation: "horizontal",
+			variant: "outline",
+			size: "sm",
+			className: "size-5"
+		},
+		{
+			orientation: "horizontal",
+			variant: "outline",
+			size: "default",
+			className: "size-6"
+		},
+		{
+			orientation: "horizontal",
+			variant: "outline",
+			size: "lg",
+			className: "size-7"
+		},
+		{
+			variant: "pill",
+			size: "sm",
+			className: "size-5"
+		},
+		{
+			variant: "pill",
+			size: "default",
+			className: "size-6"
+		},
+		{
+			variant: "pill",
+			size: "lg",
+			className: "size-7"
+		},
+		{
+			orientation: "horizontal",
+			variant: "ghost",
+			size: "sm",
+			className: "size-7"
+		},
+		{
+			orientation: "horizontal",
+			variant: "ghost",
+			size: "default",
+			className: "size-8"
+		},
+		{
+			orientation: "horizontal",
+			variant: "ghost",
+			size: "lg",
+			className: "size-9"
+		},
+		{
+			orientation: "vertical",
+			variant: ["outline", "ghost"],
+			size: "sm",
+			className: "h-5 w-full"
+		},
+		{
+			orientation: "vertical",
+			variant: ["outline", "ghost"],
+			size: "default",
+			className: "h-6 w-full"
+		},
+		{
+			orientation: "vertical",
+			variant: ["outline", "ghost"],
+			size: "lg",
+			className: "h-7 w-full"
+		}
+	],
+	defaultVariants: {
+		variant: "outline",
+		size: "default",
+		orientation: "horizontal"
+	}
+});
+export { numberStepperButtonVariants, numberStepperVariants };

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

@@ -0,0 +1,3 @@
+import { PaginationContentPropsT, PaginationEllipsisPropsT, PaginationItemPropsT, PaginationLinkPropsT, PaginationPropsT, PaginationStepPropsT } from "./types.js";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination.js";
+export { Pagination, PaginationContent, type PaginationContentPropsT, PaginationEllipsis, type PaginationEllipsisPropsT, PaginationItem, type PaginationItemPropsT, PaginationLink, type PaginationLinkPropsT, PaginationNext, PaginationPrevious, type PaginationPropsT, type PaginationStepPropsT };

package/dist/components/pagination/index.js

@@ -0,0 +1 @@
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination.js";

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,43 @@
+import { PaginationContentPropsT, PaginationEllipsisPropsT, PaginationItemPropsT, PaginationLinkPropsT, PaginationPropsT, PaginationStepPropsT } from "./types.js";
+/**
+ * Постраничная навигация: ссылки на страницы, «Назад» и «Далее»
+ * @param props - пропсы навигации; aria-label по умолчанию «Постраничная навигация»
+ * @returns nav
+ */
+export declare function Pagination({ className, ...props }: PaginationPropsT): import("react").JSX.Element;
+/**
+ * Список страниц
+ * @param props - пропсы списка
+ * @returns ul
+ */
+export declare function PaginationContent({ className, ...props }: PaginationContentPropsT): import("react").JSX.Element;
+/**
+ * Элемент списка страниц
+ * @param props - пропсы элемента
+ * @returns li
+ */
+export declare function PaginationItem(props: PaginationItemPropsT): import("react").JSX.Element;
+/**
+ * Ссылка на страницу: выглядит как кнопка, текущая — с обводкой
+ * @param props - пропсы ссылки
+ * @returns a
+ */
+export declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkPropsT): import("react").JSX.Element;
+/**
+ * Ссылка на предыдущую страницу
+ * @param props - пропсы ссылки; text по умолчанию «Назад», aria-label — «Предыдущая страница»
+ * @returns a
+ */
+export declare function PaginationPrevious({ className, text, ...props }: PaginationStepPropsT): import("react").JSX.Element;
+/**
+ * Ссылка на следующую страницу
+ * @param props - пропсы ссылки; text по умолчанию «Далее», aria-label — «Следующая страница»
+ * @returns a
+ */
+export declare function PaginationNext({ className, text, ...props }: PaginationStepPropsT): import("react").JSX.Element;
+/**
+ * Многоточие: пропущенные страницы
+ * @param props - пропсы многоточия
+ * @returns span
+ */
+export declare function PaginationEllipsis({ className, label, ...props }: PaginationEllipsisPropsT): import("react").JSX.Element;

package/dist/components/pagination/pagination.js

@@ -0,0 +1,121 @@
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { Button } from "../button/button.js";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/pagination/pagination.tsx
+/**
+* Постраничная навигация: ссылки на страницы, «Назад» и «Далее»
+* @param props - пропсы навигации; aria-label по умолчанию «Постраничная навигация»
+* @returns nav
+*/
+function Pagination({ className, ...props }) {
+	const classes = cn("mx-auto", "flex", "w-full", "justify-center", className);
+	return /* @__PURE__ */ jsx("nav", {
+		role: "navigation",
+		"aria-label": texts.pagination,
+		"data-slot": "pagination",
+		className: classes,
+		...props
+	});
+}
+/**
+* Список страниц
+* @param props - пропсы списка
+* @returns ul
+*/
+function PaginationContent({ className, ...props }) {
+	const classes = cn("flex", "items-center", "gap-0.5", className);
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "pagination-content",
+		className: classes,
+		...props
+	});
+}
+/**
+* Элемент списка страниц
+* @param props - пропсы элемента
+* @returns li
+*/
+function PaginationItem(props) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "pagination-item",
+		...props
+	});
+}
+/**
+* Ссылка на страницу: выглядит как кнопка, текущая — с обводкой
+* @param props - пропсы ссылки
+* @returns a
+*/
+function PaginationLink({ className, isActive, size = "icon", ...props }) {
+	const variant = isActive ? "outline" : "ghost";
+	const current = isActive ? "page" : void 0;
+	const classes = cn(className);
+	return /* @__PURE__ */ jsx(Button, {
+		variant,
+		size,
+		className: classes,
+		render: /* @__PURE__ */ jsx("a", {}),
+		role: "link",
+		"aria-current": current,
+		"data-slot": "pagination-link",
+		"data-active": isActive,
+		...props
+	});
+}
+/**
+* Ссылка на предыдущую страницу
+* @param props - пропсы ссылки; text по умолчанию «Назад», aria-label — «Предыдущая страница»
+* @returns a
+*/
+function PaginationPrevious({ className, text = texts.previous, ...props }) {
+	const classes = cn("pl-1.5!", className);
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": texts.previousPage,
+		size: "default",
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { "data-icon": "inline-start" }), /* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		})]
+	});
+}
+/**
+* Ссылка на следующую страницу
+* @param props - пропсы ссылки; text по умолчанию «Далее», aria-label — «Следующая страница»
+* @returns a
+*/
+function PaginationNext({ className, text = texts.next, ...props }) {
+	const classes = cn("pr-1.5!", className);
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": texts.nextPage,
+		size: "default",
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		}), /* @__PURE__ */ jsx(ChevronRightIcon, { "data-icon": "inline-end" })]
+	});
+}
+/**
+* Многоточие: пропущенные страницы
+* @param props - пропсы многоточия
+* @returns span
+*/
+function PaginationEllipsis({ className, label = texts.morePages, ...props }) {
+	const classes = cn("flex", "size-8", "items-center", "justify-center", "[&_svg:not([class*=size-])]:size-4", className);
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		"data-slot": "pagination-ellipsis",
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

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

@@ -0,0 +1,37 @@
+import { ButtonPropsT } from "../button/types.js";
+import { ComponentProps } from "react";
+/**
+ * Пропсы постраничной навигации
+ */
+export type PaginationPropsT = ComponentProps<'nav'>;
+/**
+ * Пропсы списка страниц
+ */
+export type PaginationContentPropsT = ComponentProps<'ul'>;
+/**
+ * Пропсы элемента списка
+ */
+export type PaginationItemPropsT = ComponentProps<'li'>;
+/**
+ * Пропсы ссылки на страницу
+ */
+export type PaginationLinkPropsT = ComponentProps<'a'> & {
+  /** Текущая страница: обводка и aria-current="page" */
+  isActive?: boolean;
+  /** Размер кнопки-ссылки. По умолчанию icon */
+  size?: ButtonPropsT['size'];
+};
+/**
+ * Пропсы ссылки «Назад» и «Далее»
+ */
+export type PaginationStepPropsT = PaginationLinkPropsT & {
+  /** Текст рядом со стрелкой; на узком экране скрыт */
+  text?: string;
+};
+/**
+ * Пропсы многоточия
+ */
+export type PaginationEllipsisPropsT = ComponentProps<'span'> & {
+  /** Подпись для скринридеров */
+  label?: string;
+};

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

@@ -0,0 +1,3 @@
+import { PhoneInputPropsT } from "./types.js";
+import { PhoneInput } from "./phone-input.js";
+export { PhoneInput, type PhoneInputPropsT };

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

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

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

@@ -0,0 +1,7 @@
+import { PhoneInputPropsT } from "./types.js";
+/**
+ * Поле телефона: маска +7 (XXX) XXX-XX-XX форматирует номер по мере ввода
+ * @param props - пропсы Input; value — телефон в любом виде, onValueChange — +7 и цифры
+ * @returns input
+ */
+export declare function PhoneInput({ value, defaultValue, onValueChange, onChange, placeholder, ...props }: PhoneInputPropsT): import("react").JSX.Element;