@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/questionnaire/questionnaire.d.ts

@@ -0,0 +1,91 @@
+import { QuestionnaireActionsPropsT, QuestionnaireChoiceDescriptionPropsT, QuestionnaireChoicePropsT, QuestionnaireChoicesPropsT, QuestionnaireDescriptionPropsT, QuestionnaireErrorPropsT, QuestionnaireInputPropsT, QuestionnaireItemPropsT, QuestionnaireNextPropsT, QuestionnairePreviousPropsT, QuestionnaireProgressPropsT, QuestionnairePropsT, QuestionnaireSkipPropsT, QuestionnaireSubmitPropsT, QuestionnaireTitlePropsT } from "./types.js";
+/**
+ * Опрос: форма из вопросов, которые показываются по одному
+ * @param props - пропсы опроса
+ * @returns форма опроса
+ */
+export declare function Questionnaire({ className, ...props }: QuestionnairePropsT): import("react").JSX.Element;
+/**
+ * Прогресс опроса: «Вопрос 1 из 3», объявляется скринридеру
+ * @param props - пропсы прогресса
+ * @returns индикатор прогресса
+ */
+export declare function QuestionnaireProgress({ className, children, 'aria-label': ariaLabel, formatProgress, render, ...props }: QuestionnaireProgressPropsT): import("react").JSX.Element;
+/**
+ * Вопрос опроса: виден, только пока он открыт
+ * @param props - пропсы вопроса
+ * @returns группа полей вопроса
+ */
+export declare function QuestionnaireItem({ className, required, ...props }: QuestionnaireItemPropsT): import("react").JSX.Element;
+/**
+ * Заголовок вопроса
+ * @param props - пропсы заголовка
+ * @returns элемент legend
+ */
+export declare function QuestionnaireTitle({ className, ...props }: QuestionnaireTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание вопроса: подсказка под заголовком
+ * @param props - пропсы описания
+ * @returns абзац
+ */
+export declare function QuestionnaireDescription({ className, ...props }: QuestionnaireDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Список вариантов ответа; переход между вариантами — стрелками
+ * @param props - пропсы списка
+ * @returns сетка вариантов
+ */
+export declare function QuestionnaireChoices({ className, ...props }: QuestionnaireChoicesPropsT): import("react").JSX.Element;
+/**
+ * Вариант ответа: радиокнопка или флажок (если вопрос multiple) с подписью и подсказкой клавиши
+ * @param props - пропсы варианта
+ * @returns вариант с индикатором
+ */
+export declare function QuestionnaireChoice({ children, className, ...props }: QuestionnaireChoicePropsT): import("react").JSX.Element;
+/**
+ * Пояснение под подписью варианта
+ * @param props - пропсы пояснения
+ * @returns строка пояснения
+ */
+export declare function QuestionnaireChoiceDescription({ className, ...props }: QuestionnaireChoiceDescriptionPropsT): import("react").JSX.Element;
+/**
+ * Поле свободного ответа: «Другое…» вместо готовых вариантов
+ * @param props - пропсы поля
+ * @returns поле ввода в обёртке
+ */
+export declare function QuestionnaireInput({ className, ...props }: QuestionnaireInputPropsT): import("react").JSX.Element;
+/**
+ * Ошибка вопроса: видна, когда пытаются перейти дальше без ответа
+ * @param props - пропсы ошибки
+ * @returns абзац с ошибкой
+ */
+export declare function QuestionnaireError({ className, children, requiredMessage, optionalMessage, ...props }: QuestionnaireErrorPropsT): import("react").JSX.Element;
+/**
+ * Панель кнопок: «Назад» слева, «Пропустить» и «Далее» / «Отправить» справа
+ * @param props - пропсы панели
+ * @returns сетка кнопок
+ */
+export declare function QuestionnaireActions({ className, ...props }: QuestionnaireActionsPropsT): import("react").JSX.Element;
+/**
+ * Кнопка «Назад»: к предыдущему вопросу, скрыта на первом
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function QuestionnairePrevious({ children, className, size, variant, ...props }: QuestionnairePreviousPropsT): import("react").JSX.Element;
+/**
+ * Кнопка «Пропустить»: видна у необязательного вопроса без ответа
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function QuestionnaireSkip({ children, className, size, variant, ...props }: QuestionnaireSkipPropsT): import("react").JSX.Element;
+/**
+ * Кнопка «Далее»: к следующему вопросу, скрыта на последнем
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function QuestionnaireNext({ children, className, size, variant, ...props }: QuestionnaireNextPropsT): import("react").JSX.Element;
+/**
+ * Кнопка отправки: видна на последнем вопросе
+ * @param props - пропсы кнопки
+ * @returns кнопка
+ */
+export declare function QuestionnaireSubmit({ children, className, size, variant, ...props }: QuestionnaireSubmitPropsT): import("react").JSX.Element;

package/dist/components/questionnaire/questionnaire.js

@@ -0,0 +1,315 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { texts } from "../../lib/locale.js";
+import { buttonVariants } from "../button/types.js";
+import { QuestionnairePrimitive } from "./questionnaire-primitive.js";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use } from "react";
+// src/components/questionnaire/questionnaire.tsx
+/** Подпись прогресса для скринридера по умолчанию */
+const PROGRESS_LABEL = "Прогресс опроса";
+/** Ошибка обязательного вопроса по умолчанию */
+const REQUIRED_MESSAGE = "Выберите ответ, чтобы продолжить.";
+/** Ошибка необязательного вопроса по умолчанию */
+const OPTIONAL_MESSAGE = "Выберите ответ или пропустите вопрос.";
+/** Текст кнопки «Пропустить» по умолчанию */
+const SKIP_TEXT = "Пропустить";
+/** Текст кнопки отправки по умолчанию */
+const SUBMIT_TEXT = "Отправить";
+/**
+* Обязательность текущего вопроса: из неё выбирается текст ошибки
+*/
+const QuestionnaireItemContext = createContext(false);
+/**
+* Опрос: форма из вопросов, которые показываются по одному
+* @param props - пропсы опроса
+* @returns форма опроса
+*/
+function Questionnaire({ className, ...props }) {
+	const classes = cn("flex", "w-full", "min-w-0", "flex-col", "gap-4", className);
+	return /* @__PURE__ */ jsx(QuestionnairePrimitive.Root, {
+		"data-slot": "questionnaire",
+		className: classes,
+		...props
+	});
+}
+/**
+* Текст прогресса по умолчанию
+* @param current - номер открытого вопроса
+* @param total - всего вопросов
+* @returns «Вопрос 1 из 3»
+*/
+function formatDefaultProgress(current, total) {
+	return `Вопрос ${current} ${texts.of} ${total}`;
+}
+/**
+* Прогресс опроса: «Вопрос 1 из 3», объявляется скринридеру
+* @param props - пропсы прогресса
+* @returns индикатор прогресса
+*/
+function QuestionnaireProgress({ className, children, "aria-label": ariaLabel = PROGRESS_LABEL, formatProgress = formatDefaultProgress, render, ...props }) {
+	const classes = cn("min-h-[1lh]", "w-fit", "min-w-[14ch]", "text-xs", "font-medium", "text-muted-foreground", "tabular-nums", className);
+	/**
+	* Отрисовать прогресс с русским текстом
+	* @param renderProps - пропсы элемента от примитива
+	* @param state - номер вопроса и их количество
+	* @returns элемент прогресса
+	*/
+	const renderProgress = (renderProps, state) => {
+		const { current, total } = state;
+		const text = total ? formatProgress(current, total) : void 0;
+		if (render) return render({
+			...renderProps,
+			"aria-valuetext": text
+		}, state);
+		return /* @__PURE__ */ jsx("div", {
+			...renderProps,
+			"aria-valuetext": text,
+			children: children ?? text
+		});
+	};
+	return /* @__PURE__ */ jsx(QuestionnairePrimitive.Progress, {
+		"data-slot": "questionnaire-progress",
+		"aria-label": ariaLabel,
+		className: classes,
+		render: renderProgress,
+		...props
+	});
+}
+/**
+* Вопрос опроса: виден, только пока он открыт
+* @param props - пропсы вопроса
+* @returns группа полей вопроса
+*/
+function QuestionnaireItem({ className, required, ...props }) {
+	const isRequired = required === true;
+	const classes = cn("flex", "min-w-0", "flex-col", "gap-4", "border-0", "p-0", "outline-none", className);
+	return /* @__PURE__ */ jsx(QuestionnaireItemContext, {
+		value: isRequired,
+		children: /* @__PURE__ */ jsx(QuestionnairePrimitive.Item, {
+			"data-slot": "questionnaire-item",
+			required,
+			className: classes,
+			...props
+		})
+	});
+}
+/**
+* Заголовок вопроса
+* @param props - пропсы заголовка
+* @returns элемент legend
+*/
+function QuestionnaireTitle({ className, ...props }) {
+	const classes = cn("text-base", "leading-snug", "font-medium", "text-pretty", "[&:not(:has(~[data-slot=questionnaire-description]))]:mb-4", className);
+	return /* @__PURE__ */ jsx(QuestionnairePrimitive.Title, {
+		"data-slot": "questionnaire-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание вопроса: подсказка под заголовком
+* @param props - пропсы описания
+* @returns абзац
+*/
+function QuestionnaireDescription({ className, ...props }) {
+	const classes = cn("text-sm", "text-pretty", "text-muted-foreground", className);
+	return /* @__PURE__ */ jsx(QuestionnairePrimitive.Description, {
+		"data-slot": "questionnaire-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Список вариантов ответа; переход между вариантами — стрелками
+* @param props - пропсы списка
+* @returns сетка вариантов
+*/
+function QuestionnaireChoices({ className, ...props }) {
+	const classes = cn("group/questionnaire-choices", "grid", "min-w-0", "gap-2", className);
+	return /* @__PURE__ */ jsx(QuestionnairePrimitive.Choices, {
+		"data-slot": "questionnaire-choices",
+		className: classes,
+		...props
+	});
+}
+/**
+* Вариант ответа: радиокнопка или флажок (если вопрос multiple) с подписью и подсказкой клавиши
+* @param props - пропсы варианта
+* @returns вариант с индикатором
+*/
+function QuestionnaireChoice({ children, className, ...props }) {
+	const classes = cn("group/questionnaire-choice", "relative", "flex", "min-h-11", "cursor-pointer", "items-start", "gap-2.5", "rounded-lg", "border", "border-input", "bg-transparent", "px-3", "py-2.5", "text-left", "text-sm", "transition-colors", "outline-none", "select-none", "hover:bg-muted/50", "dark:bg-input/20", "data-checked:border-primary/40", "data-checked:bg-muted", "dark:data-checked:bg-muted", "data-invalid:border-destructive", "keyboard:has-[>input:focus-visible]:border-ring", "keyboard:has-[>input:focus-visible]:ring-3", "keyboard:has-[>input:focus-visible]:ring-ring/50", "data-disabled:pointer-events-none", "data-disabled:cursor-not-allowed", "data-disabled:opacity-50", className);
+	const indicatorClasses = cn("pointer-events-none", "relative", "flex", "size-4", "shrink-0", "translate-y-[--spacing(0.45)]", "items-center", "justify-center", "rounded-[4px]", "border", "border-input", "dark:bg-input/30", "group-data-[type=radio]/questionnaire-choice:rounded-full", "group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5", "group-data-checked/questionnaire-choice:border-primary", "group-data-checked/questionnaire-choice:bg-primary", "group-data-checked/questionnaire-choice:text-primary-foreground", "dark:group-data-checked/questionnaire-choice:bg-primary");
+	const dotClasses = cn("hidden", "size-2", "rounded-full", "bg-primary-foreground", "group-data-[type=radio]/questionnaire-choice:group-data-checked/questionnaire-choice:block");
+	const checkClasses = cn("hidden", "size-3.5", "group-data-[type=checkbox]/questionnaire-choice:group-data-checked/questionnaire-choice:block");
+	const shortcutClasses = cn("pointer-events-none", "ml-auto", "hidden", "size-5", "shrink-0", "translate-y-[--spacing(0.45)]", "items-center", "justify-center", "rounded-md", "border", "border-input", "bg-background", "font-mono", "text-[0.625rem]", "leading-none", "font-medium", "text-muted-foreground", "group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5", "group-data-[shortcut]/questionnaire-choice:inline-flex");
+	return /* @__PURE__ */ jsxs(QuestionnairePrimitive.Choice, {
+		"data-slot": "questionnaire-choice",
+		className: classes,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(QuestionnairePrimitive.ChoiceInput, {
+				"data-slot": "questionnaire-choice-input",
+				className: "absolute inset-0 z-10 size-full cursor-pointer opacity-0"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"data-slot": "questionnaire-choice-indicator",
+				"aria-hidden": true,
+				className: indicatorClasses,
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "questionnaire-choice-indicator-dot",
+					className: dotClasses
+				}), /* @__PURE__ */ jsx(CheckIcon, {
+					"data-slot": "questionnaire-choice-indicator-check",
+					className: checkClasses
+				})]
+			}),
+			/* @__PURE__ */ jsx(QuestionnairePrimitive.ChoiceLabel, {
+				"data-slot": "questionnaire-choice-label",
+				className: "flex min-w-0 flex-1 flex-col gap-0.5 leading-snug",
+				children
+			}),
+			/* @__PURE__ */ jsx(QuestionnairePrimitive.ChoiceShortcut, {
+				"data-slot": "questionnaire-choice-shortcut",
+				className: shortcutClasses
+			})
+		]
+	});
+}
+/**
+* Пояснение под подписью варианта
+* @param props - пропсы пояснения
+* @returns строка пояснения
+*/
+function QuestionnaireChoiceDescription({ className, ...props }) {
+	const classes = cn("text-muted-foreground", className);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "questionnaire-choice-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Поле свободного ответа: «Другое…» вместо готовых вариантов
+* @param props - пропсы поля
+* @returns поле ввода в обёртке
+*/
+function QuestionnaireInput({ className, ...props }) {
+	const classes = cn("h-8", "min-h-11", "w-full", "min-w-0", "rounded-lg", "border", "border-input", "bg-transparent", "px-2.5", "py-1", "text-base", "transition-[color,box-shadow,background-color]", "outline-none", "sm:min-h-0", "md:text-sm", "selection:bg-primary", "selection:text-primary-foreground", "placeholder:text-muted-foreground", "dark:bg-input/30", "focus-visible:border-ring", "focus-visible:ring-3", "focus-visible:ring-ring/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", "disabled:pointer-events-none", "disabled:cursor-not-allowed", "disabled:bg-input/50", "disabled:opacity-50", "dark:disabled:bg-input/80", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "questionnaire-input-wrapper",
+		className: "group/questionnaire-input relative w-full min-w-0",
+		children: /* @__PURE__ */ jsx(QuestionnairePrimitive.Input, {
+			"data-slot": "questionnaire-input",
+			className: classes,
+			...props
+		})
+	});
+}
+/**
+* Ошибка вопроса: видна, когда пытаются перейти дальше без ответа
+* @param props - пропсы ошибки
+* @returns абзац с ошибкой
+*/
+function QuestionnaireError({ className, children, requiredMessage = REQUIRED_MESSAGE, optionalMessage = OPTIONAL_MESSAGE, ...props }) {
+	const message = use(QuestionnaireItemContext) ? requiredMessage : optionalMessage;
+	const classes = cn("mt-2", "text-sm", "text-destructive", className);
+	return /* @__PURE__ */ jsx(QuestionnairePrimitive.Error, {
+		"data-slot": "questionnaire-error",
+		className: classes,
+		...props,
+		children: children ?? message
+	});
+}
+/**
+* Панель кнопок: «Назад» слева, «Пропустить» и «Далее» / «Отправить» справа
+* @param props - пропсы панели
+* @returns сетка кнопок
+*/
+function QuestionnaireActions({ className, ...props }) {
+	const classes = cn("grid", "min-h-11", "w-full", "grid-cols-[minmax(0,1fr)_auto_auto]", "items-center", "gap-2", "sm:min-h-8", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "questionnaire-actions",
+		className: classes,
+		...props
+	});
+}
+/**
+* Кнопка «Назад»: к предыдущему вопросу, скрыта на первом
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function QuestionnairePrevious({ children, className, size = "default", variant = "outline", ...props }) {
+	const classes = cn(buttonVariants({
+		size,
+		variant
+	}), "col-start-1", "row-start-1", "min-h-11", "justify-self-start", "sm:min-h-0", className);
+	return /* @__PURE__ */ jsx(QuestionnairePrimitive.Previous, {
+		"data-slot": "questionnaire-previous",
+		"data-size": size,
+		"data-variant": variant,
+		className: classes,
+		...props,
+		children: children ?? texts.previous
+	});
+}
+/**
+* Кнопка «Пропустить»: видна у необязательного вопроса без ответа
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function QuestionnaireSkip({ children, className, size = "default", variant = "outline", ...props }) {
+	const classes = cn(buttonVariants({
+		size,
+		variant
+	}), "col-start-2", "row-start-1", "min-h-11", "justify-self-end", "sm:min-h-0", className);
+	return /* @__PURE__ */ jsx(QuestionnairePrimitive.Skip, {
+		"data-slot": "questionnaire-skip",
+		"data-size": size,
+		"data-variant": variant,
+		className: classes,
+		...props,
+		children: children ?? SKIP_TEXT
+	});
+}
+/**
+* Кнопка «Далее»: к следующему вопросу, скрыта на последнем
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function QuestionnaireNext({ children, className, size = "default", variant = "default", ...props }) {
+	const classes = cn(buttonVariants({
+		size,
+		variant
+	}), "col-start-3", "row-start-1", "min-h-11", "justify-self-end", "sm:min-h-0", className);
+	return /* @__PURE__ */ jsx(QuestionnairePrimitive.Next, {
+		"data-slot": "questionnaire-next",
+		"data-size": size,
+		"data-variant": variant,
+		className: classes,
+		...props,
+		children: children ?? texts.next
+	});
+}
+/**
+* Кнопка отправки: видна на последнем вопросе
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function QuestionnaireSubmit({ children, className, size = "default", variant = "default", ...props }) {
+	const classes = cn(buttonVariants({
+		size,
+		variant
+	}), "col-start-3", "row-start-1", "min-h-11", "justify-self-end", "sm:min-h-0", className);
+	return /* @__PURE__ */ jsx(QuestionnairePrimitive.Submit, {
+		"data-slot": "questionnaire-submit",
+		"data-size": size,
+		"data-variant": variant,
+		className: classes,
+		...props,
+		children: children ?? SUBMIT_TEXT
+	});
+}
+export { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle };

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

