hallo-kit 0.3.0

package/src/ui/input/input.tsx

@@ -0,0 +1,391 @@
+'use client'
+
+import * as React from 'react'
+
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { Icon } from '../Icon'
+import { cn } from '../../lib/utils'
+import { useKitT } from '../../i18n'
+import { notify } from '../../utils/notify'
+
+// Стили несёт ОБЁРТКА (заливка/рамка, скругление, кольцо фокуса через focus-within), а
+// сам <input> — прозрачный и без рамок. Так слоты слева/справа и служебные кнопки
+// (очистка/копирование) живут внутри одной «коробки» и попадают в общую подсветку
+// фокуса.
+// variant — внешний вид «коробки»:
+// - filled (деф.) — заливка bg-secondary, без рамки;
+// - bordered — рамка border-input на поверхности bg-card (как outline-поле).
+// На обоих фокус — кольцо ring-ring через focus-within. Статусы (error/warning/success)
+// перекрывают bg/рамку отдельно (statusRing) поверх варианта.
+const inputVariants = cva(
+	'flex w-full items-center gap-2.5 text-foreground transition-[color,box-shadow] outline-none focus-within:ring-2 focus-within:ring-ring has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50',
+	{
+		variants: {
+			variant: {
+				filled: 'bg-secondary',
+				bordered: 'border border-disabled',
+			},
+		},
+		defaultVariants: {
+			variant: 'filled',
+		},
+	},
+)
+
+// Размер — FLUID (высота/padding/шрифт клампятся 320→1280px), один size = «тир».
+const INPUT_SIZE: Record<'sm' | 'md' | 'lg', string> = {
+	sm: 'min-h-fl-32/36 p-fl-14/16 text-button-s rounded-sm',
+	md: 'min-h-fl-40/44 p-fl-18/20 text-button-m rounded-md',
+	lg: 'min-h-fl-48/52 p-fl-22/24 text-button-l rounded-lg',
+}
+// Размер текста сообщения под полем — в тон размеру поля.
+const INPUT_MSG_SIZE: Record<'sm' | 'md' | 'lg', string> = {
+	sm: 'text-button-s',
+	md: 'text-button-m',
+	lg: 'text-button-l',
+}
+
+// Размер служебных иконок (× / copy / check) — в тон размеру поля.
+const INPUT_ICON_SIZE: Record<'sm' | 'md' | 'lg', number> = {
+	sm: 18,
+	md: 20,
+	lg: 22,
+}
+
+export interface InputProps
+	// Omit 'size': у нативного <input> size — это number (видимая ширина в
+	// символах). Мы переопределяем его на вариант 'sm' | 'md' | 'lg' из cva.
+	extends
+		Omit<React.ComponentProps<'input'>, 'size'>,
+		Omit<VariantProps<typeof inputVariants>, 'size'> {
+	/** Размер: `sm | md | lg`. По умолчанию md. Каждый размер сам fluid-клампится. */
+	size?: 'sm' | 'md' | 'lg'
+	/** Внешний вид: `filled` (деф., заливка bg-secondary) | `bordered` (рамка на bg-card). */
+	variant?: 'filled' | 'bordered'
+	/** Класс на внешнюю обёртку (заливка/скругление/высота). `className` идёт на сам <input>. */
+	containerClassName?: string
+	/** Контент перед инпутом — иконка или картинка (напр. флаг). */
+	startContent?: React.ReactNode
+	/** Контент после инпута — иконка, шеврон и т.п. */
+	endContent?: React.ReactNode
+	/** Показать кнопку «очистить» (×) справа, когда в поле есть значение. */
+	clearable?: boolean
+	/** Показать кнопку «копировать» справа — копирует текущее значение поля. */
+	copiable?: boolean
+	/**
+	 * Тост при успешном копировании (кнопка `copiable`). `true`/не задан — типовой
+	 * «Скопировано в буфер обмена»; строка — свой заголовок (уже локализованный, напр.
+	 * «Ссылка скопирована»); `false` — не показывать тост.
+	 */
+	copyToast?: string | boolean
+	/**
+	 * Показать кнопку «вставить» справа, когда поле ПУСТОЕ — вставляет текст из
+	 * буфера обмена. Взаимоисключима с `clearable` (× появляется при наличии значения).
+	 */
+	pasteable?: boolean
+	/**
+	 * Состояние поля. У каждого вид `boolean | string`: `true` — только цветная
+	 * подсветка, строка — подсветка плюс текст под полем. Приоритет, если задано
+	 * несколько: error > warning > success.
+	 *
+	 * `error` означает невалидность: проставляет aria-invalid, сообщение —
+	 * role="alert". `warning`/`success` — подсказки: role="status", без aria-invalid.
+	 */
+	error?: boolean | string
+	/** Предупреждение (формат и приоритет — см. `error`). */
+	warning?: boolean | string
+	/** Успех/подтверждение (формат и приоритет — см. `error`). */
+	success?: boolean | string
+}
+
+export function Input({
+	ref,
+	className,
+	containerClassName,
+	size,
+	variant,
+	type = 'text',
+	startContent,
+	endContent,
+	clearable = false,
+	copiable = false,
+	copyToast = true,
+	pasteable = false,
+	error,
+	warning,
+	success,
+	disabled,
+	readOnly,
+	onChange,
+	'aria-describedby': ariaDescribedBy,
+	...props
+}: InputProps) {
+	const t = useKitT('ui.actions')
+	const tToast = useKitT('ui.toast')
+	const sizeClasses = INPUT_SIZE[size ?? 'md']
+	// Внутренний ref нужен служебным кнопкам, чтобы читать/менять значение прямо в
+	// DOM. Это работает и с неконтролируемыми инпутами react-hook-form
+	// (`{...register('x')}`), где value в проп не приходит.
+	const innerRef = React.useRef<HTMLInputElement>(null)
+
+	// Сливаем внешний ref (напр. от register) с внутренним: оба должны указывать
+	// на один и тот же <input>.
+	const setRefs = React.useCallback(
+		(node: HTMLInputElement | null) => {
+			innerRef.current = node
+			if (typeof ref === 'function') ref(node)
+			else if (ref) ref.current = node
+		},
+		[ref],
+	)
+
+	// Есть ли в поле значение — нужно, чтобы показывать «×». В контролируемом
+	// режиме берём из value-пропа, иначе ведём локально (обновляем в onChange).
+	const isControlled = props.value !== undefined
+	const [uncontrolledHasValue, setUncontrolledHasValue] = React.useState(
+		() => props.defaultValue != null && String(props.defaultValue).length > 0,
+	)
+	const hasValue = isControlled
+		? String(props.value ?? '').length > 0
+		: uncontrolledHasValue
+
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		if (!isControlled) setUncontrolledHasValue(event.target.value.length > 0)
+		onChange?.(event)
+	}
+
+	const handleClear = React.useCallback(() => {
+		const input = innerRef.current
+		if (!input) return
+		// Меняем значение «как пользователь»: нативный сеттер + событие input.
+		// Простое `input.value = ''` НЕ триггерит React-onChange и не доходит до
+		// react-hook-form — этот трюк заставляет React увидеть изменение.
+		const setValue = Object.getOwnPropertyDescriptor(
+			HTMLInputElement.prototype,
+			'value',
+		)?.set
+		setValue?.call(input, '')
+		input.dispatchEvent(new Event('input', { bubbles: true }))
+		input.focus()
+	}, [])
+
+	const [copied, setCopied] = React.useState(false)
+	const resetTimer = React.useRef<ReturnType<typeof setTimeout>>(undefined)
+
+	// Чистим таймер сброса «галочки» при размонтировании.
+	React.useEffect(() => () => clearTimeout(resetTimer.current), [])
+
+	const handleCopy = React.useCallback(async () => {
+		const value = innerRef.current?.value
+		if (!value) return
+		try {
+			await navigator.clipboard.writeText(value)
+			setCopied(true)
+			clearTimeout(resetTimer.current)
+			resetTimer.current = setTimeout(() => setCopied(false), 1500)
+			// Тост-подтверждение: типовой заголовок, своя строка или выкл (copyToast=false).
+			if (copyToast !== false) {
+				notify({
+					title: typeof copyToast === 'string' ? copyToast : tToast('copied'),
+					variant: 'success',
+					timeout: 2000,
+				})
+			}
+		} catch {
+			// Clipboard недоступен (insecure context / отказ доступа) — тихо игнорим.
+		}
+	}, [copyToast, tToast])
+
+	// Вставка из буфера: тот же native-setter трюк, что и в handleClear, чтобы
+	// React/react-hook-form увидели изменение значения.
+	const handlePaste = React.useCallback(async () => {
+		const input = innerRef.current
+		if (!input) return
+		try {
+			const text = await navigator.clipboard.readText()
+			if (!text) return
+			const setValue = Object.getOwnPropertyDescriptor(
+				HTMLInputElement.prototype,
+				'value',
+			)?.set
+			setValue?.call(input, text)
+			input.dispatchEvent(new Event('input', { bubbles: true }))
+			input.focus()
+		} catch {
+			// Clipboard недоступен (insecure context / отказ доступа) — тихо игнорим.
+		}
+	}, [])
+
+	const showClear = clearable && hasValue && !disabled && !readOnly
+	// «Вставить» — только на пустом поле; при наличии значения его место занимает «×».
+	const showPaste = pasteable && !hasValue && !disabled && !readOnly
+
+	// Состояние поля. Приоритет: error > warning > success — активно одно.
+	// `error` — невалидность (aria-invalid + role="alert"); warning/success —
+	// подсказки (role="status", без aria-invalid).
+	const status: 'error' | 'warning' | 'success' | null = error
+		? 'error'
+		: warning
+			? 'warning'
+			: success
+				? 'success'
+				: null
+
+	const statusValue = error || warning || success
+	const statusMessage =
+		typeof statusValue === 'string' ? statusValue : undefined
+
+	const statusRing = status
+		? {
+				error: 'ring-1 ring-error bg-error-soft focus-within:ring-error',
+				warning:
+					'ring-1 ring-warning bg-warning-soft focus-within:ring-warning',
+				success:
+					'ring-1 ring-success bg-success-soft focus-within:ring-success',
+			}[status]
+		: undefined
+	// const statusPlaceHolder = status
+	// 	? {
+	// 			error: 'placeholder:text-error',
+	// 			warning: 'placeholder:text-warning',
+	// 			success: 'placeholder:text-success',
+	// 		}[status]
+	// 	: undefined
+	const statusTextColor = status
+		? { error: 'text-error', warning: 'text-warning', success: 'text-success' }[
+				status
+			]
+		: undefined
+
+	// Размер текста сообщения — в тон размеру поля (text-button-* по size), как и
+	// текст внутри инпута. У button-токенов line-height = 1 → сообщение на одну строку.
+	const messageTextSize = INPUT_MSG_SIZE[size ?? 'md']
+
+	// Служебные иконки (×/copy/check) — фикс размер (инлайн-px нельзя адаптировать
+	// CSS-брейкпоинтами; разница sm↔lg мелкая, они и показываются редко).
+	const iconSize = INPUT_ICON_SIZE.md
+
+	const reactId = React.useId()
+	const messageId = `${reactId}-msg`
+	// Связываем сообщение с инпутом, не теряя чужой aria-describedby, если был.
+	const describedBy =
+		[statusMessage ? messageId : null, ariaDescribedBy]
+			.filter(Boolean)
+			.join(' ') || undefined
+
+	const box = (
+		<div
+			className={cn(
+				inputVariants({ variant }),
+				sizeClasses,
+				statusRing,
+				containerClassName,
+			)}
+		>
+			{startContent ? (
+				<span
+					className={cn(
+						'inline-flex shrink-0 items-center text-muted-foreground',
+						// statusTextColor,
+					)}
+				>
+					{startContent}
+				</span>
+			) : null}
+
+			<input
+				ref={setRefs}
+				type={type}
+				disabled={disabled}
+				readOnly={readOnly}
+				onChange={handleChange}
+				// aria-invalid — только при error (невалидность). Нужно скринридерам
+				// и подхватывается react-hook-form. Потребитель может переопределить.
+				aria-invalid={status === 'error' || undefined}
+				aria-describedby={describedBy}
+				// min-w-0 — чтобы инпут ужимался в flex и не выталкивал слоты.
+				className={cn(
+					'min-w-0 flex-1 border-0 bg-transparent p-0 text-current outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',
+					// Автозаполнение WebKit: гасим его жёлто-белый ПРЯМОУГОЛЬНЫЙ фон (у input
+					// нет скругления — оно на обёртке) вечной transition на background-color —
+					// сквозь него просвечивает bg обёртки (secondary/card) со скруглением; и
+					// перекрашиваем принудительный чёрный текст автофилла в --foreground.
+					'autofill:[-webkit-text-fill-color:var(--color-foreground)] autofill:[transition:background-color_9999s_ease-in-out_0s]',
+					className,
+					// statusPlaceHolder,
+				)}
+				{...props}
+			/>
+
+			{endContent ? (
+				<span className='inline-flex shrink-0 items-center text-muted-foreground'>
+					{endContent}
+				</span>
+			) : null}
+
+			{showClear ? (
+				<button
+					// type='button' обязателен: иначе внутри <form> клик сабмитит форму.
+					type='button'
+					onClick={handleClear}
+					aria-label={t('clear')}
+					className='inline-flex shrink-0 cursor-pointer items-center justify-center text-muted-foreground transition-colors hover:text-foreground'
+				>
+					<Icon type='close' isCurrentColor size={iconSize} />
+				</button>
+			) : null}
+
+			{showPaste ? (
+				// Текстовая подпись «Вставить» вместо иконки — понятнее как affordance.
+				// Видимый текст сам служит accessible name → aria-label не нужен.
+				<button
+					type='button'
+					onClick={handlePaste}
+					className='inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap text-button-s font-medium text-muted-foreground transition-colors hover:text-primary'
+				>
+					{t('paste')}
+				</button>
+			) : null}
+
+			{copiable ? (
+				<button
+					type='button'
+					onClick={handleCopy}
+					disabled={disabled}
+					aria-label={copied ? t('copied') : t('copy')}
+					className={cn(
+						'inline-flex shrink-0 cursor-pointer items-center justify-center transition-colors disabled:pointer-events-none',
+						'text-muted-foreground hover:text-foreground',
+					)}
+				>
+					{!copied ? (
+						<Icon type='copy' isCurrentColor size={iconSize} />
+					) : (
+						<Icon type='check' isCurrentColor size={iconSize} />
+					)}
+				</button>
+			) : null}
+		</div>
+	)
+
+	// Без текста сообщения возвращаем только «коробку» — лишнюю обёртку не плодим.
+	if (!statusMessage) return box
+
+	return (
+		// w-full обязателен: без него в родителях с items-center обёртка сообщения
+		// сжимается по контенту, и поле «худеет» при появлении ошибки.
+		<div className='flex w-full flex-col gap-1.5'>
+			{box}
+			<p
+				id={messageId}
+				role={status === 'error' ? 'alert' : 'status'}
+				className={cn('px-1', messageTextSize, statusTextColor)}
+			>
+				{statusMessage}
+			</p>
+		</div>
+	)
+}
+
+export { inputVariants }

