hallo-kit 0.3.0

package/src/ui/switch/switch.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+
+import { cn } from '../../lib/utils'
+
+// Switch (тумблер вкл/выкл) на Radix: роль switch, клавиатура (Space/Enter), aria,
+// controlled/uncontrolled — из примитива. Размер — через responsiveSize (CSS-адаптив
+// без JS-флэша). on → bg-primary, off → bg-secondary; бегунок едет вправо на checked.
+const SWITCH_BASE =
+	'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-transparent outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-secondary'
+// FLUID, соразмерно ThemeSwitch: высота трека = высоте ThemeSwitch (28/32→36/40→44/48),
+// воздух border-4, ширина ~1.8:1. Всё клампится 320→1280px.
+const SWITCH_TRACK: Record<'sm' | 'md' | 'lg', string> = {
+	sm: 'h-fl-28/32 w-fl-48/56 border-4',
+	md: 'h-fl-36/40 w-fl-64/72 border-4',
+	lg: 'h-fl-44/48 w-fl-80/88 border-4',
+}
+
+const THUMB_BASE =
+	'pointer-events-none block rounded-full bg-cloud shadow-sm transition-transform data-[state=unchecked]:translate-x-0'
+// Бегунок = высота_трека − 2·border (= слот ThemeSwitch); travel = ширина − высота. Всё fluid.
+const SWITCH_THUMB: Record<'sm' | 'md' | 'lg', string> = {
+	sm: 'size-fl-20/24 data-[state=checked]:translate-x-fl-20/24',
+	md: 'size-fl-28/32 data-[state=checked]:translate-x-fl-28/32',
+	lg: 'size-fl-36/40 data-[state=checked]:translate-x-fl-36/40',
+}
+
+export interface SwitchProps
+	extends React.ComponentProps<typeof SwitchPrimitive.Root> {
+	/** Размер: `sm | md | lg`. По умолчанию md. */
+	size?: 'sm' | 'md' | 'lg'
+}
+
+export function Switch({ className, size, ...props }: SwitchProps) {
+	return (
+		<SwitchPrimitive.Root
+			className={cn(SWITCH_BASE, SWITCH_TRACK[size ?? 'md'], className)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				className={cn(THUMB_BASE, SWITCH_THUMB[size ?? 'md'])}
+			/>
+		</SwitchPrimitive.Root>
+	)
+}

package/src/ui/tabs/index.ts

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

package/src/ui/tabs/tabs.tsx

@@ -0,0 +1,190 @@
+'use client'
+
+import * as React from 'react'
+
+import { Slottable } from '@radix-ui/react-slot'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+
+import { cn } from '../../lib/utils'
+
+// Размер триггеров: по умолчанию на <TabsList>, раздаётся всем <TabsTrigger> через
+// контекст. Отдельный таб может переопределить своим `size`. Каждый размер — fluid.
+type TabsSize = 'sm' | 'md' | 'lg'
+const TabsSizeContext = React.createContext<TabsSize>('md')
+
+// Скругление скользящей рамки по размеру (совпадает с rounded триггеров в TABS_SIZE).
+const INDICATOR_ROUNDED: Record<TabsSize, string> = {
+	sm: 'rounded-sm',
+	md: 'rounded-md',
+	lg: 'rounded-lg',
+}
+
+// Поведение, клавиатура (стрелки/Home/End), aria и связь триггер↔панель — всё на Radix.
+export function Tabs({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+	return (
+		<TabsPrimitive.Root
+			className={cn('flex flex-col gap-fl-16/20', className)}
+			{...props}
+		/>
+	)
+}
+
+export interface TabsListProps extends React.ComponentProps<
+	typeof TabsPrimitive.List
+> {
+	/** Размер триггеров: `sm | md | lg`. По умолчанию `md`. */
+	size?: TabsSize
+	/** Растянуть на всю ширину: список `w-full`, табы равномерно делят её (`flex-1`). */
+	fullWidth?: boolean
+}
+
+type Rect = { left: number; top: number; width: number; height: number }
+
+export function TabsList({
+	className,
+	size = 'md',
+	fullWidth = false,
+	children,
+	...props
+}: TabsListProps) {
+	const listRef = React.useRef<HTMLDivElement>(null)
+	const [rect, setRect] = React.useState<Rect | null>(null)
+
+	// Рамка активного таба «переезжает»: замеряем его позицию (offset* относительно списка)
+	// на смену активного (MutationObserver по data-state) и на ресайз (ResizeObserver —
+	// fluid-размеры/перенос). Первый замер — через rAF, чтобы не дёргать setState синхронно
+	// в эффекте. Сам стиль табов не меняется — рамку лишь выносим в отдельный слой, чтобы
+	// она скользила, а не мгновенно перескакивала.
+	React.useEffect(() => {
+		const list = listRef.current
+		if (!list) return
+
+		const measure = () => {
+			const active = list.querySelector<HTMLElement>(
+				'[role="tab"][data-state="active"]',
+			)
+			if (!active) return
+			setRect({
+				left: active.offsetLeft,
+				top: active.offsetTop,
+				width: active.offsetWidth,
+				height: active.offsetHeight,
+			})
+		}
+
+		const raf = requestAnimationFrame(measure)
+		const mo = new MutationObserver(measure)
+		mo.observe(list, {
+			attributes: true,
+			subtree: true,
+			attributeFilter: ['data-state'],
+		})
+		const ro = new ResizeObserver(measure)
+		ro.observe(list)
+
+		return () => {
+			cancelAnimationFrame(raf)
+			mo.disconnect()
+			ro.disconnect()
+		}
+	}, [])
+
+	return (
+		<TabsSizeContext.Provider value={size}>
+			<TabsPrimitive.List
+				ref={listRef}
+				className={cn(
+					'relative inline-flex items-center gap-2',
+					// w-full + равные доли: каждый таб (прямой потомок) тянется поровну
+					fullWidth && 'flex w-full *:flex-1',
+					className,
+				)}
+				{...props}
+			>
+				{/* Рамка активного таба: только border поверх (центр прозрачный — текст и фон
+				    таба видны сквозь). bg/подсветку по-прежнему даёт сам таб.
+
+				    Переезда нет намеренно: анимация left/top/width/height на коротком
+				    переключении из двух вкладок читается как дёрганье, особенно на телефоне.
+				    Рамка просто оказывается на новом табе. */}
+				{rect && (
+					<span
+						aria-hidden
+						className={cn(
+							'pointer-events-none absolute z-10 border-2 border-primary bg-transparent',
+							INDICATOR_ROUNDED[size],
+						)}
+						style={{
+							left: rect.left,
+							top: rect.top,
+							width: rect.width,
+							height: rect.height,
+						}}
+					/>
+				)}
+				{children}
+			</TabsPrimitive.List>
+		</TabsSizeContext.Provider>
+	)
+}
+
+// border-transparent у ВСЕХ (высота не прыгает) — border-primary активного теперь рисует
+// скользящая рамка из TabsList, а не сам триггер. Размер — FLUID (клампится 320→1280px).
+const TABS_TRIGGER_BASE =
+	'inline-flex items-center justify-center gap-2 whitespace-nowrap border-2 border-transparent bg-accent text-muted-foreground transition-[color,background-color] cursor-pointer select-none outline-none hover:bg-accent 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 data-[state=active]:bg-secondary data-[state=active]:text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0'
+const TABS_SIZE: Record<TabsSize, string> = {
+	sm: 'min-h-fl-32/36 px-fl-14/16 py-fl-6/8 text-button-s rounded-sm',
+	md: 'min-h-fl-40/44 px-fl-18/20 py-fl-10/12 text-button-m rounded-md',
+	lg: 'min-h-fl-48/52 px-fl-22/24 py-fl-14/16 text-button-l rounded-lg',
+}
+
+export interface TabsTriggerProps extends React.ComponentProps<
+	typeof TabsPrimitive.Trigger
+> {
+	/** Размер: `sm | md | lg`. Иначе берётся из TabsList. */
+	size?: TabsSize
+	/** Иконка/картинка перед текстом таба. */
+	startContent?: React.ReactNode
+}
+
+export function TabsTrigger({
+	className,
+	size,
+	startContent,
+	children,
+	...props
+}: TabsTriggerProps) {
+	// Явный size на табе важнее размера из <TabsList>; деструктуризация заодно не
+	// даёт `size` утечь на нативный <button> как невалидный атрибут.
+	const contextSize = React.useContext(TabsSizeContext)
+	const resolvedSize = size ?? contextSize
+	return (
+		<TabsPrimitive.Trigger
+			className={cn(TABS_TRIGGER_BASE, TABS_SIZE[resolvedSize], className)}
+			{...props}
+		>
+			{startContent}
+			{/* Slottable указывает Slot (asChild), какой ребёнок «настоящий», чтобы
+			    startContent не ломал слот и оставался слева (как в Badge). */}
+			<Slottable>{children}</Slottable>
+		</TabsPrimitive.Trigger>
+	)
+}
+
+export function TabsContent({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+	return (
+		<TabsPrimitive.Content
+			className={cn(
+				'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}

package/src/ui/textarea/index.ts

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

package/src/ui/textarea/textarea.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import * as React from 'react'
+
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { cn } from '../../lib/utils'
+
+// Многострочное поле по образцу Input: стили несёт ОБЁРТКА (заливка/рамка, скругление,
+// кольцо фокуса через focus-within), а сам <textarea> — прозрачный и без рамок. Слоты
+// start/endContent живут внутри «коробки» и попадают в общую подсветку фокуса. В отличие
+// от Input обёртка выравнивает по НИЗУ (items-end) — при росте поля слоты остаются у
+// последней строки.
+//
+// autoResize: поле само растёт под контент (до maxHeight, дальше внутренний скролл). Форм-
+// агностичен — работает и с react-hook-form `{...register('x')}` (неконтролируемо, ресайз
+// по вводу), и контролируемо через `value` (ресайз по изменению value, ловит программный
+// reset формы).
+const textareaVariants = cva(
+	'flex w-full items-end gap-2.5 text-foreground transition-shadow outline-none focus-within:ring-2 focus-within:ring-ring has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50',
+	{
+		variants: {
+			variant: {
+				filled: 'bg-secondary',
+				bordered: 'border border-disabled bg-card',
+			},
+		},
+		defaultVariants: {
+			variant: 'filled',
+		},
+	},
+)
+
+// Размер — FLUID (padding/шрифт/скругление клампятся 320→1280px), один size = «тир».
+const TEXTAREA_SIZE: Record<'sm' | 'md' | 'lg', string> = {
+	sm: 'px-fl-12/14 py-fl-8/10 text-body-s rounded-md',
+	md: 'px-fl-14/16 py-fl-10/12 text-body-m rounded-lg',
+	lg: 'px-fl-16/20 py-fl-12/16 text-body-l rounded-lg',
+}
+
+export interface TextareaProps
+	extends
+		Omit<React.ComponentProps<'textarea'>, 'size'>,
+		VariantProps<typeof textareaVariants> {
+	/** Размер: `sm | md | lg`. По умолчанию md. Каждый размер сам fluid-клампится. */
+	size?: 'sm' | 'md' | 'lg'
+	/** Внешний вид: `filled` (деф., заливка bg-secondary) | `bordered` (рамка на bg-card). */
+	variant?: 'filled' | 'bordered'
+	/** Класс на внешнюю обёртку (заливка/скругление). `className` идёт на сам <textarea>. */
+	containerClassName?: string
+	/** Контент перед полем (обычно иконка/кнопка) — прижат к нижней строке. */
+	startContent?: React.ReactNode
+	/** Контент после поля (обычно иконка/кнопка) — прижат к нижней строке. */
+	endContent?: React.ReactNode
+	/** Авторост высоты под контент. По умолчанию выкл. */
+	autoResize?: boolean
+	/** Потолок высоты при autoResize (px). Дальше — внутренний скролл. */
+	maxHeight?: number
+}
+
+export function Textarea({
+	ref,
+	className,
+	containerClassName,
+	size = 'md',
+	variant,
+	startContent,
+	endContent,
+	autoResize = false,
+	maxHeight,
+	rows = 1,
+	value,
+	onChange,
+	...props
+}: TextareaProps) {
+	// Внутренний ref нужен авторо́сту (читает scrollHeight, правит height); сливаем его с
+	// внешним ref (напр. от register), чтобы оба указывали на один <textarea>.
+	const innerRef = React.useRef<HTMLTextAreaElement>(null)
+	const setRefs = React.useCallback(
+		(node: HTMLTextAreaElement | null) => {
+			innerRef.current = node
+			if (typeof ref === 'function') ref(node)
+			else if (ref) ref.current = node
+		},
+		[ref],
+	)
+
+	// Сбрасываем высоту в auto (чтобы scrollHeight мерил реальный контент при удалении
+	// строк), затем тянем до контента, но не выше потолка.
+	const resize = React.useCallback(() => {
+		const el = innerRef.current
+		if (!el || !autoResize) return
+		el.style.height = 'auto'
+		el.style.height = `${
+			maxHeight ? Math.min(el.scrollHeight, maxHeight) : el.scrollHeight
+		}px`
+	}, [autoResize, maxHeight])
+
+	// Пересчёт на маунт и при изменении value (в т.ч. программный reset формы у
+	// контролируемого поля). Неконтролируемый ввод ловим в handleChange ниже.
+	React.useEffect(() => {
+		resize()
+	}, [resize, value])
+
+	const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+		onChange?.(event)
+		// Контролируемое поле ресайзит эффект по [value]; в неконтролируемом (value не
+		// задан) эффект на ввод не срабатывает — пересчитываем прямо здесь.
+		if (value === undefined) resize()
+	}
+
+	return (
+		<div
+			className={cn(
+				textareaVariants({ variant }),
+				TEXTAREA_SIZE[size],
+				containerClassName,
+			)}
+		>
+			{startContent ? (
+				<span className='inline-flex shrink-0 items-center text-muted-foreground'>
+					{startContent}
+				</span>
+			) : null}
+
+			<textarea
+				ref={setRefs}
+				rows={rows}
+				value={value}
+				onChange={handleChange}
+				// resize-none — рост ведём сами; min-w-0 — чтобы поле ужималось в flex и не
+				// выталкивало слоты; overflow-y-auto — скролл при упоре в потолок высоты.
+				className={cn(
+					'min-w-0 flex-1 resize-none border-0 bg-transparent p-0 leading-relaxed text-current outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',
+					autoResize && 'overflow-y-auto',
+					className,
+				)}
+				style={autoResize && maxHeight ? { maxHeight } : undefined}
+				{...props}
+			/>
+
+			{endContent ? (
+				<span className='inline-flex shrink-0 items-center text-muted-foreground'>
+					{endContent}
+				</span>
+			) : null}
+		</div>
+	)
+}
+
+export { textareaVariants }

package/src/ui/theme-switch/index.ts

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

package/src/ui/theme-switch/theme-switch.tsx

@@ -0,0 +1,161 @@
+'use client'
+
+import * as React from 'react'
+
+import { useTheme } from 'next-themes'
+
+import { Icon } from '../Icon'
+import { cn } from '../../lib/utils'
+
+type ThemeSwitchSize = 'sm' | 'md' | 'lg'
+
+// Геометрия по размеру — через responsiveSize (CSS-адаптив без JS-флэша). slot несёт и
+// размер, и font-size (иконка внутри — в em, масштабируется за него). travel = слот
+// (100%) + зазор между слотами; p-1 (отступ) одинаков на всех размерах.
+const TS_GAP: Record<ThemeSwitchSize, string> = {
+	sm: 'gap-2',
+	md: 'gap-2.5',
+	lg: 'gap-3',
+}
+// Слот = fluid-квадрат; высота ThemeSwitch = слот + 2·p-1 (8px) совпадает с min-h-fl
+// контролов: 20/24+8=28/32 (sm), 28/32+8=36/40 (md), 36/40+8=44/48 (lg) — как у Select.
+const TS_SLOT: Record<ThemeSwitchSize, string> = {
+	sm: 'size-fl-20/24 text-button-s',
+	md: 'size-fl-28/32 text-button-m',
+	lg: 'size-fl-36/40 text-button-l',
+}
+const TS_TRAVEL: Record<ThemeSwitchSize, string> = {
+	sm: 'translate-x-[calc(100%+0.5rem)]',
+	md: 'translate-x-[calc(100%+0.625rem)]',
+	lg: 'translate-x-[calc(100%+0.75rem)]',
+}
+
+// «Смонтировано ли» через useSyncExternalStore: сервер/гидрация → false, после
+// гидрации → true. Идиоматичнее setState-в-эффекте и не плодит каскадные ререндеры.
+const subscribeNoop = () => () => {}
+const getMountedSnapshot = () => true
+const getMountedServerSnapshot = () => false
+
+export interface ThemeSwitchProps {
+	className?: string
+	/** Размер: `sm | md | lg`. По умолчанию `md`. */
+	size?: ThemeSwitchSize
+}
+
+// Переключатель light/dark: пилюля с солнцем и луной, тёмный «бегунок» (thumb) стоит
+// под активной иконкой. Тема — через next-themes.
+export function ThemeSwitch({ className, size = 'md' }: ThemeSwitchProps) {
+	const { resolvedTheme, setTheme } = useTheme()
+
+	// next-themes знает тему только на клиенте. На сервере/при гидрации mounted=false
+	// → держим light (без hydration mismatch); после гидрации берём реальную тему.
+	const mounted = React.useSyncExternalStore(
+		subscribeNoop,
+		getMountedSnapshot,
+		getMountedServerSnapshot,
+	)
+	const isDark = mounted && resolvedTheme === 'dark'
+
+	const gap = TS_GAP[size]
+	const slot = TS_SLOT[size]
+	const travel = TS_TRAVEL[size]
+
+	// Переключение темы с круговым «раскрытием» новой из точки клика (View Transitions API).
+	// Браузер снимает старый кадр, а новая тема «разливается» кругом через clip-path — без
+	// глобальных transition (их гасит disableTransitionOnChange), значит без лагов. Фолбэк:
+	// нет VT-API или системная «меньше движения» → мгновенное переключение, как раньше.
+	const toggleTheme = (event: React.MouseEvent<HTMLButtonElement>) => {
+		const next = isDark ? 'light' : 'dark'
+		const doc = document as Document & {
+			startViewTransition?: (cb: () => void) => { ready: Promise<void> }
+		}
+		const reduced = window.matchMedia(
+			'(prefers-reduced-motion: reduce)',
+		).matches
+
+		if (!doc.startViewTransition || reduced) {
+			setTheme(next)
+			return
+		}
+
+		const x = event.clientX
+		const y = event.clientY
+		// Радиус до самого дальнего угла — чтобы круг гарантированно накрыл весь экран.
+		const endRadius = Math.hypot(
+			Math.max(x, window.innerWidth - x),
+			Math.max(y, window.innerHeight - y),
+		)
+
+		const transition = doc.startViewTransition(() => setTheme(next))
+		void transition.ready.then(() => {
+			document.documentElement.animate(
+				{
+					clipPath: [
+						`circle(0px at ${x}px ${y}px)`,
+						`circle(${endRadius}px at ${x}px ${y}px)`,
+					],
+				},
+				{
+					duration: 450,
+					easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+					pseudoElement: '::view-transition-new(root)',
+				},
+			)
+		})
+	}
+
+	const motion =
+		'transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] motion-reduce:transition-none'
+	const iconMotion =
+		'transition-[transform,color] duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] motion-reduce:transition-none'
+
+	return (
+		<button
+			type='button'
+			role='switch'
+			aria-checked={isDark}
+			aria-label='Переключить тему'
+			onClick={toggleTheme}
+			className={cn(
+				'relative inline-flex cursor-pointer items-center rounded-full bg-secondary p-1 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+				gap,
+				className,
+			)}
+		>
+			{/* «бегунок»: позиция = padding (left-1 top-1), размер = слот, проезд = слот + зазор */}
+			<span
+				aria-hidden
+				className={cn(
+					'absolute top-1 left-1 rounded-full bg-navy',
+					slot,
+					motion,
+					isDark && travel,
+				)}
+			/>
+			{/* Солнце = активно в light (на тёмном бегунке → белое). */}
+			<span
+				className={cn(
+					'relative z-10 flex items-center justify-center',
+					slot,
+					iconMotion,
+					isDark
+						? '-rotate-90 scale-75 text-muted-foreground'
+						: 'rotate-0 scale-100 text-cloud',
+				)}
+			>
+				<Icon type='sun' isCurrentColor size='1.2em' />
+			</span>
+			{/* Луна = активна в dark; неактивная просто уменьшается. */}
+			<span
+				className={cn(
+					'relative z-10 flex items-center justify-center',
+					slot,
+					iconMotion,
+					isDark ? 'scale-100 text-cloud' : 'scale-75 text-muted-foreground',
+				)}
+			>
+				<Icon type='moon' isCurrentColor size='1.2em' />
+			</span>
+		</button>
+	)
+}

package/src/ui/toast/index.ts

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