hallo-kit 0.3.0

package/src/ui/Icon/index.ts

@@ -0,0 +1,3 @@
+export { Icon } from './Icon'
+export { UIIconNames } from './Icon.types'
+export type { IconProps, IconNameType } from './Icon.types'

package/src/ui/badge/badge.tsx

@@ -0,0 +1,185 @@
+import * as React from 'react'
+
+import { Slot, Slottable } from '@radix-ui/react-slot'
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { Icon } from '../Icon'
+import type { IconNameType } from '../Icon/Icon.types'
+import { cn } from '../../lib/utils'
+
+// Две независимые оси: tone (цвет/статус) × appearance (заливка). Конкретные
+// цвета задаются их пересечением в compoundVariants. size — размер текста/паддингов.
+const badgeVariants = cva(
+	'inline-flex w-fit shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded transition-colors [&_svg]:pointer-events-none [&_svg]:shrink-0',
+	{
+		variants: {
+			tone: {
+				primary: '',
+				success: '',
+				warning: '',
+				error: '',
+				neutral: '',
+			},
+			appearance: {
+				solid: '',
+				soft: '',
+				outline: 'border',
+			},
+		},
+		compoundVariants: [
+			// solid — насыщенная заливка
+			{
+				appearance: 'solid',
+				tone: 'primary',
+				class: 'bg-primary text-primary-foreground',
+			},
+			{
+				appearance: 'solid',
+				tone: 'success',
+				class: 'bg-success text-success-foreground',
+			},
+			{
+				appearance: 'solid',
+				tone: 'warning',
+				class: 'bg-warning text-warning-foreground',
+			},
+			{
+				appearance: 'solid',
+				tone: 'error',
+				class: 'bg-error text-error-foreground',
+			},
+			{
+				appearance: 'solid',
+				tone: 'neutral',
+				class: 'bg-secondary text-secondary-foreground',
+			},
+			// soft — тонированная подложка + цветной текст
+			{ appearance: 'soft', tone: 'primary', class: 'bg-accent text-primary' },
+			{
+				appearance: 'soft',
+				tone: 'success',
+				class: 'bg-success-soft text-success',
+			},
+			{
+				appearance: 'soft',
+				tone: 'warning',
+				class: 'bg-warning-soft text-warning',
+			},
+			{
+				appearance: 'soft',
+				tone: 'error',
+				class: 'bg-error-soft text-error',
+			},
+			{
+				appearance: 'soft',
+				tone: 'neutral',
+				class: 'bg-secondary text-muted-foreground',
+			},
+			// outline — рамка цвета тона
+			{
+				appearance: 'outline',
+				tone: 'primary',
+				class: 'border-primary text-primary',
+			},
+			{
+				appearance: 'outline',
+				tone: 'success',
+				class: 'border-success text-success',
+			},
+			{
+				appearance: 'outline',
+				tone: 'warning',
+				class: 'border-warning text-warning',
+			},
+			{
+				appearance: 'outline',
+				tone: 'error',
+				class: 'border-error text-error',
+			},
+			{
+				appearance: 'outline',
+				tone: 'neutral',
+				class: 'border-border text-foreground',
+			},
+		],
+		defaultVariants: { tone: 'primary', appearance: 'soft' },
+	},
+)
+
+// Размер — FLUID (padding/шрифт клампятся 320→1280px), а не cva.
+const BADGE_SIZE: Record<'sm' | 'md' | 'lg', string> = {
+	sm: 'px-fl-6/8 py-fl-2/4 text-caption',
+	md: 'px-fl-8/10 py-fl-6/8 text-button-s',
+	lg: 'px-fl-10/12 py-fl-8/10 text-button-s',
+}
+
+// Дефолтная иконка-знак под каждый тон (для withIcon). Пара «тон → знак» живёт здесь,
+// чтобы статусные баджи не собирали <Icon> руками. Можно перебить через startContent.
+const TONE_ICON: Record<
+	NonNullable<VariantProps<typeof badgeVariants>['tone']>,
+	IconNameType
+> = {
+	primary: 'info',
+	success: 'check_circle',
+	warning: 'info',
+	error: 'warning',
+	neutral: 'info',
+}
+// Размер иконки под размер баджа.
+const ICON_SIZE: Record<'sm' | 'md' | 'lg', number> = { sm: 12, md: 14, lg: 16 }
+
+export interface BadgeProps
+	extends
+		React.ComponentProps<'span'>,
+		Omit<VariantProps<typeof badgeVariants>, 'size'> {
+	/** Размер: `sm | md | lg`. По умолчанию md. */
+	size?: 'sm' | 'md' | 'lg'
+	/** Рендерить как дочерний элемент (напр. ссылку <a>) вместо <span>. */
+	asChild?: boolean
+	/** Показать слева дефолтную иконку-знак тона (TONE_ICON). Перебивается startContent. */
+	withIcon?: boolean
+	/** Контент перед текстом (обычно иконка статуса). Наследует цвет тона. */
+	startContent?: React.ReactNode
+}
+
+export function Badge({
+	className,
+	tone,
+	appearance,
+	size,
+	asChild = false,
+	withIcon = false,
+	startContent,
+	children,
+	...props
+}: BadgeProps) {
+	const Comp = asChild ? Slot : 'span'
+	// Ведущий контент: явный startContent приоритетнее; иначе по withIcon — дефолтная
+	// иконка тона. Наследует цвет тона (isCurrentColor).
+	const leading =
+		startContent ??
+		(withIcon ? (
+			<Icon
+				type={TONE_ICON[tone ?? 'primary']}
+				size={ICON_SIZE[size ?? 'md']}
+				isCurrentColor
+			/>
+		) : null)
+	return (
+		<Comp
+			className={cn(
+				badgeVariants({ tone, appearance }),
+				BADGE_SIZE[size ?? 'md'],
+				className,
+			)}
+			{...props}
+		>
+			{leading}
+			{/* Slottable указывает Slot, какой ребёнок «настоящий» (для asChild),
+			    чтобы startContent оставался слева и не ломал Slot. */}
+			<Slottable>{children}</Slottable>
+		</Comp>
+	)
+}
+
+export { badgeVariants }

