### 작업과 관련된 정보를 제공할 때 사용하세요 (Assistive button) 주요 동작(Action button) 이외에 사용자의 행동을 보조하는 기능을 제공합니다. 닫기 버튼으로 사용하지 않습니다.

### 작업과 관련된 정보를 제공할 때 사용하세요 (Scroll) 작업과 관련된 정보를 제공합니다. 정해진 높이(Max-height)를 넘길 경우 스크롤을 제공합니다.

### 사용자의 정보 입력이 필요할 경우 사용하세요 페이지를 벗어나지 않고 사용자로부터 입력을 받습니다. 다음 단계를 진행하기 위해 사용자의 입력 값이 필수적으로 필요한 경우 사용합니다.

## Best practices ### Scroll ### Close button ### Button label ### Title ## Patterns ### Dialog에서 발생한 오류는 인라인 메시지를 사용해 알리세요 Dialog에서 발생한 오류는 인라인 메시지로 알립니다. Alert dialog나 Toast를 사용하지 마세요. ## Guidelines ### Height Dialog의 최대 높이(Max-height)는 전체 화면 높이의 80%로 설정됩니다. ### Close behavior * **Close button**: Dialog는 헤더의 Close 버튼으로 닫을 수 있습니다. * **Backdrop 클릭 / ESC**: 배경을 클릭하거나 키보드 ESC를 눌러 Dialog를 닫을 수 있습니다. ### Scroll behavior # Design Principles URL: /docs/getting-started/principles Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(overview)/principles.mdx Vapor UI의 컴포넌트 아키텍처와 개발 철학을 이끄는 핵심 디자인 원칙 이 문서에서는 Vapor UI의 설계 철학과 6가지 핵심 원칙을 설명합니다. 이 원칙들을 이해하면 컴포넌트를 더 효과적으로 활용할 수 있습니다. ## 1. Preset 기반의 컴파운드 패턴 Vapor UI는 합성 컴포넌트 패턴을 채택하여 편의성과 유연성을 함께 제공합니다. 빠른 구현이 필요할 때는 Preset 컴포넌트를, 세밀한 제어가 필요할 때는 Primitive 컴포넌트를 사용합니다. ```tsx // Preset 패턴 (빠르고 간편) Trigger Contents // Primitive 패턴 (완전한 제어) Trigger Contents ``` 이 접근법의 장점은 다음과 같습니다. * **빠른 시작**: Preset 컴포넌트로 즉시 구현할 수 있습니다. * **세밀한 제어**: Primitive 컴포넌트로 커스텀 동작을 구현할 수 있습니다. * **혼합 사용**: 같은 애플리케이션에서 두 패턴을 함께 사용할 수 있습니다. ## 2. 접근성 Vapor UI는 [Base UI](https://base-ui.com/react/overview/quick-start)를 기반으로 [WCAG 2.2](https://www.w3.org/TR/WCAG22/) AA를 준수합니다. [키보드 네비게이션](https://www.w3.org/TR/WCAG22/#keyboard-accessible)과 [포커스 표시](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance)를 기본으로 지원합니다. ### 접근성 기능 * **Base UI 통합**: ARIA 속성, 키보드 내비게이션, 스크린 리더를 자동으로 지원합니다. * **색상 대비 준수**: 자체 개발한 Color Generator가 WCAG AA/AAA 대비 비율을 보장합니다. * **수학적 디자인 토큰**: 일관된 시각적 위계를 위해 수학적 비율로 생성된 토큰을 사용합니다. ```tsx // 적절한 ARIA 속성과 키보드 처리가 자동으로 포함됨 설정 열기 ``` ### Color Generator 시스템 Color Generator는 지각적 색상 모델을 사용하여 접근성을 충족하는 색상 팔레트를 생성합니다. ```tsx // 색상이 자동으로 대비 요구사항을 충족함 Primary Success Warning ``` ## 3. 일관된 네이밍 규칙 모든 컴포넌트는 일관된 네이밍 규칙을 따릅니다. 이 규칙을 통해 컴포넌트 사용법을 예측할 수 있습니다. * **독립 컴포넌트**: 단일 이름을 사용합니다. * **합성 컴포넌트**: Dot Notation 표기법을 사용합니다. ```tsx // 단일 컴포넌트 상태 // 합성 컴포넌트 프로젝트 상태 현재 개발 진행상황 섹션 1 섹션 2 섹션 3 ``` ## 4. 예측 가능한 속성 명명 컴포넌트 속성은 시각적 옵션과 논리적 상태를 기반으로 체계적인 규칙을 따릅니다. ### 시각적 옵션 ```tsx // 크기 변형은 일관된 스케일을 따름 ``` **함수 형태** — 컴포넌트의 내부 state에 따라 렌더링 내용을 동적으로 바꿀 때 사용합니다. 함수는 `(props, state)` 두 인자를 받습니다. ```tsx import { Switch } from '@vapor-ui/core'; import { DarkIcon, LightIcon } from '@vapor-ui/icons'; export default function Example() { return ( ( {state.checked ? : } )} /> ); } ``` ## Primitive 직접 조합하기 Primitive를 직접 조합하면 Portal 위치, Overlay 렌더링 순서 등 레이어 구조 전체를 제어할 수 있습니다. ```tsx import { Button, Dialog } from '@vapor-ui/core'; export default function Example() { return ( 열기 제목 내용 닫기} /> ); } ``` # Styling URL: /docs/getting-started/styling Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/styling.mdx Vapor UI 컴포넌트를 스타일링하고 커스터마이징하는 방법을 설명합니다. Vapor UI는 단순한 스타일 오버라이드부터 컴포넌트 구조 변경까지 단계별 커스터마이징을 지원합니다. ## 1. 기본 스타일링 (className, style) 가장 익숙한 방식인 `className`과 `style`을 사용합니다. 빠른 스타일 수정이 필요하거나 기존 CSS 체계를 유지해야 할 때 적합합니다. ### className 외부 CSS 파일이나 CSS 모듈의 클래스를 적용합니다. ```tsx import { Button } from '@vapor-ui/core'; export default function Example() { return ; } ``` ### style 인라인 스타일을 통해 동적인 스타일을 직접 주입합니다. ```tsx import { Button } from '@vapor-ui/core'; export default function Example() { return ( ); } ``` ## 2. `$css` 속성 Vapor UI가 권장하는 기본 방식입니다. 별도의 CSS 파일 없이 컴포넌트에서 직접 스타일을 제어할 수 있습니다. ### 기본 CSS 속성 수정 CSS 속성을 객체 형태로 전달하여 스타일을 수정합니다. ```tsx import { Button } from '@vapor-ui/core'; export default function Example() { return ( ); } ``` ### 토큰 기반 스타일링 디자인 토큰을 사용해 일관된 스타일을 유지하세요. 타입 지원을 통해 오타를 방지할 수 있습니다. ```tsx import { Button } from '@vapor-ui/core'; export default function Example() { return ( ); } ``` ### 반응형 및 가상 선택자 반응형 조건(breakpoints)과 가상 선택자(`_hover` 등)를 `$css` 안에서 한 번에 정의할 수 있습니다. ```tsx import { Button } from '@vapor-ui/core'; export default function Example() { return ( ); } ``` ## 3. 상태 기반 스타일링 컴포넌트의 상태(checked, invalid 등)에 따라 스타일을 유연하게 변경할 수 있습니다. ### 함수형 className, style `className`과 `style`에 함수를 전달하여 현재 상태에 맞는 스타일을 동적으로 반환합니다. ```tsx import { Checkbox } from '@vapor-ui/core'; export default function Example() { return ( (state.checked ? 'checkbox-checked' : 'checkbox-unchecked')} style={(state) => ({ backgroundColor: state.invalid ? 'color-mix(in srgb, red 12%, transparent)' : undefined, })} /> ); } ``` ### Data Attributes 컴포넌트 상태는 `data-*` 속성으로 노출됩니다. 상태별 스타일 로직을 CSS 파일로 분리할 때 유용합니다. ```css /* 데이터 속성을 활용한 스타일 정의 */ .checkbox[data-checked] { background-color: var(--vapor-color-background-primary-200); } .checkbox[data-invalid] { border-color: var(--vapor-color-border-danger); } ``` ### 함수형 render `render` prop을 사용하면 렌더링되는 엘리먼트 자체와 클래스 구성을 직접 제어할 수 있습니다. ```tsx import { NavigationMenu } from '@vapor-ui/core'; export default function Example() { return ( ( )} /> ); } ``` # Tailwind CSS v4 URL: /docs/getting-started/tailwindcss-v4 Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/tailwindcss-v4.mdx Vapor UI와 함께 Tailwind CSS v4를 사용하세요. 이 문서에서는 Vapor UI와 Tailwind CSS v4를 함께 설정하는 방법을 설명합니다. 설정을 완료하면 Vapor UI 컴포넌트와 Tailwind 유틸리티 클래스를 함께 사용할 수 있습니다. ## 설정 메인 CSS 파일(예: `global.css`)에 아래 코드를 추가합니다. ```css /* global.css */ /* 1. 스타일 우선순위 정의 */ @layer tw-theme, vapor, tw-utilities; @import '@vapor-ui/core/tailwind.css'; /* 2. Tailwind CSS 연결 */ @import 'tailwindcss/theme.css' layer(tw-theme); @import 'tailwindcss/utilities.css' layer(tw-utilities); ``` 설정이 완료되면 Vapor UI 컴포넌트와 Tailwind 유틸리티를 함께 사용할 수 있습니다. ## Vapor 유틸리티 클래스 `v-` 접두사가 붙은 Vapor 전용 유틸리티 클래스를 사용할 수 있습니다. ### 디자인 토큰 클래스 Vapor의 색상, 간격, 둥근 모서리를 Tailwind 문법으로 사용합니다. `v-` 접두사를 추가하여 Vapor 디자인 토큰을 적용합니다. * **색상**: `bg-v-blue-500`, `text-v-red-300`, `border-v-gray-900` * **간격**: `p-v-100`, `m-v-200`, `gap-v-400`, `w-v-400` * **둥근 모서리**: `rounded-v-200`, `rounded-t-v-400` * **폰트 굵기**: `font-v-400`, `font-v-700` Tailwind의 모든 [유틸리티 클래스](https://tailwindcss.com/docs/theme#theme-variable-namespaces)와 조합할 수 있습니다. ### 시맨틱 유틸리티 클래스 의미 기반 색상 클래스를 제공합니다. Primary, Success, Warning 등의 역할에 맞는 색상을 적용합니다. * **배경색**: `bg-v-primary`, `bg-v-secondary`, `bg-v-success`, `bg-v-warning`, `bg-v-danger` * **텍스트색**: `text-v-primary`, `text-v-success`, `text-v-warning`, `text-v-danger`, `text-v-accent` * **테두리색**: `border-v-primary`, `border-v-success`, `border-v-warning`, `border-v-danger` ## 스타일 우선순위 CSS `@layer` 규칙으로 스타일 우선순위 계층을 정의합니다. 1. Vapor 컴포넌트 기본 스타일 2. Vapor 유틸리티 클래스 3. Tailwind 유틸리티 (가장 높은 우선순위) Tailwind 유틸리티가 가장 높은 우선순위를 가지므로 `className="bg-blue-500"`와 같은 클래스로 Vapor 컴포넌트를 커스터마이징할 수 있습니다. ## CSS Reset 설정 Vapor UI는 필요한 스타일 초기화를 포함합니다. Tailwind의 `preflight.css`는 사용하지 않는 것을 권장합니다. `preflight.css`가 필요한 경우 레이어 순서를 다음과 같이 조정합니다. ```css /* preflight를 사용해야 하는 경우 */ @layer tw-theme, vapor.theme, tw-base, vapor.reset, vapor.components, vapor.utilities, tw-utilities; @import '@vapor-ui/core/tailwind.css'; @import 'tailwindcss/theme.css' layer(tw-theme); @import 'tailwindcss/preflight.css' layer(tw-base); @import 'tailwindcss/utilities.css' layer(tw-utilities); ``` > 이 설정은 스타일 충돌 가능성이 있으므로 필요한 경우에만 사용합니다. # Theming URL: /docs/getting-started/theming Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/theming.mdx Vapor UI의 테마 시스템에 대해 설명합니다. # Design Tokens URL: /docs/getting-started/tokens Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/tokens.mdx Vapor UI의 디자인 토큰에 대해 설명합니다. # Agent Skills URL: /docs/getting-started/ai-skill Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(tools)/ai-skill.mdx AI Agent에서 Vapor UI 스킬을 설치하고 사용하는 방법 이 문서에서는 AI Agent에서 Vapor UI 스킬을 설치하고 활용하는 방법을 설명합니다. ## 개요 Vapor UI 스킬은 AI Agent가 Vapor UI 컴포넌트를 이해하고 코드를 생성할 수 있도록 돕는 Agent Skill입니다. 컴포넌트 조회, 예제 코드 생성, Figma 디자인 변환 등의 기능을 제공합니다. ## 설치 ```bash npx skills add goorm-dev/vapor-ui ``` 설치가 완료되면 AI Agent가 자동으로 스킬을 인식합니다. ## 사용 방법 ### 자동 트리거 다음과 같은 요청 시 스킬이 자동으로 활성화됩니다: * "vapor-ui 컴포넌트 목록 보여줘" * "Button 컴포넌트 사용법 알려줘" * "vapor-ui로 로그인 페이지 만들어줘" * "이 Figma 디자인을 코드로 변환해줘" * "아이콘 찾아줘" ### 명시적 호출 ``` /vapor-ui Button 사용법 알려줘 ``` ## 주요 기능 ### 컴포넌트 조회 사용 가능한 컴포넌트 목록과 상세 정보(props, variants)를 조회합니다. **예시 요청:** * "어떤 컴포넌트가 있어?" * "Avatar 컴포넌트 props 알려줘" * "폼 관련 컴포넌트 뭐 있어?" ### 예제 코드 생성 컴포넌트별 예제 코드를 조회하고, 요청에 맞는 UI 코드를 생성합니다. **예시 요청:** * "Button 예제 코드 보여줘" * "navbar block1 코드 참고해서 만들어줘" * "로그인 폼 만들어줘" ### 아이콘 검색 `@vapor-ui/icons` 패키지의 아이콘을 검색합니다. **예시 요청:** * "arrow 아이콘 찾아줘" * "outline 스타일 아이콘 목록" * "검색 아이콘 이름이 뭐야?" ### Figma 디자인 변환 Figma URL을 제공하면 디자인을 분석하여 Vapor UI 코드로 변환합니다. **예시 요청:** * "이 Figma 디자인 코드로 만들어줘: [https://figma.com/design/](https://figma.com/design/)..." * "시안 구현해줘" ## 버전 지정 프로젝트의 Vapor UI 버전을 자동으로 감지합니다. 특정 버전을 사용하려면 직접 지정할 수 있습니다. **자동 감지:** 스킬이 프로젝트의 `package.json` 또는 lock 파일을 분석하여 설치된 버전을 확인합니다. **직접 지정:** ``` 1.0.0-beta.12 버전 기준으로 Button 사용법 알려줘 ``` ## 참고 자료 * [LLMs.txt](/docs/getting-started/llms-txt): Cursor 등 AI 도구에서 문서 활용 * [Agent Skills 문서](https://skills.sh/docs/cli): 스킬 설치 및 관리 # Codemod URL: /docs/getting-started/codemod Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(tools)/codemod.mdx Vapor UI v1 마이그레이션을 자동으로 수행하는 CLI 도구 `@vapor-ui/codemod`를 사용하면 `@vapor-ui/core` v1의 breaking changes를 자동으로 마이그레이션할 수 있습니다. ## 시작하기 전에 `@vapor-ui/core`에서 import한 컴포넌트만 변환됩니다. 다른 라이브러리의 동일한 이름의 컴포넌트는 변환되지 않습니다. * **Git 상태 확인**: uncommitted changes가 있으면 실행되지 않습니다. `--force` 옵션으로 우회할 수 있습니다. * **Dry Run 권장**: `--dry` 옵션으로 변경 사항을 먼저 확인하세요. *** ## 빠른 시작 별도 설치 없이 `npx`로 실행합니다: ```bash npx @vapor-ui/codemod v1/migrate ./src ``` 이 명령어는 아래의 모든 변환을 한 번에 적용합니다. ### 옵션 | 옵션 | 설명 | | -------------------- | ---------------------------------------- | | `--dry` | 변경 사항을 미리보기만 하고 파일에 적용하지 않음 | | `--force` | Git 안전 검사를 우회하고 강제 실행 | | `--parser ` | 파서 지정: `babel`, `ts`, `tsx` (기본값: `tsx`) | | `--extensions ` | 변환할 파일 확장자 (기본값: `tsx,ts,jsx,js`) | *** ## 변환 목록 ### `loop` → `loopFocus` 포커스 루프 동작을 제어하는 prop 이름이 변경됩니다. **대상 컴포넌트:** `Menu`, `Tabs` ```tsx // Before Open ... // After Open ... ``` ```tsx // Before ... // After ... ``` *** ### `trackAnchor` → `disableAnchorTracking` 앵커 추적 prop이 부정형으로 변경됩니다. boolean 값이 반전됩니다. **대상 컴포넌트:** `Popover`, `Menu`, `Tooltip` ```tsx // Before Content // After Content ``` ```tsx // Before ... // After ... ``` 표현식에는 `!` 연산자가 자동으로 추가됩니다: ```tsx // Before // After ``` *** ### `hoverable` → `disableHoverablePopup` Tooltip 팝업의 hover 가능 여부를 제어하는 prop이 부정형으로 변경됩니다. boolean 값이 반전됩니다. **대상 컴포넌트:** `Tooltip` ```tsx // Before Hover me Content // After Hover me Content ``` ```tsx // Before // After ``` *** ### Hover props를 `Root`에서 `Trigger`로 이동 hover 관련 props가 `Root`에서 `Trigger`로 이동합니다. **대상 컴포넌트 및 props:** | Prop | Menu | Popover | Tooltip | | ------------- | :--: | :-----: | :-----: | | `openOnHover` | O | O | - | | `delay` | O | O | O | | `closeDelay` | O | O | O | **Menu:** ```tsx // Before Open ... // After Open ... ``` **Popover:** ```tsx // Before Hover Content // After Hover Content ``` **Tooltip:** ```tsx // Before Hover Content // After Hover Content ``` *** ### `onClearErrors` 제거 `Form.Root`에서 `onClearErrors` prop이 제거됩니다. v1에서는 `errors` prop으로 전달한 에러가 필드 값 변경 시 자동으로 클리어됩니다. **대상 컴포넌트:** `Form` ```tsx // Before { setErrors((prev) => { const next = { ...prev }; Object.keys(clearedErrors).forEach((name) => delete next[name]); return next; }); }} > // After ``` *** ### `selected` → `current` 현재 선택된 링크를 나타내는 prop 이름이 Breadcrumb API와 일관성을 맞추기 위해 변경됩니다. **대상 컴포넌트:** `NavigationMenu` ```tsx // Before Home // After Home ``` ```tsx // Before Dashboard // After Dashboard ``` *** ## 고급 사용법 ### 여러 변환이 적용되는 경우 ```tsx // Before import { Menu, Tooltip } from '@vapor-ui/core'; function App() { return ( <> Menu Item 1 Item 2 Hover me Tooltip content ); } // After import { Menu, Tooltip } from '@vapor-ui/core'; function App() { return ( <> Menu Item 1 Item 2 Hover me Tooltip content ); } ``` ### Alias import 처리 alias로 import한 컴포넌트도 올바르게 변환됩니다: ```tsx // Before import { Menu as VaporMenu } from '@vapor-ui/core'; Open // After Open ``` *** ## 수동 마이그레이션 codemod로 자동 변환할 수 없는 항목입니다. 직접 검색하여 수정하세요. ### `data-selected` → `data-active` CSS 선택자에서 사용되는 data attribute가 변경됩니다. **대상 컴포넌트:** `Tabs`, `NavigationMenu` 기존 Tabs는 상태 이름이 `selected`, `highlighted`, `active`가 혼재되어 있어 "현재 활성 탭"이 무엇인지 직관적이지 않았습니다. v1에서는 `data-active`로 통일합니다. ```css /* Before */ [data-selected] { background-color: var(--color-primary); } /* After */ [data-active] { background-color: var(--color-primary); } ``` CSS 선택자는 컴포넌트 import와 무관하게 사용되므로 codemod로 자동 변환할 수 없습니다. `data-selected`를 검색하여 직접 수정하세요. # ESLint Plugin URL: /docs/getting-started/eslint Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(tools)/eslint.mdx ESLint Plugin Vapor를 사용하여 접근성 규칙을 자동으로 검사하고 코드 품질을 향상시키세요. **ESLint Plugin Vapor**는 Vapor UI 컴포넌트의 **접근성 규칙을 자동으로 검사**하여 더 나은 사용자 경험을 보장합니다. ## Why * Vapor UI 컴포넌트를 사용할 때 자주 발생하는 접근성 문제들을 **개발 단계에서 미리 발견**할 수 있습니다. * 수동으로 검토하기 어려운 접근성 가이드라인을 **자동으로 체크**합니다. 이제 개발자는 더 나은 코드를 작성하는 데에만 집중할 수 있습니다. * 웹사이트의 전반적인 사용자 경험을 향상시키고, 더 넓은 사용자층에게 다가갈 수 있습니다. ## Installation 프로젝트에서 사용 중인 패키지 매니저로 플러그인을 설치하세요. `eslint-plugin-vapor`는 eslint-plugin-jsx-a11y, typescript-eslint와 함께 사용할 수 있습니다. ```package-install npm install --save-dev eslint-plugin-vapor eslint-plugin-jsx-a11y typescript-eslint ``` ## Configuration ### Flat Config ESLint 9.0+ 버전을 사용하는 경우, `eslint.config.js` 파일에 다음과 같이 설정하세요: ```js import vapor from 'eslint-plugin-vapor'; export default [ { plugins: { vapor, }, rules: { 'vapor/icon-button-has-aria-label': 'error', 'vapor/navigation-has-aria-label': 'error', }, }, // 또는 recommended 설정 사용 vapor.configs.recommended, ]; ``` ### Legacy Config ESLint 8.x 버전을 사용하는 경우, `.eslintrc.js` 파일에 다음과 같이 설정하세요: ```js module.exports = { plugins: ['vapor'], extends: ['plugin:vapor/legacy'], // 또는 개별 규칙 설정 rules: { 'vapor/icon-button-has-aria-label': 'error', 'vapor/navigation-has-aria-label': 'error', }, }; ``` ## Rules ### icon-button-has-aria-label `IconButton` 컴포넌트에 `aria-label` 속성이 있는지 검사합니다. ```tsx // ❌ // ✅ ``` ### navigation-has-aria-label `NavigationMenu.Root`와 `Breadcrumb.Root` 컴포넌트에 `aria-label` 속성이 있는지 검사합니다. ```tsx // ❌ ... ... // ✅ ... ... ``` ### alt-text-on-avatar `Avatar` 컴포넌트를 이미지로 사용할 때, `src`와 `alt` 속성이 있는지 검사합니다. ```tsx // ❌ // ✅ ``` ### should-have-title-on-dialog `Dialog` 컴포넌트에 `Dialog.Title`, 혹은 `aria-label` 속성이 포함되어 있는지 검사합니다. ```tsx // ❌ // ✅ // 또는 ``` # LLMs.txt URL: /docs/getting-started/llms-txt Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(tools)/llms-txt.mdx Cursor 등 AI 도구에서 Vapor Design System 문서를 활용하는 방법 이 문서에서는 LLMs.txt 파일의 구성과 AI 도구에서 활용하는 방법을 설명합니다. ## LLMs.txt 개요 LLMs.txt는 LLM(Large Language Model)이 Vapor Design System 문서를 이해하도록 구조화한 텍스트 파일입니다. 컨텍스트 창이 제한된 AI 도구에서 핵심 정보를 빠르게 파악할 수 있습니다. ## 파일 구성 | 파일명 | 설명 | | ------------- | ------------------------------------- | | llms.txt | 전체 라우트 및 카테고리 개요를 포함한 메인 인덱스 파일 | | llms-full.txt | 모든 문서(컴포넌트, 가이드, API 등)를 포함한 전체 문서 세트 | ### 인덱스 파일 * [llms.txt](/llms.txt): 각 문서에 대한 요약과 링크를 포함합니다. * [llms-full.txt](/llms-full.txt): 모든 내용을 포함하며 큰 컨텍스트 워크플로우에 적합합니다. ### 문서 경로 **가이드** * [/docs/getting-started/installation.mdx](/docs/getting-started/installation.mdx): 설치 가이드 **디자인 토큰** * [/docs/getting-started/color.mdx](/docs/getting-started/color.mdx): 색상 시스템 * [/docs/getting-started/size.mdx](/docs/getting-started/size.mdx): 크기 및 여백 * [/docs/getting-started/typography.mdx](/docs/getting-started/typography.mdx): 타이포그래피 시스템 **테마** * [/theme/theme-provider.mdx](/theme/theme-provider.mdx): 테마 설정 가이드 **컴포넌트** * [/docs/components/\[component-name\].mdx](/docs/components/avatar.mdx): 컴포넌트별 사용법과 API (예: Avatar) ## AI 도구에서 사용 Cursor 등 LLM 기반 코드 도구에서 LLMs.txt 파일을 활용하려면 `@Docs` 기능을 사용합니다. * [Cursor @Docs 문서](https://docs.cursor.com/context/@-symbols/@-docs) # Box URL: /docs/components/box Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(layouts)/box/index.mdx 레이아웃과 스타일링을 위한 기본 컨테이너 컴포넌트입니다. 디자인 토큰을 활용한 간격, 색상, 크기 등의 속성을 제공합니다. ## Property *** ### Display Types Box 컴포넌트는 다양한 디스플레이 타입을 지원하여 레이아웃을 유연하게 구성할 수 있습니다. ### Background Color Box 컴포넌트는 시맨틱 색상과 팔레트 색상을 모두 지원합니다. ### Spacing 패딩과 마진 속성을 사용하여 요소의 내부 및 외부 여백을 조절할 수 있습니다. ### Layout 플렉스박스 속성을 활용하여 다양한 레이아웃을 구성할 수 있습니다. ### Dimensions 너비와 높이를 설정하거나 최소/최대 크기 제약을 적용할 수 있습니다. ### Visual Styles 테두리 둥글기, 투명도, 텍스트 정렬 등의 시각적 속성을 제어할 수 있습니다. ## Props Table *** ### Box | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Flex URL: /docs/components/flex Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(layouts)/flex/index.mdx 플렉스박스 레이아웃을 쉽게 구현할 수 있는 컨테이너 컴포넌트입니다. Box 컴포넌트를 확장하여 플렉스 관련 기능을 제공합니다. ## Examples *** ### Direction 플렉스 컨테이너의 주축 방향을 설정하여 항목들의 배치 방향을 제어할 수 있습니다. ## Props Table *** ### Flex | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `inline` | `boolean` | - | Displays the container as `inline-flex` instead of `flex`, so it sits inline with surrounding content. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Grid URL: /docs/components/grid Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(layouts)/grid/index.mdx 유연하고 강력한 CSS Grid 기반의 레이아웃 컴포넌트입니다 ## Property *** ### Template Grid의 행과 열 템플릿을 설정하여 레이아웃 구조를 정의할 수 있습니다. ### Flow Grid 아이템들의 자동 배치 방향을 설정할 수 있습니다. ### Inline Grid를 인라인 요소로 표시할 수 있습니다. ### Span Grid 아이템이 차지할 행이나 열의 개수를 설정할 수 있습니다. ## Examples *** ### Layout Patterns 일반적인 레이아웃 패턴들을 Grid로 구현할 수 있습니다. ## Props Table *** ### Grid.Root | Prop | Type | Default | Description | | ----------------- | -------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `flow` | `row`, `column`, `row-dense`, `column-dense` | `row` | Direction in which items without an explicit position are placed, set as the `grid-auto-flow` value. The `-dense` values fill earlier gaps with later items. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `inline` | `boolean` | - | Displays the container as `inline-grid` instead of `grid`, so it sits inline with surrounding content. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `templateColumns` | `string` | - | Column tracks of the grid, set as the `grid-template-columns` value, such as `200px 1fr` or `repeat(3, 1fr)`. | | `templateRows` | `string` | - | Row tracks of the grid, set as the `grid-template-rows` value, such as `auto 1fr` or `repeat(3, 1fr)`. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Grid.Item | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `colSpan` | `string` | - | Columns the item occupies, set as the `grid-column` value, such as `span 2` or `1 / 3`. | | `rowSpan` | `string` | - | Rows the item occupies, set as the `grid-row` value, such as `span 2` or `1 / 3`. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # HStack URL: /docs/components/h-stack Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(layouts)/h-stack/index.mdx 수평으로 아이템들을 배치하는 레이아웃 컴포넌트입니다 ## Property *** ### Reverse HStack의 아이템 순서를 역순으로 배치할 수 있습니다. ### Spacing HStack 아이템 간의 간격을 조정할 수 있습니다. ## Props Table *** ### HStack | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `inline` | `boolean` | - | Displays the container as `inline-flex` instead of `flex`, so it sits inline with surrounding content. | | `reverse` | `boolean` | - | Reverses the order of the children, setting `flex-direction` to `row-reverse`. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # VStack URL: /docs/components/v-stack Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(layouts)/v-stack/index.mdx 수직으로 아이템들을 배치하는 레이아웃 컴포넌트입니다 ## Property *** ### Reverse VStack의 아이템 순서를 역순으로 배치할 수 있습니다. ### Spacing VStack 아이템 간의 간격을 조정할 수 있습니다. ### Alignment VStack 아이템들의 수평 정렬을 조정할 수 있습니다. ### Justify Content VStack 아이템들의 수직 분산을 조정할 수 있습니다. ## Props Table *** ### VStack | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `inline` | `boolean` | - | Displays the container as `inline-flex` instead of `flex`, so it sits inline with surrounding content. | | `reverse` | `boolean` | - | Reverses the order of the children, setting `flex-direction` to `column-reverse`. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Form URL: /docs/components/patterns/form Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/patterns/form/index.mdx 여러 개의 입력 단위를 하나로 묶어 사용자로부터 정보를 수집하는 폼 영역 ### Type: Login ### Type: SignUp ### Type: Authentication ### Type: Research ### Type: Filter ### Type: BottomSheetFilter # Navbar URL: /docs/components/patterns/nav-bar Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/patterns/nav-bar/index.mdx 사용자의 액션에 대한 피드백 혹은 서비스에 대한 메시지를 제공할 때 사용할 수 있습니다. 상황에 따라 컬러와 좌측 아이콘, 닫기 버튼을 적절히 사용합니다. ### Left Aligned Navbar ### Center Aligned Navbar ### Right Aligned Navbar ### Navbar with Login Button ### Logo Centered Navbar ### Page Navigation Navbar # Table URL: /docs/components/patterns/table Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/patterns/table/index.mdx 데이터의 구조화된 표현을 제공하는 데 사용됩니다. 이 문서는 대량의 데이터를 다루는 Data Table의 구현 예시를 안내합니다. Data Table은 데이터를 효율적으로 시각화하고 관리하는 강력한 도구이지만, 내부적으로 복잡한 상태 관리와 로직을 필요로 합니다. 이러한 기능을 컴포넌트 내부에 강결합하면 유지보수가 어렵고 확장성이 떨어지는 문제가 발생할 수 있습니다. 이에 따라 Vapor UI의 Table 컴포넌트는 순수한 뷰(View) 역할에 집중하여 기본적인 구조와 스타일을 제공합니다. 이 문서에서는 `@tanstack/react-table`과 같은 Headless UI 라이브러리를 활용하여 다양한 기능을 유연하게 구현하는 방법을 예시로 제공합니다. ### Basic ### Checkbox ### Ordering ### Sticky ### Collapsed ### Sort ### Scroll ### Filter ### Pagination # Avatar URL: /docs/components/avatar Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/avatar/index.mdx Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다. ## Property *** ### Shape Avatar의 모양을 설정합니다. ### Size Avatar의 크기를 설정합니다. ## Examples *** ### Fallback 이미지가 없거나 로드에 실패한 경우, alt 텍스트의 첫 글자가 자동으로 표시됩니다. 배경색은 alt 문자열을 기반으로 결정됩니다. ### Custom Fallback FallbackPrimitive에 children을 전달하여 커스텀 fallback 콘텐츠를 표시합니다. ### Custom Image `children`으로 `Avatar.ImagePrimitive`와 `Avatar.FallbackPrimitive`를 전달하면 각 슬롯에 직접 props를 적용할 수 있습니다. `src`, `alt`, `crossOrigin` 등 이미지 관련 props는 `Avatar.Root`에 전달하면 내부 Primitive로 자동 전달됩니다. ## Props Table *** ### Avatar.Root | Prop | Type | Default | Description | | ----------------------- | --------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `shape` | `circle`, `square` | `square` | Corner style of the avatar. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the avatar, controlling width, height, corner radius, and the typography of the fallback. | | `onLoadingStatusChange` | `function` | - | Callback fired when the loading status changes. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `fallbackElement` | `ReactElement` | - | Replaces the default `Avatar.FallbackPrimitive`. Ignored when `children` are given. | | `imageElement` | `ReactElement` | - | Replaces the default `Avatar.ImagePrimitive`. Ignored when `children` are given. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `delay` | `number` | `0` | How long to wait before showing the fallback. Specified in milliseconds. | | `keepMounted` | `boolean` | `false` | Whether the image element stays mounted and loads in place instead of being preloaded.
Supports `loading="lazy"` and optimized image components such as `next/image`. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Avatar.ImagePrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Avatar.FallbackPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Badge URL: /docs/components/badge Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/badge/index.mdx Badge는 이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다. ## Property *** ### ColorPalette Badge의 색상을 설정합니다. ### Shape Badge의 모양을 설정합니다. ### Size Badge의 크기를 설정합니다. ## Props Table *** ### Badge | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `colorPalette` | `hint`, `primary`, `success`, `warning`, `danger`, `contrast` | `primary` | Color palette of the badge, applied to its background and text. | | `shape` | `square`, `pill` | `square` | Corner style of the badge. | | `size` | `sm`, `md`, `lg` | `md` | Size of the badge, controlling height, padding, and typography. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Breadcrumb URL: /docs/components/breadcrumb Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/breadcrumb/index.mdx 사용자가 현재 페이지의 위치를 파악하고 이전 페이지로 쉽게 이동할 수 있도록 도와주는 네비게이션 컴포넌트입니다. ## Examples *** ### With Ellipsis 긴 네비게이션 경로에서 중간 단계를 생략 표시로 나타낸 패턴입니다. ### Composition Pattern Breadcrumb 컴포넌트의 다양한 구성 패턴입니다. ## Property *** ### Current 현재 페이지를 나타내는 링크의 상태를 설정할 수 있습니다. ### Size Breadcrumb의 크기를 설정합니다. ## Props Table *** ### Breadcrumb.Root | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the breadcrumb, controlling the typography of the links and the size of the separator and ellipsis icons. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Breadcrumb.RootPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the breadcrumb, controlling the typography of the links and the size of the separator and ellipsis icons. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Breadcrumb.ListPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Breadcrumb.Item | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `current` | `boolean` | `false` | Marks the link as the current page, applying the active color and setting `aria-current="page"` and `aria-disabled` on the `<a>` element. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Breadcrumb.ItemPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Breadcrumb.LinkPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `current` | `boolean` | `false` | Marks the link as the current page, applying the active color and setting `aria-current="page"` and `aria-disabled` on the `<a>` element. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Breadcrumb.Separator | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown as the separator, such as a chevron icon. Replaces the default slash icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Breadcrumb.Ellipsis | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown for the collapsed items. Replaces the default more icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Breadcrumb.EllipsisPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown for the collapsed items. Replaces the default more icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Button URL: /docs/components/button Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/button/index.mdx Button은 사용자가 주요 작업을 수행하도록 돕는 핵심 상호작용 요소입니다. ## Property *** ### Variant Button의 시각적 스타일을 설정합니다. ### ColorPalette Button의 역할에 따른 색상을 설정합니다. ### Disabled Button의 비활성화 상태를 설정합니다. ### Size Button의 크기를 설정합니다. ## Examples *** ### Button with Icon Button의 역할을 직관적으로 표현하기 위해 아이콘과 함께 사용합니다. ## Props Table *** ### Button | Prop | Type | Default | Description | | ----------------------- | ------------------------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `colorPalette` | `primary`, `secondary`, `success`, `warning`, `danger`, `contrast` | `primary` | Color palette of the button, applied to its background, text, and border according to `variant`. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the button, controlling height, padding, and typography. | | `variant` | `fill`, `outline`, `ghost` | `fill` | Visual style of the button. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `focusableWhenDisabled` | `boolean` | `false` | Whether the button should be focusable when disabled. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Callout URL: /docs/components/callout Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/callout/index.mdx Callout은 중요한 정보를 시각적으로 강조하여 사용자에게 전달하는 메시지 컴포넌트입니다. ## Examples *** ### Callout with Icon Callout의 역할을 직관적으로 표현하기 위해 아이콘과 함께 사용합니다. ## Property *** ### ColorPalette Callout의 역할에 따른 색상을 설정합니다. ## Props Table *** ### Callout.Root | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `colorPalette` | `hint`, `primary`, `success`, `warning`, `danger`, `contrast` | `primary` | Color palette of the callout, applied to its border, background, and text. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Callout.Icon | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Card URL: /docs/components/card Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/card/index.mdx Card는 이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다. ## Examples *** ### Layout 상황에 따라, 일부 영역을 생략하여 Card를 구성할 수 있습니다. ## Props Table *** ### Card.Root | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Card.Header | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Card.Body | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Card.Footer | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Checkbox URL: /docs/components/checkbox Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/checkbox/index.mdx Checkbox는 여러 항목 중 복수 선택을 가능하게 하는 입력 컴포넌트입니다. ## Property *** ### Indeterminate Checkbox의 혼합 상태 여부를 설정합니다. ### Disabled Checkbox의 비활성화 상태를 설정합니다. ### Invalid Checkbox의 유효하지 않음 상태를 설정합니다. ### Read Only Checkbox의 읽기 전용 상태를 설정합니다. ### Size Checkbox의 크기를 설정합니다. ## Props Table *** ### Checkbox.Root | Prop | Type | Default | Description | | ----------------- | --------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `invalid` | `boolean` | `false` | Marks the checkbox as invalid, applying error styles. Sets `aria-invalid` on the `<span>` element. | | `size` | `md`, `lg` | `md` | Size of the checkbox, controlling its width, height, and corner radius, and the size of its check mark. | | `checked` | `boolean` | - | Whether the checkbox is currently ticked.