package/src/ui/label/index.ts

@@ -0,0 +1 @@
+export * from './label'

package/src/ui/label/label.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import * as React from 'react'
+
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+import { cn } from '../../lib/utils'
+
+// Label — подпись к контролу на нативном <label> (через Radix). Связь с полем — через
+// htmlFor/id: клик по подписи фокусит/переключает контрол, скринридер зачитывает имя
+// поля. peer-disabled:* — если контрол с классом `peer` рядом и disabled, подпись гаснет.
+// Размер = только шрифт (text-button-*), а он уже fluid-клампится.
+const LABEL_BASE =
+	'inline-flex items-center gap-2 text-foreground select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50'
+const LABEL_SIZE: Record<'sm' | 'md' | 'lg', string> = {
+	sm: 'text-button-s',
+	md: 'text-button-m',
+	lg: 'text-button-l',
+}
+
+export interface LabelProps
+	extends React.ComponentProps<typeof LabelPrimitive.Root> {
+	/** Размер: `sm | md | lg`. По умолчанию md. */
+	size?: 'sm' | 'md' | 'lg'
+}
+
+export function Label({ className, size, ...props }: LabelProps) {
+	return (
+		<LabelPrimitive.Root
+			className={cn(LABEL_BASE, LABEL_SIZE[size ?? 'md'], className)}
+			{...props}
+		/>
+	)
+}

