@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/button/types.js

@@ -0,0 +1,99 @@
+import { cva } from "class-variance-authority";
+// src/components/button/types.ts
+/**
+* Стили кнопки: вариант оформления и размер.
+* Экспортируются, чтобы оформить кнопкой другой элемент: buttonVariants({ variant: 'outline' }).
+*
+* Отключённая кнопка (disabled или aria-disabled у render) не теряет события мыши, чтобы показать
+* курсор not-allowed (в загрузке — progress): нажатие блокирует сам disabled или обработчик Button,
+* а цвета наведения у каждого варианта возвращаются к обычным.
+*/
+const buttonVariants = cva([
+	"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding",
+	"text-sm font-medium whitespace-nowrap transition-all outline-none select-none",
+	"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+	"active:not-aria-[haspopup]:not-aria-disabled:translate-y-px",
+	"cursor-pointer disabled:cursor-not-allowed aria-disabled:cursor-not-allowed",
+	"data-loading:disabled:cursor-progress data-loading:aria-disabled:cursor-progress",
+	"disabled:opacity-50 aria-disabled:opacity-50",
+	"aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20",
+	"dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4",
+	"[&>[data-slot=button-spinner]+svg]:hidden"
+], {
+	variants: {
+		variant: {
+			default: ["bg-primary text-primary-foreground hover:bg-primary/80", "disabled:hover:bg-primary aria-disabled:hover:bg-primary"],
+			outline: [
+				"border-border bg-background hover:bg-muted hover:text-foreground",
+				"aria-expanded:bg-muted aria-expanded:text-foreground",
+				"dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+				"disabled:hover:bg-background disabled:hover:text-inherit",
+				"aria-disabled:hover:bg-background aria-disabled:hover:text-inherit",
+				"dark:disabled:hover:bg-input/30 dark:aria-disabled:hover:bg-input/30"
+			],
+			secondary: [
+				"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+				"aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				"disabled:hover:bg-secondary aria-disabled:hover:bg-secondary"
+			],
+			ghost: [
+				"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+				"dark:hover:bg-muted/50",
+				"disabled:hover:bg-transparent disabled:hover:text-inherit",
+				"aria-disabled:hover:bg-transparent aria-disabled:hover:text-inherit"
+			],
+			destructive: [
+				"bg-destructive/10 text-destructive hover:bg-destructive/20",
+				"focus-visible:border-destructive/40 focus-visible:ring-destructive/20",
+				"dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+				"disabled:hover:bg-destructive/10 aria-disabled:hover:bg-destructive/10",
+				"dark:disabled:hover:bg-destructive/20 dark:aria-disabled:hover:bg-destructive/20"
+			],
+			link: ["text-primary underline-offset-4 hover:underline", "disabled:hover:no-underline aria-disabled:hover:no-underline"]
+		},
+		size: {
+			default: ["h-8 gap-1.5 px-2.5", "has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"],
+			xs: [
+				"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs",
+				"in-data-[slot=button-group]:rounded-lg",
+				"has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+				"[&_svg:not([class*=size-])]:size-3"
+			],
+			sm: [
+				"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem]",
+				"in-data-[slot=button-group]:rounded-lg",
+				"has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+				"[&_svg:not([class*=size-])]:size-3.5"
+			],
+			lg: ["h-9 gap-1.5 px-2.5", "has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"],
+			icon: "size-8",
+			"icon-xs": ["size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg", "[&_svg:not([class*=size-])]:size-3"],
+			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/**
+* Стили заливки удержания: растёт слева направо поверх кнопки, цвет контрастен варианту
+*/
+const buttonHoldFillVariants = cva([
+	"pointer-events-none absolute -inset-px flex items-center justify-center gap-[inherit] rounded-[inherit]",
+	"border border-transparent [clip-path:inset(0_calc((1-var(--hold-progress,0))*100%)_0_0)]",
+	"transition-opacity duration-200 group-data-[hold=resetting]/button:opacity-0"
+], {
+	variants: { variant: {
+		default: "bg-primary-foreground text-primary",
+		outline: "bg-primary text-primary-foreground",
+		secondary: "bg-primary text-primary-foreground",
+		ghost: "bg-primary text-primary-foreground",
+		destructive: "bg-destructive text-white",
+		link: "bg-primary text-primary-foreground"
+	} },
+	defaultVariants: { variant: "default" }
+});
+export { buttonHoldFillVariants, buttonVariants };

package/dist/components/button/use-hold-to-confirm.d.ts

@@ -0,0 +1,25 @@
+import { HoldStateT, HoldToConfirmOptionsI } from "./types.js";
+import { KeyboardEvent, PointerEvent } from "react";
+/**
+ * Удержание для подтверждения: пока держат кнопку (мышью, касанием, пробелом или Enter), заливка
+ * растёт до конца и вызывает onConfirm; отпустили раньше — заливка откатывается. Прогресс пишется
+ * в CSS-переменную --hold-progress (0…1) на элементе из ref, без перерисовки React
+ * @param options - настройки
+ * @returns состояние, ref для элемента и обработчики событий
+ */
+export declare function useHoldToConfirm({ enabled, duration, resetDelay, disabled, onConfirm, onCancel }: HoldToConfirmOptionsI): {
+  state: HoldStateT;
+  setElement: (node: HTMLElement | null) => void;
+  handlers: {
+    onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+    onPointerUp: () => void;
+    onPointerCancel: () => void;
+    onLostPointerCapture: () => void;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    onKeyUp: (event: KeyboardEvent<HTMLElement>) => void;
+    onBlur: () => void;
+    onContextMenu: (event: {
+      preventDefault: () => void;
+    }) => void;
+  };
+};

package/dist/components/button/use-hold-to-confirm.js

@@ -0,0 +1,161 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+// src/components/button/use-hold-to-confirm.ts
+/** Длительность отката заливки после раннего отпускания, мс */
+const CANCEL_DURATION = 350;
+/** Длительность исчезновения заливки при возврате к ожиданию, мс */
+const FADE_DURATION = 200;
+/**
+* Замедление к концу: откат заливки
+* @param time - доля времени от 0 до 1
+* @returns доля пути
+*/
+function easeOut(time) {
+	return 1 - (1 - time) ** 3;
+}
+/**
+* Клавиша, которой нажимают кнопку
+* @param key - клавиша
+* @returns true для пробела и Enter
+*/
+function isHoldKey(key) {
+	return key === " " || key === "Enter";
+}
+/**
+* Удержание для подтверждения: пока держат кнопку (мышью, касанием, пробелом или Enter), заливка
+* растёт до конца и вызывает onConfirm; отпустили раньше — заливка откатывается. Прогресс пишется
+* в CSS-переменную --hold-progress (0…1) на элементе из ref, без перерисовки React
+* @param options - настройки
+* @returns состояние, ref для элемента и обработчики событий
+*/
+function useHoldToConfirm({ enabled, duration, resetDelay, disabled, onConfirm, onCancel }) {
+	const [state, setState] = useState("idle");
+	const stateRef = useRef("idle");
+	const elementRef = useRef(null);
+	const progressRef = useRef(0);
+	/**
+	* Запомнить элемент кнопки: на нём обновляется прогресс удержания
+	* @param node - элемент или null при размонтировании
+	*/
+	const setElement = useCallback((node) => {
+		elementRef.current = node;
+	}, []);
+	const frameRef = useRef(0);
+	const timerRef = useRef(null);
+	const callbacksRef = useRef({
+		onConfirm,
+		onCancel
+	});
+	useEffect(() => {
+		callbacksRef.current = {
+			onConfirm,
+			onCancel
+		};
+	});
+	/**
+	* Сменить состояние
+	* @param next - новое состояние
+	*/
+	const updateState = (next) => {
+		stateRef.current = next;
+		setState(next);
+	};
+	/**
+	* Записать прогресс в CSS-переменную
+	* @param value - доля от 0 до 1
+	*/
+	const setProgress = (value) => {
+		progressRef.current = value;
+		elementRef.current?.style.setProperty("--hold-progress", String(value));
+	};
+	/** Остановить анимацию и таймер */
+	const stopAll = () => {
+		cancelAnimationFrame(frameRef.current);
+		if (timerRef.current) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+	};
+	/**
+	* Плавно довести прогресс до значения
+	* @param to - целевая доля
+	* @param time - длительность, мс
+	* @param easing - кривая
+	* @param onDone - по окончании
+	*/
+	const animateProgress = (to, time, easing, onDone) => {
+		const from = progressRef.current;
+		const startedAt = performance.now();
+		/** Кадр анимации */
+		const tick = () => {
+			const elapsed = Math.min((performance.now() - startedAt) / time, 1);
+			setProgress(from + (to - from) * easing(elapsed));
+			if (elapsed < 1) {
+				frameRef.current = requestAnimationFrame(tick);
+				return;
+			}
+			onDone?.();
+		};
+		cancelAnimationFrame(frameRef.current);
+		frameRef.current = requestAnimationFrame(tick);
+	};
+	/** Вернуться к ожиданию: заливка гаснет, прогресс обнуляется */
+	const reset = () => {
+		updateState("resetting");
+		timerRef.current = setTimeout(() => {
+			setProgress(0);
+			updateState("idle");
+		}, FADE_DURATION);
+	};
+	/** Удержали до конца */
+	const confirm = () => {
+		updateState("confirmed");
+		callbacksRef.current.onConfirm?.();
+		if (resetDelay !== false) timerRef.current = setTimeout(reset, resetDelay);
+	};
+	/** Начали удерживать: заливка растёт с текущего места */
+	const start = () => {
+		if (!enabled || disabled || stateRef.current !== "idle") return;
+		stopAll();
+		updateState("holding");
+		const remaining = duration * (1 - progressRef.current);
+		animateProgress(1, remaining, (value) => value, confirm);
+	};
+	/** Отпустили раньше: заливка откатывается */
+	const cancel = () => {
+		if (stateRef.current !== "holding") return;
+		const reached = progressRef.current;
+		updateState("idle");
+		animateProgress(0, CANCEL_DURATION, easeOut);
+		callbacksRef.current.onCancel?.(reached);
+	};
+	useEffect(() => {
+		if (disabled) cancel();
+	});
+	useEffect(() => stopAll, []);
+	return {
+		state,
+		setElement,
+		handlers: {
+			onPointerDown: (event) => {
+				if (event.button !== 0) return;
+				event.currentTarget.setPointerCapture(event.pointerId);
+				start();
+			},
+			onPointerUp: cancel,
+			onPointerCancel: cancel,
+			onLostPointerCapture: cancel,
+			onKeyDown: (event) => {
+				if (!isHoldKey(event.key)) return;
+				event.preventDefault();
+				if (!event.repeat) start();
+			},
+			onKeyUp: (event) => {
+				if (isHoldKey(event.key)) cancel();
+			},
+			onBlur: cancel,
+			onContextMenu: (event) => event.preventDefault()
+		}
+	};
+}
+export { useHoldToConfirm };

package/dist/components/button-group/button-group.d.ts

@@ -0,0 +1,20 @@
+import { ButtonGroupPropsT, ButtonGroupSeparatorPropsT, ButtonGroupTextPropsT } from "./types.js";
+/**
+ * Группа кнопок: связанные кнопки, поля и списки вплотную с общей рамкой
+ * @param props - пропсы группы
+ * @returns div с role="group"
+ */
+export declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupPropsT): import("react").JSX.Element;
+/**
+ * Текст в группе: подпись или префикс в серой плашке
+ * @param props - пропсы текста
+ * @returns div
+ */
+export declare function ButtonGroupText({ className, render, ...props }: ButtonGroupTextPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Разделитель в группе: линия между кнопками без рамки (например, secondary).
+ * Без orientation идёт поперёк группы: в горизонтальной — вертикальная линия, в вертикальной — горизонтальная
+ * @param props - пропсы разделителя
+ * @returns div
+ */
+export declare function ButtonGroupSeparator({ className, orientation, ...props }: ButtonGroupSeparatorPropsT): import("react").JSX.Element;

package/dist/components/button-group/button-group.js

@@ -0,0 +1,62 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Separator } from "../separator/separator.js";
+import { buttonGroupVariants } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { createContext, useContext } from "react";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/button-group/button-group.tsx
+/** Ориентация ближайшей группы: разделитель внутри поворачивается поперёк неё */
+const OrientationContext = createContext("horizontal");
+/**
+* Группа кнопок: связанные кнопки, поля и списки вплотную с общей рамкой
+* @param props - пропсы группы
+* @returns div с role="group"
+*/
+function ButtonGroup({ className, orientation, ...props }) {
+	const classes = cn(buttonGroupVariants({ orientation }), className);
+	return /* @__PURE__ */ jsx(OrientationContext, {
+		value: orientation ?? "horizontal",
+		children: /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"data-slot": "button-group",
+			"data-orientation": orientation,
+			className: classes,
+			...props
+		})
+	});
+}
+/**
+* Текст в группе: подпись или префикс в серой плашке
+* @param props - пропсы текста
+* @returns div
+*/
+function ButtonGroupText({ className, render, ...props }) {
+	const classes = cn("flex", "items-center", "gap-2", "rounded-lg", "border", "bg-muted", "px-2.5", "text-sm", "font-medium", "[&_svg]:pointer-events-none", "[&_svg:not([class*=size-])]:size-4", "group-data-[orientation=vertical]/button-group:min-h-8", "group-data-[orientation=vertical]/button-group:justify-center", className);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "button-group-text",
+			className: classes
+		}, props)
+	});
+}
+/**
+* Разделитель в группе: линия между кнопками без рамки (например, secondary).
+* Без orientation идёт поперёк группы: в горизонтальной — вертикальная линия, в вертикальной — горизонтальная
+* @param props - пропсы разделителя
+* @returns div
+*/
+function ButtonGroupSeparator({ className, orientation, ...props }) {
+	const acrossGroup = useContext(OrientationContext) === "vertical" ? "horizontal" : "vertical";
+	const classes = cn("relative", "self-stretch", "bg-input", "data-horizontal:mx-px", "data-horizontal:w-auto", "data-vertical:my-px", "data-vertical:h-auto", className);
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "button-group-separator",
+		orientation: orientation ?? acrossGroup,
+		className: classes,
+		...props
+	});
+}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,3 @@
+import { ButtonGroupPropsT, ButtonGroupSeparatorPropsT, ButtonGroupTextPropsT, buttonGroupVariants } from "./types.js";
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "./button-group.js";
+export { ButtonGroup, type ButtonGroupPropsT, ButtonGroupSeparator, type ButtonGroupSeparatorPropsT, ButtonGroupText, type ButtonGroupTextPropsT, buttonGroupVariants };