@@ -0,0 +1,203 @@
+import { ButtonPropsT } from "../button/types.js";
+import { ChangeEventHandler, ComponentProps, FormEvent, MouseEvent, ReactElement, ReactNode, Ref } from "react";
+/**
+ * Статус вопроса: без ответа, отвечен или пропущен
+ */
+export type QuestionnaireItemStatusT = 'unanswered' | 'answered' | 'skipped';
+/**
+ * Подсказки клавиш у вариантов: буквы или цифры
+ */
+export type QuestionnaireShortcutModeT = 'letters' | 'numbers';
+/**
+ * Описание варианта ответа для Questionnaire items
+ * @property disabled - вариант отключён
+ * @property value - значение варианта
+ */
+export type QuestionnaireChoiceDefinitionT = {
+  disabled?: boolean;
+  value: string;
+};
+/**
+ * Описание вопроса для Questionnaire items: имя, варианты, обязательность
+ * @property choices - варианты ответа в порядке показа
+ * @property disabled - вопрос отключён
+ * @property name - имя вопроса
+ * @property required - обязательный вопрос
+ */
+export type QuestionnaireItemDefinitionT = {
+  choices?: readonly QuestionnaireChoiceDefinitionT[];
+  disabled?: boolean;
+  name: string;
+  required?: boolean;
+};
+/**
+ * Тип поля свободного ответа
+ */
+export type QuestionnaireInputTypeT = 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+/**
+ * Пропсы кнопок навигации: оформление и размер как у Button
+ */
+export type NavigationButtonPropsT = Omit<ComponentProps<'button'>, 'type'> & {
+  /** Оформление кнопки */
+  variant?: ButtonPropsT['variant'];
+  /** Размер кнопки */
+  size?: ButtonPropsT['size'];
+  /** Отключённая кнопка */
+  disabled?: boolean;
+};
+/**
+ * Пропсы опроса
+ */
+export type QuestionnairePropsT = Omit<ComponentProps<'form'>, 'defaultValue' | 'value' | 'onSubmit'> & {
+  /** Открытый вопрос при первом рендере — неконтролируемый режим */
+  defaultItem?: string;
+  /** Открытый вопрос — контролируемый режим, вместе с onItemChange */
+  item?: string;
+  /** Описания вопросов: порядок, варианты и обязательность для навигации и проверки */
+  items?: readonly QuestionnaireItemDefinitionT[];
+  /** Открыт другой вопрос */
+  onItemChange?: (item: string) => void;
+  /** Подсказки клавиш у вариантов: letters — A, B, C; numbers — 1, 2, 3 */
+  shortcuts?: QuestionnaireShortcutModeT;
+  /** Отправка ответов: данные берутся из FormData формы */
+  onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
+};
+/**
+ * Состояние прогресса для render
+ * @property current - номер открытого вопроса
+ * @property total - всего вопросов
+ * @property first - открыт первый вопрос
+ * @property last - открыт последний вопрос
+ */
+export interface QuestionnaireProgressStateI {
+  current: number;
+  total: number;
+  first: boolean;
+  last: boolean;
+}
+/**
+ * Пропсы прогресса опроса
+ */
+export type QuestionnaireProgressPropsT = Omit<ComponentProps<'div'>, 'aria-label' | 'children'> & {
+  /** Подпись для скринридера, по умолчанию «Прогресс опроса» */
+  'aria-label'?: string;
+  /** Свой текст вместо «Вопрос 1 из 3» */
+  children?: ReactNode;
+  /**
+   * Текст прогресса
+   * @param current - номер открытого вопроса
+   * @param total - всего вопросов
+   * @returns текст, по умолчанию «Вопрос 1 из 3»
+   */
+  formatProgress?: (current: number, total: number) => string;
+  /**
+   * Своя разметка прогресса: например, полоса из шагов
+   * @param props - пропсы элемента: role, aria-атрибуты, className
+   * @param state - номер вопроса и их количество
+   * @returns элемент прогресса
+   */
+  render?: (props: Record<string, unknown>, state: QuestionnaireProgressStateI) => ReactElement;
+};
+/**
+ * Пропсы вопроса
+ */
+export type QuestionnaireItemPropsT = Omit<ComponentProps<'fieldset'>, 'name' | 'value' | 'disabled'> & {
+  /** Имя вопроса: ключ ответа в FormData и идентификатор для item/defaultItem */
+  name: string;
+  /** Можно выбрать несколько вариантов */
+  multiple?: boolean;
+  /** Обязательный вопрос: без ответа нельзя перейти дальше и пропустить */
+  required?: boolean;
+  /** Отключённый вопрос: пропускается при навигации */
+  disabled?: boolean;
+  /** Ошибка: показать QuestionnaireError и подсветить варианты */
+  invalid?: boolean;
+  /** Изменился статус вопроса */
+  onStatusChange?: (status: QuestionnaireItemStatusT) => void;
+};
+/**
+ * Пропсы заголовка вопроса
+ */
+export type QuestionnaireTitlePropsT = ComponentProps<'legend'> & {
+  /** Другой элемент вместо legend: пропсы и поведение переходят на него (например, <CardTitle />) */
+  render?: ReactElement;
+};
+/**
+ * Пропсы описания вопроса
+ */
+export type QuestionnaireDescriptionPropsT = ComponentProps<'p'> & {
+  /** Другой элемент вместо p: пропсы и поведение переходят на него (например, <CardTitle />) */
+  render?: ReactElement;
+};
+/**
+ * Пропсы списка вариантов
+ */
+export type QuestionnaireChoicesPropsT = ComponentProps<'div'> & {
+  /** Другой элемент вместо div: пропсы и поведение переходят на него (например, <CardTitle />) */
+  render?: ReactElement;
+};
+/**
+ * Пропсы варианта ответа
+ */
+export type QuestionnaireChoicePropsT = Omit<ComponentProps<'label'>, 'onChange'> & {
+  /** Значение варианта: уходит в FormData */
+  value: string;
+  /** Выбран ли вариант — контролируемый режим, вместе с onChange */
+  checked?: boolean;
+  /** Выбран ли вариант при первом рендере — неконтролируемый режим */
+  defaultChecked?: boolean;
+  /** Отключённый вариант: его нельзя выбрать */
+  disabled?: boolean;
+  /** Вариант выбран или снят */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+};
+/**
+ * Пропсы пояснения к варианту
+ */
+export type QuestionnaireChoiceDescriptionPropsT = ComponentProps<'span'>;
+/**
+ * Пропсы поля свободного ответа
+ */
+export type QuestionnaireInputPropsT = Omit<ComponentProps<'input'>, 'form' | 'name' | 'type' | 'value' | 'defaultValue' | 'disabled' | 'placeholder'> & {
+  /** Тип поля: text, email, number, date и другие */
+  type?: QuestionnaireInputTypeT;
+  /** Значение — контролируемый режим, вместе с onChange */
+  value?: string;
+  /** Значение при первом рендере — неконтролируемый режим */
+  defaultValue?: string;
+  /** Подсказка, пока поле пустое */
+  placeholder?: string;
+  /** Отключённое поле */
+  disabled?: boolean;
+};
+/**
+ * Пропсы ошибки вопроса
+ */
+export type QuestionnaireErrorPropsT = ComponentProps<'p'> & {
+  /** Другой элемент вместо p: пропсы и поведение переходят на него */
+  render?: ReactElement;
+  /** Текст для обязательного вопроса, по умолчанию «Выберите ответ, чтобы продолжить.» */
+  requiredMessage?: string;
+  /** Текст для необязательного вопроса, по умолчанию «Выберите ответ или пропустите вопрос.» */
+  optionalMessage?: string;
+};
+/**
+ * Пропсы панели кнопок
+ */
+export type QuestionnaireActionsPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы кнопки «Назад»
+ */
+export type QuestionnairePreviousPropsT = NavigationButtonPropsT;
+/**
+ * Пропсы кнопки «Пропустить»
+ */
+export type QuestionnaireSkipPropsT = NavigationButtonPropsT;
+/**
+ * Пропсы кнопки «Далее»
+ */
+export type QuestionnaireNextPropsT = NavigationButtonPropsT;
+/**
+ * Пропсы кнопки отправки
+ */
+export type QuestionnaireSubmitPropsT = NavigationButtonPropsT;

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

@@ -0,0 +1,3 @@
+import { RadioGroupItemPropsT, RadioGroupPropsT } from "./types.js";
+import { RadioGroup, RadioGroupItem } from "./radio-group.js";
+export { RadioGroup, RadioGroupItem, type RadioGroupItemPropsT, type RadioGroupPropsT };

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

@@ -0,0 +1 @@
+export { RadioGroup, RadioGroupItem } from "./radio-group.js";

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

@@ -0,0 +1,13 @@
+import { RadioGroupItemPropsT, RadioGroupPropsT } from "./types.js";
+/**
+ * Группа переключателей: выбор одного варианта из нескольких
+ * @param props - пропсы группы
+ * @returns элемент с role=radiogroup
+ */
+export declare function RadioGroup({ className, onValueChange, ...props }: RadioGroupPropsT): import("react").JSX.Element;
+/**
+ * Вариант группы: круглая кнопка с точкой, когда выбран
+ * @param props - пропсы варианта
+ * @returns элемент с role=radio
+ */
+export declare function RadioGroupItem({ className, ...props }: RadioGroupItemPropsT): import("react").JSX.Element;