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

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

***

title: Welcome, Vapor UI
description: 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 문이 복사됩니다.

***

title: Icons
description: 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'`                        |
| `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'`                            |
| `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'`                  |
| `ProgrammingIcon`                       | `import { ProgrammingIcon } 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'`                     |
| `ProgrammingOutlineIcon`               | `import { ProgrammingOutlineIcon } 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 디자인 시스템을 살펴보세요.

***

title: All Components
description: 빠른 개발과 일관된 디자인을 위한 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 디자인 시스템을 살펴보세요.

***

title: Introduction
description: 빠른 개발과 일관된 디자인을 위한 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 패키지의 릴리즈 노트입니다.

***

title: Codemod
description: '@vapor-ui/codemod 패키지의 릴리즈 노트입니다.'
------------------------------------------------

# @vapor-ui/codemod

## 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 패키지의 릴리즈 노트입니다.

***

title: Color Generator
description: '@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 패키지의 릴리즈 노트입니다.

***

title: Core
description: '@vapor-ui/core 패키지의 릴리즈 노트입니다.'
---------------------------------------------

# @vapor-ui/core

## 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 패키지의 릴리즈 노트입니다.

***

title: Css Generator
description: '@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 패키지의 릴리즈 노트입니다.

***

title: ESLint
description: 'eslint-plugin-vapor 패키지의 릴리즈 노트입니다.'
--------------------------------------------------

# eslint-plugin-vapor

## 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 패키지의 릴리즈 노트입니다.

***

title: Icons
description: '@vapor-ui/icons 패키지의 릴리즈 노트입니다.'
----------------------------------------------

# @vapor-ui/icons

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


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

Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다.

***

title: 'Avatar'
site\_name: 'Avatar - Vapor Core'
description: 'Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다.'
-----------------------------------------------------------

<Demo name="avatar/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="avatar/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="avatar/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="avatar/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="avatar/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="avatar/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` | 아바타 테두리 반경의 모양을 지정합니다. 기본값: `'square'`                                                                              |
| `size`                  | `sm`, `md`, `lg`, `xl`                                                                      | `md`     | 아바타의 크기를 지정합니다. 너비, 높이, 테두리 반경을 설정합니다. 기본값: `'md'`<br />폴백 콘텐츠의 크기를 지정합니다. 폰트 크기, 행간, 폰트 굵기, 자간을 설정합니다. 기본값: `'md'` |
| `onLoadingStatusChange` | `(status: ImageLoadingStatus) => void`                                                      | -        | 로딩 상태가 변경될 때 호출되는 콜백입니다.                                                                                            |
| `className`             | `string \| ((state: Avatar.Root.State) => (string \| undefined))`                           | -        | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                    |
| `fallbackElement`       | `ReactElement<AvatarFallbackPrimitive.Props, string \| JSXElementConstructor<any>>`         | -        |                                                                                                                     |
| `imageElement`          | `ReactElement<AvatarImagePrimitive.Props, string \| JSXElementConstructor<any>>`            | -        |                                                                                                                     |
| `delay`                 | `number`                                                                                    | -        | 폴백을 표시하기 전 대기 시간을 밀리초 단위로 지정합니다.                                                                                    |
| `style`                 | `React.CSSProperties \| ((state: Avatar.Root.State) => (React.CSSProperties \| undefined))` | -        | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                     |
| `render`                | `ReactElement \| ((props: HTMLProps, state: Avatar.Root.State) => ReactElement)`            | -        | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.        |

#### Avatar.ImagePrimitive

| Prop        | Type                                                                                                  | Default | Description                                                                                                  |
| ----------- | ----------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Avatar.ImagePrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Avatar.ImagePrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Avatar.ImagePrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Avatar.FallbackPrimitive

| Prop        | Type                                                                                                     | Default | Description                                                                                                  |
| ----------- | -------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Avatar.FallbackPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Avatar.FallbackPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Avatar.FallbackPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Badge는 이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다.

***

