@reopt-ai/opt-ui

키보드 단축키를 시각적으로 표시하는 인라인 뱃지 컴포넌트.

콘텐츠를 구분하는 가로/세로 디바이더. 라벨을 넣으면 가운데 정렬 구분선이 된다.

일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션 지원.

눌림(pressed) 두 상태 버튼. 단독 사용하거나 ToggleGroup으로 묶어 단일/다중 선택을 만든다.

수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원.

트렌드 방향과 변화량을 표시하는 통계 카드.

Composite 기반 2D 키보드 탐색 컨테이너. 화살표 키로 자식 요소 간 이동 가능.

접기/펼치기 콘텐츠 영역. 3-part anatomy: Root, Trigger, Content.

탭 패널 시스템. 4-part anatomy: Root, TabList, Tab, TabPanel.

드롭다운 선택 컴포넌트. 5-part anatomy: Root, Label, Trigger, Popover, Item.

모달 다이얼로그. 9-part anatomy: Root, Disclosure, Panel, Heading, Description, Dismiss, Header, Body, Footer.

자동완성 검색 입력. 7 exports: Root, Input, Popover, Item, Group, GroupLabel, Empty.

메뉴바 + 개별 메뉴 시스템. 10 exports: MenubarRoot, MenubarContainer, MenuRoot, MenuTrigger, MenuButtonArrow, MenuPopover, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuSeparator.

툴바 컨테이너 + 툴팁. 7 exports: ToolbarRoot, ToolbarContainer, ToolbarButton, ToolbarSeparator, TooltipProvider, TooltipAnchor, Tooltip.

접근성 폼 시스템. opt-ui-primitives Form API 기반. 31 exports: FormRoot, FormProvider, FormGroup, FormGroupLabel, FormDescription, FormField, FormControl, FormInput, FormTextarea, FormSelect, FormSelectPopover, FormSelectItem, FormSwitch, FormLabel, FormError, FormSubmit, FormCheckbox, FormRadioGroup, FormRadio, FormPush, FormRemove, FormReset, FormNumberInput, FormSlider, FormStarRating, FormColorPicker, FormIconPicker, FormTagInput, FormDateRangePicker + useFormStore, useFormContext hooks.

접근성 버튼 컴포넌트. 4가지 변형(primary, secondary, ghost, danger), 3가지 크기, 로딩/아이콘 지원.

인라인 상태 뱃지. 5가지 색상 변형, 상태 점(dot) 옵션 지원.

로딩 상태 표시 스피너. 3가지 크기 지원.

알림 메시지 컴포넌트. 4가지 변형(info, success, warning, error), 제목/본문/닫기 버튼 지원.

독립적인 텍스트 입력 컴포넌트. 레이블, 에러, 힌트, 아이콘 지원.

토글 스위치 컴포넌트. 3가지 크기, 레이블/설명 지원.

로딩 플레이스홀더. text/circular/rectangular 변형. 프리셋 컴포넌트 포함.

멀티라인 텍스트 입력. Input과 동일한 API (label, error, hint).

사용자 아바타. 이미지, 이니셜 자동 생성, 상태 인디케이터, 그룹 지원.

진행률 표시. Linear 및 Circular 변형 지원.

현재 위치를 표시하고 계층 탐색을 제공하는 컴포넌트.

데이터가 없을 때 표시하는 빈 상태 컴포넌트. 아이콘, 제목, 설명, 액션 버튼 지원.

범용 카드 컨테이너. Header, Title, Description, Content, Footer 하위 컴포넌트 포함.

독립적인 체크박스 컴포넌트. 레이블, 설명, 그룹 지원. indeterminate 상태 포함.

독립적인 라디오 그룹 컴포넌트. 레이블, 설명, 다양한 크기 지원.

날짜 범위 선택 컴포넌트. 프리셋, 달력 UI, 포커스 관리를 지원합니다.

태그 입력 컴포넌트. 텍스트를 입력하고 Enter로 태그를 추가, Backspace로 삭제합니다.

색상 선택 컴포넌트. 프리셋 팔레트와 hex 입력을 지원합니다.

아이콘 선택 컴포넌트. 검색, 그룹별 분류, semantic key 기반 Lucide 아이콘과 커스텀 ReactNode를 지원합니다.

