@archytechtor/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+// src/components/radio-group/radio-group.tsx
+/**
+* Группа переключателей: выбор одного варианта из нескольких
+* @param props - пропсы группы
+* @returns элемент с role=radiogroup
+*/
+function RadioGroup$1({ className, onValueChange, ...props }) {
+	const classes = cn("grid", "w-full", "gap-2", className);
+	/**
+	* Выбран другой вариант: наружу только значение
+	* @param value - значение варианта
+	*/
+	const handleValueChange = (value) => onValueChange?.(value);
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		"data-slot": "radio-group",
+		className: classes,
+		onValueChange: handleValueChange,
+		...props
+	});
+}
+/**
+* Вариант группы: круглая кнопка с точкой, когда выбран
+* @param props - пропсы варианта
+* @returns элемент с role=radio
+*/
+function RadioGroupItem({ className, ...props }) {
+	const classes = cn("group/radio-group-item", "peer", "relative", "flex", "aspect-square", "size-4", "shrink-0", "rounded-full", "border", "border-input", "outline-none", "keyboard:group-has-[:focus-visible]/field-label:ring-0", "keyboard:group-has-[:focus-visible]/field-label:not-data-checked:border-input", "after:absolute", "after:-inset-x-3", "after:-inset-y-2", "focus-visible:border-ring", "focus-visible:ring-3", "focus-visible:ring-ring/50", "data-disabled:cursor-not-allowed", "data-disabled:opacity-50", "aria-invalid:border-destructive", "aria-invalid:ring-3", "aria-invalid:ring-destructive/20", "aria-invalid:aria-checked:border-primary", "dark:bg-input/30", "dark:aria-invalid:border-destructive/50", "dark:aria-invalid:ring-destructive/40", "data-checked:border-primary", "data-checked:bg-primary", "data-checked:text-primary-foreground", "dark:data-checked:bg-primary", "keyboard:group-has-[:focus-visible]/field-label:data-checked:border-primary", className);
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		"data-slot": "radio-group-item",
+		className: classes,
+		...props,
+		children: /* @__PURE__ */ jsx(Radio.Indicator, {
+			"data-slot": "radio-group-indicator",
+			className: "flex size-4 items-center justify-center",
+			children: /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" })
+		})
+	});
+}
+export { RadioGroup$1 as RadioGroup, RadioGroupItem };

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

@@ -0,0 +1,33 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+/**
+ * Пропсы группы переключателей
+ */
+export type RadioGroupPropsT = PartPropsT<Omit<RadioGroup.Props, 'value' | 'defaultValue' | 'onValueChange'>> & {
+  /** Значение выбранного варианта — контролируемый режим, вместе с onValueChange */
+  value?: string;
+  /** Значение выбранного варианта при первом рендере — неконтролируемый режим */
+  defaultValue?: string;
+  /** Выбран другой вариант: его значение */
+  onValueChange?: (value: string) => void;
+  /** Отключить все варианты группы */
+  disabled?: boolean;
+  /** Обязательное поле: форма не отправится, пока вариант не выбран */
+  required?: boolean;
+  /** Имя поля при отправке формы */
+  name?: string;
+  /** Только чтение: выбор виден, но не меняется */
+  readOnly?: boolean;
+};
+/**
+ * Пропсы варианта группы
+ */
+export type RadioGroupItemPropsT = PartPropsT<Omit<Radio.Root.Props, 'value' | 'children'>> & {
+  /** Значение варианта: попадает в value группы, когда вариант выбран */
+  value: string;
+  /** Отключить только этот вариант */
+  disabled?: boolean;
+  /** Ошибка: красная рамка и объявление скринридеру, что значение неверное */
+  'aria-invalid'?: boolean;
+};

package/dist/components/reorder-list/index.d.ts

@@ -0,0 +1,3 @@
+import { ReorderListHandlePropsT, ReorderListItemPropsT, ReorderListOrientationT, ReorderListPropsT } from "./types.js";
+import { ReorderList, ReorderListHandle, ReorderListItem } from "./reorder-list.js";
+export { ReorderList, ReorderListHandle, type ReorderListHandlePropsT, ReorderListItem, type ReorderListItemPropsT, type ReorderListOrientationT, type ReorderListPropsT };

package/dist/components/reorder-list/index.js

