hallo-kit 0.3.0

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

@@ -0,0 +1,78 @@
+'use client'
+
+import * as React from 'react'
+
+import * as OneTimePasswordField from '@radix-ui/react-one-time-password-field'
+
+import { cn } from '../../lib/utils'
+
+// Поле кода подтверждения из N ячеек (OTP) — headless Radix OneTimePasswordField +
+// свои стили. Примитив сам ведёт roving-фокус, Backspace/стрелки, вставку из буфера
+// и фильтрацию ввода (validationType='numeric' и autoComplete='one-time-code' —
+// дефолты Radix). Значение — сплошная строка цифр.
+// error — как у Input: `true` — только красная подсветка ячеек, строка — подсветка
+// плюс текст под полем (role="alert").
+export function OtpInput({
+	length = 6,
+	value,
+	onChange,
+	disabled,
+	error,
+	autoFocus,
+	ariaLabel,
+}: {
+	length?: number
+	value: string
+	onChange: (code: string) => void
+	disabled?: boolean
+	error?: boolean | string
+	autoFocus?: boolean
+	ariaLabel?: string
+}) {
+	const hasError = !!error
+	const errorMessage = typeof error === 'string' ? error : undefined
+
+	const reactId = React.useId()
+	const messageId = `${reactId}-msg`
+
+	const field = (
+		<OneTimePasswordField.Root
+			value={value}
+			onValueChange={onChange}
+			disabled={disabled}
+			autoFocus={autoFocus}
+			aria-label={ariaLabel}
+			aria-describedby={errorMessage ? messageId : undefined}
+			className='flex items-center justify-center gap-fl-8/12'
+		>
+			{/* Число ячеек = число Input-детей — так Radix узнаёт length. */}
+			{Array.from({ length }, (_, index) => (
+				<OneTimePasswordField.Input
+					key={index}
+					aria-invalid={hasError || undefined}
+					className={cn(
+						'size-fl-44/52 rounded-md bg-secondary text-center text-button-l font-medium text-foreground outline-none transition-[color,box-shadow]',
+						'focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:opacity-50',
+						hasError && 'ring-1 ring-error bg-error-soft focus:ring-error',
+					)}
+				/>
+			))}
+		</OneTimePasswordField.Root>
+	)
+
+	// Без текста сообщения возвращаем только поле — лишнюю обёртку не плодим (как Input).
+	if (!errorMessage) return field
+
+	return (
+		<div className='flex w-full flex-col gap-1.5'>
+			{field}
+			<p
+				id={messageId}
+				role='alert'
+				className='text-center text-button-s text-error'
+			>
+				{errorMessage}
+			</p>
+		</div>
+	)
+}

package/src/ui/pagination/index.ts

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