순서가 있는 단계를 추가, 제거, 재정렬할 수 있는 빌더 컴포넌트.

AND/OR 로직으로 조건 그룹을 구성하는 빌더. 속성, 연산자, 값을 조합합니다.

Popover 프리미티브 래퍼. 트리거 요소에 연결된 플로팅 콘텐츠를 표시합니다.

Menu Core 위의 간편 래퍼. 단일 트리거 드롭다운 메뉴에 특화되었습니다.

숫자 입력 컴포넌트. +/- 버튼, min/max, step, 키보드 화살표를 지원합니다.

범위 슬라이더 입력. native range input 래핑, 값 표시, 포맷 함수를 지원합니다.

페이지 제목, 설명, 액션 슬롯을 제공하는 레이아웃 헤더 컴포넌트.

커스텀 스크롤바를 제공하는 스크롤 컨테이너. 수직/수평/양방향 지원.

최대 너비 제약과 중앙 정렬을 제공하는 래퍼. 페이지 콘텐츠 폭 제한용.

시맨틱 스페이싱 블록. 제목이 있으면 aria-labelledby를 자동 설정합니다.

react-resizable-panels 래퍼. 드래그로 크기를 조절할 수 있는 패널 분할 레이아웃.

Surface 루트 레이아웃. flex + 기본 section spacing 적용, loading prop으로 LoadingOverlay 자동 래핑.

Surface 팩토리 함수. SurfaceLayout 래핑을 구조적으로 강제하여 loading/className 처리를 자동화합니다.

아이콘+텍스트 조합, 이미지, 링크 래핑을 지원하는 로고 컴포넌트. Sidebar 등에서 활용.

사이드/하단 슬라이드 패널. Dialog 기반 compound 패턴으로 접근성을 보장합니다.

페이지 넘김 네비게이션. ellipsis 포함 페이지 번호 배열과 Prev/Next 버튼을 제공합니다.

가상 스크롤 리스트. 대량 데이터를 윈도잉 기법으로 효율적으로 렌더링합니다.

로딩 오버레이. Spinner + 반투명 배경으로 콘텐츠 위에 로딩 상태를 표시합니다.

1~N점 별점을 선택하는 인터랙티브 레이팅 입력. 읽기 전용 표시도 지원.

React 에러 바운더리. 자식 컴포넌트 렌더 에러를 잡아 fallback UI를 표시합니다.

cmdk 스타일 명령 anatomy. 자동 필터링 + 키보드 내비게이션. 인라인 또는 CommandDialog로 사용.

Recharts ResponsiveContainer를 감싸는 반응형 차트 컨테이너. 접근성 속성과 스타일링을 지원합니다.

opt-ui 스타일의 차트 툴팁. Recharts Tooltip의 content prop으로 사용됩니다.

opt-ui 스타일의 차트 범례. 클릭하여 시리즈를 토글할 수 있습니다.

연속 데이터용 선 차트. 시간에 따른 추세나 변화를 시각화합니다.

비교 데이터용 막대 차트. 카테고리 간 값 비교를 시각화합니다.

추세/시계열 데이터용 영역 차트. gradient 옵션으로 그라데이션 채우기를 지원합니다.

인라인 미니 차트. 작은 공간에서 추세를 빠르게 시각화합니다. StatCard, 테이블 셀 등에서 사용합니다.

비율/구성 데이터용 파이 차트. innerRadius를 설정하면 도넛 차트가 됩니다.

산점도 차트. 두 변수 간의 상관관계를 시각화합니다. Z축으로 버블 크기 조절 가능.

비교 차트. grouped, stacked, mirrored 3가지 레이아웃으로 카테고리 간 비교를 시각화합니다.

게이지/미터 차트. SVG 기반으로 진행률이나 KPI를 시각화합니다.

퍼널 차트. 전환율이나 단계별 감소를 시각화합니다.

리텐션 히트맵. 코호트별 사용자 유지율을 색상 강도로 시각화합니다.

생키 다이어그램. 노드 간 흐름과 비율을 시각화합니다. 외부 의존성 없이 SVG로 구현.