@@ -0,0 +1 @@
+export { ReorderList, ReorderListHandle, ReorderListItem } from "./reorder-list.js";

package/dist/components/reorder-list/reorder-list.d.ts

@@ -0,0 +1,19 @@
+import { ReorderListHandlePropsT, ReorderListItemPropsT, ReorderListPropsT } from "./types.js";
+/**
+ * Список с перетаскиванием: порядок меняют мышью, пальцем и стрелками клавиатуры
+ * @param props - пропсы списка
+ * @returns список ul с элементами в текущем порядке
+ */
+export declare function ReorderList({ className, value, defaultValue, onValueChange, onValueCommitted, orientation, withHandle, disabled, hint, getMoveAnnouncement, children, ...props }: ReorderListPropsT): import("react").JSX.Element;
+/**
+ * Элемент списка: тянется целиком или за ручку, двигается стрелками, Home и End
+ * @param props - пропсы элемента
+ * @returns элемент li
+ */
+export declare function ReorderListItem({ value, className, disabled, style, onKeyDown, children, ...props }: ReorderListItemPropsT): import("react").JSX.Element;
+/**
+ * Ручка перетаскивания: кнопка внутри ReorderListItem, тянется мышью и двигается стрелками
+ * @param props - пропсы ручки
+ * @returns кнопка ручки
+ */
+export declare function ReorderListHandle({ className, 'aria-label': ariaLabel, onPointerDown, onKeyDown, children, ...props }: ReorderListHandlePropsT): import("react").JSX.Element;

package/dist/components/reorder-list/reorder-list.js

