hallo-kit 0.3.0

package/src/ui/flag/flag.data.ts

@@ -0,0 +1,240 @@
+// AUTO-GENERATED из public/flags. Карта ISO 3166-1 alpha-2 → слуг файла флага.
+// Источник — пользовательский набор из 260 SVG (круглые флаги). Не редактировать вручную.
+
+export const FLAG_BY_ALPHA2 = {
+	ad: 'andorra',
+	ae: 'united-arab-emirates',
+	af: 'afghanistan',
+	ag: 'antigua-and-barbuda',
+	ai: 'anguilla',
+	al: 'albania',
+	am: 'armenia',
+	ao: 'angola',
+	ar: 'argentina',
+	as: 'american-samoa',
+	at: 'austria',
+	au: 'australia',
+	aw: 'aruba',
+	ax: 'aland-islands',
+	az: 'azerbaijan',
+	ba: 'bosnia-and-herzegovina',
+	bb: 'barbados',
+	bd: 'bangladesh',
+	be: 'belgium',
+	bf: 'burkina-faso',
+	bg: 'bulgaria',
+	bh: 'bahrain',
+	bi: 'burundi',
+	bj: 'benin',
+	bl: 'st-barts',
+	bm: 'bermuda',
+	bn: 'brunei',
+	bo: 'bolivia',
+	bq: 'bonaire',
+	br: 'brazil',
+	bs: 'bahamas',
+	bt: 'bhutan',
+	bw: 'botswana',
+	by: 'belarus',
+	bz: 'belize',
+	ca: 'canada',
+	cc: 'cocos-island',
+	cd: 'democratic-republic-of-congo',
+	cf: 'central-african-republic',
+	cg: 'republic-of-the-congo',
+	ch: 'switzerland',
+	ci: 'ivory-coast',
+	ck: 'cook-islands',
+	cl: 'chile',
+	cm: 'cameroon',
+	cn: 'china',
+	co: 'colombia',
+	cr: 'costa-rica',
+	cu: 'cuba',
+	cv: 'cape-verde',
+	cw: 'curacao',
+	cy: 'cyprus',
+	cz: 'czech-republic',
+	de: 'germany',
+	dj: 'djibouti',
+	dk: 'denmark',
+	dm: 'dominica',
+	do: 'dominican-republic',
+	dz: 'algeria',
+	ec: 'ecuador',
+	ee: 'estonia',
+	eg: 'egypt',
+	eh: 'sahrawi-arab-democratic-republic',
+	er: 'eritrea',
+	es: 'spain',
+	et: 'ethiopia',
+	eu: 'european-union',
+	fi: 'finland',
+	fj: 'fiji',
+	fk: 'falkland-islands',
+	fm: 'micronesia',
+	fo: 'faroe-islands',
+	fr: 'france',
+	ga: 'gabon',
+	gb: 'united-kingdom',
+	gd: 'grenada',
+	ge: 'georgia',
+	gg: 'guernsey',
+	gh: 'ghana',
+	gi: 'gibraltar',
+	gl: 'greenland',
+	gm: 'gambia',
+	gn: 'guinea',
+	gq: 'equatorial-guinea',
+	gr: 'greece',
+	gt: 'guatemala',
+	gu: 'guam',
+	gw: 'guinea-bissau',
+	gy: 'guyana',
+	hk: 'hong-kong',
+	hn: 'honduras',
+	hr: 'croatia',
+	ht: 'haiti',
+	hu: 'hungary',
+	id: 'indonesia',
+	ie: 'ireland',
+	il: 'israel',
+	im: 'isle-of-man',
+	in: 'india',
+	io: 'british-indian-ocean-territory',
+	iq: 'iraq',
+	ir: 'iran',
+	is: 'iceland',
+	it: 'italy',
+	je: 'jersey',
+	jm: 'jamaica',
+	jo: 'jordan',
+	jp: 'japan',
+	ke: 'kenya',
+	kg: 'kyrgyzstan',
+	kh: 'cambodia',
+	ki: 'kiribati',
+	km: 'comoros',
+	kp: 'north-korea',
+	kr: 'south-korea',
+	kw: 'kuwait',
+	ky: 'cayman-islands',
+	kz: 'kazakhstan',
+	la: 'laos',
+	lb: 'lebanon',
+	lc: 'st-lucia',
+	li: 'liechtenstein',
+	lk: 'sri-lanka',
+	lr: 'liberia',
+	ls: 'lesotho',
+	lt: 'lithuania',
+	lu: 'luxembourg',
+	lv: 'latvia',
+	ly: 'libya',
+	ma: 'morocco',
+	mc: 'monaco',
+	md: 'moldova',
+	me: 'montenegro',
+	mg: 'madagascar',
+	mh: 'marshall-island',
+	mk: 'republic-of-macedonia',
+	ml: 'mali',
+	mm: 'myanmar',
+	mn: 'mongolia',
+	mo: 'macao',
+	mp: 'northern-marianas-islands',
+	mq: 'martinique',
+	mr: 'mauritania',
+	ms: 'montserrat',
+	mt: 'malta',
+	mu: 'mauritius',
+	mv: 'maldives',
+	mw: 'malawi',
+	mx: 'mexico',
+	my: 'malaysia',
+	mz: 'mozambique',
+	na: 'namibia',
+	ne: 'niger',
+	nf: 'norfolk-island',
+	ng: 'nigeria',
+	ni: 'nicaragua',
+	nl: 'netherlands',
+	no: 'norway',
+	np: 'nepal',
+	nr: 'nauru',
+	nu: 'niue',
+	nz: 'new-zealand',
+	om: 'oman',
+	pa: 'panama',
+	pe: 'peru',
+	pf: 'french-polynesia',
+	pg: 'papua-new-guinea',
+	ph: 'philippines',
+	pk: 'pakistan',
+	pl: 'poland',
+	pn: 'pitcairn-islands',
+	pr: 'puerto-rico',
+	ps: 'palestine',
+	pt: 'portugal',
+	pw: 'palau',
+	py: 'paraguay',
+	qa: 'qatar',
+	ro: 'romania',
+	rs: 'serbia',
+	ru: 'russia',
+	rw: 'rwanda',
+	sa: 'saudi-arabia',
+	sb: 'solomon-islands',
+	sc: 'seychelles',
+	sd: 'sudan',
+	se: 'sweden',
+	sg: 'singapore',
+	si: 'slovenia',
+	sk: 'slovakia',
+	sl: 'sierra-leone',
+	sm: 'san-marino',
+	sn: 'senegal',
+	so: 'somalia',
+	sr: 'suriname',
+	ss: 'south-sudan',
+	st: 'sao-tome-and-prince',
+	sv: 'el-salvador',
+	sx: 'sint-maarten',
+	sy: 'syria',
+	sz: 'swaziland',
+	tc: 'turks-and-caicos',
+	td: 'chad',
+	tg: 'togo',
+	th: 'thailand',
+	tj: 'tajikistan',
+	tk: 'tokelau',
+	tl: 'east-timor',
+	tm: 'turkmenistan',
+	tn: 'tunisia',
+	to: 'tonga',
+	tr: 'turkey',
+	tt: 'trinidad-and-tobago',
+	tv: 'tuvalu',
+	tw: 'taiwan',
+	tz: 'tanzania',
+	ua: 'ukraine',
+	ug: 'uganda',
+	us: 'united-states',
+	uy: 'uruguay',
+	uz: 'uzbekistan',
+	va: 'vatican-city',
+	vc: 'st-vincent-and-the-grenadines',
+	ve: 'venezuela',
+	vg: 'british-virgin-islands',
+	vi: 'virgin-islands',
+	vn: 'vietnam',
+	vu: 'vanuatu',
+	ws: 'samoa',
+	xk: 'kosovo',
+	ye: 'yemen',
+	za: 'south-africa',
+	zm: 'zambia',
+	zw: 'zimbabwe',
+} as const
+
+export type Alpha2Code = keyof typeof FLAG_BY_ALPHA2