To render an uncontrolled checkbox, use the `defaultChecked` prop instead. | | `defaultChecked` | `boolean` | `false` | Whether the checkbox is initially ticked.

To render a controlled checkbox, use the `checked` prop instead. | | `onCheckedChange` | `function` | - | Event handler called when the checkbox is ticked or unticked. | | `value` | `string` | - | The checkbox's value. Identifies it within a [Checkbox Group](https://base-ui.com/react/components/checkbox-group), falling back to `name` when omitted.
When submitting a form, a checked box submits `value`; with no `value`, it submits the native "on". | | `children` | `ReactNode` | - | Element shown inside the checkbox in place of the default `Checkbox.IndicatorPrimitive`, such as a `Checkbox.IndicatorPrimitive` with custom props. Anything other than a single element is ignored and the default indicator is shown. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `form` | `string` | - | Identifies the form that owns the hidden input.
Useful when the checkbox is rendered outside the form. | | `id` | `string` | - | The id of the input element. | | `indeterminate` | `boolean` | `false` | Whether the checkbox is in a mixed state: neither ticked, nor unticked. | | `inputRef` | `React.Ref` | - | A ref to access the hidden `<input>` element. | | `name` | `string` | - | Identifies the field when a form is submitted. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `parent` | `boolean` | `false` | Whether the checkbox controls a group of child checkboxes.

Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group). | | `readOnly` | `boolean` | `false` | Whether the user should be unable to tick or untick the checkbox. | | `required` | `boolean` | `false` | Whether the user must tick the checkbox before submitting a form. | | `uncheckedValue` | `string` | - | The value submitted with the form when the checkbox is unchecked.
By default, unchecked checkboxes do not submit any value, matching native checkbox behavior. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Checkbox.IndicatorPrimitive | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown in place of the default check mark or dash, such as an icon component. The element receives a `width` and `height` of `100%`. Anything other than a single element is ignored and the default icon is shown. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `keepMounted` | `boolean` | `true` | Whether to keep the element in the DOM when the checkbox is not checked. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Collapsible URL: /docs/components/collapsible Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/collapsible/index.mdx Collapsible은 콘텐츠를 접었다 펼칠 수 있는 대화형 컴포넌트입니다. 아코디언이나 확장 가능한 섹션을 구현할 때 사용합니다. ## Property *** ### Open State `defaultOpen`으로 초기 열림 상태를 설정하거나, `open`과 `onOpenChange`로 제어 모드로 사용합니다. ### Disabled Collapsible의 비활성화 상태를 설정합니다. ### Keep Mounted `keepMounted`를 사용하면 패널이 닫힌 상태에서도 DOM에 유지됩니다. ## Props Table *** ### Collapsible.Root | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `defaultOpen` | `boolean` | `false` | Whether the collapsible panel is initially open.

To render a controlled collapsible, use the `open` prop instead. | | `onOpenChange` | `function` | - | Event handler called when the panel is opened or closed. | | `open` | `boolean` | - | Whether the collapsible panel is currently open.

To render an uncontrolled collapsible, use the `defaultOpen` prop instead. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Collapsible.Trigger | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Collapsible.Panel | Prop | Type | Default | Description | | ------------------ | --------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `hiddenUntilFound` | `boolean` | `false` | Allows the browser's built-in page search to find and expand the panel contents.

Overrides the `keepMounted` prop and uses `hidden="until-found"`
to hide the element without removing it from the DOM. | | `keepMounted` | `boolean` | `false` | Whether to keep the element in the DOM while the panel is hidden.
This prop is ignored when `hiddenUntilFound` is used. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Dialog URL: /docs/components/dialog Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/dialog/index.mdx Dialog는 페이지 위에 모달 형태로 정보를 표시하거나 작업을 수행하도록 하는 컴포넌트입니다. ## Property *** ### Size Dialog의 크기를 설정합니다. ### Modal Behavior Dialog의 모달 동작을 설정합니다. ## Examples *** ### Custom Usage Dialog 컴포넌트의 다양한 구성 패턴입니다. ### Custom Overlay `Dialog.PortalPrimitive`, `Dialog.OverlayPrimitive`, `Dialog.PopupPrimitive`를 직접 조합하면 오버레이 스타일 등 레이어 구조를 제어할 수 있습니다. ## Props Table *** ### Dialog.Root | Prop | Type | Default | Description | | ---------------------- | ---------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size` | `md`, `lg`, `xl` | `md` | Width of the dialog popup. | | `defaultOpen` | `boolean` | `false` | Whether the dialog is initially open.

