AnimatedTabs

활성 탭 인디케이터가 부드럽게 미끄러지는 탭. controlled/uncontrolled · ArrowLeft/Right 키 · role="tablist/tab/tabpanel" ARIA 완비.

Horizontal (기본, Uncontrolled)

활성 탭 아래(또는 옆) 인디케이터가 부드럽게 미끄러집니다. DOM rect를 측정해 정확한 위치로 transform.

💡 탭을 클릭하거나 Tab으로 포커스 → ArrowLeft/Right로 이동. Home/End로 양 끝. disabled 탭은 자동 skip.

Vertical orientation

활성 탭 아래(또는 옆) 인디케이터가 부드럽게 미끄러집니다. DOM rect를 측정해 정확한 위치로 transform.

Controlled

외부 활성 값: features

controlled / uncontrolled
키보드 ArrowLeft / Right (horizontal) · ArrowUp/Down (vertical)
Home / End로 첫/마지막 탭
disabled 탭 자동 skip

크기 / 색상

활성 탭 아래(또는 옆) 인디케이터가 부드럽게 미끄러집니다. DOM rect를 측정해 정확한 위치로 transform.

lg + teal 색

활성 탭 아래(또는 옆) 인디케이터가 부드럽게 미끄러집니다. DOM rect를 측정해 정확한 위치로 transform.

사용

import { AnimatedTabs } from '@baneung-pack/ui';

const TABS = [
  { value: 'overview', label: 'Overview', content: <p>...</p> },
  { value: 'features', label: 'Features', content: <p>...</p> },
  { value: 'old', label: 'Deprecated', content: <p>...</p>, disabled: true },
];

// Uncontrolled
<AnimatedTabs items={TABS} defaultValue="features" />

// Controlled
<AnimatedTabs items={TABS} value={active} onValueChange={setActive} />

// Vertical
<AnimatedTabs items={TABS} orientation="vertical" />

// 색
<AnimatedTabs items={TABS} indicatorColor="#3B716C" activeColor="#3B716C" />

API

AnimatedTabsProps

Property	Type	기본값	설명
items	AnimatedTabItem[]	—	탭 항목 배열 (필수).
value	string	—	Controlled 활성 value.
defaultValue	string	첫 enabled	Uncontrolled 초기 활성.
onValueChange	(value: string) => void	—	변경 콜백.
orientation	'horizontal' \| 'vertical'	'horizontal'	방향.
size	'sm' \| 'md' \| 'lg'	'md'	크기.
indicatorColor	string	'#1F2937'	활성 인디케이터 색.
activeColor	string	'#1F2937'	활성 탭 텍스트 색.
duration	number	250	인디케이터 슬라이드 시간 (ms).

AnimatedTabItem

Property	Type	기본값	설명
value	string	—	고유 키 (필수).
label	ReactNode	—	탭 버튼 라벨.
content	ReactNode	—	탭패널 내용.
disabled	boolean	false	비활성화 (키보드 skip).