hallo-kit 0.3.0 → 0.3.1

package/src/ui/select/select.tsx

@@ -1,215 +1,215 @@
-'use client'
-
-import * as React from 'react'
-
-import * as SelectPrimitive from '@radix-ui/react-select'
-
-import { Icon } from '../Icon'
-import { cn } from '../../lib/utils'
-
-export interface SelectOption {
-	value: string
-	label: string
-	/** Контент в начале пункта (флаг/иконка/что угодно). Показывается и в списке, и в значении триггера. */
-	startContent?: React.ReactNode
-	disabled?: boolean
-}
-
-// group — чтобы шеврон в триггере доворачивался по data-state. Размер — через
-// responsiveSize (CSS-адаптив без флэша), а не cva. Иконки — в em (масштаб за font-size).
-const SELECT_TRIGGER_BASE =
-	'group inline-flex w-full cursor-pointer items-center bg-card text-foreground shadow-sm transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-disabled:pointer-events-none data-disabled:opacity-50 data-placeholder:text-muted-foreground rounded-full'
-const SELECT_TRIGGER_SIZE: Record<'sm' | 'md' | 'lg', string> = {
-	sm: 'gap-fl-10/12 min-h-fl-28/32 px-fl-10/12 py-fl-2/4 text-button-s',
-	md: 'gap-fl-14/16 min-h-fl-36/40 px-fl-14/16 py-fl-6/8 text-button-m',
-	lg: 'gap-fl-18/20 min-h-fl-44/48 px-fl-18/20 py-fl-10/12 text-button-l',
-}
-// Пункт = носитель подсветки; текст инсетит px ВНУТРИ пункта (выравнивание с триггером).
-const SELECT_ITEM_SIZE: Record<'sm' | 'md' | 'lg', string> = {
-	sm: 'rounded-sm px-fl-6/8 py-fl-6/8 text-button-s',
-	md: 'rounded-md px-fl-10/12 py-fl-8/10 text-button-m',
-	lg: 'rounded-lg px-fl-14/16 py-fl-10/12 text-button-l',
-}
-// Боковой инсет разделителя = px пункта → линия выровнена с текстом и уже подсветки.
-const SELECT_DIVIDER_INSET: Record<'sm' | 'md' | 'lg', string> = {
-	sm: 'mx-2',
-	md: 'mx-3',
-	lg: 'mx-4',
-}
-const SELECT_ROUNDED_CONTENT: Record<'sm' | 'md' | 'lg', string> = {
-	sm: 'rounded-sm',
-	md: 'rounded-md',
-	lg: 'rounded-lg',
-}
-
-export interface SelectProps {
-	options: SelectOption[]
-	/** Размер: `sm | md | lg`. По умолчанию md. Каждый размер сам fluid-клампится. */
-	size?: 'sm' | 'md' | 'lg'
-	value?: string
-	defaultValue?: string
-	onValueChange?: (value: string) => void
-	placeholder?: string
-	disabled?: boolean
-	/** Фиксированный контент в начале триггера (помимо иконки выбранного пункта): лейбл, иконка и т.п. */
-	startContent?: React.ReactNode
-	/** Класс на триггер. */
-	className?: string
-	/** Класс на выпадающую панель. */
-	contentClassName?: string
-	/**
-	 * В триггере показывать только `startContent` выбранного пункта (напр. флаг),
-	 * без текста; в списке пункты остаются с текстом. Для компактных переключателей
-	 * (язык). По умолчанию false.
-	 */
-	compactValue?: boolean
-	/**
-	 * Доступное имя контрола. Заведено явно: у компонента нет rest-спреда, а TypeScript
-	 * не проверяет лишние JSX-атрибуты с дефисом — `aria-label` на <Select> молча
-	 * компилировался и никуда не попадал, оставляя контрол без доступного имени.
-	 */
-	'aria-label'?: string
-	'aria-labelledby'?: string
-}
-
-// Флаг/иконка + подпись. Кладём ВНУТРЬ ItemText, чтобы триггер (Select.Value)
-// отрисовал ровно то же — иконку слева и текст, как в макете.
-function OptionContent({ option }: { option: SelectOption }) {
-	return (
-		// leading-normal: токены text-button-* имеют line-height:1, из-за чего нижние
-		// выносные элементы букв (g/y/р) обрезаются строчным боксом. Локально возвращаем запас.
-		<span className='flex items-center gap-2.5 leading-normal'>
-			{option.startContent ? (
-				<span className='inline-flex shrink-0 items-center'>
-					{option.startContent}
-				</span>
-			) : null}
-			{option.label}
-		</span>
-	)
-}
-
-export function Select({
-	options,
-	value,
-	defaultValue,
-	onValueChange,
-	placeholder,
-	disabled,
-	startContent,
-	size,
-	className,
-	contentClassName,
-	compactValue = false,
-	'aria-label': ariaLabel,
-	'aria-labelledby': ariaLabelledBy,
-}: SelectProps) {
-	// Только для контролируемого значения: в неконтролируемом режиме выбранный пункт
-	// знает лишь Radix, и подменять его нечем.
-	const selectedOption = value != null ? options.find((o) => o.value === value) : undefined
-
-	const triggerSize = SELECT_TRIGGER_SIZE[size ?? 'md']
-	const itemSize = SELECT_ITEM_SIZE[size ?? 'md']
-	const dividerInset = SELECT_DIVIDER_INSET[size ?? 'md']
-	const roundedContent = SELECT_ROUNDED_CONTENT[size ?? 'md']
-
-	return (
-		<SelectPrimitive.Root
-			value={value}
-			defaultValue={defaultValue}
-			onValueChange={onValueChange}
-			disabled={disabled}
-		>
-			<SelectPrimitive.Trigger
-				aria-label={ariaLabel}
-				aria-labelledby={ariaLabelledBy}
-				className={cn(SELECT_TRIGGER_BASE, triggerSize, className)}
-			>
-				{startContent ? (
-					<span className='flex shrink-0 items-center text-muted-foreground'>
-						{startContent}
-					</span>
-				) : null}
-				{/* Значение рендерим САМИ, а не отдаём на откуп SelectPrimitive.Value.
-				    Radix берёт текст из смонтированных Item'ов, а они живут в портале и
-				    на сервере не рендерятся — из-за чего триггер приезжает ПУСТЫМ и
-				    остаётся таким до гидрации. На медленной сети это сотни миллисекунд
-				    пустого поля там, где уже должно стоять выбранное значение.
-				    Когда значение контролируемое, лейбл известен сразу — печатаем его. */}
-				<SelectPrimitive.Value placeholder={placeholder}>
-					{selectedOption ? (
-						compactValue ? (
-							selectedOption.startContent
-						) : (
-							<OptionContent option={selectedOption} />
-						)
-					) : undefined}
-				</SelectPrimitive.Value>
-				<SelectPrimitive.Icon asChild>
-					<span className='ml-auto flex shrink-0 items-center text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180'>
-						<Icon type='chevron_down' isCurrentColor size='0.72em' />
-					</span>
-				</SelectPrimitive.Icon>
-			</SelectPrimitive.Trigger>
-
-			<SelectPrimitive.Portal>
-				<SelectPrimitive.Content
-					position='popper'
-					sideOffset={8}
-					className={cn(
-						'z-50 max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95',
-						contentClassName,
-						roundedContent,
-					)}
-				>
-					<SelectPrimitive.Viewport className='flex flex-col'>
-						{options.map((option, index) => (
-							<React.Fragment key={option.value}>
-								<SelectPrimitive.Item
-									value={option.value}
-									disabled={option.disabled}
-									textValue={option.label}
-									className={cn(
-										'flex w-full cursor-pointer items-center gap-2.5 text-foreground outline-none select-none data-highlighted:bg-secondary data-disabled:pointer-events-none data-disabled:opacity-50',
-										itemSize,
-									)}
-								>
-									<SelectPrimitive.ItemText>
-										{compactValue && option.startContent ? (
-											<span className='inline-flex shrink-0 items-center'>
-												{option.startContent}
-											</span>
-										) : (
-											<OptionContent option={option} />
-										)}
-									</SelectPrimitive.ItemText>
-									{/* compactValue: название живёт ВНЕ ItemText → видно в списке, но НЕ в триггере.
-									    leading-normal — иначе truncate (overflow-hidden) при line-height:1 режет
-									    нижние выносы букв («g» в English). */}
-									{compactValue ? (
-										<span className='truncate leading-normal'>
-											{option.label}
-										</span>
-									) : null}
-									{/* галочка прижата вправо; рендерится только у выбранного */}
-									<SelectPrimitive.ItemIndicator className='ml-auto flex items-center text-primary'>
-										<Icon type='check' isCurrentColor size='0.85em' />
-									</SelectPrimitive.ItemIndicator>
-								</SelectPrimitive.Item>
-								{/* разделитель между пунктами — тонкая линия */}
-								{index < options.length - 1 ? (
-									<SelectPrimitive.Separator
-										className={cn(
-											'my-1 h-px bg-border rounded-full',
-											dividerInset,
-										)}
-									/>
-								) : null}
-							</React.Fragment>
-						))}
-					</SelectPrimitive.Viewport>
-				</SelectPrimitive.Content>
-			</SelectPrimitive.Portal>
-		</SelectPrimitive.Root>
-	)
-}
+'use client'
+
+import * as React from 'react'
+
+import * as SelectPrimitive from '@radix-ui/react-select'
+
+import { Icon } from '../Icon'
+import { cn } from '../../lib/utils'
+
+export interface SelectOption {
+	value: string
+	label: string
+	/** Контент в начале пункта (флаг/иконка/что угодно). Показывается и в списке, и в значении триггера. */
+	startContent?: React.ReactNode
+	disabled?: boolean
+}
+
+// group — чтобы шеврон в триггере доворачивался по data-state. Размер — через
+// responsiveSize (CSS-адаптив без флэша), а не cva. Иконки — в em (масштаб за font-size).
+const SELECT_TRIGGER_BASE =
+	'group inline-flex w-full cursor-pointer items-center bg-card text-foreground shadow-sm transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background data-disabled:pointer-events-none data-disabled:opacity-50 data-placeholder:text-muted-foreground rounded-full'
+const SELECT_TRIGGER_SIZE: Record<'sm' | 'md' | 'lg', string> = {
+	sm: 'gap-fl-10/12 min-h-fl-28/32 px-fl-10/12 py-fl-2/4 text-button-s',
+	md: 'gap-fl-14/16 min-h-fl-36/40 px-fl-14/16 py-fl-6/8 text-button-m',
+	lg: 'gap-fl-18/20 min-h-fl-44/48 px-fl-18/20 py-fl-10/12 text-button-l',
+}
+// Пункт = носитель подсветки; текст инсетит px ВНУТРИ пункта (выравнивание с триггером).
+const SELECT_ITEM_SIZE: Record<'sm' | 'md' | 'lg', string> = {
+	sm: 'rounded-sm px-fl-6/8 py-fl-6/8 text-button-s',
+	md: 'rounded-md px-fl-10/12 py-fl-8/10 text-button-m',
+	lg: 'rounded-lg px-fl-14/16 py-fl-10/12 text-button-l',
+}
+// Боковой инсет разделителя = px пункта → линия выровнена с текстом и уже подсветки.
+const SELECT_DIVIDER_INSET: Record<'sm' | 'md' | 'lg', string> = {
+	sm: 'mx-2',
+	md: 'mx-3',
+	lg: 'mx-4',
+}
+const SELECT_ROUNDED_CONTENT: Record<'sm' | 'md' | 'lg', string> = {
+	sm: 'rounded-sm',
+	md: 'rounded-md',
+	lg: 'rounded-lg',
+}
+
+export interface SelectProps {
+	options: SelectOption[]
+	/** Размер: `sm | md | lg`. По умолчанию md. Каждый размер сам fluid-клампится. */
+	size?: 'sm' | 'md' | 'lg'
+	value?: string
+	defaultValue?: string
+	onValueChange?: (value: string) => void
+	placeholder?: string
+	disabled?: boolean
+	/** Фиксированный контент в начале триггера (помимо иконки выбранного пункта): лейбл, иконка и т.п. */
+	startContent?: React.ReactNode
+	/** Класс на триггер. */
+	className?: string
+	/** Класс на выпадающую панель. */
+	contentClassName?: string
+	/**
+	 * В триггере показывать только `startContent` выбранного пункта (напр. флаг),
+	 * без текста; в списке пункты остаются с текстом. Для компактных переключателей
+	 * (язык). По умолчанию false.
+	 */
+	compactValue?: boolean
+	/**
+	 * Доступное имя контрола. Заведено явно: у компонента нет rest-спреда, а TypeScript
+	 * не проверяет лишние JSX-атрибуты с дефисом — `aria-label` на <Select> молча
+	 * компилировался и никуда не попадал, оставляя контрол без доступного имени.
+	 */
+	'aria-label'?: string
+	'aria-labelledby'?: string
+}
+
+// Флаг/иконка + подпись. Кладём ВНУТРЬ ItemText, чтобы триггер (Select.Value)
+// отрисовал ровно то же — иконку слева и текст, как в макете.
+function OptionContent({ option }: { option: SelectOption }) {
+	return (
+		// leading-normal: токены text-button-* имеют line-height:1, из-за чего нижние
+		// выносные элементы букв (g/y/р) обрезаются строчным боксом. Локально возвращаем запас.
+		<span className='flex items-center gap-2.5 leading-normal'>
+			{option.startContent ? (
+				<span className='inline-flex shrink-0 items-center'>
+					{option.startContent}
+				</span>
+			) : null}
+			{option.label}
+		</span>
+	)
+}
+
+export function Select({
+	options,
+	value,
+	defaultValue,
+	onValueChange,
+	placeholder,
+	disabled,
+	startContent,
+	size,
+	className,
+	contentClassName,
+	compactValue = false,
+	'aria-label': ariaLabel,
+	'aria-labelledby': ariaLabelledBy,
+}: SelectProps) {
+	// Только для контролируемого значения: в неконтролируемом режиме выбранный пункт
+	// знает лишь Radix, и подменять его нечем.
+	const selectedOption = value != null ? options.find((o) => o.value === value) : undefined
+
+	const triggerSize = SELECT_TRIGGER_SIZE[size ?? 'md']
+	const itemSize = SELECT_ITEM_SIZE[size ?? 'md']
+	const dividerInset = SELECT_DIVIDER_INSET[size ?? 'md']
+	const roundedContent = SELECT_ROUNDED_CONTENT[size ?? 'md']
+
+	return (
+		<SelectPrimitive.Root
+			value={value}
+			defaultValue={defaultValue}
+			onValueChange={onValueChange}
+			disabled={disabled}
+		>
+			<SelectPrimitive.Trigger
+				aria-label={ariaLabel}
+				aria-labelledby={ariaLabelledBy}
+				className={cn(SELECT_TRIGGER_BASE, triggerSize, className)}
+			>
+				{startContent ? (
+					<span className='flex shrink-0 items-center text-muted-foreground'>
+						{startContent}
+					</span>
+				) : null}
+				{/* Значение рендерим САМИ, а не отдаём на откуп SelectPrimitive.Value.
+				    Radix берёт текст из смонтированных Item'ов, а они живут в портале и
+				    на сервере не рендерятся — из-за чего триггер приезжает ПУСТЫМ и
+				    остаётся таким до гидрации. На медленной сети это сотни миллисекунд
+				    пустого поля там, где уже должно стоять выбранное значение.
+				    Когда значение контролируемое, лейбл известен сразу — печатаем его. */}
+				<SelectPrimitive.Value placeholder={placeholder}>
+					{selectedOption ? (
+						compactValue ? (
+							selectedOption.startContent
+						) : (
+							<OptionContent option={selectedOption} />
+						)
+					) : undefined}
+				</SelectPrimitive.Value>
+				<SelectPrimitive.Icon asChild>
+					<span className='ml-auto flex shrink-0 items-center text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180'>
+						<Icon type='chevron_down' isCurrentColor size='0.72em' />
+					</span>
+				</SelectPrimitive.Icon>
+			</SelectPrimitive.Trigger>
+
+			<SelectPrimitive.Portal>
+				<SelectPrimitive.Content
+					position='popper'
+					sideOffset={8}
+					className={cn(
+						'z-50 max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95',
+						contentClassName,
+						roundedContent,
+					)}
+				>
+					<SelectPrimitive.Viewport className='flex flex-col'>
+						{options.map((option, index) => (
+							<React.Fragment key={option.value}>
+								<SelectPrimitive.Item
+									value={option.value}
+									disabled={option.disabled}
+									textValue={option.label}
+									className={cn(
+										'flex w-full cursor-pointer items-center gap-2.5 text-foreground outline-none select-none data-highlighted:bg-secondary data-disabled:pointer-events-none data-disabled:opacity-50',
+										itemSize,
+									)}
+								>
+									<SelectPrimitive.ItemText>
+										{compactValue && option.startContent ? (
+											<span className='inline-flex shrink-0 items-center'>
+												{option.startContent}
+											</span>
+										) : (
+											<OptionContent option={option} />
+										)}
+									</SelectPrimitive.ItemText>
+									{/* compactValue: название живёт ВНЕ ItemText → видно в списке, но НЕ в триггере.
+									    leading-normal — иначе truncate (overflow-hidden) при line-height:1 режет
+									    нижние выносы букв («g» в English). */}
+									{compactValue ? (
+										<span className='truncate leading-normal'>
+											{option.label}
+										</span>
+									) : null}
+									{/* галочка прижата вправо; рендерится только у выбранного */}
+									<SelectPrimitive.ItemIndicator className='ml-auto flex items-center text-primary'>
+										<Icon type='check' isCurrentColor size='0.85em' />
+									</SelectPrimitive.ItemIndicator>
+								</SelectPrimitive.Item>
+								{/* разделитель между пунктами — тонкая линия */}
+								{index < options.length - 1 ? (
+									<SelectPrimitive.Separator
+										className={cn(
+											'my-1 h-px bg-border rounded-full',
+											dividerInset,
+										)}
+									/>
+								) : null}
+							</React.Fragment>
+						))}
+					</SelectPrimitive.Viewport>
+				</SelectPrimitive.Content>
+			</SelectPrimitive.Portal>
+		</SelectPrimitive.Root>
+	)
+}