title: 'Badge'
site\_name: 'Badge - Vapor Core'
description: 'Badge는 이미지, 컨텐츠 등의 상태 또는 분류를 시각적으로 표시합니다.'
--------------------------------------------------------

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

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

  ```
</Demo>

## Property

***

### ColorPalette

Badge의 색상을 설정합니다.

<Demo name="badge/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="badge/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="badge/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` | `primary`, `success`, `warning`, `danger`, `hint`, `contrast`              | `primary` |                                                                                                              |
| `shape`        | `square`, `pill`                                                           | `square`  |                                                                                                              |
| `size`         | `sm`, `md`, `lg`                                                           | `md`      |                                                                                                              |
| `className`    | `string \| ((state: Badge.State) => (string \| undefined))`                | -         | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Badge.State) => ReactElement)` | -         | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

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

***

title: 'Breadcrumb'
site\_name: 'Breadcrumb - Vapor Core'
description: '사용자가 현재 페이지의 위치를 파악하고 이전 페이지로 쉽게 이동할 수 있도록 도와주는 네비게이션 컴포넌트입니다.'
-----------------------------------------------------------------------------

<Demo name="breadcrumb/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="breadcrumb/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="breadcrumb/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="breadcrumb/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="breadcrumb/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`                                                                       | -       |                                                                                                              |
| `className` | `string \| ((state: BreadcrumbRootPrimitive.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: BreadcrumbRootPrimitive.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Breadcrumb.RootPrimitive

| Prop        | Type                                                                                         | Default | Description                                                                                                  |
| ----------- | -------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `size`      | `sm`, `md`, `lg`, `xl`                                                                       | -       |                                                                                                              |
| `className` | `string \| ((state: BreadcrumbRootPrimitive.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: BreadcrumbRootPrimitive.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Breadcrumb.ListPrimitive

| Prop        | Type                                                                                         | Default | Description                                                                                                  |
| ----------- | -------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: BreadcrumbListPrimitive.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: BreadcrumbListPrimitive.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Breadcrumb.Item

| Prop        | Type                                                                                        | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `current`   | `boolean`                                                                                   | -       |                                                                                                              |
| `size`      | `sm`, `md`, `lg`, `xl`                                                                      | -       |                                                                                                              |
| `className` | `string \| ((state: BreadcrumbLinkPrimitiveState) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: BreadcrumbLinkPrimitiveState) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Breadcrumb.ItemPrimitive

| Prop        | Type                                                                                         | Default | Description                                                                                                  |
| ----------- | -------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: BreadcrumbItemPrimitive.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: BreadcrumbItemPrimitive.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Breadcrumb.LinkPrimitive

| Prop        | Type                                                                                        | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `current`   | `boolean`                                                                                   | `false` |                                                                                                              |
| `size`      | `sm`, `md`, `lg`, `xl`                                                                      | `md`    |                                                                                                              |
| `className` | `string \| ((state: BreadcrumbLinkPrimitiveState) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: BreadcrumbLinkPrimitiveState) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Breadcrumb.Separator

| Prop        | Type                                                                                     | Default | Description                                                                                                  |
| ----------- | ---------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: BreadcrumbSeparator.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: BreadcrumbSeparator.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Breadcrumb.Ellipsis

| Prop        | Type                                                                                             | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: BreadcrumbEllipsisPrimitive.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: BreadcrumbEllipsisPrimitive.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Breadcrumb.EllipsisPrimitive

| Prop        | Type                                                                                             | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: BreadcrumbEllipsisPrimitive.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: BreadcrumbEllipsisPrimitive.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Button은 사용자가 주요 작업을 수행하도록 돕는 핵심 상호작용 요소입니다.

***

title: 'Button'
site\_name: 'Button - Vapor Core'
description: 'Button은 사용자가 주요 작업을 수행하도록 돕는 핵심 상호작용 요소입니다.'
----------------------------------------------------------

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

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

  ```
</Demo>

## Property

***

### Variant

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

<Demo name="button/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="button/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="button/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="button/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="button/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` | 버튼에 적용할 색상 팔레트를 지정합니다. 모든 시각적 variant의 배경, 텍스트, 테두리 색상을 설정합니다. 기본값: `'primary'`                                                      |
| `size`                  | `sm`, `md`, `lg`, `xl`                                                                 | `md`      | 버튼의 크기를 지정합니다. 높이, 패딩, 타이포그래피를 설정합니다. 기본값: `'md'`                                                                                    |
| `variant`               | `fill`, `outline`, `ghost`                                                             | `fill`    | 버튼의 시각적 스타일을 지정합니다. 기본값: `'fill'`                                                                                                    |
| `className`             | `string \| ((state: Button.State) => (string \| undefined))`                           | -         | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `focusableWhenDisabled` | `boolean`                                                                              | -         | 버튼이 비활성화 상태일 때 포커스 가능 여부를 지정합니다.                                                                                                     |
| `nativeButton`          | `boolean`                                                                              | -         | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`                 | `React.CSSProperties \| ((state: Button.State) => (React.CSSProperties \| undefined))` | -         | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`                | `ReactElement \| ((props: HTMLProps, state: Button.State) => ReactElement)`            | -         | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |


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

Callout은 중요한 정보를 시각적으로 강조하여 사용자에게 전달하는 메시지 컴포넌트입니다.

***

title: 'Callout'
site\_name: 'Callout - Vapor Core'
description: 'Callout은 중요한 정보를 시각적으로 강조하여 사용자에게 전달하는 메시지 컴포넌트입니다.'
------------------------------------------------------------------

<Demo name="callout/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="callout/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="callout/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` | `primary`, `success`, `warning`, `danger`, `hint`, `contrast`                    | `primary` |                                                                                                              |
| `className`    | `string \| ((state: CalloutRoot.State) => (string \| undefined))`                | -         | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`       | `ReactElement \| ((props: HTMLProps, state: CalloutRoot.State) => ReactElement)` | -         | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Callout.Icon

| Prop        | Type                                                                             | Default | Description                                                                                                  |
| ----------- | -------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: CalloutIcon.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: CalloutIcon.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Card는 이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다.

***

title: 'Card'
site\_name: 'Card - Vapor Core'
description: 'Card는 이미지와 텍스트, 일부 기능 버튼을 포함한 컨테이너로 콘텐츠를 제공합니다.'
--------------------------------------------------------------

<Demo name="card/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="card/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 \| ((state: CardRoot.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: CardRoot.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Card.Header

| Prop        | Type                                                                            | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: CardHeader.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: CardHeader.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Card.Body

| Prop        | Type                                                                          | Default | Description                                                                                                  |
| ----------- | ----------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: CardBody.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: CardBody.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Card.Footer

| Prop        | Type                                                                            | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: CardFooter.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: CardFooter.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Checkbox는 여러 항목 중 복수 선택을 가능하게 하는 입력 컴포넌트입니다.

***

title: 'Checkbox'
site\_name: 'Checkbox - Vapor Core'
description: 'Checkbox는 여러 항목 중 복수 선택을 가능하게 하는 입력 컴포넌트입니다.'
-----------------------------------------------------------

<Demo name="checkbox/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="checkbox/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="checkbox/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="checkbox/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="checkbox/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="checkbox/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` |                                                                                                                                     |
| `size`            | `md`, `lg`                                                                                  | `md`    |                                                                                                                                     |
| `checked`         | `boolean`                                                                                   | -       | 체크박스의 현재 선택 여부를 지정합니다.<br /><br />비제어 체크박스로 렌더링하려면 `defaultChecked` prop을 사용합니다.                                                    |
| `defaultChecked`  | `boolean`                                                                                   | -       | 체크박스의 초기 선택 여부를 지정합니다.<br /><br />제어 체크박스로 렌더링하려면 `checked` prop을 사용합니다.                                                            |
| `onCheckedChange` | `(checked: boolean, eventDetails: Checkbox.Root.ChangeEventDetails) => void`                | -       | 체크박스가 선택되거나 해제될 때 호출되는 이벤트 핸들러입니다.                                                                                                  |
| `value`           | `string`                                                                                    | -       | 선택된 체크박스의 값을 지정합니다.                                                                                                                 |
| `className`       | `string \| ((state: CheckboxRootState) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                    |
| `disabled`        | `boolean`                                                                                   | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                                     |
| `form`            | `string`                                                                                    | -       | 숨겨진 input을 소유하는 폼을 식별합니다.<br />체크박스가 폼 외부에 렌더링될 때 유용합니다.                                                                            |
| `id`              | `string`                                                                                    | -       | input 요소의 id를 지정합니다.                                                                                                                |
| `indeterminate`   | `boolean`                                                                                   | -       | 체크박스가 혼합 상태(선택도, 미선택도 아닌 상태)인지 여부를 설정합니다.                                                                                           |
| `inputRef`        | `Ref<HTMLInputElement>`                                                                     | -       | 숨겨진 `&lt;input&gt;` 요소에 접근하기 위한 ref를 지정합니다.                                                                                         |
| `name`            | `string`                                                                                    | -       | 폼이 제출될 때 필드를 식별하는 이름을 지정합니다.                                                                                                        |
| `nativeButton`    | `boolean`                                                                                   | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다.                    |
| `parent`          | `boolean`                                                                                   | -       | 이 체크박스가 하위 체크박스 그룹을 관리하는지 여부를 설정합니다.<br /><br />[Checkbox Group](https://base-ui.com/react/components/checkbox-group) 내에서 사용해야 합니다. |
| `readOnly`        | `boolean`                                                                                   | -       | 사용자가 체크박스를 선택하거나 해제할 수 없도록 할지 여부를 설정합니다.                                                                                            |
| `required`        | `boolean`                                                                                   | -       | 폼을 제출하기 전에 사용자가 반드시 체크박스를 선택해야 하는지 여부를 설정합니다.                                                                                       |
| `style`           | `React.CSSProperties \| ((state: CheckboxRootState) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `uncheckedValue`  | `string`                                                                                    | -       | 체크박스가 선택 해제된 상태에서 폼과 함께 제출되는 값을 지정합니다.<br />기본적으로 선택 해제된 체크박스는 네이티브 체크박스 동작과 동일하게 값을 제출하지 않습니다.                                     |
| `render`          | `ReactElement \| ((props: HTMLProps, state: CheckboxRootState) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                        |

### Checkbox.IndicatorPrimitive

| Prop          | Type                                                                                                        | Default | Description                                                                                                  |
| ------------- | ----------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Checkbox.IndicatorPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `keepMounted` | `boolean`                                                                                                   | `true`  | 체크박스가 선택되지 않은 상태일 때 요소를 DOM에 유지할지 여부를 지정합니다.                                                                 |
| `style`       | `React.CSSProperties \| ((state: Checkbox.IndicatorPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Checkbox.IndicatorPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Collapsible은 콘텐츠를 접었다 펼칠 수 있는 대화형 컴포넌트입니다. 아코디언이나 확장 가능한 섹션을 구현할 때 사용합니다.

***

title: 'Collapsible'
site\_name: 'Collapsible - Vapor Core'
description: 'Collapsible은 콘텐츠를 접었다 펼칠 수 있는 대화형 컴포넌트입니다. 아코디언이나 확장 가능한 섹션을 구현할 때 사용합니다.'
----------------------------------------------------------------------------------------

<Demo name="collapsible/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="collapsible/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="collapsible/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="collapsible/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`                                                                                           | -       | 콜랩서블 패널의 초기 열림 여부를 설정합니다.<br /><br />제어 컴포넌트로 렌더링하려면 `open` prop을 사용합니다.                                     |
| `onOpenChange` | `(open: boolean, eventDetails: Collapsible.Root.ChangeEventDetails) => void`                        | -       | 패널이 열리거나 닫힐 때 호출되는 이벤트 핸들러를 지정합니다.                                                                           |
| `open`         | `boolean`                                                                                           | -       | 콜랩서블 패널의 현재 열림 여부를 설정합니다.<br /><br />비제어 컴포넌트로 렌더링하려면 `defaultOpen` prop을 사용합니다.                             |
| `className`    | `string \| ((state: Collapsible.Trigger.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `disabled`     | `boolean`                                                                                           | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                              |
| `style`        | `React.CSSProperties \| ((state: Collapsible.Trigger.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Collapsible.Trigger.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Collapsible.Trigger

| Prop           | Type                                                                                                                                                                            | Default | Description                                                                                                                          |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: Collapsible.Trigger.State) => (string \| undefined))`                                                                                                       | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `nativeButton` | `boolean`                                                                                                                                                                       | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: Collapsible.Trigger.State) => (React.CSSProperties \| undefined)) \| ((state: CollapsibleTriggerState) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Collapsible.Trigger.State) => ReactElement) \| ((props: HTMLProps, state: CollapsibleTriggerState) => ReactElement)`                | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

### Collapsible.Panel

| Prop               | Type                                                                                              | Default | Description                                                                                                                              |
| ------------------ | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `className`        | `string \| ((state: Collapsible.Panel.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                         |
| `hiddenUntilFound` | `boolean`                                                                                         | -       | 브라우저의 기본 페이지 검색 기능으로 패널 내용을 찾고 펼칠 수 있도록 허용합니다.<br /><br />`keepMounted` prop을 재정의하며, `hidden="until-found"`를 사용해 DOM에서 요소를 제거하지 않고 숨깁니다. |
| `keepMounted`      | `boolean`                                                                                         | -       | 패널이 숨겨진 동안 요소를 DOM에 유지할지 여부를 설정합니다.<br />`hiddenUntilFound`를 사용하는 경우 이 prop은 무시됩니다.                                                      |
| `style`            | `React.CSSProperties \| ((state: Collapsible.Panel.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                          |
| `render`           | `ReactElement \| ((props: HTMLProps, state: Collapsible.Panel.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                             |


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

Dialog는 페이지 위에 모달 형태로 정보를 표시하거나 작업을 수행하도록 하는 컴포넌트입니다.

***

title: 'Dialog'
site\_name: 'Dialog - Vapor Core'
description: 'Dialog는 페이지 위에 모달 형태로 정보를 표시하거나 작업을 수행하도록 하는 컴포넌트입니다.'
--------------------------------------------------------------------

<Demo name="dialog/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="dialog/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="dialog/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="dialog/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="dialog/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'`                                                                                                                                                                                                                                                                                                                                                                               |
| `defaultOpen`          | `boolean`                                                                                                                                                                                           | -       | 다이얼로그의 초기 열림 여부를 지정합니다.<br /><br />제어 컴포넌트로 사용하려면 `open` prop을 사용하십시오.                                                                                                                                                                                                                                                                                                                                         |
| `onOpenChange`         | `(open: boolean, eventDetails: Dialog.Root.ChangeEventDetails) => void`                                                                                                                             | -       | 다이얼로그가 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다.                                                                                                                                                                                                                                                                                                                                                                              |
| `open`                 | `boolean`                                                                                                                                                                                           | -       | 다이얼로그의 현재 열림 여부를 지정합니다.                                                                                                                                                                                                                                                                                                                                                                                        |
| `closeOnClickOverlay`  | `boolean`                                                                                                                                                                                           | `true`  | `true`이면 오버레이를 클릭할 때 다이얼로그를 닫습니다. 기본값: `true`                                                                                                                                                                                                                                                                                                                                                                  |
| `actionsRef`           | `React.RefObject<DialogRootActions \| null>`                                                                                                                                                        | -       | 명령형 액션에 대한 ref를 지정합니다.<br />- `unmount`: 다이얼로그를 수동으로 언마운트합니다.<br />외부에서 제어하는 닫기 애니메이션이 완료된 후 호출하십시오.<br />- `close`: 호출 시 다이얼로그를 명령형으로 닫습니다.                                                                                                                                                                                                                                                                   |
| `children`             | `null \| string \| number \| bigint \| false \| true \| ReactElement \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<AwaitedReactNode> \| ((arg: { payload: unknown; }) => ReactNode)` | -       | 다이얼로그의 콘텐츠를 지정합니다.<br />일반 React 노드이거나, 활성 트리거의 `payload`를 받는 렌더 함수를 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                               |
| `defaultTriggerId`     | `string`, `null`                                                                                                                                                                                    | -       | 다이얼로그와 연결할 트리거의 ID를 지정합니다.<br />`defaultOpen` prop과 함께 사용하면 초기에 열린 상태의 다이얼로그를 만들 때 유용합니다.                                                                                                                                                                                                                                                                                                                      |
| `handle`               | `DialogHandle<unknown>`                                                                                                                                                                             | -       | 다이얼로그를 트리거와 연결할 핸들을 지정합니다.<br />지정하면 외부 트리거에서 다이얼로그의 열림 상태를 설정할 수 있습니다.<br />`Dialog.createHandle()` 메서드로 생성할 수 있습니다.                                                                                                                                                                                                                                                                                          |
| `modal`                | `boolean`, `"trap-focus"`                                                                                                                                                                           | -       | 다이얼로그가 열릴 때 모달 상태로 진입할지 여부를 지정합니다.<br />- `true`: 사용자 인터랙션이 다이얼로그 내부로 제한됩니다. 포커스가 트랩되고, 문서 페이지 스크롤이 잠기며, 외부 요소에 대한 포인터 인터랙션이 비활성화됩니다.<br />- `false`: 문서 나머지 영역과의 사용자 인터랙션이 허용됩니다.<br />- `'trap-focus'`: 포커스가 다이얼로그 내부에 트랩되지만, 문서 페이지 스크롤은 잠기지 않으며 외부 포인터 인터랙션도 유지됩니다.<br /><br />`modal`이 `true` 또는 `'trap-focus'`일 때, 터치 스크린 리더가 팝업에서 벗어날 수 있도록 `&lt;Dialog.Popup&gt;` 내부에 `&lt;Dialog.Close&gt;`를 렌더링하십시오. |
| `onOpenChangeComplete` | `(open: boolean) => void`                                                                                                                                                                           | -       | 다이얼로그가 열리거나 닫힐 때 모든 애니메이션이 완료된 후 호출되는 이벤트 핸들러를 지정합니다.                                                                                                                                                                                                                                                                                                                                                          |
| `triggerId`            | `string`, `null`                                                                                                                                                                                    | -       | 다이얼로그와 연결할 트리거의 ID를 지정합니다.<br />`open` prop과 함께 사용하면 제어 모드의 다이얼로그를 만들 때 유용합니다.<br />비제어 모드(즉, `open` prop을 설정하지 않은 경우)에서는 이 prop을 지정할 필요가 없습니다.                                                                                                                                                                                                                                                                |

### Dialog.Popup

| Prop             | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`      | `string \| ((state: Dialog.Popup.State) => (string \| undefined))`                                                                    | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                           |
| `overlayElement` | `ReactElement<DialogOverlayPrimitive.Props, string \| JSXElementConstructor<any>>`                                                    | -       | 기본 `Dialog.OverlayPrimitive`를 교체합니다. 배경의 외형이나 동작을 커스터마이징할 때 사용합니다.                                                                                                                                                                                                                                                                                                                                                                                                         |
| `portalElement`  | `ReactElement<DialogPortalPrimitive.Props, string \| JSXElementConstructor<any>>`                                                     | -       | 기본 `Dialog.PortalPrimitive`를 교체합니다. 포털 컨테이너의 동작을 커스터마이징할 때 사용합니다.                                                                                                                                                                                                                                                                                                                                                                                                          |
| `finalFocus`     | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 다이얼로그가 닫힐 때 포커스를 이동할 요소를 지정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 타입(`mouse`, `touch`, `pen`, `keyboard`)을 인자로 호출합니다.<br />  포커스할 요소를 반환하거나, `true`를 반환하면 기본 동작을 사용하고, `null`을 반환하면 기본 동작으로 폴백하며, `false`/`undefined`를 반환하면 아무것도 하지 않습니다.                                                                                                     |
| `initialFocus`   | `false \| true \| React.RefObject<HTMLElement \| null> \| ((openType: InteractionType) => (boolean \| void \| HTMLElement \| null))`  | -       | 다이얼로그가 열릴 때 포커스를 이동할 요소를 지정합니다.<br />기본적으로 팝업 내부의 첫 번째 탭 가능한 요소로 포커스가 이동하지만, 터치로 다이얼로그가 열린 경우에는 가상 키보드가 열리지 않도록 팝업 자체에 포커스가 설정됩니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(첫 번째 탭 가능한 요소 또는 팝업)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 타입(`mouse`, `touch`, `pen`, `keyboard`)을 인자로 호출합니다.<br />  포커스할 요소를 반환하거나, `true`를 반환하면 기본 동작을 사용하고, `null`을 반환하면 기본 동작으로 폴백하며, `false`/`undefined`를 반환하면 아무것도 하지 않습니다. |
| `style`          | `React.CSSProperties \| ((state: Dialog.Popup.State) => (React.CSSProperties \| undefined))`                                          | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                            |
| `render`         | `ReactElement \| ((props: HTMLProps, state: Dialog.Popup.State) => ReactElement)`                                                     | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                               |

#### Dialog.PortalPrimitive

| Prop          | Type                                                                                                   | Default | Description                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Dialog.PortalPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `container`   | `HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`              | -       | 포털 요소를 렌더링할 부모 요소를 지정합니다.                                                                                    |
| `keepMounted` | `boolean`                                                                                              | -       | 팝업이 숨겨진 동안 포털을 DOM에 마운트된 상태로 유지할지 여부를 지정합니다.                                                                 |
| `style`       | `React.CSSProperties \| ((state: Dialog.PortalPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Dialog.PortalPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Dialog.OverlayPrimitive

| Prop          | Type                                                                                                    | Default | Description                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Dialog.OverlayPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `forceRender` | `boolean`                                                                                               | -       | 중첩된 경우에도 배경을 강제로 렌더링할지 여부를 지정합니다.                                                                            |
| `style`       | `React.CSSProperties \| ((state: Dialog.OverlayPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Dialog.OverlayPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Dialog.PopupPrimitive

| Prop           | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`    | `string \| ((state: Dialog.Popup.State) => (string \| undefined))`                                                                    | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                           |
| `finalFocus`   | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 다이얼로그가 닫힐 때 포커스를 이동할 요소를 지정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 타입(`mouse`, `touch`, `pen`, `keyboard`)을 인자로 호출합니다.<br />  포커스할 요소를 반환하거나, `true`를 반환하면 기본 동작을 사용하고, `null`을 반환하면 기본 동작으로 폴백하며, `false`/`undefined`를 반환하면 아무것도 하지 않습니다.                                                                                                     |
| `initialFocus` | `false \| true \| React.RefObject<HTMLElement \| null> \| ((openType: InteractionType) => (boolean \| void \| HTMLElement \| null))`  | -       | 다이얼로그가 열릴 때 포커스를 이동할 요소를 지정합니다.<br />기본적으로 팝업 내부의 첫 번째 탭 가능한 요소로 포커스가 이동하지만, 터치로 다이얼로그가 열린 경우에는 가상 키보드가 열리지 않도록 팝업 자체에 포커스가 설정됩니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(첫 번째 탭 가능한 요소 또는 팝업)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 타입(`mouse`, `touch`, `pen`, `keyboard`)을 인자로 호출합니다.<br />  포커스할 요소를 반환하거나, `true`를 반환하면 기본 동작을 사용하고, `null`을 반환하면 기본 동작으로 폴백하며, `false`/`undefined`를 반환하면 아무것도 하지 않습니다. |
| `style`        | `React.CSSProperties \| ((state: Dialog.Popup.State) => (React.CSSProperties \| undefined))`                                          | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                            |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Dialog.Popup.State) => ReactElement)`                                                     | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                               |

### Dialog.Trigger

| Prop           | Type                                                                                           | Default | Description                                                                                                                          |
| -------------- | ---------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: Dialog.Trigger.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `handle`       | `DialogHandle<unknown>`                                                                        | -       | 트리거를 다이얼로그와 연결할 핸들을 지정합니다.<br />`Dialog.createHandle()` 메서드로 생성할 수 있습니다.                                                             |
| `id`           | `string`                                                                                       | -       | 트리거의 ID를 지정합니다. 렌더링된 요소에 전달되는 것 외에도,<br />제어 모드에서 다이얼로그의 활성 트리거를 지정하는 데 사용됩니다(DialogRoot의 `triggerId` prop).                         |
| `nativeButton` | `boolean`                                                                                      | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `payload`      | `unknown`                                                                                      | -       | 다이얼로그가 열릴 때 전달할 payload를 지정합니다.                                                                                                      |
| `style`        | `React.CSSProperties \| ((state: Dialog.Trigger.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Dialog.Trigger.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

### Dialog.Close

| Prop           | Type                                                                                         | Default | Description                                                                                                                          |
| -------------- | -------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: Dialog.Close.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `nativeButton` | `boolean`                                                                                    | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: Dialog.Close.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Dialog.Close.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

### Dialog.Title

| Prop        | Type                                                                                         | Default | Description                                                                                                  |
| ----------- | -------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Dialog.Title.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Dialog.Title.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Dialog.Title.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Dialog.Description

| Prop        | Type                                                                                               | Default | Description                                                                                                  |
| ----------- | -------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Dialog.Description.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Dialog.Description.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Dialog.Description.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Dialog.Header

| Prop        | Type                                                                              | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: DialogHeader.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: DialogHeader.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Dialog.Body

| Prop        | Type                                                                            | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: DialogBody.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: DialogBody.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Dialog.Footer

| Prop        | Type                                                                              | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: DialogFooter.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: DialogFooter.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Field는 폼 요소들을 감싸는 컨테이너 컴포넌트로, 라벨, 설명, 에러 메시지, 성공 메시지 등을 제공합니다.

***

title: Field
site\_name: Field - Vapor Core
description: Field는 폼 요소들을 감싸는 컨테이너 컴포넌트로, 라벨, 설명, 에러 메시지, 성공 메시지 등을 제공합니다.
---------------------------------------------------------------------------

<Demo name="field/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="field/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="field/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="field/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">
                          필수 입력 필드 <Text foreground="danger-100">*</Text>
                      </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.Label>
                  <Field.Description>이 필드는 선택적으로 입력할 수 있습니다.</Field.Description>
              </Field.Root>
          </VStack>
      );
  }

  ```
</Demo>

### Disabled

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

<Demo name="field/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="field/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="field/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="field/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="field/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 \| ((state: Field.Root.State) => (string \| undefined))`                                                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                           |
| `actionsRef`             | `React.RefObject<FieldRootActions \| null>`                                                                                | -       | 명령형 액션에 대한 ref를 지정합니다.<br />- `validate`: 호출 시 필드의 유효성을 검사합니다.                                                                                                                                                                             |
| `dirty`                  | `boolean`                                                                                                                  | -       | 필드의 값이 초기값에서 변경되었는지 여부를 지정합니다.<br />외부 라이브러리에서 필드 상태를 관리할 때 유용합니다.                                                                                                                                                                         |
| `disabled`               | `boolean`                                                                                                                  | -       | 컴포넌트가 사용자 인터랙션을 무시할지 여부를 지정합니다.<br />`&lt;Field.Control&gt;` 컴포넌트의 `disabled` prop보다 우선합니다.                                                                                                                                                |
| `invalid`                | `boolean`                                                                                                                  | -       | 필드가 유효하지 않은 상태인지 여부를 지정합니다.<br />외부 라이브러리에서 필드 상태를 관리할 때 유용합니다.                                                                                                                                                                            |
| `name`                   | `string`                                                                                                                   | -       | 폼을 제출할 때 필드를 식별하는 이름을 지정합니다.<br />`&lt;Field.Control&gt;` 컴포넌트의 `name` prop보다 우선합니다.                                                                                                                                                       |
| `style`                  | `React.CSSProperties \| ((state: Field.Root.State) => (React.CSSProperties \| undefined))`                                 | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                            |
| `touched`                | `boolean`                                                                                                                  | -       | 필드가 터치된 상태인지 여부를 지정합니다.<br />외부 라이브러리에서 필드 상태를 관리할 때 유용합니다.                                                                                                                                                                                |
| `validate`               | `(value: unknown, formValues: Record<string, any>) => (string \| string[] \| Promise<string \| string[] \| null> \| null)` | -       | 커스텀 유효성 검사를 위한 함수입니다. 값이 유효하지 않으면 오류 메시지 문자열 또는 문자열 배열을 반환하고, 값이 유효하면 `null`을 반환합니다.<br />비동기 함수도 지원되지만, `validationMode="onSubmit"`을 사용하는 경우 폼 제출을 막지 않습니다.                                                                               |
| `validationDebounceTime` | `number`                                                                                                                   | -       | `validationMode="onChange"`를 사용할 때 `validate` 콜백 사이의 대기 시간을 설정합니다. 밀리초 단위로 지정합니다.                                                                                                                                                          |
| `validationMode`         | `FormValidationMode`                                                                                                       | -       | 필드의 유효성 검사 시점을 설정합니다.<br />`&lt;Form&gt;`의 `validationMode` prop보다 이 값이 우선 적용됩니다.<br /><br />- `onSubmit`: 폼이 제출될 때 유효성을 검사하며, 제출 후 변경 시 재검사합니다.<br />- `onBlur`: 컨트롤이 포커스를 잃을 때 유효성을 검사합니다.<br />- `onChange`: 컨트롤 값이 변경될 때마다 유효성을 검사합니다. |
| `render`                 | `ReactElement \| ((props: HTMLProps, state: Field.Root.State) => ReactElement)`                                            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                               |

### Field.Label

| Prop          | Type                                                                                                                                                                                                                                                           | Default      | Description                                                                                                                                                                                                                                                                                                                               |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `foreground`  | `white`, `inverse`, `primary-100`, `primary-200`, `secondary-100`, `success-100`, `success-200`, `warning-100`, `warning-200`, `danger-100`, `danger-200`, `hint-100`, `hint-200`, `contrast-100`, `contrast-200`, `secondary-200`, `normal-100`, `normal-200` | `normal-100` |                                                                                                                                                                                                                                                                                                                                           |
| `typography`  | `body1`, `display1`, `display2`, `display3`, `display4`, `heading1`, `heading2`, `heading3`, `heading4`, `heading5`, `heading6`, `subtitle1`, `subtitle2`, `body2`, `body3`, `body4`, `code1`, `code2`                                                         | `body2`      |                                                                                                                                                                                                                                                                                                                                           |
| `className`   | `string \| ((state: Field.Label.State) => (string \| undefined))`                                                                                                                                                                                              | -            | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                          |
| `nativeLabel` | `boolean`                                                                                                                                                                                                                                                      | -            | `render` prop으로 대체할 때 컴포넌트가 네이티브 `&lt;label&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링되는 요소가 label이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정하십시오.<br /><br />이 옵션은 `&lt;button&gt;` 컨트롤(예: `&lt;Select.Trigger&gt;`, `&lt;Combobox.Trigger&gt;`)에서 label 동작이 상속되는 것을 방지할 때 유용합니다. 레이블에 호버할 때 버튼에 `:hover`가 적용되는 현상이나, 레이블 클릭이 버튼에 전달되는 현상을 방지할 수 있습니다. |
| `style`       | `React.CSSProperties \| ((state: Field.Label.State) => (React.CSSProperties \| undefined))`                                                                                                                                                                    | -            | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                           |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Field.Label.State) => ReactElement)`                                                                                                                                                                               | -            | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                              |

### Field.Description

| Prop        | Type                                                                                              | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Field.Description.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Field.Description.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Field.Description.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Field.Error

| Prop        | Type                                                                                                                                                                                  | Default | Description                                                                                                     |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
| `className` | `string \| ((state: Field.Success.State) => (string \| undefined))`                                                                                                                   | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                |
| `match`     | `boolean`, `"badInput"`, `"customError"`, `"patternMismatch"`, `"rangeOverflow"`, `"rangeUnderflow"`, `"stepMismatch"`, `"tooLong"`, `"tooShort"`, `"typeMismatch"`, `"valueMissing"` | -       | 필드의 [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)에 따라 오류 메시지를 표시할지 여부를 지정합니다. |
| `style`     | `React.CSSProperties \| ((state: Field.Success.State) => (React.CSSProperties \| undefined))`                                                                                         | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Field.Success.State) => ReactElement)`                                                                                                    | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.    |

### Field.Success

| Prop        | Type                                                                                          | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Field.Success.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `match`     | `boolean`, `"valid"`                                                                          | `valid` | 필드의 [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)에 따라 성공 메시지 표시 여부를 설정합니다. |
| `style`     | `React.CSSProperties \| ((state: Field.Success.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Field.Success.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Field.Item

| Prop        | Type                                                                                       | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Field.Item.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `disabled`  | `boolean`                                                                                  | -       | 래핑된 컨트롤이 사용자 인터랙션을 무시할지 여부를 지정합니다.<br />`&lt;Field.Root&gt;`의 `disabled` prop이 이 값보다 우선합니다.                  |
| `style`     | `React.CSSProperties \| ((state: Field.Item.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Field.Item.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


# 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.mdx

FloatingBar는 하단에 고정되어 주요 액션을 포함하는 컴포넌트입니다.

***

title: 'FloatingBar'
site\_name: 'FloatingBar - Vapor Core'
description: 'FloatingBar는 하단에 고정되어 주요 액션을 포함하는 컴포넌트입니다.'
---------------------------------------------------------

<Demo name="floating-bar/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="floating-bar/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="floating-bar/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`                                                                                                                                                                                           | -       | 팝오버의 초기 열림 상태를 설정합니다.<br /><br />제어 컴포넌트로 렌더링하려면 `open` prop을 사용하십시오.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `onOpenChange`         | `(open: boolean, eventDetails: FloatingBar.Root.ChangeEventDetails) => void`                                                                                                                        | -       | 팝오버가 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `open`                 | `boolean`                                                                                                                                                                                           | -       | 팝오버가 현재 열려 있는지 여부를 지정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `actionsRef`           | `React.RefObject<PopoverRootActions \| null>`                                                                                                                                                       | -       | 명령형 액션에 대한 ref입니다.<br />- `unmount`: 팝오버를 수동으로 언마운트합니다.<br />외부에서 제어하는 닫기 애니메이션이 완료된 후 호출하십시오.<br />- `close`: 호출 시 팝오버를 명령형으로 닫습니다.                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `children`             | `null \| string \| number \| bigint \| false \| true \| ReactElement \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<AwaitedReactNode> \| ((arg: { payload: unknown; }) => ReactNode)` | -       | 팝오버의 콘텐츠를 지정합니다.<br />일반 React 노드 또는 활성 트리거의 `payload`를 인수로 받는 렌더 함수를 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `defaultTriggerId`     | `string`, `null`                                                                                                                                                                                    | -       | 팝오버와 연결할 트리거의 ID를 지정합니다.<br />`defaultOpen` prop과 함께 사용하여 초기에 열린 상태의 팝오버를 만들 때 유용합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `handle`               | `PopoverHandle<unknown>`                                                                                                                                                                            | -       | 팝오버를 트리거와 연결하기 위한 핸들을 지정합니다.<br />지정하면 외부 트리거에서 팝오버의 열림 상태를 제어할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `modal`                | `boolean`, `"trap-focus"`                                                                                                                                                                           | -       | 팝오버가 열릴 때 모달 상태로 전환할지 여부를 설정합니다.<br />- `true`: 사용자 상호작용이 팝오버 내부로 제한됩니다. 문서 페이지 스크롤이 잠기고 외부 요소에 대한 포인터 상호작용이 비활성화됩니다.<br />- `false`: 문서의 나머지 영역과 상호작용할 수 있습니다.<br />- `'trap-focus'`: 포커스가 팝오버 내부에 갇히지만, 문서 페이지 스크롤은 잠기지 않으며 팝오버 외부의 포인터 상호작용도 유지됩니다.<br /><br />`modal`이 `true`인 경우, `&lt;Popover.Popup&gt;` 내부에 `&lt;Popover.Close&gt;`가 렌더링될 때만 포커스 트래핑이 활성화됩니다. 필요하다면 Tailwind의 `sr-only` 유틸리티 등 직접 작성한 CSS로 시각적으로 숨길 수 있습니다.<br /><br />`modal`이 `'trap-focus'`인 경우, 터치 스크린 리더가 팝업을 벗어날 수 있도록 `&lt;Popover.Popup&gt;` 내부에 `&lt;Popover.Close&gt;`를 렌더링하십시오. |
| `onOpenChangeComplete` | `(open: boolean) => void`                                                                                                                                                                           | -       | 팝오버가 열리거나 닫힐 때 모든 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `triggerId`            | `string`, `null`                                                                                                                                                                                    | -       | 팝오버와 연결할 트리거의 ID를 지정합니다.<br />`open` prop과 함께 사용하여 제어 팝오버를 만들 때 유용합니다.<br />비제어 팝오버(즉, `open` prop을 설정하지 않은 경우)에서는 이 prop을 지정할 필요가 없습니다.                                                                                                                                                                                                                                                                                                                                                                                                                          |

### FloatingBar.Trigger

| Prop           | Type                                                                                                | Default | Description                                                                                                                             |
| -------------- | --------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `className`    | `string \| ((state: FloatingBar.Trigger.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                        |
| `closeDelay`   | `number`                                                                                            | -       | 호버로 열린 팝오버를 닫기까지 대기할 시간을 밀리초 단위로 지정합니다.<br /><br />`openOnHover` prop이 필요합니다.                                                           |
| `delay`        | `number`                                                                                            | -       | 호버 시 팝오버가 열리기까지 대기할 시간을 밀리초 단위로 지정합니다.<br /><br />`openOnHover` prop이 필요합니다.                                                            |
| `handle`       | `PopoverHandle<unknown>`                                                                            | -       | 트리거를 팝오버와 연결하기 위한 핸들을 지정합니다.                                                                                                            |
| `nativeButton` | `boolean`                                                                                           | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링하는지 여부를 지정합니다.<br />렌더링되는 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정하십시오. |
| `openOnHover`  | `boolean`                                                                                           | -       | 트리거에 호버할 때 팝오버도 열릴지 여부를 지정합니다.                                                                                                          |
| `payload`      | `unknown`                                                                                           | -       | 팝오버가 열릴 때 전달할 페이로드를 지정합니다.                                                                                                              |
| `style`        | `React.CSSProperties \| ((state: FloatingBar.Trigger.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                         |
| `render`       | `ReactElement \| ((props: HTMLProps, state: FloatingBar.Trigger.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                            |

### FloatingBar.Close

| Prop           | Type                                                                                              | Default | Description                                                                                                                          |
| -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: FloatingBar.Close.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `nativeButton` | `boolean`                                                                                         | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: FloatingBar.Close.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: FloatingBar.Close.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

### FloatingBar.Popup

| Prop            | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`     | `string \| ((state: FloatingBar.Popup.State) => (string \| undefined))`                                                               | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                  |
| `portalElement` | `ReactElement<FloatingBarPortalPrimitive.Props, string \| JSXElementConstructor<any>>`                                                | -       | FloatingBar.PortalPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 FloatingBar.PortalPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                                                                                                                                                  |
| `finalFocus`    | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 팝오버가 닫힐 때 포커스를 이동할 요소를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 유형(`mouse`, `touch`, `pen`, `keyboard`)과 함께 호출됩니다.<br />  포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`, 기본 동작으로 폴백하려면 `null`, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다.                                                                                                      |
| `initialFocus`  | `false \| true \| React.RefObject<HTMLElement \| null> \| ((openType: InteractionType) => (boolean \| void \| HTMLElement \| null))`  | -       | 팝오버가 열릴 때 포커스를 이동할 요소를 설정합니다.<br />기본적으로 팝업 내부의 첫 번째 탭 가능한 요소로 포커스가 이동하지만, 터치로 팝오버가 열린 경우에는 가상 키보드 열림을 방지하기 위해 팝업 자체에 포커스를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(첫 번째 탭 가능한 요소 또는 팝업)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 유형(`mouse`, `touch`, `pen`, `keyboard`)과 함께 호출됩니다.<br />  포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`, 기본 동작으로 폴백하려면 `null`, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다. |
| `style`         | `React.CSSProperties \| ((state: FloatingBar.Popup.State) => (React.CSSProperties \| undefined))`                                     | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                   |
| `render`        | `ReactElement \| ((props: HTMLProps, state: FloatingBar.Popup.State) => ReactElement)`                                                | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                      |

### FloatingBar.PortalPrimitive

| Prop          | Type                                                                                                        | Default | Description                                                                                                  |
| ------------- | ----------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: FloatingBar.PortalPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `container`   | `HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`                   | -       | 포털 요소를 렌더링할 부모 요소를 지정합니다.                                                                                    |
| `keepMounted` | `boolean`                                                                                                   | -       | 팝업이 숨겨진 동안 포털을 DOM에 마운트된 상태로 유지할지 여부를 지정합니다.                                                                 |
| `style`       | `React.CSSProperties \| ((state: FloatingBar.PortalPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: FloatingBar.PortalPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### FloatingBar.PositionerPrimitive

| Prop                    | Type                                                                                                                                                      | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`             | `string \| ((state: FloatingBar.PositionerPrimitive.State) => (string \| undefined))`                                                                     | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `align`                 | `Align`                                                                                                                                                   | -       | 지정된 side를 기준으로 팝업의 정렬 방식을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `alignOffset`           | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | -       | 정렬 축 방향의 추가 오프셋을 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 오프셋을 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `anchor`                | `null \| Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => (Element \| VirtualElement \| null))`                                    | -       | 팝업을 배치할 기준 요소를 설정합니다.<br />기본적으로 트리거를 기준으로 팝업이 배치됩니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `arrowPadding`          | `number`                                                                                                                                                  | -       | 화살표와 팝업 모서리 사이의 최소 거리를 설정합니다.<br /><br />팝업의 둥근 모서리 바깥으로 화살표 요소가 벗어나지 않도록 할 때 사용합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `collisionAvoidance`    | `CollisionAvoidance`                                                                                                                                      | -       | 팝업을 배치할 때 충돌을 처리하는 방식을 설정합니다.<br /><br />`side`는 선호하는 배치 축(`top`/`bottom` 또는 `left`/`right`)의 오버플로를 처리합니다:<br />- `'flip'`: 요청한 side가 맞으면 유지하고, 맞지 않으면 반대 side(`top`과 `bottom`, 또는 `left`와 `right`)를 시도합니다.<br />- `'shift'`: side를 변경하지 않고 요청한 side를 유지하면서 클리핑 경계 내에서 팝업을 이동시켜 보이도록 합니다.<br />- `'none'`: side 축 오버플로를 보정하지 않습니다.<br /><br />`align`은 정렬 축(`start`/`center`/`end`)의 오버플로를 처리합니다:<br />- `'flip'`: side는 유지하되, 요청한 정렬이 오버플로되면 `start`와 `end`를 교체합니다.<br />- `'shift'`: side와 요청한 정렬을 유지하면서 팝업을 정렬 축을 따라 조금씩 이동시켜 맞춥니다.<br />- `'none'`: 정렬 축 오버플로를 보정하지 않습니다.<br /><br />`fallbackAxisSide`는 선호 축이 맞지 않을 때 수직 축의 폴백 동작을 처리합니다:<br />- `'start'`: 수직 축 폴백을 허용하고 논리적 시작 side를 먼저 시도합니다(LTR에서 `bottom` 전에 `top`, 또는 `right` 전에 `left`).<br />- `'end'`: 수직 축 폴백을 허용하고 논리적 끝 side를 먼저 시도합니다(LTR에서 `top` 전에 `bottom`, 또는 `left` 전에 `right`).<br />- `'none'`: 수직 축으로 폴백하지 않습니다.<br /><br />`side`가 `'shift'`인 경우, `align`을 명시적으로 설정하면 `'shift'` 또는 `'none'`만 지원됩니다.<br />`align`을 생략하면 기본값은 `'flip'`입니다. |
| `collisionBoundary`     | `Boundary`                                                                                                                                                | -       | 팝업이 벗어나지 않도록 제한할 영역을 나타내는 요소 또는 사각형을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `collisionPadding`      | `Padding`                                                                                                                                                 | -       | 충돌 경계 모서리로부터 유지할 추가 여백을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `disableAnchorTracking` | `boolean`                                                                                                                                                 | -       | 팝업이 배치 앵커의 레이아웃 변화를 추적하지 않도록 설정할지 여부를 지정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `positionMethod`        | `fixed`, `absolute`                                                                                                                                       | -       | 사용할 CSS `position` 속성을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `side`                  | `Side`                                                                                                                                                    | -       | 팝업을 앵커 요소의 어느 side에 배치할지 설정합니다.<br />충돌을 피하기 위해 자동으로 변경될 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `sideOffset`            | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | -       | 앵커와 팝업 사이의 거리를 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 거리를 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `sticky`                | `boolean`                                                                                                                                                 | -       | 앵커 요소가 스크롤되어 뷰포트 밖으로 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부를 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `style`                 | `React.CSSProperties \| ((state: FloatingBar.PositionerPrimitive.State) => (React.CSSProperties \| undefined))`                                           | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `render`                | `ReactElement \| ((props: HTMLProps, state: FloatingBar.PositionerPrimitive.State) => ReactElement)`                                                      | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

### FloatingBar.PopupPrimitive

| Prop           | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`    | `string \| ((state: FloatingBar.Popup.State) => (string \| undefined))`                                                               | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                  |
| `finalFocus`   | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 팝오버가 닫힐 때 포커스를 이동할 요소를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 유형(`mouse`, `touch`, `pen`, `keyboard`)과 함께 호출됩니다.<br />  포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`, 기본 동작으로 폴백하려면 `null`, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다.                                                                                                      |
| `initialFocus` | `false \| true \| React.RefObject<HTMLElement \| null> \| ((openType: InteractionType) => (boolean \| void \| HTMLElement \| null))`  | -       | 팝오버가 열릴 때 포커스를 이동할 요소를 설정합니다.<br />기본적으로 팝업 내부의 첫 번째 탭 가능한 요소로 포커스가 이동하지만, 터치로 팝오버가 열린 경우에는 가상 키보드 열림을 방지하기 위해 팝업 자체에 포커스를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(첫 번째 탭 가능한 요소 또는 팝업)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 유형(`mouse`, `touch`, `pen`, `keyboard`)과 함께 호출됩니다.<br />  포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`, 기본 동작으로 폴백하려면 `null`, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다. |
| `style`        | `React.CSSProperties \| ((state: FloatingBar.Popup.State) => (React.CSSProperties \| undefined))`                                     | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                   |
| `render`       | `ReactElement \| ((props: HTMLProps, state: FloatingBar.Popup.State) => ReactElement)`                                                | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                      |


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

Form은 사용자 입력을 수집하고 유효성 검사를 수행하는 폼 컨테이너입니다.

***

title: 'Form'
site\_name: 'Form - Vapor Core'
description: 'Form은 사용자 입력을 수집하고 유효성 검사를 수행하는 폼 컨테이너입니다.'
---------------------------------------------------------

<Demo name="form/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="form/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="form/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 \| ((state: Form.State) => (string \| undefined))`                             | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                   |
| `actionsRef`     | `React.RefObject<FormActions \| null>`                                                 | -       | 명령형 액션에 대한 ref입니다.<br />- `validate`: 호출 시 모든 필드의 유효성을 검사합니다. 단일 필드만 검사하려면 필드 이름을 선택적으로 전달할 수 있습니다.                                                                                                                                                |
| `errors`         | `Errors`                                                                               | -       | 외부에서 반환된 유효성 검사 오류를 지정합니다. 일반적으로 서버 또는 폼 액션의 제출 후 반환됩니다.<br />키는 `&lt;Field.Root&gt;`의 `name` 속성에 대응하고, 값은 해당 필드와 관련된 오류에 대응하는 객체여야 합니다.                                                                                                           |
| `onFormSubmit`   | `(formValues: Form.SubmitEventDetails, eventDetails: Form.SubmitEventDetails) => void` | -       | 폼이 제출될 때 호출되는 이벤트 핸들러입니다.<br />사용 시 네이티브 submit 이벤트에 `preventDefault()`가 호출됩니다.                                                                                                                                                                    |
| `style`          | `React.CSSProperties \| ((state: Form.State) => (React.CSSProperties \| undefined))`   | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                    |
| `validationMode` | `FormValidationMode`                                                                   | -       | 폼의 유효성 검사 시점을 설정합니다.<br />`&lt;Field.Root&gt;`의 `validationMode` prop이 이 값보다 우선합니다.<br /><br />- `onSubmit` (기본값): 폼 제출 시 필드의 유효성을 검사하며, 이후 변경 시마다 재검사합니다.<br />- `onBlur`: 필드가 포커스를 잃을 때 유효성을 검사합니다.<br />- `onChange`: 필드 값이 변경될 때마다 유효성을 검사합니다. |
| `render`         | `ReactElement \| ((props: HTMLProps, state: Form.State) => ReactElement)`              | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                       |


# 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.mdx

IconButton은 특정 작업이나 기능을 나타내며, 텍스트 없이 아이콘만으로 명령을 전달하는 버튼입니다.

***

title: 'IconButton'
site\_name: 'IconButton - Vapor Core'
description: 'IconButton은 특정 작업이나 기능을 나타내며, 텍스트 없이 아이콘만으로 명령을 전달하는 버튼입니다.'
--------------------------------------------------------------------------

<Demo name="icon-button/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="icon-button/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="icon-button/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="icon-button/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="icon-button/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="icon-button/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`                         | -        | 버튼에 적용할 색상 팔레트를 지정합니다. 모든 시각적 variant의 배경, 텍스트, 테두리 색상을 설정합니다. 기본값: `'primary'`                                                      |
| `shape`                 | `circle`, `square`                                                                         | `square` |                                                                                                                                      |
| `size`                  | `sm`, `md`, `lg`, `xl`                                                                     | -        | 버튼의 크기를 지정합니다. 높이, 패딩, 타이포그래피를 설정합니다. 기본값: `'md'`                                                                                    |
| `variant`               | `fill`, `outline`, `ghost`                                                                 | -        | 버튼의 시각적 스타일을 지정합니다. 기본값: `'fill'`                                                                                                    |
| `className`             | `string \| ((state: IconButton.State) => (string \| undefined))`                           | -        | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `focusableWhenDisabled` | `boolean`                                                                                  | -        | 버튼이 비활성화 상태일 때 포커스 가능 여부를 지정합니다.                                                                                                     |
| `nativeButton`          | `boolean`                                                                                  | -        | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`                 | `React.CSSProperties \| ((state: IconButton.State) => (React.CSSProperties \| undefined))` | -        | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`                | `ReactElement \| ((props: HTMLProps, state: IconButton.State) => ReactElement)`            | -        | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |


# 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.mdx

InputGroup은 입력 필드(TextInput, Textarea)와 관련 요소들을 그룹화하여 문자 수 카운터와 같은 추가 기능을 제공합니다.

***

title: 'InputGroup'
site\_name: 'InputGroup - Vapor Core'
description: 'InputGroup은 입력 필드(TextInput, Textarea)와 관련 요소들을 그룹화하여 문자 수 카운터와 같은 추가 기능을 제공합니다.'
-----------------------------------------------------------------------------------------------

<Demo name="input-group/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="input-group/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 \| ((state: InputGroupRoot.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: InputGroupRoot.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### InputGroup.Counter

| Prop        | Type                                                                                                                                                                            | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `children`  | `null \| string \| number \| bigint \| false \| true \| ReactElement \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode> \| ((props: RenderProps) => ReactNode)` | -       |                                                                                                              |
| `className` | `string \| ((state: InputGroupCounter.State) => (string \| undefined))`                                                                                                         | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: InputGroupCounter.State) => ReactElement)`                                                                                          | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

드롭다운 Menu와 컨텍스트 Menu를 제공하는 컴포넌트입니다

***

title: 'Menu'
site\_name: 'Menu - Vapor Core'
description: '드롭다운 Menu와 컨텍스트 Menu를 제공하는 컴포넌트입니다'
-------------------------------------------------

<Demo name="menu/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="menu/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="menu/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="menu/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="menu/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="menu/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="menu/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`                                                                                                                                                                                           | -       | 메뉴의 초기 열림 여부를 지정합니다.<br /><br />제어 메뉴를 렌더링하려면 `open` prop을 사용하십시오.                                                                                            |
| `onOpenChange`         | `(open: boolean, eventDetails: Menu.RadioGroup.ChangeEventDetails) => void`                                                                                                                         | -       | 메뉴가 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다.                                                                                                                                |
| `open`                 | `boolean`                                                                                                                                                                                           | -       | 메뉴가 현재 열려 있는지 여부를 지정합니다.                                                                                                                                      |
| `actionsRef`           | `React.RefObject<MenuRootActions \| null>`                                                                                                                                                          | -       | 명령형 액션에 대한 ref를 지정합니다.<br />- `unmount`: 메뉴를 수동으로 언마운트합니다. 외부에서 제어하는 닫힘 애니메이션이 완료된 후 호출하십시오.<br />- `close`: 지정하면 메뉴를 명령형으로 닫을 수 있습니다.                        |
| `children`             | `null \| string \| number \| bigint \| false \| true \| ReactElement \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<AwaitedReactNode> \| ((arg: { payload: unknown; }) => ReactNode)` | -       | 팝오버의 콘텐츠를 지정합니다.<br />일반 React 노드 또는 활성 트리거의 `payload`를 인수로 받는 렌더 함수를 사용할 수 있습니다.                                                                             |
| `closeParentOnEsc`     | `boolean`                                                                                                                                                                                           | -       | 서브메뉴에서 Escape 키를 눌렀을 때 전체 메뉴를 닫을지, 현재 자식 메뉴만 닫을지를 설정합니다.                                                                                                      |
| `defaultTriggerId`     | `string`, `null`                                                                                                                                                                                    | -       | 팝오버와 연결할 트리거의 ID를 지정합니다.<br />`defaultOpen` prop과 함께 사용하여 초기에 열린 상태의 팝오버를 만들 때 유용합니다.                                                                         |
| `disabled`             | `boolean`                                                                                                                                                                                           | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                                                               |
| `handle`               | `MenuHandle<unknown>`                                                                                                                                                                               | -       | 메뉴를 트리거와 연결하는 핸들입니다.<br />지정하면 외부 트리거가 메뉴의 열림 상태를 설정할 수 있습니다.                                                                                                 |
| `highlightItemOnHover` | `boolean`                                                                                                                                                                                           | -       | 포인터를 항목 위로 이동할 때 해당 항목을 강조 표시할지 여부를 설정합니다.<br />이 prop을 비활성화하면 CSS `:hover`와 `:focus`(`data-highlighted`) 상태를 구분할 수 있습니다.                                     |
| `loopFocus`            | `boolean`                                                                                                                                                                                           | -       | 화살표 키로 목록의 끝에 도달했을 때 키보드 포커스를 첫 번째 항목으로 순환할지 여부를 설정합니다.                                                                                                       |
| `modal`                | `boolean`                                                                                                                                                                                           | -       | 메뉴가 열릴 때 모달 상태로 진입할지 여부를 설정합니다.<br />- `true`: 사용자 상호작용이 메뉴로 제한되며, 문서 페이지 스크롤이 잠기고 외부 요소에 대한 포인터 상호작용이 비활성화됩니다.<br />- `false`: 문서의 나머지 부분과의 사용자 상호작용이 허용됩니다. |
| `onOpenChangeComplete` | `(open: boolean) => void`                                                                                                                                                                           | -       | 메뉴가 닫힐 때 모든 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다.                                                                                                                     |
| `orientation`          | `MenuRootOrientation`                                                                                                                                                                               | -       | 메뉴의 시각적 방향을 설정합니다.<br />로빙 포커스가 위/아래 또는 왼쪽/오른쪽 화살표 키를 사용할지 결정합니다.                                                                                             |
| `triggerId`            | `string`, `null`                                                                                                                                                                                    | -       | 팝오버와 연결할 트리거의 ID를 지정합니다.<br />`open` prop과 함께 사용하여 제어 팝오버를 만들 때 유용합니다.<br />비제어 팝오버(즉, `open` prop을 설정하지 않은 경우)에서는 이 prop을 지정할 필요가 없습니다.                      |

### Menu.Trigger

| Prop           | Type                                                                                         | Default | Description                                                                                                                          |
| -------------- | -------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: Menu.Trigger.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `children`     | `ReactNode`                                                                                  | -       |                                                                                                                                      |
| `closeDelay`   | `number`                                                                                     | -       | 호버로 열린 메뉴를 닫기 전에 대기할 시간을 지정합니다.<br />밀리초 단위로 설정합니다.<br /><br />`openOnHover` prop이 필요합니다.                                            |
| `delay`        | `number`                                                                                     | -       | 호버 시 메뉴를 열기 전에 대기할 시간을 밀리초 단위로 지정합니다.<br /><br />`openOnHover` prop이 필요합니다.                                                          |
| `disabled`     | `boolean`                                                                                    | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                                      |
| `handle`       | `MenuHandle<unknown>`                                                                        | -       | 트리거를 메뉴와 연결하는 핸들을 지정합니다.                                                                                                             |
| `nativeButton` | `boolean`                                                                                    | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `openOnHover`  | `boolean`                                                                                    | -       | 트리거를 호버할 때도 메뉴를 열지 여부를 설정합니다.                                                                                                        |
| `payload`      | `unknown`                                                                                    | -       | 메뉴가 열릴 때 메뉴에 전달할 페이로드를 지정합니다.                                                                                                        |
| `style`        | `React.CSSProperties \| ((state: Menu.Trigger.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Menu.Trigger.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

### Menu.Popup

| Prop                | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                            |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`         | `string \| ((state: Menu.SubmenuPopup.State) => (string \| undefined))`                                                               | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                       |
| `portalElement`     | `ReactElement<MenuPortalPrimitive.Props, string \| JSXElementConstructor<any>>`                                                       | -       | Menu.PortalPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 Menu.PortalPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                                     |
| `positionerElement` | `ReactElement<MenuPositionerPrimitive.Props, string \| JSXElementConstructor<any>>`                                                   | -       | Menu.PositionerPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 Menu.PositionerPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                             |
| `children`          | `ReactNode`                                                                                                                           | -       |                                                                                                                                                                                                                                                                                                                                        |
| `finalFocus`        | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 메뉴가 닫힐 때 포커스를 이동할 요소를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 유형(`mouse`, `touch`, `pen`, `keyboard`)을 인수로 받아 호출됩니다. 포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false` 또는 `undefined`를 반환합니다. |
| `id`                | `string`                                                                                                                              | -       |                                                                                                                                                                                                                                                                                                                                        |
| `style`             | `React.CSSProperties \| ((state: Menu.SubmenuPopup.State) => (React.CSSProperties \| undefined))`                                     | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                        |
| `render`            | `ReactElement \| ((props: HTMLProps, state: Menu.SubmenuPopup.State) => ReactElement)`                                                | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                           |

#### Menu.PortalPrimitive

| Prop          | Type                                                                                                 | Default | Description                                                                                                  |
| ------------- | ---------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Menu.PortalPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `container`   | `HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`            | -       | 포털 요소를 렌더링할 부모 요소를 지정합니다.                                                                                    |
| `keepMounted` | `boolean`                                                                                            | -       | 팝업이 숨겨진 동안 포털을 DOM에 마운트된 상태로 유지할지 여부를 지정합니다.                                                                 |
| `style`       | `React.CSSProperties \| ((state: Menu.PortalPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Menu.PortalPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Menu.PositionerPrimitive

| Prop                    | Type                                                                                                                                                      | Default  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`             | `string \| ((state: Menu.PositionerPrimitive.State) => (string \| undefined))`                                                                            | -        | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `align`                 | `Align`                                                                                                                                                   | `start`  | 지정된 side를 기준으로 팝업의 정렬 방식을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `alignOffset`           | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | -        | 정렬 축 방향의 추가 오프셋을 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 오프셋을 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `anchor`                | `null \| Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => (Element \| VirtualElement \| null))`                                    | -        | 팝업을 배치할 기준 요소를 설정합니다.<br />기본적으로 트리거를 기준으로 팝업이 배치됩니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `arrowPadding`          | `number`                                                                                                                                                  | -        | 화살표와 팝업 모서리 사이의 최소 거리를 설정합니다.<br /><br />팝업의 둥근 모서리 바깥으로 화살표 요소가 벗어나지 않도록 할 때 사용합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `collisionAvoidance`    | `CollisionAvoidance`                                                                                                                                      | -        | 팝업을 배치할 때 충돌을 처리하는 방식을 설정합니다.<br /><br />`side`는 선호하는 배치 축(`top`/`bottom` 또는 `left`/`right`)의 오버플로를 처리합니다:<br />- `'flip'`: 요청한 side가 맞으면 유지하고, 맞지 않으면 반대 side(`top`과 `bottom`, 또는 `left`와 `right`)를 시도합니다.<br />- `'shift'`: side를 변경하지 않고 요청한 side를 유지하면서 클리핑 경계 내에서 팝업을 이동시켜 보이도록 합니다.<br />- `'none'`: side 축 오버플로를 보정하지 않습니다.<br /><br />`align`은 정렬 축(`start`/`center`/`end`)의 오버플로를 처리합니다:<br />- `'flip'`: side는 유지하되, 요청한 정렬이 오버플로되면 `start`와 `end`를 교체합니다.<br />- `'shift'`: side와 요청한 정렬을 유지하면서 팝업을 정렬 축을 따라 조금씩 이동시켜 맞춥니다.<br />- `'none'`: 정렬 축 오버플로를 보정하지 않습니다.<br /><br />`fallbackAxisSide`는 선호 축이 맞지 않을 때 수직 축의 폴백 동작을 처리합니다:<br />- `'start'`: 수직 축 폴백을 허용하고 논리적 시작 side를 먼저 시도합니다(LTR에서 `bottom` 전에 `top`, 또는 `right` 전에 `left`).<br />- `'end'`: 수직 축 폴백을 허용하고 논리적 끝 side를 먼저 시도합니다(LTR에서 `top` 전에 `bottom`, 또는 `left` 전에 `right`).<br />- `'none'`: 수직 축으로 폴백하지 않습니다.<br /><br />`side`가 `'shift'`인 경우, `align`을 명시적으로 설정하면 `'shift'` 또는 `'none'`만 지원됩니다.<br />`align`을 생략하면 기본값은 `'flip'`입니다. |
| `collisionBoundary`     | `Boundary`                                                                                                                                                | -        | 팝업이 벗어나지 않도록 제한할 영역을 나타내는 요소 또는 사각형을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `collisionPadding`      | `Padding`                                                                                                                                                 | -        | 충돌 경계 모서리로부터 유지할 추가 여백을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `disableAnchorTracking` | `boolean`                                                                                                                                                 | -        | 팝업이 배치 앵커의 레이아웃 변화를 추적하지 않도록 설정할지 여부를 지정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `positionMethod`        | `fixed`, `absolute`                                                                                                                                       | -        | 사용할 CSS `position` 속성을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `side`                  | `Side`                                                                                                                                                    | `bottom` | 팝업을 앵커 요소의 어느 side에 배치할지 설정합니다.<br />충돌을 피하기 위해 자동으로 변경될 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `sideOffset`            | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | `4`      | 앵커와 팝업 사이의 거리를 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 거리를 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `sticky`                | `boolean`                                                                                                                                                 | -        | 앵커 요소가 스크롤되어 뷰포트 밖으로 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부를 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `style`                 | `React.CSSProperties \| ((state: Menu.PositionerPrimitive.State) => (React.CSSProperties \| undefined))`                                                  | -        | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `render`                | `ReactElement \| ((props: HTMLProps, state: Menu.PositionerPrimitive.State) => ReactElement)`                                                             | -        | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

#### Menu.PopupPrimitive

| Prop         | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                            |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`  | `string \| ((state: Menu.SubmenuPopup.State) => (string \| undefined))`                                                               | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                       |
| `children`   | `ReactNode`                                                                                                                           | -       |                                                                                                                                                                                                                                                                                                                                        |
| `finalFocus` | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 메뉴가 닫힐 때 포커스를 이동할 요소를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 유형(`mouse`, `touch`, `pen`, `keyboard`)을 인수로 받아 호출됩니다. 포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false` 또는 `undefined`를 반환합니다. |
| `id`         | `string`                                                                                                                              | -       |                                                                                                                                                                                                                                                                                                                                        |
| `style`      | `React.CSSProperties \| ((state: Menu.SubmenuPopup.State) => (React.CSSProperties \| undefined))`                                     | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                        |
| `render`     | `ReactElement \| ((props: HTMLProps, state: Menu.SubmenuPopup.State) => ReactElement)`                                                | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                           |

### Menu.Item

| Prop           | Type                                                                                      | Default | Description                                                                                                      |
| -------------- | ----------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| `className`    | `string \| ((state: Menu.Item.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `closeOnClick` | `boolean`                                                                                 | -       | 항목을 클릭했을 때 메뉴를 닫을지 여부를 지정합니다.                                                                                    |
| `disabled`     | `boolean`                                                                                 | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `id`           | `string`                                                                                  | -       |                                                                                                                  |
| `label`        | `string`                                                                                  | -       | 키보드 텍스트 탐색 중 항목을 매칭할 때 사용할 텍스트 레이블을 재정의합니다.                                                                      |
| `nativeButton` | `boolean`                                                                                 | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `onClick`      | `(event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void`              | -       | 메뉴 항목의 클릭 핸들러를 지정합니다.                                                                                            |
| `style`        | `React.CSSProperties \| ((state: Menu.Item.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Menu.Item.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

### Menu.Separator

| Prop          | Type                                                                                           | Default | Description                                                                                                  |
| ------------- | ---------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Menu.Separator.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `orientation` | `Orientation`                                                                                  | -       | 구분선의 방향을 설정합니다.                                                                                              |
| `style`       | `React.CSSProperties \| ((state: Menu.Separator.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Menu.Separator.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Menu.Group

| Prop        | Type                                                                                       | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Menu.Group.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `children`  | `ReactNode`                                                                                | -       | 컴포넌트의 콘텐츠를 지정합니다.                                                                                            |
| `style`     | `React.CSSProperties \| ((state: Menu.Group.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Menu.Group.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Menu.GroupLabel

| Prop        | Type                                                                                            | Default | Description                                                                                                  |
| ----------- | ----------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Menu.GroupLabel.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Menu.GroupLabel.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Menu.GroupLabel.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Menu.SubmenuRoot

| Prop                   | Type                                                                                  | Default | Description                                                                                                                            |
| ---------------------- | ------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultOpen`          | `boolean`                                                                             | -       | 메뉴의 초기 열림 여부를 지정합니다.<br /><br />제어 메뉴를 렌더링하려면 `open` prop을 사용하십시오.                                                                     |
| `onOpenChange`         | `(open: boolean, eventDetails: Menu.RadioGroup.ChangeEventDetails) => void`           | -       | 메뉴가 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다.                                                                                                         |
| `open`                 | `boolean`                                                                             | -       | 메뉴가 현재 열려 있는지 여부를 지정합니다.                                                                                                               |
| `className`            | `string \| ((state: Menu.SubmenuRoot.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                       |
| `style`                | `CSSProperties \| ((state: Menu.SubmenuRoot.State) => (CSSProperties \| undefined))`  | -       | 요소에 적용할 스타일 객체, 또는 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수를 지정합니다.                                                                              |
| `actionsRef`           | `React.RefObject<MenuRootActions \| null>`                                            | -       | 명령형 액션에 대한 ref를 지정합니다.<br />- `unmount`: 메뉴를 수동으로 언마운트합니다. 외부에서 제어하는 닫힘 애니메이션이 완료된 후 호출하십시오.<br />- `close`: 지정하면 메뉴를 명령형으로 닫을 수 있습니다. |
| `children`             | `ReactNode`                                                                           | -       | 서브메뉴의 콘텐츠를 지정합니다.                                                                                                                      |
| `closeParentOnEsc`     | `boolean`                                                                             | `false` | 서브메뉴에서 Escape 키를 눌렀을 때 전체 메뉴를 닫을지, 현재 자식 메뉴만 닫을지를 설정합니다.                                                                               |
| `disabled`             | `boolean`                                                                             | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                                        |
| `highlightItemOnHover` | `boolean`                                                                             | -       | 포인터를 항목 위로 이동할 때 해당 항목을 강조 표시할지 여부를 설정합니다.<br />이 prop을 비활성화하면 CSS `:hover`와 `:focus`(`data-highlighted`) 상태를 구분할 수 있습니다.              |
| `loopFocus`            | `boolean`                                                                             | -       | 화살표 키로 목록의 끝에 도달했을 때 키보드 포커스를 첫 번째 항목으로 순환할지 여부를 설정합니다.                                                                                |
| `onOpenChangeComplete` | `(open: boolean) => void`                                                             | -       | 메뉴가 닫힐 때 모든 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다.                                                                                              |
| `orientation`          | `MenuRootOrientation`                                                                 | -       | 메뉴의 시각적 방향을 설정합니다.<br />로빙 포커스가 위/아래 또는 왼쪽/오른쪽 화살표 키를 사용할지 결정합니다.                                                                      |
| `render`               | `ReactElement \| ((props: HTMLProps, state: Menu.SubmenuRoot.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                           |

### Menu.SubmenuTriggerItem

| Prop           | Type                                                                                                    | Default | Description                                                                                                      |
| -------------- | ------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| `className`    | `string \| ((state: Menu.SubmenuTriggerItem.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `closeDelay`   | `number`                                                                                                | -       | 호버로 열린 메뉴를 닫기 전에 대기할 시간을 지정합니다.<br />밀리초 단위로 설정합니다.<br /><br />`openOnHover` prop이 필요합니다.                        |
| `delay`        | `number`                                                                                                | -       | 호버 시 메뉴를 열기 전에 대기할 시간을 밀리초 단위로 지정합니다.<br /><br />`openOnHover` prop이 필요합니다.                                      |
| `disabled`     | `boolean`                                                                                               | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `id`           | `string`                                                                                                | -       |                                                                                                                  |
| `label`        | `string`                                                                                                | -       | 키보드 텍스트 탐색 중 항목을 매칭할 때 사용할 텍스트 레이블을 재정의합니다.                                                                      |
| `nativeButton` | `boolean`                                                                                               | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `onClick`      | `(event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void`                            | -       |                                                                                                                  |
| `openOnHover`  | `boolean`                                                                                               | -       | 트리거를 호버할 때도 메뉴를 열지 여부를 설정합니다.                                                                                    |
| `style`        | `React.CSSProperties \| ((state: Menu.SubmenuTriggerItem.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Menu.SubmenuTriggerItem.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

### Menu.SubmenuPopup

| Prop                | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                            |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`         | `string \| ((state: Menu.SubmenuPopup.State) => (string \| undefined))`                                                               | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                       |
| `portalElement`     | `ReactElement<MenuPortalPrimitive.Props, string \| JSXElementConstructor<any>>`                                                       | -       | Menu.PortalPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 Menu.PortalPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                                     |
| `positionerElement` | `ReactElement<MenuPositionerPrimitive.Props, string \| JSXElementConstructor<any>>`                                                   | -       | Menu.PositionerPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 Menu.PositionerPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                             |
| `children`          | `ReactNode`                                                                                                                           | -       |                                                                                                                                                                                                                                                                                                                                        |
| `finalFocus`        | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 메뉴가 닫힐 때 포커스를 이동할 요소를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 유형(`mouse`, `touch`, `pen`, `keyboard`)을 인수로 받아 호출됩니다. 포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false` 또는 `undefined`를 반환합니다. |
| `id`                | `string`                                                                                                                              | -       |                                                                                                                                                                                                                                                                                                                                        |
| `style`             | `React.CSSProperties \| ((state: Menu.SubmenuPopup.State) => (React.CSSProperties \| undefined))`                                     | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                        |
| `render`            | `ReactElement \| ((props: HTMLProps, state: Menu.SubmenuPopup.State) => ReactElement)`                                                | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                           |

#### Menu.SubmenuPopupPrimitive

| Prop         | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                            |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`  | `string \| ((state: Menu.SubmenuPopup.State) => (string \| undefined))`                                                               | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                       |
| `children`   | `ReactNode`                                                                                                                           | -       |                                                                                                                                                                                                                                                                                                                                        |
| `finalFocus` | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 메뉴가 닫힐 때 포커스를 이동할 요소를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 유형(`mouse`, `touch`, `pen`, `keyboard`)을 인수로 받아 호출됩니다. 포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false` 또는 `undefined`를 반환합니다. |
| `id`         | `string`                                                                                                                              | -       |                                                                                                                                                                                                                                                                                                                                        |
| `style`      | `React.CSSProperties \| ((state: Menu.SubmenuPopup.State) => (React.CSSProperties \| undefined))`                                     | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                        |
| `render`     | `ReactElement \| ((props: HTMLProps, state: Menu.SubmenuPopup.State) => ReactElement)`                                                | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                           |

### Menu.CheckboxItem

| Prop              | Type                                                                                              | Default | Description                                                                                                      |
| ----------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| `checked`         | `boolean`                                                                                         | -       | 체크박스 항목이 현재 선택되어 있는지 여부를 지정합니다.<br /><br />비제어 체크박스 항목을 렌더링하려면 `defaultChecked` prop을 사용하십시오.                    |
| `defaultChecked`  | `boolean`                                                                                         | -       | 체크박스 항목의 초기 선택 여부를 지정합니다.<br /><br />제어 체크박스 항목을 렌더링하려면 `checked` prop을 사용하십시오.                                  |
| `onCheckedChange` | `(checked: boolean, eventDetails: Menu.RadioGroup.ChangeEventDetails) => void`                    | -       | 체크박스 항목이 선택되거나 해제될 때 호출되는 이벤트 핸들러입니다.                                                                            |
| `className`       | `string \| ((state: Menu.CheckboxItem.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `closeOnClick`    | `boolean`                                                                                         | -       | 항목을 클릭했을 때 메뉴를 닫을지 여부를 지정합니다.                                                                                    |
| `disabled`        | `boolean`                                                                                         | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `id`              | `string`                                                                                          | -       |                                                                                                                  |
| `label`           | `string`                                                                                          | -       | 키보드 텍스트 탐색 중 항목을 매칭할 때 사용할 텍스트 레이블을 재정의합니다.                                                                      |
| `nativeButton`    | `boolean`                                                                                         | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `onClick`         | `(event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void`                      | -       | 메뉴 항목의 클릭 핸들러를 지정합니다.                                                                                            |
| `style`           | `React.CSSProperties \| ((state: Menu.CheckboxItem.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`          | `ReactElement \| ((props: HTMLProps, state: Menu.CheckboxItem.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

#### Menu.CheckboxItemPrimitive

| Prop              | Type                                                                                              | Default | Description                                                                                                      |
| ----------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| `checked`         | `boolean`                                                                                         | -       | 체크박스 항목이 현재 선택되어 있는지 여부를 지정합니다.<br /><br />비제어 체크박스 항목을 렌더링하려면 `defaultChecked` prop을 사용하십시오.                    |
| `defaultChecked`  | `boolean`                                                                                         | -       | 체크박스 항목의 초기 선택 여부를 지정합니다.<br /><br />제어 체크박스 항목을 렌더링하려면 `checked` prop을 사용하십시오.                                  |
| `onCheckedChange` | `(checked: boolean, eventDetails: Menu.RadioGroup.ChangeEventDetails) => void`                    | -       | 체크박스 항목이 선택되거나 해제될 때 호출되는 이벤트 핸들러입니다.                                                                            |
| `className`       | `string \| ((state: Menu.CheckboxItem.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `closeOnClick`    | `boolean`                                                                                         | -       | 항목을 클릭했을 때 메뉴를 닫을지 여부를 지정합니다.                                                                                    |
| `disabled`        | `boolean`                                                                                         | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `id`              | `string`                                                                                          | -       |                                                                                                                  |
| `label`           | `string`                                                                                          | -       | 키보드 텍스트 탐색 중 항목을 매칭할 때 사용할 텍스트 레이블을 재정의합니다.                                                                      |
| `nativeButton`    | `boolean`                                                                                         | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `onClick`         | `(event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void`                      | -       | 메뉴 항목의 클릭 핸들러를 지정합니다.                                                                                            |
| `style`           | `React.CSSProperties \| ((state: Menu.CheckboxItem.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`          | `ReactElement \| ((props: HTMLProps, state: Menu.CheckboxItem.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

#### Menu.CheckboxItemIndicatorPrimitive

| Prop          | Type                                                                                                                | Default | Description                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Menu.CheckboxItemIndicatorPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `keepMounted` | `boolean`                                                                                                           | -       | 체크박스 항목이 선택되지 않은 상태일 때 HTML 요소를 DOM에 유지할지 여부를 지정합니다.                                                         |
| `style`       | `React.CSSProperties \| ((state: Menu.CheckboxItemIndicatorPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Menu.CheckboxItemIndicatorPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Menu.RadioGroup

| Prop            | Type                                                                                            | Default | Description                                                                                                  |
| --------------- | ----------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `defaultValue`  | `any`                                                                                           | -       | 초기에 선택될 라디오 항목의 비제어 값을 지정합니다.<br /><br />제어 라디오 그룹을 렌더링하려면 `value` prop을 사용하십시오.                             |
| `onValueChange` | `(value: any, eventDetails: Menu.RadioGroup.ChangeEventDetails) => void`                        | -       | 선택된 값이 변경될 때 호출되는 함수를 지정합니다.                                                                                 |
| `value`         | `any`                                                                                           | -       | 현재 선택되어야 할 라디오 항목의 제어 값을 지정합니다.<br /><br />비제어 라디오 그룹을 렌더링하려면 `defaultValue` prop을 사용하십시오.                   |
| `className`     | `string \| ((state: Menu.RadioGroup.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `children`      | `ReactNode`                                                                                     | -       | 컴포넌트의 콘텐츠를 지정합니다.                                                                                            |
| `disabled`      | `boolean`                                                                                       | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                              |
| `style`         | `React.CSSProperties \| ((state: Menu.RadioGroup.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`        | `ReactElement \| ((props: HTMLProps, state: Menu.RadioGroup.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Menu.RadioItem

| Prop           | Type                                                                                           | Default | Description                                                                                                      |
| -------------- | ---------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| **value**      | `any`                                                                                          | -       | 라디오 항목의 값을 지정합니다.<br />항목이 선택될 때 MenuRadioGroup에 설정될 값입니다.                                                       |
| `className`    | `string \| ((state: Menu.RadioItem.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `closeOnClick` | `boolean`                                                                                      | -       | 항목을 클릭했을 때 메뉴를 닫을지 여부를 지정합니다.                                                                                    |
| `disabled`     | `boolean`                                                                                      | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `id`           | `string`                                                                                       | -       |                                                                                                                  |
| `label`        | `string`                                                                                       | -       | 키보드 텍스트 탐색 중 항목을 매칭할 때 사용할 텍스트 레이블을 재정의합니다.                                                                      |
| `nativeButton` | `boolean`                                                                                      | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `onClick`      | `(event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void`                   | -       | 메뉴 항목의 클릭 핸들러를 지정합니다.                                                                                            |
| `style`        | `React.CSSProperties \| ((state: Menu.RadioItem.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Menu.RadioItem.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

#### Menu.RadioItemPrimitive

| Prop           | Type                                                                                           | Default | Description                                                                                                      |
| -------------- | ---------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| **value**      | `any`                                                                                          | -       | 라디오 항목의 값을 지정합니다.<br />항목이 선택될 때 MenuRadioGroup에 설정될 값입니다.                                                       |
| `className`    | `string \| ((state: Menu.RadioItem.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `closeOnClick` | `boolean`                                                                                      | -       | 항목을 클릭했을 때 메뉴를 닫을지 여부를 지정합니다.                                                                                    |
| `disabled`     | `boolean`                                                                                      | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `id`           | `string`                                                                                       | -       |                                                                                                                  |
| `label`        | `string`                                                                                       | -       | 키보드 텍스트 탐색 중 항목을 매칭할 때 사용할 텍스트 레이블을 재정의합니다.                                                                      |
| `nativeButton` | `boolean`                                                                                      | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `onClick`      | `(event: BaseUIEvent<React.MouseEvent<HTMLDivElement, MouseEvent>>) => void`                   | -       | 메뉴 항목의 클릭 핸들러를 지정합니다.                                                                                            |
| `style`        | `React.CSSProperties \| ((state: Menu.RadioItem.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Menu.RadioItem.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

#### Menu.RadioItemIndicatorPrimitive

| Prop          | Type                                                                                                             | Default | Description                                                                                                  |
| ------------- | ---------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Menu.RadioItemIndicatorPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `keepMounted` | `boolean`                                                                                                        | -       | 라디오 항목이 비활성 상태일 때 HTML 요소를 DOM에 유지할지 여부를 지정합니다.                                                              |
| `style`       | `React.CSSProperties \| ((state: Menu.RadioItemIndicatorPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Menu.RadioItemIndicatorPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


# 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.mdx

MultiSelect는 사용자가 여러 옵션 중에서 다중 선택할 수 있는 드롭다운 컴포넌트입니다. 선택된 값들은 배지 형태로 표시되며, 태그 선택, 필터링, 카테고리 선택 등에 사용됩니다.

***

title: 'MultiSelect'
site\_name: 'MultiSelect - Vapor Core'
description: 'MultiSelect는 사용자가 여러 옵션 중에서 다중 선택할 수 있는 드롭다운 컴포넌트입니다. 선택된 값들은 배지 형태로 표시되며, 태그 선택, 필터링, 카테고리 선택 등에 사용됩니다.'
-----------------------------------------------------------------------------------------------------------------------

<Demo name="multi-select/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="multi-select/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="multi-select/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="multi-select/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="multi-select/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="multi-select/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="multi-select/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`                                                                                                        | -       |                                                                                                                                                              |
| `size`                 | `sm`, `md`, `lg`, `xl`                                                                                           | -       |                                                                                                                                                              |
| `defaultOpen`          | `boolean`                                                                                                        | -       | 셀렉트 팝업의 초기 열림 여부를 지정합니다.<br /><br />제어 방식으로 렌더링하려면 `open` prop을 사용하십시오.                                                                                      |
| `defaultValue`         | `Value[] \| null`                                                                                                | -       | 셀렉트가 처음 렌더링될 때의 비제어 값을 지정합니다.<br /><br />제어 방식으로 렌더링하려면 `value` prop을 사용하십시오.                                                                                |
| `onOpenChange`         | `(open: boolean, eventDetails: MultiSelect.Root.ChangeEventDetails) => void`                                     | -       | 셀렉트 팝업이 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다.                                                                                                                           |
| `onValueChange`        | `(value: Value[], eventDetails: MultiSelect.Root.ChangeEventDetails) => void`                                    | -       | 셀렉트의 값이 변경될 때 호출되는 이벤트 핸들러입니다.                                                                                                                               |
| `open`                 | `boolean`                                                                                                        | -       | 셀렉트 팝업의 현재 열림 여부를 지정합니다.                                                                                                                                     |
| `value`                | `Value[] \| null`                                                                                                | -       | 셀렉트의 값을 지정합니다. 제어 방식으로 사용할 때 설정합니다.                                                                                                                          |
| `placeholder`          | `ReactNode`                                                                                                      | -       |                                                                                                                                                              |
| `actionsRef`           | `React.RefObject<SelectRootActions \| null>`                                                                     | -       | 명령형 액션에 대한 ref를 지정합니다.<br />- `unmount`: 셀렉트를 수동으로 언마운트합니다.<br />외부에서 제어하는 닫힘 애니메이션이 완료된 후 호출하십시오.                                                           |
| `autoComplete`         | `string`                                                                                                         | -       | 브라우저 자동 완성에 대한 힌트를 제공합니다.                                                                                                                                    |
| `children`             | `ReactNode`                                                                                                      | -       |                                                                                                                                                              |
| `disabled`             | `boolean`                                                                                                        | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                                                              |
| `form`                 | `string`                                                                                                         | -       | 숨겨진 input을 소유하는 폼을 식별합니다.<br />셀렉트가 폼 외부에 렌더링될 때 유용합니다.                                                                                                      |
| `highlightItemOnHover` | `boolean`                                                                                                        | -       | 포인터를 항목 위로 이동할 때 해당 항목을 강조 표시할지 여부를 설정합니다.<br />이 prop을 비활성화하면 CSS `:hover`와 `:focus`(`data-highlighted`) 상태를 구분할 수 있습니다.                                    |
| `id`                   | `string`                                                                                                         | -       | Select의 id를 지정합니다.                                                                                                                                           |
| `inputRef`             | `Ref<HTMLInputElement>`                                                                                          | -       | 숨겨진 input 요소에 접근하기 위한 ref를 지정합니다.                                                                                                                            |
| `isItemEqualToValue`   | `(itemValue: Value, value: Value) => boolean`                                                                    | -       | 셀렉트 항목의 값이 현재 선택된 값과 일치하는지 판단하는 커스텀 비교 로직을 지정합니다. 항목 값이 참조가 일치하지 않는 객체일 때 유용합니다.<br />기본값은 `Object.is` 비교입니다.                                                |
| `items`                | `Record<string, React.ReactNode> \| readonly { label: React.ReactNode; value: any; }[] \| readonly Group<any>[]` | -       | 셀렉트 팝업에 렌더링되는 항목의 데이터 구조를 지정합니다.<br />지정하면 `&lt;Select.Value&gt;`가 원시 값 대신 선택된 항목의 레이블을 렌더링합니다.                                                              |
| `itemToStringLabel`    | `(itemValue: Value) => string`                                                                                   | -       | 항목 값이 객체인 경우(`&lt;Select.Item value={object}&gt;`), 이 함수는 객체 값을 트리거에 표시할 문자열로 변환합니다.<br />객체의 형태가 `{ value, label }`이면 이 prop을 지정하지 않아도 label이 자동으로 사용됩니다.   |
| `itemToStringValue`    | `(itemValue: Value) => string`                                                                                   | -       | 항목 값이 객체인 경우(`&lt;Select.Item value={object}&gt;`), 이 함수는 객체 값을 폼 제출 시 사용할 문자열로 변환합니다.<br />객체의 형태가 `{ value, label }`이면 이 prop을 지정하지 않아도 value가 자동으로 사용됩니다. |
| `modal`                | `boolean`                                                                                                        | -       | 셀렉트가 열릴 때 모달 상태로 진입할지 여부를 설정합니다.<br />- `true`: 사용자 인터랙션이 셀렉트로 제한되며, 문서 페이지 스크롤이 잠기고 외부 요소에 대한 포인터 인터랙션이 비활성화됩니다.<br />- `false`: 나머지 문서와의 사용자 인터랙션이 허용됩니다.  |
| `name`                 | `string`                                                                                                         | -       | 폼이 제출될 때 필드를 식별하는 이름을 지정합니다.                                                                                                                                 |
| `onOpenChangeComplete` | `(open: boolean) => void`                                                                                        | -       | 셀렉트 팝업이 열리거나 닫힐 때 모든 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다.                                                                                                           |
| `readOnly`             | `boolean`                                                                                                        | -       | 사용자가 셀렉트 팝업에서 다른 옵션을 선택할 수 없도록 할지 여부를 지정합니다.                                                                                                                 |
| `required`             | `boolean`                                                                                                        | -       | 폼을 제출하기 전에 사용자가 반드시 값을 선택해야 하는지 여부를 지정합니다.                                                                                                                   |

### MultiSelect.Trigger

| Prop           | Type                                                                                                | Default | Description                                                                                                                          |
| -------------- | --------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: MultiSelect.Trigger.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `children`     | `ReactNode`                                                                                         | -       |                                                                                                                                      |
| `disabled`     | `boolean`                                                                                           | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                                      |
| `nativeButton` | `boolean`                                                                                           | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: MultiSelect.Trigger.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: MultiSelect.Trigger.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

#### MultiSelect.TriggerPrimitive

| Prop           | Type                                                                                                | Default            | Description                                                                                                                          |
| -------------- | --------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: MultiSelect.Trigger.State) => (string \| undefined))`                           | -                  | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `children`     | `ReactNode`                                                                                         | -                  |                                                                                                                                      |
| `disabled`     | `boolean`                                                                                           | -                  | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                                      |
| `nativeButton` | `boolean`                                                                                           | `true`             | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: MultiSelect.Trigger.State) => (React.CSSProperties \| undefined))` | -                  | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: MultiSelect.Trigger.State) => ReactElement)`            | `&lt;button /&gt;` | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

#### MultiSelect.TriggerIconPrimitive

| Prop        | Type                                                                                                             | Default | Description                                                                                                  |
| ----------- | ---------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: MultiSelect.TriggerIconPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: MultiSelect.TriggerIconPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: MultiSelect.TriggerIconPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### MultiSelect.ValuePrimitive

| Prop          | Type                                                                                                                                                                                | Default | Description                                                                                                  |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: MultiSelect.ValuePrimitive.State) => (string \| undefined))`                                                                                                    | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `children`    | `null \| string \| number \| bigint \| false \| true \| ReactElement \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<AwaitedReactNode> \| ((value: any) => ReactNode)` | -       | 선택된 값을 형식화하는 `ReactNode`를 반환하는 함수를 지정합니다.                                                                    |
| `placeholder` | `ReactNode`                                                                                                                                                                         | -       | 값이 선택되지 않았을 때 표시할 플레이스홀더 값을 지정합니다.<br />`children`이 지정된 경우 또는 `items`의 null 항목 레이블이 있는 경우 해당 값으로 대체됩니다.      |
| `style`       | `React.CSSProperties \| ((state: MultiSelect.ValuePrimitive.State) => (React.CSSProperties \| undefined))`                                                                          | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: MultiSelect.ValuePrimitive.State) => ReactElement)`                                                                                     | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### MultiSelect.PlaceholderPrimitive

| Prop        | Type                                                                                                 | Default | Description                                                                                                  |
| ----------- | ---------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: MultiSelectPlaceholderPrimitive.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: MultiSelectPlaceholderPrimitive.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### MultiSelect.Popup

| Prop                | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                                      |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `className`         | `string \| ((state: MultiSelect.Popup.State) => (string \| undefined))`                                                               | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                 |
| `portalElement`     | `ReactElement<MultiSelectPortalPrimitive.Props, string \| JSXElementConstructor<any>>`                                                | -       | MultiSelect.PortalPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 MultiSelect.PortalPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                                 |
| `positionerElement` | `ReactElement<MultiSelectPositionerPrimitive.Props, string \| JSXElementConstructor<any>>`                                            | -       | MultiSelect.PositionerPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 MultiSelect.PositionerPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                         |
| `children`          | `ReactNode`                                                                                                                           | -       |                                                                                                                                                                                                                                                                                                                                                  |
| `finalFocus`        | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 셀렉트 팝업이 닫힐 때 포커스를 이동할 요소를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: 해당 ref 요소로 포커스를 이동합니다.<br />- `function`: 상호작용 유형(`mouse`, `touch`, `pen`, `keyboard`)과 함께 호출됩니다.<br />  포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false` 또는 `undefined`를 반환합니다. |
| `style`             | `React.CSSProperties \| ((state: MultiSelect.Popup.State) => (React.CSSProperties \| undefined))`                                     | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                  |
| `render`            | `ReactElement \| ((props: HTMLProps, state: MultiSelect.Popup.State) => ReactElement)`                                                | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                     |

#### MultiSelect.PortalPrimitive

| Prop        | Type                                                                                                        | Default | Description                                                                                                  |
| ----------- | ----------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: MultiSelect.PortalPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `container` | `HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`                   | -       | 포털 요소를 렌더링할 부모 요소를 지정합니다.                                                                                    |
| `style`     | `React.CSSProperties \| ((state: MultiSelect.PortalPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: MultiSelect.PortalPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### MultiSelect.PositionerPrimitive

| Prop                    | Type                                                                                                                                                      | Default  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`             | `string \| ((state: MultiSelect.PositionerPrimitive.State) => (string \| undefined))`                                                                     | -        | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `align`                 | `Align`                                                                                                                                                   | `start`  | 지정된 side를 기준으로 팝업의 정렬 방식을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `alignItemWithTrigger`  | `boolean`                                                                                                                                                 | `false`  | 포지셔너가 트리거와 겹쳐서 선택된 항목의 텍스트가 트리거의 값 텍스트와 정렬되도록 할지 여부를 지정합니다. 이 옵션은 마우스 입력에만 적용되며, 공간이 충분하지 않으면 자동으로 비활성화됩니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `alignOffset`           | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | -        | 정렬 축 방향의 추가 오프셋을 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 오프셋을 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `anchor`                | `null \| Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => (Element \| VirtualElement \| null))`                                    | -        | 팝업을 배치할 기준 요소를 설정합니다.<br />기본적으로 트리거를 기준으로 팝업이 배치됩니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `arrowPadding`          | `number`                                                                                                                                                  | -        | 화살표와 팝업 모서리 사이의 최소 거리를 설정합니다.<br /><br />팝업의 둥근 모서리 바깥으로 화살표 요소가 벗어나지 않도록 할 때 사용합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `collisionAvoidance`    | `CollisionAvoidance`                                                                                                                                      | -        | 팝업을 배치할 때 충돌을 처리하는 방식을 설정합니다.<br /><br />`side`는 선호하는 배치 축(`top`/`bottom` 또는 `left`/`right`)의 오버플로를 처리합니다:<br />- `'flip'`: 요청한 side가 맞으면 유지하고, 맞지 않으면 반대 side(`top`과 `bottom`, 또는 `left`와 `right`)를 시도합니다.<br />- `'shift'`: side를 변경하지 않고 요청한 side를 유지하면서 클리핑 경계 내에서 팝업을 이동시켜 보이도록 합니다.<br />- `'none'`: side 축 오버플로를 보정하지 않습니다.<br /><br />`align`은 정렬 축(`start`/`center`/`end`)의 오버플로를 처리합니다:<br />- `'flip'`: side는 유지하되, 요청한 정렬이 오버플로되면 `start`와 `end`를 교체합니다.<br />- `'shift'`: side와 요청한 정렬을 유지하면서 팝업을 정렬 축을 따라 조금씩 이동시켜 맞춥니다.<br />- `'none'`: 정렬 축 오버플로를 보정하지 않습니다.<br /><br />`fallbackAxisSide`는 선호 축이 맞지 않을 때 수직 축의 폴백 동작을 처리합니다:<br />- `'start'`: 수직 축 폴백을 허용하고 논리적 시작 side를 먼저 시도합니다(LTR에서 `bottom` 전에 `top`, 또는 `right` 전에 `left`).<br />- `'end'`: 수직 축 폴백을 허용하고 논리적 끝 side를 먼저 시도합니다(LTR에서 `top` 전에 `bottom`, 또는 `left` 전에 `right`).<br />- `'none'`: 수직 축으로 폴백하지 않습니다.<br /><br />`side`가 `'shift'`인 경우, `align`을 명시적으로 설정하면 `'shift'` 또는 `'none'`만 지원됩니다.<br />`align`을 생략하면 기본값은 `'flip'`입니다. |
| `collisionBoundary`     | `Boundary`                                                                                                                                                | -        | 팝업이 벗어나지 않도록 제한할 영역을 나타내는 요소 또는 사각형을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `collisionPadding`      | `Padding`                                                                                                                                                 | -        | 충돌 경계 모서리로부터 유지할 추가 여백을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `disableAnchorTracking` | `boolean`                                                                                                                                                 | -        | 팝업이 배치 앵커의 레이아웃 변화를 추적하지 않도록 설정할지 여부를 지정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `positionMethod`        | `fixed`, `absolute`                                                                                                                                       | -        | 사용할 CSS `position` 속성을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `side`                  | `Side`                                                                                                                                                    | `bottom` | 팝업을 앵커 요소의 어느 side에 배치할지 설정합니다.<br />충돌을 피하기 위해 자동으로 변경될 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `sideOffset`            | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | `4`      | 앵커와 팝업 사이의 거리를 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 거리를 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `sticky`                | `boolean`                                                                                                                                                 | -        | 앵커 요소가 스크롤되어 뷰포트 밖으로 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부를 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `style`                 | `React.CSSProperties \| ((state: MultiSelect.PositionerPrimitive.State) => (React.CSSProperties \| undefined))`                                           | -        | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `render`                | `ReactElement \| ((props: HTMLProps, state: MultiSelect.PositionerPrimitive.State) => ReactElement)`                                                      | -        | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

#### MultiSelect.PopupPrimitive

| Prop         | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                                      |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `className`  | `string \| ((state: MultiSelect.Popup.State) => (string \| undefined))`                                                               | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                 |
| `children`   | `ReactNode`                                                                                                                           | -       |                                                                                                                                                                                                                                                                                                                                                  |
| `finalFocus` | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 셀렉트 팝업이 닫힐 때 포커스를 이동할 요소를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: 해당 ref 요소로 포커스를 이동합니다.<br />- `function`: 상호작용 유형(`mouse`, `touch`, `pen`, `keyboard`)과 함께 호출됩니다.<br />  포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false` 또는 `undefined`를 반환합니다. |
| `style`      | `React.CSSProperties \| ((state: MultiSelect.Popup.State) => (React.CSSProperties \| undefined))`                                     | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                  |
| `render`     | `ReactElement \| ((props: HTMLProps, state: MultiSelect.Popup.State) => ReactElement)`                                                | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                     |

### MultiSelect.Item

| Prop           | Type                                                                                             | Default | Description                                                                                                      |
| -------------- | ------------------------------------------------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------- |
| `value`        | `any`                                                                                            | -       | 이 셀렉트 항목을 식별하는 고유한 값을 지정합니다.                                                                                     |
| `className`    | `string \| ((state: MultiSelect.Item.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `children`     | `ReactNode`                                                                                      | -       |                                                                                                                  |
| `disabled`     | `boolean`                                                                                        | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `label`        | `string`                                                                                         | -       | 키보드 텍스트 탐색 중 항목이 매칭될 때 사용할 텍스트 레이블을 지정합니다.<br /><br />제공하지 않으면 항목의 텍스트 콘텐츠가 기본값으로 사용됩니다.                         |
| `nativeButton` | `boolean`                                                                                        | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: MultiSelect.Item.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`       | `ReactElement \| ((props: HTMLProps, state: MultiSelect.Item.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

#### MultiSelect.ItemPrimitive

| Prop           | Type                                                                                             | Default | Description                                                                                                      |
| -------------- | ------------------------------------------------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------- |
| `value`        | `any`                                                                                            | -       | 이 셀렉트 항목을 식별하는 고유한 값을 지정합니다.                                                                                     |
| `className`    | `string \| ((state: MultiSelect.Item.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `children`     | `ReactNode`                                                                                      | -       |                                                                                                                  |
| `disabled`     | `boolean`                                                                                        | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `label`        | `string`                                                                                         | -       | 키보드 텍스트 탐색 중 항목이 매칭될 때 사용할 텍스트 레이블을 지정합니다.<br /><br />제공하지 않으면 항목의 텍스트 콘텐츠가 기본값으로 사용됩니다.                         |
| `nativeButton` | `boolean`                                                                                        | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: MultiSelect.Item.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`       | `ReactElement \| ((props: HTMLProps, state: MultiSelect.Item.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

#### MultiSelect.ItemIndicatorPrimitive

| Prop          | Type                                                                                                               | Default | Description                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: MultiSelect.ItemIndicatorPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `children`    | `ReactNode`                                                                                                        | -       |                                                                                                              |
| `keepMounted` | `boolean`                                                                                                          | -       | 항목이 선택되지 않은 상태에서도 HTML 요소를 DOM에 유지할지 여부를 설정합니다.                                                              |
| `style`       | `React.CSSProperties \| ((state: MultiSelect.ItemIndicatorPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: MultiSelect.ItemIndicatorPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### MultiSelect.Separator

| Prop          | Type                                                                                                  | Default | Description                                                                                                  |
| ------------- | ----------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: MultiSelect.Separator.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `orientation` | `Orientation`                                                                                         | -       | 구분선의 방향을 설정합니다.                                                                                              |
| `style`       | `React.CSSProperties \| ((state: MultiSelect.Separator.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: MultiSelect.Separator.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### MultiSelect.Group

| Prop        | Type                                                                                              | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: MultiSelect.Group.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: MultiSelect.Group.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: MultiSelect.Group.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### MultiSelect.GroupLabel

| Prop        | Type                                                                                                   | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: MultiSelect.GroupLabel.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: MultiSelect.GroupLabel.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: MultiSelect.GroupLabel.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


# 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.mdx

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

***

title: 'NavigationMenu'
site\_name: 'NavigationMenu - Vapor Core'
description: '여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다.'
-------------------------------------------------------------

<Demo name="navigation-menu/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="navigation-menu/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="navigation-menu/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="navigation-menu/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="navigation-menu/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="navigation-menu/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="navigation-menu/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="navigation-menu/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`                                                                            | -       |                                                                                                                                                 |
| `size`                 | `sm`, `md`, `lg`, `xl`                                                                              | -       |                                                                                                                                                 |
| `defaultValue`         | `unknown`                                                                                           | -       | 초기에 선택될 항목의 비제어 값을 지정합니다.<br /><br />제어 내비게이션 메뉴를 렌더링하려면 `value` prop을 사용하십시오.                                                                  |
| `onValueChange`        | `(value: unknown, eventDetails: NavigationMenu.Root.ChangeEventDetails) => void`                    | -       | 값이 변경될 때 호출되는 콜백입니다.                                                                                                                            |
| `value`                | `unknown`                                                                                           | -       | 현재 열려 있어야 하는 내비게이션 메뉴 항목의 제어 값을 지정합니다.<br />null이 아닌 값이면 메뉴가 열리고, null이면 메뉴가 닫힙니다.<br /><br />비제어 내비게이션 메뉴를 렌더링하려면 `defaultValue` prop을 사용하십시오. |
| `className`            | `string \| ((state: NavigationMenu.Root.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                |
| `disabled`             | `boolean`                                                                                           | -       |                                                                                                                                                 |
| `actionsRef`           | `React.RefObject<NavigationMenuRootActions \| null>`                                                | -       | 명령형 액션에 대한 ref를 지정합니다.                                                                                                                          |
| `closeDelay`           | `number`                                                                                            | -       | 내비게이션 팝업을 닫기 전에 대기할 시간을 지정합니다. 밀리초 단위로 설정합니다.                                                                                                   |
| `delay`                | `number`                                                                                            | -       | 내비게이션 팝업을 열기 전에 대기할 시간을 지정합니다. 밀리초 단위로 설정합니다.                                                                                                   |
| `onOpenChangeComplete` | `(open: boolean) => void`                                                                           | -       | 내비게이션 메뉴가 닫힐 때 모든 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다.                                                                                                 |
| `orientation`          | `horizontal`, `vertical`                                                                            | -       | 내비게이션 메뉴의 방향을 지정합니다.                                                                                                                            |
| `style`                | `React.CSSProperties \| ((state: NavigationMenu.Root.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                 |
| `render`               | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.Root.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                    |

### NavigationMenu.List

| Prop        | Type                                                                                                | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: NavigationMenu.List.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: NavigationMenu.List.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.List.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### NavigationMenu.Item

| Prop        | Type                                                                                                | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `value`     | `any`                                                                                               | -       | 이 내비게이션 메뉴 항목을 식별하는 고유 값을 지정합니다.<br />값을 지정하지 않으면 고유 ID가 자동으로 생성됩니다.<br />내비게이션 메뉴를 프로그래밍 방식으로 조작할 때 사용합니다.  |
| `className` | `string \| ((state: NavigationMenu.Item.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: NavigationMenu.Item.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.Item.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### NavigationMenu.Link

| Prop           | Type                                                                                              | Default | Description                                                                                                  |
| -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: NavigationMenuLinkState) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `current`      | `boolean`                                                                                         | -       | 링크가 현재 활성화된 페이지인지 여부를 지정합니다.                                                                                 |
| `disabled`     | `boolean`                                                                                         | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                              |
| `closeOnClick` | `boolean`                                                                                         | -       | 링크를 클릭했을 때 내비게이션 메뉴를 닫을지 여부를 지정합니다.                                                                          |
| `style`        | `React.CSSProperties \| ((state: NavigationMenuLinkState) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`       | `ReactElement \| ((props: HTMLProps, state: NavigationMenuLinkState) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### NavigationMenu.Trigger

| Prop           | Type                                                                                                   | Default | Description                                                                                                                          |
| -------------- | ------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: NavigationMenu.Trigger.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `nativeButton` | `boolean`                                                                                              | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: NavigationMenu.Trigger.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.Trigger.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

#### NavigationMenu.TriggerPrimitive

| Prop           | Type                                                                                                   | Default | Description                                                                                                                          |
| -------------- | ------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: NavigationMenu.Trigger.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `nativeButton` | `boolean`                                                                                              | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: NavigationMenu.Trigger.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.Trigger.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

#### NavigationMenu.TriggerIndicatorPrimitive

| Prop        | Type                                                                                                                     | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: NavigationMenu.TriggerIndicatorPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: NavigationMenu.TriggerIndicatorPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.TriggerIndicatorPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### NavigationMenu.Content

| Prop          | Type                                                                                                   | Default | Description                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: NavigationMenu.Content.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `keepMounted` | `boolean`                                                                                              | -       | 팝업이 닫혀 있는 동안 콘텐츠를 DOM에 유지할지 여부를 지정합니다.<br />웹 크롤러를 위한 서버 사이드 렌더링 시 콘텐츠가 존재하도록 보장합니다.                         |
| `style`       | `React.CSSProperties \| ((state: NavigationMenu.Content.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.Content.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### NavigationMenu.PortalPrimitive

| Prop          | Type                                                                                                           | Default | Description                                                                                                  |
| ------------- | -------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: NavigationMenu.PortalPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `container`   | `HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`                      | -       | 포털 요소를 렌더링할 부모 요소를 지정합니다.                                                                                    |
| `keepMounted` | `boolean`                                                                                                      | -       | 팝업이 숨겨진 동안 포털을 DOM에 마운트된 상태로 유지할지 여부를 지정합니다.                                                                 |
| `style`       | `React.CSSProperties \| ((state: NavigationMenu.PortalPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.PortalPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### NavigationMenu.PositionerPrimitive

| Prop                    | Type                                                                                                                                                      | Default  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`             | `string \| ((state: NavigationMenu.PositionerPrimitive.State) => (string \| undefined))`                                                                  | -        | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `align`                 | `Align`                                                                                                                                                   | `center` | 지정된 side를 기준으로 팝업의 정렬 방식을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `alignOffset`           | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | -        | 정렬 축 방향의 추가 오프셋을 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 오프셋을 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `anchor`                | `null \| Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => (Element \| VirtualElement \| null))`                                    | -        | 팝업을 배치할 기준 요소를 설정합니다.<br />기본적으로 트리거를 기준으로 팝업이 배치됩니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `arrowPadding`          | `number`                                                                                                                                                  | -        | 화살표와 팝업 모서리 사이의 최소 거리를 설정합니다.<br /><br />팝업의 둥근 모서리 바깥으로 화살표 요소가 벗어나지 않도록 할 때 사용합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `collisionAvoidance`    | `CollisionAvoidance`                                                                                                                                      | -        | 팝업을 배치할 때 충돌을 처리하는 방식을 설정합니다.<br /><br />`side`는 선호하는 배치 축(`top`/`bottom` 또는 `left`/`right`)의 오버플로를 처리합니다:<br />- `'flip'`: 요청한 side가 맞으면 유지하고, 맞지 않으면 반대 side(`top`과 `bottom`, 또는 `left`와 `right`)를 시도합니다.<br />- `'shift'`: side를 변경하지 않고 요청한 side를 유지하면서 클리핑 경계 내에서 팝업을 이동시켜 보이도록 합니다.<br />- `'none'`: side 축 오버플로를 보정하지 않습니다.<br /><br />`align`은 정렬 축(`start`/`center`/`end`)의 오버플로를 처리합니다:<br />- `'flip'`: side는 유지하되, 요청한 정렬이 오버플로되면 `start`와 `end`를 교체합니다.<br />- `'shift'`: side와 요청한 정렬을 유지하면서 팝업을 정렬 축을 따라 조금씩 이동시켜 맞춥니다.<br />- `'none'`: 정렬 축 오버플로를 보정하지 않습니다.<br /><br />`fallbackAxisSide`는 선호 축이 맞지 않을 때 수직 축의 폴백 동작을 처리합니다:<br />- `'start'`: 수직 축 폴백을 허용하고 논리적 시작 side를 먼저 시도합니다(LTR에서 `bottom` 전에 `top`, 또는 `right` 전에 `left`).<br />- `'end'`: 수직 축 폴백을 허용하고 논리적 끝 side를 먼저 시도합니다(LTR에서 `top` 전에 `bottom`, 또는 `left` 전에 `right`).<br />- `'none'`: 수직 축으로 폴백하지 않습니다.<br /><br />`side`가 `'shift'`인 경우, `align`을 명시적으로 설정하면 `'shift'` 또는 `'none'`만 지원됩니다.<br />`align`을 생략하면 기본값은 `'flip'`입니다. |
| `collisionBoundary`     | `Boundary`                                                                                                                                                | -        | 팝업이 벗어나지 않도록 제한할 영역을 나타내는 요소 또는 사각형을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `collisionPadding`      | `Padding`                                                                                                                                                 | -        | 충돌 경계 모서리로부터 유지할 추가 여백을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `disableAnchorTracking` | `boolean`                                                                                                                                                 | -        | 팝업이 배치 앵커의 레이아웃 변화를 추적하지 않도록 설정할지 여부를 지정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `positionMethod`        | `fixed`, `absolute`                                                                                                                                       | -        | 사용할 CSS `position` 속성을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `side`                  | `Side`                                                                                                                                                    | `bottom` | 팝업을 앵커 요소의 어느 side에 배치할지 설정합니다.<br />충돌을 피하기 위해 자동으로 변경될 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `sideOffset`            | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | `8`      | 앵커와 팝업 사이의 거리를 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 거리를 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `sticky`                | `boolean`                                                                                                                                                 | -        | 앵커 요소가 스크롤되어 뷰포트 밖으로 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부를 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `style`                 | `React.CSSProperties \| ((state: NavigationMenu.PositionerPrimitive.State) => (React.CSSProperties \| undefined))`                                        | -        | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `render`                | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.PositionerPrimitive.State) => ReactElement)`                                                   | -        | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

#### NavigationMenu.PopupPrimitive

| Prop        | Type                                                                                                          | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: NavigationMenu.PopupPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: NavigationMenu.PopupPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.PopupPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### NavigationMenu.Viewport

| Prop                | Type                                                                                                    | Default | Description                                                                                                      |
| ------------------- | ------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| `className`         | `string \| ((state: NavigationMenu.Viewport.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `popupElement`      | `ReactElement<NavigationMenuPopupPrimitive.Props, string \| JSXElementConstructor<any>>`                | -       | NavigationMenu.PopupPrimitive에 사용할 커스텀 엘리먼트를 지정합니다. 지정하지 않으면 기본 NavigationMenu.PopupPrimitive가 렌더링됩니다.           |
| `portalElement`     | `ReactElement<NavigationMenuPortalPrimitive.Props, string \| JSXElementConstructor<any>>`               | -       | NavigationMenu.PortalPrimitive에 사용할 커스텀 엘리먼트를 지정합니다. 지정하지 않으면 기본 NavigationMenu.PortalPrimitive가 렌더링됩니다.         |
| `positionerElement` | `ReactElement<NavigationMenuPositionerPrimitive.Props, string \| JSXElementConstructor<any>>`           | -       | NavigationMenu.PositionerPrimitive에 사용할 커스텀 엘리먼트를 지정합니다. 지정하지 않으면 기본 NavigationMenu.PositionerPrimitive가 렌더링됩니다. |
| `style`             | `React.CSSProperties \| ((state: NavigationMenu.Viewport.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`            | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.Viewport.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

#### NavigationMenu.ViewportPrimitive

| Prop        | Type                                                                                                    | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: NavigationMenu.Viewport.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: NavigationMenu.Viewport.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: NavigationMenu.Viewport.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Pagination은 콘텐츠를 페이지 단위로 탐색할 수 있도록 돕는 네비게이션 컴포넌트입니다.

***

title: 'Pagination'
site\_name: 'Pagination - Vapor Core'
description: 'Pagination은 콘텐츠를 페이지 단위로 탐색할 수 있도록 돕는 네비게이션 컴포넌트입니다.'
-------------------------------------------------------------------

<Demo name="pagination/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="pagination/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="pagination/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="pagination/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="pagination/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="pagination/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>

***

### Pagination.Root

| Prop            | Type                                                                                                                                                                                                                                                                      | Default | Description                                                                                                  |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| **totalPages**  | `number`                                                                                                                                                                                                                                                                  | -       | 전체 페이지 수를 지정합니다.                                                                                             |
| `size`          | `sm`, `md`, `lg`, `xl`                                                                                                                                                                                                                                                    | -       |                                                                                                              |
| `onPageChange`  | `(page: number, eventDetails: { reason: "item-press"; event: KeyboardEvent \| globalThis.MouseEvent \| PointerEvent; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: HTMLElement \| undefined; }) => void` | -       | 페이지네이션의 선택된 페이지가 변경될 때 호출되는 이벤트 핸들러입니다.                                                                      |
| `boundaryCount` | `number`                                                                                                                                                                                                                                                                  | -       | 시작 및 끝 페이지에 표시할 페이지 항목 수를 지정합니다.                                                                             |
| `className`     | `string \| ((state: PaginationRootPrimitiveState) => (string \| undefined))`                                                                                                                                                                                              | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `defaultPage`   | `number`                                                                                                                                                                                                                                                                  | -       | 페이지네이션의 기본 선택 페이지를 지정합니다. 비제어 방식으로 사용할 때 설정합니다.                                                              |
| `disabled`      | `boolean`                                                                                                                                                                                                                                                                 | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                              |
| `page`          | `number`                                                                                                                                                                                                                                                                  | -       | 페이지네이션의 선택된 페이지를 지정합니다. 제어 방식으로 사용할 때 설정합니다.                                                                 |
| `siblingCount`  | `number`                                                                                                                                                                                                                                                                  | -       | 현재 페이지 항목 양쪽에 표시할 페이지 항목 수를 지정합니다.                                                                           |
| `render`        | `ReactElement \| ((props: HTMLProps, state: PaginationRootPrimitiveState) => ReactElement)`                                                                                                                                                                               | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.

***

title: 'Popover'
site\_name: 'Popover - Vapor Core'
description: 'Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.'
-------------------------------------------------------------------------------------------------------

<Demo name="popover/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="popover/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="popover/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="popover/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`                                                                                                                                                                                           | -       | 팝오버의 초기 열림 상태를 설정합니다.<br /><br />제어 컴포넌트로 렌더링하려면 `open` prop을 사용하십시오.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `onOpenChange`         | `(open: boolean, eventDetails: Popover.Root.ChangeEventDetails) => void`                                                                                                                            | -       | 팝오버가 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `open`                 | `boolean`                                                                                                                                                                                           | -       | 팝오버가 현재 열려 있는지 여부를 지정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `actionsRef`           | `React.RefObject<PopoverRootActions \| null>`                                                                                                                                                       | -       | 명령형 액션에 대한 ref입니다.<br />- `unmount`: 팝오버를 수동으로 언마운트합니다.<br />외부에서 제어하는 닫기 애니메이션이 완료된 후 호출하십시오.<br />- `close`: 호출 시 팝오버를 명령형으로 닫습니다.                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `children`             | `null \| string \| number \| bigint \| false \| true \| ReactElement \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<AwaitedReactNode> \| ((arg: { payload: unknown; }) => ReactNode)` | -       | 팝오버의 콘텐츠를 지정합니다.<br />일반 React 노드 또는 활성 트리거의 `payload`를 인수로 받는 렌더 함수를 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `defaultTriggerId`     | `string`, `null`                                                                                                                                                                                    | -       | 팝오버와 연결할 트리거의 ID를 지정합니다.<br />`defaultOpen` prop과 함께 사용하여 초기에 열린 상태의 팝오버를 만들 때 유용합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `handle`               | `PopoverHandle<unknown>`                                                                                                                                                                            | -       | 팝오버를 트리거와 연결하기 위한 핸들을 지정합니다.<br />지정하면 외부 트리거에서 팝오버의 열림 상태를 제어할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `modal`                | `boolean`, `"trap-focus"`                                                                                                                                                                           | -       | 팝오버가 열릴 때 모달 상태로 전환할지 여부를 설정합니다.<br />- `true`: 사용자 상호작용이 팝오버 내부로 제한됩니다. 문서 페이지 스크롤이 잠기고 외부 요소에 대한 포인터 상호작용이 비활성화됩니다.<br />- `false`: 문서의 나머지 영역과 상호작용할 수 있습니다.<br />- `'trap-focus'`: 포커스가 팝오버 내부에 갇히지만, 문서 페이지 스크롤은 잠기지 않으며 팝오버 외부의 포인터 상호작용도 유지됩니다.<br /><br />`modal`이 `true`인 경우, `&lt;Popover.Popup&gt;` 내부에 `&lt;Popover.Close&gt;`가 렌더링될 때만 포커스 트래핑이 활성화됩니다. 필요하다면 Tailwind의 `sr-only` 유틸리티 등 직접 작성한 CSS로 시각적으로 숨길 수 있습니다.<br /><br />`modal`이 `'trap-focus'`인 경우, 터치 스크린 리더가 팝업을 벗어날 수 있도록 `&lt;Popover.Popup&gt;` 내부에 `&lt;Popover.Close&gt;`를 렌더링하십시오. |
| `onOpenChangeComplete` | `(open: boolean) => void`                                                                                                                                                                           | -       | 팝오버가 열리거나 닫힐 때 모든 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `triggerId`            | `string`, `null`                                                                                                                                                                                    | -       | 팝오버와 연결할 트리거의 ID를 지정합니다.<br />`open` prop과 함께 사용하여 제어 팝오버를 만들 때 유용합니다.<br />비제어 팝오버(즉, `open` prop을 설정하지 않은 경우)에서는 이 prop을 지정할 필요가 없습니다.                                                                                                                                                                                                                                                                                                                                                                                                                          |

### Popover.Trigger

| Prop           | Type                                                                                            | Default | Description                                                                                                                             |
| -------------- | ----------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `className`    | `string \| ((state: Popover.Trigger.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                        |
| `closeDelay`   | `number`                                                                                        | -       | 호버로 열린 팝오버를 닫기까지 대기할 시간을 밀리초 단위로 지정합니다.<br /><br />`openOnHover` prop이 필요합니다.                                                           |
| `delay`        | `number`                                                                                        | -       | 호버 시 팝오버가 열리기까지 대기할 시간을 밀리초 단위로 지정합니다.<br /><br />`openOnHover` prop이 필요합니다.                                                            |
| `handle`       | `PopoverHandle<unknown>`                                                                        | -       | 트리거를 팝오버와 연결하기 위한 핸들을 지정합니다.                                                                                                            |
| `nativeButton` | `boolean`                                                                                       | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링하는지 여부를 지정합니다.<br />렌더링되는 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정하십시오. |
| `openOnHover`  | `boolean`                                                                                       | -       | 트리거에 호버할 때 팝오버도 열릴지 여부를 지정합니다.                                                                                                          |
| `payload`      | `unknown`                                                                                       | -       | 팝오버가 열릴 때 전달할 페이로드를 지정합니다.                                                                                                              |
| `style`        | `React.CSSProperties \| ((state: Popover.Trigger.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                         |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Popover.Trigger.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                            |

### Popover.Popup

| Prop                | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`         | `string \| ((state: Popover.Popup.State) => (string \| undefined))`                                                                   | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                  |
| `portalElement`     | `ReactElement<PopoverPortalPrimitive.Props, string \| JSXElementConstructor<any>>`                                                    | -       | Popover.PortalPrimitive에 사용할 커스텀 엘리먼트를 지정합니다. 지정하지 않으면 기본 Popover.PortalPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                                                                                                                                                        |
| `positionerElement` | `ReactElement<PopoverPositionerPrimitive.Props, string \| JSXElementConstructor<any>>`                                                | -       | Popover.PositionerPrimitive에 사용할 커스텀 엘리먼트를 지정합니다. 지정하지 않으면 기본 Popover.PositionerPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                                                                                                                                                |
| `finalFocus`        | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 팝오버가 닫힐 때 포커스를 이동할 요소를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 유형(`mouse`, `touch`, `pen`, `keyboard`)과 함께 호출됩니다.<br />  포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`, 기본 동작으로 폴백하려면 `null`, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다.                                                                                                      |
| `initialFocus`      | `false \| true \| React.RefObject<HTMLElement \| null> \| ((openType: InteractionType) => (boolean \| void \| HTMLElement \| null))`  | -       | 팝오버가 열릴 때 포커스를 이동할 요소를 설정합니다.<br />기본적으로 팝업 내부의 첫 번째 탭 가능한 요소로 포커스가 이동하지만, 터치로 팝오버가 열린 경우에는 가상 키보드 열림을 방지하기 위해 팝업 자체에 포커스를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(첫 번째 탭 가능한 요소 또는 팝업)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 유형(`mouse`, `touch`, `pen`, `keyboard`)과 함께 호출됩니다.<br />  포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`, 기본 동작으로 폴백하려면 `null`, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다. |
| `style`             | `React.CSSProperties \| ((state: Popover.Popup.State) => (React.CSSProperties \| undefined))`                                         | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                   |
| `render`            | `ReactElement \| ((props: HTMLProps, state: Popover.Popup.State) => ReactElement)`                                                    | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                      |

#### Popover.PortalPrimitive

| Prop          | Type                                                                                                    | Default | Description                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Popover.PortalPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `container`   | `HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`               | -       | 포털 요소를 렌더링할 부모 요소를 지정합니다.                                                                                    |
| `keepMounted` | `boolean`                                                                                               | -       | 팝업이 숨겨진 동안 포털을 DOM에 마운트된 상태로 유지할지 여부를 지정합니다.                                                                 |
| `style`       | `React.CSSProperties \| ((state: Popover.PortalPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Popover.PortalPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Popover.PositionerPrimitive

| Prop                    | Type                                                                                                                                                      | Default  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`             | `string \| ((state: Popover.PositionerPrimitive.State) => (string \| undefined))`                                                                         | -        | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `align`                 | `Align`                                                                                                                                                   | `center` | 지정된 side를 기준으로 팝업의 정렬 방식을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `alignOffset`           | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | -        | 정렬 축 방향의 추가 오프셋을 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 오프셋을 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `anchor`                | `null \| Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => (Element \| VirtualElement \| null))`                                    | -        | 팝업을 배치할 기준 요소를 설정합니다.<br />기본적으로 트리거를 기준으로 팝업이 배치됩니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `arrowPadding`          | `number`                                                                                                                                                  | -        | 화살표와 팝업 모서리 사이의 최소 거리를 설정합니다.<br /><br />팝업의 둥근 모서리 바깥으로 화살표 요소가 벗어나지 않도록 할 때 사용합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `collisionAvoidance`    | `CollisionAvoidance`                                                                                                                                      | -        | 팝업을 배치할 때 충돌을 처리하는 방식을 설정합니다.<br /><br />`side`는 선호하는 배치 축(`top`/`bottom` 또는 `left`/`right`)의 오버플로를 처리합니다:<br />- `'flip'`: 요청한 side가 맞으면 유지하고, 맞지 않으면 반대 side(`top`과 `bottom`, 또는 `left`와 `right`)를 시도합니다.<br />- `'shift'`: side를 변경하지 않고 요청한 side를 유지하면서 클리핑 경계 내에서 팝업을 이동시켜 보이도록 합니다.<br />- `'none'`: side 축 오버플로를 보정하지 않습니다.<br /><br />`align`은 정렬 축(`start`/`center`/`end`)의 오버플로를 처리합니다:<br />- `'flip'`: side는 유지하되, 요청한 정렬이 오버플로되면 `start`와 `end`를 교체합니다.<br />- `'shift'`: side와 요청한 정렬을 유지하면서 팝업을 정렬 축을 따라 조금씩 이동시켜 맞춥니다.<br />- `'none'`: 정렬 축 오버플로를 보정하지 않습니다.<br /><br />`fallbackAxisSide`는 선호 축이 맞지 않을 때 수직 축의 폴백 동작을 처리합니다:<br />- `'start'`: 수직 축 폴백을 허용하고 논리적 시작 side를 먼저 시도합니다(LTR에서 `bottom` 전에 `top`, 또는 `right` 전에 `left`).<br />- `'end'`: 수직 축 폴백을 허용하고 논리적 끝 side를 먼저 시도합니다(LTR에서 `top` 전에 `bottom`, 또는 `left` 전에 `right`).<br />- `'none'`: 수직 축으로 폴백하지 않습니다.<br /><br />`side`가 `'shift'`인 경우, `align`을 명시적으로 설정하면 `'shift'` 또는 `'none'`만 지원됩니다.<br />`align`을 생략하면 기본값은 `'flip'`입니다. |
| `collisionBoundary`     | `Boundary`                                                                                                                                                | -        | 팝업이 벗어나지 않도록 제한할 영역을 나타내는 요소 또는 사각형을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `collisionPadding`      | `Padding`                                                                                                                                                 | -        | 충돌 경계 모서리로부터 유지할 추가 여백을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `disableAnchorTracking` | `boolean`                                                                                                                                                 | -        | 팝업이 배치 앵커의 레이아웃 변화를 추적하지 않도록 설정할지 여부를 지정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `positionMethod`        | `fixed`, `absolute`                                                                                                                                       | -        | 사용할 CSS `position` 속성을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `side`                  | `Side`                                                                                                                                                    | `bottom` | 팝업을 앵커 요소의 어느 side에 배치할지 설정합니다.<br />충돌을 피하기 위해 자동으로 변경될 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `sideOffset`            | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | `8`      | 앵커와 팝업 사이의 거리를 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 거리를 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `sticky`                | `boolean`                                                                                                                                                 | -        | 앵커 요소가 스크롤되어 뷰포트 밖으로 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부를 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `style`                 | `React.CSSProperties \| ((state: Popover.PositionerPrimitive.State) => (React.CSSProperties \| undefined))`                                               | -        | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `render`                | `ReactElement \| ((props: HTMLProps, state: Popover.PositionerPrimitive.State) => ReactElement)`                                                          | -        | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

#### Popover.PopupPrimitive

| Prop           | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`    | `string \| ((state: Popover.Popup.State) => (string \| undefined))`                                                                   | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                  |
| `finalFocus`   | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 팝오버가 닫힐 때 포커스를 이동할 요소를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 유형(`mouse`, `touch`, `pen`, `keyboard`)과 함께 호출됩니다.<br />  포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`, 기본 동작으로 폴백하려면 `null`, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다.                                                                                                      |
| `initialFocus` | `false \| true \| React.RefObject<HTMLElement \| null> \| ((openType: InteractionType) => (boolean \| void \| HTMLElement \| null))`  | -       | 팝오버가 열릴 때 포커스를 이동할 요소를 설정합니다.<br />기본적으로 팝업 내부의 첫 번째 탭 가능한 요소로 포커스가 이동하지만, 터치로 팝오버가 열린 경우에는 가상 키보드 열림을 방지하기 위해 팝업 자체에 포커스를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(첫 번째 탭 가능한 요소 또는 팝업)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 유형(`mouse`, `touch`, `pen`, `keyboard`)과 함께 호출됩니다.<br />  포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`, 기본 동작으로 폴백하려면 `null`, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다. |
| `style`        | `React.CSSProperties \| ((state: Popover.Popup.State) => (React.CSSProperties \| undefined))`                                         | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                   |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Popover.Popup.State) => ReactElement)`                                                    | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                      |

### Popover.Title

| Prop        | Type                                                                                          | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Popover.Title.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Popover.Title.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Popover.Title.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Popover.Description

| Prop        | Type                                                                                                | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Popover.Description.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Popover.Description.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Popover.Description.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Popover.Close

| Prop           | Type                                                                                          | Default | Description                                                                                                                          |
| -------------- | --------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: Popover.Close.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `nativeButton` | `boolean`                                                                                     | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: Popover.Close.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Popover.Close.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |


# 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.mdx

RadioCard는 RadioGroup과 함께 사용하는 카드 형태의 라디오 버튼 컴포넌트입니다. 선택 가능한 옵션을 카드 UI로 표현하여 더 직관적인 사용자 경험을 제공합니다.

***

title: 'RadioCard'
site\_name: 'RadioCard - Vapor Core'
description: 'RadioCard는 RadioGroup과 함께 사용하는 카드 형태의 라디오 버튼 컴포넌트입니다. 선택 가능한 옵션을 카드 UI로 표현하여 더 직관적인 사용자 경험을 제공합니다.'
-----------------------------------------------------------------------------------------------------------------

<Demo name="radio-card/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="radio-card/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="radio-card/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="radio-card/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="radio-card/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="radio-card/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`                                                                                 | -       | 그룹 내에서 라디오를 고유하게 식별하는 값을 지정합니다.                                                                                  |
| `invalid`      | `boolean`                                                                                 | `false` |                                                                                                                  |
| `className`    | `string \| ((state: RadioCard.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `disabled`     | `boolean`                                                                                 | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `inputRef`     | `Ref<HTMLInputElement>`                                                                   | -       | 숨겨진 input 요소에 접근하기 위한 ref를 지정합니다.                                                                                |
| `nativeButton` | `boolean`                                                                                 | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `readOnly`     | `boolean`                                                                                 | -       | 사용자가 라디오 버튼을 선택할 수 없도록 할지 여부를 지정합니다.                                                                             |
| `required`     | `boolean`                                                                                 | -       | 폼을 제출하기 전에 사용자가 반드시 값을 선택해야 하는지 여부를 지정합니다.                                                                       |
| `style`        | `React.CSSProperties \| ((state: RadioCard.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`       | `ReactElement \| ((props: HTMLProps, state: RadioCard.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |


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

Radio는 여러 옵션 중 하나만 선택할 수 있는 입력 컴포넌트입니다. RadioGroup과 함께 사용하여 라디오 버튼 그룹을 구성할 수 있습니다.

***

title: 'Radio'
site\_name: 'Radio - Vapor Core'
description: 'Radio는 여러 옵션 중 하나만 선택할 수 있는 입력 컴포넌트입니다. RadioGroup과 함께 사용하여 라디오 버튼 그룹을 구성할 수 있습니다.'
-------------------------------------------------------------------------------------------------

<Demo name="radio-group/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="radio-group/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="radio-group/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="radio-group/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="radio-group/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="radio-group/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`    |                                                                                                              |
| `defaultValue`  | `unknown`                                                                                       | -       | 초기에 선택될 라디오 버튼의 비제어 값을 지정합니다.<br /><br />제어 방식의 라디오 그룹을 렌더링하려면 `value` prop을 사용하십시오.                         |
| `onValueChange` | `(value: unknown, eventDetails: RadioGroup.Root.ChangeEventDetails) => void`                    | -       | 값이 변경될 때 호출되는 콜백입니다.                                                                                         |
| `value`         | `unknown`                                                                                       | -       | 현재 선택되어야 할 라디오 항목의 제어 값을 지정합니다.<br /><br />비제어 라디오 그룹을 렌더링하려면 `defaultValue` prop을 사용하십시오.                   |
| `className`     | `string \| ((state: RadioGroup.Root.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `invalid`       | `boolean`                                                                                       | -       |                                                                                                              |
| `disabled`      | `boolean`                                                                                       | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                              |
| `form`          | `string`                                                                                        | -       | 라디오 입력을 소유하는 폼을 식별합니다.<br />라디오 그룹이 폼 외부에 렌더링될 때 유용합니다.                                                      |
| `inputRef`      | `Ref<HTMLInputElement>`                                                                         | -       | 숨겨진 input 요소에 접근하기 위한 ref를 지정합니다.                                                                            |
| `name`          | `string`                                                                                        | -       | 폼이 제출될 때 필드를 식별하는 이름을 지정합니다.                                                                                 |
| `readOnly`      | `boolean`                                                                                       | -       | 사용자가 그룹 내에서 다른 라디오 버튼을 선택할 수 없도록 할지 여부를 지정합니다.                                                               |
| `required`      | `boolean`                                                                                       | -       | 폼을 제출하기 전에 사용자가 반드시 값을 선택해야 하는지 여부를 지정합니다.                                                                   |
| `style`         | `React.CSSProperties \| ((state: RadioGroup.Root.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`        | `ReactElement \| ((props: HTMLProps, state: RadioGroup.Root.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### RadioGroup.Label

| Prop        | Type                                                                                | Default | Description                                                                                                  |
| ----------- | ----------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: RadioGroupLabelState) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: RadioGroupLabelState) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Radio.Root

| Prop           | Type                                                                                       | Default | Description                                                                                                      |
| -------------- | ------------------------------------------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------- |
| **value**      | `unknown`                                                                                  | -       | 그룹 내에서 라디오를 고유하게 식별하는 값을 지정합니다.                                                                                  |
| `invalid`      | `boolean`                                                                                  | `false` |                                                                                                                  |
| `size`         | `md`, `lg`                                                                                 | `md`    |                                                                                                                  |
| `className`    | `string \| ((state: Radio.Root.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `disabled`     | `boolean`                                                                                  | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `inputRef`     | `Ref<HTMLInputElement>`                                                                    | -       | 숨겨진 input 요소에 접근하기 위한 ref를 지정합니다.                                                                                |
| `nativeButton` | `boolean`                                                                                  | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `readOnly`     | `boolean`                                                                                  | -       | 사용자가 라디오 버튼을 선택할 수 없도록 할지 여부를 지정합니다.                                                                             |
| `required`     | `boolean`                                                                                  | -       | 폼을 제출하기 전에 사용자가 반드시 값을 선택해야 하는지 여부를 지정합니다.                                                                       |
| `style`        | `React.CSSProperties \| ((state: Radio.Root.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Radio.Root.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

### Radio.IndicatorPrimitive

| Prop          | Type                                                                                                     | Default | Description                                                                                                  |
| ------------- | -------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Radio.IndicatorPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `keepMounted` | `boolean`                                                                                                | `true`  | 라디오 버튼이 비활성 상태일 때 HTML 엘리먼트를 DOM에 유지할지 여부를 지정합니다.                                                            |
| `style`       | `React.CSSProperties \| ((state: Radio.IndicatorPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Radio.IndicatorPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


# 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.mdx

같은 콘텐츠 영역 내에서 화면의 보기 방식이나 필터를 제어합니다.

***

title: 'SegmentedControl'
site\_name: 'SegmentedControl - Vapor Core'
description: '같은 콘텐츠 영역 내에서 화면의 보기 방식이나 필터를 제어합니다.'
---------------------------------------------------

<Demo name="segmented-control/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="segmented-control/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="segmented-control/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="segmented-control/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="segmented-control/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`                                                                                      | -       |                                                                                                                               |
| `defaultValue`     | `string`                                                                                              | -       | SegmentedControl의 기본값을 지정합니다. SegmentedControl이 자체적으로 상태를 관리하도록 할 때 사용하며, SegmentedControl.Item 컴포넌트 중 하나의 값이어야 합니다.          |
| `onValueChange`    | `(value: string, eventDetails: SegmentedControl.RootPrimitive.ChangeEventDetails) => void`            | -       | SegmentedControl의 값이 변경될 때 호출되는 콜백입니다. 새 값과 하위 RadioGroup 컴포넌트의 원래 변경 이벤트 정보를 전달받습니다. 사용자가 다른 세그먼트를 선택할 때 부수 효과를 처리할 때 유용합니다. |
| `value`            | `string`                                                                                              | -       | SegmentedControl의 제어 값을 지정합니다. 사용자가 SegmentedControl과 상호작용할 때 값을 업데이트하려면 `onValueChange`와 함께 사용해야 합니다.                        |
| `className`        | `string \| ((state: SegmentedControl.Root.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                              |
| `indicatorElement` | `ReactElement<SegmentedControlIndicatorPrimitive.Props, string \| JSXElementConstructor<any>>`        | -       | SegmentedControl.IndicatorPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 SegmentedControl.IndicatorPrimitive가 렌더링됩니다.              |
| `disabled`         | `boolean`                                                                                             | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                               |
| `form`             | `string`                                                                                              | -       | 라디오 입력을 소유하는 폼을 식별합니다.<br />라디오 그룹이 폼 외부에 렌더링될 때 유용합니다.                                                                       |
| `inputRef`         | `Ref<HTMLInputElement>`                                                                               | -       | 숨겨진 input 요소에 접근하기 위한 ref를 지정합니다.                                                                                             |
| `name`             | `string`                                                                                              | -       | 폼이 제출될 때 필드를 식별하는 이름을 지정합니다.                                                                                                  |
| `readOnly`         | `boolean`                                                                                             | -       | 사용자가 그룹 내에서 다른 라디오 버튼을 선택할 수 없도록 할지 여부를 지정합니다.                                                                                |
| `required`         | `boolean`                                                                                             | -       | 폼을 제출하기 전에 사용자가 반드시 값을 선택해야 하는지 여부를 지정합니다.                                                                                    |
| `style`            | `React.CSSProperties \| ((state: SegmentedControl.Root.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                               |
| `render`           | `ReactElement \| ((props: HTMLProps, state: SegmentedControl.Root.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                  |

#### SegmentedControl.RootPrimitive

| Prop            | Type                                                                                                  | Default | Description                                                                                                                   |
| --------------- | ----------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `size`          | `sm`, `md`, `lg`                                                                                      | `md`    |                                                                                                                               |
| `defaultValue`  | `string`                                                                                              | -       | SegmentedControl의 기본값을 지정합니다. SegmentedControl이 자체적으로 상태를 관리하도록 할 때 사용하며, SegmentedControl.Item 컴포넌트 중 하나의 값이어야 합니다.          |
| `onValueChange` | `(value: string, eventDetails: SegmentedControl.RootPrimitive.ChangeEventDetails) => void`            | -       | SegmentedControl의 값이 변경될 때 호출되는 콜백입니다. 새 값과 하위 RadioGroup 컴포넌트의 원래 변경 이벤트 정보를 전달받습니다. 사용자가 다른 세그먼트를 선택할 때 부수 효과를 처리할 때 유용합니다. |
| `value`         | `string`                                                                                              | -       | SegmentedControl의 제어 값을 지정합니다. 사용자가 SegmentedControl과 상호작용할 때 값을 업데이트하려면 `onValueChange`와 함께 사용해야 합니다.                        |
| `className`     | `string \| ((state: SegmentedControl.Root.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                              |
| `disabled`      | `boolean`                                                                                             | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                               |
| `form`          | `string`                                                                                              | -       | 라디오 입력을 소유하는 폼을 식별합니다.<br />라디오 그룹이 폼 외부에 렌더링될 때 유용합니다.                                                                       |
| `inputRef`      | `Ref<HTMLInputElement>`                                                                               | -       | 숨겨진 input 요소에 접근하기 위한 ref를 지정합니다.                                                                                             |
| `name`          | `string`                                                                                              | -       | 폼이 제출될 때 필드를 식별하는 이름을 지정합니다.                                                                                                  |
| `readOnly`      | `boolean`                                                                                             | -       | 사용자가 그룹 내에서 다른 라디오 버튼을 선택할 수 없도록 할지 여부를 지정합니다.                                                                                |
| `required`      | `boolean`                                                                                             | -       | 폼을 제출하기 전에 사용자가 반드시 값을 선택해야 하는지 여부를 지정합니다.                                                                                    |
| `style`         | `React.CSSProperties \| ((state: SegmentedControl.Root.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                               |
| `render`        | `ReactElement \| ((props: HTMLProps, state: SegmentedControl.Root.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                  |

#### SegmentedControl.IndicatorPrimitive

| Prop        | Type                                                                                                             | Default | Description                                                                                                  |
| ----------- | ---------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: SegmentedControl.RootPrimitive.ChangeEventDetails) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: SegmentedControl.RootPrimitive.ChangeEventDetails) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### SegmentedControl.Item

| Prop           | Type                                                                                                      | Default | Description                                                                                                      |
| -------------- | --------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| **value**      | `string`                                                                                                  | -       | 항목의 값을 지정합니다. 어떤 항목이 선택되었는지 판단하는 데 사용되며, SegmentedControl 내에서 고유해야 합니다.                                          |
| `className`    | `string \| ((state: SegmentedControl.IconItem.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `disabled`     | `boolean`                                                                                                 | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `inputRef`     | `Ref<HTMLInputElement>`                                                                                   | -       | 숨겨진 input 요소에 접근하기 위한 ref를 지정합니다.                                                                                |
| `nativeButton` | `boolean`                                                                                                 | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `readOnly`     | `boolean`                                                                                                 | -       | 사용자가 라디오 버튼을 선택할 수 없도록 할지 여부를 지정합니다.                                                                             |
| `required`     | `boolean`                                                                                                 | -       | 폼을 제출하기 전에 사용자가 반드시 값을 선택해야 하는지 여부를 지정합니다.                                                                       |
| `style`        | `React.CSSProperties \| ((state: SegmentedControl.IconItem.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`       | `ReactElement \| ((props: HTMLProps, state: SegmentedControl.IconItem.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

### SegmentedControl.IconItem

| Prop           | Type                                                                                                      | Default | Description                                                                                                      |
| -------------- | --------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| **value**      | `string`                                                                                                  | -       | 항목의 값을 지정합니다. 어떤 항목이 선택되었는지 판단하는 데 사용되며, SegmentedControl 내에서 고유해야 합니다.                                          |
| `className`    | `string \| ((state: SegmentedControl.IconItem.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `disabled`     | `boolean`                                                                                                 | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `inputRef`     | `Ref<HTMLInputElement>`                                                                                   | -       | 숨겨진 input 요소에 접근하기 위한 ref를 지정합니다.                                                                                |
| `nativeButton` | `boolean`                                                                                                 | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `readOnly`     | `boolean`                                                                                                 | -       | 사용자가 라디오 버튼을 선택할 수 없도록 할지 여부를 지정합니다.                                                                             |
| `required`     | `boolean`                                                                                                 | -       | 폼을 제출하기 전에 사용자가 반드시 값을 선택해야 하는지 여부를 지정합니다.                                                                       |
| `style`        | `React.CSSProperties \| ((state: SegmentedControl.IconItem.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`       | `ReactElement \| ((props: HTMLProps, state: SegmentedControl.IconItem.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |


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

Select는 사용자가 여러 옵션 중에서 하나를 선택할 수 있는 드롭다운 컴포넌트입니다. 폼 입력, 설정 선택, 필터링 등에 사용되며, 키보드 내비게이션과 접근성을 완벽하게 지원합니다.

***

title: 'Select'
site\_name: 'Select - Vapor Core'
description: 'Select는 사용자가 여러 옵션 중에서 하나를 선택할 수 있는 드롭다운 컴포넌트입니다. 폼 입력, 설정 선택, 필터링 등에 사용되며, 키보드 내비게이션과 접근성을 완벽하게 지원합니다.'
----------------------------------------------------------------------------------------------------------------------

<Demo name="select/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="select/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="select/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="select/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="select/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="select/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="select/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="select/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`                                                                                                        | -       |                                                                                                                                                              |
| `size`                 | `sm`, `md`, `lg`, `xl`                                                                                           | -       |                                                                                                                                                              |
| `defaultOpen`          | `boolean`                                                                                                        | -       | 셀렉트 팝업의 초기 열림 여부를 지정합니다.<br /><br />제어 방식으로 렌더링하려면 `open` prop을 사용하십시오.                                                                                      |
| `defaultValue`         | `Value`, `null`                                                                                                  | -       | 셀렉트가 처음 렌더링될 때의 비제어 값을 지정합니다.<br /><br />제어 방식으로 렌더링하려면 `value` prop을 사용하십시오.                                                                                |
| `onOpenChange`         | `(open: boolean, eventDetails: Select.Root.ChangeEventDetails) => void`                                          | -       | 셀렉트 팝업이 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다.                                                                                                                           |
| `onValueChange`        | `(value: Value \| null, eventDetails: Select.Root.ChangeEventDetails) => void`                                   | -       | 셀렉트의 값이 변경될 때 호출되는 이벤트 핸들러입니다.                                                                                                                               |
| `open`                 | `boolean`                                                                                                        | -       | 셀렉트 팝업의 현재 열림 여부를 지정합니다.                                                                                                                                     |
| `value`                | `Value`, `null`                                                                                                  | -       | 셀렉트의 값을 지정합니다. 제어 방식으로 사용할 때 설정합니다.                                                                                                                          |
| `placeholder`          | `ReactNode`                                                                                                      | -       | 값이 선택되지 않은 경우 표시할 플레이스홀더 값을 설정합니다.<br />Select.Value의 `children`이 지정된 경우 또는 `items`에서 null 항목의 레이블이 지정된 경우 이 값은 무시됩니다.                                       |
| `actionsRef`           | `React.RefObject<SelectRootActions \| null>`                                                                     | -       | 명령형 액션에 대한 ref를 지정합니다.<br />- `unmount`: 셀렉트를 수동으로 언마운트합니다.<br />외부에서 제어하는 닫힘 애니메이션이 완료된 후 호출하십시오.                                                           |
| `autoComplete`         | `string`                                                                                                         | -       | 브라우저 자동 완성에 대한 힌트를 제공합니다.                                                                                                                                    |
| `children`             | `ReactNode`                                                                                                      | -       |                                                                                                                                                              |
| `disabled`             | `boolean`                                                                                                        | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                                                              |
| `form`                 | `string`                                                                                                         | -       | 숨겨진 input을 소유하는 폼을 식별합니다.<br />셀렉트가 폼 외부에 렌더링될 때 유용합니다.                                                                                                      |
| `highlightItemOnHover` | `boolean`                                                                                                        | -       | 포인터를 항목 위로 이동할 때 해당 항목을 강조 표시할지 여부를 설정합니다.<br />이 prop을 비활성화하면 CSS `:hover`와 `:focus`(`data-highlighted`) 상태를 구분할 수 있습니다.                                    |
| `id`                   | `string`                                                                                                         | -       | Select의 id를 지정합니다.                                                                                                                                           |
| `inputRef`             | `Ref<HTMLInputElement>`                                                                                          | -       | 숨겨진 input 요소에 접근하기 위한 ref를 지정합니다.                                                                                                                            |
| `isItemEqualToValue`   | `(itemValue: Value, value: Value) => boolean`                                                                    | -       | 셀렉트 항목의 값이 현재 선택된 값과 일치하는지 판단하는 커스텀 비교 로직을 지정합니다. 항목 값이 참조가 일치하지 않는 객체일 때 유용합니다.<br />기본값은 `Object.is` 비교입니다.                                                |
| `items`                | `Record<string, React.ReactNode> \| readonly { label: React.ReactNode; value: any; }[] \| readonly Group<any>[]` | -       | 셀렉트 팝업에 렌더링되는 항목의 데이터 구조를 지정합니다.<br />지정하면 `&lt;Select.Value&gt;`가 원시 값 대신 선택된 항목의 레이블을 렌더링합니다.                                                              |
| `itemToStringLabel`    | `(itemValue: Value) => string`                                                                                   | -       | 항목 값이 객체인 경우(`&lt;Select.Item value={object}&gt;`), 이 함수는 객체 값을 트리거에 표시할 문자열로 변환합니다.<br />객체의 형태가 `{ value, label }`이면 이 prop을 지정하지 않아도 label이 자동으로 사용됩니다.   |
| `itemToStringValue`    | `(itemValue: Value) => string`                                                                                   | -       | 항목 값이 객체인 경우(`&lt;Select.Item value={object}&gt;`), 이 함수는 객체 값을 폼 제출 시 사용할 문자열로 변환합니다.<br />객체의 형태가 `{ value, label }`이면 이 prop을 지정하지 않아도 value가 자동으로 사용됩니다. |
| `modal`                | `boolean`                                                                                                        | -       | 셀렉트가 열릴 때 모달 상태로 진입할지 여부를 설정합니다.<br />- `true`: 사용자 인터랙션이 셀렉트로 제한되며, 문서 페이지 스크롤이 잠기고 외부 요소에 대한 포인터 인터랙션이 비활성화됩니다.<br />- `false`: 나머지 문서와의 사용자 인터랙션이 허용됩니다.  |
| `name`                 | `string`                                                                                                         | -       | 폼이 제출될 때 필드를 식별하는 이름을 지정합니다.                                                                                                                                 |
| `onOpenChangeComplete` | `(open: boolean) => void`                                                                                        | -       | 셀렉트 팝업이 열리거나 닫힐 때 모든 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다.                                                                                                           |
| `readOnly`             | `boolean`                                                                                                        | -       | 사용자가 셀렉트 팝업에서 다른 옵션을 선택할 수 없도록 할지 여부를 지정합니다.                                                                                                                 |
| `required`             | `boolean`                                                                                                        | -       | 폼을 제출하기 전에 사용자가 반드시 값을 선택해야 하는지 여부를 지정합니다.                                                                                                                   |

### Select.Trigger

| Prop           | Type                                                                                           | Default | Description                                                                                                                          |
| -------------- | ---------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: Select.Trigger.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `children`     | `ReactNode`                                                                                    | -       |                                                                                                                                      |
| `disabled`     | `boolean`                                                                                      | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                                      |
| `nativeButton` | `boolean`                                                                                      | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: Select.Trigger.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Select.Trigger.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

#### Select.ValuePrimitive

| Prop        | Type                                                                                                                                                                                | Default | Description                                                                                                  |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Select.ValuePrimitive.State) => (string \| undefined))`                                                                                                         | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `children`  | `null \| string \| number \| bigint \| false \| true \| ReactElement \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<AwaitedReactNode> \| ((value: any) => ReactNode)` | -       | 선택된 값을 형식화하는 `ReactNode`를 반환하는 함수를 지정합니다.                                                                    |
| `style`     | `React.CSSProperties \| ((state: Select.ValuePrimitive.State) => (React.CSSProperties \| undefined))`                                                                               | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Select.ValuePrimitive.State) => ReactElement)`                                                                                          | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Select.PlaceholderPrimitive

| Prop        | Type                                                                                            | Default | Description                                                                                                  |
| ----------- | ----------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: SelectPlaceholderPrimitive.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: SelectPlaceholderPrimitive.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Select.TriggerIconPrimitive

| Prop        | Type                                                                                                        | Default | Description                                                                                                  |
| ----------- | ----------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Select.TriggerIconPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Select.TriggerIconPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Select.TriggerIconPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Select.Popup

| Prop                | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                                      |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `className`         | `string \| ((state: Select.Popup.State) => (string \| undefined))`                                                                    | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                 |
| `portalElement`     | `ReactElement<SelectPortalPrimitive.Props, string \| JSXElementConstructor<any>>`                                                     | -       | Select.PortalPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 Select.PortalPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                                           |
| `positionerElement` | `ReactElement<SelectPositionerPrimitive.Props, string \| JSXElementConstructor<any>>`                                                 | -       | Select.PositionerPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 Select.PositionerPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                                   |
| `children`          | `ReactNode`                                                                                                                           | -       |                                                                                                                                                                                                                                                                                                                                                  |
| `finalFocus`        | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 셀렉트 팝업이 닫힐 때 포커스를 이동할 요소를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: 해당 ref 요소로 포커스를 이동합니다.<br />- `function`: 상호작용 유형(`mouse`, `touch`, `pen`, `keyboard`)과 함께 호출됩니다.<br />  포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false` 또는 `undefined`를 반환합니다. |
| `style`             | `React.CSSProperties \| ((state: Select.Popup.State) => (React.CSSProperties \| undefined))`                                          | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                  |
| `render`            | `ReactElement \| ((props: HTMLProps, state: Select.Popup.State) => ReactElement)`                                                     | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                     |

#### Select.PositionerPrimitive

| Prop                    | Type                                                                                                                                                      | Default  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`             | `string \| ((state: Select.PositionerPrimitive.State) => (string \| undefined))`                                                                          | -        | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `align`                 | `Align`                                                                                                                                                   | `start`  | 지정된 side를 기준으로 팝업의 정렬 방식을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `alignItemWithTrigger`  | `boolean`                                                                                                                                                 | `false`  | 포지셔너가 트리거와 겹쳐서 선택된 항목의 텍스트가 트리거의 값 텍스트와 정렬되도록 할지 여부를 지정합니다. 이 옵션은 마우스 입력에만 적용되며, 공간이 충분하지 않으면 자동으로 비활성화됩니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `alignOffset`           | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | -        | 정렬 축 방향의 추가 오프셋을 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 오프셋을 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `anchor`                | `null \| Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => (Element \| VirtualElement \| null))`                                    | -        | 팝업을 배치할 기준 요소를 설정합니다.<br />기본적으로 트리거를 기준으로 팝업이 배치됩니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `arrowPadding`          | `number`                                                                                                                                                  | -        | 화살표와 팝업 모서리 사이의 최소 거리를 설정합니다.<br /><br />팝업의 둥근 모서리 바깥으로 화살표 요소가 벗어나지 않도록 할 때 사용합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `collisionAvoidance`    | `CollisionAvoidance`                                                                                                                                      | -        | 팝업을 배치할 때 충돌을 처리하는 방식을 설정합니다.<br /><br />`side`는 선호하는 배치 축(`top`/`bottom` 또는 `left`/`right`)의 오버플로를 처리합니다:<br />- `'flip'`: 요청한 side가 맞으면 유지하고, 맞지 않으면 반대 side(`top`과 `bottom`, 또는 `left`와 `right`)를 시도합니다.<br />- `'shift'`: side를 변경하지 않고 요청한 side를 유지하면서 클리핑 경계 내에서 팝업을 이동시켜 보이도록 합니다.<br />- `'none'`: side 축 오버플로를 보정하지 않습니다.<br /><br />`align`은 정렬 축(`start`/`center`/`end`)의 오버플로를 처리합니다:<br />- `'flip'`: side는 유지하되, 요청한 정렬이 오버플로되면 `start`와 `end`를 교체합니다.<br />- `'shift'`: side와 요청한 정렬을 유지하면서 팝업을 정렬 축을 따라 조금씩 이동시켜 맞춥니다.<br />- `'none'`: 정렬 축 오버플로를 보정하지 않습니다.<br /><br />`fallbackAxisSide`는 선호 축이 맞지 않을 때 수직 축의 폴백 동작을 처리합니다:<br />- `'start'`: 수직 축 폴백을 허용하고 논리적 시작 side를 먼저 시도합니다(LTR에서 `bottom` 전에 `top`, 또는 `right` 전에 `left`).<br />- `'end'`: 수직 축 폴백을 허용하고 논리적 끝 side를 먼저 시도합니다(LTR에서 `top` 전에 `bottom`, 또는 `left` 전에 `right`).<br />- `'none'`: 수직 축으로 폴백하지 않습니다.<br /><br />`side`가 `'shift'`인 경우, `align`을 명시적으로 설정하면 `'shift'` 또는 `'none'`만 지원됩니다.<br />`align`을 생략하면 기본값은 `'flip'`입니다. |
| `collisionBoundary`     | `Boundary`                                                                                                                                                | -        | 팝업이 벗어나지 않도록 제한할 영역을 나타내는 요소 또는 사각형을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `collisionPadding`      | `Padding`                                                                                                                                                 | -        | 충돌 경계 모서리로부터 유지할 추가 여백을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `disableAnchorTracking` | `boolean`                                                                                                                                                 | -        | 팝업이 배치 앵커의 레이아웃 변화를 추적하지 않도록 설정할지 여부를 지정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `positionMethod`        | `fixed`, `absolute`                                                                                                                                       | -        | 사용할 CSS `position` 속성을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `side`                  | `Side`                                                                                                                                                    | `bottom` | 팝업을 앵커 요소의 어느 side에 배치할지 설정합니다.<br />충돌을 피하기 위해 자동으로 변경될 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `sideOffset`            | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | `4`      | 앵커와 팝업 사이의 거리를 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 거리를 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `sticky`                | `boolean`                                                                                                                                                 | -        | 앵커 요소가 스크롤되어 뷰포트 밖으로 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부를 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `style`                 | `React.CSSProperties \| ((state: Select.PositionerPrimitive.State) => (React.CSSProperties \| undefined))`                                                | -        | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `render`                | `ReactElement \| ((props: HTMLProps, state: Select.PositionerPrimitive.State) => ReactElement)`                                                           | -        | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

#### Select.PopupPrimitive

| Prop         | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                                      |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `className`  | `string \| ((state: Select.Popup.State) => (string \| undefined))`                                                                    | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                 |
| `children`   | `ReactNode`                                                                                                                           | -       |                                                                                                                                                                                                                                                                                                                                                  |
| `finalFocus` | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 셀렉트 팝업이 닫힐 때 포커스를 이동할 요소를 설정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: 해당 ref 요소로 포커스를 이동합니다.<br />- `function`: 상호작용 유형(`mouse`, `touch`, `pen`, `keyboard`)과 함께 호출됩니다.<br />  포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false` 또는 `undefined`를 반환합니다. |
| `style`      | `React.CSSProperties \| ((state: Select.Popup.State) => (React.CSSProperties \| undefined))`                                          | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                  |
| `render`     | `ReactElement \| ((props: HTMLProps, state: Select.Popup.State) => ReactElement)`                                                     | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                     |

### Select.Item

| Prop           | Type                                                                                        | Default | Description                                                                                                      |
| -------------- | ------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| `value`        | `any`                                                                                       | -       | 이 셀렉트 항목을 식별하는 고유한 값을 지정합니다.                                                                                     |
| `className`    | `string \| ((state: Select.Item.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `children`     | `ReactNode`                                                                                 | -       |                                                                                                                  |
| `disabled`     | `boolean`                                                                                   | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `label`        | `string`                                                                                    | -       | 키보드 텍스트 탐색 중 항목이 매칭될 때 사용할 텍스트 레이블을 지정합니다.<br /><br />제공하지 않으면 항목의 텍스트 콘텐츠가 기본값으로 사용됩니다.                         |
| `nativeButton` | `boolean`                                                                                   | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: Select.Item.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Select.Item.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

#### Select.ItemPrimitive

| Prop           | Type                                                                                        | Default | Description                                                                                                      |
| -------------- | ------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| `value`        | `any`                                                                                       | -       | 이 셀렉트 항목을 식별하는 고유한 값을 지정합니다.                                                                                     |
| `className`    | `string \| ((state: Select.Item.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `children`     | `ReactNode`                                                                                 | -       |                                                                                                                  |
| `disabled`     | `boolean`                                                                                   | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `label`        | `string`                                                                                    | -       | 키보드 텍스트 탐색 중 항목이 매칭될 때 사용할 텍스트 레이블을 지정합니다.<br /><br />제공하지 않으면 항목의 텍스트 콘텐츠가 기본값으로 사용됩니다.                         |
| `nativeButton` | `boolean`                                                                                   | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: Select.Item.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Select.Item.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

#### Select.ItemIndicatorPrimitive

| Prop          | Type                                                                                                          | Default | Description                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Select.ItemIndicatorPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `children`    | `ReactNode`                                                                                                   | -       |                                                                                                              |
| `keepMounted` | `boolean`                                                                                                     | -       | 항목이 선택되지 않은 상태에서도 HTML 요소를 DOM에 유지할지 여부를 설정합니다.                                                              |
| `style`       | `React.CSSProperties \| ((state: Select.ItemIndicatorPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Select.ItemIndicatorPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Select.Group

| Prop        | Type                                                                                         | Default | Description                                                                                                  |
| ----------- | -------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Select.Group.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Select.Group.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Select.Group.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Select.GroupLabel

| Prop        | Type                                                                                              | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Select.GroupLabel.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Select.GroupLabel.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Select.GroupLabel.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Select.Separator

| Prop          | Type                                                                                             | Default | Description                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Select.Separator.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `orientation` | `Orientation`                                                                                    | -       | 구분선의 방향을 설정합니다.                                                                                              |
| `style`       | `React.CSSProperties \| ((state: Select.Separator.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Select.Separator.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.

***

title: 'Sheet'
site\_name: 'Sheet - Vapor Core'
description: 'Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.'
---------------------------------------------------------------------------------------------

<Demo name="sheet/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="sheet/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="sheet/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="sheet/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="sheet/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="sheet/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

> ⚠️ Spec file not found: `sheet-root.json`

### Sheet.Trigger

| Prop           | Type                                                                                          | Default | Description                                                                                                                          |
| -------------- | --------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: Sheet.Trigger.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `handle`       | `DialogHandle<unknown>`                                                                       | -       | 트리거를 다이얼로그와 연결할 핸들을 지정합니다.<br />`Dialog.createHandle()` 메서드로 생성할 수 있습니다.                                                             |
| `id`           | `string`                                                                                      | -       | 트리거의 ID를 지정합니다. 렌더링된 요소에 전달되는 것 외에도,<br />제어 모드에서 다이얼로그의 활성 트리거를 지정하는 데 사용됩니다(DialogRoot의 `triggerId` prop).                         |
| `nativeButton` | `boolean`                                                                                     | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `payload`      | `unknown`                                                                                     | -       | 다이얼로그가 열릴 때 전달할 payload를 지정합니다.                                                                                                      |
| `style`        | `React.CSSProperties \| ((state: Sheet.Trigger.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Sheet.Trigger.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

### Sheet.Popup

| Prop                | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`         | `string \| ((state: Sheet.Popup.State) => (string \| undefined))`                                                                     | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                           |
| `overlayElement`    | `ReactElement<SheetOverlayPrimitive.Props, string \| JSXElementConstructor<any>>`                                                     | -       | Sheet.OverlayPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 Sheet.OverlayPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                                                                                                                                                                     |
| `portalElement`     | `ReactElement<SheetPortalPrimitive.Props, string \| JSXElementConstructor<any>>`                                                      | -       | Sheet.PortalPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 Sheet.PortalPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                                                                                                                                                                       |
| `positionerElement` | `ReactElement<SheetPositionerPrimitive.Props, string \| JSXElementConstructor<any>>`                                                  | -       | Sheet.PositionerPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 Sheet.PositionerPrimitive가 렌더링됩니다.                                                                                                                                                                                                                                                                                                                                                                               |
| `finalFocus`        | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 다이얼로그가 닫힐 때 포커스를 이동할 요소를 지정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 타입(`mouse`, `touch`, `pen`, `keyboard`)을 인자로 호출합니다.<br />  포커스할 요소를 반환하거나, `true`를 반환하면 기본 동작을 사용하고, `null`을 반환하면 기본 동작으로 폴백하며, `false`/`undefined`를 반환하면 아무것도 하지 않습니다.                                                                                                     |
| `initialFocus`      | `false \| true \| React.RefObject<HTMLElement \| null> \| ((openType: InteractionType) => (boolean \| void \| HTMLElement \| null))`  | -       | 다이얼로그가 열릴 때 포커스를 이동할 요소를 지정합니다.<br />기본적으로 팝업 내부의 첫 번째 탭 가능한 요소로 포커스가 이동하지만, 터치로 다이얼로그가 열린 경우에는 가상 키보드가 열리지 않도록 팝업 자체에 포커스가 설정됩니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(첫 번째 탭 가능한 요소 또는 팝업)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 타입(`mouse`, `touch`, `pen`, `keyboard`)을 인자로 호출합니다.<br />  포커스할 요소를 반환하거나, `true`를 반환하면 기본 동작을 사용하고, `null`을 반환하면 기본 동작으로 폴백하며, `false`/`undefined`를 반환하면 아무것도 하지 않습니다. |
| `style`             | `React.CSSProperties \| ((state: Sheet.Popup.State) => (React.CSSProperties \| undefined))`                                           | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                            |
| `render`            | `ReactElement \| ((props: HTMLProps, state: Sheet.Popup.State) => ReactElement)`                                                      | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                               |

#### Sheet.PortalPrimitive

| Prop          | Type                                                                                                  | Default | Description                                                                                                  |
| ------------- | ----------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Sheet.PortalPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `container`   | `HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`             | -       | 포털 요소를 렌더링할 부모 요소를 지정합니다.                                                                                    |
| `keepMounted` | `boolean`                                                                                             | -       | 팝업이 숨겨진 동안 포털을 DOM에 마운트된 상태로 유지할지 여부를 지정합니다.                                                                 |
| `style`       | `React.CSSProperties \| ((state: Sheet.PortalPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Sheet.PortalPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Sheet.OverlayPrimitive

| Prop          | Type                                                                                                   | Default | Description                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Sheet.OverlayPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `forceRender` | `boolean`                                                                                              | -       | 중첩된 경우에도 배경을 강제로 렌더링할지 여부를 지정합니다.                                                                            |
| `style`       | `React.CSSProperties \| ((state: Sheet.OverlayPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Sheet.OverlayPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Sheet.PopupPrimitive

| Prop           | Type                                                                                                                                  | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`    | `string \| ((state: Sheet.Popup.State) => (string \| undefined))`                                                                     | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                           |
| `finalFocus`   | `false \| true \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => (boolean \| void \| HTMLElement \| null))` | -       | 다이얼로그가 닫힐 때 포커스를 이동할 요소를 지정합니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 타입(`mouse`, `touch`, `pen`, `keyboard`)을 인자로 호출합니다.<br />  포커스할 요소를 반환하거나, `true`를 반환하면 기본 동작을 사용하고, `null`을 반환하면 기본 동작으로 폴백하며, `false`/`undefined`를 반환하면 아무것도 하지 않습니다.                                                                                                     |
| `initialFocus` | `false \| true \| React.RefObject<HTMLElement \| null> \| ((openType: InteractionType) => (boolean \| void \| HTMLElement \| null))`  | -       | 다이얼로그가 열릴 때 포커스를 이동할 요소를 지정합니다.<br />기본적으로 팝업 내부의 첫 번째 탭 가능한 요소로 포커스가 이동하지만, 터치로 다이얼로그가 열린 경우에는 가상 키보드가 열리지 않도록 팝업 자체에 포커스가 설정됩니다.<br /><br />- `false`: 포커스를 이동하지 않습니다.<br />- `true`: 기본 동작(첫 번째 탭 가능한 요소 또는 팝업)에 따라 포커스를 이동합니다.<br />- `RefObject`: ref 요소로 포커스를 이동합니다.<br />- `function`: 인터랙션 타입(`mouse`, `touch`, `pen`, `keyboard`)을 인자로 호출합니다.<br />  포커스할 요소를 반환하거나, `true`를 반환하면 기본 동작을 사용하고, `null`을 반환하면 기본 동작으로 폴백하며, `false`/`undefined`를 반환하면 아무것도 하지 않습니다. |
| `style`        | `React.CSSProperties \| ((state: Sheet.Popup.State) => (React.CSSProperties \| undefined))`                                           | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                            |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Sheet.Popup.State) => ReactElement)`                                                      | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                               |

#### Sheet.PositionerPrimitive

| Prop        | Type                                                                                         | Default | Description                                                                                                  |
| ----------- | -------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: SheetPositionerPrimitiveState) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `side`      | `left`, `right`, `bottom`, `top`                                                             | `right` |                                                                                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: SheetPositionerPrimitiveState) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Sheet.ResizeHandle

> ⚠️ Spec file not found: `sheet-resize-handle.json`

### Sheet.Header

| Prop        | Type                                                                              | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: DialogHeader.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: DialogHeader.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Sheet.Body

| Prop        | Type                                                                            | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: DialogBody.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: DialogBody.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Sheet.Footer

| Prop        | Type                                                                              | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: DialogFooter.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: DialogFooter.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Sheet.Title

| Prop        | Type                                                                                        | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Sheet.Title.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Sheet.Title.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Sheet.Title.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Sheet.Description

| Prop        | Type                                                                                              | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Sheet.Description.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Sheet.Description.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Sheet.Description.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Sheet.Close

| Prop           | Type                                                                                        | Default | Description                                                                                                                          |
| -------------- | ------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: Sheet.Close.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `nativeButton` | `boolean`                                                                                   | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: Sheet.Close.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Sheet.Close.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |


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

콘텐츠가 로딩 중임을 나타내는 플레이스홀더 요소입니다.

***

title: 'Skeleton'
site\_name: 'Skeleton - Vapor Core'
description: '콘텐츠가 로딩 중임을 나타내는 플레이스홀더 요소입니다.'
---------------------------------------------

<Demo name="skeleton/default-skeleton">
  ```tsx
  import { Skeleton } from '@vapor-ui/core';

  export default function DefaultSkeleton() {
      return <Skeleton $css={{ width: '200px' }} />;
  }

  ```
</Demo>

## Property

***

### Shape

Skeleton의 모서리 둥글기를 설정합니다.

<Demo name="skeleton/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="skeleton/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="skeleton/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="skeleton/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` | Skeleton의 애니메이션 스타일을 설정합니다.                                                                                  |
| `shape`     | `square`, `rounded`                                                           | `rounded` | Skeleton의 테두리 반경을 설정합니다.                                                                                     |
| `size`      | `sm`, `md`, `lg`, `xl`                                                        | `md`      | Skeleton의 높이를 설정합니다.                                                                                         |
| `className` | `string \| ((state: Skeleton.State) => (string \| undefined))`                | -         | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Skeleton.State) => ReactElement)` | -         | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

콘텐츠나 데이터 로딩 시 대기 상태를 표시합니다.

***

title: 'Spinner'
site\_name: 'Spinner - Vapor Core'
description: '콘텐츠나 데이터 로딩 시 대기 상태를 표시합니다.'
------------------------------------------

<Demo name="spinner/default-spinner">
  ```tsx
  import { Spinner } from '@vapor-ui/core';

  export default function DefaultSpinner() {
      return <Spinner />;
  }

  ```
</Demo>

## Property

***

### Size

Spinner의 크기를 설정합니다.

<Demo name="spinner/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의 색상을 설정합니다. 다른 요소와 함께 사용될 때, `inverse` 속성을 사용하여 요소의 글자색과 통일하세요.

<Demo name="spinner/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`                                                         | -       | 스피너 호(arc)의 획 색상을 설정합니다. 색상이 있거나 채워진 배경 위에 스피너를 배치할 때는 `inherit`을 사용하십시오. 이 경우 획 색상은 부모 요소의 `color` 속성을 상속합니다. |
| `size`         | `md`, `lg`, `xl`                                                             | `md`    | Spinner의 전체 크기를 설정합니다.                                                                                         |
| `className`    | `string \| ((state: Spinner.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                               |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Spinner.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.   |


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

Switch는 사용자가 설정을 on/off로 전환할 수 있게 돕는 토글 컴포넌트입니다.

***

title: 'Switch'
site\_name: 'Switch - Vapor Core'
description: 'Switch는 사용자가 설정을 on/off로 전환할 수 있게 돕는 토글 컴포넌트입니다.'
---------------------------------------------------------------

<Demo name="switch/default-switch">
  ```tsx
  import { Switch } from '@vapor-ui/core';

  export default function DefaultSwitch() {
      return <Switch.Root />;
  }

  ```
</Demo>

## Property

***

### Size

Switch의 크기를 설정합니다.

<Demo name="switch/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="switch/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="switch/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="switch/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="switch/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="switch/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` |                                                                                                                  |
| `size`            | `sm`, `md`, `lg`                                                                            | `md`    |                                                                                                                  |
| `checked`         | `boolean`                                                                                   | -       | 스위치의 현재 활성화 여부를 설정합니다.<br /><br />비제어 스위치를 렌더링하려면 `defaultChecked` prop을 사용하십시오.                                 |
| `defaultChecked`  | `boolean`                                                                                   | -       | 스위치의 초기 활성화 여부를 설정합니다.<br /><br />제어 스위치를 렌더링하려면 `checked` prop을 사용하십시오.                                         |
| `onCheckedChange` | `(checked: boolean, eventDetails: Switch.Root.ChangeEventDetails) => void`                  | -       | 스위치가 활성화되거나 비활성화될 때 호출되는 이벤트 핸들러입니다.                                                                             |
| `value`           | `string`                                                                                    | -       | 스위치가 켜진 상태일 때 폼과 함께 제출되는 값을 설정합니다.<br />기본적으로 네이티브 체크박스 동작과 동일하게 `"on"` 값을 제출합니다.                                |
| `className`       | `string \| ((state: Switch.Root.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                 |
| `disabled`        | `boolean`                                                                                   | -       | 컴포넌트가 사용자 상호작용을 무시할지 여부를 설정합니다.                                                                                  |
| `form`            | `string`                                                                                    | -       | 숨겨진 input을 소유하는 폼을 식별합니다.<br />스위치가 폼 외부에 렌더링될 때 유용합니다.                                                          |
| `id`              | `string`                                                                                    | -       | 숨겨진 input 요소의 id를 지정합니다.<br /><br />`nativeButton`이 `true`이면 id는 루트 요소에 적용됩니다.                                   |
| `inputRef`        | `Ref<HTMLInputElement>`                                                                     | -       | 숨겨진 `&lt;input&gt;` 요소에 접근하기 위한 ref를 지정합니다.                                                                      |
| `name`            | `string`                                                                                    | -       | 폼이 제출될 때 필드를 식별하는 이름을 지정합니다.                                                                                     |
| `nativeButton`    | `boolean`                                                                                   | -       | `render` prop으로 컴포넌트를 교체할 때 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 설정합니다.<br />렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정합니다. |
| `readOnly`        | `boolean`                                                                                   | -       | 사용자가 스위치를 활성화하거나 비활성화할 수 없도록 설정합니다.                                                                              |
| `required`        | `boolean`                                                                                   | -       | 폼을 제출하기 전에 사용자가 스위치를 반드시 활성화해야 하는지 여부를 지정합니다.                                                                    |
| `style`           | `React.CSSProperties \| ((state: Switch.Root.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                  |
| `uncheckedValue`  | `string`                                                                                    | -       | 스위치가 꺼진 상태일 때 폼과 함께 제출할 값을 지정합니다.<br />기본적으로 체크되지 않은 스위치는 네이티브 체크박스 동작과 동일하게 아무 값도 제출하지 않습니다.                    |
| `render`          | `ReactElement \| ((props: HTMLProps, state: Switch.Root.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.     |

#### Switch.ThumbPrimitive

| Prop        | Type                                                                                                  | Default | Description                                                                                                  |
| ----------- | ----------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Switch.ThumbPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Switch.ThumbPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Switch.ThumbPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Table는 데이터를 행과 열로 구성하여 구조화된 방식으로 표시하는 컴포넌트입니다.

***

title: 'Table'
site\_name: Table - Vapor Core
description: 'Table는 데이터를 행과 열로 구성하여 구조화된 방식으로 표시하는 컴포넌트입니다.'
-------------------------------------------------------------

Table 컴포넌트는 순수한 뷰(View) 역할에 집중하여 기본적인 구조와 스타일만을 제공합니다.
복잡한 상태 관리와 로직을 바탕으로 대량의 데이터를 다루는 Data Table을 구현하려면 [Table Block 문서](/docs/components/patterns/table)를 참고해주세요.

<br />

<Demo name="table/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 \| ((state: TableRoot.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: TableRoot.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Table.Header

| Prop        | Type                                                                             | Default | Description                                                                                                  |
| ----------- | -------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: TableHeader.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: TableHeader.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Table.Body

| Prop        | Type                                                                           | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: TableBody.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: TableBody.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Table.Footer

| Prop        | Type                                                                             | Default | Description                                                                                                  |
| ----------- | -------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: TableFooter.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: TableFooter.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Table.Row

| Prop        | Type                                                                          | Default | Description                                                                                                  |
| ----------- | ----------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: TableRow.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: TableRow.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Table.Heading

| Prop        | Type                                                                              | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: TableHeading.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: TableHeading.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Table.Cell

| Prop        | Type                                                                           | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: TableCell.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: TableCell.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Table.ColumnGroup

| Prop        | Type                                                                                  | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: TableColumnGroup.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: TableColumnGroup.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Table.Column

| Prop        | Type                                                                             | Default | Description                                                                                                  |
| ----------- | -------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: TableColumn.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: TableColumn.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다.

***

title: 'Tabs'
site\_name: 'Tabs - Vapor Core'
description: 'Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다.'
---------------------------------------------------------------------------------------------------------

<Demo name="tabs/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="tabs/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="tabs/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="tabs/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="tabs/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="tabs/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="tabs/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="tabs/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`                                                                    | -            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `variant`         | `line`, `fill`                                                                            | -            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `defaultValue`    | `any`                                                                                     | -            | 기본값을 지정합니다. 비제어 컴포넌트로 사용할 때 설정합니다.<br />값이 `null`이면 활성화된 Tab이 없습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `onValueChange`   | `(value: any, eventDetails: Tabs.Root.ChangeEventDetails) => void`                        | -            | 새 값이 설정될 때 호출되는 콜백입니다.<br /><br />이벤트 `reason`은 클릭이나 키보드 탐색 등 사용자가 직접 변경한 경우 `'none'`, 비제어 루트에서 `defaultValue`가 생략되거나 `undefined`일 때의 최초 자동 선택 또는 폴백(암묵적 초기값이 비활성화되었거나 존재하지 않는 경우 포함)인 경우 `'initial'`, 비제어 루트에서 선택된 탭이 비활성화되어 자동 폴백이 발생한 경우 `'disabled'`, 선택된 탭이 제거되었거나 비제어 루트에서 명시적인 `defaultValue`가 마운트된 탭과 일치하지 않는 경우 `'missing'`입니다.<br /><br />자동 변경 시 활성화할 수 있는 Tab이 없으면 선택된 값이 `null`일 수 있습니다.<br /><br />자동 변경은 취소할 수 없으며, `'initial'`, `'disabled'`, `'missing'`에 대해 `eventDetails.cancel()`을 호출해도 효과가 없습니다. |
| `value`           | `any`                                                                                     | -            | 현재 활성화된 `Tab`의 값을 지정합니다. 제어 컴포넌트로 사용할 때 설정합니다.<br />값이 `null`이면 활성화된 Tab이 없습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `className`       | `string \| ((state: Tabs.Root.State) => (string \| undefined))`                           | -            | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `activateOnFocus` | `boolean`                                                                                 | -            | 방향키로 포커스를 이동할 때 활성 탭을 자동으로 변경할지 여부를 지정합니다.<br />이 옵션을 사용하지 않으면 \<kbd>Enter\</kbd> 또는 \<kbd>Space\</kbd> 키를 눌러 탭을 활성화합니다.                                                                                                                                                                                                                                                                                                                                                                                              |
| `disabled`        | `boolean`                                                                                 | -            | Tab의 비활성화 여부를 지정합니다.<br /><br />`&lt;Tabs.List&gt;`의 첫 번째 Tab이 비활성화된 경우 초기에 선택되지 않으며, 다음 활성화된 Tab이 선택됩니다.<br />단, 서버 사이드 렌더링 중에는 사전 렌더링 시점에 어떤 Tab이 비활성화되어 있는지 알 수 없으므로 이 방식이 적용되지 않습니다.<br />이 문제를 해결하려면 `&lt;Tabs.Root&gt;`의 `defaultValue` 또는 `value`를 활성화된 Tab의 값으로 설정하십시오.                                                                                                                                                                                                                                       |
| `loopFocus`       | `boolean`                                                                                 | -            | 화살표 키로 목록의 끝에 도달했을 때 키보드 포커스를 첫 번째 항목으로 순환할지 여부를 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `orientation`     | `horizontal`, `vertical`                                                                  | `horizontal` | 컴포넌트의 방향(레이아웃 흐름 방향)을 지정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `style`           | `React.CSSProperties \| ((state: Tabs.Root.State) => (React.CSSProperties \| undefined))` | -            | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `render`          | `ReactElement \| ((props: HTMLProps, state: Tabs.Root.State) => ReactElement)`            | -            | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                          |

### Tabs.List

| Prop               | Type                                                                                      | Default | Description                                                                                                  |
| ------------------ | ----------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`        | `string \| ((state: Tabs.List.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `indicatorElement` | `ReactElement<TabsIndicatorPrimitive.Props, string \| JSXElementConstructor<any>>`        | -       | Tabs.IndicatorPrimitive에 사용할 커스텀 요소를 지정합니다. 제공하지 않으면 기본 Tabs.IndicatorPrimitive가 렌더링됩니다.                     |
| `style`            | `React.CSSProperties \| ((state: Tabs.List.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`           | `ReactElement \| ((props: HTMLProps, state: Tabs.List.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Tabs.ListPrimitive

| Prop        | Type                                                                                      | Default | Description                                                                                                  |
| ----------- | ----------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Tabs.List.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Tabs.List.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Tabs.List.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Tabs.IndicatorPrimitive

| Prop                    | Type                                                                                                    | Default | Description                                                                                                  |
| ----------------------- | ------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`             | `string \| ((state: Tabs.IndicatorPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `renderBeforeHydration` | `boolean`                                                                                               | -       | React 하이드레이션 전에 렌더링할지 여부를 지정합니다.<br />이 옵션을 사용하면 서버 사이드 렌더링 후 인디케이터가 표시되지 않는 시간을 최소화합니다.                     |
| `style`                 | `React.CSSProperties \| ((state: Tabs.IndicatorPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`                | `ReactElement \| ((props: HTMLProps, state: Tabs.IndicatorPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Tabs.Button

| Prop           | Type                                                                                        | Default | Description                                                                                                                                                                                                                                                                     |
| -------------- | ------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **value**      | `any`                                                                                       | -       | Tab의 값을 지정합니다.                                                                                                                                                                                                                                                                  |
| `className`    | `string \| ((state: Tabs.Button.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                |
| `disabled`     | `boolean`                                                                                   | -       | Tab의 비활성화 여부를 지정합니다.<br /><br />`&lt;Tabs.List&gt;`의 첫 번째 Tab이 비활성화된 경우 초기에 선택되지 않으며, 다음 활성화된 Tab이 선택됩니다.<br />단, 서버 사이드 렌더링 중에는 사전 렌더링 시점에 어떤 Tab이 비활성화되어 있는지 알 수 없으므로 이 방식이 적용되지 않습니다.<br />이 문제를 해결하려면 `&lt;Tabs.Root&gt;`의 `defaultValue` 또는 `value`를 활성화된 Tab의 값으로 설정하십시오. |
| `nativeButton` | `boolean`                                                                                   | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다.                                                                                                                                            |
| `style`        | `React.CSSProperties \| ((state: Tabs.Button.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                 |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Tabs.Button.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                    |

### Tabs.Panel

| Prop          | Type                                                                                       | Default | Description                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| **value**     | `any`                                                                                      | -       | TabPanel의 값을 지정합니다. 대응하는 값을 가진 Tab이 활성화될 때 표시됩니다.                                                            |
| `className`   | `string \| ((state: Tabs.Panel.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `keepMounted` | `boolean`                                                                                  | -       | 패널이 숨겨진 상태에서도 HTML 요소를 DOM에 유지할지 여부를 지정합니다.                                                                  |
| `style`       | `React.CSSProperties \| ((state: Tabs.Panel.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Tabs.Panel.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


# 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.mdx

TextInput은 사용자가 데이터를 입력할 수 있도록 텍스트, 숫자 등 다양한 형식의 입력 필드를 제공합니다.

***

title: 'TextInput'
site\_name: 'TextInput - Vapor Core'
description: 'TextInput은 사용자가 데이터를 입력할 수 있도록 텍스트, 숫자 등 다양한 형식의 입력 필드를 제공합니다.'
-----------------------------------------------------------------------------

<Demo name="text-input/default-text-input">
  ```tsx
  import { TextInput } from '@vapor-ui/core';

  export default function DefaultTextInput() {
      return <TextInput />;
  }

  ```
</Demo>

## Property

***

### Size

TextInput의 크기를 설정합니다.

<Demo name="text-input/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="text-input/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="text-input/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="text-input/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="text-input/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="text-input/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` |                                                                                                              |
| `size`          | `sm`, `md`, `lg`, `xl`                                                                    | `md`    |                                                                                                              |
| `defaultValue`  | `string`                                                                                  | \`\`    | input의 기본값을 지정합니다. 비제어 방식으로 사용할 때 설정합니다.                                                                     |
| `onValueChange` | `(value: string, event: TextInput.ChangeEventDetails) => void`                            | -       | input의 선택된 값이 변경될 때 호출되는 이벤트 핸들러입니다.                                                                         |
| `value`         | `string`                                                                                  | -       | input의 값을 지정합니다. 제어 방식으로 사용할 때 설정합니다.                                                                        |
| `className`     | `string \| ((state: TextInput.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `type`          | `search`, `text`, `tel`, `url`, `email`, `password`                                       | -       | input 요소의 타입을 지정합니다. 입력할 수 있는 데이터의 종류를 결정합니다.                                                                |
| `style`         | `React.CSSProperties \| ((state: TextInput.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`        | `ReactElement \| ((props: HTMLProps, state: TextInput.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Text 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다.

***

title: 'Text'
site\_name: 'Text - Vapor Core'
description: 'Text 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다.'
--------------------------------------------------------------------

<Demo name="text/default-text">
  ```tsx
  import { Text } from '@vapor-ui/core';

  export default function DefaultText() {
      return <Text>Hello World</Text>;
  }

  ```
</Demo>

## Property

***

### Typography

텍스트의 타이포그래피 스타일을 설정합니다.

<Demo name="text/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="text/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` | `white`, `inverse`, `primary-100`, `primary-200`, `secondary-100`, `success-100`, `success-200`, `warning-100`, `warning-200`, `danger-100`, `danger-200`, `hint-100`, `hint-200`, `contrast-100`, `contrast-200`, `secondary-200`, `normal-100`, `normal-200` | `normal-200` |                                                                                                              |
| `typography` | `body1`, `display1`, `display2`, `display3`, `display4`, `heading1`, `heading2`, `heading3`, `heading4`, `heading5`, `heading6`, `subtitle1`, `subtitle2`, `body2`, `body3`, `body4`, `code1`, `code2`                                                         | `body1`      |                                                                                                              |
| `className`  | `string \| ((state: Text.State) => (string \| undefined))`                                                                                                                                                                                                     | -            | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`     | `ReactElement \| ((props: HTMLProps, state: Text.State) => ReactElement)`                                                                                                                                                                                      | -            | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Textarea는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 하는 텍스트 입력 필드를 제공합니다.

***

title: 'Textarea'
site\_name: 'Textarea - Vapor Core'
description: 'Textarea는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 하는 텍스트 입력 필드를 제공합니다.'
-----------------------------------------------------------------------

<Demo name="textarea/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="textarea/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="textarea/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="textarea/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="textarea/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` |                                                                                                              |
| `invalid`       | `boolean`                                                                    | `false` |                                                                                                              |
| `size`          | `sm`, `md`, `lg`, `xl`                                                       | `md`    |                                                                                                              |
| `defaultValue`  | `string`                                                                     | \`\`    | textarea의 기본값을 지정합니다. 비제어 방식으로 사용할 때 설정합니다.                                                                  |
| `onValueChange` | `(value: string, event: Textarea.ChangeEventDetails) => void`                | -       | textarea의 값이 변경될 때 호출되는 이벤트 핸들러입니다.                                                                          |
| `value`         | `string`                                                                     | -       | textarea의 값을 설정합니다. 제어 컴포넌트로 사용할 때 지정합니다.                                                                    |
| `className`     | `string \| ((state: TextareaState) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`        | `ReactElement \| ((props: HTMLProps, state: TextareaState) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

Toast는 일시적인 알림 메시지를 사용자에게 표시하는 컴포넌트입니다.

***

title: 'Toast'
site\_name: 'Toast - Vapor Core'
description: 'Toast는 일시적인 알림 메시지를 사용자에게 표시하는 컴포넌트입니다.'
------------------------------------------------------

Toast 컴포넌트는 화면의 모서리에 일시적인 알림 메시지를 표시하는 데 사용됩니다.

사용자의 작업에 대한 피드백을 제공하고, 피드백을 하나의 리스트로 관리하기 때문에 다른 컴포넌트와 사용 방식이 다릅니다.

<Demo name="toast/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="toast/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="toast/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="toast/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="toast/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="toast/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="toast/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                                                                                                                               |
| -------------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `toastManager` | `ToastManager` | -       | React 컴포넌트 외부에서 토스트를 사용하기 위한 전역 매니저입니다.                                                                                                   |
| `children`     | `ReactNode`    | -       |                                                                                                                                           |
| `limit`        | `number`       | -       | 한 번에 표시할 수 있는 토스트의 최대 개수를 설정합니다.<br />한도를 초과하면 가장 오래된 토스트가 제거되지 않고 `limited` 상태로 표시되며(`data-limited` 속성을 통해), 숨기거나 애니메이션으로 사라지게 할 수 있습니다. |
| `timeout`      | `number`       | `4000`  | 토스트가 자동으로 닫히기까지의 기본 시간(밀리초)을 설정합니다.<br />`0`으로 설정하면 토스트가 자동으로 닫히지 않습니다.                                                                   |

### Toast.ProviderPrimitive

| Prop           | Type           | Default | Description                                                                                                                               |
| -------------- | -------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `toastManager` | `ToastManager` | -       | React 컴포넌트 외부에서 토스트를 사용하기 위한 전역 매니저입니다.                                                                                                   |
| `children`     | `ReactNode`    | -       |                                                                                                                                           |
| `limit`        | `number`       | -       | 한 번에 표시할 수 있는 토스트의 최대 개수를 설정합니다.<br />한도를 초과하면 가장 오래된 토스트가 제거되지 않고 `limited` 상태로 표시되며(`data-limited` 속성을 통해), 숨기거나 애니메이션으로 사라지게 할 수 있습니다. |
| `timeout`      | `number`       | -       | 토스트가 자동으로 닫히기까지의 기본 시간(밀리초)을 설정합니다.<br />`0`으로 설정하면 토스트가 자동으로 닫히지 않습니다.                                                                   |

### Toast.PortalPrimitive

| Prop        | Type                                                                                                                                                          | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Toast.PortalPrimitive.State) => (string \| undefined))`                                                                                   | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `container` | `HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`                                                                     | -       | 포털 요소를 렌더링할 부모 요소를 지정합니다.                                                                                    |
| `style`     | `React.CSSProperties \| ((state: Toast.PortalPrimitive.State) => (React.CSSProperties \| undefined)) \| ((state: any) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Toast.PortalPrimitive.State) => ReactElement) \| ((props: HTMLProps, state: any) => ReactElement)`                | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Toast.ViewportPrimitive

| Prop        | Type                                                                                                    | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Toast.ViewportPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Toast.ViewportPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Toast.ViewportPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Toast.RootPrimitive

| Prop             | Type                                                                                                | Default           | Description                                                                                                  |
| ---------------- | --------------------------------------------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------ |
| **toast**        | `ToastObjectType<any>`                                                                              | -                 |                                                                                                              |
| `className`      | `string \| ((state: Toast.RootPrimitive.State) => (string \| undefined))`                           | -                 | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`          | `React.CSSProperties \| ((state: Toast.RootPrimitive.State) => (React.CSSProperties \| undefined))` | -                 | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `swipeDirection` | `"left" \| "right" \| "up" \| "down" \| ("left" \| "right" \| "up" \| "down")[]`                    | `['up', 'right']` | 토스트를 닫을 때 스와이프할 수 있는 방향을 설정합니다.                                                                              |
| `render`         | `ReactElement \| ((props: HTMLProps, state: Toast.RootPrimitive.State) => ReactElement)`            | -                 | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Toast.ContentPrimitive

| Prop        | Type                                                                                                   | Default | Description                                                                                                  |
| ----------- | ------------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Toast.ContentPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Toast.ContentPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Toast.ContentPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Toast.TitlePrimitive

| Prop        | Type                                                                                                 | Default | Description                                                                                                  |
| ----------- | ---------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Toast.TitlePrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Toast.TitlePrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Toast.TitlePrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Toast.DescriptionPrimitive

| Prop        | Type                                                                                                       | Default | Description                                                                                                  |
| ----------- | ---------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Toast.DescriptionPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Toast.DescriptionPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Toast.DescriptionPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Toast.ActionPrimitive

| Prop           | Type                                                                                                  | Default | Description                                                                                                                          |
| -------------- | ----------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: Toast.ActionPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `nativeButton` | `boolean`                                                                                             | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: Toast.ActionPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Toast.ActionPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

### Toast.ClosePrimitive

| Prop           | Type                                                                                                 | Default | Description                                                                                                                          |
| -------------- | ---------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `className`    | `string \| ((state: Toast.ClosePrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                     |
| `nativeButton` | `boolean`                                                                                            | -       | `render` prop으로 요소를 교체할 때 컴포넌트가 네이티브 `&lt;button&gt;` 요소를 렌더링할지 여부를 지정합니다.<br />렌더링할 요소가 버튼이 아닌 경우(예: `&lt;div&gt;`) `false`로 설정합니다. |
| `style`        | `React.CSSProperties \| ((state: Toast.ClosePrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                      |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Toast.ClosePrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                         |

### Toast.IconPrimitive

| Prop        | Type                                                                                    | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: ToastIconPrimitive.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: ToastIconPrimitive.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


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

요소에 대한 추가 정보를 제공하는 툴팁 컴포넌트입니다

***

title: 'Tooltip'
site\_name: 'Tooltip - Vapor Core'
description: '요소에 대한 추가 정보를 제공하는 툴팁 컴포넌트입니다'
--------------------------------------------

<Demo name="tooltip/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="tooltip/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="tooltip/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="tooltip/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="tooltip/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="tooltip/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`                                                                                                                                                                                           | -       | 툴팁의 초기 열림 여부를 지정합니다.<br /><br />제어 툴팁을 렌더링하려면 `open` prop을 사용하십시오.                                                                    |
| `onOpenChange`          | `(open: boolean, eventDetails: Tooltip.Root.ChangeEventDetails) => void`                                                                                                                            | -       | 툴팁이 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다.                                                                                                        |
| `open`                  | `boolean`                                                                                                                                                                                           | -       | 툴팁의 현재 열림 여부를 지정합니다.                                                                                                                  |
| `actionsRef`            | `React.RefObject<TooltipRootActions \| null>`                                                                                                                                                       | -       | 명령형 액션에 대한 ref를 지정합니다.<br />- `unmount`: 툴팁 팝업을 언마운트합니다.<br />- `close`: 호출 시 툴팁을 명령형으로 닫습니다.                                         |
| `children`              | `null \| string \| number \| bigint \| false \| true \| ReactElement \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<AwaitedReactNode> \| ((arg: { payload: unknown; }) => ReactNode)` | -       | 툴팁의 콘텐츠를 지정합니다.<br />일반 React 노드 또는 활성 트리거의 `payload`를 받는 렌더 함수를 전달할 수 있습니다.                                                          |
| `defaultTriggerId`      | `string`, `null`                                                                                                                                                                                    | -       | 툴팁과 연결할 트리거의 ID를 지정합니다.<br />초기에 열린 상태의 툴팁을 만들 때 `defaultOpen` prop과 함께 사용하면 유용합니다.                                                   |
| `disabled`              | `boolean`                                                                                                                                                                                           | -       | 툴팁의 비활성화 여부를 지정합니다.                                                                                                                   |
| `disableHoverablePopup` | `boolean`                                                                                                                                                                                           | -       | 툴팁이 닫히지 않은 상태에서 툴팁 콘텐츠를 호버할 수 있는지 여부를 지정합니다.                                                                                          |
| `handle`                | `TooltipHandle<unknown>`                                                                                                                                                                            | -       | 툴팁을 트리거와 연결할 핸들을 지정합니다.<br />지정하면 외부 트리거에서 툴팁의 열림 상태를 설정할 수 있습니다.<br />Tooltip.createHandle() 메서드로 생성할 수 있습니다.                        |
| `onOpenChangeComplete`  | `(open: boolean) => void`                                                                                                                                                                           | -       | 툴팁이 열리거나 닫힐 때 모든 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다.                                                                                        |
| `trackCursorAxis`       | `none`, `both`, `x`, `y`                                                                                                                                                                            | -       | 툴팁이 커서를 추적할 축을 지정합니다.                                                                                                                 |
| `triggerId`             | `string`, `null`                                                                                                                                                                                    | -       | 툴팁과 연결할 트리거의 ID를 지정합니다.<br />제어 툴팁을 만들 때 `open` prop과 함께 사용하면 유용합니다.<br />비제어 툴팁(즉, `open` prop을 설정하지 않은 경우)에서는 이 prop을 지정할 필요가 없습니다. |

### Tooltip.Trigger

| Prop           | Type                                                                                            | Default | Description                                                                                                                                                                  |
| -------------- | ----------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`    | `string \| ((state: Tooltip.Trigger.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                             |
| `closeDelay`   | `number`                                                                                        | -       | 툴팁을 닫기 전 대기 시간을 밀리초 단위로 지정합니다.                                                                                                                                               |
| `closeOnClick` | `boolean`                                                                                       | -       | 이 트리거를 클릭했을 때 툴팁을 닫을지 여부를 지정합니다.                                                                                                                                             |
| `delay`        | `number`                                                                                        | -       | 툴팁을 열기 전 대기 시간을 밀리초 단위로 지정합니다.                                                                                                                                               |
| `disabled`     | `boolean`                                                                                       | -       | `true`로 설정하면 이 트리거와 상호작용해도 툴팁이 열리지 않습니다.<br />이 prop은 트리거 엘리먼트에 `disabled` 속성을 적용하지 않습니다.<br />트리거 엘리먼트 자체를 비활성화하려면 `render` prop을 통해 트리거 엘리먼트에 `disabled` prop을 전달할 수 있습니다. |
| `handle`       | `TooltipHandle<unknown>`                                                                        | -       | 트리거를 툴팁과 연결할 핸들을 지정합니다.                                                                                                                                                      |
| `payload`      | `unknown`                                                                                       | -       | 툴팁이 열릴 때 전달할 페이로드를 지정합니다.                                                                                                                                                    |
| `style`        | `React.CSSProperties \| ((state: Tooltip.Trigger.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                              |
| `render`       | `ReactElement \| ((props: HTMLProps, state: Tooltip.Trigger.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                 |

### Tooltip.Popup

| Prop                | Type                                                                                          | Default | Description                                                                                                  |
| ------------------- | --------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`         | `string \| ((state: Tooltip.Popup.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `portalElement`     | `ReactElement<TooltipPortalPrimitive.Props, string \| JSXElementConstructor<any>>`            | -       | Tooltip.PortalPrimitive에 사용할 커스텀 엘리먼트를 지정합니다. 지정하지 않으면 기본 Tooltip.PortalPrimitive가 렌더링됩니다.                   |
| `positionerElement` | `ReactElement<TooltipPositionerPrimitive.Props, string \| JSXElementConstructor<any>>`        | -       | Tooltip.PositionerPrimitive에 사용할 커스텀 엘리먼트를 지정합니다. 지정하지 않으면 기본 Tooltip.PositionerPrimitive가 렌더링됩니다.           |
| `style`             | `React.CSSProperties \| ((state: Tooltip.Popup.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`            | `ReactElement \| ((props: HTMLProps, state: Tooltip.Popup.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Tooltip.PortalPrimitive

| Prop          | Type                                                                                                    | Default | Description                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className`   | `string \| ((state: Tooltip.PortalPrimitive.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `container`   | `HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`               | -       | 포털 요소를 렌더링할 부모 요소를 지정합니다.                                                                                    |
| `keepMounted` | `boolean`                                                                                               | -       | 팝업이 숨겨진 동안 포털을 DOM에 마운트된 상태로 유지할지 여부를 지정합니다.                                                                 |
| `style`       | `React.CSSProperties \| ((state: Tooltip.PortalPrimitive.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`      | `ReactElement \| ((props: HTMLProps, state: Tooltip.PortalPrimitive.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

#### Tooltip.PositionerPrimitive

| Prop                    | Type                                                                                                                                                      | Default  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className`             | `string \| ((state: Tooltip.PositionerPrimitive.State) => (string \| undefined))`                                                                         | -        | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `align`                 | `Align`                                                                                                                                                   | `center` | 지정된 side를 기준으로 팝업의 정렬 방식을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `alignOffset`           | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | -        | 정렬 축 방향의 추가 오프셋을 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 오프셋을 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `anchor`                | `null \| Element \| VirtualElement \| React.RefObject<Element \| null> \| (() => (Element \| VirtualElement \| null))`                                    | -        | 팝업을 배치할 기준 요소를 설정합니다.<br />기본적으로 트리거를 기준으로 팝업이 배치됩니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `arrowPadding`          | `number`                                                                                                                                                  | -        | 화살표와 팝업 모서리 사이의 최소 거리를 설정합니다.<br /><br />팝업의 둥근 모서리 바깥으로 화살표 요소가 벗어나지 않도록 할 때 사용합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `collisionAvoidance`    | `CollisionAvoidance`                                                                                                                                      | -        | 팝업을 배치할 때 충돌을 처리하는 방식을 설정합니다.<br /><br />`side`는 선호하는 배치 축(`top`/`bottom` 또는 `left`/`right`)의 오버플로를 처리합니다:<br />- `'flip'`: 요청한 side가 맞으면 유지하고, 맞지 않으면 반대 side(`top`과 `bottom`, 또는 `left`와 `right`)를 시도합니다.<br />- `'shift'`: side를 변경하지 않고 요청한 side를 유지하면서 클리핑 경계 내에서 팝업을 이동시켜 보이도록 합니다.<br />- `'none'`: side 축 오버플로를 보정하지 않습니다.<br /><br />`align`은 정렬 축(`start`/`center`/`end`)의 오버플로를 처리합니다:<br />- `'flip'`: side는 유지하되, 요청한 정렬이 오버플로되면 `start`와 `end`를 교체합니다.<br />- `'shift'`: side와 요청한 정렬을 유지하면서 팝업을 정렬 축을 따라 조금씩 이동시켜 맞춥니다.<br />- `'none'`: 정렬 축 오버플로를 보정하지 않습니다.<br /><br />`fallbackAxisSide`는 선호 축이 맞지 않을 때 수직 축의 폴백 동작을 처리합니다:<br />- `'start'`: 수직 축 폴백을 허용하고 논리적 시작 side를 먼저 시도합니다(LTR에서 `bottom` 전에 `top`, 또는 `right` 전에 `left`).<br />- `'end'`: 수직 축 폴백을 허용하고 논리적 끝 side를 먼저 시도합니다(LTR에서 `top` 전에 `bottom`, 또는 `left` 전에 `right`).<br />- `'none'`: 수직 축으로 폴백하지 않습니다.<br /><br />`side`가 `'shift'`인 경우, `align`을 명시적으로 설정하면 `'shift'` 또는 `'none'`만 지원됩니다.<br />`align`을 생략하면 기본값은 `'flip'`입니다. |
| `collisionBoundary`     | `Boundary`                                                                                                                                                | -        | 팝업이 벗어나지 않도록 제한할 영역을 나타내는 요소 또는 사각형을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `collisionPadding`      | `Padding`                                                                                                                                                 | -        | 충돌 경계 모서리로부터 유지할 추가 여백을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `disableAnchorTracking` | `boolean`                                                                                                                                                 | -        | 팝업이 배치 앵커의 레이아웃 변화를 추적하지 않도록 설정할지 여부를 지정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `positionMethod`        | `fixed`, `absolute`                                                                                                                                       | -        | 사용할 CSS `position` 속성을 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `side`                  | `Side`                                                                                                                                                    | `top`    | 팝업을 앵커 요소의 어느 side에 배치할지 설정합니다.<br />충돌을 피하기 위해 자동으로 변경될 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `sideOffset`            | `number \| ((data: { side: Side; align: Align; anchor: { width: number; height: number; }; positioner: { width: number; height: number; }; }) => number)` | `8`      | 앵커와 팝업 사이의 거리를 픽셀 단위로 설정합니다.<br />앵커 및 포지셔너 요소의 크기와 side, align 정보를 읽어 거리를 반환하는 함수도 허용합니다.<br /><br />함수는 다음 프로퍼티를 가진 `data` 객체를 매개변수로 받습니다:<br />- `data.anchor`: 앵커 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.positioner`: 포지셔너 요소의 크기로, `width`와 `height` 프로퍼티를 포함합니다.<br />- `data.side`: 포지셔너가 정렬된 앵커 요소의 side를 나타냅니다.<br />- `data.align`: 지정된 side를 기준으로 포지셔너가 정렬된 방식을 나타냅니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `sticky`                | `boolean`                                                                                                                                                 | -        | 앵커 요소가 스크롤되어 뷰포트 밖으로 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부를 설정합니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `style`                 | `React.CSSProperties \| ((state: Tooltip.PositionerPrimitive.State) => (React.CSSProperties \| undefined))`                                               | -        | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `render`                | `ReactElement \| ((props: HTMLProps, state: Tooltip.PositionerPrimitive.State) => ReactElement)`                                                          | -        | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

#### Tooltip.PopupPrimitive

| Prop        | Type                                                                                          | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: Tooltip.Popup.State) => (string \| undefined))`                           | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `style`     | `React.CSSProperties \| ((state: Tooltip.Popup.State) => (React.CSSProperties \| undefined))` | -       | 요소에 적용할 스타일을 지정합니다. 컴포넌트의 상태를 기반으로 스타일 객체를 반환하는 함수도 사용할 수 있습니다.                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Tooltip.Popup.State) => ReactElement)`            | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


# Box
URL: /docs/components/box
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(layouts)/box.mdx

레이아웃과 스타일링을 위한 기본 컨테이너 컴포넌트입니다. 디자인 토큰을 활용한 간격, 색상, 크기 등의 속성을 제공합니다.

***

title: 'Box'
site\_name: 'Box - Vapor Core'
description: '레이아웃과 스타일링을 위한 기본 컨테이너 컴포넌트입니다. 디자인 토큰을 활용한 간격, 색상, 크기 등의 속성을 제공합니다.'
-----------------------------------------------------------------------------------

<Demo name="box/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="box/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="box/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="box/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="box/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="box/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="box/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 \| ((state: Box.State) => (string \| undefined))`                | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Box.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


# Flex
URL: /docs/components/flex
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(layouts)/flex.mdx

플렉스박스 레이아웃을 쉽게 구현할 수 있는 컨테이너 컴포넌트입니다. Box 컴포넌트를 확장하여 플렉스 관련 기능을 제공합니다.

***

title: 'Flex'
site\_name: 'Flex - Vapor Core'
description: '플렉스박스 레이아웃을 쉽게 구현할 수 있는 컨테이너 컴포넌트입니다. Box 컴포넌트를 확장하여 플렉스 관련 기능을 제공합니다.'
-------------------------------------------------------------------------------------

<Demo name="flex/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="flex/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 \| ((state: Flex.State) => (string \| undefined))`                                                                          | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `inline`    | `boolean`                                                                                                                           | -       |                                                                                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Flex.State) => ReactElement) \| ((props: HTMLProps, state: Box.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


# Grid
URL: /docs/components/grid
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(layouts)/grid.mdx

유연하고 강력한 CSS Grid 기반의 레이아웃 컴포넌트입니다

***

title: 'Grid'
site\_name: 'Grid - Vapor Core'
description: '유연하고 강력한 CSS Grid 기반의 레이아웃 컴포넌트입니다'
-------------------------------------------------

<Demo name="grid/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="grid/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="grid/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="grid/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="grid/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="grid/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`            | `column`, `row`, `row-dense`, `column-dense`                                                                                            | `row`   |                                                                                                              |
| `className`       | `string \| ((state: GridRoot.State) => (string \| undefined))`                                                                          | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `inline`          | `boolean`                                                                                                                               | -       |                                                                                                              |
| `templateColumns` | `string`                                                                                                                                | -       |                                                                                                              |
| `templateRows`    | `string`                                                                                                                                | -       |                                                                                                              |
| `render`          | `ReactElement \| ((props: HTMLProps, state: Box.State) => ReactElement) \| ((props: HTMLProps, state: GridRoot.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |

### Grid.Item

| Prop        | Type                                                                                                                                    | Default | Description                                                                                                  |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ |
| `className` | `string \| ((state: GridItem.State) => (string \| undefined))`                                                                          | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `colSpan`   | `string`                                                                                                                                | -       |                                                                                                              |
| `rowSpan`   | `string`                                                                                                                                | -       |                                                                                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Box.State) => ReactElement) \| ((props: HTMLProps, state: GridItem.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


# 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.mdx

수평으로 아이템들을 배치하는 레이아웃 컴포넌트입니다

***

title: 'HStack'
site\_name: 'HStack - Vapor Core'
description: '수평으로 아이템들을 배치하는 레이아웃 컴포넌트입니다'
-------------------------------------------

<Demo name="h-stack/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="h-stack/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="h-stack/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 \| ((state: HStack.State) => (string \| undefined))`                                                                                                                                     | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `inline`    | `boolean`                                                                                                                                                                                        | -       |                                                                                                              |
| `reverse`   | `boolean`                                                                                                                                                                                        | -       |                                                                                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Flex.State) => ReactElement) \| ((props: HTMLProps, state: Box.State) => ReactElement) \| ((props: HTMLProps, state: HStack.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


# 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.mdx

수직으로 아이템들을 배치하는 레이아웃 컴포넌트입니다

***

title: 'VStack'
site\_name: 'VStack - Vapor Core'
description: '수직으로 아이템들을 배치하는 레이아웃 컴포넌트입니다'
-------------------------------------------

<Demo name="v-stack/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="v-stack/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="v-stack/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="v-stack/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="v-stack/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 \| ((state: VStack.State) => (string \| undefined))`                                                                                                                                     | -       | 요소에 적용할 CSS 클래스를 지정합니다. 컴포넌트의 상태를 기반으로 클래스를 반환하는 함수도 사용할 수 있습니다.                                             |
| `inline`    | `boolean`                                                                                                                                                                                        | -       |                                                                                                              |
| `reverse`   | `boolean`                                                                                                                                                                                        | -       |                                                                                                              |
| `render`    | `ReactElement \| ((props: HTMLProps, state: Flex.State) => ReactElement) \| ((props: HTMLProps, state: Box.State) => ReactElement) \| ((props: HTMLProps, state: VStack.State) => ReactElement)` | -       | 컴포넌트의 HTML 요소를 다른 태그로 교체하거나 다른 컴포넌트와 합성할 때 사용합니다.<br /><br />`ReactElement` 또는 렌더링할 요소를 반환하는 함수를 전달할 수 있습니다. |


# 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.mdx

여러 개의 입력 단위를 하나로 묶어 사용자로부터 정보를 수집하는 폼 영역

***

title: Form
description: 여러 개의 입력 단위를 하나로 묶어 사용자로부터 정보를 수집하는 폼 영역
previewImageUrl: /images/form-preview\.svg
------------------------------------------

### Type: Login

<Demo name="forms/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="forms/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="forms/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="forms/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="forms/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="forms/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.mdx

사용자의 액션에 대한 피드백 혹은 서비스에 대한 메시지를 제공할 때 사용할 수 있습니다.  상황에 따라 컬러와 좌측 아이콘, 닫기 버튼을 적절히 사용합니다.

***

title: Navbar
description: 사용자의 액션에 대한 피드백 혹은 서비스에 대한 메시지를 제공할 때 사용할 수 있습니다.  상황에 따라 컬러와 좌측 아이콘, 닫기 버튼을 적절히 사용합니다.
previewImageUrl: /images/nav-bar-preview\.svg
---------------------------------------------

### Left Aligned Navbar

<Demo name="navbars/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="navbars/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="navbars/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="navbars/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="navbars/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="navbars/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.mdx

데이터의 구조화된 표현을 제공하는 데 사용됩니다.

***

title: Table
description: 데이터의 구조화된 표현을 제공하는 데 사용됩니다.
previewImageUrl: /images/table-preview\.svg
-------------------------------------------

이 문서는 대량의 데이터를 다루는 Data Table의 구현 예시를 안내합니다.

Data Table은 데이터를 효율적으로 시각화하고 관리하는 강력한 도구이지만, 내부적으로 복잡한 상태 관리와 로직을 필요로 합니다. 이러한 기능을 컴포넌트 내부에 강결합하면 유지보수가 어렵고 확장성이 떨어지는 문제가 발생할 수 있습니다.

이에 따라 Vapor UI의 Table 컴포넌트는 순수한 뷰(View) 역할에 집중하여 기본적인 구조와 스타일을 제공합니다. 이 문서에서는 `@tanstack/react-table`과 같은 Headless UI 라이브러리를 활용하여 다양한 기능을 유연하게 구현하는 방법을 예시로 제공합니다.

### Basic

<Demo name="table/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="table/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="table/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="table/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="table/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="table/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="table/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="table/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="table/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>


# 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 컴포넌트의 구조를 직접 제어하는 방법을 설명합니다.

***

title: Composition
description: 기본 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 컴포넌트를 스타일링하고 커스터마이징하는 방법을 설명합니다.

***

title: Styling
description: 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를 사용하세요.

***

title: Tailwind CSS v4
description: 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의 테마 시스템에 대해 설명합니다.

***

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

***

title: Design Tokens
description: Vapor UI의 디자인 토큰에 대해 설명합니다.
----------------------------------------


# 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.mdx

Vapor UI를 프로젝트에 설치하고 첫 컴포넌트를 사용해보세요.

***

title: Installation
description: 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="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 컴포넌트 사용법


# 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의 컴포넌트 아키텍처와 개발 철학을 이끄는 핵심 디자인 원칙

***

title: Design Principles
description: 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 스킬을 설치하고 사용하는 방법

***

title: Agent Skills
description: 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 도구

***

title: Codemod
description: 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를 사용하여 접근성 규칙을 자동으로 검사하고 코드 품질을 향상시키세요.

***

title: ESLint Plugin
description: 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 문서를 활용하는 방법

***

title: LLMs.txt
description: 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)


# 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

컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다.

***

title: Color
description: 컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다.
---------------------------------------------------------

| token                                  | value                         |
| -------------------------------------- | ----------------------------- |
| --vapor-color-canvas                   | #ffffff                       |
| --vapor-color-white                    | #FFFFFF                       |
| --vapor-color-black                    | #000000                       |
| --vapor-color-gray-050                 | #f7f7f7                       |
| --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-secondary-100 | var(--vapor-color-gray-050)   |
| --vapor-color-background-secondary-200 | 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-warning-100   | var(--vapor-color-orange-100) |
| --vapor-color-background-warning-200   | 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-hint-100      | var(--vapor-color-gray-100)   |
| --vapor-color-background-hint-200      | 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-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-foreground-primary-100   | var(--vapor-color-blue-600)   |
| --vapor-color-foreground-primary-200   | 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-success-100   | var(--vapor-color-green-600)  |
| --vapor-color-foreground-success-200   | 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-danger-100    | var(--vapor-color-red-600)    |
| --vapor-color-foreground-danger-200    | 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-contrast-100  | var(--vapor-color-gray-800)   |
| --vapor-color-foreground-contrast-200  | var(--vapor-color-gray-900)   |
| --vapor-color-foreground-normal-100    | var(--vapor-color-gray-700)   |
| --vapor-color-foreground-normal-200    | var(--vapor-color-gray-900)   |
| --vapor-color-foreground-inverse       | var(--vapor-color-white)      |
| --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

요소의 크기,여백과 관련된 값을 정의하여 일관된 디자인을 유지하는 데 도움을 줍니다.

***

title: Size
description: 요소의 크기,여백과 관련된 값을 정의하여 일관된 디자인을 유지하는 데 도움을 줍니다.
------------------------------------------------------------

| 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

텍스트의 스타일과 형식을 정의하여 일관된 글꼴 사용과 가독성을 보장합니다.

***

title: Typography
description: 텍스트의 스타일과 형식을 정의하여 일관된 글꼴 사용과 가독성을 보장합니다.
------------------------------------------------------

| token                                | value      |
| ------------------------------------ | ---------- |
| --vapor-typography-fontFamily-sans   | Pretendard |
| --vapor-typography-fontFamily-code   | FiraCode   |
| --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      |