GitHub 스타일 달력 히트맵. 1년 단위 일별 활동량을 색상 강도로 시각화합니다.

폭포 차트. 양수/음수 델타를 누적 바 차트로 시각화합니다.

버블 차트. x/y 좌표 + 크기 값으로 3차원 데이터를 시각화합니다.

통계 카드 + Sparkline 조합. 주요 지표와 추세를 함께 표시합니다.

Card + AreaChart 조합. 제목과 설명이 있는 카드 내에 추세 차트를 표시합니다.

이벤트 스파크라인. 라벨, 값, 변화량과 미니 차트를 표시합니다.

리포트 위젯. 9가지 차트 타입(line, bar, area, pie, scatter, gauge, funnel, sparkline, metric)을 렌더링합니다.

FAQ 질문/답변 아코디언. Composite + Disclosure 조합.

Sticky 페이지 사이드 aside chrome. 고정 너비 + header/body/footer 3-slot.

탭 콘텐츠 패널. Tabs primitive 래퍼.

Composite 기반 통계 카드 그리드. 화살표 키로 2D 탐색.

match-sorter 기반 퍼지 검색 콤보박스.

색상 인디케이터가 있는 상태 선택 드롭다운.

리치 텍스트 에디터 스타일 툴바. Toolbar + Tooltip 조합.

Composite 기반 사이드바 네비게이션. pathname 자동 동기화.

데이터 기반 설정 폼. 유효성 검증, 라디오, 체크박스 지원.

데스크톱 스타일 메뉴바. 체크박스, 라디오 메뉴 항목 지원.

Cmd+K 스타일 커맨드 팔레트. Dialog + Combobox + match-sorter 퍼지 검색.

CommandPalette + Cmd+K 키보드 단축키 자동 바인딩.

배포 단계 타임라인. Composite 기반 키보드 탐색 지원.

프로젝트 검색 전환기. Combobox + match-sorter 퍼지 검색 지원.

환경변수 패널. Disclosure로 환경별 그룹 접기/펼치기, Composite로 변수 탐색.

Git 브랜치 선택 드롭다운. Select primitive 래퍼.

도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원.

제네릭 데이터 테이블. 동적 컬럼 정의, Composite 기반 키보드 탐색.

토스트 알림 시스템. ToastProvider + useToast hook 또는 프로그램매틱 toast() API로 전역 알림 관리.

디자인 시스템 참조 패널. 프리미티브 맵, 키보드 패턴, Tailwind 셀렉터, 접근성 속성 등 6개 섹션 제공.

작업 목록 관리 컴포넌트. 우선순위, 상태, 담당자, 태그, 하위 작업 지원.

활동 피드/로그 컴포넌트. 타임라인 스타일, 상대 시간 표시.

필터링 바 컴포넌트. 검색, 선택, 다중 선택 필터 지원.

빠른 작업 패널. 그리드/리스트 레이아웃, 단축키 표시 지원.

팀원 목록 컴포넌트. 온라인 상태, 다양한 레이아웃(list, compact, avatars-only) 지원.

로그인/회원가입 모드 전환 가능한 인증 폼. 이메일·비밀번호 검증, FormSwitch로 로그인 상태 유지 옵션 지원.

다단계 순차 입력 폼. FormFieldDef 기반 필드 정의, 단계별 검증, 진행 표시기, 리뷰 단계 지원.

런타임 필드 추가/제거 폼. 최소/최대 필드 수 제약, 개별 검증, 동적 스토어 업데이트 지원.

파일 선택, 메타데이터 표시, 이미지 미리보기를 포함한 업로드 폼. 파일 크기 제한, 설명 입력 지원.

이벤트 아이콘. semantic key 또는 ReactNode 아이콘과 배경색을 표시합니다.

연결 상태 표시기. connected, connecting, disconnected, error 상태를 지원합니다.

플로팅 액션 바. 선택된 항목에 대한 일괄 작업 버튼을 하단에 표시합니다.

템플릿 선택기. 카테고리별 그리드와 검색을 제공하며 featured/tags 표시를 지원합니다.

실패 목록 패널. severity별 색상 강조, 그룹핑, 액션 슬롯을 지원합니다.