package/src/ui/pagination/pagination.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+import { useMemo } from 'react'
+
+import { cn } from '../../lib/utils'
+
+import { Icon } from '../Icon'
+import { Button } from '../button'
+
+export interface PaginationProps {
+	/** Текущая страница (с 1). */
+	page: number
+	/** Всего элементов. */
+	total: number
+	/** Размер страницы. */
+	pageSize: number
+	onPageChange: (page: number) => void
+	/** Подпись для aria-label навигации. */
+	label?: string
+	className?: string
+}
+
+const ELLIPSIS = '…' as const
+
+/**
+ * Ряд номеров страниц: 1 … (p-1) p (p+1) … N. Всегда видны первая/последняя,
+ * вокруг текущей — по соседу; разрывы схлопываются в многоточие.
+ */
+const buildRange = (
+	page: number,
+	pageCount: number,
+): Array<number | typeof ELLIPSIS> => {
+	// До 7 страниц выводим все — многоточие не нужно.
+	if (pageCount <= 7) return Array.from({ length: pageCount }, (_, i) => i + 1)
+
+	const wanted = new Set([
+		1,
+		2,
+		page - 1,
+		page,
+		page + 1,
+		pageCount - 1,
+		pageCount,
+	])
+	const result: Array<number | typeof ELLIPSIS> = []
+	let prev = 0
+	for (let i = 1; i <= pageCount; i++) {
+		if (!wanted.has(i)) continue
+		// Разрыв в один номер бессмысленно прятать за «…» — показываем сам номер.
+		if (i - prev === 2) result.push(i - 1)
+		else if (i - prev > 2) result.push(ELLIPSIS)
+		result.push(i)
+		prev = i
+	}
+	return result
+}
+
+/**
+ * Классическая номерная пагинация (1 2 3 … N) c prev/next. Управляемая: страница и
+ * обработчик приходят сверху (хуки списков и так постраничные — page/pageSize).
+ */
+export function Pagination({
+	page,
+	total,
+	pageSize,
+	onPageChange,
+	label,
+	className,
+}: PaginationProps) {
+	const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)))
+	const range = useMemo(() => buildRange(page, pageCount), [page, pageCount])
+
+	if (pageCount <= 1) return null
+
+	const goTo = (next: number) => {
+		const clamped = Math.min(Math.max(1, next), pageCount)
+		if (clamped !== page) onPageChange(clamped)
+	}
+
+	return (
+		<nav
+			aria-label={label}
+			className={cn('flex items-center justify-center gap-1', className)}
+		>
+			<Button
+				variant='ghost'
+				size='sm'
+				isIconOnly
+				aria-label={`${label ?? ''} ←`.trim()}
+				disabled={page <= 1}
+				onClick={() => goTo(page - 1)}
+			>
+				<Icon
+					type='chevron_right'
+					size='1.25em'
+					isCurrentColor
+					className='rotate-180'
+				/>
+			</Button>
+
+			{range.map((item, idx) =>
+				item === ELLIPSIS ? (
+					<span
+						key={`gap-${idx}`}
+						aria-hidden
+						className='min-w-fl-32/36 text-center text-button-s text-muted-foreground select-none'
+					>
+						{ELLIPSIS}
+					</span>
+				) : (
+					<Button
+						key={item}
+						variant={item === page ? 'default' : 'ghost'}
+						size='sm'
+						isIconOnly
+						className='size-fl-36/42! p-0!'
+						aria-label={String(item)}
+						aria-current={item === page ? 'page' : undefined}
+						onClick={() => goTo(item)}
+					>
+						{item}
+					</Button>
+				),
+			)}
+
+			<Button
+				variant='ghost'
+				size='sm'
+				isIconOnly
+				aria-label={`${label ?? ''} →`.trim()}
+				disabled={page >= pageCount}
+				onClick={() => goTo(page + 1)}
+			>
+				<Icon type='chevron_right' size='1.25em' isCurrentColor />
+			</Button>
+		</nav>
+	)
+}

package/src/ui/radio-group/index.ts

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

package/src/ui/radio-group/radio-group.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import * as React from 'react'
+
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { cn } from '../../lib/utils'
+
+// Радио-группа — headless Radix + свои стили. Root ведёт одиночный выбор, клавиатуру
+// (стрелки) и ARIA; раскладку задаёт потребитель через className (по умолчанию —
+// вертикальный список карточек с гэпом, как в макетах тарифов/способов оплаты).
+export function RadioGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+	return (
+		<RadioGroupPrimitive.Root
+			className={cn('flex flex-col gap-2.5', className)}
+			{...props}
+		/>
+	)
+}
+
+// Внешний вид карточки-варианта (по макетам два вида):
+// - bordered (деф.) — белая карточка, у выбранной только синяя рамка (способы оплаты);
+// - soft — лёгкая рамка всегда, у выбранной синяя рамка + голубая заливка (тарифы).
+const radioCardVariants = cva(
+	'group flex w-full cursor-pointer items-center gap-fl-12/16 rounded-lg border-2 p-5 text-left transition outline-none hover:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-99 disabled:pointer-events-none disabled:opacity-50',
+	{
+		variants: {
+			appearance: {
+				bordered:
+					'border-transparent bg-card data-[state=checked]:border-primary',
+				soft: 'border-border bg-card data-[state=checked]:border-primary data-[state=checked]:bg-accent',
+			},
+		},
+		defaultVariants: { appearance: 'bordered' },
+	},
+)
+
+// Кружок-индикатор радио: пустой с серой рамкой; у выбранного (data-state=checked
+// на Item-родителе с классом group) — синяя рамка и точка внутри. Размер — как в
+// макете (24px). Отдельным экспортом не нужен — используется внутри RadioGroupCard.
+function RadioDot() {
+	return (
+		<span
+			aria-hidden
+			className={cn(
+				'relative flex size-6 shrink-0 items-center justify-center rounded-full border-2 transition-colors',
+				'border-disabled group-data-[state=checked]:border-primary',
+			)}
+		>
+			<RadioGroupPrimitive.Indicator asChild forceMount>
+				<span className='size-3 scale-0 rounded-full bg-primary transition-transform group-data-[state=checked]:scale-100' />
+			</RadioGroupPrimitive.Indicator>
+		</span>
+	)
+}
+
+// Карточка-вариант радио-группы: вся карточка — кнопка выбора, слева кружок-радио,
+// дальше произвольный контент (children). Рамка есть всегда → выбор не сдвигает
+// раскладку. Тарифы кладут сюда «название+период | цена» (appearance='soft'),
+// способы оплаты — «иконка + название/описание» (bordered).
+export function RadioGroupCard({
+	className,
+	appearance,
+	children,
+	...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item> &
+	VariantProps<typeof radioCardVariants>) {
+	return (
+		<RadioGroupPrimitive.Item
+			className={cn(radioCardVariants({ appearance }), className)}
+			{...props}
+		>
+			<RadioDot />
+			{children}
+		</RadioGroupPrimitive.Item>
+	)
+}

package/src/ui/select/index.ts

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

package/src/ui/select/select.tsx

@@ -0,0 +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>
+	)
+}

