{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "같은 자리에서 여러 화면을 갈아 보여주는 탐색 컴포넌트입니다.", "registryDependencies": [ "@atom/tokens", "@atom/lib-bem", "@atom/lib-cn", "@atom/lib-context", "@atom/lib-use-controllable-state" ], "files": [ { "path": "poc/design-system/implement/src/components/tabs.tsx", "content": "\"use client\";\n\nimport {\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n useCallback,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { mod } from \"../lib/bem\";\nimport { cn } from \"../lib/cn\";\nimport { createStrictContext } from \"../lib/context\";\nimport { useControllableState } from \"../lib/use-controllable-state\";\n\n/* -------------------------------------------------------------------------- */\n/* Tabs (components/tabs.md, styles/atom/elements/tabs.css) */\n/* */\n/* … */\n/* … */\n/* */\n/* -------------------------------------------------------------------------- */\n\nexport type TabsDirection = \"horizontal\" | \"vertical\";\nexport type TabsLayout = \"fit\" | \"scroll\";\nexport type TabsSize = \"small\" | \"medium\";\nexport type TabsActivationMode = \"automatic\" | \"manual\";\nexport type TabsItem = {\n value: string;\n label: ReactNode;\n /** 라벨 뒤 개수. 0 이면 표시하지 않습니다. */\n count?: number;\n /** aria-disabled — 포커스는 받되 선택되지 않습니다. */\n disabled?: boolean;\n};\n\nconst B = \"atom-tabs\";\n\ntype TabsContextValue = {\n value: string | undefined;\n tabId: (value: string) => string | undefined;\n panelId: (value: string) => string | undefined;\n registerPanel: (value: string) => () => void;\n};\n\nconst [TabsContext, useTabsContext] = createStrictContext(\"Tabs\");\n\nexport type TabsProps = Omit, \"defaultValue\" | \"onChange\"> & {\n ref?: Ref;\n /** 선택된 탭의 값입니다. 주면 controlled 입니다. */\n value?: string;\n /** uncontrolled 일 때 처음 선택할 탭입니다. 없으면 첫 번째(비활성이 아닌) 탭입니다. */\n defaultValue?: string;\n /** 탭 목록입니다. */\n items: TabsItem[];\n /** 레일을 위에 둘지 시작 방향 옆에 둘지 정합니다. */\n direction?: TabsDirection;\n /** 균등 분할과 라벨 폭 + 가로 스크롤 중 하나입니다. */\n layout?: TabsLayout;\n /** Trigger 높이와 폰트 크기를 결정합니다. */\n size?: TabsSize;\n /** 화살표 이동만으로 전환할지, Enter 로 확정할지입니다. */\n activationMode?: TabsActivationMode;\n /** 탭이 바뀔 때 호출됩니다. */\n onValueChange?: (value: string) => void;\n /** `role=\"tablist\"` 의 이름입니다(무엇을 고르는 탭인지). List 에 붙습니다. */\n \"aria-label\"?: string;\n /** `role=\"tablist\"` 의 이름을 다른 요소에서 가져올 때. List 에 붙습니다. */\n \"aria-labelledby\"?: string;\n};\n\nfunction TabsRoot({\n ref,\n value: valueProp,\n defaultValue,\n items,\n direction = \"horizontal\",\n layout = \"fit\",\n size = \"medium\",\n activationMode = \"automatic\",\n onValueChange,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n className,\n children,\n ...rest\n}: TabsProps) {\n const baseId = useId();\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue: defaultValue ?? items.find((i) => !i.disabled)?.value,\n onChange: (v) => {\n if (v !== undefined) onValueChange?.(v);\n },\n });\n const [panels, setPanels] = useState>(() => new Set());\n const triggers = useRef<(HTMLButtonElement | null)[]>([]);\n const vertical = direction === \"vertical\";\n\n const indexOf = useCallback((v: string) => items.findIndex((i) => i.value === v), [items]);\n const tabId = useCallback(\n (v: string) => {\n const i = indexOf(v);\n return i < 0 ? undefined : `${baseId}-tab-${i}`;\n },\n [baseId, indexOf],\n );\n const panelId = useCallback(\n (v: string) => {\n const i = indexOf(v);\n return i < 0 ? undefined : `${baseId}-panel-${i}`;\n },\n [baseId, indexOf],\n );\n const registerPanel = useCallback((v: string) => {\n setPanels((prev) => new Set(prev).add(v));\n return () =>\n setPanels((prev) => {\n const next = new Set(prev);\n next.delete(v);\n return next;\n });\n }, []);\n\n const select = (item: TabsItem) => {\n if (item.disabled || item.value === value) return;\n setValue(item.value);\n };\n\n // roving tabindex — 선택된 탭만 0. 선택이 없으면 첫 번째 탭.\n const selectedIndex = value === undefined ? -1 : indexOf(value);\n const tabbable = selectedIndex >= 0 ? selectedIndex : 0;\n\n const onKeyDown = (e: KeyboardEvent) => {\n const current = triggers.current.findIndex((el) => el === e.target);\n if (current < 0) return;\n const n = items.length;\n const prevKey = vertical ? \"ArrowUp\" : \"ArrowLeft\";\n const nextKey = vertical ? \"ArrowDown\" : \"ArrowRight\";\n let target: number;\n switch (e.key) {\n case prevKey:\n target = (current - 1 + n) % n;\n break;\n case nextKey:\n target = (current + 1) % n;\n break;\n case \"Home\":\n target = 0;\n break;\n case \"End\":\n target = n - 1;\n break;\n default:\n return;\n }\n e.preventDefault();\n triggers.current[target]?.focus();\n const item = items[target];\n if (activationMode === \"automatic\" && item) select(item);\n };\n\n return (\n \n \n \n {items.map((item, i) => {\n const selected = item.value === value;\n return (\n {\n triggers.current[i] = el;\n }}\n type=\"button\"\n role=\"tab\"\n id={tabId(item.value)}\n className={`${B}__trigger`}\n aria-selected={selected}\n aria-controls={panels.has(item.value) ? panelId(item.value) : undefined}\n aria-disabled={item.disabled ? \"true\" : undefined}\n tabIndex={i === tabbable ? 0 : -1}\n onClick={() => select(item)}\n >\n \n {item.label}\n \n {item.count != null && item.count !== 0 && {item.count}}\n \n );\n })}\n \n {children}\n \n \n );\n}\n\nexport type TabsPanelProps = HTMLAttributes & {\n ref?: Ref;\n /** 연결할 탭의 값(items[].value) 입니다. */\n value: string;\n};\n\n/** `role=\"tabpanel\"`. 선택되지 않은 패널은 `hidden` 을 답니다. */\nfunction TabsPanel({ ref, value, className, children, ...rest }: TabsPanelProps) {\n const ctx = useTabsContext(\"Tabs.Panel\");\n const { registerPanel } = ctx;\n useLayoutEffect(() => registerPanel(value), [registerPanel, value]);\n const selected = ctx.value === value;\n return (\n