@archytechtor/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,51 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Стили пузыря: цвет содержимого задаёт вариант.
+ * Содержимое-кнопка или ссылка (render у BubbleContent) меняет фон при наведении
+ */
+export declare const bubbleVariants: (props?: ({
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "muted" | "tinted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Стили реакций: плашка на краю пузыря сверху или снизу
+ */
+export declare const bubbleReactionsVariants: (props?: ({
+  side?: "top" | "bottom" | null | undefined;
+  align?: "start" | "end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты оформления пузыря
+ */
+type BubbleVariantsT = VariantProps<typeof bubbleVariants>;
+/**
+ * Пропсы группы пузырей
+ */
+export type BubbleGroupPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы пузыря
+ */
+export type BubblePropsT = ComponentProps<'div'> & {
+  /**
+   * Оформление: default — основной цвет, secondary, muted — приглушённый, tinted — оттенок основного,
+   * outline — с рамкой, ghost — без рамки и фона во всю ширину, destructive — ошибка
+   */
+  variant?: BubbleVariantsT['variant'];
+  /** Сторона: start — слева (собеседник), end — справа (свои сообщения) */
+  align?: 'start' | 'end';
+};
+/**
+ * Пропсы содержимого пузыря
+ */
+export type BubbleContentPropsT = useRender.ComponentProps<'div'>;
+/**
+ * Пропсы реакций пузыря
+ */
+export type BubbleReactionsPropsT = ComponentProps<'div'> & {
+  /** Край пузыря по горизонтали: start — слева, end — справа */
+  align?: 'start' | 'end';
+  /** Край пузыря по вертикали: top — сверху, bottom — снизу */
+  side?: 'top' | 'bottom';
+};
+export {};

package/dist/components/bubble/types.js

@@ -0,0 +1,60 @@
+import { cva } from "class-variance-authority";
+// src/components/bubble/types.ts
+/**
+* Стили пузыря: цвет содержимого задаёт вариант.
+* Содержимое-кнопка или ссылка (render у BubbleContent) меняет фон при наведении
+*/
+const bubbleVariants = cva(["group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1", "data-[align=end]:self-end data-[variant=ghost]:max-w-full group-data-[align=end]/message:self-end"], {
+	variants: { variant: {
+		default: ["*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground", "[&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80"],
+		secondary: ["*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground", "[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]"],
+		muted: ["*:data-[slot=bubble-content]:bg-muted", "[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]"],
+		tinted: [
+			"*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)]",
+			"dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)]",
+			"*:data-[slot=bubble-content]:text-foreground",
+			"[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)]",
+			"dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]"
+		],
+		outline: [
+			"*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background",
+			"[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted",
+			"[&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground",
+			"dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30"
+		],
+		ghost: [
+			"border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent",
+			"*:data-[slot=bubble-content]:p-0",
+			"[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted",
+			"[&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground",
+			"dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50"
+		],
+		destructive: [
+			"*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive",
+			"dark:*:data-[slot=bubble-content]:bg-destructive/20",
+			"[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20",
+			"dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+		]
+	} },
+	defaultVariants: { variant: "default" }
+});
+/**
+* Стили реакций: плашка на краю пузыря сверху или снизу
+*/
+const bubbleReactionsVariants = cva(["absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5", "text-sm ring-3 ring-card has-[button]:p-0"], {
+	variants: {
+		side: {
+			top: "top-0 -translate-y-3/4",
+			bottom: "bottom-0 translate-y-3/4"
+		},
+		align: {
+			start: "left-3",
+			end: "right-3"
+		}
+	},
+	defaultVariants: {
+		side: "bottom",
+		align: "end"
+	}
+});
+export { bubbleReactionsVariants, bubbleVariants };

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

@@ -0,0 +1,7 @@
+import { ButtonPropsT } from "./types.js";
+/**
+ * Кнопка: действие на странице или в форме. Ссылку в стилях кнопки рисуют через render={<a href />}
+ * @param props - пропсы кнопки
+ * @returns кнопка или свой элемент в стилях кнопки
+ */
+export declare function Button({ className, variant, size, disabled, loading, loadingLabel, render, nativeButton, onClick, holdToConfirm, holdDuration, holdResetDelay, onConfirm, onHoldCancel, confirmedContent, holdLabel, ref, children, ...props }: ButtonPropsT): import("react").JSX.Element;

package/dist/components/button/button.js

@@ -0,0 +1,155 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { buttonHoldFillVariants, buttonVariants } from "./types.js";
+import { useHoldToConfirm } from "./use-hold-to-confirm.js";
+import { LoaderCircleIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { isValidElement, useId } from "react";
+// src/components/button/button.tsx
+/**
+* render отрисовывает не <button>: ссылку или другой элемент
+* @param render - свой элемент
+* @returns true, если это не кнопка
+*/
+function isCustomElement(render) {
+	if (render === void 0) return false;
+	return !isValidElement(render) || render.type !== "button";
+}
+/**
+* Кнопка: действие на странице или в форме. Ссылку в стилях кнопки рисуют через render={<a href />}
+* @param props - пропсы кнопки
+* @returns кнопка или свой элемент в стилях кнопки
+*/
+function Button$1({ className, variant = "default", size = "default", disabled = false, loading = false, loadingLabel = texts.loading, render, nativeButton, onClick, holdToConfirm = false, holdDuration = 1500, holdResetDelay = 2e3, onConfirm, onHoldCancel, confirmedContent, holdLabel = texts.holdToConfirm, ref, children, ...props }) {
+	const isInactive = disabled || loading;
+	const isCustom = isCustomElement(render);
+	const holdLabelId = useId();
+	const hold = useHoldToConfirm({
+		enabled: holdToConfirm,
+		duration: holdDuration,
+		resetDelay: holdResetDelay,
+		disabled: isInactive,
+		onConfirm,
+		onCancel: onHoldCancel
+	});
+	const isConfirmed = hold.state === "confirmed";
+	const classes = cn(buttonVariants({
+		variant,
+		size
+	}), holdToConfirm && "relative", holdToConfirm && "touch-manipulation", holdToConfirm && "[-webkit-touch-callout:none]", holdToConfirm && "transition-[color,background-color,border-color,box-shadow,scale]", holdToConfirm && "duration-[600ms]", holdToConfirm && "ease-spring-bounce", holdToConfirm && "data-[hold=holding]:scale-[0.97]", holdToConfirm && "data-[hold=holding]:duration-200", holdToConfirm && "data-[hold=holding]:ease-out", holdToConfirm && "motion-reduce:scale-100", className);
+	/**
+	* Нажатие: у отключённой ссылки отменить переход и не вызывать onClick
+	* @param event - событие нажатия
+	*/
+	const handleClick = (event) => {
+		if (isInactive) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	};
+	const ariaDisabled = isCustom && isInactive || void 0;
+	const nativeDisabled = isCustom ? void 0 : isInactive;
+	/**
+	* Элемент кнопки: в хук удержания и наружу
+	* @param node - элемент или null при размонтировании
+	*/
+	const setRef = (node) => {
+		hold.setElement(node);
+		if (typeof ref === "function") {
+			ref(node);
+			return;
+		}
+		if (ref) ref.current = node;
+	};
+	const holdProps = holdToConfirm ? {
+		...hold.handlers,
+		"data-hold": hold.state,
+		"aria-describedby": holdLabelId
+	} : {};
+	const rootProps = mergeProps(props, holdProps);
+	const fillClasses = buttonHoldFillVariants({ variant });
+	const fillContent = isConfirmed ? confirmedContent ?? /* @__PURE__ */ jsx(ButtonConfirmed, {}) : children;
+	const fillKey = isConfirmed ? "confirmed" : "idle";
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "button",
+		"data-variant": variant,
+		"data-size": size,
+		"data-loading": loading || void 0,
+		"aria-busy": loading || void 0,
+		"aria-disabled": ariaDisabled,
+		disabled: nativeDisabled,
+		nativeButton: nativeButton ?? !isCustom,
+		render,
+		ref: setRef,
+		className: classes,
+		onClick: handleClick,
+		...rootProps,
+		children: [
+			loading && /* @__PURE__ */ jsx(ButtonSpinner, {}),
+			children,
+			loading && " ",
+			loading && /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: loadingLabel
+			}),
+			holdToConfirm && /* @__PURE__ */ jsx("span", {
+				"data-slot": "button-hold-fill",
+				"aria-hidden": true,
+				className: fillClasses,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "inline-flex items-center gap-[inherit] animate-in duration-300 fade-in-0 zoom-in-90 blur-in",
+					children: fillContent
+				}, fillKey)
+			}),
+			holdToConfirm && /* @__PURE__ */ jsx("span", {
+				id: holdLabelId,
+				className: "sr-only",
+				children: holdLabel
+			}),
+			holdToConfirm && /* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				className: "sr-only",
+				children: isConfirmed && texts.done
+			})
+		]
+	});
+}
+/**
+* Содержимое после подтверждения удержанием: прорисованная галочка и «Готово»
+* @returns галочка и текст
+*/
+function ButtonConfirmed() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": true,
+		"data-icon": "inline-start",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M5 12.5l4.5 4.5L19 7.5",
+			pathLength: 1,
+			strokeDasharray: 1,
+			className: "animate-draw motion-reduce:animate-none"
+		})
+	}), texts.done] });
+}
+/**
+* Спиннер загрузки: декоративный, состояние объявляет текст loadingLabel
+* @returns иконка спиннера
+*/
+function ButtonSpinner() {
+	return /* @__PURE__ */ jsx(LoaderCircleIcon, {
+		"data-slot": "button-spinner",
+		"data-icon": "inline-start",
+		"aria-hidden": true,
+		className: "animate-spin"
+	});
+}
+export { Button$1 as Button };

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

