@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/phone-input/phone-input.js

@@ -0,0 +1,54 @@
+"use client";
+import { PHONE_MASK } from "../../lib/locale.js";
+import { formatPhone } from "../../lib/format.js";
+import { Input } from "../input/input.js";
+import { useControllableState } from "../../lib/use-controllable-state.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/phone-input/phone-input.tsx
+/**
+* Цифры номера без кода страны из отформатированной строки
+* @param formatted - телефон в формате +7 (XXX) XXX-XX-XX
+* @returns до 10 цифр
+*/
+function getDigits(formatted) {
+	return formatPhone(formatted).slice(2).replace(/\D/g, "");
+}
+/**
+* Поле телефона: маска +7 (XXX) XXX-XX-XX форматирует номер по мере ввода
+* @param props - пропсы Input; value — телефон в любом виде, onValueChange — +7 и цифры
+* @returns input
+*/
+function PhoneInput({ value, defaultValue = "", onValueChange, onChange, placeholder = PHONE_MASK, ...props }) {
+	const [phone, setPhone] = useControllableState({
+		prop: value,
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		caller: "PhoneInput"
+	});
+	const text = formatPhone(phone);
+	/**
+	* Новый текст поля: оставить цифры и отформатировать.
+	* Если стёрт только символ маски — стирается и цифра перед ним
+	* @param event - событие изменения
+	*/
+	const handleChange = (event) => {
+		onChange?.(event);
+		const nextText = event.target.value;
+		const previousDigits = getDigits(text);
+		let digits = getDigits(nextText);
+		if (nextText.length < text.length && digits === previousDigits) digits = digits.slice(0, -1);
+		const nextPhone = digits.length > 0 ? `+7${digits}` : "";
+		setPhone(nextPhone);
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "phone-input",
+		type: "tel",
+		inputMode: "tel",
+		autoComplete: "tel",
+		placeholder,
+		value: text,
+		onChange: handleChange,
+		...props
+	});
+}
+export { PhoneInput };

package/dist/components/phone-input/types.d.ts

@@ -0,0 +1,12 @@
+import { InputPropsT } from "../input/types.js";
+/**
+ * Пропсы поля телефона
+ */
+export type PhoneInputPropsT = Omit<InputPropsT, 'type' | 'value' | 'defaultValue' | 'inputMode'> & {
+  /** Телефон — контролируемый режим, вместе с onValueChange. Любой вид: +79123456789, 89123456789 */
+  value?: string;
+  /** Телефон при первом рендере — неконтролируемый режим */
+  defaultValue?: string;
+  /** Телефон изменился: +7 и введённые цифры (+7912345), пустая строка — если цифр нет */
+  onValueChange?: (value: string) => void;
+};

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

@@ -0,0 +1,3 @@
+import { PopoverContentPropsT, PopoverDescriptionPropsT, PopoverHeaderPropsT, PopoverPropsT, PopoverTitlePropsT, PopoverTriggerPropsT } from "./types.js";
+import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./popover.js";
+export { Popover, PopoverContent, type PopoverContentPropsT, PopoverDescription, type PopoverDescriptionPropsT, PopoverHeader, type PopoverHeaderPropsT, type PopoverPropsT, PopoverTitle, type PopoverTitlePropsT, PopoverTrigger, type PopoverTriggerPropsT };

package/dist/components/popover/index.js

