hallo-kit 0.3.0 → 0.3.1

package/src/ui/tabs/tabs.tsx

@@ -1,190 +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}
-		/>
-	)
-}
+'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/utils/copy-to-clipboard.ts

@@ -1,12 +1,12 @@
-/**
- * Копирует текст без необработанного Promise rejection, если браузер запретил clipboard.
- * Возвращаем результат, чтобы вызывающий UI при необходимости мог показать уведомление.
- */
-export async function copyToClipboard(value: string): Promise<boolean> {
-	try {
-		await navigator.clipboard.writeText(value)
-		return true
-	} catch {
-		return false
-	}
-}
+/**
+ * Копирует текст без необработанного Promise rejection, если браузер запретил clipboard.
+ * Возвращаем результат, чтобы вызывающий UI при необходимости мог показать уведомление.
+ */
+export async function copyToClipboard(value: string): Promise<boolean> {
+	try {
+		await navigator.clipboard.writeText(value)
+		return true
+	} catch {
+		return false
+	}
+}