package/src/ui/skeleton/skeleton.tsx

@@ -1,44 +1,44 @@
-import * as React from 'react'
-
-import { cn } from '../../lib/utils'
-
-export interface SkeletonProps extends React.ComponentProps<'div'> {
-	/**
-	 * Идёт ли загрузка. По умолчанию `true`. Если `false` и переданы `children` —
-	 * рендерим реальный контент без заглушки (wrapper-режим).
-	 */
-	loading?: boolean
-}
-
-// Skeleton — заглушка-плейсхолдер на время загрузки. Два режима:
-// - без children: пустой блок, форму задаёшь className (w-*/h-*/size-*/rounded-*);
-// - с children (wrapper): children держат размер (invisible), а заглушка ложится
-//   поверх — удобно, когда контент уже есть, но «не готов».
-// Анимация — shimmer-блик пробегает слева-направо (keyframes shimmer в globals.css).
-export function Skeleton({
-	className,
-	loading = true,
-	children,
-	...props
-}: SkeletonProps) {
-	// Загрузка завершена и есть что показать — отдаём реальный контент как есть.
-	if (!loading && children !== undefined) return <>{children}</>
-
-	return (
-		<div
-			aria-hidden
-			className={cn(
-				'relative overflow-hidden rounded-md bg-accent',
-				className,
-			)}
-			{...props}
-		>
-			{/* блик-полоса: едет translateX(-100% → 100%), overflow-hidden её обрезает */}
-			<span className='pointer-events-none absolute inset-0 animate-shimmer bg-linear-to-r from-transparent via-skeleton-sheen to-transparent' />
-			{/* children задают размер обёртки, но скрыты на время загрузки */}
-			{children !== undefined ? (
-				<div className='invisible'>{children}</div>
-			) : null}
-		</div>
-	)
-}
+import * as React from 'react'
+
+import { cn } from '../../lib/utils'
+
+export interface SkeletonProps extends React.ComponentProps<'div'> {
+	/**
+	 * Идёт ли загрузка. По умолчанию `true`. Если `false` и переданы `children` —
+	 * рендерим реальный контент без заглушки (wrapper-режим).
+	 */
+	loading?: boolean
+}
+
+// Skeleton — заглушка-плейсхолдер на время загрузки. Два режима:
+// - без children: пустой блок, форму задаёшь className (w-*/h-*/size-*/rounded-*);
+// - с children (wrapper): children держат размер (invisible), а заглушка ложится
+//   поверх — удобно, когда контент уже есть, но «не готов».
+// Анимация — shimmer-блик пробегает слева-направо (keyframes shimmer в globals.css).
+export function Skeleton({
+	className,
+	loading = true,
+	children,
+	...props
+}: SkeletonProps) {
+	// Загрузка завершена и есть что показать — отдаём реальный контент как есть.
+	if (!loading && children !== undefined) return <>{children}</>
+
+	return (
+		<div
+			aria-hidden
+			className={cn(
+				'relative overflow-hidden rounded-md bg-accent',
+				className,
+			)}
+			{...props}
+		>
+			{/* блик-полоса: едет translateX(-100% → 100%), overflow-hidden её обрезает */}
+			<span className='pointer-events-none absolute inset-0 animate-shimmer bg-linear-to-r from-transparent via-skeleton-sheen to-transparent' />
+			{/* children задают размер обёртки, но скрыты на время загрузки */}
+			{children !== undefined ? (
+				<div className='invisible'>{children}</div>
+			) : null}
+		</div>
+	)
+}