@@ -0,0 +1 @@
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./popover.js";

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,37 @@
+import { PopoverContentPropsT, PopoverDescriptionPropsT, PopoverHeaderPropsT, PopoverPropsT, PopoverTitlePropsT, PopoverTriggerPropsT } from "./types.js";
+/**
+ * Всплывающее окно: богатое содержимое рядом с кнопкой, открывается по нажатию
+ * @param props - пропсы окна
+ * @returns корень без своей разметки
+ */
+export declare function Popover({ onOpenChange, ...props }: PopoverPropsT): import("react").JSX.Element;
+/**
+ * Кнопка открытия окна. Свою кнопку — через render={<Button />}
+ * @param props - пропсы кнопки
+ * @returns кнопка с aria-haspopup="dialog"
+ */
+export declare function PopoverTrigger(props: PopoverTriggerPropsT): import("react").JSX.Element;
+/**
+ * Содержимое окна: рендерится в портале рядом с кнопкой открытия
+ * @param props - пропсы содержимого; по умолчанию align="center", sideOffset={4}
+ * @returns портал с окном
+ */
+export declare function PopoverContent({ className, side, sideOffset, align, alignOffset, collisionPadding, arrowPadding, sticky, anchor, ...props }: PopoverContentPropsT): import("react").JSX.Element;
+/**
+ * Шапка окна: заголовок и описание
+ * @param props - пропсы шапки
+ * @returns блок
+ */
+export declare function PopoverHeader({ className, ...props }: PopoverHeaderPropsT): import("react").JSX.Element;
+/**
+ * Заголовок окна: озвучивается как название окна
+ * @param props - пропсы заголовка
+ * @returns h2
+ */
+export declare function PopoverTitle({ className, ...props }: PopoverTitlePropsT): import("react").JSX.Element;
+/**
+ * Описание окна
+ * @param props - пропсы описания
+ * @returns p
+ */
+export declare function PopoverDescription({ className, ...props }: PopoverDescriptionPropsT): import("react").JSX.Element;

package/dist/components/popover/popover.js