package/dist/components/button-group/index.js

@@ -0,0 +1,3 @@
+import { buttonGroupVariants } from "./types.js";
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "./button-group.js";
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/components/button-group/types.d.ts

@@ -0,0 +1,30 @@
+import { SeparatorPropsT } from "../separator/types.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Стили группы кнопок: ориентация.
+ * Экспортируются, чтобы оформить группой другой элемент: buttonGroupVariants({ orientation: 'vertical' }).
+ */
+export declare const buttonGroupVariants: (props?: ({
+  orientation?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты стилей группы
+ */
+export type ButtonGroupVariantsT = VariantProps<typeof buttonGroupVariants>;
+/**
+ * Пропсы группы кнопок
+ */
+export type ButtonGroupPropsT = ComponentProps<'div'> & {
+  /** Ориентация: horizontal — в ряд, vertical — столбиком */
+  orientation?: ButtonGroupVariantsT['orientation'];
+};
+/**
+ * Пропсы текста в группе
+ */
+export type ButtonGroupTextPropsT = useRender.ComponentProps<'div'>;
+/**
+ * Пропсы разделителя в группе
+ */
+export type ButtonGroupSeparatorPropsT = SeparatorPropsT;

package/dist/components/button-group/types.js

@@ -0,0 +1,19 @@
+import { cva } from "class-variance-authority";
+// src/components/button-group/types.ts
+/**
+* Стили группы кнопок: ориентация.
+* Экспортируются, чтобы оформить группой другой элемент: buttonGroupVariants({ orientation: 'vertical' }).
+*/
+const buttonGroupVariants = cva([
+	"group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10",
+	"[&>[data-slot=select-trigger]:not([class*=w-])]:w-fit [&>input]:flex-1",
+	"has-[>[data-slot=button-group]]:gap-2",
+	"has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg"
+], {
+	variants: { orientation: {
+		horizontal: ["[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0", "[&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!"],
+		vertical: ["flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0", "[&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!"]
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+export { buttonGroupVariants };

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,15 @@
+import { CalendarDayButtonPropsT, CalendarPropsT } from "./types.js";
+/**
+ * Календарь: выбор даты, нескольких дат или периода. Неделя начинается с понедельника,
+ * названия месяцев и дней — на русском
+ * @param props - пропсы DayPicker; mode — single, multiple или range
+ * @returns div
+ */
+export declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, weekStartsOn, formatters, components, ...props }: CalendarPropsT): import("react").JSX.Element;
+/**
+ * Кнопка дня: подсветка выбранного дня и периода. Используется в components.DayButton,
+ * чтобы дописать в день свой текст
+ * @param props - пропсы кнопки от DayPicker; day и modifiers — день и его состояния
+ * @returns кнопка
+ */
+export declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: CalendarDayButtonPropsT): import("react").JSX.Element;

package/dist/components/calendar/calendar.js

@@ -0,0 +1,157 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import "../../lib/locale.js";
+import { buttonVariants } from "../button/types.js";
+import { Button } from "../button/button.js";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { DayPicker, getDefaultClassNames, useDayPicker } from "react-day-picker";
+import { ru } from "react-day-picker/locale/ru";
+// src/components/calendar/calendar.tsx
+/**
+* Корень календаря с data-slot
+* @param props - пропсы корня от DayPicker
+* @returns div
+*/
+function CalendarRoot({ className, rootRef, ...props }) {
+	const classes = cn(className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "calendar",
+		ref: rootRef,
+		className: classes,
+		...props
+	});
+}
+/**
+* Стрелка навигации и выпадающих списков
+* @param props - пропсы стрелки от DayPicker; orientation — направление
+* @returns иконка
+*/
+function CalendarChevron({ className, orientation, size: _size, ...props }) {
+	const classes = cn("size-4", className);
+	if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
+		className: classes,
+		...props
+	});
+	if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
+		className: classes,
+		...props
+	});
+	return /* @__PURE__ */ jsx(ChevronDownIcon, {
+		className: classes,
+		...props
+	});
+}
+/**
+* Ячейка с номером недели
+* @param props - пропсы ячейки от DayPicker
+* @returns td
+*/
+function CalendarWeekNumber({ children, week: _week, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex size-(--cell-size) items-center justify-center text-center",
+			children
+		})
+	});
+}
+/**
+* Календарь: выбор даты, нескольких дат или периода. Неделя начинается с понедельника,
+* названия месяцев и дней — на русском
+* @param props - пропсы DayPicker; mode — single, multiple или range
+* @returns div
+*/
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale = ru, weekStartsOn: weekStartsOn$1 = 1, formatters, components, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	const classes = cn("group/calendar", "bg-background", "p-2", "[--cell-radius:var(--radius-md)]", "[--cell-size:--spacing(7)]", "in-data-[slot=card-content]:bg-transparent", "in-data-[slot=popover-content]:bg-transparent", className);
+	const captionLabelClasses = captionLayout === "label" ? "text-sm" : "flex h-6 items-center gap-1 rounded-(--cell-radius) pr-1 pl-1.5 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground";
+	const dayEdgeClasses = props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)";
+	const navButtonClasses = cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size)", "p-0", "select-none", "aria-disabled:opacity-50");
+	/**
+	* Короткое название месяца в выпадающем списке: «янв.»
+	* @param date - месяц
+	* @returns название
+	*/
+	const formatMonthDropdown = (date) => date.toLocaleString(locale?.code, { month: "short" });
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		className: classes,
+		captionLayout,
+		locale,
+		weekStartsOn: weekStartsOn$1,
+		formatters: {
+			formatMonthDropdown,
+			...formatters
+		},
+		classNames: {
+			root: cn("w-fit", defaultClassNames.root),
+			months: cn("relative", "flex", "flex-col", "gap-4", "md:flex-row", defaultClassNames.months),
+			month: cn("flex", "w-full", "flex-col", "gap-4", defaultClassNames.month),
+			nav: cn("absolute", "inset-x-0", "top-0", "flex", "w-full", "items-center", "justify-between", "gap-1", defaultClassNames.nav),
+			button_previous: cn(navButtonClasses, defaultClassNames.button_previous),
+			button_next: cn(navButtonClasses, defaultClassNames.button_next),
+			month_caption: cn("flex", "h-(--cell-size)", "w-full", "items-center", "justify-center", "px-(--cell-size)", defaultClassNames.month_caption),
+			dropdowns: cn("flex", "h-(--cell-size)", "w-full", "items-center", "justify-center", "gap-1.5", "text-sm", "font-medium", defaultClassNames.dropdowns),
+			dropdown_root: cn("relative", "rounded-(--cell-radius)", "border", "border-input", "keyboard:has-focus:border-ring", "keyboard:has-focus:ring-3", "keyboard:has-focus:ring-ring/50", defaultClassNames.dropdown_root),
+			dropdown: cn("absolute", "inset-0", "bg-popover", "opacity-0", defaultClassNames.dropdown),
+			caption_label: cn("font-medium", "select-none", captionLabelClasses, defaultClassNames.caption_label),
+			month_grid: cn("w-full", "border-collapse", defaultClassNames.month_grid),
+			weekdays: cn("flex", defaultClassNames.weekdays),
+			weekday: cn("flex-1", "rounded-(--cell-radius)", "text-[0.8rem]", "font-normal", "text-muted-foreground", "select-none", defaultClassNames.weekday),
+			week: cn("mt-2", "flex", "w-full", defaultClassNames.week),
+			week_number_header: cn("w-(--cell-size)", "select-none", defaultClassNames.week_number_header),
+			week_number: cn("text-[0.8rem]", "text-muted-foreground", "select-none", defaultClassNames.week_number),
+			day: cn("group/day", "relative", "aspect-square", "h-full", "w-full", "rounded-(--cell-radius)", "p-0", "text-center", "select-none", "[&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", dayEdgeClasses, defaultClassNames.day),
+			range_start: cn("relative", "isolate", "z-0", "rounded-l-(--cell-radius)", "bg-muted", "after:absolute", "after:inset-y-0", "after:right-0", "after:w-4", "after:bg-muted", defaultClassNames.range_start),
+			range_middle: cn("rounded-none", defaultClassNames.range_middle),
+			range_end: cn("relative", "isolate", "z-0", "rounded-r-(--cell-radius)", "bg-muted", "after:absolute", "after:inset-y-0", "after:left-0", "after:w-4", "after:bg-muted", defaultClassNames.range_end),
+			today: cn("rounded-(--cell-radius)", "bg-muted", "text-foreground", "data-[selected=true]:rounded-none", defaultClassNames.today),
+			outside: cn("text-muted-foreground", "aria-selected:text-muted-foreground", defaultClassNames.outside),
+			disabled: cn("text-muted-foreground", "opacity-50", defaultClassNames.disabled),
+			hidden: cn("invisible", defaultClassNames.hidden),
+			...classNames
+		},
+		components: {
+			Root: CalendarRoot,
+			Chevron: CalendarChevron,
+			DayButton: CalendarDayButton,
+			WeekNumber: CalendarWeekNumber,
+			...components
+		},
+		...props
+	});
+}
+/**
+* Кнопка дня: подсветка выбранного дня и периода. Используется в components.DayButton,
+* чтобы дописать в день свой текст
+* @param props - пропсы кнопки от DayPicker; day и modifiers — день и его состояния
+* @returns кнопка
+*/
+function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+	const { dayPickerProps } = useDayPicker();
+	const dayLocale = locale ?? dayPickerProps.locale;
+	const defaultClassNames = getDefaultClassNames();
+	const ref = useRef(null);
+	const isRange = modifiers.range_start || modifiers.range_end || modifiers.range_middle;
+	const isSelectedSingle = modifiers.selected && !isRange;
+	const dayLabel = day.date.toLocaleDateString(dayLocale?.code);
+	const classes = cn("relative", "isolate", "z-10", "flex", "aspect-square", "size-auto", "w-full", "min-w-(--cell-size)", "flex-col", "gap-1", "border-0", "leading-none", "font-normal", "group-data-[focused=true]/day:relative", "group-data-[focused=true]/day:z-10", "keyboard:group-data-[focused=true]/day:border-ring", "keyboard:group-data-[focused=true]/day:ring-[3px]", "keyboard:group-data-[focused=true]/day:ring-ring/50", "data-[range-end=true]:rounded-(--cell-radius)", "data-[range-end=true]:rounded-r-(--cell-radius)", "data-[range-end=true]:bg-primary", "data-[range-end=true]:text-primary-foreground", "data-[range-middle=true]:rounded-none", "data-[range-middle=true]:bg-muted", "data-[range-middle=true]:text-foreground", "data-[range-start=true]:rounded-(--cell-radius)", "data-[range-start=true]:rounded-l-(--cell-radius)", "data-[range-start=true]:bg-primary", "data-[range-start=true]:text-primary-foreground", "data-[selected-single=true]:bg-primary", "data-[selected-single=true]:text-primary-foreground", "dark:hover:text-foreground", "[&>span]:text-xs", "[&>span]:opacity-70", defaultClassNames.day, className);
+	useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		variant: "ghost",
+		size: "icon",
+		"data-day": dayLabel,
+		"data-selected-single": isSelectedSingle,
+		"data-range-start": modifiers.range_start,
+		"data-range-end": modifiers.range_end,
+		"data-range-middle": modifiers.range_middle,
+		className: classes,
+		...props
+	});
+}
+export { Calendar, CalendarDayButton };

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