To render a controlled dialog, use the `open` prop instead. | | `onOpenChange` | `function` | - | Event handler called when the dialog is opened or closed. | | `open` | `boolean` | - | Whether the dialog is currently open. | | `closeOnClickOverlay` | `boolean` | `true` | When `true`, clicking the overlay closes the dialog. | | `actionsRef` | `React.RefObject` | - | A ref to imperative actions.
- `unmount`: Manually unmounts the dialog.
Call this after any externally controlled closing animation finishes.
- `close`: Closes the dialog imperatively when called. | | `children` | `ReactNode`, `function` | - | The content of the dialog.
This can be a regular React node or a render function that receives the `payload` of the active trigger. | | `defaultTriggerId` | `string`, `null` | - | ID of the trigger that the dialog is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog. | | `handle` | `DialogHandle` | - | A handle to associate the dialog with a trigger.
If specified, allows external triggers to control the dialog's open state.
Can be created with the Dialog.createHandle() method. | | `modal` | `boolean`, `trap-focus` | `true` | Determines if the dialog enters a modal state when open.
- `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.
- `false`: user interaction with the rest of the document is allowed.
- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.

When `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so
touch screen readers can escape the popup. | | `onOpenChangeComplete` | `function` | - | Event handler called after any animations complete when the dialog is opened or closed. | | `triggerId` | `string`, `null` | - | ID of the trigger that the dialog is associated with.
This is useful in conjunction with the `open` prop to create a controlled dialog.
There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set). | ### Dialog.Popup | Prop | Type | Default | Description | | ---------------- | ------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `overlayElement` | `ReactElement` | - | Replaces the default `Dialog.OverlayPrimitive`. Use to change the backdrop. | | `portalElement` | `ReactElement` | - | Replaces the default `Dialog.PortalPrimitive`. Use to change the portal container. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the dialog is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `initialFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the dialog is opened.
By default, focus moves to the first tabbable element inside the popup, except when the dialog
is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (first tabbable element or popup).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Dialog.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ----------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `container` | `HTMLElement`, `ShadowRoot`, `React.RefObject`, `null` | - | A parent element to render the portal element into. | | `keepMounted` | `boolean` | `false` | Whether to keep the portal mounted in the DOM while the popup is hidden. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Dialog.OverlayPrimitive | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `forceRender` | `boolean` | `false` | Whether the backdrop is forced to render even when nested. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Dialog.PopupPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the dialog is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `initialFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the dialog is opened.
By default, focus moves to the first tabbable element inside the popup, except when the dialog
is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (first tabbable element or popup).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Dialog.Trigger | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `handle` | `DialogHandle` | - | A handle to associate the trigger with a dialog.
Can be created with the Dialog.createHandle() method. | | `id` | `string` | - | ID of the trigger. In addition to being forwarded to the rendered element,
it is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop). | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `payload` | `unknown` | - | A payload to pass to the dialog when it is opened. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Dialog.Close | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Dialog.Title | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Dialog.Description | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Dialog.Header | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Dialog.Body | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Dialog.Footer | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Field URL: /docs/components/field Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/field/index.mdx Field는 폼 요소들을 감싸는 컨테이너 컴포넌트로, 라벨, 설명, 에러 메시지, 성공 메시지 등을 제공합니다. ## Examples *** ### With Description Field에 대한 추가 설명을 표시합니다. ### Error and Success `Field.Error`와 `Field.Success`를 사용하여 유효성 검사 결과를 표시합니다. ### Required 필수 Field와 선택 Field를 구분하여 표시합니다. ### Disabled disabled 속성을 사용하여 비활성화된 Field를 만들 수 있습니다. ### With RadioGroup RadioGroup과 Field를 함께 사용합니다. `Field.Item`을 사용하여 각 Radio 옵션을 라벨과 함께 그룹화할 수 있습니다. ### With Form Elements TextInput, Checkbox, Switch, Select 등 다양한 폼 요소와 함께 사용합니다. ## Property *** ### Validation `validationMode`를 통해 유효성 검사 타이밍을 설정합니다. `match` prop으로 특정 에러 타입에 대한 메시지를 표시합니다. ### Disabled Field의 비활성화 상태를 설정합니다. ## Props Table *** ### Field.Root | Prop | Type | Default | Description | | ------------------------ | --------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `actionsRef` | `React.RefObject` | - | A ref to imperative actions.
- `validate`: Validates the field when called. | | `dirty` | `boolean` | - | Whether the field's value has been changed from its initial value.
Useful when the field state is controlled by an external library. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction.
Takes precedence over the `disabled` prop on the `<Field.Control>` component. | | `invalid` | `boolean` | - | Whether the field is invalid.
Useful when the field state is controlled by an external library. | | `name` | `string` | - | Identifies the field when a form is submitted.
Takes precedence over the `name` prop on the `<Field.Control>` component. | | `touched` | `boolean` | - | Whether the field has been touched.
Useful when the field state is controlled by an external library. | | `validate` | `function` | - | A function for custom validation. Return a string or an array of strings with
the error message(s) if the value is invalid. Returning nothing, `null`, an empty
string, or an empty array means the value is valid.
Asynchronous functions are supported, but they do not prevent form submission
when using `validationMode="onSubmit"`. | | `validationDebounceTime` | `number` | `0` | How long to wait between `validate` callbacks if
`validationMode="onChange"` is used. Specified in milliseconds. | | `validationMode` | `onBlur`, `onChange`, `onSubmit` | `onSubmit` | Determines when the field should be validated.
This takes precedence over the `validationMode` prop on `<Form>`.

- `onSubmit`: triggers validation when the form is submitted, and re-validates on change after submission.
- `onBlur`: triggers validation when the control loses focus.
- `onChange`: triggers validation on every change to the control value. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Field.Label | Prop | Type | Default | Description | | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `foreground` | `hint`, `normal`, `white`, `primary-100`, `primary-200`, `primary`, `secondary-100`, `secondary-200`, `secondary`, `success-100`, `success-200`, `success`, `warning-100`, `warning-200`, `warning`, `danger-100`, `danger-200`, `danger`, `hint-100`, `hint-200`, `contrast-100`, `contrast-200`, `contrast`, `primary-strong`, `success-strong`, `warning-strong`, `danger-strong`, `normal-100`, `normal-200`, `inverse`, `staticWhite`, `staticBlack` | `secondary` | Text color of the label. | | `typography` | `body1`, `display1`, `display2`, `display3`, `display4`, `heading1`, `heading2`, `heading3`, `heading4`, `heading5`, `heading6`, `subtitle1`, `subtitle2`, `body2`, `body3`, `body4`, `code1`, `code2` | `body2` | Typography style of the label text. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `nativeLabel` | `boolean` | `true` | Whether the component renders a native `<label>` element when replacing it via the `render` prop.
Set to `false` if the rendered element is not a label (for example, `<div>`).

This is useful to avoid inheriting label behaviors on `<button>` controls (such as `<Select.Trigger>` and `<Combobox.Trigger>`), including avoiding `:hover` on the button when hovering the label, and preventing clicks on the label from firing on the button. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Field.Description | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Field.Error | Prop | Type | Default | Description | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `match` | `boolean`, `badInput`, `customError`, `patternMismatch`, `rangeOverflow`, `rangeUnderflow`, `stepMismatch`, `tooLong`, `tooShort`, `typeMismatch`, `valueMissing` | - | Shows the message only for the given [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) key, such as `valueMissing` or `typeMismatch`. Set to `true` to always show it, letting an external library control its visibility. When omitted, the message shows whenever the field is invalid. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Field.Success | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `match` | `boolean`, `valid` | `valid` | Controls when the message is shown. With `'valid'`, it shows once the field passes validation. Set to `true` to always show it, letting an external library control its visibility. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Field.Item | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the wrapped control should ignore user interaction.
The `disabled` prop on `<Field.Root>` takes precedence over this. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # FloatingBar URL: /docs/components/floating-bar Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/floating-bar/index.mdx FloatingBar는 하단에 고정되어 주요 액션을 포함하는 컴포넌트입니다. ## Examples *** ### Actions FloatingBar는 다양한 액션 요소를 담을 수 있습니다. ### Controlled FloatingBar는 제어 형태로 사용되어, 여러 상태를 동시에 관리할 수 있습니다. ## Props Table *** ### FloatingBar.Root | Prop | Type | Default | Description | | ---------------------- | --------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `defaultOpen` | `boolean` | `false` | Whether the popover is initially open.

To render a controlled popover, use the `open` prop instead. | | `onOpenChange` | `function` | - | Event handler called when the popover is opened or closed. | | `open` | `boolean` | - | Whether the popover is currently open. | | `actionsRef` | `React.RefObject` | - | A ref to imperative actions.
- `unmount`: Manually unmounts the popover.
Call this after any externally controlled closing animation finishes.
- `close`: Closes the popover imperatively when called. | | `children` | `ReactNode`, `function` | - | The content of the popover.
This can be a regular React node or a render function that receives the `payload` of the active trigger. | | `defaultTriggerId` | `string`, `null` | - | ID of the trigger that the popover is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open popover. | | `handle` | `PopoverHandle` | - | A handle to associate the popover with a trigger.
If specified, allows external triggers to control the popover's open state. | | `modal` | `boolean`, `trap-focus` | `false` | Determines if the popover enters a modal state when open.
- `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled.
- `false`: user interaction with the rest of the document is allowed.
- `'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.

On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.

When `modal` is `true`, focus trapping is enabled only if `<Popover.Close>` is rendered
inside `<Popover.Popup>`. It can be visually hidden with your own CSS if needed, such as
Tailwind's `sr-only` utility.

When `modal` is `'trap-focus'`, render `<Popover.Close>` inside `<Popover.Popup>` so touch
screen readers can escape the popup. | | `onOpenChangeComplete` | `function` | - | Event handler called after any animations complete when the popover is opened or closed. | | `triggerId` | `string`, `null` | - | ID of the trigger that the popover is associated with.
This is useful in conjunction with the `open` prop to create a controlled popover.
There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set). | ### FloatingBar.Trigger | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `closeDelay` | `number` | `0` | How long to wait before closing the popover that was opened on hover.
Specified in milliseconds.

Requires the `openOnHover` prop. | | `delay` | `number` | `300` | How long to wait before the popover may be opened on hover. Specified in milliseconds.

Requires the `openOnHover` prop. | | `handle` | `PopoverHandle` | - | A handle to associate the trigger with a popover. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `openOnHover` | `boolean` | `false` | Whether the popover should also open when the trigger is hovered. | | `payload` | `unknown` | - | A payload to pass to the popover when it is opened. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### FloatingBar.Close | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### FloatingBar.Popup | Prop | Type | Default | Description | | --------------- | ------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `portalElement` | `ReactElement` | - | Replaces the default `FloatingBar.PortalPrimitive`. Use to change the portal container. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the popover is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `initialFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the popover is opened.
By default, focus moves to the first tabbable element inside the popup, except when the popover
is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (first tabbable element or popup).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### FloatingBar.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ----------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `container` | `HTMLElement`, `ShadowRoot`, `React.RefObject`, `null` | - | A parent element to render the portal element into. | | `keepMounted` | `boolean` | `false` | Whether to keep the portal mounted in the DOM while the popup is hidden. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### FloatingBar.PositionerPrimitive | Prop | Type | Default | Description | | ----------------------- | ----------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `align` | `center`, `end`, `start` | `center` | How to align the popup relative to the specified side. | | `alignOffset` | `number`, `function` | `0` | Additional offset along the alignment axis in pixels.
Also accepts a function that returns the offset to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `anchor` | `Element`, `VirtualElement`, `React.RefObject`, `function`, `null` | - | An element to position the popup against.
By default, the popup will be positioned against the trigger. | | `arrowPadding` | `number` | `5` | Minimum distance to maintain between the arrow and the edges of the popup.

Use it to prevent the arrow element from hanging out of the rounded corners of a popup. | | `collisionAvoidance` | `CollisionAvoidance` | - | Determines how to handle collisions when positioning the popup.

`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
- `'flip'`: keep the requested side when it fits; otherwise try the opposite side
(`top` and `bottom`, or `left` and `right`).
- `'shift'`: never change side; keep the requested side and move the popup within
the clipping boundary so it stays visible.
- `'none'`: do not correct side-axis overflow.

`align` controls overflow on the alignment axis (`start`/`center`/`end`):
- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
- `'shift'`: keep side and requested alignment, then nudge the popup along the
alignment axis to fit.
- `'none'`: do not correct alignment-axis overflow.

`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
preferred axis cannot fit:
- `'start'`: allow perpendicular fallback and try the logical start side first
(`top` before `bottom`, or `left` before `right` in LTR).
- `'end'`: allow perpendicular fallback and try the logical end side first
(`bottom` before `top`, or `right` before `left` in LTR).
- `'none'`: do not fallback to the perpendicular axis.

When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
If `align` is omitted, it defaults to `'flip'`. | | `collisionBoundary` | `Boundary` | `clipping-ancestors` | An element or a rectangle that delimits the area that the popup is confined to. | | `collisionPadding` | `Padding` | `5` | Additional space to maintain from the edge of the collision boundary. | | `disableAnchorTracking` | `boolean` | `false` | Whether to disable the popup from tracking any layout shift of its positioning anchor. | | `positionMethod` | `fixed`, `absolute` | `fixed` | Determines which CSS `position` property to use. | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `bottom` | Which side of the anchor element to align the popup against.
May automatically change to avoid collisions. | | `sideOffset` | `number`, `function` | `0` | Distance between the anchor and the popup in pixels.
Also accepts a function that returns the distance to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `sticky` | `boolean` | `false` | Whether to maintain the popup in the viewport after
the anchor element was scrolled out of view. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### FloatingBar.PopupPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the popover is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `initialFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the popover is opened.
By default, focus moves to the first tabbable element inside the popup, except when the popover
is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (first tabbable element or popup).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Form URL: /docs/components/form Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/form/index.mdx Form은 사용자 입력을 수집하고 유효성 검사를 수행하는 폼 컨테이너입니다. ## Examples *** ### Validation HTML5 기본 유효성 검사를 활용하여 폼 필드를 검증합니다. ### With Field Components 다양한 입력 컴포넌트와 Field를 조합하여 완성된 폼을 구성합니다. ## Props Table *** ### Form | Prop | Type | Default | Description | | ---------------- | --------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `actionsRef` | `React.RefObject` | - | A ref to imperative actions.
- `validate`: Validates all fields when called. Optionally pass a field name to validate a single field. | | `errors` | `Errors` | - | Validation errors returned externally, typically after submission by a server or a form action.
This should be an object where keys correspond to the `name` attribute on `<Field.Root>`,
and values correspond to error(s) related to that field. | | `onFormSubmit` | `function` | - | Event handler called when the form is submitted.
`preventDefault()` is called on the native submit event when used. | | `validationMode` | `onBlur`, `onChange`, `onSubmit` | `onSubmit` | Determines when the form should be validated.
The `validationMode` prop on `<Field.Root>` takes precedence over this.

- `onSubmit` (default): validates the field when the form is submitted, afterwards fields will re-validate on change.
- `onBlur`: validates a field when it loses focus.
- `onChange`: validates the field on every change to its value. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # IconButton URL: /docs/components/icon-button Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/icon-button/index.mdx IconButton은 특정 작업이나 기능을 나타내며, 텍스트 없이 아이콘만으로 명령을 전달하는 버튼입니다. ## Property *** ### Size IconButton의 크기를 설정합니다. ### ColorPalette IconButton의 색상을 설정합니다. ### Variant IconButton의 시각적 변형을 설정합니다. ### Shape IconButton의 모양을 설정합니다. ### Disabled IconButton의 비활성화 상태를 설정합니다. ## Props Table *** ### IconButton | Prop | Type | Default | Description | | ----------------------- | ------------------------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `colorPalette` | `primary`, `secondary`, `success`, `warning`, `danger`, `contrast` | `primary` | Color palette of the button, applied to its background, text, and border according to `variant`. | | `shape` | `circle`, `square` | `square` | Corner style of the icon button. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the button, controlling height, padding, and typography. | | `variant` | `fill`, `outline`, `ghost` | `fill` | Visual style of the button. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `focusableWhenDisabled` | `boolean` | `false` | Whether the button should be focusable when disabled. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # InputGroup URL: /docs/components/input-group Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/input-group/index.mdx InputGroup은 입력 필드(TextInput, Textarea)와 관련 요소들을 그룹화하여 문자 수 카운터와 같은 추가 기능을 제공합니다. ## Examples *** ### Custom Counter 커스텀 카운터 UI를 구현합니다. ## Props Table *** ### InputGroup.Root | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### InputGroup.Counter | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode`, `function` | - | Content shown inside the counter, such as custom count text. As a function, receives `count`, `maxLength`, and `value` of the input and returns the content to display. Replaces the default `count/maxLength` text. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Menu URL: /docs/components/menu Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/menu/index.mdx 드롭다운 Menu와 컨텍스트 Menu를 제공하는 컴포넌트입니다 ## Property *** ### Disabled Menu의 비활성화 상태를 설정합니다. ## Examples *** ### Positioning Menu의 표시 위치를 설정합니다. ### Groups Menu 아이템을 그룹화합니다. ### With Checkbox Items Checkbox Item을 사용합니다. ### With Radio Items Radio Item을 사용합니다. ### With Submenu Submenu를 구성할 수 있습니다. ## Props Table *** ### Menu.Root | Prop | Type | Default | Description | | ---------------------- | -------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `defaultOpen` | `boolean` | `false` | Whether the menu is initially open.

To render a controlled menu, use the `open` prop instead. | | `onOpenChange` | `function` | - | Event handler called when the menu is opened or closed. | | `open` | `boolean` | - | Whether the menu is currently open. | | `actionsRef` | `React.RefObject` | - | A ref to imperative actions.
- `unmount`: Manually unmounts the menu.
Call this after any externally controlled closing animation finishes.
- `close`: When specified, the menu can be closed imperatively. | | `children` | `ReactNode`, `function` | - | The content of the menu.
This can be a regular React node or a render function that receives the `payload` of the active trigger. | | `closeParentOnEsc` | `boolean` | `false` | When in a submenu, determines whether pressing the Escape key
closes the entire menu, or only the current child menu. | | `defaultTriggerId` | `string`, `null` | - | ID of the trigger that the menu is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open menu. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `handle` | `MenuHandle` | - | A handle to associate the menu with a trigger.
If specified, allows external triggers to control the menu's open state. | | `highlightItemOnHover` | `boolean` | `true` | Whether moving the pointer over items should highlight them.
Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. | | `loopFocus` | `boolean` | `true` | Whether to loop keyboard focus back to the first item
when the end of the list is reached while using the arrow keys. | | `modal` | `boolean` | `true` | Determines if the menu enters a modal state when open.
- `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled.
- `false`: user interaction with the rest of the document is allowed.

On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.

Nested menus ignore this prop, and menus opened by hover are never modal. | | `onOpenChangeComplete` | `function` | - | Event handler called after any animations complete when the menu is opened or closed. | | `orientation` | `horizontal`, `vertical` | `vertical` | The visual orientation of the menu.
Controls whether roving focus uses up/down or left/right arrow keys. | | `triggerId` | `string`, `null` | - | ID of the trigger that the menu is associated with.
This is useful in conjunction with the `open` prop to create a controlled menu.
There's no need to specify this prop when the menu is uncontrolled (that is, when the `open` prop is not set). | ### Menu.Trigger | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Content shown inside the trigger, such as a label or an icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `closeDelay` | `number` | `0` | How long to wait before closing the menu that was opened on hover.
Specified in milliseconds.

Requires the `openOnHover` prop. | | `delay` | `number` | `100` | How long to wait before the menu may be opened on hover. Specified in milliseconds.

Requires the `openOnHover` prop. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `handle` | `MenuHandle` | - | A handle to associate the trigger with a menu. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `openOnHover` | `boolean` | - | Whether the menu should also open when the trigger is hovered. | | `payload` | `unknown` | - | A payload to pass to the menu when it is opened. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Menu.PositionerPrimitive | Prop | Type | Default | Description | | ------------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Menu items shown in the panel, such as `Menu.Item`, `Menu.Group`, or `Menu.Separator`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `portalElement` | `ReactElement` | - | Replaces the default `Menu.PortalPrimitive`. Use to change the portal container. | | `positionerElement` | `ReactElement` | - | Replaces the default `Menu.PositionerPrimitive`. Use to change the side, alignment, or offset of the popup. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the menu is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Menu.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ----------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `container` | `HTMLElement`, `ShadowRoot`, `React.RefObject`, `null` | - | A parent element to render the portal element into. | | `keepMounted` | `boolean` | `false` | Whether to keep the portal mounted in the DOM while the popup is hidden. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Menu.PositionerPrimitive | Prop | Type | Default | Description | | ----------------------- | ----------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `align` | `center`, `end`, `start` | `start` | How to align the popup relative to the specified side.

Submenus and menubars default to `'start'`. | | `alignOffset` | `number`, `function` | `0` | Additional offset along the alignment axis in pixels.
Also accepts a function that returns the offset to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `anchor` | `Element`, `VirtualElement`, `React.RefObject`, `function`, `null` | - | An element to position the popup against.
By default, the popup will be positioned against the trigger. | | `arrowPadding` | `number` | `5` | Minimum distance to maintain between the arrow and the edges of the popup.

Use it to prevent the arrow element from hanging out of the rounded corners of a popup. | | `collisionAvoidance` | `CollisionAvoidance` | - | Determines how to handle collisions when positioning the popup.

`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
- `'flip'`: keep the requested side when it fits; otherwise try the opposite side
(`top` and `bottom`, or `left` and `right`).
- `'shift'`: never change side; keep the requested side and move the popup within
the clipping boundary so it stays visible.
- `'none'`: do not correct side-axis overflow.