package/src/ui/method-card/index.ts

@@ -0,0 +1 @@
+export { MethodCard } from './method-card'

package/src/ui/method-card/method-card.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode } from 'react'
+
+import { Card } from '../card'
+import { Skeleton } from '../skeleton'
+import { cn } from '../../lib/utils'
+
+// Карточка-строка «иконка + название + описание» с опциональным трейлинг-слотом справа.
+// НЕЙТРАЛЬНАЯ и презентационная: не знает про оплату/выплату — что положить в trailing и
+// что делать по клику, решает потребитель (оплата — переход + шеврон; выплата — выбор,
+// рамка, без трейлинга). Выбираемая: у выбранной синяя рамка. Рамка есть всегда (по
+// умолчанию прозрачная) → выбор не сдвигает раскладку. Focus-ring на кнопке.
+// loading — скелетоним ТОЛЬКО данные (иконка/название/описание). Каркас Card (паддинги,
+// рамка) и трейлинг неизменны; плейсхолдер иконки повторяет её отступы (p-fl-6/8) → текст
+// не сдвигается; высота строк держится текстовыми токенами (плейсхолдер 0.9em <
+// line-height). При подгрузке ничего не прыгает.
+export function MethodCard({
+	icon,
+	name,
+	desc,
+	selected = false,
+	onClick,
+	loading = false,
+	trailing,
+	className,
+}: {
+	icon?: ReactNode
+	name?: string
+	desc?: string
+	selected?: boolean
+	onClick?: () => void
+	loading?: boolean
+	/** Элемент справа: шеврон (переход), галочка/радио (выбор) и т.п. */
+	trailing?: ReactNode
+	className?: string
+}) {
+	const inner = (
+		<>
+			<span className='flex min-w-0 items-center gap-fl-12/16'>
+				<span className='flex shrink-0 items-center justify-center'>
+					{loading ? (
+						// Footprint точь-в-точь как у PaymentMethodIcon (бокс p-fl-6/8 вокруг
+						// картинки size-fl-16/20 → внешний fl-28/36, скругление 8px = rounded-xl).
+						// Так при загрузке иконка не прыгает и не «сжимается».
+						<Skeleton className='size-fl-28/36 rounded-xl' />
+					) : (
+						icon
+					)}
+				</span>
+				<span className='flex min-w-0 flex-col gap-0.5'>
+					<span className='truncate text-body-l font-semibold text-foreground'>
+						{loading ? (
+							<Skeleton className='inline-block h-[0.9em] w-32 align-middle' />
+						) : (
+							name
+						)}
+					</span>
+					<span className='truncate text-body-s text-muted-foreground'>
+						{loading ? (
+							<Skeleton className='inline-block h-[0.9em] w-40 align-middle' />
+						) : (
+							desc
+						)}
+					</span>
+				</span>
+			</span>
+			{trailing != null && (
+				<span className='flex shrink-0 items-center'>{trailing}</span>
+			)}
+		</>
+	)
+
+	// На загрузке — тот же каркас, но без кнопки/выбора (просто плейсхолдер).
+	if (loading) {
+		return (
+			<Card className='flex-row py-fl-11/15 items-center justify-between border-2 border-transparent'>
+				{inner}
+			</Card>
+		)
+	}
+
+	return (
+		<Card
+			asChild
+			interactive
+			className={cn(
+				'flex-row py-fl-11/15 items-center justify-between border-2',
+				selected ? 'border-primary' : 'border-transparent',
+				className,
+			)}
+		>
+			<button
+				type='button'
+				onClick={onClick}
+				aria-pressed={selected}
+				className='cursor-pointer text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background'
+			>
+				{inner}
+			</button>
+		</Card>
+	)
+}