키-값 쌍 편집기. 동적 행 추가/삭제, 비밀값 토글, 유효성 검사를 지원합니다.

워크플로우 캔버스. 그리드 셀 기반 스텝 배치, SVG 연결선, 키보드 이동을 지원합니다.

코드 스니펫 뷰어. 줄 번호, 복사 버튼을 지원하는 코드 표시 컴포넌트.

프로퍼티 탐색기. 검색 가능한 속성 목록을 그룹별로 표시합니다.

쿼리 결과 테이블. SQL 쿼리 결과를 표시하며 로딩, 에러, 빈 상태를 지원합니다.

알림 빌더. 메트릭 조건, 빈도, 채널을 설정하여 알림을 구성합니다.

SQL 에디터. CodeMirror 기반의 SQL 편집기로 구문 강조와 자동 완성을 지원합니다.

이벤트 메타 에디터. IconPicker + ColorPicker + TagInput을 조합한 이벤트 메타데이터 편집기.

위젯 그리드. react-grid-layout 래퍼로 드래그/리사이즈 가능한 대시보드 위젯을 배치합니다.

리포트 빌더. 4단계 위저드 (차트 타입 → 데이터 설정 → 스타일 → 미리보기).

세그먼트 빌더. event, property, cohort, custom 4가지 조건 타입으로 사용자 세그먼트를 정의합니다.

이상 탐지 인사이트 패널. severity별 카드, 통계 필터, dismiss 기능, 검출 설정(유형/Z-score/days).

시간 범위 선택기. Popover + DateRangePicker + 프리셋 버튼 조합. 12개 시계열 Surface에서 사용.

데이터 내보내기 버튼. CSV/JSON 변환 내장, PDF는 콜백 위임. DropdownMenu 기반.

통계 요약 행. StatCard 그리드 레이아웃을 표준화합니다. loading 시 SkeletonCard 표시.

비교 선택기. Select × 2 + Swap 버튼 조합. CohortComparison, FunnelAnalysis 등에서 사용.

테마 프리셋 선택기. 프리셋과 light/dark/system 모드 전환.

AI 프롬프트 뷰어/헬퍼. 변수 입력 → 실시간 치환 → 복사 기능.