`align` controls overflow on the alignment axis (`start`/`center`/`end`):
- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
- `'shift'`: keep side and requested alignment, then nudge the popup along the
alignment axis to fit.
- `'none'`: do not correct alignment-axis overflow.

`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
preferred axis cannot fit:
- `'start'`: allow perpendicular fallback and try the logical start side first
(`top` before `bottom`, or `left` before `right` in LTR).
- `'end'`: allow perpendicular fallback and try the logical end side first
(`bottom` before `top`, or `right` before `left` in LTR).
- `'none'`: do not fallback to the perpendicular axis.

When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
If `align` is omitted, it defaults to `'flip'`. | | `collisionBoundary` | `Boundary` | `clipping-ancestors` | An element or a rectangle that delimits the area that the popup is confined to. | | `collisionPadding` | `Padding` | `5` | Additional space to maintain from the edge of the collision boundary. | | `disableAnchorTracking` | `boolean` | `false` | Whether to disable the popup from tracking any layout shift of its positioning anchor. | | `positionMethod` | `fixed`, `absolute` | `absolute` | Determines which CSS `position` property to use. | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `bottom` | Which side of the anchor element to align the popup against.
May automatically change to avoid collisions.

Submenus and vertical menubars default to `'inline-end'`. | | `sideOffset` | `number`, `function` | `4` | Distance between the anchor and the popup in pixels.
Also accepts a function that returns the distance to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `sticky` | `boolean` | `false` | Whether to maintain the popup in the viewport after
the anchor element was scrolled out of view. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Menu.PopupPrimitive | Prop | Type | Default | Description | | ------------ | ------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Menu items shown in the panel, such as `Menu.Item`, `Menu.Group`, or `Menu.Separator`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the menu is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Menu.CheckboxItemIndicatorPrimitive | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `closeOnClick` | `boolean` | `true` | Whether to close the menu when the item is clicked. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `label` | `string` | - | Overrides the text label to use when the item is matched during keyboard text navigation. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `onClick` | `function` | - | The click handler for the menu item. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Menu.RadioItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `orientation` | `horizontal`, `vertical` | `horizontal` | The orientation of the separator. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Menu.Group | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `children` | `ReactNode` | - | The content of the component. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Menu.GroupLabel | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Menu.SubmenuRoot | Prop | Type | Default | Description | | ---------------------- | -------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `defaultOpen` | `boolean` | `false` | Whether the menu is initially open.

To render a controlled menu, use the `open` prop instead. | | `onOpenChange` | `function` | - | Event handler called when the menu is opened or closed. | | `open` | `boolean` | - | Whether the menu is currently open. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `actionsRef` | `React.RefObject` | - | A ref to imperative actions.
- `unmount`: Manually unmounts the menu.
Call this after any externally controlled closing animation finishes.
- `close`: When specified, the menu can be closed imperatively. | | `children` | `ReactNode` | - | The content of the submenu. | | `closeParentOnEsc` | `boolean` | `false` | When in a submenu, determines whether pressing the Escape key
closes the entire menu, or only the current child menu. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `highlightItemOnHover` | `boolean` | `true` | Whether moving the pointer over items should highlight them.
Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. | | `loopFocus` | `boolean` | `true` | Whether to loop keyboard focus back to the first item
when the end of the list is reached while using the arrow keys. | | `onOpenChangeComplete` | `function` | - | Event handler called after any animations complete when the menu is opened or closed. | | `orientation` | `horizontal`, `vertical` | `vertical` | The visual orientation of the menu.
Controls whether roving focus uses up/down or left/right arrow keys. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Menu.SubmenuTriggerItem | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `onClick` | `function` | - | Called when the item is clicked. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `closeDelay` | `number` | `0` | How long to wait before closing the menu that was opened on hover.
Specified in milliseconds.

Requires the `openOnHover` prop. | | `delay` | `number` | `100` | How long to wait before the menu may be opened on hover. Specified in milliseconds.

Requires the `openOnHover` prop. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `label` | `string` | - | Overrides the text label to use when the item is matched during keyboard text navigation. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `openOnHover` | `boolean` | `true` | Whether the menu should also open when the trigger is hovered. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Menu.SubmenuPopup | Prop | Type | Default | Description | | ------------------- | ------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Nested menu items shown in the submenu panel, such as `Menu.Item` or `Menu.CheckboxItem`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `portalElement` | `ReactElement` | - | Replaces the default `Menu.PortalPrimitive`. Use to change the portal container. | | `positionerElement` | `ReactElement` | - | Replaces the default `Menu.PositionerPrimitive`. Use to change the side, alignment, or offset of the popup. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the menu is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Menu.SubmenuPopupPrimitive | Prop | Type | Default | Description | | ------------ | ------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Nested menu items shown in the submenu panel, such as `Menu.Item` or `Menu.CheckboxItem`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the menu is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Menu.CheckboxItem | Prop | Type | Default | Description | | ----------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `checked` | `boolean` | - | Whether the checkbox item is currently ticked.

To render an uncontrolled checkbox item, use the `defaultChecked` prop instead. | | `defaultChecked` | `boolean` | `false` | Whether the checkbox item is initially ticked.

To render a controlled checkbox item, use the `checked` prop instead. | | `onCheckedChange` | `function` | - | Event handler called when the checkbox item is ticked or unticked. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `closeOnClick` | `boolean` | `false` | Whether to close the menu when the item is clicked. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `label` | `string` | - | Overrides the text label to use when the item is matched during keyboard text navigation. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `onClick` | `function` | - | The click handler for the menu item. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Menu.CheckboxItemPrimitive | Prop | Type | Default | Description | | ----------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `checked` | `boolean` | - | Whether the checkbox item is currently ticked.

To render an uncontrolled checkbox item, use the `defaultChecked` prop instead. | | `defaultChecked` | `boolean` | `false` | Whether the checkbox item is initially ticked.

To render a controlled checkbox item, use the `checked` prop instead. | | `onCheckedChange` | `function` | - | Event handler called when the checkbox item is ticked or unticked. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `closeOnClick` | `boolean` | `false` | Whether to close the menu when the item is clicked. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `label` | `string` | - | Overrides the text label to use when the item is matched during keyboard text navigation. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `onClick` | `function` | - | The click handler for the menu item. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Menu.CheckboxItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `keepMounted` | `boolean` | `true` | Whether to keep the HTML element in the DOM when the checkbox item is not checked. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Menu.RadioGroup | Prop | Type | Default | Description | | --------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `defaultValue` | `any` | - | The uncontrolled value of the radio item that should be initially selected.

To render a controlled radio group, use the `value` prop instead. | | `onValueChange` | `function` | - | Function called when the selected value changes. | | `value` | `any` | - | The controlled value of the radio item that should be currently selected.

To render an uncontrolled radio group, use the `defaultValue` prop instead. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `children` | `ReactNode` | - | The content of the component. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Menu.RadioItem | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **value** | `any` | - | Value of the radio item.
This is the value that will be set in the MenuRadioGroup when the item is selected. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `closeOnClick` | `boolean` | `false` | Whether to close the menu when the item is clicked. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `label` | `string` | - | Overrides the text label to use when the item is matched during keyboard text navigation. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `onClick` | `function` | - | The click handler for the menu item. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Menu.RadioItemPrimitive | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **value** | `any` | - | Value of the radio item.
This is the value that will be set in the MenuRadioGroup when the item is selected. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `closeOnClick` | `boolean` | `false` | Whether to close the menu when the item is clicked. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `label` | `string` | - | Overrides the text label to use when the item is matched during keyboard text navigation. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `onClick` | `function` | - | The click handler for the menu item. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Menu.RadioItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `keepMounted` | `boolean` | `false` | Whether to keep the HTML element in the DOM when the radio item is inactive. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Meter URL: /docs/components/meter Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/meter/index.mdx Meter는 디스크 사용량이나 점수처럼 알려진 범위 안의 측정값을 표시합니다. `Meter.Label`과 `Meter.Value`는 한 줄에 놓이고 `Meter.Track`이 그 아래 전체 폭을 차지합니다. 이 배치는 자식 순서를 따르므로 `Meter.Value`는 `Meter.Track` 앞에 두세요. 뒤에 두면 값이 트랙 아래로 내려갑니다. `Meter.Label`은 보조기술에 전달되는 이름이기도 합니다. `저장 공간`, `CPU 사용률`처럼 **무엇을 재는 값인지**를 문구에 담으세요. 화면에 이름을 두지 않을 때는 `Meter.Label` 대신 `Meter.Root`에 `aria-label`을 주세요 — 둘을 함께 주면 `aria-label`이 무시됩니다. ## Property *** ### Size `size`로 트랙의 높이를 조절합니다. ### Type `type`으로 채워진 영역의 색상을 지정합니다. 색만으로는 위험 구간을 알 수 없으므로 레이블에도 함께 적어줍니다. ### Range `min`, `max`로 범위를, `format`으로 표시 형식을 지정합니다. 값 텍스트가 단위만 담고 있다면 `getAriaValueText`로 무엇을 재는 값인지 함께 읽히도록 합니다. ## Examples *** ### Auto Update 값이 스스로 바뀌는 미터에는 갱신을 멈출 수단을 함께 둡니다. 갱신 간격은 초당 3회를 넘기지 않습니다. ## Accessibility *** `role="meter"`와 `aria-valuenow` / `aria-valuemin` / `aria-valuemax`는 `Meter`가 알아서 붙입니다. 나머지는 컴포넌트가 대신 지킬 수 없으니 **쓰는 쪽에서 챙겨야 합니다.** ### 진행률에는 쓰지 마세요 `Meter`가 다루는 값은 **범위가 정해진 지금의 측정값**입니다. 디스크 사용량, 점수, 잔량이 여기 해당합니다. 작업이 얼마나 끝났는지 보여주는 진행률이나 상한이 없는 값은 대상이 아닙니다. 진행률에 `role="meter"`가 붙으면 보조기술은 "완료를 향해 가는 값"이 아니라 "지금 재고 있는 값"으로 읽습니다. `render`로 역할만 갈아끼우지 말고 진행률에 맞는 컴포넌트를 쓰세요. ### 이름은 하나만 주세요 `Meter.Label`을 렌더하면 `Meter.Root`에 준 `aria-label`은 이름 계산에서 밀려납니다. 오류도 경고도 없이 조용히 사라지니 둘 중 하나만 쓰세요. * 이름을 화면에 보여준다 → `Meter.Label` * 화면에 이름을 두지 않는다 → `Meter.Root`의 `aria-label` ### 같은 값은 같은 문구·같은 형식으로 한 측정값이 여러 화면에 나온다면 레이블 문구와 `format`을 맞추세요. 여기서는 `저장 공간 4.2GB`, 저기서는 `디스크 52%`라면 읽는 사람은 둘이 같은 값인지 알 길이 없습니다. ### 자동으로 갱신된다면 멈출 수단을 두세요 값이 5초를 넘겨 저절로 바뀐다면 사용자가 일시정지·정지·숨김 중 하나를 고를 수 있어야 합니다. 갱신 간격은 **초당 3회 이하**로 잡으세요. 그보다 빠르면 화면이 깜빡이는 것처럼 보입니다. 위 [Auto Update](#auto-update)가 그 예입니다. ### 색을 바꿀 때는 대비를 확인하세요 `className`이나 `$css`로 색을 갈아끼우면 기본 색이 맞춰 둔 대비가 무너집니다. * `Meter.Label` / `Meter.Value` 텍스트 대 배경 — **4.5:1** 이상 * `Meter.IndicatorPrimitive` 대 `Meter.Track`, `Meter.Track` 대 페이지 배경 — **3:1** 이상 `type="warning"`처럼 색으로 상태를 알린다면 그 상태를 레이블 문구에도 적으세요. 색을 구분하지 못하는 사용자에게는 문구가 유일한 단서입니다. ### 미터를 가리킬 때 모양·색·위치로만 말하지 마세요 "오른쪽 초록 막대를 확인하세요" 같은 안내는 그 색과 위치를 알아채는 사람에게만 통합니다. 미터를 가리킬 때는 레이블 문구를 부르세요. ### 페이지와 언어가 다르면 표시하세요 레이블이 페이지 언어와 다른 언어로 적혀 있다면 그 요소에 `lang`을 주세요. 값 형식도 그 언어를 따라야 한다면 `locale`까지 맞춥니다. ### 폭을 고정하지 마세요 `Meter.Root`는 기본이 `width: 100%`입니다. `width`를 고정하는 대신 `max-width`를 쓰면 320px 폭에서도, 200% 확대에서도 내용이 잘리지 않습니다. ### 값은 텍스트로 보여주세요 `42%` 같은 숫자를 그림으로 만들어 넣지 마세요. `Meter.Value`가 내는 텍스트여야 사용자가 글자 크기나 자간을 바꿨을 때 값도 함께 바뀝니다. ## Props Table *** ### Meter.Root | Prop | Type | Default | Description | | ------------------ | --------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **value** | `number` | - | The current value. | | `size` | `sm`, `md`, `lg` | `md` | Size of the meter, controlling the height of the track. | | `type` | `default`, `warning` | `default` | Color of the filled portion of the meter. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `aria-valuetext` | `string` | - | A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter. | | `format` | `Intl.NumberFormatOptions` | - | Options to format the value. | | `getAriaValueText` | `function` | - | A function that returns a string value that provides a human-readable text alternative for `aria-valuenow`, the current value of the meter. | | `locale` | `Intl.LocalesArgument` | - | The locale used by `Intl.NumberFormat` when formatting the value.
Defaults to the user's runtime locale. | | `max` | `number` | `100` | The maximum value | | `min` | `number` | `0` | The minimum value | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Meter.Label | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Meter.Value | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `function`, `null` | - | Content shown inside the value. As a function, receives the formatted value and the raw number and returns what to display. Shows the formatted value when omitted. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Meter.Track | Prop | Type | Default | Description | | ------------------ | --------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `indicatorElement` | `ReactElement` | - | Replaces the default `Meter.IndicatorPrimitive`. Use to change the filled portion of the track. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Meter.TrackPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Meter.IndicatorPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # MultiSelect URL: /docs/components/multi-select Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/multi-select/index.mdx MultiSelect는 사용자가 여러 옵션 중에서 다중 선택할 수 있는 드롭다운 컴포넌트입니다. 선택된 값들은 배지 형태로 표시되며, 태그 선택, 필터링, 카테고리 선택 등에 사용됩니다. ## Property *** ### Size MultiSelect의 크기를 설정합니다. ### Controlled State MultiSelect의 선택 상태를 제어합니다. ### States MultiSelect의 다양한 상태를 설정합니다. ## Examples *** ### Items Configuration 다양한 형태의 아이템 데이터를 사용합니다. ### Grouping Options 옵션을 그룹으로 묶어 구조화합니다. ### Custom Value Display MultiSelect.Value에 함수형 children을 제공하여 선택된 값들의 표시 방법을 커스터마이징할 수 있습니다. 기본적으로는 배지 형태로 표시되지만, 문자열이나 커스텀 컴포넌트로 변경할 수 있습니다. ## Props Table *** ### MultiSelect.Root | Prop | Type | Default | Description | | ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `invalid` | `boolean` | `false` | Marks the multi-select as invalid, applying error styles. Sets `aria-invalid` on the trigger `<button>` element. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the multi-select, controlling minimum height, padding, typography, and the size of its icon and badges. | | `defaultOpen` | `boolean` | `false` | Whether the select popup is initially open.

To render a controlled select popup, use the `open` prop instead. | | `defaultValue` | `Value[]`, `null` | - | The uncontrolled value of the select when it's initially rendered.

To render a controlled select, use the `value` prop instead. | | `onOpenChange` | `function` | - | Event handler called when the select popup is opened or closed. | | `onValueChange` | `function` | - | Event handler called when the value of the select changes. | | `open` | `boolean` | - | Whether the select popup is currently open. | | `value` | `Value[]`, `null` | - | The value of the select. Use when controlled. | | `children` | `ReactNode` | - | Parts of the multi-select, such as `MultiSelect.Trigger` and `MultiSelect.Popup`. | | `placeholder` | `ReactNode` | - | Text shown in the trigger when no value is selected. The `children` of `MultiSelect.ValuePrimitive`, or the label of an item whose value is `null` in `items`, takes precedence over it. | | `actionsRef` | `React.RefObject` | - | A ref to imperative actions.
- `unmount`: Manually unmounts the select.
Call this after any externally controlled closing animation finishes. | | `autoComplete` | `string` | - | Provides a hint to the browser for autofill. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `form` | `string` | - | Identifies the form that owns the hidden input.
Useful when the select is rendered outside the form. | | `highlightItemOnHover` | `boolean` | `true` | Whether moving the pointer over items should highlight them.
Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. | | `id` | `string` | - | The id of the Select. | | `inputRef` | `React.Ref` | - | A ref to access the hidden input element. | | `isItemEqualToValue` | `function` | - | Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.
Defaults to `Object.is` comparison. | | `items` | `Record`, `readonly { label: React.ReactNode; value: any; }[]`, `readonly Group[]` | - | Data structure of the items rendered in the select popup.
When specified, `<Select.Value>` renders the label of the selected item instead of the raw value. | | `itemToStringLabel` | `function` | - | When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.
If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop. | | `itemToStringValue` | `function` | - | When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.
If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop. | | `modal` | `boolean` | `true` | Determines if the select enters a modal state when open.
- `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.
- `false`: user interaction with the rest of the document is allowed.

On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior. | | `name` | `string` | - | Identifies the field when a form is submitted. | | `onOpenChangeComplete` | `function` | - | Event handler called after any animations complete when the select popup is opened or closed. | | `readOnly` | `boolean` | `false` | Whether the user should be unable to choose a different option from the select popup. | | `required` | `boolean` | `false` | Whether the user must choose a value before submitting a form. | ### MultiSelect.Trigger | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Not rendered: the trigger always shows the selected values and a chevron icon. Use `MultiSelect.TriggerPrimitive` to compose custom content. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | - | Whether the component should ignore user interaction. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### MultiSelect.TriggerPrimitive | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Content shown inside the trigger, such as `MultiSelect.ValuePrimitive` and `MultiSelect.TriggerIconPrimitive`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | - | Whether the component should ignore user interaction. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | `<button />` | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### MultiSelect.TriggerIconPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown in place of the default chevron icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### MultiSelect.ValuePrimitive | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `children` | `ReactNode`, `function` | - | Accepts a function that returns a `ReactNode` to format the selected value.
Treat the value as read-only: in `multiple` mode it may be a shared frozen array
when nothing is selected. | | `placeholder` | `ReactNode` | - | The placeholder value to display when no value is selected.
This is overridden by `children` if specified, or by a null item's label in `items`. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### MultiSelect.PlaceholderPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### MultiSelect.Popup | Prop | Type | Default | Description | | ------------------- | ------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | `ReactNode` | - | Options shown in the popup, such as `MultiSelect.Item`, `MultiSelect.Group`, or `MultiSelect.Separator`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `portalElement` | `ReactElement` | - | Replaces the default `MultiSelect.PortalPrimitive`. Use to change the portal container. | | `positionerElement` | `ReactElement` | - | Replaces the default `MultiSelect.PositionerPrimitive`. Use to change the side, alignment, or offset of the popup. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the select popup is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### MultiSelect.PortalPrimitive | Prop | Type | Default | Description | | ----------- | ----------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `container` | `HTMLElement`, `ShadowRoot`, `React.RefObject`, `null` | - | A parent element to render the portal element into. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### MultiSelect.PositionerPrimitive | Prop | Type | Default | Description | | ----------------------- | ----------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `align` | `center`, `end`, `start` | `start` | How to align the popup relative to the specified side. | | `alignItemWithTrigger` | `boolean` | `false` | Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space. | | `alignOffset` | `number`, `function` | `0` | Additional offset along the alignment axis in pixels.
Also accepts a function that returns the offset to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `anchor` | `Element`, `VirtualElement`, `React.RefObject`, `function`, `null` | - | An element to position the popup against.
By default, the popup will be positioned against the trigger. | | `arrowPadding` | `number` | `5` | Minimum distance to maintain between the arrow and the edges of the popup.

Use it to prevent the arrow element from hanging out of the rounded corners of a popup. | | `collisionAvoidance` | `CollisionAvoidance` | - | Determines how to handle collisions when positioning the popup.

`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
- `'flip'`: keep the requested side when it fits; otherwise try the opposite side
(`top` and `bottom`, or `left` and `right`).
- `'shift'`: never change side; keep the requested side and move the popup within
the clipping boundary so it stays visible.
- `'none'`: do not correct side-axis overflow.

`align` controls overflow on the alignment axis (`start`/`center`/`end`):
- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
- `'shift'`: keep side and requested alignment, then nudge the popup along the
alignment axis to fit.
- `'none'`: do not correct alignment-axis overflow.

`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
preferred axis cannot fit:
- `'start'`: allow perpendicular fallback and try the logical start side first
(`top` before `bottom`, or `left` before `right` in LTR).
- `'end'`: allow perpendicular fallback and try the logical end side first
(`bottom` before `top`, or `right` before `left` in LTR).
- `'none'`: do not fallback to the perpendicular axis.