package/src/ui/badge/index.ts

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

package/src/ui/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,63 @@
+import { Fragment } from 'react'
+
+import Link from 'next/link'
+
+import { cn } from '../../lib/utils'
+
+// Один сегмент пути. С href → ссылка (предок), без href → просто текст.
+export interface BreadcrumbItem {
+	/** Подпись сегмента. Приходит уже локализованной (как title/subtitle в PageHeader). */
+	label: string
+	/** Куда ведёт сегмент. У текущей страницы (последний сегмент) href обычно не задают. */
+	href?: string
+}
+
+// Хлебные крошки над заголовком страницы (см. PageHeader). Сегменты передают пропсом
+// уже переведёнными. Последний сегмент — текущая страница: не ссылка, помечен
+// aria-current. Разделитель — «/». Цвет приглушённый (muted), ссылки темнеют на hover.
+export function Breadcrumbs({
+	items,
+	className,
+	// aria-label для landmark <nav>. SR-only; при необходимости локализуй через проп.
+	ariaLabel = 'breadcrumb',
+}: {
+	items: BreadcrumbItem[]
+	className?: string
+	ariaLabel?: string
+}) {
+	if (items.length === 0) return null
+
+	return (
+		<nav aria-label={ariaLabel} className={cn('min-w-0', className)}>
+			<ol className='flex flex-wrap items-center gap-x-2 gap-y-1 text-body-s text-muted-foreground'>
+				{items.map((item, index) => {
+					const isLast = index === items.length - 1
+					return (
+						<Fragment key={`${item.label}-${index}`}>
+							<li>
+								{item.href && !isLast ? (
+									<Link
+										href={item.href}
+										className='rounded-sm underline-offset-2 outline-none transition-colors hover:text-foreground hover:underline focus-visible:ring-2 focus-visible:ring-ring'
+									>
+										{item.label}
+									</Link>
+								) : (
+									<span aria-current={isLast ? 'page' : undefined}>
+										{item.label}
+									</span>
+								)}
+							</li>
+							{/* Разделитель — декоративный, скринридеру не нужен. */}
+							{!isLast && (
+								<li aria-hidden className='select-none'>
+									/
+								</li>
+							)}
+						</Fragment>
+					)
+				})}
+			</ol>
+		</nav>
+	)
+}