@@ -0,0 +1,100 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+// src/components/popover/popover.tsx
+/**
+* Всплывающее окно: богатое содержимое рядом с кнопкой, открывается по нажатию
+* @param props - пропсы окна
+* @returns корень без своей разметки
+*/
+function Popover$1({ onOpenChange, ...props }) {
+	/**
+	* Окно открыли или закрыли: наружу только флаг
+	* @param open - открыто ли
+	*/
+	const handleOpenChange = (open) => onOpenChange?.(open);
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "popover",
+		onOpenChange: handleOpenChange,
+		...props
+	});
+}
+/**
+* Кнопка открытия окна. Свою кнопку — через render={<Button />}
+* @param props - пропсы кнопки
+* @returns кнопка с aria-haspopup="dialog"
+*/
+function PopoverTrigger(props) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+/**
+* Содержимое окна: рендерится в портале рядом с кнопкой открытия
+* @param props - пропсы содержимого; по умолчанию align="center", sideOffset={4}
+* @returns портал с окном
+*/
+function PopoverContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, collisionPadding, arrowPadding, sticky, anchor, ...props }) {
+	const classes = cn("z-50", "flex", "w-72", "origin-(--transform-origin)", "flex-col", "gap-2.5", "rounded-lg", "bg-popover", "p-2.5", "text-sm", "text-popover-foreground", "shadow-md", "ring-1", "ring-foreground/10", "outline-hidden", "duration-100", "data-open:animate-in", "data-open:fade-in-0", "data-open:zoom-in-95", "data-closed:animate-out", "data-closed:fade-out-0", "data-closed:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", className);
+	const positionerProps = {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		collisionPadding,
+		arrowPadding,
+		sticky
+	};
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		className: "isolate z-50",
+		anchor,
+		...positionerProps,
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			"data-slot": "popover-content",
+			className: classes,
+			...props
+		})
+	}) });
+}
+/**
+* Шапка окна: заголовок и описание
+* @param props - пропсы шапки
+* @returns блок
+*/
+function PopoverHeader({ className, ...props }) {
+	const classes = cn("flex", "flex-col", "gap-0.5", "text-sm", className);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заголовок окна: озвучивается как название окна
+* @param props - пропсы заголовка
+* @returns h2
+*/
+function PopoverTitle({ className, ...props }) {
+	const classes = cn("font-medium", className);
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		"data-slot": "popover-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Описание окна
+* @param props - пропсы описания
+* @returns p
+*/
+function PopoverDescription({ className, ...props }) {
+	const classes = cn("text-muted-foreground", className);
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		"data-slot": "popover-description",
+		className: classes,
+		...props
+	});
+}
+export { Popover$1 as Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

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

@@ -0,0 +1,51 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { FloatingPropsT } from "../../lib/floating.js";
+import { ComponentProps } from "react";
+import { Popover } from "@base-ui/react/popover";
+/**
+ * Пропсы всплывающего окна
+ */
+export type PopoverPropsT = Omit<Popover.Root.Props, 'onOpenChange'> & {
+  /** Окно открыто — контролируемый режим, вместе с onOpenChange */
+  open?: boolean;
+  /** Окно открыто при первом рендере — неконтролируемый режим */
+  defaultOpen?: boolean;
+  /** Окно открыли или закрыли: новое состояние */
+  onOpenChange?: (open: boolean) => void;
+  /** Модальный режим: страница под окном недоступна, фокус заперт внутри */
+  modal?: boolean | 'trap-focus';
+};
+/**
+ * Пропсы кнопки открытия
+ */
+export type PopoverTriggerPropsT = PartPropsT<Popover.Trigger.Props> & {
+  /** Открывать окно и при наведении, а не только по нажатию */
+  openOnHover?: boolean;
+  /** Задержка открытия при наведении в мс */
+  delay?: number;
+  /** Задержка закрытия после ухода курсора в мс */
+  closeDelay?: number;
+};
+/**
+ * Пропсы содержимого окна
+ */
+export type PopoverContentPropsT = PartPropsT<Popover.Popup.Props> & FloatingPropsT & {
+  /** Элемент, к которому привязать окно вместо кнопки открытия */
+  anchor?: Popover.Positioner.Props['anchor'];
+  /** Куда перевести фокус при открытии: элемент или false — оставить на месте */
+  initialFocus?: Popover.Popup.Props['initialFocus'];
+  /** Куда вернуть фокус при закрытии: элемент или false — никуда */
+  finalFocus?: Popover.Popup.Props['finalFocus'];
+};
+/**
+ * Пропсы шапки
+ */
+export type PopoverHeaderPropsT = ComponentProps<'div'>;
+/**
+ * Пропсы заголовка
+ */
+export type PopoverTitlePropsT = PartPropsT<Popover.Title.Props>;
+/**
+ * Пропсы описания
+ */
+export type PopoverDescriptionPropsT = PartPropsT<Popover.Description.Props>;

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

@@ -0,0 +1,3 @@
+import { ProgressIndicatorPropsT, ProgressLabelPropsT, ProgressPropsT, ProgressTrackPropsT, ProgressValuePropsT } from "./types.js";
+import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "./progress.js";
+export { Progress, ProgressIndicator, type ProgressIndicatorPropsT, ProgressLabel, type ProgressLabelPropsT, type ProgressPropsT, ProgressTrack, type ProgressTrackPropsT, ProgressValue, type ProgressValuePropsT };

package/dist/components/progress/index.js

@@ -0,0 +1 @@
+export { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "./progress.js";

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,32 @@
+import { ProgressIndicatorPropsT, ProgressLabelPropsT, ProgressPropsT, ProgressTrackPropsT, ProgressValuePropsT } from "./types.js";
+/**
+ * Индикатор прогресса: полоса, показывающая, какая часть задачи выполнена.
+ * Над полосой можно положить ProgressLabel и ProgressValue
+ * @param props - пропсы индикатора
+ * @returns элемент с ролью progressbar
+ */
+export declare function Progress({ className, children, value, max, getValueLabel, ...props }: ProgressPropsT): import("react").JSX.Element;
+/**
+ * Дорожка индикатора: серая полоса во всю ширину. Progress рендерит её сам
+ * @param props - пропсы дорожки
+ * @returns дорожка
+ */
+export declare function ProgressTrack({ className, ...props }: ProgressTrackPropsT): import("react").JSX.Element;
+/**
+ * Заполненная часть дорожки. Progress рендерит её сам
+ * @param props - пропсы заполненной части
+ * @returns полоса
+ */
+export declare function ProgressIndicator({ className, ...props }: ProgressIndicatorPropsT): import("react").JSX.Element;
+/**
+ * Подпись индикатора: что выполняется. Кладётся внутрь Progress над полосой
+ * @param props - пропсы подписи
+ * @returns подпись
+ */
+export declare function ProgressLabel({ className, ...props }: ProgressLabelPropsT): import("react").JSX.Element;
+/**
+ * Значение индикатора справа от подписи: «66 %»
+ * @param props - пропсы значения
+ * @returns значение
+ */
+export declare function ProgressValue({ className, ...props }: ProgressValuePropsT): import("react").JSX.Element;

package/dist/components/progress/progress.js

@@ -0,0 +1,100 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { formatNumber } from "../../lib/format.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@base-ui/react/progress";
+// src/components/progress/progress.tsx
+/**
+* Текст значения для скринридера по умолчанию: «66 %»
+* @param value - текущее значение
+* @param max - максимальное значение
+* @returns доля от максимума в процентах
+*/
+function getPercentLabel(value, max) {
+	return formatNumber(value / max, {
+		style: "percent",
+		maximumFractionDigits: 0
+	});
+}
+/**
+* Индикатор прогресса: полоса, показывающая, какая часть задачи выполнена.
+* Над полосой можно положить ProgressLabel и ProgressValue
+* @param props - пропсы индикатора
+* @returns элемент с ролью progressbar
+*/
+function Progress$1({ className, children, value = null, max = 100, getValueLabel = getPercentLabel, ...props }) {
+	const classes = cn("flex", "flex-wrap", "gap-3", className);
+	/**
+	* Текст значения для скринридера
+	* @param _formattedValue - значение, отформатированное Base UI (не нужно)
+	* @param currentValue - текущее значение
+	* @returns подпись значения
+	*/
+	const getAriaValueText = (_formattedValue, currentValue) => {
+		if (currentValue === null) return "";
+		return getValueLabel(currentValue, max);
+	};
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		"data-slot": "progress",
+		value,
+		max,
+		locale: "ru-RU",
+		getAriaValueText,
+		className: classes,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) })]
+	});
+}
+/**
+* Дорожка индикатора: серая полоса во всю ширину. Progress рендерит её сам
+* @param props - пропсы дорожки
+* @returns дорожка
+*/
+function ProgressTrack({ className, ...props }) {
+	const classes = cn("relative", "flex", "h-1", "w-full", "items-center", "overflow-x-hidden", "rounded-full", "bg-muted", className);
+	return /* @__PURE__ */ jsx(Progress.Track, {
+		"data-slot": "progress-track",
+		className: classes,
+		...props
+	});
+}
+/**
+* Заполненная часть дорожки. Progress рендерит её сам
+* @param props - пропсы заполненной части
+* @returns полоса
+*/
+function ProgressIndicator({ className, ...props }) {
+	const classes = cn("h-full", "bg-primary", "transition-all", className);
+	return /* @__PURE__ */ jsx(Progress.Indicator, {
+		"data-slot": "progress-indicator",
+		className: classes,
+		...props
+	});
+}
+/**
+* Подпись индикатора: что выполняется. Кладётся внутрь Progress над полосой
+* @param props - пропсы подписи
+* @returns подпись
+*/
+function ProgressLabel({ className, ...props }) {
+	const classes = cn("text-sm", "font-medium", className);
+	return /* @__PURE__ */ jsx(Progress.Label, {
+		"data-slot": "progress-label",
+		className: classes,
+		...props
+	});
+}
+/**
+* Значение индикатора справа от подписи: «66 %»
+* @param props - пропсы значения
+* @returns значение
+*/
+function ProgressValue({ className, ...props }) {
+	const classes = cn("ml-auto", "text-sm", "text-muted-foreground", "tabular-nums", className);
+	return /* @__PURE__ */ jsx(Progress.Value, {
+		"data-slot": "progress-value",
+		className: classes,
+		...props
+	});
+}
+export { Progress$1 as Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue };

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