package/src/ui/flag/flag.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+
+import { cn } from '../../lib/utils'
+
+import { FLAG_BY_ALPHA2, type Alpha2Code } from './flag.data'
+
+export interface FlagProps
+	extends Omit<React.ComponentProps<'img'>, 'src' | 'alt'> {
+	/** ISO 3166-1 alpha-2 код страны (регистр любой): 'ru', 'GB', 'us'… */
+	code: Alpha2Code | (string & {})
+	/** Сторона квадрата: число → px (по умолчанию 20); строка → CSS-длина ('1.25em'). */
+	size?: number | string
+	/** Круглая обрезка. По умолчанию true (исходные SVG уже круглые). */
+	rounded?: boolean
+	/** Подпись для скринридера. Без неё флаг считается декоративным (aria-hidden). */
+	alt?: string
+}
+
+// Flag — флаг страны по ISO 3166-1 alpha-2. Тянет статичный круглый SVG из
+// public/flags по карте flag.data (alpha2 → слуг). Неизвестный код → null.
+// Через <img> (а не Icon): флаги цветные и их сотни — грузим по требованию, без бандла.
+export function Flag({
+	code,
+	size = 20,
+	rounded = true,
+	alt,
+	className,
+	style,
+	...props
+}: FlagProps) {
+	const slug = FLAG_BY_ALPHA2[code.toLowerCase() as Alpha2Code]
+	if (!slug) return null
+
+	const dim = typeof size === 'number' ? `${size}px` : size
+
+	return (
+		// eslint-disable-next-line @next/next/no-img-element -- статичный SVG из public, next/image тут лишний
+		<img
+			src={`/flags/${slug}.svg`}
+			alt={alt ?? ''}
+			aria-hidden={alt ? undefined : true}
+			// lazy + async: в длинных списках флаги вне вьюпорта не грузятся, пока не доскроллишь
+			loading='lazy'
+			decoding='async'
+			// width/height-атрибуты — только для px (целые); для em размер задаётся style.
+			width={typeof size === 'number' ? size : undefined}
+			height={typeof size === 'number' ? size : undefined}
+			className={cn(
+				'inline-block shrink-0 object-cover',
+				rounded && 'rounded-full',
+				className,
+			)}
+			style={{ width: dim, height: dim, ...style }}
+			{...props}
+		/>
+	)
+}

