# Welcome, Vapor UI
URL: /docs
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/index.mdx

Vapor는 구름의 세 번째 디자인 시스템으로, 다양한 서브 패키지들로 구성되어 있습니다. 각 서브 패키지는 다음과 같은 역할을 수행합니다.

<IntroLinkCardContainer />


# Icons
URL: /docs/components/icons
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/icons.mdx

Vapor UI 아이콘 라이브러리. 아이콘을 클릭하면 import 문이 복사됩니다.

## 설치

```package-install
@vapor-ui/icons
```

## 사용법

```tsx
import { CheckCircleIcon, SearchOutlineIcon } from '@vapor-ui/icons';

function Example() {
    return (
        <>
            <CheckCircleIcon size="24" />
            <SearchOutlineIcon size="20" color="gray" />
        </>
    );
}
```

### Props

| Prop    | Type              | Default        | Description |
| ------- | ----------------- | -------------- | ----------- |
| `size`  | `string` `number` | `24`           | 아이콘 크기 (px) |
| `color` | `string`          | `currentColor` | 아이콘 색상      |

## 아이콘 스타일

<IconStyleGuide />

<Callout>아이콘을 클릭하면 import 문이 자동으로 복사됩니다.</Callout>

## 아이콘 목록

## Basic Icons

| Icon Name                               | Import Statement                                                          |
| --------------------------------------- | ------------------------------------------------------------------------- |
| `AchievementIcon`                       | `import { AchievementIcon } from '@vapor-ui/icons'`                       |
| `AddUserIcon`                           | `import { AddUserIcon } from '@vapor-ui/icons'`                           |
| `AfghanistanColorIcon`                  | `import { AfghanistanColorIcon } from '@vapor-ui/icons'`                  |
| `AiGoormeeIcon`                         | `import { AiGoormeeIcon } from '@vapor-ui/icons'`                         |
| `AiSmartieIcon`                         | `import { AiSmartieIcon } from '@vapor-ui/icons'`                         |
| `AirplayIcon`                           | `import { AirplayIcon } from '@vapor-ui/icons'`                           |
| `AlbaniaColorIcon`                      | `import { AlbaniaColorIcon } from '@vapor-ui/icons'`                      |
| `AlgeriaColorIcon`                      | `import { AlgeriaColorIcon } from '@vapor-ui/icons'`                      |
| `AlgorithmIcon`                         | `import { AlgorithmIcon } from '@vapor-ui/icons'`                         |
| `AndorraColorIcon`                      | `import { AndorraColorIcon } from '@vapor-ui/icons'`                      |
| `AngolaColorIcon`                       | `import { AngolaColorIcon } from '@vapor-ui/icons'`                       |
| `AntiguaAndBarbudaColorIcon`            | `import { AntiguaAndBarbudaColorIcon } from '@vapor-ui/icons'`            |
| `AppleIcon`                             | `import { AppleIcon } from '@vapor-ui/icons'`                             |
| `ArgentinaColorIcon`                    | `import { ArgentinaColorIcon } from '@vapor-ui/icons'`                    |
| `ArmeniaColorIcon`                      | `import { ArmeniaColorIcon } from '@vapor-ui/icons'`                      |
| `ArrowDownCircleIcon`                   | `import { ArrowDownCircleIcon } from '@vapor-ui/icons'`                   |
| `AssignmentIcon`                        | `import { AssignmentIcon } from '@vapor-ui/icons'`                        |
| `AustraliaColorIcon`                    | `import { AustraliaColorIcon } from '@vapor-ui/icons'`                    |
| `AustriaColorIcon`                      | `import { AustriaColorIcon } from '@vapor-ui/icons'`                      |
| `AwsIcon`                               | `import { AwsIcon } from '@vapor-ui/icons'`                               |
| `AzerbaijanColorIcon`                   | `import { AzerbaijanColorIcon } from '@vapor-ui/icons'`                   |
| `AzureIcon`                             | `import { AzureIcon } from '@vapor-ui/icons'`                             |
| `BahamasColorIcon`                      | `import { BahamasColorIcon } from '@vapor-ui/icons'`                      |
| `BahrainColorIcon`                      | `import { BahrainColorIcon } from '@vapor-ui/icons'`                      |
| `BangladeshColorIcon`                   | `import { BangladeshColorIcon } from '@vapor-ui/icons'`                   |
| `BarbadosColorIcon`                     | `import { BarbadosColorIcon } from '@vapor-ui/icons'`                     |
| `BedIcon`                               | `import { BedIcon } from '@vapor-ui/icons'`                               |
| `BelarusColorIcon`                      | `import { BelarusColorIcon } from '@vapor-ui/icons'`                      |
| `BelgiumColorIcon`                      | `import { BelgiumColorIcon } from '@vapor-ui/icons'`                      |
| `BelizeColorIcon`                       | `import { BelizeColorIcon } from '@vapor-ui/icons'`                       |
| `BellOffIcon`                           | `import { BellOffIcon } from '@vapor-ui/icons'`                           |
| `BellOnIcon`                            | `import { BellOnIcon } from '@vapor-ui/icons'`                            |
| `BeninColorIcon`                        | `import { BeninColorIcon } from '@vapor-ui/icons'`                        |
| `BhutanColorIcon`                       | `import { BhutanColorIcon } from '@vapor-ui/icons'`                       |
| `BitbucketIcon`                         | `import { BitbucketIcon } from '@vapor-ui/icons'`                         |
| `BlogColorIcon`                         | `import { BlogColorIcon } from '@vapor-ui/icons'`                         |
| `BlogIcon`                              | `import { BlogIcon } from '@vapor-ui/icons'`                              |
| `BoliviaColorIcon`                      | `import { BoliviaColorIcon } from '@vapor-ui/icons'`                      |
| `BookIcon`                              | `import { BookIcon } from '@vapor-ui/icons'`                              |
| `BookmarkIcon`                          | `import { BookmarkIcon } from '@vapor-ui/icons'`                          |
| `BosniaAndHerzegovinaColorIcon`         | `import { BosniaAndHerzegovinaColorIcon } from '@vapor-ui/icons'`         |
| `BotswanaColorIcon`                     | `import { BotswanaColorIcon } from '@vapor-ui/icons'`                     |
| `BottomPlayerIcon`                      | `import { BottomPlayerIcon } from '@vapor-ui/icons'`                      |
| `BranchIcon`                            | `import { BranchIcon } from '@vapor-ui/icons'`                            |
| `BrazilColorIcon`                       | `import { BrazilColorIcon } from '@vapor-ui/icons'`                       |
| `BreakpointIcon`                        | `import { BreakpointIcon } from '@vapor-ui/icons'`                        |
| `BruneiColorIcon`                       | `import { BruneiColorIcon } from '@vapor-ui/icons'`                       |
| `BuildIcon`                             | `import { BuildIcon } from '@vapor-ui/icons'`                             |
| `BulgariaColorIcon`                     | `import { BulgariaColorIcon } from '@vapor-ui/icons'`                     |
| `BurkinaFasoColorIcon`                  | `import { BurkinaFasoColorIcon } from '@vapor-ui/icons'`                  |
| `BurundiColorIcon`                      | `import { BurundiColorIcon } from '@vapor-ui/icons'`                      |
| `CafeIcon`                              | `import { CafeIcon } from '@vapor-ui/icons'`                              |
| `CakeIcon`                              | `import { CakeIcon } from '@vapor-ui/icons'`                              |
| `CalculatorIcon`                        | `import { CalculatorIcon } from '@vapor-ui/icons'`                        |
| `CalendarIcon`                          | `import { CalendarIcon } from '@vapor-ui/icons'`                          |
| `CallIcon`                              | `import { CallIcon } from '@vapor-ui/icons'`                              |
| `CambodiaColorIcon`                     | `import { CambodiaColorIcon } from '@vapor-ui/icons'`                     |
| `CameraIcon`                            | `import { CameraIcon } from '@vapor-ui/icons'`                            |
| `CameroonColorIcon`                     | `import { CameroonColorIcon } from '@vapor-ui/icons'`                     |
| `CampIcon`                              | `import { CampIcon } from '@vapor-ui/icons'`                              |
| `CanadaColorIcon`                       | `import { CanadaColorIcon } from '@vapor-ui/icons'`                       |
| `CapeVerdeColorIcon`                    | `import { CapeVerdeColorIcon } from '@vapor-ui/icons'`                    |
| `CaptionIcon`                           | `import { CaptionIcon } from '@vapor-ui/icons'`                           |
| `CarIcon`                               | `import { CarIcon } from '@vapor-ui/icons'`                               |
| `CardsIcon`                             | `import { CardsIcon } from '@vapor-ui/icons'`                             |
| `CaretDownIcon`                         | `import { CaretDownIcon } from '@vapor-ui/icons'`                         |
| `CaretLeftIcon`                         | `import { CaretLeftIcon } from '@vapor-ui/icons'`                         |
| `CaretRightIcon`                        | `import { CaretRightIcon } from '@vapor-ui/icons'`                        |
| `CaretUpIcon`                           | `import { CaretUpIcon } from '@vapor-ui/icons'`                           |
| `CentralAfricanRepublicColorIcon`       | `import { CentralAfricanRepublicColorIcon } from '@vapor-ui/icons'`       |
| `CertificateIcon`                       | `import { CertificateIcon } from '@vapor-ui/icons'`                       |
| `ChadColorIcon`                         | `import { ChadColorIcon } from '@vapor-ui/icons'`                         |
| `ChapterIcon`                           | `import { ChapterIcon } from '@vapor-ui/icons'`                           |
| `ChartPieIcon`                          | `import { ChartPieIcon } from '@vapor-ui/icons'`                          |
| `ChatgptIcon`                           | `import { ChatgptIcon } from '@vapor-ui/icons'`                           |
| `CheckCircleIcon`                       | `import { CheckCircleIcon } from '@vapor-ui/icons'`                       |
| `CheckboxIcon`                          | `import { CheckboxIcon } from '@vapor-ui/icons'`                          |
| `ChileColorIcon`                        | `import { ChileColorIcon } from '@vapor-ui/icons'`                        |
| `ChinaColorIcon`                        | `import { ChinaColorIcon } from '@vapor-ui/icons'`                        |
| `ChromeColorIcon`                       | `import { ChromeColorIcon } from '@vapor-ui/icons'`                       |
| `ChromeIcon`                            | `import { ChromeIcon } from '@vapor-ui/icons'`                            |
| `ClassIcon`                             | `import { ClassIcon } from '@vapor-ui/icons'`                             |
| `CodeBlockIcon`                         | `import { CodeBlockIcon } from '@vapor-ui/icons'`                         |
| `CodevisorIcon`                         | `import { CodevisorIcon } from '@vapor-ui/icons'`                         |
| `CollaborationIcon`                     | `import { CollaborationIcon } from '@vapor-ui/icons'`                     |
| `ColombiaColorIcon`                     | `import { ColombiaColorIcon } from '@vapor-ui/icons'`                     |
| `ComorosColorIcon`                      | `import { ComorosColorIcon } from '@vapor-ui/icons'`                      |
| `ComponentIcon`                         | `import { ComponentIcon } from '@vapor-ui/icons'`                         |
| `ContainerIcon`                         | `import { ContainerIcon } from '@vapor-ui/icons'`                         |
| `ContainerRunIcon`                      | `import { ContainerRunIcon } from '@vapor-ui/icons'`                      |
| `ContainerShareIcon`                    | `import { ContainerShareIcon } from '@vapor-ui/icons'`                    |
| `ContainerStopIcon`                     | `import { ContainerStopIcon } from '@vapor-ui/icons'`                     |
| `ContainerToImageIcon`                  | `import { ContainerToImageIcon } from '@vapor-ui/icons'`                  |
| `ControlCommonIcon`                     | `import { ControlCommonIcon } from '@vapor-ui/icons'`                     |
| `CookIslandsColorIcon`                  | `import { CookIslandsColorIcon } from '@vapor-ui/icons'`                  |
| `CopyIcon`                              | `import { CopyIcon } from '@vapor-ui/icons'`                              |
| `CostaRicaColorIcon`                    | `import { CostaRicaColorIcon } from '@vapor-ui/icons'`                    |
| `CouponIcon`                            | `import { CouponIcon } from '@vapor-ui/icons'`                            |
| `CourseHistoryIcon`                     | `import { CourseHistoryIcon } from '@vapor-ui/icons'`                     |
| `CourseIcon`                            | `import { CourseIcon } from '@vapor-ui/icons'`                            |
| `CpuIcon`                               | `import { CpuIcon } from '@vapor-ui/icons'`                               |
| `CreditCardIcon`                        | `import { CreditCardIcon } from '@vapor-ui/icons'`                        |
| `CroatiaColorIcon`                      | `import { CroatiaColorIcon } from '@vapor-ui/icons'`                      |
| `CubaColorIcon`                         | `import { CubaColorIcon } from '@vapor-ui/icons'`                         |
| `CursorshareoffIcon`                    | `import { CursorshareoffIcon } from '@vapor-ui/icons'`                    |
| `CursorshareonIcon`                     | `import { CursorshareonIcon } from '@vapor-ui/icons'`                     |
| `CyprusColorIcon`                       | `import { CyprusColorIcon } from '@vapor-ui/icons'`                       |
| `CzechRepublicColorIcon`                | `import { CzechRepublicColorIcon } from '@vapor-ui/icons'`                |
| `DarkIcon`                              | `import { DarkIcon } from '@vapor-ui/icons'`                              |
| `DashboardIcon`                         | `import { DashboardIcon } from '@vapor-ui/icons'`                         |
| `DatabaseIcon`                          | `import { DatabaseIcon } from '@vapor-ui/icons'`                          |
| `DebugContinueIcon`                     | `import { DebugContinueIcon } from '@vapor-ui/icons'`                     |
| `DebugIcon`                             | `import { DebugIcon } from '@vapor-ui/icons'`                             |
| `DemocraticRepublicOfTheCongoColorIcon` | `import { DemocraticRepublicOfTheCongoColorIcon } from '@vapor-ui/icons'` |
| `DenmarkColorIcon`                      | `import { DenmarkColorIcon } from '@vapor-ui/icons'`                      |
| `DeployPushIcon`                        | `import { DeployPushIcon } from '@vapor-ui/icons'`                        |
| `DetailViewIcon`                        | `import { DetailViewIcon } from '@vapor-ui/icons'`                        |
| `DevicesIcon`                           | `import { DevicesIcon } from '@vapor-ui/icons'`                           |
| `DiscIcon`                              | `import { DiscIcon } from '@vapor-ui/icons'`                              |
| `DiscordColorIcon`                      | `import { DiscordColorIcon } from '@vapor-ui/icons'`                      |
| `DiscordIcon`                           | `import { DiscordIcon } from '@vapor-ui/icons'`                           |
| `DiscussionIcon`                        | `import { DiscussionIcon } from '@vapor-ui/icons'`                        |
| `DiskIcon`                              | `import { DiskIcon } from '@vapor-ui/icons'`                              |
| `DislikeIcon`                           | `import { DislikeIcon } from '@vapor-ui/icons'`                           |
| `DislikeThumbIcon`                      | `import { DislikeThumbIcon } from '@vapor-ui/icons'`                      |
| `DividerIcon`                           | `import { DividerIcon } from '@vapor-ui/icons'`                           |
| `DjiboutiColorIcon`                     | `import { DjiboutiColorIcon } from '@vapor-ui/icons'`                     |
| `DockerIcon`                            | `import { DockerIcon } from '@vapor-ui/icons'`                            |
| `DocktoBottomIcon`                      | `import { DocktoBottomIcon } from '@vapor-ui/icons'`                      |
| `DocumentViewerIcon`                    | `import { DocumentViewerIcon } from '@vapor-ui/icons'`                    |
| `DominicaColorIcon`                     | `import { DominicaColorIcon } from '@vapor-ui/icons'`                     |
| `DominicanRepublicColorIcon`            | `import { DominicanRepublicColorIcon } from '@vapor-ui/icons'`            |
| `DotIcon`                               | `import { DotIcon } from '@vapor-ui/icons'`                               |
| `DownloadIcon`                          | `import { DownloadIcon } from '@vapor-ui/icons'`                          |
| `DragIndicatorIcon`                     | `import { DragIndicatorIcon } from '@vapor-ui/icons'`                     |
| `EastTimorColorIcon`                    | `import { EastTimorColorIcon } from '@vapor-ui/icons'`                    |
| `EcuadorColorIcon`                      | `import { EcuadorColorIcon } from '@vapor-ui/icons'`                      |
| `EditIcon`                              | `import { EditIcon } from '@vapor-ui/icons'`                              |
| `EgyptColorIcon`                        | `import { EgyptColorIcon } from '@vapor-ui/icons'`                        |
| `ElSalvadorColorIcon`                   | `import { ElSalvadorColorIcon } from '@vapor-ui/icons'`                   |
| `EquatorialGuineaColorIcon`             | `import { EquatorialGuineaColorIcon } from '@vapor-ui/icons'`             |
| `EraserIcon`                            | `import { EraserIcon } from '@vapor-ui/icons'`                            |
| `EritreaColorIcon`                      | `import { EritreaColorIcon } from '@vapor-ui/icons'`                      |
| `ErrorCircleIcon`                       | `import { ErrorCircleIcon } from '@vapor-ui/icons'`                       |
| `EstoniaColorIcon`                      | `import { EstoniaColorIcon } from '@vapor-ui/icons'`                      |
| `EswatiniColorIcon`                     | `import { EswatiniColorIcon } from '@vapor-ui/icons'`                     |
| `EthiopiaColorIcon`                     | `import { EthiopiaColorIcon } from '@vapor-ui/icons'`                     |
| `ExamIcon`                              | `import { ExamIcon } from '@vapor-ui/icons'`                              |
| `ExamListIcon`                          | `import { ExamListIcon } from '@vapor-ui/icons'`                          |
| `ExamReportIcon`                        | `import { ExamReportIcon } from '@vapor-ui/icons'`                        |
| `ExploreIcon`                           | `import { ExploreIcon } from '@vapor-ui/icons'`                           |
| `ExportIcon`                            | `import { ExportIcon } from '@vapor-ui/icons'`                            |
| `ExportImageIcon`                       | `import { ExportImageIcon } from '@vapor-ui/icons'`                       |
| `FacebookColorIcon`                     | `import { FacebookColorIcon } from '@vapor-ui/icons'`                     |
| `FacebookIcon`                          | `import { FacebookIcon } from '@vapor-ui/icons'`                          |
| `FigmaColorIcon`                        | `import { FigmaColorIcon } from '@vapor-ui/icons'`                        |
| `FigmaIcon`                             | `import { FigmaIcon } from '@vapor-ui/icons'`                             |
| `FijiColorIcon`                         | `import { FijiColorIcon } from '@vapor-ui/icons'`                         |
| `FileAddIcon`                           | `import { FileAddIcon } from '@vapor-ui/icons'`                           |
| `FileDeleteIcon`                        | `import { FileDeleteIcon } from '@vapor-ui/icons'`                        |
| `FileIcon`                              | `import { FileIcon } from '@vapor-ui/icons'`                              |
| `FilenewIcon`                           | `import { FilenewIcon } from '@vapor-ui/icons'`                           |
| `FilterIcon`                            | `import { FilterIcon } from '@vapor-ui/icons'`                            |
| `FinlandColorIcon`                      | `import { FinlandColorIcon } from '@vapor-ui/icons'`                      |
| `FirefoxColorIcon`                      | `import { FirefoxColorIcon } from '@vapor-ui/icons'`                      |
| `FlagIcon`                              | `import { FlagIcon } from '@vapor-ui/icons'`                              |
| `FlaskIcon`                             | `import { FlaskIcon } from '@vapor-ui/icons'`                             |
| `FlightIcon`                            | `import { FlightIcon } from '@vapor-ui/icons'`                            |
| `FoldIcon`                              | `import { FoldIcon } from '@vapor-ui/icons'`                              |
| `FolderIcon`                            | `import { FolderIcon } from '@vapor-ui/icons'`                            |
| `FolderNewIcon`                         | `import { FolderNewIcon } from '@vapor-ui/icons'`                         |
| `FolderSearchIcon`                      | `import { FolderSearchIcon } from '@vapor-ui/icons'`                      |
| `ForkIcon`                              | `import { ForkIcon } from '@vapor-ui/icons'`                              |
| `FranceColorIcon`                       | `import { FranceColorIcon } from '@vapor-ui/icons'`                       |
| `FunctionIcon`                          | `import { FunctionIcon } from '@vapor-ui/icons'`                          |
| `GabonColorIcon`                        | `import { GabonColorIcon } from '@vapor-ui/icons'`                        |
| `GambiaColorIcon`                       | `import { GambiaColorIcon } from '@vapor-ui/icons'`                       |
| `GameIcon`                              | `import { GameIcon } from '@vapor-ui/icons'`                              |
| `GcpIcon`                               | `import { GcpIcon } from '@vapor-ui/icons'`                               |
| `GeorgiaColorIcon`                      | `import { GeorgiaColorIcon } from '@vapor-ui/icons'`                      |
| `GermanyColorIcon`                      | `import { GermanyColorIcon } from '@vapor-ui/icons'`                      |
| `GhanaColorIcon`                        | `import { GhanaColorIcon } from '@vapor-ui/icons'`                        |
| `GitIcon`                               | `import { GitIcon } from '@vapor-ui/icons'`                               |
| `GithubColorIcon`                       | `import { GithubColorIcon } from '@vapor-ui/icons'`                       |
| `GithubIcon`                            | `import { GithubIcon } from '@vapor-ui/icons'`                            |
| `GitlabIcon`                            | `import { GitlabIcon } from '@vapor-ui/icons'`                            |
| `GoogleCalendarIcon`                    | `import { GoogleCalendarIcon } from '@vapor-ui/icons'`                    |
| `GoogleColorIcon`                       | `import { GoogleColorIcon } from '@vapor-ui/icons'`                       |
| `GoogleDrawingIcon`                     | `import { GoogleDrawingIcon } from '@vapor-ui/icons'`                     |
| `GoogleIcon`                            | `import { GoogleIcon } from '@vapor-ui/icons'`                            |
| `GooglePresentationIcon`                | `import { GooglePresentationIcon } from '@vapor-ui/icons'`                |
| `GoogleSpreadsheetIcon`                 | `import { GoogleSpreadsheetIcon } from '@vapor-ui/icons'`                 |
| `GoormduinoIcon`                        | `import { GoormduinoIcon } from '@vapor-ui/icons'`                        |
| `GpuIcon`                               | `import { GpuIcon } from '@vapor-ui/icons'`                               |
| `GreeceColorIcon`                       | `import { GreeceColorIcon } from '@vapor-ui/icons'`                       |
| `GrenadaColorIcon`                      | `import { GrenadaColorIcon } from '@vapor-ui/icons'`                      |
| `GroupIcon`                             | `import { GroupIcon } from '@vapor-ui/icons'`                             |
| `GuatemalaColorIcon`                    | `import { GuatemalaColorIcon } from '@vapor-ui/icons'`                    |
| `GuestIcon`                             | `import { GuestIcon } from '@vapor-ui/icons'`                             |
| `GuineaBissauColorIcon`                 | `import { GuineaBissauColorIcon } from '@vapor-ui/icons'`                 |
| `GuineaColorIcon`                       | `import { GuineaColorIcon } from '@vapor-ui/icons'`                       |
| `GuyanaColorIcon`                       | `import { GuyanaColorIcon } from '@vapor-ui/icons'`                       |
| `HaitiColorIcon`                        | `import { HaitiColorIcon } from '@vapor-ui/icons'`                        |
| `HeartIcon`                             | `import { HeartIcon } from '@vapor-ui/icons'`                             |
| `HelpCircleIcon`                        | `import { HelpCircleIcon } from '@vapor-ui/icons'`                        |
| `HelpIcon`                              | `import { HelpIcon } from '@vapor-ui/icons'`                              |
| `HighlightViewIcon`                     | `import { HighlightViewIcon } from '@vapor-ui/icons'`                     |
| `HomeIcon`                              | `import { HomeIcon } from '@vapor-ui/icons'`                              |
| `HondurasColorIcon`                     | `import { HondurasColorIcon } from '@vapor-ui/icons'`                     |
| `HourglassIcon`                         | `import { HourglassIcon } from '@vapor-ui/icons'`                         |
| `HungaryColorIcon`                      | `import { HungaryColorIcon } from '@vapor-ui/icons'`                      |
| `IcelandColorIcon`                      | `import { IcelandColorIcon } from '@vapor-ui/icons'`                      |
| `IdCardIcon`                            | `import { IdCardIcon } from '@vapor-ui/icons'`                            |
| `IdIcon`                                | `import { IdIcon } from '@vapor-ui/icons'`                                |
| `IdeShareIcon`                          | `import { IdeShareIcon } from '@vapor-ui/icons'`                          |
| `ImageIcon`                             | `import { ImageIcon } from '@vapor-ui/icons'`                             |
| `ImagePackIcon`                         | `import { ImagePackIcon } from '@vapor-ui/icons'`                         |
| `ImageToContainerIcon`                  | `import { ImageToContainerIcon } from '@vapor-ui/icons'`                  |
| `ImportIcon`                            | `import { ImportIcon } from '@vapor-ui/icons'`                            |
| `IndiaColorIcon`                        | `import { IndiaColorIcon } from '@vapor-ui/icons'`                        |
| `IndonesiaColorIcon`                    | `import { IndonesiaColorIcon } from '@vapor-ui/icons'`                    |
| `InfoCircleIcon`                        | `import { InfoCircleIcon } from '@vapor-ui/icons'`                        |
| `InstagramColorIcon`                    | `import { InstagramColorIcon } from '@vapor-ui/icons'`                    |
| `InstagramIcon`                         | `import { InstagramIcon } from '@vapor-ui/icons'`                         |
| `IntelliSenseClassIcon`                 | `import { IntelliSenseClassIcon } from '@vapor-ui/icons'`                 |
| `IntelliSenseColorIcon`                 | `import { IntelliSenseColorIcon } from '@vapor-ui/icons'`                 |
| `IntelliSenseConstantIcon`              | `import { IntelliSenseConstantIcon } from '@vapor-ui/icons'`              |
| `IntelliSenseEnumIcon`                  | `import { IntelliSenseEnumIcon } from '@vapor-ui/icons'`                  |
| `IntelliSenseEventIcon`                 | `import { IntelliSenseEventIcon } from '@vapor-ui/icons'`                 |
| `IntelliSenseFunctionIcon`              | `import { IntelliSenseFunctionIcon } from '@vapor-ui/icons'`              |
| `IntelliSenseInterfaceIcon`             | `import { IntelliSenseInterfaceIcon } from '@vapor-ui/icons'`             |
| `IntelliSenseModuleIcon`                | `import { IntelliSenseModuleIcon } from '@vapor-ui/icons'`                |
| `IntelliSenseNullIcon`                  | `import { IntelliSenseNullIcon } from '@vapor-ui/icons'`                  |
| `IntelliSenseOperatorIcon`              | `import { IntelliSenseOperatorIcon } from '@vapor-ui/icons'`              |
| `IntelliSensePropertyIcon`              | `import { IntelliSensePropertyIcon } from '@vapor-ui/icons'`              |
| `IntelliSenseSnippetIcon`               | `import { IntelliSenseSnippetIcon } from '@vapor-ui/icons'`               |
| `IntelliSenseStructureIcon`             | `import { IntelliSenseStructureIcon } from '@vapor-ui/icons'`             |
| `IntelliSenseTextIcon`                  | `import { IntelliSenseTextIcon } from '@vapor-ui/icons'`                  |
| `IntelliSenseUnitIcon`                  | `import { IntelliSenseUnitIcon } from '@vapor-ui/icons'`                  |
| `IntelliSenseValueIcon`                 | `import { IntelliSenseValueIcon } from '@vapor-ui/icons'`                 |
| `IntellijColorIcon`                     | `import { IntellijColorIcon } from '@vapor-ui/icons'`                     |
| `IranColorIcon`                         | `import { IranColorIcon } from '@vapor-ui/icons'`                         |
| `IraqColorIcon`                         | `import { IraqColorIcon } from '@vapor-ui/icons'`                         |
| `IrelandColorIcon`                      | `import { IrelandColorIcon } from '@vapor-ui/icons'`                      |
| `IsraelColorIcon`                       | `import { IsraelColorIcon } from '@vapor-ui/icons'`                       |
| `ItalicIcon`                            | `import { ItalicIcon } from '@vapor-ui/icons'`                            |
| `ItalyColorIcon`                        | `import { ItalyColorIcon } from '@vapor-ui/icons'`                        |
| `IvoryCoastColorIcon`                   | `import { IvoryCoastColorIcon } from '@vapor-ui/icons'`                   |
| `JamaicaColorIcon`                      | `import { JamaicaColorIcon } from '@vapor-ui/icons'`                      |
| `JapanColorIcon`                        | `import { JapanColorIcon } from '@vapor-ui/icons'`                        |
| `JiraIcon`                              | `import { JiraIcon } from '@vapor-ui/icons'`                              |
| `JordanColorIcon`                       | `import { JordanColorIcon } from '@vapor-ui/icons'`                       |
| `JupyterColorIcon`                      | `import { JupyterColorIcon } from '@vapor-ui/icons'`                      |
| `JupyterlabColorIcon`                   | `import { JupyterlabColorIcon } from '@vapor-ui/icons'`                   |
| `JupyterlabIcon`                        | `import { JupyterlabIcon } from '@vapor-ui/icons'`                        |
| `KakaoIcon`                             | `import { KakaoIcon } from '@vapor-ui/icons'`                             |
| `KazakhstanColorIcon`                   | `import { KazakhstanColorIcon } from '@vapor-ui/icons'`                   |
| `KenyaColorIcon`                        | `import { KenyaColorIcon } from '@vapor-ui/icons'`                        |
| `KeyboardIcon`                          | `import { KeyboardIcon } from '@vapor-ui/icons'`                          |
| `KeyboardTabIcon`                       | `import { KeyboardTabIcon } from '@vapor-ui/icons'`                       |
| `KidIcon`                               | `import { KidIcon } from '@vapor-ui/icons'`                               |
| `KiribatiColorIcon`                     | `import { KiribatiColorIcon } from '@vapor-ui/icons'`                     |
| `KosovoColorIcon`                       | `import { KosovoColorIcon } from '@vapor-ui/icons'`                       |
| `KrampolineIcon`                        | `import { KrampolineIcon } from '@vapor-ui/icons'`                        |
| `KubernatesIcon`                        | `import { KubernatesIcon } from '@vapor-ui/icons'`                        |
| `KuwaitColorIcon`                       | `import { KuwaitColorIcon } from '@vapor-ui/icons'`                       |
| `KyrgyzstanColorIcon`                   | `import { KyrgyzstanColorIcon } from '@vapor-ui/icons'`                   |
| `LaosColorIcon`                         | `import { LaosColorIcon } from '@vapor-ui/icons'`                         |
| `LatviaColorIcon`                       | `import { LatviaColorIcon } from '@vapor-ui/icons'`                       |
| `LebanonColorIcon`                      | `import { LebanonColorIcon } from '@vapor-ui/icons'`                      |
| `LesothoColorIcon`                      | `import { LesothoColorIcon } from '@vapor-ui/icons'`                      |
| `LiberiaColorIcon`                      | `import { LiberiaColorIcon } from '@vapor-ui/icons'`                      |
| `LibyaColorIcon`                        | `import { LibyaColorIcon } from '@vapor-ui/icons'`                        |
| `LicenseIcon`                           | `import { LicenseIcon } from '@vapor-ui/icons'`                           |
| `LiechtensteinColorIcon`                | `import { LiechtensteinColorIcon } from '@vapor-ui/icons'`                |
| `LightIcon`                             | `import { LightIcon } from '@vapor-ui/icons'`                             |
| `LightbulbIcon`                         | `import { LightbulbIcon } from '@vapor-ui/icons'`                         |
| `LightningIcon`                         | `import { LightningIcon } from '@vapor-ui/icons'`                         |
| `LikeIcon`                              | `import { LikeIcon } from '@vapor-ui/icons'`                              |
| `LikeThumbIcon`                         | `import { LikeThumbIcon } from '@vapor-ui/icons'`                         |
| `LinkedinIcon`                          | `import { LinkedinIcon } from '@vapor-ui/icons'`                          |
| `ListIcon`                              | `import { ListIcon } from '@vapor-ui/icons'`                              |
| `ListNumberedIcon`                      | `import { ListNumberedIcon } from '@vapor-ui/icons'`                      |
| `LithuaniaColorIcon`                    | `import { LithuaniaColorIcon } from '@vapor-ui/icons'`                    |
| `LiveLessonIcon`                        | `import { LiveLessonIcon } from '@vapor-ui/icons'`                        |
| `LocationIcon`                          | `import { LocationIcon } from '@vapor-ui/icons'`                          |
| `LockIcon`                              | `import { LockIcon } from '@vapor-ui/icons'`                              |
| `LuxembourgColorIcon`                   | `import { LuxembourgColorIcon } from '@vapor-ui/icons'`                   |
| `MadagascarColorIcon`                   | `import { MadagascarColorIcon } from '@vapor-ui/icons'`                   |
| `MagicWandIcon`                         | `import { MagicWandIcon } from '@vapor-ui/icons'`                         |
| `MailIcon`                              | `import { MailIcon } from '@vapor-ui/icons'`                              |
| `MalawiColorIcon`                       | `import { MalawiColorIcon } from '@vapor-ui/icons'`                       |
| `MalaysiaColorIcon`                     | `import { MalaysiaColorIcon } from '@vapor-ui/icons'`                     |
| `MaldivesColorIcon`                     | `import { MaldivesColorIcon } from '@vapor-ui/icons'`                     |
| `MaliColorIcon`                         | `import { MaliColorIcon } from '@vapor-ui/icons'`                         |
| `MaltaColorIcon`                        | `import { MaltaColorIcon } from '@vapor-ui/icons'`                        |
| `MarkModeIcon`                          | `import { MarkModeIcon } from '@vapor-ui/icons'`                          |
| `MarkdownIcon`                          | `import { MarkdownIcon } from '@vapor-ui/icons'`                          |
| `MarshallIslandsColorIcon`              | `import { MarshallIslandsColorIcon } from '@vapor-ui/icons'`              |
| `MauritaniaColorIcon`                   | `import { MauritaniaColorIcon } from '@vapor-ui/icons'`                   |
| `MauritiusColorIcon`                    | `import { MauritiusColorIcon } from '@vapor-ui/icons'`                    |
| `MediumIcon`                            | `import { MediumIcon } from '@vapor-ui/icons'`                            |
| `MemoIcon`                              | `import { MemoIcon } from '@vapor-ui/icons'`                              |
| `MemoryIcon`                            | `import { MemoryIcon } from '@vapor-ui/icons'`                            |
| `MessageIcon`                           | `import { MessageIcon } from '@vapor-ui/icons'`                           |
| `MethodIcon`                            | `import { MethodIcon } from '@vapor-ui/icons'`                            |
| `MexicoColorIcon`                       | `import { MexicoColorIcon } from '@vapor-ui/icons'`                       |
| `MicOffIcon`                            | `import { MicOffIcon } from '@vapor-ui/icons'`                            |
| `MicOnIcon`                             | `import { MicOnIcon } from '@vapor-ui/icons'`                             |
| `MicronesiaColorIcon`                   | `import { MicronesiaColorIcon } from '@vapor-ui/icons'`                   |
| `MinusBoxIcon`                          | `import { MinusBoxIcon } from '@vapor-ui/icons'`                          |
| `MoldovaColorIcon`                      | `import { MoldovaColorIcon } from '@vapor-ui/icons'`                      |
| `MonacoColorIcon`                       | `import { MonacoColorIcon } from '@vapor-ui/icons'`                       |
| `MongoliaColorIcon`                     | `import { MongoliaColorIcon } from '@vapor-ui/icons'`                     |
| `MontenegroColorIcon`                   | `import { MontenegroColorIcon } from '@vapor-ui/icons'`                   |
| `MoroccoColorIcon`                      | `import { MoroccoColorIcon } from '@vapor-ui/icons'`                      |
| `MovieIcon`                             | `import { MovieIcon } from '@vapor-ui/icons'`                             |
| `MozambiqueColorIcon`                   | `import { MozambiqueColorIcon } from '@vapor-ui/icons'`                   |
| `MyanmarColorIcon`                      | `import { MyanmarColorIcon } from '@vapor-ui/icons'`                      |
| `MysqlColorIcon`                        | `import { MysqlColorIcon } from '@vapor-ui/icons'`                        |
| `MysqlIcon`                             | `import { MysqlIcon } from '@vapor-ui/icons'`                             |
| `NamibiaColorIcon`                      | `import { NamibiaColorIcon } from '@vapor-ui/icons'`                      |
| `NauruColorIcon`                        | `import { NauruColorIcon } from '@vapor-ui/icons'`                        |
| `NaverIcon`                             | `import { NaverIcon } from '@vapor-ui/icons'`                             |
| `NaverblogColorIcon`                    | `import { NaverblogColorIcon } from '@vapor-ui/icons'`                    |
| `NaverblogIcon`                         | `import { NaverblogIcon } from '@vapor-ui/icons'`                         |
| `NepalColorIcon`                        | `import { NepalColorIcon } from '@vapor-ui/icons'`                        |
| `NetherlandsColorIcon`                  | `import { NetherlandsColorIcon } from '@vapor-ui/icons'`                  |
| `NetworkIcon`                           | `import { NetworkIcon } from '@vapor-ui/icons'`                           |
| `NewZealandColorIcon`                   | `import { NewZealandColorIcon } from '@vapor-ui/icons'`                   |
| `NextIcon`                              | `import { NextIcon } from '@vapor-ui/icons'`                              |
| `NicaraguaColorIcon`                    | `import { NicaraguaColorIcon } from '@vapor-ui/icons'`                    |
| `NigerColorIcon`                        | `import { NigerColorIcon } from '@vapor-ui/icons'`                        |
| `NigeriaColorIcon`                      | `import { NigeriaColorIcon } from '@vapor-ui/icons'`                      |
| `NiueColorIcon`                         | `import { NiueColorIcon } from '@vapor-ui/icons'`                         |
| `NoImageIcon`                           | `import { NoImageIcon } from '@vapor-ui/icons'`                           |
| `NoUserIcon`                            | `import { NoUserIcon } from '@vapor-ui/icons'`                            |
| `NorthMacedoniaColorIcon`               | `import { NorthMacedoniaColorIcon } from '@vapor-ui/icons'`               |
| `NorwayColorIcon`                       | `import { NorwayColorIcon } from '@vapor-ui/icons'`                       |
| `NoticeBoardIcon`                       | `import { NoticeBoardIcon } from '@vapor-ui/icons'`                       |
| `NoticeCircleIcon`                      | `import { NoticeCircleIcon } from '@vapor-ui/icons'`                      |
| `NotionIcon`                            | `import { NotionIcon } from '@vapor-ui/icons'`                            |
| `ObjectIcon`                            | `import { ObjectIcon } from '@vapor-ui/icons'`                            |
| `OmanColorIcon`                         | `import { OmanColorIcon } from '@vapor-ui/icons'`                         |
| `OpenFileIcon`                          | `import { OpenFileIcon } from '@vapor-ui/icons'`                          |
| `OpenFolderIcon`                        | `import { OpenFolderIcon } from '@vapor-ui/icons'`                        |
| `OperaColorIcon`                        | `import { OperaColorIcon } from '@vapor-ui/icons'`                        |
| `OrganizationIcon`                      | `import { OrganizationIcon } from '@vapor-ui/icons'`                      |
| `PakistanColorIcon`                     | `import { PakistanColorIcon } from '@vapor-ui/icons'`                     |
| `PalauColorIcon`                        | `import { PalauColorIcon } from '@vapor-ui/icons'`                        |
| `PanamaColorIcon`                       | `import { PanamaColorIcon } from '@vapor-ui/icons'`                       |
| `PanelOpenIcon`                         | `import { PanelOpenIcon } from '@vapor-ui/icons'`                         |
| `PapuaNewGuineaColorIcon`               | `import { PapuaNewGuineaColorIcon } from '@vapor-ui/icons'`               |
| `ParaguayColorIcon`                     | `import { ParaguayColorIcon } from '@vapor-ui/icons'`                     |
| `ParentsIcon`                           | `import { ParentsIcon } from '@vapor-ui/icons'`                           |
| `PauseIcon`                             | `import { PauseIcon } from '@vapor-ui/icons'`                             |
| `PaycoIcon`                             | `import { PaycoIcon } from '@vapor-ui/icons'`                             |
| `PaypalColorIcon`                       | `import { PaypalColorIcon } from '@vapor-ui/icons'`                       |
| `PcIcon`                                | `import { PcIcon } from '@vapor-ui/icons'`                                |
| `PdfIcon`                               | `import { PdfIcon } from '@vapor-ui/icons'`                               |
| `PeruColorIcon`                         | `import { PeruColorIcon } from '@vapor-ui/icons'`                         |
| `PhilippinesColorIcon`                  | `import { PhilippinesColorIcon } from '@vapor-ui/icons'`                  |
| `PhoneIcon`                             | `import { PhoneIcon } from '@vapor-ui/icons'`                             |
| `PinSetIcon`                            | `import { PinSetIcon } from '@vapor-ui/icons'`                            |
| `PipetteIcon`                           | `import { PipetteIcon } from '@vapor-ui/icons'`                           |
| `PlansIcon`                             | `import { PlansIcon } from '@vapor-ui/icons'`                             |
| `PlayIcon`                              | `import { PlayIcon } from '@vapor-ui/icons'`                              |
| `PlugInIcon`                            | `import { PlugInIcon } from '@vapor-ui/icons'`                            |
| `PlugOutIcon`                           | `import { PlugOutIcon } from '@vapor-ui/icons'`                           |
| `PlusBoxIcon`                           | `import { PlusBoxIcon } from '@vapor-ui/icons'`                           |
| `PolandColorIcon`                       | `import { PolandColorIcon } from '@vapor-ui/icons'`                       |
| `PortforwardingIcon`                    | `import { PortforwardingIcon } from '@vapor-ui/icons'`                    |
| `PortugalColorIcon`                     | `import { PortugalColorIcon } from '@vapor-ui/icons'`                     |
| `PowerIcon`                             | `import { PowerIcon } from '@vapor-ui/icons'`                             |
| `PreIcon`                               | `import { PreIcon } from '@vapor-ui/icons'`                               |
| `PresentScreenIcon`                     | `import { PresentScreenIcon } from '@vapor-ui/icons'`                     |
| `PreviewIcon`                           | `import { PreviewIcon } from '@vapor-ui/icons'`                           |
| `PrintIcon`                             | `import { PrintIcon } from '@vapor-ui/icons'`                             |
| `ProductHuntColorIcon`                  | `import { ProductHuntColorIcon } from '@vapor-ui/icons'`                  |
| `ProjectIcon`                           | `import { ProjectIcon } from '@vapor-ui/icons'`                           |
| `ProjectOpenIcon`                       | `import { ProjectOpenIcon } from '@vapor-ui/icons'`                       |
| `ProjectSettingIcon`                    | `import { ProjectSettingIcon } from '@vapor-ui/icons'`                    |
| `PropertyIcon`                          | `import { PropertyIcon } from '@vapor-ui/icons'`                          |
| `PsychologyIcon`                        | `import { PsychologyIcon } from '@vapor-ui/icons'`                        |
| `PublishIcon`                           | `import { PublishIcon } from '@vapor-ui/icons'`                           |
| `QatarColorIcon`                        | `import { QatarColorIcon } from '@vapor-ui/icons'`                        |
| `QnAIcon`                               | `import { QnAIcon } from '@vapor-ui/icons'`                               |
| `QuoteIcon`                             | `import { QuoteIcon } from '@vapor-ui/icons'`                             |
| `ReferenceIcon`                         | `import { ReferenceIcon } from '@vapor-ui/icons'`                         |
| `RemoteIcon`                            | `import { RemoteIcon } from '@vapor-ui/icons'`                            |
| `RemoteOffIcon`                         | `import { RemoteOffIcon } from '@vapor-ui/icons'`                         |
| `ReplaceIcon`                           | `import { ReplaceIcon } from '@vapor-ui/icons'`                           |
| `RepublicOfTheCongoColorIcon`           | `import { RepublicOfTheCongoColorIcon } from '@vapor-ui/icons'`           |
| `ResultManagementIcon`                  | `import { ResultManagementIcon } from '@vapor-ui/icons'`                  |
| `RewardedAdsIcon`                       | `import { RewardedAdsIcon } from '@vapor-ui/icons'`                       |
| `RomaniaColorIcon`                      | `import { RomaniaColorIcon } from '@vapor-ui/icons'`                      |
| `RouteIcon`                             | `import { RouteIcon } from '@vapor-ui/icons'`                             |
| `RstudioColorIcon`                      | `import { RstudioColorIcon } from '@vapor-ui/icons'`                      |
| `RunIcon`                               | `import { RunIcon } from '@vapor-ui/icons'`                               |
| `RussiaColorIcon`                       | `import { RussiaColorIcon } from '@vapor-ui/icons'`                       |
| `RwandaColorIcon`                       | `import { RwandaColorIcon } from '@vapor-ui/icons'`                       |
| `SaintKittsAndNevisColorIcon`           | `import { SaintKittsAndNevisColorIcon } from '@vapor-ui/icons'`           |
| `SaintLuciaColorIcon`                   | `import { SaintLuciaColorIcon } from '@vapor-ui/icons'`                   |
| `SaintVincentAndTheGrenadinesColorIcon` | `import { SaintVincentAndTheGrenadinesColorIcon } from '@vapor-ui/icons'` |
| `SamoaColorIcon`                        | `import { SamoaColorIcon } from '@vapor-ui/icons'`                        |
| `SanMarinoColorIcon`                    | `import { SanMarinoColorIcon } from '@vapor-ui/icons'`                    |
| `SaoTomeAndPrincipeColorIcon`           | `import { SaoTomeAndPrincipeColorIcon } from '@vapor-ui/icons'`           |
| `SaudiArabiaColorIcon`                  | `import { SaudiArabiaColorIcon } from '@vapor-ui/icons'`                  |
| `SaveAsIcon`                            | `import { SaveAsIcon } from '@vapor-ui/icons'`                            |
| `SaveIcon`                              | `import { SaveIcon } from '@vapor-ui/icons'`                              |
| `SavingIcon`                            | `import { SavingIcon } from '@vapor-ui/icons'`                            |
| `SbomIcon`                              | `import { SbomIcon } from '@vapor-ui/icons'`                              |
| `SchoolIcon`                            | `import { SchoolIcon } from '@vapor-ui/icons'`                            |
| `SendIcon`                              | `import { SendIcon } from '@vapor-ui/icons'`                              |
| `SenegalColorIcon`                      | `import { SenegalColorIcon } from '@vapor-ui/icons'`                      |
| `SentryIcon`                            | `import { SentryIcon } from '@vapor-ui/icons'`                            |
| `SerbiaColorIcon`                       | `import { SerbiaColorIcon } from '@vapor-ui/icons'`                       |
| `SettingIcon`                           | `import { SettingIcon } from '@vapor-ui/icons'`                           |
| `SeychellesColorIcon`                   | `import { SeychellesColorIcon } from '@vapor-ui/icons'`                   |
| `ShareIcon`                             | `import { ShareIcon } from '@vapor-ui/icons'`                             |
| `ShoppingCartIcon`                      | `import { ShoppingCartIcon } from '@vapor-ui/icons'`                      |
| `SideNavIcon`                           | `import { SideNavIcon } from '@vapor-ui/icons'`                           |
| `SierraLeoneColorIcon`                  | `import { SierraLeoneColorIcon } from '@vapor-ui/icons'`                  |
| `SingaporeColorIcon`                    | `import { SingaporeColorIcon } from '@vapor-ui/icons'`                    |
| `SlackColorIcon`                        | `import { SlackColorIcon } from '@vapor-ui/icons'`                        |
| `SlackIcon`                             | `import { SlackIcon } from '@vapor-ui/icons'`                             |
| `SlotIcon`                              | `import { SlotIcon } from '@vapor-ui/icons'`                              |
| `SlovakiaColorIcon`                     | `import { SlovakiaColorIcon } from '@vapor-ui/icons'`                     |
| `SloveniaColorIcon`                     | `import { SloveniaColorIcon } from '@vapor-ui/icons'`                     |
| `SolomonIslandsColorIcon`               | `import { SolomonIslandsColorIcon } from '@vapor-ui/icons'`               |
| `SomaliaColorIcon`                      | `import { SomaliaColorIcon } from '@vapor-ui/icons'`                      |
| `SoundOffIcon`                          | `import { SoundOffIcon } from '@vapor-ui/icons'`                          |
| `SoundOnIcon`                           | `import { SoundOnIcon } from '@vapor-ui/icons'`                           |
| `SourcecodeIcon`                        | `import { SourcecodeIcon } from '@vapor-ui/icons'`                        |
| `SouthAfricaColorIcon`                  | `import { SouthAfricaColorIcon } from '@vapor-ui/icons'`                  |
| `SouthKoreaColorIcon`                   | `import { SouthKoreaColorIcon } from '@vapor-ui/icons'`                   |
| `SouthSudanColorIcon`                   | `import { SouthSudanColorIcon } from '@vapor-ui/icons'`                   |
| `SpainColorIcon`                        | `import { SpainColorIcon } from '@vapor-ui/icons'`                        |
| `SplitIcon`                             | `import { SplitIcon } from '@vapor-ui/icons'`                             |
| `SriLankaColorIcon`                     | `import { SriLankaColorIcon } from '@vapor-ui/icons'`                     |
| `SshIcon`                               | `import { SshIcon } from '@vapor-ui/icons'`                               |
| `StarIcon`                              | `import { StarIcon } from '@vapor-ui/icons'`                              |
| `StopIcon`                              | `import { StopIcon } from '@vapor-ui/icons'`                              |
| `StorageIcon`                           | `import { StorageIcon } from '@vapor-ui/icons'`                           |
| `StorybookColorIcon`                    | `import { StorybookColorIcon } from '@vapor-ui/icons'`                    |
| `StorybookIcon`                         | `import { StorybookIcon } from '@vapor-ui/icons'`                         |
| `StripeColorIcon`                       | `import { StripeColorIcon } from '@vapor-ui/icons'`                       |
| `StripeIcon`                            | `import { StripeIcon } from '@vapor-ui/icons'`                            |
| `StruckIcon`                            | `import { StruckIcon } from '@vapor-ui/icons'`                            |
| `StudentManagementIcon`                 | `import { StudentManagementIcon } from '@vapor-ui/icons'`                 |
| `SudanColorIcon`                        | `import { SudanColorIcon } from '@vapor-ui/icons'`                        |
| `SurinameColorIcon`                     | `import { SurinameColorIcon } from '@vapor-ui/icons'`                     |
| `SwedenColorIcon`                       | `import { SwedenColorIcon } from '@vapor-ui/icons'`                       |
| `SwitzerlandColorIcon`                  | `import { SwitzerlandColorIcon } from '@vapor-ui/icons'`                  |
| `SyllabusIcon`                          | `import { SyllabusIcon } from '@vapor-ui/icons'`                          |
| `SyriaColorIcon`                        | `import { SyriaColorIcon } from '@vapor-ui/icons'`                        |
| `TabletIcon`                            | `import { TabletIcon } from '@vapor-ui/icons'`                            |
| `TaegukColorIcon`                       | `import { TaegukColorIcon } from '@vapor-ui/icons'`                       |
| `TaegukIcon`                            | `import { TaegukIcon } from '@vapor-ui/icons'`                            |
| `TajikistanColorIcon`                   | `import { TajikistanColorIcon } from '@vapor-ui/icons'`                   |
| `TakeoffIcon`                           | `import { TakeoffIcon } from '@vapor-ui/icons'`                           |
| `TanzaniaColorIcon`                     | `import { TanzaniaColorIcon } from '@vapor-ui/icons'`                     |
| `TestIcon`                              | `import { TestIcon } from '@vapor-ui/icons'`                              |
| `ThailandColorIcon`                     | `import { ThailandColorIcon } from '@vapor-ui/icons'`                     |
| `TimeIcon`                              | `import { TimeIcon } from '@vapor-ui/icons'`                              |
| `TogoColorIcon`                         | `import { TogoColorIcon } from '@vapor-ui/icons'`                         |
| `TongaColorIcon`                        | `import { TongaColorIcon } from '@vapor-ui/icons'`                        |
| `TrashIcon`                             | `import { TrashIcon } from '@vapor-ui/icons'`                             |
| `TreeCollapseIcon`                      | `import { TreeCollapseIcon } from '@vapor-ui/icons'`                      |
| `TrelloIcon`                            | `import { TrelloIcon } from '@vapor-ui/icons'`                            |
| `TrinidadAndTobagoColorIcon`            | `import { TrinidadAndTobagoColorIcon } from '@vapor-ui/icons'`            |
| `TunisiaColorIcon`                      | `import { TunisiaColorIcon } from '@vapor-ui/icons'`                      |
| `TurkeyColorIcon`                       | `import { TurkeyColorIcon } from '@vapor-ui/icons'`                       |
| `TurkmenistanColorIcon`                 | `import { TurkmenistanColorIcon } from '@vapor-ui/icons'`                 |
| `TuvaluColorIcon`                       | `import { TuvaluColorIcon } from '@vapor-ui/icons'`                       |
| `TwoFileIcon`                           | `import { TwoFileIcon } from '@vapor-ui/icons'`                           |
| `UgandaColorIcon`                       | `import { UgandaColorIcon } from '@vapor-ui/icons'`                       |
| `UkraineColorIcon`                      | `import { UkraineColorIcon } from '@vapor-ui/icons'`                      |
| `UnitedArabEmiratesColorIcon`           | `import { UnitedArabEmiratesColorIcon } from '@vapor-ui/icons'`           |
| `UnitedKingdomColorIcon`                | `import { UnitedKingdomColorIcon } from '@vapor-ui/icons'`                |
| `UnitedStatesColorIcon`                 | `import { UnitedStatesColorIcon } from '@vapor-ui/icons'`                 |
| `UnlockIcon`                            | `import { UnlockIcon } from '@vapor-ui/icons'`                            |
| `UploadIcon`                            | `import { UploadIcon } from '@vapor-ui/icons'`                            |
| `UppercaseIcon`                         | `import { UppercaseIcon } from '@vapor-ui/icons'`                         |
| `UruguayColorIcon`                      | `import { UruguayColorIcon } from '@vapor-ui/icons'`                      |
| `UserCheckIcon`                         | `import { UserCheckIcon } from '@vapor-ui/icons'`                         |
| `UserIcon`                              | `import { UserIcon } from '@vapor-ui/icons'`                              |
| `UserMoveIcon`                          | `import { UserMoveIcon } from '@vapor-ui/icons'`                          |
| `UserSearchIcon`                        | `import { UserSearchIcon } from '@vapor-ui/icons'`                        |
| `UzbekistanColorIcon`                   | `import { UzbekistanColorIcon } from '@vapor-ui/icons'`                   |
| `VanuatuColorIcon`                      | `import { VanuatuColorIcon } from '@vapor-ui/icons'`                      |
| `VariableIcon`                          | `import { VariableIcon } from '@vapor-ui/icons'`                          |
| `VaticanCityColorIcon`                  | `import { VaticanCityColorIcon } from '@vapor-ui/icons'`                  |
| `VenezuelaColorIcon`                    | `import { VenezuelaColorIcon } from '@vapor-ui/icons'`                    |
| `VideocamOffIcon`                       | `import { VideocamOffIcon } from '@vapor-ui/icons'`                       |
| `VideocamOnIcon`                        | `import { VideocamOnIcon } from '@vapor-ui/icons'`                        |
| `VietnamColorIcon`                      | `import { VietnamColorIcon } from '@vapor-ui/icons'`                      |
| `ViewModuleIcon`                        | `import { ViewModuleIcon } from '@vapor-ui/icons'`                        |
| `ViewOffIcon`                           | `import { ViewOffIcon } from '@vapor-ui/icons'`                           |
| `ViewOnIcon`                            | `import { ViewOnIcon } from '@vapor-ui/icons'`                            |
| `VscodeColorIcon`                       | `import { VscodeColorIcon } from '@vapor-ui/icons'`                       |
| `VscodeIcon`                            | `import { VscodeIcon } from '@vapor-ui/icons'`                            |
| `WarningIcon`                           | `import { WarningIcon } from '@vapor-ui/icons'`                           |
| `WordMatchIcon`                         | `import { WordMatchIcon } from '@vapor-ui/icons'`                         |
| `XIcon`                                 | `import { XIcon } from '@vapor-ui/icons'`                                 |
| `YemenColorIcon`                        | `import { YemenColorIcon } from '@vapor-ui/icons'`                        |
| `YoutubeColorIcon`                      | `import { YoutubeColorIcon } from '@vapor-ui/icons'`                      |
| `YoutubeIcon`                           | `import { YoutubeIcon } from '@vapor-ui/icons'`                           |
| `ZambiaColorIcon`                       | `import { ZambiaColorIcon } from '@vapor-ui/icons'`                       |
| `ZimbabweColorIcon`                     | `import { ZimbabweColorIcon } from '@vapor-ui/icons'`                     |

## Outline Icons

| Icon Name                              | Import Statement                                                         |
| -------------------------------------- | ------------------------------------------------------------------------ |
| `AccessibilityOutlineIcon`             | `import { AccessibilityOutlineIcon } from '@vapor-ui/icons'`             |
| `AchievementOutlineIcon`               | `import { AchievementOutlineIcon } from '@vapor-ui/icons'`               |
| `AddCartOutlineIcon`                   | `import { AddCartOutlineIcon } from '@vapor-ui/icons'`                   |
| `AddUserOutlineIcon`                   | `import { AddUserOutlineIcon } from '@vapor-ui/icons'`                   |
| `AiGoormeeOutlineIcon`                 | `import { AiGoormeeOutlineIcon } from '@vapor-ui/icons'`                 |
| `AiSmartieOutlineIcon`                 | `import { AiSmartieOutlineIcon } from '@vapor-ui/icons'`                 |
| `AichatOutlineIcon`                    | `import { AichatOutlineIcon } from '@vapor-ui/icons'`                    |
| `AirplayOutlineIcon`                   | `import { AirplayOutlineIcon } from '@vapor-ui/icons'`                   |
| `AlgorithmOutlineIcon`                 | `import { AlgorithmOutlineIcon } from '@vapor-ui/icons'`                 |
| `AlignCenterOutlineIcon`               | `import { AlignCenterOutlineIcon } from '@vapor-ui/icons'`               |
| `AlignJustifyOutlineIcon`              | `import { AlignJustifyOutlineIcon } from '@vapor-ui/icons'`              |
| `AlignLeftOutlineIcon`                 | `import { AlignLeftOutlineIcon } from '@vapor-ui/icons'`                 |
| `AlignRightOutlineIcon`                | `import { AlignRightOutlineIcon } from '@vapor-ui/icons'`                |
| `AnalysisOutlineIcon`                  | `import { AnalysisOutlineIcon } from '@vapor-ui/icons'`                  |
| `ArrowDownOutlineIcon`                 | `import { ArrowDownOutlineIcon } from '@vapor-ui/icons'`                 |
| `ArrowUpOutlineIcon`                   | `import { ArrowUpOutlineIcon } from '@vapor-ui/icons'`                   |
| `AssignmentOutlineIcon`                | `import { AssignmentOutlineIcon } from '@vapor-ui/icons'`                |
| `AttachFileOutlineIcon`                | `import { AttachFileOutlineIcon } from '@vapor-ui/icons'`                |
| `AttemptOutlineIcon`                   | `import { AttemptOutlineIcon } from '@vapor-ui/icons'`                   |
| `AutoCodeOutlineIcon`                  | `import { AutoCodeOutlineIcon } from '@vapor-ui/icons'`                  |
| `BackPageOutlineIcon`                  | `import { BackPageOutlineIcon } from '@vapor-ui/icons'`                  |
| `BackUpOutlineIcon`                    | `import { BackUpOutlineIcon } from '@vapor-ui/icons'`                    |
| `BedOutlineIcon`                       | `import { BedOutlineIcon } from '@vapor-ui/icons'`                       |
| `BellOffOutlineIcon`                   | `import { BellOffOutlineIcon } from '@vapor-ui/icons'`                   |
| `BellOnOutlineIcon`                    | `import { BellOnOutlineIcon } from '@vapor-ui/icons'`                    |
| `BlankOutlineIcon`                     | `import { BlankOutlineIcon } from '@vapor-ui/icons'`                     |
| `BlockOutlineIcon`                     | `import { BlockOutlineIcon } from '@vapor-ui/icons'`                     |
| `BoldOutlineIcon`                      | `import { BoldOutlineIcon } from '@vapor-ui/icons'`                      |
| `BookOutlineIcon`                      | `import { BookOutlineIcon } from '@vapor-ui/icons'`                      |
| `BookmarkOutlineIcon`                  | `import { BookmarkOutlineIcon } from '@vapor-ui/icons'`                  |
| `BottomPlayerOutlineIcon`              | `import { BottomPlayerOutlineIcon } from '@vapor-ui/icons'`              |
| `BranchOutlineIcon`                    | `import { BranchOutlineIcon } from '@vapor-ui/icons'`                    |
| `BuildOutlineIcon`                     | `import { BuildOutlineIcon } from '@vapor-ui/icons'`                     |
| `BulletlistOutlineIcon`                | `import { BulletlistOutlineIcon } from '@vapor-ui/icons'`                |
| `CafeOutlineIcon`                      | `import { CafeOutlineIcon } from '@vapor-ui/icons'`                      |
| `CakeOutlineIcon`                      | `import { CakeOutlineIcon } from '@vapor-ui/icons'`                      |
| `CalculatorOutlineIcon`                | `import { CalculatorOutlineIcon } from '@vapor-ui/icons'`                |
| `CalendarOutlineIcon`                  | `import { CalendarOutlineIcon } from '@vapor-ui/icons'`                  |
| `CallOutlineIcon`                      | `import { CallOutlineIcon } from '@vapor-ui/icons'`                      |
| `CameraOutlineIcon`                    | `import { CameraOutlineIcon } from '@vapor-ui/icons'`                    |
| `CampOutlineIcon`                      | `import { CampOutlineIcon } from '@vapor-ui/icons'`                      |
| `CaptionOutlineIcon`                   | `import { CaptionOutlineIcon } from '@vapor-ui/icons'`                   |
| `CarOutlineIcon`                       | `import { CarOutlineIcon } from '@vapor-ui/icons'`                       |
| `CardsOutlineIcon`                     | `import { CardsOutlineIcon } from '@vapor-ui/icons'`                     |
| `CertificateOutlineIcon`               | `import { CertificateOutlineIcon } from '@vapor-ui/icons'`               |
| `ChapterOutlineIcon`                   | `import { ChapterOutlineIcon } from '@vapor-ui/icons'`                   |
| `ChartOutlineIcon`                     | `import { ChartOutlineIcon } from '@vapor-ui/icons'`                     |
| `ChartPieOutlineIcon`                  | `import { ChartPieOutlineIcon } from '@vapor-ui/icons'`                  |
| `CheckCartOutlineIcon`                 | `import { CheckCartOutlineIcon } from '@vapor-ui/icons'`                 |
| `CheckCircleOutlineIcon`               | `import { CheckCircleOutlineIcon } from '@vapor-ui/icons'`               |
| `ChecklistOutlineIcon`                 | `import { ChecklistOutlineIcon } from '@vapor-ui/icons'`                 |
| `ChevronDoubleLeftOutlineIcon`         | `import { ChevronDoubleLeftOutlineIcon } from '@vapor-ui/icons'`         |
| `ChevronDoubleRightOutlineIcon`        | `import { ChevronDoubleRightOutlineIcon } from '@vapor-ui/icons'`        |
| `ChevronDownOutlineIcon`               | `import { ChevronDownOutlineIcon } from '@vapor-ui/icons'`               |
| `ChevronLeftOutlineIcon`               | `import { ChevronLeftOutlineIcon } from '@vapor-ui/icons'`               |
| `ChevronRightOutlineIcon`              | `import { ChevronRightOutlineIcon } from '@vapor-ui/icons'`              |
| `ChevronUpOutlineIcon`                 | `import { ChevronUpOutlineIcon } from '@vapor-ui/icons'`                 |
| `CloseOutlineIcon`                     | `import { CloseOutlineIcon } from '@vapor-ui/icons'`                     |
| `CodeBlockOutlineIcon`                 | `import { CodeBlockOutlineIcon } from '@vapor-ui/icons'`                 |
| `CollaborationOutlineIcon`             | `import { CollaborationOutlineIcon } from '@vapor-ui/icons'`             |
| `CollapseOutlineIcon`                  | `import { CollapseOutlineIcon } from '@vapor-ui/icons'`                  |
| `CommitOutlineIcon`                    | `import { CommitOutlineIcon } from '@vapor-ui/icons'`                    |
| `ConfirmOutlineIcon`                   | `import { ConfirmOutlineIcon } from '@vapor-ui/icons'`                   |
| `ContainerOutlineIcon`                 | `import { ContainerOutlineIcon } from '@vapor-ui/icons'`                 |
| `ContainerRunOutlineIcon`              | `import { ContainerRunOutlineIcon } from '@vapor-ui/icons'`              |
| `ContainerShareOutlineIcon`            | `import { ContainerShareOutlineIcon } from '@vapor-ui/icons'`            |
| `ContainerStopOutlineIcon`             | `import { ContainerStopOutlineIcon } from '@vapor-ui/icons'`             |
| `ControlCommonOutlineIcon`             | `import { ControlCommonOutlineIcon } from '@vapor-ui/icons'`             |
| `CopyAsMarkdownOutlineIcon`            | `import { CopyAsMarkdownOutlineIcon } from '@vapor-ui/icons'`            |
| `CopyOutlineIcon`                      | `import { CopyOutlineIcon } from '@vapor-ui/icons'`                      |
| `CorrectOutlineIcon`                   | `import { CorrectOutlineIcon } from '@vapor-ui/icons'`                   |
| `CouponOutlineIcon`                    | `import { CouponOutlineIcon } from '@vapor-ui/icons'`                    |
| `CourseOutlineIcon`                    | `import { CourseOutlineIcon } from '@vapor-ui/icons'`                    |
| `CpuOutlineIcon`                       | `import { CpuOutlineIcon } from '@vapor-ui/icons'`                       |
| `CreateBranchOutlineIcon`              | `import { CreateBranchOutlineIcon } from '@vapor-ui/icons'`              |
| `CreditCardOutlineIcon`                | `import { CreditCardOutlineIcon } from '@vapor-ui/icons'`                |
| `DarkOutlineIcon`                      | `import { DarkOutlineIcon } from '@vapor-ui/icons'`                      |
| `DashboardOutlineIcon`                 | `import { DashboardOutlineIcon } from '@vapor-ui/icons'`                 |
| `DatabaseOutlineIcon`                  | `import { DatabaseOutlineIcon } from '@vapor-ui/icons'`                  |
| `DebugOutlineIcon`                     | `import { DebugOutlineIcon } from '@vapor-ui/icons'`                     |
| `DeployOutlineIcon`                    | `import { DeployOutlineIcon } from '@vapor-ui/icons'`                    |
| `DeployPushOutlineIcon`                | `import { DeployPushOutlineIcon } from '@vapor-ui/icons'`                |
| `DetailViewOutlineIcon`                | `import { DetailViewOutlineIcon } from '@vapor-ui/icons'`                |
| `DiscOutlineIcon`                      | `import { DiscOutlineIcon } from '@vapor-ui/icons'`                      |
| `DiscardOutlineIcon`                   | `import { DiscardOutlineIcon } from '@vapor-ui/icons'`                   |
| `DiscussionOutlineIcon`                | `import { DiscussionOutlineIcon } from '@vapor-ui/icons'`                |
| `DislikeOutlineIcon`                   | `import { DislikeOutlineIcon } from '@vapor-ui/icons'`                   |
| `DislikeThumbOutlineIcon`              | `import { DislikeThumbOutlineIcon } from '@vapor-ui/icons'`              |
| `DividerOutlineIcon`                   | `import { DividerOutlineIcon } from '@vapor-ui/icons'`                   |
| `DocktoBottomOutlineIcon`              | `import { DocktoBottomOutlineIcon } from '@vapor-ui/icons'`              |
| `DocumentViewerOutlineIcon`            | `import { DocumentViewerOutlineIcon } from '@vapor-ui/icons'`            |
| `DollarOutlineIcon`                    | `import { DollarOutlineIcon } from '@vapor-ui/icons'`                    |
| `DownloadOutlineIcon`                  | `import { DownloadOutlineIcon } from '@vapor-ui/icons'`                  |
| `EditOutlineIcon`                      | `import { EditOutlineIcon } from '@vapor-ui/icons'`                      |
| `EnterOutlineIcon`                     | `import { EnterOutlineIcon } from '@vapor-ui/icons'`                     |
| `EqualOutlineIcon`                     | `import { EqualOutlineIcon } from '@vapor-ui/icons'`                     |
| `EraserOutlineIcon`                    | `import { EraserOutlineIcon } from '@vapor-ui/icons'`                    |
| `ErrorCircleOutlineIcon`               | `import { ErrorCircleOutlineIcon } from '@vapor-ui/icons'`               |
| `ExamListOutlineIcon`                  | `import { ExamListOutlineIcon } from '@vapor-ui/icons'`                  |
| `ExamOutlineIcon`                      | `import { ExamOutlineIcon } from '@vapor-ui/icons'`                      |
| `ExamReportOutlineIcon`                | `import { ExamReportOutlineIcon } from '@vapor-ui/icons'`                |
| `ExpandOutlineIcon`                    | `import { ExpandOutlineIcon } from '@vapor-ui/icons'`                    |
| `ExploreOutlineIcon`                   | `import { ExploreOutlineIcon } from '@vapor-ui/icons'`                   |
| `ExportOutlineIcon`                    | `import { ExportOutlineIcon } from '@vapor-ui/icons'`                    |
| `FileAddOutlineIcon`                   | `import { FileAddOutlineIcon } from '@vapor-ui/icons'`                   |
| `FileDeleteOutlineIcon`                | `import { FileDeleteOutlineIcon } from '@vapor-ui/icons'`                |
| `FileEditOutlineIcon`                  | `import { FileEditOutlineIcon } from '@vapor-ui/icons'`                  |
| `FileNewOutlineIcon`                   | `import { FileNewOutlineIcon } from '@vapor-ui/icons'`                   |
| `FileOutlineIcon`                      | `import { FileOutlineIcon } from '@vapor-ui/icons'`                      |
| `FilterOutlineIcon`                    | `import { FilterOutlineIcon } from '@vapor-ui/icons'`                    |
| `FlagOutlineIcon`                      | `import { FlagOutlineIcon } from '@vapor-ui/icons'`                      |
| `FoldOutlineIcon`                      | `import { FoldOutlineIcon } from '@vapor-ui/icons'`                      |
| `FolderNewOutlineIcon`                 | `import { FolderNewOutlineIcon } from '@vapor-ui/icons'`                 |
| `FolderOutlineIcon`                    | `import { FolderOutlineIcon } from '@vapor-ui/icons'`                    |
| `FolderSearchOutlineIcon`              | `import { FolderSearchOutlineIcon } from '@vapor-ui/icons'`              |
| `ForkOutlineIcon`                      | `import { ForkOutlineIcon } from '@vapor-ui/icons'`                      |
| `FormatColorTextOutlineIcon`           | `import { FormatColorTextOutlineIcon } from '@vapor-ui/icons'`           |
| `ForwardPageOutlineIcon`               | `import { ForwardPageOutlineIcon } from '@vapor-ui/icons'`               |
| `FunctionOutlineIcon`                  | `import { FunctionOutlineIcon } from '@vapor-ui/icons'`                  |
| `FunctionsOutlineIcon`                 | `import { FunctionsOutlineIcon } from '@vapor-ui/icons'`                 |
| `GameOutlineIcon`                      | `import { GameOutlineIcon } from '@vapor-ui/icons'`                      |
| `GiftOutlineIcon`                      | `import { GiftOutlineIcon } from '@vapor-ui/icons'`                      |
| `GitMergeOutlineIcon`                  | `import { GitMergeOutlineIcon } from '@vapor-ui/icons'`                  |
| `GlobalOutlineIcon`                    | `import { GlobalOutlineIcon } from '@vapor-ui/icons'`                    |
| `GoogleDrawingOutlineIcon`             | `import { GoogleDrawingOutlineIcon } from '@vapor-ui/icons'`             |
| `GooglePresentationOutlineIcon`        | `import { GooglePresentationOutlineIcon } from '@vapor-ui/icons'`        |
| `GoogleSpreadsheetOutlineIcon`         | `import { GoogleSpreadsheetOutlineIcon } from '@vapor-ui/icons'`         |
| `GroupOutlineIcon`                     | `import { GroupOutlineIcon } from '@vapor-ui/icons'`                     |
| `HardBreakOutlineIcon`                 | `import { HardBreakOutlineIcon } from '@vapor-ui/icons'`                 |
| `Heading1OutlineIcon`                  | `import { Heading1OutlineIcon } from '@vapor-ui/icons'`                  |
| `Heading2OutlineIcon`                  | `import { Heading2OutlineIcon } from '@vapor-ui/icons'`                  |
| `Heading3OutlineIcon`                  | `import { Heading3OutlineIcon } from '@vapor-ui/icons'`                  |
| `Heading4OutlineIcon`                  | `import { Heading4OutlineIcon } from '@vapor-ui/icons'`                  |
| `HeartOutlineIcon`                     | `import { HeartOutlineIcon } from '@vapor-ui/icons'`                     |
| `HelpCircleOutlineIcon`                | `import { HelpCircleOutlineIcon } from '@vapor-ui/icons'`                |
| `HighlightViewOutlineIcon`             | `import { HighlightViewOutlineIcon } from '@vapor-ui/icons'`             |
| `HistoryOutlineIcon`                   | `import { HistoryOutlineIcon } from '@vapor-ui/icons'`                   |
| `HomeOutlineIcon`                      | `import { HomeOutlineIcon } from '@vapor-ui/icons'`                      |
| `IdCardOutlineIcon`                    | `import { IdCardOutlineIcon } from '@vapor-ui/icons'`                    |
| `ImageOutlineIcon`                     | `import { ImageOutlineIcon } from '@vapor-ui/icons'`                     |
| `ImagePackOutlineIcon`                 | `import { ImagePackOutlineIcon } from '@vapor-ui/icons'`                 |
| `ImageToContainerOutlineIcon`          | `import { ImageToContainerOutlineIcon } from '@vapor-ui/icons'`          |
| `ImportOutlineIcon`                    | `import { ImportOutlineIcon } from '@vapor-ui/icons'`                    |
| `InOutlineIcon`                        | `import { InOutlineIcon } from '@vapor-ui/icons'`                        |
| `IndentDecreaseOutlineIcon`            | `import { IndentDecreaseOutlineIcon } from '@vapor-ui/icons'`            |
| `IndentIncreaseOutlineIcon`            | `import { IndentIncreaseOutlineIcon } from '@vapor-ui/icons'`            |
| `InfiniteOutlineIcon`                  | `import { InfiniteOutlineIcon } from '@vapor-ui/icons'`                  |
| `InfoCircleOutlineIcon`                | `import { InfoCircleOutlineIcon } from '@vapor-ui/icons'`                |
| `InputSettingOutlineIcon`              | `import { InputSettingOutlineIcon } from '@vapor-ui/icons'`              |
| `IntelliSenseEnumOutlineIcon`          | `import { IntelliSenseEnumOutlineIcon } from '@vapor-ui/icons'`          |
| `IntelliSenseEventOutlineIcon`         | `import { IntelliSenseEventOutlineIcon } from '@vapor-ui/icons'`         |
| `IntelliSenseFieldOutlineIcon`         | `import { IntelliSenseFieldOutlineIcon } from '@vapor-ui/icons'`         |
| `IntelliSenseModuleOutlineIcon`        | `import { IntelliSenseModuleOutlineIcon } from '@vapor-ui/icons'`        |
| `IntelliSensePropertyOutlineIcon`      | `import { IntelliSensePropertyOutlineIcon } from '@vapor-ui/icons'`      |
| `IntelliSenseReferenceOutlineIcon`     | `import { IntelliSenseReferenceOutlineIcon } from '@vapor-ui/icons'`     |
| `IntelliSenseSnippetOutlineIcon`       | `import { IntelliSenseSnippetOutlineIcon } from '@vapor-ui/icons'`       |
| `IntelliSenseTypeParameterOutlineIcon` | `import { IntelliSenseTypeParameterOutlineIcon } from '@vapor-ui/icons'` |
| `IntelliSenseUnitOutlineIcon`          | `import { IntelliSenseUnitOutlineIcon } from '@vapor-ui/icons'`          |
| `IntelliSenseVariableOutlineIcon`      | `import { IntelliSenseVariableOutlineIcon } from '@vapor-ui/icons'`      |
| `KeyboardOutlineIcon`                  | `import { KeyboardOutlineIcon } from '@vapor-ui/icons'`                  |
| `KidOutlineIcon`                       | `import { KidOutlineIcon } from '@vapor-ui/icons'`                       |
| `LightOutlineIcon`                     | `import { LightOutlineIcon } from '@vapor-ui/icons'`                     |
| `LightbulbOutlineIcon`                 | `import { LightbulbOutlineIcon } from '@vapor-ui/icons'`                 |
| `LightningOutlineIcon`                 | `import { LightningOutlineIcon } from '@vapor-ui/icons'`                 |
| `LikeOutlineIcon`                      | `import { LikeOutlineIcon } from '@vapor-ui/icons'`                      |
| `LikeThumbOutlineIcon`                 | `import { LikeThumbOutlineIcon } from '@vapor-ui/icons'`                 |
| `LineSpacingOutlineIcon`               | `import { LineSpacingOutlineIcon } from '@vapor-ui/icons'`               |
| `LineStyleOutlineIcon`                 | `import { LineStyleOutlineIcon } from '@vapor-ui/icons'`                 |
| `LinearScaleOutlineIcon`               | `import { LinearScaleOutlineIcon } from '@vapor-ui/icons'`               |
| `LinkOffOutlineIcon`                   | `import { LinkOffOutlineIcon } from '@vapor-ui/icons'`                   |
| `LinkOutlineIcon`                      | `import { LinkOutlineIcon } from '@vapor-ui/icons'`                      |
| `LiveLessonOutlineIcon`                | `import { LiveLessonOutlineIcon } from '@vapor-ui/icons'`                |
| `LocationOutlineIcon`                  | `import { LocationOutlineIcon } from '@vapor-ui/icons'`                  |
| `LockOutlineIcon`                      | `import { LockOutlineIcon } from '@vapor-ui/icons'`                      |
| `LongTextOutlineIcon`                  | `import { LongTextOutlineIcon } from '@vapor-ui/icons'`                  |
| `MagicWandOutlineIcon`                 | `import { MagicWandOutlineIcon } from '@vapor-ui/icons'`                 |
| `MailOutlineIcon`                      | `import { MailOutlineIcon } from '@vapor-ui/icons'`                      |
| `ManagementOutlineIcon`                | `import { ManagementOutlineIcon } from '@vapor-ui/icons'`                |
| `MarkModeOutlineIcon`                  | `import { MarkModeOutlineIcon } from '@vapor-ui/icons'`                  |
| `MarkdownOutlineIcon`                  | `import { MarkdownOutlineIcon } from '@vapor-ui/icons'`                  |
| `MemoOutlineIcon`                      | `import { MemoOutlineIcon } from '@vapor-ui/icons'`                      |
| `MenuOutlineIcon`                      | `import { MenuOutlineIcon } from '@vapor-ui/icons'`                      |
| `MergeUpOutlineIcon`                   | `import { MergeUpOutlineIcon } from '@vapor-ui/icons'`                   |
| `MessageOutlineIcon`                   | `import { MessageOutlineIcon } from '@vapor-ui/icons'`                   |
| `MethodOutlineIcon`                    | `import { MethodOutlineIcon } from '@vapor-ui/icons'`                    |
| `MicOffOutlineIcon`                    | `import { MicOffOutlineIcon } from '@vapor-ui/icons'`                    |
| `MicOnOutlineIcon`                     | `import { MicOnOutlineIcon } from '@vapor-ui/icons'`                     |
| `MinusBoxOutlineIcon`                  | `import { MinusBoxOutlineIcon } from '@vapor-ui/icons'`                  |
| `MinusOutlineIcon`                     | `import { MinusOutlineIcon } from '@vapor-ui/icons'`                     |
| `MoreCommonOutlineIcon`                | `import { MoreCommonOutlineIcon } from '@vapor-ui/icons'`                |
| `MovieOutlineIcon`                     | `import { MovieOutlineIcon } from '@vapor-ui/icons'`                     |
| `NetfficeOutlineIcon`                  | `import { NetfficeOutlineIcon } from '@vapor-ui/icons'`                  |
| `NetworkOutlineIcon`                   | `import { NetworkOutlineIcon } from '@vapor-ui/icons'`                   |
| `NextOutlineIcon`                      | `import { NextOutlineIcon } from '@vapor-ui/icons'`                      |
| `NoImageOutlineIcon`                   | `import { NoImageOutlineIcon } from '@vapor-ui/icons'`                   |
| `NoUserOutlineIcon`                    | `import { NoUserOutlineIcon } from '@vapor-ui/icons'`                    |
| `NoticeBoardOutlineIcon`               | `import { NoticeBoardOutlineIcon } from '@vapor-ui/icons'`               |
| `NoticeCircleOutlineIcon`              | `import { NoticeCircleOutlineIcon } from '@vapor-ui/icons'`              |
| `NumberlistOutlineIcon`                | `import { NumberlistOutlineIcon } from '@vapor-ui/icons'`                |
| `OpenFileOutlineIcon`                  | `import { OpenFileOutlineIcon } from '@vapor-ui/icons'`                  |
| `OpenFolderOutlineIcon`                | `import { OpenFolderOutlineIcon } from '@vapor-ui/icons'`                |
| `OpenInNewOutlineIcon`                 | `import { OpenInNewOutlineIcon } from '@vapor-ui/icons'`                 |
| `OutOutlineIcon`                       | `import { OutOutlineIcon } from '@vapor-ui/icons'`                       |
| `PandasOutlineIcon`                    | `import { PandasOutlineIcon } from '@vapor-ui/icons'`                    |
| `PanelOpenOutlineIcon`                 | `import { PanelOpenOutlineIcon } from '@vapor-ui/icons'`                 |
| `PauseOutlineIcon`                     | `import { PauseOutlineIcon } from '@vapor-ui/icons'`                     |
| `PcOutlineIcon`                        | `import { PcOutlineIcon } from '@vapor-ui/icons'`                        |
| `PdfOutlineIcon`                       | `import { PdfOutlineIcon } from '@vapor-ui/icons'`                       |
| `PhoneOutlineIcon`                     | `import { PhoneOutlineIcon } from '@vapor-ui/icons'`                     |
| `PinSetOutlineIcon`                    | `import { PinSetOutlineIcon } from '@vapor-ui/icons'`                    |
| `PlansOutlineIcon`                     | `import { PlansOutlineIcon } from '@vapor-ui/icons'`                     |
| `PlayOutlineIcon`                      | `import { PlayOutlineIcon } from '@vapor-ui/icons'`                      |
| `PlaylistOutlineIcon`                  | `import { PlaylistOutlineIcon } from '@vapor-ui/icons'`                  |
| `PlusBoxOutlineIcon`                   | `import { PlusBoxOutlineIcon } from '@vapor-ui/icons'`                   |
| `PlusOutlineIcon`                      | `import { PlusOutlineIcon } from '@vapor-ui/icons'`                      |
| `PortforwardingOutlineIcon`            | `import { PortforwardingOutlineIcon } from '@vapor-ui/icons'`            |
| `PreOutlineIcon`                       | `import { PreOutlineIcon } from '@vapor-ui/icons'`                       |
| `PresentScreenOutlineIcon`             | `import { PresentScreenOutlineIcon } from '@vapor-ui/icons'`             |
| `PresetOutlineIcon`                    | `import { PresetOutlineIcon } from '@vapor-ui/icons'`                    |
| `PreviewOutlineIcon`                   | `import { PreviewOutlineIcon } from '@vapor-ui/icons'`                   |
| `PriceOutlineIcon`                     | `import { PriceOutlineIcon } from '@vapor-ui/icons'`                     |
| `PrintOutlineIcon`                     | `import { PrintOutlineIcon } from '@vapor-ui/icons'`                     |
| `ProjectOutlineIcon`                   | `import { ProjectOutlineIcon } from '@vapor-ui/icons'`                   |
| `ProjectSettingOutlineIcon`            | `import { ProjectSettingOutlineIcon } from '@vapor-ui/icons'`            |
| `PsychologyOutlineIcon`                | `import { PsychologyOutlineIcon } from '@vapor-ui/icons'`                |
| `PublishOutlineIcon`                   | `import { PublishOutlineIcon } from '@vapor-ui/icons'`                   |
| `PullOutlineIcon`                      | `import { PullOutlineIcon } from '@vapor-ui/icons'`                      |
| `QnAOutlineIcon`                       | `import { QnAOutlineIcon } from '@vapor-ui/icons'`                       |
| `QrcodeOutlineIcon`                    | `import { QrcodeOutlineIcon } from '@vapor-ui/icons'`                    |
| `QuoteOutlineIcon`                     | `import { QuoteOutlineIcon } from '@vapor-ui/icons'`                     |
| `ReferenceOutlineIcon`                 | `import { ReferenceOutlineIcon } from '@vapor-ui/icons'`                 |
| `RefreshOutlineIcon`                   | `import { RefreshOutlineIcon } from '@vapor-ui/icons'`                   |
| `RegexOutlineIcon`                     | `import { RegexOutlineIcon } from '@vapor-ui/icons'`                     |
| `ReloadOutlineIcon`                    | `import { ReloadOutlineIcon } from '@vapor-ui/icons'`                    |
| `RemoteOffOutlineIcon`                 | `import { RemoteOffOutlineIcon } from '@vapor-ui/icons'`                 |
| `RemoteOutlineIcon`                    | `import { RemoteOutlineIcon } from '@vapor-ui/icons'`                    |
| `ReplyOutlineIcon`                     | `import { ReplyOutlineIcon } from '@vapor-ui/icons'`                     |
| `RestaurantOutlineIcon`                | `import { RestaurantOutlineIcon } from '@vapor-ui/icons'`                |
| `ResultManagementOutlineIcon`          | `import { ResultManagementOutlineIcon } from '@vapor-ui/icons'`          |
| `RouteOutlineIcon`                     | `import { RouteOutlineIcon } from '@vapor-ui/icons'`                     |
| `RunOutlineIcon`                       | `import { RunOutlineIcon } from '@vapor-ui/icons'`                       |
| `SaveAsOutlineIcon`                    | `import { SaveAsOutlineIcon } from '@vapor-ui/icons'`                    |
| `SaveOutlineIcon`                      | `import { SaveOutlineIcon } from '@vapor-ui/icons'`                      |
| `SavingOutlineIcon`                    | `import { SavingOutlineIcon } from '@vapor-ui/icons'`                    |
| `SchoolOutlineIcon`                    | `import { SchoolOutlineIcon } from '@vapor-ui/icons'`                    |
| `SearchOutlineIcon`                    | `import { SearchOutlineIcon } from '@vapor-ui/icons'`                    |
| `SendOutlineIcon`                      | `import { SendOutlineIcon } from '@vapor-ui/icons'`                      |
| `SettingOutlineIcon`                   | `import { SettingOutlineIcon } from '@vapor-ui/icons'`                   |
| `ShareOutlineIcon`                     | `import { ShareOutlineIcon } from '@vapor-ui/icons'`                     |
| `ShoppingCartOutlineIcon`              | `import { ShoppingCartOutlineIcon } from '@vapor-ui/icons'`              |
| `ShortTextOutlineIcon`                 | `import { ShortTextOutlineIcon } from '@vapor-ui/icons'`                 |
| `ShortcutOutlineIcon`                  | `import { ShortcutOutlineIcon } from '@vapor-ui/icons'`                  |
| `SideNavOutlineIcon`                   | `import { SideNavOutlineIcon } from '@vapor-ui/icons'`                   |
| `SignalPowerOutlineIcon`               | `import { SignalPowerOutlineIcon } from '@vapor-ui/icons'`               |
| `SlashOutlineIcon`                     | `import { SlashOutlineIcon } from '@vapor-ui/icons'`                     |
| `SoundOffOutlineIcon`                  | `import { SoundOffOutlineIcon } from '@vapor-ui/icons'`                  |
| `SoundOnOutlineIcon`                   | `import { SoundOnOutlineIcon } from '@vapor-ui/icons'`                   |
| `SpinnerOutlineIcon`                   | `import { SpinnerOutlineIcon } from '@vapor-ui/icons'`                   |
| `SplitHorizontalOutlineIcon`           | `import { SplitHorizontalOutlineIcon } from '@vapor-ui/icons'`           |
| `SplitVerticalOutlineIcon`             | `import { SplitVerticalOutlineIcon } from '@vapor-ui/icons'`             |
| `StarOutlineIcon`                      | `import { StarOutlineIcon } from '@vapor-ui/icons'`                      |
| `StepInOutlineIcon`                    | `import { StepInOutlineIcon } from '@vapor-ui/icons'`                    |
| `StepOutOutlineIcon`                   | `import { StepOutOutlineIcon } from '@vapor-ui/icons'`                   |
| `StepOverOutlineIcon`                  | `import { StepOverOutlineIcon } from '@vapor-ui/icons'`                  |
| `StopOutlineIcon`                      | `import { StopOutlineIcon } from '@vapor-ui/icons'`                      |
| `StrikeOutlineIcon`                    | `import { StrikeOutlineIcon } from '@vapor-ui/icons'`                    |
| `StruckOutlineIcon`                    | `import { StruckOutlineIcon } from '@vapor-ui/icons'`                    |
| `StudentManagementOutlineIcon`         | `import { StudentManagementOutlineIcon } from '@vapor-ui/icons'`         |
| `SyllabusOutlineIcon`                  | `import { SyllabusOutlineIcon } from '@vapor-ui/icons'`                  |
| `TableFilterOutlineIcon`               | `import { TableFilterOutlineIcon } from '@vapor-ui/icons'`               |
| `TableOutlineIcon`                     | `import { TableOutlineIcon } from '@vapor-ui/icons'`                     |
| `TabletOutlineIcon`                    | `import { TabletOutlineIcon } from '@vapor-ui/icons'`                    |
| `TerminalConnectOutlineIcon`           | `import { TerminalConnectOutlineIcon } from '@vapor-ui/icons'`           |
| `TerminalOutlineIcon`                  | `import { TerminalOutlineIcon } from '@vapor-ui/icons'`                  |
| `TerminalWindowOutlineIcon`            | `import { TerminalWindowOutlineIcon } from '@vapor-ui/icons'`            |
| `TestOutlineIcon`                      | `import { TestOutlineIcon } from '@vapor-ui/icons'`                      |
| `TextColorOutlineIcon`                 | `import { TextColorOutlineIcon } from '@vapor-ui/icons'`                 |
| `TextOutlineIcon`                      | `import { TextOutlineIcon } from '@vapor-ui/icons'`                      |
| `TextScanOutlineIcon`                  | `import { TextScanOutlineIcon } from '@vapor-ui/icons'`                  |
| `TimeOutlineIcon`                      | `import { TimeOutlineIcon } from '@vapor-ui/icons'`                      |
| `TransferOutlineIcon`                  | `import { TransferOutlineIcon } from '@vapor-ui/icons'`                  |
| `TranslateOutlineIcon`                 | `import { TranslateOutlineIcon } from '@vapor-ui/icons'`                 |
| `TrashOutlineIcon`                     | `import { TrashOutlineIcon } from '@vapor-ui/icons'`                     |
| `TriangleOutlineIcon`                  | `import { TriangleOutlineIcon } from '@vapor-ui/icons'`                  |
| `UnderlineOutlineIcon`                 | `import { UnderlineOutlineIcon } from '@vapor-ui/icons'`                 |
| `UndoOutlineIcon`                      | `import { UndoOutlineIcon } from '@vapor-ui/icons'`                      |
| `UnlockOutlineIcon`                    | `import { UnlockOutlineIcon } from '@vapor-ui/icons'`                    |
| `UploadOutlineIcon`                    | `import { UploadOutlineIcon } from '@vapor-ui/icons'`                    |
| `UserCheckOutlineIcon`                 | `import { UserCheckOutlineIcon } from '@vapor-ui/icons'`                 |
| `UserMoveOutlineIcon`                  | `import { UserMoveOutlineIcon } from '@vapor-ui/icons'`                  |
| `UserOutlineIcon`                      | `import { UserOutlineIcon } from '@vapor-ui/icons'`                      |
| `UserSearchOutlineIcon`                | `import { UserSearchOutlineIcon } from '@vapor-ui/icons'`                |
| `VideocamOffOutlineIcon`               | `import { VideocamOffOutlineIcon } from '@vapor-ui/icons'`               |
| `VideocamOnOutlineIcon`                | `import { VideocamOnOutlineIcon } from '@vapor-ui/icons'`                |
| `ViewExpandOutlineIcon`                | `import { ViewExpandOutlineIcon } from '@vapor-ui/icons'`                |
| `ViewModuleOutlineIcon`                | `import { ViewModuleOutlineIcon } from '@vapor-ui/icons'`                |
| `ViewOffOutlineIcon`                   | `import { ViewOffOutlineIcon } from '@vapor-ui/icons'`                   |
| `ViewOnOutlineIcon`                    | `import { ViewOnOutlineIcon } from '@vapor-ui/icons'`                    |
| `ViewShrinkOutlineIcon`                | `import { ViewShrinkOutlineIcon } from '@vapor-ui/icons'`                |
| `WarningOutlineIcon`                   | `import { WarningOutlineIcon } from '@vapor-ui/icons'`                   |
| `WordSearchOutlineIcon`                | `import { WordSearchOutlineIcon } from '@vapor-ui/icons'`                |
| `ZoomInOutlineIcon`                    | `import { ZoomInOutlineIcon } from '@vapor-ui/icons'`                    |
| `ZoomOutOutlineIcon`                   | `import { ZoomOutOutlineIcon } from '@vapor-ui/icons'`                   |


# All Components
URL: /docs/components
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/index.mdx

빠른 개발과 일관된 디자인을 위한 Vapor UI 디자인 시스템을 살펴보세요.

***

## Components

<AllComponentsContainer>
  <ComponentsCard name="Avatar" description="사용자가 설정한 프로필 이미지 혹은 텍스트를 UI 상에 나타냅니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/avatar.svg" componentType="Data Display" href="/docs/components/avatar" />

  <ComponentsCard name="Badge" description="이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/badge.svg" componentType="Data Display" href="/docs/components/badge" />

  <ComponentsCard name="Breadcrumb" description="사용자의 현재 위치를 계층적으로 표시하여 탐색을 돕습니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/breadcrumb.svg" componentType="Navigation" href="/docs/components/breadcrumb" />

  <ComponentsCard name="Button" description="사용자에게 행동을 유도합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/button.svg" componentType="Buttons" href="/docs/components/button" />

  <ComponentsCard name="Callout" description="사용자의 액션에 대한 피드백 혹은 서비스에 대한 메시지를 제공합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/alert.svg" componentType="Feedback" href="/docs/components/callout" />

  <ComponentsCard name="Card" description="이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/card.svg" componentType="Data Display" href="/docs/components/card" />

  <ComponentsCard name="Checkbox" description="여러 선택지를 개별적으로 선택할 수 있는 체크박스 입력 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/checkbox.svg" componentType="Inputs" href="/docs/components/checkbox" />

  <ComponentsCard name="Collapsible" description="콘텐츠를 접고 펼칠 수 있는 인터랙티브 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/collapsible.svg" componentType="Data Display" href="/docs/components/collapsible" />

  <ComponentsCard name="Dialog" description="사용자에게 모달 형태로 중요한 정보를 전달하고, 사용자의 응답을 요청합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/dialog.svg" componentType="Feedback" href="/docs/components/dialog" />

  <ComponentsCard name="Field" description="입력 요소와 라벨, 에러 메시지 등을 그룹화하는 폼 필드 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/field.svg" componentType="Inputs" href="/docs/components/field" />

  <ComponentsCard name="FloatingBar" description="화면 위에 부유하는 형태로 표시되는 컨텍스트 기반 툴바로, 사용자가 현재 작업 중인 맥락에서 즉시 접근해야 하는 액션, 설정, 옵션, 정보 요소 등을 모아 제공하는 UI 영역입니다" imageUrl="https://statics.goorm.io/gds/docs/all-components/core/floating-bar.svg" componentType="Overlay" href="/docs/components/floating-bar" />

  <ComponentsCard name="IconButton" description="특정 작업이나 기능을 나타내는 버튼으로, 텍스트 없이 아이콘만으로 명령을 전달합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/icon-button.svg" componentType="Buttons" href="/docs/components/icon-button" />

  <ComponentsCard name="InputGroup" description="여러 입력 요소를 시각적으로 그룹화하여 관련성을 표현합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/input-group.svg" componentType="Inputs" href="/docs/components/input-group" />

  <ComponentsCard name="Menu" description="사용자에게 선택 가능한 옵션 목록을 드롭다운 형태로 제공합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/menu.svg" componentType="Navigation" href="/docs/components/menu" />

  <ComponentsCard name="MultiSelect" description="여러 옵션을 동시에 선택할 수 있는 드롭다운 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/multi-select.svg" componentType="Inputs" href="/docs/components/multi-select" />

  <ComponentsCard name="NavigationMenu" description="여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/nav.svg" componentType="Navigation" href="/docs/components/navigation-menu" />

  <ComponentsCard name="Pagination" description="콘텐츠를 여러 페이지로 분할하여 제공할 때, 사용자가 원하는 페이지로 이동할 수 있도록 돕는 내비게이션 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/pagination.svg" componentType="Navigation" href="/docs/components/pagination" />

  <ComponentsCard name="Popover" description="특정 요소 위에 부가 정보나 옵션을 팝업 형태로 표시합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/popover.svg" componentType="Overlay" href="/docs/components/popover" />

  <ComponentsCard name="Radio" description="단일 선택 옵션을 제공하는 라디오 버튼 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/radio.svg" componentType="Inputs" href="/docs/components/radio" />

  <ComponentsCard name="RadioCard" description="카드 형태의 라디오 버튼으로 선택 가능한 옵션을 시각적으로 표현합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/radio-card.svg" componentType="Inputs" href="/docs/components/radio-card" />

  <ComponentsCard name="RadioGroup" description="여러 옵션 중 하나만 선택하도록 하는 라디오 그룹 입력 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/radio-group.svg" componentType="Inputs" href="/docs/components/radio" />

  <ComponentsCard name="Select" description="드롭다운 형태로 옵션을 선택할 수 있는 선택 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/select.svg" componentType="Inputs" href="/docs/components/select" />

  <ComponentsCard name="SegmentedControl" description="같은 콘텐츠 영역 내에서 화면의 보기 방식이나 필터를 제어하는 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/segmented-control.svg" componentType="Inputs" href="/docs/components/segmented-control" />

  <ComponentsCard name="Sheet" description="화면 측면에서 슬라이드되어 나타나는 패널 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/sheet.svg" componentType="Overlay" href="/docs/components/sheet" />

  <ComponentsCard name="Spinner" description="콘텐츠 로딩이나 데이터 처리 시 대기 상태를 표시합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/spinner.svg" componentType="Feedback" href="/docs/components/spinner" />

  <ComponentsCard name="Switch" description="설정 값을 켜기/끄기로 토글할 수 있는 스위치 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/switch.svg" componentType="Inputs" href="/docs/components/switch" />

  <ComponentsCard name="Table" description="구조화된 데이터를 행(Row)과 열(Column)로 나누어 시각적으로 표시하는 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/table.svg" componentType="Data Display" href="/docs/components/table" />

  <ComponentsCard name="Tabs" description="여러 콘텐츠 패널 간에 전환할 수 있는 탭 인터페이스를 제공합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/tabs.svg" componentType="Navigation" href="/docs/components/tabs" />

  <ComponentsCard name="Text" description="시멘틱 태그와 타이포그래피 스타일을 별도로 지정하기 위해 사용합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/text.svg" componentType="Typography" href="/docs/components/text" />

  <ComponentsCard name="TextInput" description="사용자가 데이터를 입력할 수 있도록 텍스트, 숫자 등 다양한 형식의 입력 필드를 제공합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/core/textinput.svg" componentType="Inputs" href="/docs/components/text-input" />

  <ComponentsCard name="Textarea" description="여러 줄의 텍스트를 입력할 수 있는 확장 가능한 입력 영역을 제공합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/textarea.svg" componentType="Inputs" href="/docs/components/textarea" />

  <ComponentsCard name="Toast" description="화면 하단에 일시적으로 나타나는 알림 메시지 컴포넌트입니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/toast.svg" componentType="Feedback" href="/docs/components/toast" />

  <ComponentsCard name="Tooltip" description="요소에 마우스를 올렸을 때 추가 정보를 툴팁으로 표시합니다." imageUrl="https://statics.goorm.io/gds/docs/all-components/tooltip.svg" componentType="Overlay" href="/docs/components/tooltip" />
</AllComponentsContainer>


# Introduction
URL: /docs/getting-started
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/index.mdx

빠른 개발과 일관된 디자인을 위한 Vapor UI 디자인 시스템을 살펴보세요.

## Vapor UI 소개

Vapor UI는 개발자 경험과 디자인 일관성을 모두 만족시키는 React 컴포넌트 라이브러리입니다. 구름에서 개발한 세 번째 디자인 시스템으로, 실제 프로덕션에서 검증된 컴포넌트들을 제공합니다.

## 핵심 기능

* **모듈화된 구조**: 필요한 패키지만 선택적으로 설치하여 번들 크기를 최적화합니다.
* **TypeScript 지원**: 모든 컴포넌트에 타입 정의가 포함되어 자동 완성과 타입 검사를 지원합니다.
* **접근성 내장**: WCAG 2.1 AA 수준의 웹 접근성을 기본으로 제공합니다.
* **Tailwind CSS 통합**: Tailwind 유틸리티 클래스로 컴포넌트를 빠르게 커스터마이징할 수 있습니다.
* **다크 모드**: 라이트/다크 테마 자동 전환 시스템을 제공합니다.

## 적합한 프로젝트

Vapor UI는 다음과 같은 프로젝트에서 효과적으로 활용할 수 있습니다.

* 빠른 프로토타이핑이 필요한 스타트업과 신규 프로젝트
* 일관된 디자인 시스템을 구축하려는 중대형 팀
* 접근성을 중요시하는 공공 서비스나 글로벌 서비스
* TypeScript 환경의 모던 React 프로젝트
* 디자인과 개발 간 협업이 중요한 조직


# Codemod
URL: /docs/releases/codemod
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/releases/codemod.md

@vapor-ui/codemod 패키지의 릴리즈 노트입니다.

# @vapor-ui/codemod

## 1.1.0

### Node

* Require Node.js 24 or later ([#676](https://github.com/goorm-dev/vapor-ui/pull/676)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

## 1.0.0

### Codemod

* Add v1/migrate transform for @vapor-ui/core v1.0.0 migration ([#454](https://github.com/goorm-dev/vapor-ui/pull/454)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!
  * `trackAnchor` → `disableAnchorTracking` (boolean inversion)
  * `loop` → `loopFocus` (Menu, Tabs)
  * Move `openOnHover`, `delay`, `closeDelay` from Root to Trigger (Tooltip, Preview Card)
  * `hoverable` → `disableHoverablePopup` (Tooltip only, boolean inversion)

## 1.0.0-beta.7

### CLI

* Add Tabs, Text, Textinput transform ([#319](https://github.com/goorm-dev/vapor-ui/pull/319)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* Add Dropdown, IconButton, Nav transformer ([#317](https://github.com/goorm-dev/vapor-ui/pull/317)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* add avatar, breadcrumb, card transform ([#317](https://github.com/goorm-dev/vapor-ui/pull/317)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* Add Popover, RadioGroup, Switch Transform ([#317](https://github.com/goorm-dev/vapor-ui/pull/317)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* Add codemod for icon packages name import ([#317](https://github.com/goorm-dev/vapor-ui/pull/317)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* add codemod cli packages ([#317](https://github.com/goorm-dev/vapor-ui/pull/317)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* add cli options ([#351](https://github.com/goorm-dev/vapor-ui/pull/351)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* add button, badge, alert component color props to colorPalette ([#362](https://github.com/goorm-dev/vapor-ui/pull/362)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

## 1.0.0-beta.6

### CLI

* add checkbox, collapsible, dialog transform ([#316](https://github.com/goorm-dev/vapor-ui/pull/316)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* add avatar, breadcrumb, card transform ([#317](https://github.com/goorm-dev/vapor-ui/pull/317)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* add codemod cli packages ([#317](https://github.com/goorm-dev/vapor-ui/pull/317)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

## 1.0.0-beta.5

### CLI

* Add codemod for icon packages name import ([#317](https://github.com/goorm-dev/vapor-ui/pull/317)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!


# Color Generator
URL: /docs/releases/color-generator
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/releases/color-generator.md

@vapor-ui/color-generator 패키지의 릴리즈 노트입니다.

# @vapor-ui/color-generator

## 1.0.0-beta.8

### Tokens

* **BREAKING CHANGE**: rename `color-background-canvas` token to `color-canvas` ([#378](https://github.com/goorm-dev/vapor-ui/pull/378)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

  The canvas background token has been renamed for better semantic clarity and consistency:

  * Token name: `color-background-canvas` → `color-canvas`
  * CSS variable: `--vapor-color-background-canvas` → `--vapor-color-canvas`

  **Migration required:**

  * Update all references from `color-background-canvas` to `color-canvas`
  * Replace CSS variables from `--vapor-color-background-canvas` to `--vapor-color-canvas`

## 1.0.0-beta.7

### Color Generator

* add color-border-normal semantic token that dynamically adapts to background color customization (light: 100 step, dark: 300 step) ([#370](https://github.com/goorm-dev/vapor-ui/pull/370)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

## 1.0.0-beta.6

### Etc.

* feat: update color generator & color palette ([#337](https://github.com/goorm-dev/vapor-ui/pull/337)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

## 1.0.0-beta.5

### Etc.

* feat: create @vapor-ui/color-generator & @vapor-ui/css-generator ([#234](https://github.com/goorm-dev/vapor-ui/pull/234)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* feat: update color tokens ([#261](https://github.com/goorm-dev/vapor-ui/pull/261)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!


# Core
URL: /docs/releases/core
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/releases/core.md

@vapor-ui/core 패키지의 릴리즈 노트입니다.

# @vapor-ui/core

## 1.6.0

### Alertdialog

* add AlertDialog.Header ([#725](https://github.com/goorm-dev/vapor-ui/pull/725)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Button

* apply the light interaction layer to the `ghost` variant of `Button` and `IconButton` to match the design ([#747](https://github.com/goorm-dev/vapor-ui/pull/747)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Core

* align component backgrounds with the canvas token hierarchy and expose `bg-canvas-inverse` in sprinkles ([#698](https://github.com/goorm-dev/vapor-ui/pull/698)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* Extract shared arrow positioning logic from `NavigationMenu`, `Popover`, and `Tooltip` into a `useArrowPosition` hook. Also bump the default `sideOffset` of these three primitives from `8` to `10`. ([#758](https://github.com/goorm-dev/vapor-ui/pull/758)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Deps

* update `@base-ui/react` to 1.8.0 — support `keepMounted` on `Avatar` with stacked image/fallback styles, accept functional updater in Toast `update` ([#729](https://github.com/goorm-dev/vapor-ui/pull/729)) - Thanks [@renovate](https://github.com/apps/renovate)!

### Dialog

* align `Dialog` header/body/footer padding with design — remove the fixed `Dialog.Header` height (56px) and use padding instead (top 24 / Header→Body 20 / Body→Footer 20 / bottom 24). Vertical spacing of existing dialogs will change. ([#760](https://github.com/goorm-dev/vapor-ui/pull/760)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Meter

* add new `Meter` component ([#700](https://github.com/goorm-dev/vapor-ui/pull/700)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Progressbar

* add new `ProgressBar` component ([#702](https://github.com/goorm-dev/vapor-ui/pull/702)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Radio Group

* add RadioGroup.RequiredSymbol ([#753](https://github.com/goorm-dev/vapor-ui/pull/753)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Spinner

* respect `prefers-reduced-motion` and hide decorative svg from assistive technology ([#689](https://github.com/goorm-dev/vapor-ui/pull/689)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Typography

* fix the code font family name to `"Fira Code"` and apply it to the `code1` / `code2` typography styles ([#748](https://github.com/goorm-dev/vapor-ui/pull/748)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Etc.

* add data-slots for all components ([#703](https://github.com/goorm-dev/vapor-ui/pull/703)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* add new `AlertDialog` components ([#704](https://github.com/goorm-dev/vapor-ui/pull/704)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* apply `canvas-inverse` tokens to the tooltip/toast component. ([#696](https://github.com/goorm-dev/vapor-ui/pull/696)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Updated Dependencies

* @vapor-ui/icons\@1.3.1

## 1.5.1

### Css

* migrate V2 foundations ([#690](https://github.com/goorm-dev/vapor-ui/pull/690)) - Thanks [@noahchoii](https://github.com/noahchoii)!

## 1.5.0

### Css

* **Breaking Change**: inverse color tokens have been changed. In light mode, inverse is dark, in dark mode, inverse is light. ([#644](https://github.com/goorm-dev/vapor-ui/pull/644)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Toggle

* add new `ToggleGroup` component ([#628](https://github.com/goorm-dev/vapor-ui/pull/628)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* add new `Toggle` component ([#628](https://github.com/goorm-dev/vapor-ui/pull/628)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Toolbar

* add new `Toolbar` component ([#643](https://github.com/goorm-dev/vapor-ui/pull/643)) - Thanks [@noahchoii](https://github.com/noahchoii)!

## 1.4.0

### Sheet

* Add `Sheet.ResizeHandle` for edge drag-and-keyboard resizing. ([#634](https://github.com/goorm-dev/vapor-ui/pull/634)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Checkbox

* propagate `invalid` state to indicator element ([#618](https://github.com/goorm-dev/vapor-ui/pull/618)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Updated Dependencies

* @vapor-ui/icons\@1.2.1

## 1.3.0

### Avatar

* fix double rendering `FallbackPrimitive` ([#556](https://github.com/goorm-dev/vapor-ui/pull/556)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* deprecate `imageElement`/`fallbackElement` props ([#556](https://github.com/goorm-dev/vapor-ui/pull/556)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Spinner

* add new `Spinner` component ([#567](https://github.com/goorm-dev/vapor-ui/pull/567)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Segmented Control

* add new `SegmentedControl` component ([#569](https://github.com/goorm-dev/vapor-ui/pull/569)) - Thanks [@noahchoii](https://github.com/noahchoii)!

## 1.2.1

### Menu

* correct `gap` scale of list components ([#553](https://github.com/goorm-dev/vapor-ui/pull/553)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Select

* correct `gap` scale of list components ([#553](https://github.com/goorm-dev/vapor-ui/pull/553)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### MultiSelect

* correct `gap` scale of list components ([#553](https://github.com/goorm-dev/vapor-ui/pull/553)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Updated Dependencies

* @vapor-ui/icons\@1.2.0

## 1.2.0

### All

* add `forwardRef` to `Portal` elements ([#499](https://github.com/goorm-dev/vapor-ui/pull/499)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* support for functional className and style prop across all components ([#517](https://github.com/goorm-dev/vapor-ui/pull/517)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* implemente interaction layer corners using `box-shadow` and add animations to `Checkbox`, \`Radio ([#515](https://github.com/goorm-dev/vapor-ui/pull/515)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* adjust dark `background.hint.100` to improve surface hierarchy on overlay backgrounds ([#518](https://github.com/goorm-dev/vapor-ui/pull/518)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* remove css all property ([#493](https://github.com/goorm-dev/vapor-ui/pull/493)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* remove duplication from deprecated sprinkles ([#494](https://github.com/goorm-dev/vapor-ui/pull/494)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* split sprinkles className and hash with `-` ([#495](https://github.com/goorm-dev/vapor-ui/pull/495)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* bump @base-ui/react v1.2.0 ([#497](https://github.com/goorm-dev/vapor-ui/pull/497)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* bump @base-ui/react version v1.3.0 ([#519](https://github.com/goorm-dev/vapor-ui/pull/519)) - Thanks [@vapor-ui](https://github.com/vapor-ui)!

### Button

* add `@base-ui/react` headless to the `Button` component ([#501](https://github.com/goorm-dev/vapor-ui/pull/501)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Checkbox

* fix: improve checkbox border styles and interaction overlay sizing ([#354](https://github.com/goorm-dev/vapor-ui/pull/354)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Select

* set the width and height of the `Select.TriggerIcon`'s SVG to 100%. ([#504](https://github.com/goorm-dev/vapor-ui/pull/504)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* deprecate `Select.PlaceholderPrimitive` component. Use `data-placeholder` for custom styling. ([#500](https://github.com/goorm-dev/vapor-ui/pull/500)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Switch

* composite missing `className` prop ([#498](https://github.com/goorm-dev/vapor-ui/pull/498)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Toast

* respect the user's reduced motion preference in toast animations ([#525](https://github.com/goorm-dev/vapor-ui/pull/525)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Etc.

* add `:active` pseudo-selector to utility CSS properties ([#535](https://github.com/goorm-dev/vapor-ui/pull/535)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Updated Dependencies

* @vapor-ui/icons\@1.1.0

## 1.1.0

### General changes

* expand utility props and scoping it `$css` ([#476](https://github.com/goorm-dev/vapor-ui/pull/476)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Etc.

* Change `useMutationObserver` hook to use only ref ([#332](https://github.com/goorm-dev/vapor-ui/pull/332)) - Thanks [@SimYunSup](https://github.com/SimYunSup)!

### Skeleton

* Add new `Skeleton` component ([#481](https://github.com/goorm-dev/vapor-ui/pull/481)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Updated Dependencies

* @vapor-ui/icons\@1.0.1

## 1.0.0

### Checkbox / Switch / Radio

* **Breaking Change**: Root element changed from `HTMLButtonElement` to `HTMLSpanElement` ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Dialog

* fix(dialog): correct ReactElement type parameters in DialogPopup props ([#438](https://github.com/goorm-dev/vapor-ui/pull/438)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

  Fixed incorrect type parameters for `portalElement` and `overlayElement` in `DialogPopup.Props` from `typeof Component` to `Component.Props`.

### Field

* **Breaking Change**: `validationMode` default changed from `onBlur` to `onSubmit` ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* **New Feature**: `Field.Item`: New component added for improved accessibility when using Checkbox, Radio, Switch with Field ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### FloatingBar

* feat(FloatingBar): export `EventDetails` type ([#437](https://github.com/goorm-dev/vapor-ui/pull/437)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

  Export `ChangeEventDetails` type from `FloatingBarRoot` namespace for docs-extractor compatibility.

### Form

* **Breaking Change**: `onClearErrors` prop removed (now auto-handled internally) ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Menu

* **Breaking Change**: `openOnHover`, `delay`, `closeDelay` props moved from `Menu.Root` to `Menu.Trigger` ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### NavigationMenu

* **Breaking Change**: `Link`: `selected` prop renamed to `current` (for Breadcrumb API consistency) ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* **Breaking Change**: `data-selected` attribute changed to `data-active` ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Popover

* **Breaking Change**: `openOnHover`, `delay`, `closeDelay` props moved from `Popover.Root` to `Popover.Trigger` ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Radio Card

* removed the size prop from the RadioCard component and simplified its styling by removing typography mixins ([#442](https://github.com/goorm-dev/vapor-ui/pull/442)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Tabs

* fix(tabs): correct indicator position when list has padding ([#434](https://github.com/goorm-dev/vapor-ui/pull/434)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

  Fix indicator positioning issue when Tabs.List has padding-inline (horizontal) or padding-block (vertical). The indicator now correctly positions itself by explicitly setting `left: 0` (horizontal) or `top: 0` (vertical), ensuring it uses only the CSS variables for positioning regardless of padding.

* **Breaking Change**: `Tabs.Root`: `loop` prop renamed to `loopFocus` ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* **Breaking Change**: `activateOnFocus` default changed from `true` to `false` ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* **Breaking Change**: `data-selected` attribute changed to `data-active` ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Tooltip

* **Breaking Change**: `Tooltip.Root`: `hoverable` prop renamed to `disableHoverablePopup` (logic inverted) ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* **Breaking Change**: `delay`, `closeDelay` props moved from `Tooltip.Root` to `Tooltip.Trigger` ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Etc.

* Migrate to Base UI v1.1.0 ([#453](https://github.com/goorm-dev/vapor-ui/pull/453)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* Updated internal utilities to use official @base-ui/utils package (v0.2.4) ([#443](https://github.com/goorm-dev/vapor-ui/pull/443)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* fix: prevent passing props to Fragment in `createRender` ([#403](https://github.com/goorm-dev/vapor-ui/pull/403)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

  Fixed React warning `Invalid prop 'ref' supplied to 'React.Fragment'` by wrapping Fragment returns in a render callback to avoid `cloneElement` props merging.

### Updated Dependencies

* @vapor-ui/icons\@1.0.0

## 1.0.0-beta.12

### Button

* Update secondary button fill variant text color to use foreground.secondary\[200] for improved contrast ([#427](https://github.com/goorm-dev/vapor-ui/pull/427)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Dialog

* adjust to max-width in dialog ([#394](https://github.com/goorm-dev/vapor-ui/pull/394)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Field

* feat(field): add typography and foreground props to Field.Label ([#399](https://github.com/goorm-dev/vapor-ui/pull/399)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Floatingbar

* add new `FloatingBar` component ([#359](https://github.com/goorm-dev/vapor-ui/pull/359)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* clone elements & enhance customizability ([#359](https://github.com/goorm-dev/vapor-ui/pull/359)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Tabs

* Refactor Tabs component structure for better customization ([#429](https://github.com/goorm-dev/vapor-ui/pull/429)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!
  * Changed `Tabs.Trigger` to `Tabs.Button` for clearer semantics
  * Extracted `Tabs.ListPrimitive` and `Tabs.IndicatorPrimitive` for enhanced customization
  * Added fill and line variant support with updated styles
  * Updated type definitions and utility props for better developer experience

### Updated Dependencies

* @vapor-ui/icons\@1.0.0-beta.7

## 1.0.0-beta.11

### Text Input

* Correct background-color of TextInput component ([#387](https://github.com/goorm-dev/vapor-ui/pull/387)) - Thanks [@agetbase](https://github.com/agetbase)!

### Etc.

* clone elements & enhance customizability ([#359](https://github.com/goorm-dev/vapor-ui/pull/359)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Updated Dependencies

* @vapor-ui/hooks\@1.0.0-beta.6
* @vapor-ui/icons\@1.0.0-beta.6

## 1.0.0-beta.10

### Toast

* avoid overflowing when toast width is wider than view port width ([#390](https://github.com/goorm-dev/vapor-ui/pull/390)) - Thanks [@noahchoii](https://github.com/noahchoii)!

## 1.0.0-beta.9

### Toast

* remove toastManager ([#383](https://github.com/goorm-dev/vapor-ui/pull/383)) - Thanks [@noahchoii](https://github.com/noahchoii)!

## 1.0.0-beta.8

### Toast

* add new `Toast` component ([#376](https://github.com/goorm-dev/vapor-ui/pull/376)) - Thanks [@noahchoii](https://github.com/noahchoii)!

## 1.0.0-beta.7

### Menu

* Updated Menu.Item paddingRight from 6px to 12px to match Figma design specification ([#325](https://github.com/goorm-dev/vapor-ui/pull/325)) - Thanks [@agetbase](https://github.com/agetbase)!

* Correct MenuPositionerPrimitive sideOffset from 8px to 4px to match Figma spec ([#342](https://github.com/goorm-dev/vapor-ui/pull/342)) - Thanks [@agetbase](https://github.com/agetbase)!

### Pagination

* add new `Pagination` component ([#329](https://github.com/goorm-dev/vapor-ui/pull/329)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Table

* add new `Table` component ([#294](https://github.com/goorm-dev/vapor-ui/pull/294)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Etc.

* synchronized color tokens with figma ([#340](https://github.com/goorm-dev/vapor-ui/pull/340)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* **BREAKING CHANGE**: Remove `stretch` prop from Button, IconButton, and NavigationMenu components ([#368](https://github.com/goorm-dev/vapor-ui/pull/368)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

  The `stretch` prop has been removed to align with Figma's component variant system. In Figma, width control is handled via "Fill Container" (Auto Layout), not as a component variant.

  **Migration Guide:**

  Replace `stretch` prop with Tailwind's `w-full` utility class:

  ```tsx
  // Before
  <Button stretch>Submit</Button>
  <NavigationMenu stretch>...</NavigationMenu>

  // After
  <Button className="w-full">Submit</Button>
  <NavigationMenu className="w-full">...</NavigationMenu>
  ```

  **Why this change:**

  * Maintains Figma-React design system parity (SSOT principle)
  * Follows "React Props = Figma Variants" architectural principle
  * Aligns with Vapor UI's 4-layer component architecture (Container, Interaction, Contents, Slot)
  * Layout concerns should be handled by parent containers, not component props

## 1.0.0-beta.6

It contains the same code as the previous version. Please refer to that version.

## 1.0.0-beta.5

### Button

* update horizontal padding for small size (`050 (4px)` -> `100 (8px)`) ([#323](https://github.com/goorm-dev/vapor-ui/pull/323)) - Thanks [@agetbase](https://github.com/agetbase)!

### Checkbox

* fix checkbox borderRadius sync error ([#267](https://github.com/goorm-dev/vapor-ui/pull/267)) - Thanks [@SimYunSup](https://github.com/SimYunSup)!

### Field

* add default layout styles to field.label ([#289](https://github.com/goorm-dev/vapor-ui/pull/289)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Form

* add new `Form` component ([#256](https://github.com/goorm-dev/vapor-ui/pull/256)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Icon Button

* Fixed a CSS dependency order issue where `IconButton` styles loaded before `Button` styles, causing incorrect style inheritance.

### Radio

* adjust indicator size to account for border ([#291](https://github.com/goorm-dev/vapor-ui/pull/291)) - Thanks [@SimYunSup](https://github.com/SimYunSup)!

### Radio Card

* add new component `RadioCard` ([#284](https://github.com/goorm-dev/vapor-ui/pull/284)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Radio Group

* synchronize the aria-labelledby with the recieved id prop ([#327](https://github.com/goorm-dev/vapor-ui/pull/327)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* replace layout styles into layout component like VStack, HStack ([#288](https://github.com/goorm-dev/vapor-ui/pull/288)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Text Input

* add component layer ([#253](https://github.com/goorm-dev/vapor-ui/pull/253)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Theme

* add ThemeScope component and migrate to data-attribute based theming ([#278](https://github.com/goorm-dev/vapor-ui/pull/278)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Theme Provider

* remove ThemeScript and simplify ThemeProvider ([#240](https://github.com/goorm-dev/vapor-ui/pull/240)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Etc.

* enabled CSS tree shaking ([#298](https://github.com/goorm-dev/vapor-ui/pull/298)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!
  * Component CSS is now automatically imported by each component file.

* add white foreground variant to foreground recipe ([#305](https://github.com/goorm-dev/vapor-ui/pull/305)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* export component with namespace ([#276](https://github.com/goorm-dev/vapor-ui/pull/276)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* migrate to base-ui beta v4 ([#292](https://github.com/goorm-dev/vapor-ui/pull/292)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* change components interface ([#360](https://github.com/goorm-dev/vapor-ui/pull/360)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* missing component exports in entry file ([#248](https://github.com/goorm-dev/vapor-ui/pull/248)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* add uilitiy css props ([#326](https://github.com/goorm-dev/vapor-ui/pull/326)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* rename `CombinedContent` to `Content` ([#247](https://github.com/goorm-dev/vapor-ui/pull/247)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* unify cascade layers under `vapor` namespace ([#334](https://github.com/goorm-dev/vapor-ui/pull/334)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* standardize state attributes for form components ([#282](https://github.com/goorm-dev/vapor-ui/pull/282)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* feat: rename color tokens ([#261](https://github.com/goorm-dev/vapor-ui/pull/261)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* prevent loading font while building CSS ([#265](https://github.com/goorm-dev/vapor-ui/pull/265)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* correct background color of interaction layer in dark mode ([#335](https://github.com/goorm-dev/vapor-ui/pull/335)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Updated Dependencies

* @vapor-ui/icons\@1.0.0-beta.5

## 0.6.0

### Callout

* add flex layout for icons and text alignment ([#181](https://github.com/goorm-dev/vapor-ui/pull/181)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Collapsible

* add new `Collapsible` component ([#197](https://github.com/goorm-dev/vapor-ui/pull/197)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Field

* add new `Field` components ([#224](https://github.com/goorm-dev/vapor-ui/pull/224)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Input Group

* add new `InputGroup` component ([#230](https://github.com/goorm-dev/vapor-ui/pull/230)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Multi Select

* add new `MultiSelect` component ([#225](https://github.com/goorm-dev/vapor-ui/pull/225)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Navigation Menu

* Migrate `Nav` to `NavigationMenu` ([#211](https://github.com/goorm-dev/vapor-ui/pull/211)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Popover

* add new `Popover` component ([#156](https://github.com/goorm-dev/vapor-ui/pull/156)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Select

* add new `Select` component ([#222](https://github.com/goorm-dev/vapor-ui/pull/222)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Sheet

* add new `Sheet` component ([#187](https://github.com/goorm-dev/vapor-ui/pull/187)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* edit spacing style implementation ([#238](https://github.com/goorm-dev/vapor-ui/pull/238)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Tabs

* add new `Tabs` component ([#157](https://github.com/goorm-dev/vapor-ui/pull/157)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Textarea

* Add new `Textarea` component ([#209](https://github.com/goorm-dev/vapor-ui/pull/209)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Tooltip

* eidt tooltip offset ([#212](https://github.com/goorm-dev/vapor-ui/pull/212)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Etc.

* change the overlay component interface ([#195](https://github.com/goorm-dev/vapor-ui/pull/195)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* remove `Label` sub-component from all form elements ([#204](https://github.com/goorm-dev/vapor-ui/pull/204)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* migrate to `Base UI` ([#186](https://github.com/goorm-dev/vapor-ui/pull/186)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* support readonly props in all of form elements ([#208](https://github.com/goorm-dev/vapor-ui/pull/208)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

* fix svg rendering issue on safari ([#237](https://github.com/goorm-dev/vapor-ui/pull/237)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* remove active style when provided readonly ([#246](https://github.com/goorm-dev/vapor-ui/pull/246)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* ensure focus styles take precedence over hover styles ([#200](https://github.com/goorm-dev/vapor-ui/pull/200)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Updated Dependencies

* @vapor-ui/icons\@0.4.0

## 0.5.0

### Avatar

* align CSS variable with build identifiers config ([#176](https://github.com/goorm-dev/vapor-ui/pull/176)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Breadcrumb

* add new `Breadcrumb` component ([#151](https://github.com/goorm-dev/vapor-ui/pull/151)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Button

* add `no-wrap` CSS properties ([#114](https://github.com/goorm-dev/vapor-ui/pull/114)) - Thanks [@jun094](https://github.com/jun094)!

### Menu

* add new `Menu` component ([#147](https://github.com/goorm-dev/vapor-ui/pull/147)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Radio Group

* add background-color(white) to RadioGroup Indicator ([#146](https://github.com/goorm-dev/vapor-ui/pull/146)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Tooltip

* add new `Tooltip` component ([#150](https://github.com/goorm-dev/vapor-ui/pull/150)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Etc.

* enhance vanillaExtractPlugin identifiers ([#161](https://github.com/goorm-dev/vapor-ui/pull/161)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* remove hover state when used touchscreen ([#158](https://github.com/goorm-dev/vapor-ui/pull/158)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* add `VComponentProps` ([#168](https://github.com/goorm-dev/vapor-ui/pull/168)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* add `box-shadow` tokens ([#143](https://github.com/goorm-dev/vapor-ui/pull/143)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* enhance vanillaExtractPlugin identifiers for better debugging ([#149](https://github.com/goorm-dev/vapor-ui/pull/149)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Updated Dependencies

* @vapor-ui/icons\@1.0.0

## 0.4.0

### Badge

* align text to center ([#137](https://github.com/goorm-dev/vapor-ui/pull/137)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Radio Group

* remove incorrectly injected props ([#125](https://github.com/goorm-dev/vapor-ui/pull/125)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Etc.

* change CSS layer names to `theme`, `reset`, `components`, and `utilities` ([#138](https://github.com/goorm-dev/vapor-ui/pull/138)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* add Tailwind CSS v4 preset ([#98](https://github.com/goorm-dev/vapor-ui/pull/98)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* improve DX by overhauling CSS bundling strategy ([#121](https://github.com/goorm-dev/vapor-ui/pull/121)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* add foreground mixin to style entry point ([#142](https://github.com/goorm-dev/vapor-ui/pull/142)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Updated Dependencies

* @vapor-ui/icons\@0.2.0

## 0.3.1

### Theme Provider

* add `primaryColor` props for user custom ([#87](https://github.com/goorm-dev/vapor-ui/pull/87)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

## 0.3.0

### Etc.

* remove sprinkles on each components ([#88](https://github.com/goorm-dev/vapor-ui/pull/88)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* correct CSS layer priority ([#94](https://github.com/goorm-dev/vapor-ui/pull/94)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

## 0.2.1

### Theme Provider

* support RSC ([#82](https://github.com/goorm-dev/vapor-ui/pull/82)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

## 0.2.0

### Callout

* add new `Callout` component ([#67](https://github.com/goorm-dev/vapor-ui/pull/67)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Checkbox

* add new `Checkbox` Component ([#58](https://github.com/goorm-dev/vapor-ui/pull/58)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Dialog

* edit dialog animation style ([#72](https://github.com/goorm-dev/vapor-ui/pull/72)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Radio Group

* add new `RadioGroup` component ([#76](https://github.com/goorm-dev/vapor-ui/pull/76)) - Thanks [@noahchoii](https://github.com/noahchoii)!

### Switch

* add new `Switch` component - Thanks [@noahchoii](https://github.com/noahchoii)!

### Etc.

* remove `@vapor-ui/icons` for resolving storybook build error ([#57](https://github.com/goorm-dev/vapor-ui/pull/57)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* prevent code splitting while tsup build ([#81](https://github.com/goorm-dev/vapor-ui/pull/81)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* resolve circular dependency in vanilla-extract ([#73](https://github.com/goorm-dev/vapor-ui/pull/73)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* optimize build system for component bundling ([#73](https://github.com/goorm-dev/vapor-ui/pull/73)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

## 0.1.0

### Etc.

* create package ([#48](https://github.com/goorm-dev/vapor-ui/pull/48)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!


# Css Generator
URL: /docs/releases/css-generator
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/releases/css-generator.md

@vapor-ui/css-generator 패키지의 릴리즈 노트입니다.

# @vapor-ui/css-generator

## 1.0.0-beta.8

### Tokens

* **BREAKING CHANGE**: rename `color-background-canvas` token to `color-canvas` ([#378](https://github.com/goorm-dev/vapor-ui/pull/378)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

  The canvas background token has been renamed for better semantic clarity and consistency:

  * Token name: `color-background-canvas` → `color-canvas`
  * CSS variable: `--vapor-color-background-canvas` → `--vapor-color-canvas`

  **Migration required:**

  * Update all references from `color-background-canvas` to `color-canvas`
  * Replace CSS variables from `--vapor-color-background-canvas` to `--vapor-color-canvas`

### Updated Dependencies

* @vapor-ui/color-generator\@1.0.0-beta.8

## 1.0.0-beta.7

### Updated Dependencies

* @vapor-ui/color-generator\@1.0.0-beta.7

## 1.0.0-beta.6

### Etc.

* feat: update color generator & color palette ([#337](https://github.com/goorm-dev/vapor-ui/pull/337)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Updated Dependencies

* @vapor-ui/color-generator\@1.0.0-beta.6

## 1.0.0-beta.5

### Theme

* feat(theme): Add ThemeScope component and migrate to data-attribute based theming ([#278](https://github.com/goorm-dev/vapor-ui/pull/278)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Etc.

* feat: create @vapor-ui/color-generator & @vapor-ui/css-generator ([#234](https://github.com/goorm-dev/vapor-ui/pull/234)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

* feat: update color tokens ([#261](https://github.com/goorm-dev/vapor-ui/pull/261)) - Thanks [@ZeroChoi2781](https://github.com/ZeroChoi2781)!

### Updated Dependencies

* @vapor-ui/color-generator\@1.0.0


# ESLint
URL: /docs/releases/eslint-plugin-vapor
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/releases/eslint-plugin-vapor.md

eslint-plugin-vapor 패키지의 릴리즈 노트입니다.

# eslint-plugin-vapor

## 1.1.1

### Typography

* fix the code font family name to `"Fira Code"` and apply it to the `code1` / `code2` typography styles ([#748](https://github.com/goorm-dev/vapor-ui/pull/748)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

## 1.1.0

### Rules

* add new rules related with usage of design-tokens ([#626](https://github.com/goorm-dev/vapor-ui/pull/626)) - Thanks [@noahchoii](https://github.com/noahchoii)!

## 1.0.0

### Eslint Plugin Vapor

* create new `eslint-plugin-vapor` for accessibilities ([#457](https://github.com/goorm-dev/vapor-ui/pull/457)) - Thanks [@noahchoii](https://github.com/noahchoii)!


# Icons
URL: /docs/releases/icons
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/releases/icons.md

@vapor-ui/icons 패키지의 릴리즈 노트입니다.

# @vapor-ui/icons

## 1.3.1

### Icons

* regenerate icon components with the SVGR + svgo pipeline ([#722](https://github.com/goorm-dev/vapor-ui/pull/722)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Etc.

* Update icons from Figma ([#706](https://github.com/goorm-dev/vapor-ui/pull/706)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **Updated Basic Icons:** `TriangleOutlineIcon`

  **Removed:**

  * Basic Icons: `ProgrammingIcon`, `ProgrammingOutlineIcon`

* Update icons from Figma ([#739](https://github.com/goorm-dev/vapor-ui/pull/739)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **Updated Basic Icons:** `FolderNewOutlineIcon`
  **Updated Symbol Icons:** `InstagramIcon`, `InstagramColorIcon`

## 1.3.0

### Icons

* Add new icons from Figma ([#673](https://github.com/goorm-dev/vapor-ui/pull/673)) - Thanks [@noahchoii](https://github.com/noahchoii)!

  **New Basic Icons:** `IdIcon`, `DevicesIcon`

## 1.2.1

### Etc.

* Update icons from Figma ([#608](https://github.com/goorm-dev/vapor-ui/pull/608)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **Updated Basic Icons:** `CopyOutlineIcon`

## 1.2.0

### Etc.

* Add new icons from Figma ([#554](https://github.com/goorm-dev/vapor-ui/pull/554)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **New Basic Icons:** `LicenseIcon`, `RewardedAdsIcon`

## 1.1.0

### Etc.

* Add new icons from Figma ([#539](https://github.com/goorm-dev/vapor-ui/pull/539)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **New Basic Icons:** `TriangleOutlineIcon`

## 1.0.1

### Etc.

* Check the center alignment of the IntelliSenseEventIcon ([#480](https://github.com/goorm-dev/vapor-ui/pull/480)) - Thanks [@noahchoii](https://github.com/noahchoii)!

  **Updated Symbol Icons:** `IntelliSenseEventIcon`, `IntelliSenseEventOutlineIcon`

## 1.0.0

### Etc.

* Sync icons from Figma and remove deleted HeadingOutlineIcon ([#430](https://github.com/goorm-dev/vapor-ui/pull/430)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

* Update icons from Figma ([#449](https://github.com/goorm-dev/vapor-ui/pull/449)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **Updated Symbol Icons:** `VscodeColorIcon`
  **New Symbol Icons:** `SouthKoreaColorIcon`, and 195 other country icons

## 1.0.0-beta.7

### Icon Base

* remove iconType ([#231](https://github.com/goorm-dev/vapor-ui/pull/231)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Etc.

* Update icons from Figma ([#406](https://github.com/goorm-dev/vapor-ui/pull/406)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **Updated Basic Icons:** `Heading2OutlineIcon`, `StrikeOutlineIcon`, `ChecklistOutlineIcon`, `Heading3OutlineIcon`, `Heading4OutlineIcon`, `Heading1OutlineIcon`

## 1.0.0-beta.6

### Etc.

* clone elements & enhance customizability ([#359](https://github.com/goorm-dev/vapor-ui/pull/359)) - Thanks [@noahchoii](https://github.com/noahchoii)!

* Add new icons from Figma ([#396](https://github.com/goorm-dev/vapor-ui/pull/396)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **New:** `ChecklistOutlineIcon`, `StrikeOutlineIcon`, `Heading3OutlineIcon`, `Heading2OutlineIcon`, `Heading1OutlineIcon`, `Heading4OutlineIcon`

## 1.0.0-beta.5

### Etc.

* Add new icons from Figma ([#264](https://github.com/goorm-dev/vapor-ui/pull/264)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **New:** `DocktoBottomIcon`, `SideNavIcon`, `SideNavOutlineIcon`, `DocktoBottomOutlineIcon`

  **Updated:**

  * Basic Icons: `PanelOpenIcon`, `PanelOpenOutlineIcon`

* Update icons from Figma ([#285](https://github.com/goorm-dev/vapor-ui/pull/285)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **Updated:** `TreeCollapseIcon`

## 0.4.0

### Icon Base

* adjust prop precedence for dimensions(width, height, size) ([#182](https://github.com/goorm-dev/vapor-ui/pull/182)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

### Etc.

* Add new icons from Figma ([#207](https://github.com/goorm-dev/vapor-ui/pull/207)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **New:** `MediumIcon`

  **Updated:**

  * Symbol Icons: `FirefoxColorIcon`

* update icons from Figma ([#217](https://github.com/goorm-dev/vapor-ui/pull/217)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **Updated:** `TerminalWindowOutlineIcon`

## 0.3.0

### Etc.

* add new icons from Figma ([#179](https://github.com/goorm-dev/vapor-ui/pull/179)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **New:** `LinearScaleOutlineIcon`

  **Updated:**

  * Basic Icons: `PlayIcon`, `ReplaceIcon`, `ClassIcon`, `ArrowUpOutlineIcon`, `ArrowDownOutlineIcon`, `TerminalOutlineIcon`, `ViewShrinkOutlineIcon`, `FolderSearchIcon`, `StarOutlineIcon`, `PriceOutlineIcon`, `HistoryOutlineIcon`, `CardsOutlineIcon`, `ZoomOutOutlineIcon`, `IntelliSensePropertyOutlineIcon`, `CorrectOutlineIcon`, `ChevronDoubleRightOutlineIcon`, `AutoCodeOutlineIcon`, `ChapterOutlineIcon`
  * Symbol Icons: `RstudioColorIcon`

* add new icons from Figma ([#198](https://github.com/goorm-dev/vapor-ui/pull/198)) - Thanks [@github-actions](https://github.com/apps/github-actions)!

  **New:** `SidenavIcon`

## 0.2.0

### Etc.

* add new icons and update existing icon components ([#119](https://github.com/goorm-dev/vapor-ui/pull/119)) - Thanks [@MaxLee-dev](https://github.com/MaxLee-dev)!

  **New Icons Added**

  * `AlignJustifyOutlineIcon`, `CopyAsMarkdownOutlineIcon`, `IndentDecreaseOutlineIcon`, `SlotIcon`, `TextScanOutlineIcon`

  **Updated**

  * Updated approximately 190 existing icons with refined SVG paths and improved rendering
  * Minor coordinate adjustments for better visual consistency
  * Enhanced clipPath definitions where needed

## 0.1.0

### Minor Changes

* 68b001c: create avatar , badge , box , button , card , dialog , flex , grid , h-stack , icon-button, nav , text-input , text , theme-provider , v-stack


# Composition
URL: /docs/getting-started/composition
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/composition.mdx

기본 props로 해결되지 않을 때, Vapor UI 컴포넌트의 구조를 직접 제어하는 방법을 설명합니다.

기본 props로 해결되지 않을 때 두 가지 방법으로 커스터마이징할 수 있습니다. Primitive는 Vapor UI 컴포넌트의 내부 구조를 이루는 최소 단위 컴포넌트입니다.

* **Primitive가 없는 컴포넌트** (`Button`, `Badge`, `TextInput` 등): `render` prop으로 커스터마이징합니다.
* **Primitive가 있는 컴포넌트** (`Dialog`, `Sheet`, `Tabs` 등): Primitive를 직접 조합해 내부 구조를 제어합니다.

컴포넌트에 Primitive가 있는지 확인하려면 각 컴포넌트 문서의 Props Table에서 `XxxPrimitive` 항목을 찾으세요.

## render prop으로 렌더링 제어하기

`render` prop은 두 가지 형태로 사용할 수 있습니다.

**ReactElement 형태** — HTML 태그나 외부 컴포넌트로 교체할 때 사용합니다.

```tsx
import { Button, Card, Dialog } from '@vapor-ui/core';
import Link from 'next/link';

// div → article로 교체
<Card.Root render={<article />} />

// Next.js Link로 교체
<Button render={<Link href="/home" />}>홈으로</Button>
```

**함수 형태** — 컴포넌트의 내부 state에 따라 렌더링 내용을 동적으로 바꿀 때 사용합니다. 함수는 `(props, state)` 두 인자를 받습니다.

```tsx
import { Switch } from '@vapor-ui/core';
import { DarkIcon, LightIcon } from '@vapor-ui/icons';

export default function Example() {
    return (
        <Switch.Root
            render={(props, state) => (
                <span {...props}>{state.checked ? <DarkIcon /> : <LightIcon />}</span>
            )}
        />
    );
}
```

## Primitive 직접 조합하기

Primitive를 직접 조합하면 Portal 위치, Overlay 렌더링 순서 등 레이어 구조 전체를 제어할 수 있습니다.

```tsx
import { Button, Dialog } from '@vapor-ui/core';

export default function Example() {
    return (
        <Dialog.Root>
            <Dialog.Trigger>열기</Dialog.Trigger>
            <Dialog.PortalPrimitive>
                <Dialog.OverlayPrimitive />
                <Dialog.PopupPrimitive>
                    <Dialog.Header>
                        <Dialog.Title>제목</Dialog.Title>
                    </Dialog.Header>
                    <Dialog.Body>내용</Dialog.Body>
                    <Dialog.Footer>
                        <Dialog.Close render={<Button>닫기</Button>} />
                    </Dialog.Footer>
                </Dialog.PopupPrimitive>
            </Dialog.PortalPrimitive>
        </Dialog.Root>
    );
}
```


# 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 <Button className="my-button">저장</Button>;
}
```

### style

인라인 스타일을 통해 동적인 스타일을 직접 주입합니다.

```tsx
import { Button } from '@vapor-ui/core';

export default function Example() {
    return (
        <Button
            style={{
                background: 'linear-gradient(135deg, #0ea5e9, #0284c7)',
                color: 'white',
            }}
        >
            배포하기
        </Button>
    );
}
```

## 2. `$css` 속성

Vapor UI가 권장하는 기본 방식입니다. 별도의 CSS 파일 없이 컴포넌트에서 직접 스타일을 제어할 수 있습니다.

### 기본 CSS 속성 수정

CSS 속성을 객체 형태로 전달하여 스타일을 수정합니다.

```tsx
import { Button } from '@vapor-ui/core';

export default function Example() {
    return (
        <Button
            $css={{
                borderRadius: '9999px',
                paddingInline: '20px',
                fontWeight: 700,
            }}
        >
            기본 속성 수정
        </Button>
    );
}
```

### 토큰 기반 스타일링

디자인 토큰을 사용해 일관된 스타일을 유지하세요. 타입 지원을 통해 오타를 방지할 수 있습니다.

```tsx
import { Button } from '@vapor-ui/core';

export default function Example() {
    return (
        <Button
            $css={{
                borderRadius: '$300',
                paddingInline: '$300',
                backgroundColor: '$bg-primary-100',
                color: '$fg-normal-100',
            }}
        >
            토큰 기반 스타일
        </Button>
    );
}
```

### 반응형 및 가상 선택자

반응형 조건(breakpoints)과 가상 선택자(`_hover` 등)를 `$css` 안에서 한 번에 정의할 수 있습니다.

```tsx
import { Button } from '@vapor-ui/core';

export default function Example() {
    return (
        <Button
            $css={{
                paddingInline: { default: '$200', md: '$300' },
                backgroundColor: {
                    default: '$bg-primary-100',
                    _hover: '$bg-primary-200',
                },
            }}
        >
            반응형 + 가상 선택자
        </Button>
    );
}
```

## 3. 상태 기반 스타일링

컴포넌트의 상태(checked, invalid 등)에 따라 스타일을 유연하게 변경할 수 있습니다.

### 함수형 className, style

`className`과 `style`에 함수를 전달하여 현재 상태에 맞는 스타일을 동적으로 반환합니다.

```tsx
import { Checkbox } from '@vapor-ui/core';

export default function Example() {
    return (
        <Checkbox.Root
            checked
            className={(state) => (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 (
        <NavigationMenu.Root
            render={(_, state) => (
                <nav className={state.open ? 'nav nav-open' : 'nav'}>네비게이션</nav>
            )}
        />
    );
}
```


# 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의 디자인 토큰에 대해 설명합니다.



# 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 패턴 (빠르고 간편)
<Popover.Root>
    <Popover.Trigger>Trigger</Popover.Trigger>
    <Popover.Popup>Contents</Popover.Popup>
</Popover.Root>

// Primitive 패턴 (완전한 제어)
<Popover.Root>
    <Popover.Trigger>Trigger</Popover.Trigger>
    <Popover.PortalPrimitive>
        <Popover.PositionerPrimitive>
            <Popover.PopupPrimitive>Contents</Popover.PopupPrimitive>
        </Popover.PositionerPrimitive>
    </Popover.PortalPrimitive>
</Popover.Root>
```

이 접근법의 장점은 다음과 같습니다.

* **빠른 시작**: 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 속성과 키보드 처리가 자동으로 포함됨
<Dialog.Root>
    <Dialog.Trigger aria-expanded="true" aria-haspopup="dialog" aria-controls="dialog-popup">
        설정 열기
    </Dialog.Trigger>
    <Dialog.Popup
        id="dialog-popup"
        aria-label="write dialog title"
        aria-description="write dialog description (optional)"
    >
        {/* 포커스 관리와 ESC 키 처리가 내장됨 */}
    </Dialog.Popup>
</Dialog.Root>
```

### Color Generator 시스템

Color Generator는 지각적 색상 모델을 사용하여 접근성을 충족하는 색상 팔레트를 생성합니다.

```tsx
// 색상이 자동으로 대비 요구사항을 충족함
<Badge colorPalette="primary">Primary</Badge>
<Badge colorPalette="success">Success</Badge>
<Badge colorPalette="warning">Warning</Badge>
```

## 3. 일관된 네이밍 규칙

모든 컴포넌트는 일관된 네이밍 규칙을 따릅니다. 이 규칙을 통해 컴포넌트 사용법을 예측할 수 있습니다.

* **독립 컴포넌트**: 단일 이름을 사용합니다.
* **합성 컴포넌트**: Dot Notation 표기법을 사용합니다.

```tsx
// 단일 컴포넌트

<Button>확인</Button>

<Badge>상태</Badge>

// 합성 컴포넌트

<Card.Root>
    <Card.Header>
        <Text typography="heading3">프로젝트 상태</Text>
    </Card.Header>
    <Card.Body>
        <Text typography="body3">현재 개발 진행상황</Text>
    </Card.Body>
    <Card.Footer>
        <Button>저장</Button>
        <Button variant="outline">취소</Button>
    </Card.Footer>
</Card.Root>

<Select.Root placeholder="선택">
    <Select.Trigger />
    <Select.Popup>
        <Select.Item value="section1">섹션 1</Select.Item>
        <Select.Item value="section2">섹션 2</Select.Item>
        <Select.Item value="section3">섹션 3</Select.Item>
    </Select.Popup>
</Select.Root>
```

## 4. 예측 가능한 속성 명명

컴포넌트 속성은 시각적 옵션과 논리적 상태를 기반으로 체계적인 규칙을 따릅니다.

### 시각적 옵션

```tsx
// 크기 변형은 일관된 스케일을 따름
<Button size="sm" />    // 작음
<Button size="md" />    // 보통 (기본값)
<Button size="lg" />    // 큼

// 색상 팔레트는 의미론적 명명 사용
<Badge colorPalette="primary" />
<Badge colorPalette="success" />
<Badge colorPalette="danger" />
```

### 논리적 상태 (동작 기반)

```tsx
// 상태 속성은 일관된 명명 사용
<Button disabled={!isValid} />  // 비활성화 상태

// 변형명은 의미론적 의도를 반영
<Switch.Root checked />   // 선택 상태
<Switch.Root disabled />   // 비활성 상태
<Switch.Root required />   // 필수 상태
<Switch.Root readOnly />  // 읽기 전용 상태
```

## 5. TypeScript 통합

모든 컴포넌트는 TypeScript를 완벽하게 지원합니다. 타입 안전성, IntelliSense 자동 완성, 컴파일 타임 오류 검출을 활용할 수 있습니다.

```tsx
import { Button } from '@vapor-ui/core';

// 완전히 타입화된 컴포넌트 속성
// - colorPalette 자동완성: 'primary' | 'secondary' | 'danger'
// - size 자동완성: 'sm' | 'md' | 'lg'
const CustomButton = ({ colorPalette, size, ...props }: Button.Props) => {
    return <Button colorPalette={colorPalette} size={size} {...props} />;
};

// 타입 안전 이벤트 핸들러
<Button
    onClick={(event) => console.log(event.target)} // event는 MouseEvent로 적절히 타입화됨
/>;
```

## 6. Cascade Layer 아키텍처

Vapor UI는 CSS Cascade Layer를 사용하여 스타일 충돌을 방지합니다.

```css
@layer vapor, components;

/* 커스텀 스타일을 안전하게 확장할 수 있음 */
@layer components {
    .custom-button {
        /* 여기 있는 스타일은 충돌하지 않음 */
    }
}
```


# 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를 자동으로 마이그레이션할 수 있습니다.

## 시작하기 전에

<Callout type="warn">
  `@vapor-ui/core`에서 import한 컴포넌트만 변환됩니다. 다른 라이브러리의 동일한 이름의 컴포넌트는
  변환되지 않습니다.
</Callout>

* **Git 상태 확인**: uncommitted changes가 있으면 실행되지 않습니다. `--force` 옵션으로 우회할 수 있습니다.
* **Dry Run 권장**: `--dry` 옵션으로 변경 사항을 먼저 확인하세요.

***

## 빠른 시작

별도 설치 없이 `npx`로 실행합니다:

```bash
npx @vapor-ui/codemod v1/migrate ./src
```

이 명령어는 아래의 모든 변환을 한 번에 적용합니다.

### 옵션

| 옵션                   | 설명                                       |
| -------------------- | ---------------------------------------- |
| `--dry`              | 변경 사항을 미리보기만 하고 파일에 적용하지 않음              |
| `--force`            | Git 안전 검사를 우회하고 강제 실행                    |
| `--parser <parser>`  | 파서 지정: `babel`, `ts`, `tsx` (기본값: `tsx`) |
| `--extensions <ext>` | 변환할 파일 확장자 (기본값: `tsx,ts,jsx,js`)        |

***

## 변환 목록

### `loop` → `loopFocus`

포커스 루프 동작을 제어하는 prop 이름이 변경됩니다.

**대상 컴포넌트:** `Menu`, `Tabs`

```tsx
// Before
<Menu.Root loop>
  <Menu.Trigger>Open</Menu.Trigger>
  <Menu.Popup>...</Menu.Popup>
</Menu.Root>

// After
<Menu.Root loopFocus>
  <Menu.Trigger>Open</Menu.Trigger>
  <Menu.Popup>...</Menu.Popup>
</Menu.Root>
```

```tsx
// Before
<Tabs.Root loop={false}>
  <Tabs.List>...</Tabs.List>
</Tabs.Root>

// After
<Tabs.Root loopFocus={false}>
  <Tabs.List>...</Tabs.List>
</Tabs.Root>
```

***

### `trackAnchor` → `disableAnchorTracking`

앵커 추적 prop이 부정형으로 변경됩니다. boolean 값이 반전됩니다.

**대상 컴포넌트:** `Popover`, `Menu`, `Tooltip`

```tsx
// Before
<Popover.Positioner trackAnchor>
  <Popover.Popup>Content</Popover.Popup>
</Popover.Positioner>

// After
<Popover.Positioner disableAnchorTracking={false}>
  <Popover.Popup>Content</Popover.Popup>
</Popover.Positioner>
```

```tsx
// Before
<Menu.Positioner trackAnchor={false}>
  <Menu.Popup>...</Menu.Popup>
</Menu.Positioner>

// After
<Menu.Positioner disableAnchorTracking={true}>
  <Menu.Popup>...</Menu.Popup>
</Menu.Positioner>
```

표현식에는 `!` 연산자가 자동으로 추가됩니다:

```tsx
// Before
<Tooltip.Positioner trackAnchor={shouldTrack}>

// After
<Tooltip.Positioner disableAnchorTracking={!shouldTrack}>
```

***

### `hoverable` → `disableHoverablePopup`

Tooltip 팝업의 hover 가능 여부를 제어하는 prop이 부정형으로 변경됩니다. boolean 값이 반전됩니다.

**대상 컴포넌트:** `Tooltip`

```tsx
// Before
<Tooltip.Root hoverable>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Popup>Content</Tooltip.Popup>
</Tooltip.Root>

// After
<Tooltip.Root disableHoverablePopup={false}>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Popup>Content</Tooltip.Popup>
</Tooltip.Root>
```

```tsx
// Before
<Tooltip.Root hoverable={false}>

// After
<Tooltip.Root disableHoverablePopup={true}>
```

***

### 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
<Menu.Root openOnHover delay={200} closeDelay={100}>
  <Menu.Trigger>Open</Menu.Trigger>
  <Menu.Popup>...</Menu.Popup>
</Menu.Root>

// After
<Menu.Root>
  <Menu.Trigger openOnHover delay={200} closeDelay={100}>Open</Menu.Trigger>
  <Menu.Popup>...</Menu.Popup>
</Menu.Root>
```

**Popover:**

```tsx
// Before
<Popover.Root openOnHover delay={300}>
  <Popover.Trigger>Hover</Popover.Trigger>
  <Popover.Popup>Content</Popover.Popup>
</Popover.Root>

// After
<Popover.Root>
  <Popover.Trigger openOnHover delay={300}>Hover</Popover.Trigger>
  <Popover.Popup>Content</Popover.Popup>
</Popover.Root>
```

**Tooltip:**

```tsx
// Before
<Tooltip.Root delay={500} closeDelay={100}>
  <Tooltip.Trigger>Hover</Tooltip.Trigger>
  <Tooltip.Popup>Content</Tooltip.Popup>
</Tooltip.Root>

// After
<Tooltip.Root>
  <Tooltip.Trigger delay={500} closeDelay={100}>Hover</Tooltip.Trigger>
  <Tooltip.Popup>Content</Tooltip.Popup>
</Tooltip.Root>
```

***

### `onClearErrors` 제거

`Form.Root`에서 `onClearErrors` prop이 제거됩니다. v1에서는 `errors` prop으로 전달한 에러가 필드 값 변경 시 자동으로 클리어됩니다.

**대상 컴포넌트:** `Form`

```tsx
// Before
<Form.Root
  errors={errors}
  onClearErrors={(clearedErrors) => {
    setErrors((prev) => {
      const next = { ...prev };
      Object.keys(clearedErrors).forEach((name) => delete next[name]);
      return next;
    });
  }}
>
  <input name="email" />
</Form.Root>

// After
<Form.Root errors={errors}>
  <input name="email" />
</Form.Root>
```

***

### `selected` → `current`

현재 선택된 링크를 나타내는 prop 이름이 Breadcrumb API와 일관성을 맞추기 위해 변경됩니다.

**대상 컴포넌트:** `NavigationMenu`

```tsx
// Before
<NavigationMenu.Link selected>Home</NavigationMenu.Link>

// After
<NavigationMenu.Link current>Home</NavigationMenu.Link>
```

```tsx
// Before
<NavigationMenu.Link selected={isActive}>Dashboard</NavigationMenu.Link>

// After
<NavigationMenu.Link current={isActive}>Dashboard</NavigationMenu.Link>
```

***

## 고급 사용법

### 여러 변환이 적용되는 경우

```tsx
// Before
import { Menu, Tooltip } from '@vapor-ui/core';

function App() {
  return (
    <>
      <Menu.Root openOnHover delay={200} closeDelay={100} loop>
        <Menu.Trigger>Menu</Menu.Trigger>
        <Menu.Positioner trackAnchor>
          <Menu.Popup>
            <Menu.Item>Item 1</Menu.Item>
            <Menu.Item>Item 2</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Root>

      <Tooltip.Root hoverable delay={500} closeDelay={100}>
        <Tooltip.Trigger>Hover me</Tooltip.Trigger>
        <Tooltip.Popup>Tooltip content</Tooltip.Popup>
      </Tooltip.Root>
    </>
  );
}

// After
import { Menu, Tooltip } from '@vapor-ui/core';

function App() {
  return (
    <>
      <Menu.Root loopFocus>
        <Menu.Trigger openOnHover delay={200} closeDelay={100}>Menu</Menu.Trigger>
        <Menu.Positioner disableAnchorTracking={false}>
          <Menu.Popup>
            <Menu.Item>Item 1</Menu.Item>
            <Menu.Item>Item 2</Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Root>

      <Tooltip.Root disableHoverablePopup={false}>
        <Tooltip.Trigger delay={500} closeDelay={100}>Hover me</Tooltip.Trigger>
        <Tooltip.Popup>Tooltip content</Tooltip.Popup>
      </Tooltip.Root>
    </>
  );
}
```

### Alias import 처리

alias로 import한 컴포넌트도 올바르게 변환됩니다:

```tsx
// Before
import { Menu as VaporMenu } from '@vapor-ui/core';

<VaporMenu.Root loop>
  <VaporMenu.Trigger>Open</VaporMenu.Trigger>
</VaporMenu.Root>

// After
<VaporMenu.Root loopFocus>
  <VaporMenu.Trigger>Open</VaporMenu.Trigger>
</VaporMenu.Root>
```

***

## 수동 마이그레이션

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);
}
```

<Callout type="info">
  CSS 선택자는 컴포넌트 import와 무관하게 사용되므로 codemod로 자동 변환할 수 없습니다.
  `data-selected`를 검색하여 직접 수정하세요.
</Callout>


# 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
// ❌
<IconButton>
  <CloseIcon />
</IconButton>

// ✅
<IconButton aria-label="닫기">
  <CloseIcon />
</IconButton>
```

### navigation-has-aria-label

`NavigationMenu.Root`와 `Breadcrumb.Root` 컴포넌트에 `aria-label` 속성이 있는지 검사합니다.

```tsx
// ❌
<NavigationMenu.Root>
  <NavigationMenu.List>...</NavigationMenu.List>
</NavigationMenu.Root>

<Breadcrumb.Root>
  <Breadcrumb.List>...</Breadcrumb.List>
</Breadcrumb.Root>

// ✅
<NavigationMenu.Root aria-label="Main">
  <NavigationMenu.List>...</NavigationMenu.List>
</NavigationMenu.Root>

<Breadcrumb.Root aria-label="Page Path">
  <Breadcrumb.List>...</Breadcrumb.List>
</Breadcrumb.Root>
```

### alt-text-on-avatar

`Avatar` 컴포넌트를 이미지로 사용할 때, `src`와 `alt` 속성이 있는지 검사합니다.

```tsx
// ❌
<Avatar src="user-profile.jpg" />

// ✅
<Avatar src="user-profile.jpg" alt="사용자 프로필 사진" />
```

### should-have-title-on-dialog

`Dialog` 컴포넌트에 `Dialog.Title`, 혹은 `aria-label` 속성이 포함되어 있는지 검사합니다.

```tsx
// ❌
<Dialog>
  <Dialog.Content>...</Dialog.Content>
</Dialog>

// ✅
<Dialog>
  <Dialog.Title>정보 입력</Dialog.Title>
  <Dialog.Content>...</Dialog.Content>
</Dialog>

// 또는
<Dialog>
  <Dialog.Content aria-label="정보 입력">
    ...
  </Dialog.Content>
</Dialog>
```


# 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)


# 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상에 나타냅니다.

<Demo name="components/(components)/avatar/demos/default-avatar">
  ```tsx
  import { Avatar } from '@vapor-ui/core';

  import { VAPOR_LOGO_URL } from '~/constants/image-urls';

  export default function DefaultAvatar() {
      return <Avatar.Root alt="Vapor" src={VAPOR_LOGO_URL} />;
  }

  ```
</Demo>

## Property

***

### Shape

Avatar의 모양을 설정합니다.

<Demo name="components/(components)/avatar/demos/avatar-shape">
  ```tsx
  import { Avatar, HStack, Text, VStack } from '@vapor-ui/core';

  import { VAPOR_LOGO_URL } from '~/constants/image-urls';

  export default function AvatarShape() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-14" typography="body3" foreground="hint-100">
                      square
                  </Text>
                  <Avatar.Root shape="square" alt="Vapor" src={VAPOR_LOGO_URL} />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-14" typography="body3" foreground="hint-100">
                      circle
                  </Text>
                  <Avatar.Root shape="circle" alt="Vapor" src={VAPOR_LOGO_URL} />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Size

Avatar의 크기를 설정합니다.

<Demo name="components/(components)/avatar/demos/avatar-size">
  ```tsx
  import { Avatar, HStack, Text, VStack } from '@vapor-ui/core';

  import { VAPOR_LOGO_URL } from '~/constants/image-urls';

  export default function AvatarSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <Avatar.Root size="sm" alt="Vapor" src={VAPOR_LOGO_URL} />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <Avatar.Root size="md" alt="Vapor" src={VAPOR_LOGO_URL} />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <Avatar.Root size="lg" alt="Vapor" src={VAPOR_LOGO_URL} />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <Avatar.Root size="xl" alt="Vapor" src={VAPOR_LOGO_URL} />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### Fallback

이미지가 없거나 로드에 실패한 경우, alt 텍스트의 첫 글자가 자동으로 표시됩니다. 배경색은 alt 문자열을 기반으로 결정됩니다.

<Demo name="components/(components)/avatar/demos/avatar-fallback">
  ```tsx
  import { Avatar, HStack } from '@vapor-ui/core';

  export default function AvatarFallback() {
      return (
          <HStack $css={{ gap: '$150', alignItems: 'center' }}>
              <Avatar.Root alt="John Doe" />
              <Avatar.Root alt="Alice Kim" />
              <Avatar.Root alt="Mike Park" />
          </HStack>
      );
  }

  ```
</Demo>

### Custom Fallback

FallbackPrimitive에 children을 전달하여 커스텀 fallback 콘텐츠를 표시합니다.

<Demo name="components/(components)/avatar/demos/avatar-custom-fallback">
  ```tsx
  import { Avatar, HStack, Text, VStack } from '@vapor-ui/core';

  export default function AvatarCustomFallback() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-28" typography="body3" foreground="hint-100">
                      auto initial
                  </Text>
                  <Avatar.Root alt="John Doe">
                      <Avatar.FallbackPrimitive />
                  </Avatar.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-28" typography="body3" foreground="hint-100">
                      custom text
                  </Text>
                  <Avatar.Root alt="John Doe">
                      <Avatar.FallbackPrimitive>JD</Avatar.FallbackPrimitive>
                  </Avatar.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Custom Image

`children`으로 `Avatar.ImagePrimitive`와 `Avatar.FallbackPrimitive`를 전달하면 각 슬롯에 직접 props를 적용할 수 있습니다. `src`, `alt`, `crossOrigin` 등 이미지 관련 props는 `Avatar.Root`에 전달하면 내부 Primitive로 자동 전달됩니다.

<Demo name="components/(components)/avatar/demos/avatar-custom-image">
  ```tsx
  import { Avatar, HStack, Text, VStack } from '@vapor-ui/core';

  const IMAGE_URL = 'https://avatars.githubusercontent.com/u/217160984?v=4';

  export default function AvatarCustomImage() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-40" typography="body3" foreground="hint-100">
                      ImagePrimitive
                  </Text>
                  <Avatar.Root src={IMAGE_URL} alt="User" crossOrigin="anonymous">
                      <Avatar.ImagePrimitive className="my-image" />
                      <Avatar.FallbackPrimitive />
                  </Avatar.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-40" typography="body3" foreground="hint-100">
                      FallbackPrimitive
                  </Text>
                  <Avatar.Root alt="User">
                      <Avatar.ImagePrimitive />
                      <Avatar.FallbackPrimitive>JD</Avatar.FallbackPrimitive>
                  </Avatar.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## 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<br />returns a class based on the component's state.                                                                                                 |
| `fallbackElement`       | `ReactElement<AvatarFallbackPrimitive.Props>` | -        | Replaces the default `Avatar.FallbackPrimitive`. Ignored when `children` are given.                                                                                                                       |
| `imageElement`          | `ReactElement<AvatarImagePrimitive.Props>`    | -        | Replaces the default `Avatar.ImagePrimitive`. Ignored when `children` are given.                                                                                                                          |
| `style`                 | `React.CSSProperties`, `function`             | -        | Style applied to the element, or a function that<br />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.<br />Supports `loading="lazy"` and optimized image components such as `next/image`.                                |
| `render`                | `ReactElement`, `function`                    | -        | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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는 이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다.

<Demo name="components/(components)/badge/demos/default-badge">
  ```tsx
  import { Badge } from '@vapor-ui/core';

  export default function DefaultBadge() {
      return <Badge>New</Badge>;
  }

  ```
</Demo>

## Property

***

### ColorPalette

Badge의 색상을 설정합니다.

<Demo name="components/(components)/badge/demos/badge-color">
  ```tsx
  import { Badge, HStack, Text, VStack } from '@vapor-ui/core';

  export default function BadgeColor() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      primary
                  </Text>
                  <Badge colorPalette="primary">New</Badge>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      hint
                  </Text>
                  <Badge colorPalette="hint">New</Badge>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      danger
                  </Text>
                  <Badge colorPalette="danger">New</Badge>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      success
                  </Text>
                  <Badge colorPalette="success">New</Badge>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      warning
                  </Text>
                  <Badge colorPalette="warning">New</Badge>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      contrast
                  </Text>
                  <Badge colorPalette="contrast">New</Badge>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Shape

Badge의 모양을 설정합니다.

<Demo name="components/(components)/badge/demos/badge-shape">
  ```tsx
  import { Badge, HStack, Text, VStack } from '@vapor-ui/core';

  export default function BadgeShape() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-12" typography="body3" foreground="hint-100">
                      square
                  </Text>
                  <Badge shape="square">New</Badge>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-12" typography="body3" foreground="hint-100">
                      pill
                  </Text>
                  <Badge shape="pill">New</Badge>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Size

Badge의 크기를 설정합니다.

<Demo name="components/(components)/badge/demos/badge-size">
  ```tsx
  import { Badge, HStack, Text, VStack } from '@vapor-ui/core';

  export default function BadgeSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <Badge size="sm">New</Badge>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <Badge size="md">New</Badge>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <Badge size="lg">New</Badge>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## 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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function`                             | -         | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`       | `ReactElement`, `function`                                    | -         | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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

사용자가 현재 페이지의 위치를 파악하고 이전 페이지로 쉽게 이동할 수 있도록 도와주는 네비게이션 컴포넌트입니다.

<Demo name="components/(components)/breadcrumb/demos/default-breadcrumb">
  ```tsx
  import { Breadcrumb } from '@vapor-ui/core';

  export default function DefaultBreadcrumb() {
      return (
          <Breadcrumb.Root>
              <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
              <Breadcrumb.Separator />
              <Breadcrumb.Item href="#">Products</Breadcrumb.Item>
              <Breadcrumb.Separator />
              <Breadcrumb.Item href="#" current>
                  Details
              </Breadcrumb.Item>
          </Breadcrumb.Root>
      );
  }

  ```
</Demo>

## Examples

***

### With Ellipsis

긴 네비게이션 경로에서 중간 단계를 생략 표시로 나타낸 패턴입니다.

<Demo name="components/(components)/breadcrumb/demos/breadcrumb-ellipsis">
  ```tsx
  import { Breadcrumb } from '@vapor-ui/core';

  export default function BreadcrumbEllipsis() {
      return (
          <Breadcrumb.Root size="md">
              <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
              <Breadcrumb.Separator />
              <Breadcrumb.Item href="#">Category</Breadcrumb.Item>
              <Breadcrumb.Separator />
              <Breadcrumb.Ellipsis />
              <Breadcrumb.Separator />
              <Breadcrumb.Item href="#">Subcategory</Breadcrumb.Item>
              <Breadcrumb.Separator />
              <Breadcrumb.Item href="#" current>
                  Current Page
              </Breadcrumb.Item>
          </Breadcrumb.Root>
      );
  }

  ```
</Demo>

### Composition Pattern

Breadcrumb 컴포넌트의 다양한 구성 패턴입니다.

<Demo name="components/(components)/breadcrumb/demos/breadcrumb-composition">
  ```tsx
  import { Breadcrumb, Text, VStack } from '@vapor-ui/core';
  import { ChevronRightOutlineIcon, HomeIcon } from '@vapor-ui/icons';

  export default function BreadcrumbComposition() {
      return (
          <VStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      Basic
                  </Text>
                  <Breadcrumb.Root>
                      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#">Products</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item current>Details</Breadcrumb.Item>
                  </Breadcrumb.Root>
              </VStack>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      Custom Separator
                  </Text>
                  <Breadcrumb.Root>
                      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
                      <Breadcrumb.Separator>
                          <ChevronRightOutlineIcon />
                      </Breadcrumb.Separator>
                      <Breadcrumb.Item href="#">Products</Breadcrumb.Item>
                      <Breadcrumb.Separator>
                          <ChevronRightOutlineIcon />
                      </Breadcrumb.Separator>
                      <Breadcrumb.Item current>Details</Breadcrumb.Item>
                  </Breadcrumb.Root>
              </VStack>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      With Icon
                  </Text>
                  <Breadcrumb.Root>
                      <Breadcrumb.Item href="#" className="flex items-center gap-1">
                          <HomeIcon className="size-4" />
                          Home
                      </Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#">Dashboard</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item current>Settings</Breadcrumb.Item>
                  </Breadcrumb.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

## Property

***

### Current

현재 페이지를 나타내는 링크의 상태를 설정할 수 있습니다.

<Demo name="components/(components)/breadcrumb/demos/breadcrumb-current">
  ```tsx
  import { Breadcrumb, Text, VStack } from '@vapor-ui/core';

  export default function BreadcrumbCurrent() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      Normal Links
                  </Text>
                  <Breadcrumb.Root>
                      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#">Products</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#">Details</Breadcrumb.Item>
                  </Breadcrumb.Root>
              </VStack>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      With Current Page
                  </Text>
                  <Breadcrumb.Root>
                      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#">Products</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#" current>
                          Details
                      </Breadcrumb.Item>
                  </Breadcrumb.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### Size

Breadcrumb의 크기를 설정합니다.

<Demo name="components/(components)/breadcrumb/demos/breadcrumb-size">
  ```tsx
  import { Breadcrumb, HStack, Text, VStack } from '@vapor-ui/core';

  export default function BreadcrumbSize() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <Breadcrumb.Root size="sm">
                      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#">Products</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#" current>
                          Details
                      </Breadcrumb.Item>
                  </Breadcrumb.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <Breadcrumb.Root size="md">
                      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#">Products</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#" current>
                          Details
                      </Breadcrumb.Item>
                  </Breadcrumb.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <Breadcrumb.Root size="lg">
                      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#">Products</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#" current>
                          Details
                      </Breadcrumb.Item>
                  </Breadcrumb.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <Breadcrumb.Root size="xl">
                      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#">Products</Breadcrumb.Item>
                      <Breadcrumb.Separator />
                      <Breadcrumb.Item href="#" current>
                          Details
                      </Breadcrumb.Item>
                  </Breadcrumb.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## 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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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 `&lt;a&gt;` element.                                                           |
| `className` | `string`, `function`              | -       | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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 `&lt;a&gt;` element.                                                           |
| `className` | `string`, `function`              | -       | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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은 중요한 정보를 시각적으로 강조하여 사용자에게 전달하는 메시지 컴포넌트입니다.

<Demo name="components/(components)/callout/demos/default-callout">
  ```tsx
  import { Callout } from '@vapor-ui/core';
  import { InfoCircleOutlineIcon } from '@vapor-ui/icons';

  export default function DefaultCallout() {
      return (
          <Callout.Root>
              <Callout.Icon>
                  <InfoCircleOutlineIcon />
              </Callout.Icon>
              Your changes have been saved successfully.
          </Callout.Root>
      );
  }

  ```
</Demo>

## Examples

***

### Callout with Icon

Callout의 역할을 직관적으로 표현하기 위해 아이콘과 함께 사용합니다.

<Demo name="components/(components)/callout/demos/callout-with-icon">
  ```tsx
  import { Callout, VStack } from '@vapor-ui/core';
  import { CheckCircleIcon, HeartIcon, InfoCircleOutlineIcon } from '@vapor-ui/icons';

  export default function CalloutWithIcon() {
      return (
          <VStack $css={{ gap: '$100' }} className="w-full max-w-xl">
              <Callout.Root colorPalette="success">
                  <Callout.Icon>
                      <CheckCircleIcon />
                  </Callout.Icon>
                  Task completed successfully
              </Callout.Root>
              <Callout.Root colorPalette="warning">
                  <Callout.Icon>
                      <InfoCircleOutlineIcon />
                  </Callout.Icon>
                  Please review your settings
              </Callout.Root>
              <Callout.Root colorPalette="primary">
                  <Callout.Icon>
                      <HeartIcon />
                  </Callout.Icon>
                  New notification available
              </Callout.Root>
          </VStack>
      );
  }

  ```
</Demo>

## Property

***

### ColorPalette

Callout의 역할에 따른 색상을 설정합니다.

<Demo name="components/(components)/callout/demos/callout-color">
  ```tsx
  import { Callout, Text, VStack } from '@vapor-ui/core';

  export default function CalloutColor() {
      return (
          <VStack $css={{ gap: '$150' }} className="w-full max-w-xl">
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      primary
                  </Text>
                  <Callout.Root colorPalette="primary">
                      Your changes have been saved successfully.
                  </Callout.Root>
              </VStack>
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      success
                  </Text>
                  <Callout.Root colorPalette="success">
                      Your changes have been saved successfully.
                  </Callout.Root>
              </VStack>
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      warning
                  </Text>
                  <Callout.Root colorPalette="warning">
                      Your changes have been saved successfully.
                  </Callout.Root>
              </VStack>
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      danger
                  </Text>
                  <Callout.Root colorPalette="danger">
                      Your changes have been saved successfully.
                  </Callout.Root>
              </VStack>
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      hint
                  </Text>
                  <Callout.Root colorPalette="hint">
                      Your changes have been saved successfully.
                  </Callout.Root>
              </VStack>
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      contrast
                  </Text>
                  <Callout.Root colorPalette="contrast">
                      Your changes have been saved successfully.
                  </Callout.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

## 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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function`                             | -         | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`       | `ReactElement`, `function`                                    | -         | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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는 이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다.

<Demo name="components/(components)/card/demos/default-card">
  ```tsx
  import { Button, Card, HStack, Text, VStack } from '@vapor-ui/core';

  export default function DefaultCard() {
      return (
          <Card.Root $css={{ width: '320px' }}>
              <Card.Header>
                  <Text render={<h3 />} typography="heading5">
                      Project Settings
                  </Text>
              </Card.Header>
              <Card.Body>
                  <VStack $css={{ gap: '$100' }}>
                      <Text typography="body2">Configure your project settings and preferences.</Text>
                  </VStack>
              </Card.Body>
              <Card.Footer>
                  <HStack $css={{ gap: '$100', justifyContent: 'flex-end' }}>
                      <Button variant="ghost">Cancel</Button>
                      <Button>Save</Button>
                  </HStack>
              </Card.Footer>
          </Card.Root>
      );
  }

  ```
</Demo>

## Examples

***

### Layout

상황에 따라, 일부 영역을 생략하여 Card를 구성할 수 있습니다.

<Demo name="components/(components)/card/demos/card-layout">
  ```tsx
  import { Card, HStack, Text, VStack } from '@vapor-ui/core';

  export default function CardLayout() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      Body only
                  </Text>
                  <Card.Root $css={{ width: '280px' }}>
                      <Card.Body>
                          <Text typography="body2">A simple card with content only.</Text>
                      </Card.Body>
                  </Card.Root>
              </VStack>

              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      Body + Footer
                  </Text>
                  <Card.Root $css={{ width: '280px' }}>
                      <Card.Body>
                          <Text typography="body2">Card content goes here.</Text>
                      </Card.Body>
                      <Card.Footer>
                          <HStack $css={{ justifyContent: 'flex-end' }}>
                              <Text typography="body3" foreground="hint-100">
                                  Updated 2 hours ago
                              </Text>
                          </HStack>
                      </Card.Footer>
                  </Card.Root>
              </VStack>

              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      Header + Body
                  </Text>
                  <Card.Root $css={{ width: '280px' }}>
                      <Card.Header>
                          <Text render={<h4 />} typography="heading6">
                              Notifications
                          </Text>
                      </Card.Header>
                      <Card.Body>
                          <Text typography="body2">You have 3 unread messages.</Text>
                      </Card.Body>
                  </Card.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

## Props Table

***

### Card.Root

| Prop        | Type                              | Default | Description                                                                                                                                                                                               |
| ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `function`              | -       | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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는 여러 항목 중 복수 선택을 가능하게 하는 입력 컴포넌트입니다.

<Demo name="components/(components)/checkbox/demos/default-checkbox">
  ```tsx
  import { Checkbox, HStack, Text } from '@vapor-ui/core';

  export default function DefaultCheckbox() {
      return (
          <Text render={<label />} typography="body2">
              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                  <Checkbox.Root defaultChecked />I agree to the terms and conditions
              </HStack>
          </Text>
      );
  }

  ```
</Demo>

## Property

***

### Indeterminate

Checkbox의 혼합 상태 여부를 설정합니다.

<Demo name="components/(components)/checkbox/demos/checkbox-indeterminate">
  ```tsx
  import { Checkbox, HStack, Text, VStack } from '@vapor-ui/core';

  export default function CheckboxIndeterminate() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-32" typography="body3" foreground="hint-100">
                      unchecked
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Checkbox.Root />
                          Select all
                      </HStack>
                  </Text>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-32" typography="body3" foreground="hint-100">
                      indeterminate
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Checkbox.Root indeterminate />
                          Select all
                      </HStack>
                  </Text>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-32" typography="body3" foreground="hint-100">
                      checked
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Checkbox.Root checked />
                          Select all
                      </HStack>
                  </Text>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

Checkbox의 비활성화 상태를 설정합니다.

<Demo name="components/(components)/checkbox/demos/checkbox-disabled">
  ```tsx
  import { Checkbox, HStack, Text, VStack } from '@vapor-ui/core';

  export default function CheckboxDisabled() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-32" typography="body3" foreground="hint-100">
                      disabled
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Checkbox.Root disabled />
                          Remember me
                      </HStack>
                  </Text>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-32" typography="body3" foreground="hint-100">
                      disabled checked
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Checkbox.Root disabled checked />
                          Remember me
                      </HStack>
                  </Text>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Invalid

Checkbox의 유효하지 않음 상태를 설정합니다.

<Demo name="components/(components)/checkbox/demos/checkbox-invalid">
  ```tsx
  import { Checkbox, HStack, Text, VStack } from '@vapor-ui/core';

  export default function CheckboxInvalid() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-32" typography="body3" foreground="hint-100">
                      invalid
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Checkbox.Root invalid />
                          Accept terms
                      </HStack>
                  </Text>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-32" typography="body3" foreground="hint-100">
                      invalid checked
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Checkbox.Root invalid checked />
                          Accept terms
                      </HStack>
                  </Text>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Read Only

Checkbox의 읽기 전용 상태를 설정합니다.

<Demo name="components/(components)/checkbox/demos/checkbox-readonly">
  ```tsx
  import { Checkbox, HStack, Text, VStack } from '@vapor-ui/core';

  export default function CheckboxReadOnly() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-32" typography="body3" foreground="hint-100">
                      unchecked
                  </Text>
                  <Checkbox.Root readOnly />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-32" typography="body3" foreground="hint-100">
                      checked
                  </Text>
                  <Checkbox.Root readOnly defaultChecked />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-32" typography="body3" foreground="hint-100">
                      indeterminate
                  </Text>
                  <Checkbox.Root readOnly indeterminate />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Size

Checkbox의 크기를 설정합니다.

<Demo name="components/(components)/checkbox/demos/checkbox-size">
  ```tsx
  import { Checkbox, HStack, Text, VStack } from '@vapor-ui/core';

  export default function CheckboxSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-12" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Checkbox.Root size="md" />
                          Remember me
                      </HStack>
                  </Text>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-12" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Checkbox.Root size="lg" />
                          Remember me
                      </HStack>
                  </Text>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Props Table

***

### Checkbox.Root

| Prop              | Type                              | Default | Description                                                                                                                                                                                                                                                       |
| ----------------- | --------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `invalid`         | `boolean`                         | `false` | Marks the checkbox as invalid, applying error styles. Sets `aria-invalid` on the `&lt;span&gt;` 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.<br /><br />To render an uncontrolled checkbox, use the `defaultChecked` prop instead.                                                                                                                                   |
| `defaultChecked`  | `boolean`                         | `false` | Whether the checkbox is initially ticked.<br /><br />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.<br />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<br />returns a class based on the component's state.                                                                                                                                                         |
| `style`           | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br />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<HTMLInputElement>`     | -       | A ref to access the hidden `&lt;input&gt;` element.                                                                                                                                                                                                               |
| `name`            | `string`                          | -       | Identifies the field when a form is submitted.                                                                                                                                                                                                                    |
| `nativeButton`    | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `true` if the rendered element is a native button.                                                                                      |
| `parent`          | `boolean`                         | `false` | Whether the checkbox controls a group of child checkboxes.<br /><br />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.<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                               |
| `style`       | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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은 콘텐츠를 접었다 펼칠 수 있는 대화형 컴포넌트입니다. 아코디언이나 확장 가능한 섹션을 구현할 때 사용합니다.

<Demo name="components/(components)/collapsible/demos/default-collapsible">
  ```tsx
  import { Collapsible, Text, VStack } from '@vapor-ui/core';
  import { ChevronRightOutlineIcon } from '@vapor-ui/icons';

  export default function DefaultCollapsible() {
      return (
          <Collapsible.Root defaultOpen className="w-64">
              <Collapsible.Trigger className="group flex w-full items-center gap-2 rounded-md bg-v-blue-100 px-3 py-2 text-sm font-medium text-v-gray-900 hover:bg-v-blue-200 focus-visible:outline-2 focus-visible:outline-v-blue-600 active:bg-v-blue-200">
                  <ChevronRightOutlineIcon className="size-3 transition-transform ease-out group-data-[panel-open]:rotate-90" />
                  Settings
              </Collapsible.Trigger>
              <Collapsible.Panel>
                  <VStack
                      $css={{
                          gap: '$050',
                          backgroundColor: '$basic-blue-050',
                          paddingBlock: '$150',
                          paddingLeft: '$300',
                          marginTop: '$050',
                      }}
                      className="rounded-md"
                  >
                      <Text foreground="normal-200">Account</Text>
                      <Text foreground="normal-200">Notifications</Text>
                      <Text foreground="normal-200">Privacy</Text>
                  </VStack>
              </Collapsible.Panel>
          </Collapsible.Root>
      );
  }

  ```
</Demo>

## Property

***

### Open State

`defaultOpen`으로 초기 열림 상태를 설정하거나, `open`과 `onOpenChange`로 제어 모드로 사용합니다.

<Demo name="components/(components)/collapsible/demos/collapsible-open-state">
  ```tsx
  import { useState } from 'react';

  import { Button, Collapsible, HStack, Text, VStack } from '@vapor-ui/core';

  export default function CollapsibleOpenState() {
      const [open, setOpen] = useState(true);

      return (
          <HStack $css={{ gap: '$400', alignItems: 'flex-start' }}>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      defaultOpen
                  </Text>
                  <Collapsible.Root defaultOpen className="w-56">
                      <Collapsible.Trigger className="w-full rounded-md bg-v-gray-100 px-3 py-2 text-sm font-medium hover:bg-v-gray-200">
                          FAQ Section
                      </Collapsible.Trigger>
                      <Collapsible.Panel>
                          <Text
                              typography="body3"
                              foreground="hint-100"
                              className="mt-2 rounded-md bg-v-gray-50 p-3"
                          >
                              This panel starts open and manages its own state.
                          </Text>
                      </Collapsible.Panel>
                  </Collapsible.Root>
              </VStack>

              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      controlled
                  </Text>
                  <Collapsible.Root open={open} onOpenChange={setOpen} className="w-56">
                      <Collapsible.Trigger className="w-full rounded-md bg-v-blue-100 px-3 py-2 text-sm font-medium hover:bg-v-blue-200">
                          Release Notes
                      </Collapsible.Trigger>
                      <Collapsible.Panel>
                          <Text
                              typography="body3"
                              foreground="hint-100"
                              className="mt-2 rounded-md bg-v-blue-50 p-3"
                          >
                              This panel is controlled externally via state.
                          </Text>
                      </Collapsible.Panel>
                      <HStack $css={{ gap: '$100', marginTop: '$150' }}>
                          <Button size="sm" onClick={() => setOpen(true)}>
                              Open
                          </Button>
                          <Button size="sm" variant="outline" onClick={() => setOpen(false)}>
                              Close
                          </Button>
                      </HStack>
                  </Collapsible.Root>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

### Disabled

Collapsible의 비활성화 상태를 설정합니다.

<Demo name="components/(components)/collapsible/demos/collapsible-disabled">
  ```tsx
  import { Collapsible, Text, VStack } from '@vapor-ui/core';
  import { ChevronRightOutlineIcon } from '@vapor-ui/icons';

  export default function CollapsibleDisabled() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      enabled
                  </Text>
                  <Collapsible.Root className="w-64">
                      <Collapsible.Trigger className="group flex w-full items-center gap-2 rounded-md bg-v-gray-100 px-3 py-2 text-sm font-medium hover:bg-v-gray-200">
                          <ChevronRightOutlineIcon className="size-3 transition-transform ease-out group-data-[panel-open]:rotate-90" />
                          Advanced Options
                      </Collapsible.Trigger>
                      <Collapsible.Panel>
                          <Text
                              typography="body3"
                              foreground="hint-100"
                              className="mt-2 rounded-md bg-v-gray-50 p-3"
                          >
                              Configure advanced settings for your project.
                          </Text>
                      </Collapsible.Panel>
                  </Collapsible.Root>
              </VStack>

              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      disabled
                  </Text>
                  <Collapsible.Root disabled className="w-64">
                      <Collapsible.Trigger className="group flex w-full items-center gap-2 rounded-md bg-v-gray-100 px-3 py-2 text-sm font-medium opacity-50">
                          <ChevronRightOutlineIcon className="size-3 transition-transform ease-out group-data-[panel-open]:rotate-90" />
                          Advanced Options
                      </Collapsible.Trigger>
                      <Collapsible.Panel>
                          <Text
                              typography="body3"
                              foreground="hint-100"
                              className="mt-2 rounded-md bg-v-gray-50 p-3"
                          >
                              Configure advanced settings for your project.
                          </Text>
                      </Collapsible.Panel>
                  </Collapsible.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### Keep Mounted

`keepMounted`를 사용하면 패널이 닫힌 상태에서도 DOM에 유지됩니다.

<Demo name="components/(components)/collapsible/demos/collapsible-keep-mounted">
  ```tsx
  import { Collapsible, HStack, Text, VStack } from '@vapor-ui/core';
  import { ChevronRightOutlineIcon } from '@vapor-ui/icons';

  export default function CollapsibleKeepMounted() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'flex-start' }}>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      default
                  </Text>
                  <Collapsible.Root className="w-56">
                      <Collapsible.Trigger className="group flex w-full items-center gap-2 rounded-md bg-v-gray-100 px-3 py-2 text-sm font-medium hover:bg-v-gray-200">
                          <ChevronRightOutlineIcon className="size-3 transition-transform ease-out group-data-[panel-open]:rotate-90" />
                          Help Section
                      </Collapsible.Trigger>
                      <Collapsible.Panel>
                          <Text
                              typography="body3"
                              foreground="hint-100"
                              className="mt-2 rounded-md bg-v-gray-50 p-3"
                          >
                              Removed from DOM when closed.
                          </Text>
                      </Collapsible.Panel>
                  </Collapsible.Root>
              </VStack>

              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      keepMounted
                  </Text>
                  <Collapsible.Root className="w-56">
                      <Collapsible.Trigger className="group flex w-full items-center gap-2 rounded-md bg-v-blue-100 px-3 py-2 text-sm font-medium hover:bg-v-blue-200">
                          <ChevronRightOutlineIcon className="size-3 transition-transform ease-out group-data-[panel-open]:rotate-90" />
                          Help Section
                      </Collapsible.Trigger>
                      <Collapsible.Panel keepMounted>
                          <Text
                              typography="body3"
                              foreground="hint-100"
                              className="mt-2 rounded-md bg-v-blue-50 p-3"
                          >
                              Stays in DOM when closed.
                          </Text>
                      </Collapsible.Panel>
                  </Collapsible.Root>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

## Props Table

***

### Collapsible.Root

| Prop           | Type                              | Default | Description                                                                                                                                                                                               |
| -------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultOpen`  | `boolean`                         | `false` | Whether the collapsible panel is initially open.<br /><br />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.<br /><br />To render an uncontrolled collapsible, use the `defaultOpen` prop instead.                                                                    |
| `className`    | `string`, `function`              | -       | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `nativeButton` | `boolean`                         | `true`  | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                               |
| `style`            | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br /><br />Overrides the `keepMounted` prop and uses `hidden="until-found"`<br />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.<br />This prop is ignored when `hiddenUntilFound` is used.                                                                                            |
| `render`           | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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은 사용자가 주요 작업을 수행하도록 돕는 핵심 상호작용 요소입니다.

<Demo name="components/(components)/button/demos/default-button">
  ```tsx
  import { Button } from '@vapor-ui/core';

  export default function DefaultButton() {
      return <Button>Save</Button>;
  }

  ```
</Demo>

## Property

***

### Variant

Button의 시각적 스타일을 설정합니다.

<Demo name="components/(components)/button/demos/button-variant">
  ```tsx
  import { Button, HStack, Text, VStack } from '@vapor-ui/core';

  export default function ButtonVariant() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      fill
                  </Text>
                  <Button variant="fill">Save</Button>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      outline
                  </Text>
                  <Button variant="outline">Save</Button>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      ghost
                  </Text>
                  <Button variant="ghost">Save</Button>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### ColorPalette

Button의 역할에 따른 색상을 설정합니다.

<Demo name="components/(components)/button/demos/button-color">
  ```tsx
  import { Button, HStack, Text, VStack } from '@vapor-ui/core';

  export default function ButtonColor() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      primary
                  </Text>
                  <Button colorPalette="primary">Save</Button>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      secondary
                  </Text>
                  <Button colorPalette="secondary">Save</Button>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      success
                  </Text>
                  <Button colorPalette="success">Save</Button>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      warning
                  </Text>
                  <Button colorPalette="warning">Save</Button>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      danger
                  </Text>
                  <Button colorPalette="danger">Save</Button>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      contrast
                  </Text>
                  <Button colorPalette="contrast">Save</Button>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

Button의 비활성화 상태를 설정합니다.

<Demo name="components/(components)/button/demos/button-disabled">
  ```tsx
  import { Button, HStack, Text, VStack } from '@vapor-ui/core';

  export default function ButtonDisabled() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      enabled
                  </Text>
                  <Button>Save</Button>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      disabled
                  </Text>
                  <Button disabled>Save</Button>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Size

Button의 크기를 설정합니다.

<Demo name="components/(components)/button/demos/button-size">
  ```tsx
  import { Button, HStack, Text, VStack } from '@vapor-ui/core';

  export default function ButtonSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <Button size="sm">Save</Button>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <Button size="md">Save</Button>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <Button size="lg">Save</Button>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <Button size="xl">Save</Button>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### Button with Icon

Button의 역할을 직관적으로 표현하기 위해 아이콘과 함께 사용합니다.

<Demo name="components/(components)/button/demos/button-with-icon">
  ```tsx
  import { Button, HStack } from '@vapor-ui/core';
  import { CheckCircleIcon, ChevronRightOutlineIcon } from '@vapor-ui/icons';

  export default function ButtonWithIcon() {
      return (
          <HStack $css={{ gap: '$100' }}>
              <Button>
                  <CheckCircleIcon />
                  Complete
              </Button>
              <Button variant="outline">
                  Next
                  <ChevronRightOutlineIcon />
              </Button>
          </HStack>
      );
  }

  ```
</Demo>

## 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<br />returns a class based on the component's state.                                                                                                 |
| `style`                 | `React.CSSProperties`, `function`                                  | -         | Style applied to the element, or a function that<br />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 `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`                | `ReactElement`, `function`                                         | -         | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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는 페이지 위에 모달 형태로 정보를 표시하거나 작업을 수행하도록 하는 컴포넌트입니다.

<Demo name="components/(components)/dialog/demos/default-dialog">
  ```tsx
  import { Button, Dialog } from '@vapor-ui/core';

  export default function DefaultDialog() {
      return (
          <Dialog.Root>
              <Dialog.Trigger render={<Button />}>클릭</Dialog.Trigger>
              <Dialog.Popup>
                  <Dialog.Header>
                      <Dialog.Title>알림</Dialog.Title>
                  </Dialog.Header>
                  <Dialog.Body>
                      <Dialog.Description>
                          여기에 다이얼로그 본문 내용이 들어갑니다.
                      </Dialog.Description>
                  </Dialog.Body>
                  <Dialog.Footer style={{ marginLeft: 'auto' }}>
                      <Dialog.Close render={<Button colorPalette="primary">확인</Button>} />
                  </Dialog.Footer>
              </Dialog.Popup>
          </Dialog.Root>
      );
  }

  ```
</Demo>

## Property

***

### Size

Dialog의 크기를 설정합니다.

<Demo name="components/(components)/dialog/demos/dialog-size">
  ```tsx
  import { Button, Dialog, HStack, Text, VStack } from '@vapor-ui/core';

  export default function DialogSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <Dialog.Root size="md">
                      <Dialog.Trigger render={<Button>Medium Dialog</Button>} />
                      <Dialog.Popup>
                          <Dialog.Header>
                              <Dialog.Title>Medium Size</Dialog.Title>
                          </Dialog.Header>
                          <Dialog.Body>
                              <Dialog.Description>Medium 크기의 다이얼로그입니다.</Dialog.Description>
                          </Dialog.Body>
                          <Dialog.Footer>
                              <Dialog.Close render={<Button variant="ghost">취소</Button>} />
                              <Dialog.Close render={<Button>확인</Button>} />
                          </Dialog.Footer>
                      </Dialog.Popup>
                  </Dialog.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <Dialog.Root size="lg">
                      <Dialog.Trigger render={<Button>Large Dialog</Button>} />
                      <Dialog.Popup>
                          <Dialog.Header>
                              <Dialog.Title>Large Size</Dialog.Title>
                          </Dialog.Header>
                          <Dialog.Body>
                              <Dialog.Description>Large 크기의 다이얼로그입니다.</Dialog.Description>
                          </Dialog.Body>
                          <Dialog.Footer>
                              <Dialog.Close render={<Button variant="ghost">취소</Button>} />
                              <Dialog.Close render={<Button>확인</Button>} />
                          </Dialog.Footer>
                      </Dialog.Popup>
                  </Dialog.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <Dialog.Root size="xl">
                      <Dialog.Trigger render={<Button>Extra Large Dialog</Button>} />
                      <Dialog.Popup>
                          <Dialog.Header>
                              <Dialog.Title>Extra Large Size</Dialog.Title>
                          </Dialog.Header>
                          <Dialog.Body>
                              <Dialog.Description>
                                  Extra Large 크기의 다이얼로그입니다.
                              </Dialog.Description>
                          </Dialog.Body>
                          <Dialog.Footer>
                              <Dialog.Close render={<Button variant="ghost">취소</Button>} />
                              <Dialog.Close render={<Button>확인</Button>} />
                          </Dialog.Footer>
                      </Dialog.Popup>
                  </Dialog.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Modal Behavior

Dialog의 모달 동작을 설정합니다.

<Demo name="components/(components)/dialog/demos/dialog-modal">
  ```tsx
  import { Button, Dialog, HStack, Text, VStack } from '@vapor-ui/core';

  export default function DialogModal() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      modal
                  </Text>
                  <Dialog.Root modal={true}>
                      <Dialog.Trigger render={<Button>Modal Dialog</Button>} />
                      <Dialog.Popup>
                          <Dialog.Header>
                              <Dialog.Title>Modal Dialog</Dialog.Title>
                          </Dialog.Header>
                          <Dialog.Body>
                              <Dialog.Description>
                                  포커스가 다이얼로그 내부에 제한됩니다.
                              </Dialog.Description>
                          </Dialog.Body>
                          <Dialog.Footer>
                              <Dialog.Close render={<Button>확인</Button>} />
                          </Dialog.Footer>
                      </Dialog.Popup>
                  </Dialog.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      non-modal
                  </Text>
                  <Dialog.Root modal={false}>
                      <Dialog.Trigger render={<Button>Non-Modal Dialog</Button>} />
                      <Dialog.Popup>
                          <Dialog.Header>
                              <Dialog.Title>Non-Modal Dialog</Dialog.Title>
                          </Dialog.Header>
                          <Dialog.Body>
                              <Dialog.Description>
                                  배경의 다른 요소들과 상호작용할 수 있습니다.
                              </Dialog.Description>
                          </Dialog.Body>
                          <Dialog.Footer>
                              <Dialog.Close render={<Button>확인</Button>} />
                          </Dialog.Footer>
                      </Dialog.Popup>
                  </Dialog.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### Custom Usage

Dialog 컴포넌트의 다양한 구성 패턴입니다.

<Demo name="components/(components)/dialog/demos/dialog-flexible">
  ```tsx
  import { Button, Dialog } from '@vapor-ui/core';

  export default function Flexible() {
      return (
          <Dialog.Root size="lg" closeOnClickOverlay={false}>
              <Dialog.Trigger render={<Button variant="outline">확인 다이얼로그</Button>} />
              <Dialog.PortalPrimitive>
                  <Dialog.OverlayPrimitive />
                  <Dialog.PopupPrimitive>
                      <Dialog.Header>
                          <Dialog.Title>작업 확인</Dialog.Title>
                      </Dialog.Header>
                      <Dialog.Body>
                          <Dialog.Description>
                              이 작업을 진행하시겠습니까? 이 작업은 되돌릴 수 없습니다.
                          </Dialog.Description>
                      </Dialog.Body>
                      <Dialog.Footer>
                          <Dialog.Close render={<Button variant="ghost">취소</Button>} />
                          <Dialog.Close render={<Button colorPalette="danger">삭제</Button>} />
                      </Dialog.Footer>
                  </Dialog.PopupPrimitive>
              </Dialog.PortalPrimitive>
          </Dialog.Root>
      );
  }

  ```
</Demo>

### Custom Overlay

`Dialog.PortalPrimitive`, `Dialog.OverlayPrimitive`, `Dialog.PopupPrimitive`를 직접 조합하면 오버레이 스타일 등 레이어 구조를 제어할 수 있습니다.

<Demo name="components/(components)/dialog/demos/dialog-custom-overlay">
  ```tsx
  import { Button, Dialog } from '@vapor-ui/core';

  export default function DialogCustomOverlay() {
      return (
          <Dialog.Root>
              <Dialog.Trigger render={<Button variant="outline">열기</Button>} />
              <Dialog.PortalPrimitive>
                  <Dialog.OverlayPrimitive style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }} />
                  <Dialog.PopupPrimitive>
                      <Dialog.Header>
                          <Dialog.Title>커스텀 오버레이</Dialog.Title>
                      </Dialog.Header>
                      <Dialog.Body>
                          <Dialog.Description>
                              Primitive를 직접 조합해 오버레이의 스타일을 제어한 예시입니다.
                          </Dialog.Description>
                      </Dialog.Body>
                      <Dialog.Footer>
                          <Dialog.Close render={<Button colorPalette="contrast">닫기</Button>} />
                      </Dialog.Footer>
                  </Dialog.PopupPrimitive>
              </Dialog.PortalPrimitive>
          </Dialog.Root>
      );
  }

  ```
</Demo>

## 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.<br /><br />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<Dialog.Root.Actions \| null>` | -       | A ref to imperative actions.<br />- `unmount`: Ends the closing phase of the dialog after an externally controlled closing animation finishes.<br />Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the dialog completes closing on its own.<br />Whether it leaves the DOM is decided by `keepMounted` on the portal.<br />- `close`: Closes the dialog imperatively when called.                                                                                                                                                                                                                                         |
| `children`             | `ReactNode`, `function`                        | -       | The content of the dialog.<br />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.<br />This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `handle`               | `DialogHandle<unknown>`                        | -       | A handle to associate the dialog with a trigger.<br />If specified, allows external triggers to control the dialog's open state.<br />Can be created with the Dialog.createHandle() method.                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `modal`                | `boolean`, `trap-focus`                        | `true`  | Determines if the dialog enters a modal state when open.<br />- `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.<br />- `false`: user interaction with the rest of the document is allowed.<br />- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.<br /><br />When `modal` is `true` or `'trap-focus'`, render `&lt;Dialog.Close&gt;` inside `&lt;Dialog.Popup&gt;` so<br />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.<br />This is useful in conjunction with the `open` prop to create a controlled dialog.<br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `overlayElement` | `ReactElement<DialogOverlayPrimitive.Props>`                  | -       | Replaces the default `Dialog.OverlayPrimitive`. Use to change the backdrop.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `portalElement`  | `ReactElement<DialogPortalPrimitive.Props>`                   | -       | Replaces the default `Dialog.PortalPrimitive`. Use to change the portal container.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `style`          | `React.CSSProperties`, `function`                             | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `finalFocus`     | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the dialog is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the dialog is opened.<br />By default, focus moves to the first tabbable element inside the popup, except when the dialog<br />is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (first tabbable element or popup).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function`                                                         | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `container`   | `HTMLElement`, `ShadowRoot`, `React.RefObject<HTMLElement \| ShadowRoot \| null>`, `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `style`        | `React.CSSProperties`, `function`                             | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `finalFocus`   | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the dialog is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the dialog is opened.<br />By default, focus moves to the first tabbable element inside the popup, except when the dialog<br />is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (first tabbable element or popup).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `handle`       | `DialogHandle<unknown>`           | -       | A handle to associate the trigger with a dialog.<br />Can be created with the Dialog.createHandle() method.                                                                                               |
| `id`           | `string`                          | -       | ID of the trigger. In addition to being forwarded to the rendered element,<br />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 `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `nativeButton` | `boolean`                         | `true`  | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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는 폼 요소들을 감싸는 컨테이너 컴포넌트로, 라벨, 설명, 에러 메시지, 성공 메시지 등을 제공합니다.

<Demo name="components/(components)/field/demos/default-field">
  ```tsx
  'use client';

  import { Field, TextInput } from '@vapor-ui/core';

  export default function DefaultField() {
      return (
          <Field.Root name="email" className="w-72">
              <Field.Label $css={{ gap: '$050', flexDirection: 'column' }}>
                  Email
                  <TextInput type="email" placeholder="you@example.com" />
              </Field.Label>
              <Field.Description>We'll never share your email.</Field.Description>
          </Field.Root>
      );
  }

  ```
</Demo>

## Examples

***

### With Description

Field에 대한 추가 설명을 표시합니다.

<Demo name="components/(components)/field/demos/field-description">
  ```tsx
  'use client';

  import { Field, TextInput, VStack } from '@vapor-ui/core';

  export default function FieldDescription() {
      return (
          <VStack className="w-72" $css={{ gap: '$300' }}>
              <Field.Root name="username">
                  <Field.Label className="flex flex-col gap-1">
                      Username
                      <TextInput placeholder="johndoe" />
                  </Field.Label>
              </Field.Root>

              <Field.Root name="username-with-desc">
                  <Field.Label className="flex flex-col gap-1">
                      Username
                      <TextInput placeholder="johndoe" />
                  </Field.Label>
                  <Field.Description>This will be your public display name.</Field.Description>
              </Field.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Error and Success

`Field.Error`와 `Field.Success`를 사용하여 유효성 검사 결과를 표시합니다.

<Demo name="components/(components)/field/demos/field-error">
  ```tsx
  'use client';

  import { Field, TextInput, VStack } from '@vapor-ui/core';

  export default function FieldError() {
      return (
          <VStack className="w-72" $css={{ gap: '$300' }}>
              <Field.Root name="email-error" invalid>
                  <Field.Label className="flex flex-col gap-1">
                      Email
                      <TextInput type="email" placeholder="you@example.com" />
                  </Field.Label>
                  <Field.Error match>Please enter a valid email address.</Field.Error>
              </Field.Root>

              <Field.Root name="email-success">
                  <Field.Label className="flex flex-col gap-1">
                      Email
                      <TextInput
                          type="email"
                          placeholder="you@example.com"
                          defaultValue="john@example.com"
                      />
                  </Field.Label>
                  <Field.Success>Email is valid.</Field.Success>
              </Field.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Required

필수 Field와 선택 Field를 구분하여 표시합니다.

<Demo name="components/(components)/field/demos/field-required">
  ```tsx
  'use client';

  import { Field, Text, TextInput, VStack } from '@vapor-ui/core';

  export default function FieldRequired() {
      return (
          <VStack $css={{ gap: '$200', width: '300px' }}>
              <Field.Root name="required-field" validationMode="onChange">
                  <Field.Label $css={{ flexDirection: 'column' }}>
                      <Text typography="subtitle2" foreground="secondary-100">
                          필수 입력 필드
                          <Field.RequiredSymbol />
                      </Text>
                      <TextInput required placeholder="필수 입력 항목입니다" />
                  </Field.Label>
                  <Field.Description>
                      이 필드는 반드시 입력해야 하는 필수 항목입니다.
                  </Field.Description>
                  <Field.Error match="valueMissing">이 필드는 필수 입력 항목입니다.</Field.Error>
                  <Field.Success>입력이 완료되었습니다.</Field.Success>
              </Field.Root>

              {/* Optional Field */}
              <Field.Root name="optional-field">
                  <Field.Label $css={{ flexDirection: 'column' }}>
                      <Text typography="subtitle2" foreground="secondary-100">
                          선택 입력 필드{' '}
                          <Text foreground="hint-100" typography="subtitle2">
                              (선택사항)
                          </Text>
                      </Text>
                      <TextInput placeholder="선택적으로 입력하세요" />
                      <Field.RequiredSymbol />
                  </Field.Label>
                  <Field.Description>이 필드는 선택적으로 입력할 수 있습니다.</Field.Description>
              </Field.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

disabled 속성을 사용하여 비활성화된 Field를 만들 수 있습니다.

<Demo name="components/(components)/field/demos/field-disabled">
  ```tsx
  'use client';

  import { Field, Text, TextInput, VStack } from '@vapor-ui/core';

  export default function FieldDisabled() {
      return (
          <VStack className="w-72" $css={{ gap: '$200' }}>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      enabled
                  </Text>
                  <Field.Root name="email">
                      <Field.Label className="flex flex-col gap-1">
                          Email
                          <TextInput placeholder="you@example.com" />
                      </Field.Label>
                      <Field.Description>Enter your email address.</Field.Description>
                  </Field.Root>
              </VStack>

              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      disabled
                  </Text>
                  <Field.Root name="email-disabled" disabled>
                      <Field.Label className="flex flex-col gap-1">
                          Email
                          <TextInput placeholder="you@example.com" />
                      </Field.Label>
                      <Field.Description>Enter your email address.</Field.Description>
                  </Field.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### With RadioGroup

RadioGroup과 Field를 함께 사용합니다. `Field.Item`을 사용하여 각 Radio 옵션을 라벨과 함께 그룹화할 수 있습니다.

<Demo name="components/(components)/field/demos/field-radio-group">
  ```tsx
  'use client';

  import { Field, Radio, RadioGroup, VStack } from '@vapor-ui/core';

  export default function FieldRadioGroup() {
      return (
          <Field.Root name="gender">
              <VStack $css={{ gap: '$300' }}>
                  <RadioGroup.Root>
                      <VStack $css={{ gap: '$100' }}>
                          <RadioGroup.Label>성별</RadioGroup.Label>
                          <VStack $css={{ gap: '$050' }}>
                              <Field.Item $css={{ alignItems: 'center' }}>
                                  <Radio.Root value="male" />
                                  <Field.Label>남성</Field.Label>
                              </Field.Item>

                              <Field.Item $css={{ alignItems: 'center' }}>
                                  <Radio.Root value="female" />
                                  <Field.Label>여성</Field.Label>
                              </Field.Item>

                              <Field.Item $css={{ alignItems: 'center' }}>
                                  <Radio.Root value="other" />
                                  <Field.Label>기타</Field.Label>
                              </Field.Item>
                          </VStack>
                      </VStack>
                  </RadioGroup.Root>

                  <Field.Description>개인정보 보호를 위해 선택사항입니다.</Field.Description>
              </VStack>
          </Field.Root>
      );
  }

  ```
</Demo>

### With Form Elements

TextInput, Checkbox, Switch, Select 등 다양한 폼 요소와 함께 사용합니다.

<Demo name="components/(components)/field/demos/field-with-inputs">
  ```tsx
  'use client';

  import { Checkbox, Field, Select, Switch, TextInput, VStack } from '@vapor-ui/core';

  export default function FieldWithInputs() {
      return (
          <VStack className="w-72" $css={{ gap: '$300' }}>
              <Field.Root name="email">
                  <Field.Label $css={{ flexDirection: 'column', gap: '$050' }}>
                      Email
                      <TextInput type="email" placeholder="you@example.com" />
                  </Field.Label>
                  <Field.Description>Your primary contact email.</Field.Description>
              </Field.Root>

              <Field.Root name="newsletter">
                  <Field.Label $css={{ flexDirection: 'row', gap: '$100', alignItems: 'center' }}>
                      <Checkbox.Root />
                      Subscribe to newsletter
                  </Field.Label>
                  <Field.Description>Get the latest updates in your inbox.</Field.Description>
              </Field.Root>

              <Field.Root name="notifications">
                  <Field.Label $css={{ flexDirection: 'row', gap: '$100', alignItems: 'center' }}>
                      <Switch.Root />
                      Push notifications
                  </Field.Label>
                  <Field.Description>Receive alerts on your device.</Field.Description>
              </Field.Root>

              <Field.Root name="country">
                  <Select.Root placeholder="국가를 선택하세요" items={countries}>
                      <Field.Label $css={{ flexDirection: 'column', gap: '$050' }}>
                          국가
                          <Select.Trigger />
                      </Field.Label>
                      <Select.Popup>
                          {countries.map((country) => (
                              <Select.Item key={country.value} value={country.value}>
                                  {country.label}
                              </Select.Item>
                          ))}
                      </Select.Popup>
                  </Select.Root>
                  <Field.Description>Select your country of residence.</Field.Description>
              </Field.Root>
          </VStack>
      );
  }

  const countries = [
      { label: '대한민국', value: 'kr' },
      { label: '미국', value: 'us' },
      { label: '일본', value: 'jp' },
      { label: '중국', value: 'cn' },
  ];

  ```
</Demo>

## Property

***

### Validation

`validationMode`를 통해 유효성 검사 타이밍을 설정합니다. `match` prop으로 특정 에러 타입에 대한 메시지를 표시합니다.

<Demo name="components/(components)/field/demos/field-validation">
  ```tsx
  'use client';

  import { Field, TextInput, VStack } from '@vapor-ui/core';

  export default function FieldValidation() {
      return (
          <VStack className="w-72" $css={{ gap: '$300' }}>
              <Field.Root name="email" validationMode="onBlur">
                  <Field.Label className="flex flex-col gap-1">
                      Email
                      <TextInput type="email" required placeholder="you@example.com" />
                  </Field.Label>
                  <Field.Description>Validated when you leave the field.</Field.Description>
                  <Field.Error match="valueMissing">Email is required.</Field.Error>
                  <Field.Error match="typeMismatch">Please enter a valid email.</Field.Error>
                  <Field.Success>Email looks good.</Field.Success>
              </Field.Root>

              <Field.Root name="password" validationMode="onChange">
                  <Field.Label className="flex flex-col gap-1">
                      Password
                      <TextInput
                          type="password"
                          required
                          minLength={8}
                          placeholder="Enter password"
                      />
                  </Field.Label>
                  <Field.Description>Validated as you type. Minimum 8 characters.</Field.Description>
                  <Field.Error match="valueMissing">Password is required.</Field.Error>
                  <Field.Error match="tooShort">Password must be at least 8 characters.</Field.Error>
                  <Field.Success>Password is strong.</Field.Success>
              </Field.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

Field의 비활성화 상태를 설정합니다.

<Demo name="components/(components)/field/demos/field-disabled">
  ```tsx
  'use client';

  import { Field, Text, TextInput, VStack } from '@vapor-ui/core';

  export default function FieldDisabled() {
      return (
          <VStack className="w-72" $css={{ gap: '$200' }}>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      enabled
                  </Text>
                  <Field.Root name="email">
                      <Field.Label className="flex flex-col gap-1">
                          Email
                          <TextInput placeholder="you@example.com" />
                      </Field.Label>
                      <Field.Description>Enter your email address.</Field.Description>
                  </Field.Root>
              </VStack>

              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      disabled
                  </Text>
                  <Field.Root name="email-disabled" disabled>
                      <Field.Label className="flex flex-col gap-1">
                          Email
                          <TextInput placeholder="you@example.com" />
                      </Field.Label>
                      <Field.Description>Enter your email address.</Field.Description>
                  </Field.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

## Props Table

***

### Field.Root

| Prop                     | Type                                          | Default    | Description                                                                                                                                                                                                                                                                                                                                                                                       |
| ------------------------ | --------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`              | `string`, `function`                          | -          | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                         |
| `style`                  | `React.CSSProperties`, `function`             | -          | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                      |
| `actionsRef`             | `React.RefObject<Field.Root.Actions \| null>` | -          | A ref to imperative actions.<br />- `validate`: Validates the field when called.                                                                                                                                                                                                                                                                                                                  |
| `dirty`                  | `boolean`                                     | -          | Whether the field's value has been changed from its initial value.<br />Useful when the field state is controlled by an external library.                                                                                                                                                                                                                                                         |
| `disabled`               | `boolean`                                     | `false`    | Whether the component should ignore user interaction.<br />Takes precedence over the `disabled` prop on the `&lt;Field.Control&gt;` component.                                                                                                                                                                                                                                                    |
| `invalid`                | `boolean`                                     | -          | Whether the field is invalid.<br />Useful when the field state is controlled by an external library.                                                                                                                                                                                                                                                                                              |
| `name`                   | `string`                                      | -          | Identifies the field when a form is submitted.<br />Takes precedence over the `name` prop on the `&lt;Field.Control&gt;` component.                                                                                                                                                                                                                                                               |
| `touched`                | `boolean`                                     | -          | Whether the field has been touched.<br />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<br />the error message(s) if the value is invalid. Returning nothing, `null`, an empty<br />string, or an empty array means the value is valid.<br />Asynchronous functions are supported, but they do not prevent form submission<br />when using `validationMode="onSubmit"`.                                     |
| `validationDebounceTime` | `number`                                      | `0`        | How long to wait between `validate` callbacks if<br />`validationMode="onChange"` is used. Specified in milliseconds.                                                                                                                                                                                                                                                                             |
| `validationMode`         | `onBlur`, `onChange`, `onSubmit`              | `onSubmit` | Determines when the field should be validated.<br />This takes precedence over the `validationMode` prop on `&lt;Form&gt;`.<br /><br />- `onSubmit`: triggers validation when the form is submitted, and re-validates on change after submission.<br />- `onBlur`: triggers validation when the control loses focus.<br />- `onChange`: triggers validation on every change to the control value. |
| `render`                 | `ReactElement`, `function`                    | -          | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                       |
| `style`       | `React.CSSProperties`, `function`                                                                                                                                                                                                                                                                                                                                                                                                                         | -           | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                    |
| `nativeLabel` | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `true`      | Whether the component renders a native `&lt;label&gt;` element when replacing it via the `render` prop.<br />Set to `false` if the rendered element is not a label (for example, `&lt;div&gt;`).<br /><br />This is useful to avoid inheriting label behaviors on `&lt;button&gt;` controls (such as `&lt;Select.Trigger&gt;` and `&lt;Combobox.Trigger&gt;`), 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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />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<br />returns a style object based on the component's state.                                                                                                                                                                                                            |
| `render`    | `ReactElement`, `function`                                                                                                                                        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />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<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `disabled`  | `boolean`                         | `false` | Whether the wrapped control should ignore user interaction.<br />The `disabled` prop on `&lt;Field.Root&gt;` takes precedence over this.                                                                  |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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는 하단에 고정되어 주요 액션을 포함하는 컴포넌트입니다.

<Demo name="components/(components)/floating-bar/demos/default-floating-bar">
  ```tsx
  import { FloatingBar } from '@vapor-ui/core';

  export default function DefaultFloatingBar() {
      return (
          <FloatingBar.Root>
              <FloatingBar.Trigger>Open Floating Bar</FloatingBar.Trigger>
              <FloatingBar.Popup>This is the floating bar content.</FloatingBar.Popup>
          </FloatingBar.Root>
      );
  }

  ```
</Demo>

## Examples

***

### Actions

FloatingBar는 다양한 액션 요소를 담을 수 있습니다.

<Demo name="components/(components)/floating-bar/demos/floating-bar-with-actions">
  ```tsx
  import { Box, Button, FloatingBar } from '@vapor-ui/core';

  export default function FloatingBarWithActions() {
      return (
          <FloatingBar.Root>
              <FloatingBar.Trigger render={<Button />}>Open FloatingBar</FloatingBar.Trigger>
              <FloatingBar.Popup>
                  <Button colorPalette="primary">Select All</Button>
                  <Box
                      $css={{
                          width: '1px',
                          backgroundColor: '$basic-gray-300',
                          alignSelf: 'stretch',
                      }}
                  />
                  <Button colorPalette="danger">Delete</Button>
              </FloatingBar.Popup>
          </FloatingBar.Root>
      );
  }

  ```
</Demo>

### Controlled

FloatingBar는 제어 형태로 사용되어, 여러 상태를 동시에 관리할 수 있습니다.

<Demo name="components/(components)/floating-bar/demos/floating-bar-controlled">
  ```tsx
  import { useState } from 'react';

  import {
      Badge,
      Box,
      Button,
      Checkbox,
      Field,
      FloatingBar,
      IconButton,
      Text,
      VStack,
  } from '@vapor-ui/core';
  import { CloseOutlineIcon } from '@vapor-ui/icons';

  const options = [
      { id: 'item1', label: 'First Item', defaultChecked: false },
      { id: 'item2', label: 'Second Item', defaultChecked: false },
      { id: 'item3', label: 'Third Item', defaultChecked: false },
  ];

  export default function FloatingBarControlled() {
      const [selectedItems, setSelectedItems] = useState(() =>
          Object.fromEntries(options.map((option) => [option.id, option.defaultChecked])),
      );

      const selectedCount = Object.values(selectedItems).filter(Boolean).length;
      const [open, setOpen] = useState(selectedCount > 0);

      const handleItemChange = (itemId: string, isChecked: boolean) => {
          setSelectedItems((prev) => {
              const newSelectedItems = { ...prev, [itemId]: isChecked };
              const newSelectedCount = Object.values(newSelectedItems).filter(Boolean).length;
              setOpen(newSelectedCount > 0);

              return newSelectedItems;
          });
      };

      const handleSelectAll = () => {
          setSelectedItems(Object.fromEntries(options.map((option) => [option.id, true])));
          setOpen(true);
      };

      const handleClearAll = () => {
          setSelectedItems(Object.fromEntries(options.map((option) => [option.id, false])));
          setOpen(false);
      };

      return (
          <>
              <Text render={<div />} $css={{ marginBottom: '$200' }}>
                  Select options below to see the FloatingBar.
              </Text>

              <VStack $css={{ justifyContent: 'center' }}>
                  {options.map((option) => (
                      <Field.Root
                          key={option.id}
                          $css={{
                              display: 'flex',
                              flexDirection: 'row',
                              alignItems: 'center',
                              gap: '$100',
                          }}
                      >
                          <Checkbox.Root
                              checked={selectedItems[option.id]}
                              onCheckedChange={(checked) => handleItemChange(option.id, checked)}
                          />
                          <Field.Label>{option.label}</Field.Label>
                      </Field.Root>
                  ))}
              </VStack>

              <FloatingBar.Root open={open} onOpenChange={setOpen}>
                  <FloatingBar.Popup>
                      <Badge colorPalette="primary">{selectedCount} Selected</Badge>

                      <Box
                          $css={{
                              width: '1px',
                              backgroundColor: '$basic-gray-300',
                              alignSelf: 'stretch',
                          }}
                      />

                      <Button colorPalette="primary" onClick={handleSelectAll}>
                          Select All
                      </Button>
                      <Button colorPalette="danger" onClick={handleClearAll}>
                          Delete
                      </Button>

                      <FloatingBar.Close
                          render={
                              <IconButton
                                  aria-label="close floating-bar"
                                  variant="ghost"
                                  colorPalette="secondary"
                              />
                          }
                      >
                          <CloseOutlineIcon />
                      </FloatingBar.Close>
                  </FloatingBar.Popup>
              </FloatingBar.Root>
          </>
      );
  }

  ```
</Demo>

## Props Table

***

### FloatingBar.Root

| Prop                   | Type                                                | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ---------------------- | --------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultOpen`          | `boolean`                                           | `false` | Whether the popover is initially open.<br /><br />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<FloatingBar.Root.Actions \| null>` | -       | A ref to imperative actions.<br />- `unmount`: Ends the closing phase of the popover after an externally controlled closing animation finishes.<br />Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the popover completes closing on its own.<br />Whether it leaves the DOM is decided by `keepMounted` on the portal.<br />- `close`: Closes the popover imperatively when called.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `children`             | `ReactNode`, `function`                             | -       | The content of the popover.<br />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.<br />This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `handle`               | `PopoverHandle<unknown>`                            | -       | A handle to associate the popover with a trigger.<br />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.<br />- `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled.<br />- `false`: user interaction with the rest of the document is allowed.<br />- `'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.<br /><br />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.<br /><br />When `modal` is `true`, focus trapping is enabled only if `&lt;Popover.Close&gt;` is rendered<br />inside `&lt;Popover.Popup&gt;`. It can be visually hidden with your own CSS if needed, such as<br />Tailwind's `sr-only` utility.<br /><br />When `modal` is `'trap-focus'`, render `&lt;Popover.Close&gt;` inside `&lt;Popover.Popup&gt;` so touch<br />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.<br />This is useful in conjunction with the `open` prop to create a controlled popover.<br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br />Specified in milliseconds.<br /><br />Requires the `openOnHover` prop.                                                         |
| `delay`        | `number`                          | `300`   | How long to wait before the popover may be opened on hover. Specified in milliseconds.<br /><br />Requires the `openOnHover` prop.                                                                        |
| `handle`       | `PopoverHandle<unknown>`          | -       | A handle to associate the trigger with a popover.                                                                                                                                                         |
| `nativeButton` | `boolean`                         | `true`  | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `nativeButton` | `boolean`                         | `true`  | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `portalElement` | `ReactElement<FloatingBarPortalPrimitive.Props>`              | -       | Replaces the default `FloatingBar.PortalPrimitive`. Use to change the portal container.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `style`         | `React.CSSProperties`, `function`                             | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `finalFocus`    | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the popover is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the popover is opened.<br />By default, focus moves to the first tabbable element inside the popup, except when the popover<br />is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (first tabbable element or popup).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function`                                                         | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `container`   | `HTMLElement`, `ShadowRoot`, `React.RefObject<HTMLElement \| ShadowRoot \| null>`, `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `style`                 | `React.CSSProperties`, `function`                                                   | -                    | Style applied to the element, or a function that<br />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.<br />Also accepts a function that returns the offset to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `anchor`                | `Element`, `VirtualElement`, `React.RefObject<Element \| null>`, `function`, `null` | -                    | An element to position the popup against.<br />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.<br /><br />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.<br /><br />`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):<br />- `'flip'`: keep the requested side when it fits; otherwise try the opposite side<br />  (`top` and `bottom`, or `left` and `right`).<br />- `'shift'`: never change side; keep the requested side and move the popup within<br />  the clipping boundary so it stays visible.<br />- `'none'`: do not correct side-axis overflow.<br /><br />`align` controls overflow on the alignment axis (`start`/`center`/`end`):<br />- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.<br />- `'shift'`: keep side and requested alignment, then nudge the popup along the<br />  alignment axis to fit.<br />- `'none'`: do not correct alignment-axis overflow.<br /><br />`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the<br />preferred axis cannot fit:<br />- `'start'`: allow perpendicular fallback and try the logical start side first<br />  (`top` before `bottom`, or `left` before `right` in LTR).<br />- `'end'`: allow perpendicular fallback and try the logical end side first<br />  (`bottom` before `top`, or `right` before `left` in LTR).<br />- `'none'`: do not fallback to the perpendicular axis.<br /><br />When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.<br />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.<br />May automatically change to avoid collisions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `sideOffset`            | `number`, `function`                                                                | `0`                  | Distance between the anchor and the popup in pixels.<br />Also accepts a function that returns the distance to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `sticky`                | `boolean`                                                                           | `false`              | Whether to maintain the popup in the viewport after<br />the anchor element was scrolled out of view.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `render`                | `ReactElement`, `function`                                                          | -                    | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `style`        | `React.CSSProperties`, `function`                             | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `finalFocus`   | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the popover is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the popover is opened.<br />By default, focus moves to the first tabbable element inside the popup, except when the popover<br />is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (first tabbable element or popup).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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은 특정 작업이나 기능을 나타내며, 텍스트 없이 아이콘만으로 명령을 전달하는 버튼입니다.

<Demo name="components/(components)/icon-button/demos/default-icon-button">
  ```tsx
  import { IconButton } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function DefaultIconButton() {
      return (
          <IconButton aria-label="Like">
              <HeartIcon />
          </IconButton>
      );
  }

  ```
</Demo>

## Property

***

### Size

IconButton의 크기를 설정합니다.

<Demo name="components/(components)/icon-button/demos/icon-button-size">
  ```tsx
  import { HStack, IconButton, Text, VStack } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function IconButtonSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <IconButton size="sm" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <IconButton size="md" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <IconButton size="lg" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <IconButton size="xl" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### ColorPalette

IconButton의 색상을 설정합니다.

<Demo name="components/(components)/icon-button/demos/icon-button-color">
  ```tsx
  import { HStack, IconButton, Text, VStack } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function IconButtonColor() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      primary
                  </Text>
                  <IconButton colorPalette="primary" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      secondary
                  </Text>
                  <IconButton colorPalette="secondary" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      success
                  </Text>
                  <IconButton colorPalette="success" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      warning
                  </Text>
                  <IconButton colorPalette="warning" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      danger
                  </Text>
                  <IconButton colorPalette="danger" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      contrast
                  </Text>
                  <IconButton colorPalette="contrast" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Variant

IconButton의 시각적 변형을 설정합니다.

<Demo name="components/(components)/icon-button/demos/icon-button-variant">
  ```tsx
  import { HStack, IconButton, Text, VStack } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function IconButtonVariant() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      fill
                  </Text>
                  <IconButton variant="fill" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      outline
                  </Text>
                  <IconButton variant="outline" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      ghost
                  </Text>
                  <IconButton variant="ghost" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Shape

IconButton의 모양을 설정합니다.

<Demo name="components/(components)/icon-button/demos/icon-button-shape">
  ```tsx
  import { HStack, IconButton, Text, VStack } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function IconButtonShape() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      square
                  </Text>
                  <IconButton shape="square" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      circle
                  </Text>
                  <IconButton shape="circle" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

IconButton의 비활성화 상태를 설정합니다.

<Demo name="components/(components)/icon-button/demos/icon-button-disabled">
  ```tsx
  import { HStack, IconButton, Text, VStack } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function IconButtonDisabled() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      fill
                  </Text>
                  <IconButton disabled aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      outline
                  </Text>
                  <IconButton disabled variant="outline" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      ghost
                  </Text>
                  <IconButton disabled variant="ghost" aria-label="Like">
                      <HeartIcon />
                  </IconButton>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## 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<br />returns a class based on the component's state.                                                                                                 |
| `style`                 | `React.CSSProperties`, `function`                                  | -         | Style applied to the element, or a function that<br />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 `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`                | `ReactElement`, `function`                                         | -         | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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은 사용자 입력을 수집하고 유효성 검사를 수행하는 폼 컨테이너입니다.

<Demo name="components/(components)/form/demos/default-form">
  ```tsx
  'use client';

  import { Button, Field, Form, TextInput, VStack } from '@vapor-ui/core';

  export default function DefaultForm() {
      return (
          <Form
              onSubmit={(event) => {
                  event.preventDefault();
                  const formData = new FormData(event.currentTarget);
                  console.log('Form submitted:', Object.fromEntries(formData));
              }}
          >
              <VStack className="w-72" $css={{ gap: '$200' }}>
                  <Field.Root name="username">
                      <VStack render={<Field.Label />} $css={{ gap: '$050' }}>
                          Username
                          <TextInput placeholder="Enter username" />
                      </VStack>
                  </Field.Root>

                  <Field.Root name="email">
                      <VStack render={<Field.Label />} $css={{ gap: '$050' }}>
                          Email
                          <TextInput type="email" placeholder="you@example.com" />
                      </VStack>
                  </Field.Root>

                  <Button type="submit" colorPalette="primary">
                      Submit
                  </Button>
              </VStack>
          </Form>
      );
  }

  ```
</Demo>

## Examples

***

### Validation

HTML5 기본 유효성 검사를 활용하여 폼 필드를 검증합니다.

<Demo name="components/(components)/form/demos/form-validation">
  ```tsx
  'use client';

  import { Button, Field, Form, TextInput, VStack } from '@vapor-ui/core';

  export default function FormValidation() {
      return (
          <Form
              onSubmit={(event) => {
                  event.preventDefault();
                  const formData = new FormData(event.currentTarget);
                  console.log('Form submitted:', Object.fromEntries(formData));
              }}
          >
              <VStack className="w-72" $css={{ gap: '$200' }}>
                  <Field.Root name="email">
                      <VStack render={<Field.Label />} $css={{ gap: '$050' }}>
                          Email
                          <TextInput type="email" placeholder="you@example.com" required />
                      </VStack>
                      <Field.Error match="valueMissing">Email is required</Field.Error>
                      <Field.Error match="typeMismatch">Enter a valid email address</Field.Error>
                  </Field.Root>

                  <Field.Root name="password">
                      <VStack render={<Field.Label />} $css={{ gap: '$050' }}>
                          Password
                          <TextInput
                              type="password"
                              placeholder="Enter password"
                              required
                              minLength={8}
                          />
                      </VStack>
                      <Field.Error match="valueMissing">Password is required</Field.Error>
                      <Field.Error match="tooShort">
                          Password must be at least 8 characters
                      </Field.Error>
                  </Field.Root>

                  <Button type="submit" colorPalette="primary">
                      Sign Up
                  </Button>
              </VStack>
          </Form>
      );
  }

  ```
</Demo>

### With Field Components

다양한 입력 컴포넌트와 Field를 조합하여 완성된 폼을 구성합니다.

<Demo name="components/(components)/form/demos/form-with-field">
  ```tsx
  'use client';

  import { Button, Checkbox, Field, Form, HStack, Select, TextInput, VStack } from '@vapor-ui/core';

  export default function FormWithField() {
      return (
          <Form
              onSubmit={(event) => {
                  event.preventDefault();
                  const formData = new FormData(event.currentTarget);
                  console.log('Form submitted:', Object.fromEntries(formData));
              }}
          >
              <VStack className="w-80" $css={{ gap: '$300' }}>
                  <Field.Root name="fullName">
                      <VStack render={<Field.Label />} $css={{ gap: '$050' }}>
                          Full Name
                          <TextInput placeholder="John Doe" required />
                      </VStack>
                      <Field.Error match="valueMissing">Name is required</Field.Error>
                  </Field.Root>

                  <Field.Root name="email">
                      <VStack render={<Field.Label />} $css={{ gap: '$050' }}>
                          Email
                          <TextInput type="email" placeholder="john@example.com" required />
                      </VStack>
                      <Field.Description>We'll send a confirmation to this email.</Field.Description>
                      <Field.Error match="valueMissing">Email is required</Field.Error>
                      <Field.Error match="typeMismatch">Enter a valid email</Field.Error>
                  </Field.Root>

                  <Field.Root name="role">
                      <Select.Root placeholder="Select a role">
                          <VStack render={<Field.Label />} $css={{ gap: '$050' }}>
                              Role
                              <Select.Trigger />
                          </VStack>
                          <Select.Popup>
                              <Select.Item value="developer">Developer</Select.Item>
                              <Select.Item value="designer">Designer</Select.Item>
                              <Select.Item value="manager">Manager</Select.Item>
                          </Select.Popup>
                      </Select.Root>
                  </Field.Root>

                  <Field.Root name="terms">
                      <HStack render={<Field.Label />} $css={{ gap: '$100', alignItems: 'center' }}>
                          <Checkbox.Root required />I agree to the terms and conditions
                      </HStack>
                      <Field.Error match="valueMissing">You must accept the terms</Field.Error>
                  </Field.Root>

                  <Button type="submit" colorPalette="primary">
                      Create Account
                  </Button>
              </VStack>
          </Form>
      );
  }

  ```
</Demo>

## Props Table

***

### Form

| Prop             | Type                                    | Default    | Description                                                                                                                                                                                                                                                                                                                                                                                    |
| ---------------- | --------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`      | `string`, `function`                    | -          | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                      |
| `style`          | `React.CSSProperties`, `function`       | -          | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                   |
| `actionsRef`     | `React.RefObject<Form.Actions \| null>` | -          | A ref to imperative actions.<br />- `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.<br />This should be an object where keys correspond to the `name` attribute on `&lt;Field.Root&gt;`,<br />and values correspond to error(s) related to that field.                                                                                                                             |
| `onFormSubmit`   | `function`                              | -          | Event handler called when the form is submitted.<br />`preventDefault()` is called on the native submit event when used.                                                                                                                                                                                                                                                                       |
| `validationMode` | `onBlur`, `onChange`, `onSubmit`        | `onSubmit` | Determines when the form should be validated.<br />The `validationMode` prop on `&lt;Field.Root&gt;` takes precedence over this.<br /><br />- `onSubmit` (default): validates the field when the form is submitted, afterwards fields will re-validate on change.<br />- `onBlur`: validates a field when it loses focus.<br />- `onChange`: validates the field on every change to its value. |
| `render`         | `ReactElement`, `function`              | -          | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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를 제공하는 컴포넌트입니다

<Demo name="components/(components)/menu/demos/default-menu">
  ```tsx
  'use client';

  import { Button, Menu } from '@vapor-ui/core';

  export default function DefaultMenu() {
      return (
          <Menu.Root>
              <Menu.Trigger render={<Button>메뉴 열기</Button>} />
              <Menu.Popup>
                  <Menu.Item>새 파일</Menu.Item>
                  <Menu.Item>새 폴더</Menu.Item>
                  <Menu.Separator />
                  <Menu.Item>복사</Menu.Item>
                  <Menu.Item>붙여넣기</Menu.Item>
                  <Menu.Separator />
                  <Menu.Item>삭제</Menu.Item>
              </Menu.Popup>
          </Menu.Root>
      );
  }

  ```
</Demo>

## Property

***

### Disabled

Menu의 비활성화 상태를 설정합니다.

<Demo name="components/(components)/menu/demos/menu-disabled">
  ```tsx
  'use client';

  import { Button, HStack, Menu, Text, VStack } from '@vapor-ui/core';

  export default function MenuDisabled() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-28" typography="body3" foreground="hint-100">
                      disabled item
                  </Text>
                  <Menu.Root>
                      <Menu.Trigger render={<Button>일반 메뉴</Button>} />
                      <Menu.Popup>
                          <Menu.Item>활성 아이템 1</Menu.Item>
                          <Menu.Item disabled>비활성 아이템</Menu.Item>
                          <Menu.Item>활성 아이템 2</Menu.Item>
                          <Menu.Separator />
                          <Menu.Item disabled>비활성 아이템 2</Menu.Item>
                          <Menu.Item>활성 아이템 3</Menu.Item>
                      </Menu.Popup>
                  </Menu.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-28" typography="body3" foreground="hint-100">
                      disabled menu
                  </Text>
                  <Menu.Root disabled>
                      <Menu.Trigger render={<Button>비활성 메뉴</Button>} />
                      <Menu.Popup>
                          <Menu.Item>아이템 1</Menu.Item>
                          <Menu.Item>아이템 2</Menu.Item>
                          <Menu.Item>아이템 3</Menu.Item>
                      </Menu.Popup>
                  </Menu.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### Positioning

Menu의 표시 위치를 설정합니다.

<Demo name="components/(components)/menu/demos/menu-positioning">
  ```tsx
  'use client';

  import { Button, HStack, Menu, Text, VStack } from '@vapor-ui/core';

  export default function MenuPositioning() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      top
                  </Text>
                  <Menu.Root>
                      <Menu.Trigger render={<Button>상단 메뉴</Button>} />
                      <Menu.PortalPrimitive>
                          <Menu.PositionerPrimitive side="top">
                              <Menu.PopupPrimitive>
                                  <Menu.Item>상단 아이템 1</Menu.Item>
                                  <Menu.Item>상단 아이템 2</Menu.Item>
                                  <Menu.Item>상단 아이템 3</Menu.Item>
                              </Menu.PopupPrimitive>
                          </Menu.PositionerPrimitive>
                      </Menu.PortalPrimitive>
                  </Menu.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      right
                  </Text>
                  <Menu.Root>
                      <Menu.Trigger render={<Button>우측 메뉴</Button>} />
                      <Menu.PortalPrimitive>
                          <Menu.PositionerPrimitive side="right">
                              <Menu.PopupPrimitive>
                                  <Menu.Item>우측 아이템 1</Menu.Item>
                                  <Menu.Item>우측 아이템 2</Menu.Item>
                                  <Menu.Item>우측 아이템 3</Menu.Item>
                              </Menu.PopupPrimitive>
                          </Menu.PositionerPrimitive>
                      </Menu.PortalPrimitive>
                  </Menu.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      bottom
                  </Text>
                  <Menu.Root>
                      <Menu.Trigger render={<Button>하단 메뉴</Button>} />
                      <Menu.PortalPrimitive>
                          <Menu.PositionerPrimitive side="bottom">
                              <Menu.PopupPrimitive>
                                  <Menu.Item>하단 아이템 1</Menu.Item>
                                  <Menu.Item>하단 아이템 2</Menu.Item>
                                  <Menu.Item>하단 아이템 3</Menu.Item>
                              </Menu.PopupPrimitive>
                          </Menu.PositionerPrimitive>
                      </Menu.PortalPrimitive>
                  </Menu.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      left
                  </Text>
                  <Menu.Root>
                      <Menu.Trigger render={<Button>좌측 메뉴</Button>} />
                      <Menu.PortalPrimitive>
                          <Menu.PositionerPrimitive side="left">
                              <Menu.PopupPrimitive>
                                  <Menu.Item>좌측 아이템 1</Menu.Item>
                                  <Menu.Item>좌측 아이템 2</Menu.Item>
                                  <Menu.Item>좌측 아이템 3</Menu.Item>
                              </Menu.PopupPrimitive>
                          </Menu.PositionerPrimitive>
                      </Menu.PortalPrimitive>
                  </Menu.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Groups

Menu 아이템을 그룹화합니다.

<Demo name="components/(components)/menu/demos/menu-groups">
  ```tsx
  'use client';

  import { Button, Menu } from '@vapor-ui/core';

  export default function MenuGroups() {
      return (
          <Menu.Root>
              <Menu.Trigger render={<Button>그룹 메뉴</Button>} />
              <Menu.Popup>
                  <Menu.Group>
                      <Menu.GroupLabel>파일</Menu.GroupLabel>
                      <Menu.Item>새 파일</Menu.Item>
                      <Menu.Item>파일 열기</Menu.Item>
                      <Menu.Item>파일 저장</Menu.Item>
                  </Menu.Group>
                  <Menu.Separator />
                  <Menu.Group>
                      <Menu.GroupLabel>편집</Menu.GroupLabel>
                      <Menu.Item>복사</Menu.Item>
                      <Menu.Item>붙여넣기</Menu.Item>
                      <Menu.Item>잘라내기</Menu.Item>
                  </Menu.Group>
                  <Menu.Separator />
                  <Menu.Group>
                      <Menu.GroupLabel>도구</Menu.GroupLabel>
                      <Menu.Item>설정</Menu.Item>
                      <Menu.Item>도움말</Menu.Item>
                  </Menu.Group>
              </Menu.Popup>
          </Menu.Root>
      );
  }

  ```
</Demo>

### With Checkbox Items

Checkbox Item을 사용합니다.

<Demo name="components/(components)/menu/demos/menu-checkbox">
  ```tsx
  'use client';

  import { useState } from 'react';

  import { Button, Menu } from '@vapor-ui/core';

  export default function MenuCheckbox() {
      const [showToolbar, setShowToolbar] = useState(true);
      const [showSidebar, setShowSidebar] = useState(false);
      const [showStatusbar, setShowStatusbar] = useState(true);

      return (
          <Menu.Root>
              <Menu.Trigger render={<Button>보기 설정</Button>} />
              <Menu.Popup>
                  <Menu.Group>
                      <Menu.GroupLabel>보기 옵션</Menu.GroupLabel>
                      <Menu.CheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>
                          툴바 표시
                      </Menu.CheckboxItem>
                      <Menu.CheckboxItem checked={showSidebar} onCheckedChange={setShowSidebar}>
                          사이드바 표시
                      </Menu.CheckboxItem>
                      <Menu.CheckboxItem checked={showStatusbar} onCheckedChange={setShowStatusbar}>
                          상태바 표시
                      </Menu.CheckboxItem>
                  </Menu.Group>
              </Menu.Popup>
          </Menu.Root>
      );
  }

  ```
</Demo>

### With Radio Items

Radio Item을 사용합니다.

<Demo name="components/(components)/menu/demos/menu-radio">
  ```tsx
  'use client';

  import { useState } from 'react';

  import { Button, Menu } from '@vapor-ui/core';

  export default function MenuRadio() {
      const [fontSize, setFontSize] = useState('medium');

      return (
          <Menu.Root>
              <Menu.Trigger render={<Button>글꼴 크기</Button>} />
              <Menu.Popup>
                  <Menu.Group>
                      <Menu.GroupLabel>글꼴 크기 선택</Menu.GroupLabel>
                      <Menu.RadioGroup value={fontSize} onValueChange={setFontSize}>
                          <Menu.RadioItem value="small">작게 (12px)</Menu.RadioItem>
                          <Menu.RadioItem value="medium">보통 (14px)</Menu.RadioItem>
                          <Menu.RadioItem value="large">크게 (16px)</Menu.RadioItem>
                          <Menu.RadioItem value="xl">매우 크게 (18px)</Menu.RadioItem>
                      </Menu.RadioGroup>
                  </Menu.Group>
              </Menu.Popup>
          </Menu.Root>
      );
  }

  ```
</Demo>

### With Submenu

Submenu를 구성할 수 있습니다.

<Demo name="components/(components)/menu/demos/menu-submenu">
  ```tsx
  'use client';

  import { Button, Menu } from '@vapor-ui/core';

  export default function MenuSubmenu() {
      return (
          <Menu.Root>
              <Menu.Trigger render={<Button>서브메뉴</Button>} />
              <Menu.Popup>
                  <Menu.Item>새 파일</Menu.Item>
                  <Menu.Item>파일 열기</Menu.Item>
                  <Menu.Separator />

                  <Menu.SubmenuRoot>
                      <Menu.SubmenuTriggerItem>최근 파일</Menu.SubmenuTriggerItem>
                      <Menu.SubmenuPopup>
                          <Menu.Item>document.txt</Menu.Item>
                          <Menu.Item>presentation.pptx</Menu.Item>
                          <Menu.Item>spreadsheet.xlsx</Menu.Item>
                          <Menu.Separator />
                          <Menu.Item>더 많은 파일...</Menu.Item>
                      </Menu.SubmenuPopup>
                  </Menu.SubmenuRoot>

                  <Menu.SubmenuRoot>
                      <Menu.SubmenuTriggerItem>내보내기</Menu.SubmenuTriggerItem>
                      <Menu.SubmenuPopup>
                          <Menu.Item>PDF로 내보내기</Menu.Item>
                          <Menu.Item>이미지로 내보내기</Menu.Item>
                          <Menu.Item>HTML로 내보내기</Menu.Item>
                      </Menu.SubmenuPopup>
                  </Menu.SubmenuRoot>

                  <Menu.Separator />
                  <Menu.Item>종료</Menu.Item>
              </Menu.Popup>
          </Menu.Root>
      );
  }

  ```
</Demo>

## Props Table

***

### Menu.Root

| Prop                   | Type                                         | Default    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ---------------------- | -------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultOpen`          | `boolean`                                    | `false`    | Whether the menu is initially open.<br /><br />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<Menu.Root.Actions \| null>` | -          | A ref to imperative actions.<br />- `unmount`: Ends the closing phase of the menu after an externally controlled closing animation finishes.<br />  Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the menu completes closing on its own.<br />  Whether it leaves the DOM is decided by `keepMounted` on the portal.<br />- `close`: Closes the menu imperatively when called.                                                                                                                                                                                                                                                                  |
| `children`             | `ReactNode`, `function`                      | -          | The content of the menu.<br />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<br />closes the entire menu, or only the current child menu.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `defaultTriggerId`     | `string`, `null`                             | -          | ID of the trigger that the menu is associated with.<br />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<unknown>`                        | -          | A handle to associate the menu with a trigger.<br />If specified, allows external triggers to control the menu's open state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `highlightItemOnHover` | `boolean`                                    | `true`     | Whether moving the pointer over items should highlight them.<br />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<br />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.<br />- `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled.<br />- `false`: user interaction with the rest of the document is allowed.<br /><br />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.<br /><br />Nested menus ignore this prop, and menus opened by hover are never modal.                                                                                                        |
| `onItemHighlighted`    | `function`                                   | -          | Callback fired when an item is highlighted or unhighlighted.<br />Receives the highlighted item element (or `undefined` if no item is highlighted) and details<br />containing the reason for the change, the event, and the item's text label.<br />The `reason` can be:<br />- `'keyboard'`: the highlight changed due to keyboard navigation.<br />- `'pointer'`: the highlight changed due to pointer hovering. The event may be a `MouseEvent`<br />  rather than a `PointerEvent`.<br />- `'none'`: the highlight changed for another reason, such as automatic highlighting while<br />  filtering, the item list changing, or the popup opening or closing. |
| `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.<br />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.<br />This is useful in conjunction with the `open` prop to create a controlled menu.<br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br />Specified in milliseconds.<br /><br />Requires the `openOnHover` prop.                                                            |
| `delay`        | `number`                          | `100`   | How long to wait before the menu may be opened on hover. Specified in milliseconds.<br /><br />Requires the `openOnHover` prop.                                                                           |
| `disabled`     | `boolean`                         | `false` | Whether the component should ignore user interaction.                                                                                                                                                     |
| `handle`       | `MenuHandle<unknown>`             | -       | A handle to associate the trigger with a menu.                                                                                                                                                            |
| `nativeButton` | `boolean`                         | `true`  | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                        |
| `portalElement`     | `ReactElement<MenuPortalPrimitive.Props>`                     | -       | Replaces the default `Menu.PortalPrimitive`. Use to change the portal container.                                                                                                                                                                                                                                                                                                                                                                                 |
| `positionerElement` | `ReactElement<MenuPositionerPrimitive.Props>`                 | -       | 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<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                     |
| `finalFocus`        | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the menu is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function`                                                         | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `container`   | `HTMLElement`, `ShadowRoot`, `React.RefObject<HTMLElement \| ShadowRoot \| null>`, `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `style`                 | `React.CSSProperties`, `function`                                                   | -                    | Style applied to the element, or a function that<br />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.<br /><br />Submenus and menubars default to `'start'`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `alignOffset`           | `number`, `function`                                                                | `0`                  | Additional offset along the alignment axis in pixels.<br />Also accepts a function that returns the offset to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `anchor`                | `Element`, `VirtualElement`, `React.RefObject<Element \| null>`, `function`, `null` | -                    | An element to position the popup against.<br />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.<br /><br />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.<br /><br />`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):<br />- `'flip'`: keep the requested side when it fits; otherwise try the opposite side<br />  (`top` and `bottom`, or `left` and `right`).<br />- `'shift'`: never change side; keep the requested side and move the popup within<br />  the clipping boundary so it stays visible.<br />- `'none'`: do not correct side-axis overflow.<br /><br />`align` controls overflow on the alignment axis (`start`/`center`/`end`):<br />- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.<br />- `'shift'`: keep side and requested alignment, then nudge the popup along the<br />  alignment axis to fit.<br />- `'none'`: do not correct alignment-axis overflow.<br /><br />`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the<br />preferred axis cannot fit:<br />- `'start'`: allow perpendicular fallback and try the logical start side first<br />  (`top` before `bottom`, or `left` before `right` in LTR).<br />- `'end'`: allow perpendicular fallback and try the logical end side first<br />  (`bottom` before `top`, or `right` before `left` in LTR).<br />- `'none'`: do not fallback to the perpendicular axis.<br /><br />When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.<br />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.<br />May automatically change to avoid collisions.<br /><br />Submenus and vertical menubars default to `'inline-end'`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `sideOffset`            | `number`, `function`                                                                | `4`                  | Distance between the anchor and the popup in pixels.<br />Also accepts a function that returns the distance to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `sticky`                | `boolean`                                                                           | `false`              | Whether to maintain the popup in the viewport after<br />the anchor element was scrolled out of view.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `render`                | `ReactElement`, `function`                                                          | -                    | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                        |
| `style`      | `React.CSSProperties`, `function`                             | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                     |
| `finalFocus` | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the menu is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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 used for keyboard text navigation and filtering.<br />Falls back to the rendered text when not provided.                                                                               |
| `nativeButton` | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -            | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `style`                | `React.CSSProperties`, `function`            | -          | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `actionsRef`           | `React.RefObject<Menu.Root.Actions \| null>` | -          | A ref to imperative actions.<br />- `unmount`: Ends the closing phase of the menu after an externally controlled closing animation finishes.<br />  Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the menu completes closing on its own.<br />  Whether it leaves the DOM is decided by `keepMounted` on the portal.<br />- `close`: Closes the menu imperatively when called.                                                                                                                                                                                                                                                                  |
| `children`             | `ReactNode`                                  | -          | The content of the submenu.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `closeParentOnEsc`     | `boolean`                                    | `false`    | When in a submenu, determines whether pressing the Escape key<br />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.<br />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<br />when the end of the list is reached while using the arrow keys.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `onItemHighlighted`    | `function`                                   | -          | Callback fired when an item is highlighted or unhighlighted.<br />Receives the highlighted item element (or `undefined` if no item is highlighted) and details<br />containing the reason for the change, the event, and the item's text label.<br />The `reason` can be:<br />- `'keyboard'`: the highlight changed due to keyboard navigation.<br />- `'pointer'`: the highlight changed due to pointer hovering. The event may be a `MouseEvent`<br />  rather than a `PointerEvent`.<br />- `'none'`: the highlight changed for another reason, such as automatic highlighting while<br />  filtering, the item list changing, or the popup opening or closing. |
| `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.<br />Controls whether roving focus uses up/down or left/right arrow keys.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `render`               | `ReactElement`, `function`                   | -          | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />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<br />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.<br />Specified in milliseconds.<br /><br />Requires the `openOnHover` prop.                                                            |
| `delay`        | `number`                          | `100`   | How long to wait before the menu may be opened on hover. Specified in milliseconds.<br /><br />Requires the `openOnHover` prop.                                                                           |
| `disabled`     | `boolean`                         | `false` | Whether the component should ignore user interaction.                                                                                                                                                     |
| `label`        | `string`                          | -       | Overrides the text used for keyboard text navigation and filtering.<br />Falls back to the rendered text when not provided.                                                                               |
| `nativeButton` | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                        |
| `portalElement`     | `ReactElement<MenuPortalPrimitive.Props>`                     | -       | Replaces the default `Menu.PortalPrimitive`. Use to change the portal container.                                                                                                                                                                                                                                                                                                                                                                                 |
| `positionerElement` | `ReactElement<MenuPositionerPrimitive.Props>`                 | -       | 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<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                     |
| `finalFocus`        | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the menu is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                        |
| `style`      | `React.CSSProperties`, `function`                             | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                     |
| `finalFocus` | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the menu is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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.<br /><br />To render an uncontrolled checkbox item, use the `defaultChecked` prop instead.                                                                 |
| `defaultChecked`  | `boolean`                         | `false` | Whether the checkbox item is initially ticked.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`           | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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 used for keyboard text navigation and filtering.<br />Falls back to the rendered text when not provided.                                                                               |
| `nativeButton`    | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />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<br />with a different tag, or compose it with another component.<br /><br />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.<br /><br />To render an uncontrolled checkbox item, use the `defaultChecked` prop instead.                                                                 |
| `defaultChecked`  | `boolean`                         | `false` | Whether the checkbox item is initially ticked.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`           | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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 used for keyboard text navigation and filtering.<br />Falls back to the rendered text when not provided.                                                                               |
| `nativeButton`    | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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.<br /><br />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.<br /><br />To render an uncontrolled radio group, use the `defaultValue` prop instead.                                          |
| `className`     | `string`, `function`              | -       | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                 |
| `style`         | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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.<br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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 used for keyboard text navigation and filtering.<br />Falls back to the rendered text when not provided.                                                                               |
| `nativeButton` | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />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<br />with a different tag, or compose it with another component.<br /><br />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.<br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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 used for keyboard text navigation and filtering.<br />Falls back to the rendered text when not provided.                                                                               |
| `nativeButton` | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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)와 관련 요소들을 그룹화하여 문자 수 카운터와 같은 추가 기능을 제공합니다.

<Demo name="components/(components)/input-group/demos/default-input-group">
  ```tsx
  'use client';

  import { InputGroup, TextInput, VStack } from '@vapor-ui/core';

  export default function DefaultInputGroup() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <InputGroup.Root>
                  <TextInput placeholder="메시지를 입력하세요..." maxLength={100} />
                  <InputGroup.Counter />
              </InputGroup.Root>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### Custom Counter

커스텀 카운터 UI를 구현합니다.

<Demo name="components/(components)/input-group/demos/input-group-custom-counter">
  ```tsx
  'use client';

  import { InputGroup, Text, TextInput, VStack } from '@vapor-ui/core';

  export default function InputGroupCustomCounter() {
      return (
          <VStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      커스텀 카운터 예시 1
                  </Text>
                  <InputGroup.Root>
                      <TextInput placeholder="메시지를 입력하세요" maxLength={20} />
                      <InputGroup.Counter>
                          {({ count, maxLength }) => `${count} of ${maxLength} characters`}
                      </InputGroup.Counter>
                  </InputGroup.Root>
              </VStack>
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      커스텀 카운터 예시 2
                  </Text>
                  <InputGroup.Root>
                      <TextInput placeholder="메시지를 입력하세요" maxLength={100} />
                      <InputGroup.Counter>
                          {({ count, maxLength, value }) => (
                              <Text
                                  foreground={
                                      maxLength && count > maxLength * 0.8 ? 'danger-100' : 'hint-100'
                                  }
                              >
                                  {count}/{maxLength} {value.length > 50 && '(50자 초과)'}
                              </Text>
                          )}
                      </InputGroup.Counter>
                  </InputGroup.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

## Props Table

***

### InputGroup.Root

| Prop        | Type                              | Default | Description                                                                                                                                                                                               |
| ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `function`              | -       | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                            |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                         |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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는 디스크 사용량이나 점수처럼 알려진 범위 안의 측정값을 표시합니다.

<Demo name="components/(components)/meter/demos/default-meter">
  ```tsx
  import { Meter } from '@vapor-ui/core';

  export default function DefaultMeter() {
      return (
          <Meter.Root value={42} $css={{ maxWidth: '20rem' }}>
              <Meter.Label>저장 공간</Meter.Label>
              <Meter.Value />
              <Meter.Track />
          </Meter.Root>
      );
  }

  ```
</Demo>

`Meter.Label`과 `Meter.Value`는 한 줄에 놓이고 `Meter.Track`이 그 아래 전체 폭을 차지합니다. 이 배치는 자식 순서를 따르므로 `Meter.Value`는 `Meter.Track` 앞에 두세요. 뒤에 두면 값이 트랙 아래로 내려갑니다.

`Meter.Label`은 보조기술에 전달되는 이름이기도 합니다. `저장 공간`, `CPU 사용률`처럼 **무엇을 재는 값인지**를 문구에 담으세요. 화면에 이름을 두지 않을 때는 `Meter.Label` 대신 `Meter.Root`에 `aria-label`을 주세요 — 둘을 함께 주면 `aria-label`이 무시됩니다.

## Property

***

### Size

`size`로 트랙의 높이를 조절합니다.

<Demo name="components/(components)/meter/demos/meter-size">
  ```tsx
  import { Meter, VStack } from '@vapor-ui/core';

  export default function MeterSize() {
      return (
          <VStack $css={{ gap: '$300', width: '100%', maxWidth: '20rem' }}>
              {(['sm', 'md', 'lg'] as const).map((size) => (
                  <Meter.Root key={size} size={size} value={42}>
                      <Meter.Label>저장 공간 ({size})</Meter.Label>
                      <Meter.Value />
                      <Meter.Track />
                  </Meter.Root>
              ))}
          </VStack>
      );
  }

  ```
</Demo>

### Type

`type`으로 채워진 영역의 색상을 지정합니다. 색만으로는 위험 구간을 알 수 없으므로 레이블에도 함께 적어줍니다.

<Demo name="components/(components)/meter/demos/meter-type">
  ```tsx
  import { Meter, VStack } from '@vapor-ui/core';

  export default function MeterType() {
      return (
          <VStack $css={{ gap: '$300', width: '100%', maxWidth: '20rem' }}>
              <Meter.Root value={42}>
                  <Meter.Label>저장 공간</Meter.Label>
                  <Meter.Value />
                  <Meter.Track />
              </Meter.Root>

              <Meter.Root type="warning" value={92}>
                  <Meter.Label>저장 공간 부족</Meter.Label>
                  <Meter.Value />
                  <Meter.Track />
              </Meter.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Range

`min`, `max`로 범위를, `format`으로 표시 형식을 지정합니다. 값 텍스트가 단위만 담고 있다면 `getAriaValueText`로 무엇을 재는 값인지 함께 읽히도록 합니다.

<Demo name="components/(components)/meter/demos/meter-range">
  ```tsx
  import { Meter } from '@vapor-ui/core';

  export default function MeterRange() {
      return (
          <Meter.Root
              value={4.2}
              max={8}
              format={{ style: 'unit', unit: 'gigabyte', maximumFractionDigits: 1 }}
              getAriaValueText={(formattedValue) => `8GB 중 ${formattedValue} 사용`}
              $css={{ maxWidth: '20rem' }}
          >
              <Meter.Label>저장 공간</Meter.Label>
              <Meter.Value />
              <Meter.Track />
          </Meter.Root>
      );
  }

  ```
</Demo>

## Examples

***

### Auto Update

값이 스스로 바뀌는 미터에는 갱신을 멈출 수단을 함께 둡니다. 갱신 간격은 초당 3회를 넘기지 않습니다.

<Demo name="components/(components)/meter/demos/meter-auto-update">
  ```tsx
  import { useEffect, useState } from 'react';

  import { Button, Meter, VStack } from '@vapor-ui/core';

  export default function MeterAutoUpdate() {
      const [value, setValue] = useState(42);
      const [running, setRunning] = useState(true);

      useEffect(() => {
          if (!running) return;

          const id = setInterval(() => setValue((prev) => (prev + 7) % 101), 1000);

          return () => clearInterval(id);
      }, [running]);

      return (
          <VStack $css={{ gap: '$200', width: '100%', maxWidth: '20rem' }}>
              <Meter.Root value={value}>
                  <Meter.Label>CPU 사용률</Meter.Label>
                  <Meter.Value />
                  <Meter.Track />
              </Meter.Root>

              <Button variant="outline" size="sm" onClick={() => setRunning((prev) => !prev)}>
                  {running ? '갱신 일시정지' : '갱신 재개'}
              </Button>
          </VStack>
      );
  }

  ```
</Demo>

## 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<br />returns a class based on the component's state.                                                                                                 |
| `style`            | `React.CSSProperties`, `function` | -         | Style applied to the element, or a function that<br />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.<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `indicatorElement` | `ReactElement<MeterIndicatorPrimitive.Props>` | -       | 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<br />returns a style object based on the component's state.                                                                                              |
| `render`           | `ReactElement`, `function`                    | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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는 사용자가 여러 옵션 중에서 다중 선택할 수 있는 드롭다운 컴포넌트입니다. 선택된 값들은 배지 형태로 표시되며, 태그 선택, 필터링, 카테고리 선택 등에 사용됩니다.

<Demo name="components/(components)/multi-select/demos/default-multi-select">
  ```tsx
  import { MultiSelect } from '@vapor-ui/core';

  const fonts = [
      { label: 'Sans-serif', value: 'sans' },
      { label: 'Serif', value: 'serif' },
      { label: 'Monospace', value: 'mono' },
      { label: 'Cursive', value: 'cursive' },
  ];

  export default function DefaultMultiSelect() {
      return (
          <MultiSelect.Root items={fonts} placeholder="폰트를 선택하세요">
              <MultiSelect.Trigger />

              <MultiSelect.Popup>
                  {fonts.map((font) => (
                      <MultiSelect.Item key={font.value} value={font.value}>
                          {font.label}
                      </MultiSelect.Item>
                  ))}
              </MultiSelect.Popup>
          </MultiSelect.Root>
      );
  }

  ```
</Demo>

## Property

***

### Size

MultiSelect의 크기를 설정합니다.

<Demo name="components/(components)/multi-select/demos/multi-select-size">
  ```tsx
  import { HStack, MultiSelect, Text, VStack } from '@vapor-ui/core';

  const options = [
      { label: '옵션 1', value: 'option1' },
      { label: '옵션 2', value: 'option2' },
      { label: '옵션 3', value: 'option3' },
  ];

  export default function MultiSelectSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <MultiSelectTemplate placeholder="Small" size="sm" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <MultiSelectTemplate placeholder="Medium" size="md" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <MultiSelectTemplate placeholder="Large" size="lg" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <MultiSelectTemplate placeholder="Extra Large" size="xl" />
              </HStack>
          </VStack>
      );
  }

  const MultiSelectTemplate = (props: MultiSelect.Root.Props<string>) => {
      return (
          <MultiSelect.Root {...props} items={options}>
              <MultiSelect.Trigger />
              <MultiSelect.Popup>
                  {options.map((option) => (
                      <MultiSelect.Item key={option.value} value={option.value}>
                          {option.label}
                      </MultiSelect.Item>
                  ))}
              </MultiSelect.Popup>
          </MultiSelect.Root>
      );
  };

  ```
</Demo>

### Controlled State

MultiSelect의 선택 상태를 제어합니다.

<Demo name="components/(components)/multi-select/demos/multi-select-controlled">
  ```tsx
  'use client';

  import { useState } from 'react';

  import { Button, HStack, MultiSelect, Text, VStack } from '@vapor-ui/core';

  const fonts = [
      { label: 'Sans-serif', value: 'sans' },
      { label: 'Serif', value: 'serif' },
      { label: 'Monospace', value: 'mono' },
      { label: 'Cursive', value: 'cursive' },
  ];

  export default function MultiSelectControlled() {
      const [value, setValue] = useState<string[]>([]);

      const handleValueChange = (newValue: unknown) => {
          setValue(newValue as string[]);
      };

      return (
          <VStack $css={{ gap: '$200', width: '400px' }}>
              <MultiSelect.Root
                  items={fonts}
                  value={value}
                  onValueChange={handleValueChange}
                  placeholder="폰트 선택"
              >
                  <MultiSelect.Trigger />

                  <MultiSelect.Popup>
                      {fonts.map((font) => (
                          <MultiSelect.Item key={font.value} value={font.value}>
                              {font.label}
                          </MultiSelect.Item>
                      ))}
                  </MultiSelect.Popup>
              </MultiSelect.Root>

              <Text typography="body2" foreground="secondary-200">
                  선택된 값:{' '}
                  <code className="bg-gray-100 px-1 rounded">
                      {value.length > 0 ? value.join(', ') : '없음'}
                  </code>
              </Text>

              <HStack $css={{ gap: '$100' }}>
                  <Button colorPalette="primary" onClick={() => setValue(['serif', 'mono'])}>
                      Serif, Mono 선택
                  </Button>
                  <Button colorPalette="secondary" onClick={() => setValue([])}>
                      모두 해제
                  </Button>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### States

MultiSelect의 다양한 상태를 설정합니다.

<Demo name="components/(components)/multi-select/demos/multi-select-states">
  ```tsx
  import { HStack, MultiSelect, Text, VStack } from '@vapor-ui/core';

  const options = [
      { label: '옵션 1', value: 'option1' },
      { label: '옵션 2', value: 'option2' },
      { label: '옵션 3', value: 'option3' },
  ];

  export default function MultiSelectStates() {
      return (
          <VStack $css={{ gap: '$150', width: '400px' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      default
                  </Text>
                  <MultiSelectTemplate placeholder="기본 상태" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      disabled
                  </Text>
                  <MultiSelectTemplate placeholder="비활성화" disabled />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      readOnly
                  </Text>
                  <MultiSelectTemplate placeholder="읽기 전용" readOnly />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      invalid
                  </Text>
                  <MultiSelectTemplate placeholder="오류 상태" invalid />
              </HStack>
          </VStack>
      );
  }

  export const MultiSelectTemplate = (props: MultiSelect.Root.Props<string>) => {
      return (
          <MultiSelect.Root {...props}>
              <MultiSelect.Trigger />
              <MultiSelect.Popup>
                  {options.map((option) => (
                      <MultiSelect.Item key={option.value} value={option.value}>
                          {option.label}
                      </MultiSelect.Item>
                  ))}
              </MultiSelect.Popup>
          </MultiSelect.Root>
      );
  };

  ```
</Demo>

## Examples

***

### Items Configuration

다양한 형태의 아이템 데이터를 사용합니다.

<Demo name="components/(components)/multi-select/demos/multi-select-items">
  ```tsx
  import { MultiSelect, Text, VStack } from '@vapor-ui/core';

  const fonts = [
      { label: 'Sans-serif', value: 'sans' },
      { label: 'Serif', value: 'serif' },
      { label: 'Monospace', value: 'mono' },
      { label: 'Cursive', value: 'cursive' },
  ];

  const languages = {
      javascript: 'JavaScript',
      typescript: 'TypeScript',
      python: 'Python',
      java: 'Java',
      go: 'Go',
  };

  export default function MultiSelectItems() {
      return (
          <VStack $css={{ gap: '$300', width: '300px' }}>
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      배열 형태의 아이템
                  </Text>
                  <MultiSelect.Root placeholder="폰트 선택" items={fonts}>
                      <MultiSelect.Trigger />
                      <MultiSelect.Popup>
                          {fonts.map((font) => (
                              <MultiSelect.Item key={font.value} value={font.value}>
                                  {font.label}
                              </MultiSelect.Item>
                          ))}
                      </MultiSelect.Popup>
                  </MultiSelect.Root>
              </VStack>

              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      객체 형태의 아이템
                  </Text>
                  <MultiSelect.Root placeholder="언어 선택" items={languages}>
                      <MultiSelect.Trigger />
                      <MultiSelect.Popup>
                          {Object.entries(languages).map(([value, label]) => (
                              <MultiSelect.Item key={value} value={value}>
                                  {label}
                              </MultiSelect.Item>
                          ))}
                      </MultiSelect.Popup>
                  </MultiSelect.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### Grouping Options

옵션을 그룹으로 묶어 구조화합니다.

<Demo name="components/(components)/multi-select/demos/multi-select-grouping">
  ```tsx
  import { Box, MultiSelect } from '@vapor-ui/core';

  export default function MultiSelectGrouping() {
      return (
          <MultiSelect.Root placeholder="개발 기술 선택">
              <Box render={<MultiSelect.Trigger />} $css={{ width: '400px' }} />

              <MultiSelect.Popup>
                  <MultiSelect.Group>
                      <MultiSelect.GroupLabel>프론트엔드</MultiSelect.GroupLabel>
                      <MultiSelect.Item value="react">React</MultiSelect.Item>
                      <MultiSelect.Item value="vue">Vue</MultiSelect.Item>
                      <MultiSelect.Item value="angular">Angular</MultiSelect.Item>
                      <MultiSelect.Item value="svelte">Svelte</MultiSelect.Item>
                  </MultiSelect.Group>

                  <MultiSelect.Separator />

                  <MultiSelect.Group>
                      <MultiSelect.GroupLabel>백엔드</MultiSelect.GroupLabel>
                      <MultiSelect.Item value="nodejs">Node.js</MultiSelect.Item>
                      <MultiSelect.Item value="python">Python</MultiSelect.Item>
                      <MultiSelect.Item value="java">Java</MultiSelect.Item>
                      <MultiSelect.Item value="go">Go</MultiSelect.Item>
                  </MultiSelect.Group>

                  <MultiSelect.Separator />

                  <MultiSelect.Group>
                      <MultiSelect.GroupLabel>데이터베이스</MultiSelect.GroupLabel>
                      <MultiSelect.Item value="mysql">MySQL</MultiSelect.Item>
                      <MultiSelect.Item value="postgresql">PostgreSQL</MultiSelect.Item>
                      <MultiSelect.Item value="mongodb">MongoDB</MultiSelect.Item>
                      <MultiSelect.Item value="redis">Redis</MultiSelect.Item>
                  </MultiSelect.Group>
              </MultiSelect.Popup>
          </MultiSelect.Root>
      );
  }

  ```
</Demo>

### Custom Value Display

MultiSelect.Value에 함수형 children을 제공하여 선택된 값들의 표시 방법을 커스터마이징할 수 있습니다. 기본적으로는 배지 형태로 표시되지만, 문자열이나 커스텀 컴포넌트로 변경할 수 있습니다.

<Demo name="components/(components)/multi-select/demos/multi-select-custom-value">
  ```tsx
  import { Badge, Flex, HStack, MultiSelect, Text, VStack } from '@vapor-ui/core';

  const languages = {
      javascript: 'JavaScript',
      typescript: 'TypeScript',
      python: 'Python',
      java: 'Java',
      go: 'Go',
      rust: 'Rust',
  };

  const renderRestValue = (value: string[]) => {
      if (!value.length) {
          return '언어 선택';
      }

      const displayValues = value.slice(0, 2);
      const remainingCount = value.length - 2;

      return (
          <Flex className="flex-wrap" $css={{ gap: '$050' }}>
              {displayValues.map((val) => (
                  <Badge key={val} size="sm">
                      {languages[val as keyof typeof languages]}
                  </Badge>
              ))}
              {remainingCount > 0 && (
                  <Badge size="sm" colorPalette="hint">
                      +{remainingCount} more
                  </Badge>
              )}
          </Flex>
      );
  };

  const renderStringValue = (value: string[]) => {
      if (!value.length) {
          return '언어 선택';
      }

      return value.map((v) => languages[v as keyof typeof languages]).join(', ');
  };

  export default function MultiSelectCustomValue() {
      return (
          <HStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$050', width: '250px' }}>
                  <Text typography="body3" foreground="hint-100">
                      커스텀 값 표시 (최대 2개 + 더보기)
                  </Text>
                  <MultiSelect.Root items={languages} placeholder="언어 선택">
                      <MultiSelect.Trigger>
                          <MultiSelect.ValuePrimitive>{renderRestValue}</MultiSelect.ValuePrimitive>
                          <MultiSelect.TriggerIconPrimitive />
                      </MultiSelect.Trigger>
                      <MultiSelect.Popup>
                          {Object.entries(languages).map(([value, label]) => (
                              <MultiSelect.Item key={value} value={value}>
                                  {label}
                              </MultiSelect.Item>
                          ))}
                      </MultiSelect.Popup>
                  </MultiSelect.Root>
              </VStack>

              <VStack $css={{ gap: '$050', width: '250px' }}>
                  <Text typography="body3" foreground="hint-100">
                      문자열 형태 표시
                  </Text>
                  <MultiSelect.Root items={languages} placeholder="언어 선택">
                      <MultiSelect.Trigger>
                          <MultiSelect.ValuePrimitive>{renderStringValue}</MultiSelect.ValuePrimitive>
                          <MultiSelect.TriggerIconPrimitive />
                      </MultiSelect.Trigger>
                      <MultiSelect.Popup>
                          {Object.entries(languages).map(([value, label]) => (
                              <MultiSelect.Item key={value} value={value}>
                                  {label}
                              </MultiSelect.Item>
                          ))}
                      </MultiSelect.Popup>
                  </MultiSelect.Root>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

## 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 `&lt;button&gt;` 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.<br /><br />To render a controlled select popup, use the `open` prop instead.                                                                                                                                                                                                                                                                                                                                                    |
| `defaultValue`         | `readonly Value[]`, `null`                                                                                 | -       | The uncontrolled value of the select when it's initially rendered.<br /><br />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`                | `readonly 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<MultiSelect.Root.Actions \| null>`                                                        | -       | A ref to imperative actions.<br />- `unmount`: Ends the closing phase of the select after an externally controlled closing animation finishes.<br />Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the select completes closing on its own.<br />Whether it leaves the DOM is decided by `keepMounted` on the portal.<br />- `close`: Closes the select imperatively when called.                                                                        |
| `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.<br />Useful when the select is rendered outside the form.                                                                                                                                                                                                                                                                                                                                                                   |
| `highlightItemOnHover` | `boolean`                                                                                                  | `true`  | Whether moving the pointer over items should highlight them.<br />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<HTMLInputElement>`                                                                              | -       | 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.<br />Defaults to `Object.is` comparison.                                                                                                                                                                                                                                                           |
| `items`                | `Record<string, ReactNode>`, `readonly { label: React.ReactNode; value: any; }[]`, `readonly Group<any>[]` | -       | Data structure of the items rendered in the select popup.<br />When specified, `&lt;Select.Value&gt;` renders the label of the selected item instead of the raw value.                                                                                                                                                                                                                                                                                                      |
| `itemToStringLabel`    | `function`                                                                                                 | -       | When the item values are objects (`&lt;Select.Item value={object}&gt;`), this function converts the object value to a string representation for display in the trigger.<br />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 (`&lt;Select.Item value={object}&gt;`), this function converts the object value to a string representation for form submission.<br />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.<br />- `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.<br />- `false`: user interaction with the rest of the document is allowed.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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 `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -                  | Style applied to the element, or a function that<br />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 `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | `&lt;button /&gt;` | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br />Treat the value as read-only: in `multiple` mode it may be a shared frozen array<br />when nothing is selected.          |
| `placeholder` | `ReactNode`                       | -       | The placeholder value to display when no value is selected.<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                |
| `portalElement`     | `ReactElement<MultiSelectPortalPrimitive.Props>`              | -       | Replaces the default `MultiSelect.PortalPrimitive`. Use to change the portal container.                                                                                                                                                                                                                                                                                                                                                                                  |
| `positionerElement` | `ReactElement<MultiSelectPositionerPrimitive.Props>`          | -       | 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<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                             |
| `finalFocus`        | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the select popup is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function`                                                         | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `container` | `HTMLElement`, `ShadowRoot`, `React.RefObject<HTMLElement \| ShadowRoot \| null>`, `null` | -       | A parent element to render the portal element into.                                                                                                                                                       |
| `render`    | `ReactElement`, `function`                                                                | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `style`                 | `React.CSSProperties`, `function`                                                   | -                    | Style applied to the element, or a function that<br />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.<br />Also accepts a function that returns the offset to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `anchor`                | `Element`, `VirtualElement`, `React.RefObject<Element \| null>`, `function`, `null` | -                    | An element to position the popup against.<br />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.<br /><br />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.<br /><br />`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):<br />- `'flip'`: keep the requested side when it fits; otherwise try the opposite side<br />  (`top` and `bottom`, or `left` and `right`).<br />- `'shift'`: never change side; keep the requested side and move the popup within<br />  the clipping boundary so it stays visible.<br />- `'none'`: do not correct side-axis overflow.<br /><br />`align` controls overflow on the alignment axis (`start`/`center`/`end`):<br />- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.<br />- `'shift'`: keep side and requested alignment, then nudge the popup along the<br />  alignment axis to fit.<br />- `'none'`: do not correct alignment-axis overflow.<br /><br />`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the<br />preferred axis cannot fit:<br />- `'start'`: allow perpendicular fallback and try the logical start side first<br />  (`top` before `bottom`, or `left` before `right` in LTR).<br />- `'end'`: allow perpendicular fallback and try the logical end side first<br />  (`bottom` before `top`, or `right` before `left` in LTR).<br />- `'none'`: do not fallback to the perpendicular axis.<br /><br />When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.<br />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.<br />May automatically change to avoid collisions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `sideOffset`            | `number`, `function`                                                                | `4`                  | Distance between the anchor and the popup in pixels.<br />Also accepts a function that returns the distance to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `sticky`                | `boolean`                                                                           | `false`              | Whether to maintain the popup in the viewport after<br />the anchor element was scrolled out of view.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `render`                | `ReactElement`, `function`                                                          | -                    | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                |
| `style`      | `React.CSSProperties`, `function`                             | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                             |
| `finalFocus` | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the select popup is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br /><br />Defaults to the item text content if not provided.                                                   |
| `nativeButton` | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `true` if the rendered element is a native button.                              |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br /><br />Defaults to the item text content if not provided.                                                   |
| `nativeButton` | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `true` if the rendered element is a native button.                              |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -            | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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

여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다.

<Demo name="components/(components)/navigation-menu/demos/default-navigation-menu">
  ```tsx
  import { NavigationMenu } from '@vapor-ui/core';

  export default function DefaultNavigationMenu() {
      return (
          <NavigationMenu.Root size="md" aria-label="Navigation menu">
              <NavigationMenu.List>
                  <NavigationMenu.Item>
                      <NavigationMenu.Link href="#">Default Link</NavigationMenu.Link>
                  </NavigationMenu.Item>
                  <NavigationMenu.Item>
                      <NavigationMenu.Link href="#" current>
                          Current Link
                      </NavigationMenu.Link>
                  </NavigationMenu.Item>
                  <NavigationMenu.Item>
                      <NavigationMenu.Link href="#" disabled>
                          Disabled Link
                      </NavigationMenu.Link>
                  </NavigationMenu.Item>
              </NavigationMenu.List>
          </NavigationMenu.Root>
      );
  }

  ```
</Demo>

## Property

***

### Size

NavigationMenu의 크기를 설정합니다.

<Demo name="components/(components)/navigation-menu/demos/navigation-menu-size">
  ```tsx
  import { HStack, NavigationMenu, Text, VStack } from '@vapor-ui/core';

  export default function NavigationMenuSize() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <NavigationMenu.Root size="sm" aria-label="Small navigation">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">Home</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" current>
                                  About
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <NavigationMenu.Root size="md" aria-label="Medium navigation">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">Home</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" current>
                                  About
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <NavigationMenu.Root size="lg" aria-label="Large navigation">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">Home</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" current>
                                  About
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <NavigationMenu.Root size="xl" aria-label="Extra large navigation">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">Home</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" current>
                                  About
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Direction

NavigationMenu의 방향을 설정합니다.

<Demo name="components/(components)/navigation-menu/demos/navigation-menu-direction">
  ```tsx
  import { HStack, NavigationMenu, Text, VStack } from '@vapor-ui/core';

  export default function NavigationMenuDirection() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'start' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      horizontal
                  </Text>
                  <NavigationMenu.Root direction="horizontal" aria-label="Horizontal navigation">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">Home</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" current>
                                  About
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">Contact</NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      vertical
                  </Text>
                  <NavigationMenu.Root direction="vertical" aria-label="Vertical navigation">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">Home</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" current>
                                  About
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">Contact</NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

### Disabled

NavigationMenu의 비활성화 상태를 설정합니다.

<Demo name="components/(components)/navigation-menu/demos/navigation-menu-disabled">
  ```tsx
  import { NavigationMenu } from '@vapor-ui/core';

  export default function NavigationMenuDisabled() {
      return (
          <div className="space-y-4">
              <div>
                  <h4 className="text-sm font-medium mb-2">기본 상태와 비활성화 상태</h4>
                  <NavigationMenu.Root aria-label="Navigation with disabled links">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">활성 링크</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" disabled>
                                  비활성화 링크
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">다른 활성 링크</NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </div>

              <div>
                  <h4 className="text-sm font-medium mb-2">현재 페이지와 비활성화 상태</h4>
                  <NavigationMenu.Root aria-label="Navigation with current and disabled">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">홈</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" current>
                                  현재 페이지
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" disabled>
                                  비활성화 링크
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">연락처</NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </div>
          </div>
      );
  }

  ```
</Demo>

### Current

NavigationMenu의 현재 페이지 상태를 설정합니다.

<Demo name="components/(components)/navigation-menu/demos/navigation-menu-current">
  ```tsx
  import { NavigationMenu } from '@vapor-ui/core';

  export default function NavigationMenuCurrent() {
      return (
          <div className="space-y-4">
              <div>
                  <h4 className="text-sm font-medium mb-2">현재 페이지 표시</h4>
                  <NavigationMenu.Root aria-label="Navigation with current page">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">홈</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" current>
                                  제품 (현재 페이지)
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">서비스</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#">회사소개</NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </div>
          </div>
      );
  }

  ```
</Demo>

## Examples

***

### With Icons

아이콘과 함께 사용합니다.

<Demo name="components/(components)/navigation-menu/demos/navigation-menu-with-icon">
  ```tsx
  import { NavigationMenu } from '@vapor-ui/core';
  import { HomeIcon, SettingIcon, StarIcon, UserIcon } from '@vapor-ui/icons';

  export default function NavigationMenuWithIcon() {
      return (
          <div className="space-y-6">
              <div>
                  <h4 className="text-sm font-medium mb-2">아이콘과 텍스트 조합</h4>
                  <NavigationMenu.Root aria-label="Navigation with icons and text">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" className="flex items-center gap-2">
                                  <HomeIcon size={16} />홈
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link
                                  href="#"
                                  current
                                  className="flex items-center gap-2"
                              >
                                  <StarIcon size={16} />
                                  즐겨찾기
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" className="flex items-center gap-2">
                                  <UserIcon size={16} />
                                  프로필
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" className="flex items-center gap-2">
                                  <SettingIcon size={16} />
                                  설정
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </div>

              <div>
                  <h4 className="text-sm font-medium mb-2">아이콘만 사용</h4>
                  <NavigationMenu.Root aria-label="Navigation with icons only">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link
                                  href="#"
                                  className="flex items-center justify-center"
                                  aria-label="홈"
                              >
                                  <HomeIcon size={20} />
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link
                                  href="#"
                                  current
                                  className="flex items-center justify-center"
                                  aria-label="즐겨찾기"
                              >
                                  <StarIcon size={20} />
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link
                                  href="#"
                                  className="flex items-center justify-center"
                                  aria-label="프로필"
                              >
                                  <UserIcon size={20} />
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link
                                  href="#"
                                  className="flex items-center justify-center"
                                  aria-label="설정"
                              >
                                  <SettingIcon size={20} />
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </div>

              <div>
                  <h4 className="text-sm font-medium mb-2">세로 방향에서의 아이콘</h4>
                  <NavigationMenu.Root
                      direction="vertical"
                      aria-label="Vertical navigation with icons"
                  >
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" className="flex items-center gap-3">
                                  <HomeIcon size={16} />
                                  대시보드
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link
                                  href="#"
                                  current
                                  className="flex items-center gap-3"
                              >
                                  <StarIcon size={16} />
                                  즐겨찾기
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="#" className="flex items-center gap-3">
                                  <UserIcon size={16} />
                                  사용자 관리
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link
                                  href="#"
                                  disabled
                                  className="flex items-center gap-3"
                              >
                                  <SettingIcon size={16} />
                                  시스템 설정
                              </NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </div>
          </div>
      );
  }

  ```
</Demo>

### With Popup

팝오버 형태로 사용합니다.

<Demo name="components/(components)/navigation-menu/demos/with-popup">
  ```tsx
  import { NavigationMenu, VStack } from '@vapor-ui/core';

  export default function NavigationMenuSelected() {
      return (
          <div className="space-y-4">
              <div>
                  <h4 className="text-sm font-medium mb-2">선택된 상태 표시</h4>
                  <NavigationMenu.Root
                      defaultValue={'item1'}
                      aria-label="Navigation with selected link"
                  >
                      <NavigationMenu.List>
                          <NavigationMenu.Item value="item1">
                              <NavigationMenu.TriggerPrimitive>
                                  아이템 1
                                  <NavigationMenu.TriggerIndicatorPrimitive />
                              </NavigationMenu.TriggerPrimitive>

                              <NavigationMenu.Content>
                                  <VStack>내용물 1</VStack>
                              </NavigationMenu.Content>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item value="item2">
                              <NavigationMenu.TriggerPrimitive>
                                  아이템 2
                                  <NavigationMenu.TriggerIndicatorPrimitive />
                              </NavigationMenu.TriggerPrimitive>

                              <NavigationMenu.Content>
                                  <VStack>내용물 2</VStack>
                              </NavigationMenu.Content>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item value="item3">
                              <NavigationMenu.TriggerPrimitive>
                                  아이템 3
                                  <NavigationMenu.TriggerIndicatorPrimitive />
                              </NavigationMenu.TriggerPrimitive>

                              <NavigationMenu.Content>
                                  <VStack>내용물 3</VStack>
                              </NavigationMenu.Content>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>

                      <NavigationMenu.PortalPrimitive keepMounted>
                          <NavigationMenu.PositionerPrimitive>
                              <NavigationMenu.PopupPrimitive>
                                  <NavigationMenu.ViewportPrimitive />
                              </NavigationMenu.PopupPrimitive>
                          </NavigationMenu.PositionerPrimitive>
                      </NavigationMenu.PortalPrimitive>
                  </NavigationMenu.Root>
              </div>
          </div>
      );
  }

  ```
</Demo>

### Flexible Usage

NavigationMenu의 모든 프리셋 컴포넌트를 분리하여 사용합니다.

<Demo name="components/(components)/navigation-menu/demos/flexible">
  ```tsx
  import { NavigationMenu } from '@vapor-ui/core';

  export default function NavigationMenuSelected() {
      return (
          <div className="space-y-4">
              <NavigationMenu.Root aria-label="Navigation with selected link">
                  <NavigationMenu.List>
                      <NavigationMenu.Item>
                          <NavigationMenu.Link href="#">홈</NavigationMenu.Link>
                      </NavigationMenu.Item>
                      <NavigationMenu.Item value="1">
                          <NavigationMenu.TriggerPrimitive>
                              아이템
                              <NavigationMenu.TriggerIndicatorPrimitive />
                          </NavigationMenu.TriggerPrimitive>

                          <NavigationMenu.Content>내용물</NavigationMenu.Content>
                      </NavigationMenu.Item>
                  </NavigationMenu.List>

                  <NavigationMenu.PortalPrimitive>
                      <NavigationMenu.PositionerPrimitive>
                          <NavigationMenu.PopupPrimitive>
                              <NavigationMenu.ViewportPrimitive />
                          </NavigationMenu.PopupPrimitive>
                      </NavigationMenu.PositionerPrimitive>
                  </NavigationMenu.PortalPrimitive>
              </NavigationMenu.Root>
          </div>
      );
  }

  ```
</Demo>

## 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.<br /><br />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.<br />When non-nullish, the menu will be open. When nullish, the menu will be closed.<br /><br />To render an uncontrolled navigation menu, use the `defaultValue` prop instead.                                                                                                                                                                              |
| `className`            | `string`, `function`                                   | -            | CSS class applied to the element, or a function that<br />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<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                 |
| `actionsRef`           | `React.RefObject<NavigationMenu.Root.Actions \| null>` | -            | A ref to imperative actions.<br />- `unmount`: Ends the closing phase of the navigation menu popup after an externally controlled closing animation finishes.<br />Call `preventUnmountOnClose()` in `onValueChange` first, otherwise the navigation menu popup completes closing on its own.<br />Whether it leaves the DOM is decided by `keepMounted` on the portal.<br />- `close`: Closes the navigation menu imperatively when called. |
| `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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.<br />If no value is provided, a unique ID will be generated automatically.<br />Use when controlling the navigation menu programmatically.      |
| `className` | `string`, `function`              | -       | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />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 `&lt;a&gt;` element. Takes precedence over `disabled` on `NavigationMenu.Root`.                              |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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 `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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 `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br />Ensures the content is present during server-side rendering for web crawlers.                                              |
| `render`      | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function`                                                         | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `container`   | `HTMLElement`, `ShadowRoot`, `React.RefObject<HTMLElement \| ShadowRoot \| null>`, `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `style`                 | `React.CSSProperties`, `function`                                                   | -                    | Style applied to the element, or a function that<br />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.<br />Also accepts a function that returns the offset to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `anchor`                | `Element`, `VirtualElement`, `React.RefObject<Element \| null>`, `function`, `null` | -                    | An element to position the popup against.<br />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.<br /><br />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.<br /><br />`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):<br />- `'flip'`: keep the requested side when it fits; otherwise try the opposite side<br />  (`top` and `bottom`, or `left` and `right`).<br />- `'shift'`: never change side; keep the requested side and move the popup within<br />  the clipping boundary so it stays visible.<br />- `'none'`: do not correct side-axis overflow.<br /><br />`align` controls overflow on the alignment axis (`start`/`center`/`end`):<br />- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.<br />- `'shift'`: keep side and requested alignment, then nudge the popup along the<br />  alignment axis to fit.<br />- `'none'`: do not correct alignment-axis overflow.<br /><br />`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the<br />preferred axis cannot fit:<br />- `'start'`: allow perpendicular fallback and try the logical start side first<br />  (`top` before `bottom`, or `left` before `right` in LTR).<br />- `'end'`: allow perpendicular fallback and try the logical end side first<br />  (`bottom` before `top`, or `right` before `left` in LTR).<br />- `'none'`: do not fallback to the perpendicular axis.<br /><br />When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.<br />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.<br />May automatically change to avoid collisions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `sideOffset`            | `number`, `function`                                                                | `10`                 | Distance between the anchor and the popup in pixels.<br />Also accepts a function that returns the distance to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `sticky`                | `boolean`                                                                           | `false`              | Whether to maintain the popup in the viewport after<br />the anchor element was scrolled out of view.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `render`                | `ReactElement`, `function`                                                          | -                    | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `popupElement`      | `ReactElement<NavigationMenuPopupPrimitive.Props>`      | -       | Replaces the default `NavigationMenu.PopupPrimitive`. Use to change the panel that holds the content.                                                                                                     |
| `portalElement`     | `ReactElement<NavigationMenuPortalPrimitive.Props>`     | -       | Replaces the default `NavigationMenu.PortalPrimitive`. Use to change the portal container.                                                                                                                |
| `positionerElement` | `ReactElement<NavigationMenuPositionerPrimitive.Props>` | -       | 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<br />returns a style object based on the component's state.                                                                                              |
| `render`            | `ReactElement`, `function`                              | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.

<Demo name="components/(components)/popover/demos/default-popover">
  ```tsx
  'use client';

  import { Button, Popover } from '@vapor-ui/core';

  export default function DefaultPopover() {
      return (
          <Popover.Root>
              <Popover.Trigger render={<Button variant="outline" />}>팝오버 열기</Popover.Trigger>
              <Popover.Popup>
                  <Popover.Title>알림</Popover.Title>
                  <Popover.Description>새로운 메시지 3개와 알림 1개가 있습니다.</Popover.Description>
              </Popover.Popup>
          </Popover.Root>
      );
  }

  ```
</Demo>

## Property

***

### PositionerProps

Popover가 나타날 위치와 정렬을 설정합니다.

<Demo name="components/(components)/popover/demos/popover-positioning">
  ```tsx
  'use client';

  import { Button, HStack, Popover, Text, VStack } from '@vapor-ui/core';

  export default function PopoverPositioning() {
      return (
          <HStack $css={{ gap: '$400' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      Side
                  </Text>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          top
                      </Text>
                      <Popover.Root>
                          <Popover.Trigger render={<Button variant="outline" />}>
                              상단 팝오버
                          </Popover.Trigger>
                          <Popover.PortalPrimitive>
                              <Popover.PositionerPrimitive side="top">
                                  <Popover.PopupPrimitive>
                                      <Popover.Title>상단 팝오버</Popover.Title>
                                      <Popover.Description>
                                          트리거 위쪽에 표시되는 팝오버입니다.
                                      </Popover.Description>
                                  </Popover.PopupPrimitive>
                              </Popover.PositionerPrimitive>
                          </Popover.PortalPrimitive>
                      </Popover.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          right
                      </Text>
                      <Popover.Root>
                          <Popover.Trigger render={<Button variant="outline" />}>
                              우측 팝오버
                          </Popover.Trigger>
                          <Popover.PortalPrimitive>
                              <Popover.PositionerPrimitive side="right">
                                  <Popover.PopupPrimitive>
                                      <Popover.Title>우측 팝오버</Popover.Title>
                                      <Popover.Description>
                                          트리거 오른쪽에 표시되는 팝오버입니다.
                                      </Popover.Description>
                                  </Popover.PopupPrimitive>
                              </Popover.PositionerPrimitive>
                          </Popover.PortalPrimitive>
                      </Popover.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          bottom
                      </Text>
                      <Popover.Root>
                          <Popover.Trigger render={<Button variant="outline" />}>
                              하단 팝오버
                          </Popover.Trigger>
                          <Popover.PortalPrimitive>
                              <Popover.PositionerPrimitive side="bottom">
                                  <Popover.PopupPrimitive>
                                      <Popover.Title>하단 팝오버</Popover.Title>
                                      <Popover.Description>
                                          트리거 아래쪽에 표시되는 팝오버입니다.
                                      </Popover.Description>
                                  </Popover.PopupPrimitive>
                              </Popover.PositionerPrimitive>
                          </Popover.PortalPrimitive>
                      </Popover.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          left
                      </Text>
                      <Popover.Root>
                          <Popover.Trigger render={<Button variant="outline" />}>
                              좌측 팝오버
                          </Popover.Trigger>
                          <Popover.PortalPrimitive>
                              <Popover.PositionerPrimitive side="left">
                                  <Popover.PopupPrimitive>
                                      <Popover.Title>좌측 팝오버</Popover.Title>
                                      <Popover.Description>
                                          트리거 왼쪽에 표시되는 팝오버입니다.
                                      </Popover.Description>
                                  </Popover.PopupPrimitive>
                              </Popover.PositionerPrimitive>
                          </Popover.PortalPrimitive>
                      </Popover.Root>
                  </HStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      Alignment
                  </Text>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          start
                      </Text>
                      <Popover.Root>
                          <Popover.Trigger render={<Button variant="outline" />}>
                              시작점 정렬
                          </Popover.Trigger>
                          <Popover.PortalPrimitive>
                              <Popover.PositionerPrimitive align="start">
                                  <Popover.PopupPrimitive>
                                      <Popover.Title>시작점 정렬</Popover.Title>
                                      <Popover.Description>
                                          트리거의 시작점에 정렬된 팝오버입니다.
                                      </Popover.Description>
                                  </Popover.PopupPrimitive>
                              </Popover.PositionerPrimitive>
                          </Popover.PortalPrimitive>
                      </Popover.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          center
                      </Text>
                      <Popover.Root>
                          <Popover.Trigger render={<Button variant="outline" />}>
                              중앙 정렬
                          </Popover.Trigger>
                          <Popover.PortalPrimitive>
                              <Popover.PositionerPrimitive align="center">
                                  <Popover.PopupPrimitive>
                                      <Popover.Title>중앙 정렬</Popover.Title>
                                      <Popover.Description>
                                          트리거의 중앙에 정렬된 팝오버입니다.
                                      </Popover.Description>
                                  </Popover.PopupPrimitive>
                              </Popover.PositionerPrimitive>
                          </Popover.PortalPrimitive>
                      </Popover.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          end
                      </Text>
                      <Popover.Root>
                          <Popover.Trigger render={<Button variant="outline" />}>
                              끝점 정렬
                          </Popover.Trigger>
                          <Popover.PortalPrimitive>
                              <Popover.PositionerPrimitive align="end">
                                  <Popover.PopupPrimitive>
                                      <Popover.Title>끝점 정렬</Popover.Title>
                                      <Popover.Description>
                                          트리거의 끝점에 정렬된 팝오버입니다.
                                      </Popover.Description>
                                  </Popover.PopupPrimitive>
                              </Popover.PositionerPrimitive>
                          </Popover.PortalPrimitive>
                      </Popover.Root>
                  </HStack>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

### Offset

Popover와 트리거 간의 거리를 조정합니다.

<Demo name="components/(components)/popover/demos/popover-offset">
  ```tsx
  'use client';

  import { Button, HStack, Popover, Text, VStack } from '@vapor-ui/core';

  export default function PopoverOffset() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-28" typography="body3" foreground="hint-100">
                      default
                  </Text>
                  <Popover.Root>
                      <Popover.Trigger render={<Button variant="outline" />}>
                          기본 오프셋
                      </Popover.Trigger>
                      <Popover.Popup>
                          <Popover.Title>기본 오프셋</Popover.Title>
                          <Popover.Description>
                              기본 8px 오프셋이 적용된 팝오버입니다.
                          </Popover.Description>
                      </Popover.Popup>
                  </Popover.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-28" typography="body3" foreground="hint-100">
                      sideOffset 16
                  </Text>
                  <Popover.Root>
                      <Popover.Trigger render={<Button variant="outline" />}>
                          사이드 오프셋 16px
                      </Popover.Trigger>
                      <Popover.PortalPrimitive>
                          <Popover.PositionerPrimitive sideOffset={16}>
                              <Popover.PopupPrimitive>
                                  <Popover.Title>사이드 오프셋 16px</Popover.Title>
                                  <Popover.Description>
                                      트리거로부터 16px 떨어진 팝오버입니다.
                                  </Popover.Description>
                              </Popover.PopupPrimitive>
                          </Popover.PositionerPrimitive>
                      </Popover.PortalPrimitive>
                  </Popover.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-28" typography="body3" foreground="hint-100">
                      alignOffset 100
                  </Text>
                  <Popover.Root>
                      <Popover.Trigger render={<Button variant="outline" />}>
                          정렬 오프셋 100px
                      </Popover.Trigger>
                      <Popover.PortalPrimitive>
                          <Popover.PositionerPrimitive alignOffset={100}>
                              <Popover.PopupPrimitive>
                                  <Popover.Title>정렬 오프셋 100px</Popover.Title>
                                  <Popover.Description>
                                      정렬 축에서 100px 이동한 팝오버입니다.
                                  </Popover.Description>
                              </Popover.PopupPrimitive>
                          </Popover.PositionerPrimitive>
                      </Popover.PortalPrimitive>
                  </Popover.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-28" typography="body3" foreground="hint-100">
                      combined
                  </Text>
                  <Popover.Root>
                      <Popover.Trigger render={<Button variant="outline" />}>
                          복합 오프셋
                      </Popover.Trigger>
                      <Popover.PortalPrimitive>
                          <Popover.PositionerPrimitive sideOffset={24} alignOffset={-100}>
                              <Popover.PopupPrimitive>
                                  <Popover.Title>복합 오프셋</Popover.Title>
                                  <Popover.Description>
                                      사이드 24px, 정렬 -100px 오프셋이 적용된 팝오버입니다.
                                  </Popover.Description>
                              </Popover.PopupPrimitive>
                          </Popover.PositionerPrimitive>
                      </Popover.PortalPrimitive>
                  </Popover.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### Content Variations

간단한 텍스트부터 복잡한 상호작용 요소까지 다양한 콘텐츠를 표시합니다.

<Demo name="components/(components)/popover/demos/popover-content">
  ```tsx
  'use client';

  import { Button, HStack, Popover, Text, VStack } from '@vapor-ui/core';

  export default function PopoverPopup() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      text
                  </Text>
                  <Popover.Root>
                      <Popover.Trigger render={<Button variant="outline" />}>
                          간단한 텍스트
                      </Popover.Trigger>
                      <Popover.Popup>간단한 팝오버 메시지입니다.</Popover.Popup>
                  </Popover.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      title + desc
                  </Text>
                  <Popover.Root>
                      <Popover.Trigger render={<Button variant="outline" />}>
                          제목과 설명
                      </Popover.Trigger>
                      <Popover.Popup>
                          <Popover.Title>알림</Popover.Title>
                          <Popover.Description>
                              새로운 업데이트가 있습니다. 확인해보세요.
                          </Popover.Description>
                      </Popover.Popup>
                  </Popover.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      interactive
                  </Text>
                  <Popover.Root>
                      <Popover.Trigger render={<Button variant="outline" />}>
                          상호작용 콘텐츠
                      </Popover.Trigger>
                      <Popover.Popup>
                          <Popover.Title>설정</Popover.Title>
                          <Popover.Description>원하는 설정을 선택하세요.</Popover.Description>
                          <VStack $css={{ gap: '$100', marginTop: '$100' }}>
                              <Popover.Close
                                  render={
                                      <Button size="sm" className="w-full">
                                          옵션 1
                                      </Button>
                                  }
                              />

                              <Popover.Close
                                  render={
                                      <Button size="sm" variant="outline" className="w-full">
                                          옵션 2
                                      </Button>
                                  }
                              />
                          </VStack>
                      </Popover.Popup>
                  </Popover.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Props Table

***

### Popover.Root

| Prop                   | Type                                            | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ---------------------- | ----------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultOpen`          | `boolean`                                       | `false` | Whether the popover is initially open.<br /><br />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<Popover.Root.Actions \| null>` | -       | A ref to imperative actions.<br />- `unmount`: Ends the closing phase of the popover after an externally controlled closing animation finishes.<br />Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the popover completes closing on its own.<br />Whether it leaves the DOM is decided by `keepMounted` on the portal.<br />- `close`: Closes the popover imperatively when called.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `children`             | `ReactNode`, `function`                         | -       | The content of the popover.<br />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.<br />This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `handle`               | `PopoverHandle<unknown>`                        | -       | A handle to associate the popover with a trigger.<br />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.<br />- `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled.<br />- `false`: user interaction with the rest of the document is allowed.<br />- `'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.<br /><br />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.<br /><br />When `modal` is `true`, focus trapping is enabled only if `&lt;Popover.Close&gt;` is rendered<br />inside `&lt;Popover.Popup&gt;`. It can be visually hidden with your own CSS if needed, such as<br />Tailwind's `sr-only` utility.<br /><br />When `modal` is `'trap-focus'`, render `&lt;Popover.Close&gt;` inside `&lt;Popover.Popup&gt;` so touch<br />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.<br />This is useful in conjunction with the `open` prop to create a controlled popover.<br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br />Specified in milliseconds.<br /><br />Requires the `openOnHover` prop.                                                         |
| `delay`        | `number`                          | `300`   | How long to wait before the popover may be opened on hover. Specified in milliseconds.<br /><br />Requires the `openOnHover` prop.                                                                        |
| `handle`       | `PopoverHandle<unknown>`          | -       | A handle to associate the trigger with a popover.                                                                                                                                                         |
| `nativeButton` | `boolean`                         | `true`  | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `portalElement`     | `ReactElement<PopoverPortalPrimitive.Props>`                  | -       | Replaces the default `Popover.PortalPrimitive`. Use to change the portal container.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `positionerElement` | `ReactElement<PopoverPositionerPrimitive.Props>`              | -       | 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<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `finalFocus`        | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the popover is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the popover is opened.<br />By default, focus moves to the first tabbable element inside the popup, except when the popover<br />is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (first tabbable element or popup).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function`                                                         | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `container`   | `HTMLElement`, `ShadowRoot`, `React.RefObject<HTMLElement \| ShadowRoot \| null>`, `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `style`                 | `React.CSSProperties`, `function`                                                   | -                    | Style applied to the element, or a function that<br />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.<br />Also accepts a function that returns the offset to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `anchor`                | `Element`, `VirtualElement`, `React.RefObject<Element \| null>`, `function`, `null` | -                    | An element to position the popup against.<br />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.<br /><br />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.<br /><br />`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):<br />- `'flip'`: keep the requested side when it fits; otherwise try the opposite side<br />  (`top` and `bottom`, or `left` and `right`).<br />- `'shift'`: never change side; keep the requested side and move the popup within<br />  the clipping boundary so it stays visible.<br />- `'none'`: do not correct side-axis overflow.<br /><br />`align` controls overflow on the alignment axis (`start`/`center`/`end`):<br />- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.<br />- `'shift'`: keep side and requested alignment, then nudge the popup along the<br />  alignment axis to fit.<br />- `'none'`: do not correct alignment-axis overflow.<br /><br />`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the<br />preferred axis cannot fit:<br />- `'start'`: allow perpendicular fallback and try the logical start side first<br />  (`top` before `bottom`, or `left` before `right` in LTR).<br />- `'end'`: allow perpendicular fallback and try the logical end side first<br />  (`bottom` before `top`, or `right` before `left` in LTR).<br />- `'none'`: do not fallback to the perpendicular axis.<br /><br />When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.<br />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.<br />May automatically change to avoid collisions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `sideOffset`            | `number`, `function`                                                                | `10`                 | Distance between the anchor and the popup in pixels.<br />Also accepts a function that returns the distance to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `sticky`                | `boolean`                                                                           | `false`              | Whether to maintain the popup in the viewport after<br />the anchor element was scrolled out of view.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `render`                | `ReactElement`, `function`                                                          | -                    | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `style`        | `React.CSSProperties`, `function`                             | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `finalFocus`   | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the popover is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the popover is opened.<br />By default, focus moves to the first tabbable element inside the popup, except when the popover<br />is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (first tabbable element or popup).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `nativeButton` | `boolean`                         | `true`  | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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를 사용합니다.

<Demo name="components/(components)/progress-bar/demos/default-progress-bar">
  ```tsx
  import { ProgressBar } from '@vapor-ui/core';

  export default function DefaultProgressBar() {
      return (
          <ProgressBar.Root value={42} $css={{ width: '20rem' }}>
              <ProgressBar.Label>파일 업로드</ProgressBar.Label>
              <ProgressBar.Value />
              <ProgressBar.Track />
          </ProgressBar.Root>
      );
  }

  ```
</Demo>

## Property

***

### Size

Track의 높이를 설정합니다.

<Demo name="components/(components)/progress-bar/demos/progress-bar-size">
  ```tsx
  import { ProgressBar, VStack } from '@vapor-ui/core';

  export default function ProgressBarSize() {
      return (
          <VStack $css={{ gap: '$300', width: '20rem' }}>
              {(['sm', 'md', 'lg'] as const).map((size) => (
                  <ProgressBar.Root key={size} value={42} size={size}>
                      <ProgressBar.Label>{size}</ProgressBar.Label>
                      <ProgressBar.Value />
                      <ProgressBar.Track />
                  </ProgressBar.Root>
              ))}
          </VStack>
      );
  }

  ```
</Demo>

### Type

작업의 상태를 나타냅니다.

<Demo name="components/(components)/progress-bar/demos/progress-bar-type">
  ```tsx
  import { ProgressBar, VStack } from '@vapor-ui/core';

  export default function ProgressBarType() {
      return (
          <VStack $css={{ gap: '$300', width: '20rem' }}>
              <ProgressBar.Root value={42}>
                  <ProgressBar.Label>report.pdf 업로드</ProgressBar.Label>
                  <ProgressBar.Value />
                  <ProgressBar.Track />
                  <ProgressBar.Description>10MB 중 4.2MB를 전송했습니다.</ProgressBar.Description>
              </ProgressBar.Root>

              <ProgressBar.Root value={42} type="error">
                  <ProgressBar.Label>report.pdf 업로드</ProgressBar.Label>
                  <ProgressBar.Value />
                  <ProgressBar.Track />
                  <ProgressBar.Description>
                      업로드에 실패했습니다. 파일이 10MB를 넘습니다.
                  </ProgressBar.Description>
              </ProgressBar.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Value Text

`ProgressBar.Value`는 선언한 범위를 기준으로 값을 백분율로 환산해 보여줍니다.

백분율 대신 다른 표현이 필요하면 두 곳을 함께 바꿉니다. `getAriaValueText`는 보조기기가 듣는 `aria-valuetext`를, `ProgressBar.Value`의 `children` 함수는 화면 텍스트를 정합니다. 한쪽만 바꾸면 보는 사람과 듣는 사람이 다른 값을 받습니다.

<Demo name="components/(components)/progress-bar/demos/progress-bar-value-text">
  ```tsx
  import { ProgressBar, VStack } from '@vapor-ui/core';

  export default function ProgressBarValueText() {
      return (
          <VStack $css={{ gap: '$300', width: '20rem' }}>
              <ProgressBar.Root value={15} min={10} max={20}>
                  <ProgressBar.Label>디스크 검사</ProgressBar.Label>
                  <ProgressBar.Value />
                  <ProgressBar.Track />
              </ProgressBar.Root>

              <ProgressBar.Root
                  value={3}
                  max={8}
                  getAriaValueText={(_, value) => `8개 중 ${value}개`}
              >
                  <ProgressBar.Label>파일 업로드</ProgressBar.Label>
                  <ProgressBar.Value>{(_, value) => `8개 중 ${value}개`}</ProgressBar.Value>
                  <ProgressBar.Track />
              </ProgressBar.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Indeterminate

`value`가 `null`이면 진행률을 알 수 없는 상태입니다. 40% 폭의 세그먼트가 Track을 한 방향으로 훑고, `aria-valuenow`는 쓰이지 않습니다.

<Demo name="components/(components)/progress-bar/demos/progress-bar-indeterminate">
  ```tsx
  import { ProgressBar } from '@vapor-ui/core';

  export default function ProgressBarIndeterminate() {
      return (
          <ProgressBar.Root value={null} $css={{ width: '20rem' }}>
              <ProgressBar.Label>서버 응답 대기 중</ProgressBar.Label>
              <ProgressBar.Value>{() => '처리 중'}</ProgressBar.Value>
              <ProgressBar.Track />
          </ProgressBar.Root>
      );
  }

  ```
</Demo>

## Examples

***

### Description

`ProgressBar.Description`은 진행 상황을 말로 풀어 씁니다. 남은 용량, 실패 사유, 다음에 할 일 같은 내용입니다.

`ProgressBar.Root`의 `type`이 `error`이면 이 텍스트가 danger 색이 되고 막대는 danger 색으로 끝까지 찹니다.

단계마다 다른 문구가 필요하면 `render`나 `className` 함수의 두 번째 인수 `state.status`를 보세요. 값이 없으면 `indeterminate`, 최댓값에 닿으면 `complete`, 그 사이는 `progressing`입니다.

<Demo name="components/(components)/progress-bar/demos/progress-bar-description">
  ```tsx
  'use client';

  import { useState } from 'react';

  import { Button, ProgressBar, VStack } from '@vapor-ui/core';

  export default function ProgressBarDescription() {
      const [failed, setFailed] = useState(false);

      return (
          <VStack $css={{ gap: '$300', width: '20rem' }}>
              <ProgressBar.Root value={42} type={failed ? 'error' : 'default'}>
                  <ProgressBar.Label>report.pdf 업로드</ProgressBar.Label>
                  <ProgressBar.Value />
                  <ProgressBar.Track />
                  <ProgressBar.Description>
                      {failed
                          ? '업로드에 실패했습니다. 파일이 10MB를 넘습니다.'
                          : '10MB 중 4.2MB를 전송했습니다.'}
                  </ProgressBar.Description>
              </ProgressBar.Root>

              <Button onClick={() => setFailed((prev) => !prev)}>
                  {failed ? '되돌리기' : '실패로 보내기'}
              </Button>
          </VStack>
      );
  }

  ```
</Demo>

## 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<br />returns a class based on the component's state.                                                                                                 |
| `style`            | `React.CSSProperties`, `function` | -         | Style applied to the element, or a function that<br />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.<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `indicatorElement` | `ReactElement<ProgressBarIndicatorPrimitive.Props>` | -       | Replaces the `ProgressBar.IndicatorPrimitive` rendered inside the track by default.                                                                                                                       |
| `style`            | `React.CSSProperties`, `function`                   | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`           | `ReactElement`, `function`                          | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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은 콘텐츠를 페이지 단위로 탐색할 수 있도록 돕는 네비게이션 컴포넌트입니다.

<Demo name="components/(components)/pagination/demos/default-pagination">
  ```tsx
  import { Pagination } from '@vapor-ui/core';

  export default function DefaultPagination() {
      return (
          <Pagination.Root totalPages={5}>
              <Pagination.Previous />
              <Pagination.Items />
              <Pagination.Next />
          </Pagination.Root>
      );
  }

  ```
</Demo>

## Property

### Sibling Count

Pagination에서 현재 페이지 주변에 표시할 페이지 번호의 개수를 설정합니다.

<Demo name="components/(components)/pagination/demos/pagination-sibling-count">
  ```tsx
  import { Pagination, Text, VStack } from '@vapor-ui/core';

  export default function PaginationSiblingCount() {
      return (
          <VStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="subtitle1">1 Sibling</Text>
                  <Pagination.Root defaultPage={8} totalPages={20} siblingCount={1}>
                      <Pagination.Previous />
                      <Pagination.Items />
                      <Pagination.Next />
                  </Pagination.Root>
              </VStack>

              <VStack $css={{ gap: '$050' }}>
                  <Text typography="subtitle1">3 Sibling</Text>
                  <Pagination.Root defaultPage={8} totalPages={20} siblingCount={3}>
                      <Pagination.Previous />
                      <Pagination.Items />
                      <Pagination.Next />
                  </Pagination.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### Boundary Count

Pagination의 시작과 끝에 항상 표시할 페이지 번호의 개수를 설정합니다.

<Demo name="components/(components)/pagination/demos/pagination-boundary-count">
  ```tsx
  import { Pagination, Text, VStack } from '@vapor-ui/core';

  export default function PaginationBoundaryCount() {
      return (
          <VStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="subtitle1">1 Boundary</Text>
                  <Pagination.Root defaultPage={8} totalPages={20} boundaryCount={1}>
                      <Pagination.Previous />
                      <Pagination.Items />
                      <Pagination.Next />
                  </Pagination.Root>
              </VStack>

              <VStack $css={{ gap: '$050' }}>
                  <Text typography="subtitle1">3 Boundary</Text>
                  <Pagination.Root defaultPage={8} totalPages={20} boundaryCount={3}>
                      <Pagination.Previous />
                      <Pagination.Items />
                      <Pagination.Next />
                  </Pagination.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

Pagination 버튼들의 비활성화 여부를 결정하는 옵션입니다.

<Demo name="components/(components)/pagination/demos/pagination-disabled">
  ```tsx
  import { Pagination } from '@vapor-ui/core';

  export default function PaginationDisabled() {
      return (
          <Pagination.Root totalPages={5} disabled>
              <Pagination.Previous />
              <Pagination.Items />
              <Pagination.Next />
          </Pagination.Root>
      );
  }

  ```
</Demo>

### Size

Pagination의 크기를 설정합니다.

<Demo name="components/(components)/pagination/demos/pagination-size">
  ```tsx
  import { HStack, Pagination, Text, VStack } from '@vapor-ui/core';

  export default function PaginationSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <Pagination.Root totalPages={5} size="sm">
                      <Pagination.Previous />
                      <Pagination.Items />
                      <Pagination.Next />
                  </Pagination.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <Pagination.Root totalPages={5} size="md">
                      <Pagination.Previous />
                      <Pagination.Items />
                      <Pagination.Next />
                  </Pagination.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <Pagination.Root totalPages={5} size="lg">
                      <Pagination.Previous />
                      <Pagination.Items />
                      <Pagination.Next />
                  </Pagination.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <Pagination.Root totalPages={5} size="xl">
                      <Pagination.Previous />
                      <Pagination.Items />
                      <Pagination.Next />
                  </Pagination.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

### Controlled

Pagination 컴포넌트를 제어 컴포넌트로 사용하는 예시입니다.

<Demo name="components/(components)/pagination/demos/pagination-controlled">
  ```tsx
  import { useState } from 'react';

  import { Button, HStack, Pagination, Text, VStack } from '@vapor-ui/core';

  export default function PaginationControlled() {
      const [page, setPage] = useState(7);

      return (
          <VStack $css={{ gap: '$200' }}>
              <Pagination.Root totalPages={20} page={page} onPageChange={setPage}>
                  <Pagination.Previous />
                  <Pagination.Items />
                  <Pagination.Next />
              </Pagination.Root>

              <HStack $css={{ justifyContent: 'space-between', alignItems: 'center', gap: '$100' }}>
                  <Text typography="subtitle1">Current Page is, {page}</Text>

                  <Button variant="ghost" onClick={() => setPage(7)}>
                      Move to Page 7
                  </Button>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Props Table

***

### 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<br />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<br />returns a style object based on the component's state.                                                                                              |
| `render`        | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />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<br />returns a style object based on the component's state.                                                                                              |
| `render`        | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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과 함께 사용하여 라디오 버튼 그룹을 구성할 수 있습니다.

<Demo name="components/(components)/radio/demos/default-radio-group">
  ```tsx
  import { HStack, Radio, RadioGroup, Text, VStack } from '@vapor-ui/core';

  export default function DefaultRadioGroup() {
      return (
          <RadioGroup.Root name="fruits">
              <VStack $css={{ gap: '$100' }}>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Radio.Root value="apple" />
                          Apple
                      </HStack>
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Radio.Root value="orange" />
                          Orange
                      </HStack>
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Radio.Root value="banana" disabled />
                          Banana (Disabled)
                      </HStack>
                  </Text>
              </VStack>
          </RadioGroup.Root>
      );
  }

  ```
</Demo>

## Property

***

### Size

RadioGroup의 크기를 설정합니다.

<Demo name="components/(components)/radio/demos/radio-group-size">
  ```tsx
  import { HStack, Radio, RadioGroup, Text, VStack } from '@vapor-ui/core';

  export default function RadioGroupSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'flex-start' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <RadioGroup.Root name="size-md" size="md">
                      <VStack $css={{ gap: '$100' }}>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="md1" />
                                  Medium Option 1
                              </HStack>
                          </Text>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="md2" />
                                  Medium Option 2
                              </HStack>
                          </Text>
                      </VStack>
                  </RadioGroup.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'flex-start' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <RadioGroup.Root name="size-lg" size="lg">
                      <VStack $css={{ gap: '$100' }}>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="lg1" />
                                  Large Option 1
                              </HStack>
                          </Text>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="lg2" />
                                  Large Option 2
                              </HStack>
                          </Text>
                      </VStack>
                  </RadioGroup.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

RadioGroup의 비활성화 상태를 설정합니다.

<Demo name="components/(components)/radio/demos/radio-group-disabled">
  ```tsx
  import { HStack, Radio, RadioGroup, Text, VStack } from '@vapor-ui/core';

  export default function RadioGroupDisabled() {
      return (
          <VStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      individual item disabled
                  </Text>
                  <RadioGroup.Root name="disabled-items" defaultValue="option1">
                      <VStack $css={{ gap: '$100' }}>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="option1" />
                                  Option 1 (Default)
                              </HStack>
                          </Text>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="option2" />
                                  Option 2 (Default)
                              </HStack>
                          </Text>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="option3" disabled />
                                  Option 3 (Disabled)
                              </HStack>
                          </Text>
                      </VStack>
                  </RadioGroup.Root>
              </VStack>

              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      group disabled
                  </Text>
                  <RadioGroup.Root name="disabled-group" disabled defaultValue="group1">
                      <VStack $css={{ gap: '$100' }}>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="group1" />
                                  Group 1
                              </HStack>
                          </Text>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="group2" />
                                  Group 2
                              </HStack>
                          </Text>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="group3" />
                                  Group 3
                              </HStack>
                          </Text>
                      </VStack>
                  </RadioGroup.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### Read Only

RadioGroup의 읽기 전용 상태입니다. 사용자가 값을 변경할 수 없지만 현재 선택된 상태를 확인할 수 있습니다.

<Demo name="components/(components)/radio/demos/radio-readonly">
  ```tsx
  import { HStack, Radio, RadioGroup, Text, VStack } from '@vapor-ui/core';

  export default function RadioReadOnly() {
      return (
          <RadioGroup.Root name="readonly-fruits" defaultValue="apple">
              <VStack $css={{ gap: '$100' }}>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Radio.Root value="apple" readOnly />
                          Read Only (Selected)
                      </HStack>
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Radio.Root value="orange" readOnly />
                          Read Only (Unselected)
                      </HStack>
                  </Text>
              </VStack>
          </RadioGroup.Root>
      );
  }

  ```
</Demo>

## Examples

***

### Direction

Radio 그룹의 방향을 조절할 수 있습니다. VStack과 HStack을 사용하여 세로 및 가로 방향으로 배치할 수 있습니다.

<Demo name="components/(components)/radio/demos/radio-direction">
  ```tsx
  import { HStack, Radio, RadioGroup, Text, VStack } from '@vapor-ui/core';

  export default function RadioDirection() {
      return (
          <VStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      vertical
                  </Text>
                  <RadioGroup.Root name="direction-vertical" defaultValue="v1">
                      <VStack $css={{ gap: '$100' }}>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="v1" />
                                  Option 1
                              </HStack>
                          </Text>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="v2" />
                                  Option 2
                              </HStack>
                          </Text>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="v3" />
                                  Option 3
                              </HStack>
                          </Text>
                      </VStack>
                  </RadioGroup.Root>
              </VStack>

              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      horizontal
                  </Text>
                  <RadioGroup.Root name="direction-horizontal" defaultValue="h1">
                      <HStack $css={{ gap: '$200' }}>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="h1" />
                                  Option 1
                              </HStack>
                          </Text>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="h2" />
                                  Option 2
                              </HStack>
                          </Text>
                          <Text render={<label />} typography="body2">
                              <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                                  <Radio.Root value="h3" />
                                  Option 3
                              </HStack>
                          </Text>
                      </HStack>
                  </RadioGroup.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### Flexible

Radio의 유연한 사용예시입니다.

<Demo name="components/(components)/radio/demos/flexible">
  ```tsx
  import { HStack, Radio, RadioGroup, Text, VStack } from '@vapor-ui/core';

  export default function Flexible() {
      return (
          <RadioGroup.Root name="direction-vertical" defaultValue="v1">
              <RadioGroup.Label>Vertical</RadioGroup.Label>
              <VStack $css={{ gap: '$100' }}>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Radio.Root value="v1">
                              <Radio.IndicatorPrimitive />
                          </Radio.Root>
                          Option 1
                      </HStack>
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Radio.Root value="v2">
                              <Radio.IndicatorPrimitive />
                          </Radio.Root>
                          Option 2
                      </HStack>
                  </Text>
                  <Text render={<label />} typography="body2">
                      <HStack $css={{ gap: '$100', alignItems: 'center' }}>
                          <Radio.Root value="v3">
                              <Radio.IndicatorPrimitive />
                          </Radio.Root>
                          Option 3
                      </HStack>
                  </Text>
              </VStack>
          </RadioGroup.Root>
      );
  }

  ```
</Demo>

## 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.<br /><br />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.<br /><br />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<br />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 `&lt;div&gt;` element.                                                        |
| `style`         | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br />Useful when the radio group is rendered outside the form.                                                                                            |
| `inputRef`      | `React.Ref<HTMLInputElement>`     | -       | 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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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 `&lt;span&gt;` 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<br />returns a class based on the component's state.                                                                                                                      |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                   |
| `disabled`     | `boolean`                         | -       | Whether the component should ignore user interaction.                                                                                                                                                                          |
| `inputRef`     | `React.Ref<HTMLInputElement>`     | -       | A ref to access the hidden input element.                                                                                                                                                                                      |
| `nativeButton` | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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로 표현하여 더 직관적인 사용자 경험을 제공합니다.

<Demo name="components/(components)/radio-card/demos/default-radio-card">
  ```tsx
  import { HStack, RadioCard, RadioGroup } from '@vapor-ui/core';

  export default function DefaultRadioCard() {
      return (
          <RadioGroup.Root name="themes">
              <HStack $css={{ gap: '$100' }}>
                  <RadioCard value="light">Light Theme</RadioCard>
                  <RadioCard value="dark">Dark Theme</RadioCard>
                  <RadioCard value="system" disabled>
                      System (Disabled)
                  </RadioCard>
              </HStack>
          </RadioGroup.Root>
      );
  }

  ```
</Demo>

## Property

***

### Disabled

사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다.

<Demo name="components/(components)/radio-card/demos/radio-card-disabled">
  ```tsx
  import { HStack, RadioCard, RadioGroup, Text, VStack } from '@vapor-ui/core';

  export default function RadioCardDisabled() {
      return (
          <VStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      group disabled
                  </Text>
                  <RadioGroup.Root name="disabled-group" disabled>
                      <HStack $css={{ gap: '$100' }}>
                          <RadioCard value="option1">Option 1</RadioCard>
                          <RadioCard value="option2">Option 2</RadioCard>
                          <RadioCard value="option3">Option 3</RadioCard>
                      </HStack>
                  </RadioGroup.Root>
              </VStack>

              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      individual card disabled
                  </Text>
                  <RadioGroup.Root name="individual-disabled">
                      <HStack $css={{ gap: '$100' }}>
                          <RadioCard value="enabled1">Enabled Option</RadioCard>
                          <RadioCard value="disabled1" disabled>
                              Disabled Option
                          </RadioCard>
                          <RadioCard value="enabled2">Another Enabled Option</RadioCard>
                      </HStack>
                  </RadioGroup.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### Read Only

읽기 전용 상태로, 사용자가 값을 변경할 수 없지만 현재 선택된 상태를 확인할 수 있습니다.

<Demo name="components/(components)/radio-card/demos/radio-card-readonly">
  ```tsx
  import { HStack, RadioCard, RadioGroup, Text, VStack } from '@vapor-ui/core';

  export default function RadioCardReadonly() {
      return (
          <VStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      readOnly
                  </Text>
                  <RadioGroup.Root name="readonly-group" readOnly defaultValue="selected">
                      <HStack $css={{ gap: '$100' }}>
                          <RadioCard value="unselected">Unselected Option</RadioCard>
                          <RadioCard value="selected">Selected Option (Read Only)</RadioCard>
                          <RadioCard value="another">Another Option</RadioCard>
                      </HStack>
                  </RadioGroup.Root>
              </VStack>

              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      normal
                  </Text>
                  <RadioGroup.Root name="normal-group" defaultValue="selected-normal">
                      <HStack $css={{ gap: '$100' }}>
                          <RadioCard value="unselected-normal">Unselected Option</RadioCard>
                          <RadioCard value="selected-normal">Selected Option (Editable)</RadioCard>
                          <RadioCard value="another-normal">Another Option</RadioCard>
                      </HStack>
                  </RadioGroup.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### Simple Usage

RadioGroup.Root와 함께 사용합니다.

<Demo name="components/(components)/radio-card/demos/radio-card-simple">
  ```tsx
  import { useState } from 'react';

  import { HStack, RadioCard, RadioGroup, Text, VStack } from '@vapor-ui/core';

  export default function RadioCardSimple() {
      const [value, setValue] = useState('option1');

      return (
          <VStack $css={{ gap: '$150' }}>
              <Text typography="body3" foreground="hint-100">
                  Selected: {value}
              </Text>
              <RadioGroup.Root
                  name="simple-radio-card"
                  value={value}
                  onValueChange={(newValue) => setValue(newValue as string)}
              >
                  <HStack $css={{ gap: '$100' }}>
                      <RadioCard value="option1">First Option</RadioCard>
                      <RadioCard value="option2">Second Option</RadioCard>
                      <RadioCard value="option3">Third Option</RadioCard>
                  </HStack>
              </RadioGroup.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Direction

VStack과 HStack을 사용하여 세로 및 가로 방향으로 배치합니다.

<Demo name="components/(components)/radio-card/demos/radio-card-direction">
  ```tsx
  import { HStack, RadioCard, RadioGroup, Text, VStack } from '@vapor-ui/core';

  export default function RadioCardDirection() {
      return (
          <VStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      vertical
                  </Text>
                  <RadioGroup.Root name="orientation-vertical">
                      <VStack $css={{ gap: '$100' }}>
                          <RadioCard value="v1">Option 1</RadioCard>
                          <RadioCard value="v2">Option 2</RadioCard>
                          <RadioCard value="v3">Option 3</RadioCard>
                      </VStack>
                  </RadioGroup.Root>
              </VStack>

              <VStack $css={{ gap: '$100' }}>
                  <Text typography="body3" foreground="hint-100">
                      horizontal
                  </Text>
                  <RadioGroup.Root name="orientation-horizontal">
                      <HStack $css={{ gap: '$100' }}>
                          <RadioCard value="h1">Option 1</RadioCard>
                          <RadioCard value="h2">Option 2</RadioCard>
                          <RadioCard value="h3">Option 3</RadioCard>
                      </HStack>
                  </RadioGroup.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### With Rich Content

RadioCard는 고정된 높이가 없어 다양한 콘텐츠를 포함할 수 있습니다. 텍스트, 아이콘, 가격 정보 등 복잡한 레이아웃을 자유롭게 구성할 수 있습니다.

<Demo name="components/(components)/radio-card/demos/radio-card-with-content">
  ```tsx
  import { useState } from 'react';

  import { HStack, RadioCard, RadioGroup, Text, VStack } from '@vapor-ui/core';

  export default function RadioCardWithContent() {
      const [value, setValue] = useState('basic');

      return (
          <div className="space-y-4">
              <Text typography="body2">선택된 플랜: {value}</Text>
              <RadioGroup.Root
                  name="pricing-plan"
                  value={value}
                  onValueChange={(newValue) => setValue(newValue as string)}
              >
                  <HStack $css={{ gap: '$150' }}>
                      <RadioCard value="basic">
                          <VStack $css={{ gap: '$50' }}>
                              <Text typography="subtitle1">Basic</Text>
                              <Text typography="body2" foreground="hint-100">
                                  $9/month
                              </Text>
                              <Text typography="body3" foreground="hint-200">
                                  5 projects included
                              </Text>
                          </VStack>
                      </RadioCard>
                      <RadioCard value="pro">
                          <VStack $css={{ gap: '$50' }}>
                              <Text typography="subtitle1">Pro</Text>
                              <Text typography="body2" foreground="hint-100">
                                  $29/month
                              </Text>
                              <Text typography="body3" foreground="hint-200">
                                  Unlimited projects
                              </Text>
                          </VStack>
                      </RadioCard>
                      <RadioCard value="enterprise">
                          <VStack $css={{ gap: '$50' }}>
                              <Text typography="subtitle1">Enterprise</Text>
                              <Text typography="body2" foreground="hint-100">
                                  Custom pricing
                              </Text>
                              <Text typography="body3" foreground="hint-200">
                                  Advanced features
                              </Text>
                          </VStack>
                      </RadioCard>
                  </HStack>
              </RadioGroup.Root>
          </div>
      );
  }

  ```
</Demo>

## 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 `&lt;span&gt;` 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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `disabled`     | `boolean`                         | -       | Whether the component should ignore user interaction.                                                                                                                                                     |
| `inputRef`     | `React.Ref<HTMLInputElement>`     | -       | A ref to access the hidden input element.                                                                                                                                                                 |
| `nativeButton` | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />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<br />with a different tag, or compose it with another component.<br /><br />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는 사용자가 여러 옵션 중에서 하나를 선택할 수 있는 드롭다운 컴포넌트입니다. 폼 입력, 설정 선택, 필터링 등에 사용되며, 키보드 내비게이션과 접근성을 완벽하게 지원합니다.

<Demo name="components/(components)/select/demos/default-select">
  ```tsx
  import { Select } from '@vapor-ui/core';

  const fonts = [
      { label: 'Sans-serif', value: 'sans-serif' },
      { label: 'Serif', value: 'serif' },
      { label: 'Monospace', value: 'mono' },
      { label: 'Cursive', value: 'cursive' },
  ];

  export default function DefaultSelect() {
      return (
          <Select.Root placeholder="폰트를 선택하세요" items={fonts}>
              <Select.Trigger $css={{ width: '400px' }} />

              <Select.Popup>
                  <Select.Group>
                      <Select.GroupLabel>폰트</Select.GroupLabel>
                      {fonts.map((font) => (
                          <Select.Item key={font.value} value={font.value}>
                              {font.label}
                          </Select.Item>
                      ))}
                  </Select.Group>
              </Select.Popup>
          </Select.Root>
      );
  }

  ```
</Demo>

## Property

***

### Size

Select의 크기를 설정합니다.

<Demo name="components/(components)/select/demos/select-size">
  ```tsx
  import { HStack, Select, Text, VStack } from '@vapor-ui/core';

  export default function SelectSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <SelectTemplate placeholder="Small" size="sm" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <SelectTemplate placeholder="Medium" size="md" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <SelectTemplate placeholder="Large" size="lg" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-8" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <SelectTemplate placeholder="Extra Large" size="xl" />
              </HStack>
          </VStack>
      );
  }

  const SelectTemplate = (props: Select.Root.Props) => {
      return (
          <Select.Root {...props}>
              <Select.Trigger />
              <Select.Popup>
                  <Select.Item value="option1">옵션 1</Select.Item>
                  <Select.Item value="option2">옵션 2</Select.Item>
              </Select.Popup>
          </Select.Root>
      );
  };

  ```
</Demo>

### Positioning

Select 드롭다운이 나타날 위치를 설정합니다. 기본값은 'bottom'입니다.

<Demo name="components/(components)/select/demos/select-positioning">
  ```tsx
  import { HStack, Select } from '@vapor-ui/core';

  export default function SelectPositioning() {
      return (
          <HStack $css={{ maxWidth: '800px', width: '100%', gap: '$250' }}>
              <Select.Root placeholder="Top">
                  <Select.Trigger />
                  <Select.PortalPrimitive>
                      <Select.PositionerPrimitive side="top">
                          <Select.PopupPrimitive>
                              <Select.Item value="option1">옵션 1</Select.Item>
                              <Select.Item value="option2">옵션 2</Select.Item>
                          </Select.PopupPrimitive>
                      </Select.PositionerPrimitive>
                  </Select.PortalPrimitive>
              </Select.Root>

              <Select.Root placeholder="Right">
                  <Select.Trigger />
                  <Select.PortalPrimitive>
                      <Select.PositionerPrimitive side="right">
                          <Select.PopupPrimitive>
                              <Select.Item value="option1">옵션 1</Select.Item>
                              <Select.Item value="option2">옵션 2</Select.Item>
                          </Select.PopupPrimitive>
                      </Select.PositionerPrimitive>
                  </Select.PortalPrimitive>
              </Select.Root>

              <Select.Root placeholder="Bottom">
                  <Select.Trigger />
                  <Select.PortalPrimitive>
                      <Select.PositionerPrimitive side="bottom">
                          <Select.PopupPrimitive>
                              <Select.Item value="option1">옵션 1</Select.Item>
                              <Select.Item value="option2">옵션 2</Select.Item>
                          </Select.PopupPrimitive>
                      </Select.PositionerPrimitive>
                  </Select.PortalPrimitive>
              </Select.Root>

              <Select.Root placeholder="Left">
                  <Select.Trigger />
                  <Select.PortalPrimitive>
                      <Select.PositionerPrimitive side="left">
                          <Select.PopupPrimitive>
                              <Select.Item value="option1">옵션 1</Select.Item>
                              <Select.Item value="option2">옵션 2</Select.Item>
                          </Select.PopupPrimitive>
                      </Select.PositionerPrimitive>
                  </Select.PortalPrimitive>
              </Select.Root>
          </HStack>
      );
  }

  ```
</Demo>

### Controlled State

Select의 선택 상태를 외부에서 제어합니다.

<Demo name="components/(components)/select/demos/select-controlled">
  ```tsx
  'use client';

  import { useState } from 'react';

  import { Button, HStack, Select, Text, VStack } from '@vapor-ui/core';

  const fonts = [
      { label: 'Sans-serif', value: 'sans-serif' },
      { label: 'Serif', value: 'serif' },
      { label: 'Monospace', value: 'mono' },
      { label: 'Cursive', value: 'cursive' },
  ];

  export default function SelectControlled() {
      const [value, setValue] = useState<string>(fonts[0].value);

      const handleValueChange = (newValue: unknown) => {
          setValue(newValue as string);
      };

      return (
          <VStack $css={{ gap: '$200' }}>
              <Select.Root
                  placeholder="폰트 선택"
                  items={fonts}
                  value={value}
                  onValueChange={handleValueChange}
              >
                  <Select.Trigger />

                  <Select.Popup>
                      <Select.Group>
                          <Select.GroupLabel>폰트</Select.GroupLabel>
                          {fonts.map((font) => (
                              <Select.Item key={font.value} value={font.value}>
                                  {font.label}
                              </Select.Item>
                          ))}
                      </Select.Group>
                  </Select.Popup>
              </Select.Root>

              <Text typography="body2" foreground="secondary-200">
                  선택된 값: <code className="bg-gray-100 px-1 rounded">{value || '없음'}</code>
              </Text>

              <HStack $css={{ gap: '$100' }}>
                  <Button colorPalette="primary" onClick={() => setValue('serif')}>
                      Serif 선택
                  </Button>
                  <Button onClick={() => setValue('')} colorPalette="secondary">
                      선택 해제
                  </Button>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### States

Select의 다양한 상태(비활성화, 읽기 전용, 오류)를 설정합니다.

<Demo name="components/(components)/select/demos/select-states">
  ```tsx
  import { HStack, Select, Text, VStack } from '@vapor-ui/core';

  export default function SelectStates() {
      return (
          <VStack $css={{ gap: '$150', width: '400px' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      default
                  </Text>
                  <SelectTemplate placeholder="기본 상태" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      disabled
                  </Text>
                  <SelectTemplate placeholder="비활성화" disabled />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      readOnly
                  </Text>
                  <SelectTemplate placeholder="읽기 전용" readOnly />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      invalid
                  </Text>
                  <SelectTemplate placeholder="오류 상태" invalid />
              </HStack>
          </VStack>
      );
  }

  const SelectTemplate = (props: Select.Root.Props) => {
      return (
          <Select.Root {...props}>
              <Select.Trigger />
              <Select.Popup>
                  <Select.Item value="option1">옵션 1</Select.Item>
                  <Select.Item value="option2">옵션 2</Select.Item>
              </Select.Popup>
          </Select.Root>
      );
  };

  ```
</Demo>

## Examples

***

### Items Configuration

배열 형태와 객체 형태의 아이템 데이터를 모두 지원합니다.

<Demo name="components/(components)/select/demos/select-items">
  ```tsx
  import { Select, Text, VStack } from '@vapor-ui/core';

  const fonts = [
      { label: 'Sans-serif', value: 'sans' },
      { label: 'Serif', value: 'serif' },
      { label: 'Monospace', value: 'mono' },
      { label: 'Cursive', value: 'cursive' },
  ];

  const languages = {
      javascript: 'JavaScript',
      typescript: 'TypeScript',
      python: 'Python',
      java: 'Java',
      go: 'Go',
  };

  export default function SelectItems() {
      return (
          <VStack $css={{ gap: '$300', width: '400px' }}>
              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      배열 형태의 아이템
                  </Text>
                  <Select.Root placeholder="폰트 선택" items={fonts}>
                      <Select.Trigger />
                      <Select.Popup>
                          <Select.Group>
                              <Select.GroupLabel>폰트</Select.GroupLabel>
                              {fonts.map((font) => (
                                  <Select.Item key={font.value} value={font.value}>
                                      {font.label}
                                  </Select.Item>
                              ))}
                          </Select.Group>
                      </Select.Popup>
                  </Select.Root>
              </VStack>

              <VStack $css={{ gap: '$050' }}>
                  <Text typography="body3" foreground="hint-100">
                      객체 형태의 아이템
                  </Text>
                  <Select.Root placeholder="언어 선택" items={languages}>
                      <Select.Trigger />
                      <Select.Popup>
                          <Select.Group>
                              <Select.GroupLabel>프로그래밍 언어</Select.GroupLabel>
                              {Object.entries(languages).map(([value, label]) => (
                                  <Select.Item key={value} value={value}>
                                      {label}
                                  </Select.Item>
                              ))}
                          </Select.Group>
                      </Select.Popup>
                  </Select.Root>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### Grouping Options

관련된 옵션들을 그룹으로 묶어 구조화할 수 있습니다. Group과 GroupLabel, Separator를 사용하여 명확한 구조를 만들 수 있습니다.

<Demo name="components/(components)/select/demos/select-grouping">
  ```tsx
  import { Select, VStack } from '@vapor-ui/core';

  export default function SelectGrouping() {
      return (
          <VStack $css={{ width: '400px' }}>
              <Select.Root placeholder="개발 도구 선택">
                  <Select.Trigger />

                  <Select.Popup>
                      <Select.Group>
                          <Select.GroupLabel>프론트엔드</Select.GroupLabel>
                          <Select.Item value="react">React</Select.Item>
                          <Select.Item value="vue">Vue</Select.Item>
                          <Select.Item value="angular">Angular</Select.Item>
                      </Select.Group>

                      <Select.Separator />

                      <Select.Group>
                          <Select.GroupLabel>백엔드</Select.GroupLabel>
                          <Select.Item value="nodejs">Node.js</Select.Item>
                          <Select.Item value="python">Python</Select.Item>
                          <Select.Item value="java">Java</Select.Item>
                      </Select.Group>

                      <Select.Separator />

                      <Select.Group>
                          <Select.GroupLabel>데이터베이스</Select.GroupLabel>
                          <Select.Item value="mysql">MySQL</Select.Item>
                          <Select.Item value="postgresql">PostgreSQL</Select.Item>
                          <Select.Item value="mongodb">MongoDB</Select.Item>
                      </Select.Group>
                  </Select.Popup>
              </Select.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Custom Value Display

Select.Value에 함수형 children을 제공하여 선택된 값을 커스터마이징할 수 있습니다.

<Demo name="components/(components)/select/demos/select-custom-value">
  ```tsx
  import { Select, Text, VStack } from '@vapor-ui/core';

  const fonts = {
      sans: 'Sans-serif',
      serif: 'Serif',
      mono: 'Monospace',
      cursive: 'Cursive',
  };

  const renderValue = (value: string) => {
      if (!value) return '선택된 폰트 없음';
      return <span style={{ fontFamily: value }}>{fonts[value as keyof typeof fonts]}</span>;
  };

  export default function SelectCustomValue() {
      return (
          <VStack $css={{ gap: '$050', width: '400px' }}>
              <Text typography="body3" foreground="hint-100">
                  커스텀 값 표시
              </Text>
              <Select.Root placeholder="폰트 선택" items={fonts}>
                  <Select.Trigger>
                      <Select.ValuePrimitive>{renderValue}</Select.ValuePrimitive>
                      <Select.TriggerIconPrimitive />
                  </Select.Trigger>
                  <Select.Popup>
                      {Object.entries(fonts).map(([value, label]) => (
                          <Select.Item key={value} value={value}>
                              <span style={{ fontFamily: value }}>{label}</span>
                          </Select.Item>
                      ))}
                  </Select.Popup>
              </Select.Root>
          </VStack>
      );
  }

  ```
</Demo>

## 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 `&lt;button&gt;` 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.<br /><br />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.<br /><br />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<Select.Root.Actions \| null>`                                                             | -       | A ref to imperative actions.<br />- `unmount`: Ends the closing phase of the select after an externally controlled closing animation finishes.<br />Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the select completes closing on its own.<br />Whether it leaves the DOM is decided by `keepMounted` on the portal.<br />- `close`: Closes the select imperatively when called.                                                                        |
| `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.<br />Useful when the select is rendered outside the form.                                                                                                                                                                                                                                                                                                                                                                   |
| `highlightItemOnHover` | `boolean`                                                                                                  | `true`  | Whether moving the pointer over items should highlight them.<br />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<HTMLInputElement>`                                                                              | -       | 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.<br />Defaults to `Object.is` comparison.                                                                                                                                                                                                                                                           |
| `items`                | `Record<string, ReactNode>`, `readonly { label: React.ReactNode; value: any; }[]`, `readonly Group<any>[]` | -       | Data structure of the items rendered in the select popup.<br />When specified, `&lt;Select.Value&gt;` renders the label of the selected item instead of the raw value.                                                                                                                                                                                                                                                                                                      |
| `itemToStringLabel`    | `function`                                                                                                 | -       | When the item values are objects (`&lt;Select.Item value={object}&gt;`), this function converts the object value to a string representation for display in the trigger.<br />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 (`&lt;Select.Item value={object}&gt;`), this function converts the object value to a string representation for form submission.<br />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.<br />- `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.<br />- `false`: user interaction with the rest of the document is allowed.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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 `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />Accepts a `ReactElement` or a function that returns the element to render. |

#### Select.TriggerPrimitive

| Prop           | Type                              | Default            | Description                                                                                                                                                                                               |
| -------------- | --------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`     | `ReactNode`                       | -                  | Content shown inside the trigger, such as `Select.ValuePrimitive` and `Select.TriggerIconPrimitive`.                                                                                                      |
| `className`    | `string`, `function`              | -                  | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -                  | Style applied to the element, or a function that<br />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 `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | `&lt;button /&gt;` | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br />Treat the value as read-only: in `multiple` mode it may be a shared frozen array<br />when nothing is selected.          |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                |
| `portalElement`     | `ReactElement<SelectPortalPrimitive.Props>`                   | -       | Replaces the default `Select.PortalPrimitive`. Use to change the portal container.                                                                                                                                                                                                                                                                                                                                                                                       |
| `positionerElement` | `ReactElement<SelectPositionerPrimitive.Props>`               | -       | 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<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                             |
| `finalFocus`        | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the select popup is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />Accepts a `ReactElement` or a function that returns the element to render.                                                                                                                                                                                                                                                                |

#### Select.PortalPrimitive

| Prop        | Type                                                                                      | Default | Description                                                                                                                                                                                               |
| ----------- | ----------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `function`                                                                      | -       | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function`                                                         | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `container` | `HTMLElement`, `ShadowRoot`, `React.RefObject<HTMLElement \| ShadowRoot \| null>`, `null` | -       | A parent element to render the portal element into.                                                                                                                                                       |
| `render`    | `ReactElement`, `function`                                                                | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `style`                 | `React.CSSProperties`, `function`                                                   | -                    | Style applied to the element, or a function that<br />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.<br />Also accepts a function that returns the offset to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `anchor`                | `Element`, `VirtualElement`, `React.RefObject<Element \| null>`, `function`, `null` | -                    | An element to position the popup against.<br />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.<br /><br />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.<br /><br />`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):<br />- `'flip'`: keep the requested side when it fits; otherwise try the opposite side<br />  (`top` and `bottom`, or `left` and `right`).<br />- `'shift'`: never change side; keep the requested side and move the popup within<br />  the clipping boundary so it stays visible.<br />- `'none'`: do not correct side-axis overflow.<br /><br />`align` controls overflow on the alignment axis (`start`/`center`/`end`):<br />- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.<br />- `'shift'`: keep side and requested alignment, then nudge the popup along the<br />  alignment axis to fit.<br />- `'none'`: do not correct alignment-axis overflow.<br /><br />`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the<br />preferred axis cannot fit:<br />- `'start'`: allow perpendicular fallback and try the logical start side first<br />  (`top` before `bottom`, or `left` before `right` in LTR).<br />- `'end'`: allow perpendicular fallback and try the logical end side first<br />  (`bottom` before `top`, or `right` before `left` in LTR).<br />- `'none'`: do not fallback to the perpendicular axis.<br /><br />When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.<br />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.<br />May automatically change to avoid collisions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `sideOffset`            | `number`, `function`                                                                | `4`                  | Distance between the anchor and the popup in pixels.<br />Also accepts a function that returns the distance to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `sticky`                | `boolean`                                                                           | `false`              | Whether to maintain the popup in the viewport after<br />the anchor element was scrolled out of view.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `render`                | `ReactElement`, `function`                                                          | -                    | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                |
| `style`      | `React.CSSProperties`, `function`                             | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                             |
| `finalFocus` | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the select popup is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br /><br />Defaults to the item text content if not provided.                                                   |
| `nativeButton` | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `true` if the rendered element is a native button.                              |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br /><br />Defaults to the item text content if not provided.                                                   |
| `nativeButton` | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `true` if the rendered element is a native button.                              |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -            | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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

같은 콘텐츠 영역 내에서 화면의 보기 방식이나 필터를 제어합니다.

<Demo name="components/(components)/segmented-control/demos/default-segmented-control">
  ```tsx
  import { SegmentedControl } from '@vapor-ui/core';

  export default function DefaultSegmentedControl() {
      return (
          <SegmentedControl.Root aria-label="상태 필터">
              <SegmentedControl.Item value="all">전체</SegmentedControl.Item>
              <SegmentedControl.Item disabled value="in-progress">
                  진행 중
              </SegmentedControl.Item>
              <SegmentedControl.Item value="completed">완료</SegmentedControl.Item>
              <SegmentedControl.Item value="upcoming">예정</SegmentedControl.Item>
          </SegmentedControl.Root>
      );
  }

  ```
</Demo>

<Box $css={{ marginTop: '$200' }}>
  <Badge colorPalette="warning">주의!</Badge>

  * `SegmentedControl.Root`의 `defaultValue`를 지정하지 않으면 첫 번째 아이템이 자동 선택됩니다.
  * `SegmentedControl.Item`의 `value=""` 속성에는 **반드시 아이템의 역할을 설명할 수 있는 이름**을 사용하세요.
</Box>

## Property

***

### Size

SegmentedControl의 크기를 설정합니다.

<Demo name="components/(components)/segmented-control/demos/segmented-control-size">
  ```tsx
  import { SegmentedControl, VStack } from '@vapor-ui/core';

  export default function SegmentedControlSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <SegmentedControl.Root size="sm" aria-label="작은 크기 예시">
                  <SegmentedControl.Item value="all">SM</SegmentedControl.Item>
                  <SegmentedControl.Item value="in-progress">Test</SegmentedControl.Item>
              </SegmentedControl.Root>
              <SegmentedControl.Root size="md" aria-label="중간 크기 예시">
                  <SegmentedControl.Item value="all">MD</SegmentedControl.Item>
                  <SegmentedControl.Item value="in-progress">Test</SegmentedControl.Item>
              </SegmentedControl.Root>
              <SegmentedControl.Root size="lg" aria-label="큰 크기 예시">
                  <SegmentedControl.Item value="all">LG</SegmentedControl.Item>
                  <SegmentedControl.Item value="in-progress">Test</SegmentedControl.Item>
              </SegmentedControl.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Controlled State

SegmentedControl의 선택 상태를 외부에서 제어합니다.

<Demo name="components/(components)/segmented-control/demos/segmented-control-controlled">
  ```tsx
  import { useState } from 'react';

  import { Button, HStack, SegmentedControl, VStack } from '@vapor-ui/core';
  import { DarkIcon, LightIcon, PcIcon } from '@vapor-ui/icons';

  export default function DefaultSegmentedControl() {
      const [mode, setMode] = useState('light');

      return (
          <VStack $css={{ gap: '$150' }}>
              현재 모드: {mode}
              <SegmentedControl.Root value={mode} onValueChange={setMode} aria-label="테마 모드 선택">
                  <SegmentedControl.Item value="light">
                      <LightIcon />
                      Light
                  </SegmentedControl.Item>
                  <SegmentedControl.Item value="dark">
                      <DarkIcon />
                      Dark
                  </SegmentedControl.Item>
                  <SegmentedControl.Item value="system">
                      <PcIcon />
                      System
                  </SegmentedControl.Item>
              </SegmentedControl.Root>
              <HStack $css={{ gap: '$100' }}>
                  <Button onClick={() => setMode('light')}>라이트 모드</Button>
                  <Button onClick={() => setMode('dark')}>다크 모드</Button>
                  <Button onClick={() => setMode('system')}>시스템 모드</Button>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

SegmentedControl의 비활성 상태를 설정합니다.

<Demo name="components/(components)/segmented-control/demos/segmented-control-disabled">
  ```tsx
  import { SegmentedControl } from '@vapor-ui/core';

  export default function DefaultSegmentedControl() {
      return (
          <SegmentedControl.Root disabled aria-label="상태 필터">
              <SegmentedControl.Item value="all">전체</SegmentedControl.Item>
              <SegmentedControl.Item disabled value="in-progress">
                  진행 중
              </SegmentedControl.Item>
              <SegmentedControl.Item value="completed">완료</SegmentedControl.Item>
              <SegmentedControl.Item value="upcoming">예정</SegmentedControl.Item>
          </SegmentedControl.Root>
      );
  }

  ```
</Demo>

## Examples

***

### Icon Item

`SegmentedControl.IconItem`을 이용하여 아이콘만 포함하는 아이템을 사용할 수 있습니다. 이 경우, 각 아이템에 `aria-label`로 접근 가능한 이름을 제공하거나, 툴팁으로 보조 설명을 추가하는 것을 권장합니다.

<Demo name="components/(components)/segmented-control/demos/segmented-control-icon-item">
  ```tsx
  import { SegmentedControl, Tooltip, VStack } from '@vapor-ui/core';
  import { DarkIcon, LightIcon, PcIcon } from '@vapor-ui/icons';

  export default function DefaultSegmentedControl() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <SegmentedControl.Root defaultValue="light" aria-label="테마 모드 선택">
                  <Tooltip.Root>
                      <Tooltip.Trigger
                          delay={150}
                          render={
                              <SegmentedControl.IconItem value="light" aria-label="라이트 모드">
                                  <LightIcon />
                              </SegmentedControl.IconItem>
                          }
                      />
                      <Tooltip.Popup>라이트 모드</Tooltip.Popup>
                  </Tooltip.Root>

                  <Tooltip.Root>
                      <Tooltip.Trigger
                          delay={150}
                          render={
                              <SegmentedControl.IconItem value="dark" aria-label="다크 모드">
                                  <DarkIcon />
                              </SegmentedControl.IconItem>
                          }
                      />
                      <Tooltip.Popup>다크 모드</Tooltip.Popup>
                  </Tooltip.Root>

                  <Tooltip.Root>
                      <Tooltip.Trigger
                          delay={150}
                          render={
                              <SegmentedControl.IconItem value="system" aria-label="시스템 모드">
                                  <PcIcon />
                              </SegmentedControl.IconItem>
                          }
                      />
                      <Tooltip.Popup>시스템 모드</Tooltip.Popup>
                  </Tooltip.Root>
              </SegmentedControl.Root>
          </VStack>
      );
  }

  ```
</Demo>

## 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<br />returns a class based on the component's state.                                                                                                                   |
| `indicatorElement` | `ReactElement<SegmentedControlIndicatorPrimitive.Props>` | -       | 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<br />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.<br />Useful when the radio group is rendered outside the form.                                                                                                              |
| `inputRef`         | `React.Ref<HTMLInputElement>`                            | -       | 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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                   |
| `style`         | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br />Useful when the radio group is rendered outside the form.                                                                                                              |
| `inputRef`      | `React.Ref<HTMLInputElement>`     | -       | 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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `disabled`     | `boolean`                         | -       | Whether the component should ignore user interaction.                                                                                                                                                     |
| `inputRef`     | `React.Ref<HTMLInputElement>`     | -       | A ref to access the hidden input element.                                                                                                                                                                 |
| `nativeButton` | `boolean`                         | `true`  | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `disabled`     | `boolean`                         | -       | Whether the component should ignore user interaction.                                                                                                                                                     |
| `inputRef`     | `React.Ref<HTMLInputElement>`     | -       | A ref to access the hidden input element.                                                                                                                                                                 |
| `nativeButton` | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />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<br />with a different tag, or compose it with another component.<br /><br />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는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.

<Demo name="components/(components)/sheet/demos/default-sheet">
  ```tsx
  'use client';

  import { Box, Button, Sheet } from '@vapor-ui/core';
  import { CloseOutlineIcon } from '@vapor-ui/icons';

  export default function DefaultSheet() {
      return (
          <Sheet.Root>
              <Sheet.Trigger render={<Button variant="outline" />}>Open Sheet</Sheet.Trigger>
              <Sheet.Popup>
                  <Box className="absolute top-2 right-2">
                      <Sheet.Close aria-label="Close sheet" className="flex">
                          <CloseOutlineIcon />
                      </Sheet.Close>
                  </Box>
                  <Sheet.Header>
                      <Sheet.Title>알림</Sheet.Title>
                  </Sheet.Header>
                  <Sheet.Body>
                      <Sheet.Description>
                          Sheet는 화면 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다.
                          추가 정보나 작업을 위한 공간을 제공합니다.
                      </Sheet.Description>
                  </Sheet.Body>
                  <Sheet.Footer>
                      <Sheet.Close render={<Button variant="ghost" />}>닫기</Sheet.Close>
                      <Sheet.Close render={<Button colorPalette="primary">확인</Button>} />
                  </Sheet.Footer>
              </Sheet.Popup>
          </Sheet.Root>
      );
  }

  ```
</Demo>

## Property

***

### Side

Sheet가 나타날 위치를 설정합니다. 기본값은 'right'입니다.

<Demo name="components/(components)/sheet/demos/sheet-side">
  ```tsx
  'use client';

  import { Box, Button, HStack, Sheet, Text, VStack } from '@vapor-ui/core';
  import { CloseOutlineIcon } from '@vapor-ui/icons';

  export default function SheetSide() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      right
                  </Text>
                  <Sheet.Root>
                      <Sheet.Trigger render={<Button variant="outline" />}>Right</Sheet.Trigger>
                      <Sheet.PortalPrimitive>
                          <Sheet.OverlayPrimitive />
                          <Sheet.PositionerPrimitive side="right">
                              <Sheet.PopupPrimitive>
                                  <Box className="absolute top-2 right-2">
                                      <Sheet.Close aria-label="Close sheet" className="flex">
                                          <CloseOutlineIcon />
                                      </Sheet.Close>
                                  </Box>
                                  <Sheet.Header>
                                      <Sheet.Title>우측 Sheet</Sheet.Title>
                                  </Sheet.Header>
                                  <Sheet.Body>
                                      <Sheet.Description>
                                          화면 우측에서 슬라이드됩니다. (기본값)
                                      </Sheet.Description>
                                  </Sheet.Body>
                              </Sheet.PopupPrimitive>
                          </Sheet.PositionerPrimitive>
                      </Sheet.PortalPrimitive>
                  </Sheet.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      left
                  </Text>
                  <Sheet.Root>
                      <Sheet.Trigger render={<Button variant="outline" />}>Left</Sheet.Trigger>
                      <Sheet.PortalPrimitive>
                          <Sheet.OverlayPrimitive />
                          <Sheet.PositionerPrimitive side="left">
                              <Sheet.PopupPrimitive>
                                  <Box className="absolute top-2 right-2">
                                      <Sheet.Close aria-label="Close sheet" className="flex">
                                          <CloseOutlineIcon />
                                      </Sheet.Close>
                                  </Box>
                                  <Sheet.Header>
                                      <Sheet.Title>좌측 Sheet</Sheet.Title>
                                  </Sheet.Header>
                                  <Sheet.Body>
                                      <Sheet.Description>
                                          화면 좌측에서 슬라이드됩니다.
                                      </Sheet.Description>
                                  </Sheet.Body>
                              </Sheet.PopupPrimitive>
                          </Sheet.PositionerPrimitive>
                      </Sheet.PortalPrimitive>
                  </Sheet.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      top
                  </Text>
                  <Sheet.Root>
                      <Sheet.Trigger render={<Button variant="outline" />}>Top</Sheet.Trigger>
                      <Sheet.PortalPrimitive>
                          <Sheet.OverlayPrimitive />
                          <Sheet.PositionerPrimitive side="top">
                              <Sheet.PopupPrimitive>
                                  <Box className="absolute top-2 right-2">
                                      <Sheet.Close aria-label="Close sheet" className="flex">
                                          <CloseOutlineIcon />
                                      </Sheet.Close>
                                  </Box>
                                  <Sheet.Header>
                                      <Sheet.Title>상단 Sheet</Sheet.Title>
                                  </Sheet.Header>
                                  <Sheet.Body>
                                      <Sheet.Description>
                                          화면 상단에서 슬라이드됩니다.
                                      </Sheet.Description>
                                  </Sheet.Body>
                              </Sheet.PopupPrimitive>
                          </Sheet.PositionerPrimitive>
                      </Sheet.PortalPrimitive>
                  </Sheet.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      bottom
                  </Text>
                  <Sheet.Root>
                      <Sheet.Trigger render={<Button variant="outline" />}>Bottom</Sheet.Trigger>
                      <Sheet.PortalPrimitive>
                          <Sheet.OverlayPrimitive />
                          <Sheet.PositionerPrimitive side="bottom">
                              <Sheet.PopupPrimitive>
                                  <Box className="absolute top-2 right-2">
                                      <Sheet.Close aria-label="Close sheet" className="flex">
                                          <CloseOutlineIcon />
                                      </Sheet.Close>
                                  </Box>
                                  <Sheet.Header>
                                      <Sheet.Title>하단 Sheet</Sheet.Title>
                                  </Sheet.Header>
                                  <Sheet.Body>
                                      <Sheet.Description>
                                          화면 하단에서 슬라이드됩니다.
                                      </Sheet.Description>
                                  </Sheet.Body>
                              </Sheet.PopupPrimitive>
                          </Sheet.PositionerPrimitive>
                      </Sheet.PortalPrimitive>
                  </Sheet.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Controlled State

Sheet의 열림/닫힘 상태를 외부에서 제어합니다.

<Demo name="components/(components)/sheet/demos/sheet-controlled">
  ```tsx
  'use client';

  import { useEffect, useState } from 'react';

  import { Box, Button, Sheet, Text, VStack } from '@vapor-ui/core';
  import { CloseOutlineIcon } from '@vapor-ui/icons';

  export default function SheetControlled() {
      const [isOpen, setIsOpen] = useState(false);
      const [count, setCount] = useState(3);

      useEffect(() => {
          let timer: NodeJS.Timeout;
          if (isOpen && count > 0) {
              timer = setTimeout(() => {
                  setCount((prev) => prev - 1);
              }, 1000);
          } else if (isOpen && count === 0) {
              setIsOpen(false);
              setCount(3); // 초기화
          }

          return () => {
              if (timer) clearTimeout(timer);
          };
      }, [count, isOpen]);

      return (
          <VStack $css={{ gap: '$150', alignItems: 'flex-start' }}>
              <Button onClick={() => setIsOpen(true)} colorPalette="primary">
                  Sheet 열기
              </Button>

              <Text typography="body3" foreground="hint-100">
                  현재 상태: <strong>{isOpen ? '열림' : '닫힘'}</strong>
              </Text>

              <Sheet.Root open={isOpen} onOpenChange={setIsOpen} closeOnClickOverlay={false}>
                  <Sheet.Popup>
                      <Box className="absolute top-2 right-2">
                          <Sheet.Close aria-label="Close sheet" className="flex">
                              <CloseOutlineIcon />
                          </Sheet.Close>
                      </Box>
                      <Sheet.Header>
                          <Sheet.Title>제어된 Sheet</Sheet.Title>
                      </Sheet.Header>
                      <Sheet.Body>
                          <Sheet.Description>
                              외부에 의해{' '}
                              <Text typography="subtitle1" foreground="danger-100">
                                  {count}
                              </Text>
                              초 후 상태가 제어됩니다. <br />
                              프로그래밍 방식으로 열림/닫힘을 관리할 수 있습니다.
                          </Sheet.Description>
                      </Sheet.Body>
                      <Sheet.Footer>
                          <Sheet.Close render={<Button variant="ghost" />}>닫기</Sheet.Close>
                      </Sheet.Footer>
                  </Sheet.Popup>
              </Sheet.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Keep Mounted

Sheet가 닫혀도 DOM에서 제거되지 않고 유지되도록 설정합니다.

<Demo name="components/(components)/sheet/demos/sheet-keep-mounted">
  ```tsx
  'use client';

  import { Box, Button, HStack, Sheet, Text, TextInput, VStack } from '@vapor-ui/core';
  import { CloseOutlineIcon } from '@vapor-ui/icons';

  export default function SheetKeepMounted() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      normal
                  </Text>
                  <Sheet.Root>
                      <Sheet.Trigger render={<Button variant="outline" />}>일반 Sheet</Sheet.Trigger>
                      <Sheet.Popup>
                          <Box className="absolute top-2 right-2">
                              <Sheet.Close aria-label="Close sheet" className="flex">
                                  <CloseOutlineIcon />
                              </Sheet.Close>
                          </Box>
                          <Sheet.Header>
                              <Sheet.Title>일반 Sheet</Sheet.Title>
                          </Sheet.Header>
                          <Sheet.Body>
                              <Sheet.Description>
                                  이 Sheet는 닫힐 때 DOM에서 제거됩니다. 다시 열 때마다 내용이 새로
                                  생성됩니다.
                              </Sheet.Description>
                              <Box $css={{ marginTop: '$100' }}>
                                  <TextInput placeholder="입력해보세요..." />
                              </Box>
                          </Sheet.Body>
                      </Sheet.Popup>
                  </Sheet.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      keepMounted
                  </Text>
                  <Sheet.Root>
                      <Sheet.Trigger render={<Button variant="outline" colorPalette="success" />}>
                          유지 Sheet
                      </Sheet.Trigger>
                      <Sheet.PortalPrimitive keepMounted>
                          <Sheet.OverlayPrimitive />
                          <Sheet.PositionerPrimitive>
                              <Sheet.PopupPrimitive>
                                  <Box className="absolute top-2 right-2">
                                      <Sheet.Close aria-label="Close sheet" className="flex">
                                          <CloseOutlineIcon />
                                      </Sheet.Close>
                                  </Box>
                                  <Sheet.Header>
                                      <Sheet.Title>유지되는 Sheet</Sheet.Title>
                                  </Sheet.Header>
                                  <Sheet.Body>
                                      <Sheet.Description>
                                          이 Sheet는 닫혀도 DOM에 유지됩니다. 입력한 내용이 보존되는
                                          것을 확인해보세요.
                                      </Sheet.Description>
                                      <Box $css={{ marginTop: '$100' }}>
                                          <TextInput placeholder="상태 보존 테스트..." />
                                      </Box>
                                  </Sheet.Body>
                              </Sheet.PopupPrimitive>
                          </Sheet.PositionerPrimitive>
                      </Sheet.PortalPrimitive>
                  </Sheet.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### Custom Usage

유연하게 Sheet를 사용합니다.

<Demo name="components/(components)/sheet/demos/sheet-flexible">
  ```tsx
  'use client';

  import { Box, Button, Sheet } from '@vapor-ui/core';
  import { CloseOutlineIcon } from '@vapor-ui/icons';

  export default function Flexible() {
      return (
          <Sheet.Root>
              <Sheet.Trigger render={<Button variant="outline" />}>유연한 Sheet</Sheet.Trigger>
              <Sheet.PortalPrimitive>
                  <Sheet.OverlayPrimitive />
                  <Sheet.PositionerPrimitive>
                      <Sheet.PopupPrimitive>
                          <Box className="absolute top-2 right-2">
                              <Sheet.Close aria-label="Close sheet" className="flex">
                                  <CloseOutlineIcon />
                              </Sheet.Close>
                          </Box>
                          <Sheet.Header>
                              <Sheet.Title>간단한 Sheet</Sheet.Title>
                          </Sheet.Header>
                          <Sheet.Body>
                              <Sheet.Description>
                                  이 Sheet는 Vapor UI의 Primitive 컴포넌트를 사용하여 유연하게
                                  구성되었습니다.
                              </Sheet.Description>
                          </Sheet.Body>
                      </Sheet.PopupPrimitive>
                  </Sheet.PositionerPrimitive>
              </Sheet.PortalPrimitive>
          </Sheet.Root>
      );
  }

  ```
</Demo>

### Resizable

Sheet의 크기를 자유자재로 조절하길 원한다면 `<Sheet.ResizeHandle />`을 사용하세요.

조절 가능 영역을 제한하고 싶다면 `<Sheet.Popup />` 컴포넌트에 `min/max-height`, `min/max-width` 속성을 적용하세요.

<Demo name="components/(components)/sheet/demos/resizable-sheet">
  ```tsx
  'use client';

  import type { CSSProperties } from 'react';

  import { Box, Button, HStack, Sheet, Text, VStack } from '@vapor-ui/core';
  import { CloseOutlineIcon } from '@vapor-ui/icons';

  type Side = 'right' | 'left' | 'top' | 'bottom';

  type Case = {
      side: Side;
      label: string;
      description: string;
      /** Resize bounds live in CSS: min/max of the resized axis on the Popup. */
      bounds: CSSProperties;
  };

  const CASES: Case[] = [
      {
          side: 'right',
          label: 'right',
          description: '우측 Sheet입니다. 왼쪽 가장자리 핸들을 잡고 좌우로 끌어 너비를 조절하세요.',
          bounds: { minWidth: 300, maxWidth: '80vw' },
      },
      {
          side: 'left',
          label: 'left',
          description: '좌측 Sheet입니다. 오른쪽 가장자리 핸들을 잡고 좌우로 끌어 너비를 조절하세요.',
          bounds: { minWidth: 300, maxWidth: '80vw' },
      },
      {
          side: 'top',
          label: 'top',
          description:
              '상단 Sheet입니다. 아래쪽 가장자리 핸들을 잡고 위아래로 끌어 높이를 조절하세요.',
          bounds: { height: 360, minHeight: 200, maxHeight: '80svh' },
      },
      {
          side: 'bottom',
          label: 'bottom',
          description: '하단 Sheet입니다. 위쪽 가장자리 핸들을 잡고 위아래로 끌어 높이를 조절하세요.',
          bounds: { height: 360, minHeight: 200, maxHeight: '80svh' },
      },
  ];

  export default function ResizableSheet() {
      return (
          <VStack $css={{ gap: '$150' }}>
              {CASES.map(({ side, label, description, bounds }) => (
                  <HStack key={side} $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          {label}
                      </Text>
                      <Sheet.Root>
                          <Sheet.Trigger render={<Button variant="outline" />}>{label}</Sheet.Trigger>
                          <Sheet.PortalPrimitive>
                              <Sheet.OverlayPrimitive />
                              <Sheet.PositionerPrimitive side={side}>
                                  <Sheet.PopupPrimitive style={bounds}>
                                      <Sheet.ResizeHandle />
                                      <Box className="absolute top-2 right-2">
                                          <Sheet.Close aria-label="Close sheet" className="flex">
                                              <CloseOutlineIcon />
                                          </Sheet.Close>
                                      </Box>
                                      <Sheet.Header>
                                          <Sheet.Title>크기 조절 가능한 Sheet ({label})</Sheet.Title>
                                      </Sheet.Header>
                                      <Sheet.Body>
                                          <Sheet.Description>{description}</Sheet.Description>
                                      </Sheet.Body>
                                  </Sheet.PopupPrimitive>
                              </Sheet.PositionerPrimitive>
                          </Sheet.PortalPrimitive>
                      </Sheet.Root>
                  </HStack>
              ))}
          </VStack>
      );
  }

  ```
</Demo>

## Props Table

***

### Sheet.Root

| Prop                   | Type                                          | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ---------------------- | --------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultOpen`          | `boolean`                                     | `false` | Whether the dialog is initially open.<br /><br />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<Sheet.Root.Actions \| null>` | -       | A ref to imperative actions.<br />- `unmount`: Ends the closing phase of the dialog after an externally controlled closing animation finishes.<br />Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the dialog completes closing on its own.<br />Whether it leaves the DOM is decided by `keepMounted` on the portal.<br />- `close`: Closes the dialog imperatively when called.                                                                                                                                                                                                                                         |
| `children`             | `ReactNode`, `function`                       | -       | The content of the dialog.<br />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.<br />This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `handle`               | `DialogHandle<unknown>`                       | -       | A handle to associate the dialog with a trigger.<br />If specified, allows external triggers to control the dialog's open state.<br />Can be created with the Dialog.createHandle() method.                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `modal`                | `boolean`, `trap-focus`                       | `true`  | Determines if the dialog enters a modal state when open.<br />- `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.<br />- `false`: user interaction with the rest of the document is allowed.<br />- `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.<br /><br />When `modal` is `true` or `'trap-focus'`, render `&lt;Dialog.Close&gt;` inside `&lt;Dialog.Popup&gt;` so<br />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.<br />This is useful in conjunction with the `open` prop to create a controlled dialog.<br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `handle`       | `DialogHandle<unknown>`           | -       | A handle to associate the trigger with a dialog.<br />Can be created with the Dialog.createHandle() method.                                                                                               |
| `id`           | `string`                          | -       | ID of the trigger. In addition to being forwarded to the rendered element,<br />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 `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `overlayElement`    | `ReactElement<SheetOverlayPrimitive.Props>`                   | -       | Replaces the default `Sheet.OverlayPrimitive`. Use to change the backdrop.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `portalElement`     | `ReactElement<SheetPortalPrimitive.Props>`                    | -       | Replaces the default `Sheet.PortalPrimitive`. Use to change the portal container.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `positionerElement` | `ReactElement<SheetPositionerPrimitive.Props>`                | -       | 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<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `finalFocus`        | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the dialog is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the dialog is opened.<br />By default, focus moves to the first tabbable element inside the popup, except when the dialog<br />is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (first tabbable element or popup).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function`                                                         | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `container`   | `HTMLElement`, `ShadowRoot`, `React.RefObject<HTMLElement \| ShadowRoot \| null>`, `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `style`        | `React.CSSProperties`, `function`                             | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `finalFocus`   | `boolean`, `React.RefObject<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the dialog is closed.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (trigger or previously focused element).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<HTMLElement \| null>`, `function` | -       | Determines the element to focus when the dialog is opened.<br />By default, focus moves to the first tabbable element inside the popup, except when the dialog<br />is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard.<br /><br />- `false`: Do not move focus.<br />- `true`: Move focus based on the default behavior (first tabbable element or popup).<br />- `RefObject`: Move focus to the ref element.<br />- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).<br />  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<br />with a different tag, or compose it with another component.<br /><br />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<br />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<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />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<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `nativeButton` | `boolean`                         | `true`  | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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

콘텐츠나 데이터 로딩 시 대기 상태를 표시합니다.

<Demo name="components/(components)/spinner/demos/default-spinner">
  ```tsx
  import { Spinner } from '@vapor-ui/core';

  export default function DefaultSpinner() {
      return <Spinner />;
  }

  ```
</Demo>

## Property

***

### Size

Spinner의 크기를 설정합니다.

<Demo name="components/(components)/spinner/demos/spinner-size">
  ```tsx
  import { HStack, Spinner, VStack } from '@vapor-ui/core';

  export default function SpinnerSize() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'end' }}>
              <VStack $css={{ alignItems: 'center', gap: '$100' }}>
                  <Spinner size="md" />
                  md
              </VStack>

              <VStack $css={{ alignItems: 'center', gap: '$100' }}>
                  <Spinner size="lg" />
                  lg
              </VStack>

              <VStack $css={{ alignItems: 'center', gap: '$100' }}>
                  <Spinner size="xl" />
                  xl
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

### Color Palette

Spinner의 색상을 설정합니다. 다른 요소와 함께 사용될 때, `inherit` 속성을 사용하여 요소의 글자색과 통일하세요.

<Demo name="components/(components)/spinner/demos/spinner-color">
  ```tsx
  import { Button, HStack, Spinner } from '@vapor-ui/core';

  export default function SpinnerColor() {
      return (
          <HStack $css={{ gap: '1rem' }}>
              <Button colorPalette="primary" variant="fill">
                  <Spinner colorPalette="inherit" />
                  로딩 중...
              </Button>

              <Button colorPalette="secondary" variant="outline">
                  <Spinner colorPalette="inherit" />
                  로딩 중...
              </Button>

              <Button colorPalette="success" variant="ghost">
                  <Spinner colorPalette="inherit" />
                  로딩 중...
              </Button>
          </HStack>
      );
  }

  ```
</Demo>

## 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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -         | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`       | `ReactElement`, `function`        | -         | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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

콘텐츠가 로딩 중임을 나타내는 플레이스홀더 요소입니다.

<Demo name="components/(components)/skeleton/demos/default-skeleton">
  ```tsx
  import { Skeleton } from '@vapor-ui/core';

  export default function DefaultSkeleton() {
      return <Skeleton $css={{ width: '200px' }} />;
  }

  ```
</Demo>

## Property

***

### Shape

Skeleton의 모서리 둥글기를 설정합니다.

<Demo name="components/(components)/skeleton/demos/skeleton-shape">
  ```tsx
  import { HStack, Skeleton, Text, VStack } from '@vapor-ui/core';

  export default function SkeletonShape() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$200', alignItems: 'center' }}>
                  <Text typography="body3" foreground="hint-100" $css={{ width: '80px' }}>
                      rounded
                  </Text>
                  <Skeleton shape="rounded" $css={{ width: '200px' }} />
              </HStack>
              <HStack $css={{ gap: '$200', alignItems: 'center' }}>
                  <Text typography="body3" foreground="hint-100" $css={{ width: '80px' }}>
                      square
                  </Text>
                  <Skeleton shape="square" $css={{ width: '200px' }} />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Animation

Skeleton의 애니메이션 스타일을 설정합니다.

<Demo name="components/(components)/skeleton/demos/skeleton-animation">
  ```tsx
  import { HStack, Skeleton, Text, VStack } from '@vapor-ui/core';

  export default function SkeletonAnimation() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$200', alignItems: 'center' }}>
                  <Text typography="body3" foreground="hint-100" $css={{ width: '80px' }}>
                      shimmer
                  </Text>
                  <Skeleton animation="shimmer" />
              </HStack>
              <HStack $css={{ gap: '$200', alignItems: 'center' }}>
                  <Text typography="body3" foreground="hint-100" $css={{ width: '80px' }}>
                      pulse
                  </Text>
                  <Skeleton animation="pulse" />
              </HStack>
              <HStack $css={{ gap: '$200', alignItems: 'center' }}>
                  <Text typography="body3" foreground="hint-100" $css={{ width: '80px' }}>
                      none
                  </Text>
                  <Skeleton animation="none" />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Size

Skeleton의 높이를 설정합니다.

<Demo name="components/(components)/skeleton/demos/skeleton-size">
  ```tsx
  import { HStack, Skeleton, Text, VStack } from '@vapor-ui/core';

  export default function SkeletonSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$200', alignItems: 'center' }}>
                  <Text typography="body3" foreground="hint-100" $css={{ width: '40px' }}>
                      sm
                  </Text>
                  <Skeleton size="sm" />
              </HStack>
              <HStack $css={{ gap: '$200', alignItems: 'center' }}>
                  <Text typography="body3" foreground="hint-100" $css={{ width: '40px' }}>
                      md
                  </Text>
                  <Skeleton size="md" />
              </HStack>
              <HStack $css={{ gap: '$200', alignItems: 'center' }}>
                  <Text typography="body3" foreground="hint-100" $css={{ width: '40px' }}>
                      lg
                  </Text>
                  <Skeleton size="lg" />
              </HStack>
              <HStack $css={{ gap: '$200', alignItems: 'center' }}>
                  <Text typography="body3" foreground="hint-100" $css={{ width: '40px' }}>
                      xl
                  </Text>
                  <Skeleton size="xl" />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### Profile Card

여러 Skeleton 요소를 조합하여 프로필 카드 플레이스홀더를 구성하는 예제입니다.

<Demo name="components/(components)/skeleton/demos/skeleton-composition">
  ```tsx
  import { Box, HStack, Skeleton, VStack } from '@vapor-ui/core';

  export default function SkeletonComposition() {
      return (
          <Box
              $css={{
                  border: '1px solid',
                  borderColor: '$border-normal',
                  borderRadius: '$100',
                  padding: '$200',
                  maxWidth: '320px',
              }}
          >
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Skeleton shape="rounded" $css={{ width: '40px', height: '40px' }} />
                  <VStack $css={{ gap: '$075' }}>
                      <Skeleton shape="rounded" size="sm" $css={{ width: '120px' }} />
                      <Skeleton shape="rounded" size="sm" $css={{ width: '80px' }} />
                  </VStack>
              </HStack>
              <VStack $css={{ gap: '$075', marginTop: '$200' }}>
                  <Skeleton shape="square" size="sm" />
                  <Skeleton shape="square" size="sm" $css={{ width: '90%' }} />
                  <Skeleton shape="square" size="sm" $css={{ width: '75%' }} />
              </VStack>
          </Box>
      );
  }

  ```
</Demo>

## 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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -         | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -         | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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)를 참고해주세요.

<br />

<Demo name="components/(components)/table/demos/default-table">
  ```tsx
  import { Badge, Table } from '@vapor-ui/core';

  const datas = [
      { name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
      { name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
      { name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
      { name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
      { name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
      { name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
      { name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
      { name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
  ];

  const activeness: Record<string, Badge.Props['colorPalette']> = {
      active: 'success',
      inactive: 'hint',
  };

  export default function Basic() {
      return (
          <Table.Root $css={{ width: '100%' }}>
              <Table.Header>
                  <Table.Row $css={{ backgroundColor: '$basic-gray-050' }}>
                      <Table.Heading>Name</Table.Heading>
                      <Table.Heading>Status</Table.Heading>
                      <Table.Heading>Role</Table.Heading>
                      <Table.Heading>Last Active</Table.Heading>
                  </Table.Row>
              </Table.Header>

              <Table.Body>
                  {datas.map((data, index) => (
                      <Table.Row key={index}>
                          <Table.Cell>{data.name}</Table.Cell>
                          <Table.Cell>
                              <Badge colorPalette={activeness[data.status]} shape="pill">
                                  {data.status.toUpperCase()}
                              </Badge>
                          </Table.Cell>
                          <Table.Cell>{data.role}</Table.Cell>
                          <Table.Cell>{data['last-active']}</Table.Cell>
                      </Table.Row>
                  ))}
              </Table.Body>
          </Table.Root>
      );
  }

  ```
</Demo>

## Props Table

***

### Table.Root

| Prop        | Type                              | Default | Description                                                                                                                                                                                               |
| ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `function`              | -       | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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로 전환할 수 있게 돕는 토글 컴포넌트입니다.

<Demo name="components/(components)/switch/demos/default-switch">
  ```tsx
  import { Switch } from '@vapor-ui/core';

  export default function DefaultSwitch() {
      return <Switch.Root />;
  }

  ```
</Demo>

## Property

***

### Size

Switch의 크기를 설정합니다.

<Demo name="components/(components)/switch/demos/switch-size">
  ```tsx
  import { HStack, Switch, Text, VStack } from '@vapor-ui/core';

  export default function SwitchSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <Switch.Root size="sm" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <Switch.Root size="md" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <Switch.Root size="lg" />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Checked

Switch의 체크 상태를 설정합니다.

<Demo name="components/(components)/switch/demos/switch-checked">
  ```tsx
  import { HStack, Switch, Text, VStack } from '@vapor-ui/core';

  export default function SwitchChecked() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      unchecked
                  </Text>
                  <Switch.Root />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      checked
                  </Text>
                  <Switch.Root defaultChecked />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

Switch의 비활성화 상태를 설정합니다.

<Demo name="components/(components)/switch/demos/switch-disabled">
  ```tsx
  import { HStack, Switch, Text, VStack } from '@vapor-ui/core';

  export default function SwitchDisabled() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      unchecked
                  </Text>
                  <Switch.Root disabled />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      checked
                  </Text>
                  <Switch.Root disabled defaultChecked />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Read Only

사용자는 스위치 상태를 변경할 수 없지만, 현재 상태를 확인할 수 있도록 허용하는 상태입니다.

<Demo name="components/(components)/switch/demos/switch-readonly">
  ```tsx
  import { HStack, Switch, Text, VStack } from '@vapor-ui/core';

  export default function SwitchReadOnly() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      checked
                  </Text>
                  <Switch.Root readOnly defaultChecked>
                      <Switch.ThumbPrimitive />
                  </Switch.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      unchecked
                  </Text>
                  <Switch.Root readOnly>
                      <Switch.ThumbPrimitive />
                  </Switch.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### Controlled

제어되는 Switch 컴포넌트의 사용 예시입니다.

<Demo name="components/(components)/switch/demos/switch-controlled">
  ```tsx
  'use client';

  import { useState } from 'react';

  import { HStack, Switch, Text, VStack } from '@vapor-ui/core';

  export default function SwitchControlled() {
      const [checked, setChecked] = useState(false);

      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Switch.Root checked={checked} onCheckedChange={setChecked} />
                  <Text typography="body3">State: {checked ? 'On' : 'Off'}</Text>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Custom Thumb

`children`으로 `Switch.ThumbPrimitive`를 전달하면 내부 파트를 직접 제어할 수 있습니다. 아이콘을 삽입하거나 다른 요소로 교체할 수 있습니다.

<Demo name="components/(components)/switch/demos/switch-custom-thumb">
  ```tsx
  import { Switch } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function SwitchCustomThumb() {
      return (
          <Switch.Root>
              <Switch.ThumbPrimitive>
                  <HeartIcon />
              </Switch.ThumbPrimitive>
          </Switch.Root>
      );
  }

  ```
</Demo>

## Props Table

***

### Switch.Root

| Prop              | Type                              | Default | Description                                                                                                                                                                                                           |
| ----------------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `invalid`         | `boolean`                         | `false` | Marks the switch as invalid, applying error styles. Sets `aria-invalid` on the `&lt;span&gt;` 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.<br /><br />To render an uncontrolled switch, use the `defaultChecked` prop instead.                                                                                           |
| `defaultChecked`  | `boolean`                         | `false` | Whether the switch is initially active.<br /><br />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.<br />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<br />returns a class based on the component's state.                                                                                                             |
| `style`           | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br />Useful when the switch is rendered outside the form.                                                                                                             |
| `id`              | `string`                          | -       | The id of the hidden input element.<br /><br />When `nativeButton` is `true`, the id is applied to the root element.                                                                                                  |
| `inputRef`        | `React.Ref<HTMLInputElement>`     | -       | A ref to access the hidden `&lt;input&gt;` element.                                                                                                                                                                   |
| `name`            | `string`                          | -       | Identifies the field when a form is submitted.                                                                                                                                                                        |
| `nativeButton`    | `boolean`                         | `false` | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />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.<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다.

<Demo name="components/(components)/tabs/demos/default-tabs">
  ```tsx
  import { Tabs } from '@vapor-ui/core';
  import { AiSmartieIcon, AssignmentIcon, ListIcon } from '@vapor-ui/icons';

  export default function DefaultTabs() {
      return (
          <Tabs.Root defaultValue="overview" className="max-w-[200px] w-full mx-auto">
              <Tabs.List>
                  <Tabs.Button value="overview">개요</Tabs.Button>
                  <Tabs.Button value="features">기능</Tabs.Button>
                  <Tabs.Button value="examples">예시</Tabs.Button>
              </Tabs.List>

              <Tabs.Panel value="overview" className="h-[100px] flex items-center justify-center">
                  <AssignmentIcon size="32px" />
              </Tabs.Panel>

              <Tabs.Panel value="features" className="h-[100px] flex items-center justify-center">
                  <AiSmartieIcon size="32px" />
              </Tabs.Panel>

              <Tabs.Panel value="examples" className="h-[100px] flex items-center justify-center">
                  <ListIcon size="32px" />
              </Tabs.Panel>
          </Tabs.Root>
      );
  }

  ```
</Demo>

## Property

***

### Size

Tabs의 크기를 지정합니다. `sm`, `md`, `lg`, `xl` 네 가지 크기를 제공합니다.

<Demo name="components/(components)/tabs/demos/tabs-size">
  ```tsx
  import { HStack, Tabs, Text, VStack } from '@vapor-ui/core';

  export default function TabsSize() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <Tabs.Root defaultValue="tab1" size="sm">
                      <Tabs.List>
                          <Tabs.Button value="tab1">Tab 1</Tabs.Button>
                          <Tabs.Button value="tab2">Tab 2</Tabs.Button>
                          <Tabs.Button value="tab3">Tab 3</Tabs.Button>
                      </Tabs.List>
                  </Tabs.Root>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <Tabs.Root defaultValue="tab1" size="md">
                      <Tabs.List>
                          <Tabs.Button value="tab1">Tab 1</Tabs.Button>
                          <Tabs.Button value="tab2">Tab 2</Tabs.Button>
                          <Tabs.Button value="tab3">Tab 3</Tabs.Button>
                      </Tabs.List>
                  </Tabs.Root>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <Tabs.Root defaultValue="tab1" size="lg">
                      <Tabs.List>
                          <Tabs.Button value="tab1">Tab 1</Tabs.Button>
                          <Tabs.Button value="tab2">Tab 2</Tabs.Button>
                          <Tabs.Button value="tab3">Tab 3</Tabs.Button>
                      </Tabs.List>
                  </Tabs.Root>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <Tabs.Root defaultValue="tab1" size="xl">
                      <Tabs.List>
                          <Tabs.Button value="tab1">Tab 1</Tabs.Button>
                          <Tabs.Button value="tab2">Tab 2</Tabs.Button>
                          <Tabs.Button value="tab3">Tab 3</Tabs.Button>
                      </Tabs.List>
                  </Tabs.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Variant

Tabs의 스타일 변형을 설정합니다. `line`과 `fill` 두 가지 스타일을 제공합니다.

<Demo name="components/(components)/tabs/demos/tabs-variant">
  ```tsx
  import { HStack, Tabs, Text, VStack } from '@vapor-ui/core';

  export default function TabsVariant() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-12" typography="body3" foreground="hint-100">
                      line
                  </Text>
                  <Tabs.Root defaultValue="home" variant="line">
                      <Tabs.List>
                          <Tabs.Button value="home">Home</Tabs.Button>
                          <Tabs.Button value="about">About</Tabs.Button>
                          <Tabs.Button value="services">Services</Tabs.Button>
                      </Tabs.List>
                  </Tabs.Root>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-12" typography="body3" foreground="hint-100">
                      fill
                  </Text>
                  <Tabs.Root defaultValue="home" variant="fill">
                      <Tabs.List>
                          <Tabs.Button value="home">Home</Tabs.Button>
                          <Tabs.Button value="about">About</Tabs.Button>
                          <Tabs.Button value="services">Services</Tabs.Button>
                      </Tabs.List>
                  </Tabs.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Orientation

수평(horizontal)과 수직(vertical) 방향을 설정합니다.

<Demo name="components/(components)/tabs/demos/tabs-orientation">
  ```tsx
  import { HStack, Tabs, Text, VStack } from '@vapor-ui/core';

  export default function TabsOrientation() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'start' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      horizontal
                  </Text>
                  <Tabs.Root defaultValue={1} orientation="horizontal">
                      <Tabs.List>
                          <Tabs.Button value={1}>Tab 1</Tabs.Button>
                          <Tabs.Button value={2}>Tab 2</Tabs.Button>
                          <Tabs.Button value={3}>Tab 3</Tabs.Button>
                      </Tabs.List>
                  </Tabs.Root>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      vertical
                  </Text>
                  <Tabs.Root defaultValue={1} orientation="vertical">
                      <Tabs.List>
                          <Tabs.Button value={1}>Tab 1</Tabs.Button>
                          <Tabs.Button value={2}>Tab 2</Tabs.Button>
                          <Tabs.Button value={3}>Tab 3</Tabs.Button>
                      </Tabs.List>
                  </Tabs.Root>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

### Controlled State

Tabs의 활성 상태를 외부에서 제어합니다.

<Demo name="components/(components)/tabs/demos/tabs-controlled">
  ```tsx
  'use client';

  import { useState } from 'react';

  import { Button, Tabs, VStack } from '@vapor-ui/core';

  export default function TabsControlled() {
      const [activeTab, setActiveTab] = useState('profile');

      return (
          <VStack $css={{ gap: '$200' }}>
              <Tabs.Root value={activeTab} onValueChange={setActiveTab}>
                  <Tabs.List>
                      <Tabs.Button value="profile">프로필</Tabs.Button>
                      <Tabs.Button value="account">계정</Tabs.Button>
                      <Tabs.Button value="security">보안</Tabs.Button>
                      <Tabs.Button value="notifications">알림</Tabs.Button>
                  </Tabs.List>
              </Tabs.Root>

              <div className="text-sm text-gray-600">
                  현재 선택된 탭: <code className="bg-gray-100 px-1 rounded">{activeTab}</code>
              </div>

              <div className="flex gap-2">
                  <Button onClick={() => setActiveTab('account')} className="">
                      계정 탭으로 이동
                  </Button>
                  <Button
                      colorPalette="success"
                      onClick={() => setActiveTab('security')}
                      className=""
                  >
                      보안 탭으로 이동
                  </Button>
              </div>
          </VStack>
      );
  }

  ```
</Demo>

### States

개별 탭 또는 전체 탭 그룹을 비활성화할 수 있습니다.

<Demo name="components/(components)/tabs/demos/tabs-states">
  ```tsx
  import { HStack, Tabs, Text, VStack } from '@vapor-ui/core';

  export default function TabsStates() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-32" typography="body3" foreground="hint-100">
                      tab disabled
                  </Text>
                  <Tabs.Root defaultValue="enabled">
                      <Tabs.List>
                          <Tabs.Button value="enabled">Enabled</Tabs.Button>
                          <Tabs.Button value="disabled" disabled>
                              Disabled
                          </Tabs.Button>
                          <Tabs.Button value="normal">Normal</Tabs.Button>
                      </Tabs.List>
                  </Tabs.Root>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-32" typography="body3" foreground="hint-100">
                      group disabled
                  </Text>
                  <Tabs.Root defaultValue="enabled" disabled>
                      <Tabs.List>
                          <Tabs.Button value="enabled">Enabled</Tabs.Button>
                          <Tabs.Button value="disabled">Disabled</Tabs.Button>
                          <Tabs.Button value="normal">Normal</Tabs.Button>
                      </Tabs.List>
                  </Tabs.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### Keyboard Navigation

`activateOnFocus`와 `loopFocus` props를 사용하여 키보드 내비게이션 동작을 세밀하게 제어할 수 있습니다.

<Demo name="components/(components)/tabs/demos/tabs-keyboard">
  ```tsx
  import { Tabs, VStack } from '@vapor-ui/core';

  export default function TabsKeyboard() {
      return (
          <VStack $css={{ gap: '$400' }}>
              <Tabs.Root defaultValue="tab1" activateOnFocus={true}>
                  <h4 className="text-sm font-medium mb-4">
                      포커스 시 활성화 <code>(activateOnFocus: true)</code>
                  </h4>
                  <Tabs.List>
                      <Tabs.Button value="tab1">탭 1</Tabs.Button>
                      <Tabs.Button value="tab2">탭 2</Tabs.Button>
                      <Tabs.Button value="tab3">탭 3</Tabs.Button>
                  </Tabs.List>
              </Tabs.Root>

              <Tabs.Root defaultValue="tab1" activateOnFocus={false}>
                  <h4 className="text-sm font-medium mb-4">
                      엔터/스페이스로 활성화 <code>(activateOnFocus: false)</code>
                  </h4>
                  <Tabs.List>
                      <Tabs.Button value="tab1">탭 1</Tabs.Button>
                      <Tabs.Button value="tab2">탭 2</Tabs.Button>
                      <Tabs.Button value="tab3">탭 3</Tabs.Button>
                  </Tabs.List>
              </Tabs.Root>

              <Tabs.Root defaultValue="tab1" loopFocus={false} activateOnFocus={false}>
                  <h4 className="text-sm font-medium mb-4">
                      비순환 내비게이션 <code>(loopFocus: false)</code>
                  </h4>
                  <Tabs.List>
                      <Tabs.Button value="tab1">탭 1</Tabs.Button>
                      <Tabs.Button value="tab2">탭 2</Tabs.Button>
                      <Tabs.Button value="tab3">탭 3</Tabs.Button>
                  </Tabs.List>
              </Tabs.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Custom Indicator

`Tabs.ListPrimitive`와 `Tabs.IndicatorPrimitive`를 직접 조합하면 인디케이터의 스타일을 제어할 수 있습니다.

<Demo name="components/(components)/tabs/demos/tabs-custom-indicator">
  ```tsx
  import { Tabs } from '@vapor-ui/core';

  export default function TabsCustomIndicator() {
      return (
          <Tabs.Root defaultValue="home">
              <Tabs.ListPrimitive>
                  <Tabs.Button value="home" $css={{ width: '5rem' }}>
                      홈
                  </Tabs.Button>
                  <Tabs.Button value="about" $css={{ width: '5rem' }}>
                      소개
                  </Tabs.Button>
                  <Tabs.Button value="services" $css={{ width: '5rem' }}>
                      서비스
                  </Tabs.Button>
                  <Tabs.IndicatorPrimitive
                      className="bg-gradient-to-r from-red-600 to-orange-400"
                      style={{ height: '4px', borderRadius: '2px' }}
                  />
              </Tabs.ListPrimitive>
          </Tabs.Root>
      );
  }

  ```
</Demo>

## 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.<br />When the value is `null`, no Tab will be active.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `onValueChange`   | `function`                        | -            | Callback invoked when new value is being set.<br /><br />The event `reason` is `'none'` for user-initiated changes, such as a click<br />or keyboard navigation; `'initial'` for the first automatic selection or<br />fallback in uncontrolled roots when `defaultValue` is omitted or<br />`undefined`, including when the implicit initial value is disabled or<br />missing; `'disabled'` for automatic fallback when the selected tab becomes<br />disabled in uncontrolled roots; or `'missing'` for automatic fallback when<br />the selected tab is removed, or when an explicit `defaultValue` never<br />matches a mounted tab in uncontrolled roots.<br /><br />For automatic changes, the selected value can be `null` when no enabled Tab<br />is available as a fallback.<br /><br />Automatic changes cannot be canceled; calling `eventDetails.cancel()` for<br />`'initial'`, `'disabled'`, or `'missing'` has no effect. |
| `value`           | `any`                             | -            | The value of the currently active `Tab`. Use when the component is controlled.<br />When the value is `null`, no Tab will be active.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `className`       | `string`, `function`              | -            | CSS class applied to the element, or a function that<br />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<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `activateOnFocus` | `boolean`                         | `false`      | Whether to automatically change the active tab on arrow key focus.<br />Otherwise, tabs will be activated using \<kbd>Enter\</kbd> or \<kbd>Space\</kbd> key press.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `loopFocus`       | `boolean`                         | `true`       | Whether to loop keyboard focus back to the first item<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `indicatorElement` | `ReactElement<TabsIndicatorPrimitive.Props>` | -       | 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<br />returns a style object based on the component's state.                                                                                              |
| `render`           | `ReactElement`, `function`                   | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`                 | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `renderBeforeHydration` | `boolean`                         | `false` | Whether to render itself before React hydrates.<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                             |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                          |
| `disabled`     | `boolean`                         | -       | Whether the Tab is disabled.<br /><br />If a first Tab on a `&lt;Tabs.List&gt;` is disabled, it won't initially be selected.<br />Instead, the next enabled Tab will be selected.<br />However, it does not work like this during server-side rendering, as it is not known<br />during pre-rendering which Tabs are disabled.<br />To work around it, ensure that `defaultValue` or `value` on `&lt;Tabs.Root&gt;` is set to an enabled Tab's value. |
| `nativeButton` | `boolean`                         | `true`  | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).                                                                                                                                                                                                                                               |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다.

<Demo name="components/(components)/text/demos/default-text">
  ```tsx
  import { Text } from '@vapor-ui/core';

  export default function DefaultText() {
      return <Text>Hello World</Text>;
  }

  ```
</Demo>

## Property

***

### Typography

텍스트의 타이포그래피 스타일을 설정합니다.

<Demo name="components/(components)/text/demos/text-typography">
  ```tsx
  import { Text, VStack } from '@vapor-ui/core';

  export default function TextTypography() {
      return (
          <VStack $css={{ gap: '$075', justifyContent: 'start', width: '100%' }}>
              <Text typography="display1">Display1</Text>
              <Text typography="heading1">Heading1</Text>
              <Text typography="subtitle1">Subtitle1</Text>
              <Text typography="body1">Body1</Text>
          </VStack>
      );
  }

  ```
</Demo>

### Foreground

텍스트의 색상을 설정합니다.

<Demo name="components/(components)/text/demos/text-foreground">
  ```tsx
  import { HStack, Text } from '@vapor-ui/core';

  export default function TextForeground() {
      return (
          <HStack className="flex-wrap" $css={{ gap: '$200' }}>
              <Text foreground="primary-100">Primary</Text>
              <Text foreground="secondary-100">Secondary</Text>
              <Text foreground="success-100">Success</Text>
              <Text foreground="warning-100">Warning</Text>
              <Text foreground="danger-100">Danger</Text>
              <Text foreground="hint-100">Hint</Text>
          </HStack>
      );
  }

  ```
</Demo>

## 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<br />returns a class based on the component's state.                                                                                                 |
| `style`      | `React.CSSProperties`, `function`                                                                                                                                                                                                                                                                                                                                                                                                                         | -        | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`     | `ReactElement`, `function`                                                                                                                                                                                                                                                                                                                                                                                                                                | -        | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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은 사용자가 데이터를 입력할 수 있도록 텍스트, 숫자 등 다양한 형식의 입력 필드를 제공합니다.

<Demo name="components/(components)/text-input/demos/default-text-input">
  ```tsx
  import { TextInput } from '@vapor-ui/core';

  export default function DefaultTextInput() {
      return <TextInput />;
  }

  ```
</Demo>

## Property

***

### Size

TextInput의 크기를 설정합니다.

<Demo name="components/(components)/text-input/demos/text-input-size">
  ```tsx
  import { HStack, Text, TextInput, VStack } from '@vapor-ui/core';

  export default function TextInputSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <TextInput size="sm" placeholder="Small" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <TextInput size="md" placeholder="Medium" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <TextInput size="lg" placeholder="Large" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <TextInput size="xl" placeholder="Extra Large" />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Type

TextInput의 타입을 설정합니다.

<Demo name="components/(components)/text-input/demos/text-input-type">
  ```tsx
  import { HStack, Text, TextInput, VStack } from '@vapor-ui/core';

  export default function TextInputType() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      text
                  </Text>
                  <TextInput type="text" placeholder="Enter text" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      email
                  </Text>
                  <TextInput type="email" placeholder="Enter email" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-20" typography="body3" foreground="hint-100">
                      password
                  </Text>
                  <TextInput type="password" placeholder="Enter password" />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다.

<Demo name="components/(components)/text-input/demos/text-input-disabled">
  ```tsx
  import { TextInput, VStack } from '@vapor-ui/core';

  export default function TextInputDisabled() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <TextInput disabled placeholder="Disabled input" />
              <TextInput disabled defaultValue="Disabled with value" />
          </VStack>
      );
  }

  ```
</Demo>

### Invalid

유효하지 않은 상태(필수 항목 누락, 잘못된 입력 등)를 표시하여 올바른 입력을 유도합니다.

<Demo name="components/(components)/text-input/demos/text-input-invalid">
  ```tsx
  import { TextInput, VStack } from '@vapor-ui/core';

  export default function TextInputInvalid() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <TextInput
                  type="email"
                  invalid
                  placeholder="Invalid email"
                  defaultValue="invalid-email"
              />
              <TextInput invalid placeholder="Required field" />
          </VStack>
      );
  }

  ```
</Demo>

### Read Only

값을 수정할 수 없지만, 텍스트를 복사하거나 읽을 수 있는 상태입니다.

<Demo name="components/(components)/text-input/demos/text-input-readonly">
  ```tsx
  import { TextInput, VStack } from '@vapor-ui/core';

  export default function TextInputReadOnly() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <TextInput readOnly defaultValue="Read only value" />
              <TextInput type="email" readOnly defaultValue="user@example.com" />
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### States

TextInput의 다양한 상태를 보여줍니다.

<Demo name="components/(components)/text-input/demos/text-input-states">
  ```tsx
  import { HStack, Text, TextInput, VStack } from '@vapor-ui/core';

  export default function TextInputStates() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      default
                  </Text>
                  <TextInput placeholder="Enter text" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      disabled
                  </Text>
                  <TextInput disabled placeholder="Disabled" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      invalid
                  </Text>
                  <TextInput invalid placeholder="Invalid" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      readOnly
                  </Text>
                  <TextInput readOnly value="Read only value" />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Props Table

***

### TextInput

| Prop            | Type                                                | Default | Description                                                                                                                                                                                               |
| --------------- | --------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `invalid`       | `boolean`                                           | `false` | Marks the text input as invalid, applying error styles. Sets `aria-invalid` on the `&lt;input&gt;` 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<br />returns a class based on the component's state.                                                                                                 |
| `style`         | `React.CSSProperties`, `function`                   | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 하는 텍스트 입력 필드를 제공합니다.

<Demo name="components/(components)/textarea/demos/default-textarea">
  ```tsx
  import { Box, Textarea } from '@vapor-ui/core';

  export default function DefaultTextarea() {
      return (
          <Box
              $css={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: '100%',
              }}
          >
              <Textarea placeholder="여러 줄 텍스트를 입력하세요..." />
          </Box>
      );
  }

  ```
</Demo>

## Property

***

### Size

Textarea의 크기를 설정합니다.

<Demo name="components/(components)/textarea/demos/textarea-size">
  ```tsx
  import { HStack, Text, Textarea, VStack } from '@vapor-ui/core';

  export default function TextareaSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <Textarea size="sm" placeholder="Small" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <Textarea size="md" placeholder="Medium" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <Textarea size="lg" placeholder="Large" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <Textarea size="xl" placeholder="Extra Large" />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Auto Resize

텍스트 내용에 따라 높이가 자동 조절됩니다.

<Demo name="components/(components)/textarea/demos/textarea-auto-resize">
  ```tsx
  import { Box, Textarea } from '@vapor-ui/core';

  export default function TextareaAutoResize() {
      return (
          <Box
              $css={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: '100%',
              }}
          >
              <Textarea autoResize placeholder="텍스트를 입력하면 자동으로 높이가 조절됩니다..." />
          </Box>
      );
  }

  ```
</Demo>

### States

Textarea의 다양한 상태를 보여줍니다.

<Demo name="components/(components)/textarea/demos/textarea-states">
  ```tsx
  import { HStack, Text, Textarea, VStack } from '@vapor-ui/core';

  export default function TextareaStates() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      default
                  </Text>
                  <Textarea placeholder="Enter text" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      disabled
                  </Text>
                  <Textarea disabled placeholder="Disabled" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      invalid
                  </Text>
                  <Textarea invalid placeholder="Invalid" />
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      readOnly
                  </Text>
                  <Textarea readOnly defaultValue="Read only content" />
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### maxLength

Textarea에 `maxLength` 속성을 추가하여 입력 가능한 최대 문자 수를 제한하는 기능을 제공합니다.

<Demo name="components/(components)/textarea/demos/textarea-character-count">
  ```tsx
  import { Box, Textarea } from '@vapor-ui/core';

  export default function TextareaCharacterCount() {
      return (
          <Box $css={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Textarea placeholder="Type your message..." maxLength={100} />
          </Box>
      );
  }

  ```
</Demo>

## 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 `&lt;textarea&gt;` 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<br />returns a class based on the component's state.                                                                                                 |
| `style`         | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`        | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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을 하나의 그룹으로 묶어 상태를 함께 관리하는 컴포넌트입니다. 단일 선택과 다중 선택을 지원하며 키보드 내비게이션과 접근성을 제공합니다.

<Demo name="components/(components)/toggle-group/demos/default-toggle-group">
  ```tsx
  import { Toggle, ToggleGroup } from '@vapor-ui/core';
  import {
      AlignCenterOutlineIcon,
      AlignLeftOutlineIcon,
      AlignRightOutlineIcon,
  } from '@vapor-ui/icons';

  export default function DefaultToggleGroup() {
      return (
          <ToggleGroup aria-label="텍스트 정렬">
              <Toggle value="left" aria-label="왼쪽 정렬">
                  <AlignLeftOutlineIcon />
              </Toggle>
              <Toggle value="center" aria-label="가운데 정렬">
                  <AlignCenterOutlineIcon />
              </Toggle>
              <Toggle value="right" aria-label="오른쪽 정렬">
                  <AlignRightOutlineIcon />
              </Toggle>
          </ToggleGroup>
      );
  }

  ```
</Demo>

<Box $css={{ marginTop: '$200' }}>
  <Badge colorPalette="warning">주의!</Badge>

  * `ToggleGroup` 내부의 각 `Toggle`에는 그룹 내에서 고유한 `value` 속성이 필요합니다.
</Box>

## Property

***

### Size

ToggleGroup의 크기를 지정합니다.

<Demo name="components/(components)/toggle-group/demos/toggle-group-size">
  ```tsx
  import { HStack, Text, Toggle, ToggleGroup, VStack } from '@vapor-ui/core';
  import {
      AlignCenterOutlineIcon,
      AlignLeftOutlineIcon,
      AlignRightOutlineIcon,
  } from '@vapor-ui/icons';

  const items = [
      { value: 'left', label: '왼쪽 정렬', Icon: AlignLeftOutlineIcon },
      { value: 'center', label: '가운데 정렬', Icon: AlignCenterOutlineIcon },
      { value: 'right', label: '오른쪽 정렬', Icon: AlignRightOutlineIcon },
  ];

  const sizes = ['sm', 'md', 'lg', 'xl'] as const;

  export default function ToggleGroupSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              {sizes.map((size) => (
                  <HStack key={size} $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-6" typography="body3" foreground="hint-100">
                          {size}
                      </Text>
                      <ToggleGroup size={size} aria-label={`텍스트 정렬 (${size})`}>
                          {items.map(({ value, label, Icon }) => (
                              <Toggle key={value} value={value} aria-label={label}>
                                  <Icon />
                              </Toggle>
                          ))}
                      </ToggleGroup>
                  </HStack>
              ))}
          </VStack>
      );
  }

  ```
</Demo>

### Multiple

`multiple`을 `true`로 설정하면 여러 개의 Toggle을 동시에 선택할 수 있습니다.

<Demo name="components/(components)/toggle-group/demos/toggle-group-multiple">
  ```tsx
  import { HStack, Text, Toggle, ToggleGroup, VStack } from '@vapor-ui/core';
  import { BoldOutlineIcon, ItalicIcon, UnderlineOutlineIcon } from '@vapor-ui/icons';

  export default function ToggleGroupMultiple() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <VStack $css={{ gap: '$75' }}>
                  <Text typography="body3" foreground="hint-100">
                      multiple={'{false}'} (기본값)
                  </Text>
                  <HStack $css={{ gap: '$150' }}>
                      <ToggleGroup aria-label="텍스트 스타일 (단일)">
                          <Toggle value="bold" aria-label="굵게">
                              <BoldOutlineIcon />
                          </Toggle>
                          <Toggle value="italic" aria-label="기울임">
                              <ItalicIcon />
                          </Toggle>
                          <Toggle value="underline" aria-label="밑줄">
                              <UnderlineOutlineIcon />
                          </Toggle>
                      </ToggleGroup>
                  </HStack>
              </VStack>
              <VStack $css={{ gap: '$75' }}>
                  <Text typography="body3" foreground="hint-100">
                      multiple={'{true}'}
                  </Text>
                  <HStack $css={{ gap: '$150' }}>
                      <ToggleGroup multiple aria-label="텍스트 스타일 (다중)">
                          <Toggle value="bold" aria-label="굵게">
                              <BoldOutlineIcon />
                          </Toggle>
                          <Toggle value="italic" aria-label="기울임">
                              <ItalicIcon />
                          </Toggle>
                          <Toggle value="underline" aria-label="밑줄">
                              <UnderlineOutlineIcon />
                          </Toggle>
                      </ToggleGroup>
                  </HStack>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

ToggleGroup 전체를 비활성화합니다.

<Demo name="components/(components)/toggle-group/demos/toggle-group-disabled">
  ```tsx
  import { Toggle, ToggleGroup } from '@vapor-ui/core';
  import {
      AlignCenterOutlineIcon,
      AlignLeftOutlineIcon,
      AlignRightOutlineIcon,
  } from '@vapor-ui/icons';

  export default function ToggleGroupDisabled() {
      return (
          <ToggleGroup disabled defaultValue={['center']} aria-label="텍스트 정렬 (비활성)">
              <Toggle value="left" aria-label="왼쪽 정렬">
                  <AlignLeftOutlineIcon />
              </Toggle>
              <Toggle value="center" aria-label="가운데 정렬">
                  <AlignCenterOutlineIcon />
              </Toggle>
              <Toggle value="right" aria-label="오른쪽 정렬">
                  <AlignRightOutlineIcon />
              </Toggle>
          </ToggleGroup>
      );
  }

  ```
</Demo>

## Examples

***

### Controlled

`value`와 `onValueChange`로 ToggleGroup의 선택 상태를 외부에서 제어할 수 있습니다. 값은 눌린 Toggle의 `value` 배열로 관리됩니다.

<Demo name="components/(components)/toggle-group/demos/toggle-group-controlled">
  ```tsx
  'use client';

  import { useState } from 'react';

  import { HStack, Text, Toggle, ToggleGroup, VStack } from '@vapor-ui/core';
  import {
      AlignCenterOutlineIcon,
      AlignLeftOutlineIcon,
      AlignRightOutlineIcon,
  } from '@vapor-ui/icons';

  export default function ToggleGroupControlled() {
      const [value, setValue] = useState<string[]>(['left']);
      const [value2, setValue2] = useState<string[]>(['left']);

      return (
          <HStack $css={{ gap: '$300', alignItems: 'center' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text>Single</Text>
                  <ToggleGroup value={value} onValueChange={setValue} aria-label="텍스트 정렬">
                      <Toggle value="left" aria-label="왼쪽 정렬">
                          <AlignLeftOutlineIcon />
                      </Toggle>
                      <Toggle value="center" aria-label="가운데 정렬">
                          <AlignCenterOutlineIcon />
                      </Toggle>
                      <Toggle value="right" aria-label="오른쪽 정렬">
                          <AlignRightOutlineIcon />
                      </Toggle>
                  </ToggleGroup>
                  <Text typography="body3">
                      Selected: {value.length > 0 ? value.join(', ') : 'none'}
                  </Text>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text>Multiple</Text>
                  <ToggleGroup
                      value={value2}
                      onValueChange={setValue2}
                      aria-label="텍스트 정렬"
                      multiple
                  >
                      <Toggle value="left" aria-label="왼쪽 정렬">
                          <AlignLeftOutlineIcon />
                      </Toggle>
                      <Toggle value="center" aria-label="가운데 정렬">
                          <AlignCenterOutlineIcon />
                      </Toggle>
                      <Toggle value="right" aria-label="오른쪽 정렬">
                          <AlignRightOutlineIcon />
                      </Toggle>
                  </ToggleGroup>
                  <Text typography="body3">
                      Selected: {value2.length > 0 ? value2.join(', ') : 'none'}
                  </Text>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

## 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<br />the values of all pressed toggle buttons.<br />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<br />the values of all pressed toggle buttons.<br />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<br />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<br />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<br />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<br />the group becomes pressed, the others will become unpressed.<br />When `true` multiple items can be pressed.                  |
| `render`        | `ReactElement`, `function`        | -            | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />Accepts a `ReactElement` or a function that returns the element to render. |


# 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와 결합하여 사용할 수 있습니다.

<Demo name="components/(components)/toggle/demos/default-toggle">
  ```tsx
  import { Toggle } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function DefaultToggle() {
      return (
          <Toggle aria-label="즐겨찾기">
              <HeartIcon />
          </Toggle>
      );
  }

  ```
</Demo>

## Property

***

### Size

Toggle의 크기를 지정합니다.

<Demo name="components/(components)/toggle/demos/toggle-size">
  ```tsx
  import { HStack, Text, Toggle, VStack } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function ToggleSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      sm
                  </Text>
                  <Toggle size="sm" aria-label="즐겨찾기">
                      <HeartIcon />
                  </Toggle>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      md
                  </Text>
                  <Toggle size="md" aria-label="즐겨찾기">
                      <HeartIcon />
                  </Toggle>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      lg
                  </Text>
                  <Toggle size="lg" aria-label="즐겨찾기">
                      <HeartIcon />
                  </Toggle>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-6" typography="body3" foreground="hint-100">
                      xl
                  </Text>
                  <Toggle size="xl" aria-label="즐겨찾기">
                      <HeartIcon />
                  </Toggle>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Variant

Toggle의 시각적 위계를 설정합니다.

<Demo name="components/(components)/toggle/demos/toggle-variant">
  ```tsx
  import { HStack, Text, Toggle, VStack } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function ToggleVariant() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      default
                  </Text>
                  <Toggle variant="default" defaultPressed aria-label="즐겨찾기">
                      <HeartIcon />
                  </Toggle>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      accent
                  </Text>
                  <Toggle variant="accent" defaultPressed aria-label="즐겨찾기">
                      <HeartIcon />
                  </Toggle>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Pressed

Toggle의 눌림 상태를 지정합니다. 초기 상태는 `defaultPressed`로 설정합니다.

<Demo name="components/(components)/toggle/demos/toggle-pressed">
  ```tsx
  import { HStack, Text, Toggle, VStack } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function TogglePressed() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      unpressed
                  </Text>
                  <Toggle aria-label="즐겨찾기">
                      <HeartIcon />
                  </Toggle>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      pressed
                  </Text>
                  <Toggle defaultPressed aria-label="즐겨찾기">
                      <HeartIcon />
                  </Toggle>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

Toggle의 비활성화 상태를 지정합니다.

<Demo name="components/(components)/toggle/demos/toggle-disabled">
  ```tsx
  import { HStack, Text, Toggle, VStack } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function ToggleDisabled() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      unpressed
                  </Text>
                  <Toggle disabled aria-label="즐겨찾기">
                      <HeartIcon />
                  </Toggle>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      pressed
                  </Text>
                  <Toggle disabled defaultPressed aria-label="즐겨찾기">
                      <HeartIcon />
                  </Toggle>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Examples

***

### Controlled

`pressed`와 `onPressedChange`로 Toggle의 눌림 상태를 외부에서 제어할 수 있습니다.

<Demo name="components/(components)/toggle/demos/toggle-controlled">
  ```tsx
  'use client';

  import { useState } from 'react';

  import { HStack, Text, Toggle } from '@vapor-ui/core';
  import { HeartIcon } from '@vapor-ui/icons';

  export default function ToggleControlled() {
      const [pressed, setPressed] = useState(false);

      return (
          <HStack $css={{ gap: '$150', alignItems: 'center' }}>
              <Toggle pressed={pressed} onPressedChange={setPressed} aria-label="즐겨찾기">
                  <HeartIcon />
              </Toggle>
              <Text typography="body3">State: {pressed ? 'On' : 'Off'}</Text>
          </HStack>
      );
  }

  ```
</Demo>

## 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.<br />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.<br />This is the controlled counterpart of `defaultPressed`.                                                                                              |
| `value`           | `string`                          | -         | A unique string that identifies the toggle when used<br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`           | `React.CSSProperties`, `function` | -         | Style applied to the element, or a function that<br />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 `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`          | `ReactElement`, `function`        | -         | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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는 관련된 액션을 하나의 영역에 모아 제공하는 컴포넌트입니다. 버튼, 토글, 입력, 구분선 등을 조합할 수 있으며 키보드 내비게이션과 접근성을 지원합니다.

<Demo name="components/(components)/toolbar/demos/default-toolbar">
  ```tsx
  import { type ComponentType, cloneElement, useState } from 'react';

  import { Card, Select, Toggle, ToggleGroup, Toolbar, Tooltip } from '@vapor-ui/core';
  import {
      AlignCenterOutlineIcon,
      AlignLeftOutlineIcon,
      AlignRightOutlineIcon,
      BoldOutlineIcon,
      ItalicIcon,
      StrikeOutlineIcon,
      UnderlineOutlineIcon,
  } from '@vapor-ui/icons';

  export default function DefaultToolbar() {
      const [fontFamily, setFontFamily] = useState('');
      const [fontSize, setFontSize] = useState<number>();

      const handleValueChange = (value: string) => {
          const parsedValue = value ? parseInt(value, 10) : NaN;
          setFontSize(isNaN(parsedValue) ? 16 : parsedValue);
      };

      return (
          <Card.Root>
              <Card.Header>
                  <Toolbar.Root>
                      <Toolbar.Input
                          placeholder="font size(px)"
                          value={fontSize}
                          onValueChange={handleValueChange}
                      />
                      <AlignSelect
                          trigger={Toolbar.Button}
                          items={selectItems}
                          value={fontFamily}
                          onValueChange={setFontFamily}
                          placeholder="select font"
                      />

                      <Toolbar.Separator />

                      <TooltipButton description="Bold">
                          <Toolbar.Button render={<Toggle aria-label="Bold" />}>
                              <BoldOutlineIcon />
                          </Toolbar.Button>
                      </TooltipButton>
                      <TooltipButton description="Italic">
                          <Toolbar.Button render={<Toggle aria-label="Italic" />}>
                              <ItalicIcon />
                          </Toolbar.Button>
                      </TooltipButton>
                      <TooltipButton description="Strike Through">
                          <Toolbar.Button render={<Toggle aria-label="Strike Through" />}>
                              <StrikeOutlineIcon />
                          </Toolbar.Button>
                      </TooltipButton>
                      <TooltipButton description="Underline">
                          <Toolbar.Button render={<Toggle aria-label="Underline" />}>
                              <UnderlineOutlineIcon />
                          </Toolbar.Button>
                      </TooltipButton>

                      <Toolbar.Separator />

                      <Toolbar.Group render={<ToggleGroup />}>
                          <TooltipButton description="Align Left">
                              <Toolbar.Button
                                  render={<Toggle variant="accent" aria-label="Align Left" />}
                              >
                                  <AlignLeftOutlineIcon />
                              </Toolbar.Button>
                          </TooltipButton>
                          <TooltipButton description="Align Center">
                              <Toolbar.Button
                                  render={<Toggle variant="accent" aria-label="Align Center" />}
                              >
                                  <AlignCenterOutlineIcon />
                              </Toolbar.Button>
                          </TooltipButton>
                          <TooltipButton description="Align Right">
                              <Toolbar.Button
                                  render={<Toggle variant="accent" aria-label="Align Right" />}
                              >
                                  <AlignRightOutlineIcon />
                              </Toolbar.Button>
                          </TooltipButton>
                      </Toolbar.Group>

                      <Toolbar.Separator />

                      <Toolbar.Group>
                          <Toolbar.Button>Button 1</Toolbar.Button>
                          <Toolbar.Button>Button 2</Toolbar.Button>
                          <Toolbar.Button>Button 3</Toolbar.Button>
                      </Toolbar.Group>
                  </Toolbar.Root>
              </Card.Header>

              <Card.Body>
                  <p style={{ fontFamily, fontSize: `${fontSize}px` }}>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
                      Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed,
                      dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper
                      congue, euismod non, mi.
                  </p>

                  <p></p>
              </Card.Body>
          </Card.Root>
      );
  }

  /* -----------------------------------------------------------------------------------------------*/

  type SelectItem = {
      value: string;
      label: string;
  };

  const selectItems: SelectItem[] = [
      { value: 'helvetica', label: 'Helvetica' },
      { value: 'Roboto', label: 'Roboto' },
      { value: 'Arial', label: 'Arial' },
      { value: 'Monospace', label: 'Monospace' },
      { value: 'Montserrat', label: 'Montserrat' },
  ];

  interface TooltipButtonProps {
      description: React.ReactNode;
      children: React.ReactElement;
  }

  const TooltipButton = ({ description, children, ...props }: TooltipButtonProps) => {
      return (
          <Tooltip.Root {...props}>
              <Tooltip.Trigger render={children} delay={150} />
              <Tooltip.Popup>{description}</Tooltip.Popup>
          </Tooltip.Root>
      );
  };

  /* -----------------------------------------------------------------------------------------------*/

  interface AlignSelectProps {
      trigger: ComponentType<Toolbar.Button.Props>;
      items: SelectItem[];
      value: string;
      onValueChange: (value: string) => void;
      placeholder?: string;
  }

  const AlignSelect = ({
      trigger: Trigger,
      items,
      value,
      onValueChange,
      placeholder,
  }: AlignSelectProps) => {
      const [font, setFont] = useState(value);
      const handleFontChange = (value: string | null) => {
          setFont((prev) => value ?? prev);
          onValueChange(value ?? '');
      };

      const trigger = cloneElement(<Trigger render={<Select.TriggerPrimitive />} />, {
          children: (
              <>
                  <Select.ValuePrimitive style={{ fontFamily: font }} />
                  <Select.TriggerIconPrimitive />
              </>
          ),
      });

      return (
          <Select.Root
              items={items}
              value={font}
              onValueChange={handleFontChange}
              placeholder={placeholder}
          >
              {trigger}

              <Select.Popup $css={{ minWidth: 'auto' }}>
                  {items.map((item) => (
                      <Select.Item key={item.value} value={item.value}>
                          {item.label}
                      </Select.Item>
                  ))}
              </Select.Popup>
          </Select.Root>
      );
  };

  ```
</Demo>

<Box $css={{ marginTop: '$200' }}>
  <Badge colorPalette="warning">주의!</Badge>

  * `Toolbar.Button`에 `render` prop으로 `Toggle`, `IconButton` 등 다른 컴포넌트를 결합할 수 있습니다.
  * 스크린 리더 사용자를 위해 `Toolbar.Root`에 `aria-label`을 지정하세요.
</Box>

## Property

***

### Size

Toolbar의 크기를 지정합니다. 하위의 `Toolbar.Button`, `Toolbar.Input`에도 함께 적용됩니다.

<Demo name="components/(components)/toolbar/demos/toolbar-size">
  ```tsx
  import { HStack, Text, Toggle, Toolbar, VStack } from '@vapor-ui/core';
  import { BoldOutlineIcon, ItalicIcon, UnderlineOutlineIcon } from '@vapor-ui/icons';

  const sizes = ['sm', 'md', 'lg', 'xl'] as const;

  export default function ToolbarSize() {
      return (
          <VStack $css={{ gap: '$150' }}>
              {sizes.map((size) => (
                  <HStack key={size} $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-6" typography="body3" foreground="hint-100">
                          {size}
                      </Text>
                      <Toolbar.Root size={size} aria-label={`텍스트 서식 (${size})`}>
                          <Toolbar.Button render={<Toggle aria-label="굵게" />}>
                              <BoldOutlineIcon />
                          </Toolbar.Button>
                          <Toolbar.Button render={<Toggle aria-label="기울임" />}>
                              <ItalicIcon />
                          </Toolbar.Button>
                          <Toolbar.Button render={<Toggle aria-label="밑줄" />}>
                              <UnderlineOutlineIcon />
                          </Toolbar.Button>
                      </Toolbar.Root>
                  </HStack>
              ))}
          </VStack>
      );
  }

  ```
</Demo>

### Variant

Toolbar의 스타일 변형을 지정합니다.

<Demo name="components/(components)/toolbar/demos/toolbar-variant">
  ```tsx
  import { HStack, Text, Toggle, Toolbar, VStack } from '@vapor-ui/core';
  import { BoldOutlineIcon, ItalicIcon, UnderlineOutlineIcon } from '@vapor-ui/icons';

  const variants = ['outline', 'ghost'] as const;

  export default function ToolbarVariant() {
      return (
          <VStack $css={{ gap: '$150' }}>
              {variants.map((variant) => (
                  <HStack key={variant} $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          {variant}
                      </Text>
                      <Toolbar.Root variant={variant} aria-label={`텍스트 서식 (${variant})`}>
                          <Toolbar.Button render={<Toggle aria-label="굵게" />}>
                              <BoldOutlineIcon />
                          </Toolbar.Button>
                          <Toolbar.Button render={<Toggle aria-label="기울임" />}>
                              <ItalicIcon />
                          </Toolbar.Button>
                          <Toolbar.Button render={<Toggle aria-label="밑줄" />}>
                              <UnderlineOutlineIcon />
                          </Toolbar.Button>
                      </Toolbar.Root>
                  </HStack>
              ))}
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

Toolbar 전체를 비활성화합니다. 하위 아이템도 함께 비활성화됩니다.

<Demo name="components/(components)/toolbar/demos/toolbar-disabled">
  ```tsx
  import { Toggle, Toolbar } from '@vapor-ui/core';
  import { BoldOutlineIcon, ItalicIcon, UnderlineOutlineIcon } from '@vapor-ui/icons';

  export default function ToolbarDisabled() {
      return (
          <Toolbar.Root disabled aria-label="텍스트 서식 (비활성)">
              <Toolbar.Button render={<Toggle aria-label="굵게" />}>
                  <BoldOutlineIcon />
              </Toolbar.Button>
              <Toolbar.Button render={<Toggle aria-label="기울임" />}>
                  <ItalicIcon />
              </Toolbar.Button>
              <Toolbar.Button render={<Toggle aria-label="밑줄" />}>
                  <UnderlineOutlineIcon />
              </Toolbar.Button>
          </Toolbar.Root>
      );
  }

  ```
</Demo>

## Examples

***

### Separator

`Toolbar.Separator`로 관련 있는 아이템 묶음을 시각적으로 구분할 수 있습니다.

<Demo name="components/(components)/toolbar/demos/toolbar-separator">
  ```tsx
  import { Toggle, ToggleGroup, Toolbar } from '@vapor-ui/core';
  import {
      AlignCenterOutlineIcon,
      AlignLeftOutlineIcon,
      AlignRightOutlineIcon,
      BoldOutlineIcon,
      ItalicIcon,
      UnderlineOutlineIcon,
  } from '@vapor-ui/icons';

  export default function ToolbarSeparator() {
      return (
          <Toolbar.Root aria-label="텍스트 서식">
              <Toolbar.Button render={<Toggle aria-label="굵게" />}>
                  <BoldOutlineIcon />
              </Toolbar.Button>
              <Toolbar.Button render={<Toggle aria-label="기울임" />}>
                  <ItalicIcon />
              </Toolbar.Button>
              <Toolbar.Button render={<Toggle aria-label="밑줄" />}>
                  <UnderlineOutlineIcon />
              </Toolbar.Button>

              <Toolbar.Separator />

              <Toolbar.Group render={<ToggleGroup />}>
                  <Toolbar.Button render={<Toggle aria-label="왼쪽 정렬" />}>
                      <AlignLeftOutlineIcon />
                  </Toolbar.Button>
                  <Toolbar.Button render={<Toggle aria-label="가운데 정렬" />}>
                      <AlignCenterOutlineIcon />
                  </Toolbar.Button>
                  <Toolbar.Button render={<Toggle aria-label="오른쪽 정렬" />}>
                      <AlignRightOutlineIcon />
                  </Toolbar.Button>
              </Toolbar.Group>
          </Toolbar.Root>
      );
  }

  ```
</Demo>

### Group

`Toolbar.Group`으로 아이템을 논리적으로 묶어 함께 관리할 수 있습니다. 그룹 단위로 `disabled`를 지정할 수 있습니다.

<Demo name="components/(components)/toolbar/demos/toolbar-group">
  ```tsx
  import { Toolbar } from '@vapor-ui/core';

  export default function ToolbarGroup() {
      return (
          <Toolbar.Root aria-label="문서 액션">
              <Toolbar.Group>
                  <Toolbar.Button>실행 취소</Toolbar.Button>
                  <Toolbar.Button>다시 실행</Toolbar.Button>
              </Toolbar.Group>
              <Toolbar.Separator />
              <Toolbar.Group disabled>
                  <Toolbar.Button>잘라내기</Toolbar.Button>
                  <Toolbar.Button>복사</Toolbar.Button>
                  <Toolbar.Button>붙여넣기</Toolbar.Button>
              </Toolbar.Group>
          </Toolbar.Root>
      );
  }

  ```
</Demo>

### Input

`Toolbar.Input`으로 툴바 안에 텍스트 입력 필드를 배치할 수 있습니다. `onValueChange`로 입력값 변화를 처리합니다.

<Demo name="components/(components)/toolbar/demos/toolbar-input">
  ```tsx
  'use client';

  import { useState } from 'react';

  import { Toggle, Toolbar } from '@vapor-ui/core';
  import { BoldOutlineIcon, ItalicIcon } from '@vapor-ui/icons';

  export default function ToolbarInput() {
      const [fontSize, setFontSize] = useState('');

      return (
          <Toolbar.Root aria-label="텍스트 편집">
              <Toolbar.Input
                  placeholder="글자 크기 (px)"
                  value={fontSize}
                  onValueChange={setFontSize}
              />
              <Toolbar.Separator />
              <Toolbar.Button render={<Toggle aria-label="굵게" />}>
                  <BoldOutlineIcon />
              </Toolbar.Button>
              <Toolbar.Button render={<Toggle aria-label="기울임" />}>
                  <ItalicIcon />
              </Toolbar.Button>
          </Toolbar.Root>
      );
  }

  ```
</Demo>

## 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<br />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<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`                 | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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 `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`                | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`                 | `React.CSSProperties`, `function`       | -       | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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

요소에 대한 추가 정보를 제공하는 툴팁 컴포넌트입니다

<Demo name="components/(components)/tooltip/demos/default-tooltip">
  ```tsx
  'use client';

  import { HStack, IconButton, Tooltip } from '@vapor-ui/core';
  import { AlignCenterOutlineIcon, BoldOutlineIcon, UnderlineOutlineIcon } from '@vapor-ui/icons';

  export default function DefaultTooltip() {
      return (
          <HStack $css={{ gap: '$100' }}>
              <Tooltip.Root>
                  <Tooltip.Trigger
                      render={
                          <IconButton>
                              <BoldOutlineIcon />
                          </IconButton>
                      }
                  />
                  <Tooltip.Popup>Bold</Tooltip.Popup>
              </Tooltip.Root>
              <Tooltip.Root>
                  <Tooltip.Trigger
                      render={
                          <IconButton>
                              <UnderlineOutlineIcon />
                          </IconButton>
                      }
                  />
                  <Tooltip.Popup>Underline</Tooltip.Popup>
              </Tooltip.Root>
              <Tooltip.Root>
                  <Tooltip.Trigger
                      render={
                          <IconButton>
                              <AlignCenterOutlineIcon />
                          </IconButton>
                      }
                  />
                  <Tooltip.Popup>Align Center</Tooltip.Popup>
              </Tooltip.Root>
          </HStack>
      );
  }

  ```
</Demo>

<Box marginTop="16px">
  <Badge colorPalette="warning">주의!</Badge>

  * **반드시 Button, IconButton 등과 같은 상호작용이 가능한 요소와 함께 사용하세요.** Tooltip은 상호작용 가능한 요소의 동작에 대한 추가 정보를 제공하는 작은 팝업입니다. 상호작용이 불가능한 요소에 사용하거나, 단순히 정보를 제공하기 위한 용도로 사용하려면 `Popover` 컴포넌트를 고려해보세요.

  * **Tooltip에 중요한 정보를 포함하지 마세요.** Tooltip은 보조적인 정보를 제공하기 위한 용도로 설계되었으며, 중요한 정보는 포함하지 않는 것이 좋습니다. 중요한 정보는 항상 페이지의 주요 콘텐츠에 포함시켜야 합니다.
</Box>

## Property

***

### Positioning

Tooltip의 표시 위치를 설정합니다.

<Demo name="components/(components)/tooltip/demos/tooltip-positioning">
  ```tsx
  import { Button, HStack, Text, Tooltip, VStack } from '@vapor-ui/core';

  export default function TooltipPositioning() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      top
                  </Text>
                  <Tooltip.Root>
                      <Tooltip.Trigger render={<Button>상단</Button>} />
                      <Tooltip.PortalPrimitive>
                          <Tooltip.PositionerPrimitive side="top">
                              <Tooltip.PopupPrimitive>상단에 표시되는 툴팁</Tooltip.PopupPrimitive>
                          </Tooltip.PositionerPrimitive>
                      </Tooltip.PortalPrimitive>
                  </Tooltip.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      right
                  </Text>
                  <Tooltip.Root>
                      <Tooltip.Trigger render={<Button>우측</Button>} />
                      <Tooltip.PortalPrimitive>
                          <Tooltip.PositionerPrimitive side="right">
                              <Tooltip.PopupPrimitive>우측에 표시되는 툴팁</Tooltip.PopupPrimitive>
                          </Tooltip.PositionerPrimitive>
                      </Tooltip.PortalPrimitive>
                  </Tooltip.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      bottom
                  </Text>
                  <Tooltip.Root>
                      <Tooltip.Trigger render={<Button>하단</Button>} />
                      <Tooltip.PortalPrimitive>
                          <Tooltip.PositionerPrimitive side="bottom">
                              <Tooltip.PopupPrimitive>하단에 표시되는 툴팁</Tooltip.PopupPrimitive>
                          </Tooltip.PositionerPrimitive>
                      </Tooltip.PortalPrimitive>
                  </Tooltip.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      left
                  </Text>
                  <Tooltip.Root>
                      <Tooltip.Trigger render={<Button>좌측</Button>} />
                      <Tooltip.PortalPrimitive>
                          <Tooltip.PositionerPrimitive side="left">
                              <Tooltip.PopupPrimitive>좌측에 표시되는 툴팁</Tooltip.PopupPrimitive>
                          </Tooltip.PositionerPrimitive>
                      </Tooltip.PortalPrimitive>
                  </Tooltip.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Alignment

Tooltip의 정렬 위치를 설정합니다.

<Demo name="components/(components)/tooltip/demos/tooltip-alignment">
  ```tsx
  import { Button, HStack, Text, Tooltip, VStack } from '@vapor-ui/core';

  export default function TooltipAlignment() {
      return (
          <HStack $css={{ gap: '$400' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      Bottom Alignment
                  </Text>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          start
                      </Text>
                      <Tooltip.Root>
                          <Tooltip.Trigger render={<Button>시작</Button>} />
                          <Tooltip.PortalPrimitive>
                              <Tooltip.PositionerPrimitive side="bottom" align="start">
                                  <Tooltip.PopupPrimitive>
                                      시작 위치에 정렬된 툴팁
                                  </Tooltip.PopupPrimitive>
                              </Tooltip.PositionerPrimitive>
                          </Tooltip.PortalPrimitive>
                      </Tooltip.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          center
                      </Text>
                      <Tooltip.Root>
                          <Tooltip.Trigger render={<Button>중앙</Button>} />
                          <Tooltip.PortalPrimitive>
                              <Tooltip.PositionerPrimitive side="bottom" align="center">
                                  <Tooltip.PopupPrimitive>중앙에 정렬된 툴팁</Tooltip.PopupPrimitive>
                              </Tooltip.PositionerPrimitive>
                          </Tooltip.PortalPrimitive>
                      </Tooltip.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          end
                      </Text>
                      <Tooltip.Root>
                          <Tooltip.Trigger render={<Button>끝</Button>} />
                          <Tooltip.PortalPrimitive>
                              <Tooltip.PositionerPrimitive side="bottom" align="end">
                                  <Tooltip.PopupPrimitive>
                                      끝 위치에 정렬된 툴팁
                                  </Tooltip.PopupPrimitive>
                              </Tooltip.PositionerPrimitive>
                          </Tooltip.PortalPrimitive>
                      </Tooltip.Root>
                  </HStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      Right Alignment
                  </Text>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          start
                      </Text>
                      <Tooltip.Root>
                          <Tooltip.Trigger render={<Button>시작</Button>} />
                          <Tooltip.PortalPrimitive>
                              <Tooltip.PositionerPrimitive side="right" align="start">
                                  <Tooltip.PopupPrimitive>상단 시작 위치</Tooltip.PopupPrimitive>
                              </Tooltip.PositionerPrimitive>
                          </Tooltip.PortalPrimitive>
                      </Tooltip.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          center
                      </Text>
                      <Tooltip.Root>
                          <Tooltip.Trigger render={<Button>중앙</Button>} />
                          <Tooltip.PortalPrimitive>
                              <Tooltip.PositionerPrimitive side="right" align="center">
                                  <Tooltip.PopupPrimitive>중앙 위치</Tooltip.PopupPrimitive>
                              </Tooltip.PositionerPrimitive>
                          </Tooltip.PortalPrimitive>
                      </Tooltip.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-16" typography="body3" foreground="hint-100">
                          end
                      </Text>
                      <Tooltip.Root>
                          <Tooltip.Trigger render={<Button>끝</Button>} />
                          <Tooltip.PortalPrimitive>
                              <Tooltip.PositionerPrimitive side="right" align="end">
                                  <Tooltip.PopupPrimitive>하단 끝 위치</Tooltip.PopupPrimitive>
                              </Tooltip.PositionerPrimitive>
                          </Tooltip.PortalPrimitive>
                      </Tooltip.Root>
                  </HStack>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

### Delay

`Tooltip.Trigger`의 `delay` prop으로 Tooltip이 표시되기까지의 지연 시간을 설정합니다.

<Demo name="components/(components)/tooltip/demos/tooltip-delay">
  ```tsx
  import { Button, HStack, Text, Tooltip, VStack } from '@vapor-ui/core';

  export default function TooltipDelay() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      0ms
                  </Text>
                  <Tooltip.Root>
                      <Tooltip.Trigger delay={0} render={<Button>즉시 표시</Button>} />
                      <Tooltip.Popup>지연 없이 바로 표시되는 툴팁</Tooltip.Popup>
                  </Tooltip.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      500ms
                  </Text>
                  <Tooltip.Root>
                      <Tooltip.Trigger delay={500} render={<Button>0.5초 지연</Button>} />
                      <Tooltip.Popup>0.5초 후에 표시되는 툴팁</Tooltip.Popup>
                  </Tooltip.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      1000ms
                  </Text>
                  <Tooltip.Root>
                      <Tooltip.Trigger delay={1000} render={<Button>1초 지연</Button>} />
                      <Tooltip.Popup>1초 후에 표시되는 툴팁</Tooltip.Popup>
                  </Tooltip.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      2000ms
                  </Text>
                  <Tooltip.Root>
                      <Tooltip.Trigger delay={2000} render={<Button>2초 지연</Button>} />
                      <Tooltip.Popup>2초 후에 표시되는 툴팁</Tooltip.Popup>
                  </Tooltip.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Offset

Tooltip의 거리와 정렬 오프셋을 조정할 수 있습니다.

<Demo name="components/(components)/tooltip/demos/tooltip-offset">
  ```tsx
  import { Button, HStack, Text, Tooltip, VStack } from '@vapor-ui/core';

  export default function TooltipOffset() {
      return (
          <HStack $css={{ gap: '$400' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      Side Offset
                  </Text>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-12" typography="body3" foreground="hint-100">
                          0px
                      </Text>
                      <Tooltip.Root>
                          <Tooltip.Trigger render={<Button>0px</Button>} />
                          <Tooltip.PortalPrimitive>
                              <Tooltip.PositionerPrimitive sideOffset={0}>
                                  <Tooltip.PopupPrimitive>거리 0px</Tooltip.PopupPrimitive>
                              </Tooltip.PositionerPrimitive>
                          </Tooltip.PortalPrimitive>
                      </Tooltip.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-12" typography="body3" foreground="hint-100">
                          10px
                      </Text>
                      <Tooltip.Root>
                          <Tooltip.Trigger render={<Button>10px</Button>} />
                          <Tooltip.PortalPrimitive>
                              <Tooltip.PositionerPrimitive sideOffset={10}>
                                  <Tooltip.PopupPrimitive>거리 10px</Tooltip.PopupPrimitive>
                              </Tooltip.PositionerPrimitive>
                          </Tooltip.PortalPrimitive>
                      </Tooltip.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-12" typography="body3" foreground="hint-100">
                          20px
                      </Text>
                      <Tooltip.Root>
                          <Tooltip.Trigger render={<Button>20px</Button>} />
                          <Tooltip.PortalPrimitive>
                              <Tooltip.PositionerPrimitive sideOffset={20}>
                                  <Tooltip.PopupPrimitive>거리 20px</Tooltip.PopupPrimitive>
                              </Tooltip.PositionerPrimitive>
                          </Tooltip.PortalPrimitive>
                      </Tooltip.Root>
                  </HStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      Align Offset
                  </Text>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-12" typography="body3" foreground="hint-100">
                          -20px
                      </Text>
                      <Tooltip.Root>
                          <Tooltip.Trigger render={<Button>-20px</Button>} />
                          <Tooltip.PortalPrimitive>
                              <Tooltip.PositionerPrimitive alignOffset={-20}>
                                  <Tooltip.PopupPrimitive>정렬 오프셋 -20px</Tooltip.PopupPrimitive>
                              </Tooltip.PositionerPrimitive>
                          </Tooltip.PortalPrimitive>
                      </Tooltip.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-12" typography="body3" foreground="hint-100">
                          0px
                      </Text>
                      <Tooltip.Root>
                          <Tooltip.Trigger render={<Button>0px</Button>} />
                          <Tooltip.PortalPrimitive>
                              <Tooltip.PositionerPrimitive alignOffset={0}>
                                  <Tooltip.PopupPrimitive>정렬 오프셋 0px</Tooltip.PopupPrimitive>
                              </Tooltip.PositionerPrimitive>
                          </Tooltip.PortalPrimitive>
                      </Tooltip.Root>
                  </HStack>
                  <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                      <Text className="w-12" typography="body3" foreground="hint-100">
                          +20px
                      </Text>
                      <Tooltip.Root>
                          <Tooltip.Trigger render={<Button>+20px</Button>} />
                          <Tooltip.PortalPrimitive>
                              <Tooltip.PositionerPrimitive alignOffset={20}>
                                  <Tooltip.PopupPrimitive>정렬 오프셋 +20px</Tooltip.PopupPrimitive>
                              </Tooltip.PositionerPrimitive>
                          </Tooltip.PortalPrimitive>
                      </Tooltip.Root>
                  </HStack>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

## Examples

***

### Content Variations

다양한 형태의 툴팁 내용을 표시할 수 있습니다.

<Demo name="components/(components)/tooltip/demos/tooltip-content">
  ```tsx
  'use client';

  import { HStack, IconButton, Text, Tooltip, VStack } from '@vapor-ui/core';
  import {
      AlignCenterOutlineIcon,
      AlignJustifyOutlineIcon,
      AlignLeftOutlineIcon,
      AlignRightOutlineIcon,
  } from '@vapor-ui/icons';

  export default function TooltipPopup() {
      return (
          <VStack $css={{ gap: '$150' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      왼쪽 정렬
                  </Text>
                  <Tooltip.Root>
                      <Tooltip.Trigger render={<IconButton aria-label="왼쪽 정렬" />}>
                          <AlignLeftOutlineIcon />
                      </Tooltip.Trigger>
                      <Tooltip.Popup>왼쪽 정렬</Tooltip.Popup>
                  </Tooltip.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      중앙 정렬
                  </Text>
                  <Tooltip.Root>
                      <Tooltip.Trigger render={<IconButton aria-label="중앙 정렬" />}>
                          <AlignCenterOutlineIcon />
                      </Tooltip.Trigger>
                      <Tooltip.Popup>중앙 정렬</Tooltip.Popup>
                  </Tooltip.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      오른쪽 정렬
                  </Text>

                  <Tooltip.Root>
                      <Tooltip.Trigger render={<IconButton aria-label="오른쪽 정렬" />}>
                          <AlignRightOutlineIcon />
                      </Tooltip.Trigger>
                      <Tooltip.Popup>오른쪽 정렬</Tooltip.Popup>
                  </Tooltip.Root>
              </HStack>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      양쪽 정렬
                  </Text>

                  <Tooltip.Root>
                      <Tooltip.Trigger render={<IconButton aria-label="양쪽 정렬" />}>
                          <AlignJustifyOutlineIcon />
                      </Tooltip.Trigger>
                      <Tooltip.Popup>양쪽 정렬</Tooltip.Popup>
                  </Tooltip.Root>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Props Table

***

### Tooltip.Root

| Prop                    | Type                                            | Default | Description                                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------------- | ----------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultOpen`           | `boolean`                                       | `false` | Whether the tooltip is initially open.<br /><br />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<Tooltip.Root.Actions \| null>` | -       | A ref to imperative actions.<br />- `unmount`: Ends the closing phase of the tooltip after an externally controlled closing animation finishes.<br />Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the tooltip completes closing on its own.<br />Whether it leaves the DOM is decided by `keepMounted` on the portal.<br />- `close`: Closes the tooltip imperatively when called. |
| `children`              | `ReactNode`, `function`                         | -       | The content of the tooltip.<br />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.<br />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<unknown>`                        | -       | A handle to associate the tooltip with a trigger.<br />If specified, allows external triggers to control the tooltip's open state.<br />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.<br />This is useful in conjunction with the `open` prop to create a controlled tooltip.<br />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<br />returns a class based on the component's state.                                                                                                                                                                                          |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />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.<br />Note that this doesn't apply the `disabled` attribute to the trigger element.<br />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<unknown>`          | -       | 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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `portalElement`     | `ReactElement<TooltipPortalPrimitive.Props>`     | -       | Replaces the default `Tooltip.PortalPrimitive`. Use to change the portal container.                                                                                                                       |
| `positionerElement` | `ReactElement<TooltipPositionerPrimitive.Props>` | -       | 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<br />returns a style object based on the component's state.                                                                                              |
| `render`            | `ReactElement`, `function`                       | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`       | `React.CSSProperties`, `function`                                                         | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `container`   | `HTMLElement`, `ShadowRoot`, `React.RefObject<HTMLElement \| ShadowRoot \| null>`, `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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `style`                 | `React.CSSProperties`, `function`                                                   | -                    | Style applied to the element, or a function that<br />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.<br />Also accepts a function that returns the offset to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `anchor`                | `Element`, `VirtualElement`, `React.RefObject<Element \| null>`, `function`, `null` | -                    | An element to position the popup against.<br />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.<br /><br />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.<br /><br />`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):<br />- `'flip'`: keep the requested side when it fits; otherwise try the opposite side<br />  (`top` and `bottom`, or `left` and `right`).<br />- `'shift'`: never change side; keep the requested side and move the popup within<br />  the clipping boundary so it stays visible.<br />- `'none'`: do not correct side-axis overflow.<br /><br />`align` controls overflow on the alignment axis (`start`/`center`/`end`):<br />- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.<br />- `'shift'`: keep side and requested alignment, then nudge the popup along the<br />  alignment axis to fit.<br />- `'none'`: do not correct alignment-axis overflow.<br /><br />`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the<br />preferred axis cannot fit:<br />- `'start'`: allow perpendicular fallback and try the logical start side first<br />  (`top` before `bottom`, or `left` before `right` in LTR).<br />- `'end'`: allow perpendicular fallback and try the logical end side first<br />  (`bottom` before `top`, or `right` before `left` in LTR).<br />- `'none'`: do not fallback to the perpendicular axis.<br /><br />When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.<br />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.<br />May automatically change to avoid collisions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `sideOffset`            | `number`, `function`                                                                | `10`                 | Distance between the anchor and the popup in pixels.<br />Also accepts a function that returns the distance to read the dimensions of the anchor<br />and positioner elements, along with its side and alignment.<br /><br />The function takes a `data` object parameter with the following properties:<br />- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.<br />- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.<br />- `data.side`: which side of the anchor element the positioner is aligned against.<br />- `data.align`: how the positioner is aligned relative to the specified side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `sticky`                | `boolean`                                                                           | `false`              | Whether to maintain the popup in the viewport after<br />the anchor element was scrolled out of view.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `render`                | `ReactElement`, `function`                                                          | -                    | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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 컴포넌트는 화면의 모서리에 일시적인 알림 메시지를 표시하는 데 사용됩니다.

사용자의 작업에 대한 피드백을 제공하고, 피드백을 하나의 리스트로 관리하기 때문에 다른 컴포넌트와 사용 방식이 다릅니다.

<Demo name="components/(components)/toast/demos/default-toast">
  ```tsx
  import { Button, Toast } from '@vapor-ui/core';

  const toastManager = Toast.createToastManager();

  export default function Default() {
      return (
          <Toast.Provider toastManager={toastManager}>
              <App />
          </Toast.Provider>
      );
  }

  const App = () => {
      const addToast = () => {
          toastManager.add({
              title: 'This is a toast message!',
              description: 'Here is a description for the toast message.',
          });
      };

      return <Button onClick={addToast}>Add Toast</Button>;
  };

  ```
</Demo>

## Property

### Methods

Toast를 추가, 업데이트 및 제거할 수 있습니다.

<Demo name="components/(components)/toast/demos/toast-method">
  ```tsx
  import { Button, HStack, Toast } from '@vapor-ui/core';

  const toastManager = Toast.createToastManager();

  export default function Method() {
      return (
          <Toast.Provider toastManager={toastManager}>
              <App />
          </Toast.Provider>
      );
  }

  const App = () => {
      const toastManager = Toast.useToastManager();

      const addToast = () => {
          toastManager.add({
              title: 'This is a toast message added by method!',
              description: 'Here is a description for the toast message added by method.',
          });
      };

      const updateToast = () => {
          const id = toastManager.add({
              title: 'This is a toast message to be updated!',
              description: 'Here is a description for the toast message to be updated.',

              actionProps: {
                  children: 'Update',
                  onClick: () => {
                      toastManager.update(id, {
                          title: 'Updated!',
                          colorPalette: 'success',
                      });
                  },
              },
          });
      };

      const removeToast = () => {
          const id = toastManager.add({
              title: 'This is a toast message to be removed!',
              description: 'Here is a description for the toast message to be removed.',

              actionProps: {
                  children: 'Remove',
                  onClick: () => {
                      toastManager.close(id);
                      toastManager.add({
                          title: 'Toast removed!',
                          colorPalette: 'danger',
                      });
                  },
              },
          });
      };

      const promiseToast = () => {
          const fakePromise = new Promise<string>((resolve, reject) => {
              setTimeout(() => {
                  if (Math.random() > 0.5) resolve('Data loaded successfully!');
                  else reject(new Error('Failed to load data'));
              }, 3000);
          });

          toastManager.promise(fakePromise, {
              loading: {
                  title: 'Loading...',
                  description: 'Please wait while we load the data.',
                  colorPalette: 'info',
              },
              success: {
                  title: 'Success!',
                  description: 'The data has been loaded successfully.',
                  colorPalette: 'success',
              },
              error: {
                  title: 'Error!',
                  description: 'There was an error loading the data.',
                  colorPalette: 'danger',
              },
          });
      };

      return (
          <HStack $css={{ gap: '$400', alignItems: 'center' }}>
              <Button onClick={addToast}>Add Toast</Button>

              <Button onClick={updateToast}>Update Toast</Button>

              <Button onClick={removeToast}>Remove Toast</Button>

              <Button onClick={promiseToast}>Promise Toast</Button>
          </HStack>
      );
  };

  ```
</Demo>

### ColorPalette

Toast의 색상 팔레트를 설정합니다.

<Demo name="components/(components)/toast/demos/toast-color-palette">
  ```tsx
  import { Button, HStack, Toast } from '@vapor-ui/core';

  const toastManager = Toast.createToastManager();

  export default function ColorPalette() {
      const addToast = (colorPalette: 'info' | 'danger' | 'success') => {
          toastManager.add({
              title: 'This is a color palette toast message!',
              description: 'Here is a description for the color palette toast message.',
              colorPalette,
          });
      };

      return (
          <Toast.Provider toastManager={toastManager}>
              <HStack $css={{ gap: '$400', alignItems: 'center' }}>
                  <Button colorPalette="secondary" onClick={() => addToast('info')}>
                      Info Toast
                  </Button>
                  <Button colorPalette="danger" onClick={() => addToast('danger')}>
                      Danger Toast
                  </Button>
                  <Button colorPalette="success" onClick={() => addToast('success')}>
                      Success Toast
                  </Button>
              </HStack>
          </Toast.Provider>
      );
  }

  ```
</Demo>

## Examples

### Action

Action 버튼과 함께 사용할 수 있습니다.

<Demo name="components/(components)/toast/demos/toast-action">
  ```tsx
  import { Button, Toast } from '@vapor-ui/core';

  const toastManager = Toast.createToastManager();

  export default function Action() {
      const handleActionToast = () => {
          toastManager.add({
              title: 'This is an action toast message!',
              description: 'Here is a description for the action toast message.',
              actionProps: {
                  children: 'action',
                  onClick: () => {
                      alert('Action button clicked!');
                  },
              },
          });
      };

      return (
          <Toast.Provider toastManager={toastManager}>
              <Button onClick={handleActionToast}>Action Toast</Button>
          </Toast.Provider>
      );
  }

  ```
</Demo>

### Close

Close 버튼을 제거할 수 있습니다.

<Demo name="components/(components)/toast/demos/toast-close">
  ```tsx
  import { Button, Toast } from '@vapor-ui/core';

  const toastManager = Toast.createToastManager();

  export default function Close() {
      const addToast = () => {
          toastManager.add({
              title: 'This is a toast message without close button!',
              description: 'Here is a description for the toast message without close button.',
              close: false,
          });
      };

      return (
          <Toast.Provider toastManager={toastManager}>
              <Button onClick={addToast}>Wihtout Close Button</Button>
          </Toast.Provider>
      );
  }

  ```
</Demo>

### Icon

Icon을 커스텀 할 수 있습니다.

<Demo name="components/(components)/toast/demos/toast-icon">
  ```tsx
  import { Button, HStack, Toast } from '@vapor-ui/core';
  import { CertificateIcon, HeartIcon, WarningIcon } from '@vapor-ui/icons';

  const toastManager = Toast.createToastManager();

  export default function Icon() {
      const addToast = (
          colorPalette: Toast.RootPrimitive.ToastObject['colorPalette'],
          icon: Toast.RootPrimitive.ToastObject['icon'],
      ) => {
          toastManager.add({
              title: 'This is a color palette toast message!',
              description: 'Here is a description for the color palette toast message.',
              colorPalette,
              icon,
          });
      };

      return (
          <Toast.Provider toastManager={toastManager}>
              <HStack $css={{ gap: '$400', alignItems: 'center' }}>
                  <Button
                      colorPalette="secondary"
                      onClick={() => addToast('info', <HeartIcon color="white" />)}
                  >
                      Info Toast
                  </Button>
                  <Button
                      colorPalette="danger"
                      onClick={() => addToast('danger', <WarningIcon color="white" />)}
                  >
                      Danger Toast
                  </Button>
                  <Button
                      colorPalette="success"
                      onClick={() => addToast('success', <CertificateIcon color="white" />)}
                  >
                      Success Toast
                  </Button>
              </HStack>
          </Toast.Provider>
      );
  }

  ```
</Demo>

### Custom

Toast 아이템을 완전히 커스텀할 수 있습니다.

<Demo name="components/(components)/toast/demos/toast-custom">
  ```tsx
  import type { PropsWithChildren } from 'react';

  import { Button, HStack, IconButton, Toast, VStack } from '@vapor-ui/core';
  import { InfoCircleIcon } from '@vapor-ui/icons';

  const toastManager = Toast.createToastManager();

  export default function Custom() {
      // const { add } = Toast.useToastManager();

      const showToast = () => {
          const removeToast = (id: string) => {
              toastManager.close(id);
          };

          const id = toastManager.add({
              title: 'This is a custom toast message!',
              description: 'Here is a description for the custom toast message.',
              colorPalette: 'info',
              icon: <InfoCircleIcon />,

              actionProps: {
                  children: 'Undo',
                  onClick: () => removeToast(id),
              },
          });
      };

      return (
          <ToastProvider>
              <Button onClick={showToast}>Show Toast</Button>
          </ToastProvider>
      );
  }

  const ToastProvider = (props: PropsWithChildren) => {
      return (
          <div>
              {props.children}

              <Toast.ProviderPrimitive toastManager={toastManager} timeout={3500}>
                  <Toast.PortalPrimitive>
                      <Toast.ViewportPrimitive>
                          <ToastList />
                      </Toast.ViewportPrimitive>
                  </Toast.PortalPrimitive>
              </Toast.ProviderPrimitive>
          </div>
      );
  };

  const ToastList = () => {
      const { toasts } = Toast.useToastManager();

      return toasts.map((toast) => {
          return (
              <Toast.RootPrimitive
                  key={toast.id}
                  toast={toast}
                  $css={{
                      backgroundColor: '$basic-white',
                      border: '1px solid',
                      borderColor: '$border-normal',
                      padding: '$200',
                  }}
              >
                  <Toast.ContentPrimitive>
                      <HStack $css={{ gap: '$100' }}>
                          <Toast.IconPrimitive $css={{ marginBlock: '3px' }} />

                          <VStack>
                              <Toast.TitlePrimitive $css={{ color: '$fg-normal-200' }} />
                              <Toast.DescriptionPrimitive $css={{ color: '$fg-normal-200' }} />
                          </VStack>
                      </HStack>

                      <Toast.ActionPrimitive />
                      <Toast.ClosePrimitive
                          render={<IconButton aria-label="Close toast" size="sm" variant="ghost" />}
                          $css={{
                              position: 'absolute',
                              color: '$fg-normal-200',
                              right: '8px',
                              top: '8px',
                          }}
                      />
                  </Toast.ContentPrimitive>
              </Toast.RootPrimitive>
          );
      });
  };

  ```
</Demo>

## 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.<br />When the limit is exceeded, the oldest toasts are marked as `limited` (via the `data-limited`<br />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.<br />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.<br />When the limit is exceeded, the oldest toasts are marked as `limited` (via the `data-limited`<br />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.<br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function`                                                         | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `container` | `HTMLElement`, `ShadowRoot`, `React.RefObject<HTMLElement \| ShadowRoot \| null>`, `null` | -       | A parent element to render the portal element into.                                                                                                                                                       |
| `render`    | `ReactElement`, `function`                                                                | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />Accepts a `ReactElement` or a function that returns the element to render. |

### Toast.RootPrimitive

| Prop             | Type                                                                     | Default           | Description                                                                                                                                                                                               |
| ---------------- | ------------------------------------------------------------------------ | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **toast**        | `ToastObjectType<any>`                                                   | -                 | 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<br />returns a class based on the component's state.                                                                                                 |
| `style`          | `React.CSSProperties`, `function`                                        | -                 | Style applied to the element, or a function that<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `nativeButton` | `boolean`                         | `true`  | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`        | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `nativeButton` | `boolean`                         | `true`  | Whether the component renders a native `&lt;button&gt;` element when replacing it<br />via the `render` prop.<br />Set to `false` if the rendered element is not a button (for example, `&lt;div&gt;`).   |
| `render`       | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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`.                                                                                                                                              |


# 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

<Demo name="components/patterns/form/demos/login-form" showResponsiveToggle>
  ```tsx
  import './login-form.css';

  import { Button, Checkbox, Field, Form, HStack, Text, TextInput, VStack } from '@vapor-ui/core';

  export default function LoginForm() {
      return (
          <VStack
              className="login"
              render={<Form onSubmit={(event) => event.preventDefault()} />}
              $css={{
                  gap: '$250',
                  width: '100%',
                  padding: '$300',
                  borderRadius: '$300',
                  border: '1px solid var(--vapor-color-border-normal)',
              }}
          >
              <VStack $css={{ gap: '$200' }}>
                  <Field.Root>
                      <Field.Label
                          $css={{ flexDirection: 'column', justifyContent: 'space-between' }}
                      >
                          <Text typography="subtitle2" foreground="normal-200">
                              이메일
                          </Text>
                          <TextInput id="login-email" size="lg" required type="email" />
                      </Field.Label>
                      <Field.Error match="valueMissing">이메일을 입력해주세요.</Field.Error>
                      <Field.Error match="typeMismatch">유효한 이메일 형식이 아닙니다.</Field.Error>
                  </Field.Root>

                  <Field.Root>
                      <Field.Label
                          $css={{ flexDirection: 'column', justifyContent: 'space-between' }}
                      >
                          <Text typography="subtitle2" foreground="normal-200">
                              비밀번호
                          </Text>
                          <TextInput
                              id="login-password"
                              type="password"
                              required
                              pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,16}"
                              size="lg"
                          />
                      </Field.Label>
                      <Field.Description>8~16자, 대소문자 영문, 특수문자 포함</Field.Description>
                      <Field.Error match="valueMissing">비밀번호를 입력해주세요.</Field.Error>
                      <Field.Error match="patternMismatch">
                          유효한 비밀번호 형식이 아닙니다.
                      </Field.Error>
                  </Field.Root>
              </VStack>
              <VStack $css={{ gap: '$100' }}>
                  <HStack $css={{ justifyContent: 'space-between' }}>
                      <Field.Root>
                          <Field.Item>
                              <Checkbox.Root id="login-auto-login" />
                              <Field.Label>자동 로그인</Field.Label>
                          </Field.Item>
                      </Field.Root>

                      <Button type="button" variant="ghost" colorPalette="secondary">
                          ID/비밀번호 찾기
                      </Button>
                  </HStack>

                  <Button size="lg">로그인</Button>
                  <Button size="lg" colorPalette="secondary" variant="outline">
                      회원가입
                  </Button>
              </VStack>
          </VStack>
      );
  }

  ```

  ```css
  .input-label {
      color: var(--vapor-color-foreground-normal-100, #525463);

      font-size: var(--vapor-typography-fontSize-050, 0.75rem);
      font-weight: var(--vapor-typography-fontWeight-500);
      line-height: var(--vapor-typography-lineHeight-050, 1.125rem); /* 150% */
      letter-spacing: var(--vapor-typography-letterSpacing-000, 0);
  }

  .checkbox-label {
      color: var(--vapor-color-foreground-normal-100, #2b2d36);

      font-size: var(--vapor-typography-fontSize-075, 0.875rem);
      font-weight: var(--vapor-typography-fontWeight-400);
      line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */
      letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem);
  }

  .helper-text {
      color: var(--vapor-color-foreground-hint, #6c6e7e);

      font-size: var(--vapor-typography-fontSize-075, 0.875rem);
      font-weight: var(--vapor-typography-fontWeight-400);
      line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */
      letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem);
  }

  ```
</Demo>

### Type: SignUp

<Demo name="components/patterns/form/demos/signup-form" showResponsiveToggle>
  ```tsx
  import './signup-form.css';

  import { useState } from 'react';

  import {
      Box,
      Button,
      Checkbox,
      Field,
      Form,
      HStack,
      IconButton,
      Select,
      Text,
      TextInput,
      VStack,
  } from '@vapor-ui/core';
  import { ChevronRightOutlineIcon } from '@vapor-ui/icons';

  const jobs = [
      { label: '개발자', value: 'developer' },
      { label: '디자이너', value: 'designer' },
      { label: '프로덕트 매니저', value: 'product-manager' },
      { label: '기타', value: 'etc' },
  ];

  export default function SignupForm() {
      const [passwordCheck, setPasswordCheck] = useState('');
      // const passwordCheck = useRef<string>('');

      return (
          <VStack
              className="login"
              render={<Form onSubmit={(event) => event.preventDefault()} />}
              $css={{
                  gap: '$250',
                  width: '100%',
                  padding: '$300',
                  borderRadius: '$300',
                  border: '1px solid var(--vapor-color-border-normal)',
              }}
          >
              <VStack $css={{ gap: '$400' }}>
                  <VStack $css={{ gap: '$200' }}>
                      <Field.Root>
                          <Box
                              render={<Field.Label />}
                              className="input-label"
                              $css={{ flexDirection: 'column' }}
                          >
                              이메일
                              <TextInput id="signup-email" size="lg" required type="email" />
                          </Box>
                          <Field.Error match="valueMissing">이메일을 입력해주세요.</Field.Error>
                          <Field.Error match="typeMismatch">
                              유효한 이메일 형식이 아닙니다.
                          </Field.Error>
                      </Field.Root>

                      <Field.Root>
                          <Box
                              render={<Field.Label />}
                              className="input-label"
                              $css={{ flexDirection: 'column' }}
                          >
                              비밀번호
                              <TextInput
                                  id="signup-password"
                                  size="lg"
                                  type="password"
                                  onValueChange={(value) => setPasswordCheck(value)}
                                  required
                                  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,16}"
                              />
                          </Box>
                          <Field.Description>
                              8~16자, 대소문자 영문, 숫자, 특수문자 포함
                          </Field.Description>
                          <Field.Error match="valueMissing">비밀번호를 입력해주세요.</Field.Error>
                          <Field.Error match="patternMismatch">
                              유효한 비밀번호 형식이 아닙니다.
                          </Field.Error>
                      </Field.Root>

                      <Field.Root>
                          <Box
                              render={<Field.Label />}
                              className="input-label"
                              $css={{ flexDirection: 'column' }}
                          >
                              비밀번호 확인
                              <TextInput
                                  id="signup-password-check"
                                  size="lg"
                                  type="password"
                                  required
                                  pattern={passwordCheck}
                              />
                          </Box>
                          <Field.Description>8~16자, 대소문자 영문, 특수문자 포함</Field.Description>
                          <Field.Error match="valueMissing">비밀번호를 입력해주세요.</Field.Error>
                          <Field.Error match="patternMismatch">
                              비밀번호를 다시 확인해주세요.
                          </Field.Error>
                      </Field.Root>

                      <Field.Root>
                          <Box
                              render={<Field.Label />}
                              className="input-label"
                              $css={{ flexDirection: 'column' }}
                          >
                              이름
                              <TextInput id="signup-name" size="lg" required />
                          </Box>
                          <Field.Error match="valueMissing">이름을 입력해주세요.</Field.Error>
                      </Field.Root>

                      <Field.Root>
                          <Select.Root items={jobs} placeholder="직업을 선택해주세요." size="lg">
                              <Box
                                  render={<Field.Label htmlFor="signup-jobs" />}
                                  className="input-label"
                                  $css={{ flexDirection: 'column' }}
                              >
                                  직업
                                  <Select.Trigger id="signup-jobs" />
                              </Box>

                              <Select.Popup>
                                  {jobs.map((job) => (
                                      <Select.Item key={job.value} value={job.value}>
                                          {job.label}
                                      </Select.Item>
                                  ))}
                              </Select.Popup>
                          </Select.Root>
                      </Field.Root>
                  </VStack>

                  <VStack $css={{ gap: '$300' }}>
                      <VStack $css={{ justifyContent: 'space-between', gap: '$050' }}>
                          <Field.Root>
                              <Box
                                  render={<Field.Label />}
                                  className="checkbox-label"
                                  $css={{ alignItems: 'center' }}
                              >
                                  <Checkbox.Root id="signup-agree-all" />
                                  필수 약관에 모두 동의
                              </Box>
                          </Field.Root>
                          <Field.Root>
                              <HStack
                                  $css={{
                                      width: '100%',
                                      justifyContent: 'space-between',
                                      alignItems: 'center',
                                  }}
                              >
                                  <Box
                                      render={<Field.Label />}
                                      className="checkbox-label"
                                      $css={{ alignItems: 'center' }}
                                  >
                                      <Checkbox.Root id="signup-terms-of-service" />
                                      이용 약관 동의
                                  </Box>
                                  <IconButton
                                      type="button"
                                      size="sm"
                                      colorPalette="secondary"
                                      variant="ghost"
                                      aria-label="약관 보기"
                                  >
                                      <ChevronRightOutlineIcon />
                                  </IconButton>
                              </HStack>
                          </Field.Root>
                          <Field.Root>
                              <HStack
                                  $css={{
                                      width: '100%',
                                      justifyContent: 'space-between',
                                      alignItems: 'center',
                                  }}
                              >
                                  <Box
                                      render={<Field.Label />}
                                      className="checkbox-label"
                                      $css={{ alignItems: 'center' }}
                                  >
                                      <Checkbox.Root id="signup-personal-info-collection" />
                                      개인 정보 수집 이용 동의
                                  </Box>
                                  <IconButton
                                      type="button"
                                      size="sm"
                                      colorPalette="secondary"
                                      variant="ghost"
                                      aria-label="개인 정보 수집 이용 보기"
                                  >
                                      <ChevronRightOutlineIcon />
                                  </IconButton>
                              </HStack>
                          </Field.Root>
                      </VStack>

                      <Button size="lg">회원가입</Button>
                  </VStack>
              </VStack>

              <HStack $css={{ justifyContent: 'center' }}>
                  <Text typography="body2">이미 계정이 있으세요?</Text>
                  <Button type="button" size="sm" variant="ghost">
                      로그인
                  </Button>
              </HStack>
          </VStack>
      );
  }

  ```

  ```css
  .input-label {
      color: var(--vapor-color-foreground-normal-100, #525463);

      font-size: var(--vapor-typography-fontSize-050, 0.75rem);
      font-weight: var(--vapor-typography-fontWeight-500);
      line-height: var(--vapor-typography-lineHeight-050, 1.125rem); /* 150% */
      letter-spacing: var(--vapor-typography-letterSpacing-000, 0);
  }

  .checkbox-label {
      color: var(--vapor-color-foreground-normal-100, #2b2d36);

      font-size: var(--vapor-typography-fontSize-075, 0.875rem);
      font-weight: var(--vapor-typography-fontWeight-400);
      line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */
      letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem);
  }

  .helper-text {
      color: var(--vapor-color-foreground-hint, #6c6e7e);

      font-size: var(--vapor-typography-fontSize-075, 0.875rem);
      font-weight: var(--vapor-typography-fontWeight-400);
      line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */
      letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem);
  }

  ```
</Demo>

### Type: Authentication

<Demo name="components/patterns/form/demos/authentication-form" showResponsiveToggle>
  ```tsx
  import { Children, cloneElement, isValidElement, useState } from 'react';

  import './authentication-form.css';

  import { Button, Field, Form, Select, Text, TextInput, VStack } from '@vapor-ui/core';

  const codes = {
      '+82': '🇰🇷 +82',
      '+1': '🇺🇸 +1',
      '+34': '🇪🇸 +34',
      '+33': '🇫🇷 +33',
      '+39': '🇮🇹 +39',
      '+44': '🇬🇧 +44',
      '+81': '🇯🇵 +81',
      '+86': '🇨🇳 +86',
      '+7': '🇷🇺 +7',
  };

  export default function AuthenticationForm() {
      const [phoneNumber, setPhoneNumber] = useState('');
      const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
          setPhoneNumber(e.target.value);
      };

      const regex = /^[0-9\s-()]{6,20}$/;

      return (
          <VStack
              render={<Form onSubmit={(e) => e.preventDefault()} />}
              $css={{
                  gap: '$400',
                  width: '100%',
                  padding: '$300',
                  borderRadius: '$300',
                  border: '1px solid var(--vapor-color-border-normal)',
              }}
          >
              <VStack $css={{ gap: '$200' }}>
                  <Field.Root>
                      <Field.Label htmlFor="auth-phone" $css={{ flexDirection: 'column' }}>
                          <Text typography="subtitle2" foreground="normal-200">
                              핸드폰 번호
                          </Text>
                          <Select.Root defaultValue={codes['+82']} size="lg">
                              <Group attached>
                                  <Select.Trigger />

                                  <Select.Popup>
                                      {Object.entries(codes).map(([value, label]) => (
                                          <Select.Item key={value} value={value}>
                                              {label}
                                          </Select.Item>
                                      ))}
                                  </Select.Popup>

                                  <TextInput
                                      style={{ flex: 1, width: '100%' }}
                                      id="auth-phone"
                                      type="tel"
                                      value={phoneNumber}
                                      onChange={handleChange}
                                      required
                                      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
                                      size="lg"
                                  />

                                  <Button type="button" size="lg" disabled={!regex.test(phoneNumber)}>
                                      인증번호 받기
                                  </Button>
                              </Group>
                          </Select.Root>
                      </Field.Label>

                      <Field.Error match="valueMissing">핸드폰 번호를 입력해주세요.</Field.Error>
                      <Field.Error match="patternMismatch">
                          올바른 핸드폰 번호를 입력해주세요.
                      </Field.Error>
                  </Field.Root>

                  <Field.Root>
                      <Field.Label $css={{ flexDirection: 'column' }}>
                          <Text typography="subtitle2" foreground="normal-200">
                              인증번호
                          </Text>
                          <TextInput id="auth-verification-code" size="lg" required />
                      </Field.Label>
                      <Field.Error match="valueMissing">인증번호를 입력해주세요.</Field.Error>
                  </Field.Root>
              </VStack>

              <Button size="lg">인증 완료</Button>
          </VStack>
      );
  }

  interface GroupProps {
      attached?: boolean;
      children?: React.ReactNode;
  }

  const Group = ({ attached = false, children: childrenProp }: GroupProps) => {
      const children = Children.map(childrenProp, (child, index) => {
          if (!isValidElement(child)) return;

          const childProps = child.props as { style?: React.CSSProperties };
          return cloneElement(child as React.ReactElement<{ style?: React.CSSProperties }>, {
              style: { '--group-index': index, ...childProps.style } as React.CSSProperties,
              ...(index === 0 ? { 'data-first-item': '' } : {}),
              ...(index === Children.count(childrenProp) - 1 ? { 'data-last-item': '' } : {}),
          });
      });

      return (
          <div data-part="group" className={`group` + (attached ? ' attached' : '')}>
              {children}
          </div>
      );
  };

  ```

  ```css
  .input-label {
      color: var(--vapor-color-foreground-normal-100, #525463);

      font-size: var(--vapor-typography-fontSize-050, 0.75rem);
      font-weight: var(--vapor-typography-fontWeight-500);
      line-height: var(--vapor-typography-lineHeight-050, 1.125rem); /* 150% */
      letter-spacing: var(--vapor-typography-letterSpacing-000, 0);
  }

  .group {
      display: flex;
      align-items: center;
      gap: 0;

      &.attached {
          & > [data-first-item] {
              border-right: none;
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
          }

          & > [data-last-item] {
              border: 1px solid var(--vapor-color-border-normal, #d1d2d8);
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;
          }

          & > *:not([data-first-item]):not([data-last-item]) {
              border: 1px solid var(--vapor-color-border-normal, #d1d2d8);
              border-right: none;
              border-radius: 0;
          }
      }
  }

  ```
</Demo>

### Type: Research

<Demo name="components/patterns/form/demos/research-form" showResponsiveToggle>
  ```tsx
  import './research-form.css';

  import {
      Button,
      Checkbox,
      Field,
      Form,
      HStack,
      MultiSelect,
      Radio,
      RadioGroup,
      Select,
      Switch,
      Text,
      TextInput,
      VStack,
  } from '@vapor-ui/core';

  const jobs = [
      { label: '프론트엔드 개발자', value: 'frontend-engineer' },
      { label: '백엔드 개발자', value: 'backend-engineer' },
      { label: '풀스택 개발자', value: 'fullstack-engineer' },
      { label: '모바일 앱 개발자', value: 'app-engineer' },
      { label: 'DevOps/클라우드 엔지니어', value: 'devops-engineer' },
  ];

  const stacks = [
      { label: 'HTML/CSS', value: 'html-css' },
      { label: 'JavaScript', value: 'javascript' },
      { label: 'React', value: 'react' },
      { label: 'Vue.js', value: 'vue' },
      { label: 'Next.js', value: 'nextjs' },
  ];

  export default function ResearchForm() {
      return (
          <VStack
              render={<Form onSubmit={(event) => event.preventDefault()} />}
              $css={{
                  gap: '$500',
                  padding: '$300',
                  borderRadius: '$300',
                  width: '100%',
                  border: '1px solid var(--vapor-color-border-normal)',
              }}
          >
              <VStack $css={{ gap: '$200' }}>
                  <Text typography="heading5">기본 정보를 입력해주세요.</Text>

                  <Field.Root>
                      <Field.Label $css={{ flexDirection: 'column' }}>
                          <Text typography="subtitle2" foreground="normal-200">
                              이름
                          </Text>
                          <TextInput id="research-name" required size="lg" />
                      </Field.Label>
                      <Field.Error match="valueMissing">이름을 입력해주세요.</Field.Error>
                  </Field.Root>

                  <Field.Root>
                      <Field.Label htmlFor="research-jobs" $css={{ flexDirection: 'column' }}>
                          <Text typography="subtitle2" foreground="normal-200">
                              직업
                          </Text>
                          <Select.Root items={jobs} placeholder="직업을 선택해주세요." size="lg">
                              <Select.Trigger id="research-jobs" />
                              <Select.Popup>
                                  {jobs.map((job) => (
                                      <Select.Item key={job.value} value={job.value}>
                                          {job.label}
                                      </Select.Item>
                                  ))}
                              </Select.Popup>
                          </Select.Root>
                      </Field.Label>
                  </Field.Root>

                  <Field.Root>
                      <Field.Label htmlFor="research-stack" $css={{ flexDirection: 'column' }}>
                          <Text typography="subtitle2" foreground="normal-200">
                              스택
                          </Text>
                          <MultiSelect.Root
                              items={stacks}
                              placeholder="자주 사용하는 스택을 선택해주세요."
                              size="lg"
                          >
                              <MultiSelect.Trigger id="research-stack" />
                              <MultiSelect.Popup>
                                  {stacks.map((stack) => (
                                      <MultiSelect.Item key={stack.value} value={stack.value}>
                                          {stack.label}
                                      </MultiSelect.Item>
                                  ))}
                              </MultiSelect.Popup>
                          </MultiSelect.Root>
                      </Field.Label>
                  </Field.Root>
              </VStack>

              <Field.Root>
                  <RadioGroup.Root>
                      <RadioGroup.Label>만족도를 선택해주세요.</RadioGroup.Label>
                      <VStack $css={{ gap: '$100' }}>
                          <Field.Item>
                              <Radio.Root
                                  id="research-fully-satisfied"
                                  value="fully-satisfied"
                                  size="lg"
                              />
                              <Field.Label>매우 만족</Field.Label>
                          </Field.Item>

                          <Field.Item>
                              <Radio.Root id="research-neutral" value="neutral" size="lg" />
                              <Field.Label>보통</Field.Label>
                          </Field.Item>

                          <Field.Item>
                              <Radio.Root
                                  id="research-not-satisfied"
                                  value="not-satisfied"
                                  size="lg"
                              />
                              <Field.Label>불만족</Field.Label>
                          </Field.Item>
                      </VStack>
                  </RadioGroup.Root>
              </Field.Root>

              <VStack $css={{ gap: '$100' }}>
                  <VStack $css={{ marginBottom: '$050' }}>
                      <Text typography="heading5">좋았던 강의는 무엇인가요?</Text>
                      <Text typography="body2" foreground="normal-100">
                          중복 선택 가능
                      </Text>
                  </VStack>

                  <Field.Root>
                      <Field.Item>
                          <Checkbox.Root id="research-mentoring" size="lg" />
                          <Field.Label>멘토님 강연 능력</Field.Label>
                      </Field.Item>
                  </Field.Root>

                  <Field.Root>
                      <Field.Item>
                          <Checkbox.Root id="research-topic" size="lg" />
                          <Field.Label>주제(협업 및 커뮤니케이션 스킬)</Field.Label>
                      </Field.Item>
                  </Field.Root>

                  <Field.Root>
                      <Field.Item>
                          <Checkbox.Root id="research-content" size="lg" />
                          <Field.Label>전반적인 강의 내용</Field.Label>
                      </Field.Item>
                  </Field.Root>

                  <Field.Root>
                      <Field.Item>
                          <Checkbox.Root id="research-seminar" size="lg" />
                          <Field.Label>세미나 자료</Field.Label>
                      </Field.Item>
                  </Field.Root>

                  <Field.Root>
                      <Field.Item>
                          <Checkbox.Root id="research-etc" size="lg" />
                          <Field.Label>기타</Field.Label>
                      </Field.Item>
                  </Field.Root>
              </VStack>

              <VStack $css={{ gap: '$100' }}>
                  <Text typography="heading5">개인 정보 수신 동의</Text>

                  <Field.Root>
                      <Field.Label
                          render={
                              <HStack $css={{ width: '100%', justifyContent: 'space-between' }} />
                          }
                      >
                          서비스 메일 수신 동의
                          <Switch.Root defaultChecked id="research-service" />
                      </Field.Label>
                  </Field.Root>
                  <Field.Root>
                      <Field.Label
                          render={
                              <HStack $css={{ width: '100%', justifyContent: 'space-between' }} />
                          }
                      >
                          이벤트성 광고 수신 동의
                          <Switch.Root defaultChecked id="research-advertising" />
                      </Field.Label>
                  </Field.Root>
              </VStack>

              <Button size="lg">제출하기</Button>
          </VStack>
      );
  }

  ```

  ```css
  .input-label {
      color: var(--vapor-color-foreground-normal-100, #525463);

      font-size: var(--vapor-typography-fontSize-050, 0.75rem);
      font-weight: var(--vapor-typography-fontWeight-500);
      line-height: var(--vapor-typography-lineHeight-050, 1.125rem); /* 150% */
      letter-spacing: var(--vapor-typography-letterSpacing-000, 0);
  }

  .checkbox-label {
      color: var(--vapor-color-foreground-normal-100, #2b2d36);

      font-size: var(--vapor-typography-fontSize-075, 0.875rem);
      font-weight: var(--vapor-typography-fontWeight-400);
      line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */
      letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem);
  }

  .radio-label {
      color: var(--vapor-color-foreground-normal-100, #2b2d36);

      font-size: var(--vapor-typography-fontSize-075, 0.875rem);
      font-weight: var(--vapor-typography-fontWeight-400);
      line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */
      letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem);
  }

  ```
</Demo>

### Type: Filter

<Demo name="components/patterns/form/demos/filter-form" showResponsiveToggle>
  ```tsx
  import './filter-form.css';

  import type { FormEvent } from 'react';
  import { useCallback, useRef, useState } from 'react';

  import {
      Box,
      Button,
      Checkbox,
      Collapsible,
      Field,
      Form,
      HStack,
      Radio,
      RadioGroup,
      Text,
      VStack,
  } from '@vapor-ui/core';
  import { ChevronDownOutlineIcon, RefreshOutlineIcon } from '@vapor-ui/icons';

  // 초기값 정의
  type FormData = typeof FORM_SCHEME;

  const FORM_SCHEME = {
      view: 'recent',
      sort: {
          feedback: false,
          buttons: false,
          'data-display': false,
          overlay: false,
          inputs: false,
          navigation: false,
          utils: false,
      },
      packs: {
          'goorm-dev/vapor-core': false,
          'goorm-dev/vapor-component': false,
          'vapor-ui/core': false,
      },
      status: { active: false, inactive: false, draft: false },
      tag: { ui: false, 'open-source': false, performance: false },
  };

  export default function FilterForm() {
      const formRef = useRef<HTMLFormElement>(null);
      const [formData, setFormData] = useState<FormData>({
          view: FORM_SCHEME.view,
          sort: { ...FORM_SCHEME.sort },
          packs: { ...FORM_SCHEME.packs },
          status: { ...FORM_SCHEME.status },
          tag: { ...FORM_SCHEME.tag },
      });

      const getFieldValues = useCallback(
          <T extends keyof FormData>(fieldName: T): FormData[T] => formData[fieldName],
          [formData],
      );

      const updateFormData = useCallback(
          (fieldName: keyof FormData, key: string, checked: boolean) => {
              setFormData((prev) => {
                  const field = prev[fieldName];

                  if (typeof field !== 'object') return prev;

                  return { ...prev, [fieldName]: { ...field, [key]: checked } };
              });
          },
          [],
      );

      // 라디오 버튼 변경 핸들러
      const handleRadioChange = useCallback((fieldName: keyof FormData, value: string) => {
          setFormData((prev) => ({ ...prev, [fieldName]: value }));
      }, []);

      // 체크박스 변경 핸들러
      const handleCheckboxChange = useCallback(
          (fieldName: keyof FormData, key: string) => (checked: boolean) => {
              updateFormData(fieldName, key, checked);
          },
          [updateFormData],
      );

      const selectedSortCount = Object.values(getFieldValues('sort')).filter(Boolean).length;

      const handleReset = (event: FormEvent<HTMLFormElement>) => {
          event.preventDefault();

          setFormData({
              view: FORM_SCHEME.view,
              sort: { ...FORM_SCHEME.sort },
              packs: { ...FORM_SCHEME.packs },
              status: { ...FORM_SCHEME.status },
              tag: { ...FORM_SCHEME.tag },
          });
      };

      return (
          <VStack $css={{ width: '17.625rem' }} render={<Form ref={formRef} onReset={handleReset} />}>
              <HStack $css={{ justifyContent: 'space-between' }}>
                  <Text typography="heading5">Filter</Text>
                  <Button type="reset" size="sm" variant="ghost" colorPalette="secondary">
                      <RefreshOutlineIcon />
                      Refresh
                  </Button>
              </HStack>

              <Box
                  render={<hr />}
                  $css={{
                      border: 'none',
                      marginBlock: '$150',
                      height: '1px',
                      width: '100%',
                      backgroundColor: '$basic-gray-300',
                  }}
              />

              <VStack $css={{ gap: '$300' }}>
                  <Collapsible.Root>
                      <Collapsible.Trigger className="collapsible-trigger">
                          <Text typography="heading6">View</Text>

                          <ChevronDownOutlineIcon className="trigger-icon" />
                      </Collapsible.Trigger>

                      <Collapsible.Panel>
                          <Field.Root render={<Box $css={{ marginTop: '$150' }} />}>
                              <RadioGroup.Root
                                  value={getFieldValues('view')}
                                  onValueChange={(value: unknown) =>
                                      handleRadioChange('view', value as string)
                                  }
                              >
                                  <Field.Item>
                                      <Radio.Root id="filter-recent" value="recent" />
                                      <Field.Label>Recent</Field.Label>
                                  </Field.Item>
                                  <Field.Item>
                                      <Radio.Root id="filter-popular" value="popular" />
                                      <Field.Label>Most Popular</Field.Label>
                                  </Field.Item>
                              </RadioGroup.Root>
                          </Field.Root>
                      </Collapsible.Panel>
                  </Collapsible.Root>

                  <Collapsible.Root>
                      <Collapsible.Trigger className="collapsible-trigger">
                          <Text typography="heading6">
                              Sort <Text foreground="primary-100">{selectedSortCount}</Text>
                          </Text>
                          <ChevronDownOutlineIcon className="trigger-icon" />
                      </Collapsible.Trigger>

                      <Collapsible.Panel>
                          <Field.Root render={<Box $css={{ marginTop: '$150' }} />}>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-feedback"
                                      checked={getFieldValues('sort').feedback}
                                      onCheckedChange={handleCheckboxChange('sort', 'feedback')}
                                  />
                                  <Field.Label>Feedback</Field.Label>
                              </Field.Item>
                          </Field.Root>
                          <Field.Root>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-buttons"
                                      checked={getFieldValues('sort').buttons}
                                      onCheckedChange={handleCheckboxChange('sort', 'buttons')}
                                  />
                                  <Field.Label>Buttons</Field.Label>
                              </Field.Item>
                          </Field.Root>

                          <Field.Root>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-data-display"
                                      checked={getFieldValues('sort')['data-display']}
                                      onCheckedChange={handleCheckboxChange('sort', 'data-display')}
                                  />
                                  <Field.Label>Data Display</Field.Label>
                              </Field.Item>
                          </Field.Root>

                          <Field.Root>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-overlay"
                                      checked={getFieldValues('sort').overlay}
                                      onCheckedChange={handleCheckboxChange('sort', 'overlay')}
                                  />
                                  <Field.Label>Overlay</Field.Label>
                              </Field.Item>
                          </Field.Root>

                          <Field.Root>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-inputs"
                                      checked={getFieldValues('sort').inputs}
                                      onCheckedChange={handleCheckboxChange('sort', 'inputs')}
                                  />
                                  <Field.Label>Inputs</Field.Label>
                              </Field.Item>
                          </Field.Root>

                          <Field.Root>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-navigation"
                                      checked={getFieldValues('sort').navigation}
                                      onCheckedChange={handleCheckboxChange('sort', 'navigation')}
                                  />
                                  <Field.Label>Navigation</Field.Label>
                              </Field.Item>
                          </Field.Root>

                          <Field.Root>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-utils"
                                      checked={getFieldValues('sort').utils}
                                      onCheckedChange={handleCheckboxChange('sort', 'utils')}
                                  />
                                  <Field.Label>Utils</Field.Label>
                              </Field.Item>
                          </Field.Root>
                      </Collapsible.Panel>
                  </Collapsible.Root>

                  <Collapsible.Root>
                      <Collapsible.Trigger className="collapsible-trigger">
                          <Text typography="heading6">Package</Text>
                          <ChevronDownOutlineIcon className="trigger-icon" />
                      </Collapsible.Trigger>

                      <Collapsible.Panel>
                          <Field.Root render={<Box $css={{ marginTop: '$150' }} />}>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-goorm-dev/vapor-core"
                                      checked={getFieldValues('packs')['goorm-dev/vapor-core']}
                                      onCheckedChange={handleCheckboxChange(
                                          'packs',
                                          'goorm-dev/vapor-core',
                                      )}
                                  />
                                  <Field.Label>goorm-dev/vapor-core</Field.Label>
                              </Field.Item>
                          </Field.Root>
                          <Field.Root>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-goorm-dev/vapor-component"
                                      checked={getFieldValues('packs')['goorm-dev/vapor-component']}
                                      onCheckedChange={handleCheckboxChange(
                                          'packs',
                                          'goorm-dev/vapor-component',
                                      )}
                                  />
                                  <Field.Label>goorm-dev/vapor-component</Field.Label>
                              </Field.Item>
                          </Field.Root>
                          <Field.Root>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-vapor-ui/core"
                                      checked={getFieldValues('packs')['vapor-ui/core']}
                                      onCheckedChange={handleCheckboxChange('packs', 'vapor-ui/core')}
                                  />
                                  <Field.Label>vapor-ui/core</Field.Label>
                              </Field.Item>
                          </Field.Root>
                      </Collapsible.Panel>
                  </Collapsible.Root>

                  <Collapsible.Root>
                      <Collapsible.Trigger className="collapsible-trigger">
                          <Text typography="heading6">Status</Text>
                          <ChevronDownOutlineIcon className="trigger-icon" />
                      </Collapsible.Trigger>

                      <Collapsible.Panel>
                          <Field.Root render={<Box $css={{ marginTop: '$150' }} />}>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-active"
                                      checked={getFieldValues('status').active}
                                      onCheckedChange={handleCheckboxChange('status', 'active')}
                                  />
                                  <Field.Label>Active</Field.Label>
                              </Field.Item>
                          </Field.Root>
                          <Field.Root>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-inactive"
                                      checked={getFieldValues('status').inactive}
                                      onCheckedChange={handleCheckboxChange('status', 'inactive')}
                                  />
                                  <Field.Label>Inactive</Field.Label>
                              </Field.Item>
                          </Field.Root>
                          <Field.Root>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-draft"
                                      checked={getFieldValues('status').draft}
                                      onCheckedChange={handleCheckboxChange('status', 'draft')}
                                  />
                                  <Field.Label>Draft</Field.Label>
                              </Field.Item>
                          </Field.Root>
                      </Collapsible.Panel>
                  </Collapsible.Root>

                  <Collapsible.Root>
                      <Collapsible.Trigger className="collapsible-trigger">
                          <Text typography="heading6">Tag</Text>
                          <ChevronDownOutlineIcon className="trigger-icon" />
                      </Collapsible.Trigger>

                      <Collapsible.Panel>
                          <Field.Root render={<Box $css={{ marginTop: '$150' }} />}>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-ui"
                                      checked={getFieldValues('tag').ui}
                                      onCheckedChange={handleCheckboxChange('tag', 'ui')}
                                  />
                                  <Field.Label>UI</Field.Label>
                              </Field.Item>
                          </Field.Root>
                          <Field.Root>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-open-source"
                                      checked={getFieldValues('tag')['open-source']}
                                      onCheckedChange={handleCheckboxChange('tag', 'open-source')}
                                  />
                                  <Field.Label>Open Source</Field.Label>
                              </Field.Item>
                          </Field.Root>
                          <Field.Root>
                              <Field.Item>
                                  <Checkbox.Root
                                      id="filter-performance"
                                      checked={getFieldValues('tag').performance}
                                      onCheckedChange={handleCheckboxChange('tag', 'performance')}
                                  />
                                  <Field.Label>Performance</Field.Label>
                              </Field.Item>
                          </Field.Root>
                      </Collapsible.Panel>
                  </Collapsible.Root>
              </VStack>
          </VStack>
      );
  }

  ```

  ```css
  .checkbox-label {
      color: var(--vapor-color-foreground-normal-100, #2b2d36);

      font-size: var(--vapor-typography-fontSize-075, 0.875rem);
      font-weight: var(--vapor-typography-fontWeight-400);
      line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */
      letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem);
  }

  .radio-label {
      color: var(--vapor-color-foreground-normal-100, #2b2d36);

      font-size: var(--vapor-typography-fontSize-075, 0.875rem);
      font-weight: var(--vapor-typography-fontWeight-400);
      line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */
      letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem);
  }

  .collapsible-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: transform 150ms ease;
  }

  .trigger-icon {
      transition: transform 150ms ease;

      &:where([data-open] &) {
          transform: rotate(180deg);
      }

      &:where([data-closed] &) {
          transform: rotate(0);
      }
  }

  ```
</Demo>

### Type: BottomSheetFilter

<Demo name="components/patterns/form/demos/sheet-form" showResponsiveToggle>
  ```tsx
  import './sheet-form.css';

  import type { FormEvent } from 'react';
  import { useCallback, useState } from 'react';

  import { Button, Checkbox, Field, Form, Sheet, Tabs, VStack } from '@vapor-ui/core';
  import { RefreshOutlineIcon } from '@vapor-ui/icons';

  type FormData = typeof FORM_SCHEME;

  const FORM_SCHEME = {
      sort: {
          feedback: false,
          buttons: true,
          'data-display': false,
          overlay: false,
          inputs: true,
          navigation: false,
          utils: false,
      },
      packs: {
          'goorm-dev/vapor-core': true,
          'goorm-dev/vapor-component': false,
          'vapor-ui/core': false,
      },
      status: {
          active: true,
          inactive: false,
          draft: false,
      },
      tag: {
          ui: true,
          'open-source': false,
          performance: false,
      },
  };

  export default function SheetForm() {
      const [formData, setFormData] = useState<FormData>(() => {
          return {
              sort: { ...FORM_SCHEME.sort },
              packs: { ...FORM_SCHEME.packs },
              status: { ...FORM_SCHEME.status },
              tag: { ...FORM_SCHEME.tag },
          };
      });

      const getFieldValues = useCallback(
          <T extends keyof FormData>(fieldName: T): FormData[T] => formData[fieldName],
          [formData],
      );

      const updateFormData = useCallback(
          (fieldName: keyof FormData, key: string, checked: boolean) => {
              setFormData((prev) => {
                  const field = prev[fieldName];

                  if (typeof field !== 'object') return prev;

                  return { ...prev, [fieldName]: { ...field, [key]: checked } };
              });
          },
          [],
      );

      const handleCheckboxChange = useCallback(
          (fieldName: keyof FormData, key: string) => (checked: boolean) => {
              updateFormData(fieldName, key, checked);
          },
          [updateFormData],
      );

      const handleReset = useCallback((event: FormEvent<HTMLFormElement>) => {
          event.preventDefault();

          setFormData({
              sort: { ...FORM_SCHEME.sort },
              packs: { ...FORM_SCHEME.packs },
              status: { ...FORM_SCHEME.status },
              tag: { ...FORM_SCHEME.tag },
          });
      }, []);

      return (
          <VStack
              className="sheet-form"
              render={<Form id="sheet-form" onReset={handleReset} />}
              $css={{
                  gap: '$250',
                  width: '100%',
                  padding: '$300',
                  borderRadius: '$300',
                  border: '1px solid #eee',
              }}
          >
              <Sheet.Root>
                  <Sheet.Trigger render={<Button />}>Open Filter</Sheet.Trigger>

                  <Sheet.PortalPrimitive>
                      <Sheet.OverlayPrimitive />
                      <Sheet.PositionerPrimitive side="bottom">
                          <Sheet.PopupPrimitive className={'popup'}>
                              <Sheet.Header className="header">
                                  <Sheet.Title>Filter</Sheet.Title>
                              </Sheet.Header>
                              <Sheet.Body className="body">
                                  <Tabs.Root defaultValue={'sort'} className={'tabs'}>
                                      <Tabs.List className={'tabs-list'}>
                                          <Tabs.Button value="sort">Sort</Tabs.Button>
                                          <Tabs.Button value="package">Package</Tabs.Button>
                                          <Tabs.Button value="status">Status</Tabs.Button>
                                          <Tabs.Button value="tag">Tag</Tabs.Button>
                                      </Tabs.List>
                                      <Tabs.Panel value="sort" className={'tabs-panel'}>
                                          <VStack $css={{ gap: '$100' }}>
                                              {/* Sort */}
                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-feedback"
                                                          size="lg"
                                                          checked={getFieldValues('sort').feedback}
                                                          onCheckedChange={handleCheckboxChange(
                                                              'sort',
                                                              'feedback',
                                                          )}
                                                      />
                                                      <Field.Label>Feedback</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>

                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-buttons"
                                                          size="lg"
                                                          checked={getFieldValues('sort').buttons}
                                                          onCheckedChange={handleCheckboxChange(
                                                              'sort',
                                                              'buttons',
                                                          )}
                                                      />
                                                      <Field.Label>Buttons</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>

                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-data-display"
                                                          size="lg"
                                                          checked={
                                                              getFieldValues('sort')['data-display']
                                                          }
                                                          onCheckedChange={handleCheckboxChange(
                                                              'sort',
                                                              'data-display',
                                                          )}
                                                      />
                                                      <Field.Label>Data Display</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>
                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-overlay"
                                                          size="lg"
                                                          checked={getFieldValues('sort').overlay}
                                                          onCheckedChange={handleCheckboxChange(
                                                              'sort',
                                                              'overlay',
                                                          )}
                                                      />
                                                      <Field.Label>Overlay</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>
                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-inputs"
                                                          size="lg"
                                                          checked={getFieldValues('sort').inputs}
                                                          onCheckedChange={handleCheckboxChange(
                                                              'sort',
                                                              'inputs',
                                                          )}
                                                      />
                                                      <Field.Label>Inputs</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>
                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-navigation"
                                                          size="lg"
                                                          checked={getFieldValues('sort').navigation}
                                                          onCheckedChange={handleCheckboxChange(
                                                              'sort',
                                                              'navigation',
                                                          )}
                                                      />
                                                      <Field.Label>Navigation</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>
                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-utils"
                                                          size="lg"
                                                          checked={getFieldValues('sort').utils}
                                                          onCheckedChange={handleCheckboxChange(
                                                              'sort',
                                                              'utils',
                                                          )}
                                                      />
                                                      <Field.Label>Utils</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>
                                          </VStack>
                                      </Tabs.Panel>
                                      {/* Package */}
                                      <Tabs.Panel value="package" className={'tabs-panel'}>
                                          <VStack $css={{ gap: '$100' }}>
                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-goorm-dev/vapor-core"
                                                          size="lg"
                                                          checked={
                                                              getFieldValues('packs')[
                                                                  'goorm-dev/vapor-core'
                                                              ]
                                                          }
                                                          onCheckedChange={handleCheckboxChange(
                                                              'packs',
                                                              'goorm-dev/vapor-core',
                                                          )}
                                                      />
                                                      <Field.Label>goorm-dev/vapor-core</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>
                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-goorm-dev/vapor-component"
                                                          size="lg"
                                                          checked={
                                                              getFieldValues('packs')[
                                                                  'goorm-dev/vapor-component'
                                                              ]
                                                          }
                                                          onCheckedChange={handleCheckboxChange(
                                                              'packs',
                                                              'goorm-dev/vapor-component',
                                                          )}
                                                      />
                                                      <Field.Label>
                                                          goorm-dev/vapor-component
                                                      </Field.Label>
                                                  </Field.Item>
                                              </Field.Root>
                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-vapor-ui/core"
                                                          size="lg"
                                                          checked={
                                                              getFieldValues('packs')['vapor-ui/core']
                                                          }
                                                          onCheckedChange={handleCheckboxChange(
                                                              'packs',
                                                              'vapor-ui/core',
                                                          )}
                                                      />
                                                      <Field.Label>vapor-ui/core</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>
                                          </VStack>
                                      </Tabs.Panel>
                                      {/* Status */}
                                      <Tabs.Panel value="status" className={'tabs-panel'}>
                                          <VStack $css={{ gap: '$100' }}>
                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-active"
                                                          size="lg"
                                                          checked={getFieldValues('status').active}
                                                          onCheckedChange={handleCheckboxChange(
                                                              'status',
                                                              'active',
                                                          )}
                                                      />
                                                      <Field.Label>Active</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>
                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-inactive"
                                                          size="lg"
                                                          checked={getFieldValues('status').inactive}
                                                          onCheckedChange={handleCheckboxChange(
                                                              'status',
                                                              'inactive',
                                                          )}
                                                      />
                                                      <Field.Label>Inactive</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>
                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-draft"
                                                          size="lg"
                                                          checked={getFieldValues('status').draft}
                                                          onCheckedChange={handleCheckboxChange(
                                                              'status',
                                                              'draft',
                                                          )}
                                                      />
                                                      <Field.Label>Draft</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>
                                          </VStack>
                                      </Tabs.Panel>
                                      {/* Tag */}
                                      <Tabs.Panel value="tag" className={'tabs-panel'}>
                                          <VStack $css={{ gap: '$100' }}>
                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-ui"
                                                          size="lg"
                                                          checked={getFieldValues('tag').ui}
                                                          onCheckedChange={handleCheckboxChange(
                                                              'tag',
                                                              'ui',
                                                          )}
                                                      />
                                                      <Field.Label>UI</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>

                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-open-source"
                                                          size="lg"
                                                          checked={
                                                              getFieldValues('tag')['open-source']
                                                          }
                                                          onCheckedChange={handleCheckboxChange(
                                                              'tag',
                                                              'open-source',
                                                          )}
                                                      />
                                                      <Field.Label>Open Source</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>

                                              <Field.Root>
                                                  <Field.Item>
                                                      <Checkbox.Root
                                                          id="sheet-performance"
                                                          size="lg"
                                                          checked={getFieldValues('tag').performance}
                                                          onCheckedChange={handleCheckboxChange(
                                                              'tag',
                                                              'performance',
                                                          )}
                                                      />
                                                      <Field.Label>Performance</Field.Label>
                                                  </Field.Item>
                                              </Field.Root>
                                          </VStack>
                                      </Tabs.Panel>
                                  </Tabs.Root>
                              </Sheet.Body>
                              <Sheet.Footer className="footer">
                                  <Button
                                      type="reset"
                                      size="lg"
                                      colorPalette="secondary"
                                      className="refresh-button"
                                      form="sheet-form"
                                  >
                                      <RefreshOutlineIcon />
                                      Refresh
                                  </Button>
                                  <Sheet.Close render={<Button size="lg" className="apply-button" />}>
                                      Apply
                                  </Sheet.Close>
                              </Sheet.Footer>
                          </Sheet.PopupPrimitive>
                      </Sheet.PositionerPrimitive>
                  </Sheet.PortalPrimitive>
              </Sheet.Root>
          </VStack>
      );
  }

  ```

  ```css
  .checkbox-label {
      color: var(--vapor-color-foreground-normal-100, #2b2d36);

      font-size: var(--vapor-typography-fontSize-075, 0.875rem);
      font-weight: var(--vapor-typography-fontWeight-400);
      line-height: var(--vapor-typography-lineHeight-075, 1.375rem); /* 157.143% */
      letter-spacing: var(--vapor-typography-letterSpacing-100, -0.00625rem);
  }

  .popup {
      border-top-left-radius: var(--vapor-size-borderRadius-300);
      border-top-right-radius: var(--vapor-size-borderRadius-300);
  }

  .tabs {
      height: 100%;
  }

  .tabs-list {
      padding-inline: 0;
  }

  .tabs-panel {
      padding-block: var(--vapor-size-space-200);
  }

  .header {
      padding: var(--vapor-size-space-250) var(--vapor-size-space-200) 0;
  }

  .body {
      padding-inline: var(--vapor-size-space-200);
  }

  .footer {
      gap: var(--vapor-size-space-100);
      padding-top: var(--vapor-size-space-100);
  }

  .refresh-button {
      flex-shrink: 0;
  }

  .apply-button {
      flex-shrink: 0;
      flex-grow: 1;
  }

  ```
</Demo>


# 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

<Demo name="components/patterns/nav-bar/demos/block01" showResponsiveToggle>
  ```tsx
  import './block.css';

  import type { ComponentProps } from 'react';

  import { Avatar, Collapsible, HStack, IconButton, NavigationMenu, Sheet } from '@vapor-ui/core';
  import {
      BellOnIcon,
      ChevronDownOutlineIcon,
      CloseOutlineIcon,
      MenuOutlineIcon,
  } from '@vapor-ui/icons';

  export default function Block1() {
      return (
          <HStack
              $css={{
                  width: '100%',
                  justifyContent: 'space-between',
                  paddingInline: { lg: '$400', sm: '$200' },
                  paddingBlock: { lg: '$100', sm: '$050' },
              }}
          >
              <HStack $css={{ gap: '$200' }}>
                  <LogoSvg className="logo" />

                  <NavigationMenu.Root aria-label="Main" className="navbar-desktop">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="/features">Features</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="/templates">Templates</NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>
              </HStack>

              <HStack $css={{ gap: '$100' }}>
                  <Avatar.Root shape="circle" alt="bell" render={<button />}>
                      <BellOnIcon />
                  </Avatar.Root>
                  <Avatar.Root shape="circle" alt="goorm" />

                  <Sheet.Root>
                      <Sheet.Trigger
                          render={
                              <IconButton
                                  aria-label="Open Menu"
                                  variant="ghost"
                                  colorPalette="secondary"
                                  className="navbar-mobile"
                              />
                          }
                      >
                          <MenuOutlineIcon />
                      </Sheet.Trigger>

                      <Sheet.PortalPrimitive>
                          <Sheet.OverlayPrimitive />
                          <Sheet.PositionerPrimitive side="top">
                              <Sheet.PopupPrimitive>
                                  <Sheet.Header>
                                      <HStack
                                          $css={{
                                              gap: '$200',
                                              justifyContent: 'space-between',
                                              width: '100%',
                                          }}
                                      >
                                          <LogoSvg className="logo" />

                                          <HStack $css={{ gap: '$100' }}>
                                              <Avatar.Root
                                                  shape="circle"
                                                  alt="bell"
                                                  render={<button />}
                                              >
                                                  <BellOnIcon />
                                              </Avatar.Root>
                                              <Avatar.Root shape="circle" alt="goorm" />
                                              <Sheet.Close
                                                  render={
                                                      <IconButton
                                                          aria-label="Close Sheet"
                                                          variant="ghost"
                                                          colorPalette="secondary"
                                                      />
                                                  }
                                              >
                                                  <CloseOutlineIcon />
                                              </Sheet.Close>
                                          </HStack>
                                      </HStack>
                                  </Sheet.Header>

                                  <Sheet.Body>
                                      <NavigationMenu.Root
                                          aria-label="Main"
                                          direction="vertical"
                                          className="vertical-navigation-menu"
                                      >
                                          <NavigationMenu.List>
                                              <NavigationMenu.Item>
                                                  <Collapsible.Root>
                                                      <Collapsible.Trigger
                                                          className={'collapsible-trigger'}
                                                          render={<NavigationMenu.Link />}
                                                      >
                                                          Features
                                                          <ChevronDownOutlineIcon />
                                                      </Collapsible.Trigger>

                                                      <Collapsible.Panel>
                                                          <NavigationMenu.List>
                                                              <NavigationMenu.Item>
                                                                  <NavigationMenu.Link
                                                                      href="#"
                                                                      className="nested-link-item"
                                                                  >
                                                                      Container
                                                                  </NavigationMenu.Link>
                                                              </NavigationMenu.Item>
                                                              <NavigationMenu.Item>
                                                                  <NavigationMenu.Link
                                                                      href="#"
                                                                      className="nested-link-item"
                                                                  >
                                                                      SBOM
                                                                  </NavigationMenu.Link>
                                                              </NavigationMenu.Item>
                                                          </NavigationMenu.List>
                                                      </Collapsible.Panel>
                                                  </Collapsible.Root>
                                              </NavigationMenu.Item>
                                              <NavigationMenu.Item>
                                                  <NavigationMenu.Link className="link-item" href="#">
                                                      Pricing
                                                  </NavigationMenu.Link>
                                              </NavigationMenu.Item>
                                              <NavigationMenu.Item>
                                                  <NavigationMenu.Link className="link-item" href="#">
                                                      Templates
                                                  </NavigationMenu.Link>
                                              </NavigationMenu.Item>
                                          </NavigationMenu.List>
                                      </NavigationMenu.Root>
                                  </Sheet.Body>
                              </Sheet.PopupPrimitive>
                          </Sheet.PositionerPrimitive>
                      </Sheet.PortalPrimitive>
                  </Sheet.Root>
              </HStack>
          </HStack>
      );
  }

  const LogoSvg = (props: ComponentProps<'svg'>) => {
      return (
          <svg
              xmlns="http://www.w3.org/2000/svg"
              width="80"
              height="32"
              viewBox="0 0 80 28"
              fill="none"
              {...props}
          >
              <g clipPath="url(#clip0_105_38)">
                  <path
                      d="M38.2467 24.9887V17.1446C39.5989 18.1508 41.2491 18.7226 42.945 18.7226C47.2766 18.7226 50.8061 15.2007 50.8061 10.8785C50.8061 6.55625 47.2766 3.03442 42.945 3.03442C38.6134 3.03442 35.084 6.55625 35.084 10.8785V25.0116L38.2467 24.9887ZM42.945 6.16748C45.5348 6.16748 47.6433 8.27143 47.6433 10.8556C47.6433 13.4398 45.5348 15.5438 42.945 15.5438C40.3552 15.5438 38.2467 13.4398 38.2467 10.8556C38.2467 8.27143 40.3552 6.16748 42.945 6.16748Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M60.6379 2.98853C56.2834 2.98853 52.7769 6.51035 52.7769 10.8326C52.7769 15.1548 56.3063 18.6767 60.6379 18.6767C64.9695 18.6767 68.4989 15.1548 68.4989 10.8326C68.4989 6.51035 64.9924 2.98853 60.6379 2.98853ZM60.6379 15.5436C58.0252 15.5436 55.9167 13.4397 55.9167 10.8326C55.9167 8.22553 58.0252 6.12158 60.6379 6.12158C63.2506 6.12158 65.3591 8.22553 65.3591 10.8326C65.3591 13.4397 63.2506 15.5436 60.6379 15.5436Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M77.9187 3.40015C73.9997 3.40015 70.8369 6.55607 70.8369 10.4667V18.3108H73.9767V10.4667C73.9767 8.29412 75.7415 6.5332 77.9187 6.5332H79.5001V3.40015H77.9187Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M32.5629 10.8556C32.5629 6.51044 29.0335 3.01147 24.7019 3.01147C20.3473 3.01147 16.8408 6.5333 16.8408 10.8556C16.8408 15.1778 20.3703 18.6996 24.7019 18.6996C26.4666 18.6996 28.1167 18.105 29.4231 17.1217V18.3109H32.5629V11.1071C32.54 11.0385 32.5629 10.947 32.5629 10.8556ZM24.6789 15.5437C22.0662 15.5437 19.9577 13.4397 19.9577 10.8327C19.9577 8.22561 22.0662 6.12166 24.6789 6.12166C27.2916 6.12166 29.4001 8.22561 29.4001 10.8327C29.4001 13.4397 27.2916 15.5437 24.6789 15.5437Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M16.5888 3.40015L9.91949 18.3108H7.14636L0.5 3.40015H3.93777L8.54439 13.6912L13.1281 3.40015H16.5888Z"
                      fill="#2B2D36"
                  />
              </g>
              <defs>
                  <clipPath id="clip0_105_38">
                      <rect width="79" height="28" fill="white" transform="translate(0.5)" />
                  </clipPath>
              </defs>
          </svg>
      );
  };

  ```

  ```css
  .navbar-desktop {
      display: inherit;

      @media (max-width: 767px) {
          display: none;
      }
  }

  .navbar-mobile {
      display: none;

      @media (max-width: 767px) {
          display: inherit;
      }
  }

  .logo {
      flex-shrink: 0;
  }

  .vertical-navigation-menu {
      width: 100%;
  }

  .collapsible-trigger {
      width: 100%;
      justify-content: space-between;
  }

  .link-item {
      justify-content: flex-start;
  }

  .nested-link-item {
      justify-content: flex-start;

      padding-left: var(--vapor-size-space-250);
  }

  ```
</Demo>

### Center Aligned Navbar

<Demo name="components/patterns/nav-bar/demos/block02" showResponsiveToggle>
  ```tsx
  import './block.css';

  import type { ComponentProps } from 'react';

  import { Avatar, Collapsible, HStack, IconButton, NavigationMenu, Sheet } from '@vapor-ui/core';
  import {
      BellOnIcon,
      ChevronDownOutlineIcon,
      CloseOutlineIcon,
      MenuOutlineIcon,
  } from '@vapor-ui/icons';

  export default function Block2() {
      return (
          <HStack
              $css={{
                  width: '100%',
                  justifyContent: 'space-between',
                  paddingInline: { lg: '$400', sm: '$200' },
                  paddingBlock: { lg: '$100', sm: '$050' },
              }}
          >
              <LogoSvg className="logo" />

              <NavigationMenu.Root aria-label="Main" className="navbar-desktop">
                  <NavigationMenu.List>
                      <NavigationMenu.Item>
                          <NavigationMenu.Link href="/features">Features</NavigationMenu.Link>
                      </NavigationMenu.Item>
                      <NavigationMenu.Item>
                          <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
                      </NavigationMenu.Item>
                      <NavigationMenu.Item>
                          <NavigationMenu.Link href="/templates">Templates</NavigationMenu.Link>
                      </NavigationMenu.Item>
                  </NavigationMenu.List>
              </NavigationMenu.Root>

              <HStack $css={{ gap: '$100' }}>
                  <Avatar.Root shape="circle" alt="bell" render={<button />}>
                      <BellOnIcon />
                  </Avatar.Root>
                  <Avatar.Root shape="circle" alt="goorm" />

                  <Sheet.Root>
                      <Sheet.Trigger
                          render={
                              <IconButton
                                  aria-label="Open Menu"
                                  variant="ghost"
                                  colorPalette="secondary"
                                  className="navbar-mobile"
                              />
                          }
                      >
                          <MenuOutlineIcon />
                      </Sheet.Trigger>

                      <Sheet.PortalPrimitive>
                          <Sheet.OverlayPrimitive />
                          <Sheet.PositionerPrimitive side="top">
                              <Sheet.PopupPrimitive>
                                  <Sheet.Header>
                                      <HStack
                                          $css={{
                                              gap: '$200',
                                              justifyContent: 'space-between',
                                              width: '100%',
                                          }}
                                      >
                                          <LogoSvg className="logo" />

                                          <HStack $css={{ gap: '$100' }}>
                                              <Avatar.Root
                                                  shape="circle"
                                                  alt="bell"
                                                  render={<button />}
                                              >
                                                  <BellOnIcon />
                                              </Avatar.Root>
                                              <Avatar.Root shape="circle" alt="goorm" />
                                              <Sheet.Close
                                                  render={
                                                      <IconButton
                                                          aria-label="Close Sheet"
                                                          variant="ghost"
                                                          colorPalette="secondary"
                                                      />
                                                  }
                                              >
                                                  <CloseOutlineIcon />
                                              </Sheet.Close>
                                          </HStack>
                                      </HStack>
                                  </Sheet.Header>

                                  <Sheet.Body>
                                      <NavigationMenu.Root
                                          aria-label="Main"
                                          direction="vertical"
                                          className="vertical-navigation-menu"
                                      >
                                          <NavigationMenu.List>
                                              <NavigationMenu.Item>
                                                  <Collapsible.Root>
                                                      <Collapsible.Trigger
                                                          className={'collapsible-trigger'}
                                                          render={<NavigationMenu.Link />}
                                                      >
                                                          Features
                                                          <ChevronDownOutlineIcon />
                                                      </Collapsible.Trigger>

                                                      <Collapsible.Panel>
                                                          <NavigationMenu.List>
                                                              <NavigationMenu.Item>
                                                                  <NavigationMenu.Link
                                                                      href="#"
                                                                      className="nested-link-item"
                                                                  >
                                                                      Container
                                                                  </NavigationMenu.Link>
                                                              </NavigationMenu.Item>
                                                              <NavigationMenu.Item>
                                                                  <NavigationMenu.Link
                                                                      href="#"
                                                                      className="nested-link-item"
                                                                  >
                                                                      SBOM
                                                                  </NavigationMenu.Link>
                                                              </NavigationMenu.Item>
                                                          </NavigationMenu.List>
                                                      </Collapsible.Panel>
                                                  </Collapsible.Root>
                                              </NavigationMenu.Item>
                                              <NavigationMenu.Item>
                                                  <NavigationMenu.Link className="link-item" href="#">
                                                      Pricing
                                                  </NavigationMenu.Link>
                                              </NavigationMenu.Item>
                                              <NavigationMenu.Item>
                                                  <NavigationMenu.Link className="link-item" href="#">
                                                      Templates
                                                  </NavigationMenu.Link>
                                              </NavigationMenu.Item>
                                          </NavigationMenu.List>
                                      </NavigationMenu.Root>
                                  </Sheet.Body>
                              </Sheet.PopupPrimitive>
                          </Sheet.PositionerPrimitive>
                      </Sheet.PortalPrimitive>
                  </Sheet.Root>
              </HStack>
          </HStack>
      );
  }

  const LogoSvg = (props: ComponentProps<'svg'>) => {
      return (
          <svg
              xmlns="http://www.w3.org/2000/svg"
              width="80"
              height="32"
              viewBox="0 0 80 28"
              fill="none"
              {...props}
          >
              <g clipPath="url(#clip0_105_38)">
                  <path
                      d="M38.2467 24.9887V17.1446C39.5989 18.1508 41.2491 18.7226 42.945 18.7226C47.2766 18.7226 50.8061 15.2007 50.8061 10.8785C50.8061 6.55625 47.2766 3.03442 42.945 3.03442C38.6134 3.03442 35.084 6.55625 35.084 10.8785V25.0116L38.2467 24.9887ZM42.945 6.16748C45.5348 6.16748 47.6433 8.27143 47.6433 10.8556C47.6433 13.4398 45.5348 15.5438 42.945 15.5438C40.3552 15.5438 38.2467 13.4398 38.2467 10.8556C38.2467 8.27143 40.3552 6.16748 42.945 6.16748Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M60.6379 2.98853C56.2834 2.98853 52.7769 6.51035 52.7769 10.8326C52.7769 15.1548 56.3063 18.6767 60.6379 18.6767C64.9695 18.6767 68.4989 15.1548 68.4989 10.8326C68.4989 6.51035 64.9924 2.98853 60.6379 2.98853ZM60.6379 15.5436C58.0252 15.5436 55.9167 13.4397 55.9167 10.8326C55.9167 8.22553 58.0252 6.12158 60.6379 6.12158C63.2506 6.12158 65.3591 8.22553 65.3591 10.8326C65.3591 13.4397 63.2506 15.5436 60.6379 15.5436Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M77.9187 3.40015C73.9997 3.40015 70.8369 6.55607 70.8369 10.4667V18.3108H73.9767V10.4667C73.9767 8.29412 75.7415 6.5332 77.9187 6.5332H79.5001V3.40015H77.9187Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M32.5629 10.8556C32.5629 6.51044 29.0335 3.01147 24.7019 3.01147C20.3473 3.01147 16.8408 6.5333 16.8408 10.8556C16.8408 15.1778 20.3703 18.6996 24.7019 18.6996C26.4666 18.6996 28.1167 18.105 29.4231 17.1217V18.3109H32.5629V11.1071C32.54 11.0385 32.5629 10.947 32.5629 10.8556ZM24.6789 15.5437C22.0662 15.5437 19.9577 13.4397 19.9577 10.8327C19.9577 8.22561 22.0662 6.12166 24.6789 6.12166C27.2916 6.12166 29.4001 8.22561 29.4001 10.8327C29.4001 13.4397 27.2916 15.5437 24.6789 15.5437Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M16.5888 3.40015L9.91949 18.3108H7.14636L0.5 3.40015H3.93777L8.54439 13.6912L13.1281 3.40015H16.5888Z"
                      fill="#2B2D36"
                  />
              </g>
              <defs>
                  <clipPath id="clip0_105_38">
                      <rect width="79" height="28" fill="white" transform="translate(0.5)" />
                  </clipPath>
              </defs>
          </svg>
      );
  };

  ```

  ```css
  .navbar-desktop {
      display: inherit;

      @media (max-width: 767px) {
          display: none;
      }
  }

  .navbar-mobile {
      display: none;

      @media (max-width: 767px) {
          display: inherit;
      }
  }

  .logo {
      flex-shrink: 0;
  }

  .vertical-navigation-menu {
      width: 100%;
  }

  .collapsible-trigger {
      width: 100%;
      justify-content: space-between;
  }

  .link-item {
      justify-content: flex-start;
  }

  .nested-link-item {
      justify-content: flex-start;

      padding-left: var(--vapor-size-space-250);
  }

  ```
</Demo>

### Right Aligned Navbar

<Demo name="components/patterns/nav-bar/demos/block03" showResponsiveToggle>
  ```tsx
  import './block.css';

  import type { ComponentProps } from 'react';

  import { Avatar, Collapsible, HStack, IconButton, NavigationMenu, Sheet } from '@vapor-ui/core';
  import {
      BellOnIcon,
      ChevronDownOutlineIcon,
      CloseOutlineIcon,
      MenuOutlineIcon,
  } from '@vapor-ui/icons';

  export default function Block3() {
      return (
          <HStack
              $css={{
                  width: '100%',
                  justifyContent: 'space-between',
                  paddingInline: { lg: '$400', sm: '$200' },
                  paddingBlock: { lg: '$100', sm: '$050' },
              }}
          >
              <LogoSvg className="logo" />

              <HStack $css={{ gap: '$200' }}>
                  <NavigationMenu.Root aria-label="Main" className="navbar-desktop">
                      <NavigationMenu.List>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="/features">Features</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
                          </NavigationMenu.Item>
                          <NavigationMenu.Item>
                              <NavigationMenu.Link href="/templates">Templates</NavigationMenu.Link>
                          </NavigationMenu.Item>
                      </NavigationMenu.List>
                  </NavigationMenu.Root>

                  <HStack $css={{ gap: '$100' }}>
                      <Avatar.Root shape="circle" alt="bell" render={<button />}>
                          <BellOnIcon />
                      </Avatar.Root>
                      <Avatar.Root shape="circle" alt="goorm" />

                      <Sheet.Root>
                          <Sheet.Trigger
                              render={
                                  <IconButton
                                      aria-label="Open Menu"
                                      variant="ghost"
                                      colorPalette="secondary"
                                      className="navbar-mobile"
                                  />
                              }
                          >
                              <MenuOutlineIcon />
                          </Sheet.Trigger>

                          <Sheet.PortalPrimitive>
                              <Sheet.OverlayPrimitive />
                              <Sheet.PositionerPrimitive side="top">
                                  <Sheet.PopupPrimitive>
                                      <Sheet.Header>
                                          <HStack
                                              $css={{
                                                  gap: '$200',
                                                  justifyContent: 'space-between',
                                                  width: '100%',
                                              }}
                                          >
                                              <LogoSvg className="logo" />

                                              <HStack $css={{ gap: '$100' }}>
                                                  <Avatar.Root
                                                      shape="circle"
                                                      alt="bell"
                                                      render={<button />}
                                                  >
                                                      <BellOnIcon />
                                                  </Avatar.Root>
                                                  <Avatar.Root shape="circle" alt="goorm" />
                                                  <Sheet.Close
                                                      render={
                                                          <IconButton
                                                              aria-label="Close Sheet"
                                                              variant="ghost"
                                                              colorPalette="secondary"
                                                          />
                                                      }
                                                  >
                                                      <CloseOutlineIcon />
                                                  </Sheet.Close>
                                              </HStack>
                                          </HStack>
                                      </Sheet.Header>

                                      <Sheet.Body>
                                          <NavigationMenu.Root
                                              aria-label="Main"
                                              direction="vertical"
                                              className="vertical-navigation-menu"
                                          >
                                              <NavigationMenu.List>
                                                  <NavigationMenu.Item>
                                                      <Collapsible.Root>
                                                          <Collapsible.Trigger
                                                              className={'collapsible-trigger'}
                                                              render={<NavigationMenu.Link />}
                                                          >
                                                              Features
                                                              <ChevronDownOutlineIcon />
                                                          </Collapsible.Trigger>

                                                          <Collapsible.Panel>
                                                              <NavigationMenu.List>
                                                                  <NavigationMenu.Item>
                                                                      <NavigationMenu.Link
                                                                          href="#"
                                                                          className="nested-link-item"
                                                                      >
                                                                          Container
                                                                      </NavigationMenu.Link>
                                                                  </NavigationMenu.Item>
                                                                  <NavigationMenu.Item>
                                                                      <NavigationMenu.Link
                                                                          href="#"
                                                                          className="nested-link-item"
                                                                      >
                                                                          SBOM
                                                                      </NavigationMenu.Link>
                                                                  </NavigationMenu.Item>
                                                              </NavigationMenu.List>
                                                          </Collapsible.Panel>
                                                      </Collapsible.Root>
                                                  </NavigationMenu.Item>
                                                  <NavigationMenu.Item>
                                                      <NavigationMenu.Link
                                                          className="link-item"
                                                          href="#"
                                                      >
                                                          Pricing
                                                      </NavigationMenu.Link>
                                                  </NavigationMenu.Item>
                                                  <NavigationMenu.Item>
                                                      <NavigationMenu.Link
                                                          className="link-item"
                                                          href="#"
                                                      >
                                                          Templates
                                                      </NavigationMenu.Link>
                                                  </NavigationMenu.Item>
                                              </NavigationMenu.List>
                                          </NavigationMenu.Root>
                                      </Sheet.Body>
                                  </Sheet.PopupPrimitive>
                              </Sheet.PositionerPrimitive>
                          </Sheet.PortalPrimitive>
                      </Sheet.Root>
                  </HStack>
              </HStack>
          </HStack>
      );
  }

  const LogoSvg = (props: ComponentProps<'svg'>) => {
      return (
          <svg
              xmlns="http://www.w3.org/2000/svg"
              width="80"
              height="32"
              viewBox="0 0 80 28"
              fill="none"
              {...props}
          >
              <g clipPath="url(#clip0_105_38)">
                  <path
                      d="M38.2467 24.9887V17.1446C39.5989 18.1508 41.2491 18.7226 42.945 18.7226C47.2766 18.7226 50.8061 15.2007 50.8061 10.8785C50.8061 6.55625 47.2766 3.03442 42.945 3.03442C38.6134 3.03442 35.084 6.55625 35.084 10.8785V25.0116L38.2467 24.9887ZM42.945 6.16748C45.5348 6.16748 47.6433 8.27143 47.6433 10.8556C47.6433 13.4398 45.5348 15.5438 42.945 15.5438C40.3552 15.5438 38.2467 13.4398 38.2467 10.8556C38.2467 8.27143 40.3552 6.16748 42.945 6.16748Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M60.6379 2.98853C56.2834 2.98853 52.7769 6.51035 52.7769 10.8326C52.7769 15.1548 56.3063 18.6767 60.6379 18.6767C64.9695 18.6767 68.4989 15.1548 68.4989 10.8326C68.4989 6.51035 64.9924 2.98853 60.6379 2.98853ZM60.6379 15.5436C58.0252 15.5436 55.9167 13.4397 55.9167 10.8326C55.9167 8.22553 58.0252 6.12158 60.6379 6.12158C63.2506 6.12158 65.3591 8.22553 65.3591 10.8326C65.3591 13.4397 63.2506 15.5436 60.6379 15.5436Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M77.9187 3.40015C73.9997 3.40015 70.8369 6.55607 70.8369 10.4667V18.3108H73.9767V10.4667C73.9767 8.29412 75.7415 6.5332 77.9187 6.5332H79.5001V3.40015H77.9187Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M32.5629 10.8556C32.5629 6.51044 29.0335 3.01147 24.7019 3.01147C20.3473 3.01147 16.8408 6.5333 16.8408 10.8556C16.8408 15.1778 20.3703 18.6996 24.7019 18.6996C26.4666 18.6996 28.1167 18.105 29.4231 17.1217V18.3109H32.5629V11.1071C32.54 11.0385 32.5629 10.947 32.5629 10.8556ZM24.6789 15.5437C22.0662 15.5437 19.9577 13.4397 19.9577 10.8327C19.9577 8.22561 22.0662 6.12166 24.6789 6.12166C27.2916 6.12166 29.4001 8.22561 29.4001 10.8327C29.4001 13.4397 27.2916 15.5437 24.6789 15.5437Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M16.5888 3.40015L9.91949 18.3108H7.14636L0.5 3.40015H3.93777L8.54439 13.6912L13.1281 3.40015H16.5888Z"
                      fill="#2B2D36"
                  />
              </g>
              <defs>
                  <clipPath id="clip0_105_38">
                      <rect width="79" height="28" fill="white" transform="translate(0.5)" />
                  </clipPath>
              </defs>
          </svg>
      );
  };

  ```

  ```css
  .navbar-desktop {
      display: inherit;

      @media (max-width: 767px) {
          display: none;
      }
  }

  .navbar-mobile {
      display: none;

      @media (max-width: 767px) {
          display: inherit;
      }
  }

  .logo {
      flex-shrink: 0;
  }

  .vertical-navigation-menu {
      width: 100%;
  }

  .collapsible-trigger {
      width: 100%;
      justify-content: space-between;
  }

  .link-item {
      justify-content: flex-start;
  }

  .nested-link-item {
      justify-content: flex-start;

      padding-left: var(--vapor-size-space-250);
  }

  ```
</Demo>

### Navbar with Login Button

<Demo name="components/patterns/nav-bar/demos/block04" showResponsiveToggle>
  ```tsx
  import './block.css';

  import type { ComponentProps } from 'react';

  import { Button, Collapsible, HStack, IconButton, NavigationMenu, Sheet } from '@vapor-ui/core';
  import { ChevronDownOutlineIcon, CloseOutlineIcon, MenuOutlineIcon } from '@vapor-ui/icons';

  export default function Block4() {
      return (
          <HStack
              $css={{
                  width: '100%',
                  justifyContent: 'space-between',
                  paddingInline: { lg: '$400', sm: '$200' },
                  paddingBlock: { lg: '$100', sm: '$050' },
              }}
          >
              <LogoSvg className="logo" />

              <NavigationMenu.Root aria-label="Main" className="navbar-desktop">
                  <NavigationMenu.List>
                      <NavigationMenu.Item>
                          <NavigationMenu.Link href="/features">Features</NavigationMenu.Link>
                      </NavigationMenu.Item>
                      <NavigationMenu.Item>
                          <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
                      </NavigationMenu.Item>
                      <NavigationMenu.Item>
                          <NavigationMenu.Link href="/templates">Templates</NavigationMenu.Link>
                      </NavigationMenu.Item>
                  </NavigationMenu.List>
              </NavigationMenu.Root>

              <HStack $css={{ gap: '$100' }}>
                  <Button variant="ghost">Log in</Button>
                  <Button>Sign up</Button>

                  <Sheet.Root>
                      <Sheet.Trigger
                          render={
                              <IconButton
                                  aria-label="Open Menu"
                                  variant="ghost"
                                  colorPalette="secondary"
                                  className="navbar-mobile"
                              />
                          }
                      >
                          <MenuOutlineIcon />
                      </Sheet.Trigger>

                      <Sheet.PortalPrimitive>
                          <Sheet.OverlayPrimitive />
                          <Sheet.PositionerPrimitive side="top">
                              <Sheet.PopupPrimitive>
                                  <Sheet.Header>
                                      <HStack
                                          $css={{
                                              gap: '$200',
                                              justifyContent: 'space-between',
                                              width: '100%',
                                          }}
                                      >
                                          <LogoSvg className="logo" />

                                          <HStack $css={{ gap: '$100' }}>
                                              <Button variant="ghost">Log in</Button>
                                              <Button>Sign up</Button>
                                              <Sheet.Close
                                                  render={
                                                      <IconButton
                                                          aria-label="Close Sheet"
                                                          variant="ghost"
                                                          colorPalette="secondary"
                                                      />
                                                  }
                                              >
                                                  <CloseOutlineIcon />
                                              </Sheet.Close>
                                          </HStack>
                                      </HStack>
                                  </Sheet.Header>

                                  <Sheet.Body>
                                      <NavigationMenu.Root
                                          aria-label="Main"
                                          direction="vertical"
                                          className="vertical-navigation-menu"
                                      >
                                          <NavigationMenu.List>
                                              <NavigationMenu.Item>
                                                  <Collapsible.Root>
                                                      <Collapsible.Trigger
                                                          className={'collapsible-trigger'}
                                                          render={<NavigationMenu.Link />}
                                                      >
                                                          Features
                                                          <ChevronDownOutlineIcon />
                                                      </Collapsible.Trigger>

                                                      <Collapsible.Panel>
                                                          <NavigationMenu.List>
                                                              <NavigationMenu.Item>
                                                                  <NavigationMenu.Link
                                                                      href="#"
                                                                      className="nested-link-item"
                                                                  >
                                                                      Container
                                                                  </NavigationMenu.Link>
                                                              </NavigationMenu.Item>
                                                              <NavigationMenu.Item>
                                                                  <NavigationMenu.Link
                                                                      href="#"
                                                                      className="nested-link-item"
                                                                  >
                                                                      SBOM
                                                                  </NavigationMenu.Link>
                                                              </NavigationMenu.Item>
                                                          </NavigationMenu.List>
                                                      </Collapsible.Panel>
                                                  </Collapsible.Root>
                                              </NavigationMenu.Item>
                                              <NavigationMenu.Item>
                                                  <NavigationMenu.Link className="link-item" href="#">
                                                      Pricing
                                                  </NavigationMenu.Link>
                                              </NavigationMenu.Item>
                                              <NavigationMenu.Item>
                                                  <NavigationMenu.Link className="link-item" href="#">
                                                      Templates
                                                  </NavigationMenu.Link>
                                              </NavigationMenu.Item>
                                          </NavigationMenu.List>
                                      </NavigationMenu.Root>
                                  </Sheet.Body>
                              </Sheet.PopupPrimitive>
                          </Sheet.PositionerPrimitive>
                      </Sheet.PortalPrimitive>
                  </Sheet.Root>
              </HStack>
          </HStack>
      );
  }

  const LogoSvg = (props: ComponentProps<'svg'>) => {
      return (
          <svg
              xmlns="http://www.w3.org/2000/svg"
              width="80"
              height="32"
              viewBox="0 0 80 28"
              fill="none"
              {...props}
          >
              <g clipPath="url(#clip0_105_38)">
                  <path
                      d="M38.2467 24.9887V17.1446C39.5989 18.1508 41.2491 18.7226 42.945 18.7226C47.2766 18.7226 50.8061 15.2007 50.8061 10.8785C50.8061 6.55625 47.2766 3.03442 42.945 3.03442C38.6134 3.03442 35.084 6.55625 35.084 10.8785V25.0116L38.2467 24.9887ZM42.945 6.16748C45.5348 6.16748 47.6433 8.27143 47.6433 10.8556C47.6433 13.4398 45.5348 15.5438 42.945 15.5438C40.3552 15.5438 38.2467 13.4398 38.2467 10.8556C38.2467 8.27143 40.3552 6.16748 42.945 6.16748Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M60.6379 2.98853C56.2834 2.98853 52.7769 6.51035 52.7769 10.8326C52.7769 15.1548 56.3063 18.6767 60.6379 18.6767C64.9695 18.6767 68.4989 15.1548 68.4989 10.8326C68.4989 6.51035 64.9924 2.98853 60.6379 2.98853ZM60.6379 15.5436C58.0252 15.5436 55.9167 13.4397 55.9167 10.8326C55.9167 8.22553 58.0252 6.12158 60.6379 6.12158C63.2506 6.12158 65.3591 8.22553 65.3591 10.8326C65.3591 13.4397 63.2506 15.5436 60.6379 15.5436Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M77.9187 3.40015C73.9997 3.40015 70.8369 6.55607 70.8369 10.4667V18.3108H73.9767V10.4667C73.9767 8.29412 75.7415 6.5332 77.9187 6.5332H79.5001V3.40015H77.9187Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M32.5629 10.8556C32.5629 6.51044 29.0335 3.01147 24.7019 3.01147C20.3473 3.01147 16.8408 6.5333 16.8408 10.8556C16.8408 15.1778 20.3703 18.6996 24.7019 18.6996C26.4666 18.6996 28.1167 18.105 29.4231 17.1217V18.3109H32.5629V11.1071C32.54 11.0385 32.5629 10.947 32.5629 10.8556ZM24.6789 15.5437C22.0662 15.5437 19.9577 13.4397 19.9577 10.8327C19.9577 8.22561 22.0662 6.12166 24.6789 6.12166C27.2916 6.12166 29.4001 8.22561 29.4001 10.8327C29.4001 13.4397 27.2916 15.5437 24.6789 15.5437Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M16.5888 3.40015L9.91949 18.3108H7.14636L0.5 3.40015H3.93777L8.54439 13.6912L13.1281 3.40015H16.5888Z"
                      fill="#2B2D36"
                  />
              </g>
              <defs>
                  <clipPath id="clip0_105_38">
                      <rect width="79" height="28" fill="white" transform="translate(0.5)" />
                  </clipPath>
              </defs>
          </svg>
      );
  };

  ```

  ```css
  .navbar-desktop {
      display: inherit;

      @media (max-width: 767px) {
          display: none;
      }
  }

  .navbar-mobile {
      display: none;

      @media (max-width: 767px) {
          display: inherit;
      }
  }

  .logo {
      flex-shrink: 0;
  }

  .vertical-navigation-menu {
      width: 100%;
  }

  .collapsible-trigger {
      width: 100%;
      justify-content: space-between;
  }

  .link-item {
      justify-content: flex-start;
  }

  .nested-link-item {
      justify-content: flex-start;

      padding-left: var(--vapor-size-space-250);
  }

  ```
</Demo>

### Logo Centered Navbar

<Demo name="components/patterns/nav-bar/demos/block05" showResponsiveToggle>
  ```tsx
  import './logo.css';

  import type { ComponentProps } from 'react';

  import { Button, HStack } from '@vapor-ui/core';

  export default function Block5() {
      return (
          <HStack
              $css={{
                  width: '100%',
                  justifyContent: 'space-between',
                  paddingInline: { lg: '$400', sm: '$200' },
                  paddingBlock: { lg: '$100', sm: '$050' },
              }}
          >
              <Button colorPalette="secondary">뒤로가기</Button>
              <LogoSvg className="logo" />
              <Button colorPalette="primary">완료</Button>
          </HStack>
      );
  }

  const LogoSvg = (props: ComponentProps<'svg'>) => {
      return (
          <svg
              xmlns="http://www.w3.org/2000/svg"
              width="80"
              height="32"
              viewBox="0 0 80 28"
              fill="none"
              {...props}
          >
              <g clipPath="url(#clip0_105_38)">
                  <path
                      d="M38.2467 24.9887V17.1446C39.5989 18.1508 41.2491 18.7226 42.945 18.7226C47.2766 18.7226 50.8061 15.2007 50.8061 10.8785C50.8061 6.55625 47.2766 3.03442 42.945 3.03442C38.6134 3.03442 35.084 6.55625 35.084 10.8785V25.0116L38.2467 24.9887ZM42.945 6.16748C45.5348 6.16748 47.6433 8.27143 47.6433 10.8556C47.6433 13.4398 45.5348 15.5438 42.945 15.5438C40.3552 15.5438 38.2467 13.4398 38.2467 10.8556C38.2467 8.27143 40.3552 6.16748 42.945 6.16748Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M60.6379 2.98853C56.2834 2.98853 52.7769 6.51035 52.7769 10.8326C52.7769 15.1548 56.3063 18.6767 60.6379 18.6767C64.9695 18.6767 68.4989 15.1548 68.4989 10.8326C68.4989 6.51035 64.9924 2.98853 60.6379 2.98853ZM60.6379 15.5436C58.0252 15.5436 55.9167 13.4397 55.9167 10.8326C55.9167 8.22553 58.0252 6.12158 60.6379 6.12158C63.2506 6.12158 65.3591 8.22553 65.3591 10.8326C65.3591 13.4397 63.2506 15.5436 60.6379 15.5436Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M77.9187 3.40015C73.9997 3.40015 70.8369 6.55607 70.8369 10.4667V18.3108H73.9767V10.4667C73.9767 8.29412 75.7415 6.5332 77.9187 6.5332H79.5001V3.40015H77.9187Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M32.5629 10.8556C32.5629 6.51044 29.0335 3.01147 24.7019 3.01147C20.3473 3.01147 16.8408 6.5333 16.8408 10.8556C16.8408 15.1778 20.3703 18.6996 24.7019 18.6996C26.4666 18.6996 28.1167 18.105 29.4231 17.1217V18.3109H32.5629V11.1071C32.54 11.0385 32.5629 10.947 32.5629 10.8556ZM24.6789 15.5437C22.0662 15.5437 19.9577 13.4397 19.9577 10.8327C19.9577 8.22561 22.0662 6.12166 24.6789 6.12166C27.2916 6.12166 29.4001 8.22561 29.4001 10.8327C29.4001 13.4397 27.2916 15.5437 24.6789 15.5437Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M16.5888 3.40015L9.91949 18.3108H7.14636L0.5 3.40015H3.93777L8.54439 13.6912L13.1281 3.40015H16.5888Z"
                      fill="#2B2D36"
                  />
              </g>
              <defs>
                  <clipPath id="clip0_105_38">
                      <rect width="79" height="28" fill="white" transform="translate(0.5)" />
                  </clipPath>
              </defs>
          </svg>
      );
  };

  ```

  ```css
  .logo {
      flex-shrink: 0;
  }

  ```
</Demo>

### Page Navigation Navbar

<Demo name="components/patterns/nav-bar/demos/block06" showResponsiveToggle>
  ```tsx
  import './logo.css';

  import type { ComponentProps } from 'react';

  import { HStack, IconButton } from '@vapor-ui/core';
  import { BackPageOutlineIcon, ForwardPageOutlineIcon } from '@vapor-ui/icons';

  export default function Block6() {
      return (
          <HStack
              $css={{
                  width: '100%',
                  justifyContent: 'space-between',
                  paddingInline: { lg: '$400', sm: '$200' },
                  paddingBlock: { lg: '$100', sm: '$050' },
              }}
          >
              <IconButton aria-label="back" variant="outline" colorPalette="secondary">
                  <BackPageOutlineIcon />
              </IconButton>
              <LogoSvg className="logo" />
              <IconButton aria-label="next" variant="outline" colorPalette="secondary">
                  <ForwardPageOutlineIcon />
              </IconButton>
          </HStack>
      );
  }

  const LogoSvg = (props: ComponentProps<'svg'>) => {
      return (
          <svg
              xmlns="http://www.w3.org/2000/svg"
              width="80"
              height="32"
              viewBox="0 0 80 28"
              fill="none"
              {...props}
          >
              <g clipPath="url(#clip0_105_38)">
                  <path
                      d="M38.2467 24.9887V17.1446C39.5989 18.1508 41.2491 18.7226 42.945 18.7226C47.2766 18.7226 50.8061 15.2007 50.8061 10.8785C50.8061 6.55625 47.2766 3.03442 42.945 3.03442C38.6134 3.03442 35.084 6.55625 35.084 10.8785V25.0116L38.2467 24.9887ZM42.945 6.16748C45.5348 6.16748 47.6433 8.27143 47.6433 10.8556C47.6433 13.4398 45.5348 15.5438 42.945 15.5438C40.3552 15.5438 38.2467 13.4398 38.2467 10.8556C38.2467 8.27143 40.3552 6.16748 42.945 6.16748Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M60.6379 2.98853C56.2834 2.98853 52.7769 6.51035 52.7769 10.8326C52.7769 15.1548 56.3063 18.6767 60.6379 18.6767C64.9695 18.6767 68.4989 15.1548 68.4989 10.8326C68.4989 6.51035 64.9924 2.98853 60.6379 2.98853ZM60.6379 15.5436C58.0252 15.5436 55.9167 13.4397 55.9167 10.8326C55.9167 8.22553 58.0252 6.12158 60.6379 6.12158C63.2506 6.12158 65.3591 8.22553 65.3591 10.8326C65.3591 13.4397 63.2506 15.5436 60.6379 15.5436Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M77.9187 3.40015C73.9997 3.40015 70.8369 6.55607 70.8369 10.4667V18.3108H73.9767V10.4667C73.9767 8.29412 75.7415 6.5332 77.9187 6.5332H79.5001V3.40015H77.9187Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M32.5629 10.8556C32.5629 6.51044 29.0335 3.01147 24.7019 3.01147C20.3473 3.01147 16.8408 6.5333 16.8408 10.8556C16.8408 15.1778 20.3703 18.6996 24.7019 18.6996C26.4666 18.6996 28.1167 18.105 29.4231 17.1217V18.3109H32.5629V11.1071C32.54 11.0385 32.5629 10.947 32.5629 10.8556ZM24.6789 15.5437C22.0662 15.5437 19.9577 13.4397 19.9577 10.8327C19.9577 8.22561 22.0662 6.12166 24.6789 6.12166C27.2916 6.12166 29.4001 8.22561 29.4001 10.8327C29.4001 13.4397 27.2916 15.5437 24.6789 15.5437Z"
                      fill="#2B2D36"
                  />
                  <path
                      d="M16.5888 3.40015L9.91949 18.3108H7.14636L0.5 3.40015H3.93777L8.54439 13.6912L13.1281 3.40015H16.5888Z"
                      fill="#2B2D36"
                  />
              </g>
              <defs>
                  <clipPath id="clip0_105_38">
                      <rect width="79" height="28" fill="white" transform="translate(0.5)" />
                  </clipPath>
              </defs>
          </svg>
      );
  };

  ```

  ```css
  .logo {
      flex-shrink: 0;
  }

  ```
</Demo>


# 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

<Demo name="components/(components)/table/demos/default-table" showResponsiveToggle>
  ```tsx
  import { Badge, Table } from '@vapor-ui/core';

  const datas = [
      { name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
      { name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
      { name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
      { name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
      { name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
      { name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
      { name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
      { name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
  ];

  const activeness: Record<string, Badge.Props['colorPalette']> = {
      active: 'success',
      inactive: 'hint',
  };

  export default function Basic() {
      return (
          <Table.Root $css={{ width: '100%' }}>
              <Table.Header>
                  <Table.Row $css={{ backgroundColor: '$basic-gray-050' }}>
                      <Table.Heading>Name</Table.Heading>
                      <Table.Heading>Status</Table.Heading>
                      <Table.Heading>Role</Table.Heading>
                      <Table.Heading>Last Active</Table.Heading>
                  </Table.Row>
              </Table.Header>

              <Table.Body>
                  {datas.map((data, index) => (
                      <Table.Row key={index}>
                          <Table.Cell>{data.name}</Table.Cell>
                          <Table.Cell>
                              <Badge colorPalette={activeness[data.status]} shape="pill">
                                  {data.status.toUpperCase()}
                              </Badge>
                          </Table.Cell>
                          <Table.Cell>{data.role}</Table.Cell>
                          <Table.Cell>{data['last-active']}</Table.Cell>
                      </Table.Row>
                  ))}
              </Table.Body>
          </Table.Root>
      );
  }

  ```
</Demo>

### Checkbox

<Demo name="components/patterns/table/demos/checkbox" showResponsiveToggle>
  ```tsx
  import { useMemo, useState } from 'react';

  import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
  import { Badge, Card, Checkbox, Table } from '@vapor-ui/core';

  export default function Basic() {
      const [rowSelection, setRowSelection] = useState({});

      const columns = useMemo<ColumnDef<Data>[]>(
          () => [
              {
                  id: 'select',
                  header: ({ table }) => (
                      <Checkbox.Root
                          aria-label="Select all"
                          checked={table.getIsAllRowsSelected()}
                          indeterminate={table.getIsSomeRowsSelected()}
                          onCheckedChange={(value) => table.toggleAllRowsSelected(value)}
                          $css={{ justifySelf: 'center' }}
                      />
                  ),
                  cell: ({ row }) => (
                      <Checkbox.Root
                          aria-label="Select row"
                          checked={row.getIsSelected()}
                          disabled={!row.getCanSelect()}
                          indeterminate={row.getIsSomeSelected()}
                          onCheckedChange={(value) => row.toggleSelected(value)}
                          $css={{ justifySelf: 'center' }}
                      />
                  ),
              },

              {
                  header: 'Name',
                  accessorKey: 'name',
              },

              {
                  header: 'Status',
                  accessorKey: 'status',
                  cell: ({ getValue }) => {
                      const status = getValue<string>();
                      return (
                          <Badge color={activeness[status]} shape="pill">
                              {status.toUpperCase()}
                          </Badge>
                      );
                  },
              },

              {
                  header: 'Role',
                  accessorKey: 'role',
              },

              {
                  header: 'Last Active',
                  accessorKey: 'last-active',
              },
          ],
          [],
      );

      const table = useReactTable({
          data: datas,
          columns,
          state: { rowSelection },
          enableRowSelection: true,
          onRowSelectionChange: setRowSelection,
          getCoreRowModel: getCoreRowModel(),
      });

      return (
          <Card.Root $css={{ width: '100%' }}>
              <Card.Body $css={{ padding: '$000' }}>
                  <Table.Root $css={{ width: '100%' }}>
                      <Table.ColumnGroup>
                          <Table.Column width="10%" />
                      </Table.ColumnGroup>

                      <Table.Header $css={{ backgroundColor: '$basic-gray-050' }}>
                          {table.getHeaderGroups().map((headerGroup) => (
                              <Table.Row key={headerGroup.id}>
                                  {headerGroup.headers.map((header) => (
                                      <Table.Heading key={header.id}>
                                          {flexRender(
                                              header.column.columnDef.header,
                                              header.getContext(),
                                          )}
                                      </Table.Heading>
                                  ))}
                              </Table.Row>
                          ))}
                      </Table.Header>

                      <Table.Body>
                          {table.getRowModel().rows.map((row) => {
                              return (
                                  <Table.Row
                                      key={row.id}
                                      $css={{
                                          backgroundColor: row.getIsSelected()
                                              ? '$bg-primary-100'
                                              : 'inherit',
                                      }}
                                  >
                                      {row.getVisibleCells().map((cell) => {
                                          return (
                                              <Table.Cell key={cell.id}>
                                                  {flexRender(
                                                      cell.column.columnDef.cell,
                                                      cell.getContext(),
                                                  )}
                                              </Table.Cell>
                                          );
                                      })}
                                  </Table.Row>
                              );
                          })}
                      </Table.Body>
                  </Table.Root>
              </Card.Body>
          </Card.Root>
      );
  }

  type Data = {
      name: string;
      status: 'active' | 'inactive';
      role: string;
      'last-active': string;
  };

  const datas: Data[] = [
      { name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
      { name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
      { name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
      { name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
      { name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
      { name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
      { name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
      { name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
  ];

  const activeness: Record<string, Badge.Props['color']> = {
      active: 'success',
      inactive: 'hint',
  };

  ```
</Demo>

### Ordering

<Demo name="components/patterns/table/demos/ordering" showResponsiveToggle>
  ```tsx
  import { useMemo, useState } from 'react';

  import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
  import { Badge, Box, Card, Table } from '@vapor-ui/core';

  export default function Ordering() {
      const [rowSelection, setRowSelection] = useState({});

      const columns = useMemo<ColumnDef<Data>[]>(
          () => [
              {
                  id: 'select',

                  header: () => <Box $css={{ textAlign: 'center' }}>ID</Box>,
                  cell: ({ row }) => <Box $css={{ textAlign: 'center' }}>{row.index + 1}</Box>,
              },

              {
                  header: 'Name',
                  accessorKey: 'name',
              },

              {
                  header: 'Status',
                  accessorKey: 'status',
                  cell: ({ getValue }) => {
                      const status = getValue<string>();

                      return (
                          <Badge color={activeness[status]} shape="pill">
                              {status.toUpperCase()}
                          </Badge>
                      );
                  },
              },

              {
                  header: 'Role',
                  accessorKey: 'role',
              },

              {
                  header: 'Last Active',
                  accessorKey: 'last-active',
              },
          ],
          [],
      );

      const table = useReactTable({
          data: datas,
          columns,
          state: { rowSelection },
          enableRowSelection: true,
          onRowSelectionChange: setRowSelection,
          getCoreRowModel: getCoreRowModel(),
      });

      return (
          <Card.Root $css={{ width: '100%' }}>
              <Card.Body $css={{ padding: '$000' }}>
                  <Table.Root $css={{ width: '100%' }}>
                      <Table.ColumnGroup>
                          <Table.Column width="10%" />
                      </Table.ColumnGroup>

                      <Table.Header $css={{ backgroundColor: '$basic-gray-050' }}>
                          {table.getHeaderGroups().map((headerGroup) => (
                              <Table.Row key={headerGroup.id}>
                                  {headerGroup.headers.map((header) => (
                                      <Table.Heading key={header.id}>
                                          {flexRender(
                                              header.column.columnDef.header,
                                              header.getContext(),
                                          )}
                                      </Table.Heading>
                                  ))}
                              </Table.Row>
                          ))}
                      </Table.Header>

                      <Table.Body>
                          {table.getRowModel().rows.map((row) => {
                              return (
                                  <Table.Row key={row.id}>
                                      {row.getVisibleCells().map((cell) => (
                                          <Table.Cell key={cell.id}>
                                              {flexRender(
                                                  cell.column.columnDef.cell,
                                                  cell.getContext(),
                                              )}
                                          </Table.Cell>
                                      ))}
                                  </Table.Row>
                              );
                          })}
                      </Table.Body>
                  </Table.Root>
              </Card.Body>
          </Card.Root>
      );
  }

  type Data = {
      name: string;
      status: 'active' | 'inactive';
      role: string;
      'last-active': string;
  };

  const datas: Data[] = [
      { name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
      { name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
      { name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
      { name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
      { name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
      { name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
      { name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
      { name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
  ];

  const activeness: Record<string, Badge.Props['color']> = {
      active: 'success',
      inactive: 'hint',
  };

  ```
</Demo>

### Sticky

<Demo name="components/patterns/table/demos/sticky" showResponsiveToggle>
  ```tsx
  import type { CSSProperties } from 'react';
  import { useMemo, useState } from 'react';

  import type { Column, Table as TanstackTable } from '@tanstack/react-table';
  import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
  import { Badge, Box, Card, Table } from '@vapor-ui/core';

  export default function Basic() {
      const [rowSelection, setRowSelection] = useState({});

      const columns = useMemo<ColumnDef<Data>[]>(
          () => [
              {
                  header: () => <Box $css={{ textAlign: 'center' }}>ID</Box>,
                  accessorKey: 'id',
                  cell: ({ row }) => <Box $css={{ textAlign: 'center' }}>{row.index + 1}</Box>,
              },

              {
                  header: 'Name',
                  accessorKey: 'name',
                  cell: ({ row }) => <Box style={{ textWrap: 'nowrap' }}>{row.getValue('name')}</Box>,
              },

              {
                  header: 'Status',
                  accessorKey: 'status',
                  cell: ({ row }) => {
                      const status = row.getValue<string>('status');

                      return (
                          <Badge color={activeness[status]} shape="pill">
                              {status.toUpperCase()}
                          </Badge>
                      );
                  },
              },

              {
                  header: 'Role',
                  accessorKey: 'role',
              },

              {
                  header: 'Last Active',
                  accessorKey: 'last-active',
              },
          ],
          [],
      );

      const table = useReactTable({
          data: datas,
          columns,
          state: { rowSelection, columnPinning: { left: ['id', 'name'] } },
          enableRowSelection: true,
          onRowSelectionChange: setRowSelection,
          getCoreRowModel: getCoreRowModel(),
      });

      return (
          <Card.Root $css={{ width: '100%' }}>
              <Card.Body $css={{ overflow: 'auto', padding: '$000' }}>
                  <Table.Root $css={{ width: '200%' }}>
                      <Table.ColumnGroup>
                          <Table.Column width="0" />
                          <Table.Column width="0" />
                          <Table.Column width="0" />
                      </Table.ColumnGroup>
                      <Table.Header>
                          {table.getHeaderGroups().map((headerGroup) => (
                              <Table.Row key={headerGroup.id}>
                                  {headerGroup.headers.map((header) => (
                                      <Table.Heading
                                          key={header.id}
                                          ref={(thElem) =>
                                              columnSizingHandler(thElem, table, header.column)
                                          }
                                          $css={{ backgroundColor: '$basic-gray-050' }}
                                          style={{ ...getCommonPinningStyles(header.column) }}
                                      >
                                          {flexRender(
                                              header.column.columnDef.header,
                                              header.getContext(),
                                          )}
                                      </Table.Heading>
                                  ))}
                              </Table.Row>
                          ))}
                      </Table.Header>

                      <Table.Body>
                          {table.getRowModel().rows.map((row) => {
                              return (
                                  <Table.Row key={row.id}>
                                      {row.getVisibleCells().map((cell) => (
                                          <Table.Cell
                                              key={cell.id}
                                              $css={{ backgroundColor: '$bg-canvas-100' }}
                                              style={{ ...getCommonPinningStyles(cell.column) }}
                                          >
                                              {flexRender(
                                                  cell.column.columnDef.cell,
                                                  cell.getContext(),
                                              )}
                                          </Table.Cell>
                                      ))}
                                  </Table.Row>
                              );
                          })}
                      </Table.Body>
                  </Table.Root>
              </Card.Body>
          </Card.Root>
      );
  }

  type Data = {
      name: string;
      status: 'active' | 'inactive';
      role: string;
      'last-active': string;
  };

  const datas: Data[] = [
      { name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
      { name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
      { name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
      { name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
      { name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
      { name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
      { name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
      { name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
  ];

  const getCommonPinningStyles = (column: Column<Data>): CSSProperties => {
      const isPinned = column.getIsPinned();
      const lastPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');

      return {
          boxShadow: lastPinnedColumn ? '-3px 0 0 0 rgba(0, 0, 0, 0.06) inset' : undefined,
          left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
          position: isPinned ? 'sticky' : 'unset',
          zIndex: isPinned ? 1 : undefined,
      };
  };

  const activeness: Record<string, Badge.Props['color']> = {
      active: 'success',
      inactive: 'hint',
  };

  const columnSizingHandler = (
      thElem: HTMLTableCellElement | null,
      table: TanstackTable<Data>,
      column: Column<Data>,
  ) => {
      if (!thElem) return;
      if (table.getState().columnSizing[column.id] !== undefined) return;
      if (table.getState().columnSizing[column.id] === thElem.getBoundingClientRect().width) return;

      table.setColumnSizing((prevSizes) => ({
          ...prevSizes,
          [column.id]: thElem.getBoundingClientRect().width,
      }));
  };

  ```
</Demo>

### Collapsed

<Demo name="components/patterns/table/demos/collapsed" showResponsiveToggle>
  ```tsx
  import type { CSSProperties } from 'react';
  import { useMemo, useState } from 'react';

  import type {
      Column,
      ColumnDef,
      OnChangeFn,
      RowData,
      TableFeature,
      Table as TanstackTable,
      Updater,
  } from '@tanstack/react-table';
  import {
      flexRender,
      getCoreRowModel,
      makeStateUpdater,
      useReactTable,
  } from '@tanstack/react-table';
  import { Badge, Box, Card, HStack, IconButton, Table } from '@vapor-ui/core';
  import { ChevronDoubleLeftOutlineIcon, ChevronDoubleRightOutlineIcon } from '@vapor-ui/icons';

  // asdf

  export default function Collapsed() {
      const columns = useMemo<ColumnDef<Data>[]>(
          () => [
              {
                  header: () => <Box $css={{ textAlign: 'center' }}>ID</Box>,
                  accessorKey: 'id',
                  cell: ({ row }) => <Box $css={{ textAlign: 'center' }}>{row.index + 1}</Box>,
              },

              {
                  header: ({ column }) => {
                      const isCollapsed = column.getIsCollapsed();
                      const IconElement = isCollapsed
                          ? ChevronDoubleRightOutlineIcon
                          : ChevronDoubleLeftOutlineIcon;

                      return (
                          <HStack $css={{ justifyContent: 'space-between', alignItems: 'center' }}>
                              {isCollapsed ? '' : 'Name'}

                              <IconButton
                                  aria-label="Toggle Name column"
                                  size="sm"
                                  variant="ghost"
                                  onClick={() => column.toggleCollapsed()}
                                  color="secondary"
                              >
                                  <IconElement />
                              </IconButton>
                          </HStack>
                      );
                  },
                  accessorKey: 'name',
                  cell: ({ row, column }) => {
                      const isCollapsed = column.getIsCollapsed();

                      return (
                          <Box
                              $css={{
                                  display: isCollapsed ? 'block' : 'flex',
                                  width: isCollapsed ? '32px' : '240px',
                                  overflow: 'hidden',
                              }}
                              style={{
                                  whiteSpace: 'nowrap',
                                  textOverflow: 'ellipsis',
                                  wordBreak: 'break-all',
                              }}
                          >
                              {row.getValue('name')}
                          </Box>
                      );
                  },
              },

              {
                  header: 'Status',
                  accessorKey: 'status',
                  cell: ({ row }) => {
                      const status = row.getValue<string>('status');

                      return (
                          <Box>
                              <Badge color={activeness[status]} shape="pill">
                                  {status.toUpperCase()}
                              </Badge>
                          </Box>
                      );
                  },
              },

              {
                  header: () => <Box>Role</Box>,
                  accessorKey: 'role',
              },

              {
                  header: () => <Box>Last Active</Box>,
                  accessorKey: 'last-active',
              },
          ],
          [],
      );

      const [columnCollapsed, setColumnCollapsed] = useState<ColumnCollapsedState>(['name']); // 초기에 접힐 컬럼들

      const table = useReactTable({
          _features: [ColumnCollapsedFeature],
          data: datas,
          columns,
          state: {
              columnPinning: { left: ['id', 'name'] },
              columnCollapsed,
          },
          enableRowSelection: true,
          getCoreRowModel: getCoreRowModel(),
          onColumnCollapsedChange: setColumnCollapsed,
      });

      return (
          <Card.Root $css={{ width: '100%' }}>
              <Card.Body $css={{ overflow: 'auto', padding: '$000' }}>
                  <Table.Root $css={{ width: '100%' }}>
                      <Table.ColumnGroup>
                          <Table.Column width="10%" />
                          <Table.Column width="10%" />
                      </Table.ColumnGroup>

                      <Table.Header>
                          {table.getHeaderGroups().map((headerGroup) => (
                              <Table.Row key={headerGroup.id}>
                                  {headerGroup.headers.map((header) => (
                                      <Table.Heading
                                          key={header.id}
                                          ref={(thElem) =>
                                              columnSizingHandler(thElem, table, header.column)
                                          }
                                          $css={{ backgroundColor: '$basic-gray-050' }}
                                          style={{ ...getCommonPinningStyles(header.column) }}
                                      >
                                          {flexRender(
                                              header.column.columnDef.header,
                                              header.getContext(),
                                          )}
                                      </Table.Heading>
                                  ))}
                              </Table.Row>
                          ))}
                      </Table.Header>

                      <Table.Body>
                          {table.getRowModel().rows.map((row) => {
                              return (
                                  <Table.Row key={row.id}>
                                      {row.getVisibleCells().map((cell) => (
                                          <Table.Cell
                                              key={cell.id}
                                              style={{ ...getCommonPinningStyles(cell.column) }}
                                          >
                                              {flexRender(
                                                  cell.column.columnDef.cell,
                                                  cell.getContext(),
                                              )}
                                          </Table.Cell>
                                      ))}
                                  </Table.Row>
                              );
                          })}
                      </Table.Body>
                  </Table.Root>
              </Card.Body>
          </Card.Root>
      );
  }

  /* -----------------------------------------------------------------------------------------------*/

  type Data = {
      name: string;
      status: 'active' | 'inactive';
      role: string;
      'last-active': string;
  };

  const datas: Data[] = [
      { name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
      { name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
      { name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
      { name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
      { name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
      { name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
      { name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
      { name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
  ];

  const getCommonPinningStyles = (column: Column<Data>): CSSProperties => {
      const isPinned = column.getIsPinned();
      const lastPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');

      return {
          boxShadow: lastPinnedColumn ? '-3px 0 0 0 rgba(0, 0, 0, 0.06) inset' : undefined,
          left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
          position: isPinned ? 'sticky' : 'unset',
          zIndex: isPinned ? 1 : undefined,
      };
  };

  const activeness: Record<string, Badge.Props['color']> = {
      active: 'success',
      inactive: 'hint',
  };

  const columnSizingHandler = (
      thElem: HTMLTableCellElement | null,
      table: TanstackTable<Data>,
      column: Column<Data>,
  ) => {
      if (!thElem) return;

      const currentSize = table.getState().columnSizing[column.id];
      const elementWidth = thElem.getBoundingClientRect().width;

      if (currentSize === elementWidth) return;

      table.setColumnSizing((prevSizes) => ({
          ...prevSizes,
          [column.id]: elementWidth,
      }));
  };

  /* -----------------------------------------------------------------------------------------------*/

  export type ColumnCollapsedState = string[];

  export interface ColumnCollapsedTableState {
      columnCollapsed: ColumnCollapsedState;
  }

  export interface ColumnCollapsedOptions {
      enableColumnCollapsed?: boolean;
      onColumnCollapsedChange?: OnChangeFn<ColumnCollapsedState>;
  }

  export interface ColumnCollapsedColumnInstance {
      getIsCollapsed: () => boolean;
      toggleCollapsed: () => void;
  }

  /* eslint-disable @typescript-eslint/no-unused-vars */
  declare module '@tanstack/react-table' {
      interface TableState extends ColumnCollapsedTableState {}
      interface TableOptionsResolved<TData extends RowData> extends ColumnCollapsedOptions {}
      interface Column<
          TData extends RowData,
          TValue = unknown,
      > extends ColumnCollapsedColumnInstance {}
  }
  /* eslint-enable @typescript-eslint/no-unused-vars */

  export const ColumnCollapsedFeature: TableFeature<unknown> = {
      getInitialState: (state): ColumnCollapsedTableState => {
          return {
              columnCollapsed: [],
              ...state,
          };
      },

      getDefaultOptions: <TData extends RowData>(
          table: TanstackTable<TData>,
      ): ColumnCollapsedOptions => {
          return {
              enableColumnCollapsed: true,
              onColumnCollapsedChange: makeStateUpdater('columnCollapsed', table),
          };
      },

      createColumn: <TData extends RowData>(
          column: Column<TData, unknown>,
          table: TanstackTable<TData>,
      ): void => {
          column.getIsCollapsed = () => {
              return table.getState().columnCollapsed?.includes(column.id) ?? false;
          };

          column.toggleCollapsed = () => {
              const currentState = column.getIsCollapsed();
              const updater: Updater<ColumnCollapsedState> = (old) => {
                  if (currentState) return old.filter((id) => id !== column.id);

                  return [...old, column.id];
              };
              table.options.onColumnCollapsedChange?.(updater);
          };
      },
  };

  ```
</Demo>

### Sort

<Demo name="components/patterns/table/demos/sort" showResponsiveToggle>
  ```tsx
  import { useMemo, useState } from 'react';

  import type { SortingState } from '@tanstack/react-table';
  import {
      type ColumnDef,
      flexRender,
      getCoreRowModel,
      getSortedRowModel,
      useReactTable,
  } from '@tanstack/react-table';
  import { Badge, Box, Card, HStack, IconButton, Table } from '@vapor-ui/core';
  import { ControlCommonIcon } from '@vapor-ui/icons';

  export default function Sort() {
      const columns = useMemo<ColumnDef<Data>[]>(
          () => [
              {
                  id: 'index',
                  header: 'ID',
                  accessorFn: (_, index) => index + 1,
                  cell: ({ getValue }) => (
                      <Box $css={{ textAlign: 'center' }}>{String(getValue() ?? '.')}</Box>
                  ),
              },

              {
                  header: 'Name',
                  accessorKey: 'name',
                  cell: (info) => info.getValue(),
              },

              {
                  accessorKey: 'status',
                  cell: ({ getValue }) => {
                      const status = getValue<string>();

                      return (
                          <Badge color={activeness[status]} shape="pill">
                              {status.toUpperCase()}
                          </Badge>
                      );
                  },
              },

              {
                  accessorKey: 'role',
                  cell: (info) => info.getValue(),
              },

              {
                  accessorKey: 'last-active',
                  cell: (info) => info.getValue(),
                  sortingFn: 'datetime',
              },
          ],
          [],
      );

      const [sorting, setSorting] = useState<SortingState>([]);

      const table = useReactTable({
          data: datas,
          columns,
          state: { sorting },
          enableRowSelection: true,
          getCoreRowModel: getCoreRowModel(),
          getSortedRowModel: getSortedRowModel(),
          onSortingChange: setSorting,
      });

      return (
          <Card.Root $css={{ width: '100%' }}>
              <Card.Body $css={{ padding: '$000' }}>
                  <Table.Root $css={{ width: '100%' }}>
                      <Table.ColumnGroup>
                          <Table.Column width="10%" />
                      </Table.ColumnGroup>
                      <Table.Header $css={{ borderRadius: 'inherit' }}>
                          {table.getHeaderGroups().map((headerGroup) => (
                              <Table.Row
                                  key={headerGroup.id}
                                  $css={{ backgroundColor: '$basic-gray-050' }}
                              >
                                  {headerGroup.headers.map((header) => (
                                      <Table.Heading key={header.id}>
                                          <HStack
                                              $css={{
                                                  justifyContent:
                                                      header.id === 'index' ? 'center' : 'flex-start',
                                              }}
                                          >
                                              {flexRender(
                                                  header.column.columnDef.header,
                                                  header.getContext(),
                                              )}

                                              <IconButton
                                                  aria-label={`${header.id} sort`}
                                                  variant="ghost"
                                                  size="sm"
                                                  onClick={header.column.getToggleSortingHandler()}
                                                  color="secondary"
                                              >
                                                  <ControlCommonIcon />
                                              </IconButton>
                                          </HStack>
                                      </Table.Heading>
                                  ))}
                              </Table.Row>
                          ))}
                      </Table.Header>

                      <Table.Body>
                          {table.getRowModel().rows.map((row) => {
                              return (
                                  <Table.Row key={row.id}>
                                      {row.getVisibleCells().map((cell) => {
                                          return (
                                              <Table.Cell key={cell.id}>
                                                  {flexRender(
                                                      cell.column.columnDef.cell,
                                                      cell.getContext(),
                                                  )}
                                              </Table.Cell>
                                          );
                                      })}
                                  </Table.Row>
                              );
                          })}
                      </Table.Body>
                  </Table.Root>
              </Card.Body>
          </Card.Root>
      );
  }

  type Data = {
      name: string;
      status: 'active' | 'inactive';
      role: string;
      'last-active': string;
  };

  const datas: Data[] = [
      { name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
      { name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
      { name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
      { name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
      { name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
      { name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
      { name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
      { name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
  ];

  const activeness: Record<string, Badge.Props['color']> = {
      active: 'success',
      inactive: 'hint',
  };

  ```
</Demo>

### Scroll

<Demo name="components/patterns/table/demos/scroll" showResponsiveToggle>
  ```tsx
  import { useMemo, useState } from 'react';

  import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
  import { Badge, Box, Card, Table } from '@vapor-ui/core';

  export default function Scroll() {
      const [rowSelection, setRowSelection] = useState({});

      const columns = useMemo<ColumnDef<Data>[]>(
          () => [
              {
                  accessorKey: 'id',
                  header: () => <Box $css={{ textAlign: 'center' }}>ID</Box>,
                  cell: ({ row }) => <Box $css={{ textAlign: 'center' }}>{row.index + 1}</Box>,
              },

              {
                  header: 'Name',
                  accessorKey: 'name',
                  cell: ({ row }) => <Box style={{ textWrap: 'nowrap' }}>{row.getValue('name')}</Box>,
              },

              {
                  header: 'Status',
                  accessorKey: 'status',
                  cell: ({ row }) => {
                      const status = row.getValue<string>('status');

                      return (
                          <Badge color={activeness[status]} shape="pill">
                              {status.toUpperCase()}
                          </Badge>
                      );
                  },
              },

              {
                  header: () => 'Role',
                  accessorKey: 'role',
              },

              {
                  header: () => 'Last Active',
                  accessorKey: 'last-active',
              },
          ],
          [],
      );

      const table = useReactTable({
          data: datas,
          columns,
          state: { rowSelection, columnPinning: { left: ['id', 'name'] } },
          enableRowSelection: true,
          onRowSelectionChange: setRowSelection,
          getCoreRowModel: getCoreRowModel(),
      });

      return (
          <Card.Root $css={{ width: '100%' }}>
              <Card.Body $css={{ overflow: 'auto', padding: '$000' }}>
                  <Table.Root $css={{ width: '200%' }}>
                      <Table.ColumnGroup>
                          <Table.Column width="5%" />
                      </Table.ColumnGroup>

                      <Table.Header>
                          {table.getHeaderGroups().map((headerGroup) => (
                              <Table.Row
                                  key={headerGroup.id}
                                  $css={{ backgroundColor: '$basic-gray-050' }}
                              >
                                  {headerGroup.headers.map((header) => (
                                      <Table.Heading key={header.id}>
                                          {flexRender(
                                              header.column.columnDef.header,
                                              header.getContext(),
                                          )}
                                      </Table.Heading>
                                  ))}
                              </Table.Row>
                          ))}
                      </Table.Header>

                      <Table.Body>
                          {table.getRowModel().rows.map((row) => {
                              return (
                                  <Table.Row key={row.id}>
                                      {row.getVisibleCells().map((cell) => (
                                          <Table.Cell key={cell.id}>
                                              {flexRender(
                                                  cell.column.columnDef.cell,
                                                  cell.getContext(),
                                              )}
                                          </Table.Cell>
                                      ))}
                                  </Table.Row>
                              );
                          })}
                      </Table.Body>
                  </Table.Root>
              </Card.Body>
          </Card.Root>
      );
  }

  type Data = {
      name: string;
      status: 'active' | 'inactive';
      role: string;
      'last-active': string;
  };

  const datas: Data[] = [
      { name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
      { name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
      { name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
      { name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
      { name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
      { name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
      { name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
      { name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
  ];

  const activeness: Record<string, Badge.Props['color']> = {
      active: 'success',
      inactive: 'hint',
  };

  ```
</Demo>

### Filter

<Demo name="components/patterns/table/demos/filter" showResponsiveToggle>
  ```tsx
  import { useMemo, useState } from 'react';

  import type { ColumnFiltersState, Row } from '@tanstack/react-table';
  import {
      type ColumnDef,
      flexRender,
      getCoreRowModel,
      getFilteredRowModel,
      getPaginationRowModel,
      useReactTable,
  } from '@tanstack/react-table';
  import {
      Badge,
      Box,
      Button,
      Card,
      HStack,
      MultiSelect,
      Select,
      Table,
      Text,
      TextInput,
  } from '@vapor-ui/core';
  import { PlusOutlineIcon, SearchOutlineIcon } from '@vapor-ui/icons';

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const customFilterFn = (row: Row<Data>, columnId: string, filterValue: any) => {
      if (!filterValue || filterValue.length === 0) return true;

      const cellValue = row.getValue(columnId) as string;
      return filterValue.includes(cellValue);
  };

  export default function Scroll() {
      const columns = useMemo<ColumnDef<Data>[]>(
          () => [
              {
                  header: () => <Box $css={{ textAlign: 'center' }}> ID</Box>,
                  accessorKey: 'id',
                  size: 0, // prevent cumulative layout shift
                  cell: ({ row }) => <Box $css={{ textAlign: 'center' }}>{row.index + 1}</Box>,
              },

              {
                  header: 'Name',
                  accessorKey: 'name',
                  size: 0, // prevent cumulative layout shift
                  cell: ({ row }) => <div style={{ textWrap: 'nowrap' }}>{row.getValue('name')}</div>,
              },

              {
                  header: 'Status',
                  accessorKey: 'status',
                  cell: ({ row }) => {
                      const status = row.getValue<string>('status');

                      return (
                          <Badge color={activeness[status]} shape="pill">
                              {status.toUpperCase()}
                          </Badge>
                      );
                  },
                  filterFn: customFilterFn,
              },

              {
                  header: 'Role',
                  accessorKey: 'role',
                  filterFn: customFilterFn,
              },

              {
                  header: 'Last Active',
                  accessorKey: 'last-active',
              },
          ],
          [],
      );

      const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);

      const table = useReactTable({
          data: datas,
          columns,
          state: { columnFilters },
          enableRowSelection: true,

          getCoreRowModel: getCoreRowModel(),
          getFilteredRowModel: getFilteredRowModel(),
          getPaginationRowModel: getPaginationRowModel(),
          onColumnFiltersChange: setColumnFilters,
      });

      return (
          <Card.Root $css={{ width: '100%' }}>
              <Card.Header>
                  <HStack $css={{ justifyContent: 'space-between', alignItems: 'center' }}>
                      <Text typography="heading6" foreground="normal-200" style={{ flexShrink: 0 }}>
                          출석부
                      </Text>

                      <HStack $css={{ alignItems: 'center', gap: '$100' }}>
                          <HStack
                              $css={{
                                  alignItems: 'center',
                                  gap: '10px',
                                  paddingInline: '$150',
                                  border: '1px solid',
                                  borderColor: '$normal',
                                  borderRadius: '$300',
                              }}
                          >
                              <SearchOutlineIcon />
                              <TextInput
                                  placeholder="이름으로 검색"
                                  $css={{ border: 'none', paddingInline: '$000' }}
                                  onValueChange={(value) =>
                                      table.getColumn('name')?.setFilterValue(value)
                                  }
                              />
                          </HStack>

                          <FilterSelect
                              triggerLabel="Status"
                              onValueChange={(value) => {
                                  table.getColumn('status')?.setFilterValue(value);
                              }}
                              content={
                                  <>
                                      <MultiSelect.Item value="active">Active</MultiSelect.Item>
                                      <MultiSelect.Item value="inactive">Inactive</MultiSelect.Item>
                                  </>
                              }
                          />

                          <FilterSelect
                              triggerLabel="Role"
                              onValueChange={(value) =>
                                  table.getColumn('role')?.setFilterValue(value)
                              }
                              content={
                                  <>
                                      <MultiSelect.Item value="designer">Designer</MultiSelect.Item>
                                      <MultiSelect.Item value="developer">Developer</MultiSelect.Item>
                                  </>
                              }
                          />

                          <FilterSelect
                              triggerLabel="Columns"
                              value={table
                                  .getAllColumns()
                                  .filter((col) => col.getIsVisible())
                                  .map((col) => col.id)}
                              content={table
                                  .getAllColumns()
                                  .filter((column) => column.getCanHide())
                                  .map((column) => (
                                      <MultiSelect.Item
                                          key={column.id}
                                          value={column.id}
                                          onClick={() => column.toggleVisibility()}
                                      >
                                          {column.id}
                                      </MultiSelect.Item>
                                  ))}
                          />

                          <Button>
                              <PlusOutlineIcon size="16px" /> 추가
                          </Button>
                      </HStack>
                  </HStack>
              </Card.Header>
              <Card.Body $css={{ overflow: 'auto', padding: '$000' }}>
                  <Table.Root $css={{ width: '100%' }}>
                      <Table.ColumnGroup>
                          <Table.Column width="10%" />
                      </Table.ColumnGroup>

                      <Table.Header>
                          {table.getHeaderGroups().map((headerGroup) => (
                              <Table.Row key={headerGroup.id}>
                                  {headerGroup.headers.map((header) => (
                                      <Table.Heading
                                          key={header.id}
                                          $css={{ backgroundColor: '$basic-gray-050' }}
                                      >
                                          {flexRender(
                                              header.column.columnDef.header,
                                              header.getContext(),
                                          )}
                                      </Table.Heading>
                                  ))}
                              </Table.Row>
                          ))}
                      </Table.Header>

                      <Table.Body>
                          {table.getRowModel().rows.length ? (
                              table.getRowModel().rows.map((row) => {
                                  return (
                                      <Table.Row key={row.id}>
                                          {row.getVisibleCells().map((cell) => (
                                              <Table.Cell key={cell.id}>
                                                  {flexRender(
                                                      cell.column.columnDef.cell,
                                                      cell.getContext(),
                                                  )}
                                              </Table.Cell>
                                          ))}
                                      </Table.Row>
                                  );
                              })
                          ) : (
                              <Table.Row>
                                  <Table.Cell
                                      colSpan={columns.length}
                                      $css={{ textAlign: 'center', height: '410px' }}
                                  >
                                      검색 결과가 없습니다.
                                  </Table.Cell>
                              </Table.Row>
                          )}
                      </Table.Body>
                  </Table.Root>
                  <Card.Footer $css={{ display: 'flex', justifyContent: 'flex-end' }}>
                      <Select.Root
                          value={table.getState().pagination.pageSize}
                          onValueChange={(value) => table.setPageSize(Number(value))}
                      >
                          <Select.TriggerPrimitive>
                              <Select.ValuePrimitive>
                                  {(value) => `${value}개씩 보기`}
                              </Select.ValuePrimitive>
                              <Select.TriggerIconPrimitive />
                          </Select.TriggerPrimitive>

                          <Select.Popup>
                              {[5, 10, 20, 30, 40, 50].map((pageSize) => (
                                  <Select.Item key={pageSize} value={pageSize}>
                                      {pageSize}
                                  </Select.Item>
                              ))}
                          </Select.Popup>
                      </Select.Root>
                  </Card.Footer>
              </Card.Body>
          </Card.Root>
      );
  }

  type Data = {
      name: string;
      status: 'active' | 'inactive';
      role: string;
      'last-active': string;
  };

  const datas: Data[] = [
      { name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
      { name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
      { name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
      { name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
      { name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
      { name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
      { name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
      { name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
  ];

  const activeness: Record<string, Badge.Props['color']> = {
      active: 'success',
      inactive: 'hint',
  };

  /* -----------------------------------------------------------------------------------------------*/

  interface FilterSelectProps extends React.ComponentProps<typeof MultiSelect.Root> {
      triggerLabel: string;
      content: React.ReactNode;
  }

  const FilterSelect = ({ content, triggerLabel, ...props }: FilterSelectProps) => {
      return (
          <MultiSelect.Root {...props}>
              <MultiSelect.TriggerPrimitive
                  render={<Button variant="fill" color="secondary" />}
                  style={{ width: 'unset' }}
              >
                  {triggerLabel}
                  <MultiSelect.TriggerIconPrimitive />
              </MultiSelect.TriggerPrimitive>
              <MultiSelect.PortalPrimitive>
                  <MultiSelect.PositionerPrimitive align="end">
                      <MultiSelect.PopupPrimitive>{content}</MultiSelect.PopupPrimitive>
                  </MultiSelect.PositionerPrimitive>
              </MultiSelect.PortalPrimitive>
          </MultiSelect.Root>
      );
  };

  ```
</Demo>

### Pagination

<Demo name="components/patterns/table/demos/pagination" showResponsiveToggle>
  ```tsx
  import { useMemo, useState } from 'react';

  import type { ColumnFiltersState, Row } from '@tanstack/react-table';
  import {
      type ColumnDef,
      flexRender,
      getCoreRowModel,
      getFilteredRowModel,
      getPaginationRowModel,
      useReactTable,
  } from '@tanstack/react-table';
  import {
      Badge,
      Box,
      Button,
      Card,
      HStack,
      MultiSelect,
      Pagination,
      Select,
      Table,
      Text,
      TextInput,
  } from '@vapor-ui/core';
  import { PlusOutlineIcon, SearchOutlineIcon } from '@vapor-ui/icons';

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const customFilterFn = (row: Row<Data>, columnId: string, filterValue: any) => {
      if (!filterValue || filterValue.length === 0) return true;

      const cellValue = row.getValue(columnId) as string;
      return filterValue.includes(cellValue);
  };

  export default function WithPagination() {
      const columns = useMemo<ColumnDef<Data>[]>(
          () => [
              {
                  header: () => <Box $css={{ textAlign: 'center' }}>ID</Box>,
                  accessorKey: 'id',
                  size: 0, // prevent cumulative layout shift
                  cell: ({ row }) => <Box $css={{ textAlign: 'center' }}>{row.index + 1}</Box>,
              },

              {
                  header: 'Name',
                  accessorKey: 'name',
                  size: 0, // prevent cumulative layout shift
                  cell: ({ row }) => <div style={{ textWrap: 'nowrap' }}>{row.getValue('name')}</div>,
              },

              {
                  header: 'Status',
                  accessorKey: 'status',
                  cell: ({ row }) => {
                      const status = row.getValue<string>('status');

                      return (
                          <Badge color={activeness[status]} shape="pill">
                              {status.toUpperCase()}
                          </Badge>
                      );
                  },
                  filterFn: customFilterFn,
              },

              {
                  header: 'Role',
                  accessorKey: 'role',
                  filterFn: customFilterFn,
              },

              {
                  header: 'Last Active',
                  accessorKey: 'last-active',
              },
          ],
          [],
      );

      const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);

      const table = useReactTable({
          data: datas,
          columns,
          state: { columnFilters },
          enableRowSelection: true,

          getCoreRowModel: getCoreRowModel(),
          getFilteredRowModel: getFilteredRowModel(),
          getPaginationRowModel: getPaginationRowModel(),
          onColumnFiltersChange: setColumnFilters,
      });

      return (
          <Card.Root $css={{ width: '100%' }}>
              <Card.Header>
                  <HStack $css={{ justifyContent: 'space-between', alignItems: 'center' }}>
                      <Text typography="heading6" foreground="normal-200" style={{ flexShrink: 0 }}>
                          출석부
                      </Text>

                      <HStack $css={{ alignItems: 'center', gap: '$100' }}>
                          <HStack
                              $css={{
                                  alignItems: 'center',
                                  gap: '10px',
                                  paddingInline: '$150',
                                  border: '1px solid var(--vapor-color-border-normal)',
                                  borderRadius: '$300',
                              }}
                          >
                              <SearchOutlineIcon />
                              <TextInput
                                  placeholder="이름으로 검색"
                                  $css={{ border: 'none', paddingInline: '$000' }}
                                  onValueChange={(value) =>
                                      table.getColumn('name')?.setFilterValue(value)
                                  }
                              />
                          </HStack>

                          <FilterSelect
                              triggerLabel="Status"
                              onValueChange={(value) => {
                                  table.getColumn('status')?.setFilterValue(value);
                              }}
                              content={
                                  <>
                                      <MultiSelect.Item value="active">Active</MultiSelect.Item>
                                      <MultiSelect.Item value="inactive">Inactive</MultiSelect.Item>
                                  </>
                              }
                          />

                          <FilterSelect
                              triggerLabel="Role"
                              onValueChange={(value) =>
                                  table.getColumn('role')?.setFilterValue(value)
                              }
                              content={
                                  <>
                                      <MultiSelect.Item value="designer">Designer</MultiSelect.Item>
                                      <MultiSelect.Item value="developer">Developer</MultiSelect.Item>
                                  </>
                              }
                          />

                          <FilterSelect
                              triggerLabel="Columns"
                              value={table
                                  .getAllColumns()
                                  .filter((col) => col.getIsVisible())
                                  .map((col) => col.id)}
                              content={table
                                  .getAllColumns()
                                  .filter((column) => column.getCanHide())
                                  .map((column) => (
                                      <MultiSelect.Item
                                          key={column.id}
                                          value={column.id}
                                          onClick={() => column.toggleVisibility()}
                                      >
                                          {column.id}
                                      </MultiSelect.Item>
                                  ))}
                          />

                          <Button>
                              <PlusOutlineIcon size="16px" /> 추가
                          </Button>
                      </HStack>
                  </HStack>
              </Card.Header>
              <Card.Body $css={{ overflow: 'auto', padding: '$000' }}>
                  <Table.Root $css={{ width: '100%' }}>
                      <Table.ColumnGroup>
                          <Table.Column width="10%" />
                      </Table.ColumnGroup>

                      <Table.Header>
                          {table.getHeaderGroups().map((headerGroup) => (
                              <Table.Row
                                  key={headerGroup.id}
                                  $css={{ backgroundColor: '$basic-gray-050' }}
                              >
                                  {headerGroup.headers.map((header) => (
                                      <Table.Heading key={header.id}>
                                          {flexRender(
                                              header.column.columnDef.header,
                                              header.getContext(),
                                          )}
                                      </Table.Heading>
                                  ))}
                              </Table.Row>
                          ))}
                      </Table.Header>

                      <Table.Body>
                          {table.getRowModel().rows.length ? (
                              table.getRowModel().rows.map((row) => {
                                  return (
                                      <Table.Row key={row.id}>
                                          {row.getVisibleCells().map((cell) => (
                                              <Table.Cell key={cell.id}>
                                                  {flexRender(
                                                      cell.column.columnDef.cell,
                                                      cell.getContext(),
                                                  )}
                                              </Table.Cell>
                                          ))}
                                      </Table.Row>
                                  );
                              })
                          ) : (
                              <Table.Row>
                                  <Table.Cell
                                      colSpan={columns.length}
                                      $css={{ textAlign: 'center', height: '410px' }}
                                  >
                                      검색 결과가 없습니다.
                                  </Table.Cell>
                              </Table.Row>
                          )}
                      </Table.Body>
                  </Table.Root>
                  <Card.Footer
                      $css={{ position: 'relative', display: 'flex', justifyContent: 'center' }}
                  >
                      <Pagination.Root
                          totalPages={table.getPageCount()}
                          page={table.getState().pagination.pageIndex + 1}
                          onPageChange={(page) => table.setPageIndex(page - 1)}
                      >
                          <Pagination.Previous />
                          <Pagination.Items />
                          <Pagination.Next />
                      </Pagination.Root>

                      <Select.Root
                          value={table.getState().pagination.pageSize}
                          onValueChange={(value) => table.setPageSize(Number(value))}
                      >
                          <Select.TriggerPrimitive
                              $css={{ position: 'absolute' }}
                              style={{ right: 24, top: '50%', transform: 'translateY(-50%)' }}
                          >
                              <Select.ValuePrimitive>
                                  {(value) => `${value}개씩 보기`}
                              </Select.ValuePrimitive>
                              <Select.TriggerIconPrimitive />
                          </Select.TriggerPrimitive>

                          <Select.Popup>
                              {[5, 10, 20, 30, 40, 50].map((pageSize) => (
                                  <Select.Item key={pageSize} value={pageSize}>
                                      {pageSize}
                                  </Select.Item>
                              ))}
                          </Select.Popup>
                      </Select.Root>
                  </Card.Footer>
              </Card.Body>
          </Card.Root>
      );
  }

  type Data = {
      name: string;
      status: 'active' | 'inactive';
      role: string;
      'last-active': string;
  };

  const datas: Data[] = [
      { name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
      { name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
      { name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
      { name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
      { name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
      { name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
      { name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
      { name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
      { name: 'Olivia Park', status: 'active', role: 'designer', 'last-active': '2 hours ago' },
      { name: 'Ethan Kim', status: 'active', role: 'developer', 'last-active': '3 days ago' },
      { name: 'Mia Choi', status: 'inactive', role: 'developer', 'last-active': '10 minutes ago' },
      { name: 'Noah Lee', status: 'active', role: 'designer', 'last-active': '1 day ago' },
      { name: 'Ava Jung', status: 'active', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Liam Han', status: 'inactive', role: 'developer', 'last-active': '5 days ago' },
      { name: 'Emma Seo', status: 'active', role: 'designer', 'last-active': '7 days ago' },
      { name: 'Mason Yoo', status: 'active', role: 'designer', 'last-active': '30 minutes ago' },
      { name: 'Sophia Lim', status: 'inactive', role: 'designer', 'last-active': '4 hours ago' },
      { name: 'Lucas Park', status: 'active', role: 'developer', 'last-active': '1 hour ago' },
  ];

  const activeness: Record<string, Badge.Props['color']> = {
      active: 'success',
      inactive: 'hint',
  };

  /* -----------------------------------------------------------------------------------------------*/

  interface FilterSelectProps extends React.ComponentProps<typeof MultiSelect.Root> {
      triggerLabel: string;
      content: React.ReactNode;
  }

  const FilterSelect = ({ content, triggerLabel, ...props }: FilterSelectProps) => {
      return (
          <MultiSelect.Root {...props}>
              <MultiSelect.TriggerPrimitive
                  render={<Button variant="fill" color="secondary" />}
                  style={{ width: 'unset' }}
              >
                  {triggerLabel}
                  <MultiSelect.TriggerIconPrimitive />
              </MultiSelect.TriggerPrimitive>
              <MultiSelect.PortalPrimitive>
                  <MultiSelect.PositionerPrimitive align="end">
                      <MultiSelect.PopupPrimitive>{content}</MultiSelect.PopupPrimitive>
                  </MultiSelect.PositionerPrimitive>
              </MultiSelect.PortalPrimitive>
          </MultiSelect.Root>
      );
  };

  ```
</Demo>


# 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

레이아웃과 스타일링을 위한 기본 컨테이너 컴포넌트입니다. 디자인 토큰을 활용한 간격, 색상, 크기 등의 속성을 제공합니다.

<Demo name="components/(layouts)/box/demos/default-box">
  ```tsx
  import { Box, Text } from '@vapor-ui/core';

  export default function DefaultBox() {
      return (
          <Box
              $css={{
                  padding: '$400',
                  backgroundColor: '$basic-gray-100',
                  borderRadius: '$300',
              }}
          >
              <Text>Basic Box with padding, background, and border radius</Text>
          </Box>
      );
  }

  ```
</Demo>

## Property

***

### Display Types

Box 컴포넌트는 다양한 디스플레이 타입을 지원하여 레이아웃을 유연하게 구성할 수 있습니다.

<Demo name="components/(layouts)/box/demos/box-display">
  ```tsx
  import { Box, Text, VStack } from '@vapor-ui/core';

  export default function BoxDisplay() {
      return (
          <VStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      block
                  </Text>
                  <Box
                      $css={{
                          display: 'block',
                          padding: '$300',
                          backgroundColor: '$basic-blue-200',
                          borderRadius: '$200',
                      }}
                  >
                      Block element takes full width
                  </Box>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      inline
                  </Text>
                  <Box>
                      <Box
                          $css={{
                              display: 'inline',
                              padding: '$200',
                              backgroundColor: '$basic-green-200',
                              borderRadius: '$200',
                          }}
                      >
                          Inline
                      </Box>
                      <Text render={<span />}> flows with text </Text>
                      <Box
                          $css={{
                              display: 'inline',
                              padding: '$200',
                              backgroundColor: '$basic-green-200',
                              borderRadius: '$200',
                          }}
                      >
                          like this
                      </Box>
                  </Box>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      flex
                  </Text>
                  <Box
                      $css={{
                          display: 'flex',
                          gap: '$200',
                          padding: '$300',
                          backgroundColor: '$basic-grape-200',
                          borderRadius: '$200',
                      }}
                  >
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-grape-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          Item 1
                      </Box>
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-grape-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          Item 2
                      </Box>
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-grape-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          Item 3
                      </Box>
                  </Box>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      grid
                  </Text>
                  <Box
                      $css={{
                          display: 'grid',
                          padding: '$300',
                          backgroundColor: '$basic-orange-200',
                          borderRadius: '$200',
                          gap: '$200',
                      }}
                      style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}
                  >
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-orange-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          A
                      </Box>
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-orange-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          B
                      </Box>
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-orange-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          C
                      </Box>
                  </Box>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### Background Color

Box 컴포넌트는 시맨틱 색상과 팔레트 색상을 모두 지원합니다.

<Demo name="components/(layouts)/box/demos/box-background">
  ```tsx
  import { Box, HStack } from '@vapor-ui/core';

  export default function BoxBackground() {
      return (
          <HStack $css={{ gap: '$200' }} className="flex-wrap">
              <Box
                  $css={{
                      padding: '$400',
                      backgroundColor: '$bg-primary-200',
                      color: '$fg-primary-100',
                  }}
              >
                  Primary
              </Box>
              <Box
                  $css={{
                      padding: '$400',
                      backgroundColor: '$bg-secondary-200',
                      color: '$fg-contrast-100',
                  }}
              >
                  Secondary
              </Box>
              <Box
                  $css={{
                      padding: '$400',
                      backgroundColor: '$bg-success-200',
                      color: '$fg-contrast-100',
                  }}
              >
                  Success
              </Box>
              <Box
                  $css={{
                      padding: '$400',
                      backgroundColor: '$bg-warning-200',
                      color: '$fg-contrast-100',
                  }}
              >
                  Warning
              </Box>
              <Box
                  $css={{
                      padding: '$400',
                      backgroundColor: '$bg-danger-200',
                      color: '$fg-contrast-100',
                  }}
              >
                  Danger
              </Box>
              <Box
                  $css={{
                      padding: '$400',
                      backgroundColor: '$basic-gray-200',
                      color: '$fg-primary-100',
                  }}
              >
                  Gray
              </Box>
              <Box
                  $css={{
                      padding: '$400',
                      backgroundColor: '$basic-blue-500',
                      color: '$fg-contrast-100',
                  }}
              >
                  Blue
              </Box>
              <Box
                  $css={{
                      padding: '$400',
                      backgroundColor: '$basic-green-300',
                      color: '$fg-primary-100',
                  }}
              >
                  Green
              </Box>
          </HStack>
      );
  }

  ```
</Demo>

### Spacing

패딩과 마진 속성을 사용하여 요소의 내부 및 외부 여백을 조절할 수 있습니다.

<Demo name="components/(layouts)/box/demos/box-spacing">
  ```tsx
  import { Box, HStack, Text, VStack } from '@vapor-ui/core';

  export default function BoxSpacing() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-28" typography="body3" foreground="hint-100">
                      padding
                  </Text>
                  <Box
                      $css={{
                          padding: '$400',
                          backgroundColor: '$basic-blue-200',
                          borderRadius: '$200',
                      }}
                  >
                      Content with padding
                  </Box>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-28" typography="body3" foreground="hint-100">
                      margin
                  </Text>
                  <Box
                      $css={{
                          margin: '$400',
                          padding: '$300',
                          backgroundColor: '$basic-green-200',
                          borderRadius: '$200',
                      }}
                  >
                      Content with margin
                  </Box>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-28" typography="body3" foreground="hint-100">
                      paddingX/Y
                  </Text>
                  <Box
                      $css={{
                          paddingInline: '$500',
                          paddingBlock: '$200',
                          backgroundColor: '$basic-grape-100',
                          borderRadius: '$200',
                      }}
                  >
                      Horizontal padding
                  </Box>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-28" typography="body3" foreground="hint-100">
                      marginX/Y
                  </Text>
                  <Box
                      $css={{
                          marginInline: '$300',
                          marginBlock: '$100',
                          padding: '$300',
                          backgroundColor: '$basic-grape-200',
                          borderRadius: '$200',
                      }}
                  >
                      Asymmetric margins
                  </Box>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Layout

플렉스박스 속성을 활용하여 다양한 레이아웃을 구성할 수 있습니다.

<Demo name="components/(layouts)/box/demos/box-layout">
  ```tsx
  import { Box, HStack, Text, VStack } from '@vapor-ui/core';

  export default function BoxLayout() {
      return (
          <VStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      flexDirection
                  </Text>
                  <VStack $css={{ gap: '$200' }}>
                      <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                          <Text className="w-24" typography="body3" foreground="hint-100">
                              row
                          </Text>
                          <Box
                              $css={{
                                  display: 'flex',
                                  flexDirection: 'row',
                                  gap: '$200',
                                  padding: '$300',
                                  backgroundColor: '$basic-gray-100',
                                  borderRadius: '$200',
                              }}
                          >
                              <Box
                                  $css={{
                                      padding: '$200',
                                      backgroundColor: '$basic-blue-300',
                                      borderRadius: '$100',
                                  }}
                              >
                                  1
                              </Box>
                              <Box
                                  $css={{
                                      padding: '$200',
                                      backgroundColor: '$basic-blue-300',
                                      borderRadius: '$100',
                                  }}
                              >
                                  2
                              </Box>
                              <Box
                                  $css={{
                                      padding: '$200',
                                      backgroundColor: '$basic-blue-300',
                                      borderRadius: '$100',
                                  }}
                              >
                                  3
                              </Box>
                          </Box>
                      </HStack>
                      <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                          <Text className="w-24" typography="body3" foreground="hint-100">
                              column
                          </Text>
                          <Box
                              $css={{
                                  display: 'flex',
                                  flexDirection: 'column',
                                  gap: '$200',
                                  padding: '$300',
                                  backgroundColor: '$basic-gray-100',
                                  borderRadius: '$200',
                              }}
                          >
                              <Box
                                  $css={{
                                      padding: '$200',
                                      backgroundColor: '$basic-green-300',
                                      borderRadius: '$100',
                                  }}
                              >
                                  A
                              </Box>
                              <Box
                                  $css={{
                                      padding: '$200',
                                      backgroundColor: '$basic-green-300',
                                      borderRadius: '$100',
                                  }}
                              >
                                  B
                              </Box>
                              <Box
                                  $css={{
                                      padding: '$200',
                                      backgroundColor: '$basic-green-300',
                                      borderRadius: '$100',
                                  }}
                              >
                                  C
                              </Box>
                          </Box>
                      </HStack>
                  </VStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      justifyContent
                  </Text>
                  <VStack $css={{ gap: '$200' }}>
                      <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                          <Text className="w-24" typography="body3" foreground="hint-100">
                              flex-start
                          </Text>
                          <Box
                              $css={{
                                  display: 'flex',
                                  justifyContent: 'flex-start',
                                  gap: '$200',
                                  padding: '$300',
                                  backgroundColor: '$basic-gray-100',
                                  borderRadius: '$200',
                                  width: '$2400',
                              }}
                          >
                              <Box
                                  $css={{
                                      padding: '$200',
                                      backgroundColor: '$basic-grape-300',
                                      borderRadius: '$100',
                                  }}
                              >
                                  Start
                              </Box>
                              <Box
                                  $css={{
                                      padding: '$200',
                                      backgroundColor: '$basic-grape-300',
                                      borderRadius: '$100',
                                  }}
                              >
                                  Items
                              </Box>
                          </Box>
                      </HStack>
                      <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                          <Text className="w-24" typography="body3" foreground="hint-100">
                              center
                          </Text>
                          <Box
                              $css={{
                                  display: 'flex',
                                  justifyContent: 'center',
                                  gap: '$200',
                                  padding: '$300',
                                  backgroundColor: '$basic-gray-100',
                                  borderRadius: '$200',
                                  width: '$2400',
                              }}
                          >
                              <Box
                                  $css={{
                                      padding: '$200',
                                      backgroundColor: '$basic-grape-300',
                                      borderRadius: '$100',
                                  }}
                              >
                                  Center
                              </Box>
                              <Box
                                  $css={{
                                      padding: '$200',
                                      backgroundColor: '$basic-grape-300',
                                      borderRadius: '$100',
                                  }}
                              >
                                  Items
                              </Box>
                          </Box>
                      </HStack>
                      <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                          <Text className="w-24" typography="body3" foreground="hint-100">
                              space-between
                          </Text>
                          <Box
                              $css={{
                                  display: 'flex',
                                  justifyContent: 'space-between',
                                  gap: '$200',
                                  padding: '$300',
                                  backgroundColor: '$basic-gray-100',
                                  borderRadius: '$200',
                                  width: '$2400',
                              }}
                          >
                              <Box
                                  $css={{
                                      padding: '$200',
                                      backgroundColor: '$basic-grape-300',
                                      borderRadius: '$100',
                                  }}
                              >
                                  Space
                              </Box>
                              <Box
                                  $css={{
                                      padding: '$200',
                                      backgroundColor: '$basic-grape-300',
                                      borderRadius: '$100',
                                  }}
                              >
                                  Between
                              </Box>
                          </Box>
                      </HStack>
                  </VStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      alignItems
                  </Text>
                  <Box
                      $css={{
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'space-around',
                          gap: '$200',
                          padding: '$300',
                          backgroundColor: '$basic-gray-100',
                          borderRadius: '$200',
                          height: '$800',
                      }}
                  >
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-orange-300',
                              borderRadius: '$100',
                              height: '$500',
                          }}
                      >
                          Small
                      </Box>
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-orange-300',
                              borderRadius: '$100',
                              height: '$600',
                          }}
                      >
                          Medium
                      </Box>
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-orange-300',
                              borderRadius: '$100',
                              height: '$700',
                          }}
                      >
                          Aligned
                      </Box>
                  </Box>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

### Dimensions

너비와 높이를 설정하거나 최소/최대 크기 제약을 적용할 수 있습니다.

<Demo name="components/(layouts)/box/demos/box-dimensions">
  ```tsx
  import { Box } from '@vapor-ui/core';

  export default function BoxDimensions() {
      return (
          <Box
              $css={{
                  width: '$800',
                  height: '$800',
                  backgroundColor: '$basic-blue-300',
                  borderRadius: '$200',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: '$fg-contrast-100',
              }}
          >
              800x800
          </Box>
      );
  }

  ```
</Demo>

### Visual Styles

테두리 둥글기, 투명도, 텍스트 정렬 등의 시각적 속성을 제어할 수 있습니다.

<Demo name="components/(layouts)/box/demos/box-visual">
  ```tsx
  import { Box, HStack, Text, VStack } from '@vapor-ui/core';

  export default function BoxVisual() {
      return (
          <VStack $css={{ gap: '$300' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      borderRadius
                  </Text>
                  <HStack $css={{ gap: '$200', alignItems: 'center' }}>
                      <Box
                          $css={{
                              padding: '$400',
                              backgroundColor: '$basic-blue-200',
                              borderRadius: '$100',
                          }}
                      >
                          Small
                      </Box>
                      <Box
                          $css={{
                              padding: '$400',
                              backgroundColor: '$basic-blue-300',
                              borderRadius: '$300',
                          }}
                      >
                          Medium
                      </Box>
                      <Box
                          $css={{
                              padding: '$400',
                              backgroundColor: '$basic-blue-400',
                              borderRadius: '$600',
                          }}
                      >
                          Large
                      </Box>
                      <Box
                          $css={{
                              padding: '$400',
                              backgroundColor: '$basic-blue-500',
                              borderRadius: '$900',
                              color: '$fg-contrast-100',
                          }}
                      >
                          Extra Large
                      </Box>
                  </HStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      opacity
                  </Text>
                  <HStack $css={{ gap: '$200', alignItems: 'center' }}>
                      <Box
                          $css={{
                              padding: '$400',
                              backgroundColor: '$basic-green-500',
                              opacity: '0.3',
                              borderRadius: '$200',
                          }}
                      >
                          30%
                      </Box>
                      <Box
                          $css={{
                              padding: '$400',
                              backgroundColor: '$basic-green-500',
                              opacity: '0.6',
                              borderRadius: '$200',
                          }}
                      >
                          60%
                      </Box>
                      <Box
                          $css={{
                              padding: '$400',
                              backgroundColor: '$basic-green-500',
                              opacity: '0.9',
                              borderRadius: '$200',
                          }}
                      >
                          90%
                      </Box>
                      <Box
                          $css={{
                              padding: '$400',
                              backgroundColor: '$basic-green-500',
                              borderRadius: '$200',
                          }}
                      >
                          100%
                      </Box>
                  </HStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      textAlign
                  </Text>
                  <VStack $css={{ gap: '$100' }}>
                      <Box
                          $css={{
                              padding: '$400',
                              backgroundColor: '$basic-grape-100',
                              borderRadius: '$200',
                              textAlign: 'left',
                          }}
                      >
                          Left aligned
                      </Box>
                      <Box
                          $css={{
                              padding: '$400',
                              backgroundColor: '$basic-grape-200',
                              borderRadius: '$200',
                              textAlign: 'center',
                          }}
                      >
                          Center aligned
                      </Box>
                      <Box
                          $css={{
                              padding: '$400',
                              backgroundColor: '$basic-grape-300',
                              borderRadius: '$200',
                              textAlign: 'right',
                          }}
                      >
                          Right aligned
                      </Box>
                  </VStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      overflow
                  </Text>
                  <VStack $css={{ gap: '$200' }}>
                      <Box
                          $css={{
                              height: '$800',
                              padding: '$300',
                              backgroundColor: '$basic-orange-200',
                              borderRadius: '$200',
                              overflow: 'hidden',
                          }}
                      >
                          This text will be clipped when it overflows the container bounds because
                          overflow is set to hidden.
                      </Box>
                      <Box
                          $css={{
                              height: '$300',
                              padding: '$300',
                              backgroundColor: '$basic-orange-300',
                              borderRadius: '$200',
                              overflow: 'scroll',
                          }}
                      >
                          This text will show scrollbars when it overflows the container bounds
                          because overflow is set to scroll.
                      </Box>
                  </VStack>
              </VStack>
          </VStack>
      );
  }

  ```
</Demo>

## Props Table

***

### Box

| Prop        | Type                              | Default | Description                                                                                                                                                                                               |
| ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `function`              | -       | CSS class applied to the element, or a function that<br />returns a class based on the component's state.                                                                                                 |
| `style`     | `React.CSSProperties`, `function` | -       | Style applied to the element, or a function that<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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 컴포넌트를 확장하여 플렉스 관련 기능을 제공합니다.

<Demo name="components/(layouts)/flex/demos/default-flex">
  ```tsx
  import { Box, Flex } from '@vapor-ui/core';

  export default function DefaultFlex() {
      return (
          <Flex
              $css={{
                  gap: '$200',
                  padding: '$300',
                  backgroundColor: '$basic-gray-100',
                  borderRadius: '$200',
              }}
          >
              <Box
                  $css={{
                      padding: '$200',
                      backgroundColor: '$basic-blue-400',
                      borderRadius: '$100',
                      color: '$fg-contrast-100',
                  }}
              >
                  Item 1
              </Box>
              <Box
                  $css={{
                      padding: '$200',
                      backgroundColor: '$basic-green-400',
                      borderRadius: '$100',
                      color: '$fg-contrast-100',
                  }}
              >
                  Item 2
              </Box>
              <Box
                  $css={{
                      padding: '$200',
                      backgroundColor: '$basic-orange-400',
                      borderRadius: '$100',
                      color: '$fg-contrast-100',
                  }}
              >
                  Item 3
              </Box>
          </Flex>
      );
  }

  ```
</Demo>

## Examples

***

### Direction

플렉스 컨테이너의 주축 방향을 설정하여 항목들의 배치 방향을 제어할 수 있습니다.

<Demo name="components/(layouts)/flex/demos/flex-direction">
  ```tsx
  import { Box, Flex, HStack, Text, VStack } from '@vapor-ui/core';

  export default function FlexDirection() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      row
                  </Text>
                  <Flex
                      $css={{
                          flexDirection: 'row',
                          gap: '$200',
                          padding: '$300',
                          backgroundColor: '$basic-gray-100',
                          borderRadius: '$200',
                      }}
                  >
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-blue-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          1
                      </Box>
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-green-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          2
                      </Box>
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-orange-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          3
                      </Box>
                  </Flex>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'start' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      column
                  </Text>
                  <Flex
                      $css={{
                          flexDirection: 'column',
                          gap: '$200',
                          padding: '$300',
                          backgroundColor: '$basic-gray-100',
                          borderRadius: '$200',
                      }}
                  >
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-blue-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          1
                      </Box>
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-green-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          2
                      </Box>
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-orange-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          3
                      </Box>
                  </Flex>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-24" typography="body3" foreground="hint-100">
                      row-reverse
                  </Text>
                  <Flex
                      $css={{
                          flexDirection: 'row-reverse',
                          gap: '$200',
                          padding: '$300',
                          backgroundColor: '$basic-gray-100',
                          borderRadius: '$200',
                      }}
                  >
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-blue-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          1
                      </Box>
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-green-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          2
                      </Box>
                      <Box
                          $css={{
                              padding: '$200',
                              backgroundColor: '$basic-orange-400',
                              borderRadius: '$100',
                              color: '$fg-contrast-100',
                          }}
                      >
                          3
                      </Box>
                  </Flex>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Props Table

***

### Flex

| Prop        | Type                              | Default | Description                                                                                                                                                                                               |
| ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `function`              | -       | CSS class applied to the element, or a function that<br />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<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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

수평으로 아이템들을 배치하는 레이아웃 컴포넌트입니다

<Demo name="components/(layouts)/h-stack/demos/default-h-stack">
  ```tsx
  import { Box, HStack } from '@vapor-ui/core';

  export default function DefaultHStack() {
      return (
          <HStack $css={{ gap: '$200' }}>
              <Box
                  $css={{
                      backgroundColor: '$basic-blue-100',
                      padding: '$400',
                      borderRadius: '$200',
                  }}
              >
                  Item 1
              </Box>
              <Box
                  $css={{
                      backgroundColor: '$basic-blue-100',
                      padding: '$400',
                      borderRadius: '$200',
                  }}
              >
                  Item 2
              </Box>
              <Box
                  $css={{
                      backgroundColor: '$basic-blue-100',
                      padding: '$400',
                      borderRadius: '$200',
                  }}
              >
                  Item 3
              </Box>
          </HStack>
      );
  }

  ```
</Demo>

## Property

***

### Reverse

HStack의 아이템 순서를 역순으로 배치할 수 있습니다.

<Demo name="components/(layouts)/h-stack/demos/h-stack-reverse">
  ```tsx
  import { Box, HStack, Text, VStack } from '@vapor-ui/core';

  export default function HStackReverse() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      normal
                  </Text>
                  <HStack $css={{ gap: '$150' }}>
                      <Box
                          $css={{
                              backgroundColor: '$basic-green-100',
                              padding: '$300',
                              borderRadius: '$200',
                          }}
                      >
                          First
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-green-200',
                              padding: '$300',
                              borderRadius: '$200',
                          }}
                      >
                          Second
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-green-300',
                              padding: '$300',
                              borderRadius: '$200',
                          }}
                      >
                          Third
                      </Box>
                  </HStack>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      reverse
                  </Text>
                  <HStack reverse $css={{ gap: '$150' }}>
                      <Box
                          $css={{
                              backgroundColor: '$basic-purple-100',
                              padding: '$300',
                              borderRadius: '$200',
                          }}
                      >
                          First
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-purple-200',
                              padding: '$300',
                              borderRadius: '$200',
                          }}
                      >
                          Second
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-purple-300',
                              padding: '$300',
                              borderRadius: '$200',
                          }}
                      >
                          Third
                      </Box>
                  </HStack>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

### Spacing

HStack 아이템 간의 간격을 조정할 수 있습니다.

<Demo name="components/(layouts)/h-stack/demos/h-stack-spacing">
  ```tsx
  import { Box, HStack, Text, VStack } from '@vapor-ui/core';

  export default function HStackSpacing() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      $100
                  </Text>
                  <HStack $css={{ gap: '$100' }}>
                      <Box
                          $css={{
                              backgroundColor: '$basic-red-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          A
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-red-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          B
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-red-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          C
                      </Box>
                  </HStack>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      $400
                  </Text>
                  <HStack $css={{ gap: '$400' }}>
                      <Box
                          $css={{
                              backgroundColor: '$basic-orange-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          A
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-orange-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          B
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-orange-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          C
                      </Box>
                  </HStack>
              </HStack>

              <HStack $css={{ gap: '$150', alignItems: 'center' }}>
                  <Text className="w-16" typography="body3" foreground="hint-100">
                      $800
                  </Text>
                  <HStack $css={{ gap: '$800' }}>
                      <Box
                          $css={{
                              backgroundColor: '$basic-teal-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          A
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-teal-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          B
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-teal-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          C
                      </Box>
                  </HStack>
              </HStack>
          </VStack>
      );
  }

  ```
</Demo>

## Props Table

***

### HStack

| Prop        | Type                              | Default | Description                                                                                                                                                                                               |
| ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `function`              | -       | CSS class applied to the element, or a function that<br />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<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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 기반의 레이아웃 컴포넌트입니다

<Demo name="components/(layouts)/grid/demos/default-grid">
  ```tsx
  import { Box, Grid } from '@vapor-ui/core';

  export default function DefaultGrid() {
      return (
          <Grid.Root templateColumns="repeat(3, 1fr)" $css={{ gap: '$200' }}>
              <Grid.Item>
                  <Box
                      $css={{
                          backgroundColor: '$basic-gray-100',
                          padding: '$400',
                          borderRadius: '$200',
                      }}
                  >
                      1
                  </Box>
              </Grid.Item>
              <Grid.Item>
                  <Box
                      $css={{
                          backgroundColor: '$basic-gray-100',
                          padding: '$400',
                          borderRadius: '$200',
                      }}
                  >
                      2
                  </Box>
              </Grid.Item>
              <Grid.Item>
                  <Box
                      $css={{
                          backgroundColor: '$basic-gray-100',
                          padding: '$400',
                          borderRadius: '$200',
                      }}
                  >
                      3
                  </Box>
              </Grid.Item>
              <Grid.Item>
                  <Box
                      $css={{
                          backgroundColor: '$basic-gray-100',
                          padding: '$400',
                          borderRadius: '$200',
                      }}
                  >
                      4
                  </Box>
              </Grid.Item>
              <Grid.Item>
                  <Box
                      $css={{
                          backgroundColor: '$basic-gray-100',
                          padding: '$400',
                          borderRadius: '$200',
                      }}
                  >
                      5
                  </Box>
              </Grid.Item>
              <Grid.Item>
                  <Box
                      $css={{
                          backgroundColor: '$basic-gray-100',
                          padding: '$400',
                          borderRadius: '$200',
                      }}
                  >
                      6
                  </Box>
              </Grid.Item>
          </Grid.Root>
      );
  }

  ```
</Demo>

## Property

***

### Template

Grid의 행과 열 템플릿을 설정하여 레이아웃 구조를 정의할 수 있습니다.

<Demo name="components/(layouts)/grid/demos/grid-template">
  ```tsx
  import { Box, Grid, HStack, Text, VStack } from '@vapor-ui/core';

  export default function GridTemplate() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'start' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      templateColumns
                  </Text>
                  <Grid.Root templateColumns="200px 1fr 100px" $css={{ gap: '$100' }}>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-blue-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              200px
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-blue-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              1fr
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-blue-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              100px
                          </Box>
                      </Grid.Item>
                  </Grid.Root>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      templateRows
                  </Text>
                  <Grid.Root
                      templateColumns="1fr"
                      templateRows="60px 1fr 40px"
                      $css={{ gap: '$100', height: '$1600' }}
                  >
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-green-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                                  height: '100%',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                              }}
                          >
                              60px
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-green-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                                  height: '100%',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                              }}
                          >
                              1fr
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-green-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                                  height: '100%',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                              }}
                          >
                              40px
                          </Box>
                      </Grid.Item>
                  </Grid.Root>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

### Flow

Grid 아이템들의 자동 배치 방향을 설정할 수 있습니다.

<Demo name="components/(layouts)/grid/demos/grid-flow">
  ```tsx
  import { Box, Grid, HStack, Text, VStack } from '@vapor-ui/core';

  export default function GridFlow() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'start' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      row
                  </Text>
                  <Grid.Root templateColumns="repeat(3, 1fr)" flow="row" $css={{ gap: '$100' }}>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-grape-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              1
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-grape-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              2
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-grape-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              3
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-grape-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              4
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-grape-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              5
                          </Box>
                      </Grid.Item>
                  </Grid.Root>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      column
                  </Text>
                  <Grid.Root
                      templateRows="repeat(3, 1fr)"
                      flow="column"
                      $css={{ gap: '$100', height: '$1600' }}
                  >
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-orange-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              1
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-orange-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              2
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-orange-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              3
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-orange-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              4
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-orange-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              5
                          </Box>
                      </Grid.Item>
                  </Grid.Root>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

### Inline

Grid를 인라인 요소로 표시할 수 있습니다.

<Demo name="components/(layouts)/grid/demos/grid-inline">
  ```tsx
  import { Box, Grid, HStack, Text, VStack } from '@vapor-ui/core';

  export default function GridInline() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'start' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      block (default)
                  </Text>
                  <Grid.Root templateColumns="repeat(2, 1fr)" $css={{ gap: '$100' }}>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-violet-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              1
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-violet-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              2
                          </Box>
                      </Grid.Item>
                  </Grid.Root>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      inline
                  </Text>
                  <Box>
                      <Grid.Root inline templateColumns="repeat(2, 1fr)" $css={{ gap: '$100' }}>
                          <Grid.Item>
                              <Box
                                  $css={{
                                      backgroundColor: '$basic-pink-100',
                                      padding: '$200',
                                      borderRadius: '$200',
                                      textAlign: 'center',
                                  }}
                              >
                                  1
                              </Box>
                          </Grid.Item>
                          <Grid.Item>
                              <Box
                                  $css={{
                                      backgroundColor: '$basic-pink-100',
                                      padding: '$200',
                                      borderRadius: '$200',
                                      textAlign: 'center',
                                  }}
                              >
                                  2
                              </Box>
                          </Grid.Item>
                      </Grid.Root>
                      <Text render={<span />}> inline grid</Text>
                  </Box>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

### Span

Grid 아이템이 차지할 행이나 열의 개수를 설정할 수 있습니다.

<Demo name="components/(layouts)/grid/demos/grid-span">
  ```tsx
  import { Box, Grid, HStack, Text, VStack } from '@vapor-ui/core';

  export default function GridSpan() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'start' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      colSpan
                  </Text>
                  <Grid.Root templateColumns="repeat(4, 1fr)" $css={{ gap: '$100' }}>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-red-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              1
                          </Box>
                      </Grid.Item>
                      <Grid.Item colSpan="2">
                          <Box
                              $css={{
                                  backgroundColor: '$basic-red-200',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              Span 2
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-red-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              4
                          </Box>
                      </Grid.Item>
                      <Grid.Item colSpan="3">
                          <Box
                              $css={{
                                  backgroundColor: '$basic-red-200',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              Span 3
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-red-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              8
                          </Box>
                      </Grid.Item>
                  </Grid.Root>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      rowSpan
                  </Text>
                  <Grid.Root templateColumns="repeat(3, 1fr)" $css={{ gap: '$100' }}>
                      <Grid.Item rowSpan="2">
                          <Box
                              $css={{
                                  backgroundColor: '$basic-cyan-200',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                                  height: '100%',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                              }}
                          >
                              Row Span 2
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-cyan-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              2
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-cyan-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              3
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-cyan-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              5
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-cyan-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              6
                          </Box>
                      </Grid.Item>
                  </Grid.Root>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

## Examples

***

### Layout Patterns

일반적인 레이아웃 패턴들을 Grid로 구현할 수 있습니다.

<Demo name="components/(layouts)/grid/demos/grid-layout">
  ```tsx
  import { Box, Grid, HStack, Text, VStack } from '@vapor-ui/core';

  export default function GridLayout() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'start' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      Dashboard Layout
                  </Text>
                  <Grid.Root
                      templateColumns="200px 1fr"
                      templateRows="60px 1fr 40px"
                      $css={{ gap: '$100', height: '$2400', width: '$4800' }}
                  >
                      <Grid.Item colSpan="2">
                          <Box
                              $css={{
                                  backgroundColor: '$basic-gray-200',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  height: '100%',
                              }}
                          >
                              Header
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-blue-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  height: '100%',
                              }}
                          >
                              Sidebar
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-green-100',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  height: '100%',
                              }}
                          >
                              Main Content
                          </Box>
                      </Grid.Item>
                      <Grid.Item colSpan="2">
                          <Box
                              $css={{
                                  backgroundColor: '$basic-gray-200',
                                  padding: '$200',
                                  borderRadius: '$200',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  height: '100%',
                              }}
                          >
                              Footer
                          </Box>
                      </Grid.Item>
                  </Grid.Root>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      Card Layout
                  </Text>
                  <Grid.Root templateColumns="repeat(2, 1fr)" $css={{ gap: '$100', width: '$2400' }}>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-yellow-100',
                                  padding: '$400',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              Card 1
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-yellow-100',
                                  padding: '$400',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              Card 2
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-yellow-100',
                                  padding: '$400',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              Card 3
                          </Box>
                      </Grid.Item>
                      <Grid.Item>
                          <Box
                              $css={{
                                  backgroundColor: '$basic-yellow-100',
                                  padding: '$400',
                                  borderRadius: '$200',
                                  textAlign: 'center',
                              }}
                          >
                              Card 4
                          </Box>
                      </Grid.Item>
                  </Grid.Root>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

## 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<br />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<br />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<br />with a different tag, or compose it with another component.<br /><br />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<br />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<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />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

수직으로 아이템들을 배치하는 레이아웃 컴포넌트입니다

<Demo name="components/(layouts)/v-stack/demos/default-v-stack">
  ```tsx
  import { Box, VStack } from '@vapor-ui/core';

  export default function DefaultVStack() {
      return (
          <VStack $css={{ gap: '$200' }}>
              <Box
                  $css={{
                      backgroundColor: '$basic-blue-100',
                      padding: '$400',
                      borderRadius: '$200',
                  }}
              >
                  Item 1
              </Box>
              <Box
                  $css={{
                      backgroundColor: '$basic-blue-100',
                      padding: '$400',
                      borderRadius: '$200',
                  }}
              >
                  Item 2
              </Box>
              <Box
                  $css={{
                      backgroundColor: '$basic-blue-100',
                      padding: '$400',
                      borderRadius: '$200',
                  }}
              >
                  Item 3
              </Box>
          </VStack>
      );
  }

  ```
</Demo>

## Property

***

### Reverse

VStack의 아이템 순서를 역순으로 배치할 수 있습니다.

<Demo name="components/(layouts)/v-stack/demos/v-stack-reverse">
  ```tsx
  import { Box, HStack, Text, VStack } from '@vapor-ui/core';

  export default function VStackReverse() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'start' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      normal
                  </Text>
                  <VStack $css={{ gap: '$150' }}>
                      <Box
                          $css={{
                              backgroundColor: '$basic-green-100',
                              padding: '$300',
                              borderRadius: '$200',
                          }}
                      >
                          First
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-green-200',
                              padding: '$300',
                              borderRadius: '$200',
                          }}
                      >
                          Second
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-green-300',
                              padding: '$300',
                              borderRadius: '$200',
                          }}
                      >
                          Third
                      </Box>
                  </VStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      reverse
                  </Text>
                  <VStack reverse $css={{ gap: '$150' }}>
                      <Box
                          $css={{
                              backgroundColor: '$basic-purple-100',
                              padding: '$300',
                              borderRadius: '$200',
                          }}
                      >
                          First
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-purple-200',
                              padding: '$300',
                              borderRadius: '$200',
                          }}
                      >
                          Second
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-purple-300',
                              padding: '$300',
                              borderRadius: '$200',
                          }}
                      >
                          Third
                      </Box>
                  </VStack>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

### Spacing

VStack 아이템 간의 간격을 조정할 수 있습니다.

<Demo name="components/(layouts)/v-stack/demos/v-stack-spacing">
  ```tsx
  import { Box, HStack, Text, VStack } from '@vapor-ui/core';

  export default function VStackSpacing() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'start' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      $100
                  </Text>
                  <VStack $css={{ gap: '$100' }}>
                      <Box
                          $css={{
                              backgroundColor: '$basic-red-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          A
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-red-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          B
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-red-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          C
                      </Box>
                  </VStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      $400
                  </Text>
                  <VStack $css={{ gap: '$400' }}>
                      <Box
                          $css={{
                              backgroundColor: '$basic-orange-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          A
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-orange-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          B
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-orange-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          C
                      </Box>
                  </VStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      $800
                  </Text>
                  <VStack $css={{ gap: '$800' }}>
                      <Box
                          $css={{
                              backgroundColor: '$basic-teal-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          A
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-teal-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          B
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-teal-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          C
                      </Box>
                  </VStack>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

### Alignment

VStack 아이템들의 수평 정렬을 조정할 수 있습니다.

<Demo name="components/(layouts)/v-stack/demos/v-stack-alignment">
  ```tsx
  import { Box, HStack, Text, VStack } from '@vapor-ui/core';

  export default function VStackAlignment() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'start' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      start
                  </Text>
                  <VStack
                      $css={{
                          gap: '$100',
                          alignItems: 'start',
                          width: '$1600',
                          backgroundColor: '$basic-gray-100',
                          padding: '$200',
                          borderRadius: '$200',
                      }}
                  >
                      <Box
                          $css={{
                              backgroundColor: '$basic-blue-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          Short
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-blue-200',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          Medium Width
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-blue-300',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          Tiny
                      </Box>
                  </VStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      center
                  </Text>
                  <VStack
                      $css={{
                          gap: '$100',
                          alignItems: 'center',
                          width: '$1600',
                          backgroundColor: '$basic-gray-100',
                          padding: '$200',
                          borderRadius: '$200',
                      }}
                  >
                      <Box
                          $css={{
                              backgroundColor: '$basic-green-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          Short
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-green-200',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          Medium Width
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-green-300',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          Tiny
                      </Box>
                  </VStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      end
                  </Text>
                  <VStack
                      $css={{
                          gap: '$100',
                          alignItems: 'end',
                          width: '$1600',
                          backgroundColor: '$basic-gray-100',
                          padding: '$200',
                          borderRadius: '$200',
                      }}
                  >
                      <Box
                          $css={{
                              backgroundColor: '$basic-purple-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          Short
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-purple-200',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          Medium Width
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-purple-300',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          Tiny
                      </Box>
                  </VStack>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

### Justify Content

VStack 아이템들의 수직 분산을 조정할 수 있습니다.

<Demo name="components/(layouts)/v-stack/demos/v-stack-justify">
  ```tsx
  import { Box, HStack, Text, VStack } from '@vapor-ui/core';

  export default function VStackJustify() {
      return (
          <HStack $css={{ gap: '$400', alignItems: 'start' }}>
              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      flex-start
                  </Text>
                  <VStack
                      $css={{
                          gap: '$100',
                          justifyContent: 'flex-start',
                          height: '$1600',
                          backgroundColor: '$basic-gray-100',
                          padding: '$200',
                          borderRadius: '$200',
                      }}
                  >
                      <Box
                          $css={{
                              backgroundColor: '$basic-red-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          A
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-red-200',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          B
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-red-300',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          C
                      </Box>
                  </VStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      center
                  </Text>
                  <VStack
                      $css={{
                          gap: '$100',
                          justifyContent: 'center',
                          height: '$1600',
                          backgroundColor: '$basic-gray-100',
                          padding: '$200',
                          borderRadius: '$200',
                      }}
                  >
                      <Box
                          $css={{
                              backgroundColor: '$basic-yellow-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          A
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-yellow-200',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          B
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$basic-yellow-300',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          C
                      </Box>
                  </VStack>
              </VStack>

              <VStack $css={{ gap: '$150' }}>
                  <Text typography="body3" foreground="hint-100">
                      space-between
                  </Text>
                  <VStack
                      $css={{
                          gap: '$100',
                          justifyContent: 'space-between',
                          height: '$1600',
                          backgroundColor: '$basic-gray-100',
                          padding: '$200',
                          borderRadius: '$200',
                      }}
                  >
                      <Box
                          $css={{
                              backgroundColor: '$indigo-100',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          A
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$indigo-200',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          B
                      </Box>
                      <Box
                          $css={{
                              backgroundColor: '$indigo-300',
                              padding: '$200',
                              borderRadius: '$200',
                          }}
                      >
                          C
                      </Box>
                  </VStack>
              </VStack>
          </HStack>
      );
  }

  ```
</Demo>

## Props Table

***

### VStack

| Prop        | Type                              | Default | Description                                                                                                                                                                                               |
| ----------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string`, `function`              | -       | CSS class applied to the element, or a function that<br />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<br />returns a style object based on the component's state.                                                                                              |
| `render`    | `ReactElement`, `function`        | -       | Allows you to replace the component's HTML element<br />with a different tag, or compose it with another component.<br /><br />Accepts a `ReactElement` or a function that returns the element to render. |


# Color
URL: /docs/getting-started/color
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/(tokens)/color.mdx

컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다.

| token                                   | value                         |
| --------------------------------------- | ----------------------------- |
| --vapor-color-canvas                    | #ffffff                       |
| --vapor-color-white                     | #FFFFFF                       |
| --vapor-color-black                     | #000000                       |
| --vapor-color-gray-025                  | #fafafa                       |
| --vapor-color-gray-050                  | #f4f4f4                       |
| --vapor-color-gray-100                  | #e1e1e1                       |
| --vapor-color-gray-200                  | #c6c6c6                       |
| --vapor-color-gray-300                  | #a3a3a3                       |
| --vapor-color-gray-400                  | #959595                       |
| --vapor-color-gray-500                  | #767676                       |
| --vapor-color-gray-600                  | #5d5d5d                       |
| --vapor-color-gray-700                  | #4c4c4c                       |
| --vapor-color-gray-800                  | #393939                       |
| --vapor-color-gray-900                  | #262626                       |
| --vapor-color-red-050                   | #fff5f4                       |
| --vapor-color-red-100                   | #ffd8d7                       |
| --vapor-color-red-200                   | #ffb3b2                       |
| --vapor-color-red-300                   | #fc7d7f                       |
| --vapor-color-red-400                   | #f8636a                       |
| --vapor-color-red-500                   | #da3944                       |
| --vapor-color-red-600                   | #bb1225                       |
| --vapor-color-red-700                   | #9e0006                       |
| --vapor-color-red-800                   | #790000                       |
| --vapor-color-red-900                   | #570000                       |
| --vapor-color-pink-050                  | #fff5f7                       |
| --vapor-color-pink-100                  | #ffd8e2                       |
| --vapor-color-pink-200                  | #ffb1c6                       |
| --vapor-color-pink-300                  | #f77ca3                       |
| --vapor-color-pink-400                  | #f26394                       |
| --vapor-color-pink-500                  | #d13e76                       |
| --vapor-color-pink-600                  | #b5135d                       |
| --vapor-color-pink-700                  | #9a0047                       |
| --vapor-color-pink-800                  | #77002d                       |
| --vapor-color-pink-900                  | #550016                       |
| --vapor-color-grape-050                 | #fcf5fe                       |
| --vapor-color-grape-100                 | #f4d8fb                       |
| --vapor-color-grape-200                 | #e9b4f7                       |
| --vapor-color-grape-300                 | #d883ef                       |
| --vapor-color-grape-400                 | #d06bea                       |
| --vapor-color-grape-500                 | #b542d1                       |
| --vapor-color-grape-600                 | #9a1cb7                       |
| --vapor-color-grape-700                 | #83009f                       |
| --vapor-color-grape-800                 | #62007e                       |
| --vapor-color-grape-900                 | #43005e                       |
| --vapor-color-violet-050                | #f9f5ff                       |
| --vapor-color-violet-100                | #ebdbff                       |
| --vapor-color-violet-200                | #d9b9ff                       |
| --vapor-color-violet-300                | #b691fa                       |
| --vapor-color-violet-400                | #a480f7                       |
| --vapor-color-violet-500                | #805cec                       |
| --vapor-color-violet-600                | #693fcf                       |
| --vapor-color-violet-700                | #5929ba                       |
| --vapor-color-violet-800                | #4805a3                       |
| --vapor-color-violet-900                | #2e007a                       |
| --vapor-color-blue-050                  | #eff8ff                       |
| --vapor-color-blue-100                  | #c6e6ff                       |
| --vapor-color-blue-200                  | #8dcdff                       |
| --vapor-color-blue-300                  | #51a9f7                       |
| --vapor-color-blue-400                  | #4198f2                       |
| --vapor-color-blue-500                  | #2A72E5                       |
| --vapor-color-blue-600                  | #0957c8                       |
| --vapor-color-blue-700                  | #0043b3                       |
| --vapor-color-blue-800                  | #002b9b                       |
| --vapor-color-blue-900                  | #000e84                       |
| --vapor-color-cyan-050                  | #eef9fb                       |
| --vapor-color-cyan-100                  | #c2e8f0                       |
| --vapor-color-cyan-200                  | #84d2e2                       |
| --vapor-color-cyan-300                  | #1bb3cc                       |
| --vapor-color-cyan-400                  | #14a3bc                       |
| --vapor-color-cyan-500                  | #04819c                       |
| --vapor-color-cyan-600                  | #006680                       |
| --vapor-color-cyan-700                  | #00536c                       |
| --vapor-color-cyan-800                  | #003e57                       |
| --vapor-color-cyan-900                  | #002941                       |
| --vapor-color-green-050                 | #edfaf4                       |
| --vapor-color-green-100                 | #bbecd7                       |
| --vapor-color-green-200                 | #75d9b4                       |
| --vapor-color-green-300                 | #43b790                       |
| --vapor-color-green-400                 | #33a782                       |
| --vapor-color-green-500                 | #058765                       |
| --vapor-color-green-600                 | #006c4b                       |
| --vapor-color-green-700                 | #00583a                       |
| --vapor-color-green-800                 | #004226                       |
| --vapor-color-green-900                 | #002e13                       |
| --vapor-color-lime-050                  | #f1fae8                       |
| --vapor-color-lime-100                  | #c9eca8                       |
| --vapor-color-lime-200                  | #9ad84a                       |
| --vapor-color-lime-300                  | #71b61a                       |
| --vapor-color-lime-400                  | #61a613                       |
| --vapor-color-lime-500                  | #428600                       |
| --vapor-color-lime-600                  | #276c00                       |
| --vapor-color-lime-700                  | #115a00                       |
| --vapor-color-lime-800                  | #004400                       |
| --vapor-color-lime-900                  | #002e00                       |
| --vapor-color-yellow-050                | #fff7e7                       |
| --vapor-color-yellow-100                | #ffdd95                       |
| --vapor-color-yellow-200                | #fbbd05                       |
| --vapor-color-yellow-300                | #d99700                       |
| --vapor-color-yellow-400                | #ca8700                       |
| --vapor-color-yellow-500                | #a96800                       |
| --vapor-color-yellow-600                | #8d4f00                       |
| --vapor-color-yellow-700                | #7a3c00                       |
| --vapor-color-yellow-800                | #632700                       |
| --vapor-color-yellow-900                | #4d1100                       |
| --vapor-color-orange-050                | #fff6f1                       |
| --vapor-color-orange-100                | #ffd9c8                       |
| --vapor-color-orange-200                | #fcb797                       |
| --vapor-color-orange-300                | #f4864f                       |
| --vapor-color-orange-400                | #ef6f25                       |
| --vapor-color-orange-500                | #d34701                       |
| --vapor-color-orange-600                | #b72100                       |
| --vapor-color-orange-700                | #9e0000                       |
| --vapor-color-orange-800                | #790000                       |
| --vapor-color-orange-900                | #560000                       |
| --vapor-color-background-primary-100    | var(--vapor-color-blue-100)   |
| --vapor-color-background-primary-200    | var(--vapor-color-blue-500)   |
| --vapor-color-background-primary-weak   | var(--vapor-color-blue-100)   |
| --vapor-color-background-primary        | var(--vapor-color-blue-500)   |
| --vapor-color-background-secondary-100  | var(--vapor-color-gray-050)   |
| --vapor-color-background-secondary-200  | var(--vapor-color-gray-100)   |
| --vapor-color-background-secondary-weak | var(--vapor-color-gray-050)   |
| --vapor-color-background-secondary      | var(--vapor-color-gray-100)   |
| --vapor-color-background-success-100    | var(--vapor-color-green-100)  |
| --vapor-color-background-success-200    | var(--vapor-color-green-500)  |
| --vapor-color-background-success-weak   | var(--vapor-color-green-100)  |
| --vapor-color-background-success        | var(--vapor-color-green-500)  |
| --vapor-color-background-warning-100    | var(--vapor-color-orange-100) |
| --vapor-color-background-warning-200    | var(--vapor-color-orange-500) |
| --vapor-color-background-warning-weak   | var(--vapor-color-orange-100) |
| --vapor-color-background-warning        | var(--vapor-color-orange-500) |
| --vapor-color-background-danger-100     | var(--vapor-color-red-100)    |
| --vapor-color-background-danger-200     | var(--vapor-color-red-500)    |
| --vapor-color-background-danger-weak    | var(--vapor-color-red-100)    |
| --vapor-color-background-danger         | var(--vapor-color-red-500)    |
| --vapor-color-background-hint-100       | var(--vapor-color-gray-100)   |
| --vapor-color-background-hint-200       | var(--vapor-color-gray-600)   |
| --vapor-color-background-hint-weak      | var(--vapor-color-gray-100)   |
| --vapor-color-background-hint           | var(--vapor-color-gray-600)   |
| --vapor-color-background-contrast-100   | var(--vapor-color-gray-300)   |
| --vapor-color-background-contrast-200   | var(--vapor-color-gray-800)   |
| --vapor-color-background-contrast-weak  | var(--vapor-color-gray-500)   |
| --vapor-color-background-contrast       | var(--vapor-color-gray-800)   |
| --vapor-color-background-canvas-100     | var(--vapor-color-canvas)     |
| --vapor-color-background-canvas-200     | var(--vapor-color-gray-050)   |
| --vapor-color-background-overlay-100    | var(--vapor-color-canvas)     |
| --vapor-color-background-canvas-base    | var(--vapor-color-white)      |
| --vapor-color-background-canvas-sunken  | var(--vapor-color-gray-050)   |
| --vapor-color-background-canvas-raised  | var(--vapor-color-gray-025)   |
| --vapor-color-background-canvas-dim     | var(--vapor-color-black)      |
| --vapor-color-background-canvas-overlay | var(--vapor-color-white)      |
| --vapor-color-background-canvas-inverse | var(--vapor-color-gray-800)   |
| --vapor-color-foreground-primary-100    | var(--vapor-color-blue-600)   |
| --vapor-color-foreground-primary-200    | var(--vapor-color-blue-700)   |
| --vapor-color-foreground-primary        | var(--vapor-color-blue-600)   |
| --vapor-color-foreground-primary-strong | var(--vapor-color-blue-700)   |
| --vapor-color-foreground-secondary-100  | var(--vapor-color-gray-800)   |
| --vapor-color-foreground-secondary-200  | var(--vapor-color-gray-900)   |
| --vapor-color-foreground-secondary      | var(--vapor-color-gray-700)   |
| --vapor-color-foreground-success-100    | var(--vapor-color-green-600)  |
| --vapor-color-foreground-success-200    | var(--vapor-color-green-700)  |
| --vapor-color-foreground-success        | var(--vapor-color-green-600)  |
| --vapor-color-foreground-success-strong | var(--vapor-color-green-700)  |
| --vapor-color-foreground-warning-100    | var(--vapor-color-orange-600) |
| --vapor-color-foreground-warning-200    | var(--vapor-color-orange-700) |
| --vapor-color-foreground-warning        | var(--vapor-color-orange-600) |
| --vapor-color-foreground-warning-strong | var(--vapor-color-orange-700) |
| --vapor-color-foreground-danger-100     | var(--vapor-color-red-600)    |
| --vapor-color-foreground-danger-200     | var(--vapor-color-red-700)    |
| --vapor-color-foreground-danger         | var(--vapor-color-red-600)    |
| --vapor-color-foreground-danger-strong  | var(--vapor-color-red-700)    |
| --vapor-color-foreground-hint-100       | var(--vapor-color-gray-600)   |
| --vapor-color-foreground-hint-200       | var(--vapor-color-gray-700)   |
| --vapor-color-foreground-hint           | var(--vapor-color-gray-500)   |
| --vapor-color-foreground-contrast-100   | var(--vapor-color-gray-800)   |
| --vapor-color-foreground-contrast-200   | var(--vapor-color-gray-900)   |
| --vapor-color-foreground-contrast       | var(--vapor-color-black)      |
| --vapor-color-foreground-normal-100     | var(--vapor-color-gray-700)   |
| --vapor-color-foreground-normal-200     | var(--vapor-color-gray-900)   |
| --vapor-color-foreground-normal         | var(--vapor-color-gray-900)   |
| --vapor-color-foreground-inverse        | var(--vapor-color-white)      |
| --vapor-color-foreground-staticWhite    | var(--vapor-color-white)      |
| --vapor-color-foreground-staticBlack    | var(--vapor-color-black)      |
| --vapor-color-border-normal             | var(--vapor-color-gray-100)   |
| --vapor-color-border-primary            | var(--vapor-color-blue-500)   |
| --vapor-color-border-secondary          | var(--vapor-color-gray-200)   |
| --vapor-color-border-success            | var(--vapor-color-green-500)  |
| --vapor-color-border-warning            | var(--vapor-color-orange-500) |
| --vapor-color-border-danger             | var(--vapor-color-red-500)    |
| --vapor-color-border-hint               | var(--vapor-color-gray-600)   |
| --vapor-color-border-contrast           | var(--vapor-color-gray-800)   |


# Size
URL: /docs/getting-started/size
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/(tokens)/size.mdx

요소의 크기,여백과 관련된 값을 정의하여 일관된 디자인을 유지하는 데 도움을 줍니다.

| token                         | value    |
| ----------------------------- | -------- |
| --vapor-size-borderRadius-000 | 0rem     |
| --vapor-size-borderRadius-050 | 0.125rem |
| --vapor-size-borderRadius-100 | 0.25rem  |
| --vapor-size-borderRadius-200 | 0.375rem |
| --vapor-size-borderRadius-300 | 0.5rem   |
| --vapor-size-borderRadius-400 | 0.75rem  |
| --vapor-size-borderRadius-500 | 1rem     |
| --vapor-size-borderRadius-600 | 1.25rem  |
| --vapor-size-borderRadius-700 | 1.5rem   |
| --vapor-size-borderRadius-800 | 2rem     |
| --vapor-size-borderRadius-900 | 2.5rem   |
| --vapor-size-space-000        | 0rem     |
| --vapor-size-space-025        | 0.125rem |
| --vapor-size-space-050        | 0.25rem  |
| --vapor-size-space-075        | 0.375rem |
| --vapor-size-space-100        | 0.5rem   |
| --vapor-size-space-150        | 0.75rem  |
| --vapor-size-space-175        | 0.875rem |
| --vapor-size-space-200        | 1rem     |
| --vapor-size-space-225        | 1.125rem |
| --vapor-size-space-250        | 1.25rem  |
| --vapor-size-space-300        | 1.5rem   |
| --vapor-size-space-400        | 2rem     |
| --vapor-size-space-500        | 2.5rem   |
| --vapor-size-space-600        | 3rem     |
| --vapor-size-space-700        | 3.5rem   |
| --vapor-size-space-800        | 4rem     |
| --vapor-size-space-900        | 4.5rem   |
| --vapor-size-dimension-025    | 0.125rem |
| --vapor-size-dimension-050    | 0.25rem  |
| --vapor-size-dimension-075    | 0.375rem |
| --vapor-size-dimension-100    | 0.5rem   |
| --vapor-size-dimension-150    | 0.75rem  |
| --vapor-size-dimension-175    | 0.875rem |
| --vapor-size-dimension-200    | 1rem     |
| --vapor-size-dimension-225    | 1.125rem |
| --vapor-size-dimension-250    | 1.25rem  |
| --vapor-size-dimension-300    | 1.5rem   |
| --vapor-size-dimension-400    | 2rem     |
| --vapor-size-dimension-500    | 2.5rem   |
| --vapor-size-dimension-600    | 3rem     |
| --vapor-size-dimension-700    | 3.5rem   |
| --vapor-size-dimension-800    | 4rem     |


# Typography
URL: /docs/getting-started/typography
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/(tokens)/typography.mdx

텍스트의 스타일과 형식을 정의하여 일관된 글꼴 사용과 가독성을 보장합니다.

| token                                | value      |
| ------------------------------------ | ---------- |
| --vapor-typography-fontFamily-sans   | Pretendard |
| --vapor-typography-fontFamily-code   | Fira Code  |
| --vapor-typography-fontSize-025      | 10px       |
| --vapor-typography-fontSize-050      | 12px       |
| --vapor-typography-fontSize-075      | 14px       |
| --vapor-typography-fontSize-100      | 16px       |
| --vapor-typography-fontSize-200      | 18px       |
| --vapor-typography-fontSize-300      | 20px       |
| --vapor-typography-fontSize-400      | 24px       |
| --vapor-typography-fontSize-500      | 32px       |
| --vapor-typography-fontSize-600      | 38px       |
| --vapor-typography-fontSize-700      | 48px       |
| --vapor-typography-fontSize-800      | 64px       |
| --vapor-typography-fontSize-900      | 80px       |
| --vapor-typography-fontSize-1000     | 120px      |
| --vapor-typography-fontWeight-400    | regular    |
| --vapor-typography-fontWeight-500    | medium     |
| --vapor-typography-fontWeight-700    | bold       |
| --vapor-typography-fontWeight-800    | extra-bold |
| --vapor-typography-letterSpacing-000 | 0          |
| --vapor-typography-letterSpacing-100 | -0.1px     |
| --vapor-typography-letterSpacing-200 | -0.2px     |
| --vapor-typography-letterSpacing-300 | -0.3px     |
| --vapor-typography-letterSpacing-400 | -0.4px     |
| --vapor-typography-lineHeight-025    | 14px       |
| --vapor-typography-lineHeight-050    | 18px       |
| --vapor-typography-lineHeight-075    | 22px       |
| --vapor-typography-lineHeight-100    | 24px       |
| --vapor-typography-lineHeight-200    | 26px       |
| --vapor-typography-lineHeight-300    | 30px       |
| --vapor-typography-lineHeight-400    | 36px       |
| --vapor-typography-lineHeight-500    | 48px       |
| --vapor-typography-lineHeight-600    | 56px       |
| --vapor-typography-lineHeight-700    | 62px       |
| --vapor-typography-lineHeight-800    | 84px       |
| --vapor-typography-lineHeight-900    | 104px      |
| --vapor-typography-lineHeight-1000   | 156px      |


# Installation
URL: /docs/getting-started/installation
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(overview)/installation/index.mdx

Vapor UI를 프로젝트에 설치하고 첫 컴포넌트를 사용해보세요.

이 문서를 완료하면 Vapor UI 패키지를 설치하고, 첫 번째 컴포넌트를 화면에 렌더링할 수 있습니다.

## 사전 준비

다음 환경이 필요합니다.

| 요구사항    | 버전    |
| :------ | :---- |
| React   | 17 이상 |
| Node.js | 16 이상 |

## 1단계: 패키지 설치

패키지 매니저를 사용하여 Vapor UI를 설치합니다.

```package-install
npm install @vapor-ui/core @vapor-ui/icons
```

## 2단계: Portal 설정

Vapor UI는 Dialog, Popover 같은 팝업 컴포넌트에 Portal을 사용합니다. Portal 컴포넌트가 항상 페이지 최상단에 표시되도록 애플리케이션 레이아웃 루트에 다음 스타일을 추가합니다.

```tsx title="layout.tsx"
<body>
    <div className="root">{children}</div>
</body>
```

```css title="styles.css"
.root {
    isolation: isolate;
}
```

이 스타일은 `.root` 요소에 별도의 stacking context를 생성합니다. 이를 통해 팝업이 항상 페이지 콘텐츠 위에 표시되며, 다른 스타일의 `z-index` 속성과 충돌하지 않습니다.

## 3단계: 컴포넌트 사용

컴포넌트를 import하여 사용합니다.

<Demo name="getting-started/(overview)/installation/demos/assemble-component">
  ```tsx
  import { Card } from '@vapor-ui/core';

  export default function AssembleComponent() {
      return (
          <Card.Root>
              <Card.Header>
                  <h2>컴포넌트 구성하기</h2>
              </Card.Header>
              <Card.Body>
                  <p>이것은 Vapor UI를 사용하여 컴포넌트를 구성하는 예시입니다.</p>
              </Card.Body>
          </Card.Root>
      );
  }

  ```
</Demo>

## 다음 단계

* [테마 설정하기](/theme/theme-provider) - 라이트/다크 모드 및 커스텀 테마 설정 방법
* [컴포넌트 살펴보기](./overview#components) - 다양한 UI 컴포넌트 사용법