package/src/ui/breadcrumbs/index.ts

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

package/src/ui/burger-icon/burger-icon.tsx

@@ -0,0 +1,22 @@
+import { cn } from '../../lib/utils'
+
+// Анимированный бургер: две пилюли (пропорции из Union.svg — 18 шир., толщина ~2, gap ~4),
+// при open складываются в крестик. Обе позиционируем по `top` (не bottom) → переход
+// top→центр + rotate анимируется плавно. Цвет наследуется (bg-current).
+export function BurgerIcon({ open }: { open: boolean }) {
+	const bar =
+		'absolute left-0 h-[2px] w-full rounded-full bg-current transition-all duration-300 ease-out'
+	return (
+		<span aria-hidden className='relative block h-4 w-[18px]'>
+			<span
+				className={cn(bar, open ? 'top-1/2 -translate-y-1/2 rotate-45' : 'top-1')}
+			/>
+			<span
+				className={cn(
+					bar,
+					open ? 'top-1/2 -translate-y-1/2 -rotate-45' : 'top-[10px]',
+				)}
+			/>
+		</span>
+	)
+}

package/src/ui/burger-icon/index.ts

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

package/src/ui/button/button.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react'
+
+import { Slot, Slottable } from '@radix-ui/react-slot'
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { cn } from '../../lib/utils'
+
+import { Spinner } from '../spinner'
+
+const buttonVariants = cva(
+	// Текст ПЕРЕНОСИТСЯ (whitespace-normal) и балансируется по строкам (text-balance) — длинная
+	// локализованная подпись не выталкивает границы, а уходит на 2 строки. Truncate тут НЕ нужен:
+	// подпись кнопки — действие, её нельзя обрезать (в отличие от динамики в nav-item/крошках).
+	'inline-flex items-center justify-center gap-2 whitespace-normal text-center text-balance transition-[color,background-color,border-color,transform] outline-none cursor-pointer select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-all active:scale-99',
+	{
+		variants: {
+			variant: {
+				default:
+					'bg-primary text-primary-foreground hover:bg-primary/80 active:bg-blue-pressed',
+				secondary:
+					'border border-ring bg-card text-ring hover:bg-secondary hover:border-secondary active:bg-blue-pressed active:border-ice active:text-primary-foreground',
+				ghost: 'text-ring hover:bg-secondary active:bg-transparent',
+				// outline = только структура (рамка + прозрачный фон); сам цвет (текст/
+				// граница/hover) задаёт ось `color` ниже через compoundVariants.
+				outline: 'border bg-transparent',
+				// link = текст-кнопка без коробки: ни фона, ни рамки, ни паддингов/высоты
+				// (их даёт BUTTON_SIZE, а link их НЕ получает — см. LINK_SIZE ниже). Цвет —
+				// от оси `color` через compoundVariants, как у outline. rounded-sm только под
+				// кольцо фокуса. Размер задаёт лишь текстовый токен (text-button-*).
+				link: 'rounded-sm bg-transparent',
+			},
+			// Цветовая ось — ортогональна `variant`. Сейчас влияет только на `outline`,
+			// но ось общая: цветной solid/ghost можно добавить тем же приёмом (ещё
+			// записи в compoundVariants), не плодя имена вроде outlineRed/outlineGold.
+			color: {
+				primary: '',
+				danger: '',
+				warning: '',
+			},
+		},
+		// variant × color: оттенок применяется только к нужной форме.
+		compoundVariants: [
+			{
+				variant: 'outline',
+				color: 'primary',
+				className: 'text-blue border-blue hover:bg-accent',
+			},
+			{
+				variant: 'outline',
+				color: 'danger',
+				className: 'text-red border-red hover:bg-error-soft',
+			},
+			{
+				variant: 'outline',
+				color: 'warning',
+				className: 'text-gold border-gold hover:bg-warning-soft',
+			},
+			// link × color — тот же приём, что у outline: оттенок текста + затемнение на hover.
+			{
+				variant: 'link',
+				color: 'primary',
+				className:
+					'text-muted-foreground hover:text-blue active:text-blue-pressed',
+			},
+			{
+				variant: 'link',
+				color: 'danger',
+				className: 'text-red hover:text-red/80',
+			},
+			{
+				variant: 'link',
+				color: 'warning',
+				className: 'text-gold hover:text-gold/80',
+			},
+		],
+		defaultVariants: {
+			variant: 'default',
+			color: 'primary',
+		},
+	},
+)
+
+type ButtonSize = 'sm' | 'md' | 'lg'
+
+// Размер — FLUID: высота-«пол», padding и шрифт клампятся 320→1280px → контрол сам
+// плавно растёт по ширине экрана. Один size (sm/md/lg) — это «тир», а не брейкпоинт.
+const BUTTON_SIZE: Record<ButtonSize, 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',
+}
+// icon-only: квадрат (сторона клампится так же, как высота текстовой кнопки), без padding.
+const BUTTON_ICON_SIZE: Record<ButtonSize, 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',
+}
+// link: НЕ коробка — только текстовый токен (без min-h/padding/rounded), чтобы кнопка
+// вела себя как инлайн-текст и вставала в строку наравне с обычным текстом.
+const LINK_SIZE: Record<ButtonSize, string> = {
+	sm: 'text-button-s',
+	md: 'text-button-m',
+	lg: 'text-button-l',
+}
+
+export interface ButtonProps
+	// Omit нативного `color` (string у <button>) — цвет задаёт ось `color` из cva.
+	extends
+		Omit<React.ComponentProps<'button'>, 'color'>,
+		VariantProps<typeof buttonVariants> {
+	/** Размер: `sm | md | lg`. По умолчанию md. Каждый размер сам fluid-клампится. */
+	size?: ButtonSize
+	/** Рендерить как дочерний элемент (напр. ссылку <a>) вместо <button>. */
+	asChild?: boolean
+	/**
+	 * Квадратная кнопка под одну иконку (сторона = высоте текстовой кнопки того же
+	 * `size`). Иконку передавай в `children`. Обязательно задай `aria-label`.
+	 */
+	isIconOnly?: boolean
+	/** Контент перед текстом (обычно иконка). */
+	startContent?: React.ReactNode
+	/** Контент после текста (обычно иконка). */
+	endContent?: React.ReactNode
+	/** Состояние загрузки: показывает спиннер вместо startContent и блокирует кнопку. */
+	isLoading?: boolean
+}
+
+export function Button({
+	className,
+	variant,
+	color,
+	size = 'md',
+	isIconOnly = false,
+	asChild = false,
+	startContent,
+	endContent,
+	isLoading = false,
+	disabled,
+	children,
+	...props
+}: ButtonProps) {
+	const Comp = asChild ? Slot : 'button'
+	// link — инлайн-текст: берёт только текстовый токен (LINK_SIZE), без коробки.
+	const isLink = variant === 'link'
+	const sizeClasses = isLink
+		? LINK_SIZE[size]
+		: (isIconOnly ? BUTTON_ICON_SIZE : BUTTON_SIZE)[size]
+	return (
+		<Comp
+			className={cn(
+				buttonVariants({ variant, color }),
+				sizeClasses,
+				// Крупный gap — только у текстовой кнопки-коробки; у icon-only и link его нет
+				// (link ведёт себя как текст: иконка рядом с базовым gap-2).
+				!isIconOnly && !isLink && 'gap-3.75',
+				className,
+			)}
+			disabled={disabled || isLoading}
+			aria-busy={isLoading || undefined}
+			{...props}
+		>
+			{/* start/endContent — только для текстовой кнопки; у icon-only единственный слот — children. */}
+			{!isIconOnly && startContent}
+			{/* Slottable указывает Slot, какой ребёнок — «настоящий» (для asChild),
+			    чтобы start/endContent оставались по краям и не ломали Slot.
+			    У icon-only во время загрузки спиннер ЗАМЕНЯЕТ иконку, а не добавляется рядом. */}
+			{isIconOnly && isLoading ? (
+				<Spinner className='size-[1.25em]' />
+			) : (
+				<Slottable>{children}</Slottable>
+			)}
+			{/* Лоадер всегда справа — заменяет endContent на время загрузки. */}
+			{!isIconOnly &&
+				(isLoading ? <Spinner className='size-[1.25em]' /> : endContent)}
+		</Comp>
+	)
+}
+
+export { buttonVariants }