@@ -0,0 +1,279 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { GripHorizontalIcon, GripVerticalIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext, useId, useState } from "react";
+import { Reorder, useDragControls, useReducedMotion } from "motion/react";
+// src/components/reorder-list/reorder-list.tsx
+/** Тексты по умолчанию: каждый переопределяется пропом */
+const defaultTexts = {
+	handleLabel: "Переместить",
+	verticalHint: "Чтобы изменить порядок, нажимайте стрелки вверх и вниз",
+	horizontalHint: "Чтобы изменить порядок, нажимайте стрелки влево и вправо"
+};
+/** Настройки списка: элементы берут из них ориентацию, режим ручки и порядок */
+const ReorderListContext = createContext({
+	order: [],
+	orientation: "vertical",
+	withHandle: false,
+	disabled: false,
+	hintId: void 0,
+	moveItem: () => void 0,
+	commit: () => void 0
+});
+/** Настройки элемента: ручка запускает перетаскивание и слушает клавиши */
+const ReorderListItemContext = createContext({
+	dragControls: null,
+	disabled: false,
+	handleKeyDown: () => void 0
+});
+/**
+* Объявление по умолчанию: «Позиция 2 из 5»
+* @param position - позиция с единицы
+* @param total - число элементов
+* @returns текст для скринридера
+*/
+function getDefaultAnnouncement(position, total) {
+	return `Позиция ${position} из ${total}`;
+}
+/**
+* Собрать элементы списка из children по их значениям
+* @param children - дочерние узлы списка
+* @returns элементы по значению
+*/
+function collectItems(children) {
+	const items = /* @__PURE__ */ new Map();
+	for (const child of Children.toArray(children)) {
+		if (!isValidElement(child)) continue;
+		if (typeof child.props.value !== "string") continue;
+		items.set(child.props.value, child);
+	}
+	return items;
+}
+/**
+* Согласовать сохранённый порядок с текущими элементами: убрать исчезнувшие, добавить новые в конец
+* @param order - сохранённый порядок
+* @param ids - значения элементов в разметке
+* @returns порядок без лишних значений
+*/
+function mergeOrder(order, ids) {
+	const known = new Set(ids);
+	const result = order.filter((id) => known.has(id));
+	const placed = new Set(result);
+	for (const id of ids) if (!placed.has(id)) result.push(id);
+	return result;
+}
+/**
+* Список с перетаскиванием: порядок меняют мышью, пальцем и стрелками клавиатуры
+* @param props - пропсы списка
+* @returns список ul с элементами в текущем порядке
+*/
+function ReorderList({ className, value, defaultValue, onValueChange, onValueCommitted, orientation = "vertical", withHandle = false, disabled = false, hint, getMoveAnnouncement = getDefaultAnnouncement, children, ...props }) {
+	const hintId = useId();
+	const items = collectItems(children);
+	const ids = [...items.keys()];
+	const [innerOrder, setInnerOrder] = useState(defaultValue ?? ids);
+	const [announcement, setAnnouncement] = useState("");
+	const order = mergeOrder(value ?? innerOrder, ids);
+	const isVertical = orientation === "vertical";
+	const defaultHint = isVertical ? defaultTexts.verticalHint : defaultTexts.horizontalHint;
+	const hintText = hint ?? defaultHint;
+	const classes = cn("m-0", "flex", "list-none", "gap-2", "p-0", "data-[orientation=vertical]:flex-col", "data-[orientation=horizontal]:flex-row", className);
+	const orderedItems = [];
+	for (const id of order) {
+		const item = items.get(id);
+		if (item) orderedItems.push(item);
+	}
+	/**
+	* Записать новый порядок: во внутреннее состояние (если не контролируется) и наружу
+	* @param nextOrder - новый порядок значений
+	*/
+	const updateOrder = (nextOrder) => {
+		if (value === void 0) setInnerOrder(nextOrder);
+		onValueChange?.(nextOrder);
+	};
+	/**
+	* Перемещение клавишей: сдвинуть элемент и объявить новую позицию
+	* @param itemValue - значение элемента
+	* @param targetIndex - позиция с нуля, выходящая за края упирается в край
+	*/
+	const moveItem = (itemValue, targetIndex) => {
+		const fromIndex = order.indexOf(itemValue);
+		const toIndex = Math.min(Math.max(targetIndex, 0), order.length - 1);
+		if (fromIndex === -1 || fromIndex === toIndex) return;
+		const nextOrder = order.slice();
+		nextOrder.splice(fromIndex, 1);
+		nextOrder.splice(toIndex, 0, itemValue);
+		updateOrder(nextOrder);
+		onValueCommitted?.(nextOrder);
+		setAnnouncement(getMoveAnnouncement(toIndex + 1, nextOrder.length));
+	};
+	/** Перетаскивание закончилось: сообщить итоговый порядок */
+	const commit = () => onValueCommitted?.(order);
+	const context = {
+		order,
+		orientation,
+		withHandle,
+		disabled,
+		hintId,
+		moveItem,
+		commit
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Reorder.Group, {
+			"data-slot": "reorder-list",
+			"data-orientation": orientation,
+			"data-disabled": disabled || void 0,
+			axis: isVertical ? "y" : "x",
+			values: order,
+			onReorder: updateOrder,
+			className: classes,
+			...props,
+			children: /* @__PURE__ */ jsx(ReorderListContext, {
+				value: context,
+				children: orderedItems
+			})
+		}),
+		/* @__PURE__ */ jsx("span", {
+			id: hintId,
+			className: "sr-only",
+			children: hintText
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"aria-live": "polite",
+			className: "sr-only",
+			children: announcement
+		})
+	] });
+}
+/**
+* Позиция, куда клавиша переносит элемент
+* @param key - нажатая клавиша
+* @param index - текущая позиция
+* @param total - число элементов
+* @param orientation - ориентация списка
+* @returns позиция с нуля или null, если клавиша не двигает элемент
+*/
+function getTargetIndex(key, index, total, orientation) {
+	const isVertical = orientation === "vertical";
+	const previousKey = isVertical ? "ArrowUp" : "ArrowLeft";
+	const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+	if (key === previousKey) return index - 1;
+	if (key === nextKey) return index + 1;
+	if (key === "Home") return 0;
+	if (key === "End") return total - 1;
+	return null;
+}
+/**
+* Элемент списка: тянется целиком или за ручку, двигается стрелками, Home и End
+* @param props - пропсы элемента
+* @returns элемент li
+*/
+function ReorderListItem({ value, className, disabled = false, style, onKeyDown, children, ...props }) {
+	const list = useContext(ReorderListContext);
+	const dragControls = useDragControls();
+	const isReducedMotion = useReducedMotion();
+	const [isDragging, setIsDragging] = useState(false);
+	const isDisabled = disabled || list.disabled;
+	const isWhole = !list.withHandle && !isDisabled;
+	const tabIndex = isWhole ? 0 : void 0;
+	const classes = cn("relative", "list-none", "rounded-lg", "bg-background", "transition-shadow", "outline-none", "select-none", "data-dragging:z-10", "data-dragging:shadow-lg", "data-whole:cursor-grab", "data-whole:active:cursor-grabbing", "data-whole:focus-visible:ring-3", "data-whole:focus-visible:ring-ring/50", "data-disabled:cursor-not-allowed", "data-disabled:opacity-50", className);
+	const dragStyle = isReducedMotion ? void 0 : { scale: 1.02 };
+	/**
+	* Клавиша перемещения: сдвинуть элемент
+	* @param event - событие клавиатуры
+	*/
+	const handleMoveKey = (event) => {
+		const index = list.order.indexOf(value);
+		const targetIndex = getTargetIndex(event.key, index, list.order.length, list.orientation);
+		if (isDisabled || targetIndex === null) return;
+		event.preventDefault();
+		list.moveItem(value, targetIndex);
+	};
+	/**
+	* Клавиша на самом элементе: двигает его только когда фокус на элементе, а не на вложенном поле
+	* @param event - событие клавиатуры
+	*/
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (!isWhole || event.target !== event.currentTarget) return;
+		handleMoveKey(event);
+	};
+	/** Перетаскивание началось */
+	const handleDragStart = () => setIsDragging(true);
+	/** Перетаскивание закончилось */
+	const handleDragEnd = () => {
+		setIsDragging(false);
+		list.commit();
+	};
+	const itemContext = {
+		dragControls,
+		disabled: isDisabled,
+		handleKeyDown: handleMoveKey
+	};
+	return /* @__PURE__ */ jsx(Reorder.Item, {
+		"data-slot": "reorder-list-item",
+		"data-dragging": isDragging || void 0,
+		"data-whole": isWhole || void 0,
+		"data-disabled": isDisabled || void 0,
+		value,
+		dragListener: isWhole,
+		dragControls,
+		whileDrag: dragStyle,
+		tabIndex,
+		"aria-describedby": isWhole ? list.hintId : void 0,
+		"aria-disabled": isDisabled || void 0,
+		style,
+		className: classes,
+		onKeyDown: handleKeyDown,
+		onDragStart: handleDragStart,
+		onDragEnd: handleDragEnd,
+		...props,
+		children: /* @__PURE__ */ jsx(ReorderListItemContext, {
+			value: itemContext,
+			children
+		})
+	});
+}
+/**
+* Ручка перетаскивания: кнопка внутри ReorderListItem, тянется мышью и двигается стрелками
+* @param props - пропсы ручки
+* @returns кнопка ручки
+*/
+function ReorderListHandle({ className, "aria-label": ariaLabel = defaultTexts.handleLabel, onPointerDown, onKeyDown, children, ...props }) {
+	const list = useContext(ReorderListContext);
+	const item = useContext(ReorderListItemContext);
+	const classes = cn("inline-flex", "size-7", "shrink-0", "cursor-grab", "touch-none", "items-center", "justify-center", "rounded-md", "text-muted-foreground", "transition-colors", "outline-none", "active:cursor-grabbing", "hover:bg-muted", "hover:text-foreground", "focus-visible:ring-3", "focus-visible:ring-ring/50", "disabled:pointer-events-none", "disabled:opacity-50", "[&_svg]:pointer-events-none", "[&_svg:not([class*=size-])]:size-4", className);
+	const Icon = list.orientation === "vertical" ? GripVerticalIcon : GripHorizontalIcon;
+	/**
+	* Нажатие на ручку: начать перетаскивание элемента
+	* @param event - событие указателя
+	*/
+	const handlePointerDown = (event) => {
+		onPointerDown?.(event);
+		if (item.disabled || event.defaultPrevented) return;
+		item.dragControls?.start(event);
+	};
+	/**
+	* Клавиша на ручке: переместить элемент
+	* @param event - событие клавиатуры
+	*/
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		item.handleKeyDown(event);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "reorder-list-handle",
+		type: "button",
+		disabled: item.disabled,
+		"aria-label": ariaLabel,
+		"aria-describedby": list.hintId,
+		className: classes,
+		onPointerDown: handlePointerDown,
+		onKeyDown: handleKeyDown,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true })
+	});
+}
+export { ReorderList, ReorderListHandle, ReorderListItem };