package/src/ui/flag/index.ts

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

package/src/ui/image/image.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { useState } from 'react'
+
+import Image, { type ImageProps } from 'next/image'
+
+import { Skeleton } from '../skeleton'
+import { cn } from '../../lib/utils'
+
+export interface ImageWithSkeletonProps extends ImageProps {
+	/** Класс на обёртку (размер/скругление). Обёртка — `relative`, чтобы лёг скелетон. */
+	wrapperClassName?: string
+}
+
+// Картинка со скелетоном на время загрузки — важно на слабом соединении.
+//
+// Место под картинку резервирует САМА обёртка через `aspect-ratio` (из числовых
+// width/height) — это чистый CSS, срабатывает мгновенно, до загрузки и до JS. Без
+// этого бокс был бы 0 и «прыгал» в финальный размер, когда картинка приедет.
+//
+// Картинка и скелетон лежат `absolute` поверх обёртки → НЕ участвуют в расчёте её
+// размера (иначе `size-full` картинки зависел бы от родителя, а родитель от неё —
+// цикл, схлопывающийся в 0). Скелетон снимается по `onLoad`; `onError` тоже его
+// снимает (иначе висел бы вечно на битой ссылке), а ref-проверка `complete`
+// закрывает гонку с кешем (картинка долетела раньше, чем навесился onLoad).
+export function ImageWithSkeleton({
+	wrapperClassName,
+	className,
+	onLoad,
+	onError,
+	...props
+}: ImageWithSkeletonProps) {
+	const [loaded, setLoaded] = useState(false)
+
+	const { width, height } = props
+	const aspectRatio =
+		typeof width === 'number' && typeof height === 'number' && height > 0
+			? width / height
+			: undefined
+
+	return (
+		<span
+			style={aspectRatio ? { aspectRatio } : undefined}
+			className={cn('relative block overflow-hidden', wrapperClassName)}
+		>
+			{!loaded && (
+				<Skeleton className='absolute inset-0 z-10 size-full rounded-none' />
+			)}
+			{/* eslint-disable-next-line jsx-a11y/alt-text -- alt приходит через ...props */}
+			<Image
+				{...props}
+				className={cn('inset-0 size-full', className)}
+				ref={node => {
+					if (node?.complete) setLoaded(true)
+				}}
+				onLoad={e => {
+					setLoaded(true)
+					onLoad?.(e)
+				}}
+				onError={e => {
+					setLoaded(true)
+					onError?.(e)
+				}}
+			/>
+		</span>
+	)
+}

package/src/ui/image/index.ts

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

package/src/ui/input/amount-input.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import {
+	type Control,
+	type FieldPath,
+	type FieldValues,
+	useController,
+} from 'react-hook-form'
+
+import { useKitLocale } from '../../i18n'
+
+import { Input, type InputProps } from './input'
+
+// Поле суммы для react-hook-form. Инкапсулирует связку с формой (useController):
+// в ЗНАЧЕНИИ формы — только цифры строкой ('150000'), в ПОЛЕ — число с разрядами
+// локали ('150 000') и символ валюты слева. Ошибка поля подтягивается сама из
+// fieldState. register такое не умеет (DOM-значение ≠ форм-значение), поэтому
+// контролируемая обёртка живёт здесь, а формы пишут просто:
+//   <AmountInput control={form.control} name='amount' currency='₽' ... />
+export function AmountInput<T extends FieldValues>({
+	control,
+	name,
+	currency,
+	...props
+}: Omit<InputProps, 'value' | 'onChange' | 'error' | 'name' | 'ref'> & {
+	control: Control<T>
+	name: FieldPath<T>
+	/** Символ валюты слева от значения (показывается, когда поле непустое). */
+	currency?: string
+}) {
+	const locale = useKitLocale()
+	const {
+		field: { ref, name: fieldName, onBlur, onChange, value },
+		fieldState,
+	} = useController({ control, name })
+	const digits = String(value ?? '')
+
+	return (
+		<Input
+			{...props}
+			name={fieldName}
+			ref={ref}
+			onBlur={onBlur}
+			inputMode='numeric'
+			value={digits ? Number(digits).toLocaleString(locale) : ''}
+			onChange={event => onChange(event.target.value.replace(/\D/g, ''))}
+			error={fieldState.error?.message}
+			startContent={
+				currency && digits ? (
+					<span className='text-foreground'>{currency}</span>
+				) : undefined
+			}
+		/>
+	)
+}

package/src/ui/input/index.ts

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