접기/펼치기를 지원하는 compound 사이드바. Header/Content/Footer 구조 + Group/Item으로 네비게이션 구성. Ctrl+[ 단축키.

Header + Sidebar + Content + Footer 4영역 페이지 레이아웃 템플릿. Sidebar 컴포넌트와 조합.

확인/취소 대화 상자. danger 변형으로 위험 작업 확인을 지원합니다.

비동기 검색 콤보박스. 디바운스 + 로딩 스피너를 내장합니다.

세로 탭 레이아웃. 좌측 탭 리스트 + 우측 패널 구성입니다.

테이블 컬럼 표시/숨김 토글러. Popover + Checkbox 리스트입니다.

계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론.

인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소.

칸반 보드. HTML5 DnD로 카드를 컬럼 간 드래그&드롭.

마크다운 리치 텍스트 에디터. 서식 툴바 + textarea 조합.

코드 비교 뷰어. LCS 알고리즘 기반 unified/split 모드 diff.

웹훅 설정 패널. URL 입력 + 이벤트 체크박스 + 재시도 설정 + 테스트 버튼.

피처 플래그 관리 패널. 플래그 토글 + 환경 배지 + 롤아웃 % 조절.

데이터 임포트 마법사. 4단계: 업로드 → 컬럼 매핑 → 미리보기 → 확인.

메가 메뉴. Popover + CSS grid 멀티컬럼 + 카테고리 헤딩 + footer 슬롯.

일괄 작업 바. 선택 카운트 배지 + DropdownMenu 액션 목록 + 해제 버튼.

필터 프리셋 관리. 현재 필터를 저장하고 불러오는 Popover UI.

알림 센터. 벨 아이콘 트리거 + 미읽음 배지 + 스크롤 알림 목록.

감사 로그 타임라인. 아바타 + 액션 텍스트 + 메타데이터 배지 레이아웃.

변경 이력 타임라인. 액션별 색상 코딩 + 확장 가능한 diff 뷰.

AI 채팅 사이드바. 대화 목록, 검색, 새 대화 버튼.

채팅 입력 컴포넌트. 자동 리사이즈 textarea, 파일 첨부, 모델/스타일 Select.

채팅 메시지 목록. 역할별 말풍선, 타이핑 인디케이터, 자동 스크롤.

필터링 가능한 데이터 탐색 영역. compact SurfaceLayout 안에서 SearchCombobox + StatusSelect + DataTable을 조합.

Vercel 스타일 프로젝트 개요 영역. DashboardGrid + DeploymentTimeline + EnvPanel 조합.

설정 페이지의 사이드바 + 콘텐츠 레이아웃. SidebarNav + children 슬롯 조합.

작업 관리 대시보드. TaskList + ActivityFeed + TeamMemberList + QuickActions + FilterBar 조합.

배포 관리 통합 대시보드. BranchSelect + StatusSelect + QuickActions + DeploymentTimeline + DomainTable + EnvPanel 조합.

워크플로우 실행 이력 화면. 검색/상태 필터 + DataTable + 상세 Dialog 탭 뷰 조합.

AI 챗봇 어시스턴트 화면. ChatSidebar + ChatMessageList + ChatInput 조합.

SQL 에디터 + 쿼리 결과 테이블. SqlEditor와 QueryResultsTable 조합.

알림 관리 Surface. DataTable + AlertBuilder 조합.

리텐션 히트맵 분석 Surface. RetentionHeatmap 래퍼.

빌링 페이지 Surface. StatCard + BarChart + DataTable 조합.

프로젝트 설정 Surface. SettingsForm + DataTable + CodeSnippetViewer + Retention Policy + Cleanup Preview + Storage Usage 조합.

분석 대시보드 Surface. StatCard + LineChart + BarChart 조합.

실시간 대시보드 Surface. ConnectionIndicator + StatCard + ActivityFeed 조합.

세그먼트 관리 Surface. DataTable + SegmentBuilder 조합.

사용자 탐색 Surface. DataTable + FilterBar 조합.

획득 분석 Surface. 3탭(Overview, Channels, Campaigns) + StatCard + LineChart + DataTable 조합.

퍼널 분석 Surface. StepBuilder + 3탭(Funnel, Breakdown, Trend) + FunnelChart + DataTable 조합.

분석 Surface. 4탭(Trend, Distribution, Composition, Data) + 다중 차트 + DataTable 조합.

경로 분석 Surface. SankeyChart + 6탭(Flow, Top Paths, Drop-off, Patterns, Entry/Exit, Dwell) + BarChart + DataTable 조합.

코호트 비교 Surface. ComparisonChart + RetentionHeatmap + DataTable + N-cohort 지원 (최대 5개). 4탭 조합.

이벤트 카탈로그 Surface. DataTable + EventIcon + EventSparkline + EventMetaEditor 조합.

커스텀 대시보드 Surface. WidgetGrid + ReportBuilder + ReportWidget + FilterBar 조합.

E2E 테스트 디버깅 워크스페이스. 2-pane 레이아웃 — 사이드바 테스트 목록 + 탭 콘텐츠 뷰어 (Video/Screenshots/Network/Console/Trace).

스크린샷 비주얼 리그레션 관리 + 승인 워크플로우. 3-column 레이아웃 — 스냅샷 리스트 + 이미지 diff 뷰어.

다차원 테스트 품질 분석 대시보드. Summary cards + 6-tab multi-chart (Overview/Stability/Failures/Flaky/Performance/Advanced).

사용자 상세 프로필 Surface. Avatar + StatCard + GaugeChart + Progress + DataTable + FilterBar 조합.

인사이트 대시보드 Surface. InsightsPanel 래핑 + 탐지 실행, 시간 범위 필터, 에러 표시, dismissed 토글, 탐지 메서드/파라미터 제어.

프로젝트 개요 Surface. SummaryRow + NavCards + LineChart + BarChart + DataTable + CodeSnippetViewer + Dashboard CRUD 조합.

카드 그리드 기반 마켓플레이스 카탈로그. 검색, 탭 필터, 정렬 지원.

상품/아이템 상세 페이지. 태그, 저자, 콘텐츠, 리뷰 섹션 포함.