package/dist/components/reorder-list/types.d.ts

@@ -0,0 +1,65 @@
+import { ComponentProps, KeyboardEvent, ReactNode, Ref } from "react";
+import "motion/react";
+/**
+ * Ориентация списка
+ */
+export type ReorderListOrientationT = 'vertical' | 'horizontal';
+/**
+ * Свойства HTML-списка, которые занимает анимация перетаскивания
+ */
+export type MotionConflictKeysT = 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onDragEnter' | 'onDragExit' | 'onDragLeave' | 'onDragOver' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration' | 'defaultValue' | 'ref';
+/**
+ * Пропсы списка с перетаскиванием
+ */
+export type ReorderListPropsT = Omit<ComponentProps<'ul'>, MotionConflictKeysT> & {
+  /** Классы списка */
+  className?: string;
+  /** Порядок элементов — значения (value) элементов; контролируемый режим, вместе с onValueChange */
+  value?: string[];
+  /** Порядок элементов при первом рендере — неконтролируемый режим. По умолчанию порядок в разметке */
+  defaultValue?: string[];
+  /** Порядок изменился (при перетаскивании — при каждом обмене местами): значения элементов */
+  onValueChange?: (value: string[]) => void;
+  /** Перетаскивание закончилось или элемент сдвинут клавишей: итоговый порядок */
+  onValueCommitted?: (value: string[]) => void;
+  /** Ориентация: вертикальный или горизонтальный список. Задаёт и клавиши перемещения */
+  orientation?: ReorderListOrientationT;
+  /** Тянуть только за ручку (ReorderListHandle). По умолчанию false — элемент тянется целиком */
+  withHandle?: boolean;
+  /** Отключить перетаскивание всех элементов */
+  disabled?: boolean;
+  /** Подсказка про клавиши для скринридера, по умолчанию «Чтобы изменить порядок, нажимайте стрелки…» */
+  hint?: string;
+  /** Объявление скринридеру после перемещения клавишей: позиция с единицы и число элементов */
+  getMoveAnnouncement?: (position: number, total: number) => string;
+  /** Элементы списка (ReorderListItem) */
+  children?: ReactNode;
+  /** Ссылка на элемент списка */
+  ref?: Ref<HTMLUListElement>;
+};
+/**
+ * Пропсы элемента списка
+ */
+export type ReorderListItemPropsT = Omit<ComponentProps<'li'>, MotionConflictKeysT | 'value'> & {
+  /** Уникальное значение элемента: по нему хранится порядок */
+  value: string;
+  /** Классы элемента */
+  className?: string;
+  /** Отключить перетаскивание этого элемента */
+  disabled?: boolean;
+  /** Содержимое элемента */
+  children?: ReactNode;
+  /** Ссылка на элемент li */
+  ref?: Ref<HTMLLIElement>;
+};
+/**
+ * Пропсы ручки перетаскивания
+ */
+export type ReorderListHandlePropsT = Omit<ComponentProps<'button'>, 'type'> & {
+  /** Классы ручки */
+  className?: string;
+  /** Название ручки для скринридера, по умолчанию «Переместить» */
+  'aria-label'?: string;
+  /** Своя иконка вместо точек-захвата */
+  children?: ReactNode;
+};

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