package/src/ui/modal/index.ts

@@ -0,0 +1 @@
+export * from './modal'

package/src/ui/modal/modal.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import * as React from 'react'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+
+import { Icon } from '../Icon'
+import { cn } from '../../lib/utils'
+
+// Modal на Radix Dialog: фокус-трап, Esc, клик по оверлею, портал, aria — из коробки.
+// Composition-API: Modal / ModalTrigger / ModalContent / ModalHeader / ModalTitle / …
+export const Modal = DialogPrimitive.Root
+export const ModalTrigger = DialogPrimitive.Trigger
+export const ModalClose = DialogPrimitive.Close
+
+function ModalOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return (
+		<DialogPrimitive.Overlay
+			className={cn(
+				'fixed inset-0 z-50 bg-navy/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in data-[state=closed]:animate-out data-[state=closed]:fade-out',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export interface ModalContentProps extends React.ComponentProps<
+	typeof DialogPrimitive.Content
+> {
+	/** Показывать крестик закрытия в углу. По умолчанию true. */
+	showClose?: boolean
+}
+
+export function ModalContent({
+	className,
+	children,
+	showClose = true,
+	...props
+}: ModalContentProps) {
+	return (
+		<DialogPrimitive.Portal>
+			<ModalOverlay />
+			{/* Центрирующая обёртка: флекс по центру экрана. pointer-events-none — клик мимо
+			    контента проходит на оверлей (закрытие). Анимируется ВНУТРЕННИЙ Content
+			    (scale/blur/opacity, без translate) — потому центрирование и анимация не спорят. */}
+			<div className='pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4'>
+				<DialogPrimitive.Content
+					// Не переводим фокус на первый интерактивный элемент при открытии: он
+					// оказывался подсвечен до всякого действия пользователя (первый таб
+					// в окне оплаты). Фокус-ловушка и закрытие по Esc продолжают работать —
+					// Radix ставит фокус на сам контейнер (у него tabIndex=-1).
+					onOpenAutoFocus={event => event.preventDefault()}
+					className={cn(
+						'pointer-events-auto relative flex w-full max-w-xl flex-col gap-fl-12/16 rounded-xl border border-border bg-card p-fl-20/30 text-card-foreground shadow-lg outline-none data-[state=open]:modal-blur-in data-[state=closed]:modal-blur-out',
+						className,
+					)}
+					{...props}
+				>
+					{children}
+					{showClose ? (
+						<DialogPrimitive.Close
+							aria-label='Закрыть'
+							className='absolute top-6 right-6 inline-flex size-8 cursor-pointer items-center justify-center text-muted-foreground outline-none transition-colors hover:text-foreground active:text-foreground focus-visible:ring-2 focus-visible:ring-ring'
+						>
+							<Icon type='close' isCurrentColor size={18} />
+						</DialogPrimitive.Close>
+					) : null}
+				</DialogPrimitive.Content>
+			</div>
+		</DialogPrimitive.Portal>
+	)
+}
+
+// pr-8 — чтобы заголовок не залезал под крестик.
+export function ModalHeader({
+	className,
+	...props
+}: React.ComponentProps<'div'>) {
+	return (
+		<div
+			className={cn('flex flex-col gap-1.5 pr-8 text-left', className)}
+			{...props}
+		/>
+	)
+}
+
+export function ModalFooter({
+	className,
+	...props
+}: React.ComponentProps<'div'>) {
+	return (
+		<div
+			className={cn(
+				'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export function ModalTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
+		<DialogPrimitive.Title
+			className={cn('text-h3 text-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+export function ModalDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return (
+		<DialogPrimitive.Description
+			className={cn('text-body-l text-foreground', className)}
+			{...props}
+		/>
+	)
+}

package/src/ui/otp-input/index.ts

@@ -0,0 +1 @@
+export * from './otp-input'