@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,115 @@
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/breadcrumb/breadcrumb.tsx
+/**
+* Навигационная цепочка: путь к текущей странице по иерархии разделов
+* @param props - пропсы цепочки
+* @returns элемент <nav>
+*/
+function Breadcrumb({ className, label = texts.breadcrumb, ...props }) {
+	const classes = cn(className);
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": label,
+		"data-slot": "breadcrumb",
+		className: classes,
+		...props
+	});
+}
+/**
+* Список пунктов навигационной цепочки
+* @param props - пропсы списка
+* @returns элемент <ol>
+*/
+function BreadcrumbList({ className, ...props }) {
+	const classes = cn("flex", "flex-wrap", "items-center", "gap-1.5", "text-sm", "wrap-break-word", "text-muted-foreground", className);
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: classes,
+		...props
+	});
+}
+/**
+* Пункт навигационной цепочки: ссылка, текущая страница или многоточие
+* @param props - пропсы пункта
+* @returns элемент <li>
+*/
+function BreadcrumbItem({ className, ...props }) {
+	const classes = cn("inline-flex", "items-center", "gap-1", className);
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: classes,
+		...props
+	});
+}
+/**
+* Ссылка на раздел в навигационной цепочке
+* @param props - пропсы ссылки
+* @returns ссылка или дочерний элемент в стилях ссылки (render)
+*/
+function BreadcrumbLink({ render, className, ...props }) {
+	const classes = cn("transition-colors", "hover:text-foreground", className);
+	return useRender({
+		defaultTagName: "a",
+		render,
+		props: mergeProps({
+			"data-slot": "breadcrumb-link",
+			className: classes
+		}, props)
+	});
+}
+/**
+* Текущая страница: последний пункт цепочки, не ссылка
+* @param props - пропсы текущей страницы
+* @returns элемент с aria-current="page"
+*/
+function BreadcrumbPage({ className, ...props }) {
+	const classes = cn("font-normal", "text-foreground", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-page",
+		role: "link",
+		"aria-disabled": "true",
+		"aria-current": "page",
+		className: classes,
+		...props
+	});
+}
+/**
+* Разделитель между пунктами, по умолчанию шеврон. Скрыт от скринридера
+* @param props - пропсы разделителя; children заменяет иконку
+* @returns элемент <li>
+*/
+function BreadcrumbSeparator({ children, className, ...props }) {
+	const classes = cn("[&>svg]:size-3.5", className);
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: classes,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+}
+/**
+* Многоточие на месте свёрнутых пунктов длинной цепочки
+* @param props - пропсы многоточия
+* @returns иконка многоточия с текстом для скринридера
+*/
+function BreadcrumbEllipsis({ className, label = texts.more, ...props }) {
+	const classes = cn("flex", "size-5", "items-center", "justify-center", "[&>svg]:size-4", className);
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

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

@@ -0,0 +1,3 @@
+import { BreadcrumbEllipsisPropsT, BreadcrumbItemPropsT, BreadcrumbLinkPropsT, BreadcrumbListPropsT, BreadcrumbPagePropsT, BreadcrumbPropsT, BreadcrumbSeparatorPropsT } from "./types.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";
+export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisPropsT, BreadcrumbItem, type BreadcrumbItemPropsT, BreadcrumbLink, type BreadcrumbLinkPropsT, BreadcrumbList, type BreadcrumbListPropsT, BreadcrumbPage, type BreadcrumbPagePropsT, type BreadcrumbPropsT, BreadcrumbSeparator, type BreadcrumbSeparatorPropsT };

package/dist/components/breadcrumb/index.js

@@ -0,0 +1 @@
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";

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

@@ -0,0 +1,36 @@
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * Пропсы навигационной цепочки
+ */
+export type BreadcrumbPropsT = ComponentProps<'nav'> & {
+  /** Название навигации для скринридера (aria-label), по умолчанию «Навигационная цепочка» */
+  label?: string;
+};
+/**
+ * Пропсы списка навигационной цепочки
+ */
+export type BreadcrumbListPropsT = ComponentProps<'ol'>;
+/**
+ * Пропсы пункта навигационной цепочки
+ */
+export type BreadcrumbItemPropsT = ComponentProps<'li'>;
+/**
+ * Пропсы ссылки навигационной цепочки
+ */
+export type BreadcrumbLinkPropsT = useRender.ComponentProps<'a'>;
+/**
+ * Пропсы текущей страницы навигационной цепочки
+ */
+export type BreadcrumbPagePropsT = ComponentProps<'span'>;
+/**
+ * Пропсы разделителя навигационной цепочки
+ */
+export type BreadcrumbSeparatorPropsT = ComponentProps<'li'>;
+/**
+ * Пропсы многоточия навигационной цепочки
+ */
+export type BreadcrumbEllipsisPropsT = ComponentProps<'span'> & {
+  /** Текст для скринридера, по умолчанию «Ещё» */
+  label?: string;
+};

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