When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
If `align` is omitted, it defaults to `'flip'`. | | `collisionBoundary` | `Boundary` | `clipping-ancestors` | An element or a rectangle that delimits the area that the popup is confined to. | | `collisionPadding` | `Padding` | `5` | Additional space to maintain from the edge of the collision boundary. | | `disableAnchorTracking` | `boolean` | `false` | Whether to disable the popup from tracking any layout shift of its positioning anchor. | | `positionMethod` | `fixed`, `absolute` | `absolute` | Determines which CSS `position` property to use. | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `bottom` | Which side of the anchor element to align the popup against.
May automatically change to avoid collisions. | | `sideOffset` | `number`, `function` | `4` | Distance between the anchor and the popup in pixels.
Also accepts a function that returns the distance to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `sticky` | `boolean` | `false` | Whether to maintain the popup in the viewport after
the anchor element was scrolled out of view. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### MultiSelect.PopupPrimitive | Prop | Type | Default | Description | | ------------ | ------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | `ReactNode` | - | Options shown in the popup, such as `MultiSelect.Item`, `MultiSelect.Group`, or `MultiSelect.Separator`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the select popup is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### MultiSelect.Item | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `any` | `null` | A unique value that identifies this select item. | | `children` | `ReactNode` | - | Label of the option, such as its text or an icon with text. The check mark is added after it. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `label` | `string` | - | Specifies the text label to use when the item is matched during keyboard text navigation.

Defaults to the item text content if not provided. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### MultiSelect.ItemPrimitive | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `any` | `null` | A unique value that identifies this select item. | | `children` | `ReactNode` | - | Content shown inside the option, such as its label and `MultiSelect.ItemIndicatorPrimitive`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `label` | `string` | - | Specifies the text label to use when the item is matched during keyboard text navigation.

Defaults to the item text content if not provided. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### MultiSelect.ItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown in place of the default check icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `keepMounted` | `boolean` | - | Whether to keep the HTML element in the DOM when the item is not selected. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### MultiSelect.Separator | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `orientation` | `horizontal`, `vertical` | `horizontal` | The orientation of the separator. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### MultiSelect.Group | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### MultiSelect.GroupLabel | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # NavigationMenu URL: /docs/components/navigation-menu Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/navigation-menu/index.mdx 여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다. ## Property *** ### Size NavigationMenu의 크기를 설정합니다. ### Direction NavigationMenu의 방향을 설정합니다. ### Disabled NavigationMenu의 비활성화 상태를 설정합니다. ### Current NavigationMenu의 현재 페이지 상태를 설정합니다. ## Examples *** ### With Icons 아이콘과 함께 사용합니다. ### With Popup 팝오버 형태로 사용합니다. ### Flexible Usage NavigationMenu의 모든 프리셋 컴포넌트를 분리하여 사용합니다. ## Props Table *** ### NavigationMenu.Root | Prop | Type | Default | Description | | ---------------------- | ------------------------------------------------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `direction` | `horizontal`, `vertical` | `horizontal` | Layout direction of the menu items, which also sets the arrow keys that move focus between them. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the links and triggers, controlling height, padding, and typography. | | `defaultValue` | `unknown` | `null` | The uncontrolled value of the item that should be initially selected.

To render a controlled navigation menu, use the `value` prop instead. | | `onValueChange` | `function` | - | Callback fired when the value changes. | | `value` | `unknown` | `null` | The controlled value of the navigation menu item that should be currently open.
When non-nullish, the menu will be open. When nullish, the menu will be closed.

To render an uncontrolled navigation menu, use the `defaultValue` prop instead. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `disabled` | `boolean` | - | Disables every link and trigger in the menu, blocking all interactions. A `disabled` set on a link or trigger takes precedence. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `actionsRef` | `React.RefObject` | - | A ref to imperative actions. | | `closeDelay` | `number` | `50` | How long to wait before closing the navigation popup. Specified in milliseconds. | | `delay` | `number` | `50` | How long to wait before opening the navigation popup. Specified in milliseconds. | | `onOpenChangeComplete` | `function` | - | Event handler called after any animations complete when the navigation menu is closed. | | `orientation` | `horizontal`, `vertical` | - | The orientation of the navigation menu. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### NavigationMenu.List | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### NavigationMenu.Item | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `any` | - | A unique value that identifies this navigation menu item.
If no value is provided, a unique ID will be generated automatically.
Use when controlling the navigation menu programmatically. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### NavigationMenu.Link | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `current` | `boolean` | - | Marks the link as the current page, applying the active style and setting `aria-current="page"`. | | `disabled` | `boolean` | - | Disables the link, blocking all interactions. Removes `href` and sets `aria-disabled` on the `<a>` element. Takes precedence over `disabled` on `NavigationMenu.Root`. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `closeOnClick` | `boolean` | `false` | Whether to close the navigation menu when the link is clicked. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### NavigationMenu.Trigger | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### NavigationMenu.TriggerPrimitive | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### NavigationMenu.TriggerIndicatorPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown as the indicator. Replaces the default chevron down icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### NavigationMenu.Content | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `keepMounted` | `boolean` | `false` | Whether to keep the content mounted in the DOM while the popup is closed.
Ensures the content is present during server-side rendering for web crawlers. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### NavigationMenu.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ----------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `container` | `HTMLElement`, `ShadowRoot`, `React.RefObject`, `null` | - | A parent element to render the portal element into. | | `keepMounted` | `boolean` | `false` | Whether to keep the portal mounted in the DOM while the popup is hidden. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### NavigationMenu.PositionerPrimitive | Prop | Type | Default | Description | | ----------------------- | ----------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `align` | `center`, `end`, `start` | `center` | How to align the popup relative to the specified side. | | `alignOffset` | `number`, `function` | `0` | Additional offset along the alignment axis in pixels.
Also accepts a function that returns the offset to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `anchor` | `Element`, `VirtualElement`, `React.RefObject`, `function`, `null` | - | An element to position the popup against.
By default, the popup will be positioned against the trigger. | | `arrowPadding` | `number` | `5` | Minimum distance to maintain between the arrow and the edges of the popup.

Use it to prevent the arrow element from hanging out of the rounded corners of a popup. | | `collisionAvoidance` | `CollisionAvoidance` | - | Determines how to handle collisions when positioning the popup.

`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
- `'flip'`: keep the requested side when it fits; otherwise try the opposite side
(`top` and `bottom`, or `left` and `right`).
- `'shift'`: never change side; keep the requested side and move the popup within
the clipping boundary so it stays visible.
- `'none'`: do not correct side-axis overflow.

`align` controls overflow on the alignment axis (`start`/`center`/`end`):
- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
- `'shift'`: keep side and requested alignment, then nudge the popup along the
alignment axis to fit.
- `'none'`: do not correct alignment-axis overflow.

`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
preferred axis cannot fit:
- `'start'`: allow perpendicular fallback and try the logical start side first
(`top` before `bottom`, or `left` before `right` in LTR).
- `'end'`: allow perpendicular fallback and try the logical end side first
(`bottom` before `top`, or `right` before `left` in LTR).
- `'none'`: do not fallback to the perpendicular axis.

When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
If `align` is omitted, it defaults to `'flip'`. | | `collisionBoundary` | `Boundary` | `clipping-ancestors` | An element or a rectangle that delimits the area that the popup is confined to. | | `collisionPadding` | `Padding` | `5` | Additional space to maintain from the edge of the collision boundary. | | `disableAnchorTracking` | `boolean` | `false` | Whether to disable the popup from tracking any layout shift of its positioning anchor. | | `positionMethod` | `fixed`, `absolute` | `absolute` | Determines which CSS `position` property to use. | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `bottom` | Which side of the anchor element to align the popup against.
May automatically change to avoid collisions. | | `sideOffset` | `number`, `function` | `10` | Distance between the anchor and the popup in pixels.
Also accepts a function that returns the distance to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `sticky` | `boolean` | `false` | Whether to maintain the popup in the viewport after
the anchor element was scrolled out of view. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### NavigationMenu.PopupPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### NavigationMenu.Viewport | Prop | Type | Default | Description | | ------------------- | ------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `popupElement` | `ReactElement` | - | Replaces the default `NavigationMenu.PopupPrimitive`. Use to change the panel that holds the content. | | `portalElement` | `ReactElement` | - | Replaces the default `NavigationMenu.PortalPrimitive`. Use to change the portal container. | | `positionerElement` | `ReactElement` | - | Replaces the default `NavigationMenu.PositionerPrimitive`. Use to change the side, alignment, or offset of the popup. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### NavigationMenu.ViewportPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Pagination URL: /docs/components/pagination Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/pagination/index.mdx Pagination은 콘텐츠를 페이지 단위로 탐색할 수 있도록 돕는 네비게이션 컴포넌트입니다. ## Property ### Sibling Count Pagination에서 현재 페이지 주변에 표시할 페이지 번호의 개수를 설정합니다. ### Boundary Count Pagination의 시작과 끝에 항상 표시할 페이지 번호의 개수를 설정합니다. ### Disabled Pagination 버튼들의 비활성화 여부를 결정하는 옵션입니다. ### Size Pagination의 크기를 설정합니다. ## Examples ### Controlled Pagination 컴포넌트를 제어 컴포넌트로 사용하는 예시입니다. *** ### Pagination.Root | Prop | Type | Default | Description | | --------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **totalPages** | `number` | - | Total number of pages. `Pagination.Next` is disabled once this page is selected. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the pagination buttons and ellipsis, controlling width, height, and typography. | | `onPageChange` | `function` | - | Called when a page button, `Pagination.Previous`, or `Pagination.Next` is clicked, with the new page and the event details. Call `eventDetails.cancel()` to keep the current page. | | `boundaryCount` | `number` | - | Number of pages always shown at the start and the end of the range. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `defaultPage` | `number` | - | Page selected on first render, counted from `1`. Use when the component is not controlled. | | `disabled` | `boolean` | - | Disables the pagination, blocking all interactions on its buttons. | | `page` | `number` | - | Selected page, counted from `1`. Use when the component is controlled. | | `siblingCount` | `number` | - | Number of pages shown on each side of the selected page before the rest collapse into an ellipsis. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Pagination.RootPrimitive | Prop | Type | Default | Description | | --------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **totalPages** | `number` | - | Total number of pages. `Pagination.Next` is disabled once this page is selected. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the pagination buttons and ellipsis, controlling width, height, and typography. | | `onPageChange` | `function` | - | Called when a page button, `Pagination.Previous`, or `Pagination.Next` is clicked, with the new page and the event details. Call `eventDetails.cancel()` to keep the current page. | | `boundaryCount` | `number` | `1` | Number of pages always shown at the start and the end of the range. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `defaultPage` | `number` | `1` | Page selected on first render, counted from `1`. Use when the component is not controlled. | | `disabled` | `boolean` | `false` | Disables the pagination, blocking all interactions on its buttons. | | `page` | `number` | - | Selected page, counted from `1`. Use when the component is controlled. | | `siblingCount` | `number` | `2` | Number of pages shown on each side of the selected page before the rest collapse into an ellipsis. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Pagination.ListPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Pagination.Items | Prop | Type | Default | Description | | ---------- | ----------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode`, `function` | - | Content shown in place of the generated page buttons. As a function, receives the pages to show, each with a `type` (`NUM` for a page, `BREAK` for an ellipsis) and a page number in `value`. | #### Pagination.ItemPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Pagination.ButtonPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **page** | `number` | - | Page this button selects when clicked. The button is marked as current while this page is selected. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Pagination.EllipsisPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown for the skipped pages. Replaces the default more icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Pagination.Previous | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown inside the button. Replaces the default left chevron icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Pagination.PreviousPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown inside the button. Replaces the default left chevron icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Pagination.Next | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown inside the button. Replaces the default right chevron icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Pagination.NextPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown inside the button. Replaces the default right chevron icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Popover URL: /docs/components/popover Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/popover/index.mdx Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다. ## Property *** ### PositionerProps Popover가 나타날 위치와 정렬을 설정합니다. ### Offset Popover와 트리거 간의 거리를 조정합니다. ## Examples *** ### Content Variations 간단한 텍스트부터 복잡한 상호작용 요소까지 다양한 콘텐츠를 표시합니다. ## Props Table *** ### Popover.Root | Prop | Type | Default | Description | | ---------------------- | ----------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `defaultOpen` | `boolean` | `false` | Whether the popover is initially open.

To render a controlled popover, use the `open` prop instead. | | `onOpenChange` | `function` | - | Event handler called when the popover is opened or closed. | | `open` | `boolean` | - | Whether the popover is currently open. | | `actionsRef` | `React.RefObject` | - | A ref to imperative actions.
- `unmount`: Manually unmounts the popover.
Call this after any externally controlled closing animation finishes.
- `close`: Closes the popover imperatively when called. | | `children` | `ReactNode`, `function` | - | The content of the popover.
This can be a regular React node or a render function that receives the `payload` of the active trigger. | | `defaultTriggerId` | `string`, `null` | - | ID of the trigger that the popover is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open popover. | | `handle` | `PopoverHandle` | - | A handle to associate the popover with a trigger.
If specified, allows external triggers to control the popover's open state. | | `modal` | `boolean`, `trap-focus` | `false` | Determines if the popover enters a modal state when open.
- `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled.
- `false`: user interaction with the rest of the document is allowed.
- `'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.

On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.

When `modal` is `true`, focus trapping is enabled only if `<Popover.Close>` is rendered
inside `<Popover.Popup>`. It can be visually hidden with your own CSS if needed, such as
Tailwind's `sr-only` utility.

When `modal` is `'trap-focus'`, render `<Popover.Close>` inside `<Popover.Popup>` so touch
screen readers can escape the popup. | | `onOpenChangeComplete` | `function` | - | Event handler called after any animations complete when the popover is opened or closed. | | `triggerId` | `string`, `null` | - | ID of the trigger that the popover is associated with.
This is useful in conjunction with the `open` prop to create a controlled popover.
There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set). | ### Popover.Trigger | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `closeDelay` | `number` | `0` | How long to wait before closing the popover that was opened on hover.
Specified in milliseconds.

Requires the `openOnHover` prop. | | `delay` | `number` | `300` | How long to wait before the popover may be opened on hover. Specified in milliseconds.

Requires the `openOnHover` prop. | | `handle` | `PopoverHandle` | - | A handle to associate the trigger with a popover. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `openOnHover` | `boolean` | `false` | Whether the popover should also open when the trigger is hovered. | | `payload` | `unknown` | - | A payload to pass to the popover when it is opened. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Popover.Popup | Prop | Type | Default | Description | | ------------------- | ------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `portalElement` | `ReactElement` | - | Replaces the default `Popover.PortalPrimitive`. Use to change the portal container. | | `positionerElement` | `ReactElement` | - | Replaces the default `Popover.PositionerPrimitive`. Use to change the side, alignment, or offset of the popup. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the popover is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `initialFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the popover is opened.
By default, focus moves to the first tabbable element inside the popup, except when the popover
is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (first tabbable element or popup).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Popover.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ----------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `container` | `HTMLElement`, `ShadowRoot`, `React.RefObject`, `null` | - | A parent element to render the portal element into. | | `keepMounted` | `boolean` | `false` | Whether to keep the portal mounted in the DOM while the popup is hidden. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Popover.PositionerPrimitive | Prop | Type | Default | Description | | ----------------------- | ----------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `align` | `center`, `end`, `start` | `center` | How to align the popup relative to the specified side. | | `alignOffset` | `number`, `function` | `0` | Additional offset along the alignment axis in pixels.
Also accepts a function that returns the offset to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `anchor` | `Element`, `VirtualElement`, `React.RefObject`, `function`, `null` | - | An element to position the popup against.
By default, the popup will be positioned against the trigger. | | `arrowPadding` | `number` | `5` | Minimum distance to maintain between the arrow and the edges of the popup.

Use it to prevent the arrow element from hanging out of the rounded corners of a popup. | | `collisionAvoidance` | `CollisionAvoidance` | - | Determines how to handle collisions when positioning the popup.

`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
- `'flip'`: keep the requested side when it fits; otherwise try the opposite side
(`top` and `bottom`, or `left` and `right`).
- `'shift'`: never change side; keep the requested side and move the popup within
the clipping boundary so it stays visible.
- `'none'`: do not correct side-axis overflow.

`align` controls overflow on the alignment axis (`start`/`center`/`end`):
- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
- `'shift'`: keep side and requested alignment, then nudge the popup along the
alignment axis to fit.
- `'none'`: do not correct alignment-axis overflow.

`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
preferred axis cannot fit:
- `'start'`: allow perpendicular fallback and try the logical start side first
(`top` before `bottom`, or `left` before `right` in LTR).
- `'end'`: allow perpendicular fallback and try the logical end side first
(`bottom` before `top`, or `right` before `left` in LTR).
- `'none'`: do not fallback to the perpendicular axis.

When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
If `align` is omitted, it defaults to `'flip'`. | | `collisionBoundary` | `Boundary` | `clipping-ancestors` | An element or a rectangle that delimits the area that the popup is confined to. | | `collisionPadding` | `Padding` | `5` | Additional space to maintain from the edge of the collision boundary. | | `disableAnchorTracking` | `boolean` | `false` | Whether to disable the popup from tracking any layout shift of its positioning anchor. | | `positionMethod` | `fixed`, `absolute` | `absolute` | Determines which CSS `position` property to use. | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `bottom` | Which side of the anchor element to align the popup against.
May automatically change to avoid collisions. | | `sideOffset` | `number`, `function` | `10` | Distance between the anchor and the popup in pixels.
Also accepts a function that returns the distance to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `sticky` | `boolean` | `false` | Whether to maintain the popup in the viewport after
the anchor element was scrolled out of view. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Popover.PopupPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the popover is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `initialFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the popover is opened.
By default, focus moves to the first tabbable element inside the popup, except when the popover
is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (first tabbable element or popup).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Popover.Title | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Popover.Description | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Popover.Close | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # ProgressBar URL: /docs/components/progress-bar Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/progress-bar/index.mdx ProgressBar는 시작과 끝이 있는 작업의 진행 정도를 보여줍니다. 디스크 사용량이나 점수처럼 고정된 척도의 측정값에는 Meter를 사용합니다. ## Property *** ### Size Track의 높이를 설정합니다. ### Type 작업의 상태를 나타냅니다. ### Value Text `ProgressBar.Value`는 선언한 범위를 기준으로 값을 백분율로 환산해 보여줍니다. 백분율 대신 다른 표현이 필요하면 두 곳을 함께 바꿉니다. `getAriaValueText`는 보조기기가 듣는 `aria-valuetext`를, `ProgressBar.Value`의 `children` 함수는 화면 텍스트를 정합니다. 한쪽만 바꾸면 보는 사람과 듣는 사람이 다른 값을 받습니다. ### Indeterminate `value`가 `null`이면 진행률을 알 수 없는 상태입니다. 40% 폭의 세그먼트가 Track을 한 방향으로 훑고, `aria-valuenow`는 쓰이지 않습니다. ## Examples *** ### Description `ProgressBar.Description`은 진행 상황을 말로 풀어 씁니다. 남은 용량, 실패 사유, 다음에 할 일 같은 내용입니다. `ProgressBar.Root`의 `type`이 `error`이면 이 텍스트가 danger 색이 되고 막대는 danger 색으로 끝까지 찹니다. 단계마다 다른 문구가 필요하면 `render`나 `className` 함수의 두 번째 인수 `state.status`를 보세요. 값이 없으면 `indeterminate`, 최댓값에 닿으면 `complete`, 그 사이는 `progressing`입니다. ## Accessibility *** * `ProgressBar.Label`을 넣거나 `ProgressBar.Root`에 `aria-label` 또는 `aria-labelledby`를 주세요. 이름이 없으면 보조기기가 숫자만 읽습니다. 개발 모드에서는 콘솔 경고가 나옵니다. * 실패 사유나 다음 행동은 `ProgressBar.Description`에 적으세요. **`type="error"`는 겉모습만 바꿉니다.** 실패했다는 사실은 문구가 직접 말해야 합니다. 색과 꽉 찬 막대만으로는 스크린 리더 사용자도, 빨강과 회색을 구별하지 못하는 사용자도 실패를 알 수 없습니다. * 진행 상황을 막대 길이만으로 전달하지 마세요. `ProgressBar.Value`나 `ProgressBar.Description`으로 텍스트를 함께 두면 확대 화면이나 저시력 환경에서도 값을 읽을 수 있습니다. ## Props Table *** ### ProgressBar.Root | Prop | Type | Default | Description | | ------------------ | --------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **value** | `number`, `null` | - | The current value. The component is indeterminate when value is `null`. | | `size` | `sm`, `md`, `lg` | `md` | Size of the track. Controls its height. | | `type` | `default`, `error` | `default` | Tone of the description text. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `aria-valuetext` | `string` | - | A string value that provides a user-friendly name for `aria-valuenow`, the current value of the progress bar. | | `format` | `Intl.NumberFormatOptions` | - | Options to format the value. | | `getAriaValueText` | `function` | - | Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar. | | `locale` | `Intl.LocalesArgument` | - | The locale used by `Intl.NumberFormat` when formatting the value.
Defaults to the user's runtime locale. | | `max` | `number` | `100` | The maximum value. | | `min` | `number` | `0` | The minimum value. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### ProgressBar.Label | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### ProgressBar.Value | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `children` | `function`, `null` | - | | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### ProgressBar.Track | Prop | Type | Default | Description | | ------------------ | --------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `indicatorElement` | `ReactElement` | - | Replaces the `ProgressBar.IndicatorPrimitive` rendered inside the track by default. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### ProgressBar.TrackPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### ProgressBar.IndicatorPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### ProgressBar.Description | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Radio URL: /docs/components/radio Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/radio/index.mdx Radio는 여러 옵션 중 하나만 선택할 수 있는 입력 컴포넌트입니다. RadioGroup과 함께 사용하여 라디오 버튼 그룹을 구성할 수 있습니다. ## Property *** ### Size RadioGroup의 크기를 설정합니다. ### Disabled RadioGroup의 비활성화 상태를 설정합니다. ### Read Only RadioGroup의 읽기 전용 상태입니다. 사용자가 값을 변경할 수 없지만 현재 선택된 상태를 확인할 수 있습니다. ## Examples *** ### Direction Radio 그룹의 방향을 조절할 수 있습니다. VStack과 HStack을 사용하여 세로 및 가로 방향으로 배치할 수 있습니다. ### Flexible Radio의 유연한 사용예시입니다. ## Props Table *** ### RadioGroup.Root | Prop | Type | Default | Description | | --------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size` | `md`, `lg` | `md` | Size of the radios in the group, controlling their width and height. A `Radio.Root` that sets its own `size` keeps it. | | `defaultValue` | `unknown` | - | The uncontrolled value of the radio button that should be initially selected.