package/src/ui/button/index.ts

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

package/src/ui/card/card.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react'
+
+import { Slot } from '@radix-ui/react-slot'
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { cn } from '../../lib/utils'
+
+// Card — контентный контейнер («коробка»): поверхность, скругление, рамка,
+// внутренние отступы. Поведения нет → без Radix, это просто стилизованные div-ы.
+// - tone — цветовой акцент под статусные карточки дизайна (success/brand/warning);
+// - interactive — hover/курсор/фокус для кликабельных строк-карточек.
+const cardVariants = cva(
+	'flex flex-col gap-5 rounded-lg p-5 text-card-foreground transition-colors',
+	{
+		variants: {
+			tone: {
+				default: 'bg-card',
+				success: 'border border-success bg-success-soft',
+				warning: 'border border-warning bg-warning-soft',
+				error: 'border border-error bg-error-soft',
+				brand: 'border-transparent bg-brand-gradient text-primary-foreground',
+			},
+			// Кликабельная карточка: плавный transition (цвет рамки + подъём + scale),
+			// подсветка рамки и лёгкий «подъём» с мягкой тенью на hover, кольцо фокуса,
+			// лёгкое нажатие. transition тут (а не только базовый transition-colors) —
+			// чтобы анимировались и hover:-translate-y, и active:scale-99.
+			interactive: {
+				true: 'cursor-pointer outline-none transition duration-200 hover:border-ring hover:-translate-y-0.5 focus-visible:ring-2 active:translate-y-0 active:scale-[0.99] focus-visible:ring-ring',
+				false: '',
+			},
+		},
+		defaultVariants: {
+			tone: 'default',
+			interactive: false,
+		},
+	},
+)
+
+export interface CardProps
+	extends React.ComponentProps<'div'>, VariantProps<typeof cardVariants> {
+	/** Рендерить как дочерний элемент (напр. <a>/<Link>) — для кликабельных карточек. */
+	asChild?: boolean
+}
+
+export function Card({
+	className,
+	tone,
+	interactive,
+	asChild = false,
+	...props
+}: CardProps) {
+	const Comp = asChild ? Slot : 'div'
+	return (
+		<Comp
+			className={cn(cardVariants({ tone, interactive }), className)}
+			{...props}
+		/>
+	)
+}
+
+// Шапка: заголовок + описание. gap-1.5 — как в хедерах Modal/Drawer.
+export function CardHeader({
+	className,
+	...props
+}: React.ComponentProps<'div'>) {
+	return <div className={cn('flex flex-col gap-1.5', className)} {...props} />
+}
+
+export function CardTitle({ className, ...props }: React.ComponentProps<'h4'>) {
+	return <h4 className={cn('text-h4 text-foreground', className)} {...props} />
+}
+
+export function CardDescription({
+	className,
+	...props
+}: React.ComponentProps<'p'>) {
+	return (
+		<p
+			className={cn('text-body-m text-muted-foreground', className)}
+			{...props}
+		/>
+	)
+}
+
+// Основное содержимое — flex-1, чтобы при фиксированной высоте раздвигать
+// header/footer к краям. На карточках без высоты ведёт себя как обычный блок.
+export function CardContent({
+	className,
+	...props
+}: React.ComponentProps<'div'>) {
+	return <div className={cn('flex flex-1 flex-col', className)} {...props} />
+}
+
+// Подвал — зона действий (кнопки).
+export function CardFooter({
+	className,
+	...props
+}: React.ComponentProps<'div'>) {
+	return <div className={cn('flex flex-col gap-2', className)} {...props} />
+}