@@ -0,0 +1,3 @@
+import { ResizableHandlePropsT, ResizablePanelGroupPropsT, ResizablePanelPropsT } from "./types.js";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./resizable.js";
+export { ResizableHandle, type ResizableHandlePropsT, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupPropsT, type ResizablePanelPropsT };

package/dist/components/resizable/index.js

@@ -0,0 +1 @@
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./resizable.js";

package/dist/components/resizable/resizable.d.ts

@@ -0,0 +1,19 @@
+import { ResizableHandlePropsT, ResizablePanelGroupPropsT, ResizablePanelPropsT } from "./types.js";
+/**
+ * Группа панелей: панели, размеры которых меняются перетаскиванием разделителя
+ * @param props - пропсы группы; orientation — направление
+ * @returns div
+ */
+export declare function ResizablePanelGroup({ className, ...props }: ResizablePanelGroupPropsT): import("react").JSX.Element;
+/**
+ * Панель внутри группы
+ * @param props - пропсы панели; defaultSize, minSize, maxSize — размеры
+ * @returns div
+ */
+export declare function ResizablePanel(props: ResizablePanelPropsT): import("react").JSX.Element;
+/**
+ * Разделитель между панелями: тянется мышью, двигается стрелками с клавиатуры
+ * @param props - пропсы разделителя; withHandle — ручка посередине
+ * @returns div с role="separator"
+ */
+export declare function ResizableHandle({ withHandle, className, ...props }: ResizableHandlePropsT): import("react").JSX.Element;

