@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/toast/toast.js

@@ -0,0 +1,321 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { Button } from "../button/button.js";
+import { CircleCheckIcon, InfoIcon, LoaderCircleIcon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Toast } from "@base-ui/react/toast";
+// src/components/toast/toast.tsx
+/** Общий менеджер: им пользуются toast и Toaster по умолчанию */
+const defaultManager = Toast.createToastManager();
+/** Создать свой менеджер уведомлений: для отдельного Toaster */
+const createToastManager = Toast.createToastManager;
+/**
+* Функция показа уведомлений для менеджера
+* @param manager - менеджер, в который добавляются уведомления
+* @returns toast с методами success, info, warning, error, loading, promise, dismiss
+*/
+function createToast(manager) {
+	/**
+	* Добавить уведомление
+	* @param title - заголовок
+	* @param type - тип
+	* @param options - параметры
+	* @returns id уведомления
+	*/
+	const show = (title, type, options = {}) => {
+		const { id, description, action, duration, priority } = options;
+		let toastId = id;
+		/**
+		* Нажатие на кнопку действия: обработчик и закрытие
+		* @param event - событие нажатия
+		*/
+		const handleAction = (event) => {
+			action?.onClick?.(event);
+			manager.close(toastId);
+		};
+		const actionProps = action ? {
+			children: action.label,
+			onClick: handleAction
+		} : void 0;
+		toastId = manager.add({
+			id,
+			title,
+			type,
+			description,
+			timeout: duration,
+			priority,
+			actionProps
+		});
+		return toastId;
+	};
+	const toast = ((title, options) => show(title, void 0, options));
+	toast.success = (title, options) => show(title, "success", options);
+	toast.info = (title, options) => show(title, "info", options);
+	toast.warning = (title, options) => show(title, "warning", options);
+	toast.error = (title, options) => show(title, "error", Object.assign({ priority: "high" }, options));
+	toast.loading = (title, options) => show(title, "loading", options);
+	toast.dismiss = (id) => manager.close(id);
+	toast.promise = (promise, textsByState) => {
+		/**
+		* Текст успеха: строка или функция от результата
+		* @param value - результат задачи
+		* @returns параметры уведомления
+		*/
+		const getSuccess = (value) => {
+			const { success } = textsByState;
+			return { title: typeof success === "function" ? success(value) : success };
+		};
+		/**
+		* Текст ошибки: строка или функция от ошибки
+		* @param error - ошибка задачи
+		* @returns параметры уведомления
+		*/
+		const getError = (error) => {
+			const { error: errorText } = textsByState;
+			return {
+				title: typeof errorText === "function" ? errorText(error) : errorText,
+				priority: "high"
+			};
+		};
+		return manager.promise(promise, {
+			loading: { title: textsByState.loading },
+			success: getSuccess,
+			error: getError
+		});
+	};
+	return toast;
+}
+/** Показать уведомление в общем Toaster: toast('Текст'), toast.success(...), toast.promise(...) */
+const toast = createToast(defaultManager);
+/** Положение уведомлений для частей внутри Toaster */
+const ToastPositionContext = createContext("bottom-right");
+/** Положение области уведомлений на экране */
+const viewportPositions = {
+	"top-left": "top-4 left-4",
+	"top-center": "top-4 left-1/2 -translate-x-1/2",
+	"top-right": "top-4 right-4",
+	"bottom-left": "bottom-4 left-4",
+	"bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+	"bottom-right": "bottom-4 right-4"
+};
+/**
+* Область уведомлений: стопка в углу экрана, раскрывается при наведении
+* @param props - пропсы области
+* @returns область с role="region"
+*/
+function ToastViewport({ className, position, ...props }) {
+	const contextPosition = useContext(ToastPositionContext);
+	const currentPosition = position ?? contextPosition;
+	const classes = cn("pointer-events-none", "fixed", "z-100", "w-[calc(100%-2rem)]", "max-w-sm", "outline-none", viewportPositions[currentPosition], className);
+	return /* @__PURE__ */ jsx(Toast.Viewport, {
+		"data-slot": "toast-viewport",
+		"data-position": currentPosition,
+		"aria-label": texts.notifications,
+		className: classes,
+		...props
+	});
+}
+/** Классы уведомления, общие для верха и низа экрана */
+const toastBaseClasses = [
+	"group/toast pointer-events-auto absolute right-0 z-[calc(1000-var(--toast-index))] w-full",
+	"rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none",
+	"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+	"[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--peek:0.75rem]",
+	"[--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+	"h-(--height) [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
+	"after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[\"\"]",
+	"data-expanded:h-(--toast-height) data-limited:opacity-0",
+	"data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+	"data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]"
+];
+/** Уведомления внизу экрана: новые снизу, старые уходят вверх стопкой */
+const toastBottomClasses = [
+	"bottom-0 origin-bottom after:top-full",
+	"[--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]",
+	"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))]",
+	"data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+	"data-starting-style:[transform:translateY(150%)]",
+	"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+	"data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]"
+];
+/** Уведомления вверху экрана: новые сверху, старые уходят вниз стопкой */
+const toastTopClasses = [
+	"top-0 origin-top after:bottom-full",
+	"[--offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))]",
+	"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))]",
+	"data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+	"data-starting-style:[transform:translateY(-150%)]",
+	"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]",
+	"data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]"
+];
+/**
+* Уведомление: карточка в стопке; смахивается к краю экрана
+* @param props - пропсы уведомления; toast — объект из useToastManager().toasts
+* @returns карточка уведомления
+*/
+function Toast$1({ className, ...props }) {
+	const position = useContext(ToastPositionContext);
+	const isTop = position.startsWith("top");
+	const positionClasses = isTop ? toastTopClasses : toastBottomClasses;
+	const vertical = isTop ? "up" : "down";
+	const horizontal = position.endsWith("left") ? "left" : "right";
+	const classes = cn(toastBaseClasses, positionClasses, className);
+	return /* @__PURE__ */ jsx(Toast.Root, {
+		"data-slot": "toast",
+		swipeDirection: [vertical, horizontal],
+		className: classes,
+		...props
+	});
+}
+/**
+* Содержимое уведомления: иконка, текст и кнопки в строку; у задних карточек стопки скрыто
+* @param props - пропсы содержимого
+* @returns строка содержимого
+*/
+function ToastContent({ className, ...props }) {
+	const classes = cn("flex", "h-full", "items-center", "gap-3", "overflow-hidden", "p-4", "transition-opacity", "duration-250", "ease-[cubic-bezier(0.22,1,0.36,1)]", "data-behind:opacity-0", "data-expanded:opacity-100", className);
+	return /* @__PURE__ */ jsx(Toast.Content, {
+		"data-slot": "toast-content",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок уведомления: по умолчанию — первый аргумент toast()
+* @param props - пропсы заголовка
+* @returns заголовок
+*/
+function ToastTitle({ className, ...props }) {
+	const classes = cn("text-sm", "font-medium", className);
+	return /* @__PURE__ */ jsx(Toast.Title, {
+		"data-slot": "toast-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание уведомления: по умолчанию — description из параметров
+* @param props - пропсы описания
+* @returns абзац
+*/
+function ToastDescription({ className, ...props }) {
+	const classes = cn("text-sm", "text-muted-foreground", className);
+	return /* @__PURE__ */ jsx(Toast.Description, {
+		"data-slot": "toast-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Кнопка действия: по умолчанию — action из параметров, оформлена как Button outline sm
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function ToastAction({ className, render, ...props }) {
+	const button = /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "sm"
+	});
+	const classes = cn("shrink-0", className);
+	return /* @__PURE__ */ jsx(Toast.Action, {
+		"data-slot": "toast-action",
+		render: render ?? button,
+		className: classes,
+		...props
+	});
+}
+/**
+* Кнопка закрытия уведомления: крестик
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function ToastClose({ className, children, label = texts.close, render, ...props }) {
+	const button = /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon-sm"
+	});
+	const classes = cn("relative", "shrink-0", "text-muted-foreground", "after:absolute", "after:-inset-2", "after:content-[\"\"]", "hover:text-foreground", className);
+	return /* @__PURE__ */ jsx(Toast.Close, {
+		"data-slot": "toast-close",
+		"aria-label": label,
+		render: render ?? button,
+		className: classes,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(XIcon, { "aria-hidden": true })
+	});
+}
+/** Иконки типов уведомлений */
+const statusIcons = {
+	success: /* @__PURE__ */ jsx(CircleCheckIcon, { "aria-hidden": true }),
+	info: /* @__PURE__ */ jsx(InfoIcon, { "aria-hidden": true }),
+	warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { "aria-hidden": true }),
+	error: /* @__PURE__ */ jsx(OctagonXIcon, {
+		"aria-hidden": true,
+		className: "text-destructive"
+	}),
+	loading: /* @__PURE__ */ jsx(LoaderCircleIcon, {
+		"aria-hidden": true,
+		className: "animate-spin"
+	})
+};
+/**
+* Иконка типа уведомления
+* @param props - пропсы
+* @param props.type - тип уведомления
+* @returns иконка или null для обычного уведомления
+*/
+function ToastIcon({ type }) {
+	const icon = type ? statusIcons[type] : void 0;
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "toast-icon",
+		className: "shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4",
+		children: icon
+	});
+}
+/**
+* Список уведомлений: стандартная разметка каждого уведомления
+* @param props - пропсы списка
+* @returns уведомления
+*/
+function ToastList({ closeButton }) {
+	const { toasts } = Toast.useToastManager();
+	return toasts.map((toastItem) => /* @__PURE__ */ jsx(Toast$1, {
+		toast: toastItem,
+		children: /* @__PURE__ */ jsxs(ToastContent, { children: [
+			/* @__PURE__ */ jsx(ToastIcon, { type: toastItem.type }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [/* @__PURE__ */ jsx(ToastTitle, {}), /* @__PURE__ */ jsx(ToastDescription, {})]
+			}),
+			toastItem.actionProps && /* @__PURE__ */ jsx(ToastAction, {}),
+			closeButton && /* @__PURE__ */ jsx(ToastClose, {})
+		] })
+	}, toastItem.id));
+}
+/**
+* Контейнер уведомлений: ставится один раз в корень приложения
+* @param props - пропсы контейнера
+* @returns провайдер с областью уведомлений
+*/
+function Toaster({ children, position = "bottom-right", toastManager = defaultManager, closeButton = true, viewportLabel, ...props }) {
+	return /* @__PURE__ */ jsx(Toast.Provider, {
+		toastManager,
+		...props,
+		children: /* @__PURE__ */ jsxs(ToastPositionContext, {
+			value: position,
+			children: [children, /* @__PURE__ */ jsx(Toast.Portal, {
+				"data-slot": "toast-portal",
+				children: /* @__PURE__ */ jsx(ToastViewport, {
+					"aria-label": viewportLabel ?? texts.notifications,
+					children: /* @__PURE__ */ jsx(ToastList, { closeButton })
+				})
+			})]
+		})
+	});
+}
+/** Хук: список уведомлений и методы add, close, update, promise ближайшего Toaster */
+const useToastManager = Toast.useToastManager;
+export { Toast$1 as Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastTitle, ToastViewport, Toaster, createToast, createToastManager, toast, useToastManager };

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

@@ -0,0 +1,120 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { MouseEvent, ReactNode } from "react";
+import { Toast } from "@base-ui/react/toast";
+/**
+ * Угол экрана, где появляются уведомления
+ */
+export type ToastPositionT = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/**
+ * Тип уведомления: задаёт иконку
+ */
+export type ToastTypeT = 'success' | 'info' | 'warning' | 'error' | 'loading';
+/**
+ * Менеджер уведомлений Base UI: add, close, update, promise
+ */
+export type ToastManagerT = ReturnType<typeof Toast.createToastManager>;
+/**
+ * Кнопка действия в уведомлении
+ * @property label - Подпись кнопки
+ * @property onClick - Нажатие: после него уведомление закрывается
+ */
+export interface ToastActionI {
+  label: ReactNode;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * Параметры уведомления
+ * @property id - Свой идентификатор: уведомление с тем же id обновляется, а не дублируется
+ * @property description - Описание под заголовком
+ * @property action - Кнопка действия
+ * @property duration - Сколько мс показывать; 0 — пока не закроют
+ * @property priority - high — скринридер объявляет сразу (для ошибок)
+ */
+export interface ToastOptionsI {
+  id?: string;
+  description?: ReactNode;
+  action?: ToastActionI;
+  duration?: number;
+  priority?: 'low' | 'high';
+}
+/**
+ * Тексты уведомления при toast.promise: строка или функция от результата
+ * @property loading - Пока задача выполняется
+ * @property success - Задача выполнена
+ * @property error - Задача завершилась ошибкой
+ */
+export interface ToastPromiseTextsI<ValueT> {
+  loading: ReactNode;
+  success: ReactNode | ((value: ValueT) => ReactNode);
+  error: ReactNode | ((error: unknown) => ReactNode);
+}
+/**
+ * Показ уведомлений: toast('Текст'), toast.success(...), toast.error(...), toast.promise(...)
+ */
+export type ToastFunctionT = ((title: ReactNode, options?: ToastOptionsI) => string) & {
+  /** Успех: зелёная галочка */
+  success: (title: ReactNode, options?: ToastOptionsI) => string;
+  /** Информация */
+  info: (title: ReactNode, options?: ToastOptionsI) => string;
+  /** Предупреждение */
+  warning: (title: ReactNode, options?: ToastOptionsI) => string;
+  /** Ошибка: объявляется скринридером сразу */
+  error: (title: ReactNode, options?: ToastOptionsI) => string;
+  /** Загрузка: крутится, пока не обновят или не закроют */
+  loading: (title: ReactNode, options?: ToastOptionsI) => string;
+  /** Одно уведомление проходит загрузку, затем успех или ошибку */
+  promise: <ValueT>(promise: Promise<ValueT>, textsByState: ToastPromiseTextsI<ValueT>) => Promise<ValueT>;
+  /** Закрыть уведомление по id или все, если id не передан */
+  dismiss: (id?: string) => void;
+};
+/**
+ * Пропсы области уведомлений
+ */
+export type ToastViewportPropsT = PartPropsT<Toast.Viewport.Props> & {
+  /** Угол экрана. По умолчанию — из Toaster */
+  position?: ToastPositionT;
+};
+/**
+ * Пропсы уведомления
+ */
+export type ToastPropsT = PartPropsT<Toast.Root.Props>;
+/**
+ * Пропсы содержимого уведомления
+ */
+export type ToastContentPropsT = PartPropsT<Toast.Content.Props>;
+/**
+ * Пропсы заголовка
+ */
+export type ToastTitlePropsT = PartPropsT<Toast.Title.Props>;
+/**
+ * Пропсы описания
+ */
+export type ToastDescriptionPropsT = PartPropsT<Toast.Description.Props>;
+/**
+ * Пропсы кнопки действия
+ */
+export type ToastActionPropsT = PartPropsT<Toast.Action.Props>;
+/**
+ * Пропсы кнопки закрытия
+ */
+export type ToastClosePropsT = PartPropsT<Toast.Close.Props> & {
+  /** Подпись для скринридера, по умолчанию «Закрыть» */
+  label?: string;
+};
+/**
+ * Пропсы контейнера уведомлений
+ */
+export type ToasterPropsT = Omit<Toast.Provider.Props, 'toastManager'> & {
+  /** Угол экрана, где появляются уведомления. По умолчанию bottom-right */
+  position?: ToastPositionT;
+  /** Менеджер уведомлений: свой из createToastManager вместо общего, которым пользуется toast */
+  toastManager?: ToastManagerT;
+  /** Показывать крестик закрытия в каждом уведомлении. По умолчанию true */
+  closeButton?: boolean;
+  /** Сколько уведомлений видно в стопке. По умолчанию 3 */
+  limit?: number;
+  /** Сколько мс показывать уведомление по умолчанию. По умолчанию 5000 */
+  timeout?: number;
+  /** Подпись области уведомлений для скринридера. По умолчанию «Уведомления» */
+  viewportLabel?: string;
+};

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

@@ -0,0 +1,3 @@
+import { TogglePropsT, toggleVariants } from "./types.js";
+import { Toggle } from "./toggle.js";
+export { Toggle, type TogglePropsT, toggleVariants };

package/dist/components/toggle/index.js

@@ -0,0 +1,3 @@
+import { toggleVariants } from "./types.js";
+import { Toggle } from "./toggle.js";
+export { Toggle, toggleVariants };

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,7 @@
+import { TogglePropsT } from "./types.js";
+/**
+ * Переключатель-кнопка: два состояния, включено и выключено
+ * @param props - пропсы переключателя
+ * @returns кнопка с aria-pressed
+ */
+export declare function Toggle({ className, variant, size, disabled, onPressedChange, ...props }: TogglePropsT): import("react").JSX.Element;

package/dist/components/toggle/toggle.js

@@ -0,0 +1,32 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { toggleVariants } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+// src/components/toggle/toggle.tsx
+/**
+* Переключатель-кнопка: два состояния, включено и выключено
+* @param props - пропсы переключателя
+* @returns кнопка с aria-pressed
+*/
+function Toggle$1({ className, variant = "default", size = "default", disabled = false, onPressedChange, ...props }) {
+	const classes = cn(toggleVariants({
+		variant,
+		size
+	}), className);
+	/**
+	* Переключатель нажали: наружу только состояние
+	* @param pressed - включён ли
+	*/
+	const handlePressedChange = (pressed) => onPressedChange?.(pressed);
+	return /* @__PURE__ */ jsx(Toggle, {
+		"data-slot": "toggle",
+		"data-variant": variant,
+		"data-size": size,
+		disabled,
+		className: classes,
+		onPressedChange: handlePressedChange,
+		...props
+	});
+}
+export { Toggle$1 as Toggle };

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

@@ -0,0 +1,35 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { VariantProps } from "class-variance-authority";
+import { Toggle } from "@base-ui/react/toggle";
+/**
+ * Стили переключателя-кнопки: вариант оформления и размер.
+ * Экспортируются, чтобы оформить переключателем другой элемент: toggleVariants({ variant: 'outline' }).
+ */
+export declare const toggleVariants: (props?: ({
+  variant?: "default" | "outline" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Варианты оформления и размеры переключателя
+ */
+type ToggleVariantsT = VariantProps<typeof toggleVariants>;
+/**
+ * Пропсы переключателя-кнопки
+ */
+export type TogglePropsT = PartPropsT<Omit<Toggle.Props, 'onPressedChange'>> & {
+  /** Оформление: без фона или с рамкой */
+  variant?: ToggleVariantsT['variant'];
+  /** Размер: sm, default, lg */
+  size?: ToggleVariantsT['size'];
+  /** Включён ли переключатель — контролируемый режим, вместе с onPressedChange */
+  pressed?: boolean;
+  /** Включён ли переключатель при первом рендере — неконтролируемый режим */
+  defaultPressed?: boolean;
+  /** Переключатель включили или выключили: новое состояние */
+  onPressedChange?: (pressed: boolean) => void;
+  /** Отключённое состояние: переключатель не нажимается */
+  disabled?: boolean;
+  /** Значение кнопки внутри ToggleGroup */
+  value?: string;
+};
+export {};

package/dist/components/toggle/types.js

@@ -0,0 +1,37 @@
+import { cva } from "class-variance-authority";
+// src/components/toggle/types.ts
+/**
+* Стили переключателя-кнопки: вариант оформления и размер.
+* Экспортируются, чтобы оформить переключателем другой элемент: toggleVariants({ variant: 'outline' }).
+*/
+const toggleVariants = cva([
+	"group/toggle inline-flex items-center justify-center gap-1 rounded-lg",
+	"text-sm font-medium whitespace-nowrap transition-all outline-none",
+	"cursor-pointer hover:bg-muted hover:text-foreground",
+	"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+	"disabled:pointer-events-none disabled:opacity-50",
+	"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+	"aria-pressed:bg-muted data-pressed:bg-muted",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4"
+], {
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline: "border border-input bg-transparent hover:bg-muted"
+		},
+		size: {
+			default: ["h-8 min-w-8 px-2.5", "has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"],
+			sm: [
+				"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem]",
+				"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 min-w-9 px-2.5", "has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"]
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+export { toggleVariants };

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

@@ -0,0 +1,3 @@
+import { ToggleGroupItemPropsT, ToggleGroupPropsT } from "./types.js";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemPropsT, type ToggleGroupPropsT };

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

@@ -0,0 +1 @@
+export { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";

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

@@ -0,0 +1,13 @@
+import { ToggleGroupItemPropsT, ToggleGroupPropsT } from "./types.js";
+/**
+ * Группа переключателей: одна или несколько нажатых кнопок из набора
+ * @param props - пропсы группы
+ * @returns группа с ролью group
+ */
+export declare function ToggleGroup({ className, variant, size, spacing, orientation, style, children, onValueChange, ...props }: ToggleGroupPropsT): import("react").JSX.Element;
+/**
+ * Кнопка группы переключателей
+ * @param props - пропсы кнопки
+ * @returns кнопка с aria-pressed
+ */
+export declare function ToggleGroupItem({ className, variant, size, disabled, ...props }: ToggleGroupItemPropsT): import("react").JSX.Element;