package/src/ui/card/index.ts

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

package/src/ui/confirm/confirm-dialog-host.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import * as React from 'react'
+
+import { Button } from '../button'
+import {
+	Modal,
+	ModalContent,
+	ModalDescription,
+	ModalFooter,
+	ModalHeader,
+	ModalTitle,
+} from '../modal'
+import { useKitT } from '../../i18n'
+import { type ConfirmOptions, registerConfirmHandler } from '../../utils/confirm'
+import { Icon } from '../Icon'
+
+interface PendingConfirm {
+	options: ConfirmOptions
+	resolve: (ok: boolean) => void
+}
+
+// Хост глобальных подтверждений: рендерится один раз в Providers и показывает
+// кит-модалку на каждый вызов confirmDialog(...) (см. utils/confirm.ts). «Да» →
+// резолв true; отмена/Esc/клик по оверлею → false. Дефолтные подписи кнопок —
+// из словаря ui.confirm; danger — красная кнопка подтверждения.
+export function ConfirmDialogHost() {
+	const t = useKitT('ui.confirm')
+	const [pending, setPending] = React.useState<PendingConfirm | null>(null)
+
+	React.useEffect(
+		() =>
+			registerConfirmHandler(
+				options =>
+					new Promise<boolean>(resolve => {
+						setPending({ options, resolve })
+					}),
+			),
+		[],
+	)
+
+	const settle = (ok: boolean) => {
+		pending?.resolve(ok)
+		setPending(null)
+	}
+
+	const options = pending?.options
+
+	// Иконка кнопки подтверждения: явный null — без иконки; не задано — дефолтная стрелка.
+	const confirmIcon =
+		options?.confirmIcon === null
+			? null
+			: (options?.confirmIcon ?? 'arrow_right')
+
+	return (
+		<Modal open={!!pending} onOpenChange={next => !next && settle(false)}>
+			<ModalContent className='gap-fl-30/50'>
+				<ModalHeader className='gap-fl-14/20'>
+					<ModalTitle>{options?.title}</ModalTitle>
+					{options?.description ? (
+						<ModalDescription>{options.description}</ModalDescription>
+					) : null}
+				</ModalHeader>
+				<ModalFooter>
+					{options?.cancelLabel && (
+						<Button
+							variant='outline'
+							className='w-full'
+							onClick={() => settle(false)}
+						>
+							{options?.cancelLabel ?? t('cancel')}
+						</Button>
+					)}
+					<Button
+						variant={options?.danger ? 'outline' : 'default'}
+						color={options?.danger ? 'danger' : 'primary'}
+						onClick={() => settle(true)}
+						className='w-full'
+						endContent={
+							confirmIcon ? <Icon type={confirmIcon} size={18} /> : undefined
+						}
+					>
+						{options?.confirmLabel ?? t('confirm')}
+					</Button>
+				</ModalFooter>
+			</ModalContent>
+		</Modal>
+	)
+}

package/src/ui/confirm/index.ts

@@ -0,0 +1 @@
+export * from './confirm-dialog-host'