package/dist/components/resizable/resizable.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import * as ResizablePrimitive from "react-resizable-panels";
+// src/components/resizable/resizable.tsx
+/**
+* Группа панелей: панели, размеры которых меняются перетаскиванием разделителя
+* @param props - пропсы группы; orientation — направление
+* @returns div
+*/
+function ResizablePanelGroup({ className, ...props }) {
+	const classes = cn("flex", "h-full", "w-full", "aria-[orientation=vertical]:flex-col", className);
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Group, {
+		"data-slot": "resizable-panel-group",
+		className: classes,
+		...props
+	});
+}
+/**
+* Панель внутри группы
+* @param props - пропсы панели; defaultSize, minSize, maxSize — размеры
+* @returns div
+*/
+function ResizablePanel(props) {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, {
+		"data-slot": "resizable-panel",
+		...props
+	});
+}
+/**
+* Разделитель между панелями: тянется мышью, двигается стрелками с клавиатуры
+* @param props - пропсы разделителя; withHandle — ручка посередине
+* @returns div с role="separator"
+*/
+function ResizableHandle({ withHandle, className, ...props }) {
+	const classes = cn("relative", "flex", "w-px", "items-center", "justify-center", "bg-border", "ring-offset-background", "after:absolute", "after:inset-y-0", "after:left-1/2", "after:w-1", "after:-translate-x-1/2", "focus-visible:ring-1", "focus-visible:ring-ring", "focus-visible:outline-hidden", "aria-[orientation=horizontal]:h-px", "aria-[orientation=horizontal]:w-full", "aria-[orientation=horizontal]:after:left-0", "aria-[orientation=horizontal]:after:h-1", "aria-[orientation=horizontal]:after:w-full", "aria-[orientation=horizontal]:after:translate-x-0", "aria-[orientation=horizontal]:after:-translate-y-1/2", "[&[aria-orientation=horizontal]>div]:rotate-90", className);
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Separator, {
+		"data-slot": "resizable-handle",
+		className: classes,
+		...props,
+		children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" })
+	});
+}
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

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