@@ -0,0 +1,31 @@
+import { PartPropsT } from "../../lib/part-props.js";
+import { Progress } from "@base-ui/react/progress";
+/**
+ * Пропсы индикатора прогресса
+ */
+export type ProgressPropsT = PartPropsT<Omit<Progress.Root.Props, 'value' | 'max' | 'getAriaValueText'>> & {
+  /** Текущее значение от 0 до max; null — прогресс неизвестен */
+  value?: number | null;
+  /** Минимальное значение, по умолчанию 0 */
+  min?: number;
+  /** Максимальное значение, по умолчанию 100 */
+  max?: number;
+  /** Текст значения для скринридера (aria-valuetext). По умолчанию процент: «66 %» */
+  getValueLabel?: (value: number, max: number) => string;
+};
+/**
+ * Пропсы дорожки
+ */
+export type ProgressTrackPropsT = PartPropsT<Progress.Track.Props>;
+/**
+ * Пропсы заполненной части
+ */
+export type ProgressIndicatorPropsT = PartPropsT<Progress.Indicator.Props>;
+/**
+ * Пропсы подписи
+ */
+export type ProgressLabelPropsT = PartPropsT<Progress.Label.Props>;
+/**
+ * Пропсы значения
+ */
+export type ProgressValuePropsT = PartPropsT<Progress.Value.Props>;

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