@@ -0,0 +1,3 @@
+import { CalendarDayButtonPropsT, CalendarPropsT, CalendarRangeT } from "./types.js";
+import { Calendar, CalendarDayButton } from "./calendar.js";
+export { Calendar, CalendarDayButton, type CalendarDayButtonPropsT, type CalendarPropsT, type CalendarRangeT };

package/dist/components/calendar/index.js

@@ -0,0 +1 @@
+export { Calendar, CalendarDayButton } from "./calendar.js";

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

@@ -0,0 +1,21 @@
+import { ButtonPropsT } from "../button/types.js";
+import { ComponentProps } from "react";
+import { DateRange, DayButtonProps, DayPicker, DayPickerLocale } from "react-day-picker";
+/**
+ * Выбранный период: from — начало, to — конец
+ */
+export type CalendarRangeT = DateRange;
+/**
+ * Пропсы календаря
+ */
+export type CalendarPropsT = ComponentProps<typeof DayPicker> & {
+  /** Вариант кнопок «назад» и «вперёд». По умолчанию ghost */
+  buttonVariant?: ButtonPropsT['variant'];
+};
+/**
+ * Пропсы кнопки дня
+ */
+export type CalendarDayButtonPropsT = DayButtonProps & {
+  /** Локаль для data-day. По умолчанию — локаль календаря */
+  locale?: Partial<DayPickerLocale>;
+};