@@ -0,0 +1,89 @@
+import { CSSProperties, ReactNode, Ref } from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
+/**
+ * Пропсы группы панелей
+ */
+export type ResizablePanelGroupPropsT = Omit<ResizablePrimitive.GroupProps, 'children' | 'className' | 'defaultLayout' | 'disableCursor' | 'disabled' | 'elementRef' | 'groupRef' | 'id' | 'onLayoutChange' | 'onLayoutChanged' | 'resizePreviewMode' | 'resizeTargetMinimumSize' | 'orientation' | 'style'> & {
+  /** Панели и разделители */
+  children?: ReactNode;
+  /** Классы группы */
+  className?: string;
+  /** Направление: horizontal — панели в ряд, vertical — друг под другом. По умолчанию horizontal */
+  orientation?: 'horizontal' | 'vertical';
+  /** Начальные размеры панелей в процентах: { id панели: размер } */
+  defaultLayout?: ResizablePrimitive.Layout;
+  /** Не менять курсор при перетаскивании */
+  disableCursor?: boolean;
+  /** Запретить менять размеры */
+  disabled?: boolean;
+  /** id группы — по нему сохраняется раскладка */
+  id?: string;
+  /** Размеры меняются при перетаскивании: новая раскладка */
+  onLayoutChange?: (layout: ResizablePrimitive.Layout) => void;
+  /** Перетаскивание закончилось: итоговая раскладка */
+  onLayoutChanged?: (layout: ResizablePrimitive.Layout, meta: ResizablePrimitive.LayoutChangedMeta) => void;
+  /** Как показывать размер во время перетаскивания */
+  resizePreviewMode?: ResizablePrimitive.GroupProps['resizePreviewMode'];
+  /** Минимальная область захвата разделителя в px: coarse — для пальца, fine — для мыши */
+  resizeTargetMinimumSize?: ResizablePrimitive.GroupProps['resizeTargetMinimumSize'];
+  /** Ref на элемент группы */
+  elementRef?: Ref<HTMLDivElement | null>;
+  /** Ref с методами группы: getLayout(), setLayout() */
+  groupRef?: Ref<ResizablePrimitive.GroupImperativeHandle | null>;
+  /** Инлайн-стили группы */
+  style?: CSSProperties;
+};
+/**
+ * Пропсы панели
+ */
+export type ResizablePanelPropsT = Omit<ResizablePrimitive.PanelProps, 'className' | 'collapsedSize' | 'collapsedThreshold' | 'collapsible' | 'defaultSize' | 'disabled' | 'elementRef' | 'groupResizeBehavior' | 'id' | 'maxSize' | 'minSize' | 'onResize' | 'panelRef' | 'style'> & {
+  /** Классы панели */
+  className?: string;
+  /** Начальный размер: число — проценты, строка — '50%', '200px', '10rem' */
+  defaultSize?: number | string;
+  /** Минимальный размер */
+  minSize?: number | string;
+  /** Максимальный размер */
+  maxSize?: number | string;
+  /** Панель можно свернуть, перетащив разделитель дальше минимума */
+  collapsible?: boolean;
+  /** Размер свёрнутой панели. По умолчанию 0 */
+  collapsedSize?: number | string;
+  /** Насколько перетащить за минимум, чтобы панель свернулась */
+  collapsedThreshold?: number | string;
+  /** Запретить менять размер панели */
+  disabled?: boolean;
+  /** Как панель меняется при изменении размера группы: доля или пиксели */
+  groupResizeBehavior?: 'preserve-relative-size' | 'preserve-pixel-size';
+  /** id панели — ключ в раскладке */
+  id?: string;
+  /** Размер панели изменился: новый размер, id и прежний размер */
+  onResize?: ResizablePrimitive.PanelProps['onResize'];
+  /** Ref на элемент панели */
+  elementRef?: Ref<HTMLDivElement | null>;
+  /** Ref с методами панели: collapse(), expand(), resize() */
+  panelRef?: Ref<ResizablePrimitive.PanelImperativeHandle | null>;
+  /** Инлайн-стили панели */
+  style?: CSSProperties;
+};
+/**
+ * Пропсы разделителя
+ */
+export type ResizableHandlePropsT = Omit<ResizablePrimitive.SeparatorProps, 'className' | 'disabled' | 'disableDoubleClick' | 'elementRef' | 'id' | 'preview' | 'style'> & {
+  /** Показать ручку посередине разделителя */
+  withHandle?: boolean;
+  /** Классы разделителя */
+  className?: string;
+  /** Запретить перетаскивание */
+  disabled?: boolean;
+  /** Не возвращать начальный размер двойным нажатием */
+  disableDoubleClick?: boolean;
+  /** id разделителя */
+  id?: string;
+  /** Что показывать на месте разделителя во время перетаскивания */
+  preview?: ReactNode;
+  /** Ref на элемент разделителя */
+  elementRef?: Ref<HTMLDivElement>;
+  /** Инлайн-стили разделителя */
+  style?: CSSProperties;
+};

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,3 @@
+import { ScrollAreaPropsT, ScrollBarPropsT } from "./types.js";
+import { ScrollArea, ScrollBar } from "./scroll-area.js";
+export { ScrollArea, type ScrollAreaPropsT, ScrollBar, type ScrollBarPropsT };

package/dist/components/scroll-area/index.js

@@ -0,0 +1 @@
+export { ScrollArea, ScrollBar } from "./scroll-area.js";

package/dist/components/scroll-area/scroll-area.d.ts

@@ -0,0 +1,13 @@
+import { ScrollAreaPropsT, ScrollBarPropsT } from "./types.js";
+/**
+ * Область прокрутки: нативная прокрутка с тонкими полосами в стиле интерфейса
+ * @param props - пропсы области; размер задаётся className (h-72, w-96)
+ * @returns обёртка с видимой областью, вертикальной полосой и углом
+ */
+export declare function ScrollArea({ className, children, ...props }: ScrollAreaPropsT): import("react").JSX.Element;
+/**
+ * Полоса прокрутки: вертикальная уже есть в ScrollArea, горизонтальную добавляют внутрь ScrollArea
+ * @param props - пропсы полосы
+ * @returns полоса с ползунком
+ */
+export declare function ScrollBar({ className, orientation, ...props }: ScrollBarPropsT): import("react").JSX.Element;