To render a controlled radio group, use the `value` prop instead. | | `onValueChange` | `function` | - | Callback fired when the value changes. | | `value` | `unknown` | - | The controlled value of the radio item that should be currently selected.

To render an uncontrolled radio group, use the `defaultValue` prop instead. | | `children` | `ReactNode` | - | Radios shown in the group, such as `Radio.Root` or `RadioCard` items and an optional `RadioGroup.Label`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `invalid` | `boolean` | - | Marks the radio group as invalid, applying error styles to every radio and radio card inside it. Sets `aria-invalid` on the `<div>` element. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `form` | `string` | - | Identifies the form that owns the radio inputs.
Useful when the radio group is rendered outside the form. | | `inputRef` | `React.Ref` | - | A ref to access the hidden input element. | | `name` | `string` | - | Identifies the field when a form is submitted. | | `readOnly` | `boolean` | `false` | Whether the user should be unable to select a different radio button in the group. | | `required` | `boolean` | `false` | Whether the user must choose a value before submitting a form. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### RadioGroup.Label | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Text of the label, such as the question the radios answer. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Radio.Root | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **value** | `unknown` | - | The unique identifying value of the radio in a group. | | `invalid` | `boolean` | `false` | Marks the radio as invalid, applying error styles. Sets `aria-invalid` on the `<span>` element. Inside an invalid `RadioGroup.Root`, the radio is always invalid. | | `size` | `md`, `lg` | `md` | Size of the radio, controlling its width and height. Inside `RadioGroup.Root`, falls back to the group's `size` when not set. | | `children` | `ReactNode` | - | Element shown inside the radio in place of the default `Radio.IndicatorPrimitive`, such as a `Radio.IndicatorPrimitive` with custom props. Anything other than a single element is ignored and the default indicator is shown. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | - | Whether the component should ignore user interaction. | | `inputRef` | `React.Ref` | - | A ref to access the hidden input element. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `readOnly` | `boolean` | - | Whether the user should be unable to select the radio button. | | `required` | `boolean` | - | Whether the user must choose a value before submitting a form. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Radio.IndicatorPrimitive | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `keepMounted` | `boolean` | `true` | Whether to keep the HTML element in the DOM when the radio button is inactive. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # RadioCard URL: /docs/components/radio-card Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/radio-card/index.mdx RadioCard는 RadioGroup과 함께 사용하는 카드 형태의 라디오 버튼 컴포넌트입니다. 선택 가능한 옵션을 카드 UI로 표현하여 더 직관적인 사용자 경험을 제공합니다. ## Property *** ### Disabled 사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다. ### Read Only 읽기 전용 상태로, 사용자가 값을 변경할 수 없지만 현재 선택된 상태를 확인할 수 있습니다. ## Examples *** ### Simple Usage RadioGroup.Root와 함께 사용합니다. ### Direction VStack과 HStack을 사용하여 세로 및 가로 방향으로 배치합니다. ### With Rich Content RadioCard는 고정된 높이가 없어 다양한 콘텐츠를 포함할 수 있습니다. 텍스트, 아이콘, 가격 정보 등 복잡한 레이아웃을 자유롭게 구성할 수 있습니다. ## Props Table *** ### RadioCard | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **value** | `unknown` | - | The unique identifying value of the radio in a group. | | `invalid` | `boolean` | `false` | Marks the radio card as invalid, applying error styles. Sets `aria-invalid` on the `<span>` element. Inside an invalid `RadioGroup.Root`, the card is always invalid. | | `children` | `ReactNode` | - | Content shown inside the card, such as a label or a short description of the option. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | - | Whether the component should ignore user interaction. | | `inputRef` | `React.Ref` | - | A ref to access the hidden input element. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `readOnly` | `boolean` | - | Whether the user should be unable to select the radio button. | | `required` | `boolean` | - | Whether the user must choose a value before submitting a form. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # SegmentedControl URL: /docs/components/segmented-control Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/segmented-control/index.mdx 같은 콘텐츠 영역 내에서 화면의 보기 방식이나 필터를 제어합니다. 주의! * `SegmentedControl.Root`의 `defaultValue`를 지정하지 않으면 첫 번째 아이템이 자동 선택됩니다. * `SegmentedControl.Item`의 `value=""` 속성에는 **반드시 아이템의 역할을 설명할 수 있는 이름**을 사용하세요. ## Property *** ### Size SegmentedControl의 크기를 설정합니다. ### Controlled State SegmentedControl의 선택 상태를 외부에서 제어합니다. ### Disabled SegmentedControl의 비활성 상태를 설정합니다. ## Examples *** ### Icon Item `SegmentedControl.IconItem`을 이용하여 아이콘만 포함하는 아이템을 사용할 수 있습니다. 이 경우, 각 아이템에 `aria-label`로 접근 가능한 이름을 제공하거나, 툴팁으로 보조 설명을 추가하는 것을 권장합니다. ## Props Table *** ### SegmentedControl.Root | Prop | Type | Default | Description | | ------------------ | -------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size` | `sm`, `md`, `lg` | `md` | Size of the segmented control, controlling its padding and the height and padding of its segments. | | `defaultValue` | `string` | - | Value of the segment selected on first render, for an uncontrolled segmented control. Must match the `value` of a `SegmentedControl.Item`. When it is not set or matches no segment, the first enabled segment is selected. | | `onValueChange` | `function` | - | Called when the user selects a different segment by clicking it or with the arrow keys. Receives the new value and the change event details. | | `value` | `string` | - | Value of the selected segment, for a controlled segmented control. Use with `onValueChange` to update it when the user selects a segment. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `indicatorElement` | `ReactElement` | - | Replaces the default `SegmentedControl.IndicatorPrimitive`. Use to change the look of the sliding highlight. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `form` | `string` | - | Identifies the form that owns the radio inputs.
Useful when the radio group is rendered outside the form. | | `inputRef` | `React.Ref` | - | A ref to access the hidden input element. | | `name` | `string` | - | Identifies the field when a form is submitted. | | `readOnly` | `boolean` | `false` | Whether the user should be unable to select a different radio button in the group. | | `required` | `boolean` | `false` | Whether the user must choose a value before submitting a form. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### SegmentedControl.RootPrimitive | Prop | Type | Default | Description | | --------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size` | `sm`, `md`, `lg` | `md` | Size of the segmented control, controlling its padding and the height and padding of its segments. | | `defaultValue` | `string` | - | Value of the segment selected on first render, for an uncontrolled segmented control. Must match the `value` of a `SegmentedControl.Item`. When it is not set or matches no segment, the first enabled segment is selected. | | `onValueChange` | `function` | - | Called when the user selects a different segment by clicking it or with the arrow keys. Receives the new value and the change event details. | | `value` | `string` | - | Value of the selected segment, for a controlled segmented control. Use with `onValueChange` to update it when the user selects a segment. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `form` | `string` | - | Identifies the form that owns the radio inputs.
Useful when the radio group is rendered outside the form. | | `inputRef` | `React.Ref` | - | A ref to access the hidden input element. | | `name` | `string` | - | Identifies the field when a form is submitted. | | `readOnly` | `boolean` | `false` | Whether the user should be unable to select a different radio button in the group. | | `required` | `boolean` | `false` | Whether the user must choose a value before submitting a form. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### SegmentedControl.IndicatorPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### SegmentedControl.Item | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **value** | `string` | - | Value that identifies the segment when it is selected. Must be unique within the segmented control. | | `children` | `ReactNode` | - | Content shown inside the segment, such as a label or an icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | - | Whether the component should ignore user interaction. | | `inputRef` | `React.Ref` | - | A ref to access the hidden input element. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `readOnly` | `boolean` | - | Whether the user should be unable to select the radio button. | | `required` | `boolean` | - | Whether the user must choose a value before submitting a form. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### SegmentedControl.IconItem | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **value** | `string` | - | Value that identifies the segment when it is selected. Must be unique within the segmented control. | | `children` | `ReactNode` | - | Content shown inside the segment, such as a label or an icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | - | Whether the component should ignore user interaction. | | `inputRef` | `React.Ref` | - | A ref to access the hidden input element. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `readOnly` | `boolean` | - | Whether the user should be unable to select the radio button. | | `required` | `boolean` | - | Whether the user must choose a value before submitting a form. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Select URL: /docs/components/select Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/select/index.mdx Select는 사용자가 여러 옵션 중에서 하나를 선택할 수 있는 드롭다운 컴포넌트입니다. 폼 입력, 설정 선택, 필터링 등에 사용되며, 키보드 내비게이션과 접근성을 완벽하게 지원합니다. ## Property *** ### Size Select의 크기를 설정합니다. ### Positioning Select 드롭다운이 나타날 위치를 설정합니다. 기본값은 'bottom'입니다. ### Controlled State Select의 선택 상태를 외부에서 제어합니다. ### States Select의 다양한 상태(비활성화, 읽기 전용, 오류)를 설정합니다. ## Examples *** ### Items Configuration 배열 형태와 객체 형태의 아이템 데이터를 모두 지원합니다. ### Grouping Options 관련된 옵션들을 그룹으로 묶어 구조화할 수 있습니다. Group과 GroupLabel, Separator를 사용하여 명확한 구조를 만들 수 있습니다. ### Custom Value Display Select.Value에 함수형 children을 제공하여 선택된 값을 커스터마이징할 수 있습니다. ## Props Table *** ### Select.Root | Prop | Type | Default | Description | | ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `invalid` | `boolean` | `false` | Marks the select as invalid, applying error styles. Sets `aria-invalid` on the trigger `<button>` element. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the select, controlling height, padding, typography, and icon size. | | `defaultOpen` | `boolean` | `false` | Whether the select popup is initially open.

To render a controlled select popup, use the `open` prop instead. | | `defaultValue` | `Value`, `null` | - | The uncontrolled value of the select when it's initially rendered.

To render a controlled select, use the `value` prop instead. | | `onOpenChange` | `function` | - | Event handler called when the select popup is opened or closed. | | `onValueChange` | `function` | - | Event handler called when the value of the select changes. | | `open` | `boolean` | - | Whether the select popup is currently open. | | `value` | `Value`, `null` | - | The value of the select. Use when controlled. | | `children` | `ReactNode` | - | Parts of the select, such as `Select.Trigger` and `Select.Popup`. | | `placeholder` | `ReactNode` | - | Text shown in the trigger when no value is selected. The `children` of `Select.ValuePrimitive`, or the label of an item whose value is `null` in `items`, takes precedence over it. | | `actionsRef` | `React.RefObject` | - | A ref to imperative actions.
- `unmount`: Manually unmounts the select.
Call this after any externally controlled closing animation finishes. | | `autoComplete` | `string` | - | Provides a hint to the browser for autofill. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `form` | `string` | - | Identifies the form that owns the hidden input.
Useful when the select is rendered outside the form. | | `highlightItemOnHover` | `boolean` | `true` | Whether moving the pointer over items should highlight them.
Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state. | | `id` | `string` | - | The id of the Select. | | `inputRef` | `React.Ref` | - | A ref to access the hidden input element. | | `isItemEqualToValue` | `function` | - | Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.
Defaults to `Object.is` comparison. | | `items` | `Record`, `readonly { label: React.ReactNode; value: any; }[]`, `readonly Group[]` | - | Data structure of the items rendered in the select popup.
When specified, `<Select.Value>` renders the label of the selected item instead of the raw value. | | `itemToStringLabel` | `function` | - | When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.
If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop. | | `itemToStringValue` | `function` | - | When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.
If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop. | | `modal` | `boolean` | `true` | Determines if the select enters a modal state when open.
- `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.
- `false`: user interaction with the rest of the document is allowed.

On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior. | | `name` | `string` | - | Identifies the field when a form is submitted. | | `onOpenChangeComplete` | `function` | - | Event handler called after any animations complete when the select popup is opened or closed. | | `readOnly` | `boolean` | `false` | Whether the user should be unable to choose a different option from the select popup. | | `required` | `boolean` | `false` | Whether the user must choose a value before submitting a form. | ### Select.Trigger | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Not rendered: the trigger always shows the selected value and a chevron icon. Use `Select.TriggerPrimitive` to compose custom content. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | - | Whether the component should ignore user interaction. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Select.ValuePrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `children` | `ReactNode`, `function` | - | Accepts a function that returns a `ReactNode` to format the selected value.
Treat the value as read-only: in `multiple` mode it may be a shared frozen array
when nothing is selected. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Select.PlaceholderPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Select.TriggerIconPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown in place of the default chevron icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Select.Popup | Prop | Type | Default | Description | | ------------------- | ------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | `ReactNode` | - | Options shown in the popup, such as `Select.Item`, `Select.Group`, or `Select.Separator`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `portalElement` | `ReactElement` | - | Replaces the default `Select.PortalPrimitive`. Use to change the portal container. | | `positionerElement` | `ReactElement` | - | Replaces the default `Select.PositionerPrimitive`. Use to change the side, alignment, or offset of the popup. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the select popup is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Select.PositionerPrimitive | Prop | Type | Default | Description | | ----------------------- | ----------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `align` | `center`, `end`, `start` | `start` | How to align the popup relative to the specified side. | | `alignItemWithTrigger` | `boolean` | `false` | Whether the positioner overlaps the trigger so the selected item's text is aligned with the trigger's value text. This only applies to mouse input and is automatically disabled if there is not enough space. | | `alignOffset` | `number`, `function` | `0` | Additional offset along the alignment axis in pixels.
Also accepts a function that returns the offset to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `anchor` | `Element`, `VirtualElement`, `React.RefObject`, `function`, `null` | - | An element to position the popup against.
By default, the popup will be positioned against the trigger. | | `arrowPadding` | `number` | `5` | Minimum distance to maintain between the arrow and the edges of the popup.

Use it to prevent the arrow element from hanging out of the rounded corners of a popup. | | `collisionAvoidance` | `CollisionAvoidance` | - | Determines how to handle collisions when positioning the popup.

`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
- `'flip'`: keep the requested side when it fits; otherwise try the opposite side
(`top` and `bottom`, or `left` and `right`).
- `'shift'`: never change side; keep the requested side and move the popup within
the clipping boundary so it stays visible.
- `'none'`: do not correct side-axis overflow.

`align` controls overflow on the alignment axis (`start`/`center`/`end`):
- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
- `'shift'`: keep side and requested alignment, then nudge the popup along the
alignment axis to fit.
- `'none'`: do not correct alignment-axis overflow.

`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
preferred axis cannot fit:
- `'start'`: allow perpendicular fallback and try the logical start side first
(`top` before `bottom`, or `left` before `right` in LTR).
- `'end'`: allow perpendicular fallback and try the logical end side first
(`bottom` before `top`, or `right` before `left` in LTR).
- `'none'`: do not fallback to the perpendicular axis.

When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
If `align` is omitted, it defaults to `'flip'`. | | `collisionBoundary` | `Boundary` | `clipping-ancestors` | An element or a rectangle that delimits the area that the popup is confined to. | | `collisionPadding` | `Padding` | `5` | Additional space to maintain from the edge of the collision boundary. | | `disableAnchorTracking` | `boolean` | `false` | Whether to disable the popup from tracking any layout shift of its positioning anchor. | | `positionMethod` | `fixed`, `absolute` | `absolute` | Determines which CSS `position` property to use. | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `bottom` | Which side of the anchor element to align the popup against.
May automatically change to avoid collisions. | | `sideOffset` | `number`, `function` | `4` | Distance between the anchor and the popup in pixels.
Also accepts a function that returns the distance to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `sticky` | `boolean` | `false` | Whether to maintain the popup in the viewport after
the anchor element was scrolled out of view. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Select.PopupPrimitive | Prop | Type | Default | Description | | ------------ | ------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | `ReactNode` | - | Options shown in the popup, such as `Select.Item`, `Select.Group`, or `Select.Separator`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the select popup is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Select.Item | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `any` | `null` | A unique value that identifies this select item. | | `children` | `ReactNode` | - | Label of the option, such as its text or an icon with text. The check mark is added after it. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `label` | `string` | - | Specifies the text label to use when the item is matched during keyboard text navigation.

Defaults to the item text content if not provided. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Select.ItemPrimitive | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `value` | `any` | `null` | A unique value that identifies this select item. | | `children` | `ReactNode` | - | Content shown inside the option, such as its label and `Select.ItemIndicatorPrimitive`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `label` | `string` | - | Specifies the text label to use when the item is matched during keyboard text navigation.

Defaults to the item text content if not provided. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Select.ItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | Icon shown in place of the default check icon. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `keepMounted` | `boolean` | - | Whether to keep the HTML element in the DOM when the item is not selected. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Select.Group | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Select.GroupLabel | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Select.Separator | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `orientation` | `horizontal`, `vertical` | `horizontal` | The orientation of the separator. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Sheet URL: /docs/components/sheet Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/sheet/index.mdx Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다. ## Property *** ### Side Sheet가 나타날 위치를 설정합니다. 기본값은 'right'입니다. ### Controlled State Sheet의 열림/닫힘 상태를 외부에서 제어합니다. ### Keep Mounted Sheet가 닫혀도 DOM에서 제거되지 않고 유지되도록 설정합니다. ## Examples *** ### Custom Usage 유연하게 Sheet를 사용합니다. ### Resizable Sheet의 크기를 자유자재로 조절하길 원한다면 ``을 사용하세요. 조절 가능 영역을 제한하고 싶다면 `` 컴포넌트에 `min/max-height`, `min/max-width` 속성을 적용하세요. ## Props Table *** ### Sheet.Root | Prop | Type | Default | Description | | ---------------------- | --------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `defaultOpen` | `boolean` | `false` | Whether the dialog is initially open.

To render a controlled dialog, use the `open` prop instead. | | `onOpenChange` | `function` | - | Event handler called when the dialog is opened or closed. | | `open` | `boolean` | - | Whether the dialog is currently open. | | `closeOnClickOverlay` | `boolean` | - | When `true`, clicking the overlay closes the dialog. | | `actionsRef` | `React.RefObject` | - | A ref to imperative actions.
- `unmount`: Manually unmounts the dialog.
Call this after any externally controlled closing animation finishes.
- `close`: Closes the dialog imperatively when called. | | `children` | `ReactNode`, `function` | - | The content of the dialog.
This can be a regular React node or a render function that receives the `payload` of the active trigger. | | `defaultTriggerId` | `string`, `null` | - | ID of the trigger that the dialog is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog. | | `handle` | `DialogHandle` | - | A handle to associate the dialog with a trigger.
If specified, allows external triggers to control the dialog's open state.
Can be created with the Dialog.createHandle() method. | | `modal` | `boolean`, `trap-focus` | `true` | Determines if the dialog enters a modal state when open.
- `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.
- `false`: user interaction with the rest of the document is allowed.
- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.