@@ -0,0 +1,4 @@
+import { ButtonPropsT, HoldStateT, HoldToConfirmOptionsI, buttonHoldFillVariants, buttonVariants } from "./types.js";
+import { Button } from "./button.js";
+import { useHoldToConfirm } from "./use-hold-to-confirm.js";
+export { Button, type ButtonPropsT, type HoldStateT, type HoldToConfirmOptionsI, buttonHoldFillVariants, buttonVariants, useHoldToConfirm };

package/dist/components/button/index.js

@@ -0,0 +1,4 @@
+import { buttonHoldFillVariants, buttonVariants } from "./types.js";
+import { useHoldToConfirm } from "./use-hold-to-confirm.js";
+import { Button } from "./button.js";
+export { Button, buttonHoldFillVariants, buttonVariants, useHoldToConfirm };

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

@@ -0,0 +1,80 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { VariantProps } from "class-variance-authority";
+import { Button } from "@base-ui/react/button";
+import { MouseEvent, ReactNode, Ref } from "react";
+/**
+ * Стили кнопки: вариант оформления и размер.
+ * Экспортируются, чтобы оформить кнопкой другой элемент: buttonVariants({ variant: 'outline' }).
+ *
+ * Отключённая кнопка (disabled или aria-disabled у render) не теряет события мыши, чтобы показать
+ * курсор not-allowed (в загрузке — progress): нажатие блокирует сам disabled или обработчик Button,
+ * а цвета наведения у каждого варианта возвращаются к обычным.
+ */
+export declare const buttonVariants: (props?: ({
+  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+  size?: "default" | "sm" | "xs" | "icon" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты оформления и размеры кнопки
+ */
+export type ButtonVariantsT = VariantProps<typeof buttonVariants>;
+/**
+ * Стили заливки удержания: растёт слева направо поверх кнопки, цвет контрастен варианту
+ */
+export declare const buttonHoldFillVariants: (props?: ({
+  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Пропсы кнопки
+ */
+export type ButtonPropsT = PartPropsT<Omit<Button.Props, 'onClick' | 'disabled' | 'ref'>> & {
+  /** Оформление: основная, контурная, второстепенная, без фона, опасное действие или ссылка */
+  variant?: ButtonVariantsT['variant'];
+  /** Размер: xs, sm, default, lg — для кнопки с текстом; icon-xs, icon-sm, icon, icon-lg — для кнопки с одной иконкой */
+  size?: ButtonVariantsT['size'];
+  /** Отключённое состояние: кнопка не нажимается */
+  disabled?: boolean;
+  /** Состояние загрузки: спиннер вместо иконки в начале, кнопка отключена */
+  loading?: boolean;
+  /** Текст для скринридера во время загрузки, по умолчанию «Загрузка…» */
+  loadingLabel?: string;
+  /** Нажатие на кнопку. Не вызывается, пока кнопка отключена или в состоянии загрузки */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  /** Подтверждение удержанием: действие срабатывает, только если держать кнопку holdDuration мс */
+  holdToConfirm?: boolean;
+  /** Сколько держать кнопку до подтверждения, мс. По умолчанию 1500 */
+  holdDuration?: number;
+  /** Через сколько мс после подтверждения кнопка вернётся в исходный вид; false — останется. По умолчанию 2000 */
+  holdResetDelay?: number | false;
+  /** Кнопку удержали до конца */
+  onConfirm?: () => void;
+  /** Кнопку отпустили раньше: доля пройденного пути от 0 до 1 */
+  onHoldCancel?: (progress: number) => void;
+  /** Содержимое после подтверждения, по умолчанию галочка и «Готово» */
+  confirmedContent?: ReactNode;
+  /** Подсказка для скринридера, по умолчанию «Нажмите и удерживайте, чтобы подтвердить» */
+  holdLabel?: string;
+  /** Ссылка на элемент кнопки */
+  ref?: Ref<HTMLElement>;
+};
+/**
+ * Состояние удержания: ожидание, удерживают, подтверждено, возврат к ожиданию
+ */
+export type HoldStateT = 'idle' | 'holding' | 'confirmed' | 'resetting';
+/**
+ * Настройки удержания для подтверждения
+ * @property enabled - Включить удержание; false — обработчики ничего не делают
+ * @property duration - Сколько держать до подтверждения, мс
+ * @property resetDelay - Через сколько мс после подтверждения вернуться к ожиданию; false — остаться
+ * @property disabled - Не реагировать на нажатия
+ * @property onConfirm - Удержали до конца
+ * @property onCancel - Отпустили раньше: доля пройденного пути от 0 до 1
+ */
+export interface HoldToConfirmOptionsI {
+  enabled: boolean;
+  duration: number;
+  resetDelay: number | false;
+  disabled: boolean;
+  onConfirm?: () => void;
+  onCancel?: (progress: number) => void;
+}

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