@@ -0,0 +1,25 @@
+import { BubbleContentPropsT, BubbleGroupPropsT, BubblePropsT, BubbleReactionsPropsT } from "./types.js";
+/**
+ * Группа пузырей: подряд идущие сообщения одного автора
+ * @param props - пропсы группы
+ * @returns колонка пузырей
+ */
+export declare function BubbleGroup({ className, ...props }: BubbleGroupPropsT): import("react").JSX.Element;
+/**
+ * Пузырь: сообщение в чате
+ * @param props - пропсы пузыря
+ * @returns пузырь
+ */
+export declare function Bubble({ variant, align, className, ...props }: BubblePropsT): import("react").JSX.Element;
+/**
+ * Содержимое пузыря: текст сообщения на цветной подложке
+ * @param props - пропсы содержимого
+ * @returns содержимое или дочерний элемент в его стилях (render)
+ */
+export declare function BubbleContent({ render, className, ...props }: BubbleContentPropsT): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Реакции пузыря: эмодзи или кнопка на краю сообщения
+ * @param props - пропсы реакций
+ * @returns плашка реакций
+ */
+export declare function BubbleReactions({ side, align, className, ...props }: BubbleReactionsPropsT): import("react").JSX.Element;

package/dist/components/bubble/bubble.js

@@ -0,0 +1,69 @@
+import { cn } from "../../lib/utils.js";
+import { bubbleReactionsVariants, bubbleVariants } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/bubble/bubble.tsx
+/**
+* Группа пузырей: подряд идущие сообщения одного автора
+* @param props - пропсы группы
+* @returns колонка пузырей
+*/
+function BubbleGroup({ className, ...props }) {
+	const classes = cn("flex", "min-w-0", "flex-col", "gap-2", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble-group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Пузырь: сообщение в чате
+* @param props - пропсы пузыря
+* @returns пузырь
+*/
+function Bubble({ variant = "default", align = "start", className, ...props }) {
+	const classes = cn(bubbleVariants({ variant }), className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble",
+		"data-variant": variant,
+		"data-align": align,
+		className: classes,
+		...props
+	});
+}
+/**
+* Содержимое пузыря: текст сообщения на цветной подложке
+* @param props - пропсы содержимого
+* @returns содержимое или дочерний элемент в его стилях (render)
+*/
+function BubbleContent({ render, className, ...props }) {
+	const classes = cn("w-fit", "max-w-full", "min-w-0", "overflow-hidden", "rounded-xl", "border", "border-transparent", "px-3", "py-2", "text-sm", "leading-relaxed", "wrap-break-word", "group-data-[align=end]/bubble:self-end", "[button]:cursor-pointer", "[button]:text-left", "[button,a]:transition-colors", "[button,a]:outline-none", "[button,a]:focus-visible:border-ring", "[button,a]:focus-visible:ring-3", "[button,a]:focus-visible:ring-ring/30", className);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "bubble-content",
+			className: classes
+		}, props)
+	});
+}
+/**
+* Реакции пузыря: эмодзи или кнопка на краю сообщения
+* @param props - пропсы реакций
+* @returns плашка реакций
+*/
+function BubbleReactions({ side = "bottom", align = "end", className, ...props }) {
+	const classes = cn(bubbleReactionsVariants({
+		side,
+		align
+	}), className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble-reactions",
+		"data-align": align,
+		"data-side": side,
+		className: classes,
+		...props
+	});
+}
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };

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

@@ -0,0 +1,3 @@
+import { BubbleContentPropsT, BubbleGroupPropsT, BubblePropsT, BubbleReactionsPropsT, bubbleReactionsVariants, bubbleVariants } from "./types.js";
+import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "./bubble.js";
+export { Bubble, BubbleContent, type BubbleContentPropsT, BubbleGroup, type BubbleGroupPropsT, type BubblePropsT, BubbleReactions, type BubbleReactionsPropsT, bubbleReactionsVariants, bubbleVariants };

package/dist/components/bubble/index.js

@@ -0,0 +1,3 @@
+import { bubbleReactionsVariants, bubbleVariants } from "./types.js";
+import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "./bubble.js";
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions, bubbleReactionsVariants, bubbleVariants };

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?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+  size?: "default" | "icon" | "sm" | "xs" | "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?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | 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;
+}