When `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so
touch screen readers can escape the popup. | | `onOpenChangeComplete` | `function` | - | Event handler called after any animations complete when the dialog is opened or closed. | | `triggerId` | `string`, `null` | - | ID of the trigger that the dialog is associated with.
This is useful in conjunction with the `open` prop to create a controlled dialog.
There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set). | ### Sheet.Trigger | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `handle` | `DialogHandle` | - | A handle to associate the trigger with a dialog.
Can be created with the Dialog.createHandle() method. | | `id` | `string` | - | ID of the trigger. In addition to being forwarded to the rendered element,
it is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop). | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `payload` | `unknown` | - | A payload to pass to the dialog when it is opened. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Sheet.Popup | Prop | Type | Default | Description | | ------------------- | ------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `overlayElement` | `ReactElement` | - | Replaces the default `Sheet.OverlayPrimitive`. Use to change the backdrop. | | `portalElement` | `ReactElement` | - | Replaces the default `Sheet.PortalPrimitive`. Use to change the portal container. | | `positionerElement` | `ReactElement` | - | Replaces the default `Sheet.PositionerPrimitive`. Use to change the side the sheet slides in from. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the dialog is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `initialFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the dialog is opened.
By default, focus moves to the first tabbable element inside the popup, except when the dialog
is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (first tabbable element or popup).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Sheet.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ----------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `container` | `HTMLElement`, `ShadowRoot`, `React.RefObject`, `null` | - | A parent element to render the portal element into. | | `keepMounted` | `boolean` | `false` | Whether to keep the portal mounted in the DOM while the popup is hidden. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Sheet.OverlayPrimitive | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `forceRender` | `boolean` | `false` | Whether the backdrop is forced to render even when nested. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Sheet.PopupPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `finalFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the dialog is closed.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (trigger or previously focused element).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `initialFocus` | `boolean`, `React.RefObject`, `function` | - | Determines the element to focus when the dialog is opened.
By default, focus moves to the first tabbable element inside the popup, except when the dialog
is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.

- `false`: Do not move focus.
- `true`: Move focus based on the default behavior (first tabbable element or popup).
- `RefObject`: Move focus to the ref element.
- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Sheet.PositionerPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `side` | `bottom`, `left`, `right`, `top` | `right` | Edge of the viewport the sheet slides in from. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Sheet.ResizeHandle | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `disabled` | `boolean` | `false` | Disables the handle, blocking drag and keyboard resizing. | | `step` | `number` | `16` | Distance the sheet resizes per arrow-key press, in pixels. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Sheet.Header | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Sheet.Body | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Sheet.Footer | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Sheet.Title | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Sheet.Description | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Sheet.Close | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Skeleton URL: /docs/components/skeleton Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/skeleton/index.mdx 콘텐츠가 로딩 중임을 나타내는 플레이스홀더 요소입니다. ## Property *** ### Shape Skeleton의 모서리 둥글기를 설정합니다. ### Animation Skeleton의 애니메이션 스타일을 설정합니다. ### Size Skeleton의 높이를 설정합니다. ## Examples *** ### Profile Card 여러 Skeleton 요소를 조합하여 프로필 카드 플레이스홀더를 구성하는 예제입니다. ## Props Table *** ### Skeleton | Prop | Type | Default | Description | | ----------- | --------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `animation` | `none`, `shimmer`, `pulse` | `shimmer` | Animation that shows the skeleton is loading. | | `shape` | `square`, `rounded` | `rounded` | Corner style of the skeleton. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the skeleton, controlling height. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Spinner URL: /docs/components/spinner Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/spinner/index.mdx 콘텐츠나 데이터 로딩 시 대기 상태를 표시합니다. ## Property *** ### Size Spinner의 크기를 설정합니다. ### Color Palette Spinner의 색상을 설정합니다. 다른 요소와 함께 사용될 때, `inherit` 속성을 사용하여 요소의 글자색과 통일하세요. ## Props Table *** ### Spinner | Prop | Type | Default | Description | | -------------- | --------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `colorPalette` | `inherit`, `primary` | `primary` | Color palette of the spinner, applied to the stroke of the spinning arc. Use `inherit` to take the stroke color from the parent element's `color`, such as on a filled background. | | `size` | `md`, `lg`, `xl` | `md` | Size of the spinner, controlling width, height, and stroke width. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Switch URL: /docs/components/switch Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/switch/index.mdx Switch는 사용자가 설정을 on/off로 전환할 수 있게 돕는 토글 컴포넌트입니다. ## Property *** ### Size Switch의 크기를 설정합니다. ### Checked Switch의 체크 상태를 설정합니다. ### Disabled Switch의 비활성화 상태를 설정합니다. ### Read Only 사용자는 스위치 상태를 변경할 수 없지만, 현재 상태를 확인할 수 있도록 허용하는 상태입니다. ## Examples *** ### Controlled 제어되는 Switch 컴포넌트의 사용 예시입니다. ### Custom Thumb `children`으로 `Switch.ThumbPrimitive`를 전달하면 내부 파트를 직접 제어할 수 있습니다. 아이콘을 삽입하거나 다른 요소로 교체할 수 있습니다. ## Props Table *** ### Switch.Root | Prop | Type | Default | Description | | ----------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `invalid` | `boolean` | `false` | Marks the switch as invalid, applying error styles. Sets `aria-invalid` on the `<span>` element. | | `size` | `sm`, `md`, `lg` | `md` | Size of the switch, controlling its width, height, and padding, and the size of its thumb. | | `checked` | `boolean` | - | Whether the switch is currently active.

To render an uncontrolled switch, use the `defaultChecked` prop instead. | | `defaultChecked` | `boolean` | `false` | Whether the switch is initially active.

To render a controlled switch, use the `checked` prop instead. | | `onCheckedChange` | `function` | - | Event handler called when the switch is activated or deactivated. | | `value` | `string` | - | The value submitted with the form when the switch is on.
By default, switch submits the "on" value, matching native checkbox behavior. | | `children` | `ReactNode` | - | Element shown inside the switch in place of the default `Switch.ThumbPrimitive`, such as a `Switch.ThumbPrimitive` with custom props. Anything other than a single element is ignored and the default thumb is shown. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `form` | `string` | - | Identifies the form that owns the hidden input.
Useful when the switch is rendered outside the form. | | `id` | `string` | - | The id of the hidden input element.

When `nativeButton` is `true`, the id is applied to the root element. | | `inputRef` | `React.Ref` | - | A ref to access the hidden `<input>` element. | | `name` | `string` | - | Identifies the field when a form is submitted. | | `nativeButton` | `boolean` | `false` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `true` if the rendered element is a native button. | | `readOnly` | `boolean` | `false` | Whether the user should be unable to activate or deactivate the switch. | | `required` | `boolean` | `false` | Whether the user must activate the switch before submitting a form. | | `uncheckedValue` | `string` | - | The value submitted with the form when the switch is off.
By default, unchecked switches do not submit any value, matching native checkbox behavior. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Switch.ThumbPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Table URL: /docs/components/table Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/table/index.mdx Table는 데이터를 행과 열로 구성하여 구조화된 방식으로 표시하는 컴포넌트입니다. Table 컴포넌트는 순수한 뷰(View) 역할에 집중하여 기본적인 구조와 스타일만을 제공합니다. 복잡한 상태 관리와 로직을 바탕으로 대량의 데이터를 다루는 Data Table을 구현하려면 [Table Block 문서](/docs/components/patterns/table)를 참고해주세요.
## Props Table *** ### Table.Root | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Table.Header | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Table.Body | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Table.Footer | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Table.Row | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Table.Heading | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Table.Cell | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Table.ColumnGroup | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Table.Column | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Tabs URL: /docs/components/tabs Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/tabs/index.mdx Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다. ## Property *** ### Size Tabs의 크기를 지정합니다. `sm`, `md`, `lg`, `xl` 네 가지 크기를 제공합니다. ### Variant Tabs의 스타일 변형을 설정합니다. `line`과 `fill` 두 가지 스타일을 제공합니다. ### Orientation 수평(horizontal)과 수직(vertical) 방향을 설정합니다. ### Controlled State Tabs의 활성 상태를 외부에서 제어합니다. ### States 개별 탭 또는 전체 탭 그룹을 비활성화할 수 있습니다. ## Examples *** ### Keyboard Navigation `activateOnFocus`와 `loopFocus` props를 사용하여 키보드 내비게이션 동작을 세밀하게 제어할 수 있습니다. ### Custom Indicator `Tabs.ListPrimitive`와 `Tabs.IndicatorPrimitive`를 직접 조합하면 인디케이터의 스타일을 제어할 수 있습니다. ## Props Table *** ### Tabs.Root | Prop | Type | Default | Description | | ----------------- | --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the tab buttons, controlling height and typography. | | `variant` | `line`, `fill` | `line` | Visual style of the tabs. `line` marks the active tab with a line on the border of the list, `fill` highlights the active tab with a filled background. | | `defaultValue` | `any` | `0` | The default value. Use when the component is not controlled.
When the value is `null`, no Tab will be active. | | `onValueChange` | `function` | - | Callback invoked when new value is being set.

The event `reason` is `'none'` for user-initiated changes, such as a click
or keyboard navigation; `'initial'` for the first automatic selection or
fallback in uncontrolled roots when `defaultValue` is omitted or
`undefined`, including when the implicit initial value is disabled or
missing; `'disabled'` for automatic fallback when the selected tab becomes
disabled in uncontrolled roots; or `'missing'` for automatic fallback when
the selected tab is removed, or when an explicit `defaultValue` never
matches a mounted tab in uncontrolled roots.

For automatic changes, the selected value can be `null` when no enabled Tab
is available as a fallback.

Automatic changes cannot be canceled; calling `eventDetails.cancel()` for
`'initial'`, `'disabled'`, or `'missing'` has no effect. | | `value` | `any` | - | The value of the currently active `Tab`. Use when the component is controlled.
When the value is `null`, no Tab will be active. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `disabled` | `boolean` | - | Disables every tab button, blocking all interactions. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `activateOnFocus` | `boolean` | `false` | Whether to automatically change the active tab on arrow key focus.
Otherwise, tabs will be activated using \Enter\ or \Space\ key press. | | `loopFocus` | `boolean` | `true` | Whether to loop keyboard focus back to the first item
when the end of the list is reached while using the arrow keys. | | `orientation` | `horizontal`, `vertical` | `horizontal` | The component orientation (layout flow direction). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Tabs.List | Prop | Type | Default | Description | | ------------------ | -------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `indicatorElement` | `ReactElement` | - | Replaces the default `Tabs.IndicatorPrimitive`. Use to change how the active tab is highlighted. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Tabs.ListPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Tabs.IndicatorPrimitive | Prop | Type | Default | Description | | ----------------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `renderBeforeHydration` | `boolean` | `false` | Whether to render itself before React hydrates.
This minimizes the time that the indicator isn't visible after server-side rendering. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Tabs.Button | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **value** | `any` | - | The value of the Tab. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | - | Whether the Tab is disabled.

If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected.
Instead, the next enabled Tab will be selected.
However, it does not work like this during server-side rendering, as it is not known
during pre-rendering which Tabs are disabled.
To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Tabs.Panel | Prop | Type | Default | Description | | ------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **value** | `any` | - | The value of the TabPanel. It will be shown when the Tab with the corresponding value is active. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `keepMounted` | `boolean` | `false` | Whether to keep the HTML element in the DOM while the panel is hidden. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Text URL: /docs/components/text Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/text/index.mdx Text 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다. ## Property *** ### Typography 텍스트의 타이포그래피 스타일을 설정합니다. ### Foreground 텍스트의 색상을 설정합니다. ## Props Table *** ### Text | Prop | Type | Default | Description | | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `foreground` | `hint`, `normal`, `white`, `primary-100`, `primary-200`, `primary`, `secondary-100`, `secondary-200`, `secondary`, `success-100`, `success-200`, `success`, `warning-100`, `warning-200`, `warning`, `danger-100`, `danger-200`, `danger`, `hint-100`, `hint-200`, `contrast-100`, `contrast-200`, `contrast`, `primary-strong`, `success-strong`, `warning-strong`, `danger-strong`, `normal-100`, `normal-200`, `inverse`, `staticWhite`, `staticBlack` | `normal` | Color of the text, chosen from the foreground color palette. | | `typography` | `body1`, `display1`, `display2`, `display3`, `display4`, `heading1`, `heading2`, `heading3`, `heading4`, `heading5`, `heading6`, `subtitle1`, `subtitle2`, `body2`, `body3`, `body4`, `code1`, `code2` | `body1` | Typography style of the text, setting font size, line height, font weight, and letter spacing. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # TextInput URL: /docs/components/text-input Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/text-input/index.mdx TextInput은 사용자가 데이터를 입력할 수 있도록 텍스트, 숫자 등 다양한 형식의 입력 필드를 제공합니다. ## Property *** ### Size TextInput의 크기를 설정합니다. ### Type TextInput의 타입을 설정합니다. ### Disabled 사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다. ### Invalid 유효하지 않은 상태(필수 항목 누락, 잘못된 입력 등)를 표시하여 올바른 입력을 유도합니다. ### Read Only 값을 수정할 수 없지만, 텍스트를 복사하거나 읽을 수 있는 상태입니다. ## Examples *** ### States TextInput의 다양한 상태를 보여줍니다. ## Props Table *** ### TextInput | Prop | Type | Default | Description | | --------------- | --------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `invalid` | `boolean` | `false` | Marks the text input as invalid, applying error styles. Sets `aria-invalid` on the `<input>` element. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the text input, controlling height, padding, and typography. | | `defaultValue` | `string` | \`\` | Initial text in the field. Use when uncontrolled. | | `onValueChange` | `function` | - | Called when the text changes as the user types, pastes, or deletes. Receives the new text and the change event details. | | `value` | `string` | - | Current text in the field. Use when controlled. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `type` | `search`, `text`, `tel`, `url`, `email`, `password` | - | Kind of text the field accepts, such as an email address, password, or URL. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Textarea URL: /docs/components/textarea Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/textarea/index.mdx Textarea는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 하는 텍스트 입력 필드를 제공합니다. ## Property *** ### Size Textarea의 크기를 설정합니다. ### Auto Resize 텍스트 내용에 따라 높이가 자동 조절됩니다. ### States Textarea의 다양한 상태를 보여줍니다. ## Examples *** ### maxLength Textarea에 `maxLength` 속성을 추가하여 입력 가능한 최대 문자 수를 제한하는 기능을 제공합니다. ## Props Table *** ### Textarea | Prop | Type | Default | Description | | --------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `autoResize` | `boolean` | `false` | Grows the textarea's height to fit its content as the user types, and turns off manual resizing. | | `invalid` | `boolean` | `false` | Marks the textarea as invalid, applying error styles. Sets `aria-invalid` on the `<textarea>` element. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the textarea, controlling padding and typography. | | `defaultValue` | `string` | \`\` | Initial text in the field. Use when uncontrolled. | | `onValueChange` | `function` | - | Called when the text changes as the user types, pastes, or deletes. Receives the new text and the change event details. Not called while `disabled` or `readOnly` is set. | | `value` | `string` | - | Current text in the field. Use when controlled. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Toast URL: /docs/components/toast Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/toast/index.mdx Toast는 일시적인 알림 메시지를 사용자에게 표시하는 컴포넌트입니다. Toast 컴포넌트는 화면의 모서리에 일시적인 알림 메시지를 표시하는 데 사용됩니다. 사용자의 작업에 대한 피드백을 제공하고, 피드백을 하나의 리스트로 관리하기 때문에 다른 컴포넌트와 사용 방식이 다릅니다. ## Property ### Methods Toast를 추가, 업데이트 및 제거할 수 있습니다. ### ColorPalette Toast의 색상 팔레트를 설정합니다. ## Examples ### Action Action 버튼과 함께 사용할 수 있습니다. ### Close Close 버튼을 제거할 수 있습니다. ### Icon Icon을 커스텀 할 수 있습니다. ### Custom Toast 아이템을 완전히 커스텀할 수 있습니다. ## Props ### Toast.Provider | Prop | Type | Default | Description | | -------------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | `ReactNode` | - | Part of the app that can show toasts, typically the whole app. | | `toastManager` | `ToastManager` | - | Toast manager created with `createToastManager`, for adding toasts from outside React components. | | `limit` | `number` | `3` | The maximum number of toasts that can be displayed at once.
When the limit is exceeded, the oldest toasts are marked as `limited` (via the `data-limited`
attribute) rather than removed, so they can be hidden or animated out. | | `timeout` | `number` | `4000` | The default amount of time (in ms) before a toast is auto dismissed.
A value of `0` will prevent the toast from being dismissed automatically. | ### Toast.ProviderPrimitive | Prop | Type | Default | Description | | -------------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | `ReactNode` | - | Part of the app that can show toasts, typically the whole app. | | `toastManager` | `ToastManager` | - | Toast manager created with `createToastManager`, for adding toasts from outside React components. | | `limit` | `number` | `3` | The maximum number of toasts that can be displayed at once.
When the limit is exceeded, the oldest toasts are marked as `limited` (via the `data-limited`
attribute) rather than removed, so they can be hidden or animated out. | | `timeout` | `number` | `5000` | The default amount of time (in ms) before a toast is auto dismissed.
A value of `0` will prevent the toast from being dismissed automatically. | ### Toast.PortalPrimitive | Prop | Type | Default | Description | | ----------- | ----------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `container` | `HTMLElement`, `ShadowRoot`, `React.RefObject`, `null` | - | A parent element to render the portal element into. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Toast.ViewportPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Toast.RootPrimitive | Prop | Type | Default | Description | | ---------------- | ------------------------------------------------------------------------ | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **toast** | `ToastObjectType` | - | Toast to show, usually one item of `useToastManager().toasts`. Its `colorPalette`, `icon`, `close`, and `actionProps` set the color, icon, close button, and action button of the toast. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `swipeDirection` | `left`, `right`, `up`, `down`, `("left" \| "right" \| "up" \| "down")[]` | `['up', 'right']` | Direction(s) in which the toast can be swiped to dismiss. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Toast.ContentPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Toast.TitlePrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Toast.DescriptionPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Toast.ActionPrimitive | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Toast.ClosePrimitive | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Toast.IconPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### useToastManager | Prop | Type | Default | Description | | -------------- | --------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | `string` | - | Unique identifier of the toast. Generated when omitted. | | `title` | `ReactNode` | - | Title of the toast. | | `description` | `ReactNode` | - | Description of the toast. | | `colorPalette` | `success`, `danger`, `info` | `info` | Color palette of the toast. Also picks the default icon. | | `icon` | `ReactElement` | - | Icon shown in the toast. Replaces the default icon of `colorPalette`. | | `close` | `boolean` | `true` | Whether to show the close button. | | `actionProps` | `ActionProps` | - | Props of the action button, such as `children` and `onClick`. Also takes the `colorPalette`, `size`, and `variant` of Button; `colorPalette` defaults to `secondary`. The action button is shown only when this is set. | | `timeout` | `number` | `5000` | Time in milliseconds before the toast closes on its own. `0` keeps it open until closed. | | `priority` | `low`, `high` | `low` | How urgently assistive technology announces the toast. `low` waits for the current speech to end; `high` interrupts it. | | `onClose` | `function` | - | Called when the toast is closed. | | `onRemove` | `function` | - | Called when the toast is removed after its closing animation completes. | | `data` | `object` | - | Custom data for the toast. Its type is the `Data` type parameter of `add`. | # Toggle URL: /docs/components/toggle Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/toggle/index.mdx Toggle은 두 가지 상태(on/off)를 전환할 수 있는 버튼 컴포넌트입니다. 단독으로 사용하거나 ToggleGroup, Toolbar와 결합하여 사용할 수 있습니다. ## Property *** ### Size Toggle의 크기를 지정합니다. ### Variant Toggle의 시각적 위계를 설정합니다. ### Pressed Toggle의 눌림 상태를 지정합니다. 초기 상태는 `defaultPressed`로 설정합니다. ### Disabled Toggle의 비활성화 상태를 지정합니다. ## Examples *** ### Controlled `pressed`와 `onPressedChange`로 Toggle의 눌림 상태를 외부에서 제어할 수 있습니다. ## Props Table *** ### Toggle | Prop | Type | Default | Description | | ----------------- | --------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the toggle, controlling its height and width. Inside a `ToggleGroup`, falls back to the group's `size` when not set. | | `variant` | `default`, `accent` | `default` | Color style of the toggle, applied to its content and to its background while pressed. | | `defaultPressed` | `boolean` | `false` | Whether the toggle button is currently pressed.
This is the uncontrolled counterpart of `pressed`. | | `onPressedChange` | `function` | - | Callback fired when the pressed state is changed. | | `pressed` | `boolean` | - | Whether the toggle button is currently pressed.
This is the controlled counterpart of `defaultPressed`. | | `value` | `string` | - | A unique string that identifies the toggle when used
inside a toggle group. | | `children` | `ReactNode` | - | Content shown inside the toggle, such as an icon. A single element child is hidden from assistive technologies, so give the toggle an `aria-label`. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the component should ignore user interaction. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # ToggleGroup URL: /docs/components/toggle-group Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/toggle-group/index.mdx ToggleGroup은 여러 Toggle을 하나의 그룹으로 묶어 상태를 함께 관리하는 컴포넌트입니다. 단일 선택과 다중 선택을 지원하며 키보드 내비게이션과 접근성을 제공합니다. 주의! * `ToggleGroup` 내부의 각 `Toggle`에는 그룹 내에서 고유한 `value` 속성이 필요합니다. ## Property *** ### Size ToggleGroup의 크기를 지정합니다. ### Multiple `multiple`을 `true`로 설정하면 여러 개의 Toggle을 동시에 선택할 수 있습니다. ### Disabled ToggleGroup 전체를 비활성화합니다. ## Examples *** ### Controlled `value`와 `onValueChange`로 ToggleGroup의 선택 상태를 외부에서 제어할 수 있습니다. 값은 눌린 Toggle의 `value` 배열로 관리됩니다. ## Props Table *** ### ToggleGroup | Prop | Type | Default | Description | | --------------- | --------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the toggles in the group, controlling their height and width. A `Toggle` that sets its own `size` keeps it. | | `defaultValue` | `readonly string[]` | - | The pressed state of the toggle group represented by an array of
the values of all pressed toggle buttons.
This is the uncontrolled counterpart of `value`. | | `onValueChange` | `function` | - | Callback fired when the pressed states of the toggle group changes. | | `value` | `readonly string[]` | - | The pressed state of the toggle group represented by an array of
the values of all pressed toggle buttons.
This is the controlled counterpart of `defaultValue`. | | `children` | `ReactNode` | - | Toggles shown in the group, such as `Toggle` buttons. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `orientation` | `horizontal`, `vertical` | `horizontal` | Direction of keyboard navigation between the toggles: Left and Right arrow keys for `horizontal`, Up and Down arrow keys for `vertical`. Doesn't change the layout. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | Whether the toggle group should ignore user interaction. | | `loopFocus` | `boolean` | `true` | Whether to loop keyboard focus back to the first item
when the end of the list is reached while using the arrow keys. | | `multiple` | `boolean` | `false` | When `false` only one item in the group can be pressed. If any item in
the group becomes pressed, the others will become unpressed.
When `true` multiple items can be pressed. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Toolbar URL: /docs/components/toolbar Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/toolbar/index.mdx Toolbar는 관련된 액션을 하나의 영역에 모아 제공하는 컴포넌트입니다. 버튼, 토글, 입력, 구분선 등을 조합할 수 있으며 키보드 내비게이션과 접근성을 지원합니다. 주의! * `Toolbar.Button`에 `render` prop으로 `Toggle`, `IconButton` 등 다른 컴포넌트를 결합할 수 있습니다. * 스크린 리더 사용자를 위해 `Toolbar.Root`에 `aria-label`을 지정하세요. ## Property *** ### Size Toolbar의 크기를 지정합니다. 하위의 `Toolbar.Button`, `Toolbar.Input`에도 함께 적용됩니다. ### Variant Toolbar의 스타일 변형을 지정합니다. ### Disabled Toolbar 전체를 비활성화합니다. 하위 아이템도 함께 비활성화됩니다. ## Examples *** ### Separator `Toolbar.Separator`로 관련 있는 아이템 묶음을 시각적으로 구분할 수 있습니다. ### Group `Toolbar.Group`으로 아이템을 논리적으로 묶어 함께 관리할 수 있습니다. 그룹 단위로 `disabled`를 지정할 수 있습니다. ### Input `Toolbar.Input`으로 툴바 안에 텍스트 입력 필드를 배치할 수 있습니다. `onValueChange`로 입력값 변화를 처리합니다. ## Props Table *** ### Toolbar.Root | Prop | Type | Default | Description | | ----------- | --------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Size of the toolbar buttons and inputs, controlling height, padding, and typography. | | `variant` | `outline`, `ghost` | `outline` | Visual style of the toolbar. `outline` adds a border and background, `ghost` leaves the toolbar transparent. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `disabled` | `boolean` | - | Disables every button and input in the toolbar, blocking all interactions. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `loopFocus` | `boolean` | `true` | If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Toolbar.Group | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | When `true` all toolbar items in the group are disabled. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Toolbar.Button | Prop | Type | Default | Description | | ----------------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | When `true` the item is disabled. | | `focusableWhenDisabled` | `boolean` | `true` | When `true` the item remains focusable when disabled. | | `nativeButton` | `boolean` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (for example, `<div>`). | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Toolbar.Input | Prop | Type | Default | Description | | ----------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `defaultValue` | `string`, `number`, `readonly string[]` | - | Value shown in the input when it first renders. Use when the input is not controlled. | | `onValueChange` | `function` | - | Called each time the input value changes, such as on every keystroke. Receives the new value. | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `disabled` | `boolean` | `false` | When `true` the item is disabled. | | `focusableWhenDisabled` | `boolean` | `true` | When `true` the item remains focusable when disabled. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Toolbar.Separator | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Tooltip URL: /docs/components/tooltip Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/tooltip/index.mdx 요소에 대한 추가 정보를 제공하는 툴팁 컴포넌트입니다 주의! * **반드시 Button, IconButton 등과 같은 상호작용이 가능한 요소와 함께 사용하세요.** Tooltip은 상호작용 가능한 요소의 동작에 대한 추가 정보를 제공하는 작은 팝업입니다. 상호작용이 불가능한 요소에 사용하거나, 단순히 정보를 제공하기 위한 용도로 사용하려면 `Popover` 컴포넌트를 고려해보세요. * **Tooltip에 중요한 정보를 포함하지 마세요.** Tooltip은 보조적인 정보를 제공하기 위한 용도로 설계되었으며, 중요한 정보는 포함하지 않는 것이 좋습니다. 중요한 정보는 항상 페이지의 주요 콘텐츠에 포함시켜야 합니다. ## Property *** ### Positioning Tooltip의 표시 위치를 설정합니다. ### Alignment Tooltip의 정렬 위치를 설정합니다. ### Delay `Tooltip.Trigger`의 `delay` prop으로 Tooltip이 표시되기까지의 지연 시간을 설정합니다. ### Offset Tooltip의 거리와 정렬 오프셋을 조정할 수 있습니다. ## Examples *** ### Content Variations 다양한 형태의 툴팁 내용을 표시할 수 있습니다. ## Props Table *** ### Tooltip.Root | Prop | Type | Default | Description | | ----------------------- | ----------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `defaultOpen` | `boolean` | `false` | Whether the tooltip is initially open.

To render a controlled tooltip, use the `open` prop instead. | | `onOpenChange` | `function` | - | Event handler called when the tooltip is opened or closed. | | `open` | `boolean` | - | Whether the tooltip is currently open. | | `actionsRef` | `React.RefObject` | - | A ref to imperative actions.
- `unmount`: Unmounts the tooltip popup.
- `close`: Closes the tooltip imperatively when called. | | `children` | `ReactNode`, `function` | - | The content of the tooltip.
This can be a regular React node or a render function that receives the `payload` of the active trigger. | | `defaultTriggerId` | `string`, `null` | - | ID of the trigger that the tooltip is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip. | | `disabled` | `boolean` | `false` | Whether the tooltip is disabled. | | `disableHoverablePopup` | `boolean` | `false` | Whether the tooltip contents can be hovered without closing the tooltip. | | `handle` | `TooltipHandle` | - | A handle to associate the tooltip with a trigger.
If specified, allows external triggers to control the tooltip's open state.
Can be created with the Tooltip.createHandle() method. | | `onOpenChangeComplete` | `function` | - | Event handler called after any animations complete when the tooltip is opened or closed. | | `trackCursorAxis` | `none`, `both`, `x`, `y` | `none` | Determines which axis the tooltip should track the cursor on. | | `triggerId` | `string`, `null` | - | ID of the trigger that the tooltip is associated with.
This is useful in conjunction with the `open` prop to create a controlled tooltip.
There's no need to specify this prop when the tooltip is uncontrolled (that is, when the `open` prop is not set). | ### Tooltip.Trigger | Prop | Type | Default | Description | | -------------- | --------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `closeDelay` | `number` | `0` | How long to wait before closing the tooltip. Specified in milliseconds. | | `closeOnClick` | `boolean` | `true` | Whether the tooltip should close when this trigger is clicked. | | `delay` | `number` | `600` | How long to wait before opening the tooltip on hover. Specified in milliseconds. | | `disabled` | `boolean` | `false` | If `true`, the tooltip will not open when interacting with this trigger.
Note that this doesn't apply the `disabled` attribute to the trigger element.
If you want to disable the trigger element itself, you can pass the `disabled` prop to the trigger element via the `render` prop. | | `handle` | `TooltipHandle` | - | A handle to associate the trigger with a tooltip. | | `payload` | `unknown` | - | A payload to pass to the tooltip when it is opened. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | ### Tooltip.Popup | Prop | Type | Default | Description | | ------------------- | ------------------------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `portalElement` | `ReactElement` | - | Replaces the default `Tooltip.PortalPrimitive`. Use to change the portal container. | | `positionerElement` | `ReactElement` | - | Replaces the default `Tooltip.PositionerPrimitive`. Use to change the side, alignment, or offset of the popup. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Tooltip.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ----------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `container` | `HTMLElement`, `ShadowRoot`, `React.RefObject`, `null` | - | A parent element to render the portal element into. | | `keepMounted` | `boolean` | `false` | Whether to keep the portal mounted in the DOM while the popup is hidden. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Tooltip.PositionerPrimitive | Prop | Type | Default | Description | | ----------------------- | ----------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `align` | `center`, `end`, `start` | `center` | How to align the popup relative to the specified side. | | `alignOffset` | `number`, `function` | `0` | Additional offset along the alignment axis in pixels.
Also accepts a function that returns the offset to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `anchor` | `Element`, `VirtualElement`, `React.RefObject`, `function`, `null` | - | An element to position the popup against.
By default, the popup will be positioned against the trigger. | | `arrowPadding` | `number` | `5` | Minimum distance to maintain between the arrow and the edges of the popup.

Use it to prevent the arrow element from hanging out of the rounded corners of a popup. | | `collisionAvoidance` | `CollisionAvoidance` | - | Determines how to handle collisions when positioning the popup.

`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
- `'flip'`: keep the requested side when it fits; otherwise try the opposite side
(`top` and `bottom`, or `left` and `right`).
- `'shift'`: never change side; keep the requested side and move the popup within
the clipping boundary so it stays visible.
- `'none'`: do not correct side-axis overflow.