package/src/ui/separator/index.ts

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

package/src/ui/separator/separator.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import * as React from 'react'
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '../../lib/utils'
+
+// Separator — тонкая линия-разделитель на Radix (role=separator + aria-orientation;
+// при decorative — чисто визуальный, скринридеру не объявляется). Стиль — как у
+// разделителя пунктов в Select: 1px, цвет sky, скруглённые концы.
+// horizontal → тянется по ширине (h-px w-full), vertical → по высоте (w-px h-full;
+// родитель должен задавать высоту, напр. flex-строка с h-*).
+// С children (только horizontal) → разделитель с подписью по центру: «──── ИЛИ ────».
+export function Separator({
+	className,
+	orientation = 'horizontal',
+	decorative = true,
+	children,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	// Подпись по центру: две линии по бокам + текст между ними. Radix Root тут не
+	// подходит (это одна линия), поэтому собираем role=separator вручную; сами линии
+	// декоративны (aria-hidden), а текст-метка остаётся доступной скринридеру.
+	if (children != null && orientation === 'horizontal') {
+		return (
+			<div
+				role='separator'
+				aria-orientation='horizontal'
+				className={cn('flex w-full items-center gap-fl-12/16', className)}
+				{...props}
+			>
+				<span aria-hidden className='h-px flex-1 rounded-full bg-border' />
+				<span className='text-body-s shrink-0 text-muted-foreground'>
+					{children}
+				</span>
+				<span aria-hidden className='h-px flex-1 rounded-full bg-border' />
+			</div>
+		)
+	}
+
+	return (
+		<SeparatorPrimitive.Root
+			orientation={orientation}
+			decorative={decorative}
+			className={cn(
+				'shrink-0 rounded-full bg-border',
+				orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}

package/src/ui/skeleton/index.ts

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

package/src/ui/skeleton/skeleton.tsx

@@ -0,0 +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>
+	)
+}

package/src/ui/spinner/index.ts

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

package/src/ui/spinner/spinner.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+import { cn } from '../../lib/utils'
+
+// Крутилка-индикатор загрузки. Цвет — currentColor (наследует цвет текста),
+// размер — через className (по умолчанию size-5). Трек полупрозрачный, дуга крутится.
+export function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
+	return (
+		<svg
+			role='status'
+			aria-label='Загрузка'
+			viewBox='0 0 24 24'
+			fill='none'
+			className={cn('size-5 shrink-0 animate-spin text-current', className)}
+			{...props}
+		>
+			<circle
+				cx='12'
+				cy='12'
+				r='9.5'
+				stroke='currentColor'
+				strokeWidth='2.5'
+				className='opacity-20'
+			/>
+			<path
+				d='M21.5 12A9.5 9.5 0 0 0 12 2.5'
+				stroke='currentColor'
+				strokeWidth='2.5'
+				strokeLinecap='round'
+			/>
+		</svg>
+	)
+}

package/src/ui/switch/index.ts

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