@@ -0,0 +1,3 @@
+import { QuestionnaireActionsPropsT, QuestionnaireChoiceDefinitionT, QuestionnaireChoiceDescriptionPropsT, QuestionnaireChoicePropsT, QuestionnaireChoicesPropsT, QuestionnaireDescriptionPropsT, QuestionnaireErrorPropsT, QuestionnaireInputPropsT, QuestionnaireInputTypeT, QuestionnaireItemDefinitionT, QuestionnaireItemPropsT, QuestionnaireItemStatusT, QuestionnaireNextPropsT, QuestionnairePreviousPropsT, QuestionnaireProgressPropsT, QuestionnaireProgressStateI, QuestionnairePropsT, QuestionnaireShortcutModeT, QuestionnaireSkipPropsT, QuestionnaireSubmitPropsT, QuestionnaireTitlePropsT } from "./types.js";
+import { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle } from "./questionnaire.js";
+export { Questionnaire, QuestionnaireActions, type QuestionnaireActionsPropsT, QuestionnaireChoice, type QuestionnaireChoiceDefinitionT, QuestionnaireChoiceDescription, type QuestionnaireChoiceDescriptionPropsT, type QuestionnaireChoicePropsT, QuestionnaireChoices, type QuestionnaireChoicesPropsT, QuestionnaireDescription, type QuestionnaireDescriptionPropsT, QuestionnaireError, type QuestionnaireErrorPropsT, QuestionnaireInput, type QuestionnaireInputPropsT, type QuestionnaireInputTypeT, QuestionnaireItem, type QuestionnaireItemDefinitionT, type QuestionnaireItemPropsT, type QuestionnaireItemStatusT, QuestionnaireNext, type QuestionnaireNextPropsT, QuestionnairePrevious, type QuestionnairePreviousPropsT, QuestionnaireProgress, type QuestionnaireProgressPropsT, type QuestionnaireProgressStateI, type QuestionnairePropsT, type QuestionnaireShortcutModeT, QuestionnaireSkip, type QuestionnaireSkipPropsT, QuestionnaireSubmit, type QuestionnaireSubmitPropsT, QuestionnaireTitle, type QuestionnaireTitlePropsT };

package/dist/components/questionnaire/index.js

@@ -0,0 +1 @@
+export { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle } from "./questionnaire.js";