`align` controls overflow on the alignment axis (`start`/`center`/`end`):
- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
- `'shift'`: keep side and requested alignment, then nudge the popup along the
alignment axis to fit.
- `'none'`: do not correct alignment-axis overflow.

`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
preferred axis cannot fit:
- `'start'`: allow perpendicular fallback and try the logical start side first
(`top` before `bottom`, or `left` before `right` in LTR).
- `'end'`: allow perpendicular fallback and try the logical end side first
(`bottom` before `top`, or `right` before `left` in LTR).
- `'none'`: do not fallback to the perpendicular axis.

When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
If `align` is omitted, it defaults to `'flip'`. | | `collisionBoundary` | `Boundary` | `clipping-ancestors` | An element or a rectangle that delimits the area that the popup is confined to. | | `collisionPadding` | `Padding` | `5` | Additional space to maintain from the edge of the collision boundary. | | `disableAnchorTracking` | `boolean` | `false` | Whether to disable the popup from tracking any layout shift of its positioning anchor. | | `positionMethod` | `fixed`, `absolute` | `absolute` | Determines which CSS `position` property to use. | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `top` | Which side of the anchor element to align the popup against.
May automatically change to avoid collisions. | | `sideOffset` | `number`, `function` | `10` | Distance between the anchor and the popup in pixels.
Also accepts a function that returns the distance to read the dimensions of the anchor
and positioner elements, along with its side and alignment.

The function takes a `data` object parameter with the following properties:
- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
- `data.side`: which side of the anchor element the positioner is aligned against.
- `data.align`: how the positioner is aligned relative to the specified side. | | `sticky` | `boolean` | `false` | Whether to maintain the popup in the viewport after
the anchor element was scrolled out of view. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | #### Tooltip.PopupPrimitive | Prop | Type | Default | Description | | ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `function` | - | CSS class applied to the element, or a function that
returns a class based on the component's state. | | `style` | `React.CSSProperties`, `function` | - | Style applied to the element, or a function that
returns a style object based on the component's state. | | `render` | `ReactElement`, `function` | - | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render. | # Alert dialog URL: /docs/composites/alert-dialog Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/composites/(components)/alert-dialog/index.mdx ## Anatomy | # | Element | Description | | - | ------------------ | ------------------------------------------------------------------------------------------ | | 1 | Title | Alert dialog가 실행할 작업을 설명합니다. aria-labelledby을 통해 Alert dialog의 레이블이 지정됩니다. | | 2 | Description | Alert dialog 실행 이후 발생할 결과를 설명합니다. aria-describedby을 통해 Alert dialog와 연결됩니다. | | 3 | Content (optional) | 작업 내용과 관련된 콘텐츠로 구성됩니다. 가장 핵심이 되는 정보를 제공해야 할 때 선택적으로 사용합니다. | | 4 | Cancel button | Alert dialog가 실행할 작업을 취소하는 버튼입니다. Alert dialog를 닫는 기능을 합니다. | | 5 | Action button | Alert dialog를 실행하는 버튼입니다. type=critical은 danger 버튼을 사용하고, type=confirm은 primary 버튼을 사용합니다. | | 6 | Header | Title과 Description이 포함되어 있습니다. | | 7 | Body (optional) | Content가 포함되어 있습니다. Content가 없을 경우 사용하지 않습니다. | | 8 | Footer | Action button과 Cancel button이 포함되어 있습니다. | | 9 | Backdrop | 페이지와 상호작용을 차단하는 Overlay입니다. 클릭해도 Alert dialog가 닫히지 않습니다. | ## Examples ### 되돌릴 수 없는 작업 전에 사용하세요 삭제, 초기화, 탈퇴처럼 사용자가 직접 작업한 결과물이 사라지고 데이터를 복구할 수 없는 작업 전에 사용하세요. 실수를 막기 위해 강한 경고가 필요할 때 사용합니다. ### 실행 전 확인이 필요한 작업에 사용하세요 사용자가 결정한 작업을 실행하기 전 확인을 요청할 때 사용합니다. 실행하면 상태는 바뀌지만 큰 손실이 없거나 복구할 방법이 있는 상황에 사용합니다. ## Best practices ### Button label ### Description ### Button color ### Content ## Patterns ### Alert dialog 작업 완료 후 알림 Alert dialog에서 실행한 작업이 완료되면 Toast로 결과를 알리세요. 사용자는 이미 다이얼로그에서 결정을 내렸으므로 결과는 화면 흐름을 방해하지 않도록 간결하게 전달합니다. ## Related components ### Alert dialog vs Dialog Alert dialog와 Dialog는 시각적으로 유사하지만, 접근성과 동작이 다르기에 명확히 구분해서 사용해야 합니다. | 구분 | Alert dialog | Dialog | | -------------- | ----------------------------- | ---------------------------------------------- | | 목적 | 사용자 결정 확인, 되돌릴 수 없는 작업에 대한 확인 | 폼 입력, 정보 조회, 특정 입력 값을 받아야 할 경우 | | Close behaivor | Footer에서 Cancel button으로 제공 | Hearder의 Close button
Backdrop 클릭 / ESC 키 | | 사이즈 | 단일 사이즈 | md / lg / xl | ### Non-dialog 너무 잦은 Dialog 사용은 사용자의 주의를 분산시키고 반사적으로 Dialog를 닫는 행동으로 이어질 수 있습니다. 사용자의 결정이 프로세스에 영향을 주지 않거나, 중요도가 낮은 정보라면 비모달(Non-dialog) 컴포넌트를 사용하세요. ## Guidelines ### Height Alert dialog popup의 최대 높이(Max-height)는 전체 화면 높이의 80%로 설정됩니다. 최대 높이를 넘을 경우 Content 영역에 스크롤이 발생합니다. ### Close behaivor Alert dialog는 Footer의 Cancel 버튼으로만 닫을 수 있습니다. # Dialog URL: /docs/composites/dialog/index Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/composites/(components)/dialog/index.mdx Dialog는 페이지 위에 창을 띄워 사용자를 중요한 정보에 집중시키거나, 특정 작업을 수행하도록 강제하는 컴포넌트입니다. ## Anatomy | # | Element | Description | | -- | --------------------------- | -------------------------------------------------------------------------------------------- | | 1 | Title | Dialog가 실행할 작업을 설명합니다. aria-labelledby을 통해 Dialog의 레이블이 지정됩니다. | | 2 | Description (optional) | Dialog 실행 이후 발생할 결과를 설명합니다. aria-describedby을 통해 Dialog와 연결됩니다. | | 3 | Content | 작업을 수행하기 위한 입력 폼 또는 정보성 콘텐츠로 구성됩니다. | | 4 | Assistive button (optional) | 보조 액션을 실행하는 버튼입니다. 상황에 따라 Assistive button을 표시하지 않을 수 있으며, 닫기 버튼으로 사용하지 않습니다. | | 5 | Close button | Dialog를 닫는 버튼입니다. Close button통해 Dialog가 닫히면 작업은 실행되지 않습니다. | | 6 | Action button | Dialog를 실행하는 버튼입니다. 입력 값을 제출하거나 사용자가 지정한 작업을 실행하는 기능을 합니다. | | 7 | Header | Title과 Description, Close button이 포함되어 있습니다. | | 8 | Body | Content가 포함되어 있습니다. Dialog popup의 전체 높이가 최대 높이 값(80vh)을 넘을 경우 Scroll이 발생합니다. | | 9 | Footer (optional) | Action button과 Assistive button이 포함되어 있습니다. 제출할 값이 없는 정보성(Information) Dialog의 경우 사용하지 않습니다. | | 10 | Backdrop | 페이지와 상호작용을 차단하는 Overlay입니다. 클릭하면 Dialog가 닫히며 작업은 실행되지 않습니다. | ## Examples ### 사용자의 정보 입력이 필요할 경우 사용하세요 현재 작업을 이어가는 데 필요한 정보를 간단히 입력받을 때 사용합니다. 입력 항목이 많거나 여러 단계로 나뉜다면 페이지로 제공합니다. ### 작업과 관련된 정보를 제공할 때 사용하세요 현재 화면을 벗어나지 않고 상세 내용을 확인해야 하는 경우 사용합니다. 확인만 하는 정보라면 Footer 없이 제공합니다. ### 사용자에게 필요한 정보를 안내하고 다음 행동으로 이어갈 때 사용하세요 복사, 다운로드처럼 안내한 정보를 바로 활용하는 동작은 Assistive button으로 제공합니다. 주요 동작(Action button)과 함께 배치하며, 닫기 용도로는 사용하지 않습니다. ## Best practices ### Title ### Button label ### Close button ### Scroll ## Patterns ### Dialog 작업 완료 후 알림 Dialog에서 실행한 작업이 완료되면 Toast로 결과를 알리세요. 사용자는 이미 다이얼로그에서 결정을 내렸으므로 결과는 화면 흐름을 방해하지 않도록 간결하게 전달합니다. ### Dialog에서 발생한 오류 처리 Dialog에서 발생한 오류는 인라인 메시지로 문제가 되는 부분을 바로 알리세요. 사용자가 Dialog를 벗어나지 않은 채 다시 작업할 수 있도록 안내해야 합니다. 단, 세션 만료처럼 작업을 더 이상 이어갈 수 없는 경우에는 Alert dialog나 페이지로 안내합니다. 이때 Alert dialog는 Dialog 위에 겹쳐 띄우지 않고 기존 Dialog를 닫은 뒤 표시합니다. ## Related components ### Dialog vs Alert dialog Dialog와 Alert dialog는 시각적으로 유사하지만, 접근성과 동작이 다르기에 명확히 구분해서 사용해야 합니다. | 구분 | Dialog | Alert dialog | | -------------- | ---------------------------------------------- | ----------------------------- | | 목적 | 폼 입력, 정보 조회, 특정 입력 값을 받아야 할 경우 | 사용자 결정 확인, 되돌릴 수 없는 작업에 대한 확인 | | Close behaivor | Hearder의 Close button
Backdrop 클릭 / ESC 키 | Footer에서 Cancel button으로 제공 | | 사이즈 | md / lg / xl | 단일 사이즈 | ### Non-dialog 너무 잦은 Dialog 사용은 사용자의 주의를 분산시키고 반사적으로 Dialog를 닫는 행동으로 이어질 수 있습니다. 사용자의 결정이 프로세스에 영향을 주지 않거나, 중요도가 낮은 정보라면 비모달(Non-dialog) 컴포넌트를 사용하세요. ## Guidelines ### Height Dialog popup의 최대 높이(Max-height)는 전체 화면 높이의 80%로 설정됩니다. 최대 높이를 넘을 경우 Body에 Scroll이 발생합니다. ### Close behaivor ### Scroll behaivor Scroll 발생 시 Body 영역에 Vertical scrollbar와 하단 Gradient dim이 표시됩니다. 스크롤 시에는 Header와 Footer는 고정이며 Body 영역만 스크롤 됩니다. Horizontal scroll은 사용하지 않으며 Horizontal scroll이 필요한 경우 레이아웃을 조정하거나, 더 큰 사이즈의 Dialog를 사용하세요. # Menu URL: /docs/composites/menu Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/composites/(components)/menu/index.mdx ## Anatomy | # | Element | Description | | -- | --------------------------- | ---------------------------------------------------------------------------------------------------- | | 1 | Item | 메뉴에서 실행할 수 있는 하나의 동작입니다. 레이블을 표시하며, 필요하면 아래에 설명을 함께 표시합니다. 선택하면 동작이 실행되고 메뉴가 닫힙니다. | | 2 | Leading element (optional) | Item 레이블 앞에 표시하는 아이콘입니다. 항목의 의미를 빠르게 알아볼 수 있게 합니다. | | 3 | Trailing element (optional) | Item 오른쪽 끝에 표시하는 보조 요소입니다. Badge, Kbd(키보드 단축키), Text를 추가하여 사용합니다. | | 4 | Submenu item | 하위 메뉴를 여는 Item입니다. 오른쪽에 화살표 아이콘을 표시해 하위 메뉴가 있음을 알립니다. 하위 메뉴가 열려 있는 동안에는 열린 상태를 시각적으로 표시합니다. | | 5 | Submenu | Submenu item에서 열리는 하위 메뉴입니다. 상위 메뉴와 같은 Item으로 구성합니다. | | 6 | Group label (optional) | Item group의 이름을 나타내는 텍스트입니다. 그룹 맨 위에 표시해 묶인 항목의 공통 주제를 알려 줍니다. | | 7 | Separator | 서로 다른 그룹 사이를 나누는 구분선입니다. 메뉴 맨 아래에 오는 그룹 아래에는 넣지 않습니다. | | 8 | Item group | 서로 관련 있는 Item을 하나로 묶는 영역입니다. Group label로 이름을 붙이거나 Separator로 다른 그룹과 구분합니다. | | 9 | Check item: single | 여러 항목 중 하나만 선택하는 Item입니다. 선택된 항목에 Checkmark icon를 표시하며 선택하면 메뉴가 닫힙니다. | | 10 | Check item: multiple | 여러 항목을 동시에 선택할 수 있는 Item입니다. Checkbox로 선택 상태를 표시하며 선택해도 메뉴가 닫히지 않아 연달아 선택할 수 있습니다. | | 11 | Check group: single | Check item: single을 묶는 그룹입니다. 그룹 안에서는 한 항목만 선택됩니다. 그룹 안에 Check item: multiple을 넣어 사용하지 않습니다. | | 12 | Check group: multiple | Check item: multiple을 묶는 그룹입니다. 그룹 안에서 여러 항목을 함께 선택할 수 있습니다. 그룹 안에 Check item: single을 넣어 사용하지 않습니다. | ## Examples ### 작업과 관련된 여러 항목들을 제공할 때 사용하세요 작업과 관련된 옵션이 여러개 있을 때 하나의 인터페이스 안에 모아사용자가 필요로 할 때 제공합니다. ### 연관성이 높은 항목은 같은 그룹으로 묶어 사용하세요 동일한 카테고리에 속하는 Item들을 묶어 하나의 Group으로 제공하고, Group label에는 카테고리를 작성합니다. ### 선택 가능한 옵션은 체크 아이콘이 포함된 Check item을 사용하세요 단일 선택(Single)과 다중 선택(Multiple)을 구분하여 사용하세요. Check item의 경우 하나의 Item만 사용될 경우에도 Check group을 사용합니다.